Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

refactor: color assignment in useChartData (#10372)

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-07-18 14:28:56 +02:00 committed by GitHub
parent b581b2393d
commit 2ff1aa78a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/impact-metrics/ImpactMetricsChart.tsx
View File

@ -62,7 +62,7 @@ export const ImpactMetricsChart: FC<ImpactMetricsChartProps> = ({
type: 'constant', type: 'constant',
}); });
const data = useChartData(timeSeriesData); const data = useChartData(timeSeriesData, debug?.query);
const hasError = !!dataError; const hasError = !!dataError;
const isLoading = dataLoading; const isLoading = dataLoading;

26
frontend/src/component/impact-metrics/hooks/useChartData.ts
View File

@ -1,14 +1,30 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTheme } from '@mui/material'; import { useTheme } from '@mui/material';
import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData'; import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
import { useSeriesColor } from './useSeriesColor.ts';
import { getSeriesLabel } from '../utils.ts'; import { getSeriesLabel } from '../utils.ts';
const getColorStartingIndex = (modulo: number, series?: string): number => {
if (!series || series.length === 0 || modulo <= 0) {
return 0;
}
let hash = 0;
for (let i = 0; i < series.length; i++) {
const char = series.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash = hash & hash;
}
return Math.abs(hash) % modulo;
};
export const useChartData = ( export const useChartData = (
timeSeriesData: ImpactMetricsSeries[] | undefined, timeSeriesData: ImpactMetricsSeries[] | undefined,
colorIndexBy?: string,
) => { ) => {
const theme = useTheme(); const theme = useTheme();
const getSeriesColor = useSeriesColor(); const colors = theme.palette.charts.series;
const startColorIndex = getColorStartingIndex(colors.length, colorIndexBy);
return useMemo(() => { return useMemo(() => {
if (!timeSeriesData || timeSeriesData.length === 0) { if (!timeSeriesData || timeSeriesData.length === 0) {
@ -66,9 +82,9 @@ export const useChartData = (
(timestamp) => new Date(timestamp * 1000), (timestamp) => new Date(timestamp * 1000),
); );
const datasets = timeSeriesData.map((series) => { const datasets = timeSeriesData.map((series, index) => {
const seriesLabel = getSeriesLabel(series.metric); const seriesLabel = getSeriesLabel(series.metric);
const color = getSeriesColor(seriesLabel); const color = colors[(index + startColorIndex) % colors.length];
const dataMap = new Map(series.data); const dataMap = new Map(series.data);
@ -90,5 +106,5 @@ export const useChartData = (
datasets, datasets,
}; };
} }
}, [timeSeriesData, theme, getSeriesColor]); }, [timeSeriesData, theme]);
}; };

17
frontend/src/component/impact-metrics/hooks/useSeriesColor.ts
View File

@ -1,17 +0,0 @@
import { useTheme } from '@mui/material';
export const useSeriesColor = () => {
const theme = useTheme();
const colors = theme.palette.charts.series;
return (seriesLabel: string): string => {
let hash = 0;
for (let i = 0; i < seriesLabel.length; i++) {
const char = seriesLabel.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash = hash & hash; // Convert to 32-bit integer
}
const index = Math.abs(hash) % colors.length;
return colors[index];
};
};