From 8463490aecb06e049821bf7f5cba27c35e81b557 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 09:35:10 +0200
Subject: [PATCH 1/3] fix: use divider color for grid lines

---
 frontend/src/component/personalDashboard/createChartOptions.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/component/personalDashboard/createChartOptions.ts b/frontend/src/component/personalDashboard/createChartOptions.ts
index f19b75eca8a4..881abdec561a 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,
             },
         },
     },

From 7d6dc0373fe04765a533d27089ae8b71ea188463 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 09:35:22 +0200
Subject: [PATCH 2/3] fix: use divider color for placeholder data bar lines

---
 .../component/personalDashboard/FlagMetricsChart.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index fa213ee548c9..6c8a6b20ff4f 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%',
@@ -53,7 +53,7 @@ export const PlaceholderFlagMetricsChart = () => {
     return (
         <ChartWrapper>
             <Bar
-                data={placeholderData}
+                data={placeholderData(theme)}
                 options={options}
                 aria-label='A placeholder bar chart with a single feature flag exposure metrics'
             />

From afd1a4ca237436ac996955388b91d1042cd4cf3e Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 09:59:02 +0200
Subject: [PATCH 3/3] fix: please tests

---
 .../src/component/personalDashboard/FlagMetricsChart.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 6c8a6b20ff4f..ceb8a562b005 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -50,10 +50,14 @@ export const PlaceholderFlagMetricsChart = () => {
         return createPlaceholderBarChartOptions(theme);
     }, [theme]);
 
+    const data = useMemo(() => {
+        return placeholderData(theme);
+    }, [theme]);
+
     return (
         <ChartWrapper>
             <Bar
-                data={placeholderData(theme)}
+                data={data}
                 options={options}
                 aria-label='A placeholder bar chart with a single feature flag exposure metrics'
             />