feat: modify map

src/components/dashboard/detection-donut-chart.tsx

@@ -10,36 +10,43 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from '@/components/ui/chart';
+import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
 
 interface DetectionDonutChartProps {
   defectedSignboard: number;
   pothole: number;
   roadCrack: number;
   damagedRoadMarking: number;
-  goodSignboard: number;
+  // goodSignboard: number;
+  drainIssue: number;
+  defectiveCulvert: number;
   isLoading?: boolean;
 }
 
 const chartConfig = {
   pothole: {
-    label: 'Potholes',
-    color: 'var(--chart-1)',
+    label: DETECTION_TYPES.pothole.label + 's',
+    color: DETECTION_TYPES.pothole.color,
   },
   defectedSignboard: {
-    label: 'Defected Signboards',
-    color: 'var(--chart-2)',
+    label: DETECTION_TYPES.defected_sign_board.label + 's',
+    color: DETECTION_TYPES.defected_sign_board.color,
   },
   roadCrack: {
-    label: 'Road Cracks',
-    color: 'var(--chart-3)',
+    label: DETECTION_TYPES.road_crack.label + 's',
+    color: DETECTION_TYPES.road_crack.color,
   },
   damagedRoadMarking: {
-    label: 'Damaged Markings',
-    color: 'var(--chart-4)',
+    label: DETECTION_TYPES.damaged_road_marking.label + 's',
+    color: DETECTION_TYPES.damaged_road_marking.color,
   },
-  goodSignboard: {
-    label: 'Good Signboards',
-    color: 'var(--chart-5)',
+  drainIssue: {
+    label: DETECTION_TYPES.drain_issue.label + 's',
+    color: DETECTION_TYPES.drain_issue.color,
+  },
+  defectiveCulvert: {
+    label: DETECTION_TYPES.defective_culvert.label + 's',
+    color: DETECTION_TYPES.defective_culvert.color,
   },
 } satisfies ChartConfig;
 
@@ -48,7 +55,9 @@ export function DetectionDonutChart({
   pothole,
   roadCrack,
   damagedRoadMarking,
-  goodSignboard,
+  // goodSignboard,
+  drainIssue,
+  defectiveCulvert,
   isLoading = false,
 }: DetectionDonutChartProps) {
   const chartData = React.useMemo(
@@ -66,13 +75,31 @@ export function DetectionDonutChart({
           count: damagedRoadMarking,
           fill: 'var(--color-damagedRoadMarking)',
         },
+        /* {
+           type: 'goodSignboard',
+           count: goodSignboard,
+           fill: 'var(--color-goodSignboard)',
+         }, */
         {
-          type: 'goodSignboard',
-          count: goodSignboard,
-          fill: 'var(--color-goodSignboard)',
+          type: 'drainIssue',
+          count: drainIssue,
+          fill: 'var(--color-drainIssue)',
+        },
+        {
+          type: 'defectiveCulvert',
+          count: defectiveCulvert,
+          fill: 'var(--color-defectiveCulvert)',
         },
       ].filter((item) => item.count > 0),
-    [pothole, defectedSignboard, roadCrack, damagedRoadMarking, goodSignboard],
+    [
+      pothole,
+      defectedSignboard,
+      roadCrack,
+      damagedRoadMarking,
+       // goodSignboard,
+      drainIssue,
+      defectiveCulvert,
+    ],
   );
 
   const totalDetections = React.useMemo(() => {