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

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

@@ -38,6 +38,8 @@
     tickStrokeWidth = 0.25,
     barStrokeWidth = 0,
     barStrokeColor = "white",
+    topLabel = true,
+    includeOutliers = true,
   } = $props();
 
   let xTicks = $state([]);
@@ -74,11 +76,18 @@
   const binner = $derived(
     bin().domain([domainXMin, domainXMax]).thresholds(binThresholds),
   );
+  const clampedDistribution = $derived(
+    distribution.map((d) => Math.min(Math.max(d, domainXMin), domainXMax)),
+  );
+
+  const binnedDistribution = $derived(
+    binner(includeOutliers ? clampedDistribution : distribution),
+  );
 
   const bins = $derived(
     polarity === "reverse"
-      ? binner(distribution).toReversed()
-      : binner(distribution),
+      ? binnedDistribution.toReversed()
+      : binnedDistribution,
   );
 
   const proportionsInBins = $derived(
@@ -138,24 +147,48 @@
   );
 
   $inspect({ colorScale });
+
+  const layout = $derived.by(() => {
+    let y = 0;
+
+    const topLabelY = topLabel ? y : null;
+    if (topLabel) y += 20;
+
+    const annotationY = annotationText ? y : null;
+    if (annotationText) y += 25;
+
+    const chartY = y;
+    y += height;
+
+    const xAxisY = showXAxis ? y : null;
+    if (showXAxis) y += 25;
+
+    return {
+      topLabelY,
+      annotationY,
+      chartY,
+      xAxisY,
+      totalHeight: y,
+    };
+  });
 </script>
 
 {#key containerWidth}
   <div class="scale-container" bind:clientWidth={containerWidth}>
-    <svg
-      width={containerWidth}
-      height={height + 20 + (annotationText ? 25 : 0) + (showXAxis ? 25 : 0)}
-      style="overflow: visible;"
-    >
-      <g transform="translate({padding / 2},0)">
-        <g transform="translate(0,{annotationText ? 25 : 20})">
-          <text dx={-2} dy={-4} fill="#666" font-size="0.75em"
-            >Number of areas</text
-          ></g
-        >
-
-        {#if annotationText}
-          <g transform="translate({xScale(annotationValue)},0)">
+    <svg width={containerWidth} height={layout.totalHeight}>
+      <g transform="translate({padding / 2}, 0)">
+        {#if topLabel && layout.topLabelY !== null}
+          <text x={0} y={layout.topLabelY + 14} fill="#666" font-size="0.75em">
+            Number of areas
+          </text>
+        {/if}
+
+        {#if annotationText && layout.annotationY !== null}
+          <g
+            transform="translate({xScale(
+              annotationValue,
+            )}, {layout.annotationY})"
+          >
             <text
               fill="#555555"
               font-size="0.8em"
@@ -168,57 +201,61 @@
           </g>
         {/if}
 
-        <g transform="translate(0,{annotationText ? 25 : 20})">
-          <g>
-            {#if showXAxis}
-              <Axis
-                bind:ticksArray={xTicks}
-                chartHeight={height}
-                chartWidth={containerWidth - padding}
-                orientation={{ axis: "x", position: "bottom" }}
-                domain={[xTickFirst, xTickLast]}
-                min={minX}
-                max={maxX}
-                range={useRange}
-                fontSize={13}
-                {floor}
-                {ceiling}
-                {labelFormatter}
-                {numberOfTicks}
-              ></Axis>
-            {/if}
-            {#if showYAxis}
-              <Axis
-                bind:ticksArray={yTicks}
-                chartHeight={height}
-                chartWidth={containerWidth - padding}
-                orientation={{ axis: "y", position: "left" }}
-                min={minY}
-                max={maxY}
-                domain={[0, yTickLast]}
-                range={[0, height]}
-                fontSize={0}
-                numberOfTicks={4}
-                {showGridlines}
-                {showTickMarks}
-                strokeWidth={tickStrokeWidth}
-              ></Axis>
-            {/if}
-          </g>
+        <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}
+              {showTickMarks}
+              strokeWidth={tickStrokeWidth}
+            />
+          {/if}
+
           {#each bins as bin, i}
             {#key bin.x0}
+              {@const fullWidth = Math.abs(xScale(bin.x1) - xScale(bin.x0))}
+              {@const barWidth = fullWidth * 0.97}
+              {@const offset = (fullWidth - barWidth) / 2}
               <rect
-                x={polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)}
+                x={(polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)) +
+                  offset}
                 y={height - yScale(bin.length)}
-                width={Math.abs(xScale(bin.x1) - xScale(bin.x0))}
+                width={barWidth}
                 height={yScale(bin.length)}
                 fill={fill ?? colorScale[i]}
-                stroke-width={barStrokeWidth}
-                stroke={barStrokeColor}
               ></rect>
             {/key}
           {/each}
         </g>
+
+        {#if showXAxis && layout.xAxisY !== null}
+          <g transform="translate(0, {layout.xAxisY})">
+            <Axis
+              bind:ticksArray={xTicks}
+              chartHeight={height}
+              chartWidth={containerWidth - padding}
+              orientation={{ axis: "x", position: "bottom" }}
+              domain={[xTickFirst, xTickLast]}
+              min={minX}
+              max={maxX}
+              range={useRange}
+              fontSize={13}
+              {floor}
+              {ceiling}
+              {labelFormatter}
+              {numberOfTicks}
+            />
+          </g>
+        {/if}
       </g>
     </svg>
   </div>

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

@@ -35,6 +35,8 @@ declare const Histogram: import("svelte").Component<{
     tickStrokeWidth?: number;
     barStrokeWidth?: number;
     barStrokeColor?: string;
+    topLabel?: boolean;
+    includeOutliers?: boolean;
 }, {}, "containerWidth">;
 type $$ComponentProps = {
     averageValue?: any;
@@ -68,4 +70,6 @@ type $$ComponentProps = {
     tickStrokeWidth?: number;
     barStrokeWidth?: number;
     barStrokeColor?: string;
+    topLabel?: boolean;
+    includeOutliers?: boolean;
 };

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

@@ -10,7 +10,12 @@
   type AxisPosition = "bottom" | "top" | "left" | "right";
   type Orientation = { axis: AxisName; position: AxisPosition };
   type AxisProjector = (value: number) => number;
-  type LabelFormatter = (tick: number, index: number) => string | number;
+  type LabelFormatter = (
+    tick: number,
+    index: number,
+    ticksArrayLength: number,
+  ) => string | number;
+
   type Polarity = "standard" | "reverse";
 
   let {

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

@@ -5,7 +5,7 @@ type Orientation = {
     axis: AxisName;
     position: AxisPosition;
 };
-type LabelFormatter = (tick: number, index: number) => string | number;
+type LabelFormatter = (tick: number, index: number, ticksArrayLength: number) => string | number;
 type Polarity = "standard" | "reverse";
 type $$ComponentProps = {
     chartHeight?: number;

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

@@ -11,6 +11,12 @@
   }
   type Polarity = "standard" | "reverse";
 
+  type LabelFormatter = (
+    tick: number,
+    index: number,
+    ticksArrayLength: number,
+  ) => string | number;
+
   // Props with defaults (Svelte 5 runes)
   let {
     ticksArray = $bindable<number[]>(),
@@ -23,13 +29,13 @@
     floor,
     ceiling,
     orientation,
-    labelFormatter,
     fontSize = 19,
     polarity = "standard",
     showGridlines = false,
     showTickMarks = false,
 
     strokeWidth = 2,
+    labelFormatter = undefined as LabelFormatter | undefined,
   }: {
     ticksArray?: number[]; // bindable
     chartWidth: number;
@@ -41,13 +47,13 @@
     floor?: number;
     ceiling?: number;
     orientation: Orientation;
-    labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
     polarity?: Polarity;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
 
     strokeWidth?: number;
+    labelFormatter?: LabelFormatter;
   } = $props();
   function axisValue(fn: any, tick: number): number {
     // Try single-call first: axisFunction(tick)
@@ -201,7 +207,9 @@
             : "start"}
         fill="grey"
       >
-        {labelFormatter ? labelFormatter(tick, index) : defaultLabel(tick)}
+        {labelFormatter
+          ? labelFormatter(tick, index, ticksArray.length)
+          : defaultLabel(tick)}
       </text>
     </g>
   {/each}

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

@@ -5,6 +5,7 @@ interface Orientation {
     position: Position;
 }
 type Polarity = "standard" | "reverse";
+type LabelFormatter = (tick: number, index: number, ticksArrayLength: number) => string | number;
 type $$ComponentProps = {
     ticksArray?: number[];
     chartWidth: number;
@@ -16,12 +17,12 @@ type $$ComponentProps = {
     floor?: number;
     ceiling?: number;
     orientation: Orientation;
-    labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
     polarity?: Polarity;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
     strokeWidth?: number;
+    labelFormatter?: LabelFormatter;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

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

@@ -93,6 +93,9 @@
     skew = false,
     showTickMarks = true,
     showGridlines = false,
+    labelFormatter = (tick, index, ticksArrayLength) => {
+      return tick;
+    },
   } = $props();
 
   let xTicks = $state([]);
@@ -272,6 +275,17 @@
       ),
     );
   }
+
+  let totalHeight = $derived(
+    chartHeight +
+      (showAxis ? 25 : 0) +
+      (showAverage ? 35 : 0) +
+      (showArrows ? 25 : 0),
+  );
+
+  let svgHeight = $derived(
+    chartHeight + (showAxis ? 25 : 0) + (showAverage ? 35 : 0),
+  );
 </script>
 
 {#if annotations.length}
@@ -331,9 +345,10 @@
   class="grid-container"
   bind:this={container}
   style="
-  position: relative;
+    position: relative;
     grid-template-columns: {gridTemplateColumns};
     grid-template-rows: {gridTemplateRows};
+    height: {totalHeight}px;
   "
 >
   {#each allDataNormalized as positionChart, i}
@@ -357,18 +372,8 @@
         ></Button>
       </div>
     {/if}
-    <div
-      class="chart"
-      style="height:{chartHeight +
-        (showAxis ? 30 : 30) +
-        (showArrows ? 30 : 0) +
-        (showAverage ? 40 : 0)}px"
-      bind:clientWidth={chartWidth}
-    >
-      <svg
-        width={chartWidth}
-        height={chartHeight + (showAxis ? 40 : 0) + (showAverage ? 40 : 0)}
-      >
+    <div class="chart" bind:clientWidth={chartWidth}>
+      <svg width={chartWidth} height={svgHeight} overflow="visible">
         {#each range as number}
           <g
             transform="translate({markerRadius +
@@ -472,6 +477,7 @@
             {polarity}
             {showTickMarks}
             {showGridlines}
+            {labelFormatter}
           ></Axis>
         {/if}
         {#if showAverage}
@@ -479,7 +485,8 @@
             transform="translate({xFunction(
               xTickFirst,
               xTickLast,
-            )(averageValue) + markerRadius}, {chartHeight * 1.7})"
+            )(averageValue) + markerRadius}, {chartHeight +
+              (showAxis ? 20 : 0)})"
           >
             <text
               fill="#444"
@@ -550,6 +557,29 @@
   {/if}
 </div>
 
+<div style="content-visibility: hidden;">
+  {#if !showAxis}
+    <Axis
+      bind:ticksArray={xTicks}
+      {chartHeight}
+      chartWidth={chartWidth - markerRadius * 2}
+      orientation={{ axis: "x", position: "bottom" }}
+      range={[markerRadius, chartWidth - markerRadius]}
+      domain={[xTickFirst, xTickLast]}
+      {min}
+      {max}
+      fontSize={14}
+      {floor}
+      {ceiling}
+      {numberOfTicks}
+      {polarity}
+      {showTickMarks}
+      {showGridlines}
+      {labelFormatter}
+    ></Axis>
+  {/if}
+</div>
+
 <style>
   .grid-container {
     display: grid;

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

@@ -53,6 +53,7 @@ declare const PositionChart: import("svelte").Component<{
     skew?: boolean;
     showTickMarks?: boolean;
     showGridlines?: boolean;
+    labelFormatter?: Function;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -104,4 +105,5 @@ type $$ComponentProps = {
     skew?: boolean;
     showTickMarks?: boolean;
     showGridlines?: boolean;
+    labelFormatter?: Function;
 };

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

@@ -53,6 +53,7 @@
   .axis {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 0;
   }
 
   .left-label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.20",
+  "version": "0.1.19-beta.21",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"