From 6b0417207d4c93cbabc2115ebd3d5e14a31c70e1 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Mon, 3 May 2021 08:23:17 -0700 Subject: [PATCH] VizLegend: move onSeriesColorChanged to PanelContext (breaking change) (#33611) --- .../src/components/BarChart/BarChart.tsx | 4 +- .../src/components/Graph/GraphWithLegend.tsx | 5 +-- .../src/components/GraphNG/GraphNG.tsx | 4 +- .../components/PanelChrome/PanelContext.ts | 7 +++ .../src/components/PieChart/PieChart.tsx | 10 +---- .../src/components/PieChart/types.ts | 2 - .../src/components/Timeline/TimelineChart.tsx | 3 +- .../components/VizLegend/VizLegend.story.tsx | 23 +--------- .../src/components/VizLegend/VizLegend.tsx | 3 -- .../components/VizLegend/VizLegendList.tsx | 2 - .../VizLegend/VizLegendListItem.tsx | 15 +------ .../VizLegend/VizLegendSeriesIcon.tsx | 45 +++++++++++-------- .../components/VizLegend/VizLegendTable.tsx | 2 - .../VizLegend/VizLegendTableItem.tsx | 15 +------ .../src/components/VizLegend/types.ts | 4 -- .../src/components/uPlot/PlotLegend.tsx | 3 -- .../dashboard/dashgrid/PanelChrome.tsx | 6 +++ .../plugins/panel/barchart/BarChartPanel.tsx | 9 ---- .../plugins/panel/piechart/PieChartPanel.tsx | 11 +---- .../plugins/panel/timeline/TimelinePanel.tsx | 9 ---- .../panel/timeseries/TimeSeriesPanel.tsx | 9 ---- .../plugins/panel/xychart/XYChartPanel.tsx | 9 ---- 22 files changed, 51 insertions(+), 149 deletions(-) diff --git a/packages/grafana-ui/src/components/BarChart/BarChart.tsx b/packages/grafana-ui/src/components/BarChart/BarChart.tsx index a2d69184d85..15ab4a7c1ba 100644 --- a/packages/grafana-ui/src/components/BarChart/BarChart.tsx +++ b/packages/grafana-ui/src/components/BarChart/BarChart.tsx @@ -22,7 +22,6 @@ export interface BarChartProps extends Themeable2, BarChartOptions { data: DataFrame[]; structureRev?: number; // a number that will change when the data[] structure changes onLegendClick?: (event: GraphNGLegendEvent) => void; - onSeriesColorChange?: (label: string, color: string) => void; } interface BarChartState { @@ -87,7 +86,7 @@ class UnthemedBarChart extends React.Component { } renderLegend() { - const { legend, onSeriesColorChange, onLegendClick, data } = this.props; + const { legend, onLegendClick, data } = this.props; const { config } = this.state; if (!config || legend.displayMode === LegendDisplayMode.Hidden) { @@ -97,7 +96,6 @@ class UnthemedBarChart extends React.Component { ) => void; onToggleSort: (sortBy: string) => void; } @@ -58,7 +57,6 @@ export const GraphWithLegend: React.FunctionComponent = (p sortLegendDesc, legendDisplayMode, placement, - onSeriesColorChange, onSeriesToggle, onToggleSort, hideEmpty, @@ -120,7 +118,6 @@ export const GraphWithLegend: React.FunctionComponent = (p onSeriesToggle(item.label, event); } }} - onSeriesColorChange={onSeriesColorChange} onToggleSort={onToggleSort} /> diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index 17f14a37a40..ba29191e5bb 100755 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx @@ -27,7 +27,6 @@ export interface GraphNGProps extends Themeable2 { timeZone: TimeZone; fields?: XYFieldMatchers; // default will assume timeseries data onLegendClick?: (event: GraphNGLegendEvent) => void; - onSeriesColorChange?: (label: string, color: string) => void; children?: (builder: UPlotConfigBuilder, alignedDataFrame: DataFrame) => React.ReactNode; } @@ -114,7 +113,7 @@ class UnthemedGraphNG extends React.Component { }; renderLegend() { - const { legend, onSeriesColorChange, onLegendClick, data } = this.props; + const { legend, onLegendClick, data } = this.props; const { config } = this.state; if (!config || (legend && legend.displayMode === LegendDisplayMode.Hidden)) { @@ -125,7 +124,6 @@ class UnthemedGraphNG extends React.Component { void; } const PanelContextRoot = React.createContext({ diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx index b96aa2a0fff..b15e8ccb398 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx @@ -53,7 +53,6 @@ export function PieChart(props: PieChartProps) { fieldConfig, replaceVariables, tooltipOptions, - onSeriesColorChange, width, height, ...restProps @@ -128,14 +127,7 @@ function getLegend(props: PieChartProps, displayValues: FieldDisplay[]) { }; }); - return ( - - ); + return ; } function useSliceHighlightState() { diff --git a/packages/grafana-ui/src/components/PieChart/types.ts b/packages/grafana-ui/src/components/PieChart/types.ts index 0f75466e449..fc61e5fad17 100644 --- a/packages/grafana-ui/src/components/PieChart/types.ts +++ b/packages/grafana-ui/src/components/PieChart/types.ts @@ -13,7 +13,6 @@ export interface PieChartSvgProps { highlightedTitle?: string; displayLabels?: PieChartLabels[]; useGradients?: boolean; - onSeriesColorChange?: (label: string, color: string) => void; tooltipOptions: VizTooltipOptions; } @@ -26,7 +25,6 @@ export interface PieChartProps { pieType: PieChartType; displayLabels?: PieChartLabels[]; useGradients?: boolean; - onSeriesColorChange?: (label: string, color: string) => void; legendOptions?: PieChartLegendOptions; tooltipOptions: VizTooltipOptions; reduceOptions: ReduceDataOptions; diff --git a/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx b/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx index 3f8d480a621..35eb3b026cd 100755 --- a/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx +++ b/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx @@ -100,7 +100,7 @@ class UnthemedTimelineChart extends React.Component }; renderLegend() { - const { legend, onSeriesColorChange, onLegendClick, data } = this.props; + const { legend, onLegendClick, data } = this.props; const { config } = this.state; if (!config || (legend && legend.displayMode === LegendDisplayMode.Hidden)) { @@ -111,7 +111,6 @@ class UnthemedTimelineChart extends React.Component = ({ displayMode, seriesCount, n setItems(generateLegendItems(seriesCount, theme, stats)); }, [seriesCount, theme, stats]); - const onSeriesColorChange = (label: string, color: string) => { - setItems( - items.map((item) => { - if (item.label === label) { - return { - ...item, - color: color, - }; - } - - return item; - }) - ); - }; - const onLabelClick = (clickItem: VizLegendItem) => { setItems( items.map((item) => { @@ -89,13 +74,7 @@ const LegendStoryDemo: FC = ({ displayMode, seriesCount, n return (

{name}

- +

); }; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx index 9f5eed8e876..c4c2ed26712 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegend.tsx @@ -16,7 +16,6 @@ export const VizLegend: React.FunctionComponent = ({ sortDesc, onToggleSort, onLabelClick, - onSeriesColorChange, placement, className, }) => { @@ -65,7 +64,6 @@ export const VizLegend: React.FunctionComponent = ({ onToggleSort={onToggleSort} onLabelMouseEnter={onMouseEnter} onLabelMouseOut={onMouseOut} - onSeriesColorChange={onSeriesColorChange} /> ); case LegendDisplayMode.List: @@ -77,7 +75,6 @@ export const VizLegend: React.FunctionComponent = ({ onLabelMouseEnter={onMouseEnter} onLabelMouseOut={onMouseOut} onLabelClick={onLabelClick} - onSeriesColorChange={onSeriesColorChange} /> ); default: diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx index e9680a821a8..f161d3da610 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx @@ -15,7 +15,6 @@ export interface Props extends VizLegendBaseProps {} export const VizLegendList: React.FunctionComponent = ({ items, itemRenderer, - onSeriesColorChange, onLabelClick, onLabelMouseEnter, onLabelMouseOut, @@ -30,7 +29,6 @@ export const VizLegendList: React.FunctionComponent = ({ diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx index 3a2c71b91a7..70f903d3ce3 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { css, cx } from '@emotion/css'; import { VizLegendSeriesIcon } from './VizLegendSeriesIcon'; -import { VizLegendItem, SeriesColorChangeHandler } from './types'; +import { VizLegendItem } from './types'; import { VizLegendStatsList } from './VizLegendStatsList'; import { useStyles } from '../../themes'; import { GrafanaTheme } from '@grafana/data'; @@ -10,7 +10,6 @@ export interface Props { item: VizLegendItem; className?: string; onLabelClick?: (item: VizLegendItem, event: React.MouseEvent) => void; - onSeriesColorChange?: SeriesColorChangeHandler; onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent) => void; onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent) => void; } @@ -20,7 +19,6 @@ export interface Props { */ export const VizLegendListItem: React.FunctionComponent = ({ item, - onSeriesColorChange, onLabelClick, onLabelMouseEnter, onLabelMouseOut, @@ -54,18 +52,9 @@ export const VizLegendListItem: React.FunctionComponent = ({ [item, onLabelClick] ); - const onColorChange = useCallback( - (color: string) => { - if (onSeriesColorChange) { - onSeriesColorChange(item.label, color); - } - }, - [item, onSeriesColorChange] - ); - return (
- +
void; } /** * @internal */ -export const VizLegendSeriesIcon: React.FunctionComponent = ({ disabled, color, onColorChange }) => { - return disabled ? ( - - ) : ( - - {({ ref, showColorPicker, hideColorPicker }) => ( - - )} - +export const VizLegendSeriesIcon: React.FunctionComponent = ({ seriesName, color }) => { + const { onSeriesColorChange } = usePanelContext(); + const onChange = useCallback( + (color: string) => { + return onSeriesColorChange!(seriesName, color); + }, + [seriesName, onSeriesColorChange] ); + + if (seriesName && onSeriesColorChange) { + return ( + + {({ ref, showColorPicker, hideColorPicker }) => ( + + )} + + ); + } + return ; }; VizLegendSeriesIcon.displayName = 'VizLegendSeriesIcon'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx index b1ddb025867..5949023aef9 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx @@ -20,7 +20,6 @@ export const VizLegendTable: FC = ({ onLabelClick, onLabelMouseEnter, onLabelMouseOut, - onSeriesColorChange, }) => { const styles = useStyles(getStyles); @@ -57,7 +56,6 @@ export const VizLegendTable: FC = ({ ) => void; - onSeriesColorChange?: SeriesColorChangeHandler; onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent) => void; onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent) => void; } @@ -21,7 +20,6 @@ export interface Props { */ export const LegendTableItem: React.FunctionComponent = ({ item, - onSeriesColorChange, onLabelClick, onLabelMouseEnter, onLabelMouseOut, @@ -56,20 +54,11 @@ export const LegendTableItem: React.FunctionComponent = ({ [item, onLabelClick] ); - const onColorChange = useCallback( - (color: string) => { - if (onSeriesColorChange) { - onSeriesColorChange(item.label, color); - } - }, - [item, onSeriesColorChange] - ); - return ( - +
JSX.Element; - onSeriesColorChange?: SeriesColorChangeHandler; onLabelClick?: (item: VizLegendItem, event: React.MouseEvent) => void; onLabelMouseEnter?: (item: VizLegendItem, event: React.MouseEvent) => void; onLabelMouseOut?: (item: VizLegendItem, event: React.MouseEvent) => void; @@ -33,6 +32,3 @@ export interface VizLegendItem { getDisplayValues?: () => DisplayValue[]; fieldIndex?: DataFrameFieldIndex; } - -export type SeriesOptionChangeHandler = (label: string, option: TOption) => void; -export type SeriesColorChangeHandler = SeriesOptionChangeHandler; diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx index e1d9bbd110a..dcf575bf342 100644 --- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx +++ b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx @@ -14,14 +14,12 @@ const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1)); interface PlotLegendProps extends VizLegendOptions, Omit { data: DataFrame[]; config: UPlotConfigBuilder; - onSeriesColorChange?: (label: string, color: string) => void; onLegendClick?: (event: GraphNGLegendEvent) => void; } export const PlotLegend: React.FC = ({ data, config, - onSeriesColorChange, onLegendClick, placement, calcs, @@ -99,7 +97,6 @@ export const PlotLegend: React.FC = ({ placement={placement} items={legendItems} displayMode={displayMode} - onSeriesColorChange={onSeriesColorChange} /> ); diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 984216ca447..881c3e76d14 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -29,6 +29,7 @@ import { import { selectors } from '@grafana/e2e-selectors'; import { loadSnapshotData } from '../utils/loadSnapshotData'; import { RefreshEvent, RenderEvent } from 'app/types/events'; +import { changeSeriesColorConfigFactory } from 'app/plugins/panel/timeseries/overrides/colorSeriesConfigFactory'; const DEFAULT_PLUGIN_ERROR = 'Error in plugin'; @@ -75,11 +76,16 @@ export class PanelChrome extends Component { refreshWhenInView: false, context: { eventBus, + onSeriesColorChange: this.onSeriesColorChange, }, data: this.getInitialPanelDataState(), }; } + onSeriesColorChange = (label: string, color: string) => { + this.onFieldConfigChange(changeSeriesColorConfigFactory(label, color, this.props.panel.fieldConfig)); + }; + getInitialPanelDataState(): PanelData { return { state: LoadingState.NotStarted, diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index f8b2073ca8b..78f6d9e9f73 100755 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useMemo } from 'react'; import { FieldType, PanelProps, VizOrientation } from '@grafana/data'; import { BarChart, BarChartOptions, GraphNGLegendEvent } from '@grafana/ui'; -import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory'; import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory'; interface Props extends PanelProps {} @@ -32,13 +31,6 @@ export const BarChartPanel: React.FunctionComponent = ({ [fieldConfig, onFieldConfigChange, data.series] ); - const onSeriesColorChange = useCallback( - (label: string, color: string) => { - onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig)); - }, - [fieldConfig, onFieldConfigChange] - ); - if (!data || !data.series?.length) { return (
@@ -70,7 +62,6 @@ export const BarChartPanel: React.FunctionComponent = ({ width={width} height={height} onLegendClick={onLegendClick} - onSeriesColorChange={onSeriesColorChange} {...options} orientation={orientation} /> diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx index cfad454589c..167182b332c 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx @@ -1,8 +1,7 @@ -import React, { useCallback } from 'react'; +import React from 'react'; import { PieChart } from '@grafana/ui'; import { PieChartOptions } from './types'; import { PanelProps } from '@grafana/data'; -import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory'; interface Props extends PanelProps {} @@ -16,13 +15,6 @@ export const PieChartPanel: React.FC = ({ fieldConfig, timeZone, }) => { - const onSeriesColorChange = useCallback( - (label: string, color: string) => { - onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig)); - }, - [fieldConfig, onFieldConfigChange] - ); - return ( = ({ reduceOptions={options.reduceOptions} replaceVariables={replaceVariables} data={data.series} - onSeriesColorChange={onSeriesColorChange} pieType={options.pieType} displayLabels={options.displayLabels} legendOptions={options.legend} diff --git a/public/app/plugins/panel/timeline/TimelinePanel.tsx b/public/app/plugins/panel/timeline/TimelinePanel.tsx index c1d31ea1299..629ba7d32a0 100755 --- a/public/app/plugins/panel/timeline/TimelinePanel.tsx +++ b/public/app/plugins/panel/timeline/TimelinePanel.tsx @@ -1,7 +1,6 @@ import React, { useCallback } from 'react'; import { PanelProps } from '@grafana/data'; import { GraphNGLegendEvent, TimelineChart, TimelineOptions } from '@grafana/ui'; -import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory'; import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory'; interface TimelinePanelProps extends PanelProps {} @@ -26,13 +25,6 @@ export const TimelinePanel: React.FC = ({ [fieldConfig, onFieldConfigChange, data.series] ); - const onSeriesColorChange = useCallback( - (label: string, color: string) => { - onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig)); - }, - [fieldConfig, onFieldConfigChange] - ); - if (!data || !data.series?.length) { return (
@@ -50,7 +42,6 @@ export const TimelinePanel: React.FC = ({ width={width} height={height} onLegendClick={onLegendClick} - onSeriesColorChange={onSeriesColorChange} {...options} /> ); diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index fc64d4bec62..873047033ad 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx @@ -2,7 +2,6 @@ import { Field, PanelProps } from '@grafana/data'; import { GraphNG, GraphNGLegendEvent, TooltipPlugin, ZoomPlugin } from '@grafana/ui'; import { getFieldLinksForExplore } from 'app/features/explore/utils/links'; import React, { useCallback } from 'react'; -import { changeSeriesColorConfigFactory } from './overrides/colorSeriesConfigFactory'; import { hideSeriesConfigFactory } from './overrides/hideSeriesConfigFactory'; import { AnnotationsPlugin } from './plugins/AnnotationsPlugin'; import { ContextMenuPlugin } from './plugins/ContextMenuPlugin'; @@ -34,13 +33,6 @@ export const TimeSeriesPanel: React.FC = ({ return getFieldLinksForExplore({ field, rowIndex, range: timeRange }); }; - const onSeriesColorChange = useCallback( - (label: string, color: string) => { - onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig)); - }, - [fieldConfig, onFieldConfigChange] - ); - if (!data || !data.series?.length) { return (
@@ -59,7 +51,6 @@ export const TimeSeriesPanel: React.FC = ({ height={height} legend={options.legend} onLegendClick={onLegendClick} - onSeriesColorChange={onSeriesColorChange} > {(config, alignedDataFrame) => { return ( diff --git a/public/app/plugins/panel/xychart/XYChartPanel.tsx b/public/app/plugins/panel/xychart/XYChartPanel.tsx index 3a9aa848f10..5a02c2d3baf 100644 --- a/public/app/plugins/panel/xychart/XYChartPanel.tsx +++ b/public/app/plugins/panel/xychart/XYChartPanel.tsx @@ -4,7 +4,6 @@ import { PanelProps } from '@grafana/data'; import { Options } from './types'; import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory'; import { getXYDimensions } from './dims'; -import { changeSeriesColorConfigFactory } from '../timeseries/overrides/colorSeriesConfigFactory'; interface XYChartPanelProps extends PanelProps {} @@ -29,13 +28,6 @@ export const XYChartPanel: React.FC = ({ [fieldConfig, onFieldConfigChange, frames] ); - const onSeriesColorChange = useCallback( - (label: string, color: string) => { - onFieldConfigChange(changeSeriesColorConfigFactory(label, color, fieldConfig)); - }, - [fieldConfig, onFieldConfigChange] - ); - if (dims.error) { return (
@@ -61,7 +53,6 @@ export const XYChartPanel: React.FC = ({ height={height} legend={options.legend} onLegendClick={onLegendClick} - onSeriesColorChange={onSeriesColorChange} > {(config, alignedDataFrame) => { return (