@communitiesuk/svelte-component-library 0.1.17

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

@@ -0,0 +1,138 @@
+<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";
+  import { derived } from "svelte/store";
+  import { linear } from "svelte/easing";
+
+  let {
+    tieredDataObject,
+    dataArray,
+    lineFunction,
+    chartWidth,
+    xFunction,
+    yFunction,
+    clickedSeries,
+    hoveredSeries,
+    chartHeight,
+    globalTierRules,
+    chartBackgroundColor = "#fafafa",
+    nothingSelected,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
+    onClickSeries,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    onClickMarker,
+    activeMarkerId,
+    labelText,
+    series,
+    y,
+    x,
+    tooltipContent,
+  } = $props();
+
+  let bounds = $state([0, chartHeight]);
+
+  let transformed = $derived(
+    Object.values(tieredDataObject)
+      .filter(Array.isArray)
+      .flatMap((tier) => tier.filter((item) => item.placeLabel === true))
+
+      .filter(
+        (item, index, self) =>
+          self.findIndex((other) => other[series] === item[series]) === index,
+      )
+      .map((item) => ({
+        [series]: item[series],
+        lastY: yFunction(item.data[0][y]),
+      })),
+  );
+
+  let labelsPlaced = $derived(
+    labelplacer(
+      transformed,
+      bounds,
+      (d) => d.lastY,
+      (d) => 20 * Math.ceil(d[series].length / 15),
+    ),
+  );
+</script>
+
+{#each Object.keys(tieredDataObject) as tier}
+  <g id={tier}>
+    <g {...globalTierRules[tier]}>
+      {#each tieredDataObject[tier] as line, i}
+        <Line
+          {...line}
+          id={`line-${line[series]}`}
+          {tier}
+          {chartBackgroundColor}
+          {lineFunction}
+          {xFunction}
+          {yFunction}
+          {onMouseEnterSeries}
+          {onMouseLeaveSeries}
+          {onClickSeries}
+          {clickedSeries}
+          {hoveredSeries}
+          {series}
+          {y}
+          {x}
+          {onMouseEnterMarker}
+          {onMouseLeaveMarker}
+          {onClickMarker}
+          {activeMarkerId}
+        />
+      {/each}
+    </g>
+
+    <g>
+      {#each tieredDataObject[tier] as line, i}
+        {#if line.showLabel}
+          {@const newY = labelsPlaced.find(
+            (el) => el.datum[series] === line[series],
+          )?.[y]}
+          <SeriesLabel
+            interactive={line.interactive}
+            id={`label-${line[series]}`}
+            {clickedSeries}
+            {hoveredSeries}
+            {chartWidth}
+            {lineFunction}
+            dataArray={line}
+            {xFunction}
+            {yFunction}
+            {newY}
+            {onClickSeries}
+            {onMouseEnterSeries}
+            {onMouseLeaveSeries}
+            {labelText}
+            {series}
+            {y}
+            {tier}
+          ></SeriesLabel>
+        {/if}
+      {/each}
+    </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 -->

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

@@ -0,0 +1,57 @@
+export default Lines;
+type Lines = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Lines: import("svelte").Component<{
+    tieredDataObject: any;
+    dataArray: any;
+    lineFunction: any;
+    chartWidth: any;
+    xFunction: any;
+    yFunction: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    chartHeight: any;
+    globalTierRules: any;
+    chartBackgroundColor?: string;
+    nothingSelected: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    onClickSeries: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    onClickMarker: any;
+    activeMarkerId: any;
+    labelText: any;
+    series: any;
+    y: any;
+    x: any;
+    tooltipContent: any;
+}, {}, "">;
+type $$ComponentProps = {
+    tieredDataObject: any;
+    dataArray: any;
+    lineFunction: any;
+    chartWidth: any;
+    xFunction: any;
+    yFunction: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    chartHeight: any;
+    globalTierRules: any;
+    chartBackgroundColor?: string;
+    nothingSelected: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    onClickSeries: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    onClickMarker: any;
+    activeMarkerId: any;
+    labelText: any;
+    series: any;
+    y: any;
+    x: any;
+    tooltipContent: any;
+};

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

@@ -0,0 +1,61 @@
+<script>
+  import ValueLabel from "./ValueLabel.svelte";
+  let {
+    dataArray,
+    series,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    xFunction,
+    yFunction,
+    x,
+    y,
+    markerShape = "circle",
+    markerRadius = 5,
+    markerFill = "grey",
+    markerStroke = "white",
+    markerStrokeWidth = 1,
+  } = $props();
+</script>
+
+{#each dataArray as marker, i}
+  {@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)}
+    transform="translate({xFunction(marker[x])},{yFunction(marker[y])})"
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => e.key === "Enter" && onClickMarker(e, marker)}
+  >
+    {#if markerShape === "circle"}
+      <circle
+        r={markerRadius}
+        stroke={markerStroke}
+        fill={markerFill}
+        stroke-width={markerStrokeWidth}
+      ></circle>
+    {:else if ["square", "diamond"].includes(markerShape)}
+      <rect
+        transform="rotate({markerShape === 'diamond' ? 45 : 0})"
+        x={-markerRadius}
+        y={-markerRadius}
+        width={markerRadius * 2}
+        height={markerRadius * 2}
+        stroke={markerStroke}
+        fill={markerFill}
+        stroke-width={markerStrokeWidth}
+      ></rect>
+    {:else if markerShape === "triangle"}
+      <polygon
+        points="0,{-markerRadius * 2} {markerRadius *
+          1.733},{markerRadius} {-markerRadius * 1.733},{markerRadius}"
+        stroke={markerStroke}
+        fill={markerFill}
+        stroke-width={markerStrokeWidth}
+      ></polygon>
+    {/if}
+  </g>
+{/each}

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

@@ -0,0 +1,37 @@
+export default Marker;
+type Marker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Marker: import("svelte").Component<{
+    dataArray: any;
+    series: any;
+    onClickMarker: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    xFunction: any;
+    yFunction: any;
+    x: any;
+    y: any;
+    markerShape?: string;
+    markerRadius?: number;
+    markerFill?: string;
+    markerStroke?: string;
+    markerStrokeWidth?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    dataArray: any;
+    series: any;
+    onClickMarker: any;
+    onMouseEnterMarker: any;
+    onMouseLeaveMarker: any;
+    xFunction: any;
+    yFunction: any;
+    x: any;
+    y: any;
+    markerShape?: string;
+    markerRadius?: number;
+    markerFill?: string;
+    markerStroke?: string;
+    markerStrokeWidth?: number;
+};

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

@@ -0,0 +1,67 @@
+<script>
+  let {
+    id,
+    clickedSeries,
+    hoveredSeries,
+    chartWidth,
+    lineFunction,
+    dataArray,
+    xFunction,
+    yFunction,
+    newY,
+    onClickSeries,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
+    labelText,
+    series,
+    y,
+    tier,
+    interactive,
+  } = $props();
+
+  let oldY = $derived(yFunction(dataArray.data[0][y]));
+
+  let opacity = $derived(
+    (!hoveredSeries && !clickedSeries) ||
+      [hoveredSeries, clickedSeries].includes(dataArray[series])
+      ? 1
+      : 0.3,
+  );
+</script>
+
+<g
+  {id}
+  transform="translate({chartWidth + 8},{0})"
+  onclick={interactive
+    ? () => onClickSeries(dataArray[series], tier)
+    : undefined}
+  onmouseenter={interactive
+    ? () => onMouseEnterSeries(dataArray[series], tier)
+    : undefined}
+  onmouseleave={interactive
+    ? () => onMouseLeaveSeries(dataArray[series], tier)
+    : undefined}
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => e.key === "Enter" && onClickSeries(dataArray[series])}
+  pointer-events={interactive ? null : "none"}
+  {opacity}
+>
+  <path
+    d="M 0, {oldY}  H 10  V {newY}  H 20"
+    fill="none"
+    stroke="black"
+    stroke-width="1"
+  ></path>
+  <text
+    {id}
+    dominant-baseline="central"
+    text-anchor="start"
+    x={20}
+    y={newY}
+    stroke-width={clickedSeries ? 0.7 : 0}
+    stroke="black"
+  >
+    {labelText(dataArray)}
+  </text>
+</g>

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

@@ -0,0 +1,43 @@
+export default SeriesLabel;
+type SeriesLabel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SeriesLabel: import("svelte").Component<{
+    id: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    chartWidth: any;
+    lineFunction: any;
+    dataArray: any;
+    xFunction: any;
+    yFunction: any;
+    newY: any;
+    onClickSeries: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    labelText: any;
+    series: any;
+    y: any;
+    tier: any;
+    interactive: any;
+}, {}, "">;
+type $$ComponentProps = {
+    id: any;
+    clickedSeries: any;
+    hoveredSeries: any;
+    chartWidth: any;
+    lineFunction: any;
+    dataArray: any;
+    xFunction: any;
+    yFunction: any;
+    newY: any;
+    onClickSeries: any;
+    onMouseEnterSeries: any;
+    onMouseLeaveSeries: any;
+    labelText: any;
+    series: any;
+    y: any;
+    tier: any;
+    interactive: any;
+};

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

@@ -0,0 +1,50 @@
+<script>
+  let {
+    activeMarkerId,
+    labelColor,
+    labelTextColor,
+    tooltipContent,
+    xFunction,
+    yFunction,
+    x,
+    y,
+  } = $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}
+    >
+      {#if typeof tooltipContent === "string"}
+        {tooltipContent}
+      {:else}
+        {@render tooltipContent()}
+      {/if}
+    </text>
+  </g>
+</svg>

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

@@ -0,0 +1,25 @@
+export default ValueLabel;
+type ValueLabel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ValueLabel: import("svelte").Component<{
+    activeMarkerId: any;
+    labelColor: any;
+    labelTextColor: any;
+    tooltipContent: any;
+    xFunction: any;
+    yFunction: any;
+    x: any;
+    y: any;
+}, {}, "">;
+type $$ComponentProps = {
+    activeMarkerId: any;
+    labelColor: any;
+    labelTextColor: any;
+    tooltipContent: any;
+    xFunction: any;
+    yFunction: any;
+    x: any;
+    y: any;
+};