@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/chart/thumb.js

@@ -0,0 +1,201 @@
+/**
+ * Chart block thumbnail composer (mos-qkpva) — the simplified static SVG the
+ * /admin/artifacts list shows when a chart is the artifact's first visual
+ * block.
+ *
+ * Same geometry source as ChartBlock.svelte — normalizeChart, linearTicks,
+ * valueDomain and stackByX live in ./schema.ts (pure, unit-tested), and this
+ * composer consumes them exactly like the component does — but the DRAWING
+ * is a silhouette: recessive grid, honest zero baseline, series marks, y-tick
+ * labels and goal lines. No title, legend, end labels, annotations or
+ * tooltips: at ~64×40 a thumbnail communicates "this row is a chart", and
+ * every line of output is paid for again by the list payload cap.
+ *
+ * Colors arrive as the resolved ThumbPalette (concrete values); series ride
+ * the --chart-series-1..6 contract via palette.series. Output is XML-clean
+ * (every element closed, attributes quoted) so it parses as a standalone
+ * data:image/svg+xml document; sanitizeSvg runs on it afterwards regardless.
+ */
+import { chartSchema, normalizeChart, linearTicks, valueDomain, stackByX, } from "./schema.js";
+import { r1, thumbText, thumbTruncate, } from "../../thumb-kit.js";
+const W = 640;
+const H = 280;
+const PAD_T = 16;
+const PAD_B = 26;
+const PAD_L = 52;
+const PAD_R = 14;
+const PLOT_W = W - PAD_L - PAD_R;
+const PLOT_H = H - PAD_T - PAD_B;
+export function drawChartThumb(raw, palette) {
+    const parsed = chartSchema.safeParse(raw);
+    if (!parsed.success)
+        return null;
+    const params = parsed.data;
+    const norm = normalizeChart(params);
+    if (norm.series.length === 0 || norm.xNums.length === 0)
+        return null;
+    const stacked = params.stacked &&
+        (params.chartType === "bar" || params.chartType === "area");
+    // ── value domain (mirrors the component: stacked sums + goal lines) ──
+    const vals = [];
+    if (stacked) {
+        // stackByX over the left-axis series (dual-axis stacks are rare and the
+        // thumbnail keeps one scale — the component draws per-axis; the silhouette
+        // does not need the second).
+        const leftIdx = norm.series
+            .map((s, i) => (s.axis === "left" ? i : -1))
+            .filter((i) => i >= 0);
+        for (const segs of stackByX(leftIdx.map((i) => norm.series[i].points)))
+            for (const seg of segs) {
+                vals.push(seg.y0, seg.y1);
+            }
+        for (const s of norm.series)
+            if (s.axis === "right")
+                for (const p of s.points)
+                    vals.push(p.y);
+    }
+    else {
+        for (const s of norm.series)
+            for (const p of s.points)
+                vals.push(p.y);
+    }
+    for (const g of params.goalLines)
+        vals.push(g.value);
+    const scale = linearTicks(...valueDomain(vals, params.chartType, {
+        yMin: params.yMin,
+        yMax: params.yMax,
+    }), 4);
+    const [d0, d1] = scale.domain;
+    const yPx = (v) => PAD_T + PLOT_H - ((v - d0) / (d1 - d0 || 1)) * PLOT_H;
+    // ── x scale ──
+    const usesSlots = params.chartType === "bar" || norm.xType === "category";
+    const slotW = PLOT_W / Math.max(1, norm.xNums.length);
+    const catPos = new Map(norm.xNums.map((x, i) => [x, i]));
+    const xLinear = (() => {
+        if (usesSlots || norm.xNums.length === 0)
+            return null;
+        const xs = norm.xNums;
+        const min = xs[0];
+        const max = xs[xs.length - 1];
+        if (min === max) {
+            const pad = norm.xType === "time" ? 86.4e6 : 1;
+            return { d0: min - pad, d1: max + pad };
+        }
+        const pad = (max - min) * 0.02;
+        return { d0: min - pad, d1: max + pad };
+    })();
+    const xPx = (xNum) => {
+        if (usesSlots) {
+            const i = catPos.get(xNum) ?? 0;
+            return PAD_L + (i + 0.5) * slotW;
+        }
+        if (!xLinear)
+            return PAD_L + PLOT_W / 2;
+        return PAD_L + ((xNum - xLinear.d0) / (xLinear.d1 - xLinear.d0)) * PLOT_W;
+    };
+    const out = [];
+    // ── recessive horizontal grid + y tick labels (left scale) ──
+    for (const t of scale.ticks) {
+        const y = yPx(t);
+        out.push(`<line x1="${PAD_L}" x2="${r1(PAD_L + PLOT_W)}" y1="${r1(y)}" y2="${r1(y)}" stroke="${palette.ink}" stroke-opacity="0.1" stroke-width="1"/>`);
+        out.push(thumbText(PAD_L - 6, y + 3, thumbTruncate(formatNum(t), 7), {
+            size: 10,
+            fill: palette.ink,
+            opacity: 0.45,
+            anchor: "end",
+        }));
+    }
+    // honest baseline (0 or domain floor)
+    const baselineY = yPx(Math.max(d0, Math.min(0, d1)));
+    out.push(`<line x1="${PAD_L}" x2="${r1(PAD_L + PLOT_W)}" y1="${r1(baselineY)}" y2="${r1(baselineY)}" stroke="${palette.ink}" stroke-opacity="0.25" stroke-width="1"/>`);
+    // ── goal lines ──
+    for (const g of params.goalLines) {
+        const y = yPx(g.value);
+        out.push(`<line x1="${PAD_L}" x2="${r1(PAD_L + PLOT_W)}" y1="${r1(y)}" y2="${r1(y)}" stroke="${palette.ink}" stroke-opacity="0.5" stroke-width="1" stroke-dasharray="4 4"/>`);
+    }
+    // ── marks ──
+    const seriesColor = (i) => palette.series[i % palette.series.length];
+    if (params.chartType === "bar") {
+        // Bars rise from zero (or below zero when negatives exist). Stacked
+        // mirrors the component's stackedSegMaps: per axis group, cumulative
+        // segments drawn bottom-up at the slot center. Grouped: one sub-bar per
+        // series inside the slot.
+        const zeroY = yPx(Math.max(d0, Math.min(0, d1)));
+        const segMaps = stacked
+            ? norm.series.map((_, si) => {
+                const axis = norm.series[si].axis;
+                const idxs = norm.series
+                    .map((st, i) => (st.axis === axis ? i : -1))
+                    .filter((i) => i >= 0);
+                const stacks = stackByX(idxs.map((i) => norm.series[i].points));
+                const k = idxs.indexOf(si);
+                return new Map((stacks[k] ?? []).map((seg) => [seg.xNum, seg]));
+            })
+            : null;
+        const groupW = Math.max(2, Math.min((slotW * 0.78) / Math.max(1, norm.series.length), 36));
+        norm.series.forEach((s, si) => {
+            const color = seriesColor(si);
+            for (const p of s.points) {
+                if (segMaps) {
+                    const seg = segMaps[si].get(p.xNum);
+                    if (!seg)
+                        continue;
+                    const top = yPx(seg.y1);
+                    const bottom = yPx(seg.y0);
+                    out.push(`<rect x="${r1(xPx(p.xNum) - groupW / 2)}" y="${r1(top)}" width="${r1(groupW)}" height="${r1(Math.max(1, bottom - top))}" fill="${color}" fill-opacity="0.85"/>`);
+                }
+                else {
+                    const x = xPx(p.xNum) - (groupW * norm.series.length) / 2 + groupW * si;
+                    const y = yPx(p.y);
+                    const top = Math.min(y, zeroY);
+                    const h = Math.max(1, Math.abs(zeroY - y));
+                    out.push(`<rect x="${r1(x)}" y="${r1(top)}" width="${r1(groupW)}" height="${r1(h)}" fill="${color}" fill-opacity="0.85"/>`);
+                }
+            }
+        });
+    }
+    else {
+        norm.series.forEach((s, si) => {
+            const color = seriesColor(si);
+            if (params.chartType === "scatter") {
+                for (const p of s.points)
+                    out.push(`<circle cx="${r1(xPx(p.xNum))}" cy="${r1(yPx(p.y))}" r="3" fill="${color}" fill-opacity="0.9"/>`);
+                return;
+            }
+            // line / area share the polyline geometry
+            const pts = s.points.map((p) => `${r1(xPx(p.xNum))},${r1(yPx(p.y))}`);
+            if (!pts.length)
+                return;
+            if (params.chartType === "area") {
+                const first = s.points[0];
+                const last = s.points[s.points.length - 1];
+                const areaD = `M ${r1(xPx(first.xNum))},${r1(yPx(0))} L ${pts.join(" L ")} L ${r1(xPx(last.xNum))},${r1(yPx(0))} Z`;
+                out.push(`<path d="${areaD}" fill="${color}" fill-opacity="${stacked ? 0.45 : 0.22}" stroke="none"/>`);
+            }
+            out.push(`<path d="M ${pts.join(" L ")}" fill="none" stroke="${color}" stroke-width="2"/>`);
+        });
+    }
+    // ── category x labels (few enough to read; every 2nd when crowded) ──
+    if (norm.xType === "category" && norm.categories.length) {
+        const maxLabels = Math.max(2, Math.floor(PLOT_W / 56));
+        const step = Math.max(1, Math.ceil(norm.categories.length / maxLabels));
+        for (let i = 0; i < norm.categories.length; i += step) {
+            const cx = PAD_L + (i + 0.5) * slotW;
+            out.push(thumbText(cx, PAD_T + PLOT_H + 16, thumbTruncate(norm.categories[i], 8), {
+                size: 10,
+                fill: palette.ink,
+                opacity: 0.45,
+                anchor: "middle",
+            }));
+        }
+    }
+    return `<svg viewBox="0 0 ${W} ${H}">${out.join("")}</svg>`;
+}
+/** Compact numeric formatting for y tick labels (the component's
+ * formatYTick is richer; the silhouette wants plain numbers). */
+function formatNum(v) {
+    if (Number.isInteger(v))
+        return String(v);
+    const s = v.toFixed(1);
+    return s.endsWith(".0") ? String(Math.round(v)) : s;
+}