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

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -1,78 +0,0 @@
-import { asDataURI, circle, square, triangle } from "../map/icons";
-import { MapIconManager } from "../map/integrations/map-icon-manager";
-import { mapManager } from "../map/map-manager.svelte.js";
-const MONITOR_ICONS = { circle, square, triangle };
-const MONITOR_ICON_BORDER_WIDTH = 2;
-const MONITOR_ICON_DEFAULT_COLOR = "#969696"; // light gray
-const MONITOR_ICON_DISPLAY_COLOR = "#48c78e"; // light gray
-export function getIconId(monitor, level) {
-    const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
-    switch (monitor.type) {
-        case "airnow":
-        case "aqview":
-        case "bam1022":
-        case "aqlite":
-            return `${id}-triangle`;
-        case "airgradient":
-        case "purpleair":
-        case "vozbox":
-            return `${id}-circle`;
-        default:
-            throw new Error(`Map icon for ${monitor.device} has not been set`);
-    }
-}
-export class MonitorShapeIconManager extends MapIconManager {
-    dataSource;
-    get iconSize() {
-        return 24;
-    }
-    constructor(dataSource) {
-        super();
-        this.dataSource = dataSource;
-        $effect.root(() => {
-            $effect(() => {
-                if (this.dataSource.levels) {
-                    const iconLevels = [
-                        ...this.dataSource.levels,
-                        { name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
-                        { name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
-                    ];
-                    for (const location of ["inside", "outside"]) {
-                        for (const [shapeName, shape] of Object.entries(MONITOR_ICONS)) {
-                            for (const level of iconLevels) {
-                                const parts = [this.idPrefix, location, level.name, shapeName].filter(Boolean);
-                                const id = parts.join("-");
-                                const src = asDataURI(this.transformSvg(shape(level.color, MONITOR_ICON_BORDER_WIDTH, location === "inside" ? "#000000" : undefined)));
-                                if (this.icons.has(id)) {
-                                    const icon = this.icons.get(id);
-                                    if (icon.image.src !== src) {
-                                        icon.image.src = src;
-                                        if (mapManager.map?.hasImage(id)) {
-                                            this.updateImage(icon, mapManager.map);
-                                        }
-                                    }
-                                    continue;
-                                }
-                                else {
-                                    const icon = new Image();
-                                    icon.src = src;
-                                    icon.width = this.iconSize;
-                                    icon.height = this.iconSize;
-                                    this.register(id, icon);
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        });
-    }
-}
-export class MonitorsIconManager extends MonitorShapeIconManager {
-    get idPrefix() {
-        return "";
-    }
-    transformSvg(svg) {
-        return svg;
-    }
-}

package/dist/lib/monitors/monitors-map-integration.svelte.d.ts

@@ -1,43 +0,0 @@
-import { type FilterSpecification, type Map as MaptilerMap } from "@maptiler/sdk";
-import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { MonitorsIconManager } from "./monitors-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";
-import type { MonitorMapFeature, MonitorMarkerProperties, MonitorsDataSource } from "./types";
-declare class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProperties> {
-    private dataSource;
-    referenceId: string;
-    enabled: boolean;
-    clustered: boolean;
-    icons: MonitorsIconManager;
-    tooltipManager: TooltipManager;
-    private renderer;
-    displayOptions: {
-        airnow: MapDisplayOption;
-        aqlite: MapDisplayOption;
-        aqview: MapDisplayOption;
-        bam1022: MapDisplayOption;
-        airgradient: MapDisplayOption;
-        purpleair: MapDisplayOption;
-        vozbox: MapDisplayOption;
-        inactive: MapDisplayOption;
-        inside: MapDisplayOption;
-    };
-    /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
-    onMonitorClick: ((id: string) => void) | null;
-    selectedMonitorId: string | null;
-    private handleMonitorClick;
-    features: Array<MonitorMapFeature>;
-    filters: FilterSpecification;
-    featuresByType: Record<string, MonitorMapFeature[]>;
-    clusterIconThresholds: Array<SJVAirEntryLevel>;
-    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor(dataSource?: MonitorsDataSource);
-    apply(): void;
-    remove(): void;
-    private applySelectedState;
-}
-export declare const monitorsMapIntegration: MonitorsMapIntegration;
-export { MonitorsMapIntegration };

package/dist/lib/monitors/monitors-map-integration.svelte.js

@@ -1,301 +0,0 @@
-import { untrack } from "svelte";
-import { mapManager } from "../map/map-manager.svelte.js";
-import { clickManager } from "../map/integrations/click-manager";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { monitorsManager } from "./monitors.svelte";
-import { getIconId, MonitorsIconManager } from "./monitors-icon-manager.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";
-import { getCurrentLevel, getOrder } from "./monitor-utils";
-import { MonitorsClusterRenderer, monitorTooltip } from "./monitors-cluster-renderer";
-const filters = {
-    monitor(deviceType) {
-        return ["==", ["get", "type"], deviceType];
-    }
-};
-class MonitorsMapIntegration extends MapIconLayerIntegration {
-    dataSource;
-    referenceId = "monitors";
-    enabled = $state(true);
-    clustered = $state(true);
-    icons;
-    tooltipManager = new TooltipManager();
-    renderer = new MonitorsClusterRenderer(this);
-    displayOptions = $derived.by(() => ({
-        airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
-        aqlite: new MapDisplayOption("AQLite", true, this.icons.get("outside-display-triangle")),
-        aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
-        bam1022: new MapDisplayOption("SJVAir", true, this.icons.get("outside-display-triangle")),
-        airgradient: new MapDisplayOption("AirGradient", true, this.icons.get("outside-display-circle")),
-        purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
-        vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
-        inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-circle")),
-        inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-circle"))
-    }));
-    /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
-    onMonitorClick = null;
-    selectedMonitorId = $state(null);
-    handleMonitorClick = (features) => {
-        if (!this.onMonitorClick)
-            return;
-        const sorted = [...features].sort((a, b) => (b.properties?.order ?? 0) - (a.properties?.order ?? 0));
-        const top = sorted[0];
-        if (!top?.properties?.id)
-            return;
-        this.selectedMonitorId = top.properties.id;
-        this.onMonitorClick(this.selectedMonitorId);
-        if (top.geometry.type !== "Point")
-            return;
-        const coords = top.geometry.coordinates;
-        mapManager.map?.easeTo({
-            center: coords,
-            zoom: Math.max(mapManager.map.getZoom(), 12)
-        });
-    };
-    features = $derived.by(() => {
-        if (!this.dataSource.meta || !this.dataSource.latest || !this.dataSource.pollutant) {
-            return [];
-        }
-        const levels = this.dataSource.meta.entryType(this.dataSource.pollutant).asIter.levels;
-        return Array.from(this.dataSource.latest.values().map((m) => {
-            const feature = {
-                type: "Feature",
-                properties: {
-                    icon: "outside-default-square",
-                    id: m.id,
-                    is_active: m.is_active,
-                    is_sjvair: m.is_sjvair,
-                    location: m.location,
-                    name: m.name,
-                    order: getOrder(m),
-                    type: m.type,
-                    value: m.latest.value
-                },
-                geometry: m.position
-            };
-            if (levels) {
-                const level = getCurrentLevel(m.latest.value, levels);
-                if (level) {
-                    feature.properties.icon = getIconId(m, level);
-                }
-            }
-            return feature;
-        }));
-    });
-    filters = $derived.by(() => {
-        const monitorFilters = ["any"];
-        const locationFilters = [
-            "any",
-            ["==", ["get", "location"], "outside"]
-        ];
-        const statusFilters = ["any", ["==", ["get", "is_active"], true]];
-        if (this.displayOptions.airnow.value)
-            monitorFilters.push(filters.monitor("airnow"));
-        if (this.displayOptions.aqlite.value)
-            monitorFilters.push(filters.monitor("aqlite"));
-        if (this.displayOptions.aqview.value)
-            monitorFilters.push(filters.monitor("aqview"));
-        if (this.displayOptions.bam1022.value)
-            monitorFilters.push(filters.monitor("bam1022"));
-        if (this.displayOptions.airgradient.value)
-            monitorFilters.push(filters.monitor("airgradient"));
-        if (this.displayOptions.purpleair.value)
-            monitorFilters.push(filters.monitor("purpleair"));
-        if (this.displayOptions.vozbox.value)
-            monitorFilters.push(filters.monitor("vozbox"));
-        if (this.displayOptions.inside.value)
-            locationFilters.push(["==", ["get", "location"], "inside"]);
-        if (this.displayOptions.inactive.value)
-            statusFilters.push(["==", ["get", "is_active"], false]);
-        return ["all", monitorFilters, locationFilters, statusFilters];
-    });
-    // Groups features by monitor type for per-type cluster sources, applying display option
-    // filters so cluster aggregates only include visible monitors.
-    featuresByType = $derived.by(() => {
-        const opts = this.displayOptions;
-        const byType = {};
-        for (const feat of this.features) {
-            const p = feat.properties;
-            if (!p.is_active && !opts.inactive.value)
-                continue;
-            if (p.location === "inside" && !opts.inside.value)
-                continue;
-            const typeVisible = {
-                airnow: opts.airnow.value,
-                aqlite: opts.aqlite.value,
-                aqview: opts.aqview.value,
-                bam1022: opts.bam1022.value,
-                airgradient: opts.airgradient.value,
-                purpleair: opts.purpleair.value,
-                vozbox: opts.vozbox.value
-            };
-            if (!(typeVisible[p.type] ?? true))
-                continue;
-            const arr = byType[p.type] ?? [];
-            arr.push(feat);
-            byType[p.type] = arr;
-        }
-        return byType;
-    });
-    clusterIconThresholds = $derived.by(() => {
-        if (!this.dataSource.meta || !this.dataSource.pollutant)
-            return [];
-        return this.dataSource.meta.entryType(this.dataSource.pollutant).asIter.levels ?? [];
-    });
-    get mapLayer() {
-        return {
-            id: this.referenceId,
-            type: "symbol",
-            source: this.referenceId,
-            filter: this.filters,
-            layout: {
-                "symbol-sort-key": ["coalesce", ["get", "order"], 0],
-                "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(dataSource = monitorsManager) {
-        super();
-        this.dataSource = dataSource;
-        this.icons = new MonitorsIconManager(dataSource);
-        $effect.root(() => {
-            // Every effect below early-returns while disabled (Pollutant = None) so a data refresh
-            // can't re-add the layer. `enabled` is read untracked: the base class's own effect
-            // already applies/removes on enabled changes, and tracking it here would apply twice.
-            // The guard comes after each effect's tracked reads so its dependencies are always
-            // collected; returning before reading anything would leave the effect permanently dead.
-            // Push filter changes to the active layer(s) imperatively
-            $effect(() => {
-                const filter = this.filters;
-                const clustered = this.clustered;
-                if (!mapManager.map)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                if (clustered) {
-                    this.renderer.syncFilter();
-                }
-                else {
-                    if (mapManager.map.getLayer(this.referenceId)) {
-                        mapManager.map.setFilter(this.referenceId, filter);
-                    }
-                }
-            });
-            // Sync unclustered source data when features change
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || this.clustered)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-            // Keep cluster source data in sync when features or display options change
-            $effect(() => {
-                void this.featuresByType;
-                if (!mapManager.map || !this.clustered)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                this.renderer.syncFeatures();
-            });
-            // Push updated icon expressions to cluster layers when the pollutant changes
-            $effect(() => {
-                const thresholds = this.clusterIconThresholds;
-                if (!mapManager.map || !this.clustered || !thresholds.length)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                this.renderer.syncThresholds();
-            });
-            // Re-apply when clustered mode switches or when data first arrives (cold load).
-            // featuresByType is tracked so this fires once data is available; untrack on apply()
-            // prevents reactive reads inside it from leaking into this effect's dependency graph.
-            $effect(() => {
-                void this.clustered;
-                const hasFeatures = Object.keys(this.featuresByType).length > 0;
-                if (!untrack(() => mapManager.map) || !hasFeatures)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                untrack(() => this.apply());
-            });
-            // Sync selected icon scale via feature state
-            $effect(() => {
-                void this.selectedMonitorId;
-                if (!mapManager.map)
-                    return;
-                untrack(() => this.applySelectedState());
-            });
-        });
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        if (!this.tooltipManager.has(this.referenceId)) {
-            this.tooltipManager.register(this.referenceId, monitorTooltip);
-        }
-        if (this.clustered) {
-            if (mapManager.map.getLayer(this.referenceId))
-                mapManager.map.removeLayer(this.referenceId);
-            if (mapManager.map.getSource(this.referenceId))
-                mapManager.map.removeSource(this.referenceId);
-            clickManager.unregister([this.referenceId]);
-            this.tooltipManager.disable();
-            this.renderer.remove();
-            // Clustering may be toggled again before the icons arrive; only the latest apply runs.
-            this.supersedePending();
-            this.whenIconsLoad(() => {
-                this.renderer.apply(this.handleMonitorClick);
-                this.tooltipManager.enable();
-                this.applySelectedState();
-            });
-        }
-        else {
-            this.tooltipManager.disable();
-            this.renderer.remove();
-            this.tooltipManager.enable();
-            clickManager.unregister([this.referenceId]);
-            super.apply();
-            this.whenIconsLoad(() => {
-                clickManager.register([this.referenceId], this.handleMonitorClick);
-                this.applySelectedState();
-            });
-        }
-    }
-    remove() {
-        this.tooltipManager.disable();
-        clickManager.unregister([this.referenceId]);
-        this.renderer.remove();
-        super.remove();
-    }
-    applySelectedState() {
-        if (!mapManager.map)
-            return;
-        const layerIds = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId];
-        const iconSize = this.selectedMonitorId
-            ? ["match", ["get", "id"], this.selectedMonitorId, 1.3, 1]
-            : 1;
-        for (const layerId of layerIds) {
-            if (!mapManager.map.getLayer(layerId))
-                continue;
-            mapManager.map.setLayoutProperty(layerId, "icon-size", iconSize);
-        }
-    }
-}
-export const monitorsMapIntegration = new MonitorsMapIntegration();
-export { MonitorsMapIntegration };

package/dist/lib/options/reset-map-options.d.ts

@@ -1,2 +0,0 @@
-/** "Reset Map Options": restores every map option to its default. */
-export declare function resetMapOptions(): void;

package/dist/lib/options/reset-map-options.js

@@ -1,24 +0,0 @@
-import { monitorsManager } from "../monitors/monitors.svelte";
-import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
-import { collocationSitesMapIntegration } from "../collocation-sites/collocations-map-integration.svelte";
-import { hmsFireMapIntegration } from "../hms/hms-fire-map-integration.svelte";
-import { hmsSmokeMapIntegration } from "../hms/hms-smoke-map-integration.svelte";
-import { evStationsMapIntegration } from "../ev-stations/ev-stations-map-integration.svelte";
-import { windMapIntegration } from "../wind/wind.svelte";
-import { mapStyleState } from "../map/map-style-state.svelte.js";
-import { applyMapOptionDefaults } from "./map-option-defaults";
-/** "Reset Map Options": restores every map option to its default. */
-export function resetMapOptions() {
-    applyMapOptionDefaults({
-        manager: monitorsManager,
-        integration: monitorsMapIntegration,
-        collocationSites: collocationSitesMapIntegration,
-        hmsFire: hmsFireMapIntegration,
-        hmsSmoke: hmsSmokeMapIntegration,
-        evStations: evStationsMapIntegration,
-        wind: windMapIntegration,
-        // The basemap reset may start loading a new style; integrations skip the style while
-        // mapManager.styleLoading is set and the refresh on "style.load" re-applies them.
-        mapStyle: mapStyleState
-    }, monitorsManager.meta?.default_pollutant ?? null);
-}

package/dist/lib/reactivity.svelte.js

@@ -1,83 +0,0 @@
-"use strict";
-//class ReactiveState<T> {
-//  private internalValue?: T = $state();
-//
-//  constructor(initialValue?: T) {
-//    this.internalValue = initialValue;
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//
-//  set value(newValue: T) {
-//    // Perform any validation or side effects here
-//    this.internalValue = newValue; // Update the reactive state
-//  }
-//}
-//
-//class ShallowReactiveState<T> {
-//  private internalValue?: T = $state.raw();
-//
-//  constructor(initialValue?: T) {
-//    this.internalValue = initialValue;
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//
-//  set value(newValue: T) {
-//    // Perform any validation or side effects here
-//    this.internalValue = newValue; // Update the reactive state
-//  }
-//}
-//
-//
-//class DerivedReactiveState<T> {
-//  private internalValue?: T;
-//
-//  constructor(expression: () => T) {
-//    this.internalValue = $derived.by(expression);
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//  set value(newValue: T) {
-//    this.internalValue = newValue;
-//  }
-//}
-//
-//export function Derived<V>(value: () => V) {
-//  let ref: DerivedReactiveState<V> = new DerivedReactiveState<V>(value);
-//  return function <V, T = unknown>(
-//    _target: ClassAccessorDecoratorTarget<T, V>,
-//    _ctx: ClassAccessorDecoratorContext,
-//  ): ClassAccessorDecoratorResult<T, V> {
-//
-//    return {
-//      get() {
-//        return ref.value as V;
-//      },
-//    };
-//  }
-//}
-//export function Reactive(shallow?: boolean) {
-//  return function <V, T = unknown>(
-//    _target: ClassAccessorDecoratorTarget<T, V>,
-//    _ctx: ClassAccessorDecoratorContext,
-//  ): ClassAccessorDecoratorResult<T, V> {
-//    let ref = shallow ? new ShallowReactiveState<V>() : new ReactiveState<V>();
-//
-//    return {
-//      get(): V {
-//        return ref.value as V;
-//      },
-//      set(newValue): void {
-//        ref.value = newValue;
-//      },
-//      init(initialValue: V): V {
-//        ref.value = initialValue;
-//        return ref.value as V;
-//      }
-//    };
-//  };
-//}

package/dist/lib/wind/wind.svelte.d.ts

@@ -1,10 +0,0 @@
-import { Map as MaptilerMap } from "@maptiler/sdk";
-import { MapLayerIntegration } from "../map/integrations/map-layer-integration.svelte";
-declare class WindMapIntegration extends MapLayerIntegration {
-    referenceId: string;
-    beforeLayer: string;
-    enabled: boolean;
-    mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
-}
-export declare const windMapIntegration: WindMapIntegration;
-export type { WindMapIntegration };

package/dist/lib/wind/wind.svelte.js

@@ -1,13 +0,0 @@
-import { WindLayer } from "@maptiler/weather";
-import { baseLayerSeperator } from "../map/integrations/base-layer-seperator";
-import { MapLayerIntegration } from "../map/integrations/map-layer-integration.svelte";
-class WindMapIntegration extends MapLayerIntegration {
-    referenceId = "MapTiler Wind";
-    beforeLayer = baseLayerSeperator.referenceId;
-    enabled = $state(false);
-    mapLayer = new WindLayer({
-        id: this.referenceId,
-        opacity: 0.5
-    });
-}
-export const windMapIntegration = new WindMapIntegration();

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

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { format, formatDistanceToNow } from "date-fns";
-	import DataBox from "$lib/components/DataBox.svelte";
-	import type { CollocationSiteMapFeature } from "./types";
-	import { monitorsManager } from "$lib/monitors/monitors.svelte";
-	import { getCurrentLevel } from "$lib/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}