@communitiesuk/svelte-component-library 0.1.17

package/dist/components/data-vis/map/Map.svelte

@@ -0,0 +1,392 @@
+<script lang="ts">
+  import {
+    MapLibre,
+    GeoJSON,
+    FillLayer,
+    LineLayer,
+    zoomTransition,
+    Control,
+    ControlButton,
+    ControlGroup,
+  } from "svelte-maplibre";
+  import { contrastingColor } from "./colors.js";
+  import { colorbrewer } from "./colorbrewer.js";
+  import { hoverStateFilter } from "svelte-maplibre/filters.js";
+  import type { LngLatLike } from "maplibre-gl";
+  import type { FeatureCollection } from "geojson";
+  import fullTopo from "./fullTopo.json";
+  import * as topojson from "topojson-client";
+  import Tooltip from "./Tooltip.svelte";
+  import {
+    getColor,
+    filterGeo,
+    jenksBreaks,
+    quantileBreaks,
+  } from "./mapUtils.js";
+  import NonStandardControls from "./NonStandardControls.svelte";
+  import { replaceState } from "$app/navigation";
+  import { page } from "$app/state";
+  import { joinData } from "./dataJoin.js";
+
+  import maplibregl from "maplibre-gl";
+  const { LngLatBounds } = maplibregl;
+
+  import type { LngLatBoundsLike } from "maplibre-gl";
+  let {
+    data,
+    customPallet,
+    setCustomPallet,
+    interactive,
+    cooperativeGestures = true,
+    standardControls = true,
+    navigationControl,
+    navigationControlPosition = "top-left",
+    geolocateControl,
+    geolocateControlPosition = "top-left",
+    fullscreenControl,
+    fullscreenControlPosition = "top-left",
+    scaleControl,
+    scaleControlPosition = "bottom-left",
+    scaleControlUnit = "metric",
+    styleSheet = "Carto-light",
+    colorPalette = "YlGnBu",
+    showBorder = false,
+    maxBorderWidth = 1.5,
+    tooltip,
+    clickToZoom = true,
+    geoType,
+    year,
+    metric,
+    breaksType = "quantile",
+    customBreaks,
+    numberOfBreaks = 5,
+    fillOpacity = 0.5,
+    changeOpacityOnHover = true,
+    hoverOpacity = 0.8,
+    center = [-2.5, 53],
+    zoom = 5,
+    minZoom,
+    maxZoom,
+    maxBoundsCoords,
+    hash = false,
+    updateHash = (u) => {
+      replaceState(u, page.state);
+    },
+    useInitialHash = true,
+    mapHeight = 200,
+    setMaxBounds,
+  }: {
+    data: object[];
+    customPallet: object[] | undefined;
+    cooperativeGestures?: boolean;
+    standardControls?: boolean;
+    navigationControl?: boolean;
+    navigationControlPosition?: string;
+    geolocateControl?: boolean;
+    geolocateControlPosition?: string;
+    fullscreenControl?: boolean;
+    fullscreenControlPosition?: string;
+    scaleControl?: boolean;
+    scaleControlPosition?: string;
+    scaleControlUnit?: string;
+    styleSheet?: string | URL | object;
+    colorPalette?: string;
+    showBorder?: boolean;
+    maxBorderWidth?: number;
+    tooltip?: boolean;
+    clickToZoom?: boolean;
+    geoType?: string;
+    year?: string | number;
+    metric?: string;
+    breaksType?: string;
+    numberOfBreaks?: number;
+    fillOpacity?: number;
+    changeOpacityOnHover: boolean;
+    hoverOpacity?: number;
+    center?: LngLatLike | undefined;
+    zoom?: number;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
+    maxBoundsCoords?: LngLatBoundsLike;
+    setMaxBounds?: boolean;
+    hash?: boolean;
+    updateHash?: (URL) => void;
+    useInitialHash?: boolean;
+    mapHeight?: number;
+    setCustomPallet?: boolean;
+    customBreaks?: number[];
+    interactive: boolean;
+  } = $props();
+
+  let styleLookup = {
+    "Carto-light":
+      "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+    "Carto-dark":
+      "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+  };
+  let style = $derived(styleLookup[styleSheet] ?? styleSheet);
+
+  let breakCount = $derived(
+    breaksType == "custom" ? customBreaks.length : numberOfBreaks,
+  );
+
+  let mapData = $derived(data?.filter((d) => d["year"] == year)[0]?.data);
+
+  let filteredMapData = $derived(
+    mapData.map((el) => ({
+      areaCode: el.areaCode,
+      areaName: el.areaName,
+      metric: +el.data[metric],
+    })),
+  );
+
+  const geojsonData: FeatureCollection = $derived(
+    topojson.feature(fullTopo, fullTopo.objects[geoType]),
+  );
+
+  let filteredGeoJsonData = $derived(filterGeo(geojsonData, year));
+
+  let fillColors: string[] = $derived(
+    setCustomPallet == true
+      ? customPallet
+      : colorbrewer[colorPalette][breakCount],
+  );
+
+  let borderColor = "#003300";
+
+  let map: maplibregl.Map | undefined = $state();
+
+  let loaded = $state(false);
+  let textLayers: maplibregl.LayerSpecification[] = $derived(
+    map && loaded && styleSheet
+      ? map.getStyle().layers.filter((layer) => {
+          return layer.type === "symbol" && layer["source-layer"] === "place";
+        })
+      : [],
+  );
+
+  let colors = $derived(fillColors.map((d) => contrastingColor(d)));
+  $effect(() => {
+    //Things can get out of sync when changing source
+    //this section makes sure that the geojson layers end up below the text layers
+    let geoJsonLayerIds = map
+      ?.getStyle()
+      ?.layers.filter((layer) => {
+        return layer.source == "areas";
+      })
+      .map((d) => d.id);
+    const labelLayerId = map
+      ?.getStyle()
+      ?.layers.find(
+        (layer) => layer.type === "symbol" && layer["source-layer"] === "place",
+      )?.id;
+    if (geoJsonLayerIds && labelLayerId) {
+      for (let layer of geoJsonLayerIds) {
+        map?.moveLayer(layer, labelLayerId);
+      }
+    }
+
+    for (let layer of textLayers) {
+      //Hard coded to first color for testing
+      map?.setPaintProperty(layer.id, "text-color", colors[0].textColor);
+      map?.setPaintProperty(
+        layer.id,
+        "text-halo-color",
+        colors[0].textOutlineColor,
+      );
+    }
+
+    if (cooperativeGestures) {
+      map?.cooperativeGestures.enable();
+    } else {
+      map?.cooperativeGestures.disable();
+    }
+
+    map?.setMaxBounds(bounds);
+  });
+
+  let vals = $derived(
+    filteredMapData.map((d) => d.metric).sort((a, b) => a - b),
+  );
+
+  let breaks = $derived(
+    breaksType == "jenks"
+      ? jenksBreaks(vals, breakCount)
+      : breaksType == "quantile"
+        ? quantileBreaks(vals, breakCount)
+        : customBreaks,
+  );
+
+  let dataWithColor = $derived(
+    filteredMapData.map((d) => {
+      return {
+        ...d,
+        color: getColor(d.metric, breaks, fillColors),
+      };
+    }),
+  );
+
+  let merged = $derived(joinData(filteredGeoJsonData, dataWithColor));
+
+  let hoveredArea = $state();
+  let hoveredAreaData = $state();
+  let currentMousePosition = $state();
+
+  function convertToLngLatBounds(coords: LngLatBoundsLike): LngLatBoundsLike {
+    const bounds = new LngLatBounds(coords[0], coords[0]);
+
+    for (let i = 1; i < coords.length; i++) {
+      bounds.extend(coords[i]);
+    }
+
+    return bounds;
+  }
+
+  function zoomToArea(e) {
+    if (clickToZoom) {
+      let coordArray =
+        e.features[0].geometry.coordinates.length === 1
+          ? e.features[0].geometry.coordinates[0]
+          : //Do some extra processing to get the data in the right shape if the area has non-contiguous areas
+            e.features[0].geometry.coordinates.flat(2);
+
+      let minValues = [
+        Math.min(...coordArray.map((d) => +d[0])),
+        Math.max(...coordArray.map((d) => +d[0])),
+      ];
+
+      let maxValues = [
+        Math.min(...coordArray.map((d) => +d[1])),
+        Math.max(...coordArray.map((d) => +d[1])),
+      ];
+
+      map?.fitBounds([
+        [minValues[0], maxValues[0]],
+        [minValues[1], maxValues[1]],
+      ]);
+    }
+  }
+  //When useInitialHash is true, even if hash is false, if the page is loaded with a location hash use that as the initial settings, rather than the values passed to the component
+  const initialLocationHash = page.url.hash.replace("#", "").split("/");
+  const useLocationHash = initialLocationHash.length >= 3 ? true : false;
+
+  center = useInitialHash
+    ? useLocationHash
+      ? [+initialLocationHash[2], +initialLocationHash[1]]
+      : center
+    : center;
+
+  zoom = useInitialHash
+    ? useLocationHash
+      ? +initialLocationHash[0]
+      : zoom
+    : zoom;
+
+  let bounds = $derived(
+    setMaxBounds ? convertToLngLatBounds(maxBoundsCoords) : undefined,
+  );
+</script>
+
+<div style="height: {mapHeight}px;">
+  <MapLibre
+    bind:map
+    bind:loaded
+    {style}
+    {center}
+    {zoom}
+    {maxZoom}
+    {minZoom}
+    standardControls={interactive && standardControls}
+    {hash}
+    {updateHash}
+    {interactive}
+    class="map"
+  >
+    {#if interactive && !standardControls}
+      <NonStandardControls
+        {navigationControl}
+        {navigationControlPosition}
+        {geolocateControl}
+        {geolocateControlPosition}
+        {fullscreenControl}
+        {fullscreenControlPosition}
+        {scaleControl}
+        {scaleControlPosition}
+        {scaleControlUnit}
+      />
+      <Control>
+        <ControlGroup>
+          <button
+            class="reset-button"
+            onclick={() => {
+              map.flyTo({
+                center: center,
+                zoom: zoom,
+              });
+            }}
+          >
+            Reset view
+          </button>
+        </ControlGroup>
+      </Control>
+    {/if}
+
+    <GeoJSON id="areas" data={merged} promoteId="areanm">
+      <FillLayer
+        paint={{
+          "fill-color": ["coalesce", ["get", "color"], "lightgrey"],
+          "fill-opacity": changeOpacityOnHover
+            ? hoverStateFilter(fillOpacity, hoverOpacity)
+            : fillOpacity,
+        }}
+        beforeLayerType="symbol"
+        manageHoverState={interactive}
+        onclick={interactive ? (e) => zoomToArea(e) : null}
+        onmousemove={interactive
+          ? (e) => {
+              hoveredArea = e.features[0].id;
+              hoveredAreaData = e.features[0].properties.metric;
+              currentMousePosition = e.event.point;
+            }
+          : null}
+        onmouseleave={interactive
+          ? () => {
+              hoveredArea = null;
+              hoveredAreaData = null;
+            }
+          : null}
+      />
+      {#if showBorder}
+        <LineLayer
+          layout={{ "line-cap": "round", "line-join": "round" }}
+          paint={{
+            "line-color": hoverStateFilter(borderColor, "orange"),
+            "line-width": zoomTransition(3, 0, 12, maxBorderWidth),
+          }}
+          beforeLayerType="symbol"
+        />
+      {/if}
+    </GeoJSON>
+
+    {#if interactive && tooltip}
+      <Tooltip
+        {currentMousePosition}
+        {hoveredArea}
+        {hoveredAreaData}
+        {year}
+        {metric}
+      />
+    {/if}
+  </MapLibre>
+</div>
+
+<style>
+  :global(.maplibregl-ctrl-group button.reset-button) {
+    /* margin: 10px; */
+    width: -moz-fit-content;
+    width: fit-content;
+    padding: 0px 10px;
+    font-size: 16px;
+    height: 100%;
+  }
+</style>

package/dist/components/data-vis/map/Map.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { LngLatLike } from "maplibre-gl";
+import type { LngLatBoundsLike } from "maplibre-gl";
+type $$ComponentProps = {
+    data: object[];
+    customPallet: object[] | undefined;
+    cooperativeGestures?: boolean;
+    standardControls?: boolean;
+    navigationControl?: boolean;
+    navigationControlPosition?: string;
+    geolocateControl?: boolean;
+    geolocateControlPosition?: string;
+    fullscreenControl?: boolean;
+    fullscreenControlPosition?: string;
+    scaleControl?: boolean;
+    scaleControlPosition?: string;
+    scaleControlUnit?: string;
+    styleSheet?: string | URL | object;
+    colorPalette?: string;
+    showBorder?: boolean;
+    maxBorderWidth?: number;
+    tooltip?: boolean;
+    clickToZoom?: boolean;
+    geoType?: string;
+    year?: string | number;
+    metric?: string;
+    breaksType?: string;
+    numberOfBreaks?: number;
+    fillOpacity?: number;
+    changeOpacityOnHover: boolean;
+    hoverOpacity?: number;
+    center?: LngLatLike | undefined;
+    zoom?: number;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
+    maxBoundsCoords?: LngLatBoundsLike;
+    setMaxBounds?: boolean;
+    hash?: boolean;
+    updateHash?: (URL: any) => void;
+    useInitialHash?: boolean;
+    mapHeight?: number;
+    setCustomPallet?: boolean;
+    customBreaks?: number[];
+    interactive: boolean;
+};
+declare const Map: import("svelte").Component<$$ComponentProps, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/components/data-vis/map/MapLegend.svelte

@@ -0,0 +1,41 @@
+<script>
+  let { fillColor, canvasWidth, hoveredAreaProperties } = $props();
+  // $inspect(hoveredAreaProperties);
+
+  let legendWidth = $derived(0.8 * canvasWidth);
+</script>
+
+<svg style="width: {legendWidth}; left: {0.1 * canvasWidth}">
+  {#each fillColor as color, i}
+    {@const barWidth = legendWidth / fillColor.length}
+    {@const hovered = color == hoveredAreaProperties?.color}
+    <rect
+      width={barWidth}
+      height="10"
+      x={i * barWidth}
+      y="10"
+      fill={color}
+      stroke={hovered ? "black" : ""}
+      stroke-width={hovered ? "3px" : "1px"}
+      opacity="0.8"
+    ></rect>
+    {#if hovered}
+      <text x={i * barWidth} y="40" font-size="16px"
+        >{hoveredAreaProperties?.LAD23NM}</text
+      >
+      <text x={i * barWidth} y="55">£{hoveredAreaProperties?.salary}</text>
+    {/if}
+  {/each}
+</svg>
+
+<style>
+  svg {
+    z-index: 1;
+    position: absolute;
+    bottom: 100px;
+    /* left: 100px; */
+    background-color: whitesmoke;
+    height: 80px;
+    opacity: 0.9;
+  }
+</style>

package/dist/components/data-vis/map/MapLegend.svelte.d.ts

@@ -0,0 +1,15 @@
+export default MapLegend;
+type MapLegend = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const MapLegend: import("svelte").Component<{
+    fillColor: any;
+    canvasWidth: any;
+    hoveredAreaProperties: any;
+}, {}, "">;
+type $$ComponentProps = {
+    fillColor: any;
+    canvasWidth: any;
+    hoveredAreaProperties: any;
+};

package/dist/components/data-vis/map/NonStandardControls.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  //@ts-nocheck
+  import {
+    FullscreenControl,
+    GeolocateControl,
+    NavigationControl,
+    ScaleControl,
+  } from "svelte-maplibre";
+
+  let {
+    navigationControl,
+    navigationControlPosition = "top-left",
+    geolocateControl,
+    geolocateControlPosition = "top-left",
+    fullscreenControl,
+    fullscreenControlPosition = "top-left",
+    scaleControl,
+    scaleControlPosition = "bottom-left",
+    scaleControlUnit = "metric",
+  } = $props();
+</script>
+
+{#if navigationControl}
+  {#key navigationControlPosition}
+    <NavigationControl position={navigationControlPosition} />
+  {/key}
+{/if}
+{#if geolocateControl}
+  {#key geolocateControlPosition}
+    <GeolocateControl position={geolocateControlPosition} />
+  {/key}
+{/if}
+{#if fullscreenControl}
+  {#key fullscreenControlPosition}
+    <FullscreenControl position={fullscreenControlPosition} />
+  {/key}
+{/if}
+{#if scaleControl}
+  {#key { scaleControlPosition, scaleControlUnit }}
+    <ScaleControl position={scaleControlPosition} unit={scaleControlUnit} />
+  {/key}
+{/if}

package/dist/components/data-vis/map/NonStandardControls.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const NonStandardControls: import("svelte").Component<{
+    navigationControl: any;
+    navigationControlPosition?: string;
+    geolocateControl: any;
+    geolocateControlPosition?: string;
+    fullscreenControl: any;
+    fullscreenControlPosition?: string;
+    scaleControl: any;
+    scaleControlPosition?: string;
+    scaleControlUnit?: string;
+}, {}, "">;
+type NonStandardControls = ReturnType<typeof NonStandardControls>;
+export default NonStandardControls;

package/dist/components/data-vis/map/Tooltip.svelte

@@ -0,0 +1,41 @@
+<script>
+  let { currentMousePosition, hoveredArea, hoveredAreaData, year, metric } =
+    $props();
+  let tooltipHeight = $state();
+  let tooltipWidth = $state();
+  // $inspect(tooltipHeight, tooltipWidth, currentMousePosition);
+</script>
+
+{#if hoveredArea}
+  <div
+    class="tooltip"
+    style="top: {currentMousePosition?.y}px; left: {currentMousePosition?.x}px"
+    bind:clientHeight={tooltipHeight}
+    bind:clientWidth={tooltipWidth}
+  >
+    <p>{hoveredArea}</p>
+    <p class="detail">
+      {year}
+      {metric}: {isNaN(hoveredAreaData) ? "No data" : hoveredAreaData}
+    </p>
+  </div>
+{/if}
+
+<style>
+  .tooltip {
+    z-index: 1;
+    position: absolute;
+    /* top: 100px;
+    left: 100px; */
+    font-weight: 700;
+    font-size: 24px;
+    pointer-events: none;
+    background-color: aliceblue;
+    padding: 5px;
+    border-radius: 5px;
+  }
+  .detail {
+    font-weight: 400;
+    font-size: 16px;
+  }
+</style>

package/dist/components/data-vis/map/Tooltip.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Tooltip;
+type Tooltip = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Tooltip: import("svelte").Component<{
+    currentMousePosition: any;
+    hoveredArea: any;
+    hoveredAreaData: any;
+    year: any;
+    metric: any;
+}, {}, "">;
+type $$ComponentProps = {
+    currentMousePosition: any;
+    hoveredArea: any;
+    hoveredAreaData: any;
+    year: any;
+    metric: any;
+};