@communitiesuk/svelte-component-library 0.1.17 → 0.2.0-alpha.2

package/dist/components/data-vis/line-chart/Lines.svelte.d.ts

@@ -7,13 +7,16 @@ declare const Lines: import("svelte").Component<{
     tieredDataObject: any;
     dataArray: any;
     lineFunction: any;
+    areaFunction: any;
     chartWidth: any;
     xFunction: any;
     yFunction: any;
     clickedSeries: any;
     hoveredSeries: any;
+    clickedTier: any;
+    hoveredTier: any;
     chartHeight: any;
-    globalTierRules: any;
+    globalTierParams: any;
     chartBackgroundColor?: string;
     nothingSelected: any;
     onMouseEnterSeries: any;
@@ -27,19 +30,21 @@ declare const Lines: import("svelte").Component<{
     series: any;
     y: any;
     x: any;
-    tooltipContent: any;
 }, {}, "">;
 type $$ComponentProps = {
     tieredDataObject: any;
     dataArray: any;
     lineFunction: any;
+    areaFunction: any;
     chartWidth: any;
     xFunction: any;
     yFunction: any;
     clickedSeries: any;
     hoveredSeries: any;
+    clickedTier: any;
+    hoveredTier: any;
     chartHeight: any;
-    globalTierRules: any;
+    globalTierParams: any;
     chartBackgroundColor?: string;
     nothingSelected: any;
     onMouseEnterSeries: any;
@@ -53,5 +58,4 @@ type $$ComponentProps = {
     series: any;
     y: any;
     x: any;
-    tooltipContent: any;
 };

package/dist/components/data-vis/line-chart/Marker.svelte

@@ -10,11 +10,13 @@
     yFunction,
     x,
     y,
+    pathStrokeColor = null,
     markerShape = "circle",
     markerRadius = 5,
-    markerFill = "grey",
+    markerFill = pathStrokeColor,
     markerStroke = "white",
     markerStrokeWidth = 1,
+    interactiveMarkers,
   } = $props();
 </script>
 
@@ -22,20 +24,42 @@
   {@const markerId = "marker-" + marker[series] + marker[x]}
   <g
     data-id={markerId}
-    onclick={(event) => onClickMarker(event, marker, markerId)}
-    onmouseenter={(event) => onMouseEnterMarker(event, marker, markerId)}
-    onmouseleave={(event) => onMouseLeaveMarker(event, marker, markerId)}
+    onclick={interactiveMarkers
+      ? (event) => onClickMarker(event, marker, markerId)
+      : null}
+    onmouseenter={interactiveMarkers
+      ? (event) =>
+          onMouseEnterMarker(
+            event,
+            marker,
+            markerId,
+            event.currentTarget.getBoundingClientRect(),
+          )
+      : null}
+    onmouseleave={interactiveMarkers
+      ? (event) => onMouseLeaveMarker(event, marker, markerId)
+      : null}
     transform="translate({xFunction(marker[x])},{yFunction(marker[y])})"
     role="button"
     tabindex="0"
-    onkeydown={(e) => e.key === "Enter" && onClickMarker(e, marker)}
+    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
@@ -47,6 +71,7 @@
         stroke={markerStroke}
         fill={markerFill}
         stroke-width={markerStrokeWidth}
+        pointer-events="none"
       ></rect>
     {:else if markerShape === "triangle"}
       <polygon
@@ -55,6 +80,7 @@
         stroke={markerStroke}
         fill={markerFill}
         stroke-width={markerStrokeWidth}
+        pointer-events="none"
       ></polygon>
     {/if}
   </g>

package/dist/components/data-vis/line-chart/Marker.svelte.d.ts

@@ -13,11 +13,13 @@ declare const Marker: import("svelte").Component<{
     yFunction: any;
     x: any;
     y: any;
+    pathStrokeColor?: any;
     markerShape?: string;
     markerRadius?: number;
-    markerFill?: string;
+    markerFill?: any;
     markerStroke?: string;
     markerStrokeWidth?: number;
+    interactiveMarkers: any;
 }, {}, "">;
 type $$ComponentProps = {
     dataArray: any;
@@ -29,9 +31,11 @@ type $$ComponentProps = {
     yFunction: any;
     x: any;
     y: any;
+    pathStrokeColor?: any;
     markerShape?: string;
     markerRadius?: number;
-    markerFill?: string;
+    markerFill?: any;
     markerStroke?: string;
     markerStrokeWidth?: number;
+    interactiveMarkers: any;
 };

package/dist/components/data-vis/line-chart/SeriesLabel.svelte

@@ -16,7 +16,7 @@
     series,
     y,
     tier,
-    interactive,
+    interactiveLines,
   } = $props();
 
   let oldY = $derived(yFunction(dataArray.data[0][y]));
@@ -30,21 +30,21 @@
 </script>
 
 <g
-  {id}
+  data-id={id}
   transform="translate({chartWidth + 8},{0})"
-  onclick={interactive
+  onclick={interactiveLines
     ? () => onClickSeries(dataArray[series], tier)
     : undefined}
-  onmouseenter={interactive
+  onmouseenter={interactiveLines
     ? () => onMouseEnterSeries(dataArray[series], tier)
     : undefined}
-  onmouseleave={interactive
+  onmouseleave={interactiveLines
     ? () => onMouseLeaveSeries(dataArray[series], tier)
     : undefined}
   role="button"
   tabindex="0"
   onkeydown={(e) => e.key === "Enter" && onClickSeries(dataArray[series])}
-  pointer-events={interactive ? null : "none"}
+  pointer-events={interactiveLines ? null : "none"}
   {opacity}
 >
   <path
@@ -54,7 +54,6 @@
     stroke-width="1"
   ></path>
   <text
-    {id}
     dominant-baseline="central"
     text-anchor="start"
     x={20}
@@ -62,6 +61,6 @@
     stroke-width={clickedSeries ? 0.7 : 0}
     stroke="black"
   >
-    {labelText(dataArray)}
+    {typeof labelText === "function" ? labelText(dataArray) : labelText}
   </text>
 </g>

package/dist/components/data-vis/line-chart/SeriesLabel.svelte.d.ts

@@ -20,7 +20,7 @@ declare const SeriesLabel: import("svelte").Component<{
     series: any;
     y: any;
     tier: any;
-    interactive: any;
+    interactiveLines: any;
 }, {}, "">;
 type $$ComponentProps = {
     id: any;
@@ -39,5 +39,5 @@ type $$ComponentProps = {
     series: any;
     y: any;
     tier: any;
-    interactive: any;
+    interactiveLines: any;
 };

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -1,50 +1,42 @@
 <script>
   let {
     activeMarkerId,
-    labelColor,
+    labelColor = "red",
     labelTextColor,
-    tooltipContent,
+    tooltipContent = activeMarkerId.y,
     xFunction,
     yFunction,
     x,
     y,
+    markerRect,
+    tooltipSnippet,
   } = $props();
 
   let textDimensions = $state();
-  let lineSpacing = $state(20);
   let verticalPadding = $state(8);
   let horizontalPadding = $derived(verticalPadding * 2);
 </script>
 
-<svg>
-  <g
-    transform="translate({xFunction(activeMarkerId[x])},{yFunction(
-      activeMarkerId[y],
-    )})"
-    pointer-events="none"
-  >
-    {#if textDimensions}
-      <rect
-        height={textDimensions.height + verticalPadding}
-        rx="5"
-        ry="5"
-        fill={labelColor}
-        width={textDimensions.width + horizontalPadding}
-      ></rect>
-    {/if}
-    <text
-      x={horizontalPadding / 2}
-      y={(textDimensions?.height + verticalPadding) / 2}
-      dominant-baseline="middle"
-      font-size="16"
-      fill={labelTextColor}
-      bind:contentRect={textDimensions}
+<div
+  style="position:absolute;
+  top: {markerRect?.y - (textDimensions?.height ?? 0) - 15}px;
+left: {markerRect?.x +
+    (markerRect?.width ?? 0) / 2 -
+    (textDimensions?.width ?? 0) / 2}px;
+  pointer-events: none;
+  "
+>
+  {#if tooltipSnippet === undefined}
+    <div
+      style="background-color: {labelColor};
+  padding: 5px;
+  border-radius: 5px;"
     >
-      {#if typeof tooltipContent === "string"}
-        {tooltipContent}
-      {:else}
-        {@render tooltipContent()}
-      {/if}
-    </text>
-  </g>
-</svg>
+      <div bind:contentRect={textDimensions}>{activeMarkerId.y}</div>
+    </div>
+  {:else}
+    <div bind:contentRect={textDimensions}>
+      {@render tooltipSnippet(activeMarkerId)}
+    </div>
+  {/if}
+</div>

package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts

@@ -5,21 +5,25 @@ type ValueLabel = {
 };
 declare const ValueLabel: import("svelte").Component<{
     activeMarkerId: any;
-    labelColor: any;
+    labelColor?: string;
     labelTextColor: any;
-    tooltipContent: any;
+    tooltipContent?: any;
     xFunction: any;
     yFunction: any;
     x: any;
     y: any;
+    markerRect: any;
+    tooltipSnippet: any;
 }, {}, "">;
 type $$ComponentProps = {
     activeMarkerId: any;
-    labelColor: any;
+    labelColor?: string;
     labelTextColor: any;
-    tooltipContent: any;
+    tooltipContent?: any;
     xFunction: any;
     yFunction: any;
     x: any;
     y: any;
+    markerRect: any;
+    tooltipSnippet: any;
 };