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

package/dist/components/data-vis/Histogram.svelte

@@ -42,42 +42,27 @@
     includeOutliers = true,
   } = $props();
 
-  let xTicks = $state([]);
-  let yTicks = $state([]);
-
-  let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
-  let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
-
-  let domainXMin = $derived(Math.min(xTickFirst, xTickLast));
-  let domainXMax = $derived(Math.max(xTickFirst, xTickLast));
-
-  let yTickFirst = $derived(yTicks.length ? yTicks[0] : 0);
-  let yTickLast = $derived(yTicks.length ? yTicks.at(-1) : 1);
-
-  let domainYMin = $derived(Math.min(yTickFirst, yTickLast));
-  let domainYMax = $derived(Math.max(yTickFirst, yTickLast));
-
   let useRange = $derived(
     polarity === "standard"
       ? [0, containerWidth - padding]
       : [containerWidth - padding, 0],
   );
 
-  let xScale = $derived(
-    scaleLinear().domain([domainXMin, domainXMax]).range(useRange),
-  );
+  let xValueFirst = $derived(polarity === "standard" ? minX : maxX);
+  let xValueLast = $derived(polarity === "standard" ? maxX : minX);
+
+  let xScale = $derived(scaleLinear().domain([minX, maxX]).range(useRange));
 
   const segmentScale = $derived(
-    scaleLinear().domain([0, nBins]).range([domainXMin, domainXMax]),
+    scaleLinear().domain([0, nBins]).range([minX, maxX]),
   );
 
   const binThresholds = $derived(d3range(1, nBins).map(segmentScale));
 
-  const binner = $derived(
-    bin().domain([domainXMin, domainXMax]).thresholds(binThresholds),
-  );
+  const binner = $derived(bin().domain([minX, maxX]).thresholds(binThresholds));
+
   const clampedDistribution = $derived(
-    distribution.map((d) => Math.min(Math.max(d, domainXMin), domainXMax)),
+    distribution.map((d) => Math.min(Math.max(d, minX), maxX)),
   );
 
   const binnedDistribution = $derived(
@@ -126,7 +111,7 @@
         .colors(2);
 
       const averageNormalised =
-        (averageValue - xTickFirst) / (xTickLast - xTickFirst);
+        (averageValue - xValueFirst) / (xValueLast - xValueFirst);
 
       const binColors = chroma
         .scale([extremeColors[0], midColor, extremeColors[1]])
@@ -150,8 +135,8 @@
       if (
         !midColor ||
         averageValue == null ||
-        xTickFirst == null ||
-        xTickLast == null
+        xValueFirst == null ||
+        xValueLast == null
       ) {
         return [];
       }
@@ -160,8 +145,6 @@
     return interpolateColors(startColor, endColor, nBins, midColor, skew);
   });
 
-  $inspect({ colorScale });
-
   const layout = $derived.by(() => {
     let y = 0;
 
@@ -194,6 +177,7 @@
         {#if topLabel && layout.topLabelY !== null}
           <text x={0} y={layout.topLabelY + 14} fill="#666" font-size="0.75em">
             Number of areas
+            {minX}, {maxX}
           </text>
         {/if}
 
@@ -217,21 +201,28 @@
 
         <g transform="translate(0, {layout.chartY})">
           {#if showYAxis}
-            <Axis
-              bind:ticksArray={yTicks}
-              chartHeight={height}
-              chartWidth={containerWidth - padding}
-              orientation={{ axis: "y", position: "left" }}
-              min={minY}
-              max={maxY}
-              domain={[yTickLast, 0]}
-              range={[0, height]}
-              fontSize={0}
-              numberOfTicks={3}
-              {showGridlines}
+            <!-- <Axis
+              bind:axisDomain
+              bind:ticksArray={ticksDomain}
+              {chartHeight}
+              chartWidth={chartWidth - markerRadius * 2}
+              orientation={{ axis: "x", position: "bottom" }}
+              range={[markerRadius, chartWidth - markerRadius]}
+              domain={[xValueFirst, xValueLast]}
+              {min}
+              {max}
+              fontSize={14}
+              {floor}
+              {ceiling}
+              {numberOfTicks}
+              {polarity}
               {showTickMarks}
-              strokeWidth={tickStrokeWidth}
-            />
+              {showGridlines}
+              {labelFormatter}
+              {niceTicks}
+              {markerRadius}
+              {distribution}
+            ></Axis> -->
           {/if}
 
           {#each bins as bin, i}
@@ -247,18 +238,26 @@
                 height={yScale(bin.length)}
                 fill={fill ?? colorScale[i]}
               ></rect>
+              <!-- <text
+                x={(polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)) +
+                  offset}
+                y={height - yScale(bin.length)}
+                font-size={5}
+                >{bin.length} areas between
+                {Math.round(bin.x0)} and {Math.round(bin.x1)}
+              </text> -->
             {/key}
           {/each}
         </g>
 
         {#if showXAxis && layout.xAxisY !== null}
           <g transform="translate(0, {layout.xAxisY})">
-            <Axis
+            <!-- <Axis
               bind:ticksArray={xTicks}
               chartHeight={height}
               chartWidth={containerWidth - padding}
               orientation={{ axis: "x", position: "bottom" }}
-              domain={[xTickFirst, xTickLast]}
+              domain={[xValueFirst, xValueLast]}
               min={minX}
               max={maxX}
               range={useRange}
@@ -267,7 +266,7 @@
               {ceiling}
               {labelFormatter}
               {numberOfTicks}
-            />
+            /> -->
           </g>
         {/if}
       </g>
@@ -277,20 +276,27 @@
 
 <div style="content-visibility: hidden;">
   {#if !showXAxis}
-    <Axis
-      bind:ticksArray={xTicks}
-      chartHeight={height}
-      chartWidth={containerWidth - padding}
+    <!-- <Axis
+      bind:axisDomain
+      bind:ticksArray={ticksDomain}
+      {chartHeight}
+      chartWidth={chartWidth - markerRadius * 2}
       orientation={{ axis: "x", position: "bottom" }}
-      domain={[xTickFirst, xTickLast]}
-      min={minX}
-      max={maxX}
-      range={useRange}
-      fontSize={13}
+      range={[markerRadius, chartWidth - markerRadius]}
+      domain={[xValueFirst, xValueLast]}
+      {min}
+      {max}
+      fontSize={14}
       {floor}
       {ceiling}
-      {labelFormatter}
       {numberOfTicks}
-    ></Axis>
+      {polarity}
+      {showTickMarks}
+      {showGridlines}
+      {labelFormatter}
+      {niceTicks}
+      {markerRadius}
+      {distribution}
+    ></Axis> -->
   {/if}
 </div>

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

@@ -20,35 +20,21 @@
 
   let {
     chartHeight = 100,
-    chartWidth = $bindable<number>(200),
-
+    chartWidth = 200,
     numberOfTicks = undefined as number | undefined,
-
-    // Bindable, but avoid binding undefined – initialize as [] for safety
+    axisDomain = $bindable<number[]>([]),
     ticksArray = $bindable<number[]>([]),
-
-    // Values to derive ticks/domain from if ticksArray not provided
     min = undefined as number | undefined,
     max = undefined as number | undefined,
-
     orientation = { axis: "x", position: "bottom" } as Orientation,
-
     floor = undefined as number | undefined,
     ceiling = undefined as number | undefined,
-
     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,
@@ -57,14 +43,16 @@
     showTickMarks = false,
     strokeWidth = 2,
     niceTicks = true,
+    markerRadius = 0 as number,
+    distribution = [],
   }: {
     chartHeight?: number;
     chartWidth?: number;
     numberOfTicks?: number;
+    axisDomain?: number[];
     ticksArray?: number[];
     min?: number;
     max?: number;
-
     orientation?: Orientation;
     floor?: number;
     ceiling?: number;
@@ -73,56 +61,104 @@
     paddingLeft?: number;
     paddingRight?: number;
     labelFormatter?: LabelFormatter;
-
-    // New
     scale?: ScaleContinuousNumeric<number, number>;
     domain?: [number, number];
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
-    gridlines?: Boolean;
-    strokeWidth?: Number;
-    showGridlines?: Boolean;
-    showTickMarks?: Boolean;
-    niceTicks?: Boolean;
+    gridlines?: boolean;
+    strokeWidth?: number;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    niceTicks?: boolean;
+    markerRadius?: number;
+    distribution?: number[];
   } = $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 : [min, max]) ?? [];
-    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];
+  let minTick = $derived(ticksArray.length ? Math.min(...ticksArray) : 0);
+  let maxTick = $derived(ticksArray.length ? Math.max(...ticksArray) : 1);
+  let minValue = $derived(distribution.length ? Math.min(...distribution) : 0);
+  let maxValue = $derived(distribution.length ? Math.max(...distribution) : 1);
+
+  let leftPad = $derived(
+    niceTicks
+      ? polarity === "standard"
+        ? minValue < minTick
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? maxValue > maxTick
+            ? 0.1
+            : 0
+          : 0
+      : polarity === "standard"
+        ? minValue < min
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? maxValue > max
+            ? 0.1
+            : 0
+          : 0,
+  );
+
+  let rightPad = $derived(
+    niceTicks
+      ? polarity === "standard"
+        ? maxValue > maxTick
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? minValue < minTick
+            ? 0.1
+            : 0
+          : 0
+      : polarity === "standard"
+        ? maxValue > max
+          ? 0.1
+          : 0
+        : polarity === "reverse"
+          ? minValue < min
+            ? 0.1
+            : 0
+          : 0,
+  );
+
+  let widthForTicks = $derived(
+    chartWidth - chartWidth * leftPad - chartWidth * rightPad,
+  );
+  let heightForTicks = $derived(Math.max(0, chartHeight));
+
+  function calculateFullAxisDomain(
+    minTick,
+    maxTick,
+    leftPad,
+    rightPad,
+    polarity,
+  ) {
+    const ticksDomainRange = maxTick - minTick;
+    const axisDomainRange = ticksDomainRange / (1 - leftPad - rightPad);
+
+    if (polarity === "standard") {
+      return [
+        minTick - axisDomainRange * leftPad,
+        maxTick + axisDomainRange * rightPad,
+      ];
     } else {
-      return [innerHeight, 0];
+      return [
+        maxTick + axisDomainRange * leftPad,
+        minTick - axisDomainRange * rightPad,
+      ];
     }
   }
-  //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);
 
-    const useRange = range ?? computeDefaultRange(innerWidth, innerHeight);
-    base.range(useRange);
+  let fullAxisDomain = $derived(
+    calculateFullAxisDomain(minTick, maxTick, leftPad, rightPad, polarity),
+  );
 
-    return base;
+  $effect(() => {
+    axisDomain = fullAxisDomain;
   });
-  const axisFunction: AxisProjector = $derived((v: number) => resolvedScale(v));
 </script>
 
 <g
@@ -132,34 +168,67 @@
     : chartWidth},{orientation.position === 'bottom' ? chartHeight : 0})"
 >
   <line
-    x1={range[0]}
+    x1={markerRadius ?? 0}
     y1="0"
-    x2={orientation.axis === "x" ? range[1] : 0}
+    x2={orientation.axis === "x"
+      ? markerRadius
+        ? chartWidth + markerRadius
+        : chartWidth
+      : 0}
     y2={orientation.axis === "y" ? chartHeight : 0}
     stroke="grey"
     stroke-width="2px"
   ></line>
-  {#if ticksArray || (min && max)}
-    {#key numberOfTicks}
-      <Ticks
-        bind:ticksArray
-        {chartWidth}
-        {chartHeight}
-        {axisFunction}
-        {min}
-        {max}
-        {numberOfTicks}
-        {orientation}
-        {floor}
-        {ceiling}
-        {labelFormatter}
-        {fontSize}
-        {polarity}
-        {showGridlines}
-        {showTickMarks}
-        {strokeWidth}
-        {niceTicks}
-      />
-    {/key}
-  {/if}
+  <g
+    data-role="{orientation.axis}-axis"
+    transform="translate({orientation.position !== 'right'
+      ? chartWidth * leftPad + markerRadius
+      : chartWidth},{orientation.position === 'bottom' ? 0 : 0})"
+  >
+    {#if ticksArray || (min && max)}
+      {#key numberOfTicks}
+        {#if niceTicks}
+          <Ticks
+            bind:ticksArray
+            tickWidth={widthForTicks}
+            chartHeight={heightForTicks}
+            {min}
+            {max}
+            {numberOfTicks}
+            {orientation}
+            {floor}
+            {ceiling}
+            {labelFormatter}
+            {fontSize}
+            {polarity}
+            {showGridlines}
+            {showTickMarks}
+            {strokeWidth}
+            {niceTicks}
+          />
+        {:else}
+          <Ticks
+            bind:ticksArray
+            tickWidth={widthForTicks}
+            chartHeight={heightForTicks}
+            {min}
+            {max}
+            {numberOfTicks}
+            {orientation}
+            {floor}
+            {ceiling}
+            {labelFormatter}
+            {fontSize}
+            {polarity}
+            {showGridlines}
+            {showTickMarks}
+            {strokeWidth}
+            {niceTicks}
+            {leftPad}
+            {rightPad}
+          />
+        {/if}
+      {/key}
+    {/if}
+  </g>
 </g>

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

@@ -11,6 +11,7 @@ type $$ComponentProps = {
     chartHeight?: number;
     chartWidth?: number;
     numberOfTicks?: number;
+    axisDomain?: number[];
     ticksArray?: number[];
     min?: number;
     max?: number;
@@ -27,12 +28,14 @@ type $$ComponentProps = {
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
-    gridlines?: Boolean;
-    strokeWidth?: Number;
-    showGridlines?: Boolean;
-    showTickMarks?: Boolean;
-    niceTicks?: Boolean;
+    gridlines?: boolean;
+    strokeWidth?: number;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    niceTicks?: boolean;
+    markerRadius?: number;
+    distribution?: number[];
 };
-declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
+declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "axisDomain">;
 type Axis = ReturnType<typeof Axis>;
 export default Axis;