Typechecks

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -76,6 +76,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
       : acc.concat([
           {
             label: s.label,
+            name: s.label,
             color: s.color || '',
             disabled: !s.isVisible,
             yAxis: s.yAxis.index,
@@ -115,7 +116,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
               sortDesc={sortLegendDesc}
               onLabelClick={(item, event) => {
                 if (onSeriesToggle) {
-                  onSeriesToggle(item.label, event);
+                  onSeriesToggle(item.name, event);
                 }
               }}
               onToggleSort={onToggleSort}

packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx

@@ -158,6 +158,7 @@ function generateLegendItems(
   return [...new Array(numberOfSeries)].map((item, i) => {
     return {
       label: `${alphabet[i].toUpperCase()}-series`,
+      name: `${alphabet[i].toUpperCase()}-series`,
       color: colors[i],
       yAxis: 1,
       displayValues: statsToDisplay || [],

packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx

@@ -59,9 +59,9 @@ export const VizLegendListItem = <T extends unknown = any>({
   return (
     <div
       className={cx(styles.itemWrapper, item.disabled && styles.itemDisabled, className)}
-      aria-label={selectors.components.VizLegend.seriesName(item.label)}
+      aria-label={selectors.components.VizLegend.seriesName(item.name)}
     >
-      <VizLegendSeriesIcon seriesName={item.label} color={item.color} gradient={item.gradient} readonly={readonly} />
+      <VizLegendSeriesIcon seriesName={item.name} color={item.color} gradient={item.gradient} readonly={readonly} />
       <div
         onMouseEnter={onMouseEnter}
         onMouseOut={onMouseOut}

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -60,7 +60,7 @@ export const LegendTableItem: React.FunctionComponent<Props> = ({
     <tr className={cx(styles.row, className)}>
       <td>
         <span className={styles.itemWrapper}>
-          <VizLegendSeriesIcon color={item.color} seriesName={item.label} readonly={readonly} />
+          <VizLegendSeriesIcon color={item.color} seriesName={item.name} readonly={readonly} />
           <div
             onMouseEnter={onMouseEnter}
             onMouseOut={onMouseOut}

public/app/plugins/panel/nodeGraph/Legend.tsx

@@ -91,6 +91,7 @@ function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<Viz
   return fields.map((f) => {
     const item: VizLegendItem = {
       label: f.config.displayName || f.name,
+      name: f.config.displayName || f.name,
       yAxis: 0,
       data: { field: f },
     };

public/app/plugins/panel/piechart/PieChartPanel.tsx

@@ -101,6 +101,7 @@ function getLegend(props: Props, displayValues: FieldDisplay[]) {
       const display = value.display;
       return {
         label: display.title ?? '',
+        name: display.title ?? '',
         color: display.color ?? FALLBACK_COLOR,
         yAxis: 1,
         disabled: hidden,

public/app/plugins/panel/state-timeline/utils.ts

@@ -325,8 +325,8 @@ export function mergeThresholdValues(field: Field, theme: GrafanaTheme2): Field
   const thresholdToText = new Map<Threshold, string>();
   const textToColor = new Map<string, string>();
   for (let i = 0; i < items.length; i++) {
-    thresholdToText.set(thresholds.steps[i], items[i].label);
-    textToColor.set(items[i].label, items[i].color!);
+    thresholdToText.set(thresholds.steps[i], items[i].name);
+    textToColor.set(items[i].name, items[i].color!);
   }
 
   let prev: Threshold | undefined = undefined;
@@ -471,6 +471,7 @@ export function getThresholdItems(fieldConfig: FieldConfig, theme: GrafanaTheme2
     const step = steps[i - 1];
     items.push({
       label: i === 1 ? `< ${fmt(step.value)}` : `${fmt(step.value)}+`,
+      name: i === 1 ? `< ${fmt(step.value)}` : `${fmt(step.value)}+`,
       color: theme.visualization.getColorByName(step.color),
       yAxis: 1,
     });
@@ -526,6 +527,7 @@ export function getFieldLegendItem(fields: Field[], theme: GrafanaTheme2): VizLe
     if (label.length > 0) {
       items.push({
         label: label!,
+        name: label!,
         color: theme.visualization.getColorByName(color ?? FALLBACK_COLOR),
         yAxis: 1,
       });

public/app/plugins/panel/xychart/scatter.ts

@@ -153,6 +153,7 @@ function getScatterSeries(
       return [
         {
           label: name,
+          name,
           color: seriesColor, // single color for series?
           getItemKey: () => name,
           yAxis: yIndex, // << but not used