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

package/src/lib/MonitorMapLayout.svelte

@@ -1,38 +1,44 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { onDestroy, untrack } from "svelte";
+	import { onDestroy, onMount, untrack } from "svelte";
 	import { searchParams } from "sv-router";
+	import {
+		collocationSitesPlugin,
+		hmsFirePlugin,
+		hmsSmokePlugin,
+		monitorsPlugin
+	} from "@sjvair/map-sdk";
+	import { windPlugin } from "$lib/wind/wind-plugin.js";
+	import { evPlugin } from "$lib/ev-stations/ev-plugin.svelte.js";
+	import { createEvStore } from "$lib/ev-stations/ev-store.svelte.js";
+	import { stationPopups } from "$lib/ev-stations/station-popup.svelte.js";
 	import MapShell from "$lib/map/MapShell.svelte";
+	import { createLiveMap } from "$lib/map/live-map.svelte.js";
+	import { syncPlugins } from "$lib/map/sync-plugins.svelte.js";
+	import LoadError from "$lib/LoadError.svelte";
+	import { retryMonitorsLoad } from "$lib/monitors/retry-load.js";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
+	import { filteredMonitors } from "$lib/monitors/filtered-source.svelte.js";
+	import Legend from "$lib/legend/Legend.svelte";
+	import {
+		collocationSitesStore,
+		hmsFireStore,
+		hmsSmokeStore,
+		monitorsStore
+	} from "$lib/stores.svelte.js";
 	import OptionsGroup from "$lib/options/OptionsGroup.svelte";
 	import PollutantMenu from "$lib/options/menus/PollutantMenu.svelte";
 	import MonitorsMenu from "$lib/options/menus/MonitorsMenu.svelte";
 	import LayersMenu from "$lib/options/menus/LayersMenu.svelte";
 	import OverlaysMenu from "$lib/options/menus/OverlaysMenu.svelte";
 	import SettingsMenu from "$lib/options/menus/SettingsMenu.svelte";
+	import { mapOptions } from "$lib/options/map-options.svelte.js";
+	import { wantedPlugins } from "$lib/options/plugin-order";
 	import {
 		applyPollutantSelection,
 		currentSelection,
 		parsePollutantParam
 	} from "$lib/options/pollutant-param";
-	import LoadError from "$lib/LoadError.svelte";
-	import Legend from "$lib/legend/Legend.svelte";
-	import {
-		fireSmokeLegendSections,
-		pollutantLegendSection,
-		type LegendSection
-	} from "$lib/legend/legend-data";
-	import { monitorsManager } from "$lib/monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-	import { windMapIntegration } from "$lib/wind/wind.svelte";
-	import { baseLayerSeperator } from "$lib/map/integrations/base-layer-seperator";
-	import type { SomeMapIntegration } from "$lib/map/integrations/types";
-	import { collocationSitesManager } from "$lib/collocation-sites/collocations.svelte";
-	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
-	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
-	import { hmsManager } from "$lib/hms/hms.svelte";
-	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
-	import { FIRE_LEGEND_CATEGORIES } from "$lib/hms/hms-fire-icon-manager";
-	import { hmsSmokeMapIntegration, SMOKE_LEGEND } from "$lib/hms/hms-smoke-map-integration.svelte";
 	import Search from "$lib/search/Search.svelte";
 	import { useMonitorMapRouter } from "./router-context";
 
@@ -44,51 +50,105 @@
 
 	const { route, navigate, basePath } = useMonitorMapRouter();
 
-	const integrations: Array<SomeMapIntegration> = [
-		baseLayerSeperator,
-		collocationSitesMapIntegration,
-		windMapIntegration,
-		hmsSmokeMapIntegration,
-		hmsFireMapIntegration,
-		monitorsMapIntegration,
-		evStationsMapIntegration
-	];
+	// The map's state lives as long as this layout; MapView attaches the GL map when it mounts.
+	const map = createLiveMap();
 
-	const pollutantTargets = { manager: monitorsManager, integration: monitorsMapIntegration };
-
-	// "?pollutant=none" must disable monitors before the effects below first run, so the
-	// state->URL effect never sees enabled monitors and overwrites the param.
+	// "?pollutant=none" must turn monitors off before the effects below first run, so the
+	// state->URL effect never sees monitors on and overwrites the param.
 	if (parsePollutantParam(route.search.pollutant) === "none") {
-		monitorsMapIntegration.enabled = false;
+		mapOptions.monitorsOn = false;
 	}
 
 	// The load screen stays up until the monitors load, so a failure has to be shown on it.
-	let loadFailed = $state(false);
+	const loadFailed = $derived(monitorsStore.dataSource.status.state === "error");
 
 	function loadMonitors() {
-		loadFailed = false;
 		// A rejected init() can be retried: a later call starts a fresh run.
-		monitorsManager.init(route.search.pollutant).catch((error) => {
-			console.error(error);
-			loadFailed = true;
-		});
+		monitorsManager.init(route.search.pollutant).catch((error) => console.error(error));
 	}
 
 	loadMonitors();
-	// A previous instance of this layout stopped polling in onDestroy; init() is a no-op by now.
-	monitorsManager.resumeAutoUpdate();
-	collocationSitesManager.init();
-	hmsManager.init();
-	monitorsMapIntegration.onMonitorClick = (id: string) => {
-		navigate(`${basePath}/monitor/:id`, { params: { id } }).catch(console.error);
-	};
 
-	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+	const panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+	const selectedId = $derived(panelOpen ? route.params.id : undefined);
+
+	// The monitors the Monitors menu's filters let through; clusters are built from these.
+	const monitorsSource = filteredMonitors(monitorsStore.dataSource, mapOptions);
+
+	// EV chargers: each level is fetched the first time it is wanted. A failure shows in the legend
+	// with a retry.
+	const evStore = createEvStore();
+	const evPopups = stationPopups(map);
+	$effect(() => {
+		const wanted = wantedPlugins(mapOptions, monitorsManager.pollutant);
+		for (const [key, level] of [
+			["ev-l2", "lvl2"],
+			["ev-l3", "lvl3"]
+		] as const) {
+			if (wanted.has(key)) untrack(() => evStore.load(level)).catch(console.error);
+		}
+	});
+
+	// The options decide which plugins are on the map, in DRAW_ORDER. `clustered` is fixed when a
+	// plugin is built, so a change rebuilds it.
+	syncPlugins(
+		map,
+		() => wantedPlugins(mapOptions, monitorsManager.pollutant),
+		{
+			monitors: () => ({
+				plugin: monitorsPlugin({
+					id: "monitors",
+					source: monitorsSource,
+					layerLabel: "Monitors",
+					selectable: true,
+					selectedStyle: "enlarge",
+					clustered: mapOptions.clustered
+				}),
+				// A removed plugin forgets its mode and selection, so each add passes them again.
+				options: {
+					selectionMode: "single",
+					selection: selectedId ? { kind: "monitors", ids: [selectedId] } : null
+				}
+			}),
+			"ev-l2": () =>
+				evPlugin("lvl2", evStore.dataSource("lvl2"), { clustered: mapOptions.clustered }),
+			"ev-l3": () =>
+				evPlugin("lvl3", evStore.dataSource("lvl3"), { clustered: mapOptions.clustered })
+		},
+		() => mapOptions.clustered
+	);
+
+	// Wind, Fire & Smoke and collocation sites take no build-time option, so they sit in their own call
+	// without `deps`: a Marker Clusters change rebuilds only the monitors above. DRAW_ORDER still
+	// holds across the two calls because `syncPlugins` reads `map.plugins` (every plugin on the
+	// map, whichever call added it) to find the plugin to add before.
+	syncPlugins(map, () => wantedPlugins(mapOptions, monitorsManager.pollutant), {
+		wind: () => windPlugin(),
+		"hms-smoke": () =>
+			hmsSmokePlugin({
+				id: "hms-smoke",
+				source: hmsSmokeStore.dataSource,
+				layerLabel: "Smoke"
+			}),
+		"hms-fire": () =>
+			hmsFirePlugin({
+				id: "hms-fire",
+				source: hmsFireStore.groups,
+				hotspots: hmsFireStore.hotspots,
+				layerLabel: "Fires"
+			}),
+		"collocation-sites": () =>
+			collocationSitesPlugin({
+				id: "collocation-sites",
+				source: collocationSitesStore.dataSource,
+				layerLabel: "Collocation sites"
+			})
+	});
 
 	// Keep the Pollutant menu's selection (pm25 / o3 / none) and the "pollutant" URL param in
-	// sync, both directions. init() only seeds the pollutant on the manager's first-ever
+	// sync, both directions. init() only seeds the pollutant on the store's first-ever
 	// initialization; this effect applies a later "?pollutant=" change (e.g. navigating in from
-	// elsewhere) to an already-running map.
+	// elsewhere, or back/forward) to an already-running map.
 	$effect(() => {
 		const selection = parsePollutantParam(route.search.pollutant);
 		if (!monitorsManager.initialized || !selection) return;
@@ -96,47 +156,54 @@
 		// state here would make a UI-driven change re-trigger this effect before the effect below
 		// syncs the URL, so it would see the stale URL and revert the user's change.
 		untrack(() => {
-			if (
-				currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled) !== selection
-			) {
-				applyPollutantSelection(selection, pollutantTargets);
+			if (currentSelection(monitorsManager.pollutant, mapOptions.monitorsOn) !== selection) {
+				applyPollutantSelection(selection, { manager: monitorsManager, options: mapOptions });
 			}
 		});
 	});
 
 	// ...and the reverse: reflect UI-driven changes back to the URL.
 	$effect(() => {
-		const selection = currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled);
+		const selection = currentSelection(monitorsManager.pollutant, mapOptions.monitorsOn);
 		if (selection && searchParams.get("pollutant") !== selection) {
 			searchParams.set("pollutant", selection);
 		}
 	});
 
-	// Clear selected icon scale when the detail panel closes
-	$effect(() => {
-		if (panelOpen) return;
-		monitorsMapIntegration.selectedMonitorId = null;
+	onMount(() => {
+		// A failed load leaves its layer empty (map-sdk's legend shows the status); log it once.
+		for (const store of [hmsSmokeStore, hmsFireStore, collocationSitesStore]) {
+			store.init().catch(console.error);
+		}
+		// A previous instance of this layout paused polling in onDestroy; init() is a no-op by now.
+		monitorsManager.resumeAutoUpdate();
+		return map.on("featureclick", ({ pluginId, ref, lngLat }) => {
+			// A station clicked on the map or picked from the list: its popup.
+			if ((pluginId === "ev-l2" || pluginId === "ev-l3") && ref.kind === "feature") {
+				const station = evStore.station(ref.id);
+				if (station) evPopups.open(pluginId, station, lngLat);
+				return;
+			}
+			if (pluginId !== "monitors" || ref.kind !== "monitor") return;
+			navigate(`${basePath}/monitor/:id`, { params: { id: ref.id } }).catch(console.error);
+			map.easeTo({ center: lngLat, minZoom: 12 });
+		});
 	});
 
-	const legendSections: Array<LegendSection> = $derived.by(() => {
-		const sections: Array<LegendSection> = [];
-		if (monitorsMapIntegration.enabled && monitorsManager.pollutant && monitorsManager.levels) {
-			const pollutant = pollutantLegendSection(monitorsManager.pollutant, monitorsManager.levels);
-			if (pollutant) sections.push(pollutant);
-		}
-		if (hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled) {
-			sections.push(...fireSmokeLegendSections(FIRE_LEGEND_CATEGORIES, SMOKE_LEGEND));
-		}
-		return sections;
+	// The selected monitor follows the route: the open panel's monitor, none once it closes.
+	$effect(() => {
+		const id = selectedId;
+		map.setSelection("monitors", id ? { kind: "monitors", ids: [id] } : null);
 	});
 
 	onDestroy(() => {
-		monitorsManager.autoUpdate.stop();
+		monitorsManager.pauseAutoUpdate();
+		map.destroy();
 	});
 </script>
 
 <MapShell
-	{integrations}
+	{map}
 	ready={monitorsManager.initialized}
 	{panelOpen}
 	knownRoutes={[`${basePath}/monitor/`]}
@@ -144,7 +211,10 @@
 >
 	{#snippet loadError()}
 		{#if loadFailed}
-			<LoadError message="Couldn't load air monitors." onretry={loadMonitors} />
+			<LoadError
+				message="Couldn't load air monitors."
+				onretry={() => retryMonitorsLoad(monitorsStore, loadMonitors)}
+			/>
 		{/if}
 	{/snippet}
 	{#snippet menu()}
@@ -155,16 +225,16 @@
 		<OptionsGroup>
 			<LayersMenu />
 			<OverlaysMenu />
-			<SettingsMenu />
+			<SettingsMenu {map} />
 		</OptionsGroup>
 	{/snippet}
-	{#snippet search()}
-		<Search />
-	{/snippet}
 	{#snippet overlays()}
 		<div class="pointer-events-none absolute bottom-4 left-4 z-10">
-			<Legend sections={legendSections} />
+			<Legend {map} />
 		</div>
 	{/snippet}
+	{#snippet search()}
+		<Search {map} />
+	{/snippet}
 	{@render children()}
 </MapShell>

package/src/lib/components/DataBox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { darken, readableColor } from "color2k";
+	import { NEUTRAL_LEVEL_COLOR } from "$lib/levels";
 
 	interface DataBoxProps {
 		color: string;
@@ -8,7 +9,9 @@
 		value: string;
 	}
 
-	const { color, header, subheading, value }: DataBoxProps = $props();
+	const { color: givenColor, header, subheading, value }: DataBoxProps = $props();
+	// An empty color (a level without one) would make color2k throw.
+	const color = $derived(givenColor || NEUTRAL_LEVEL_COLOR);
 	const borderColor = $derived(darken(color, 0.1));
 	const textColor = $derived(readableColor(color));
 </script>

package/src/lib/config.svelte.ts

@@ -0,0 +1,16 @@
+export interface MonitorMapConfig {
+	maptilerKey: string;
+	nrelKey: string;
+}
+
+let current: MonitorMapConfig | null = null;
+
+/** Hosts call this once at startup, before the map or the EV layer is used. */
+export function configureMonitorMap(config: MonitorMapConfig): void {
+	current = { ...config };
+}
+
+export function monitorMapConfig(): MonitorMapConfig {
+	if (!current) throw new Error("monitor-map: call configureMonitorMap() first");
+	return current;
+}

package/src/lib/core.ts

@@ -1,11 +1,12 @@
 /**
  * Light entry (`@sjvair/monitor-map/core`): what a host app needs at startup, without the map.
  *
- * Nothing imported here may reach @maptiler/sdk, @maptiler/weather or uplot at runtime;
+ * Nothing imported here may reach @maptiler/sdk, maplibre, @maptiler/weather or uplot at runtime;
  * `npm run test:bundle` enforces it. Everything is re-exported from the same modules the
  * main entry uses, so `monitorsManager` and the router context stay single instances
  * whichever entries a host mixes.
  */
+export { configureMonitorMap, monitorMapConfig, type MonitorMapConfig } from "./config.svelte.js";
 export {
 	ROUTER_KEY,
 	provideMonitorMapRouter,
@@ -14,4 +15,3 @@ export {
 } from "./router-context";
 export { monitorsManager } from "./monitors/monitors.svelte.js";
 export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte.js";
-export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";

package/src/lib/data-chart/DataChart.svelte

@@ -7,14 +7,20 @@
 	import uPlot from "uplot";
 	import "uplot/dist/uPlot.min.css";
 	import { getMonitorEntriesCSVUrl } from "@sjvair/sdk/monitors";
-	import { format, parseISO } from "date-fns";
 	import { RangeCalendar } from "$lib/components/ui/range-calendar";
 	import type { PanelPollutant } from "../monitors/panel-pollutant";
 	import { monitorsManager } from "../monitors/monitors.svelte";
 	import { DataChartManager } from "./data-chart.svelte";
-	import { createDateRange, extendToNow, includesToday } from "./DateRange";
+	import {
+		createDateRange,
+		dateRangeLabel as formatDateRange,
+		extendToNow,
+		fileDay,
+		includesToday
+	} from "./DateRange";
 	import { fetchChartData, type ChartMonitor } from "./requests";
 	import { getChartConfig } from "./chart-utils";
+	import { PACIFIC_TIME_ZONE } from "./pacific-time";
 	import { levelColors } from "./level-colors";
 
 	interface Props {
@@ -38,11 +44,7 @@
 	let dateRangeContainer: HTMLElement | undefined = $state();
 	let triggerRebuild: (() => void) | undefined = $state();
 
-	const dateRangeLabel = $derived(
-		format(parseISO(chartManager.dateRange.start), "MMM d") +
-			" – " +
-			format(parseISO(chartManager.dateRange.end), "MMM d, yyyy")
-	);
+	const dateRangeLabel = $derived(formatDateRange(chartManager.dateRange));
 
 	// A request with no entries still resolves to [[], []], so test the x axis, not the tuple.
 	const noChartData = $derived(!chartManager.chartData[0]?.length);
@@ -53,17 +55,18 @@
 				? "No Data Available For Selected Date Range"
 				: ""
 	);
-	const pollutantLabel = $derived(pollutant === "pm25" ? "PM 2.5" : "Ozone");
-	// Level definitions are shared metadata, not the map's current selection.
-	const colors = $derived(
-		levelColors(monitorsManager.meta?.entryType(pollutant).asIter.levels ?? [])
-	);
-
-	// Reload for another monitor or pollutant, not for a new object describing the same one.
-	// Both go through a $derived: the owner recomputes what it passes on every refresh, and a
-	// prop read directly would re-run this effect even when the value is unchanged.
+	// Props are read through a $derived: the owner recomputes what it passes on every refresh,
+	// and a prop read directly would re-run an effect even when the value is unchanged.
 	const monitorId = $derived(monitor.id);
+	const monitorType = $derived(monitor.type);
 	const chartPollutant = $derived(pollutant);
+
+	// Level definitions and labels are shared metadata, not the map's current selection.
+	const entryType = $derived(monitorsManager.meta?.entryType(chartPollutant));
+	const pollutantLabel = $derived(entryType?.label ?? "");
+	const colors = $derived(levelColors(entryType?.scale ?? null));
+
+	// Reload for another monitor or pollutant, not for a new object describing the same one.
 	$effect(() => {
 		void monitorId;
 		void chartPollutant;
@@ -101,9 +104,15 @@
 		return () => document.removeEventListener("click", handleDocClick);
 	});
 
+	// Rebuild for new data or anything the chart draws with, and nothing else: `rebuild` runs
+	// untracked, so a refreshed copy of the same monitor does not recreate the chart.
 	$effect(() => {
-		void chartManager.chartData; // re-run whenever chart data updates
-		triggerRebuild?.();
+		void chartManager.chartData;
+		void monitorType;
+		void colors;
+		void pollutantLabel;
+		const rebuild = triggerRebuild;
+		untrack(() => rebuild?.());
 	});
 
 	const chartAttachment: Attachment<HTMLElement> = (el) => {
@@ -121,7 +130,9 @@
 			instance?.destroy?.();
 			el.innerHTML = "";
 			const maxDiff = Math.max(...flatData) - Math.min(...flatData);
-			const opts = getChartConfig(monitor.type, maxDiff, width, height, colors, pollutantLabel);
+			const opts = getChartConfig(monitorType, maxDiff, width, height, colors, pollutantLabel);
+			// Axis ticks in Pacific time, like the tooltip.
+			opts.tzDate = (ts) => uPlot.tzDate(new Date(ts * 1000), PACIFIC_TIME_ZONE);
 			instance = new uPlot(opts, chartManager.chartData, el);
 		};
 
@@ -153,7 +164,10 @@
 		const request = ++chartRequest;
 		chartController?.abort();
 		const controller = (chartController = new AbortController());
-		if (!silent) chartManager.loading = true;
+		// A refresh that supersedes a load still in flight takes over its loading flag: the
+		// superseded load will never clear it.
+		const ownsLoading = !silent || chartManager.loading;
+		chartManager.loading = ownsLoading;
 		let data: Awaited<ReturnType<typeof fetchChartData>>;
 		try {
 			data = await fetchChartData(monitor, chartManager.dateRange, pollutant, {
@@ -161,14 +175,15 @@
 			});
 		} catch (err) {
 			// Superseded or closed: the newer call owns `loading` and the chart, so leave both.
-			if (controller.signal.aborted) return;
-			throw err;
+			if (controller.signal.aborted || request !== chartRequest) return;
+			console.error("Failed to load chart data: ", err);
+			data = [];
 		}
 		// A newer request (another range, monitor, pollutant or refresh) owns the chart now.
 		if (request !== chartRequest) return;
 		// A failed request resolves to [] (an empty range is [[], []]); a background refresh
 		// that failed keeps the chart already on screen.
-		if (silent && data.length === 0) return;
+		if (!ownsLoading && data.length === 0) return;
 		chartManager.chartData = data;
 		chartManager.loading = false;
 	}
@@ -201,8 +216,8 @@
 		if (!canvas) return;
 		const link = document.createElement("a");
 		const monitorName = monitor.name.split(" ").join("-");
-		const start = format(parseISO(chartManager.dateRange.start), "dd.MMM.yyyy");
-		const end = format(parseISO(chartManager.dateRange.end), "dd.MMM.yyyy");
+		const start = fileDay(chartManager.dateRange.start);
+		const end = fileDay(chartManager.dateRange.end);
 		link.download = `${monitorName}_${start}-${end}.png`;
 		link.href = canvas.toDataURL();
 		link.click();

package/src/lib/data-chart/DateRange.ts

@@ -1,32 +1,75 @@
-import { subDays, startOfDay, endOfDay, isToday, parseISO } from "date-fns";
+import { addPacificDays, endOfPacificDay, startOfPacificDay } from "@sjvair/sdk/datetime/pacific";
 import type { DateValue } from "@internationalized/date";
 
+/** ISO instants. Days are Pacific days, whatever zone the device is in. */
 export type DateRange = { start: string; end: string };
 
-export function createDateRange(start?: DateValue, end?: DateValue): DateRange {
+/** An instant on the given calendar day in Pacific time (noon UTC is 4–5 AM Pacific). */
+function onPacificDay(day: DateValue): Date {
+	return new Date(Date.UTC(day.year, day.month - 1, day.day, 12));
+}
+
+function samePacificDay(a: Date, b: Date): boolean {
+	return startOfPacificDay(a).getTime() === startOfPacificDay(b).getTime();
+}
+
+/**
+ * The chart's range: with no days picked, the start of yesterday through now; otherwise the
+ * whole picked days, ending now when the end day is today.
+ */
+export function createDateRange(start?: DateValue, end?: DateValue, now = new Date()): DateRange {
 	if (!start || !end) {
 		return {
-			start: startOfDay(subDays(new Date(), 1)).toISOString(),
-			end: new Date().toISOString()
+			start: startOfPacificDay(addPacificDays(now, -1)).toISOString(),
+			end: now.toISOString()
 		};
 	}
 
-	const startDate = startOfDay(new Date(start.year, start.month - 1, start.day));
-	let endDate = new Date(end.year, end.month - 1, end.day);
-	endDate = isToday(endDate) ? new Date() : endOfDay(endDate);
-
+	const endDay = onPacificDay(end);
 	return {
-		start: startDate.toISOString(),
-		end: endDate.toISOString()
+		start: startOfPacificDay(onPacificDay(start)).toISOString(),
+		end: (samePacificDay(endDay, now) ? now : endOfPacificDay(endDay)).toISOString()
 	};
 }
 
-/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
-export function includesToday(range: DateRange): boolean {
-	return isToday(parseISO(range.end));
+/** Whether the range ends on the current Pacific day, i.e. it can still gain entries. */
+export function includesToday(range: DateRange, now = new Date()): boolean {
+	return samePacificDay(new Date(range.end), now);
 }
 
 /** The same range with its end moved to the present. */
-export function extendToNow(range: DateRange): DateRange {
-	return { start: range.start, end: new Date().toISOString() };
+export function extendToNow(range: DateRange, now = new Date()): DateRange {
+	return { start: range.start, end: now.toISOString() };
+}
+
+const PACIFIC = "America/Los_Angeles";
+const shortDay = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	month: "short",
+	day: "numeric"
+});
+const shortDayYear = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	month: "short",
+	day: "numeric",
+	year: "numeric"
+});
+const fileDayParts = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	day: "2-digit",
+	month: "short",
+	year: "numeric"
+});
+
+/** The range's Pacific days for display, e.g. "Nov 3 – Nov 4, 2026". */
+export function dateRangeLabel(range: DateRange): string {
+	return `${shortDay.format(new Date(range.start))} – ${shortDayYear.format(new Date(range.end))}`;
+}
+
+/** An instant's Pacific day for a file name, e.g. "04.Nov.2026". */
+export function fileDay(iso: string): string {
+	const parts = Object.fromEntries(
+		fileDayParts.formatToParts(new Date(iso)).map((part) => [part.type, part.value])
+	);
+	return `${parts.day}.${parts.month}.${parts.year}`;
 }

package/src/lib/data-chart/chart-utils.ts

@@ -1,6 +1,6 @@
 import type { LevelColors } from "./level-colors";
 import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
-import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
+import { chartRangeMax } from "./pacific-time";
 import type uPlot from "uplot";
 import type { MonitorType } from "@sjvair/sdk";
 
@@ -64,12 +64,7 @@ export function getChartConfig(
 		},
 		scales: {
 			x: {
-				range: (_: uPlot, min: number, max: number) => {
-					const maxDate = fromUnixTime(max);
-					const now = new Date();
-					max = isToday(maxDate) && isAfter(now, maxDate) ? getUnixTime(now) : max;
-					return [min, max];
-				}
+				range: (_: uPlot, min: number, max: number) => [min, chartRangeMax(max)]
 			},
 			y: {
 				range: {
@@ -118,6 +113,10 @@ function getSeriesConfigs(monitorType: MonitorType, stops: LevelColors) {
 		case "airgradient":
 		case "purpleair":
 			return [baseXSeriesConfig, pm25SeriesConfig(stops)];
+
+		// Types without a real-time series of their own (CIMIS weather stations, from SDK 5.0).
+		default:
+			return [baseXSeriesConfig, singleSeriesConfig];
 	}
 }
 

package/src/lib/data-chart/level-colors.ts

@@ -1,13 +1,12 @@
+import type { Scale } from "@sjvair/map-sdk/data";
+
 /** Color stops for a chart: each level's lower bound and its hex color without the `#`. */
 export type LevelColors = Array<[number, string]>;
 
-// `range` is loose on purpose: the SDK types it as a tuple with an open tail, and only its
-// first member (the level's lower bound) is read.
-export function levelColors(
-	levels: ReadonlyArray<{
-		range: readonly [number, ...unknown[]] | readonly number[];
-		color: string;
-	}>
-): LevelColors {
-	return levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+/** The chart's color stops from a range scale; a level with no lower bound or color is skipped. */
+export function levelColors(scale: Scale | null): LevelColors {
+	return (scale?.levels ?? []).flatMap((level): LevelColors => {
+		if (level.min === null || !level.color) return [];
+		return [[level.min, level.color.replace(/^#/, "")]];
+	});
 }