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

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

@@ -177,7 +177,6 @@
         {#if topLabel && layout.topLabelY !== null}
           <text x={0} y={layout.topLabelY + 14} fill="#666" font-size="0.75em">
             Number of areas
-            {minX}, {maxX}
           </text>
         {/if}
 
@@ -201,28 +200,14 @@
 
         <g transform="translate(0, {layout.chartY})">
           {#if showYAxis}
-            <!-- <Axis
-              bind:axisDomain
-              bind:ticksArray={ticksDomain}
-              {chartHeight}
-              chartWidth={chartWidth - markerRadius * 2}
-              orientation={{ axis: "x", position: "bottom" }}
-              range={[markerRadius, chartWidth - markerRadius]}
-              domain={[xValueFirst, xValueLast]}
-              {min}
-              {max}
-              fontSize={14}
-              {floor}
-              {ceiling}
-              {numberOfTicks}
-              {polarity}
-              {showTickMarks}
-              {showGridlines}
-              {labelFormatter}
-              {niceTicks}
-              {markerRadius}
-              {distribution}
-            ></Axis> -->
+            {#each [3, 6, 9] as x, i}
+              <path
+                transform="translate(0, {scaleLinear([0, 9], [height, 0])(x)})"
+                d={`M0 0 l${containerWidth - 25} 0`}
+                stroke="grey"
+                stroke-width={0.25}
+              ></path>
+            {/each}
           {/if}
 
           {#each bins as bin, i}

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

@@ -85,7 +85,7 @@
     onMouseLeaveMarker = (event, marker, dataId) => {
       activeMarkerId = null;
     },
-    activeMarkerId = undefined,
+    activeMarkerId = $bindable(undefined),
     distribution = [],
     floor = undefined,
     ceiling = undefined,
@@ -225,7 +225,7 @@
         .colors(2);
 
       const averageNormalised =
-        (averageValue - xTickFirst) / (xTickLast - xTickFirst);
+        (averageValue - chartDomain[0]) / (chartDomain[1] - chartDomain[0]);
 
       const binColors = chroma
         .scale([extremeColors[0], midColor, extremeColors[1]])
@@ -275,7 +275,8 @@
       Math.min(
         nSegments - 1,
         Math.floor(
-          (nSegments * (value - xTickFirst)) / (xTickLast - xTickFirst),
+          (nSegments * (value - chartDomain[0])) /
+            (chartDomain[1] - chartDomain[0]),
         ),
       ),
     );
@@ -391,6 +392,30 @@
               fill={colorScale[number]}
             ></rect></g
           >{/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}
         {#each Object.entries(positionChart.rowData) as [tier, points]}
           {#each points as rowValue, i}
             {#if !isNaN(Number(rowValue.value))}
@@ -422,6 +447,7 @@
                   markerRadius},{positionChart.chartHeight / 2})"
               >
                 {#if rowValue.shape === "line"}
+                  {console.log("seg", segmentIndex(rowValue.value))}
                   <line
                     x1={0}
                     x2={0}
@@ -430,7 +456,7 @@
                     stroke={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke-width={rowValue.markerRadius * 5}
+                    stroke-width={rowValue.markerRadius * 7}
                     opacity={0}
                     pointer-events={rowValue.pointerEvents}
                   ></line>
@@ -455,7 +481,7 @@
                     fill={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke-width={3}
+                    stroke-width={5}
                     opacity={rowValue.opacity}
                   ></circle>
                   <circle
@@ -465,8 +491,8 @@
                     fill={rowValue.color === "inherit"
                       ? colorScale[segmentIndex(rowValue.value)]
                       : rowValue.color}
-                    stroke="black"
-                    stroke-width={1.5}
+                    stroke="#111"
+                    stroke-width={3}
                     opacity={rowValue.opacity}
                   ></circle>
                 {/if}
@@ -474,30 +500,7 @@
             {/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) +
@@ -511,7 +514,8 @@
             >
               <tspan x="1" dy="15">▲</tspan>
               <tspan x="1" dy="4">|</tspan>
-              <tspan font-family="GDS Transport" x="1" dy="13">Average</tspan>
+
+              <tspan font-family="GDS Transport" x="1" dy="15">Average</tspan>
             </text>
           </g>
         {/if}

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

@@ -58,7 +58,7 @@ declare const PositionChart: import("svelte").Component<{
     niceTicks?: boolean;
     ticksDomain?: any[];
     axisDomain?: any[];
-}, {}, "chartWidth" | "axisDomain" | "ticksDomain">;
+}, {}, "chartWidth" | "axisDomain" | "activeMarkerId" | "ticksDomain">;
 type $$ComponentProps = {
     value?: any;
     min?: any;

package/dist/components/data-vis/table/Table.svelte

@@ -2,48 +2,63 @@
   import Button from "./../../ui/Button.svelte";
 
   let {
-    data = undefined,
-    metaData = undefined,
+    data = [],
+    metadata = {},
     caption = undefined,
     colourScale = undefined,
   } = $props();
 
-  let localCopyOfData = $derived([...data]);
+  let localCopyOfData = $state([...(data ?? [])]);
+
+  let sortState = $state({
+    column: null,
+    order: null, // "ascending" | "descending" | null
+  });
+
+  $effect(() => {
+    localCopyOfData = [...(data ?? [])];
+  });
 
   function hasUniqueValues(array, key) {
     const seen = new Set();
     for (const obj of array) {
       if (seen.has(obj[key])) {
-        return false; // Duplicate found
+        return false;
       }
       seen.add(obj[key]);
     }
-    return true; // All values are unique
+    return true;
   }
 
-  let columns = [];
-
-  for (const column in localCopyOfData[0]) {
-    // create a variable to store whether the key is unique or not
-    const keyIsUnique = hasUniqueValues(localCopyOfData, column);
-    // get data type of each column
-    const columnDataType = typeof localCopyOfData[0][column];
-    // for each one create an object and push it into the array
-    const columnObject = {
-      key: column,
-      isUnique: keyIsUnique,
-      dataType: columnDataType,
-    };
-    columns.push(columnObject);
-  }
+  let columns = $derived.by(() => {
+    if (!data || data.length === 0) return [];
+
+    const derivedColumns = [];
 
-  $inspect("columns array is ", columns);
+    for (const column in data[0]) {
+      const keyIsUnique = hasUniqueValues(data, column);
+      const columnDataType = typeof data[0][column];
+
+      derivedColumns.push({
+        key: column,
+        isUnique: keyIsUnique,
+        dataType: columnDataType,
+        id: metadata[column].order,
+      });
+    }
+
+    const orderedColumns = derivedColumns.sort((a, b) => a.id - b.id);
+
+    return orderedColumns;
+  });
 
-  const metrics = columns
-    .filter((column) => column.dataType === "number")
-    .map((column) => column.key);
+  $inspect(columns);
 
-  let sortState = $state({ column: "sortedColumn", order: "ascending" });
+  const metrics = $derived(
+    columns
+      .filter((column) => column.dataType === "number")
+      .map((column) => column.key),
+  );
 
   function updateSortState(columnToSort, sortOrder) {
     sortState.column = columnToSort;
@@ -51,61 +66,63 @@
   }
 
   function sortFunction() {
-    if (typeof localCopyOfData[0][sortState["column"]] === "number") {
+    if (!localCopyOfData.length || !sortState.column || !sortState.order)
+      return;
+
+    const sorted = [...localCopyOfData];
+
+    if (typeof sorted[0][sortState.column] === "number") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort(
-          (a, b) => a[sortState.column] - b[sortState.column],
-        );
+        sorted.sort((a, b) => a[sortState.column] - b[sortState.column]);
       } else {
-        localCopyOfData.sort(
-          (a, b) => b[sortState.column] - a[sortState.column],
-        );
+        sorted.sort((a, b) => b[sortState.column] - a[sortState.column]);
       }
     }
-    if (typeof localCopyOfData[0][sortState["column"]] === "string") {
+
+    if (typeof sorted[0][sortState.column] === "string") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort((a, b) =>
-          a[sortState["column"]].localeCompare(b[sortState["column"]]),
+        sorted.sort((a, b) =>
+          a[sortState.column].localeCompare(b[sortState.column]),
         );
       } else {
-        localCopyOfData.sort((a, b) =>
-          b[sortState["column"]].localeCompare(a[sortState["column"]]),
+        sorted.sort((a, b) =>
+          b[sortState.column].localeCompare(a[sortState.column]),
         );
       }
     }
-  }
-
-  $inspect(
-    sortState,
-    localCopyOfData[0],
-    typeof localCopyOfData[0][sortState["column"]],
-  );
 
-  // heat map
-
-  // calculate the min and max of each metric
-  const minAndMaxValues = {}; // create an empty object to store them in
-  for (const metric of metrics) {
-    // get the values
-    const metricValues = localCopyOfData.map((item) => item[metric]);
-    const min = Math.min(...metricValues);
-    const max = Math.max(...metricValues);
-    // store them
-    minAndMaxValues[metric] = { min, max };
+    localCopyOfData = sorted;
   }
 
-  localCopyOfData = localCopyOfData.map((row) => {
-    const rowWithNorms = { ...row };
+  const minAndMaxValues = $derived.by(() => {
+    const result = {};
 
     for (const metric of metrics) {
-      const { min, max } = minAndMaxValues[metric];
-      const value = row[metric];
-      const normalisedValue = (value - min) / (max - min);
+      const metricValues = localCopyOfData.map((item) => item[metric]);
+      const min = Math.min(...metricValues);
+      const max = Math.max(...metricValues);
 
-      rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      result[metric] = { min, max };
     }
 
-    return rowWithNorms;
+    return result;
+  });
+
+  const displayRows = $derived.by(() => {
+    return localCopyOfData.map((row) => {
+      const rowWithNorms = { ...row };
+
+      for (const metric of metrics) {
+        const { min, max } = minAndMaxValues[metric];
+        const value = row[metric];
+
+        const normalisedValue = max === min ? 0.5 : (value - min) / (max - min);
+
+        rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      }
+
+      return rowWithNorms;
+    });
   });
 
   function normToColor(norm) {
@@ -119,6 +136,27 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
+
+  function handleSort(columnKey) {
+    let newDirection = "ascending";
+
+    if (sortState.column === columnKey) {
+      if (sortState.order === "ascending") {
+        newDirection = "descending";
+      } else if (sortState.order === "descending") {
+        newDirection = null;
+      }
+    }
+
+    if (newDirection === null) {
+      updateSortState(null, null);
+      localCopyOfData = [...(data ?? [])];
+      return;
+    }
+
+    updateSortState(columnKey, newDirection);
+    sortFunction();
+  }
 </script>
 
 <div class="p-4">
@@ -126,7 +164,10 @@
     <div class="legend">
       <div>Colour key:</div>
       {#each colorKey as key}
-        <div class="color-keys" style="background-color: {normToColor(key[1])}">
+        <div
+          class="color-keys"
+          style={`background-color: ${normToColor(key[1])}`}
+        >
           {key[0]}
         </div>
       {/each}
@@ -135,62 +176,65 @@
 
   <div class="table-container">
     <div id="table-caption" class="sticky-caption">{caption}</div>
+
     <table class="govuk-table" data-module="moj-sortable-table">
-      <thead class="govuk-table__head"
-        ><tr class="govuk-table__row">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
           {#each columns as column}
             <th
               scope="col"
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
-              title={metaData[column.key].explainer}
-              aria-sort={sortState.column !== column.key
+              title={metadata[column.key]?.explainer}
+              style={metadata[column.key]?.width
+                ? `min-width: ${metadata[column.key].width}`
+                : undefined}
+              aria-sort={sortState.column !== column.key ||
+              sortState.order === null
                 ? "none"
-                : sortState.column === column.key &&
-                    sortState.order === "descending"
+                : sortState.order === "descending"
                   ? "descending"
                   : "ascending"}
             >
               <div class="header">
                 <Button
-                  textContent={metaData[column.key].shortLabel}
+                  textContent={metadata[column.key]?.shortLabel ?? column.key}
                   buttonType={"table header"}
-                  onClickFunction={() => {
-                    const newDirection =
-                      sortState.column === column.key &&
-                      sortState.order === "ascending"
-                        ? "descending"
-                        : "ascending";
-
-                    updateSortState(column.key, newDirection);
-                    sortFunction();
-                  }}
+                  direction={sortState.column === column.key
+                    ? sortState.order
+                    : null}
+                  onClickFunction={() => handleSort(column.key)}
                 ></Button>
-              </div></th
-            >
+              </div>
+            </th>
           {/each}
-        </tr></thead
-      >
+        </tr>
+      </thead>
+
       <tbody class="govuk-table__body">
-        {#each localCopyOfData as row}
+        {#each displayRows as row}
           <tr class="govuk-table__row">
             {#each columns as column}
               {#if column.dataType === "number"}
                 {#if colourScale === "On"}
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
-                    style="background-color: {metaData[column.key].direction ===
-                    'Higher is better'
-                      ? normToColor(row[column.key + '__normalised'])
-                      : normToColorReverse(row[column.key + '__normalised'])}"
-                    >{row[column.key]}</td
+                    style={`background-color: ${
+                      metadata[column.key]?.direction === "Higher is better"
+                        ? normToColor(row[column.key + "__normalised"])
+                        : normToColorReverse(row[column.key + "__normalised"])
+                    }`}
                   >
+                    {@html row[column.key]}
+                  </td>
                 {:else}
-                  <td class="govuk-table__cell govuk-table__cell--numeric"
-                    >{row[column.key]}</td
-                  >
+                  <td class="govuk-table__cell govuk-table__cell--numeric">
+                    {@html row[column.key]}
+                  </td>
                 {/if}
               {:else}
-                <td class="govuk-table__cell">{row[column.key]}</td>
+                <td class="govuk-table__cell">
+                  {@html row[column.key]}
+                </td>
               {/if}
             {/each}
           </tr>
@@ -202,7 +246,7 @@
 
 <style>
   .table-container {
-    max-height: 85vh;
+    max-height: 60vh;
     overflow-y: auto;
     overflow-x: scroll;
     width: 100%;
@@ -228,8 +272,14 @@
     gap: 20px;
     margin: 10px;
   }
+
   .color-keys {
     border-radius: 10%;
     padding: 6px;
   }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
 </style>

package/dist/components/data-vis/table/Table.svelte.d.ts

@@ -4,14 +4,14 @@ type Table = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Table: import("svelte").Component<{
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 };