@protobase/ui 0.19.16 → 0.20.0

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

@@ -0,0 +1,52 @@
+import { createWhere, enumLabel, printFilter } from "@protobase/schema";
+//#region src/app/charts/chart-groups.ts
+const where$1 = createWhere();
+const slot = (index) => index >= 0 && index < 8 ? `var(--chart-${index + 1})` : "var(--faint-foreground)";
+const colorOf = (field, hints, value, index) => {
+	const key = String(value);
+	if (value === null) return "var(--faint-foreground)";
+	if (hints?.valueColors && Object.hasOwn(hints.valueColors, key)) return hints.valueColors[key];
+	if (field.type === "enum") return slot(field.enumValues?.indexOf(key) ?? -1);
+	if (field.type === "boolean") return slot(value ? 0 : 1);
+	return slot(index);
+};
+const labelOf = (field, hints, group) => {
+	if (group.value === null) return "Not set";
+	if (field.type === "enum") return enumLabel(String(group.value), hints?.valueLabels);
+	if (field.type === "boolean") return group.value ? "Yes" : "No";
+	return group.label ?? String(group.value);
+};
+/** The records of one group: the chart's own filter and the group's value. */
+const groupFilter = (field, value, filter = "") => {
+	const own = printFilter(value === null ? where$1.isNull(field.name) : where$1.eq(field.name, value));
+	return filter.trim() ? `(${filter}) AND ${own}` : own;
+};
+const measured = (group, measure) => measure.kind === "count" ? group.count : group[measure.kind] ?? null;
+/** The groups of a field of values as slices, in the order the API ranks them. */
+const valueSlices = (groups, field, hints, measure, filter = "") => groups.map((group, index) => ({
+	key: String(group.value),
+	label: labelOf(field, hints, group),
+	value: measured(group, measure),
+	count: group.count,
+	color: colorOf(field, hints, group.value, index),
+	filter: groupFilter(field, group.value, filter)
+}));
+/** A date field's buckets as points in time, the bucket's start read as UTC as the list's chart reads it. */
+const periodPoints = (groups, measure) => groups.map((group) => ({
+	at: Date.parse(`${String(group.value)}Z`),
+	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. */
+const measureText = (value, measure) => {
+	if (value === null) return "—";
+	if (measure.kind === "count") return value.toLocaleString("en-IE");
+	const decimals = measure.hints?.decimals ?? (Number.isInteger(value) ? 0 : 2);
+	const text = value.toLocaleString("en-IE", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+	return `${measure.hints?.prefix ?? ""}${text}${measure.hints?.suffix ?? ""}`;
+};
+//#endregion
+export { groupFilter, measureText, periodPoints, valueSlices };

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

@@ -0,0 +1,75 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { labelFieldOf } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAggregate } from "../../data/use-aggregates.js";
+import { periodPoints, valueSlices } from "./chart-groups.js";
+import { GroupBars } from "./group-bars.js";
+import { GroupDonut } from "./group-donut.js";
+import { PeriodChart } from "./period-chart.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/charts/chart-view.tsx
+const measureOf = (model, view, sum, average) => {
+	const name = sum ?? average;
+	const field = name === void 0 ? void 0 : model.fields[name];
+	if (!field || name === void 0) return { kind: "count" };
+	return {
+		kind: sum !== void 0 ? "sum" : "average",
+		field,
+		hints: view?.fields[name]
+	};
+};
+/**
+* Loads a chart's groups through `:aggregate` and draws them: a date field's buckets as bars or a line, a field's
+* values as ranked bars or a donut, each value linking to its records. The server checked the chart at startup.
+*/
+const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
+	const { resources, views } = useAdminMeta();
+	const field = model.fields[groupBy];
+	const dated = field?.type === "date" || field?.type === "timestamp";
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+	const params = dated ? {
+		granularity,
+		range
+	} : {
+		limit,
+		...label && { label }
+	};
+	const result = useAggregate(model.name, {
+		groupBy,
+		filter,
+		...sum && { sum },
+		...average && { average },
+		...params
+	}, Boolean(field));
+	const measure = measureOf(model, view, sum, average);
+	if (!field) return null;
+	if (result.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" });
+	if (result.error) return /* @__PURE__ */ jsx("p", {
+		className: "text-danger-text",
+		children: "Could not load the chart."
+	});
+	const { groups } = result.data;
+	if (groups.every((group) => group.count === 0)) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: empty
+	});
+	if (dated) return /* @__PURE__ */ jsx(PeriodChart, {
+		points: periodPoints(groups, measure),
+		measure,
+		bucket: granularity,
+		type: type === "line" ? "line" : "bar"
+	});
+	const slices = valueSlices(groups, field, view?.fields[groupBy], measure, filter);
+	return type === "donut" ? /* @__PURE__ */ jsx(GroupDonut, {
+		resource: model.name,
+		slices,
+		measure
+	}) : /* @__PURE__ */ jsx(GroupBars, {
+		resource: model.name,
+		slices,
+		measure
+	});
+};
+//#endregion
+export { ChartView };

package/dist/app/charts/group-bars.js

@@ -0,0 +1,49 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/charts/group-bars.tsx
+/**
+* A ranked list of a field's values, each a bar as long as its number and a link to its records. Bars in rows read on
+* a phone as well as on a desk, and carry their label and value as text, so no colour has to say what a bar is.
+*/
+const GroupBars = ({ resource, slices, measure }) => {
+	const largest = Math.max(0, ...slices.map((slice) => slice.value ?? 0));
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children: slices.map((slice) => {
+			const share = largest > 0 && slice.value !== null ? Math.max(0, slice.value) / largest : 0;
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group grid grid-cols-[minmax(6rem,35%)_1fr_auto] items-center gap-3 rounded-md px-1 py-1 hover:bg-muted",
+				title: measure.kind === "count" ? void 0 : `${measureText(slice.count, { kind: "count" })} records`,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-3 rounded-r bg-muted",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "block h-full rounded-r",
+							style: {
+								width: `${share * 100}%`,
+								background: "var(--chart-1)"
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-right font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					})
+				]
+			}) }, slice.key);
+		})
+	});
+};
+//#endregion
+export { GroupBars };

package/dist/app/charts/group-donut.js

@@ -0,0 +1,84 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+//#region src/app/charts/group-donut.tsx
+const percent = (part, whole) => whole > 0 ? `${Math.round(part / whole * 100)}%` : "";
+const SliceTooltip = ({ active, payload, measure }) => {
+	const slice = payload?.[0]?.payload;
+	if (!active || !slice) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: slice.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(slice.value, measure)
+		})]
+	});
+};
+/**
+* A donut of how a total shares out over a field's values, with a legend that names each, gives its number and share,
+* and links to its records: the legend, not the colour, says which slice is which.
+*/
+const GroupDonut = ({ resource, slices, measure }) => {
+	const drawn = slices.filter((slice) => slice.value !== null && slice.value > 0);
+	const whole = drawn.reduce((sum, slice) => sum + slice.value, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4 sm:flex-row sm:items-center",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "size-36 shrink-0",
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+					data: drawn,
+					dataKey: "value",
+					nameKey: "label",
+					innerRadius: "62%",
+					outerRadius: "100%",
+					paddingAngle: drawn.length > 1 ? 1 : 0,
+					stroke: "var(--background)",
+					strokeWidth: 2,
+					isAnimationActive: false,
+					children: drawn.map((slice) => /* @__PURE__ */ jsx(Cell, { fill: slice.color }, slice.key))
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					content: /* @__PURE__ */ jsx(SliceTooltip, { measure }),
+					isAnimationActive: false
+				})] })
+			})
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex w-full min-w-0 flex-col gap-0.5",
+			children: slices.map((slice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group flex items-center gap-2 rounded-md px-1 py-0.5 hover:bg-muted",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: slice.color },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "w-9 text-right text-xs text-muted-foreground tabular-nums",
+						children: percent(slice.value ?? 0, whole)
+					})
+				]
+			}) }, slice.key))
+		})]
+	});
+};
+//#endregion
+export { GroupDonut };

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

@@ -0,0 +1,174 @@
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { measureText } from "./chart-groups.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 formats = {
+	hour: {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short"
+	},
+	week: {
+		day: "numeric",
+		month: "short"
+	},
+	month: {
+		month: "short",
+		year: "2-digit"
+	},
+	year: { year: "numeric" }
+};
+const tooltipFormats = {
+	hour: {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	week: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	month: {
+		month: "long",
+		year: "numeric"
+	},
+	year: { year: "numeric" }
+};
+const formatterOf = (options) => {
+	const format = new Intl.DateTimeFormat("en-GB", {
+		...options,
+		timeZone: "UTC"
+	});
+	return (ms) => format.format(ms);
+};
+const axisTick = {
+	fontSize: 11,
+	fill: "var(--muted-foreground)"
+};
+const PointTooltip = ({ active, payload, measure, bucket }) => {
+	const point = payload?.[0]?.payload;
+	if (!active || !point) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(point.value, measure)
+		})]
+	});
+};
+/** 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 }) => {
+	const wide = useMediaQuery("(min-width: 640px)");
+	const tick = formatterOf(formats[bucket]);
+	const grid = /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--border)"
+	});
+	const x = /* @__PURE__ */ jsx(XAxis, {
+		dataKey: "at",
+		tickFormatter: tick,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		minTickGap: wide ? 24 : 40,
+		height: 18
+	});
+	const y = /* @__PURE__ */ jsx(YAxis, {
+		width: wide ? 48 : 36,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		tickCount: 3,
+		tickFormatter: (value) => value.toLocaleString("en-IE", { notation: "compact" })
+	});
+	const tooltip = /* @__PURE__ */ jsx(Tooltip, {
+		cursor: type === "bar" ? { fill: "var(--muted)" } : { stroke: "var(--border-strong)" },
+		content: /* @__PURE__ */ jsx(PointTooltip, {
+			measure,
+			bucket
+		}),
+		isAnimationActive: false
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-40",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: type === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 6,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Line, {
+						dataKey: "value",
+						stroke: "var(--chart-1)",
+						strokeWidth: 2,
+						dot: points.length <= 31 ? {
+							r: 3,
+							fill: "var(--chart-1)",
+							strokeWidth: 0
+						} : false,
+						activeDot: {
+							r: 4,
+							stroke: "var(--background)",
+							strokeWidth: 2
+						},
+						isAnimationActive: false
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(BarChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				barCategoryGap: "22%",
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						fill: "var(--chart-1)",
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: false
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { PeriodChart };

package/dist/app/list-group-chart.js

@@ -0,0 +1,37 @@
+import { humanize } from "../live/naming.js";
+import { ChartView } from "./charts/chart-view.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/list-group-chart.tsx
+const measureTitle = (chart, view, plural) => {
+	const name = chart.sum ?? chart.average;
+	if (name === void 0) return plural;
+	const label = view?.fields[name]?.label ?? humanize(name);
+	return chart.sum !== void 0 ? `${label}` : `Average ${label.toLowerCase()}`;
+};
+/** The view's chart per value of a field, above the list and following its filter. */
+const ListGroupChart = ({ model, view, chart, plural, filter }) => {
+	const by = view?.fields[chart.groupBy]?.label ?? humanize(chart.groupBy);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "rounded-lg border bg-background px-4 pb-3 pt-3",
+		"aria-label": `${measureTitle(chart, view, plural)} by ${by.toLowerCase()}`,
+		children: [/* @__PURE__ */ jsxs("h2", {
+			className: "mb-2 font-semibold",
+			children: [
+				measureTitle(chart, view, plural),
+				" by ",
+				by.toLowerCase()
+			]
+		}), /* @__PURE__ */ jsx(ChartView, {
+			model,
+			view,
+			groupBy: chart.groupBy,
+			type: chart.type,
+			sum: chart.sum,
+			average: chart.average,
+			limit: chart.limit,
+			filter
+		})]
+	});
+};
+//#endregion
+export { ListGroupChart };

package/dist/app/list-page.js

@@ -45,6 +45,7 @@ import { useExportFlow } from "./export/use-export-flow.js";
 import { ListCards } from "./displays/list-cards.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
+import { ListGroupChart } from "./list-group-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 import { SavedList } from "./saved/saved-list.js";
@@ -55,7 +56,7 @@ import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
-import { tableDisplay } from "@protobase/schema/internal";
+import { isGroupChart, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -422,13 +423,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: "Could not load rows",
 				error: rows.error
 			}),
-			view?.chart && /* @__PURE__ */ jsx(ListChart, {
+			view?.chart && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
+				model,
+				view,
+				chart: view.chart,
+				plural,
+				filter: loadFilter
+			}) : /* @__PURE__ */ jsx(ListChart, {
 				resource,
 				chart: view.chart,
 				title: `${plural} created`,
 				noun: plural.toLowerCase(),
 				filter: loadFilter
-			}),
+			})),
 			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",

package/dist/app/pages/blocks/chart.js

@@ -0,0 +1,26 @@
+import { useAdminMeta } from "../../meta-gate.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { ChartView } from "../../charts/chart-view.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/chart.tsx
+/** Counts, sums or averages of the records that match, per value or date bucket of a field, in a card. */
+const ChartBlock = ({ node, slots }) => {
+	const { resource, title, description, actions: _actions, span: _span, ...chart } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		className: "h-full",
+		children: /* @__PURE__ */ jsx(ChartView, {
+			model,
+			view: views[resource],
+			...chart
+		})
+	});
+};
+//#endregion
+export { ChartBlock };

package/dist/app/pages/render-node.js

@@ -4,6 +4,7 @@ import { useProjectUi } from "./project-ui.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";
+import { ChartBlock } from "./blocks/chart.js";
 import { FieldBlock } from "./blocks/field.js";
 import { GridBlock } from "./blocks/grid.js";
 import { LinkBlock } from "./blocks/link.js";
@@ -30,6 +31,7 @@ const blocks = {
 	Table: TableBlock,
 	CardRow: CardRowBlock,
 	RecordRow: RecordRowBlock,
+	Chart: ChartBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,

package/dist/app/relation-options.js

@@ -0,0 +1,44 @@
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/relation-options.ts
+const where$1 = createWhere();
+/** The words of typed text, as the list search splits it. */
+const wordsOf = (text) => text.split(/\s+/).filter(Boolean);
+/**
+* How a relation picker finds the records that match typed text. A target with search fields uses the list's search;
+* else, when its title field is a filterable text field, every word must appear in it, ignoring case, as the search
+* matches one field. Otherwise, or once the server `refused` such a filter (the scan guard finds no index for it), the
+* picker loads the records page by page and keeps the rows whose title matches (`local`).
+*/
+const relationOptionsQuery = (target, titleField, text, refused = false) => {
+	const words = wordsOf(text);
+	if (words.length === 0) return {
+		filter: void 0,
+		local: false
+	};
+	if (refused) return {
+		filter: void 0,
+		local: true
+	};
+	if (target.search?.length) return {
+		filter: printFilter(where$1.search(text)),
+		local: false
+	};
+	const field = target.fields[titleField];
+	if (field?.type !== "text" || !field.filterable) return {
+		filter: void 0,
+		local: true
+	};
+	const contains = words.map((word) => where$1.eq(titleField, `*${word.replaceAll("*", "")}*`));
+	return {
+		filter: printFilter(where$1.and(...contains)),
+		local: false
+	};
+};
+/** Whether a title holds every word of the text, ignoring case: the picker's match on rows it filters itself. */
+const titleMatches = (title, text) => {
+	if (title === null || title === void 0) return false;
+	const value = String(title).toLowerCase();
+	return wordsOf(text).every((word) => value.includes(word.toLowerCase()));
+};
+//#endregion
+export { relationOptionsQuery, titleMatches };