WIP unique color per line

Author: duncanbradley

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

@@ -126,8 +126,32 @@
     },
 
     basicLineParams = {},
+    colorLineParams = (tier, line, lineIndex) => {
+      const colorValues = Object.values(colors);
+      return { pathStrokeColor: colorValues[lineIndex % colorValues.length] };
+    },
   } = $props();
 
+  let colors = $state({
+    teal: "#408A7B",
+    skyBlue: "#509EC8",
+    indigo: "#335F91",
+    ochre: "#BA7F30",
+    coral: "#E46B6C",
+    fuchsia: "#BB2765",
+    lavender: "#736CAC",
+    ashGrey: "#A0A0A0",
+    slateGrey: "#636363",
+    black: "#161616",
+    forestGreen: "#3C6E3C",
+    midnightTeal: "#2C5E5E",
+    dustyRose: "#C86B84",
+    steelBlue: "#4B6E91",
+    burntSienna: "#B65C38",
+    oliveGreen: "#7A8644",
+    slatePurple: "#64587C",
+  });
+
   let defaultLineParams = $derived({
     xFunction,
     yFunction,
@@ -170,11 +194,13 @@
     overrideLineParams,
     tieredLineParams,
     basicLineParams,
+    colorLineParams,
     defaultLineParams,
   ) {
     const listOfProperties = [
       ...new Set([
         ...Object.keys(defaultLineParams),
+        ...Object.keys(colorLineParams(tier, line)),
         ...Object.keys(basicLineParams ?? {}),
         ...Object.keys(tieredLineParams[tier] ?? {}),
         ...Object.keys(overrideLineParams(tier, line)),
@@ -187,10 +213,13 @@
         overrideLineParams(tier, line)[key] ??
           tieredLineParams[tier]?.[key] ??
           basicLineParams[key] ??
+          colorLineParams(tier, line)[key] ??
           defaultLineParams[key],
       ]),
     );
 
+    console.log(colorLineParams(tier, line));
+
     return {
       ...merged,
       ...line,
@@ -203,13 +232,14 @@
     Object.keys(tieredLineParams).reduce((acc, tier) => {
       acc[tier] = lineChartData.lines
         .filter((el) => getLine(tier, el))
-        .map((line) =>
+        .map((line, i) =>
           generateLineAttributes(
             line,
             tier,
             overrideLineParams,
             tieredLineParams,
             basicLineParams,
+            (tier, line) => colorLineParams(tier, line, i),
             defaultLineParams,
           ),
         );

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

@@ -15,7 +15,6 @@
   let textDimensions = $state();
   let verticalPadding = $state(8);
   let horizontalPadding = $derived(verticalPadding * 2);
-  $inspect(markerRect);
 </script>
 
 {#if tooltipSnippet === undefined}

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

@@ -465,13 +465,13 @@
   };`,
         },
         value: function (series, i) {
-          let colorsArray = [colors.coral, colors.fuschia, colors.purple];
+          let colorsArray = colors;
 
           return (
             {
-              [englandMedian]: colors.lightblue,
-              [selectedAreaCode]: colors.teal,
-              [similarAreas]: colors.darkblue,
+              [englandMedian]: colors.burntSienna,
+              [selectedAreaCode]: colors.coral,
+              [similarAreas]: colors.slatePurple,
             }[series] ?? colorsArray[i % colorsArray.length]
           );
         },
@@ -723,7 +723,7 @@
   });
 
   let getColor = function (series, i) {
-    let colorsArray = [colors.coral, colors.fuschia, colors.purple];
+    let colorsArray = colors;
 
     return (
       {

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

@@ -95,9 +95,9 @@
       basicLineParams={{ interactiveLines: true }}
       tieredLineParams={{
         all: {},
-        hover: { pathStrokeColor: "pink" },
+        hover: { pathStrokeWidth: 4 },
         clicked: {
-          pathStrokeColor: "red",
+          pathStrokeWidth: 5,
         },
       }}
       getLine={(tier, el) => {
@@ -131,7 +131,7 @@
         } else return true;
       }}
       tieredLineParams={{
-        secondary: {},
+        secondary: { pathStrokeColor: "grey" },
         primary: {
           halo: true,
           pathStrokeWidth: 5,
@@ -174,7 +174,11 @@
       x="x"
       y="y"
       series="areaCode"
-      basicLineParams={{ includeArea: true, areaFillColor: "lightgrey" }}
+      basicLineParams={{
+        includeArea: true,
+        pathStrokeColor: "darkgrey",
+        areaFillColor: "lightgrey",
+      }}
     ></LineChart>
   </div>
   <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>