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

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

@@ -1,5 +1,8 @@
 <script lang="ts">
   import Decimal from "decimal.js";
+  import { ticks, tickStep, range, nice } from "d3-array";
+  import { scaleLinear } from "d3-scale";
+  import Axis from "./Axis.svelte";
 
   // Types
   type Axis = "x" | "y";
@@ -20,95 +23,52 @@
   // Props with defaults (Svelte 5 runes)
   let {
     ticksArray = $bindable<number[]>(),
-    chartWidth,
+    tickWidth,
     chartHeight,
-    axisFunction,
     min,
     max,
     numberOfTicks,
-    floor,
-    ceiling,
     orientation,
     fontSize = 19,
     polarity = "standard",
     showGridlines = false,
     showTickMarks = false,
-
     strokeWidth = 2,
     labelFormatter = undefined as LabelFormatter | undefined,
     niceTicks = true,
+    leftPad = 0,
+    rightPad = 0,
   }: {
     ticksArray?: number[]; // bindable
-    chartWidth: number;
+    tickWidth: number;
     chartHeight: number;
-    axisFunction: any;
     min: number;
     max: number;
     numberOfTicks?: number;
-    floor?: number;
-    ceiling?: number;
     orientation: Orientation;
     fontSize?: number;
     polarity?: Polarity;
-    showGridlines?: Boolean;
-    showTickMarks?: Boolean;
-
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
-    niceTicks?: Boolean;
+    niceTicks?: boolean;
+    leftPad?: number;
+    rightPad?: number;
   } = $props();
-  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 {
-      // ignore
-    }
-
-    // Fallback: axisFunction()(tick)
-    const inner = fn();
-    return inner(tick);
-  }
-
-  function generateTicks(
-    min: number,
-    max: number,
-    numTicks: number,
-    floorVal?: number,
-    ceilingVal?: number,
-  ): number[] {
-    let minVal =
-      floorVal !== undefined ? new Decimal(floorVal) : new Decimal(min);
-
-    let maxVal =
-      ceilingVal !== undefined ? new Decimal(ceilingVal) : new Decimal(max);
-
-    const rangeVal = maxVal.minus(minVal);
-    const roughStep = rangeVal.div(numTicks - 1);
-    const normalizedSteps = [
-      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())),
-    );
-
-    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);
-
-    const ticks: number[] = [];
-    for (let i = scaleMin; i.lte(scaleMax); i = i.plus(optimalStep)) {
-      ticks.push(i.toNumber());
-    }
-    return ticks;
-  }
+  // 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 {
+  //     // ignore
+  //   }
+
+  //   // Fallback: axisFunction()(tick)
+  //   const inner = fn();
+  //   return inner(tick);
+  // }
 
   // Default label when no labelFormatter is supplied
   function defaultLabel(tick: number): string {
@@ -116,52 +76,49 @@
   }
 
   function tickCount(w: number, h: number): number {
-    // Keep behavior aligned with your original code.
     const tickNum = orientation.axis === "y" ? h / 50 : w / 50;
     return tickNum;
   }
-  function clampTickEnds(
-    ticks: number[],
-    floor?: number,
-    ceiling?: number,
-  ): number[] {
-    if (!ticks || ticks.length === 0) return ticks;
-
-    const out = ticks.slice();
-
-    if (floor !== undefined && out[0] <= floor) {
-      out[0] = floor;
-    }
-    if (ceiling !== undefined && out[out.length - 1] >= ceiling) {
-      out[out.length - 1] = ceiling;
-    }
-    return out;
-  }
 
-  // Compute ticks
   let computedTickCount = $derived(
-    numberOfTicks ?? tickCount(chartWidth, chartHeight),
+    numberOfTicks ?? tickCount(tickWidth, chartHeight),
   );
 
   let rawTicks = $derived(
     niceTicks
-      ? generateTicks(min, max, computedTickCount, floor, ceiling)
-      : [min, max],
+      ? ticks(...nice(min, max, computedTickCount), computedTickCount)
+      : leftPad || rightPad
+        ? polarity === "standard"
+          ? [min + (max - min) * leftPad, max - (max - min) * rightPad]
+          : [min + (max - min) * rightPad, max - (max - min) * leftPad]
+        : [min, max],
   );
 
   let ticksOrdered = $derived(
-    polarity === "standard" ? rawTicks : rawTicks.reverse(),
+    polarity === "standard" ? rawTicks : [...rawTicks].toReversed(),
   );
 
-  ticksArray = ticksOrdered;
+  $effect(() => {
+    ticksArray = ticksOrdered;
+  });
+
+  let ticksDomain = $derived(
+    polarity === "standard"
+      ? [Math.min(...ticksArray), Math.max(...ticksArray)]
+      : [Math.max(...ticksArray), Math.min(...ticksArray)],
+  );
+
+  let axisFunction = $derived(
+    scaleLinear().domain(ticksDomain).range([0, tickWidth]),
+  );
 </script>
 
 {#if axisFunction && ticksArray && orientation.axis && orientation.position}
   {#each ticksArray as tick, index}
     <g
       transform="translate(
-        {orientation.axis === 'x' ? axisValue(axisFunction, tick) : 0},
-        {orientation.axis === 'y' ? axisValue(axisFunction, tick) : 0}
+        {orientation.axis === 'x' ? axisFunction(tick) : 0},
+        {orientation.axis === 'y' ? axisFunction(tick) : 0}
       )"
     >
       {#if showTickMarks}
@@ -181,8 +138,8 @@
         <path
           d={orientation.axis === "y"
             ? orientation.position === "left"
-              ? `M0 0 l${chartWidth} 0`
-              : `M0 0 l-${chartWidth} 0`
+              ? `M0 0 l${tickWidth} 0`
+              : `M0 0 l-${tickWidth} 0`
             : orientation.position === "top"
               ? `M0 0 l0 ${chartHeight}`
               : `M0 0 l0 -${chartHeight}`}

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

@@ -1,3 +1,4 @@
+import Axis from "./Axis.svelte";
 type Axis = "x" | "y";
 type Position = "left" | "right" | "top" | "bottom";
 interface Orientation {
@@ -8,22 +9,21 @@ type Polarity = "standard" | "reverse";
 type LabelFormatter = (tick: number, index: number, ticksArrayLength: number) => string | number;
 type $$ComponentProps = {
     ticksArray?: number[];
-    chartWidth: number;
+    tickWidth: number;
     chartHeight: number;
-    axisFunction: any;
     min: number;
     max: number;
     numberOfTicks?: number;
-    floor?: number;
-    ceiling?: number;
     orientation: Orientation;
     fontSize?: number;
     polarity?: Polarity;
-    showGridlines?: Boolean;
-    showTickMarks?: Boolean;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
-    niceTicks?: Boolean;
+    niceTicks?: boolean;
+    leftPad?: number;
+    rightPad?: number;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

package/dist/components/data-vis/position-chart/PositionChart.svelte

@@ -14,6 +14,7 @@
     label = undefined,
     showAxis = true,
     showArrows = false,
+    arrowTextSize = "s",
     showAverage = false,
     chartWidth = $bindable(500), // the 'chart' is the bar and the marker
     chartHeight = 24,
@@ -97,15 +98,18 @@
       return tick;
     },
     niceTicks = true,
+    ticksDomain = $bindable([[]]),
+    axisDomain = $bindable([[]]),
   } = $props();
 
-  let xTicks = $state([]);
+  let xTickFirst = $derived(ticksDomain.length ? ticksDomain[0] : 0);
+  let xTickLast = $derived(ticksDomain.length ? ticksDomain.at(-1) : 1);
 
-  let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
-  let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
-
-  let domainMin = $derived(Math.min(xTickFirst, xTickLast));
-  let domainMax = $derived(Math.max(xTickFirst, xTickLast));
+  let domainMin = $derived(Math.min(...axisDomain));
+  let domainMax = $derived(Math.max(...axisDomain));
+  let chartDomain = $derived(
+    polarity === "standard" ? [domainMin, domainMax] : [domainMax, domainMin],
+  );
 
   const segmentScale = $derived(
     scaleLinear().domain([0, nSegments]).range([domainMin, domainMax]),
@@ -241,8 +245,8 @@
   let barWidth = $derived(chartWidth - markerRadius * 2);
   let barHeight = $derived((chartHeight * 5) / 6);
 
-  function xFunction(min, max) {
-    return scaleLinear().domain([min, max]).range([0, barWidth]).clamp(true);
+  function xFunction(chartDomain) {
+    return scaleLinear().domain(chartDomain).range([0, barWidth]).clamp(true);
   }
 
   let annotations = $derived(
@@ -325,7 +329,7 @@
           </marker>
         </defs>
         <path
-          d="M 4 25 v 10 h {xFunction(min, max)(d.value) +
+          d="M 4 25 v 10 h {xFunction(chartDomain)(d.value) +
             markerRadius -
             4 +
             (topWidth - chartWidth)}  v 15"
@@ -414,11 +418,8 @@
                   ? (e) => e.key === "Enter" && onClickMarker(e, value)
                   : null}
                 pointer-events={interactiveMarkers ? null : "none"}
-                transform="translate({xFunction(
-                  xTickFirst,
-                  xTickLast,
-                )(rowValue.value) + markerRadius},{positionChart.chartHeight /
-                  2})"
+                transform="translate({xFunction(chartDomain)(rowValue.value) +
+                  markerRadius},{positionChart.chartHeight / 2})"
               >
                 {#if rowValue.shape === "line"}
                   <line
@@ -475,7 +476,8 @@
         {/each}
         {#if showAxis}
           <Axis
-            bind:ticksArray={xTicks}
+            bind:axisDomain
+            bind:ticksArray={ticksDomain}
             {chartHeight}
             chartWidth={chartWidth - markerRadius * 2}
             orientation={{ axis: "x", position: "bottom" }}
@@ -492,15 +494,14 @@
             {showGridlines}
             {labelFormatter}
             {niceTicks}
+            {markerRadius}
+            {distribution}
           ></Axis>
         {/if}
         {#if showAverage}
           <g
-            transform="translate({xFunction(
-              xTickFirst,
-              xTickLast,
-            )(averageValue) + markerRadius}, {chartHeight +
-              (showAxis ? 20 : 0)})"
+            transform="translate({xFunction(chartDomain)(averageValue) +
+              markerRadius}, {chartHeight + (showAxis ? 20 : 0)})"
           >
             <text
               fill="#444"
@@ -516,13 +517,12 @@
         {/if}
       </svg>
       {#if showArrows}
-        <PositionChartAxis
-          markerRadius={10}
-          barWidth={chartWidth}
-          textSize="xs"
-          {chartWidth}
-          axisLabels={["Worse than average", "Better than average"]}
-        ></PositionChartAxis>
+        <div class="axis-container" style="margin: 0px {markerRadius}px">
+          <PositionChartAxis
+            textSize={arrowTextSize}
+            axisLabels={["Worse than average", "Better than average"]}
+          ></PositionChartAxis>
+        </div>
       {/if}
     </div>
     {#if moreInfoTogglesArray[i]}
@@ -574,7 +574,8 @@
 <div style="content-visibility: hidden;">
   {#if !showAxis}
     <Axis
-      bind:ticksArray={xTicks}
+      bind:axisDomain
+      bind:ticksArray={ticksDomain}
       {chartHeight}
       chartWidth={chartWidth - markerRadius * 2}
       orientation={{ axis: "x", position: "bottom" }}
@@ -591,6 +592,8 @@
       {showGridlines}
       {labelFormatter}
       {niceTicks}
+      {markerRadius}
+      {distribution}
     ></Axis>
   {/if}
 </div>

package/dist/components/data-vis/position-chart/PositionChart.svelte.d.ts

@@ -10,6 +10,7 @@ declare const PositionChart: import("svelte").Component<{
     label?: any;
     showAxis?: boolean;
     showArrows?: boolean;
+    arrowTextSize?: string;
     showAverage?: boolean;
     chartWidth?: number;
     chartHeight?: number;
@@ -55,7 +56,9 @@ declare const PositionChart: import("svelte").Component<{
     showGridlines?: boolean;
     labelFormatter?: Function;
     niceTicks?: boolean;
-}, {}, "chartWidth">;
+    ticksDomain?: any[];
+    axisDomain?: any[];
+}, {}, "chartWidth" | "axisDomain" | "ticksDomain">;
 type $$ComponentProps = {
     value?: any;
     min?: any;
@@ -63,6 +66,7 @@ type $$ComponentProps = {
     label?: any;
     showAxis?: boolean;
     showArrows?: boolean;
+    arrowTextSize?: string;
     showAverage?: boolean;
     chartWidth?: number;
     chartHeight?: number;
@@ -108,4 +112,6 @@ type $$ComponentProps = {
     showGridlines?: boolean;
     labelFormatter?: Function;
     niceTicks?: boolean;
+    ticksDomain?: any[];
+    axisDomain?: any[];
 };

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte

@@ -1,47 +1,47 @@
 <script>
-  let {
-    markerRadius = undefined,
-    textSize = "s",
-    chartWidth,
-    axisLabels = ["Left", "Right"],
-  } = $props();
+  let { textSize = "s", axisLabels = ["Left", "Right"] } = $props();
 </script>
 
-<div
-  class="axis govuk-body-{textSize}"
-  style="--axis-padding:{markerRadius}px; width: {chartWidth}"
->
-  <div class="right-label">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="16"
-      viewBox="0 0 11 20"
-      fill="none"
-    >
-      <path
-        transform="translate(20,21)rotate(180)"
-        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
-        fill="darkgrey"
-      ></path>
-    </svg>
+<div class="axis govuk-body-{textSize}">
+  <div class="left-label">
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M8 1L1 8L8 15M1 8H17"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
     <span class="axis-text">{axisLabels[0]}</span>
   </div>
-  <div class="left-label">
+  <div class="right-label">
     <span class="axis-text">{axisLabels[1]}</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="16"
-      viewBox="0 0 11 20"
-      fill="none"
-    >
-      <path
-        transform="translate(-5,-3)"
-        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
-        fill="darkgrey"
-      ></path>
-    </svg>
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M10 1L17 8L10 15M17 8H1"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
   </div>
 </div>
 
@@ -59,10 +59,11 @@
   .left-label,
   .right-label {
     display: flex;
+    gap: 4px;
     max-width: 120px;
   }
 
-  .left-label {
+  .right-label {
     text-align: end;
   }
 
@@ -72,4 +73,9 @@
     color: #666666;
     font-style: italic;
   }
+
+  .arrow-container {
+    display: flex;
+    align-items: center;
+  }
 </style>

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte.d.ts

@@ -4,14 +4,10 @@ type PositionChartAxis = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const PositionChartAxis: import("svelte").Component<{
-    markerRadius?: any;
     textSize?: string;
-    chartWidth: any;
     axisLabels?: any[];
 }, {}, "">;
 type $$ComponentProps = {
-    markerRadius?: any;
     textSize?: string;
-    chartWidth: any;
     axisLabels?: any[];
 };