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

Author: Miles Hinchliffe

.gitignore

@@ -21,4 +21,5 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-*.mdc
+*.mdc
+.github/*.md

src/lib/assets/images/homepage-illustration.svg

@@ -30,9 +30,9 @@
     yFunction,
     lineEnding,
     dataId,
-    onClickLine,
-    onMouseEnterLine,
-    onMouseLeaveLine,
+    onClickSeries,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
     halo,
     chartBackgroundColor,
     invisibleStrokeWidth,
@@ -44,18 +44,20 @@
     // labelText,
     // labelColor,
     // labelTextColor,
-    lineClicked,
-    lineHovered,
+    clickedSeries,
+    hoveredSeries,
     activeMarkerId,
     series,
     y,
+    id,
     x,
     markers,
     markerFill,
     markerRadius,
     markerShape,
     markerStroke,
     markerStrokeWidth,
+    tier,
   } = $props();
 
   let linePath = $derived(lineFunction(dataArray));
@@ -87,17 +89,15 @@
 
 <g
   data-id={dataId}
-  onclick={interactive ? (e) => onClickLine(e, dataArray, dataId) : null}
-  onmouseenter={interactive
-    ? (e) => onMouseEnterLine(e, dataArray, dataId)
-    : null}
-  onmouseleave={interactive
-    ? (e) => onMouseLeaveLine(e, dataArray, dataId)
-    : null}
+  {id}
+  onclick={interactive ? (e) => onClickSeries(dataId, tier) : null}
+  onmouseenter={interactive ? (e) => onMouseEnterSeries(dataId, tier) : null}
+  onmouseleave={interactive ? (e) => onMouseLeaveSeries(dataId, tier) : null}
   role="button"
   tabindex="0"
-  onkeydown={(e) => e.key === "Enter" && onClickLine(e, dataArray)}
+  onkeydown={(e) => e.key === "Enter" && onClickSeries(e, dataArray)}
   {opacity}
+  pointer-events={interactive ? null : "none"}
 >
   {#if includeArea}
     <path d={areaFunction(dataArray)} fill={areaFillColor}></path>

src/lib/assets/images/masthead-illustration.svg

@@ -9,44 +9,85 @@
   import Lines from "$lib/components/data-vis/line-chart/Lines.svelte";
 
   let {
-    getColor,
-    tieredLineParams,
-    colors,
-    xFunction,
-    yFunction,
-    lineFunction,
-    lineClicked,
-    lineHovered,
-    labelClicked = $bindable(),
-    labelHovered = $bindable(),
-    svgWidth = $bindable(500),
-    activeMarkerId,
-    onClickLine,
-    onMouseEnterLine,
-    onMouseLeaveLine,
-    onClickLabel,
-    onMouseEnterLabel,
-    onMouseLeaveLabel,
+    // Required
+    series,
+    y,
+    x,
+    lineChartData,
+
+    // ask
+    xFunction = (number) => {
+      return scaleLinear()
+        .domain([2015, 2022])
+        .range([0, svgWidth - paddingLeft - paddingRight])(number);
+    },
+    yFunction = (number) => {
+      return scaleLinear()
+        .domain([0, 100])
+        .range([svgHeight - paddingTop - paddingBottom, 0])(number);
+    },
+    lineFunction = line()
+      .x((d) => xFunction(d[x]))
+      .y((d) => yFunction(d[y]))
+      .curve(curveLinear),
+    labelText,
+
+    basicLineParams, // contains functions
+    tooltipContent, // snippet
+
+    onClickSeries = (series, tier) => {
+      if (clickedSeries === dataId) {
+        clickedSeries = null;
+      } else {
+        clickedSeries = series;
+        clickedTier = tier;
+      }
+    },
+    onMouseLeaveSeries = (series, tier) => {
+      if (hoveredSeries === series) {
+        hoveredSeries = null;
+        hoveredTier = null;
+      }
+    },
+    onMouseEnterSeries = (series, tier) => {
+      if (hoveredSeries !== series) {
+        hoveredSeries = series;
+        hoveredTier = tier;
+      }
+    },
     onClickMarker,
     onMouseEnterMarker,
     onMouseLeaveMarker,
+
+    // Optional
+    clickedSeries = $bindable(undefined),
+    hoveredSeries = undefined,
+    overrideLineParams = () => ({}),
+    getLine = () => true,
+    nothingSelected = true,
+    svgWidth = $bindable(500),
     svgHeight = 500,
     paddingTop = 50,
     paddingBottom = 50,
     paddingLeft = 50,
     paddingRight = 150,
-    lineChartData,
-    interactiveLines,
-    chartBackgroundColor,
-    getLine,
-    basicLineParams,
-    overrideLineParams,
-    nothingSelected = $bindable(),
-    globalTierRules,
-    labelText,
-    series,
-    y,
-    x,
+    activeMarkerId = undefined,
+    chartBackgroundColor = "#f5f5f5",
+    seriesLabels = $bindable(false),
+    globalTierRules = {
+      otherTier: {},
+      secondary: {
+        opacity: nothingSelected ? 1 : 0.5,
+      },
+      primary: {
+        opacity: nothingSelected ? 1 : 0.4,
+      },
+      hover: { opacity: 1 },
+      clicked: { opacity: 1 },
+    },
+    tieredLineParams = {
+      all: {},
+    },
   } = $props();
 
   let chartWidth = $derived(svgWidth - paddingLeft - paddingRight);
@@ -60,19 +101,19 @@
   // );
 
   let selectedLine = $derived([
-    lineHovered,
-    lineClicked,
-    labelHovered,
-    labelClicked,
+    hoveredSeries,
+    clickedSeries,
+    hoveredSeries,
+    clickedSeries,
   ]);
 
   function handleClickOutside(event) {
     if (
-      lineClicked != event.target.parentElement.dataset.id ||
-      (labelClicked && !event.target.closest('[id^="label"]'))
+      clickedSeries &&
+      !event.target.closest('[id^="line"]') &&
+      !event.target.closest('[id^="label"]')
     ) {
-      labelClicked = null;
-      lineClicked = null;
+      clickedSeries = null;
     }
   }
 
@@ -125,6 +166,12 @@
       return acc;
     }, {}),
   );
+
+  function hasShowLabel(objOfArrays) {
+    return Object.values(objOfArrays).some((array) =>
+      array.some((obj) => obj.showLabel === true),
+    );
+  }
 </script>
 
 <div bind:clientWidth={svgWidth}>
@@ -144,20 +191,15 @@
             {chartWidth}
             {xFunction}
             {yFunction}
-            bind:labelClicked
-            bind:labelHovered
-            lineHovered
-            lineClicked
+            {hoveredSeries}
+            {clickedSeries}
             {chartHeight}
             {globalTierRules}
             {chartBackgroundColor}
-            bind:nothingSelected
-            {onMouseEnterLine}
-            {onMouseLeaveLine}
-            {onClickLine}
-            {onClickLabel}
-            {onMouseEnterLabel}
-            {onMouseLeaveLabel}
+            {nothingSelected}
+            {onMouseEnterSeries}
+            {onClickSeries}
+            {onMouseLeaveSeries}
             {onClickMarker}
             {onMouseEnterMarker}
             {onMouseLeaveMarker}
@@ -166,6 +208,7 @@
             {series}
             {y}
             {x}
+            {tooltipContent}
           ></Lines>
         </g>
         <g data-role="y-axis">