wip

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<VizLegendItem | undefined>((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<VizLegendItem | undefined>((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 (
       <VizLayout.Legend placement={placement} {...vizLayoutLegendProps}>

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<string | PropDiffFn>;
   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<GraphNGProps, GraphNGState> {
     }
 
     return (
-      <VizLayout width={width} height={height} legend={renderLegend(config)}>
+      <VizLayout width={width} height={height} legend={renderLegend(config, alignedFrame)}>
         {(vizWidth: number, vizHeight: number) => (
           <UPlotChart
             config={config}

public/app/core/components/TimeSeries/TimeSeries.tsx

@@ -31,14 +31,14 @@ export class UnthemedTimeSeries extends Component<TimeSeriesProps> {
     });
   };
 
-  renderLegend = (config: UPlotConfigBuilder) => {
+  renderLegend = (config: UPlotConfigBuilder, alignedFrame: DataFrame) => {
     const { legend, frames } = this.props;
 
     if (!config || (legend && !legend.showLegend) || !hasVisibleLegendSeries(config, frames)) {
       return null;
     }
 
-    return <PlotLegend data={frames} config={config} {...legend} />;
+    return <PlotLegend data={[alignedFrame]} config={config} {...legend} />;
   };
 
   render() {

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,