Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: chart issues in dark mode (#8414)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2024-10-10 10:03:16 +02:00 committed by GitHub
parent e6365d8bce
commit 5df7b15af0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/component/personalDashboard/FlagMetricsChart.tsx
View File

@ -11,7 +11,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
import { Bar } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import useTheme from '@mui/material/styles/useTheme'; import useTheme from '@mui/material/styles/useTheme';
import { type FC, useEffect, useMemo, useState } from 'react'; 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 { FeatureMetricsHours } from '../feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours';
import GeneralSelect from '../common/GeneralSelect/GeneralSelect'; import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw'; 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 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), labels: Array.from({ length: 15 }, (_, i) => i + 1),
datasets: [ datasets: [
{ {
data: defaultYes, data: defaultYes,
backgroundColor: '#EAEAED', backgroundColor: theme.palette.divider,
hoverBackgroundColor: '#EAEAED', hoverBackgroundColor: theme.palette.divider,
label: 'No metrics for this feature flag in the selected environment and time period', label: 'No metrics for this feature flag in the selected environment and time period',
}, },
], ],
}; });
const ChartWrapper = styled('div')({ const ChartWrapper = styled('div')({
width: '90%', width: '90%',
@ -50,10 +50,14 @@ export const PlaceholderFlagMetricsChart = () => {
return createPlaceholderBarChartOptions(theme); return createPlaceholderBarChartOptions(theme);
}, [theme]); }, [theme]);
const data = useMemo(() => {
return placeholderData(theme);
}, [theme]);
return ( return (
<ChartWrapper> <ChartWrapper>
<Bar <Bar
data={placeholderData} data={data}
options={options} options={options}
aria-label='A placeholder bar chart with a single feature flag exposure metrics' aria-label='A placeholder bar chart with a single feature flag exposure metrics'
/> />

1
frontend/src/component/personalDashboard/createChartOptions.ts
View File

@ -58,6 +58,7 @@ export const createPlaceholderBarChartOptions = (
}, },
grid: { grid: {
drawBorder: false, drawBorder: false,
color: theme.palette.divider,
}, },
}, },
}, },