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

fix: pr comments

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-06-29 14:05:44 +02:00
parent 1d373f71e7
commit cc834f73ef
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
3 changed files with 91 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
View File

@ -1,6 +1,6 @@
import type { FC } from 'react';
import { useMemo, useState } from 'react';
import { useTheme, Box, Typography, Alert } from '@mui/material';
import { Box, Typography, Alert } from '@mui/material';
import {
LineChart,
NotEnoughData,
@ -15,18 +15,11 @@ import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMeta
import { useImpactMetricsData } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
import { usePlaceholderData } from '../hooks/usePlaceholderData.js';
import { ImpactMetricsControls } from './ImpactMetricsControls.tsx';
import {
getDisplayFormat,
getSeriesLabel,
getTimeUnit,
formatLargeNumbers,
} from './utils.ts';
import { getDisplayFormat, getTimeUnit, formatLargeNumbers } from './utils.ts';
import { fromUnixTime } from 'date-fns';
import { useSeriesColor } from './hooks/useSeriesColor.ts';
import { useChartData } from './hooks/useChartData.ts';
export const ImpactMetrics: FC = () => {
const theme = useTheme();
const getSeriesColor = useSeriesColor();
const [selectedSeries, setSelectedSeries] = useState<string>('');
const [selectedRange, setSelectedRange] = useState<
'hour' | 'day' | 'week' | 'month'
@ -78,78 +71,7 @@ export const ImpactMetrics: FC = () => {
}));
}, [metadata]);
const data = useMemo(() => {
if (!timeSeriesData || timeSeriesData.length === 0) {
return {
labels: [],
datasets: [
{
data: [],
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
},
],
};
}
if (timeSeriesData.length === 1) {
const series = timeSeriesData[0];
const timestamps = series.data.map(
([epochTimestamp]) => new Date(epochTimestamp * 1000),
);
const values = series.data.map(([, value]) => value);
return {
labels: timestamps,
datasets: [
{
data: values,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
label: getSeriesLabel(series.metric),
},
],
};
} else {
const allTimestamps = new Set<number>();
timeSeriesData.forEach((series) => {
series.data.forEach(([timestamp]) => {
allTimestamps.add(timestamp);
});
});
const sortedTimestamps = Array.from(allTimestamps).sort(
(a, b) => a - b,
);
const labels = sortedTimestamps.map(
(timestamp) => new Date(timestamp * 1000),
);
const datasets = timeSeriesData.map((series) => {
const seriesLabel = getSeriesLabel(series.metric);
const color = getSeriesColor(seriesLabel);
const dataMap = new Map(series.data);
const data = sortedTimestamps.map(
(timestamp) => dataMap.get(timestamp) ?? null,
);
return {
label: seriesLabel,
data,
borderColor: color,
backgroundColor: color,
fill: false,
spanGaps: false, // Don't connect nulls
};
});
return {
labels,
datasets,
};
}
}, [timeSeriesData, theme, getSeriesColor]);
const data = useChartData(timeSeriesData);
const hasError = metadataError || dataError;
const isLoading = metadataLoading || dataLoading;

5
frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx
View File

@ -143,8 +143,7 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
}
label='Begin at zero'
/>
{availableLabels && Object.keys(availableLabels).length > 0 && (
{availableLabels && Object.keys(availableLabels).length > 0 ? (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography variant='subtitle2'>
@ -198,7 +197,7 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
),
)}
</Box>
)}
) : null}
</Box>
);
};

85
frontend/src/component/insights/impact-metrics/hooks/useChartData.ts Normal file
View File

@ -0,0 +1,85 @@
import { useMemo } from 'react';
import { useTheme } from '@mui/material';
import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
import { useSeriesColor } from './useSeriesColor.ts';
import { getSeriesLabel } from '../utils.ts';
export const useChartData = (
timeSeriesData: ImpactMetricsSeries[] | undefined,
) => {
const theme = useTheme();
const getSeriesColor = useSeriesColor();
return useMemo(() => {
if (!timeSeriesData || timeSeriesData.length === 0) {
return {
labels: [],
datasets: [
{
data: [],
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
},
],
};
}
if (timeSeriesData.length === 1) {
const series = timeSeriesData[0];
const timestamps = series.data.map(
([epochTimestamp]) => new Date(epochTimestamp * 1000),
);
const values = series.data.map(([, value]) => value);
return {
labels: timestamps,
datasets: [
{
data: values,
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.light,
label: getSeriesLabel(series.metric),
},
],
};
} else {
const allTimestamps = new Set<number>();
timeSeriesData.forEach((series) => {
series.data.forEach(([timestamp]) => {
allTimestamps.add(timestamp);
});
});
const sortedTimestamps = Array.from(allTimestamps).sort(
(a, b) => a - b,
);
const labels = sortedTimestamps.map(
(timestamp) => new Date(timestamp * 1000),
);
const datasets = timeSeriesData.map((series) => {
const seriesLabel = getSeriesLabel(series.metric);
const color = getSeriesColor(seriesLabel);
const dataMap = new Map(series.data);
const data = sortedTimestamps.map(
(timestamp) => dataMap.get(timestamp) ?? null,
);
return {
label: seriesLabel,
data,
borderColor: color,
backgroundColor: color,
fill: false,
spanGaps: false,
};
});
return {
labels,
datasets,
};
}
}, [timeSeriesData, theme, getSeriesColor]);
};