@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.33

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

@@ -1,33 +1,40 @@
 <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,
+    arrowTextSize = "s",
+    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 +86,58 @@
       activeMarkerId = null;
     },
     activeMarkerId = undefined,
+    distribution = [],
+    floor = undefined,
+    ceiling = undefined,
+    averageValue = undefined,
+    polarity = "standard",
+    skew = false,
+    showTickMarks = true,
+    showGridlines = false,
+    labelFormatter = (tick, index, ticksArrayLength) => {
+      return tick;
+    },
+    niceTicks = true,
+    ticksDomain = $bindable([[]]),
+    axisDomain = $bindable([[]]),
   } = $props();
 
+  let xTickFirst = $derived(ticksDomain.length ? ticksDomain[0] : 0);
+  let xTickLast = $derived(ticksDomain.length ? ticksDomain.at(-1) : 1);
+
+  let domainMin = $derived(Math.min(...axisDomain));
+  let domainMax = $derived(Math.max(...axisDomain));
+  let chartDomain = $derived(
+    polarity === "standard" ? [domainMin, domainMax] : [domainMax, domainMin],
+  );
+
+  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 +202,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]);
+  function xFunction(chartDomain) {
+    return scaleLinear().domain(chartDomain).range([0, barWidth]).clamp(true);
   }
 
   let annotations = $derived(
@@ -239,6 +256,41 @@
         (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),
+        ),
+      ),
+    );
+  }
+
+  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}
@@ -251,7 +303,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,16 +325,16 @@
               ? 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
-          d="M 4 25 v 10 h {xFunction(min, max)(d.value) +
+          d="M 4 25 v 10 h {xFunction(chartDomain)(d.value) +
             markerRadius -
             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
@@ -298,9 +350,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}
@@ -315,19 +368,17 @@
       </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"
-      bind:clientWidth={chartWidth}
-    >
-      <svg width={chartWidth} height={positionChart.chartHeight}>
+    <div class="chart" bind:clientWidth={chartWidth}>
+      <svg width={chartWidth} height={svgHeight} overflow="visible">
         {#each range as number}
           <g
             transform="translate({markerRadius +
@@ -337,11 +388,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]}
@@ -371,31 +418,117 @@
                   ? (e) => e.key === "Enter" && onClickMarker(e, value)
                   : null}
                 pointer-events={interactiveMarkers ? null : "none"}
-                transform="translate({xFunction(
-                  positionChart.min,
-                  positionChart.max,
-                )(rowValue.value) + markerRadius},{positionChart.chartHeight /
-                  2})"
+                transform="translate({xFunction(chartDomain)(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 / 1.5}
+                    y2={-chartHeight / 1.5}
+                    stroke={rowValue.color === "inherit"
+                      ? colorScale[segmentIndex(rowValue.value)]
+                      : rowValue.color}
+                    stroke-width={rowValue.markerRadius * 5}
+                    opacity={0}
+                    pointer-events={rowValue.pointerEvents}
+                  ></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="none"
+                  ></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:axisDomain
+            bind:ticksArray={ticksDomain}
+            {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}
+            {niceTicks}
+            {markerRadius}
+            {distribution}
+          ></Axis>
+        {/if}
+        {#if showAverage}
+          <g
+            transform="translate({xFunction(chartDomain)(averageValue) +
+              markerRadius}, {chartHeight + (showAxis ? 20 : 0)})"
+          >
+            <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}
+        <div class="axis-container" style="margin: 0px {markerRadius}px">
+          <PositionChartAxis
+            textSize={arrowTextSize}
+            axisLabels={["Worse than average", "Better than average"]}
+          ></PositionChartAxis>
+        </div>
+      {/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 +553,6 @@
     {#if showLabel}
       <div class="empty"></div>
     {/if}
-    <div class="axis">
-      <PositionChartAxis {markerRadius} {barWidth}></PositionChartAxis>
-    </div>
   {/if}
   {#if activeMarkerId}
     <ValueLabel
@@ -441,6 +571,33 @@
   {/if}
 </div>
 
+<div style="content-visibility: hidden;">
+  {#if !showAxis}
+    <Axis
+      bind:axisDomain
+      bind:ticksArray={ticksDomain}
+      {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}
+      {niceTicks}
+      {markerRadius}
+      {distribution}
+    ></Axis>
+  {/if}
+</div>
+
 <style>
   .grid-container {
     display: grid;
@@ -448,14 +605,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,23 @@ declare const PositionChart: import("svelte").Component<{
     max?: any;
     label?: any;
     showAxis?: boolean;
+    showArrows?: boolean;
+    arrowTextSize?: string;
+    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,26 +46,42 @@ declare const PositionChart: import("svelte").Component<{
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
-}, {}, "chartWidth">;
+    distribution?: any[];
+    floor?: any;
+    ceiling?: any;
+    averageValue?: any;
+    polarity?: string;
+    skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
+    labelFormatter?: Function;
+    niceTicks?: boolean;
+    ticksDomain?: any[];
+    axisDomain?: any[];
+}, {}, "chartWidth" | "axisDomain" | "ticksDomain">;
 type $$ComponentProps = {
     value?: any;
     min?: any;
     max?: any;
     label?: any;
     showAxis?: boolean;
+    showArrows?: boolean;
+    arrowTextSize?: string;
+    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 +102,16 @@ type $$ComponentProps = {
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    distribution?: any[];
+    floor?: any;
+    ceiling?: any;
+    averageValue?: any;
+    polarity?: string;
+    skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
+    labelFormatter?: Function;
+    niceTicks?: boolean;
+    ticksDomain?: any[];
+    axisDomain?: any[];
 };