@sjvair/monitor-map 3.0.3 → 3.0.5

package/dist/lib/data-chart/chart-utils.js

@@ -1,99 +1,163 @@
-import { monitorsManager as e } from "../monitors/monitors.svelte.js";
-import { tooltipsPlugin as t, uPlotCursorConfig as n } from "./tooltip.js";
-import { fromUnixTime as r, getUnixTime as i, isAfter as a, isToday as o } from "date-fns";
-//#region src/lib/data-chart/chart-utils.ts
-var s = "3572b0";
-function c() {
-	let t = (e.levels ?? []).map((e) => [e.range[0], e.color.replace(/^#/, "")]);
-	return t.push([Infinity, "000000"]), t;
+import { monitorsManager } from "../monitors/monitors.svelte";
+import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
+import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
+const PM25_AVG_60_STROKE = "3572b0";
+function getColors() {
+    const levels = monitorsManager.levels ?? [];
+    const colors = levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+    colors.push([Infinity, "000000"]);
+    return colors;
 }
-var l = {}, u = {
-	show: !0,
-	spanGaps: !1,
-	width: 1
-}, d = {
-	...u,
-	label: "Real Time",
-	width: 2,
-	stroke: (e) => g(e, "y", 1, c(), !0)
-}, f = {
-	...u,
-	label: "60 Minute Average",
-	stroke: (e) => h(e, s)
+const baseXSeriesConfig = {};
+const baseYSeriesConfig = {
+    show: true,
+    spanGaps: false,
+    width: 1
 };
-function p(s, c, l, u) {
-	let d = m(s), f = (e, t) => {
-		let n = d[t].stroke;
-		return n(e, t);
-	};
-	return {
-		width: l,
-		height: u,
-		cursor: n.get(),
-		select: { show: !1 },
-		plugins: [t()],
-		series: d,
-		legend: {
-			live: !1,
-			markers: { fill: (e, t) => f(e, t) }
-		},
-		scales: {
-			x: { range: (e, t, n) => {
-				let s = r(n), c = /* @__PURE__ */ new Date();
-				return n = o(s) && a(c, s) ? i(c) : n, [t, n];
-			} },
-			y: { range: {
-				min: {
-					mode: 1,
-					pad: .1
-				},
-				max: {
-					mode: 2,
-					soft: 0,
-					pad: .1
-				}
-			} }
-		},
-		axes: [{ grid: { show: !1 } }, {
-			label: e.pollutant === "pm25" ? "PM 2.5" : "Ozone",
-			side: 3,
-			values: (e, t) => t.map((e) => e.toFixed(+(c < 5)))
-		}],
-		hooks: { ready: [() => document.querySelector(".u-series").remove()] }
-	};
+const pm25SeriesConfig = {
+    ...baseYSeriesConfig,
+    label: "Real Time",
+    width: 2,
+    stroke: (u) => scaleGradient(u, "y", 1, getColors(), true)
+};
+const pm25Avg60SeriesConfig = {
+    ...baseYSeriesConfig,
+    label: "60 Minute Average",
+    stroke: (u) => autograd(u, PM25_AVG_60_STROKE)
+};
+export function getChartConfig(sourceName, maxDiff, width, height) {
+    const series = getSeriesConfigs(sourceName);
+    const getStroke = (u, sIdx) => {
+        const stroke = series[sIdx].stroke;
+        return stroke(u, sIdx);
+    };
+    return {
+        width,
+        height,
+        cursor: uPlotCursorConfig.get(),
+        // @ts-expect-error: select missing pseudo "required" options
+        select: {
+            show: false
+        },
+        plugins: [tooltipsPlugin()],
+        series,
+        legend: {
+            live: false,
+            markers: {
+                fill: (u, sIdx) => getStroke(u, sIdx)
+            }
+        },
+        scales: {
+            x: {
+                range: (_, min, max) => {
+                    const maxDate = fromUnixTime(max);
+                    const now = new Date();
+                    max = isToday(maxDate) && isAfter(now, maxDate) ? getUnixTime(now) : max;
+                    return [min, max];
+                }
+            },
+            y: {
+                range: {
+                    min: {
+                        mode: 1,
+                        pad: 0.1
+                    },
+                    max: {
+                        mode: 2,
+                        soft: 0,
+                        pad: 0.1
+                    }
+                }
+            }
+        },
+        axes: [
+            {
+                grid: {
+                    show: false
+                }
+            },
+            {
+                label: monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone",
+                side: 3,
+                values: (_, ticks) => ticks.map((v) => v.toFixed(maxDiff < 5 ? 1 : 0))
+            }
+        ],
+        hooks: {
+            ready: [() => document.querySelector(".u-series").remove()]
+        }
+    };
 }
-function m(e) {
-	let t = Object.assign({}, f);
-	switch (t.width = 2, e) {
-		case "airnow":
-		case "aqview":
-		case "bam1022": return [l, t];
-		case "airgradient":
-		case "purpleair": return [l, d];
-	}
+function getSeriesConfigs(monitorType) {
+    const singleSeriesConfig = Object.assign({}, pm25Avg60SeriesConfig);
+    singleSeriesConfig.width = 2;
+    switch (monitorType) {
+        case "airnow":
+        case "aqview":
+        case "bam1022":
+            return [baseXSeriesConfig, singleSeriesConfig];
+        case "airgradient":
+        case "purpleair":
+            return [baseXSeriesConfig, pm25SeriesConfig];
+    }
 }
-function h(e, t) {
-	return e.series.length > 2 ? t : g(e, "y", 1, c(), !0);
+function autograd(u, fallback) {
+    if (u.series.length > 2) {
+        return fallback;
+    }
+    return scaleGradient(u, "y", 1, getColors(), true);
 }
-function g(e, t, n, r, i = !1) {
-	let a = e.scales[t], o, s;
-	for (let e = 0; e < r.length; e++) {
-		let t = r[e][0];
-		if ((t <= a.min || o === void 0) && (o = e), s = e, t >= a.max) break;
-	}
-	if (o == s) return r[o][1];
-	let c = r[o][0], l = r[s][0];
-	c === -Infinity && (c = a.min || 0), l === Infinity && (l = a.max || 0);
-	let u = e.valToPos(c, t, !0), d = e.valToPos(l, t, !0);
-	if (!u || !d) return;
-	let f = u - d, p, m, h, g;
-	n == 1 ? (p = h = 0, m = u, g = d) : (m = g = 0, p = u, h = d);
-	let _ = e.ctx.createLinearGradient(p, m, h, g), v;
-	for (let n = o; n <= s; n++) {
-		let a = r[n], c = (u - (n == o ? u : n == s ? d : e.valToPos(a[0], t, !0))) / f;
-		i && n > o && _.addColorStop(c, v), _.addColorStop(c, v = `#${a[1]}`);
-	}
-	return _;
+function scaleGradient(u, scaleKey, ori, scaleStops, discrete = false) {
+    const scale = u.scales[scaleKey];
+    let minStopIdx;
+    let maxStopIdx;
+    for (let i = 0; i < scaleStops.length; i++) {
+        const stopVal = scaleStops[i][0];
+        if (stopVal <= scale.min || minStopIdx === undefined) {
+            minStopIdx = i;
+        }
+        maxStopIdx = i;
+        if (stopVal >= scale.max)
+            break;
+    }
+    if (minStopIdx == maxStopIdx) {
+        return scaleStops[minStopIdx][1];
+    }
+    let minStopVal = scaleStops[minStopIdx][0];
+    let maxStopVal = scaleStops[maxStopIdx][0];
+    if (minStopVal === -Infinity)
+        minStopVal = scale.min || 0;
+    if (maxStopVal === Infinity)
+        maxStopVal = scale.max || 0;
+    const minStopPos = u.valToPos(minStopVal, scaleKey, true);
+    const maxStopPos = u.valToPos(maxStopVal, scaleKey, true);
+    if (!minStopPos || !maxStopPos)
+        return;
+    const range = minStopPos - maxStopPos;
+    let x0, y0, x1, y1;
+    if (ori == 1) {
+        x0 = x1 = 0;
+        y0 = minStopPos;
+        y1 = maxStopPos;
+    }
+    else {
+        y0 = y1 = 0;
+        x0 = minStopPos;
+        x1 = maxStopPos;
+    }
+    const grd = u.ctx.createLinearGradient(x0, y0, x1, y1);
+    let prevColor;
+    for (let i = minStopIdx; i <= maxStopIdx; i++) {
+        const s = scaleStops[i];
+        const stopPos = i == minStopIdx
+            ? minStopPos
+            : i == maxStopIdx
+                ? maxStopPos
+                : u.valToPos(s[0], scaleKey, true);
+        const pct = (minStopPos - stopPos) / range;
+        if (discrete && i > minStopIdx) {
+            grd.addColorStop(pct, prevColor);
+        }
+        grd.addColorStop(pct, (prevColor = `#${s[1]}`));
+    }
+    return grd;
 }
-//#endregion
-export { p as getChartConfig };

package/dist/lib/data-chart/data-chart.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DateRange } from "./DateRange.ts";
+declare class DataChartManager {
+    dateRange: DateRange;
+    chartData: uPlot.AlignedData;
+    loading: boolean;
+}
+export { DataChartManager };

package/dist/lib/data-chart/data-chart.svelte.js

@@ -1,28 +1,7 @@
-import { createDateRange as e } from "./DateRange.js";
-import * as t from "svelte/internal/client";
-//#region src/lib/data-chart/data-chart.svelte.ts
-var n = class {
-	#e = t.state(t.proxy(e()));
-	get dateRange() {
-		return t.get(this.#e);
-	}
-	set dateRange(e) {
-		t.set(this.#e, e, !0);
-	}
-	#t = t.state(t.proxy([]));
-	get chartData() {
-		return t.get(this.#t);
-	}
-	set chartData(e) {
-		t.set(this.#t, e, !0);
-	}
-	#n = t.state(!1);
-	get loading() {
-		return t.get(this.#n);
-	}
-	set loading(e) {
-		t.set(this.#n, e, !0);
-	}
-};
-//#endregion
-export { n as DataChartManager };
+import { createDateRange } from "./DateRange.ts";
+class DataChartManager {
+    dateRange = $state(createDateRange());
+    chartData = $state([]);
+    loading = $state(false);
+}
+export { DataChartManager };

package/dist/lib/data-chart/requests.d.ts

@@ -0,0 +1,3 @@
+import { type MonitorLatestType } from "@sjvair/sdk";
+import type { DateRange } from "./DateRange.ts";
+export declare function fetchChartData(m: MonitorLatestType<"pm25" | "o3">, d: DateRange): Promise<uPlot.AlignedData>;

package/dist/lib/data-chart/requests.js

@@ -1,30 +1,38 @@
-import { monitorsManager as e } from "../monitors/monitors.svelte.js";
-import { getMonitorEntries as t } from "@sjvair/sdk";
-import { addMinutes as n, differenceInMinutes as r, getUnixTime as i, parseISO as a } from "date-fns";
-//#region src/lib/data-chart/requests.ts
-async function o(o, c) {
-	return await t({
-		entryType: e.pollutant ?? "pm25",
-		monitorId: o.id,
-		timestampGte: c.start,
-		timestampLte: c.end
-	}).then((e) => {
-		let t = [], c = o.data_source.name === "PurpleAir" ? 2 : 60, l = [];
-		for (let i = e.length - 1; i >= 0; i--) {
-			let o = e[i];
-			if (t.length > 1) {
-				let e = a(o.timestamp), i = t[t.length - 1];
-				for (; Math.abs(r(e, i)) > c + 1;) i = n(i, c), s(t, l, o, i);
-			}
-			s(t, l, o);
-		}
-		return [t.map((e) => i(e)), l];
-	}).catch((e) => (console.error("Failed to load chart data: ", e), []));
+import { getMonitorEntries } from "@sjvair/sdk";
+import { getUnixTime, parseISO, differenceInMinutes, addMinutes } from "date-fns";
+import { monitorsManager } from "../monitors/monitors.svelte";
+export async function fetchChartData(m, d) {
+    return await getMonitorEntries({
+        entryType: monitorsManager.pollutant ?? "pm25",
+        monitorId: m.id,
+        timestampGte: d.start,
+        timestampLte: d.end
+    })
+        .then((entries) => {
+        const xAxisData = [];
+        const updateDuration = m.data_source.name === "PurpleAir" ? 2 : 60;
+        const yAxisRecord = [];
+        for (let i = entries.length - 1; i >= 0; i--) {
+            const entry = entries[i];
+            if (xAxisData.length > 1) {
+                const entryTime = parseISO(entry.timestamp);
+                let prevTimestamp = xAxisData[xAxisData.length - 1];
+                while (Math.abs(differenceInMinutes(entryTime, prevTimestamp)) > updateDuration + 1) {
+                    prevTimestamp = addMinutes(prevTimestamp, updateDuration);
+                    fillChartDataRecords(xAxisData, yAxisRecord, entry, prevTimestamp);
+                }
+            }
+            fillChartDataRecords(xAxisData, yAxisRecord, entry);
+        }
+        return [xAxisData.map((d) => getUnixTime(d)), yAxisRecord];
+    })
+        .catch((err) => {
+        console.error("Failed to load chart data: ", err);
+        return [];
+    });
 }
-function s(e, t, n, r) {
-	e.push(r ?? a(n.timestamp));
-	let i = parseFloat(n.value);
-	t.push(r ? null : i >= 0 ? i : 0);
+function fillChartDataRecords(xAxisData, yAxisRecord, entry, timestamp) {
+    xAxisData.push(timestamp ?? parseISO(entry.timestamp));
+    const value = parseFloat(entry.value);
+    yAxisRecord.push(timestamp ? null : value >= 0 ? value : 0);
 }
-//#endregion
-export { o as fetchChartData };

package/dist/lib/data-chart/tooltip.d.ts

@@ -0,0 +1,10 @@
+export declare const uPlotCursorConfig: {
+    set: (left: number, top: number) => void;
+    get: () => uPlot.Cursor;
+};
+export declare function tooltipsPlugin(): {
+    hooks: {
+        init: (u: uPlot, opts: uPlot.Options) => void;
+        setCursor: (u: uPlot) => void;
+    };
+};

package/dist/lib/data-chart/tooltip.js

@@ -1,101 +1,163 @@
-import { monitorsManager as e } from "../monitors/monitors.svelte.js";
-import { format as t, fromUnixTime as n } from "date-fns";
-//#region src/lib/data-chart/tooltip.ts
-function r() {
-	return (e.levels ?? []).map((e) => [e.range[0], e.color.replace(/^#/, "")]);
+import { format, fromUnixTime } from "date-fns";
+import { monitorsManager } from "../monitors/monitors.svelte";
+function getColors() {
+    return (monitorsManager.levels ?? []).map((level) => [
+        level.range[0],
+        level.color.replace(/^#/, "")
+    ]);
 }
-var i = -100, a = -100, o = {
-	set: (e, t) => {
-		i = e, a = t;
-	},
-	get: () => ({
-		left: i,
-		top: a,
-		y: !1,
-		points: {
-			size: 7,
-			fill: (e, t) => {
-				let n = e.cursor.idxs[t], i = r();
-				if (n != null && e.series.length >= 2 && t === 1) {
-					let r = e.data[t][n];
-					for (let e = i.length - 1; e >= 0; e--) {
-						let t = i[e];
-						if (r >= t[0]) return `#${t[1]}`;
-					}
-				}
-				let a = e.series[t].stroke;
-				return a(e, t);
-			}
-		}
-	})
-}, s = {
-	pointerEvents: "none",
-	whiteSpace: "nowrap",
-	position: "absolute",
-	backgroundColor: "white",
-	zIndex: "100"
-}, c = {
-	textAlign: "center",
-	backgroundColor: "#f5f5f5",
-	fontWeight: "600",
-	fontSize: ".8rem",
-	padding: ".5rem"
-}, l = {
-	margin: ".5rem",
-	fontSize: ".9rem"
+let cursLeft = -100;
+let cursTop = -100;
+export const uPlotCursorConfig = {
+    set: (left, top) => {
+        cursLeft = left;
+        cursTop = top;
+    },
+    get: () => ({
+        left: cursLeft,
+        top: cursTop,
+        y: false,
+        points: {
+            size: 7,
+            fill: (u, sIdx) => {
+                const xIdx = u.cursor.idxs[sIdx];
+                const colors = getColors();
+                if (xIdx != null && u.series.length >= 2 && sIdx === 1) {
+                    const val = u.data[sIdx][xIdx];
+                    for (let i = colors.length - 1; i >= 0; i--) {
+                        const stop = colors[i];
+                        if (val >= stop[0]) {
+                            return `#${stop[1]}`;
+                        }
+                    }
+                }
+                const stroke = u.series[sIdx].stroke;
+                return stroke(u, sIdx);
+            }
+        }
+    })
 };
-function u() {
-	let e, r, i;
-	function a(t, n) {
-		let a = t.over;
-		r = document.createElement("p"), r.classList.add("card-header"), Object.assign(r.style, c), e = document.createElement("div"), e.classList.add("card"), Object.assign(e.style, s), e.appendChild(r), a.appendChild(e), i = n.series.map((n, r) => {
-			if (r === 0) return;
-			let i = n.stroke, a = document.createElement("p");
-			return Object.assign(a.style, l), a.style.color = i(t, r), r === 1 && (a.style.fontWeight = "600"), e.appendChild(a), a;
-		});
-		function o() {
-			e.style.display = "none", i.forEach((e, t) => {
-				t != 0 && (e.style.display = "none");
-			});
-		}
-		function u() {
-			e.style.display = "block", i.forEach((e, n) => {
-				if (n == 0) return;
-				let r = t.series[n];
-				e.style.display = r.show ? "block" : "none";
-			});
-		}
-		a.addEventListener("mouseleave", () => {
-			t.cursor.lock || o();
-		}), a.addEventListener("mouseenter", () => {
-			u();
-		}), t.cursor.left < 0 ? setTimeout(() => o()) : u();
-	}
-	function u(a) {
-		let { left: s, top: c, idx: l } = a.cursor;
-		if (l == null) return;
-		if (o.set(s, c), i.forEach((e, i) => {
-			if (i != 0 && a.series[i].show) {
-				let o = a.data[0][l], s = a.data[i][l];
-				if (s === null) e.style.display = "none";
-				else {
-					e.style.display = "block";
-					let c = a.series[i].label;
-					c = c?.substring(c.indexOf("(") + 1, c.indexOf(")")) || c, r.textContent = t(n(o), "MMM d, yyyy h:mm a"), e.textContent = `${c}: ${s}`;
-				}
-			}
-		}), !i.slice(1, i.length).find((e) => e.style.display === "block")) {
-			e.style.display = "none";
-			return;
-		}
-		e.style.display = "block";
-		let u = e.offsetWidth, d = a.over.offsetWidth, f = s + 15 + u > d;
-		e.style.left = f ? `${s - 15 - u}px` : `${s + 15}px`, e.style.top = c + "px";
-	}
-	return { hooks: {
-		init: a,
-		setCursor: u
-	} };
+const ttContainerStyles = {
+    pointerEvents: "none",
+    whiteSpace: "nowrap",
+    position: "absolute",
+    backgroundColor: "white",
+    zIndex: "100"
+};
+const ttHeaderStyles = {
+    textAlign: "center",
+    backgroundColor: "#f5f5f5",
+    fontWeight: "600",
+    fontSize: ".8rem",
+    padding: ".5rem"
+};
+const ttLineItemStyles = {
+    margin: ".5rem",
+    fontSize: ".9rem"
+};
+export function tooltipsPlugin() {
+    let ttContainer;
+    let ttHeader;
+    let seriesList;
+    function init(u, opts) {
+        const over = u.over;
+        ttHeader = document.createElement("p");
+        ttHeader.classList.add("card-header");
+        Object.assign(ttHeader.style, ttHeaderStyles);
+        ttContainer = document.createElement("div");
+        ttContainer.classList.add("card");
+        Object.assign(ttContainer.style, ttContainerStyles);
+        ttContainer.appendChild(ttHeader);
+        over.appendChild(ttContainer);
+        seriesList = opts.series.map((s, i) => {
+            if (i === 0)
+                return;
+            const stroke = s.stroke;
+            const line = document.createElement("p");
+            Object.assign(line.style, ttLineItemStyles);
+            line.style.color = stroke(u, i);
+            if (i === 1) {
+                line.style.fontWeight = "600";
+            }
+            ttContainer.appendChild(line);
+            return line;
+        });
+        function hideTips() {
+            ttContainer.style.display = "none";
+            seriesList.forEach((tt, i) => {
+                if (i == 0)
+                    return;
+                tt.style.display = "none";
+            });
+        }
+        function showTips() {
+            ttContainer.style.display = "block";
+            seriesList.forEach((line, i) => {
+                if (i == 0)
+                    return;
+                const s = u.series[i];
+                line.style.display = s.show ? "block" : "none";
+            });
+        }
+        over.addEventListener("mouseleave", () => {
+            if (!u.cursor.lock)
+                hideTips();
+        });
+        over.addEventListener("mouseenter", () => {
+            showTips();
+        });
+        if (u.cursor.left < 0) {
+            setTimeout(() => hideTips());
+        }
+        else {
+            showTips();
+        }
+    }
+    function setCursor(u) {
+        const { left, top, idx } = u.cursor;
+        if (idx == null)
+            return;
+        uPlotCursorConfig.set(left, top);
+        seriesList.forEach((tt, i) => {
+            if (i == 0)
+                return;
+            const s = u.series[i];
+            if (s.show) {
+                const xVal = u.data[0][idx];
+                const yVal = u.data[i][idx];
+                if (yVal === null) {
+                    tt.style.display = "none";
+                }
+                else {
+                    tt.style.display = "block";
+                    let label = u.series[i].label;
+                    label = label?.substring(label.indexOf("(") + 1, label.indexOf(")")) || label;
+                    ttHeader.textContent = format(fromUnixTime(xVal), "MMM d, yyyy h:mm a");
+                    tt.textContent = `${label}: ${yVal}`;
+                }
+            }
+        });
+        const hasContent = !!seriesList
+            .slice(1, seriesList.length)
+            .find((tt) => tt.style.display === "block");
+        if (!hasContent) {
+            ttContainer.style.display = "none";
+            return;
+        }
+        ttContainer.style.display = "block";
+        const offset = 15;
+        const ttWidth = ttContainer.offsetWidth;
+        const chartWidth = u.over.offsetWidth;
+        const overflowsRight = left + offset + ttWidth > chartWidth;
+        ttContainer.style.left = overflowsRight
+            ? `${left - offset - ttWidth}px`
+            : `${left + offset}px`;
+        ttContainer.style.top = top + "px";
+    }
+    return {
+        hooks: {
+            init,
+            setCursor
+        }
+    };
 }
-//#endregion
-export { u as tooltipsPlugin, o as uPlotCursorConfig };