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

feat: simplified insights data fetching (#6342)

Browse Source 
Simplify insights data fetching - let charts pick data instead of
preparing labels in hook.
This commit is contained in:
Tymoteusz Czech 2024-02-27 09:20:45 +01:00 committed by GitHub
parent 7cebf7b8fe
commit ed44de6c94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 52 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/executiveDashboard/FlagsProjectChart/FlagsProjectChart.tsx
View File

@ -11,7 +11,18 @@ interface IFlagsProjectChartProps {
export const FlagsProjectChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const data = useProjectChartData(projectFlagTrends, 'total');
const data = useProjectChartData(projectFlagTrends);
return <LineChart data={data} isLocalTooltip />;
return (
<LineChart
data={data}
isLocalTooltip
overrideOptions={{
parsing: {
yAxisKey: 'total',
xAxisKey: 'date',
},
}}
/>
);
};

22
frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx
View File

@ -10,8 +10,8 @@ import {
Chart,
Filler,
type ChartData,
type ScatterDataPoint,
TooltipModel,
ChartOptions,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import 'chartjs-adapter-date-fns';
@ -223,28 +223,38 @@ const customHighlightPlugin = {
};
const LineChartComponent: VFC<{
data: ChartData<'line', (number | ScatterDataPoint | null)[], unknown>;
data: ChartData<'line', unknown>;
aspectRatio?: number;
cover?: ReactNode;
isLocalTooltip?: boolean;
overrideOptions?: ChartOptions<'line'>;
TooltipComponent?: ({
tooltip,
}: { tooltip: TooltipState | null }) => ReturnType<VFC>;
}> = ({ data, aspectRatio, cover, isLocalTooltip, TooltipComponent }) => {
}> = ({
data,
aspectRatio,
cover,
isLocalTooltip,
overrideOptions,
TooltipComponent,
}) => {
const theme = useTheme();
const { locationSettings } = useLocationSettings();
const [tooltip, setTooltip] = useState<null | TooltipState>(null);
const options = useMemo(
() =>
createOptions(
() => ({
...createOptions(
theme,
locationSettings,
setTooltip,
Boolean(cover),
isLocalTooltip,
),
[theme, locationSettings],
...overrideOptions,
}),
[theme, locationSettings, overrideOptions],
);
return (

8
frontend/src/component/executiveDashboard/ProjectHealthChart/ProjectHealthChart.tsx
View File

@ -74,13 +74,19 @@ const TooltipComponent: VFC<{ tooltip: TooltipState | null }> = ({
export const ProjectHealthChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const data = useProjectChartData(projectFlagTrends, 'health');
const data = useProjectChartData(projectFlagTrends);
return (
<LineChart
data={data}
isLocalTooltip
TooltipComponent={TooltipComponent}
overrideOptions={{
parsing: {
yAxisKey: 'health',
xAxisKey: 'date',
},
}}
/>
);
};

15
frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx
View File

@ -11,7 +11,18 @@ interface IFlagsProjectChartProps {
export const TimeToProductionChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const data = useProjectChartData(projectFlagTrends, 'timeToProduction');
const data = useProjectChartData(projectFlagTrends);
return <LineChart data={data} isLocalTooltip />;
return (
<LineChart
data={data}
isLocalTooltip
overrideOptions={{
parsing: {
yAxisKey: 'timeToProduction',
xAxisKey: 'date',
},
}}
/>
);
};

19
frontend/src/component/executiveDashboard/useProjectChartData.ts
View File

@ -8,10 +8,7 @@ import { useTheme } from '@mui/material';
type ProjectFlagTrends = ExecutiveSummarySchema['projectFlagTrends'];
export const useProjectChartData = (
projectFlagTrends: ProjectFlagTrends,
field: 'timeToProduction' | 'total' | 'health',
) => {
export const useProjectChartData = (projectFlagTrends: ProjectFlagTrends) => {
const theme = useTheme();
const data = useMemo(() => {
@ -30,9 +27,7 @@ export const useProjectChartData = (
const color = getProjectColor(project);
return {
label: project,
data: trends.map((item) => {
return item[field] || 0;
}),
data: trends,
borderColor: color,
backgroundColor: color,
fill: false,
@ -40,15 +35,7 @@ export const useProjectChartData = (
},
);
const objectKeys = Object.keys(groupedFlagTrends);
const firstElementTrends = groupedFlagTrends[objectKeys[0]] || [];
const firstElementsDates = firstElementTrends.map((item) => item.date);
return {
labels: firstElementsDates,
datasets,
};
return { datasets };
}, [theme, projectFlagTrends]);
return data;