From c3f1454df7da89353418e13bc6a3a90349640fd4 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 16 Jul 2025 11:58:42 +0200
Subject: [PATCH] feat: use metric display name in impact charts (#10359)

---
 frontend/src/component/impact-metrics/ChartItem.tsx  | 10 +++++-----
 frontend/src/component/impact-metrics/types.ts       | 12 +++++++++++-
 .../useImpactMetricsSettings.ts                      | 10 +++++-----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/impact-metrics/ChartItem.tsx b/frontend/src/component/impact-metrics/ChartItem.tsx
index 029637eb40..7223f0f740 100644
--- a/frontend/src/component/impact-metrics/ChartItem.tsx
+++ b/frontend/src/component/impact-metrics/ChartItem.tsx
@@ -4,19 +4,19 @@ import Edit from '@mui/icons-material/Edit';
 import Delete from '@mui/icons-material/Delete';
 import DragHandle from '@mui/icons-material/DragHandle';
 import { ImpactMetricsChart } from './ImpactMetricsChart.tsx';
-import type { ChartConfig } from './types.ts';
+import type { ChartConfig, DisplayChartConfig } from './types.ts';
 
 export interface ChartItemProps {
-    config: ChartConfig;
+    config: DisplayChartConfig;
     onEdit: (config: ChartConfig) => void;
     onDelete: (id: string) => void;
 }
 
-const getConfigDescription = (config: ChartConfig): string => {
+const getConfigDescription = (config: DisplayChartConfig): string => {
     const parts: string[] = [];
 
-    if (config.selectedSeries) {
-        parts.push(`${config.selectedSeries}`);
+    if (config.displayName) {
+        parts.push(`${config.displayName}`);
     }
 
     parts.push(`last ${config.selectedRange}`);
diff --git a/frontend/src/component/impact-metrics/types.ts b/frontend/src/component/impact-metrics/types.ts
index e979ca58c7..96abb0c3bc 100644
--- a/frontend/src/component/impact-metrics/types.ts
+++ b/frontend/src/component/impact-metrics/types.ts
@@ -1,6 +1,6 @@
 export type ChartConfig = {
     id: string;
-    selectedSeries: string;
+    selectedSeries: string; // e.g. unleash_counter_my_metric
     selectedRange: 'hour' | 'day' | 'week' | 'month';
     beginAtZero: boolean;
     showRate: boolean;
@@ -8,6 +8,11 @@ export type ChartConfig = {
     title?: string;
 };
 
+export type DisplayChartConfig = ChartConfig & {
+    type: 'counter' | 'gauge';
+    displayName: string; // e.g. my_metric with unleash_counter stripped
+};
+
 export type LayoutItem = {
     i: string;
     x: number;
@@ -24,3 +29,8 @@ export type ImpactMetricsState = {
     charts: ChartConfig[];
     layout: LayoutItem[];
 };
+
+export type DisplayImpactMetricsState = {
+    charts: DisplayChartConfig[];
+    layout: LayoutItem[];
+};
diff --git a/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts b/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts
index 6847abc294..3faa89a942 100644
--- a/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts
+++ b/frontend/src/hooks/api/getters/useImpactMetricsSettings/useImpactMetricsSettings.ts
@@ -1,13 +1,13 @@
 import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
 import { formatApiPath } from 'utils/formatPath';
-import type { ImpactMetricsState } from 'component/impact-metrics/types.ts';
+import type { DisplayImpactMetricsState } from 'component/impact-metrics/types.ts';
 
 export const useImpactMetricsSettings = () => {
     const PATH = `api/admin/impact-metrics/settings`;
-    const { data, refetch, loading, error } = useApiGetter<ImpactMetricsState>(
-        formatApiPath(PATH),
-        () => fetcher(formatApiPath(PATH), 'Impact metrics settings'),
-    );
+    const { data, refetch, loading, error } =
+        useApiGetter<DisplayImpactMetricsState>(formatApiPath(PATH), () =>
+            fetcher(formatApiPath(PATH), 'Impact metrics settings'),
+        );
 
     return {
         settings: data || { charts: [], layout: [] },