WIP don't use id for non-unique elements

Author: duncanbradley

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

@@ -48,7 +48,7 @@
     activeMarkerId,
     series,
     y,
-    id,
+    element,
     x,
     markers,
     markerFill,
@@ -86,53 +86,53 @@
   </marker>
 </defs>
 
-<g
-  data-id={dataId}
-  {id}
-  onclick={interactiveLines ? (e) => onClickSeries(dataId, tier) : null}
-  onmouseenter={interactiveLines
-    ? (e) => onMouseEnterSeries(dataId, tier)
-    : null}
-  onmouseleave={interactiveLines
-    ? (e) => onMouseLeaveSeries(dataId, tier)
-    : null}
-  role="button"
-  tabindex="0"
-  onkeydown={interactiveLines
-    ? (e) => e.key === "Enter" && onClickSeries(e, dataArray)
-    : null}
-  {opacity}
-  pointer-events={interactiveMarkers ? null : "none"}
->
-  {#if includeArea}
-    <path d={areaFunction(dataArray)} fill={areaFillColor}></path>
-  {/if}
-  <path
-    d={linePath}
-    fill="none"
-    stroke="invisible"
-    stroke-width={invisibleStrokeWidth}
-    pointer-events={interactiveLines ? "stroke" : "none"}
-  ></path>
-  {#if halo}
+<g data-id={dataId} {element} {opacity}>
+  <g
+    onclick={interactiveLines ? (e) => onClickSeries(dataId, tier) : null}
+    onmouseenter={interactiveLines
+      ? (e) => onMouseEnterSeries(dataId, tier)
+      : null}
+    onmouseleave={interactiveLines
+      ? (e) => onMouseLeaveSeries(dataId, tier)
+      : null}
+    role="button"
+    tabindex="0"
+    onkeydown={interactiveLines
+      ? (e) => e.key === "Enter" && onClickSeries(e, dataArray)
+      : null}
+    pointer-events={interactiveLines ? null : "none"}
+  >
+    {#if includeArea}
+      <path d={areaFunction(dataArray)} fill={areaFillColor}></path>
+    {/if}
+    <path
+      d={linePath}
+      fill="none"
+      stroke="invisible"
+      stroke-width={invisibleStrokeWidth}
+      pointer-events={interactiveLines ? "stroke" : "none"}
+    ></path>
+    {#if halo}
+      <path
+        d={linePath}
+        fill={pathFillColor}
+        stroke={chartBackgroundColor}
+        stroke-width={pathStrokeWidth * 1.2}
+        stroke-dasharray={pathStrokeDashArray}
+        pointer-events="none"
+      ></path>
+    {/if}
     <path
       d={linePath}
       fill={pathFillColor}
-      stroke={chartBackgroundColor}
-      stroke-width={pathStrokeWidth * 1.2}
+      stroke={pathStrokeColor}
+      stroke-width={pathStrokeWidth}
       stroke-dasharray={pathStrokeDashArray}
       pointer-events="none"
+      marker-start={`url(#${lineEnding}-${pathStrokeColor})`}
     ></path>
-  {/if}
-  <path
-    d={linePath}
-    fill={pathFillColor}
-    stroke={pathStrokeColor}
-    stroke-width={pathStrokeWidth}
-    stroke-dasharray={pathStrokeDashArray}
-    pointer-events="none"
-    marker-start={`url(#${lineEnding}-${pathStrokeColor})`}
-  ></path>
+  </g>
+
   {#if markers}
     <Marker
       {dataArray}

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

@@ -198,9 +198,12 @@
   let selectedLine = $derived([hoveredSeries, clickedSeries]);
 
   function handleClickOutside(event) {
+    {
+      console.log(event.target.closest());
+    }
     if (
       clickedSeries &&
-      !event.target.closest('[id^="line"]') &&
+      !event.target.closest('[id^="line"]') && //make this respond to the new element attribute
       !event.target.closest('[id^="label"]')
     ) {
       clickedSeries = null;

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

@@ -66,11 +66,10 @@
 {#each Object.keys(tieredDataObject) as tier}
   <g id={tier}>
     <g {...globalTierRules[tier]}>
-      {console.log(globalTierRules[tier])}
       {#each tieredDataObject[tier] as line, i}
         <Line
           {...line}
-          id={`line-${line[series]}`}
+          element={`line-${line[series]}`}
           {tier}
           {chartBackgroundColor}
           {lineFunction}

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

@@ -45,13 +45,21 @@
     onkeydown={interactiveMarkers
       ? (e) => e.key === "Enter" && onClickMarker(e, marker)
       : null}
+    pointer-events={interactiveMarkers ? null : "none"}
   >
+    <circle
+      r={markerRadius + 6}
+      fill="transparent"
+      stroke="none"
+      pointer-events="all"
+    ></circle>
     {#if markerShape === "circle"}
       <circle
         r={markerRadius}
         stroke={markerStroke}
         fill={markerFill}
         stroke-width={markerStrokeWidth}
+        pointer-events="none"
       ></circle>
     {:else if ["square", "diamond"].includes(markerShape)}
       <rect
@@ -63,6 +71,7 @@
         stroke={markerStroke}
         fill={markerFill}
         stroke-width={markerStrokeWidth}
+        pointer-events="none"
       ></rect>
     {:else if markerShape === "triangle"}
       <polygon
@@ -71,6 +80,7 @@
         stroke={markerStroke}
         fill={markerFill}
         stroke-width={markerStrokeWidth}
+        pointer-events="none"
       ></polygon>
     {/if}
   </g>

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

@@ -333,6 +333,9 @@
           functionAsString: ``,
         },
         value: function (series, tier) {
+          {
+            console.log("ENTERING SERIES");
+          }
           if (hoveredSeries !== series) {
             hoveredSeries = series;
             hoveredTier = tier;
@@ -346,6 +349,9 @@
           functionAsString: ``,
         },
         value: function (series, tier) {
+          {
+            console.log("LEAVING SERIES");
+          }
           if (hoveredSeries === series) {
             hoveredSeries = null;
             hoveredTier = null;
@@ -361,6 +367,9 @@
             }`,
         },
         value: function (event, marker, markerId, rect) {
+          {
+            console.log("ENTERING MARKER");
+          }
           activeMarkerId = marker;
           if (container) {
             const bounds = container.getBoundingClientRect();
@@ -391,6 +400,9 @@
             }`,
         },
         value: function (event, marker, dataId) {
+          {
+            console.log("LEAVING MARKER");
+          }
           activeMarkerId = null;
         },
       },
@@ -609,7 +621,7 @@
       pathStrokeColor: colors.black,
       pathStrokeWidth: 1,
       opacity: 0.05,
-      interactiveLines: true,
+      interactiveLines: false,
       markers: false,
       showLabel: false,
     },