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

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(
@@ -174,7 +195,7 @@
           ? 5
           : orientation.position === 'top'
             ? -10
-            : 23}
+            : fontSize * 1.5}
         )"
         font-size={fontSize}
         text-anchor={orientation.axis === "x"

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={13}
+              {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/dist/components/data-vis/position-chart/PositionChart.svelte

@@ -543,16 +543,24 @@
                   ></path></g
                 > -->
                 <g
-                  fill="red"
-                  transform="translate({xScale()(average)},{chartHeight * 2.7})"
-                  ><text fill="#333333" font-size={14} text-anchor="middle">
-                    <tspan x="0" dy="-5">▲</tspan>
-                    <tspan x="0" dy="10">Average</tspan>
+                  transform="translate({xScale()(average) + 2},{chartHeight *
+                    1.7})"
+                  ><text
+                    fill="#333333"
+                    font-size={15}
+                    text-anchor="middle"
+                    font-weight="bold"
+                  >
+                    <tspan x="0" dy="15">▲</tspan>
+                    <tspan x="0" dy="1">|</tspan>
+                    <tspan font-family="GDS Transport" x="0" dy="13"
+                      >Average</tspan
+                    >
                   </text></g
                 >
               {/if}
               {#if showAxis}
-                <g stroke="white" stroke-width="3" paint-order="stroke">
+                <g>
                   <Axis
                     bind:ticksArray={xTicks}
                     {chartHeight}
@@ -561,7 +569,7 @@
                     range={[0, chartWidth]}
                     domain={[xTickMin, xTickMax]}
                     values={dist}
-                    fontSize={14}
+                    fontSize={13}
                     {numberOfTicks}
                     {floor}
                     {ceiling}
@@ -657,7 +665,7 @@
                           pointer-events={rowValue.pointerEvents}
                         ></rect>
                         <rect
-                          x={-rowValue.markerRadius}
+                          x={0}
                           y={-rowValue.markerRadius}
                           width={rowValue.markerRadius * 2}
                           height={rowValue.markerRadius * 2}
@@ -676,13 +684,12 @@
                           pointer-events={rowValue.pointerEvents}
                         ></rect>
                       {:else if rowValue.shape === "line"}
-                        <rect
-                          x={-rowValue.markerRadius}
-                          y={-rowValue.markerRadius}
-                          width={rowValue.markerRadius / 10}
-                          height={rowValue.markerRadius * 2}
-                          rx="0"
-                          fill={rowValue.color === "inherit"
+                        <line
+                          x1={0}
+                          x2={0}
+                          y1={chartHeight / 2.4}
+                          y2={-chartHeight / 2.4}
+                          stroke={rowValue.color === "inherit"
                             ? segmentColor(
                                 rowValue.value,
                                 newMin,
@@ -690,11 +697,10 @@
                                 activeColors,
                               )
                             : rowValue.color}
-                          stroke="black"
-                          stroke-width="3"
+                          stroke-width={rowValue.markerRadius}
                           opacity={rowValue.opacity}
                           pointer-events={rowValue.pointerEvents}
-                        ></rect>
+                        ></line>
                       {:else}
                         <circle
                           r={rowValue.markerRadius * 1.1}
@@ -781,7 +787,7 @@
         {/if}
       {/each}
       {#if showArrows}
-        <div class="data-row" aria-hidden="true">
+        <div class="data-row arrow" aria-hidden="true">
           {#if showLabel}
             <div
               class="label-container"
@@ -1141,6 +1147,10 @@
     padding: 0px 10px 0px 10px;
   }
 
+  .data-row.arrow {
+    padding: 0px;
+  }
+
   .icon-container {
     flex: 0 0 20px;
   }

package/package.json

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