Merge branch 'main-check-merge' of https://github.com/communitiesuk/oflog_svelte_component_library into main-check-merge

Author: Ibrahim-Haizel

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

@@ -22,28 +22,28 @@
     pathStrokeDashArray = "none",
     areaFillColor,
     includeArea = false,
-    includeMarkers = false,
+    markers,
     markerShape = "circle",
     markerRadius = 5,
     markerFill = "grey",
     markerStroke = "white",
     markerStrokeWidth = 3,
     lineFunction,
     areaFunction,
+    xFunction,
+    yFunction,
     lineEnding,
     dataId,
-    // markersDataId,
     onClickLine,
     onMouseEnterLine,
     onMouseLeaveLine,
     halo,
     chartBackgroundColor,
     invisibleStrokeWidth,
     interactive,
-    // onClickMarker,
-    // onMouseEnterMarker,
-    // onMouseLeaveMarker,
-    // onMouseMoveMarker,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
     // includeLabels,
     // labelText,
     // labelColor,
@@ -65,10 +65,6 @@
     return mappedItems;
   }
 
-  let handleClick = (e) => onClickLine(e, dataArray, dataId);
-  let handleEnter = (e) => onMouseEnterLine(e, dataArray, dataId);
-  let handleLeave = (e) => onMouseLeaveLine(e, dataArray, dataId);
-
   let linePath = lineFunction(dataArray);
 </script>
 
@@ -98,9 +94,9 @@
 
 <g
   data-id={dataId}
-  onclick={handleClick}
-  onmouseenter={handleEnter}
-  onmouseleave={handleLeave}
+  onclick={(e) => onClickLine(e, dataArray, dataId)}
+  onmouseenter={(e) => onMouseEnterLine(e, dataArray, dataId)}
+  onmouseleave={(e) => onMouseLeaveLine(e, dataArray, dataId)}
   role="button"
   tabindex="0"
   onkeydown={(e) => e.key === "Enter" && onClickLine(e, dataArray)}
@@ -135,14 +131,13 @@
     pointer-events="none"
     marker-start={`url(#${lineEnding}-${pathStrokeColor})`}
   ></path>
-  <!-- {#if includeMarkers}
+  {#if markers}
     {#each dataArray as marker, i}
       <g
-        data-id={markersDataId + "-" + i}
+        data-id={"marker-" + i}
         onclick={(event) => onClickMarker(event, marker)}
-        onmouseenter={(event) => onMouseEnterMarker(i)}
-        onmouseleave={(event) => onMouseLeaveMarker(i)}
-        onmousemove={(event) => onMouseMove(event, marker)}
+        onmouseenter={(event) => onMouseEnterMarker(event, marker)}
+        onmouseleave={(event) => onMouseLeaveMarker(event, marker)}
         transform="translate({xFunction(marker.x)},{yFunction(marker.y)})"
         role="button"
         tabindex="0"
@@ -175,31 +170,31 @@
             stroke-width={markerStrokeWidth}
           ></polygon>
         {/if}
-        {#if includeLabels}
-          {#if i == hoveredMarker}
+        {#if false}
+          {#if i == 1}
             <ValueLabel
               {marker}
-              {labelColor}
-              {labelTextColor}
-              textContent={parseInput(marker, labelText)}
+              labelColor="grey"
+              labelTextColor="black"
+              textContent={parseInput(marker, marker.y)}
             ></ValueLabel>
           {/if}
         {/if}
       </g>
     {/each}
-  {/if}-->
+  {/if}
 </g>
 
 <!-- <path
   d={pathFunction(dataArray)}
   fill="none"
   stroke={color}
   stroke-width={strokeWidth}
-></path>
+></path> -->
 
-{#if markers}
+<!-- {#if true}
   {#each dataArray as marker}
-    <circle cx={x(marker.x)} cy={y(marker.y)} r="6" stroke="white" fill={color}>
+    <circle cx={marker.x} cy={marker.y} r="6" stroke="white" fill="black">
     </circle>
   {/each}
 {/if} -->

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

@@ -26,6 +26,9 @@
     onClickLabel,
     onMouseEnterLabel,
     onMouseLeaveLabel,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
     svgHeight = 500,
     paddingTop = 50,
     paddingBottom = 50,
@@ -153,6 +156,9 @@
             {onClickLabel}
             {onMouseEnterLabel}
             {onMouseLeaveLabel}
+            {onClickMarker}
+            {onMouseEnterMarker}
+            {onMouseLeaveMarker}
           ></Lines>
         </g>
         <g data-role="y-axis">

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

@@ -27,6 +27,9 @@
     onMouseEnterLabel,
     onMouseLeaveLabel,
     onClickLabel,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    onClickMarker,
   } = $props();
 
   let bounds = $state([0, chartHeight]);
@@ -67,9 +70,14 @@
           {tier}
           {chartBackgroundColor}
           {lineFunction}
+          {xFunction}
+          {yFunction}
           {onMouseEnterLine}
           {onMouseLeaveLine}
           {onClickLine}
+          {onMouseEnterMarker}
+          {onMouseLeaveMarker}
+          {onClickMarker}
           bind:lineClicked
           bind:lineHovered
         />

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

@@ -146,6 +146,8 @@
       (item) => item == null,
     ),
   );
+  let checkMarkerInteraction = $state();
+  $inspect(checkMarkerInteraction);
 
   /**
    * ! Step 3 - Add your props
@@ -342,6 +344,46 @@
             : (labelClicked = areaCode);
         },
       },
+      {
+        name: "onMouseEnterMarker",
+        category: "lineEvents",
+        functionElements: {
+          functionAsString: `function (event, dataArray, dataId) {
+              labelHovered = areaCode;
+            }`,
+        },
+        value: function (event, dataArray, dataId) {
+          checkMarkerInteraction = "enter";
+        },
+      },
+      {
+        name: "onMouseLeaveMarker",
+        category: "lineEvents",
+        functionElements: {
+          functionAsString: `function (event, dataArray, dataId) {
+              if (labelClicked !== areaCode) {
+                labelHovered = null;
+              }
+            }`,
+        },
+        value: function (event, dataArray, dataId) {
+          checkMarkerInteraction = "left";
+        },
+      },
+      {
+        name: "onClickMarker",
+        category: "lineEvents",
+        functionElements: {
+          functionAsString: `function (event, dataArray, dataId) {
+              labelClicked === areaCode
+                ? ((labelClicked = null), (labelHovered = null))
+                : (labelClicked = areaCode);
+            }`,
+        },
+        value: function (event, dataArray, dataId) {
+          checkMarkerInteraction = "clicked";
+        },
+      },
       {
         name: "onMouseEnterLine",
         category: "lineEvents",
@@ -591,37 +633,37 @@
       pathStrokeColor: colors.black,
       pathStrokeWidth: 1,
       opacity: 0.05,
-      interactive: true,
+      interactive: false,
       markers: false,
       showLabel: false,
-      lineEnding: null,
     },
     primary: {
       halo: true,
       pathStrokeWidth: 5,
       pathStrokeColor: colors.darkgrey,
-      interactive: true,
+      interactive: false,
       markers: false,
       showLabel: !lineClicked && !lineHovered && !labelClicked,
-      lineEnding: "arrow",
+      lineEnding: null,
+      markers: true,
     },
     clicked: {
       pathStrokeColor: colors.ochre,
       pathStrokeWidth: 7,
       halo: true,
-      interactive: true,
+      interactive: false,
       markers: false,
       showLabel: true,
-      lineEnding: "arrow",
+      lineEnding: null,
     },
     hover: {
       pathStrokeColor: colors.ochre,
       pathStrokeWidth: 6,
       halo: true,
-      interactive: true,
+      interactive: false,
       markers: false,
       showLabel: true,
-      lineEnding: "arrow",
+      lineEnding: null,
     },
   });