@communitiesuk/svelte-component-library 0.1.19-beta.17 → 0.1.19-beta.19

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/data-vis/Histogram.svelte

@@ -0,0 +1,241 @@
+<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,
+    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,
+    strokeWidth = 0.25,
+  } = $props();
+
+  let xTicks = $state([]);
+  let yTicks = $state([]);
+
+  let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
+  let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
+
+  let domainXMin = $derived(Math.min(xTickFirst, xTickLast));
+  let domainXMax = $derived(Math.max(xTickFirst, xTickLast));
+
+  let yTickFirst = $derived(yTicks.length ? yTicks[0] : 0);
+  let yTickLast = $derived(yTicks.length ? yTicks.at(-1) : 1);
+
+  let domainYMin = $derived(Math.min(yTickFirst, yTickLast));
+  let domainYMax = $derived(Math.max(yTickFirst, yTickLast));
+
+  let useRange = $derived(
+    polarity === "standard"
+      ? [0, containerWidth - padding]
+      : [containerWidth - padding, 0],
+  );
+
+  let xScale = $derived(
+    scaleLinear().domain([domainXMin, domainXMax]).range(useRange),
+  );
+
+  const segmentScale = $derived(
+    scaleLinear().domain([0, nBins]).range([domainXMin, domainXMax]),
+  );
+
+  const binThresholds = $derived(d3range(1, nBins).map(segmentScale));
+
+  const binner = $derived(
+    bin().domain([domainXMin, domainXMax]).thresholds(binThresholds),
+  );
+
+  const bins = $derived(
+    polarity === "reverse"
+      ? binner(distribution).toReversed()
+      : binner(distribution),
+  );
+
+  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 - xTickFirst) / (xTickLast - xTickFirst);
+
+      const binColors = chroma
+        .scale([extremeColors[0], midColor, extremeColors[1]])
+        .domain([
+          0,
+          polarity === "reverse" ? 1 - averageNormalised : averageNormalised,
+          1,
+        ])
+        .colors(10);
+
+      return binColors;
+    }
+  }
+
+  let colorScale = $derived(
+    customColorScale ??
+      interpolateColors(startColor, endColor, nBins, midColor, skew),
+  );
+
+  $inspect({ colorScale });
+</script>
+
+{#key containerWidth}
+  <div class="scale-container" bind:clientWidth={containerWidth}>
+    <svg
+      width={containerWidth}
+      height={height + 20 + (annotationText ? 25 : 0) + (showXAxis ? 25 : 0)}
+      style="overflow: visible;"
+    >
+      <g transform="translate({padding / 2},0)">
+        <g transform="translate(0,{annotationText ? 25 : 20})">
+          <text dx={-2} dy={-4} fill="#666" font-size="0.75em"
+            >Number of areas</text
+          ></g
+        >
+
+        {#if annotationText}
+          <g transform="translate({xScale(annotationValue)},0)">
+            <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,{annotationText ? 25 : 20})">
+          <g>
+            {#if showXAxis}
+              <Axis
+                bind:ticksArray={xTicks}
+                chartHeight={height}
+                chartWidth={containerWidth - padding}
+                orientation={{ axis: "x", position: "bottom" }}
+                domain={[xTickFirst, xTickLast]}
+                min={minX}
+                max={maxX}
+                range={useRange}
+                fontSize={13}
+                {floor}
+                {ceiling}
+                {labelFormatter}
+                {numberOfTicks}
+              ></Axis>
+            {/if}
+            {#if showYAxis}
+              <Axis
+                bind:ticksArray={yTicks}
+                chartHeight={height}
+                chartWidth={containerWidth - padding}
+                orientation={{ axis: "y", position: "left" }}
+                min={minY}
+                max={maxY}
+                domain={[0, yTickLast]}
+                range={[0, height]}
+                fontSize={0}
+                numberOfTicks={4}
+                {showGridlines}
+                {showTickMarks}
+                strokeWidth={0.25}
+              ></Axis>
+            {/if}
+          </g>
+          {#each bins as bin, i}
+            {#key bin.x0}
+              <rect
+                x={polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)}
+                y={height - yScale(bin.length)}
+                width={Math.abs(xScale(bin.x1) - xScale(bin.x0))}
+                height={yScale(bin.length)}
+                fill={colorScale[i]}
+                stroke-width={0}
+              ></rect>
+            {/key}
+          {/each}
+        </g>
+      </g>
+    </svg>
+  </div>
+{/key}
+
+<div style="content-visibility: hidden;">
+  {#if !showXAxis}
+    <Axis
+      bind:ticksArray={xTicks}
+      chartHeight={height}
+      chartWidth={containerWidth - padding}
+      orientation={{ axis: "x", position: "bottom" }}
+      domain={[xTickFirst, xTickLast]}
+      min={minX}
+      max={maxX}
+      range={useRange}
+      fontSize={13}
+      {floor}
+      {ceiling}
+      {labelFormatter}
+      {numberOfTicks}
+    ></Axis>
+  {/if}
+</div>

package/dist/components/data-vis/{histogram/Histogram.svelte.d.ts → Histogram.svelte.d.ts}

@@ -4,46 +4,62 @@ type Histogram = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Histogram: import("svelte").Component<{
-    min?: any;
-    max?: any;
-    dist?: any[];
-    color?: string;
-    highlightColor?: string;
-    highlightValue?: any;
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
     showXAxis?: boolean;
     showYAxis?: boolean;
     showArrows?: boolean;
     midColor?: string;
     startColor?: string;
     endColor?: string;
-    thresholds?: number;
     floor?: any;
     ceiling?: any;
+    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;
+    strokeWidth?: number;
+}, {}, "containerWidth">;
 type $$ComponentProps = {
-    min?: any;
-    max?: any;
-    dist?: any[];
-    color?: string;
-    highlightColor?: string;
-    highlightValue?: any;
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
     showXAxis?: boolean;
     showYAxis?: boolean;
     showArrows?: boolean;
     midColor?: string;
     startColor?: string;
     endColor?: string;
-    thresholds?: number;
     floor?: any;
     ceiling?: any;
+    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;
+    strokeWidth?: number;
 };

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

@@ -7,41 +7,34 @@
   import Ticks from "./Ticks.svelte";
 
   type AxisName = "x" | "y";
-  type Polarity = "standard" | "reverse";
-
   type AxisPosition = "bottom" | "top" | "left" | "right";
   type Orientation = { axis: AxisName; position: AxisPosition };
   type AxisProjector = (value: number) => number;
-  type LabelFormatter = (
-    tick: number,
-    index: number,
-    numberOfTicks: number,
-    values: number[],
-  ) => string | number;
+  type LabelFormatter = (tick: number, index: number) => string | number;
+  type Polarity = "standard" | "reverse";
 
   let {
     chartHeight = 100,
     chartWidth = $bindable<number>(200),
 
-    numberOfTicks = 2,
+    numberOfTicks = undefined as number | undefined,
 
     // Bindable, but avoid binding undefined – initialize as [] for safety
     ticksArray = $bindable<number[]>([]),
 
     // Values to derive ticks/domain from if ticksArray not provided
-    values = undefined as number[] | undefined,
+    min = undefined as number | undefined,
+    max = undefined as number | undefined,
 
     orientation = { axis: "x", position: "bottom" } as Orientation,
 
-    floor = null,
-    ceiling = null,
+    floor = undefined as number | undefined,
+    ceiling = undefined as number | undefined,
 
     paddingTop = 100,
     paddingBottom = 100,
     paddingLeft = 0,
     paddingRight = 0,
-    tickStrokeWidth = 2,
-    axisStrokeWidth = 2,
 
     labelFormatter = undefined as LabelFormatter | undefined,
 
@@ -54,17 +47,21 @@
     domain = undefined as [number, number] | undefined,
     range = undefined as [number, number] | undefined,
     fontSize = 19,
-    polarity = "standard" as Polarity,
-    gridlines = false,
+    polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+    strokeWidth = 2,
   }: {
     chartHeight?: number;
     chartWidth?: number;
     numberOfTicks?: number;
     ticksArray?: number[];
-    values?: number[];
+    min?: number;
+    max?: number;
+
     orientation?: Orientation;
-    floor?: number | null;
-    ceiling?: number | null;
+    floor?: number;
+    ceiling?: number;
     paddingTop?: number;
     paddingBottom?: number;
     paddingLeft?: number;
@@ -78,6 +75,9 @@
     fontSize?: number;
     polarity?: Polarity;
     gridlines?: Boolean;
+    strokeWidth?: Number;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -85,7 +85,8 @@
   const innerHeight = $derived(Math.max(0, chartHeight));
 
   function computeDefaultDomain(): [number, number] {
-    const arr = (ticksArray && ticksArray.length ? ticksArray : values) ?? [];
+    const arr =
+      (ticksArray && ticksArray.length ? ticksArray : [min, max]) ?? [];
     const dMin =
       floor ?? (arr.length ? arr.reduce((a, b) => (a < b ? a : b)) : 0);
     const dMax =
@@ -109,23 +110,12 @@
     const useDomain = domain ?? computeDefaultDomain();
     base.domain(useDomain);
 
-    let useRange = range ?? computeDefaultRange(innerWidth, innerHeight);
-    if (polarity === "reverse") {
-      useRange = [...useRange].reverse();
-    }
-    base.range([...useRange]);
+    const useRange = range ?? computeDefaultRange(innerWidth, innerHeight);
+    base.range(useRange);
 
     return base;
   });
-
-  const axisFunction: AxisProjector = (v) => {
-    const s = resolvedScale();
-    const r = s.range();
-    const lo = Math.min(r[0], r[1]);
-    const hi = Math.max(r[0], r[1]);
-    const px = s(v);
-    return Math.max(lo, Math.min(hi, px));
-  };
+  const axisFunction: AxisProjector = $derived((v: number) => resolvedScale(v));
 </script>
 
 <g
@@ -135,21 +125,22 @@
     : chartWidth},{orientation.position === 'bottom' ? chartHeight : 0})"
 >
   <line
-    x1={0}
+    x1={range[0]}
     y1="0"
-    x2={orientation.axis === "x" ? chartWidth : 0}
+    x2={orientation.axis === "x" ? range[1] : 0}
     y2={orientation.axis === "y" ? chartHeight : 0}
-    stroke="darkgrey"
-    stroke-width={axisStrokeWidth}
+    stroke="grey"
+    stroke-width="2px"
   ></line>
-  {#if values}
+  {#if ticksArray || (min && max)}
     {#key numberOfTicks}
       <Ticks
         bind:ticksArray
         {chartWidth}
         {chartHeight}
         {axisFunction}
-        {values}
+        {min}
+        {max}
         {numberOfTicks}
         {orientation}
         {floor}
@@ -157,8 +148,9 @@
         {labelFormatter}
         {fontSize}
         {polarity}
-        {tickStrokeWidth}
-        {gridlines}
+        {showGridlines}
+        {showTickMarks}
+        {strokeWidth}
       />
     {/key}
   {/if}

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

@@ -1,21 +1,22 @@
 import { type ScaleContinuousNumeric } from "d3-scale";
 type AxisName = "x" | "y";
-type Polarity = "standard" | "reverse";
 type AxisPosition = "bottom" | "top" | "left" | "right";
 type Orientation = {
     axis: AxisName;
     position: AxisPosition;
 };
-type LabelFormatter = (tick: number, index: number, numberOfTicks: number, values: number[]) => string | number;
+type LabelFormatter = (tick: number, index: number) => string | number;
+type Polarity = "standard" | "reverse";
 type $$ComponentProps = {
     chartHeight?: number;
     chartWidth?: number;
     numberOfTicks?: number;
     ticksArray?: number[];
-    values?: number[];
+    min?: number;
+    max?: number;
     orientation?: Orientation;
-    floor?: number | null;
-    ceiling?: number | null;
+    floor?: number;
+    ceiling?: number;
     paddingTop?: number;
     paddingBottom?: number;
     paddingLeft?: number;
@@ -27,6 +28,9 @@ type $$ComponentProps = {
     fontSize?: number;
     polarity?: Polarity;
     gridlines?: Boolean;
+    strokeWidth?: Number;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
 };
 declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
 type Axis = ReturnType<typeof Axis>;