From dc7a231b1ad8ec7a12af238985f757029cbd9723 Mon Sep 17 00:00:00 2001 From: sjaanus Date: Tue, 29 Jul 2025 15:54:01 +0300 Subject: [PATCH] Colors --- .../CreationArchiveChart.tsx | 11 ++-------- .../CreationArchiveRatioTooltip.tsx | 20 ++++++++++++++++--- .../CreationArchiveTooltip.tsx | 20 ++++++++----------- 3 files changed, 27 insertions(+), 24 deletions(-) diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx index d41ce90a6e..b39249ab1f 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx @@ -26,6 +26,7 @@ import { import { createTooltip } from 'component/insights/components/LineChart/createTooltip'; import { CreationArchiveTooltip } from './CreationArchiveTooltip.tsx'; import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx'; +import { getFlagTypeColors } from './flagTypeColors.ts'; ChartJS.register( CategoryScale, @@ -83,7 +84,6 @@ export const CreationArchiveChart: FC = ({ ), ); - // Get all unique flag types const allFlagTypes = new Set(); creationArchiveData.datasets.forEach((d) => d.data.forEach((item: any) => { @@ -138,14 +138,7 @@ export const CreationArchiveChart: FC = ({ })) .sort((a, b) => (a.week > b.week ? 1 : -1)); - // Create datasets for each flag type - const flagTypeColors = [ - theme.palette.success.border, - theme.palette.success.main, - theme.palette.success.dark, - '#4D8007', - '#7D935E', - ]; + const flagTypeColors = getFlagTypeColors(theme); const flagTypeDatasets = Array.from(allFlagTypes).map( (flagType, index) => ({ diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx index 850c8eef6b..939f954cd4 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx @@ -1,8 +1,13 @@ import type { FC } from 'react'; -import { Box, Paper, Typography, styled } from '@mui/material'; +import { Box, Paper, Typography, styled, useTheme } from '@mui/material'; import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; import { ChartTooltipContainer } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; +const getRatioTooltipColors = (theme: any) => ({ + CREATED: theme.palette.success.main, + ARCHIVED: theme.palette.background.application, +}); + const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), width: 200, @@ -22,6 +27,9 @@ interface CreationArchiveRatioTooltipProps { export const CreationArchiveRatioTooltip: FC< CreationArchiveRatioTooltipProps > = ({ tooltip }) => { + const theme = useTheme(); + const colors = getRatioTooltipColors(theme); + if (!tooltip?.dataPoints) { return null; } @@ -60,7 +68,10 @@ export const CreationArchiveRatioTooltip: FC< - + {'● '} Flags created @@ -72,7 +83,10 @@ export const CreationArchiveRatioTooltip: FC< - + {'● '} Flags archived diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx index c95ee77bb5..f34f809ea5 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx @@ -1,7 +1,8 @@ import type { FC } from 'react'; -import { Box, Paper, Typography, styled } from '@mui/material'; -import type { TooltipState } from '../../components/LineChart/ChartTooltip/ChartTooltip.tsx'; -import { ChartTooltipContainer } from '../../components/LineChart/ChartTooltip/ChartTooltip.tsx'; +import { Box, Paper, Typography, styled, useTheme } from '@mui/material'; +import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; +import { ChartTooltipContainer } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip'; +import { getFlagTypeColors } from './flagTypeColors.ts'; const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ padding: theme.spacing(2), @@ -21,6 +22,8 @@ interface CreationArchiveTooltipProps { export const CreationArchiveTooltip: FC = ({ tooltip, }) => { + const theme = useTheme(); + if (!tooltip?.dataPoints) { return null; } @@ -41,20 +44,13 @@ export const CreationArchiveTooltip: FC = ({ return null; } - // Flag type colors matching the chart - const flagTypeColors = [ - '#66bb6a', // theme.palette.success.border - '#4caf50', // theme.palette.success.main - '#388e3c', // theme.palette.success.dark - '#4D8007', - '#7D935E', - ]; - // Get flag type names from the chart datasets const flagTypeNames = createdFlagDataPoints.map( (point) => point.dataset.label?.replace('Created: ', '') || '', ); + const flagTypeColors = getFlagTypeColors(theme); + // Create entries for each flag type with count > 0 const flagTypeEntries = Object.entries(rawData.createdFlagsByType) .filter(([, count]) => (count as number) > 0)