From 3833d7991181e651a931e52a708f135c01c626ab Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 2 Feb 2022 15:11:21 +0100
Subject: [PATCH] Typechecks

---
 .../grafana-ui/src/components/Graph/GraphWithLegend.tsx     | 3 ++-
 .../grafana-ui/src/components/VizLegend/VizLegend.story.tsx | 1 +
 .../src/components/VizLegend/VizLegendListItem.tsx          | 4 ++--
 .../src/components/VizLegend/VizLegendTableItem.tsx         | 2 +-
 public/app/plugins/panel/nodeGraph/Legend.tsx               | 1 +
 public/app/plugins/panel/piechart/PieChartPanel.tsx         | 1 +
 public/app/plugins/panel/state-timeline/utils.ts            | 6 ++++--
 public/app/plugins/panel/xychart/scatter.ts                 | 1 +
 8 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
index f65a981fbfa..5e3c4c952e0 100644
--- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
index b9bc1a66037..95ade06ec04 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
+++ b/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 || [],
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
index 16f77707c99..e8e8aced569 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index f35f7bbb712..9eaba5fac4b 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/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}
diff --git a/public/app/plugins/panel/nodeGraph/Legend.tsx b/public/app/plugins/panel/nodeGraph/Legend.tsx
index a46a12b51d7..1b43ece97d8 100644
--- a/public/app/plugins/panel/nodeGraph/Legend.tsx
+++ b/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 },
     };
diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx
index a1ba2a08a3a..5b6efc8af5c 100644
--- a/public/app/plugins/panel/piechart/PieChartPanel.tsx
+++ b/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,
diff --git a/public/app/plugins/panel/state-timeline/utils.ts b/public/app/plugins/panel/state-timeline/utils.ts
index 57475d0b86a..c94deddcacf 100644
--- a/public/app/plugins/panel/state-timeline/utils.ts
+++ b/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,
       });
diff --git a/public/app/plugins/panel/xychart/scatter.ts b/public/app/plugins/panel/xychart/scatter.ts
index 56477aaa79c..df2c7dfe5d0 100644
--- a/public/app/plugins/panel/xychart/scatter.ts
+++ b/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