Add meta data to testData.json and pass as prop

Author: Miles Hinchliffe

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

@@ -3,7 +3,12 @@
 
   // import { areSameLanguages } from "@maptiler/sdk";
 
-  let { componentNameProp = undefined, data = undefined } = $props();
+  let {
+    componentNameProp = undefined,
+    data = undefined,
+    metricDirection = undefined,
+    metaData = undefined,
+  } = $props();
 
   let localCopyOfData = $state([...data]);
 
@@ -78,25 +83,6 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
-
-  const metricInfo = {
-    "Household waste recycling rate": {
-      direction: "higher-is-better",
-      explainer: "Percentage of household waste sent for recycling.",
-      label: "Household recycling rate (%)",
-    },
-    "Recycling contamination rate": {
-      direction: "lower-is-better",
-      explainer:
-        "Percentage of recycling that is contaminated and cannot be processed.",
-      label: "Recycling contamination rate (%)",
-    },
-    "Residual household waste": {
-      direction: "lower-is-better",
-      explainer: "Amount of non-recyclable waste per household (kg/year).",
-      label: "Household waste (kg)",
-    },
-  };
 </script>
 
 {#snippet propNameAndValue(marginTW, paddingTW, text)}
@@ -108,8 +94,6 @@
 <div class="p-4">
   <h4>{componentNameProp} component</h4>
 
-  <br />
-
   <div class="legend">
     <div>Colour key:</div>
     {#each colorKey as key}
@@ -126,10 +110,10 @@
         ><tr>
           <th class="col-one-header">Area</th>
           {#each metrics as metric}
-            <th title={metricInfo[metric].explainer}>
+            <th title={metaData[metric].explainer}>
               <div class="header">
                 <div class="header-top">
-                  <div class="metric">{metricInfo[metric].label}</div>
+                  <div class="metric">{metaData[metric].label}</div>
                   <div class="sorting-button">
                     <button
                       onclick={() => {
@@ -146,7 +130,7 @@
                   </div>
                 </div>
                 <div class="metric-explainer">
-                  {metricInfo[metric].explainer}
+                  {metaData[metric].explainer}
                 </div>
               </div>
             </th>
@@ -158,7 +142,7 @@
           <tr>
             <td class="areas">{row["areaName"]}</td>
             {#each metrics as metric}
-              {#if metricInfo[metric].direction === "higher-is-better"}
+              {#if metaData[metric].direction === "Higher is better"}
                 <td
                   style="background-color: {normToColor(
                     row[metric + '__normalised'],

src/routes/+layout.ts

@@ -108,6 +108,8 @@ export const load: LayoutLoad = async (event) => {
 
     let tableData = Object.values(groupedTableData);
 
+    let metaData = testData.metaData
+
   return {
     metrics,
     areas,
@@ -123,5 +125,6 @@ export const load: LayoutLoad = async (event) => {
     componentDirectories,
     uiComponents,
     componentTree,
+    metaData,
   };
 };

src/wrappers/components/data-vis/table/TableWrapper.svelte

@@ -169,79 +169,23 @@
         value: data.tableData,
       },
       {
-        name: "jsObjectProp",
-        category: "Input props",
-        value: [
-          {
-            name: "Pikachu",
-            type: "Electric",
-            color: "#fde047",
-          },
-          {
-            name: "Charmander",
-            type: "Fire",
-            color: "#fca5a5",
-          },
-          {
-            name: "Squirtle",
-            type: "Water",
-            color: "#93c5fd",
-          },
-          {
-            name: "Bulbasaur",
-            type: "Grass",
-            color: "#86efac",
-          },
-        ],
-        description: {
-          markdown: true,
-          arr: [
-            `This prop passes the selected a JS object to the component.`,
-            `The object can be directly edited. A notification will alert the user is any edits create an invalid object`,
-          ],
-        },
-      },
-      {
-        name: "functionProp",
-        category: "Fixed props",
-
-        isRequired: true,
-        value: function (event, pokemon) {
-          window.alert(
-            `The ${this.name} function has been triggered. Open the 'Fixed props' panel to see updated values.`,
-          );
-
-          this.functionElements.counter += 1;
-          Object.keys(this.functionElements.dataset).forEach((el) => {
-            this.functionElements.dataset[el] = event.currentTarget.dataset[el];
-          });
-        },
-        functionElements: {
-          dataset: { role: null, id: null },
-          counter: 0,
-          functionAsString: `function (event, pokemon) {
-window.alert(
-  "The \${this.name} function has been triggered. Open the 'Fixed props' panel to see updated values.",
-);
-
-this.functionElements.counter += 1;
-Object.keys(this.functionElements.dataset).forEach((el) => {
-  this.functionElements.dataset[el] = event.currentTarget.dataset[el];
-});
-}`,
-        },
-        description: {
-          markdown: true,
-          arr: [
-            `This prop passes a function to the ${pageName} component. It works slightly differently to other props.`,
-            `Firstly, it is not editable via the UI.`,
-            `Secondly, the code snippet on the left is not actually based on the value. Instead, it is example code based on the <code>functionElements.functionAsString</code> property, and is optional.`,
-            ,
-            `For event functions, you can define your function so that it updates the <code>functionElements.counter</code> property each time it runs.`,
-            `For event functions, you can also define your function so that it grabs data from its target, which are then stored in <code>functionElements.dataset</code> and displayed in the UI (trigger your event to see this in action).`,
-          ],
-        },
+        name: "metaData",
+        category: "Data",
+        visible: false,
+        value: data.metaData,
       },
+      // {
+      //   name: "metricDirection",
+      //   category: "Input props",
+      //   propType: "radio",
+      //   options: ["Higher is better", "Lower is better"],
+      //   description: {
+      //     markdown: true,
+      //     arr: [
+      //       `Select the metric direction. Is a higher or lower metric value good?`,
+      //     ],
+      //   },
+      // },
     ]),
   );
 

static/data/testData.json

@@ -52542,5 +52542,24 @@
     "E07000052": "West Dorset",
     "E07000191": "West Somerset",
     "E07000053": "Weymouth and Portland"
+    },
+    "metaData" : {
+        
+            "Household waste recycling rate": {
+              "direction": "Higher is better",
+              "explainer": "Percentage of household waste sent for recycling.",
+              "label": "Household recycling rate (%)"
+            },
+            "Recycling contamination rate": {
+              "direction": "Lower is better",
+              "explainer":
+                "Percentage of recycling that is contaminated and cannot be processed.",
+              "label": "Recycling contamination rate (%)"
+            },
+            "Residual household waste": {
+              "direction": "Lower is better",
+              "explainer": "Amount of non-recyclable waste per household (kg/year).",
+              "label": "Household waste (kg)"
+            }
+          }
     }
-}