Start a radar chart for expressing route preferences, but don't use it

yet

viewer/package.json

@@ -25,6 +25,8 @@
     "vite-plugin-wasm-pack": "0.1.11"
   },
   "dependencies": {
+    "chart.js": "^4.4.0",
+    "chartjs-plugin-dragdata": "^2.2.5",
     "pmtiles": "^2.10.0",
     "svelte-maplibre": "^0.6.0"
   }

viewer/src/EdgeCostApp.svelte

@@ -23,6 +23,7 @@
   import Layout from "./Layout.svelte";
   import Legend from "./Legend.svelte";
   import Loading from "./Loading.svelte";
+  import PreferenceRadar from "./PreferenceRadar.svelte";
   import PropertiesTable from "./PropertiesTable.svelte";
   import SequentialLegend from "./SequentialLegend.svelte";
 
@@ -244,6 +245,7 @@
       <hr />
       <CostFunction bind:cost />
     {/if}
+    <PreferenceRadar />
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
     <MapLibre

viewer/src/PreferenceRadar.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { Chart, registerables } from "chart.js";
+  import ChartJSdragDataPlugin from "chartjs-plugin-dragdata";
+
+  Chart.register(...registerables);
+  Chart.register(ChartJSdragDataPlugin);
+
+  let lts = 50;
+  let nearbyAmenities = 30;
+  let greenspace = 20;
+  let colors = ["red", "blue", "green"];
+
+  $: sum = lts + nearbyAmenities + greenspace;
+
+  function makeChart(node) {
+    let options = {
+      type: "radar",
+      data: {
+        labels: ["LTS", "Amenities", "Greenspace"],
+        datasets: [
+          {
+            label: "Routing preferences",
+            data: [lts, nearbyAmenities, greenspace],
+            pointHitRadius: 25,
+          },
+        ],
+      },
+      options: {
+        responsive: false,
+        onHover: function (e) {
+          const point = e.chart.getElementsAtEventForMode(
+            e,
+            "nearest",
+            { intersect: true },
+            false
+          );
+          e.native.target.style.cursor = point.length ? "grab" : "default";
+        },
+        plugins: {
+          dragData: {
+            round: 1,
+            showTooltip: true,
+            onDragStart: function (e) {
+              e.target.style.cursor = "grabbing";
+            },
+            onDragEnd: function (e, datasetIndex, index, value) {
+              e.target.style.cursor = "default";
+              if (index == 0) {
+                lts = value;
+              } else if (index == 1) {
+                nearbyAmenities = value;
+              } else if (index == 2) {
+                greenspace = value;
+              }
+            },
+          },
+        },
+        scales: {
+          r: {
+            min: 0,
+            max: 100,
+            stepSize: 1,
+            pointLabels: {
+              color: colors,
+              font: {
+                weight: "bold",
+                size: 15,
+              },
+            },
+          },
+        },
+      },
+    };
+    new Chart(node.getContext("2d"), options);
+  }
+</script>
+
+<canvas use:makeChart style="width: 100%; height: 400px;" />
+<ul>
+  <li style:color={colors[0]}>LTS: {((100 * lts) / sum).toFixed(0)}%</li>
+  <li style:color={colors[1]}>
+    Nearby amenities: {((100 * nearbyAmenities) / sum).toFixed(0)}%
+  </li>
+  <li style:color={colors[2]}>
+    Greenspace proximity: {((100 * greenspace) / sum).toFixed(0)}%
+  </li>
+</ul>