@communitiesuk/svelte-component-library 0.1.19-beta.11 → 0.1.19-beta.14

package/dist/assets/icons/MaterialIcon.svelte

@@ -23,7 +23,6 @@
   class="c inline h-16 w-16"
   viewBox="0 0 48 48"
   style={`transform: rotate(${rotation}deg)`}
-  aria-hidden={true}
 >
   {#each paths as path}
     <path d={path}></path>

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

@@ -1,51 +1,159 @@
-<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 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;
+
   let {
-    chartHeight,
-    chartWidth,
-    numberOfTicks,
-    ticksArray = $bindable(),
-    axisFunction,
-    values,
-    orientation,
-    prefix,
-    suffix,
-    floor,
-    ceiling,
-    yearsInput,
+    chartHeight = 100,
+    chartWidth = $bindable<number>(200),
+
+    numberOfTicks = 2,
+
+    // 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,
+
+    orientation = { axis: "x", position: "bottom" } as Orientation,
+
+    floor = null,
+    ceiling = null,
+
+    paddingTop = 100,
+    paddingBottom = 100,
+    paddingLeft = 0,
+    paddingRight = 0,
+
+    labelFormatter = undefined as LabelFormatter | undefined,
+
+    // --- New inputs for D3 scale + optional overrides ---
+    // A ready-made D3 continuous scale (linear/log/time, etc.)
+    // For this component we use numeric-only; time scales also implement numeric mapping.
+    scale = undefined as ScaleContinuousNumeric<number, number> | undefined,
+
+    // Optional overrides for domain/range applied to a COPY of the provided scale
+    domain = undefined as [number, number] | undefined,
+    range = undefined as [number, number] | undefined,
+    fontSize = 19,
+    polarity = "standard" as Polarity,
+  }: {
+    chartHeight?: number;
+    chartWidth?: number;
+    numberOfTicks?: number;
+    ticksArray?: number[];
+    values?: number[];
+    orientation?: Orientation;
+    floor?: number | null;
+    ceiling?: number | null;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelFormatter?: LabelFormatter;
+
+    // New
+    scale?: ScaleContinuousNumeric<number, number>;
+    domain?: [number, number];
+    range?: [number, number];
+    fontSize?: number;
+    polarity?: Polarity;
   } = $props();
+
+  // --- Helpers to compute default domain/range when not supplied ---
+  const innerWidth = $derived(Math.max(0, chartWidth));
+  const innerHeight = $derived(Math.max(0, chartHeight));
+
+  function computeDefaultDomain(): [number, number] {
+    const arr = (ticksArray && ticksArray.length ? ticksArray : values) ?? [];
+    const dMin =
+      floor ?? (arr.length ? arr.reduce((a, b) => (a < b ? a : b)) : 0);
+    const dMax =
+      ceiling ?? (arr.length ? arr.reduce((a, b) => (a > b ? a : b)) : 1);
+    return [dMin, dMax];
+  }
+
+  function computeDefaultRange(innerWidth, innerHeight): [number, number] {
+    if (orientation.axis === "x") {
+      return [0, innerWidth];
+    } else {
+      return [innerHeight, 0];
+    }
+  }
+  //Returns d3 scale function
+  const resolvedScale = $derived(() => {
+    const base: ScaleContinuousNumeric<number, number> = scale
+      ? scale.copy()
+      : scaleLinear<number, number>();
+
+    const useDomain = domain ?? computeDefaultDomain();
+    base.domain(useDomain);
+
+    let useRange = range ?? computeDefaultRange(innerWidth, innerHeight);
+    if (polarity === "reverse") {
+      useRange = [...useRange].reverse();
+    }
+    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));
+  };
 </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={0}
     y1="0"
     x2={orientation.axis === "x" ? chartWidth : 0}
     y2={orientation.axis === "y" ? chartHeight : 0}
-    stroke="black"
+    stroke="darkgrey"
     stroke-width="2px"
   ></line>
-  {#key numberOfTicks}
-    <Ticks
-      bind:ticksArray
-      {chartWidth}
-      {chartHeight}
-      {axisFunction}
-      {values}
-      {numberOfTicks}
-      {orientation}
-      {floor}
-      {ceiling}
-      {yearsInput}
-      {suffix}
-      {prefix}
-    ></Ticks>
-  {/key}
+  {#if values}
+    {#key numberOfTicks}
+      <Ticks
+        bind:ticksArray
+        {chartWidth}
+        {chartHeight}
+        {axisFunction}
+        {values}
+        {numberOfTicks}
+        {orientation}
+        {floor}
+        {ceiling}
+        {labelFormatter}
+        {fontSize}
+        {polarity}
+      />
+    {/key}
+  {/if}
 </g>

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

@@ -1,33 +1,32 @@
-export default Axis;
-type Axis = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
+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;
 };
-declare const Axis: import("svelte").Component<{
-    chartHeight: any;
-    chartWidth: any;
-    numberOfTicks: any;
-    ticksArray?: any;
-    axisFunction: any;
-    values: any;
-    orientation: any;
-    prefix: any;
-    suffix: any;
-    floor: any;
-    ceiling: any;
-    yearsInput: any;
-}, {}, "ticksArray">;
+type LabelFormatter = (tick: number, index: number, numberOfTicks: number, values: number[]) => string | number;
 type $$ComponentProps = {
-    chartHeight: any;
-    chartWidth: any;
-    numberOfTicks: any;
-    ticksArray?: any;
-    axisFunction: any;
-    values: any;
-    orientation: any;
-    prefix: any;
-    suffix: any;
-    floor: any;
-    ceiling: any;
-    yearsInput: any;
+    chartHeight?: number;
+    chartWidth?: number;
+    numberOfTicks?: number;
+    ticksArray?: number[];
+    values?: number[];
+    orientation?: Orientation;
+    floor?: number | null;
+    ceiling?: number | null;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelFormatter?: LabelFormatter;
+    scale?: ScaleContinuousNumeric<number, number>;
+    domain?: [number, number];
+    range?: [number, number];
+    fontSize?: number;
+    polarity?: Polarity;
 };
+declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
+type Axis = ReturnType<typeof Axis>;
+export default Axis;

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

@@ -1,10 +1,19 @@
-<script>
+<script lang="ts">
   import Decimal from "decimal.js";
 
+  // Types
+  type Axis = "x" | "y";
+  type Polarity = "standard" | "reverse";
+  type Position = "left" | "right" | "top" | "bottom";
+
+  interface Orientation {
+    axis: Axis;
+    position: Position;
+  }
+
+  // Props with defaults
   let {
-    ticksArray = $bindable(),
-    prefix,
-    suffix,
+    ticksArray = $bindable<number[]>(),
     chartWidth,
     chartHeight,
     axisFunction,
@@ -13,69 +22,135 @@
     floor,
     ceiling,
     orientation,
-    yearsInput,
+    labelFormatter,
+    fontSize = 19,
+    clamp = false,
+    polarity = "standard",
+  }: {
+    ticksArray?: number[];
+    chartWidth: number;
+    chartHeight: number;
+    axisFunction: any;
+    values: number[];
+    numberOfTicks?: number;
+    floor?: number | null;
+    ceiling?: number | null;
+    orientation: Orientation;
+    labelFormatter?: (
+      tick: number,
+      index: number,
+      numberOfTicks: number,
+      values: number[],
+    ) => string;
+    fontSize?: number;
+    clamp: boolean;
+    polarity: Polarity;
   } = $props();
 
-  $inspect(ticksArray);
+  // Axis value helper
+  function axisValue(fn: any, tick: number): number {
+    try {
+      const v = fn(tick);
+      if (typeof v === "number") return v;
+    } catch {}
+    const inner = fn();
+    return inner(tick);
+  }
 
-  function generateTicks(data, numTicks, floor, ceiling) {
-    let minValueFromData = Decimal.min(...data);
+  // Generate ticks safely
+  function generateTicks(
+    data: number[],
+    numTicks: number,
+    floorVal?: number | null,
+    ceilingVal?: number | null,
+  ): number[] {
+    if (!data || data.length === 0) return [];
 
-    let minVal = floor
-      ? Decimal.max(floor, minValueFromData)
-      : minValueFromData;
+    const dataMin = Decimal.min(...data);
+    const dataMax = Decimal.max(...data);
 
-    let maxValueFromData = Decimal.max(...data);
+    const minVal = floorVal != null ? new Decimal(floorVal) : dataMin;
+    const maxVal = ceilingVal != null ? new Decimal(ceilingVal) : dataMax;
 
-    let maxVal = ceiling
-      ? Decimal.min(ceiling, maxValueFromData)
-      : maxValueFromData;
+    const rangeVal = maxVal.minus(minVal);
 
-    let rangeVal = maxVal.minus(minVal);
+    // Ensure at least 2 ticks
+    const stepCount = Math.max(2, numTicks - 1);
+    const roughStep = rangeVal.div(stepCount);
 
-    let roughStep = rangeVal.div(numTicks - 1);
-    let normalizedSteps = [1, 2, 5, 10];
+    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,
+    ];
 
-    let stepPower = Decimal.pow(
+    const stepPower = Decimal.pow(
       10,
       -Math.floor(Math.log10(roughStep.toNumber())),
     );
-    let normalizedStep = roughStep.mul(stepPower);
-    let optimalStep = new Decimal(
-      normalizedSteps.find((step) => step >= normalizedStep.toNumber()),
-    ).div(stepPower);
 
-    let scaleMin = minVal.div(optimalStep).floor().mul(optimalStep);
-    let scaleMax = maxVal.div(optimalStep).ceil().mul(optimalStep);
+    const normalizedStep = roughStep.mul(stepPower);
+    const chosen = normalizedSteps.find(
+      (step) => step >= normalizedStep.toNumber(),
+    );
+    const optimalStep = new Decimal(chosen ?? 10).div(stepPower);
+
+    const scaleMin = minVal.div(optimalStep).floor().mul(optimalStep);
+    const scaleMax = maxVal.div(optimalStep).ceil().mul(optimalStep);
 
-    let ticks = [];
+    const ticks: number[] = [];
     for (let i = scaleMin; i.lte(scaleMax); i = i.plus(optimalStep)) {
       ticks.push(i.toNumber());
     }
     return ticks;
   }
 
-  function tickCount(chartWidth, chartHeight) {
-    let tickNum = orientation.axis === "y" ? chartHeight / 50 : chartWidth / 50;
-    return tickNum;
+  // Default label generator
+  function defaultLabel(tick: number): string {
+    return String(tick);
   }
 
-  function yearsFormat(ticks) {
-    return ticks.map((tick) => `FY ${tick % 100}-${(tick % 100) + 1}`);
+  // 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));
   }
 
-  numberOfTicks = tickCount(chartWidth, chartHeight);
+  // Clamp ticks safely
+  function clampTickEnds(
+    ticks: number[],
+    floorVal?: number | null,
+    ceilingVal?: number | null,
+  ): number[] {
+    if (!ticks || ticks.length === 0) return ticks;
+    const out = ticks.slice();
+
+    if (floorVal != null && out[0] < floorVal) {
+      out[0] = floorVal;
+    }
+    if (ceilingVal != null && out[out.length - 1] > ceilingVal) {
+      out[out.length - 1] = ceilingVal;
+    }
+    return out;
+  }
+
+  // Compute derived ticks
+  const computedTickCount = numberOfTicks ?? tickCount(chartWidth, chartHeight);
+
+  let derivedTicks = $derived(() => {
+    const ticks = generateTicks(values, computedTickCount, floor, ceiling);
+    return clamp ? clampTickEnds(ticks, floor, ceiling) : ticks;
+  });
 
-  ticksArray = generateTicks(values, numberOfTicks, floor, ceiling);
-  let yearTicks = yearsInput ? yearsFormat(ticksArray) : [];
+  ticksArray = derivedTicks();
 </script>
 
-{#if axisFunction && ticksArray && orientation.axis && orientation.position}
+{#if axisFunction && ticksArray?.length && orientation.axis && orientation.position}
   {#each ticksArray as tick, index}
     <g
-      transform="translate({orientation.axis === 'x'
-        ? axisFunction(tick)
-        : 0},{orientation.axis === 'y' ? axisFunction(tick) : 0})"
+      transform="translate(
+        {orientation.axis === 'x' ? axisValue(axisFunction, tick) : 0},
+        {orientation.axis === 'y' ? axisValue(axisFunction, tick) : 0}
+      )"
     >
       <path
         d={orientation.axis === "y"
@@ -85,28 +160,33 @@
           : orientation.position === "top"
             ? "M0 0 l0 -8"
             : "M0 0 l0 8"}
-        stroke="black"
+        stroke="darkgrey"
         stroke-width="2px"
       ></path>
       <text
-        transform="translate({orientation.axis === 'x'
+        transform="translate(
+          {orientation.axis === 'x'
           ? 0
           : orientation.position === 'left'
             ? -10
-            : 10}, {orientation.axis === 'y'
+            : 10},
+          {orientation.axis === 'y'
           ? 5
           : orientation.position === 'top'
             ? -10
-            : 23})"
-        font-size="19"
+            : 23}
+        )"
+        font-size={fontSize}
         text-anchor={orientation.axis === "x"
           ? "middle"
           : orientation.position === "left"
             ? "end"
             : "start"}
-        fill="black"
+        fill="#666666"
       >
-        {yearsInput ? yearTicks[index] : prefix + tick + suffix}
+        {labelFormatter
+          ? labelFormatter(tick, index, ticksArray.length, values)
+          : defaultLabel(tick)}
       </text>
     </g>
   {/each}

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

@@ -1,33 +1,25 @@
-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 Axis = "x" | "y";
+type Polarity = "standard" | "reverse";
+type Position = "left" | "right" | "top" | "bottom";
+interface Orientation {
+    axis: Axis;
+    position: Position;
+}
 type $$ComponentProps = {
-    ticksArray?: any;
-    prefix: any;
-    suffix: any;
-    chartWidth: any;
-    chartHeight: any;
+    ticksArray?: number[];
+    chartWidth: number;
+    chartHeight: number;
     axisFunction: any;
-    values: any;
-    numberOfTicks: any;
-    floor: any;
-    ceiling: any;
-    orientation: any;
-    yearsInput: any;
+    values: number[];
+    numberOfTicks?: number;
+    floor?: number | null;
+    ceiling?: number | null;
+    orientation: Orientation;
+    labelFormatter?: (tick: number, index: number, numberOfTicks: number, values: number[]) => string;
+    fontSize?: number;
+    clamp: boolean;
+    polarity: Polarity;
 };
+declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
+type Ticks = ReturnType<typeof Ticks>;
+export default Ticks;