Adapting position chart to plot multiple areas

Author: ajhillman-ddj

src/lib/components/data-vis/map/Map.svelte

@@ -116,6 +116,7 @@
     promoteProperty = "LSOA21CD",
     clickedArea = $bindable([]),
     areaToColorLookup,
+    hoveredArea = $bindable(),
   }: {
     data?: object[];
     countries?: string[];
@@ -196,6 +197,7 @@
     promoteProperty?: string;
     clickedArea?: [];
     areaToColorLookup?: object;
+    hoveredArea?: string;
   } = $props();
 
   // ISO-3166/ONS-style prefixes for area codes
@@ -406,13 +408,10 @@
     geoSource === "file" ? joinData(filteredGeoJsonData, dataWithColor) : null,
   );
 
-  let hoveredArea = $state();
   let hoveredAreaArray = $derived(hoveredArea ? [hoveredArea] : []);
   let hoveredAreaData = $state();
   let currentMousePosition = $state();
 
-  $inspect(clickedArea, hoveredAreaArray);
-
   function convertToLngLatBounds(coords: LngLatBoundsLike): LngLatBoundsLike {
     const bounds = new LngLatBounds(coords[0], coords[0]);
 
@@ -489,7 +488,7 @@
       map?.setMaxBounds(undefined);
     }
   });
-  $inspect(clickedArea);
+
   let paintObject = $derived(
     clickedArea?.length > 0
       ? {

src/lib/components/data-vis/position-chart/PositionChart.svelte

@@ -15,6 +15,8 @@
 
   const range = Array.from({ length: 10 }, (_, i) => i);
 
+  $inspect(value, "what is it");
+
   // the 'chart' is the bar and the marker - its height is a prop and its width is binded to clientWidth
 
   // the 'marker' is the circle
@@ -67,12 +69,26 @@
             fill={colorScale[number]}
           ></rect></g
         >{/each}
-      <g
-        transform="translate({xFunction(value) + markerRadius},{chartHeight /
-          2})"
-        ><circle r={markerRadius} cx="0" cy="0" fill="#CA357C" stroke="white"
-        ></circle></g
-      >
+      {console.log(value, typeof value)}
+      {#if typeof value === "number"}
+        <g
+          transform="translate({xFunction(value) + markerRadius},{chartHeight /
+            2})"
+        >
+          <circle r={markerRadius} cx="0" cy="0" fill="#CA357C" stroke="white"
+          ></circle></g
+        >
+      {:else}
+        {#each value as rowValue, i}
+          <g
+            transform="translate({xFunction(rowValue) +
+              markerRadius},{chartHeight / 2})"
+          >
+            <circle r={markerRadius} cx="0" cy="0" fill="#CA357C" stroke="white"
+            ></circle>
+          </g>
+        {/each}
+      {/if}
     </svg>
   </div>