@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.33

package/README.md

@@ -103,6 +103,13 @@ Make sure you are on your main development branch you want to release (e.g., `ma
 
 Use the `npm version` command to update `package.json` and `package-lock.json`, create a commit, and create an annotated Git tag. Choose **one** of the following based on [Semantic Versioning (SemVer)](https://semver.org/):
 
+
+- **Pre-Release:**
+
+  ```bash
+  npm version prerelease --preid=alpha
+  ```
+
 - **Patch Release (Bug fixes, tiny changes - e.g., 1.0.0 → 1.0.1):**
 
   ```bash

package/dist/components/content/Tag.svelte

@@ -0,0 +1,32 @@
+<script>
+  let { text, color } = $props();
+</script>
+
+<strong class="govuk-tag trend-tag {color ? `govuk-tag--${color}` : ''}"
+  >{text}</strong
+>
+
+<style>
+  .govuk-tag.trend-tag {
+    padding: 0.25rem 0.625rem;
+    border-bottom: 2px solid #b1b4b6;
+    font-size: 1rem;
+  }
+
+  .govuk-tag.trend-tag.govuk-tag--red {
+    border-bottom-color: #ff5e5e;
+  }
+  .govuk-tag.trend-tag.govuk-tag--orange {
+    border-bottom-color: #ffaf4a;
+  }
+  .govuk-tag.trend-tag.govuk-tag--green {
+    border-bottom-color: #0fbd54;
+  }
+  .govuk-tag.trend-tag.govuk-tag--grey {
+    border-bottom-color: #b1b4b6;
+  }
+  .govuk-tag.trend-tag.govuk-tag--white {
+    background-color: #fbfbfb;
+    border-bottom-color: #cdcdcd;
+  }
+</style>

package/dist/components/content/Tag.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Tag: import("svelte").Component<{
+    text: any;
+    color: any;
+}, {}, "">;
+type $$ComponentProps = {
+    text: any;
+    color: any;
+};

package/dist/components/data-vis/Histogram.svelte

@@ -0,0 +1,302 @@
+<script>
+  import { scaleLinear } from "d3-scale";
+  import { bin, range as d3range } from "d3-array";
+  import Axis from "./axis/Axis.svelte";
+  import chroma from "chroma-js";
+
+  let {
+    averageValue = undefined,
+    distribution = [],
+    minX = 0,
+    maxX = 1,
+    minY = 0,
+    maxY = 100,
+    showXAxis = true,
+    showYAxis = true,
+    showArrows = true,
+    midColor = "#DDDDDD",
+    startColor = "#B70000",
+    endColor = "#2D6644",
+    floor = undefined,
+    ceiling = undefined,
+    fill = "grey",
+    nBins = 10,
+    padding = 0,
+    height = 50,
+    polarity = "standard",
+    annotationValue = 0,
+    annotationText = "",
+    labelFormatter = (tick, index, numberOfTicks, values) => {
+      return tick;
+    },
+    containerWidth = $bindable(100),
+    numberOfTicks,
+    customColorScale = undefined,
+    skew = true,
+    showGridlines = true,
+    showTickMarks = false,
+    tickStrokeWidth = 0.25,
+    barStrokeWidth = 0,
+    barStrokeColor = "white",
+    topLabel = true,
+    includeOutliers = true,
+  } = $props();
+
+  let useRange = $derived(
+    polarity === "standard"
+      ? [0, containerWidth - padding]
+      : [containerWidth - padding, 0],
+  );
+
+  let xValueFirst = $derived(polarity === "standard" ? minX : maxX);
+  let xValueLast = $derived(polarity === "standard" ? maxX : minX);
+
+  let xScale = $derived(scaleLinear().domain([minX, maxX]).range(useRange));
+
+  const segmentScale = $derived(
+    scaleLinear().domain([0, nBins]).range([minX, maxX]),
+  );
+
+  const binThresholds = $derived(d3range(1, nBins).map(segmentScale));
+
+  const binner = $derived(bin().domain([minX, maxX]).thresholds(binThresholds));
+
+  const clampedDistribution = $derived(
+    distribution.map((d) => Math.min(Math.max(d, minX), maxX)),
+  );
+
+  const binnedDistribution = $derived(
+    binner(includeOutliers ? clampedDistribution : distribution),
+  );
+
+  const bins = $derived(
+    polarity === "reverse"
+      ? binnedDistribution.toReversed()
+      : binnedDistribution,
+  );
+
+  const proportionsInBins = $derived(
+    bins.map((b) => b.length / distribution.length),
+  );
+
+  let proportionInExtremeBins = $derived([
+    proportionsInBins[0],
+    proportionsInBins.at(-1),
+  ]);
+
+  let yScale = $derived(
+    scaleLinear()
+      .domain([0, Math.max(...bins.map((b) => b.length))])
+      .range([0, height]),
+  );
+
+  function interpolateColors(
+    startColor,
+    endColor,
+    nSegments,
+    midColor = null,
+    skew,
+  ) {
+    const colorArray = [startColor, midColor, endColor].filter(Boolean);
+
+    if (!skew) {
+      return chroma.scale(colorArray).colors(nSegments);
+    } else {
+      const extremeColors = chroma
+        .scale([startColor, midColor, endColor])
+        .padding([
+          proportionInExtremeBins[0] / 2,
+          proportionInExtremeBins[1] / 2,
+        ])
+        .colors(2);
+
+      const averageNormalised =
+        (averageValue - xValueFirst) / (xValueLast - xValueFirst);
+
+      const binColors = chroma
+        .scale([extremeColors[0], midColor, extremeColors[1]])
+        .domain([
+          0,
+          polarity === "reverse" ? 1 - averageNormalised : averageNormalised,
+          1,
+        ])
+        .colors(10);
+
+      return binColors;
+    }
+  }
+
+  let colorScale = $derived(() => {
+    if (customColorScale) return customColorScale;
+
+    if (!startColor || !endColor || !nBins) return [];
+
+    if (skew) {
+      if (
+        !midColor ||
+        averageValue == null ||
+        xValueFirst == null ||
+        xValueLast == null
+      ) {
+        return [];
+      }
+    }
+
+    return interpolateColors(startColor, endColor, nBins, midColor, skew);
+  });
+
+  const layout = $derived.by(() => {
+    let y = 0;
+
+    const topLabelY = topLabel ? y : null;
+    if (topLabel) y += 20;
+
+    const annotationY = annotationText ? y : null;
+    if (annotationText) y += 25;
+
+    const chartY = y;
+    y += height;
+
+    const xAxisY = showXAxis ? y : null;
+    if (showXAxis) y += 25;
+
+    return {
+      topLabelY,
+      annotationY,
+      chartY,
+      xAxisY,
+      totalHeight: y,
+    };
+  });
+</script>
+
+{#key containerWidth}
+  <div class="scale-container" bind:clientWidth={containerWidth}>
+    <svg width={containerWidth} height={layout.totalHeight}>
+      <g transform="translate({padding / 2}, 0)">
+        {#if topLabel && layout.topLabelY !== null}
+          <text x={0} y={layout.topLabelY + 14} fill="#666" font-size="0.75em">
+            Number of areas
+            {minX}, {maxX}
+          </text>
+        {/if}
+
+        {#if annotationText && layout.annotationY !== null}
+          <g
+            transform="translate({xScale(
+              annotationValue,
+            )}, {layout.annotationY})"
+          >
+            <text
+              fill="#555555"
+              font-size="0.8em"
+              text-anchor="middle"
+              dominant-baseline="hanging"
+            >
+              <tspan x="0" dy="0">{annotationText}</tspan>
+              <tspan x="0" dy="12">▼</tspan>
+            </text>
+          </g>
+        {/if}
+
+        <g transform="translate(0, {layout.chartY})">
+          {#if showYAxis}
+            <!-- <Axis
+              bind:axisDomain
+              bind:ticksArray={ticksDomain}
+              {chartHeight}
+              chartWidth={chartWidth - markerRadius * 2}
+              orientation={{ axis: "x", position: "bottom" }}
+              range={[markerRadius, chartWidth - markerRadius]}
+              domain={[xValueFirst, xValueLast]}
+              {min}
+              {max}
+              fontSize={14}
+              {floor}
+              {ceiling}
+              {numberOfTicks}
+              {polarity}
+              {showTickMarks}
+              {showGridlines}
+              {labelFormatter}
+              {niceTicks}
+              {markerRadius}
+              {distribution}
+            ></Axis> -->
+          {/if}
+
+          {#each bins as bin, i}
+            {#key bin.x0}
+              {@const fullWidth = Math.abs(xScale(bin.x1) - xScale(bin.x0))}
+              {@const barWidth = fullWidth * 0.97}
+              {@const offset = (fullWidth - barWidth) / 2}
+              <rect
+                x={(polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)) +
+                  offset}
+                y={height - yScale(bin.length)}
+                width={barWidth}
+                height={yScale(bin.length)}
+                fill={fill ?? colorScale[i]}
+              ></rect>
+              <!-- <text
+                x={(polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)) +
+                  offset}
+                y={height - yScale(bin.length)}
+                font-size={5}
+                >{bin.length} areas between
+                {Math.round(bin.x0)} and {Math.round(bin.x1)}
+              </text> -->
+            {/key}
+          {/each}
+        </g>
+
+        {#if showXAxis && layout.xAxisY !== null}
+          <g transform="translate(0, {layout.xAxisY})">
+            <!-- <Axis
+              bind:ticksArray={xTicks}
+              chartHeight={height}
+              chartWidth={containerWidth - padding}
+              orientation={{ axis: "x", position: "bottom" }}
+              domain={[xValueFirst, xValueLast]}
+              min={minX}
+              max={maxX}
+              range={useRange}
+              fontSize={13}
+              {floor}
+              {ceiling}
+              {labelFormatter}
+              {numberOfTicks}
+            /> -->
+          </g>
+        {/if}
+      </g>
+    </svg>
+  </div>
+{/key}
+
+<div style="content-visibility: hidden;">
+  {#if !showXAxis}
+    <!-- <Axis
+      bind:axisDomain
+      bind:ticksArray={ticksDomain}
+      {chartHeight}
+      chartWidth={chartWidth - markerRadius * 2}
+      orientation={{ axis: "x", position: "bottom" }}
+      range={[markerRadius, chartWidth - markerRadius]}
+      domain={[xValueFirst, xValueLast]}
+      {min}
+      {max}
+      fontSize={14}
+      {floor}
+      {ceiling}
+      {numberOfTicks}
+      {polarity}
+      {showTickMarks}
+      {showGridlines}
+      {labelFormatter}
+      {niceTicks}
+      {markerRadius}
+      {distribution}
+    ></Axis> -->
+  {/if}
+</div>

package/dist/components/data-vis/Histogram.svelte.d.ts

@@ -0,0 +1,75 @@
+export default Histogram;
+type Histogram = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Histogram: import("svelte").Component<{
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showArrows?: boolean;
+    midColor?: string;
+    startColor?: string;
+    endColor?: string;
+    floor?: any;
+    ceiling?: any;
+    fill?: string;
+    nBins?: number;
+    padding?: number;
+    height?: number;
+    polarity?: string;
+    annotationValue?: number;
+    annotationText?: string;
+    labelFormatter?: Function;
+    containerWidth?: number;
+    numberOfTicks: any;
+    customColorScale?: any;
+    skew?: boolean;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    tickStrokeWidth?: number;
+    barStrokeWidth?: number;
+    barStrokeColor?: string;
+    topLabel?: boolean;
+    includeOutliers?: boolean;
+}, {}, "containerWidth">;
+type $$ComponentProps = {
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showArrows?: boolean;
+    midColor?: string;
+    startColor?: string;
+    endColor?: string;
+    floor?: any;
+    ceiling?: any;
+    fill?: string;
+    nBins?: number;
+    padding?: number;
+    height?: number;
+    polarity?: string;
+    annotationValue?: number;
+    annotationText?: string;
+    labelFormatter?: Function;
+    containerWidth?: number;
+    numberOfTicks: any;
+    customColorScale?: any;
+    skew?: boolean;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    tickStrokeWidth?: number;
+    barStrokeWidth?: number;
+    barStrokeColor?: string;
+    topLabel?: boolean;
+    includeOutliers?: boolean;
+};

package/dist/components/data-vis/axis/Axis.svelte

@@ -1,51 +1,234 @@
-<script>
-  import { FolderArrowRightSolid } from "flowbite-svelte-icons";
+<script lang="ts">
+  import {
+    scaleLinear,
+    type ScaleContinuousNumeric,
+    type ScaleLinear,
+  } from "d3-scale";
   import Ticks from "./Ticks.svelte";
 
+  type AxisName = "x" | "y";
+  type AxisPosition = "bottom" | "top" | "left" | "right";
+  type Orientation = { axis: AxisName; position: AxisPosition };
+  type AxisProjector = (value: number) => number;
+  type LabelFormatter = (
+    tick: number,
+    index: number,
+    ticksArrayLength: number,
+  ) => string | number;
+
+  type Polarity = "standard" | "reverse";
+
   let {
-    chartHeight,
-    chartWidth,
-    numberOfTicks,
-    ticksArray = $bindable(),
-    axisFunction,
-    values,
-    orientation,
-    prefix,
-    suffix,
-    floor,
-    ceiling,
-    yearsInput,
+    chartHeight = 100,
+    chartWidth = 200,
+    numberOfTicks = undefined as number | undefined,
+    axisDomain = $bindable<number[]>([]),
+    ticksArray = $bindable<number[]>([]),
+    min = undefined as number | undefined,
+    max = undefined as number | undefined,
+    orientation = { axis: "x", position: "bottom" } as Orientation,
+    floor = undefined as number | undefined,
+    ceiling = undefined as number | undefined,
+    paddingTop = 100,
+    paddingBottom = 100,
+    paddingLeft = 0,
+    paddingRight = 0,
+    labelFormatter = undefined as LabelFormatter | undefined,
+    scale = undefined as ScaleContinuousNumeric<number, number> | undefined,
+    domain = undefined as [number, number] | undefined,
+    range = undefined as [number, number] | undefined,
+    fontSize = 19,
+    polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+    strokeWidth = 2,
+    niceTicks = true,
+    markerRadius = 0 as number,
+    distribution = [],
+  }: {
+    chartHeight?: number;
+    chartWidth?: number;
+    numberOfTicks?: number;
+    axisDomain?: number[];
+    ticksArray?: number[];
+    min?: number;
+    max?: number;
+    orientation?: Orientation;
+    floor?: number;
+    ceiling?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelFormatter?: LabelFormatter;
+    scale?: ScaleContinuousNumeric<number, number>;
+    domain?: [number, number];
+    range?: [number, number];
+    fontSize?: number;
+    polarity?: Polarity;
+    gridlines?: boolean;
+    strokeWidth?: number;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    niceTicks?: boolean;
+    markerRadius?: number;
+    distribution?: number[];
   } = $props();
+
+  let minTick = $derived(ticksArray.length ? Math.min(...ticksArray) : 0);
+  let maxTick = $derived(ticksArray.length ? Math.max(...ticksArray) : 1);
+  let minValue = $derived(distribution.length ? Math.min(...distribution) : 0);
+  let maxValue = $derived(distribution.length ? Math.max(...distribution) : 1);
+
+  let leftPad = $derived(
+    niceTicks
+      ? polarity === "standard"
+        ? minValue < minTick
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? maxValue > maxTick
+            ? 0.1
+            : 0
+          : 0
+      : polarity === "standard"
+        ? minValue < min
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? maxValue > max
+            ? 0.1
+            : 0
+          : 0,
+  );
+
+  let rightPad = $derived(
+    niceTicks
+      ? polarity === "standard"
+        ? maxValue > maxTick
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? minValue < minTick
+            ? 0.1
+            : 0
+          : 0
+      : polarity === "standard"
+        ? maxValue > max
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? minValue < min
+            ? 0.1
+            : 0
+          : 0,
+  );
+
+  let widthForTicks = $derived(
+    chartWidth - chartWidth * leftPad - chartWidth * rightPad,
+  );
+  let heightForTicks = $derived(Math.max(0, chartHeight));
+
+  function calculateFullAxisDomain(
+    minTick,
+    maxTick,
+    leftPad,
+    rightPad,
+    polarity,
+  ) {
+    const ticksDomainRange = maxTick - minTick;
+    const axisDomainRange = ticksDomainRange / (1 - leftPad - rightPad);
+
+    if (polarity === "standard") {
+      return [
+        minTick - axisDomainRange * leftPad,
+        maxTick + axisDomainRange * rightPad,
+      ];
+    } else {
+      return [
+        maxTick + axisDomainRange * leftPad,
+        minTick - axisDomainRange * rightPad,
+      ];
+    }
+  }
+
+  let fullAxisDomain = $derived(
+    calculateFullAxisDomain(minTick, maxTick, leftPad, rightPad, polarity),
+  );
+
+  $effect(() => {
+    axisDomain = fullAxisDomain;
+  });
 </script>
 
 <g
   data-role="{orientation.axis}-axis"
-  transform="translate({orientation.position != 'right'
+  transform="translate({orientation.position !== 'right'
     ? 0
     : chartWidth},{orientation.position === 'bottom' ? chartHeight : 0})"
 >
   <line
-    x1="0"
+    x1={markerRadius ?? 0}
     y1="0"
-    x2={orientation.axis === "x" ? chartWidth : 0}
+    x2={orientation.axis === "x"
+      ? markerRadius
+        ? chartWidth + markerRadius
+        : chartWidth
+      : 0}
     y2={orientation.axis === "y" ? chartHeight : 0}
-    stroke="black"
+    stroke="grey"
     stroke-width="2px"
   ></line>
-  {#key numberOfTicks}
-    <Ticks
-      bind:ticksArray
-      {chartWidth}
-      {chartHeight}
-      {axisFunction}
-      {values}
-      {numberOfTicks}
-      {orientation}
-      {floor}
-      {ceiling}
-      {yearsInput}
-      {suffix}
-      {prefix}
-    ></Ticks>
-  {/key}
+  <g
+    data-role="{orientation.axis}-axis"
+    transform="translate({orientation.position !== 'right'
+      ? chartWidth * leftPad + markerRadius
+      : chartWidth},{orientation.position === 'bottom' ? 0 : 0})"
+  >
+    {#if ticksArray || (min && max)}
+      {#key numberOfTicks}
+        {#if niceTicks}
+          <Ticks
+            bind:ticksArray
+            tickWidth={widthForTicks}
+            chartHeight={heightForTicks}
+            {min}
+            {max}
+            {numberOfTicks}
+            {orientation}
+            {floor}
+            {ceiling}
+            {labelFormatter}
+            {fontSize}
+            {polarity}
+            {showGridlines}
+            {showTickMarks}
+            {strokeWidth}
+            {niceTicks}
+          />
+        {:else}
+          <Ticks
+            bind:ticksArray
+            tickWidth={widthForTicks}
+            chartHeight={heightForTicks}
+            {min}
+            {max}
+            {numberOfTicks}
+            {orientation}
+            {floor}
+            {ceiling}
+            {labelFormatter}
+            {fontSize}
+            {polarity}
+            {showGridlines}
+            {showTickMarks}
+            {strokeWidth}
+            {niceTicks}
+            {leftPad}
+            {rightPad}
+          />
+        {/if}
+      {/key}
+    {/if}
+  </g>
 </g>