Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00
Code Issues Projects Releases Wiki Activity

Colors

Browse Source
This commit is contained in:
sjaanus 2025-07-29 15:54:01 +03:00
parent ffffe02792
commit dc7a231b1a
No known key found for this signature in database
GPG Key ID: 20E007C0248BA7FF
3 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -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<ICreationArchiveChartProps> = ({
),
);
// Get all unique flag types
const allFlagTypes = new Set<string>();
creationArchiveData.datasets.forEach((d) =>
d.data.forEach((item: any) => {
@ -138,14 +138,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
}))
.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) => ({

20
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx
View File

@ -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<
<StyledFlagItem>
<Typography variant='body2' component='span'>
<Typography sx={{ color: '#4caf50' }} component='span'>
<Typography
sx={{ color: colors.CREATED }}
component='span'
>
{'● '}
</Typography>
Flags created
@ -72,7 +83,10 @@ export const CreationArchiveRatioTooltip: FC<
<StyledFlagItem>
<Typography variant='body2' component='span'>
<Typography sx={{ color: '#9e9e9e' }} component='span'>
<Typography
sx={{ color: colors.ARCHIVED }}
component='span'
>
{'● '}
</Typography>
Flags archived

20
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx
View File

@ -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<CreationArchiveTooltipProps> = ({
tooltip,
}) => {
const theme = useTheme();
if (!tooltip?.dataPoints) {
return null;
}
@ -41,20 +44,13 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
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)