-
-
Notifications
You must be signed in to change notification settings - Fork 730
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show the metrics summary chart (#6297)
Creates the impressions summary chart <img width="1358" alt="Screenshot 2024-02-21 at 13 25 05" src="https://github.com/Unleash/unleash/assets/104830839/ddf15637-34de-4883-9ef7-517e37eab331"> Closes # [1-2060](https://linear.app/unleash/issue/1-2060/impressions-summary-widget-frontend) --------- Signed-off-by: andreas-unleash <[email protected]> Co-authored-by: Tymoteusz Czech <[email protected]>
- Loading branch information
1 parent
153c60d
commit bae195a
Showing
7 changed files
with
128 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
frontend/src/component/executiveDashboard/MetricsSummaryChart/MetricsSummaryChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { type VFC } from 'react'; | ||
import 'chartjs-adapter-date-fns'; | ||
import { ExecutiveSummarySchema } from 'openapi'; | ||
import { LineChart } from '../LineChart/LineChart'; | ||
import { useMetricsSummary } from '../useMetricsSummary'; | ||
|
||
interface IMetricsSummaryChartProps { | ||
metricsSummaryTrends: ExecutiveSummarySchema['metricsSummaryTrends']; | ||
} | ||
|
||
export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({ | ||
metricsSummaryTrends, | ||
}) => { | ||
const data = useMetricsSummary(metricsSummaryTrends, 'total'); | ||
|
||
return <LineChart data={data} />; | ||
}; |
58 changes: 58 additions & 0 deletions
58
frontend/src/component/executiveDashboard/useMetricsSummary.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { useMemo } from 'react'; | ||
import { getProjectColor } from './executive-dashboard-utils'; | ||
import { useTheme } from '@mui/material'; | ||
import { | ||
ExecutiveSummarySchema, | ||
ExecutiveSummarySchemaMetricsSummaryTrendsItem, | ||
} from '../../openapi'; | ||
|
||
type MetricsSummaryTrends = ExecutiveSummarySchema['metricsSummaryTrends']; | ||
|
||
export const useMetricsSummary = ( | ||
metricsSummaryTrends: MetricsSummaryTrends, | ||
field: 'total' | 'totalYes' | 'totalNo' | 'totalApps', | ||
) => { | ||
const theme = useTheme(); | ||
|
||
const data = useMemo(() => { | ||
const groupedFlagTrends = metricsSummaryTrends.reduce< | ||
Record<string, ExecutiveSummarySchemaMetricsSummaryTrendsItem[]> | ||
>((groups, item) => { | ||
if (!groups[item.project]) { | ||
groups[item.project] = []; | ||
} | ||
groups[item.project].push(item); | ||
return groups; | ||
}, {}); | ||
|
||
const datasets = Object.entries(groupedFlagTrends).map( | ||
([project, metricsSummaryTrends]) => { | ||
const color = getProjectColor(project); | ||
return { | ||
label: project, | ||
data: metricsSummaryTrends.map((item) => { | ||
if (field !== 'total') { | ||
return item[field] || 0; | ||
} | ||
return item.totalYes + item.totalNo || 0; | ||
}), | ||
borderColor: color, | ||
backgroundColor: color, | ||
fill: false, | ||
}; | ||
}, | ||
); | ||
|
||
const objectKeys = Object.keys(groupedFlagTrends); | ||
|
||
const firstElementSummary = groupedFlagTrends[objectKeys[0]] || []; | ||
const firstElementsDates = firstElementSummary.map((item) => item.date); | ||
|
||
return { | ||
labels: firstElementsDates, | ||
datasets, | ||
}; | ||
}, [theme, metricsSummaryTrends]); | ||
|
||
return data; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters