@protobase/ui 0.28.0 → 0.28.2

package/dist/app/charts/chart-groups.js

@@ -39,7 +39,7 @@ const periodPoints = (groups, measure) => groups.map((group) => ({
 	value: measured(group, measure),
 	count: group.count
 }));
-/** A measured number as text: a count whole, a sum or average with the field's decimals, prefix and suffix. */
+/** A measured number as text: a count whole, a sum, average or maximum with the field's decimals, prefix and suffix. */
 const measureText = (value, measure) => {
 	if (value === null) return "—";
 	if (measure.kind === "count") return value.toLocaleString(formatTag());

package/dist/app/charts/period-chart.js

@@ -6,12 +6,21 @@ import { LegendItem } from "./legend-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/app/charts/period-chart.tsx
+const clock = {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: false
+};
+const dayAndClock = {
+	day: "numeric",
+	month: "short",
+	...clock
+};
 const formats = {
-	hour: {
-		hour: "2-digit",
-		minute: "2-digit",
-		hour12: false
-	},
+	minute: clock,
+	"5_minutes": clock,
+	"15_minutes": clock,
+	hour: clock,
 	day: {
 		day: "numeric",
 		month: "short"
@@ -27,13 +36,10 @@ const formats = {
 	year: { year: "numeric" }
 };
 const tooltipFormats = {
-	hour: {
-		day: "numeric",
-		month: "short",
-		hour: "2-digit",
-		minute: "2-digit",
-		hour12: false
-	},
+	minute: dayAndClock,
+	"5_minutes": dayAndClock,
+	"15_minutes": dayAndClock,
+	hour: dayAndClock,
 	day: {
 		day: "numeric",
 		month: "short",
@@ -61,6 +67,17 @@ const axisTick = {
 	fontSize: 11,
 	fill: "var(--muted-foreground)"
 };
+const dayMs = 864e5;
+const withinDay = /* @__PURE__ */ new Set([
+	"minute",
+	"5_minutes",
+	"15_minutes",
+	"hour"
+]);
+const tickFormat = (bucket, points) => {
+	const span = points.length > 1 ? points.at(-1).at - points[0].at : 0;
+	return withinDay.has(bucket) && span >= dayMs ? dayAndClock : formats[bucket];
+};
 const PointTooltip = ({ active, payload, measure, bucket, series }) => {
 	const point = payload?.[0]?.payload;
 	if (!active || !point) return null;
@@ -85,11 +102,11 @@ const PointTooltip = ({ active, payload, measure, bucket, series }) => {
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "font-semibold tabular-nums",
-						children: measureText(point[part.key] ?? null, measure)
+						children: measureText(point[part.key] ?? null, part.measure ?? measure)
 					})
 				]
 			}, part.key)),
-			series && measure.kind !== "average" && /* @__PURE__ */ jsx("div", {
+			series && (measure.kind === "count" || measure.kind === "sum") && /* @__PURE__ */ jsx("div", {
 				className: "mt-0.5 border-t pt-0.5 font-semibold tabular-nums",
 				children: measureText(point.value, measure)
 			}),
@@ -103,7 +120,7 @@ const PointTooltip = ({ active, payload, measure, bucket, series }) => {
 /** A date field's buckets over time, as bars or a line; a bucket without a value to add up is a gap. */
 const PeriodChart = ({ points, measure, bucket, type, series, resource, view }) => {
 	const wide = useMediaQuery("(min-width: 640px)");
-	const tick = formatterOf(formats[bucket]);
+	const tick = formatterOf(tickFormat(bucket, points));
 	const grid = /* @__PURE__ */ jsx(CartesianGrid, {
 		vertical: false,
 		stroke: "var(--border)"

package/dist/app/record-chart/chart-points.js

@@ -0,0 +1,35 @@
+//#region src/app/record-chart/chart-points.ts
+/** How long a bucket is over each range: a minute over the hour, 5 minutes over the day, an hour over the week. */
+const rangeBuckets = {
+	"1h": "minute",
+	"24h": "5_minutes",
+	"7d": "hour"
+};
+/**
+* The buckets of several series as one line of points, each series' number under `keys[i]`. The series come from
+* requests sent one by one, so their ranges may end a bucket apart: a bucket one of them lacks holds `null` for it, as
+* one without a sample does, which the chart draws as a gap rather than as 0.
+*/
+const chartPoints = (series, keys, measure) => {
+	const points = /* @__PURE__ */ new Map();
+	series.forEach((groups, index) => {
+		for (const group of groups) {
+			const at = Date.parse(`${String(group.value)}Z`);
+			const point = points.get(at) ?? {
+				at,
+				value: null,
+				count: 0
+			};
+			point[keys[index]] = group[measure] ?? null;
+			point.count = Math.max(point.count, group.count);
+			points.set(at, point);
+		}
+	});
+	const empty = Object.fromEntries(keys.map((key) => [key, null]));
+	return [...points.values()].sort((a, b) => a.at - b.at).map((point) => ({
+		...empty,
+		...point
+	}));
+};
+//#endregion
+export { chartPoints, rangeBuckets };

package/dist/app/record-chart/messages.js

@@ -0,0 +1,28 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/record-chart/messages.ts
+const text = defineMessages({
+	en: {
+		range: "Range",
+		hour: "Hour",
+		day: "Day",
+		week: "Week",
+		measure: "Per bucket",
+		average: "Average",
+		maximum: "Maximum",
+		noSamples: "No samples in this range.",
+		couldNotLoad: "Could not load the chart."
+	},
+	nl: {
+		range: "Periode",
+		hour: "Uur",
+		day: "Dag",
+		week: "Week",
+		measure: "Per interval",
+		average: "Gemiddelde",
+		maximum: "Maximum",
+		noSamples: "Geen metingen in deze periode.",
+		couldNotLoad: "Kon de grafiek niet laden."
+	}
+});
+//#endregion
+export { text };

package/dist/app/record-chart/record-chart-section.js

@@ -0,0 +1,114 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { Segmented } from "../../primitives/segmented.js";
+import { viewerZone } from "../../format/zone.js";
+import { humanize } from "../../live/naming.js";
+import { Section } from "../../record-view/section.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAggregates } from "../../data/use-aggregates.js";
+import { PeriodChart } from "../charts/period-chart.js";
+import { chartPoints, rangeBuckets } from "./chart-points.js";
+import { text } from "./messages.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/record-chart/record-chart-section.tsx
+const where$1 = createWhere();
+const ranges = [
+	"1h",
+	"24h",
+	"7d"
+];
+const rangeLabels = {
+	"1h": "hour",
+	"24h": "day",
+	"7d": "week"
+};
+/**
+* Line graphs of the samples of `item.resource` that point at the record (`l.chart`), each series' average or maximum
+* per bucket over the last hour, day or week, which the person switches between. Each series is one `:aggregate`
+* read with their access; a bucket without a sample is a gap in its line.
+*/
+const RecordChartSection = ({ item, recordKey }) => {
+	const { resources, views } = useAdminMeta();
+	const [range, setRange] = useState(item.range ?? "1h");
+	const [measure, setMeasure] = useState("average");
+	const model = resources[item.resource];
+	const view = views[item.resource];
+	const granularity = rangeBuckets[range];
+	const filter = printFilter(where$1.eq(item.field, recordKey));
+	const requests = item.series.map((name) => ({
+		groupBy: item.at,
+		filter,
+		...measure === "average" ? { average: name } : { maximum: name },
+		range,
+		granularity,
+		timeZone: viewerZone()
+	}));
+	const results = useAggregates(item.resource, requests, Boolean(model));
+	if (!model) return null;
+	const measures = item.series.map((name) => ({
+		kind: measure,
+		field: model.fields[name],
+		...view?.fields[name] && { hints: view.fields[name] }
+	}));
+	const series = item.series.map((name, index) => ({
+		key: `s${index}`,
+		label: view?.fields[name]?.label ?? humanize(name),
+		color: `var(--chart-${index + 1})`,
+		measure: measures[index]
+	}));
+	const points = results.every((result) => result.data) ? chartPoints(results.map((result) => result.data.groups), series.map((part) => part.key), measure) : [];
+	const actions = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap gap-2",
+		children: [/* @__PURE__ */ jsx(Segmented, {
+			label: text("measure"),
+			value: measure,
+			onChange: setMeasure,
+			options: [{
+				value: "average",
+				label: text("average")
+			}, {
+				value: "maximum",
+				label: text("maximum")
+			}]
+		}), /* @__PURE__ */ jsx(Segmented, {
+			label: text("range"),
+			value: range,
+			onChange: setRange,
+			options: ranges.map((value) => ({
+				value,
+				label: text(rangeLabels[value])
+			}))
+		})]
+	});
+	const body = () => {
+		if (results.some((result) => result.error)) return /* @__PURE__ */ jsx("p", {
+			className: "text-danger-text",
+			children: text("couldNotLoad")
+		});
+		if (results.some((result) => result.isPending)) return /* @__PURE__ */ jsx(Skeleton, { className: "h-40 w-full" });
+		if (points.every((point) => point.count === 0)) return /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: text("noSamples")
+		});
+		return /* @__PURE__ */ jsx(PeriodChart, {
+			points,
+			measure: measures[0],
+			bucket: granularity,
+			type: "line",
+			series,
+			...series.length > 1 && {
+				resource: item.resource,
+				view
+			}
+		});
+	};
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		help: item.help,
+		actions,
+		children: body()
+	});
+};
+//#endregion
+export { RecordChartSection };

package/dist/app/record-page.js

@@ -48,6 +48,7 @@ import { useRestore } from "./delete/use-restore.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
+import { RecordChartSection } from "./record-chart/record-chart-section.js";
 import { RecordActions } from "./pages/record-actions.js";
 import { groupOpen, toggledOpen } from "./group-open.js";
 import { attentionTab, shownTab, splitTabs } from "./record-tabs.js";
@@ -380,6 +381,10 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				owner: model.name
 			}, `related:${item.title}`)];
 		}
+		if (item.kind === "chart") return [/* @__PURE__ */ jsx(RecordChartSection, {
+			item,
+			recordKey
+		}, `chart:${index}`)];
 		if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
 		if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
 			item,

package/dist/data/use-aggregates.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
 import { filterText } from "@protobase/client";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 //#region src/data/use-aggregates.ts
 const useFacets = (resource, field, filter, enabled = true) => {
 	const client = useClient();
@@ -52,5 +52,20 @@ const useAggregate = (resource, params, enabled = true) => {
 		queryFn: () => client.aggregate(resource, wire)
 	});
 };
+/** Several `:aggregate` reads of one resource at once, in the order of `requests`, cached as `useAggregate` caches each. */
+const useAggregates = (resource, requests, enabled = true) => {
+	const client = useClient();
+	return useQueries({ queries: requests.map((params) => {
+		const wire = {
+			...params,
+			filter: filterText(params.filter) ?? ""
+		};
+		return {
+			queryKey: keys.aggregate(resource, JSON.stringify(wire)),
+			enabled,
+			queryFn: () => client.aggregate(resource, wire)
+		};
+	}) });
+};
 //#endregion
-export { useAggregate, useFacets, useHistogram, useSeries };
+export { useAggregate, useAggregates, useFacets, useHistogram, useSeries };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.28.0";
+var version = "0.28.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };