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

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

@@ -1,5 +1,4 @@
 <script>
-  import ValueLabel from "./ValueLabel.svelte";
   import Marker from "./Marker.svelte";
   import {
     curveBasis,
@@ -13,7 +12,6 @@
   } from "d3-shape";
 
   import { scaleLinear } from "d3-scale";
-  import LineChart from "../../../../routes/playground/create-a-reactive-line-chart-camilla/local-lib/LineChart.svelte";
 
   let {
     dataArray,
@@ -36,7 +34,8 @@
     halo,
     chartBackgroundColor,
     invisibleStrokeWidth,
-    interactive,
+    interactiveLines,
+    interactiveMarkers,
     onClickMarker,
     onMouseEnterMarker,
     onMouseLeaveMarker,
@@ -49,7 +48,7 @@
     activeMarkerId,
     series,
     y,
-    id,
+    element,
     x,
     markers,
     markerFill,
@@ -87,55 +86,63 @@
   </marker>
 </defs>
 
-<g
-  data-id={dataId}
-  {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" && onClickSeries(e, dataArray)}
-  {opacity}
-  pointer-events={interactive ? null : "none"}
->
-  {#if includeArea}
-    <path d={areaFunction(dataArray)} fill={areaFillColor}></path>
-  {/if}
-  <path
-    d={linePath}
-    fill="none"
-    stroke="invisible"
-    stroke-width={invisibleStrokeWidth}
-    pointer-events={interactive ? "stroke" : "none"}
-  ></path>
-  {#if halo}
+<g data-id={"series-" + dataId} {opacity}>
+  <g
+    data-id={"line-" + dataId}
+    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}
-      {markerFill}
+      markerFill={markerFill ?? pathStrokeColor}
       {markerRadius}
       {markerShape}
       {markerStroke}
       {markerStrokeWidth}
+      {pathStrokeColor}
       {x}
       {y}
       {series}
@@ -144,7 +151,7 @@
       {onMouseEnterMarker}
       {onMouseLeaveMarker}
       {onClickMarker}
-      {activeMarkerId}
+      {interactiveMarkers}
     ></Marker>
   {/if}
 </g>

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

@@ -24,7 +24,8 @@ declare const Line: import("svelte").Component<{
     halo: any;
     chartBackgroundColor: any;
     invisibleStrokeWidth: any;
-    interactive: any;
+    interactiveLines: any;
+    interactiveMarkers: any;
     onClickMarker: any;
     onMouseEnterMarker: any;
     onMouseLeaveMarker: any;
@@ -33,7 +34,7 @@ declare const Line: import("svelte").Component<{
     activeMarkerId: any;
     series: any;
     y: any;
-    id: any;
+    element: any;
     x: any;
     markers: any;
     markerFill: any;
@@ -64,7 +65,8 @@ type $$ComponentProps = {
     halo: any;
     chartBackgroundColor: any;
     invisibleStrokeWidth: any;
-    interactive: any;
+    interactiveLines: any;
+    interactiveMarkers: any;
     onClickMarker: any;
     onMouseEnterMarker: any;
     onMouseLeaveMarker: any;
@@ -73,7 +75,7 @@ type $$ComponentProps = {
     activeMarkerId: any;
     series: any;
     y: any;
-    id: any;
+    element: any;
     x: any;
     markers: any;
     markerFill: any;

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

@@ -5,17 +5,16 @@
 
   import { scaleLinear } from "d3-scale";
   import { curveLinear, line, area } from "d3-shape";
-  import { highlight } from "../../../utils/syntax-highlighting/shikiHighlight";
+  import { highlight } from "./../../../utils/syntax-highlighting/shikiHighlight";
   import Lines from "./Lines.svelte";
+  import ValueLabel from "./ValueLabel.svelte";
 
   let {
-    // Required
     series,
     y,
     x,
     lineChartData,
 
-    // ask
     xFunction = (number) => {
       return scaleLinear()
         .domain([2015, 2022])
@@ -30,16 +29,18 @@
       .x((d) => xFunction(d[x]))
       .y((d) => yFunction(d[y]))
       .curve(curveLinear),
-    labelText = "labelText",
-
-    tooltipContent = "tooltipContent",
-
+    labelText = (dataArray) => {
+      return dataArray[series];
+    },
     onClickSeries = (series, tier) => {
-      if (clickedSeries === dataId) {
+      if (clickedSeries === series) {
         clickedSeries = null;
+        hoveredSeries = null;
       } else {
         clickedSeries = series;
         clickedTier = tier;
+        hoveredSeries = series;
+        hoveredTier = tier;
       }
     },
     onMouseLeaveSeries = (series, tier) => {
@@ -56,23 +57,52 @@
     },
     onClickMarker = (event, marker, markerId) => {
       activeMarkerId = marker;
+      currentMousePosition = [event.screenX, event.screenY];
+      markerRect = rect;
     },
-    onMouseEnterMarker = (event, marker, markerId) => {
+    onMouseEnterMarker = (event, marker, markerId, rect) => {
       activeMarkerId = marker;
+      if (container) {
+        const bounds = container.getBoundingClientRect();
+        currentMousePosition = [
+          // option for moving tooltip
+          event.clientX - bounds.left,
+          event.clientY - bounds.top,
+        ];
+        markerRect = {
+          // option for fixed tooltip
+          x: rect.x - bounds.left + rect.width / 2,
+          y: rect.y - bounds.top + rect.height / 2,
+        };
+      } else {
+        currentMousePosition = [event.clientX, event.clientY];
+        markerRect = rect;
+      }
     },
     onMouseLeaveMarker = (event, marker, dataId) => {
       activeMarkerId = null;
     },
 
     // Optional
+    currentMousePosition = undefined,
+    markerRect = undefined,
     clickedSeries = $bindable(undefined),
-    hoveredSeries = undefined,
+    hoveredSeries = $bindable(undefined),
+    hoveredTier = $bindable(undefined),
+    clickedTier = $bindable(undefined),
     overrideLineParams = () => ({}),
-    getLine = (key, el) => {
+    assignLinesToTiers = (tier, el) => {
+      if (tier === "hover") {
+        return [hoveredSeries].includes(el.areaCode);
+      }
+      if (tier === "clicked") {
+        return [clickedSeries].includes(el.areaCode);
+      }
       return true;
     },
     nothingSelected = true,
     svgWidth = $bindable(500),
+    container = $bindable(),
     svgHeight = 500,
     paddingTop = 50,
     paddingBottom = 50,
@@ -81,7 +111,7 @@
     activeMarkerId = undefined,
     chartBackgroundColor = "#f5f5f5",
     seriesLabels = $bindable(false),
-    globalTierRules = {
+    globalTierParams = {
       otherTier: {},
       secondary: {
         opacity: nothingSelected ? 1 : 0.5,
@@ -94,11 +124,57 @@
     },
     tieredLineParams = {
       all: {},
+      hover: { pathStrokeWidth: 4 },
+      clicked: {
+        pathStrokeWidth: 5,
+      },
     },
+    tooltipSnippet = undefined,
+    tooltipContent = activeMarkerId?.y,
 
     basicLineParams = {},
+    colorLineParams = (tier, line, lineIndex) => {
+      return { pathStrokeColor: lineColorMap[line.areaCode] };
+    },
+    colors = {
+      teal: "#408A7B",
+      skyBlue: "#509EC8",
+      indigo: "#335F91",
+      ochre: "#BA7F30",
+      coral: "#E46B6C",
+      fuchsia: "#BB2765",
+      lavender: "#736CAC",
+      ashGrey: "#A0A0A0",
+      slateGrey: "#636363",
+      black: "#161616",
+      forestGreen: "#3C6E3C",
+      midnightTeal: "#2C5E5E",
+      dustyRose: "#C86B84",
+      steelBlue: "#4B6E91",
+      burntSienna: "#B65C38",
+      oliveGreen: "#7A8644",
+      slatePurple: "#64587C",
+    },
   } = $props();
 
+  const colorValues = Array.isArray(colors) ? colors : Object.values(colors);
+  const lineColorMap = {};
+
+  Object.entries(tieredLineParams).forEach(([tier, tierParams]) => {
+    const tierLines = lineChartData.lines.filter((line) =>
+      assignLinesToTiers(tier, line),
+    );
+    let colorIndex = 0;
+
+    tierLines.forEach((line) => {
+      const id = line.areaCode;
+      if (!(id in lineColorMap)) {
+        lineColorMap[id] = colorValues[colorIndex % colorValues.length];
+        colorIndex++;
+      }
+    });
+  });
+
   let defaultLineParams = $derived({
     xFunction,
     yFunction,
@@ -110,26 +186,30 @@
     onMouseEnterMarker,
     onMouseLeaveMarker,
     haloColor: chartBackgroundColor,
+    halo: true,
     invisibleStrokeWidth: 20,
+    placeLabel: true,
+    showLabel: true,
+    markerFill: undefined,
   });
 
   let chartWidth = $derived(svgWidth - paddingLeft - paddingRight);
   let chartHeight = $derived(svgHeight - paddingTop - paddingBottom);
-  // let areaFunction = $derived(
-  //   area()
-  //     .y0((d) => yFunction(0))
-  //     .x((d) => xFunction(d.x))
-  //     .y1((d) => yFunction(d.y))
-  //     .curve(curveLinear),
-  // );
+  let areaFunction = $derived(
+    area()
+      .y0((d) => yFunction(0))
+      .x((d) => xFunction(d.x))
+      .y1((d) => yFunction(d.y))
+      .curve(curveLinear),
+  );
 
   let selectedLine = $derived([hoveredSeries, clickedSeries]);
 
   function handleClickOutside(event) {
     if (
       clickedSeries &&
-      !event.target.closest('[id^="line"]') &&
-      !event.target.closest('[id^="label"]')
+      !event.target.closest('[data-id^="line"]') && //make this respond to the new element attribute
+      !event.target.closest('[data-id^="label"]')
     ) {
       clickedSeries = null;
     }
@@ -141,11 +221,13 @@
     overrideLineParams,
     tieredLineParams,
     basicLineParams,
+    colorLineParams,
     defaultLineParams,
   ) {
     const listOfProperties = [
       ...new Set([
         ...Object.keys(defaultLineParams),
+        ...Object.keys(colorLineParams(tier, line)),
         ...Object.keys(basicLineParams ?? {}),
         ...Object.keys(tieredLineParams[tier] ?? {}),
         ...Object.keys(overrideLineParams(tier, line)),
@@ -158,6 +240,7 @@
         overrideLineParams(tier, line)[key] ??
           tieredLineParams[tier]?.[key] ??
           basicLineParams[key] ??
+          colorLineParams(tier, line)[key] ??
           defaultLineParams[key],
       ]),
     );
@@ -173,14 +256,15 @@
   let tieredDataObject = $derived(
     Object.keys(tieredLineParams).reduce((acc, tier) => {
       acc[tier] = lineChartData.lines
-        .filter((el) => getLine(tier, el))
-        .map((line) =>
+        .filter((el) => assignLinesToTiers(tier, el))
+        .map((line, i) =>
           generateLineAttributes(
             line,
             tier,
             overrideLineParams,
             tieredLineParams,
             basicLineParams,
+            (tier, line) => colorLineParams(tier, line, i),
             defaultLineParams,
           ),
         );
@@ -195,7 +279,11 @@
   }
 </script>
 
-<div bind:clientWidth={svgWidth}>
+<div
+  style="position: relative"
+  bind:clientWidth={svgWidth}
+  bind:this={container}
+>
   <svg
     onclick={handleClickOutside}
     width={svgWidth}
@@ -204,18 +292,32 @@
   >
     {#if svgWidth}
       <g transform="translate({paddingLeft},{paddingTop})">
+        <g data-role="y-axis">
+          <path d="M0 0 l0 {chartHeight}" stroke="black" stroke-width="2px"
+          ></path>
+        </g>
+        <g data-role="x-axis">
+          <path
+            d="M0 {chartHeight} l{chartWidth} 0"
+            stroke="black"
+            stroke-width="2px"
+          ></path>
+        </g>
         <g data-role="lines-group">
           <Lines
             {tieredDataObject}
             dataArray={lineChartData.lines}
             {lineFunction}
+            {areaFunction}
             {chartWidth}
             {xFunction}
             {yFunction}
             {hoveredSeries}
             {clickedSeries}
+            {clickedTier}
+            {hoveredTier}
             {chartHeight}
-            {globalTierRules}
+            {globalTierParams}
             {chartBackgroundColor}
             {nothingSelected}
             {onMouseEnterSeries}
@@ -230,20 +332,27 @@
             {y}
             {x}
             {tooltipContent}
+            {currentMousePosition}
+            {markerRect}
           ></Lines>
         </g>
-        <g data-role="y-axis">
-          <path d="M0 0 l0 {chartHeight}" stroke="black" stroke-width="2px"
-          ></path>
-        </g>
-        <g data-role="x-axis">
-          <path
-            d="M0 {chartHeight} l{chartWidth} 0"
-            stroke="black"
-            stroke-width="2px"
-          ></path>
-        </g>
       </g>
     {/if}
   </svg>
+  {#if activeMarkerId}
+    <ValueLabel
+      {activeMarkerId}
+      labelColor="lightgrey"
+      labelTextColor="black"
+      {labelText}
+      {tooltipContent}
+      {xFunction}
+      {yFunction}
+      {x}
+      {y}
+      {currentMousePosition}
+      {markerRect}
+      {tooltipSnippet}
+    ></ValueLabel>
+  {/if}
 </div>

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

@@ -11,20 +11,24 @@ declare const LineChart: import("svelte").Component<{
     xFunction?: Function;
     yFunction?: Function;
     lineFunction?: any;
-    labelText?: string;
-    tooltipContent?: string;
+    labelText?: Function;
     onClickSeries?: Function;
     onMouseLeaveSeries?: Function;
     onMouseEnterSeries?: Function;
     onClickMarker?: Function;
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
+    currentMousePosition?: any;
+    markerRect?: any;
     clickedSeries?: any;
     hoveredSeries?: any;
+    hoveredTier?: any;
+    clickedTier?: any;
     overrideLineParams?: Function;
-    getLine?: Function;
+    assignLinesToTiers?: Function;
     nothingSelected?: boolean;
     svgWidth?: number;
+    container?: any;
     svgHeight?: number;
     paddingTop?: number;
     paddingBottom?: number;
@@ -33,10 +37,14 @@ declare const LineChart: import("svelte").Component<{
     activeMarkerId?: any;
     chartBackgroundColor?: string;
     seriesLabels?: boolean;
-    globalTierRules?: Record<string, any>;
+    globalTierParams?: Record<string, any>;
     tieredLineParams?: Record<string, any>;
+    tooltipSnippet?: any;
+    tooltipContent?: any;
     basicLineParams?: Record<string, any>;
-}, {}, "clickedSeries" | "svgWidth" | "seriesLabels">;
+    colorLineParams?: Function;
+    colors?: Record<string, any>;
+}, {}, "clickedSeries" | "hoveredSeries" | "clickedTier" | "hoveredTier" | "svgWidth" | "container" | "seriesLabels">;
 type $$ComponentProps = {
     series: any;
     y: any;
@@ -45,20 +53,24 @@ type $$ComponentProps = {
     xFunction?: Function;
     yFunction?: Function;
     lineFunction?: any;
-    labelText?: string;
-    tooltipContent?: string;
+    labelText?: Function;
     onClickSeries?: Function;
     onMouseLeaveSeries?: Function;
     onMouseEnterSeries?: Function;
     onClickMarker?: Function;
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
+    currentMousePosition?: any;
+    markerRect?: any;
     clickedSeries?: any;
     hoveredSeries?: any;
+    hoveredTier?: any;
+    clickedTier?: any;
     overrideLineParams?: Function;
-    getLine?: Function;
+    assignLinesToTiers?: Function;
     nothingSelected?: boolean;
     svgWidth?: number;
+    container?: any;
     svgHeight?: number;
     paddingTop?: number;
     paddingBottom?: number;
@@ -67,7 +79,11 @@ type $$ComponentProps = {
     activeMarkerId?: any;
     chartBackgroundColor?: string;
     seriesLabels?: boolean;
-    globalTierRules?: Record<string, any>;
+    globalTierParams?: Record<string, any>;
     tieredLineParams?: Record<string, any>;
+    tooltipSnippet?: any;
+    tooltipContent?: any;
     basicLineParams?: Record<string, any>;
+    colorLineParams?: Function;
+    colors?: Record<string, any>;
 };

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

@@ -1,7 +1,5 @@
 <script>
   import Line from "./Line.svelte";
-  import Marker from "./Marker.svelte";
-  import ValueLabel from "./ValueLabel.svelte";
   import SeriesLabel from "./SeriesLabel.svelte";
   import labelplacer from "labelplacer";
   import { onMount } from "svelte";
@@ -12,13 +10,16 @@
     tieredDataObject,
     dataArray,
     lineFunction,
+    areaFunction,
     chartWidth,
     xFunction,
     yFunction,
     clickedSeries,
     hoveredSeries,
+    clickedTier,
+    hoveredTier,
     chartHeight,
-    globalTierRules,
+    globalTierParams,
     chartBackgroundColor = "#fafafa",
     nothingSelected,
     onMouseEnterSeries,
@@ -32,7 +33,6 @@
     series,
     y,
     x,
-    tooltipContent,
   } = $props();
 
   let bounds = $state([0, chartHeight]);
@@ -64,14 +64,15 @@
 
 {#each Object.keys(tieredDataObject) as tier}
   <g id={tier}>
-    <g {...globalTierRules[tier]}>
+    <g {...globalTierParams[tier]}>
       {#each tieredDataObject[tier] as line, i}
         <Line
           {...line}
-          id={`line-${line[series]}`}
+          element={`line-${line[series]}`}
           {tier}
           {chartBackgroundColor}
           {lineFunction}
+          {areaFunction}
           {xFunction}
           {yFunction}
           {onMouseEnterSeries}
@@ -79,6 +80,8 @@
           {onClickSeries}
           {clickedSeries}
           {hoveredSeries}
+          {clickedTier}
+          {hoveredTier}
           {series}
           {y}
           {x}
@@ -97,7 +100,7 @@
             (el) => el.datum[series] === line[series],
           )?.[y]}
           <SeriesLabel
-            interactive={line.interactive}
+            interactiveLines={line.interactiveLines}
             id={`label-${line[series]}`}
             {clickedSeries}
             {hoveredSeries}
@@ -120,19 +123,3 @@
     </g>
   </g>
 {/each}
-
-{#if activeMarkerId}
-  <ValueLabel
-    {activeMarkerId}
-    labelColor="grey"
-    labelTextColor="black"
-    {tooltipContent}
-    {xFunction}
-    {yFunction}
-    {x}
-    {y}
-  ></ValueLabel>
-{/if}
-
-<!-- if markerhovered get the id render the tooltip find in the tieredDataObject gets
-the data for that line -->