@communitiesuk/svelte-component-library 0.1.17

package/dist/components/data-vis/axis/Ticks.svelte.d.ts

@@ -0,0 +1,33 @@
+export default Ticks;
+type Ticks = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Ticks: import("svelte").Component<{
+    ticksArray?: any;
+    prefix: any;
+    suffix: any;
+    chartWidth: any;
+    chartHeight: any;
+    axisFunction: any;
+    values: any;
+    numberOfTicks: any;
+    floor: any;
+    ceiling: any;
+    orientation: any;
+    yearsInput: any;
+}, {}, "ticksArray">;
+type $$ComponentProps = {
+    ticksArray?: any;
+    prefix: any;
+    suffix: any;
+    chartWidth: any;
+    chartHeight: any;
+    axisFunction: any;
+    values: any;
+    numberOfTicks: any;
+    floor: any;
+    ceiling: any;
+    orientation: any;
+    yearsInput: any;
+};

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

@@ -0,0 +1,150 @@
+<script>
+  import ValueLabel from "./ValueLabel.svelte";
+  import Marker from "./Marker.svelte";
+  import {
+    curveBasis,
+    curveCardinal,
+    curveLinear,
+    curveLinearClosed,
+    curveMonotoneX,
+    curveStep,
+    line,
+    area,
+  } 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,
+    opacity = 1,
+    pathStrokeColor = "grey",
+    pathStrokeWidth = 3,
+    pathFillColor = "none",
+    pathStrokeDashArray = "none",
+    areaFillColor,
+    includeArea = false,
+    lineFunction,
+    areaFunction,
+    xFunction,
+    yFunction,
+    lineEnding,
+    dataId,
+    onClickSeries,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
+    halo,
+    chartBackgroundColor,
+    invisibleStrokeWidth,
+    interactive,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    // includeLabels,
+    // labelText,
+    // labelColor,
+    // labelTextColor,
+    clickedSeries,
+    hoveredSeries,
+    activeMarkerId,
+    series,
+    y,
+    id,
+    x,
+    markers,
+    markerFill,
+    markerRadius,
+    markerShape,
+    markerStroke,
+    markerStrokeWidth,
+    tier,
+  } = $props();
+
+  let linePath = $derived(lineFunction(dataArray));
+</script>
+
+<defs>
+  <marker
+    id={`arrow-${pathStrokeColor}`}
+    markerWidth="4"
+    markerHeight="3"
+    refX="2.7"
+    refY="1.5"
+    orient="auto-start-reverse"
+  >
+    <polygon points="0 0, 4 1.5, 0 3" style="fill: {pathStrokeColor}"></polygon>
+  </marker>
+
+  <marker
+    id={`circle-${pathStrokeColor}`}
+    markerWidth="14"
+    markerHeight="14"
+    refX="5"
+    refY="5"
+    orient="auto"
+  >
+    <circle cx="5" cy="5" r="1.5" style="fill: {pathStrokeColor}"></circle>
+  </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}
+    <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={pathStrokeColor}
+    stroke-width={pathStrokeWidth}
+    stroke-dasharray={pathStrokeDashArray}
+    pointer-events="none"
+    marker-start={`url(#${lineEnding}-${pathStrokeColor})`}
+  ></path>
+  {#if markers}
+    <Marker
+      {dataArray}
+      {markerFill}
+      {markerRadius}
+      {markerShape}
+      {markerStroke}
+      {markerStrokeWidth}
+      {x}
+      {y}
+      {series}
+      {xFunction}
+      {yFunction}
+      {onMouseEnterMarker}
+      {onMouseLeaveMarker}
+      {onClickMarker}
+      {activeMarkerId}
+    ></Marker>
+  {/if}
+</g>

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

@@ -0,0 +1,85 @@
+export default Line;
+type Line = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Line: import("svelte").Component<{
+    dataArray: any;
+    opacity?: number;
+    pathStrokeColor?: string;
+    pathStrokeWidth?: number;
+    pathFillColor?: string;
+    pathStrokeDashArray?: string;
+    areaFillColor: any;
+    includeArea?: boolean;
+    lineFunction: any;
+    areaFunction: any;
+    xFunction: any;
+    yFunction: any;
+    lineEnding: any;
+    dataId: any;
+    onClickSeries: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    halo: any;
+    chartBackgroundColor: any;
+    invisibleStrokeWidth: any;
+    interactive: any;
+    onClickMarker: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    activeMarkerId: any;
+    series: any;
+    y: any;
+    id: any;
+    x: any;
+    markers: any;
+    markerFill: any;
+    markerRadius: any;
+    markerShape: any;
+    markerStroke: any;
+    markerStrokeWidth: any;
+    tier: any;
+}, {}, "">;
+type $$ComponentProps = {
+    dataArray: any;
+    opacity?: number;
+    pathStrokeColor?: string;
+    pathStrokeWidth?: number;
+    pathFillColor?: string;
+    pathStrokeDashArray?: string;
+    areaFillColor: any;
+    includeArea?: boolean;
+    lineFunction: any;
+    areaFunction: any;
+    xFunction: any;
+    yFunction: any;
+    lineEnding: any;
+    dataId: any;
+    onClickSeries: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    halo: any;
+    chartBackgroundColor: any;
+    invisibleStrokeWidth: any;
+    interactive: any;
+    onClickMarker: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    activeMarkerId: any;
+    series: any;
+    y: any;
+    id: any;
+    x: any;
+    markers: any;
+    markerFill: any;
+    markerRadius: any;
+    markerShape: any;
+    markerStroke: any;
+    markerStrokeWidth: any;
+    tier: any;
+};

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

@@ -0,0 +1,249 @@
+<script>
+  // @ts-nocheck
+  import SeriesLabel from "./SeriesLabel.svelte";
+  import Line from "./Line.svelte";
+
+  import { scaleLinear } from "d3-scale";
+  import { curveLinear, line, area } from "d3-shape";
+  import { highlight } from "../../../utils/syntax-highlighting/shikiHighlight";
+  import Lines from "./Lines.svelte";
+
+  let {
+    // 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 = "labelText",
+
+    tooltipContent = "tooltipContent",
+
+    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 = (event, marker, markerId) => {
+      activeMarkerId = marker;
+    },
+    onMouseEnterMarker = (event, marker, markerId) => {
+      activeMarkerId = marker;
+    },
+    onMouseLeaveMarker = (event, marker, dataId) => {
+      activeMarkerId = null;
+    },
+
+    // Optional
+    clickedSeries = $bindable(undefined),
+    hoveredSeries = undefined,
+    overrideLineParams = () => ({}),
+    getLine = (key, el) => {
+      return true;
+    },
+    nothingSelected = true,
+    svgWidth = $bindable(500),
+    svgHeight = 500,
+    paddingTop = 50,
+    paddingBottom = 50,
+    paddingLeft = 50,
+    paddingRight = 150,
+    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: {},
+    },
+
+    basicLineParams = {},
+  } = $props();
+
+  let defaultLineParams = $derived({
+    xFunction,
+    yFunction,
+    lineFunction,
+    onClickSeries,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    haloColor: chartBackgroundColor,
+    invisibleStrokeWidth: 20,
+  });
+
+  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 selectedLine = $derived([hoveredSeries, clickedSeries]);
+
+  function handleClickOutside(event) {
+    if (
+      clickedSeries &&
+      !event.target.closest('[id^="line"]') &&
+      !event.target.closest('[id^="label"]')
+    ) {
+      clickedSeries = null;
+    }
+  }
+
+  function generateLineAttributes(
+    line,
+    tier,
+    overrideLineParams,
+    tieredLineParams,
+    basicLineParams,
+    defaultLineParams,
+  ) {
+    const listOfProperties = [
+      ...new Set([
+        ...Object.keys(defaultLineParams),
+        ...Object.keys(basicLineParams ?? {}),
+        ...Object.keys(tieredLineParams[tier] ?? {}),
+        ...Object.keys(overrideLineParams(tier, line)),
+      ]),
+    ];
+
+    const merged = Object.fromEntries(
+      listOfProperties.map((key) => [
+        key,
+        overrideLineParams(tier, line)[key] ??
+          tieredLineParams[tier]?.[key] ??
+          basicLineParams[key] ??
+          defaultLineParams[key],
+      ]),
+    );
+
+    return {
+      ...merged,
+      ...line,
+      dataId: line[series],
+      dataArray: line.data,
+    };
+  }
+
+  let tieredDataObject = $derived(
+    Object.keys(tieredLineParams).reduce((acc, tier) => {
+      acc[tier] = lineChartData.lines
+        .filter((el) => getLine(tier, el))
+        .map((line) =>
+          generateLineAttributes(
+            line,
+            tier,
+            overrideLineParams,
+            tieredLineParams,
+            basicLineParams,
+            defaultLineParams,
+          ),
+        );
+      return acc;
+    }, {}),
+  );
+
+  function hasShowLabel(objOfArrays) {
+    return Object.values(objOfArrays).some((array) =>
+      array.some((obj) => obj.showLabel === true),
+    );
+  }
+</script>
+
+<div bind:clientWidth={svgWidth}>
+  <svg
+    onclick={handleClickOutside}
+    width={svgWidth}
+    height={svgHeight}
+    style="background-color: {chartBackgroundColor}"
+  >
+    {#if svgWidth}
+      <g transform="translate({paddingLeft},{paddingTop})">
+        <g data-role="lines-group">
+          <Lines
+            {tieredDataObject}
+            dataArray={lineChartData.lines}
+            {lineFunction}
+            {chartWidth}
+            {xFunction}
+            {yFunction}
+            {hoveredSeries}
+            {clickedSeries}
+            {chartHeight}
+            {globalTierRules}
+            {chartBackgroundColor}
+            {nothingSelected}
+            {onMouseEnterSeries}
+            {onClickSeries}
+            {onMouseLeaveSeries}
+            {onClickMarker}
+            {onMouseEnterMarker}
+            {onMouseLeaveMarker}
+            {activeMarkerId}
+            {labelText}
+            {series}
+            {y}
+            {x}
+            {tooltipContent}
+          ></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>
+</div>

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

@@ -0,0 +1,73 @@
+export default LineChart;
+type LineChart = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LineChart: import("svelte").Component<{
+    series: any;
+    y: any;
+    x: any;
+    lineChartData: any;
+    xFunction?: Function;
+    yFunction?: Function;
+    lineFunction?: any;
+    labelText?: string;
+    tooltipContent?: string;
+    onClickSeries?: Function;
+    onMouseLeaveSeries?: Function;
+    onMouseEnterSeries?: Function;
+    onClickMarker?: Function;
+    onMouseEnterMarker?: Function;
+    onMouseLeaveMarker?: Function;
+    clickedSeries?: any;
+    hoveredSeries?: any;
+    overrideLineParams?: Function;
+    getLine?: Function;
+    nothingSelected?: boolean;
+    svgWidth?: number;
+    svgHeight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    activeMarkerId?: any;
+    chartBackgroundColor?: string;
+    seriesLabels?: boolean;
+    globalTierRules?: Record<string, any>;
+    tieredLineParams?: Record<string, any>;
+    basicLineParams?: Record<string, any>;
+}, {}, "clickedSeries" | "svgWidth" | "seriesLabels">;
+type $$ComponentProps = {
+    series: any;
+    y: any;
+    x: any;
+    lineChartData: any;
+    xFunction?: Function;
+    yFunction?: Function;
+    lineFunction?: any;
+    labelText?: string;
+    tooltipContent?: string;
+    onClickSeries?: Function;
+    onMouseLeaveSeries?: Function;
+    onMouseEnterSeries?: Function;
+    onClickMarker?: Function;
+    onMouseEnterMarker?: Function;
+    onMouseLeaveMarker?: Function;
+    clickedSeries?: any;
+    hoveredSeries?: any;
+    overrideLineParams?: Function;
+    getLine?: Function;
+    nothingSelected?: boolean;
+    svgWidth?: number;
+    svgHeight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    activeMarkerId?: any;
+    chartBackgroundColor?: string;
+    seriesLabels?: boolean;
+    globalTierRules?: Record<string, any>;
+    tieredLineParams?: Record<string, any>;
+    basicLineParams?: Record<string, any>;
+};