diff --git a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx similarity index 59% rename from packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx rename to packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx index 6b0a0ad43ee..d37ac92f583 100644 --- a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.story.tsx +++ b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx @@ -3,45 +3,45 @@ import React, { PureComponent } from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { TableReducePicker } from './TableReducePicker'; +import { StatsPicker } from './StatsPicker'; import { text, boolean } from '@storybook/addon-knobs'; interface State { - reducers: string[]; + stats: string[]; } export class WrapperWithState extends PureComponent { constructor(props: any) { super(props); this.state = { - reducers: this.toReducersArray(props.initialReducers), + stats: this.toStatsArray(props.initialReducers), }; } - toReducersArray = (txt: string): string[] => { + toStatsArray = (txt: string): string[] => { return txt.split(',').map(v => v.trim()); }; componentDidUpdate(prevProps: any) { const { initialReducers } = this.props; if (initialReducers !== prevProps.initialReducers) { - this.setState({ reducers: this.toReducersArray(initialReducers) }); + this.setState({ stats: this.toStatsArray(initialReducers) }); } } render() { - const { placeholder, defaultReducer, allowMultiple } = this.props; - const { reducers } = this.state; + const { placeholder, defaultStat, allowMultiple } = this.props; + const { stats } = this.state; return ( - { - action('Picked:')(reducers); - this.setState({ reducers }); + stats={stats} + onChange={(stats: string[]) => { + action('Picked:')(stats); + this.setState({ stats }); }} /> ); @@ -52,16 +52,16 @@ const story = storiesOf('UI/TableReducePicker', module); story.addDecorator(withCenteredStory); story.add('picker', () => { const placeholder = text('Placeholder Text', ''); - const defaultReducer = text('Default Reducer', ''); + const defaultStat = text('Default Stat', ''); const allowMultiple = boolean('Allow Multiple', false); - const initialReducers = text('Initial Reducers', ''); + const initialStats = text('Initial Stats', ''); return (
); diff --git a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx similarity index 58% rename from packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx rename to packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx index ec3b58582fa..b1114b7f61f 100644 --- a/packages/grafana-ui/src/components/TableReducePicker/TableReducePicker.tsx +++ b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.tsx @@ -4,19 +4,19 @@ import isArray from 'lodash/isArray'; import { Select } from '../index'; -import { getTableReducers } from '../../utils/tableReducer'; +import { getStatsCalculators } from '../../utils/statsCalculator'; import { SelectOptionItem } from '../Select/Select'; interface Props { placeholder?: string; - onChange: (reducers: string[]) => void; - reducers: string[]; + onChange: (stats: string[]) => void; + stats: string[]; width?: number; allowMultiple?: boolean; - defaultReducer?: string; + defaultStat?: string; } -export class TableReducePicker extends PureComponent { +export class StatsPicker extends PureComponent { static defaultProps = { width: 12, allowMultiple: false, @@ -31,25 +31,25 @@ export class TableReducePicker extends PureComponent { } checkInput = () => { - const { reducers, allowMultiple, defaultReducer, onChange } = this.props; + const { stats, allowMultiple, defaultStat, onChange } = this.props; // Check that the selected reducers are all real const notFound: string[] = []; - const current = getTableReducers(reducers, notFound); + const current = getStatsCalculators(stats, notFound); if (notFound.length > 0) { - console.warn('Unknown reducers', notFound, reducers); + console.warn('Unknown reducers', notFound, stats); onChange(current.map(reducer => reducer.value)); } // Make sure there is only one - if (!allowMultiple && reducers.length > 1) { - console.warn('Removing extra reducers', reducers); - onChange([reducers[0]]); + if (!allowMultiple && stats.length > 1) { + console.warn('Removing extra stat', stats); + onChange([stats[0]]); } // Set the reducer from callback - if (defaultReducer && reducers.length < 1) { - onChange([defaultReducer]); + if (defaultStat && stats.length < 1) { + onChange([defaultStat]); } }; @@ -63,17 +63,17 @@ export class TableReducePicker extends PureComponent { }; render() { - const { width, reducers, allowMultiple, defaultReducer, placeholder } = this.props; - const current = getTableReducers(reducers); + const { width, stats, allowMultiple, defaultStat, placeholder } = this.props; + const current = getStatsCalculators(stats); return (