GraphPanel: Make legend values clickable series toggles (#25581)

fixes: #25402

public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx

@@ -71,7 +71,13 @@ export class LegendItem extends PureComponent<LegendItemProps, LegendItemState>
       if (this.props[valueName]) {
         const valueFormatted = series.formatValue(series.stats[valueName]);
         legendValueItems.push(
-          <LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
+          <LegendValue
+            key={valueName}
+            valueName={valueName}
+            value={valueFormatted}
+            asTable={asTable}
+            onValueClick={this.onLabelClick}
+          />
         );
       }
     }
@@ -196,13 +202,20 @@ interface LegendValueProps {
   value: string;
   valueName: string;
   asTable?: boolean;
+  onValueClick?: (event: any) => void;
 }
 
-function LegendValue(props: LegendValueProps) {
-  const value = props.value;
-  const valueName = props.valueName;
-  if (props.asTable) {
-    return <td className={`graph-legend-value ${valueName}`}>{value}</td>;
+function LegendValue({ value, valueName, asTable, onValueClick }: LegendValueProps) {
+  if (asTable) {
+    return (
+      <td className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
+        {value}
+      </td>
+    );
   }
-  return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
+  return (
+    <div className={`graph-legend-value ${valueName}`} onClick={onValueClick}>
+      {value}
+    </div>
+  );
 }