assign colours based on order within tier, not order within data

Author: duncanbradley

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

@@ -157,12 +157,22 @@
     slatePurple: "#64587C",
   });
 
-  const lineColorMap = Object.fromEntries(
-    lineChartData.lines.map((line, index) => [
-      line.areaCode,
-      Object.values(colors)[index % Object.values(colors).length],
-    ]),
-  );
+  const colorValues = Object.values(colors);
+
+  const lineColorMap = {};
+
+  Object.entries(tieredLineParams).forEach(([tier, tierParams]) => {
+    const tierLines = lineChartData.lines.filter((line) => getLine(tier, line));
+    let colorIndex = 0;
+
+    tierLines.forEach((line) => {
+      const id = line.areaCode;
+      if (!(id in lineColorMap)) {
+        lineColorMap[id] = colorValues[colorIndex % colorValues.length];
+        colorIndex++;
+      }
+    });
+  });
 
   let defaultLineParams = $derived({
     xFunction,

src/wrappers/components/data-vis/line-chart/LineChartWrapper.svelte

@@ -616,14 +616,13 @@
     primary: {
       halo: true,
       pathStrokeWidth: 5,
-      pathStrokeColor: colors.darkgrey,
       interactiveLines: true,
       lineEnding: null,
       markers: true,
       interactiveMarkers: true,
     },
     clicked: {
-      pathStrokeColor: colors.ochre,
+      pathStrokeColor: clickedTier === "secondary" ? colors.ashGrey : null,
       pathStrokeWidth: 7,
       halo: true,
       interactiveLines: false,
@@ -632,7 +631,7 @@
       lineEnding: null,
     },
     hover: {
-      pathStrokeColor: colors.ochre,
+      pathStrokeColor: hoveredTier === "secondary" ? colors.ashGrey : null,
       pathStrokeWidth: 6,
       halo: true,
       interactiveLines: false,