From 08f18b0cae8532d1d6dbef01bbb84c78810d927e Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Mon, 25 Nov 2024 11:46:18 -0600 Subject: [PATCH] wip --- .../src/components/uPlot/PlotLegend.tsx | 74 ++++++++++++++----- .../app/core/components/GraphNG/GraphNG.tsx | 4 +- .../core/components/TimeSeries/TimeSeries.tsx | 4 +- .../app/core/components/TimeSeries/utils.ts | 5 +- 4 files changed, 64 insertions(+), 23 deletions(-) diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx index 0163d9483c5..dc922829133 100644 --- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx +++ b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx @@ -42,39 +42,79 @@ export function hasVisibleLegendSeries(config: UPlotConfigBuilder, data: DataFra export const PlotLegend = memo( ({ data, config, placement, calcs, displayMode, ...vizLayoutLegendProps }: PlotLegendProps) => { const theme = useTheme2(); - const legendItems = config - .getSeries() - .map((s) => { - const seriesConfig = s.props; - const fieldIndex = seriesConfig.dataFrameFieldIndex; - const axisPlacement = config.getAxisPlacement(s.props.scaleKey); - if (!fieldIndex) { + const alignedFrame = data[0]!; + const cfgSeries = config.getSeries(); + + const legendItems: VizLegendItem[] = alignedFrame.fields + .map((field, i) => { + if (i === 0 || field.config.custom?.hideFrom.legend) { return undefined; } - const field = data[fieldIndex.frameIndex]?.fields[fieldIndex.fieldIndex]; + const dataFrameFieldIndex = field.state?.origin!; - if (!field || field.config.custom?.hideFrom?.legend) { - return undefined; - } + const seriesConfig = cfgSeries.find(({ props }) => { + const { dataFrameFieldIndex: dataFrameFieldIndexCfg } = props; - const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data); + return ( + dataFrameFieldIndexCfg?.frameIndex === dataFrameFieldIndex.frameIndex && + dataFrameFieldIndexCfg?.fieldIndex === dataFrameFieldIndex.fieldIndex + ); + })!; + + const axisPlacement = config.getAxisPlacement(seriesConfig.props.scaleKey); + + const label = field.state?.displayName ?? field.name; const scaleColor = getFieldSeriesColor(field, theme); const seriesColor = scaleColor.color; return { - disabled: !(seriesConfig.show ?? true), - fieldIndex, + disabled: field.state?.hideFrom?.viz, + fieldIndex: dataFrameFieldIndex, color: seriesColor, label, yAxis: axisPlacement === AxisPlacement.Left || axisPlacement === AxisPlacement.Bottom ? 1 : 2, getDisplayValues: () => getDisplayValuesForCalcs(calcs, field, theme), - getItemKey: () => `${label}-${fieldIndex.frameIndex}-${fieldIndex.fieldIndex}`, - lineStyle: seriesConfig.lineStyle, + getItemKey: () => `${label}-${dataFrameFieldIndex.frameIndex}-${dataFrameFieldIndex.fieldIndex}`, + lineStyle: field.config.custom.lineStyle, }; }) - .filter((i): i is VizLegendItem => i !== undefined); + .filter((item) => item !== undefined); + + // const legendItems = config + // .getSeries() + // .map((s) => { + // const seriesConfig = s.props; + // const fieldIndex = seriesConfig.dataFrameFieldIndex; + // const axisPlacement = config.getAxisPlacement(s.props.scaleKey); + + // if (!fieldIndex) { + // return undefined; + // } + + // const field = data[fieldIndex.frameIndex]?.fields[fieldIndex.fieldIndex]; + + // if (!field || field.config.custom?.hideFrom?.legend) { + // return undefined; + // } + + // const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data); + // const scaleColor = getFieldSeriesColor(field, theme); + // const seriesColor = scaleColor.color; + + // return { + // disabled: !(seriesConfig.show ?? true), + // fieldIndex, + // color: seriesColor, + // label, + // yAxis: axisPlacement === AxisPlacement.Left || axisPlacement === AxisPlacement.Bottom ? 1 : 2, + // getDisplayValues: () => getDisplayValuesForCalcs(calcs, field, theme), + // getItemKey: () => `${label}-${fieldIndex.frameIndex}-${fieldIndex.fieldIndex}`, + // lineStyle: seriesConfig.lineStyle, + // }; + // }) + // .filter((i): i is VizLegendItem => i !== undefined); return ( diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx index f8c18c0d3e9..1a40e5032b8 100644 --- a/public/app/core/components/GraphNG/GraphNG.tsx +++ b/public/app/core/components/GraphNG/GraphNG.tsx @@ -47,7 +47,7 @@ export interface GraphNGProps extends Themeable2 { prepConfig: (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder; propsToDiff?: Array; preparePlotFrame?: (frames: DataFrame[], dimFields: XYFieldMatchers) => DataFrame | null; - renderLegend: (config: UPlotConfigBuilder) => React.ReactElement | null; + renderLegend: (config: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactElement | null; replaceVariables: InterpolateFunction; dataLinkPostProcessor?: DataLinkPostProcessor; cursorSync?: DashboardCursorSync; @@ -245,7 +245,7 @@ export class GraphNG extends Component { } return ( - + {(vizWidth: number, vizHeight: number) => ( { }); }; - renderLegend = (config: UPlotConfigBuilder) => { + renderLegend = (config: UPlotConfigBuilder, alignedFrame: DataFrame) => { const { legend, frames } = this.props; if (!config || (legend && !legend.showLegend) || !hasVisibleLegendSeries(config, frames)) { return null; } - return ; + return ; }; render() { diff --git a/public/app/core/components/TimeSeries/utils.ts b/public/app/core/components/TimeSeries/utils.ts index 32aaa61ea9e..71e9b1642ea 100644 --- a/public/app/core/components/TimeSeries/utils.ts +++ b/public/app/core/components/TimeSeries/utils.ts @@ -210,7 +210,9 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ const customConfig: GraphFieldConfig = config.custom!; - if (field === xField || (field.type !== FieldType.number && field.type !== FieldType.enum)) { + const isHidden = config.custom?.hideFrom?.viz || field.state?.hideFrom?.viz; + + if (field === xField || isHidden || (field.type !== FieldType.number && field.type !== FieldType.enum)) { continue; } @@ -497,7 +499,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ barMaxWidth: customConfig.barMaxWidth, pointSize: customConfig.pointSize, spanNulls: customConfig.spanNulls || false, - show: !customConfig.hideFrom?.viz && !field.state?.hideFrom?.viz, gradientMode: customConfig.gradientMode, thresholds: config.thresholds, hardMin: field.config.min,