mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
Feat: metrics chart tooltip refactoring (#6414)
Refactoring after moving aggregation to BE <img width="1357" alt="Screenshot 2024-03-04 at 12 14 28" src="https://github.com/Unleash/unleash/assets/104830839/9881ba13-69a3-49d9-bb3f-3316a9287a06"> --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
parent
b3e31c09a1
commit
0c9838b26a
@ -5,7 +5,7 @@ import { FC, useLayoutEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
ApplicationOverviewEnvironmentSchema,
|
||||
ApplicationOverviewSchema,
|
||||
} from '../../openapi';
|
||||
} from 'openapi';
|
||||
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
||||
import { HelpIcon } from '../common/HelpIcon/HelpIcon';
|
||||
import { CloudCircle, Flag, WarningAmberRounded } from '@mui/icons-material';
|
||||
|
@ -109,7 +109,7 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
|
||||
/>
|
||||
<InfoLine
|
||||
iconChar={'▣ '}
|
||||
title={`Total requests: ${point.value.total}`}
|
||||
title={`Total requests: ${point.value.totalRequests}`}
|
||||
color={'info'}
|
||||
/>
|
||||
<InfoLine
|
||||
|
@ -19,7 +19,7 @@ export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({
|
||||
isLocalTooltip
|
||||
TooltipComponent={MetricsSummaryTooltip}
|
||||
overrideOptions={{
|
||||
parsing: { yAxisKey: 'total', xAxisKey: 'weekId' },
|
||||
parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
@ -1,72 +1,32 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTheme } from '@mui/material';
|
||||
import { ExecutiveSummarySchema } from '../../openapi';
|
||||
import { parseISO, getISOWeek, format } from 'date-fns';
|
||||
import {
|
||||
ExecutiveSummarySchema,
|
||||
ExecutiveSummarySchemaMetricsSummaryTrendsItem,
|
||||
} from 'openapi';
|
||||
import { getProjectColor } from './executive-dashboard-utils';
|
||||
|
||||
type MetricsSummaryTrends = ExecutiveSummarySchema['metricsSummaryTrends'];
|
||||
|
||||
interface GroupedData {
|
||||
[key: string]: {
|
||||
[week: string]: {
|
||||
total: number;
|
||||
totalYes: number;
|
||||
totalNo: number;
|
||||
totalApps: number;
|
||||
totalEnvironments: number;
|
||||
totalFlags: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
type GroupedDataByProject = Record<
|
||||
string,
|
||||
ExecutiveSummarySchemaMetricsSummaryTrendsItem[]
|
||||
>;
|
||||
|
||||
function groupAndSumData(data: MetricsSummaryTrends): any {
|
||||
const groupedData: GroupedData = {};
|
||||
function groupDataByProject(
|
||||
data: ExecutiveSummarySchemaMetricsSummaryTrendsItem[],
|
||||
): GroupedDataByProject {
|
||||
const groupedData: GroupedDataByProject = {};
|
||||
|
||||
data.forEach((item) => {
|
||||
const weekNumber = getISOWeek(parseISO(item.date));
|
||||
const year = format(parseISO(item.date), 'yyyy');
|
||||
const weekId = `${year}-${weekNumber.toString().padStart(2, '0')}`;
|
||||
const project = item.project;
|
||||
|
||||
const { project } = item;
|
||||
if (!groupedData[project]) {
|
||||
groupedData[project] = {};
|
||||
groupedData[project] = [];
|
||||
}
|
||||
|
||||
if (!groupedData[project][weekId]) {
|
||||
groupedData[project][weekId] = {
|
||||
total: 0,
|
||||
totalYes: 0,
|
||||
totalNo: 0,
|
||||
totalApps: 0,
|
||||
totalEnvironments: 0,
|
||||
totalFlags: 0,
|
||||
};
|
||||
}
|
||||
|
||||
groupedData[project][weekId].total += item.totalYes + item.totalNo;
|
||||
groupedData[project][weekId].totalYes += item.totalYes;
|
||||
groupedData[project][weekId].totalNo += item.totalNo;
|
||||
groupedData[project][weekId].totalApps += item.totalApps;
|
||||
groupedData[project][weekId].totalEnvironments +=
|
||||
item.totalEnvironments;
|
||||
groupedData[project][weekId].totalFlags += item.totalFlags;
|
||||
groupedData[project].push(item);
|
||||
});
|
||||
|
||||
return Object.entries(groupedData).map(([project, weeks]) => {
|
||||
const color = getProjectColor(project);
|
||||
return {
|
||||
label: project,
|
||||
borderColor: color,
|
||||
backgroundColor: color,
|
||||
fill: false,
|
||||
data: Object.entries(weeks)
|
||||
.sort(([weekA], [weekB]) => weekA.localeCompare(weekB))
|
||||
.map(([weekId, values]) => ({
|
||||
weekId,
|
||||
...values,
|
||||
})),
|
||||
};
|
||||
});
|
||||
return groupedData;
|
||||
}
|
||||
|
||||
export const useMetricsSummary = (
|
||||
@ -75,7 +35,20 @@ export const useMetricsSummary = (
|
||||
const theme = useTheme();
|
||||
|
||||
const data = useMemo(() => {
|
||||
return { datasets: groupAndSumData(metricsSummaryTrends) };
|
||||
const groupedMetrics = groupDataByProject(metricsSummaryTrends);
|
||||
const datasets = Object.entries(groupedMetrics).map(
|
||||
([project, trends]) => {
|
||||
const color = getProjectColor(project);
|
||||
return {
|
||||
label: project,
|
||||
data: trends,
|
||||
borderColor: color,
|
||||
backgroundColor: color,
|
||||
fill: false,
|
||||
};
|
||||
},
|
||||
);
|
||||
return { datasets };
|
||||
}, [theme, metricsSummaryTrends]);
|
||||
|
||||
return data;
|
||||
|
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Generated by Orval
|
||||
* Do not edit manually.
|
||||
* See `gen:api` script in package.json
|
||||
*/
|
||||
|
||||
/**
|
||||
* The name of this action.
|
||||
*/
|
||||
export type ApplicationOverviewIssuesSchemaType =
|
||||
(typeof ApplicationOverviewIssuesSchemaType)[keyof typeof ApplicationOverviewIssuesSchemaType];
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
||||
export const ApplicationOverviewIssuesSchemaType = {
|
||||
missingFeatures: 'missingFeatures',
|
||||
missingStrategies: 'missingStrategies',
|
||||
} as const;
|
@ -5,8 +5,6 @@
|
||||
*/
|
||||
|
||||
export type ExecutiveSummarySchemaMetricsSummaryTrendsItem = {
|
||||
/** Date the impressions summary were calculated */
|
||||
date: string;
|
||||
/** Project id of the project the impressions summary belong to */
|
||||
project: string;
|
||||
/** Total number of applications the impression data belong to */
|
||||
@ -17,6 +15,10 @@ export type ExecutiveSummarySchemaMetricsSummaryTrendsItem = {
|
||||
totalFlags: number;
|
||||
/** Total number of times all project flags were not exposed across all environments */
|
||||
totalNo: number;
|
||||
/** Total number of times all project flags were requested */
|
||||
totalRequests: number;
|
||||
/** Total number of times all project flags were exposed across all environments */
|
||||
totalYes: number;
|
||||
/** Year and week in a given year for which the metrics summary was calculated */
|
||||
week: string;
|
||||
};
|
||||
|
@ -575,7 +575,6 @@ export * from './getAllToggles403';
|
||||
export * from './getApiTokensByName401';
|
||||
export * from './getApiTokensByName403';
|
||||
export * from './getApplication404';
|
||||
export * from './getApplicationEnvironmentInstances404';
|
||||
export * from './getApplicationOverview404';
|
||||
export * from './getApplicationsParams';
|
||||
export * from './getArchivedFeatures401';
|
||||
|
Loading…
Reference in New Issue
Block a user