From 94588c12d40ac04f2a0f42498deaac98bf2dd839 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 29 Jul 2024 11:52:14 +0200
Subject: [PATCH] feat: human readable project names in insight charts (#7686)

---
 .../src/component/insights/hooks/useProjectChartData.ts    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/insights/hooks/useProjectChartData.ts b/frontend/src/component/insights/hooks/useProjectChartData.ts
index 52caa036df..9aa32ff319 100644
--- a/frontend/src/component/insights/hooks/useProjectChartData.ts
+++ b/frontend/src/component/insights/hooks/useProjectChartData.ts
@@ -3,6 +3,7 @@ import type { InstanceInsightsSchema } from 'openapi';
 import { useProjectColor } from './useProjectColor';
 import { useTheme } from '@mui/material';
 import type { GroupedDataByProject } from './useGroupedProjectTrends';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
 
 type ProjectFlagTrends = InstanceInsightsSchema['projectFlagTrends'];
 
@@ -11,13 +12,17 @@ export const useProjectChartData = (
 ) => {
     const theme = useTheme();
     const getProjectColor = useProjectColor();
+    const { projects } = useProjects();
+    const projectNames = new Map(
+        projects.map((project) => [project.id, project.name]),
+    );
 
     const data = useMemo(() => {
         const datasets = Object.entries(projectFlagTrends).map(
             ([project, trends]) => {
                 const color = getProjectColor(project);
                 return {
-                    label: project,
+                    label: projectNames.get(project) || project,
                     data: trends,
                     borderColor: color,
                     backgroundColor: color,