Typescript refactor.

src/components/metrics/Legend.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { StatusLight } from 'react-basics';
+import { colord } from 'colord';
+import classNames from 'classnames';
+import useLocale from 'components/hooks/useLocale';
+import useForceUpdate from 'components/hooks/useForceUpdate';
+import styles from './Legend.module.css';
+
+export function Legend({ chart }) {
+  const { locale } = useLocale();
+  const forceUpdate = useForceUpdate();
+
+  const handleClick = index => {
+    const meta = chart.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+    chart.update();
+
+    forceUpdate();
+  };
+
+  useEffect(() => {
+    forceUpdate();
+  }, [locale, forceUpdate]);
+
+  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.legend}>
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
+        const color = colord(fillStyle);
+
+        return (
+          <div
+            key={text}
+            className={classNames(styles.label, { [styles.hidden]: hidden })}
+            onClick={() => handleClick(datasetIndex)}
+          >
+            <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
+              <span className={locale}>{text}</span>
+            </StatusLight>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Legend;