Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: time to production chart (#6100)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-01 12:22:27 +01:00 committed by GitHub
parent 99b8fa2943
commit 4e3ab7186c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 93 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx
View File

@ -15,6 +15,7 @@ import { FlagStats } from './FlagStats/FlagStats';
import { Widget } from './Widget/Widget';
import { FlagsProjectChart } from './FlagsProjectChart/FlagsProjectChart';
import { ProjectHealthChart } from './ProjectHealthChart/ProjectHealthChart';
import { TimeToProductionChart } from './TimeToProductionChart/TimeToProductionChart';
const StyledGrid = styled(Box)(({ theme }) => ({
display: 'grid',
@ -138,6 +139,17 @@ export const ExecutiveDashboard: VFC = () => {
}
/>
</Widget>
<Widget
title='Time to production'
order={7}
span={largeChartSpan}
>
<TimeToProductionChart
projectFlagTrends={
executiveDashboardData.projectFlagTrends
}
/>
</Widget>
</StyledGrid>
</>
);

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

@ -7,6 +7,7 @@ import {
} from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { getRandomColor } from '../executive-dashboard-utils';
import { useProjectChartData } from '../useProjectChartData';
interface IFlagsProjectChartProps {
projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
@ -15,38 +16,7 @@ interface IFlagsProjectChartProps {
export const FlagsProjectChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const theme = useTheme();
const data = useMemo(() => {
const groupedFlagTrends = projectFlagTrends.reduce<
Record<string, ExecutiveSummarySchemaProjectFlagTrendsItem[]>
>((groups, item) => {
if (!groups[item.project]) {
groups[item.project] = [];
}
groups[item.project].push(item);
return groups;
}, {});
const datasets = Object.entries(groupedFlagTrends).map(
([project, trends]) => {
const color = getRandomColor();
return {
label: project,
data: trends.map((item) => item.total),
borderColor: color,
backgroundColor: color,
fill: true,
};
},
);
const objectKeys = Object.keys(groupedFlagTrends);
return {
labels: groupedFlagTrends[objectKeys[0]].map((item) => item.date),
datasets,
};
}, [theme, projectFlagTrends]);
const data = useProjectChartData(projectFlagTrends, 'total');
return <LineChart data={data} />;
};

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

@ -7,6 +7,7 @@ import {
} from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { getRandomColor } from '../executive-dashboard-utils';
import { useProjectChartData } from '../useProjectChartData';
interface IFlagsProjectChartProps {
projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
@ -15,39 +16,7 @@ interface IFlagsProjectChartProps {
export const ProjectHealthChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const theme = useTheme();
const data = useMemo(() => {
const groupedFlagTrends = projectFlagTrends.reduce<
Record<string, ExecutiveSummarySchemaProjectFlagTrendsItem[]>
>((groups, item) => {
if (!groups[item.project]) {
groups[item.project] = [];
}
groups[item.project].push(item);
return groups;
}, {});
const datasets = Object.entries(groupedFlagTrends).map(
([project, trends]) => {
const color = getRandomColor();
return {
label: project,
data: trends.map((item) => item.health || 0),
borderColor: color,
backgroundColor: color,
fill: true,
};
},
);
const objectKeys = Object.keys(groupedFlagTrends);
return {
labels: groupedFlagTrends[objectKeys[0]].map((item) => item.date),
datasets,
};
}, [theme, projectFlagTrends]);
const data = useProjectChartData(projectFlagTrends, 'health');
return <LineChart data={data} />;
};

22
frontend/src/component/executiveDashboard/TimeToProductionChart/TimeToProductionChart.tsx Normal file
View File

@ -0,0 +1,22 @@
import { useMemo, type VFC } from 'react';
import 'chartjs-adapter-date-fns';
import { useTheme } from '@mui/material';
import {
ExecutiveSummarySchema,
ExecutiveSummarySchemaProjectFlagTrendsItem,
} from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { getRandomColor } from '../executive-dashboard-utils';
import { useProjectChartData } from '../useProjectChartData';
interface IFlagsProjectChartProps {
projectFlagTrends: ExecutiveSummarySchema['projectFlagTrends'];
}
export const TimeToProductionChart: VFC<IFlagsProjectChartProps> = ({
projectFlagTrends,
}) => {
const data = useProjectChartData(projectFlagTrends, 'timeToProduction');
return <LineChart data={data} />;
};

55
frontend/src/component/executiveDashboard/useProjectChartData.ts Normal file
View File

@ -0,0 +1,55 @@
import { useMemo } from 'react';
import {
ExecutiveSummarySchema,
ExecutiveSummarySchemaProjectFlagTrendsItem,
} from '../../openapi';
import { getRandomColor } from './executive-dashboard-utils';
import { useTheme } from '@mui/material';
type ProjectFlagTrends = ExecutiveSummarySchema['projectFlagTrends'];
export const useProjectChartData = (
projectFlagTrends: ProjectFlagTrends,
field: 'timeToProduction' | 'total' | 'health',
) => {
const theme = useTheme();
const data = useMemo(() => {
const groupedFlagTrends = projectFlagTrends.reduce<
Record<string, ExecutiveSummarySchemaProjectFlagTrendsItem[]>
>((groups, item) => {
if (!groups[item.project]) {
groups[item.project] = [];
}
groups[item.project].push(item);
return groups;
}, {});
const datasets = Object.entries(groupedFlagTrends).map(
([project, trends]) => {
const color = getRandomColor();
return {
label: project,
data: trends.map((item) => {
return item[field] || 0;
}),
borderColor: color,
backgroundColor: color,
fill: true,
};
},
);
const objectKeys = Object.keys(groupedFlagTrends);
const firstElementTrends = groupedFlagTrends[objectKeys[0]] || [];
const firstElementsDates = firstElementTrends.map((item) => item.date);
return {
labels: firstElementsDates,
datasets,
};
}, [theme, projectFlagTrends]);
return data;
};