diff --git a/public/app/plugins/panel/graph2/GraphLegendEditor.tsx b/public/app/plugins/panel/graph2/GraphLegendEditor.tsx index 7d5d914fb92..5f91d6ced70 100644 --- a/public/app/plugins/panel/graph2/GraphLegendEditor.tsx +++ b/public/app/plugins/panel/graph2/GraphLegendEditor.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import capitalize from 'lodash/capitalize'; -import without from 'lodash/without'; -import { LegendOptions, PanelOptionsGroup, Switch, Input } from '@grafana/ui'; +import { LegendOptions, PanelOptionsGroup, Switch, Input, StatsPicker } from '@grafana/ui'; export interface GraphLegendEditorLegendOptions extends LegendOptions { stats?: string[]; @@ -11,29 +9,17 @@ export interface GraphLegendEditorLegendOptions extends LegendOptions { } interface GraphLegendEditorProps { - stats: string[]; options: GraphLegendEditorLegendOptions; onChange: (options: GraphLegendEditorLegendOptions) => void; } export const GraphLegendEditor: React.FunctionComponent = props => { - const { stats, options, onChange } = props; + const { options, onChange } = props; - const onStatToggle = (stat: string) => (event?: React.SyntheticEvent) => { - let newStats; - if (!event) { - return; - } - - // @ts-ignore - if (event.target.checked) { - newStats = (options.stats || []).concat([stat]); - } else { - newStats = without(options.stats, stat); - } + const onStatsChanged = (stats: string[]) => { onChange({ ...options, - stats: newStats, + stats, }); }; @@ -56,26 +42,42 @@ export const GraphLegendEditor: React.FunctionComponent }); }; + const labelWidth = 8; return (

Options

- - - + + +
+
-

Values

- {stats.map(stat => { - return ( - -1} - onChange={onStatToggle(stat)} - key={stat} - /> - ); - })} +

Show

+
+ +
+
Decimals
> {
- + ); }