From 0febc9d8f31b30529c6f19f77a686778eaa3a466 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 3 Feb 2026 12:41:22 +0700
Subject: [PATCH] fix(FE): fixing line chart dashboard comparison

---
 .../dashboard/chart/DashboardLineChart.tsx    | 80 ++++++++++---------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 7b8d35a1..bfb13d9a 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -659,44 +659,50 @@ const DashboardLineChart = ({
                 seriesData = comparisonChart?.series || [];
               }
 
-              return seriesData
-                .filter((series) => visibleSeries.has(series.id))
-                .map((series, index) => {
-                  const isStandard = series.id
-                    .toString()
-                    .toLowerCase()
-                    .includes('std');
-                  // Use series.id directly as dataKey to match dataset fields
-                  const dataKey = series.id.toString();
+              return seriesData.map((series, originalIndex) => {
+                // Skip rendering if series is not visible
+                if (!visibleSeries.has(series.id)) {
+                  return null;
+                }
 
-                  return (
-                    <Line
-                      key={`${series.id}--${index}`}
-                      type='monotone'
-                      dataKey={dataKey}
-                      name={series.label}
-                      stroke={getLineColor(series.id, index, analysisMode)}
-                      opacity={isStandard ? 0.5 : 1}
-                      strokeWidth={2}
-                      strokeDasharray={isStandard ? '5 5' : undefined}
-                      dot={
-                        isStandard
-                          ? false
-                          : {
-                              r: 3,
-                              fill: '#fff',
-                              stroke: getLineColor(
-                                series.id,
-                                index,
-                                analysisMode
-                              ),
-                              strokeWidth: 2,
-                            }
-                      }
-                      activeDot={isStandard ? undefined : { r: 5 }}
-                    />
-                  );
-                });
+                const isStandard = series.id
+                  .toString()
+                  .toLowerCase()
+                  .includes('std');
+                const dataKey = series.id.toString();
+
+                return (
+                  <Line
+                    key={`${series.id}--${originalIndex}`}
+                    type='monotone'
+                    dataKey={dataKey}
+                    name={series.label}
+                    stroke={getLineColor(
+                      series.id,
+                      originalIndex,
+                      analysisMode
+                    )}
+                    opacity={isStandard ? 0.5 : 1}
+                    strokeWidth={2}
+                    strokeDasharray={isStandard ? '5 5' : undefined}
+                    dot={
+                      isStandard
+                        ? false
+                        : {
+                            r: 3,
+                            fill: '#fff',
+                            stroke: getLineColor(
+                              series.id,
+                              originalIndex,
+                              analysisMode
+                            ),
+                            strokeWidth: 2,
+                          }
+                    }
+                    activeDot={isStandard ? undefined : { r: 5 }}
+                  />
+                );
+              });
             })()}
           </LineChart>
         </ResponsiveContainer>