@communitiesuk/svelte-component-library 0.1.19-beta.18 → 0.1.19-beta.19

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

@@ -0,0 +1,241 @@
+<script>
+  import { scaleLinear } from "d3-scale";
+  import { bin, range as d3range } from "d3-array";
+  import Axis from "./axis/Axis.svelte";
+  import chroma from "chroma-js";
+
+  let {
+    averageValue = undefined,
+    distribution = [],
+    minX = 0,
+    maxX = 1,
+    minY = 0,
+    maxY = 100,
+    showXAxis = true,
+    showYAxis = true,
+    showArrows = true,
+    midColor = "#DDDDDD",
+    startColor = "#B70000",
+    endColor = "#2D6644",
+    floor = undefined,
+    ceiling = undefined,
+    nBins = 10,
+    padding = 0,
+    height = 50,
+    polarity = "standard",
+    annotationValue = 0,
+    annotationText = "",
+    labelFormatter = (tick, index, numberOfTicks, values) => {
+      return tick;
+    },
+    containerWidth = $bindable(100),
+    numberOfTicks,
+    customColorScale = undefined,
+    skew = true,
+    showGridlines = true,
+    showTickMarks = false,
+    strokeWidth = 0.25,
+  } = $props();
+
+  let xTicks = $state([]);
+  let yTicks = $state([]);
+
+  let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
+  let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
+
+  let domainXMin = $derived(Math.min(xTickFirst, xTickLast));
+  let domainXMax = $derived(Math.max(xTickFirst, xTickLast));
+
+  let yTickFirst = $derived(yTicks.length ? yTicks[0] : 0);
+  let yTickLast = $derived(yTicks.length ? yTicks.at(-1) : 1);
+
+  let domainYMin = $derived(Math.min(yTickFirst, yTickLast));
+  let domainYMax = $derived(Math.max(yTickFirst, yTickLast));
+
+  let useRange = $derived(
+    polarity === "standard"
+      ? [0, containerWidth - padding]
+      : [containerWidth - padding, 0],
+  );
+
+  let xScale = $derived(
+    scaleLinear().domain([domainXMin, domainXMax]).range(useRange),
+  );
+
+  const segmentScale = $derived(
+    scaleLinear().domain([0, nBins]).range([domainXMin, domainXMax]),
+  );
+
+  const binThresholds = $derived(d3range(1, nBins).map(segmentScale));
+
+  const binner = $derived(
+    bin().domain([domainXMin, domainXMax]).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),
+  ]);
+
+  let yScale = $derived(
+    scaleLinear()
+      .domain([0, Math.max(...bins.map((b) => b.length))])
+      .range([0, height]),
+  );
+
+  function interpolateColors(
+    startColor,
+    endColor,
+    nSegments,
+    midColor = null,
+    skew,
+  ) {
+    const colorArray = [startColor, midColor, endColor].filter(Boolean);
+
+    if (!skew) {
+      return chroma.scale(colorArray).colors(nSegments);
+    } else {
+      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,
+          polarity === "reverse" ? 1 - averageNormalised : averageNormalised,
+          1,
+        ])
+        .colors(10);
+
+      return binColors;
+    }
+  }
+
+  let colorScale = $derived(
+    customColorScale ??
+      interpolateColors(startColor, endColor, nBins, midColor, skew),
+  );
+
+  $inspect({ colorScale });
+</script>
+
+{#key containerWidth}
+  <div class="scale-container" bind:clientWidth={containerWidth}>
+    <svg
+      width={containerWidth}
+      height={height + 20 + (annotationText ? 25 : 0) + (showXAxis ? 25 : 0)}
+      style="overflow: visible;"
+    >
+      <g transform="translate({padding / 2},0)">
+        <g transform="translate(0,{annotationText ? 25 : 20})">
+          <text dx={-2} dy={-4} fill="#666" font-size="0.75em"
+            >Number of areas</text
+          ></g
+        >
+
+        {#if annotationText}
+          <g transform="translate({xScale(annotationValue)},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>
+        {/if}
+
+        <g transform="translate(0,{annotationText ? 25 : 20})">
+          <g>
+            {#if showXAxis}
+              <Axis
+                bind:ticksArray={xTicks}
+                chartHeight={height}
+                chartWidth={containerWidth - padding}
+                orientation={{ axis: "x", position: "bottom" }}
+                domain={[xTickFirst, xTickLast]}
+                min={minX}
+                max={maxX}
+                range={useRange}
+                fontSize={13}
+                {floor}
+                {ceiling}
+                {labelFormatter}
+                {numberOfTicks}
+              ></Axis>
+            {/if}
+            {#if showYAxis}
+              <Axis
+                bind:ticksArray={yTicks}
+                chartHeight={height}
+                chartWidth={containerWidth - padding}
+                orientation={{ axis: "y", position: "left" }}
+                min={minY}
+                max={maxY}
+                domain={[0, yTickLast]}
+                range={[0, height]}
+                fontSize={0}
+                numberOfTicks={4}
+                {showGridlines}
+                {showTickMarks}
+                strokeWidth={0.25}
+              ></Axis>
+            {/if}
+          </g>
+          {#each bins as bin, i}
+            {#key bin.x0}
+              <rect
+                x={polarity === "reverse" ? xScale(bin.x1) : xScale(bin.x0)}
+                y={height - yScale(bin.length)}
+                width={Math.abs(xScale(bin.x1) - xScale(bin.x0))}
+                height={yScale(bin.length)}
+                fill={colorScale[i]}
+                stroke-width={0}
+              ></rect>
+            {/key}
+          {/each}
+        </g>
+      </g>
+    </svg>
+  </div>
+{/key}
+
+<div style="content-visibility: hidden;">
+  {#if !showXAxis}
+    <Axis
+      bind:ticksArray={xTicks}
+      chartHeight={height}
+      chartWidth={containerWidth - padding}
+      orientation={{ axis: "x", position: "bottom" }}
+      domain={[xTickFirst, xTickLast]}
+      min={minX}
+      max={maxX}
+      range={useRange}
+      fontSize={13}
+      {floor}
+      {ceiling}
+      {labelFormatter}
+      {numberOfTicks}
+    ></Axis>
+  {/if}
+</div>

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

@@ -0,0 +1,65 @@
+export default Histogram;
+type Histogram = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Histogram: import("svelte").Component<{
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showArrows?: boolean;
+    midColor?: string;
+    startColor?: string;
+    endColor?: string;
+    floor?: any;
+    ceiling?: any;
+    nBins?: number;
+    padding?: number;
+    height?: number;
+    polarity?: string;
+    annotationValue?: number;
+    annotationText?: string;
+    labelFormatter?: Function;
+    containerWidth?: number;
+    numberOfTicks: any;
+    customColorScale?: any;
+    skew?: boolean;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    strokeWidth?: number;
+}, {}, "containerWidth">;
+type $$ComponentProps = {
+    averageValue?: any;
+    distribution?: any[];
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showArrows?: boolean;
+    midColor?: string;
+    startColor?: string;
+    endColor?: string;
+    floor?: any;
+    ceiling?: any;
+    nBins?: number;
+    padding?: number;
+    height?: number;
+    polarity?: string;
+    annotationValue?: number;
+    annotationText?: string;
+    labelFormatter?: Function;
+    containerWidth?: number;
+    numberOfTicks: any;
+    customColorScale?: any;
+    skew?: boolean;
+    showGridlines?: boolean;
+    showTickMarks?: boolean;
+    strokeWidth?: number;
+};

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

@@ -48,6 +48,9 @@
     range = undefined as [number, number] | undefined,
     fontSize = 19,
     polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+    strokeWidth = 2,
   }: {
     chartHeight?: number;
     chartWidth?: number;
@@ -71,6 +74,10 @@
     range?: [number, number];
     fontSize?: number;
     polarity?: Polarity;
+    gridlines?: Boolean;
+    strokeWidth?: Number;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -141,6 +148,9 @@
         {labelFormatter}
         {fontSize}
         {polarity}
+        {showGridlines}
+        {showTickMarks}
+        {strokeWidth}
       />
     {/key}
   {/if}

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

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

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

@@ -26,6 +26,10 @@
     labelFormatter,
     fontSize = 19,
     polarity = "standard",
+    showGridlines = false,
+    showTickMarks = false,
+
+    strokeWidth = 2,
   }: {
     ticksArray?: number[]; // bindable
     chartWidth: number;
@@ -40,6 +44,10 @@
     labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
     polarity?: Polarity;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
+
+    strokeWidth?: number;
   } = $props();
   function axisValue(fn: any, tick: number): number {
     // Try single-call first: axisFunction(tick)
@@ -146,17 +154,32 @@
         {orientation.axis === 'y' ? axisValue(axisFunction, tick) : 0}
       )"
     >
-      <path
-        d={orientation.axis === "y"
-          ? orientation.position === "left"
-            ? "M0 -1 l-8 0"
-            : "M0 -1 l8 0"
-          : orientation.position === "top"
-            ? "M0 -1 l0 -8"
-            : "M0 -1 l0 8"}
-        stroke="grey"
-        stroke-width="2px"
-      ></path>
+      {#if showTickMarks}
+        <path
+          d={orientation.axis === "y"
+            ? orientation.position === "left"
+              ? `M1 0 l-8 0`
+              : `M1 0 l8 0`
+            : orientation.position === "top"
+              ? "M0 -1 l0 -8"
+              : "M0 -1 l0 8"}
+          stroke="grey"
+          stroke-width={strokeWidth}
+        ></path>
+      {/if}
+      {#if showGridlines}
+        <path
+          d={orientation.axis === "y"
+            ? orientation.position === "left"
+              ? `M0 0 l${chartWidth} 0`
+              : `M0 0 l-${chartWidth} 0`
+            : orientation.position === "top"
+              ? `M0 0 l0 ${chartHeight}`
+              : `M0 0 l0 -${chartHeight}`}
+          stroke="grey"
+          stroke-width={strokeWidth}
+        ></path>
+      {/if}
       <text
         transform="translate(
           {orientation.axis === 'x'

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

@@ -19,6 +19,9 @@ type $$ComponentProps = {
     labelFormatter?: (tick: number, index: number) => string;
     fontSize?: number;
     polarity?: Polarity;
+    showGridlines?: Boolean;
+    showTickMarks?: Boolean;
+    strokeWidth?: number;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

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

@@ -91,12 +91,12 @@
     averageValue = undefined,
     polarity = "standard",
     skew = false,
+    showTickMarks = true,
+    showGridlines = false,
   } = $props();
 
   let xTicks = $state([]);
 
-  $inspect({ xTicks });
-
   let xTickFirst = $derived(xTicks.length ? xTicks[0] : 0);
   let xTickLast = $derived(xTicks.length ? xTicks.at(-1) : 1);
 
@@ -470,6 +470,8 @@
             {ceiling}
             {numberOfTicks}
             {polarity}
+            {showTickMarks}
+            {showGridlines}
           ></Axis>
         {/if}
         {#if showAverage}

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

@@ -51,6 +51,8 @@ declare const PositionChart: import("svelte").Component<{
     averageValue?: any;
     polarity?: string;
     skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -100,4 +102,6 @@ type $$ComponentProps = {
     averageValue?: any;
     polarity?: string;
     skew?: boolean;
+    showTickMarks?: boolean;
+    showGridlines?: boolean;
 };

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

@@ -58,7 +58,7 @@
   .left-label,
   .right-label {
     display: flex;
-    width: 45%;
+    max-width: 120px;
   }
 
   .left-label {

package/dist/components/ui/Card.svelte

@@ -20,6 +20,7 @@
     selectedValue = $bindable(),
     display = "flex",
     gridPosition = undefined,
+    subtitle = undefined,
   } = $props();
 </script>
 
@@ -36,6 +37,7 @@
         textColor={headerTextColor}
         backgroundColor={headerBackgroundColor}
         {href}
+        {subtitle}
       ></CardHeader>
     {:else}
       {@render headerSnippet?.()}
@@ -65,6 +67,7 @@
 <style>
   .card {
     flex-direction: column;
+    min-width: 0;
   }
 
   .header-div {

package/dist/components/ui/Card.svelte.d.ts

@@ -22,6 +22,7 @@ declare const Card: import("svelte").Component<{
     selectedValue?: any;
     display?: string;
     gridPosition?: any;
+    subtitle?: any;
 }, {}, "selectedValue">;
 type $$ComponentProps = {
     headerIsLink?: boolean;
@@ -42,4 +43,5 @@ type $$ComponentProps = {
     selectedValue?: any;
     display?: string;
     gridPosition?: any;
+    subtitle?: any;
 };

package/dist/components/ui/CardHeader.svelte

@@ -5,13 +5,15 @@
     textColor = "#1D70B8",
     backgroundColor = "white",
     href = undefined,
+    subtitle = undefined,
   } = $props();
 </script>
 
 <a
   class="link govuk-heading-m"
   {href}
-  style="font-size: {textSize}; color: {textColor}; background-color: {backgroundColor}"
+  style="font-size: {textSize}; color: {textColor}; background-color: {backgroundColor}; margin: {subtitle ??
+    0}"
 >
   {text}
   <svg
@@ -27,12 +29,10 @@
     ></path>
   </svg>
 </a>
+{#if subtitle !== undefined}
+  <p>{subtitle}</p>{/if}
 
 <style>
-  * {
-    margin: 0; /* this removes the margin applied by govuk-heading-m */
-  }
-
   .link {
     display: flex;
     justify-content: space-between;
@@ -40,4 +40,7 @@
     width: 100%;
     gap: 0.5rem;
   }
+  p {
+    color: #666;
+  }
 </style>

package/dist/components/ui/CardHeader.svelte.d.ts

@@ -9,6 +9,7 @@ declare const CardHeader: import("svelte").Component<{
     textColor?: string;
     backgroundColor?: string;
     href?: any;
+    subtitle?: any;
 }, {}, "">;
 type $$ComponentProps = {
     text?: string;
@@ -16,4 +17,5 @@ type $$ComponentProps = {
     textColor?: string;
     backgroundColor?: string;
     href?: any;
+    subtitle?: any;
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';

package/dist/index.js

@@ -2,6 +2,7 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';

package/package.json

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