From 5df7b15af0fb8cea0ba6d3cee9b0cf0f71ad032a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 10:03:16 +0200
Subject: [PATCH] fix: chart issues in dark mode (#8414)

This PR fixes two issues with the chart in dark mode:
1. Grid lines are almost invisible
2. Placeholder data lines are way too bright

The fix for both is to use the theme's divider color.


![image](https://github.com/user-attachments/assets/1064d081-0cd8-4b2b-97a7-225e29b3af19)


![image](https://github.com/user-attachments/assets/4f046f98-5664-421a-b0a8-620f2dbe96f9)
---
 .../personalDashboard/FlagMetricsChart.tsx       | 16 ++++++++++------
 .../personalDashboard/createChartOptions.ts      |  1 +
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index fa213ee548..ceb8a562b0 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -11,7 +11,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 import { Bar } from 'react-chartjs-2';
 import useTheme from '@mui/material/styles/useTheme';
 import { type FC, useEffect, useMemo, useState } from 'react';
-import { Box, styled } from '@mui/material';
+import { Box, type Theme, styled } from '@mui/material';
 import { FeatureMetricsHours } from '../feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours';
 import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
 import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
@@ -27,17 +27,17 @@ import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/Feat
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
-const placeholderData = {
+const placeholderData = (theme: Theme) => ({
     labels: Array.from({ length: 15 }, (_, i) => i + 1),
     datasets: [
         {
             data: defaultYes,
-            backgroundColor: '#EAEAED',
-            hoverBackgroundColor: '#EAEAED',
+            backgroundColor: theme.palette.divider,
+            hoverBackgroundColor: theme.palette.divider,
             label: 'No metrics for this feature flag in the selected environment and time period',
         },
     ],
-};
+});
 
 const ChartWrapper = styled('div')({
     width: '90%',
@@ -50,10 +50,14 @@ export const PlaceholderFlagMetricsChart = () => {
         return createPlaceholderBarChartOptions(theme);
     }, [theme]);
 
+    const data = useMemo(() => {
+        return placeholderData(theme);
+    }, [theme]);
+
     return (
         <ChartWrapper>
             <Bar
-                data={placeholderData}
+                data={data}
                 options={options}
                 aria-label='A placeholder bar chart with a single feature flag exposure metrics'
             />
diff --git a/frontend/src/component/personalDashboard/createChartOptions.ts b/frontend/src/component/personalDashboard/createChartOptions.ts
index f19b75eca8..881abdec56 100644
--- a/frontend/src/component/personalDashboard/createChartOptions.ts
+++ b/frontend/src/component/personalDashboard/createChartOptions.ts
@@ -58,6 +58,7 @@ export const createPlaceholderBarChartOptions = (
             },
             grid: {
                 drawBorder: false,
+                color: theme.palette.divider,
             },
         },
     },