@databob/sdk 0.0.2 → 0.0.3

package/README.md

@@ -107,6 +107,33 @@ function TopPages() {
 
 `live: true` keeps the result current over server-sent events. Pass `fetchToken` instead of `token` and the provider refreshes expired tokens for you.
 
+## Charts
+
+Drop-in components for the numbers you show your users. Plain SVG and HTML, no chart library, no extra dependency. They inherit your font and text color, so they fit light and dark themes as they are.
+
+```tsx
+import { Chart, Funnel, Stat, TopList } from "@databob/sdk/react";
+import { api } from "@/databob/_generated/api";
+
+<Stat metric={api.revenue} value="revenue" format="currency:USD" compare label="Revenue" />
+<Chart metric={api.pageviews} args={{ range: "30d" }} x="$day" y="views" compare live title="Pageviews" />
+<TopList metric={api.topPages} label="path" value="views" limit={5} title="Top pages" />
+<Funnel metric={api.activation} labels={{ signup: "Signed up", purchase: "Bought" }} />
+```
+
+| Component | Shows | Key props |
+| --- | --- | --- |
+| `Chart` | A series over time | `x`, `y` (one column or several), `type` `"area"` \| `"line"` \| `"bar"`, `compare` draws the previous period dashed |
+| `TopList` | Ranked rows with proportional bars | `label`, `value`, `limit`, `renderLabel` (for links) |
+| `Funnel` | Users at each step, conversion, drop-off | `labels` |
+| `Stat` | One number, with the change from the previous period | `value` (rows are summed), `compare`, `lowerIsBetter` |
+
+Props are typed from the metric: `y` and `value` must be number columns the metric returns, and a typo fails to compile. Every component takes `live`, `timeZone`, `format` (`"number"`, `"compact"`, `"percent"`, `"duration"`, `"currency:EUR"`, or a function), `title`, `className`, and `style`.
+
+Theme with CSS variables on any ancestor: `--databob-accent`, `--databob-series-2` to `-5`, `--databob-muted`, `--databob-grid`, `--databob-track`, `--databob-positive`, `--databob-negative`, `--databob-tooltip-bg`, `--databob-tooltip-fg`.
+
+Each component has a `View` twin (`ChartView`, `TopListView`, `FunnelView`, `StatView`) that takes data instead of a metric, for server rendering or data you fetched yourself with `databob.metric()`.
+
 ## Privacy rules
 
 databob refuses personal data at the door instead of cleaning it up later.

package/dist/charts.d.ts

@@ -0,0 +1,76 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { AggregateResult, Cell, FunnelStep } from "@databob/engine";
+import type { MetricRef, RefArgs, RefResult } from "./api.js";
+export type Format = "number" | "compact" | "percent" | "duration" | `currency:${string}` | ((value: number) => string);
+export declare function formatValue(value: number | null | undefined, format?: Format): string;
+export declare function formatBucket(label: Cell): string;
+export declare function niceMax(value: number): number;
+type Row = Record<string, Cell>;
+type RowOf<R> = RefResult<R> extends AggregateResult<infer T> ? T : never;
+type NumericKey<T> = {
+    [K in keyof T]: T[K] extends number ? K : never;
+}[keyof T] & string;
+type AnyKey<T> = keyof T & string;
+type Shared = {
+    title?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    format?: Format;
+};
+export type ChartViewProps = Shared & {
+    rows: Row[];
+    previous?: Row[] | undefined;
+    x: string;
+    y: string | string[];
+    type?: "line" | "area" | "bar";
+    height?: number;
+    width?: number;
+    labels?: Record<string, string>;
+};
+export declare function ChartView({ rows, previous, x, y, type, height, width, labels, format, title, className, style, }: ChartViewProps): import("react").JSX.Element;
+export type TopListViewProps = Shared & {
+    rows: Row[];
+    label: string;
+    value: string;
+    limit?: number;
+    renderLabel?: (label: Cell, row: Row) => ReactNode;
+};
+export declare function TopListView({ rows, label, value, limit, format, renderLabel, title, className, style }: TopListViewProps): import("react").JSX.Element;
+export type FunnelViewProps = Omit<Shared, "format"> & {
+    steps: FunnelStep[];
+    labels?: Record<string, string>;
+};
+export declare function FunnelView({ steps, labels, title, className, style }: FunnelViewProps): import("react").JSX.Element;
+export type StatViewProps = Shared & {
+    value: number | null;
+    previous?: number | null | undefined;
+    label?: ReactNode;
+    lowerIsBetter?: boolean;
+};
+export declare function StatView({ value, previous, label, lowerIsBetter, format, title, className, style }: StatViewProps): import("react").JSX.Element;
+type Bound<R extends MetricRef> = {
+    metric: R;
+    args?: RefArgs<R>;
+    live?: boolean;
+    timeZone?: string;
+};
+export type ChartProps<R extends MetricRef> = Bound<R> & Omit<ChartViewProps, "rows" | "previous" | "x" | "y"> & {
+    x: AnyKey<RowOf<R>>;
+    y: NumericKey<RowOf<R>> | NumericKey<RowOf<R>>[];
+    compare?: boolean;
+};
+export declare function Chart<R extends MetricRef>({ metric, args, live, timeZone, compare, ...view }: ChartProps<R>): import("react").JSX.Element;
+export type TopListProps<R extends MetricRef> = Bound<R> & Omit<TopListViewProps, "rows" | "label" | "value" | "renderLabel"> & {
+    label: AnyKey<RowOf<R>>;
+    value: NumericKey<RowOf<R>>;
+    renderLabel?: (label: Cell, row: RowOf<R>) => ReactNode;
+};
+export declare function TopList<R extends MetricRef>({ metric, args, live, timeZone, renderLabel, ...view }: TopListProps<R>): import("react").JSX.Element;
+export type FunnelProps<R extends MetricRef> = Bound<R> & Omit<FunnelViewProps, "steps">;
+export declare function Funnel<R extends MetricRef>({ metric, args, live, timeZone, ...view }: FunnelProps<R>): import("react").JSX.Element;
+export type StatProps<R extends MetricRef> = Bound<R> & Omit<StatViewProps, "value" | "previous"> & {
+    value: NumericKey<RowOf<R>>;
+    compare?: boolean;
+};
+export declare function Stat<R extends MetricRef>({ metric, args, live, timeZone, compare, value, ...view }: StatProps<R>): import("react").JSX.Element;
+export {};

package/dist/charts.js

@@ -0,0 +1,286 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Charts for the analytics you hand to your users. No chart library: plain SVG
+// and HTML, themed with CSS variables, inheriting the page's font and colors.
+//
+//   <Chart metric={api.pageviews} args={{ range: "30d" }} x="$day" y="views" compare live />
+//   <TopList metric={api.topPages} label="path" value="views" />
+//   <Funnel metric={api.activation} />
+//   <Stat metric={api.revenue} value="revenue" format="currency:USD" compare />
+//
+// Theme with --databob-accent, --databob-series-2 … -5, --databob-muted,
+// --databob-grid, --databob-track, --databob-positive, --databob-negative.
+// Each component also has a View twin (ChartView, TopListView, FunnelView,
+// StatView) that takes data you already have, for server rendering.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useMetric } from "./react.js";
+const formatters = new Map();
+function numberFormat(key, options) {
+    let format = formatters.get(key);
+    if (!format) {
+        format = new Intl.NumberFormat(undefined, options);
+        formatters.set(key, format);
+    }
+    return format;
+}
+export function formatValue(value, format = "number") {
+    if (value === null || value === undefined || Number.isNaN(value))
+        return "–";
+    if (typeof format === "function")
+        return format(value);
+    if (format === "compact")
+        return numberFormat("compact", { notation: "compact", maximumFractionDigits: 1 }).format(value);
+    if (format === "percent")
+        return numberFormat("percent", { style: "percent", maximumFractionDigits: 1 }).format(value);
+    if (format === "duration") {
+        const seconds = Math.round(value / 1000);
+        if (seconds < 60)
+            return `${seconds}s`;
+        const minutes = Math.floor(seconds / 60);
+        if (minutes < 60)
+            return `${minutes}m ${seconds % 60}s`;
+        return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+    }
+    if (format.startsWith("currency:")) {
+        const currency = format.slice("currency:".length) || "USD";
+        return numberFormat(`currency:${currency}`, { style: "currency", currency, maximumFractionDigits: 2 }).format(value);
+    }
+    return numberFormat("number", { maximumFractionDigits: 2 }).format(value);
+}
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+// Time bucket labels from the engine ($hour, $day, $week, $month) read better short.
+export function formatBucket(label) {
+    if (typeof label !== "string")
+        return label === null ? "–" : String(label);
+    let match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):00$/.exec(label);
+    if (match) {
+        const hour = Number(match[4]);
+        return `${MONTHS[Number(match[2]) - 1]} ${Number(match[3])}, ${hour % 12 === 0 ? 12 : hour % 12}${hour < 12 ? "am" : "pm"}`;
+    }
+    match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(label);
+    if (match)
+        return `${MONTHS[Number(match[2]) - 1]} ${Number(match[3])}`;
+    match = /^(\d{4})-(\d{2})$/.exec(label);
+    if (match)
+        return `${MONTHS[Number(match[2]) - 1]} ${match[1]}`;
+    return label;
+}
+// One decimal is plenty for SVG coordinates and keeps the markup small.
+function r1(value) {
+    return Math.round(value * 10) / 10;
+}
+export function niceMax(value) {
+    if (value <= 0)
+        return 1;
+    const power = 10 ** Math.floor(Math.log10(value));
+    for (const step of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) {
+        if (step * power >= value)
+            return step * power;
+    }
+    return 10 * power;
+}
+// ---------- theme ----------
+const SERIES = [
+    "var(--databob-accent, #2f80ed)",
+    "var(--databob-series-2, #f2994a)",
+    "var(--databob-series-3, #27ae60)",
+    "var(--databob-series-4, #9b51e0)",
+    "var(--databob-series-5, #eb5757)",
+];
+const MUTED = "var(--databob-muted, color-mix(in srgb, currentColor 55%, transparent))";
+const GRID = "var(--databob-grid, color-mix(in srgb, currentColor 12%, transparent))";
+const TRACK = "var(--databob-track, color-mix(in srgb, currentColor 7%, transparent))";
+const POSITIVE = "var(--databob-positive, #1e9e5a)";
+const NEGATIVE = "var(--databob-negative, #d64545)";
+const frame = { fontFamily: "inherit", color: "inherit", fontSize: 13, lineHeight: 1.4, minWidth: 0 };
+const titleStyle = { fontWeight: 600, marginBottom: 8 };
+const mutedText = { color: MUTED, fontSize: 12 };
+function Frame({ title, className, style, children, kind, }) {
+    return (_jsxs("div", { className: className, style: { ...frame, ...style }, "data-databob": kind, children: [title ? _jsx("div", { style: titleStyle, children: title }) : null, children] }));
+}
+function Placeholder({ height, text }) {
+    return (_jsx("div", { style: {
+            height,
+            borderRadius: 6,
+            background: TRACK,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...mutedText,
+        }, role: text ? "status" : undefined, children: text }));
+}
+function useWidth(fixed) {
+    const ref = useRef(null);
+    const [measured, setMeasured] = useState(0);
+    useEffect(() => {
+        if (fixed)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        const update = () => setMeasured(element.clientWidth);
+        update();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [fixed]);
+    return [ref, fixed ?? (measured || 600)];
+}
+function num(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+export function ChartView({ rows, previous, x, y, type = "area", height = 220, width, labels = {}, format = "number", title, className, style, }) {
+    const [ref, measured] = useWidth(width);
+    const [hover, setHover] = useState(null);
+    const series = Array.isArray(y) ? y : [y];
+    const compareKey = series[0];
+    const showPrevious = previous !== undefined && previous.length > 0;
+    const padding = { top: 8, right: 8, bottom: 22, left: 44 };
+    const innerWidth = Math.max(10, measured - padding.left - padding.right);
+    const innerHeight = Math.max(10, height - padding.top - padding.bottom);
+    const count = rows.length;
+    const values = rows.flatMap((row) => series.map((key) => num(row[key])));
+    const previousValues = showPrevious ? previous.map((row) => num(row[compareKey])) : [];
+    const top = niceMax(Math.max(0, ...values, ...previousValues));
+    const xAt = (index) => type === "bar"
+        ? padding.left + (innerWidth / Math.max(1, count)) * (index + 0.5)
+        : padding.left + (count <= 1 ? innerWidth / 2 : (innerWidth / (count - 1)) * index);
+    const yAt = (value) => padding.top + innerHeight - (value / top) * innerHeight;
+    const path = (points) => points.map((value, index) => `${index === 0 ? "M" : "L"}${xAt(index).toFixed(1)},${yAt(value).toFixed(1)}`).join("");
+    const last = rows[count - 1];
+    const summary = count === 0
+        ? "No data"
+        : `${series.map((key) => labels[key] ?? key).join(", ")} by ${x}, ${count} points. Latest ${formatBucket(last?.[x] ?? null)}: ${series
+            .map((key) => formatValue(num(last?.[key]), format))
+            .join(", ")}.`;
+    const ticks = [0, top / 2, top];
+    const xTicks = count <= 1 ? [0] : [0, Math.floor((count - 1) / 2), count - 1];
+    const barWidth = type === "bar" ? Math.max(1, (innerWidth / Math.max(1, count)) * 0.7 / series.length) : 0;
+    function onMove(event) {
+        if (count === 0)
+            return;
+        const box = event.currentTarget.getBoundingClientRect();
+        const scale = measured / Math.max(1, box.width);
+        const px = (event.clientX - box.left) * scale;
+        let best = 0;
+        for (let index = 1; index < count; index += 1) {
+            if (Math.abs(xAt(index) - px) < Math.abs(xAt(best) - px))
+                best = index;
+        }
+        setHover(best);
+    }
+    return (_jsxs(Frame, { title: title, className: className, style: style, kind: "chart", children: [_jsxs("div", { ref: ref, style: { position: "relative", width: width ?? "100%" }, children: [count === 0 ? (_jsx(Placeholder, { height: height, text: "No data yet" })) : (_jsxs("svg", { width: "100%", height: height, viewBox: `0 0 ${measured} ${height}`, role: "img", "aria-label": summary, onPointerMove: onMove, onPointerLeave: () => setHover(null), style: { display: "block", overflow: "visible", touchAction: "pan-y" }, children: [ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: padding.left, x2: r1(padding.left + innerWidth), y1: r1(yAt(tick)), y2: r1(yAt(tick)), stroke: GRID }), _jsx("text", { x: padding.left - 6, y: r1(yAt(tick)), textAnchor: "end", dominantBaseline: "middle", fontSize: 11, fill: MUTED, children: formatValue(tick, format === "number" ? "compact" : format) })] }, tick))), xTicks.map((index) => (_jsx("text", { x: r1(xAt(index)), y: height - 6, textAnchor: count > 1 && index === 0 ? "start" : count > 1 && index === count - 1 ? "end" : "middle", fontSize: 11, fill: MUTED, children: formatBucket(rows[index]?.[x] ?? null) }, index))), showPrevious && type !== "bar" ? (_jsx("path", { d: path(previousValues.slice(0, Math.max(count, 1))), fill: "none", stroke: MUTED, strokeWidth: 1.5, strokeDasharray: "4 4" })) : null, series.map((key, seriesIndex) => {
+                                const color = SERIES[seriesIndex % SERIES.length];
+                                const points = rows.map((row) => num(row[key]));
+                                if (type === "bar") {
+                                    return (_jsx("g", { fill: color, children: points.map((value, index) => (_jsx("rect", { x: r1(xAt(index) - (barWidth * series.length) / 2 + barWidth * seriesIndex), y: r1(yAt(value)), width: r1(barWidth), height: r1(Math.max(0, padding.top + innerHeight - yAt(value))), rx: r1(Math.min(3, barWidth / 3)), opacity: hover === null || hover === index ? 1 : 0.55 }, index))) }, key));
+                                }
+                                const line = path(points);
+                                return (_jsxs("g", { children: [type === "area" ? (_jsx("path", { d: `${line}L${xAt(count - 1).toFixed(1)},${yAt(0)}L${xAt(0).toFixed(1)},${yAt(0)}Z`, fill: color, opacity: 0.12 })) : null, _jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" })] }, key));
+                            }), hover !== null && type !== "bar" ? (_jsxs("g", { children: [_jsx("line", { x1: r1(xAt(hover)), x2: r1(xAt(hover)), y1: padding.top, y2: r1(padding.top + innerHeight), stroke: GRID }), series.map((key, seriesIndex) => (_jsx("circle", { cx: r1(xAt(hover)), cy: r1(yAt(num(rows[hover]?.[key]))), r: 3.5, fill: SERIES[seriesIndex % SERIES.length] }, key)))] })) : null] })), hover !== null && rows[hover] ? (_jsxs("div", { role: "tooltip", style: {
+                            position: "absolute",
+                            top: 0,
+                            left: `${Math.min(Math.max(xAt(hover) / measured, 0.12), 0.88) * 100}%`,
+                            transform: "translateX(-50%)",
+                            pointerEvents: "none",
+                            background: "var(--databob-tooltip-bg, Canvas)",
+                            color: "var(--databob-tooltip-fg, CanvasText)",
+                            border: `1px solid ${GRID}`,
+                            borderRadius: 6,
+                            padding: "4px 8px",
+                            fontSize: 12,
+                            whiteSpace: "nowrap",
+                            boxShadow: "0 2px 8px rgb(0 0 0 / 0.12)",
+                        }, children: [_jsx("div", { style: mutedText, children: formatBucket(rows[hover][x] ?? null) }), series.map((key, seriesIndex) => (_jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: 2, background: SERIES[seriesIndex % SERIES.length] } }), _jsx("span", { children: labels[key] ?? key }), _jsx("strong", { style: { marginLeft: "auto", paddingLeft: 8 }, children: formatValue(num(rows[hover][key]), format) })] }, key))), showPrevious && previous[hover] ? (_jsxs("div", { style: mutedText, children: ["Previous: ", formatValue(num(previous[hover][compareKey]), format)] })) : null] })) : null] }), series.length > 1 || showPrevious ? (_jsxs("div", { style: { display: "flex", gap: 12, flexWrap: "wrap", marginTop: 6, ...mutedText }, children: [series.map((key, seriesIndex) => (_jsxs("span", { style: { display: "inline-flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 10, height: 3, borderRadius: 2, background: SERIES[seriesIndex % SERIES.length] } }), labels[key] ?? key] }, key))), showPrevious ? (_jsxs("span", { style: { display: "inline-flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { style: { width: 10, borderTop: `2px dashed ${MUTED}` } }), "Previous period"] })) : null] })) : null] }));
+}
+export function TopListView({ rows, label, value, limit = 10, format = "number", renderLabel, title, className, style }) {
+    const shown = rows.slice(0, limit);
+    const max = Math.max(0, ...shown.map((row) => num(row[value])));
+    return (_jsx(Frame, { title: title, className: className, style: style, kind: "top-list", children: shown.length === 0 ? (_jsx(Placeholder, { height: 80, text: "No data yet" })) : (_jsx("ol", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 4 }, children: shown.map((row, index) => {
+                const amount = num(row[value]);
+                return (_jsxs("li", { style: { position: "relative", display: "flex", alignItems: "center", gap: 12, padding: "5px 8px" }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                                position: "absolute",
+                                inset: 0,
+                                width: `${max === 0 ? 0 : r1((amount / max) * 100)}%`,
+                                background: "color-mix(in srgb, var(--databob-accent, #2f80ed) 16%, transparent)",
+                                borderRadius: 4,
+                            } }), _jsx("span", { style: { position: "relative", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: renderLabel ? renderLabel(row[label] ?? null, row) : String(row[label] ?? "–") }), _jsx("span", { style: { position: "relative", marginLeft: "auto", fontVariantNumeric: "tabular-nums", fontWeight: 600 }, children: formatValue(amount, format) })] }, index));
+            }) })) }));
+}
+export function FunnelView({ steps, labels = {}, title, className, style }) {
+    const first = steps[0]?.users ?? 0;
+    return (_jsx(Frame, { title: title, className: className, style: style, kind: "funnel", children: steps.length === 0 || first === 0 ? (_jsx(Placeholder, { height: 80, text: "No one has started this funnel yet" })) : (_jsx("ol", { style: { listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 10 }, children: steps.map((step, index) => (_jsxs("li", { children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "baseline" }, children: [_jsx("span", { style: { fontWeight: 600 }, children: labels[step.event] ?? step.event }), _jsx("span", { style: { marginLeft: "auto", fontVariantNumeric: "tabular-nums" }, children: formatValue(step.users, "number") }), _jsx("span", { style: { ...mutedText, width: 52, textAlign: "right" }, children: formatValue(step.conversion, "percent") })] }), _jsx("div", { style: { height: 10, borderRadius: 5, background: TRACK, marginTop: 4, overflow: "hidden" }, children: _jsx("div", { style: {
+                                height: "100%",
+                                width: `${r1(step.conversion * 100)}%`,
+                                background: "var(--databob-accent, #2f80ed)",
+                                borderRadius: 5,
+                            } }) }), index > 0 && step.dropoff > 0 ? (_jsxs("div", { style: { ...mutedText, marginTop: 2 }, children: [formatValue(step.dropoff, "number"), " dropped off"] })) : null] }, `${step.event}-${index}`))) })) }));
+}
+export function StatView({ value, previous, label, lowerIsBetter = false, format = "number", title, className, style }) {
+    let delta = null;
+    if (previous !== undefined && previous !== null && value !== null) {
+        const change = previous === 0 ? (value === 0 ? 0 : null) : (value - previous) / Math.abs(previous);
+        if (change === null) {
+            delta = _jsx("span", { style: mutedText, children: "new" });
+        }
+        else {
+            const good = change === 0 ? null : (change > 0) !== lowerIsBetter;
+            delta = (_jsxs("span", { style: {
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: good === null ? MUTED : good ? POSITIVE : NEGATIVE,
+                    fontVariantNumeric: "tabular-nums",
+                }, "aria-label": `${change >= 0 ? "up" : "down"} ${formatValue(Math.abs(change), "percent")} from the previous period`, children: [change > 0 ? "▲" : change < 0 ? "▼" : "•", " ", formatValue(Math.abs(change), "percent")] }));
+        }
+    }
+    return (_jsxs(Frame, { title: title, className: className, style: style, kind: "stat", children: [label ? _jsx("div", { style: mutedText, children: label }) : null, _jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [_jsx("span", { style: { fontSize: 28, fontWeight: 650, letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }, children: formatValue(value, format) }), delta] })] }));
+}
+function metricOptions(props, compare) {
+    const options = {};
+    if (props.live)
+        options.live = true;
+    if (props.timeZone)
+        options.timeZone = props.timeZone;
+    if (compare)
+        options.compare = "previous";
+    return options;
+}
+function State({ error, height }) {
+    return _jsx(Placeholder, { height: height, text: error ? `Could not load: ${error.message}` : undefined });
+}
+export function Chart({ metric, args, live, timeZone, compare = false, ...view }) {
+    const { data, error } = useMetric(metric, args, metricOptions({ live, timeZone }, compare));
+    const result = data;
+    if (!result)
+        return _jsx(Frame, { title: view.title, className: view.className, style: view.style, kind: "chart", children: _jsx(State, { error: error, height: view.height ?? 220 }) });
+    return _jsx(ChartView, { ...view, rows: result.rows, previous: result.previous?.rows });
+}
+export function TopList({ metric, args, live, timeZone, renderLabel, ...view }) {
+    const { data, error } = useMetric(metric, args, metricOptions({ live, timeZone }, false));
+    const result = data;
+    if (!result)
+        return _jsx(Frame, { title: view.title, className: view.className, style: view.style, kind: "top-list", children: _jsx(State, { error: error, height: 120 }) });
+    return (_jsx(TopListView, { ...view, rows: result.rows, ...(renderLabel ? { renderLabel: renderLabel } : {}) }));
+}
+export function Funnel({ metric, args, live, timeZone, ...view }) {
+    const { data, error } = useMetric(metric, args, metricOptions({ live, timeZone }, false));
+    const result = data;
+    if (!result)
+        return _jsx(Frame, { title: view.title, className: view.className, style: view.style, kind: "funnel", children: _jsx(State, { error: error, height: 120 }) });
+    return _jsx(FunnelView, { ...view, steps: result.steps });
+}
+export function Stat({ metric, args, live, timeZone, compare = false, value, ...view }) {
+    const { data, error } = useMetric(metric, args, metricOptions({ live, timeZone }, compare));
+    const result = data;
+    const totals = useMemo(() => {
+        if (!result)
+            return null;
+        const sum = (rows) => rows.reduce((total, row) => total + num(row[value]), 0);
+        return { current: sum(result.rows), previous: result.previous ? sum(result.previous.rows) : undefined };
+    }, [result, value]);
+    if (!totals)
+        return _jsx(Frame, { title: view.title, className: view.className, style: view.style, kind: "stat", children: _jsx(State, { error: error, height: 56 }) });
+    return _jsx(StatView, { ...view, value: totals.current, previous: totals.previous });
+}

package/dist/react.d.ts

@@ -24,4 +24,4 @@ export declare class MetricError extends Error {
     constructor(code: string, message: string);
 }
 export declare function useMetric<R extends MetricRef>(ref: R, args?: RefArgs<R>, options?: MetricOptions): MetricState<RefResult<R>>;
-export {};
+export { Chart, ChartView, Funnel, FunnelView, Stat, StatView, TopList, TopListView, formatBucket, formatValue, type ChartProps, type ChartViewProps, type Format, type FunnelProps, type FunnelViewProps, type StatProps, type StatViewProps, type TopListProps, type TopListViewProps, } from "./charts.js";

package/dist/react.js

@@ -131,3 +131,4 @@ export function useMetric(ref, args, options = {}) {
     }, [key, context, options.skip]);
     return state;
 }
+export { Chart, ChartView, Funnel, FunnelView, Stat, StatView, TopList, TopListView, formatBucket, formatValue, } from "./charts.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databob/sdk",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Privacy-first product analytics you define in code. Typed events, named metrics, per-tenant data, and live React hooks.",
   "license": "Apache-2.0",
   "type": "module",