use consistent colours in interactive charts

Author: duncanbradley

src/lib/components/data-vis/line-chart/LineChart.svelte

@@ -127,8 +127,7 @@
 
     basicLineParams = {},
     colorLineParams = (tier, line, lineIndex) => {
-      const colorValues = Object.values(colors);
-      return { pathStrokeColor: colorValues[lineIndex % colorValues.length] };
+      return { pathStrokeColor: lineColorMap.get(line.areaCode) };
     },
   } = $props();
 
@@ -152,6 +151,14 @@
     slatePurple: "#64587C",
   });
 
+  const lineColorMap = new Map();
+
+  lineChartData.lines.forEach((line, index) => {
+    const colorValues = Object.values(colors);
+    const color = colorValues[index % colorValues.length];
+    lineColorMap.set(line.areaCode, color);
+  });
+
   let defaultLineParams = $derived({
     xFunction,
     yFunction,