multiple breakpoints

apps/dashboard/src/hooks/useMappings.ts

@@ -1,7 +1,13 @@
 import mappings from '@/mappings.json';
 
 export function useMappings() {
-  return (val: string | null) => {
+  return (val: string | string[]): string => {
+    if (Array.isArray(val)) {
+      return val
+        .map((v) => mappings.find((item) => item.id === v)?.name ?? v)
+        .join('');
+    }
+
     return mappings.find((item) => item.id === val)?.name ?? val;
   };
 }

apps/dashboard/src/hooks/useRechartDataModel.ts

@@ -6,7 +6,7 @@ import { getChartColor } from '@/utils/theme';
 
 export type IRechartPayloadItem = {
   id: string;
-  name: string;
+  names: string[];
   color: string;
   event: { id: string; name: string };
   count: number;
@@ -39,7 +39,7 @@ export function useRechartDataModel(series: IChartData['series']) {
                       ...item,
                       id: serie.id,
                       event: serie.event,
-                      name: serie.name,
+                      names: serie.names,
                       color: getChartColor(idx),
                     } satisfies IRechartPayloadItem;
                   }

apps/dashboard/src/hooks/useVisibleSeries.ts

@@ -7,12 +7,12 @@ export type IVisibleSeries = ReturnType<typeof useVisibleSeries>['series'];
 export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
   const max = limit ?? 5;
   const [visibleSeries, setVisibleSeries] = useState<string[]>(
-    data?.series?.slice(0, max).map((serie) => serie.name) ?? []
+    data?.series?.slice(0, max).map((serie) => serie.id) ?? []
   );
 
   useEffect(() => {
     setVisibleSeries(
-      data?.series?.slice(0, max).map((serie) => serie.name) ?? []
+      data?.series?.slice(0, max).map((serie) => serie.id) ?? []
     );
   }, [data, max]);
 
@@ -23,7 +23,7 @@ export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
           ...serie,
           index,
         }))
-        .filter((serie) => visibleSeries.includes(serie.name)),
+        .filter((serie) => visibleSeries.includes(serie.id)),
       setVisibleSeries,
     } as const;
   }, [visibleSeries, data.series]);