From 5f359b3cf15657a547f740dcef521e5569181457 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 6 Jan 2022 01:45:53 -0800
Subject: [PATCH] Fix legend color mismatch.

---
 components/metrics/BarChart.js |  2 +-
 components/metrics/Legend.js   | 27 ++++++++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 35e96c8d..e2617012 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -6,10 +6,10 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
+import useForceUpdate from 'hooks/useForceUpdate';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 import ChartTooltip from './ChartTooltip';
-import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function BarChart({
   chartId,
diff --git a/components/metrics/Legend.js b/components/metrics/Legend.js
index 37cb5b49..b919d80e 100644
--- a/components/metrics/Legend.js
+++ b/components/metrics/Legend.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import tinycolor from 'tinycolor2';
 import classNames from 'classnames';
 import Dot from 'components/common/Dot';
 import useLocale from 'hooks/useLocale';
+import useForceUpdate from 'hooks/useForceUpdate';
 import styles from './Legend.module.css';
-import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function Legend({ chart }) {
   const { locale } = useLocale();
@@ -25,16 +26,20 @@ export default function Legend({ chart }) {
 
   return (
     <div className={styles.legend}>
-      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
-        <div
-          key={text}
-          className={classNames(styles.label, { [styles.hidden]: hidden })}
-          onClick={() => handleClick(datasetIndex)}
-        >
-          <Dot color={fillStyle} />
-          <span className={locale}>{text}</span>
-        </div>
-      ))}
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
+        const color = tinycolor(fillStyle);
+
+        return (
+          <div
+            key={text}
+            className={classNames(styles.label, { [styles.hidden]: hidden })}
+            onClick={() => handleClick(datasetIndex)}
+          >
+            <Dot color={color.setAlpha(color.getAlpha() + 0.2)} />
+            <span className={locale}>{text}</span>
+          </div>
+        );
+      })}
     </div>
   );
 }