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

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

@@ -1,33 +1,39 @@
 <script>
   import { scaleLinear } from "d3-scale";
+  import { bin, range as d3range } from "d3-array";
+  import chroma from "chroma-js";
   import PositionChartAxis from "./PositionChartAxis.svelte";
   import ValueLabel from "../line-chart/ValueLabel.svelte";
   import Button from "../../ui/Button.svelte";
   import InsetText from "../../content/InsetText.svelte";
+  import Axis from "../axis/Axis.svelte";
   let {
     value = undefined,
     min = undefined,
     max = undefined,
     label = undefined,
     showAxis = true,
+    showArrows = false,
+    showAverage = false,
     chartWidth = $bindable(500), // the 'chart' is the bar and the marker
     chartHeight = 24,
-    colour = "#CA357C",
+    color = "#CA357C",
     nSegments = 10,
     startColor = "#8EB8DC",
     endColor = "#0F385C",
     midColor = undefined,
-    colorScale = undefined,
+    customColorScale = undefined,
     opacity = 1,
     annotation = undefined,
     showIcon = false,
     moreInfo = undefined,
     markerRadius = chartHeight / 2,
+    numberOfTicks = undefined,
     options = [],
     rowData = [
       {
         value: value,
-        colour: colour,
+        color: color,
         opacity: opacity,
         annotation: annotation,
       },
@@ -79,10 +85,51 @@
       activeMarkerId = null;
     },
     activeMarkerId = undefined,
+    distribution = [],
+    floor = undefined,
+    ceiling = undefined,
+    averageValue = undefined,
+    polarity = "standard",
+    skew = false,
+    showTickMarks = true,
+    showGridlines = false,
   } = $props();
 
+  let xTicks = $state([]);
+
+  let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
+  let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
+
+  let domainMin = $derived(Math.min(xTickFirst, xTickLast));
+  let domainMax = $derived(Math.max(xTickFirst, xTickLast));
+
+  const segmentScale = $derived(
+    scaleLinear().domain([0, nSegments]).range([domainMin, domainMax]),
+  );
+
+  const binThresholds = $derived(d3range(1, nSegments).map(segmentScale));
+
+  const binner = $derived(
+    bin().domain([domainMin, domainMax]).thresholds(binThresholds),
+  );
+
+  const bins = $derived(
+    polarity === "reverse"
+      ? binner(distribution).toReversed()
+      : binner(distribution),
+  );
+
+  const proportionsInBins = $derived(
+    bins.map((b) => b.length / distribution.length),
+  );
+
+  let proportionInExtremeBins = $derived([
+    proportionsInBins[0],
+    proportionsInBins.at(-1),
+  ]);
+
   // base defaults that apply to every row
-  const baseRow = { value, colour, opacity, annotation };
+  const baseRow = { value, color, opacity, annotation, markerRadius };
 
   // base defaults that apply to every chart
   const baseChart = { label, chartHeight, min, max, showAxis };
@@ -147,89 +194,51 @@
     allDataNormalized.some((obj) => obj.divider !== undefined),
   );
 
-  let gridTemplateRows = $derived(() => {
-    let rows = showAxis ? numberOfPositionCharts + 2 : numberOfPositionCharts;
-    if (open) rows += 1;
-    if (divider) rows += 1;
-    return `repeat(${rows}, auto)`;
-  });
   const range = $derived(Array.from({ length: nSegments }, (_, i) => i));
 
-  function interpolateColors(hex1, hex2, steps, hexMid = null) {
-    // Convert hex to RGB
-    const hexToRgb = (hex) => {
-      hex = hex.replace(/^#/, "");
-      if (hex.length === 3) {
-        hex = hex
-          .split("")
-          .map((x) => x + x)
-          .join("");
-      }
-      const bigint = parseInt(hex, 16);
-      return {
-        r: (bigint >> 16) & 255,
-        g: (bigint >> 8) & 255,
-        b: bigint & 255,
-      };
-    };
-    // Convert RGB to hex
-    const rgbToHex = ({ r, g, b }) =>
-      "#" +
-      [r, g, b]
-        .map((x) => {
-          const hex = x.toString(16);
-          return hex.length === 1 ? "0" + hex : hex;
-        })
-        .join("");
-    // Helper: interpolate between two colors
-    const interpolate = (start, end, count) => {
-      const arr = [];
-      for (let i = 0; i < count; i++) {
-        const t = i / (count - 1);
-        const r = Math.round(start.r + (end.r - start.r) * t);
-        const g = Math.round(start.g + (end.g - start.g) * t);
-        const b = Math.round(start.b + (end.b - start.b) * t);
-        arr.push({ r, g, b });
-      }
-      return arr;
-    };
-    const start = hexToRgb(hex1);
-    const end = hexToRgb(hex2);
-    // Case 1: just two colors
-    if (!hexMid) {
-      return interpolate(start, end, steps).map(rgbToHex);
-    }
-    // Case 2: three colors
-    const mid = hexToRgb(hexMid);
-    const result = [];
-    if (steps % 2 === 1) {
-      // Odd steps → midpoint included
-      const half = (steps - 1) / 2;
-      const firstHalf = interpolate(start, mid, half + 1); // includes mid
-      const secondHalf = interpolate(mid, end, half + 1); // includes mid again
-      result.push(
-        ...firstHalf.slice(0, -1).map(rgbToHex), // drop duplicate mid
-        ...secondHalf.map(rgbToHex),
-      );
+  function interpolateColors(
+    startColor,
+    endColor,
+    nSegments,
+    midColor = null,
+    skew,
+  ) {
+    const colorArray = [startColor, midColor, endColor].filter(Boolean);
+
+    if (!skew) {
+      return chroma.scale(colorArray).colors(nSegments);
     } else {
-      // Even steps → midpoint excluded
-      const half = steps / 2;
-      const firstHalf = interpolate(start, mid, half + 1); // includes mid
-      const secondHalf = interpolate(mid, end, half + 1); // includes mid again
-      result.push(
-        ...firstHalf.slice(0, -1).map(rgbToHex), // drop mid
-        ...secondHalf.slice(1).map(rgbToHex), // drop mid
-      );
+      const extremeColors = chroma
+        .scale([startColor, midColor, endColor])
+        .padding([
+          proportionInExtremeBins[0] / 2,
+          proportionInExtremeBins[1] / 2,
+        ])
+        .colors(2);
+
+      const averageNormalised =
+        (averageValue - xTickFirst) / (xTickLast - xTickFirst);
+
+      const binColors = chroma
+        .scale([extremeColors[0], midColor, extremeColors[1]])
+        .domain([0, averageNormalised, 1])
+        .colors(10);
+
+      return binColors;
     }
-    return result;
   }
 
+  let colorScale = $derived(
+    customColorScale ??
+      interpolateColors(startColor, endColor, nSegments, midColor, skew),
+  );
+
   // the 'bar' is the 10 rectangles side by side
   let barWidth = $derived(chartWidth - markerRadius * 2);
   let barHeight = $derived((chartHeight * 5) / 6);
 
   function xFunction(min, max) {
-    return scaleLinear().domain([min, max]).range([0, barWidth]);
+    return scaleLinear().domain([min, max]).range([0, barWidth]).clamp(true);
   }
 
   let annotations = $derived(
@@ -239,6 +248,30 @@
         (d) => typeof d.annotation === "string" && d.annotation.length > 0,
       ),
   );
+
+  let gridTemplateRows = $derived(
+    allDataNormalized
+      .map((item, i) => {
+        const sizes = ["minmax(0,1fr)"];
+        if (moreInfoTogglesArray[i]) sizes.push("minmax(0,auto)");
+        if (item.divider === "true") sizes.push("minmax(0,auto)");
+        return sizes.join(" "); // still fine because number of rows matches
+      })
+      .concat(showAxis ? ["minmax(0,auto)"] : [])
+      .join(" "),
+  );
+
+  function segmentIndex(value) {
+    return Math.max(
+      0,
+      Math.min(
+        nSegments - 1,
+        Math.floor(
+          (nSegments * (value - xTickFirst)) / (xTickLast - xTickFirst),
+        ),
+      ),
+    );
+  }
 </script>
 
 {#if annotations.length}
@@ -251,7 +284,7 @@
             id="label"
             x={d.value}
             y="20"
-            fill={d.colour}
+            fill={d.color}
             font-size="18"
             opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
               ? 0.2
@@ -273,7 +306,7 @@
               ? 0.2
               : 1}
           >
-            <path d="M 0 0 L 6 3 L 0 6 z" fill={d.colour}></path>
+            <path d="M 0 0 L 6 3 L 0 6 z" fill={d.color}></path>
           </marker>
         </defs>
         <path
@@ -282,7 +315,7 @@
             4 +
             (topWidth - chartWidth)}  v 15"
           fill="none"
-          stroke={d.colour}
+          stroke={d.color}
           stroke-width="1.5"
           marker-end="url(#arrow-down)"
           opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
@@ -315,19 +348,27 @@
       </p>
     {/if}
     {#if showIcon}
-      <Button
-        textContent="i"
-        buttonType="moreInfo"
-        noPadding={true}
-        onClickFunction={() => updateMoreInfoTogglesArray(i)}
-      ></Button>
+      <div class="button-container">
+        <Button
+          textContent="i"
+          buttonType="moreInfo"
+          noPadding={true}
+          onClickFunction={() => updateMoreInfoTogglesArray(i)}
+        ></Button>
+      </div>
     {/if}
     <div
       class="chart"
-      style="height: {positionChart.chartHeight}px"
+      style="height:{chartHeight +
+        (showAxis ? 30 : 30) +
+        (showArrows ? 30 : 0) +
+        (showAverage ? 40 : 0)}px"
       bind:clientWidth={chartWidth}
     >
-      <svg width={chartWidth} height={positionChart.chartHeight}>
+      <svg
+        width={chartWidth}
+        height={chartHeight + (showAxis ? 40 : 0) + (showAverage ? 40 : 0)}
+      >
         {#each range as number}
           <g
             transform="translate({markerRadius +
@@ -337,11 +378,7 @@
             ><rect
               width={barWidth / nSegments}
               height={barHeight}
-              fill={colorScale && colorScale.length > 0
-                ? colorScale[number]
-                : interpolateColors(startColor, endColor, nSegments, midColor)[
-                    number
-                  ]}
+              fill={colorScale[number]}
             ></rect></g
           >{/each}
         {#each Object.entries(positionChart.rowData) as [tier, points]}
@@ -372,30 +409,105 @@
                   : null}
                 pointer-events={interactiveMarkers ? null : "none"}
                 transform="translate({xFunction(
-                  positionChart.min,
-                  positionChart.max,
+                  xTickFirst,
+                  xTickLast,
                 )(rowValue.value) + markerRadius},{positionChart.chartHeight /
                   2})"
               >
-                <circle
-                  r={markerRadius}
-                  cx="0"
-                  cy="0"
-                  fill={rowValue.colour}
-                  stroke="white"
-                  opacity={rowValue.opacity}
-                ></circle>
+                {#if rowValue.shape === "line"}
+                  <line
+                    x1={0}
+                    x2={0}
+                    y1={chartHeight / 2.4}
+                    y2={-chartHeight / 2.4}
+                    stroke={rowValue.color === "inherit"
+                      ? colorScale[segmentIndex(rowValue.value)]
+                      : rowValue.color}
+                    stroke-width={rowValue.markerRadius}
+                    opacity={rowValue.opacity}
+                    pointer-events={rowValue.pointerEvents}
+                  ></line>
+                {:else}
+                  <circle
+                    r={rowValue.markerRadius}
+                    cx="0"
+                    cy="0"
+                    stroke="white"
+                    fill={rowValue.color === "inherit"
+                      ? colorScale[segmentIndex(rowValue.value)]
+                      : rowValue.color}
+                    stroke-width={3}
+                    opacity={rowValue.opacity}
+                  ></circle>
+                  <circle
+                    r={rowValue.markerRadius * 0.9}
+                    cx="0"
+                    cy="0"
+                    fill={rowValue.color === "inherit"
+                      ? colorScale[segmentIndex(rowValue.value)]
+                      : rowValue.color}
+                    stroke="black"
+                    stroke-width={1.5}
+                    opacity={rowValue.opacity}
+                  ></circle>
+                {/if}
               </g>
             {/if}
           {/each}
         {/each}
+        {#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}
+          ></Axis>
+        {/if}
+        {#if showAverage}
+          <g
+            transform="translate({xFunction(
+              xTickFirst,
+              xTickLast,
+            )(averageValue) + markerRadius}, {chartHeight * 1.7})"
+          >
+            <text
+              fill="#444"
+              font-size={15}
+              text-anchor="middle"
+              font-weight="bold"
+            >
+              <tspan x="1" dy="15">▲</tspan>
+              <tspan x="1" dy="4">|</tspan>
+              <tspan font-family="GDS Transport" x="1" dy="13">Average</tspan>
+            </text>
+          </g>
+        {/if}
       </svg>
+      {#if showArrows}
+        <PositionChartAxis
+          markerRadius={10}
+          barWidth={chartWidth}
+          textSize="xs"
+          {chartWidth}
+          axisLabels={["Worse than average", "Better than average"]}
+        ></PositionChartAxis>
+      {/if}
     </div>
     {#if moreInfoTogglesArray[i]}
-      <div class="accordion" style="grid-column:1 / -1;">
-        <p class="govuk-body-s">{positionChart.moreInfo}</p>
-        <!-- <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
-        ></InsetText> -->
+      <div class="accordion" style="grid-column:1 / -1">
+        <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
+        ></InsetText>
       </div>
     {/if}
     {#if positionChart.divider}
@@ -420,9 +532,6 @@
     {#if showLabel}
       <div class="empty"></div>
     {/if}
-    <div class="axis">
-      <PositionChartAxis {markerRadius} {barWidth}></PositionChartAxis>
-    </div>
   {/if}
   {#if activeMarkerId}
     <ValueLabel
@@ -448,14 +557,13 @@
     -moz-column-gap: 2%;
          column-gap: 2%;
     row-gap: 2%;
+    overflow: visible;
   }
   .chart {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     min-width: 0;
-  }
-  .accordion {
-    max-height: 500px !important; /* large enough to fit content */
+    overflow: visible;
   }
 </style>

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

@@ -9,19 +9,22 @@ declare const PositionChart: import("svelte").Component<{
     max?: any;
     label?: any;
     showAxis?: boolean;
+    showArrows?: boolean;
+    showAverage?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
     midColor?: any;
-    colorScale?: any;
+    customColorScale?: any;
     opacity?: number;
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
     markerRadius?: any;
+    numberOfTicks?: any;
     options?: any[];
     rowData?: any[];
     allData?: any[];
@@ -42,6 +45,14 @@ declare const PositionChart: import("svelte").Component<{
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    distribution?: any[];
+    floor?: any;
+    ceiling?: any;
+    averageValue?: any;
+    polarity?: string;
+    skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -49,19 +60,22 @@ type $$ComponentProps = {
     max?: any;
     label?: any;
     showAxis?: boolean;
+    showArrows?: boolean;
+    showAverage?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
     midColor?: any;
-    colorScale?: any;
+    customColorScale?: any;
     opacity?: number;
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
     markerRadius?: any;
+    numberOfTicks?: any;
     options?: any[];
     rowData?: any[];
     allData?: any[];
@@ -82,4 +96,12 @@ type $$ComponentProps = {
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    distribution?: any[];
+    floor?: any;
+    ceiling?: any;
+    averageValue?: any;
+    polarity?: string;
+    skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
 };

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

@@ -1,70 +1,74 @@
 <script>
-  let { markerRadius = undefined, barWidth = undefined } = $props();
+  let {
+    markerRadius = undefined,
+    textSize = "s",
+    chartWidth,
+    axisLabels = ["Left", "Right"],
+  } = $props();
 </script>
 
-<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
-  <div class="more-deprived">
+<div
+  class="axis govuk-body-{textSize}"
+  style="--axis-padding:{markerRadius}px; width: {chartWidth}"
+>
+  <div class="right-label">
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="11"
+      width="18"
       height="16"
-      viewBox="0 0 11 16"
+      viewBox="0 0 11 20"
       fill="none"
     >
       <path
-        d="M0.292893 7.29289C-0.0976315 7.68342 -0.0976314 8.31658 0.292893 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928933L0.292893 7.29289ZM11 8L11 7L1 7L1 8L1 9L11 9L11 8Z"
-        fill="#B1B4B6"
+        transform="translate(20,21)rotate(180)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="darkgrey"
       ></path>
     </svg>
-    <span style="font-family:GDS Transport">More deprived</span>
+    <span class="axis-text">{axisLabels[0]}</span>
   </div>
-  <div class="less-deprived">
-    <span style="font-family:GDS Transport">Less deprived</span>
+  <div class="left-label">
+    <span class="axis-text">{axisLabels[1]}</span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
+      width="18"
       height="16"
-      viewBox="0 0 12 16"
+      viewBox="0 0 11 20"
       fill="none"
     >
       <path
-        d="M11.2071 8.70711C11.5976 8.31658 11.5976 7.68342 11.2071 7.2929L4.84315 0.928933C4.45262 0.538409 3.81946 0.538408 3.42893 0.928933C3.03841 1.31946 3.03841 1.95262 3.42893 2.34315L9.08579 8L3.42893 13.6569C3.03841 14.0474 3.03841 14.6805 3.42893 15.0711C3.81946 15.4616 4.45262 15.4616 4.84314 15.0711L11.2071 8.70711ZM0.5 8L0.5 9L10.5 9L10.5 8L10.5 7L0.5 7L0.5 8Z"
-        fill="#B1B4B6"
+        transform="translate(-5,-3)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="darkgrey"
       ></path>
     </svg>
   </div>
 </div>
 
 <style>
+  svg {
+    overflow: visible;
+  }
+
   .axis {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 0 var(--axis-padding);
   }
 
-  .less-deprived,
-  .more-deprived {
+  .left-label,
+  .right-label {
     display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-
-  /* Tell the parent to act as a container */
-  .axis {
-    container-type: inline-size;
+    max-width: 120px;
   }
 
-  /* Container query: hide the child if parent's width is less than 400px */
-  @container (max-width: 18rem) {
-    .less-deprived {
-      display: none;
-    }
+  .left-label {
+    text-align: end;
   }
 
-  @container (max-width: 25rem) {
-    .average {
-      display: none;
-    }
+  .axis-text {
+    font-family: "GDS Transport";
+    line-height: 0.9;
+    color: #666666;
+    font-style: italic;
   }
 </style>

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

@@ -5,9 +5,13 @@ type PositionChartAxis = {
 };
 declare const PositionChartAxis: import("svelte").Component<{
     markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    chartWidth: any;
+    axisLabels?: any[];
 }, {}, "">;
 type $$ComponentProps = {
     markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    chartWidth: any;
+    axisLabels?: any[];
 };