@communitiesuk/svelte-component-library 0.1.19-beta.14 → 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",
@@ -46,6 +47,11 @@
   let yTickMin = $derived(yTicks.length ? Math.min(...yTicks) : 0);
   let yTickMax = $derived(yTicks.length ? Math.max(...yTicks) : 1);
 
+  import { median, quantile } from "d3-array";
+
+  let distSorted = $derived(dist.slice().sort((a, b) => a - b));
+  let rawMedian = $derived(median(distSorted));
+
   //  min and max at extremes
   //  let histogram = bin().domain([domainMin, domainMax]).thresholds(thresholds);
 
@@ -70,7 +76,11 @@
   // won't get xTick and xTickMax if showAxis is false
   // run it anyway inside an else block
   let bins = $derived(createEqualWidthBins(xTickMin, xTickMax, 10, dist));
-  $inspect({ xTickMin, xTickMax, bins });
+
+  let proportionInExtremeBins = $derived([
+    bins[0]["count"] / distSorted.length,
+    bins.at(-1)["count"] / distSorted.length,
+  ]);
 
   let nBins = $derived(bins.length);
 
@@ -101,17 +111,59 @@
     bins.length ? xScale(bins[0].x1) - xScale(bins[0].x0) : 0,
   );
 
+  import chroma from "chroma-js";
+
+  let midPosition = $derived((rawMedian - xTickMin) / (xTickMax - xTickMin));
+
+  let c1000 = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain([0, midPosition, 1])
+      .colors(1000),
+  );
+
   let colors1000 = $derived(
     polarity === "reverse"
-      ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
-      : interpolateColors(startColor, endColor, 1000, midColor),
+      ? c1000.reverse() // only done once
+      : c1000,
+  );
+
+  let thisDomain = $derived(
+    polarity === "reverse"
+      ? [0, midPosition, 1].reverse() // only done once
+      : [0, midPosition, 1],
+  );
+
+  // let colors1000 = $derived(
+  //   polarity === "reverse"
+  //     ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
+  //     : interpolateColors(startColor, endColor, 1000, midColor),
+  // );
+
+  let averagesForSegments = $derived(
+    splitGroupsAndAverages(dist, nSegments).averages,
+  );
+
+  let preBin = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain(thisDomain)
+      .padding([proportionInExtremeBins[0] / 2, proportionInExtremeBins[1] / 2])
+      .colors(10),
   );
 
   let binColors = $derived(
     polarity === "reverse"
-      ? assignBinColors(bins, colors1000) // only done once
-      : assignBinColors(bins, colors1000),
+      ? preBin.reverse() // only done once
+      : preBin,
   );
+
+  // let binColors = $derived(
+  //   polarity === "reverse"
+  //     ? assignBinColors(bins, colors1000).reverse() // only done once
+  //     : assignBinColors(bins, colors1000),
+  // );
+
   let interpolatedColors = $derived(binColors);
 
   function findBinIndex(binned, value) {
@@ -124,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"
@@ -150,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
@@ -213,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>
@@ -244,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

@@ -205,28 +205,62 @@
     createEqualWidthBins(xTickMin, xTickMax, nSegments, dist),
   );
 
+  let proportionInExtremeBins = $derived([
+    bins[0]["count"] / distSorted.length,
+    bins.at(-1)["count"] / distSorted.length,
+  ]);
+
   const range = $derived(
     Array.from({ length: nSegments }, (_, i) => nSegments - 1 - i),
   );
 
+  import chroma from "chroma-js";
+
+  let midPosition = $derived((rawMedian - newMin) / (newMax - newMin));
+
+  let c1000 = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain([0, midPosition, 1])
+      .colors(1000),
+  );
+
   let colors1000 = $derived(
     polarity === "reverse"
-      ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
-      : interpolateColors(startColor, endColor, 1000, midColor),
+      ? c1000.reverse() // only done once
+      : c1000,
+  );
+
+  let thisDomain = $derived(
+    polarity === "reverse"
+      ? [0, midPosition, 1].reverse() // only done once
+      : [0, midPosition, 1],
   );
 
+  // let colors1000 = $derived(
+  //   polarity === "reverse"
+  //     ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
+  //     : interpolateColors(startColor, endColor, 1000, midColor),
+  // );
+
   let averagesForSegments = $derived(
     splitGroupsAndAverages(dist, nSegments).averages,
   );
 
-  // let binColors = $derived(assignBinColors(bins, colors1000));
-
   let binColors = $derived(
-    polarity === "reverse"
-      ? assignBinColors(bins, colors1000).reverse() // only done once
-      : assignBinColors(bins, colors1000),
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain(thisDomain)
+      .padding([proportionInExtremeBins[0] / 2, proportionInExtremeBins[1] / 2])
+      .colors(10),
   );
 
+  // let binColors = $derived(
+  //   polarity === "reverse"
+  //     ? assignBinColors(bins, colors1000).reverse() // only done once
+  //     : assignBinColors(bins, colors1000),
+  // );
+
   let interpolatedColors = $derived(
     skew
       ? binColors
@@ -675,7 +709,7 @@
                               )
                             : rowValue.color}
                           stroke="white"
-                          stroke-width="2"
+                          stroke-width="5"
                           opacity={rowValue.opacity}
                           pointer-events={rowValue.pointerEvents}
                         ></circle>
@@ -691,7 +725,8 @@
                                 activeColors,
                               )
                             : rowValue.color}
-                          stroke="black"
+                          stroke="#333333"
+                          stroke-width="2"
                           opacity={rowValue.opacity}
                           pointer-events={rowValue.pointerEvents}
                         ></circle>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.14",
+  "version": "0.1.19-beta.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"
@@ -101,6 +101,7 @@
     "@types/dompurify": "^3.0.5",
     "accessible-autocomplete": "^3.0.1",
     "choices.js": "^11.1.0",
+    "chroma-js": "^3.2.0",
     "csv-parser": "^3.0.0",
     "d3": "^7.9.0",
     "decimal.js": "^10.5.0",