move haloColor and interaction functions to LineChart

Author: duncanbradley

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

@@ -40,7 +40,7 @@
     onMouseLeave,
     onMouseMove,
     halo,
-    chartBackgroundColor = "#d1d1d1",
+    haloColor = "#d1aad1",
     // onClickMarker,
     // onMouseEnterMarker,
     // onMouseLeaveMarker,
@@ -125,7 +125,7 @@
     <path
       d={lineFunction(dataArray)}
       fill={pathFillColor}
-      stroke={chartBackgroundColor}
+      stroke={haloColor}
       stroke-width={pathStrokeWidth * 1.2}
       stroke-dasharray={pathStrokeDashArray}
     ></path>

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

@@ -58,7 +58,11 @@
         line[key] ?? defaultLineParams[tier][key],
       ]),
     );
-    return merged;
+    return {
+      ...merged,
+      dataId: line.areaCode, // should I just use areaCode in the component itself?
+      dataArray: line.data, // should I just rename data in the original object so it's not repeated?
+    };
   }
 </script>
 
@@ -99,17 +103,8 @@
           defaultLineParams,
           tier,
         )}
-        <Line
-          dataArray={line.data}
-          {...lineAttributes}
-          dataId={line.areaCode}
-          onClick={(event, dataArray, dataId) => (lineHovered = dataId)}
-          onMouseEnter={(event, dataArray, dataId) => (lineHovered = dataId)}
-          onMouseMove={(event, dataArray, dataId) => (lineHovered = dataId)}
-          onMouseLeave={() => (lineHovered = null)}
-          {...defaultLineParams}
-          {chartBackgroundColor}
-        />
+        {console.log(lineAttributes)}
+        <Line {...lineAttributes} {chartBackgroundColor} />
       {/each}
     </g>
 

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

@@ -61,6 +61,19 @@
       .curve(curveLinear),
   );
 
+  let onClick = (event, dataArray, dataId) => {
+    lineHovered = dataId;
+  };
+  let onMouseEnter = (event, dataArray, dataId) => {
+    lineHovered = dataId;
+  };
+  let onMouseMove = (event, dataArray, dataId) => {
+    lineHovered = dataId;
+  };
+  let onMouseLeave = () => {
+    lineHovered = null;
+  };
+
   let lineHovered = $state();
   let labelClicked = $state();
   let labelHovered = $state();
@@ -132,13 +145,10 @@
   );
 
   let tieredLineParams = $derived({
-    otherTier: {
-      halo: false,
-    },
+    otherTier: {},
     invisibles: {
       listenForOnHoverEvents: true,
       pathStrokeWidth: 1,
-      halo: false,
     },
     secondary: {
       "pointer-events": "none",
@@ -164,6 +174,11 @@
     xFunction: xFunction,
     yFunction: yFunction,
     areaFunction: areaFunction,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave,
+    haloColor: chartBackgroundColor,
   };
 
   let defaultLineParams = Object.fromEntries(
@@ -202,15 +217,13 @@
   );
 
   let globalTierRules = $derived({
-    otherTier: {
-      opacity: nothingSelected ? 1 : 0.5,
-    },
+    otherTier: {},
     invisibles: { opacity: 0 },
     secondary: {
       opacity: nothingSelected ? 1 : 0.5,
     },
     primary: {
-      opacity: nothingSelected ? 1 : 0.5,
+      opacity: nothingSelected ? 1 : 0.4,
     },
     hover: { opacity: 1 },
   });