@communitiesuk/svelte-component-library 0.1.19-beta.1 → 0.1.19-beta.11

package/dist/assets/icons/MaterialIcon.svelte

@@ -23,6 +23,7 @@
   class="c inline h-16 w-16"
   viewBox="0 0 48 48"
   style={`transform: rotate(${rotation}deg)`}
+  aria-hidden={true}
 >
   {#each paths as path}
     <path d={path}></path>

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -41,16 +41,15 @@ left: {markerRect?.x +
   border-radius: 5px;"
     >
       {#if tooltipContent}
-        <div>
+        <div role="tooltip">
           {activeMarkerId[tooltipContent]}
         </div>
       {:else}
-        <div>
-          <div>{activeMarkerId?.value ?? activeMarkerId}</div>
-        </div>{/if}
+        <div role="tooltip">{activeMarkerId?.value ?? activeMarkerId}</div>
+      {/if}
     </div>
   {:else}
-    <div>
+    <div role="tooltip">
       {@render tooltipSnippet(activeMarkerId)}
     </div>
   {/if}

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

@@ -2,6 +2,8 @@
   import { scaleLinear } from "d3-scale";
   import PositionChartAxis from "./PositionChartAxis.svelte";
   import ValueLabel from "../line-chart/ValueLabel.svelte";
+  import Button from "../../ui/Button.svelte";
+  import InsetText from "../../content/InsetText.svelte";
   let {
     value = undefined,
     min = undefined,
@@ -10,7 +12,7 @@
     showAxis = true,
     chartWidth = $bindable(500), // the 'chart' is the bar and the marker
     chartHeight = 24,
-    colour = "#CA357C",
+    color = "#CA357C",
     nSegments = 10,
     startColor = "#8EB8DC",
     endColor = "#0F385C",
@@ -20,10 +22,12 @@
     annotation = undefined,
     showIcon = false,
     moreInfo = undefined,
+    markerRadius = chartHeight / 2,
+    options = [],
     rowData = [
       {
         value: value,
-        colour: colour,
+        color: color,
         opacity: opacity,
         annotation: annotation,
       },
@@ -75,10 +79,12 @@
       activeMarkerId = null;
     },
     activeMarkerId = undefined,
+    ariaLabel,
+    axisTextSize,
   } = $props();
 
   // base defaults that apply to every row
-  const baseRow = { value, colour, opacity, annotation };
+  const baseRow = { value, color, opacity, annotation };
 
   // base defaults that apply to every chart
   const baseChart = { label, chartHeight, min, max, showAxis };
@@ -117,16 +123,12 @@
     }),
   );
 
-  $inspect(allDataNormalized);
-
-  // holds open/closed state for each label
-  let openStates = $state({});
+  let moreInfoTogglesArray = $state(
+    Array.from({ length: options.length }, () => false),
+  );
 
-  function toggle(label) {
-    openStates = {
-      ...openStates,
-      [label]: !openStates[label], // flip true/false
-    };
+  function updateMoreInfoTogglesArray(index) {
+    moreInfoTogglesArray[index] = !moreInfoTogglesArray[index];
   }
 
   let showLabel = $derived(
@@ -147,12 +149,6 @@
     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) {
@@ -224,9 +220,6 @@
     return result;
   }
 
-  // the 'marker' is the circle
-  let markerRadius = $derived(chartHeight / 2);
-
   // the 'bar' is the 10 rectangles side by side
   let barWidth = $derived(chartWidth - markerRadius * 2);
   let barHeight = $derived((chartHeight * 5) / 6);
@@ -242,199 +235,245 @@
         (d) => typeof d.annotation === "string" && d.annotation.length > 0,
       ),
   );
+
+  $inspect(allDataNormalized, "allDataNormalized");
+
+  let gridTemplateRows = $derived(
+    allDataNormalized
+      .map((item, i) => {
+        const sizes = ["minmax(28px,1fr)"];
+        if (moreInfoTogglesArray[i]) sizes.push("minmax(50px,auto)");
+        if (item.divider) sizes.push("0px");
+        return sizes.join(" "); // still fine because number of rows matches
+      })
+      .concat(showAxis ? ["minmax(0px,auto)"] : [])
+      .join(" "),
+  );
 </script>
 
-{#if annotations.length}
-  {#each annotations as d (d.value)}
-    <div bind:clientWidth={topWidth}>
-      <svg width={topWidth} height="60">
-        <g>
-          <text
-            font-family="GDS Transport"
-            id="label"
-            x={d.value}
-            y="20"
-            fill={d.colour}
-            font-size="18"
-            opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
-              ? 0.2
-              : 1}
-          >
-            {d.annotation}
-          </text>
-        </g>
-        <defs>
-          <marker
-            id="arrow-down"
-            markerWidth="10"
-            markerHeight="10"
-            refX="3"
-            refY="3"
-            orient="auto"
-            markerUnits="strokeWidth"
+<div role="img" aria-label={ariaLabel}>
+  {#if annotations.length}
+    {#each annotations as d (d.value)}
+      <div bind:clientWidth={topWidth} aria-hidden={true}>
+        <svg width={topWidth} height="60">
+          <g>
+            <text
+              font-family="GDS Transport"
+              id="label"
+              x={d.value}
+              y="20"
+              fill={d.color}
+              font-size="18"
+              opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
+                ? 0.2
+                : 1}
+            >
+              {d.annotation}
+            </text>
+          </g>
+          <defs>
+            <marker
+              id="arrow-down"
+              markerWidth="10"
+              markerHeight="10"
+              refX="3"
+              refY="3"
+              orient="auto"
+              markerUnits="strokeWidth"
+              opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
+                ? 0.2
+                : 1}
+            >
+              <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) +
+              markerRadius -
+              4 +
+              (topWidth - chartWidth)}  v 15"
+            fill="none"
+            stroke={d.color}
+            stroke-width="1.5"
+            marker-end="url(#arrow-down)"
             opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
               ? 0.2
               : 1}
-          >
-            <path d="M 0 0 L 6 3 L 0 6 z" fill={d.colour}></path>
-          </marker>
-        </defs>
-        <path
-          d="M 4 25 v 10 h {xFunction(min, max)(d.value) +
-            markerRadius -
-            4 +
-            (topWidth - chartWidth)}  v 15"
-          fill="none"
-          stroke={d.colour}
-          stroke-width="1.5"
-          marker-end="url(#arrow-down)"
-          opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
-            ? 0.2
-            : 1}
-        ></path>
-      </svg>
-    </div>
-  {/each}
-{/if}
+          ></path>
+        </svg>
+      </div>
+    {/each}
+  {/if}
 
-<div
-  class="grid-container"
-  bind:this={container}
-  style="
+  <div
+    class="grid-container"
+    bind:this={container}
+    style="
   position: relative;
     grid-template-columns: {gridTemplateColumns};
     grid-template-rows: {gridTemplateRows};
   "
->
-  {#each allDataNormalized as positionChart, i}
-    {#if showLabel}
-      <p class="label">{positionChart.label}</p>
-    {/if}
-    {#if showIcon}
-      <button
-        id="info-{positionChart.label}"
-        onclick={() => toggle(positionChart.label)}>ⓘ</button
+  >
+    {#each allDataNormalized as positionChart, i}
+      {#if showLabel}
+        <p
+          aria-hidden={true}
+          class="govuk-body-s"
+          style=" text-align: right;
+    margin: 0;
+    line-height: 1.05;"
+        >
+          {positionChart.label}
+        </p>
+      {/if}
+      {#if showIcon}
+        <Button
+          textContent="i"
+          buttonType="moreInfo"
+          noPadding={true}
+          onClickFunction={() => updateMoreInfoTogglesArray(i)}
+          ariaExpanded={moreInfoTogglesArray[i]}
+        ></Button>
+      {/if}
+      <div
+        class="chart"
+        style="height: {positionChart.chartHeight}px"
+        bind:clientWidth={chartWidth}
       >
-    {/if}
-    <div
-      class="chart"
-      style="height: {positionChart.chartHeight}px"
-      bind:clientWidth={chartWidth}
-    >
-      <svg width={chartWidth} height={positionChart.chartHeight}>
-        {#each range as number}
-          <g
-            transform="translate({markerRadius +
-              (barWidth * number) / nSegments},{(positionChart.chartHeight -
-              barHeight) /
-              2})"
-            ><rect
-              width={barWidth / nSegments}
-              height={barHeight}
-              fill={colorScale && colorScale.length > 0
-                ? colorScale[number]
-                : interpolateColors(startColor, endColor, nSegments, midColor)[
-                    number
-                  ]}
-            ></rect></g
-          >{/each}
-        {#each Object.entries(positionChart.rowData) as [tier, points]}
-          {#each points as rowValue, i}
-            {@const markerId = "marker-" + rowValue.value}
+        <svg
+          width={chartWidth}
+          height={positionChart.chartHeight}
+          aria-hidden={true}
+        >
+          <rect
+            x={markerRadius}
+            y={(positionChart.chartHeight - barHeight) / 2}
+            width={barWidth}
+            height={barHeight}
+            fill="none"
+            stroke="grey"
+            stroke-width="1"
+          ></rect>
+          {#each range as number}
             <g
-              data-id={markerId}
-              onclick={interactiveMarkers
-                ? (event) => onClickMarker(event, rowValue, markerId)
-                : null}
-              onmouseenter={interactiveMarkers
-                ? (event) =>
-                    onMouseEnterMarker(
-                      event,
-                      rowValue,
-                      markerId,
-                      event.currentTarget.getBoundingClientRect(),
-                    )
-                : null}
-              onmouseleave={interactiveMarkers
-                ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
-                : null}
-              role="button"
-              tabindex="0"
-              onkeydown={interactiveMarkers
-                ? (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 /
+              transform="translate({markerRadius +
+                (barWidth * number) / nSegments},{(positionChart.chartHeight -
+                barHeight) /
                 2})"
-            >
-              <circle
-                r={markerRadius}
-                cx="0"
-                cy="0"
-                fill={rowValue.colour}
-                stroke="white"
-                opacity={rowValue.opacity}
-              ></circle>
-            </g>
+              ><rect
+                width={barWidth / nSegments}
+                height={barHeight}
+                fill={colorScale && colorScale.length > 0
+                  ? colorScale[number]
+                  : interpolateColors(
+                      startColor,
+                      endColor,
+                      nSegments,
+                      midColor,
+                    )[number]}
+              ></rect></g
+            >{/each}
+
+          {#each Object.entries(positionChart.rowData) as [tier, points]}
+            {#each points as rowValue, i}
+              {#if !isNaN(Number(rowValue.value))}
+                {@const markerId = "marker-" + rowValue.value}
+                <g
+                  data-id={markerId}
+                  onclick={interactiveMarkers
+                    ? (event) => onClickMarker(event, rowValue, markerId)
+                    : null}
+                  onmouseenter={interactiveMarkers
+                    ? (event) =>
+                        onMouseEnterMarker(
+                          event,
+                          rowValue,
+                          markerId,
+                          event.currentTarget.getBoundingClientRect(),
+                        )
+                    : null}
+                  onmouseleave={interactiveMarkers
+                    ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
+                    : null}
+                  onfocus={interactiveMarkers
+                    ? (event) =>
+                        onMouseEnterMarker(
+                          event,
+                          rowValue,
+                          markerId,
+                          event.currentTarget.getBoundingClientRect(),
+                        )
+                    : null}
+                  onblur={interactiveMarkers
+                    ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
+                    : null}
+                  role="button"
+                  aria-label={tooltipContent}
+                  tabindex="0"
+                  onkeydown={interactiveMarkers
+                    ? (event) => onClickMarker(event, rowValue, markerId)
+                    : null}
+                  pointer-events={interactiveMarkers ? null : "none"}
+                  transform="translate({xFunction(
+                    positionChart.min,
+                    positionChart.max,
+                  )(rowValue.value) + markerRadius},{positionChart.chartHeight /
+                    2})"
+                >
+                  <circle
+                    r={markerRadius}
+                    cx="0"
+                    cy="0"
+                    fill={rowValue.color}
+                    stroke="white"
+                    opacity={rowValue.opacity}
+                  ></circle>
+                </g>
+              {/if}
+            {/each}
           {/each}
-        {/each}
-      </svg>
-    </div>
-    {#if openStates[positionChart.label]}
-      <div
-        class="accordion"
-        style="grid-column:1 / -1; background-color:lightgrey; padding:10px; margin-right:{markerRadius}px"
-      >
-        <p>
-          {positionChart.moreInfo}
-        </p>
-      </div>
-    {/if}
-    {#if positionChart.divider}
-      <div style="grid-column:1 / -1">
-        <svg width="100%" height="10">
-          <line
-            x1="0"
-            y1="5"
-            x2="100%"
-            y2="5"
-            stroke="black"
-            stroke-width="2"
-            stroke-dasharray="2,6"
-          ></line>
         </svg>
-      </div>{/if}
-  {/each}
+      </div>
+      {#if moreInfoTogglesArray[i]}
+        <div class="accordion" style="grid-column:1 / -1" aria-live="assertive">
+          <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
+          ></InsetText>
+        </div>
+      {/if}
+      {#if positionChart.divider}
+        <div
+          style="grid-column:1 / -1; border-bottom: solid 1px #d5dade;"
+        ></div>{/if}
+    {/each}
 
-  {#if showAxis}
-    {#if showIcon}
-      <div class="empty"></div>
+    {#if showAxis}
+      {#if showIcon}
+        <div class="empty"></div>
+      {/if}
+      {#if showLabel}
+        <div class="empty"></div>
+      {/if}
+      <div class="axis" aria-hidden="true">
+        <PositionChartAxis {markerRadius} {barWidth} textSize={axisTextSize}
+        ></PositionChartAxis>
+      </div>
     {/if}
-    {#if showLabel}
-      <div class="empty"></div>
+    {#if activeMarkerId}
+      <ValueLabel
+        {activeMarkerId}
+        labelColor="lightgrey"
+        labelTextColor="black"
+        {labelText}
+        {tooltipContent}
+        {xFunction}
+        {yFunction}
+        {x}
+        {y}
+        {markerRect}
+        {tooltipSnippet}
+      ></ValueLabel>
     {/if}
-    <div class="axis">
-      <PositionChartAxis {markerRadius} {barWidth}></PositionChartAxis>
-    </div>
-  {/if}
-  {#if activeMarkerId}
-    <ValueLabel
-      {activeMarkerId}
-      labelColor="lightgrey"
-      labelTextColor="black"
-      {labelText}
-      {tooltipContent}
-      {xFunction}
-      {yFunction}
-      {x}
-      {y}
-      {markerRect}
-      {tooltipSnippet}
-    ></ValueLabel>
-  {/if}
+  </div>
 </div>
 
 <style>
@@ -445,18 +484,10 @@
          column-gap: 2%;
     row-gap: 2%;
   }
-  .label {
-    text-align: right;
-    margin: 0;
-    line-height: 1.05;
-  }
   .chart {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     min-width: 0;
   }
-  .accordion {
-    max-height: 500px !important; /* large enough to fit content */
-  }
 </style>

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

@@ -11,7 +11,7 @@ declare const PositionChart: import("svelte").Component<{
     showAxis?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
@@ -21,6 +21,8 @@ declare const PositionChart: import("svelte").Component<{
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
+    markerRadius?: any;
+    options?: any[];
     rowData?: any[];
     allData?: any[];
     markerStyles?: Record<string, any>;
@@ -40,6 +42,8 @@ declare const PositionChart: import("svelte").Component<{
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    ariaLabel: any;
+    axisTextSize: any;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -49,7 +53,7 @@ type $$ComponentProps = {
     showAxis?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
@@ -59,6 +63,8 @@ type $$ComponentProps = {
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
+    markerRadius?: any;
+    options?: any[];
     rowData?: any[];
     allData?: any[];
     markerStyles?: Record<string, any>;
@@ -78,4 +84,6 @@ type $$ComponentProps = {
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    ariaLabel: any;
+    axisTextSize: any;
 };