@communitiesuk/svelte-component-library 0.1.19-beta.2 → 0.1.19-beta.20

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

@@ -1,112 +1,207 @@
-<script>
+<script lang="ts">
   import Decimal from "decimal.js";
 
+  // Types
+  type Axis = "x" | "y";
+  type Position = "left" | "right" | "top" | "bottom";
+
+  interface Orientation {
+    axis: Axis;
+    position: Position;
+  }
+  type Polarity = "standard" | "reverse";
+
+  // Props with defaults (Svelte 5 runes)
   let {
-    ticksArray = $bindable(),
-    prefix,
-    suffix,
+    ticksArray = $bindable<number[]>(),
     chartWidth,
     chartHeight,
     axisFunction,
-    values,
+    min,
+    max,
     numberOfTicks,
     floor,
     ceiling,
     orientation,
-    yearsInput,
+    labelFormatter,
+    fontSize = 19,
+    polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+
+    strokeWidth = 2,
+  }: {
+    ticksArray?: number[]; // bindable
+    chartWidth: number;
+    chartHeight: number;
+    axisFunction: any;
+    min: number;
+    max: number;
+    numberOfTicks?: number;
+    floor?: number;
+    ceiling?: number;
+    orientation: Orientation;
+    labelFormatter?: (tick: number, index: number) => string;
+    fontSize?: number;
+    polarity?: Polarity;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
+
+    strokeWidth?: 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
+    }
 
-  $inspect(ticksArray);
-
-  function generateTicks(data, numTicks, floor, ceiling) {
-    let minValueFromData = Decimal.min(...data);
-
-    let minVal = floor
-      ? Decimal.max(floor, minValueFromData)
-      : minValueFromData;
-
-    let maxValueFromData = Decimal.max(...data);
-
-    let maxVal = ceiling
-      ? Decimal.min(ceiling, maxValueFromData)
-      : maxValueFromData;
-
-    let rangeVal = maxVal.minus(minVal);
-
-    let roughStep = rangeVal.div(numTicks - 1);
-    let normalizedSteps = [1, 2, 5, 10];
+    // Fallback: axisFunction()(tick)
+    const inner = fn();
+    return inner(tick);
+  }
 
-    let stepPower = Decimal.pow(
+  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())),
     );
-    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;
+  // Default label when no labelFormatter is supplied
+  function defaultLabel(tick: number): string {
+    return String(tick);
+  }
+
+  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;
 
-  function yearsFormat(ticks) {
-    return ticks.map((tick) => `FY ${tick % 100}-${(tick % 100) + 1}`);
+    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;
   }
 
-  numberOfTicks = tickCount(chartWidth, chartHeight);
+  // Compute ticks
+  let computedTickCount = $derived(
+    numberOfTicks ?? tickCount(chartWidth, chartHeight),
+  );
+
+  let rawTicks = $derived(
+    generateTicks(min, max, computedTickCount, floor, ceiling),
+  );
+
+  let ticksOrdered = $derived(
+    polarity === "standard" ? rawTicks : rawTicks.reverse(),
+  );
 
-  ticksArray = generateTicks(values, numberOfTicks, floor, ceiling);
-  let yearTicks = yearsInput ? yearsFormat(ticksArray) : [];
+  ticksArray = ticksOrdered;
 </script>
 
 {#if axisFunction && ticksArray && 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"
-          ? orientation.position === "left"
-            ? "M0 0 l-8 0"
-            : "M0 0 l8 0"
-          : orientation.position === "top"
-            ? "M0 0 l0 -8"
-            : "M0 0 l0 8"}
-        stroke="black"
-        stroke-width="2px"
-      ></path>
+      {#if showTickMarks}
+        <path
+          d={orientation.axis === "y"
+            ? orientation.position === "left"
+              ? `M1 0 l-8 0`
+              : `M1 0 l8 0`
+            : orientation.position === "top"
+              ? "M0 -1 l0 -8"
+              : "M0 -1 l0 8"}
+          stroke="grey"
+          stroke-width={strokeWidth}
+        ></path>
+      {/if}
+      {#if showGridlines}
+        <path
+          d={orientation.axis === "y"
+            ? orientation.position === "left"
+              ? `M0 0 l${chartWidth} 0`
+              : `M0 0 l-${chartWidth} 0`
+            : orientation.position === "top"
+              ? `M0 0 l0 ${chartHeight}`
+              : `M0 0 l0 -${chartHeight}`}
+          stroke="grey"
+          stroke-width={strokeWidth}
+        ></path>
+      {/if}
       <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"
+            : fontSize * 1.4}
+        )"
+        font-size={fontSize}
         text-anchor={orientation.axis === "x"
           ? "middle"
           : orientation.position === "left"
             ? "end"
             : "start"}
-        fill="black"
+        fill="grey"
       >
-        {yearsInput ? yearTicks[index] : prefix + tick + suffix}
+        {labelFormatter ? labelFormatter(tick, index) : defaultLabel(tick)}
       </text>
     </g>
   {/each}

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

@@ -1,33 +1,28 @@
-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 Position = "left" | "right" | "top" | "bottom";
+interface Orientation {
+    axis: Axis;
+    position: Position;
+}
+type Polarity = "standard" | "reverse";
 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;
+    min: number;
+    max: number;
+    numberOfTicks?: number;
+    floor?: number;
+    ceiling?: number;
+    orientation: Orientation;
+    labelFormatter?: (tick: number, index: number) => string;
+    fontSize?: number;
+    polarity?: Polarity;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
+    strokeWidth?: number;
 };
+declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
+type Ticks = ReturnType<typeof Ticks>;
+export default 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;
@@ -50,9 +54,9 @@ type $$ComponentProps = {
     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;