@communitiesuk/svelte-component-library 0.1.19-beta.15 → 0.1.19-beta.16

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

@@ -40,6 +40,8 @@
     paddingBottom = 100,
     paddingLeft = 0,
     paddingRight = 0,
+    tickStrokeWidth = 2,
+    axisStrokeWidth = 2,
 
     labelFormatter = undefined as LabelFormatter | undefined,
 
@@ -53,6 +55,7 @@
     range = undefined as [number, number] | undefined,
     fontSize = 19,
     polarity = "standard" as Polarity,
+    gridlines = false,
   }: {
     chartHeight?: number;
     chartWidth?: number;
@@ -74,6 +77,7 @@
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
+    gridlines?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -136,7 +140,7 @@
     x2={orientation.axis === "x" ? chartWidth : 0}
     y2={orientation.axis === "y" ? chartHeight : 0}
     stroke="darkgrey"
-    stroke-width="2px"
+    stroke-width={axisStrokeWidth}
   ></line>
   {#if values}
     {#key numberOfTicks}
@@ -153,6 +157,8 @@
         {labelFormatter}
         {fontSize}
         {polarity}
+        {tickStrokeWidth}
+        {gridlines}
       />
     {/key}
   {/if}

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

@@ -26,6 +26,7 @@ type $$ComponentProps = {
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
+    gridlines?: Boolean;
 };
 declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
 type Axis = ReturnType<typeof Axis>;

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

@@ -19,6 +19,7 @@
     axisFunction,
     values,
     numberOfTicks,
+    tickStrokeWidth,
     floor,
     ceiling,
     orientation,
@@ -26,6 +27,7 @@
     fontSize = 19,
     clamp = false,
     polarity = "standard",
+    gridlines = false,
   }: {
     ticksArray?: number[];
     chartWidth: number;
@@ -33,6 +35,8 @@
     axisFunction: any;
     values: number[];
     numberOfTicks?: number;
+    tickStrokeWidth?: number;
+
     floor?: number | null;
     ceiling?: number | null;
     orientation: Orientation;
@@ -45,6 +49,7 @@
     fontSize?: number;
     clamp: boolean;
     polarity: Polarity;
+    gridlines: boolean;
   } = $props();
 
   // Axis value helper
@@ -92,10 +97,26 @@
     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 chosenIdx = normalizedSteps.findIndex(
+      (step) => step >= normalizedStep.toNumber(),
+    );
+
+    let optimalStep: Decimal;
+    let scaleMin: Decimal;
+    let scaleMax: Decimal;
+
+    for (let i = chosenIdx; i >= 0; i--) {
+      optimalStep = new Decimal(normalizedSteps[i]).div(stepPower);
+      scaleMin = minVal.div(optimalStep).floor().mul(optimalStep);
+      scaleMax = maxVal.div(optimalStep).ceil().mul(optimalStep);
+
+      const axisRange = scaleMax.minus(scaleMin);
+      const dataRange = maxVal.minus(minVal);
+      const paddingRatio = axisRange.minus(dataRange).div(axisRange).toNumber();
+
+      if (paddingRatio <= 0.3) break;
+    }
 
     const ticks: number[] = [];
     for (let i = scaleMin; i.lte(scaleMax); i = i.plus(optimalStep)) {
@@ -155,13 +176,13 @@
       <path
         d={orientation.axis === "y"
           ? orientation.position === "left"
-            ? "M0 0 l-8 0"
+            ? `M0 0 l${gridlines ? chartWidth : -8} 0`
             : "M0 0 l8 0"
           : orientation.position === "top"
             ? "M0 0 l0 -8"
             : "M0 0 l0 8"}
         stroke="darkgrey"
-        stroke-width="2px"
+        stroke-width={tickStrokeWidth}
       ></path>
       <text
         transform="translate(

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

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     axisFunction: any;
     values: number[];
     numberOfTicks?: number;
+    tickStrokeWidth?: number;
     floor?: number | null;
     ceiling?: number | null;
     orientation: Orientation;
@@ -19,6 +20,7 @@ type $$ComponentProps = {
     fontSize?: number;
     clamp: boolean;
     polarity: Polarity;
+    gridlines: boolean;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

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

@@ -6,7 +6,8 @@
     color = "grey",
     highlightColor = "black",
     highlightValue = undefined,
-    showAxis = true,
+    showXAxis = true,
+    showYAxis = true,
     showArrows = true,
     midColor = "#DDDDDD",
     startColor = "#B70000",
@@ -175,17 +176,23 @@
 </script>
 
 {#key containerWidth}
-  <div
-    class="scale-container"
-    bind:clientWidth={containerWidth}
-    style="height={height * 2}"
-  >
+  <div class="scale-container" bind:clientWidth={containerWidth}>
     <svg
-      class="chart-container"
       width={containerWidth - padding}
-      {height}
+      height={height + (annotationText ? 25 : 0) + (showXAxis ? 25 : 0)}
       transform="translate({padding / 2},0)"
     >
+      <g transform="translate({xScale(highlightValue)},0)">
+        <text
+          fill="#555555"
+          font-size="0.8em"
+          text-anchor="middle"
+          dominant-baseline="hanging"
+        >
+          <tspan x="0" dy="0">{annotationText}</tspan>
+          <tspan x="0" dy="12">▼</tspan>
+        </text>
+      </g>
       <defs>
         <marker
           id="arrow-down"
@@ -201,34 +208,42 @@
           <path d="M 0 0 L 6 3 L 0 6 z"></path>
         </marker>
       </defs>
-      <g style="display: {showAxis ? 'block' : 'none'}">
-        <Axis
-          bind:ticksArray={xTicks}
-          chartHeight={height}
-          chartWidth={containerWidth - padding}
-          orientation={{ axis: "x", position: "bottom" }}
-          domain={[xTickMin, xTickMax]}
-          range={useRange}
-          values={dist}
-          fontSize={14}
-          {floor}
-          {ceiling}
-          {labelFormatter}
-        ></Axis>
-        <Axis
-          bind:ticksArray={yTicks}
-          chartHeight={height}
-          chartWidth={containerWidth - padding}
-          orientation={{ axis: "y", position: "left" }}
-          domain={[0, yTickMax]}
-          range={[height, 0]}
-          values={dist}
-          fontSize={0}
-          {floor}
-          {ceiling}
-        ></Axis>
-      </g>
-      <g transform="translate(0,0)">
+
+      <g transform="translate(0,{annotationText ? 25 : 0})">
+        <g>
+          {#if showXAxis}
+            <Axis
+              bind:ticksArray={xTicks}
+              chartHeight={height}
+              chartWidth={containerWidth - padding}
+              orientation={{ axis: "x", position: "bottom" }}
+              domain={[xTickMin, xTickMax]}
+              range={useRange}
+              values={dist}
+              fontSize={14}
+              {floor}
+              {ceiling}
+              {labelFormatter}
+              numberOfTicks={2}
+            ></Axis>
+          {/if}
+          {#if showYAxis}
+            <Axis
+              bind:ticksArray={yTicks}
+              chartHeight={height}
+              chartWidth={containerWidth - padding}
+              orientation={{ axis: "y", position: "left" }}
+              domain={[0, yTickMax]}
+              range={[height, 0]}
+              values={[...dist, 0]}
+              fontSize={0}
+              numberOfTicks={5}
+              tickStrokeWidth={0.25}
+              axisStrokeWidth={0}
+              gridlines={true}
+            ></Axis>
+          {/if}
+        </g>
         {#each bins as bin, i}
           {#key bin.x0}
             <rect
@@ -264,19 +279,8 @@
                 height={yScale(bins[highlightIndex].count)}
                 fill={interpolatedColors[highlightIndex]}
                 stroke={highlightColor}
-                stroke-width={1}
+                stroke-width={0}
               ></rect>
-
-              <g
-                transform="translate({xScale(highlightValue)},{height -
-                  yScale(bins[highlightIndex].count) -
-                  15})"
-              >
-                <text fill="#555555" font-size="0.8em" text-anchor="middle">
-                  <tspan x="0" dy="0">{annotationText}</tspan>
-                  <tspan x="0" dy="12">▼</tspan>
-                </text>
-              </g>
             {/key}
           {/if}
         </g>
@@ -295,6 +299,34 @@
   </div>
 {/key}
 
+<g style="display: 'none'">
+  <Axis
+    bind:ticksArray={xTicks}
+    chartHeight={height}
+    chartWidth={containerWidth - padding}
+    orientation={{ axis: "x", position: "bottom" }}
+    domain={[xTickMin, xTickMax]}
+    range={useRange}
+    values={dist}
+    fontSize={14}
+    {floor}
+    {ceiling}
+    {labelFormatter}
+  ></Axis>
+  <Axis
+    bind:ticksArray={yTicks}
+    chartHeight={height}
+    chartWidth={containerWidth - padding}
+    orientation={{ axis: "y", position: "left" }}
+    domain={[0, yTickMax]}
+    range={[height, 0]}
+    values={dist}
+    fontSize={0}
+    {floor}
+    {ceiling}
+  ></Axis>
+</g>
+
 <style>
   .scale-container svg {
     overflow: visible;

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

@@ -10,7 +10,8 @@ declare const Histogram: import("svelte").Component<{
     color?: string;
     highlightColor?: string;
     highlightValue?: any;
-    showAxis?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
     showArrows?: boolean;
     midColor?: string;
     startColor?: string;
@@ -31,7 +32,8 @@ type $$ComponentProps = {
     color?: string;
     highlightColor?: string;
     highlightValue?: any;
-    showAxis?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
     showArrows?: boolean;
     midColor?: string;
     startColor?: string;

package/package.json

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