all lines now have invisible line to handle interaction, invisibles tier removed

Author: duncanbradley

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

@@ -40,7 +40,9 @@
     onMouseEnter,
     onMouseLeave,
     halo,
-    haloColor = "#d1aad1",
+    chartBackgroundColor,
+    invisibleStrokeWidth,
+    interactive,
     // onClickMarker,
     // onMouseEnterMarker,
     // onMouseLeaveMarker,
@@ -113,20 +115,18 @@
     <path d={areaFunction(dataArray)} fill={areaFillColor}></path>
   {/if}
   {console.log(tier)}
-  {#if tier !== "invisibles"}
-    <path
-      d={lineFunction(dataArray)}
-      fill="none"
-      stroke="invisible"
-      stroke-width="20"
-      pointer-events="stroke"
-    ></path>
-  {/if}
+  <path
+    d={lineFunction(dataArray)}
+    fill="none"
+    stroke="invisible"
+    stroke-width={invisibleStrokeWidth}
+    pointer-events={interactive ? "stroke" : "none"}
+  ></path>
   {#if halo}
     <path
       d={lineFunction(dataArray)}
       fill={pathFillColor}
-      stroke={haloColor}
+      stroke={chartBackgroundColor}
       stroke-width={pathStrokeWidth * 1.2}
       stroke-dasharray={pathStrokeDashArray}
       pointer-events="none"

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

@@ -20,8 +20,6 @@
     lineHovered = $bindable(),
     lineClicked = $bindable(),
     chartHeight,
-    colors,
-    showAllData,
     defaultLineParams,
     globalTierRules,
     chartBackgroundColor,
@@ -114,7 +112,7 @@
           defaultLineParams,
           tier,
         )}
-        <Line {...lineAttributes} {tier} />
+        <Line {...lineAttributes} {tier} {chartBackgroundColor} />
       {/each}
     </g>
 

src/routes/playground/create-a-reactive-line-chart/local-lib/LineChart.svelte

@@ -92,6 +92,8 @@
   let englandMedian = $state("E06000040");
   let similarAreas = $state("E07000224");
 
+  let interactiveLines = $state(["primary", "secondary"]);
+
   function handleClickOutside(event) {
     if (
       lineClicked != event.target.parentElement.dataset.id ||
@@ -145,7 +147,7 @@
 
   let dataArray = $derived(
     data.lines.map((el, i) => {
-      const tiers = ["invisibles"];
+      const tiers = [];
       el.areaCode == lineClicked
         ? tiers.push("clicked")
         : el.areaCode == lineHovered
@@ -167,27 +169,25 @@
       pathStrokeColor: colors.black,
       pathStrokeWidth: 1,
       opacity: 0.05,
+      interactive: interactiveLines.includes("secondary"),
     },
     primary: {
       halo: true,
       pathStrokeWidth: 5,
       pathStrokeColor: colors.darkgrey,
+      interactive: interactiveLines.includes("primary"),
     },
     clicked: {
       pathStrokeColor: colors.ochre,
       pathStrokeWidth: 7,
       halo: true,
+      interactive: true,
     },
     hover: {
       pathStrokeColor: colors.ochre,
       pathStrokeWidth: 5,
       halo: true,
-    },
-
-    invisibles: {
-      // listenForOnHoverEvents: true, //PASS THESE THROUGH TO LINE
-      // "pointer-events": "visibleStroke",
-      // pathStrokeWidth: 5,
+      interactive: true,
     },
   });
 
@@ -200,7 +200,7 @@
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     haloColor: chartBackgroundColor,
-    "pointer-events": "none",
+    invisibleStrokeWidth: 20,
   });
 
   let defaultLineParams = $derived(
@@ -219,7 +219,11 @@
           if (key === "primary") {
             return primaryLines.includes(el.areaCode);
           }
-          if (key === "secondary" && showAllData) {
+          if (
+            key === "secondary" &&
+            showAllData &&
+            !primaryLines.includes(el.areaCode)
+          ) {
             return true;
           }
           if (key === "hover") {
@@ -246,7 +250,6 @@
 
   let globalTierRules = $derived({
     otherTier: {},
-    invisibles: { opacity: 0 },
     secondary: {
       opacity: nothingSelected ? 1 : 0.5,
     },