@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/dist/lib/collocation-sites/CollocationTooltip.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { format, formatDistanceToNow } from "date-fns";
-	import DataBox from "../components/DataBox.svelte";
-	import type { CollocationSiteMapFeature } from "./types";
-	import { monitorsManager } from "../monitors/monitors.svelte";
-	import { getCurrentLevel } from "../monitors/monitor-utils";
-	import type { MonitorLatest, SJVAirEntryLevel } from "@sjvair/sdk";
-
-	interface CollocationTooltipProps {
-		feature: CollocationSiteMapFeature;
-	}
-
-	const { feature }: CollocationTooltipProps = $props();
-
-	const data = $derived.by(() => {
-		const collocated = monitorsManager.latest?.get(feature.properties.colocated_id);
-		const reference = monitorsManager.latest?.get(feature.properties.reference_id);
-
-		return {
-			collocated: getMonitorData(collocated),
-			reference: getMonitorData(reference)
-		};
-	});
-
-	function getMonitorData(monitor: MonitorLatest | undefined) {
-		if (!monitor || !("value" in monitor.latest) || !monitorsManager.meta) return;
-
-		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
-		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
-			monitor.latest.value,
-			entryType.asIter.levels!
-		);
-
-		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
-
-		return {
-			color: level?.color ?? "",
-			header: entryType.label,
-			date: {
-				formatted: format(monitor.latest.timestamp, "h:mm:aaa EEEE MMM dd, yyyy"),
-				diference: formatDistanceToNow(monitor.latest.timestamp, {
-					addSuffix: true,
-					includeSeconds: true
-				})
-			},
-			monitorName: monitor.name,
-			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
-		};
-	}
-</script>
-
-{#if data}
-	<div class="flex flex-col gap-4">
-		{#if data.reference}
-			<div class="flex gap-2">
-				<DataBox
-					color={data.reference.color}
-					header={data.reference.header}
-					subheading={data.reference.subheading}
-					value={data.reference.value}
-				/>
-				<div class="flex flex-col">
-					<p class="leading-none">{data.reference.date.formatted}</p>
-					<h1 class="text-lg font-bold underline">{data.reference.monitorName}</h1>
-					<p class="leading-none">Reference monitor</p>
-					<div class="mt-auto">
-						<p class="text-base leading-none">Last updated</p>
-						<p class="text-base leading-none">{data.reference.date.diference}</p>
-					</div>
-				</div>
-			</div>
-		{:else}
-			<h1>Reference monitor disabled</h1>
-		{/if}
-		{#if data.collocated}
-			<div class="flex flex-row-reverse gap-2">
-				<DataBox
-					color={data.collocated.color}
-					header={data.collocated.header}
-					subheading={data.collocated.subheading}
-					value={data.collocated.value}
-				/>
-				<div class="flex flex-col">
-					<p class="leading-none">{data.collocated.date.formatted}</p>
-					<h1 class="text-lg font-bold underline">{data.collocated.monitorName}</h1>
-					<p class="leading-none">Collocated monitor</p>
-					<div class="mt-auto">
-						<p class="text-base leading-none">Last updated</p>
-						<p class="text-base leading-none">{data.collocated.date.diference}</p>
-					</div>
-				</div>
-			</div>
-		{:else}
-			<h1>Collocated monitor disabled</h1>
-		{/if}
-	</div>
-{/if}

package/dist/lib/collocation-sites/CollocationTooltip.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { CollocationSiteMapFeature } from "./types";
-interface CollocationTooltipProps {
-    feature: CollocationSiteMapFeature;
-}
-declare const CollocationTooltip: import("svelte").Component<CollocationTooltipProps, {}, "">;
-type CollocationTooltip = ReturnType<typeof CollocationTooltip>;
-export default CollocationTooltip;

package/dist/lib/collocation-sites/collocations-icon-manager.svelte.d.ts

@@ -1,7 +0,0 @@
-import { MonitorShapeIconManager } from "../monitors/monitors-icon-manager.svelte";
-export declare function getCollocationIconId(baseIconId: string): string;
-export declare class CollocationIconManager extends MonitorShapeIconManager {
-    protected get idPrefix(): string;
-    protected get iconSize(): number;
-    protected transformSvg(svg: string): string;
-}

package/dist/lib/collocation-sites/collocations-icon-manager.svelte.js

@@ -1,18 +0,0 @@
-import { CROSSHAIR_ICON_SIZE, withCrosshair } from "../map/icons";
-import { MonitorShapeIconManager } from "../monitors/monitors-icon-manager.svelte";
-const COLLOCATION_ICON_PREFIX = "collocation";
-const CROSSHAIR_COLOR = "#4A5FC6";
-export function getCollocationIconId(baseIconId) {
-    return `${COLLOCATION_ICON_PREFIX}-${baseIconId}`;
-}
-export class CollocationIconManager extends MonitorShapeIconManager {
-    get idPrefix() {
-        return COLLOCATION_ICON_PREFIX;
-    }
-    get iconSize() {
-        return CROSSHAIR_ICON_SIZE;
-    }
-    transformSvg(svg) {
-        return withCrosshair(svg, CROSSHAIR_COLOR);
-    }
-}

package/dist/lib/collocation-sites/collocations-map-integration.svelte.d.ts

@@ -1,21 +0,0 @@
-import { type Map as MaptilerMap } from "@maptiler/sdk";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { CollocationIconManager } from "./collocations-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import type { CollocationSiteMapFeature, CollocationSiteMarkerProperties } from "./types";
-declare class CollocationSitesMapIntegration extends MapIconLayerIntegration<CollocationSiteMarkerProperties> {
-    referenceId: string;
-    enabled: boolean;
-    icons: CollocationIconManager;
-    tooltipManager: TooltipManager;
-    /** The option only applies while monitors are shown with PM2.5. */
-    get available(): boolean;
-    features: Array<CollocationSiteMapFeature>;
-    mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor();
-    apply(): void;
-    remove(): void;
-}
-export declare const collocationSitesMapIntegration: CollocationSitesMapIntegration;
-export type { CollocationSitesMapIntegration as MonitorsMapIntegration };

package/dist/lib/collocation-sites/collocations-map-integration.svelte.js

@@ -1,113 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { collocationSitesManager } from "./collocations.svelte";
-import { monitorsManager } from "../monitors/monitors.svelte";
-import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
-import { untrack } from "svelte";
-import CollocationTooltip from "./CollocationTooltip.svelte";
-import { mountPopup } from "../map/utils";
-function collocationTooltip(evt) {
-    const feature = evt.features?.[0];
-    if (!feature)
-        return;
-    return mountPopup(CollocationTooltip, { feature }, evt.lngLat);
-}
-class CollocationSitesMapIntegration extends MapIconLayerIntegration {
-    referenceId = "collocation-sites";
-    enabled = $state(false);
-    icons = new CollocationIconManager(monitorsManager);
-    tooltipManager = new TooltipManager();
-    /** The option only applies while monitors are shown with PM2.5. */
-    get available() {
-        return monitorsMapIntegration.enabled && monitorsManager.pollutant === "pm25";
-    }
-    features = $derived.by(() => {
-        if (!monitorsManager.meta ||
-            !monitorsManager.pollutant ||
-            !collocationSitesManager.collocationSites ||
-            monitorsMapIntegration.features.length === 0) {
-            return [];
-        }
-        return collocationSitesManager.collocationSites
-            .map((c) => {
-            const referenceMonitorFeature = monitorsMapIntegration.features.find((m) => m.properties.id === c.reference_id);
-            if (!referenceMonitorFeature)
-                return;
-            const feature = {
-                type: "Feature",
-                properties: {
-                    icon: getCollocationIconId(referenceMonitorFeature.properties.icon),
-                    colocated_id: c.colocated_id,
-                    reference_id: c.reference_id,
-                    name: c.name
-                },
-                geometry: c.position
-            };
-            return feature;
-        })
-            .filter((f) => f !== undefined);
-    });
-    mapLayer = {
-        id: this.referenceId,
-        type: "symbol",
-        source: this.referenceId,
-        layout: {
-            "icon-allow-overlap": true,
-            "icon-ignore-placement": true,
-            "icon-image": ["get", "icon"],
-            "icon-size": 1
-        },
-        paint: {}
-    };
-    get mapSource() {
-        return {
-            type: "geojson",
-            promoteId: "id",
-            data: {
-                type: "FeatureCollection",
-                features: this.features
-            }
-        };
-    }
-    constructor() {
-        super();
-        $effect.root(() => {
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || !this.enabled)
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-            // Remove the layer while the option is unavailable (Ozone or Pollutant = None); restore
-            // it when it becomes available again if the user still has it checked.
-            $effect(() => {
-                if (!this.available) {
-                    untrack(() => this.remove());
-                }
-                else if (untrack(() => this.enabled)) {
-                    untrack(() => this.apply());
-                }
-            });
-        });
-    }
-    apply() {
-        if (!this.available) {
-            this.remove();
-            return;
-        }
-        if (!mapManager.map)
-            return;
-        if (!this.tooltipManager.has(this.referenceId)) {
-            this.tooltipManager.register(this.referenceId, collocationTooltip, Number.MAX_SAFE_INTEGER);
-        }
-        this.tooltipManager.enable();
-        super.apply();
-    }
-    remove() {
-        this.tooltipManager.disable();
-        super.remove();
-    }
-}
-export const collocationSitesMapIntegration = new CollocationSitesMapIntegration();

package/dist/lib/collocation-sites/collocations.svelte.d.ts

@@ -1,10 +0,0 @@
-import { type CollocationSite } from "@sjvair/sdk";
-import type { SignalOptions } from "../abort";
-declare class CollocationSitesManager {
-    initialized: boolean;
-    collocationSites: Array<CollocationSite> | null;
-    init({ signal }?: SignalOptions): Promise<void>;
-    update({ signal }?: SignalOptions): Promise<void>;
-}
-export declare const collocationSitesManager: CollocationSitesManager;
-export type { CollocationSitesManager };

package/dist/lib/collocation-sites/collocations.svelte.js

@@ -1,21 +0,0 @@
-import { getCollocationSites } from "@sjvair/sdk";
-class CollocationSitesManager {
-    initialized = $state(false);
-    collocationSites = $state(null);
-    async init({ signal } = {}) {
-        if (this.initialized)
-            return;
-        if (signal?.aborted)
-            throw signal.reason;
-        this.collocationSites = await getCollocationSites({ signal });
-        this.initialized = true;
-    }
-    async update({ signal } = {}) {
-        if (!this.initialized)
-            return;
-        if (signal?.aborted)
-            throw signal.reason;
-        this.collocationSites = await getCollocationSites({ signal });
-    }
-}
-export const collocationSitesManager = new CollocationSitesManager();

package/dist/lib/collocation-sites/types.d.ts

@@ -1,8 +0,0 @@
-import type { Feature, Geometry } from "geojson";
-export type CollocationSiteMapFeature = Feature<Geometry, CollocationSiteMarkerProperties>;
-export interface CollocationSiteMarkerProperties {
-    icon: string;
-    colocated_id: string;
-    reference_id: string;
-    name: string;
-}

package/dist/lib/collocation-sites/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/ev-stations/components/EvStationClusterTooltip.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { EvStationClusterMapFeature } from "../types";
-
-	interface Props {
-		feature: EvStationClusterMapFeature;
-	}
-
-	const { feature }: Props = $props();
-
-	const levelLabel = $derived(feature.source.includes("lvl2") ? "Level 2" : "Level 3");
-</script>
-
-<div class="flex flex-col gap-1 p-1">
-	<p class="font-semibold">{levelLabel} Chargers</p>
-	<p class="text-sm">{feature.properties.point_count} stations</p>
-</div>

package/dist/lib/ev-stations/components/EvStationClusterTooltip.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { EvStationClusterMapFeature } from "../types";
-interface Props {
-    feature: EvStationClusterMapFeature;
-}
-declare const EvStationClusterTooltip: import("svelte").Component<Props, {}, "">;
-type EvStationClusterTooltip = ReturnType<typeof EvStationClusterTooltip>;
-export default EvStationClusterTooltip;

package/dist/lib/ev-stations/components/EvStationTooltip.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { EvStationMapFeature } from "../types";
-interface Props {
-    feature: EvStationMapFeature;
-}
-declare const EvStationTooltip: import("svelte").Component<Props, {}, "">;
-type EvStationTooltip = ReturnType<typeof EvStationTooltip>;
-export default EvStationTooltip;

package/dist/lib/ev-stations/ev-stations-cluster-renderer.d.ts

@@ -1,19 +0,0 @@
-import { type ClickHandler } from "../map/integrations/click-manager";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import type { EvStationMapFeature } from "./types";
-export interface EvStationsClusterContext {
-    referenceId: string;
-    featuresByLevel: Record<string, EvStationMapFeature[]>;
-    beforeLayer?: string;
-    tooltipManager: TooltipManager;
-}
-export declare class EvStationsClusterRenderer {
-    private ctx;
-    private _levels;
-    constructor(ctx: EvStationsClusterContext);
-    apply(stationClickHandler: ClickHandler): void;
-    remove(): void;
-    get unclusteredLayerIds(): string[];
-    syncFeatures(): void;
-    private makeClusterClickHandler;
-}

package/dist/lib/ev-stations/ev-stations-cluster-renderer.js

@@ -1,131 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { mountPopup } from "../map/utils";
-import { clickManager } from "../map/integrations/click-manager";
-import { EV_STATION_LEVELS } from "./ev-station-icons";
-import EvStationClusterTooltip from "./components/EvStationClusterTooltip.svelte";
-function clusterTooltip(evt) {
-    const feature = evt.features?.[0];
-    if (!feature)
-        return;
-    return mountPopup(EvStationClusterTooltip, { feature }, evt.lngLat);
-}
-export class EvStationsClusterRenderer {
-    ctx;
-    _levels = [];
-    constructor(ctx) {
-        this.ctx = ctx;
-    }
-    apply(stationClickHandler) {
-        if (!mapManager.map)
-            return;
-        for (const level of Object.keys(EV_STATION_LEVELS)) {
-            const sourceId = `${this.ctx.referenceId}-${level}`;
-            const features = this.ctx.featuresByLevel[level] ?? [];
-            const { bg } = EV_STATION_LEVELS[level];
-            const clusterBg = bg.replace("rgb(", "rgba(").replace(")", ", 0.6)");
-            mapManager.map.addSource(sourceId, {
-                type: "geojson",
-                promoteId: "id",
-                data: { type: "FeatureCollection", features },
-                cluster: true,
-                clusterRadius: 40,
-                clusterMaxZoom: 9
-            });
-            mapManager.map.addLayer({
-                id: `${sourceId}-cluster-circle`,
-                type: "circle",
-                source: sourceId,
-                filter: ["has", "point_count"],
-                paint: {
-                    "circle-color": clusterBg,
-                    "circle-radius": ["step", ["get", "point_count"], 15, 10, 20, 25, 25]
-                }
-            }, this.ctx.beforeLayer);
-            mapManager.map.addLayer({
-                id: `${sourceId}-cluster-label`,
-                type: "symbol",
-                source: sourceId,
-                filter: ["has", "point_count"],
-                layout: {
-                    "text-field": ["get", "point_count_abbreviated"],
-                    "text-size": 12,
-                    "text-allow-overlap": true,
-                    "text-ignore-placement": true
-                },
-                paint: { "text-color": "#ffffff" }
-            }, this.ctx.beforeLayer);
-            mapManager.map.addLayer({
-                id: `${sourceId}-unclustered`,
-                type: "symbol",
-                source: sourceId,
-                filter: ["!", ["has", "point_count"]],
-                layout: {
-                    "icon-image": `ev-station-${level}`,
-                    "icon-allow-overlap": true,
-                    "icon-ignore-placement": true,
-                    "icon-size": 1
-                },
-                paint: {}
-            }, this.ctx.beforeLayer);
-            const circleLayerId = `${sourceId}-cluster-circle`;
-            const unclusteredLayerId = `${sourceId}-unclustered`;
-            if (!this.ctx.tooltipManager.has(circleLayerId)) {
-                this.ctx.tooltipManager.register(circleLayerId, clusterTooltip);
-            }
-            clickManager.register([circleLayerId], this.makeClusterClickHandler(sourceId));
-            clickManager.register([unclusteredLayerId], stationClickHandler);
-            this._levels.push(level);
-        }
-    }
-    remove() {
-        if (!mapManager.map)
-            return;
-        for (const level of this._levels) {
-            const sourceId = `${this.ctx.referenceId}-${level}`;
-            const layerIds = [
-                `${sourceId}-cluster-circle`,
-                `${sourceId}-cluster-label`,
-                `${sourceId}-unclustered`
-            ];
-            for (const layerId of layerIds) {
-                clickManager.unregister([layerId]);
-                if (mapManager.map.getLayer(layerId)) {
-                    mapManager.map.removeLayer(layerId);
-                }
-            }
-            if (mapManager.map.getSource(sourceId)) {
-                mapManager.map.removeSource(sourceId);
-            }
-        }
-        this._levels = [];
-    }
-    get unclusteredLayerIds() {
-        return this._levels.map((level) => `${this.ctx.referenceId}-${level}-unclustered`);
-    }
-    syncFeatures() {
-        if (!mapManager.map)
-            return;
-        for (const level of this._levels) {
-            const sourceId = `${this.ctx.referenceId}-${level}`;
-            mapManager.setDataSource(sourceId, this.ctx.featuresByLevel[level] ?? []);
-        }
-    }
-    makeClusterClickHandler(sourceId) {
-        return async (features) => {
-            try {
-                const feature = features[0];
-                if (!feature?.properties?.cluster_id)
-                    return;
-                const source = mapManager.map?.getSource(sourceId);
-                if (!source)
-                    return;
-                const zoom = await source.getClusterExpansionZoom(feature.properties.cluster_id);
-                const coords = feature.geometry.coordinates;
-                mapManager.map?.easeTo({ center: coords, zoom });
-            }
-            catch (err) {
-                console.error("EvStations: cluster expansion zoom failed", err);
-            }
-        };
-    }
-}

package/dist/lib/ev-stations/ev-stations-map-integration.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { FilterSpecification, Map as MaptilerMap } from "@maptiler/sdk";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { EvStationIconManager } from "./ev-station-icons";
-import { type EvStationsClusterContext } from "./ev-stations-cluster-renderer";
-import type { EvStationMapFeature, EvStationMarkerProperties } from "./types";
-declare class EvStationsMapIntegration extends MapIconLayerIntegration<EvStationMarkerProperties> implements EvStationsClusterContext {
-    referenceId: string;
-    enabled: boolean;
-    clustered: boolean;
-    icons: EvStationIconManager;
-    tooltipManager: TooltipManager;
-    private renderer;
-    private currentPopup;
-    displayOptions: {
-        lvl2: MapDisplayOption;
-        lvl3: MapDisplayOption;
-    };
-    features: Array<EvStationMapFeature>;
-    featuresByLevel: Record<string, EvStationMapFeature[]>;
-    filters: FilterSpecification;
-    private handleStationClick;
-    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor();
-    apply(): void;
-    remove(): void;
-}
-export declare const evStationsMapIntegration: EvStationsMapIntegration;
-export type { EvStationsMapIntegration };