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

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

@@ -1,33 +1,41 @@
-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 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, ticksArrayLength: number) => string | number;
+type Polarity = "standard" | "reverse";
 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;
+    axisDomain?: number[];
+    ticksArray?: number[];
+    min?: number;
+    max?: number;
+    orientation?: Orientation;
+    floor?: number;
+    ceiling?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelFormatter?: LabelFormatter;
+    scale?: ScaleContinuousNumeric<number, number>;
+    domain?: [number, number];
+    range?: [number, number];
+    fontSize?: number;
+    polarity?: Polarity;
+    gridlines?: boolean;
+    strokeWidth?: number;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    niceTicks?: boolean;
+    markerRadius?: number;
+    distribution?: number[];
 };
+declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "axisDomain">;
+type Axis = ReturnType<typeof Axis>;
+export default Axis;

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

@@ -1,112 +1,176 @@
-<script>
+<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";
+  type Position = "left" | "right" | "top" | "bottom";
+
+  interface Orientation {
+    axis: Axis;
+    position: Position;
+  }
+  type Polarity = "standard" | "reverse";
+
+  type LabelFormatter = (
+    tick: number,
+    index: number,
+    ticksArrayLength: number,
+  ) => string | number;
+
+  // Props with defaults (Svelte 5 runes)
   let {
-    ticksArray = $bindable(),
-    prefix,
-    suffix,
-    chartWidth,
+    ticksArray = $bindable<number[]>(),
+    tickWidth,
     chartHeight,
-    axisFunction,
-    values,
+    min,
+    max,
     numberOfTicks,
-    floor,
-    ceiling,
     orientation,
-    yearsInput,
+    fontSize = 19,
+    polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+    strokeWidth = 2,
+    labelFormatter = undefined as LabelFormatter | undefined,
+    niceTicks = true,
+    leftPad = 0,
+    rightPad = 0,
+  }: {
+    ticksArray?: number[]; // bindable
+    tickWidth: number;
+    chartHeight: number;
+    min: number;
+    max: number;
+    numberOfTicks?: number;
+    orientation: Orientation;
+    fontSize?: number;
+    polarity?: Polarity;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    strokeWidth?: number;
+    labelFormatter?: LabelFormatter;
+    niceTicks?: boolean;
+    leftPad?: number;
+    rightPad?: number;
   } = $props();
-
-  $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];
-
-    let 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);
-
-    let ticks = [];
-    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 {
+    return String(tick);
   }
 
-  function tickCount(chartWidth, chartHeight) {
-    let tickNum = orientation.axis === "y" ? chartHeight / 50 : chartWidth / 50;
+  function tickCount(w: number, h: number): number {
+    const tickNum = orientation.axis === "y" ? h / 50 : w / 50;
     return tickNum;
   }
 
-  function yearsFormat(ticks) {
-    return ticks.map((tick) => `FY ${tick % 100}-${(tick % 100) + 1}`);
-  }
-
-  numberOfTicks = tickCount(chartWidth, chartHeight);
-
-  ticksArray = generateTicks(values, numberOfTicks, floor, ceiling);
-  let yearTicks = yearsInput ? yearsFormat(ticksArray) : [];
+  let computedTickCount = $derived(
+    numberOfTicks ?? tickCount(tickWidth, chartHeight),
+  );
+
+  let rawTicks = $derived(
+    niceTicks
+      ? 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].toReversed(),
+  );
+
+  $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'
-        ? axisFunction(tick)
-        : 0},{orientation.axis === 'y' ? axisFunction(tick) : 0})"
+      transform="translate(
+        {orientation.axis === 'x' ? axisFunction(tick) : 0},
+        {orientation.axis === 'y' ? 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${tickWidth} 0`
+              : `M0 0 l-${tickWidth} 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, ticksArray.length)
+          : defaultLabel(tick)}
       </text>
     </g>
   {/each}

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

@@ -1,33 +1,30 @@
-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">;
+import Axis from "./Axis.svelte";
+type Axis = "x" | "y";
+type Position = "left" | "right" | "top" | "bottom";
+interface Orientation {
+    axis: Axis;
+    position: Position;
+}
+type Polarity = "standard" | "reverse";
+type LabelFormatter = (tick: number, index: number, ticksArrayLength: number) => string | number;
 type $$ComponentProps = {
-    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?: number[];
+    tickWidth: number;
+    chartHeight: number;
+    min: number;
+    max: number;
+    numberOfTicks?: number;
+    orientation: Orientation;
+    fontSize?: number;
+    polarity?: Polarity;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    strokeWidth?: number;
+    labelFormatter?: LabelFormatter;
+    niceTicks?: boolean;
+    leftPad?: number;
+    rightPad?: 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;

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

@@ -11,6 +11,7 @@
     markerRect = undefined,
     tooltipSnippet,
     labelText = undefined,
+    yOffset = 20,
   } = $props();
 
   let textDimensions = $state();
@@ -31,7 +32,7 @@ left: {markerRect?.x +
   style="position:absolute; left: {markerRect?.x - textDimensions?.width / 2}px;
       top: {markerRect?.y -
     textDimensions?.height -
-    20}px; pointer-events: none"
+    yOffset}px; pointer-events: none"
   bind:contentRect={textDimensions}
 >
   {#if tooltipSnippet === undefined}

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

@@ -15,6 +15,7 @@ declare const ValueLabel: import("svelte").Component<{
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 }, {}, "">;
 type $$ComponentProps = {
     activeMarkerId: any;
@@ -28,4 +29,5 @@ type $$ComponentProps = {
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 };