From 4d1a03ce7b3b313dd688dac81aa9045298f802ae Mon Sep 17 00:00:00 2001
From: kunkoala <azharffrahadian@gmail.com>
Date: Tue, 10 Dec 2024 19:34:39 +0100
Subject: [PATCH] :wrench: :beetle: better seriesRange cleanup and fixed stroke
 not appear when refreshed using higher layer number

---
 .../LineChartComponents/LineChart.tsx         |  9 ++---
 .../shared/LineChart/SeriesRange.ts           | 35 +++++++++----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/LineChartComponents/LineChart.tsx b/frontend/src/components/LineChartComponents/LineChart.tsx
index 090b111c..ad83c311 100644
--- a/frontend/src/components/LineChartComponents/LineChart.tsx
+++ b/frontend/src/components/LineChartComponents/LineChart.tsx
@@ -375,7 +375,6 @@ export default function LineChart({
       const fillColor = line.fill ?? color(theme.palette.error.main);
 
       return {
-        serieId: line.serieId ?? '',
         threshold: horizontalYAxisThreshold,
         fills: {
           fill: fillColor, // change the fill of the range above threshold
@@ -390,8 +389,10 @@ export default function LineChart({
         },
         alternatingStrokes: {
           stroke: lineColor,
-          strokeWidth: 2,
-          layer: 1,
+          strokeWidth: 2.5,
+
+          // somehow the layer needs to be set to a high number to be drawn on top of the other stroke, using values between 1-5 will not work and not refresh if we select another scenario
+          layer: 30,
           strokeDasharray: [10, 10],
           strokeOpacity: 1,
           visible: line.stroke.visible ?? true,
@@ -415,7 +416,7 @@ export default function LineChart({
 
         // set stroke settings from original line chart data below the threshold
         series.strokes.template.setAll({
-          strokeWidth: seriesSettings?.stroke.strokeWidth ?? 2,
+          strokeWidth: seriesSettings?.stroke.strokeWidth ?? 2.5,
           strokeDasharray: seriesSettings?.stroke.strokeDasharray ?? undefined,
         });
 
diff --git a/frontend/src/components/shared/LineChart/SeriesRange.ts b/frontend/src/components/shared/LineChart/SeriesRange.ts
index d8123fe5..d13a4af3 100644
--- a/frontend/src/components/shared/LineChart/SeriesRange.ts
+++ b/frontend/src/components/shared/LineChart/SeriesRange.ts
@@ -8,15 +8,13 @@ import {useLineSeriesList} from './LineSeries';
 import {useLayoutEffect} from 'react';
 import {AxisRenderer, ValueAxis} from '@amcharts/amcharts5/xy';
 import {IGraphicsSettings} from '@amcharts/amcharts5';
-import {ILineSeriesAxisRange} from '@amcharts/amcharts5/.internal/charts/xy/series/LineSeries';
 
 export function useSeriesRange(
   root: Root | null,
   chart: XYChart | null,
-  settings: Array<ILineSeriesSettings>,
+  lineChartSettings: Array<ILineSeriesSettings>,
   yAxis: ValueAxis<AxisRenderer> | null,
   rangeSettings: Array<{
-    serieId?: string | number;
     threshold?: number;
     fills?: Partial<IGraphicsSettings>;
     strokes?: Partial<IGraphicsSettings>;
@@ -25,7 +23,7 @@ export function useSeriesRange(
   initializer?: (series: LineSeries, i: number) => void
 ) {
   // Use the existing `useLineSeriesList` hook to create the series
-  const seriesList = useLineSeriesList(root, chart, settings, initializer);
+  const seriesList = useLineSeriesList(root, chart, lineChartSettings, initializer);
 
   // Use `useLayoutEffect` to apply the series range logic after the series are created
   useLayoutEffect(() => {
@@ -38,38 +36,37 @@ export function useSeriesRange(
 
       const seriesRangeDataItem = yAxis.makeDataItem({
         value: rangeSetting.threshold, // Start of the range
-        endValue: 1e6, // End value of the range (adjust as needed)
+        endValue: 1e6, // end value range (top of the chart)
       });
 
+      // this creates a new range series with it's own styling for alternating strokes
+      if (rangeSetting.alternatingStrokes) {
+        const alternatingStrokeSeriesRange = series.createAxisRange(seriesRangeDataItem);
+        alternatingStrokeSeriesRange.strokes?.template.setAll(rangeSetting.alternatingStrokes);
+      }
+
       const aboveThresholdRange = series.createAxisRange(seriesRangeDataItem);
 
-      // Apply the fill settings
+      // apply fill settings to aboveThresholdRange
       if (rangeSetting.fills) {
         aboveThresholdRange.fills?.template.setAll(rangeSetting.fills);
       }
 
-      // Apply the stroke settings
+      // apply stroke settings to aboveThresholdRange
       if (rangeSetting.strokes) {
         aboveThresholdRange.strokes?.template.setAll(rangeSetting.strokes);
       }
-
-      if (rangeSetting.alternatingStrokes) {
-        const alternatingStrokeSeriesRange = series.createAxisRange(seriesRangeDataItem);
-        alternatingStrokeSeriesRange.strokes?.template.setAll(rangeSetting.alternatingStrokes);
-      }
     });
 
     return () => {
-      // Dispose of the ranges when the component unmounts
       seriesList.forEach((series: LineSeries) => {
-        series.axisRanges.each((range: ILineSeriesAxisRange) => {
-          if (series.axisRanges.contains(range)) {
-            series.axisRanges.removeValue(range);
-          }
-        });
+        // Clear the axis ranges when the component is unmounted
+        if (!series.isDisposed()) {
+          series.axisRanges.clear();
+        }
       });
     };
-  }, [seriesList, rangeSettings, yAxis]);
+  }, [seriesList, rangeSettings, yAxis, chart]);
 
   return seriesList ?? null;
 }