@communitiesuk/svelte-component-library 0.1.19-beta.16 → 0.1.19-beta.18

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/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,18 @@
     domain = undefined as [number, number] | undefined,
     range = undefined as [number, number] | undefined,
     fontSize = 19,
-    polarity = "standard" as Polarity,
-    gridlines = false,
+    polarity = "standard",
   }: {
     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;
@@ -77,7 +71,6 @@
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
-    gridlines?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -85,7 +78,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 +103,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 +118,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 +141,6 @@
         {labelFormatter}
         {fontSize}
         {polarity}
-        {tickStrokeWidth}
-        {gridlines}
       />
     {/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;
@@ -26,7 +27,6 @@ type $$ComponentProps = {
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
-    gridlines?: Boolean;
 };
 declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
 type Axis = ReturnType<typeof Axis>;

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

@@ -3,91 +3,76 @@
 
   // Types
   type Axis = "x" | "y";
-  type Polarity = "standard" | "reverse";
   type Position = "left" | "right" | "top" | "bottom";
 
   interface Orientation {
     axis: Axis;
     position: Position;
   }
+  type Polarity = "standard" | "reverse";
 
-  // Props with defaults
+  // Props with defaults (Svelte 5 runes)
   let {
     ticksArray = $bindable<number[]>(),
     chartWidth,
     chartHeight,
     axisFunction,
-    values,
+    min,
+    max,
     numberOfTicks,
-    tickStrokeWidth,
     floor,
     ceiling,
     orientation,
     labelFormatter,
     fontSize = 19,
-    clamp = false,
     polarity = "standard",
-    gridlines = false,
   }: {
-    ticksArray?: number[];
+    ticksArray?: number[]; // bindable
     chartWidth: number;
     chartHeight: number;
     axisFunction: any;
-    values: number[];
+    min: number;
+    max: number;
     numberOfTicks?: number;
-    tickStrokeWidth?: number;
-
-    floor?: number | null;
-    ceiling?: number | null;
+    floor?: number;
+    ceiling?: number;
     orientation: Orientation;
-    labelFormatter?: (
-      tick: number,
-      index: number,
-      numberOfTicks: number,
-      values: number[],
-    ) => string;
+    labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
-    clamp: boolean;
-    polarity: Polarity;
-    gridlines: boolean;
+    polarity?: Polarity;
   } = $props();
-
-  // Axis value helper
   function axisValue(fn: any, tick: number): number {
+    // Try single-call first: axisFunction(tick)
     try {
       const v = fn(tick);
       if (typeof v === "number") return v;
-    } catch {}
+    } catch {
+      // ignore
+    }
+
+    // Fallback: axisFunction()(tick)
     const inner = fn();
     return inner(tick);
   }
 
-  // Generate ticks safely
   function generateTicks(
-    data: number[],
+    min: number,
+    max: number,
     numTicks: number,
-    floorVal?: number | null,
-    ceilingVal?: number | null,
+    floorVal?: number,
+    ceilingVal?: number,
   ): number[] {
-    if (!data || data.length === 0) return [];
-
-    const dataMin = Decimal.min(...data);
-    const dataMax = Decimal.max(...data);
+    let minVal =
+      floorVal !== undefined ? new Decimal(floorVal) : new Decimal(min);
 
-    const minVal = floorVal != null ? new Decimal(floorVal) : dataMin;
-    const maxVal = ceilingVal != null ? new Decimal(ceilingVal) : dataMax;
+    let maxVal =
+      ceilingVal !== undefined ? new Decimal(ceilingVal) : new Decimal(max);
 
     const rangeVal = maxVal.minus(minVal);
-
-    // Ensure at least 2 ticks
-    const stepCount = Math.max(2, numTicks - 1);
-    const roughStep = rangeVal.div(stepCount);
-
+    const roughStep = rangeVal.div(numTicks - 1);
     const normalizedSteps = [
-      0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.8, 1, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 15,
-      25, 30, 35, 40, 45,
+      1, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 15, 25, 30, 35, 40, 45,
     ];
-
     const stepPower = Decimal.pow(
       10,
       -Math.floor(Math.log10(roughStep.toNumber())),
@@ -97,26 +82,10 @@
     const chosen = normalizedSteps.find(
       (step) => step >= normalizedStep.toNumber(),
     );
+    const optimalStep = new Decimal(chosen ?? 10).div(stepPower);
 
-    let chosenIdx = normalizedSteps.findIndex(
-      (step) => step >= normalizedStep.toNumber(),
-    );
-
-    let optimalStep: Decimal;
-    let scaleMin: Decimal;
-    let scaleMax: Decimal;
-
-    for (let i = chosenIdx; i >= 0; i--) {
-      optimalStep = new Decimal(normalizedSteps[i]).div(stepPower);
-      scaleMin = minVal.div(optimalStep).floor().mul(optimalStep);
-      scaleMax = maxVal.div(optimalStep).ceil().mul(optimalStep);
-
-      const axisRange = scaleMax.minus(scaleMin);
-      const dataRange = maxVal.minus(minVal);
-      const paddingRatio = axisRange.minus(dataRange).div(axisRange).toNumber();
-
-      if (paddingRatio <= 0.3) break;
-    }
+    const scaleMin = minVal.div(optimalStep).floor().mul(optimalStep);
+    const scaleMax = maxVal.div(optimalStep).ceil().mul(optimalStep);
 
     const ticks: number[] = [];
     for (let i = scaleMin; i.lte(scaleMax); i = i.plus(optimalStep)) {
@@ -125,47 +94,51 @@
     return ticks;
   }
 
-  // Default label generator
+  // Default label when no labelFormatter is supplied
   function defaultLabel(tick: number): string {
     return String(tick);
   }
 
-  // Compute number of ticks
   function tickCount(w: number, h: number): number {
-    const rawTicks = orientation.axis === "y" ? h / 50 : w / 50;
-    return Math.max(2, Math.floor(rawTicks));
+    // Keep behavior aligned with your original code.
+    const tickNum = orientation.axis === "y" ? h / 50 : w / 50;
+    return tickNum;
   }
-
-  // Clamp ticks safely
   function clampTickEnds(
     ticks: number[],
-    floorVal?: number | null,
-    ceilingVal?: number | null,
+    floor?: number,
+    ceiling?: number,
   ): number[] {
     if (!ticks || ticks.length === 0) return ticks;
+
     const out = ticks.slice();
 
-    if (floorVal != null && out[0] < floorVal) {
-      out[0] = floorVal;
+    if (floor !== undefined && out[0] <= floor) {
+      out[0] = floor;
     }
-    if (ceilingVal != null && out[out.length - 1] > ceilingVal) {
-      out[out.length - 1] = ceilingVal;
+    if (ceiling !== undefined && out[out.length - 1] >= ceiling) {
+      out[out.length - 1] = ceiling;
     }
     return out;
   }
 
-  // Compute derived ticks
-  const computedTickCount = numberOfTicks ?? tickCount(chartWidth, chartHeight);
+  // Compute ticks
+  let computedTickCount = $derived(
+    numberOfTicks ?? tickCount(chartWidth, chartHeight),
+  );
+
+  let rawTicks = $derived(
+    generateTicks(min, max, computedTickCount, floor, ceiling),
+  );
 
-  let derivedTicks = $derived(() => {
-    const ticks = generateTicks(values, computedTickCount, floor, ceiling);
-    return clamp ? clampTickEnds(ticks, floor, ceiling) : ticks;
-  });
+  let ticksOrdered = $derived(
+    polarity === "standard" ? rawTicks : rawTicks.reverse(),
+  );
 
-  ticksArray = derivedTicks();
+  ticksArray = ticksOrdered;
 </script>
 
-{#if axisFunction && ticksArray?.length && orientation.axis && orientation.position}
+{#if axisFunction && ticksArray && orientation.axis && orientation.position}
   {#each ticksArray as tick, index}
     <g
       transform="translate(
@@ -176,13 +149,13 @@
       <path
         d={orientation.axis === "y"
           ? orientation.position === "left"
-            ? `M0 0 l${gridlines ? chartWidth : -8} 0`
-            : "M0 0 l8 0"
+            ? "M0 -1 l-8 0"
+            : "M0 -1 l8 0"
           : orientation.position === "top"
-            ? "M0 0 l0 -8"
-            : "M0 0 l0 8"}
-        stroke="darkgrey"
-        stroke-width={tickStrokeWidth}
+            ? "M0 -1 l0 -8"
+            : "M0 -1 l0 8"}
+        stroke="grey"
+        stroke-width="2px"
       ></path>
       <text
         transform="translate(
@@ -195,7 +168,7 @@
           ? 5
           : orientation.position === 'top'
             ? -10
-            : 23}
+            : fontSize * 1.4}
         )"
         font-size={fontSize}
         text-anchor={orientation.axis === "x"
@@ -203,11 +176,9 @@
           : orientation.position === "left"
             ? "end"
             : "start"}
-        fill="#666666"
+        fill="grey"
       >
-        {labelFormatter
-          ? labelFormatter(tick, index, ticksArray.length, values)
-          : defaultLabel(tick)}
+        {labelFormatter ? labelFormatter(tick, index) : defaultLabel(tick)}
       </text>
     </g>
   {/each}

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

@@ -1,26 +1,24 @@
 type Axis = "x" | "y";
-type Polarity = "standard" | "reverse";
 type Position = "left" | "right" | "top" | "bottom";
 interface Orientation {
     axis: Axis;
     position: Position;
 }
+type Polarity = "standard" | "reverse";
 type $$ComponentProps = {
     ticksArray?: number[];
     chartWidth: number;
     chartHeight: number;
     axisFunction: any;
-    values: number[];
+    min: number;
+    max: number;
     numberOfTicks?: number;
-    tickStrokeWidth?: number;
-    floor?: number | null;
-    ceiling?: number | null;
+    floor?: number;
+    ceiling?: number;
     orientation: Orientation;
-    labelFormatter?: (tick: number, index: number, numberOfTicks: number, values: number[]) => string;
+    labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
-    clamp: boolean;
-    polarity: Polarity;
-    gridlines: boolean;
+    polarity?: Polarity;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

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

@@ -8,6 +8,7 @@
   import { highlight } from "./../../../utils/syntax-highlighting/shikiHighlight";
   import Lines from "./Lines.svelte";
   import ValueLabel from "./ValueLabel.svelte";
+  import Axis from "../axis/Axis.svelte";
 
   let {
     series,
@@ -15,17 +16,18 @@
     x,
     lineChartData,
 
-    xFunction = (number) => {
-      return scaleLinear()
-        .domain([2015, 2022])
-        .range([0, svgWidth - paddingLeft - paddingRight])(number);
+    xScale = (number) => {
+      return scaleLinear().domain([xTickMin, xTickMax]).range([0, chartWidth])(
+        number,
+      );
     },
-    yFunction = (number) => {
-      return scaleLinear()
-        .domain([0, 100])
-        .range([svgHeight - paddingTop - paddingBottom, 0])(number);
+    yScale = (number) => {
+      return scaleLinear().domain([yTickMin, yTickMax]).range([chartHeight, 0])(
+        number,
+      );
     },
-    lineFunction = line()
+
+    lineScale = line()
       .x((d) => xFunction(d[x]))
       .y((d) => yFunction(d[y]))
       .curve(curveLinear),
@@ -108,6 +110,10 @@
     paddingBottom = 50,
     paddingLeft = 50,
     paddingRight = 150,
+    xFloor = undefined,
+    xCeiling = undefined,
+    yFloor = undefined,
+    yCeiling = undefined,
     activeMarkerId = undefined,
     chartBackgroundColor = "#f5f5f5",
     seriesLabels = $bindable(false),
@@ -157,6 +163,18 @@
     },
   } = $props();
 
+  let xTicks = $state([]);
+  let yTicks = $state([]);
+
+  const xTickMin = $derived(xTicks.length ? Math.min(...xTicks) : undefined);
+  const xTickMax = $derived(xTicks.length ? Math.max(...xTicks) : undefined);
+  const yTickMin = $derived(yTicks.length ? Math.min(...yTicks) : undefined);
+  const yTickMax = $derived(yTicks.length ? Math.max(...yTicks) : undefined);
+
+  let xFunction = $derived((value) => xScale(value));
+  let yFunction = $derived((value) => yScale(value));
+  let lineFunction = $derived((value) => lineScale(value));
+
   const colorValues = Array.isArray(colors) ? colors : Object.values(colors);
   const lineColorMap = {};
 
@@ -197,7 +215,7 @@
   let chartHeight = $derived(svgHeight - paddingTop - paddingBottom);
   let areaFunction = $derived(
     area()
-      .y0((d) => yFunction(0))
+      .y0((d) => yFunction(yTickMin))
       .x((d) => xFunction(d.x))
       .y1((d) => yFunction(d.y))
       .curve(curveLinear),
@@ -292,17 +310,29 @@
   >
     {#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>
+        <Axis
+          bind:ticksArray={yTicks}
+          {chartHeight}
+          {chartWidth}
+          orientation={{ axis: "y", position: "left" }}
+          range={[chartHeight, 0]}
+          domain={[yTickMin, yTickMax]}
+          values={lineChartData.lines.flatMap((l) => l.data.map((d) => d[y]))}
+          ceiling={yCeiling ?? yTickMax}
+          floor={yFloor ?? yTickMin}
+        ></Axis>
+        <!--X axis-->
+        <Axis
+          bind:ticksArray={xTicks}
+          {chartWidth}
+          {chartHeight}
+          orientation={{ axis: "x", position: "bottom" }}
+          values={lineChartData.lines.flatMap((l) => l.data.map((d) => d[x]))}
+          range={[0, chartWidth]}
+          domain={[xTickMin, xTickMax]}
+          ceiling={xCeiling ?? xTickMax}
+          floor={xFloor ?? xTickMin}
+        ></Axis>
         <g data-role="lines-group">
           <Lines
             {tieredDataObject}

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

@@ -8,9 +8,9 @@ declare const LineChart: import("svelte").Component<{
     y: any;
     x: any;
     lineChartData: any;
-    xFunction?: Function;
-    yFunction?: Function;
-    lineFunction?: any;
+    xScale?: Function;
+    yScale?: Function;
+    lineScale?: any;
     labelText?: Function;
     onClickSeries?: Function;
     onMouseLeaveSeries?: Function;
@@ -34,6 +34,10 @@ declare const LineChart: import("svelte").Component<{
     paddingBottom?: number;
     paddingLeft?: number;
     paddingRight?: number;
+    xFloor?: any;
+    xCeiling?: any;
+    yFloor?: any;
+    yCeiling?: any;
     activeMarkerId?: any;
     chartBackgroundColor?: string;
     seriesLabels?: boolean;
@@ -44,15 +48,15 @@ declare const LineChart: import("svelte").Component<{
     basicLineParams?: Record<string, any>;
     colorLineParams?: Function;
     colors?: Record<string, any>;
-}, {}, "container" | "clickedSeries" | "hoveredSeries" | "clickedTier" | "hoveredTier" | "svgWidth" | "seriesLabels">;
+}, {}, "clickedSeries" | "hoveredSeries" | "clickedTier" | "hoveredTier" | "svgWidth" | "container" | "seriesLabels">;
 type $$ComponentProps = {
     series: any;
     y: any;
     x: any;
     lineChartData: any;
-    xFunction?: Function;
-    yFunction?: Function;
-    lineFunction?: any;
+    xScale?: Function;
+    yScale?: Function;
+    lineScale?: any;
     labelText?: Function;
     onClickSeries?: Function;
     onMouseLeaveSeries?: Function;
@@ -76,6 +80,10 @@ type $$ComponentProps = {
     paddingBottom?: number;
     paddingLeft?: number;
     paddingRight?: number;
+    xFloor?: any;
+    xCeiling?: any;
+    yFloor?: any;
+    yCeiling?: any;
     activeMarkerId?: any;
     chartBackgroundColor?: string;
     seriesLabels?: boolean;