Merge branch 'table-generalise-input-data' into main-check-merge

Author: Miles Hinchliffe

src/lib/components/data-vis/table/Table.svelte

@@ -11,10 +11,51 @@
 
   let localCopyOfData = $state([...data]);
 
-  const metrics = Object.keys(localCopyOfData[0]).slice(
-    1,
-    localCopyOfData[0].length,
-  );
+  function hasUniqueValues(array, key) {
+    const seen = new Set();
+    for (const obj of array) {
+      if (seen.has(obj[key])) {
+        return false; // Duplicate found
+      }
+      seen.add(obj[key]);
+    }
+    return true; // All values are unique
+  }
+
+  // $inspect(
+  //   localCopyOfData[0].areaName,
+  //   "data type is",
+  //   typeof localCopyOfData[0].areaName,
+  // );
+  // $inspect(
+  //   localCopyOfData[0]["Household waste recycling rate"],
+  //   "data type is",
+  //   typeof localCopyOfData[0]["Household waste recycling rate"],
+  // );
+
+  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);
+  }
+
+  $inspect("columns array is ", columns);
+
+  const metrics = columns
+    .filter((column) => column.dataType === "number")
+    .map((column) => column.key);
+
+  $inspect("metrics is", metrics);
 
   let sortState = $state({ column: "sortedColumn", order: "ascending" });
 
@@ -82,13 +123,9 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
-</script>
 
-{#snippet propNameAndValue(marginTW, paddingTW, text)}
-  <span class="bg-slate-100 inline-block italic {marginTW} {paddingTW} rounded"
-    >{text}</span
-  >
-{/snippet}
+  $inspect("the first column key is", columns[0].key);
+</script>
 
 <div class="p-4">
   {#if colourScale === "On"}
@@ -107,28 +144,25 @@
       <caption class="govuk-table__caption">{caption}</caption>
       <thead class="govuk-table__head"
         ><tr class="govuk-table__row">
-          <th scope="col" class="govuk-table__header" aria-sort="ascending"
-            >Area</th
-          >
-          {#each metrics as metric}
+          {#each columns as column}
             <th
               scope="col"
-              class="govuk-table__header govuk-table__header--numeric"
-              title={metaData[metric].explainer}
+              class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
+              title={metaData[column.key].explainer}
               aria-sort="none"
             >
               <div class="header">
                 <Button
-                  textContent={metaData[metric].shortLabel}
+                  textContent={metaData[column.key].shortLabel}
                   buttonType={"table header"}
                   onClickFunction={() => {
                     const newDirection =
-                      sortState.column === metric &&
+                      sortState.column === column.key &&
                       sortState.order === "ascending"
                         ? "descending"
                         : "ascending";
 
-                    updateSortState(metric, newDirection);
+                    updateSortState(column.key, newDirection);
                     sortFunction();
                   }}
                 ></Button>
@@ -140,31 +174,34 @@
       <tbody class="govuk-table__body">
         {#each localCopyOfData as row}
           <tr class="govuk-table__row">
-            <td class="govuk-table__cell">{row["areaName"]}</td>
-            {#each metrics as metric}
-              {#if colourScale === "On"}
-                {#if metaData[metric].direction === "Higher is better"}
-                  <td
-                    class="govuk-table__cell govuk-table__cell--numeric"
-                    style="background-color: {normToColor(
-                      row[metric + '__normalised'],
-                    )}"
-                    data-sort-value="42">{row[metric]}</td
-                  >
+            {#each columns as column}
+              {#if column.dataType === "number"}
+                {#if colourScale === "On"}
+                  {#if metaData[column.key].direction === "Higher is better"}
+                    <td
+                      class="govuk-table__cell govuk-table__cell--numeric"
+                      style="background-color: {normToColor(
+                        row[column.key + '__normalised'],
+                      )}"
+                      data-sort-value="42">{row[column.key]}</td
+                    >
+                  {:else}
+                    <td
+                      class="govuk-table__cell govuk-table__cell--numeric"
+                      style="background-color: {normToColorReverse(
+                        row[column.key + '__normalised'],
+                      )}"
+                      data-sort-value="42">{row[column.key]}</td
+                    >
+                  {/if}
                 {:else}
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
-                    style="background-color: {normToColorReverse(
-                      row[metric + '__normalised'],
-                    )}"
-                    data-sort-value="42">{row[metric]}</td
+                    data-sort-value="42">{row[column.key]}</td
                   >
                 {/if}
               {:else}
-                <td
-                  class="govuk-table__cell govuk-table__cell--numeric"
-                  data-sort-value="42">{row[metric]}</td
-                >
+                <td class="govuk-table__cell">{row[column.key]}</td>
               {/if}
             {/each}
           </tr>

static/data/testData.json

@@ -52545,6 +52545,12 @@
     },
     "metaData" : {
 
+            "areaName": {
+              "direction": "none",
+              "explainer": "Local authorities",
+              "label": "Local Authority",
+              "shortLabel": "Local Authority"
+            },
             "Household waste recycling rate": {
               "direction": "Higher is better",
               "explainer": "Percentage of household waste sent for recycling.",