add similar areas list to area indicators pages

Author: bothness

src/routes/(app)/app/+layout.svelte

@@ -37,7 +37,7 @@
 		analyticsEvent(eventData);
 	});
 
-	console.log($page.data);
+	// console.log($page.data);
 </script>
 
 <svelte:head>

src/routes/(app)/app/areas/[code]/indicators/+page.svelte

@@ -4,10 +4,12 @@
   import {
     Hero,
     Grid,
-    Section,
+    Details,
     NavSections,
     NavSection,
+    Dropdown
   } from "@onsvisual/svelte-components";
+  import { formatName } from "@onsvisual/robo-utils";
   import BigNumber from "./BigNumber.svelte";
   import AreasModal from "$lib/components/modals/AreasModal.svelte";
   import OptionsModal from "$lib/components/modals/OptionsModal.svelte";
@@ -24,6 +26,7 @@
       data.periods[0],
       data.periods[data.periods.length - 1],
     ],
+    selectedCluster: data.related.similar[0],
     showConfidenceIntervals: false,
   });
   setContext("pageState", pageState);
@@ -78,9 +81,22 @@
     </NavSection>
   {/each}
   <NavSection title="Select an indicator" />
+  {#if data.related.similar[0]}
+    <NavSection title="Similar areas">
+      <p>See which areas are similar to {formatName(data.area.properties.areanm, "the")} based on specific groups of indicators. These clusters of areas are based on an analysis carried out by the ONS.</p>
+      <Dropdown label="Select a group of indicators" options={data.related.similar} bind:value={pageState.selectedCluster}/>
+      <Details title="Show the 20 most similar areas to {formatName(data.area.properties.areanm, "the")}">
+        <ol>
+          {#each pageState.selectedCluster.similar as area}
+            <li>{area.areanm}</li>
+          {/each}
+        </ol>
+      </Details>
+    </NavSection>
+  {/if}
   <NavSection title="Get the data">
     <p>
-      Download all datasets that include {data.area.properties.areanm} in a
+      Download all datasets that include {formatName(data.area.properties.areanm, "the")} in a
       <a
         href={resolve(`/api/v1/data.csv?hasGeo=${data.area.properties.areacd}&time=all&excludeMultivariate=true`)}
         download="data.csv">CSV</a

src/routes/(app)/app/areas/[code]/indicators/+page.ts

@@ -30,20 +30,18 @@ export const load: PageLoad = async ({ params, parent, fetch }) => {
       a.areanm.localeCompare(b.areanm)
     );
     const related = await (await fetch(relatedPath)).json();
-    const geoGroups = [
-      { id: "level", label: `All ${pluralise(geoLevel.label)}`, geoLevel: geoLevel.key },
-      {
-        id: "siblings",
-        label: `All ${pluralise(geoLevel.label)} ${formatName(related.siblings.parent.areanm, "in")}`,
-        geoLevel: geoLevel.key,
-        geoExtent: related.siblings.parent.areacd,
-      },
-      {
-        id: "cluster",
-        label: `Similar demographics to ${formatName(area.properties.areanm, "the")}`,
-        geoCluster: `demographic_${related.similar[2].cluster.key}`,
-      },
-    ];
+    const geoGroups = [{ id: "level", label: `All ${pluralise(geoLevel.label)}`, geoLevel: geoLevel.key }];
+		if (geoLevel && related?.siblings?.parent) geoGroups.push({
+			id: "siblings",
+			label: `All ${pluralise(geoLevel.label)} ${formatName(related.siblings.parent.areanm, "in")}`,
+			geoLevel: geoLevel.key,
+			geoExtent: related.siblings.parent.areacd,
+		});
+		if (related.similar?.[2]?.cluster) geoGroups.push({
+			id: "cluster",
+			label: `Similar demographics to ${formatName(area.properties.areanm, "the")}`,
+			geoCluster: `demographic_${related.similar[2].cluster.key}`,
+		});
 
     return {
       taxonomy: taxonomy.data,
@@ -54,7 +52,8 @@ export const load: PageLoad = async ({ params, parent, fetch }) => {
       geoGroups,
       periods: summaryData.years,
     };
-  } catch {
+  } catch(err) {
+		console.log(err);
     error(404, { message: "Could not retrieve metadata" });
   }
 };