add line chart with custom labels

Author: duncanbradley

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

@@ -336,6 +336,7 @@
       {activeMarkerId}
       labelColor="lightgrey"
       labelTextColor="black"
+      {labelText}
       {tooltipContent}
       {xFunction}
       {yFunction}

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

@@ -66,6 +66,7 @@
 {#each Object.keys(tieredDataObject) as tier}
   <g id={tier}>
     <g {...globalTierRules[tier]}>
+      {console.log(globalTierRules[tier])}
       {#each tieredDataObject[tier] as line, i}
         <Line
           {...line}

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

@@ -62,6 +62,6 @@
     stroke-width={clickedSeries ? 0.7 : 0}
     stroke="black"
   >
-    {labelText(dataArray)}
+    {typeof labelText === "function" ? labelText(dataArray) : labelText}
   </text>
 </g>

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

@@ -9,6 +9,7 @@
   import LineChart from "$lib/components/data-vis/line-chart/LineChart.svelte";
 
   let { data } = $props();
+
   const lineChartData = (() => {
     const found = data.dataInFormatForLineChart.find(
       (el) => el.metric === "Household waste recycling rate",
@@ -23,6 +24,13 @@
     return found ? { ...found, lines: found.lines.slice(0, 1) } : null;
   })();
 
+  const theData = (() => {
+    const found = data.dataInFormatForLineChart.find(
+      (el) => el.metric === "Household waste recycling rate",
+    );
+    return found;
+  })();
+
   let accordionSnippetSections = [
     {
       id: "1",
@@ -49,13 +57,22 @@
       heading: "5. Line chart with shaded area",
       content: Example5,
     },
+    {
+      id: "6",
+      heading: "6. Line chart with custom labels",
+      content: Example6,
+    },
   ];
 
   let activeMarkerId = $state();
   let clickedSeries = $state();
   let hoveredSeries = $state();
   let clickedTier = $state();
   let hoveredTier = $state();
+  $inspect({ clickedTier, hoveredTier });
+  let nothingSelected = $derived(
+    [clickedSeries, hoveredSeries].every((item) => item == null),
+  );
 </script>
 
 <div>
@@ -175,3 +192,80 @@
   </div>
   <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
 {/snippet}
+
+{#snippet Example6()}
+  <div class="p-5 bg-white">
+    <LineChart
+      lineChartData={theData}
+      x="x"
+      y="y"
+      series="areaCode"
+      basicLineParams={{ interactiveLines: true }}
+      tieredLineParams={{
+        hover: {
+          pathStrokeWidth: 5,
+          pathStrokeColor: hoveredTier === "secondary" ? "grey" : null,
+        },
+        clicked: {
+          pathStrokeWidth: 6,
+          pathStrokeColor: clickedTier === "secondary" ? "grey" : null,
+        },
+        secondary: { pathStrokeColor: "grey", halo: true },
+        primary: {
+          halo: true,
+          pathStrokeWidth: 4,
+        },
+      }}
+      bind:clickedSeries
+      bind:hoveredSeries
+      bind:clickedTier
+      bind:hoveredTier
+      getLine={(tier, el) => {
+        if (tier === "primary") {
+          return ["E09000033"].includes(el.areaCode);
+        }
+        if (tier === "secondary") {
+          return [
+            "E09000025",
+            "E09000033",
+            "E09000030",
+            "E09000032",
+            "E06000004",
+            "E09000030",
+          ].includes(el.areaCode);
+        }
+        if (tier === "hover") {
+          return [hoveredSeries].includes(el.areaCode);
+        }
+        if (tier === "clicked") {
+          return [clickedSeries].includes(el.areaCode);
+        }
+      }}
+      overrideLineParams={(tier, el) => {
+        return {
+          placeLabel:
+            [hoveredSeries, clickedSeries].includes(el.areaCode) ||
+            (tier === "primary" &&
+              (nothingSelected ||
+                [hoveredTier, clickedTier].includes("primary"))),
+          showLabel:
+            [hoveredSeries, clickedSeries].includes(el.areaCode) ||
+            (tier === "primary" && nothingSelected) ||
+            (!clickedSeries && hoveredTier === "primary" && tier === "primary"),
+        };
+      }}
+      labelText={(dataArray) => {
+        const areaNames = {
+          E09000033: "A",
+          E09000025: "B",
+          E09000032: "C",
+          E06000004: "D",
+          E09000030: "E",
+        };
+        return areaNames[dataArray["areaCode"]] ?? dataArray["areaCode"];
+      }}
+      {nothingSelected}
+    ></LineChart>
+  </div>
+  <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
+{/snippet}