@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/lumen-widget-charts.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type ChartConfig } from './ui/chart.js';
+/** Parts a split bar shows on their own; the rest fold into Other. */
+export declare const STACK_MAX = 5;
+type Item = {
+    name: string;
+    v: number;
+    fill: string;
+};
+type Fmt = (v: number) => string;
+/** The widget's lead number over its chart: total and a short caption. */
+export declare function Headline({ value, caption, tone, }: {
+    value: string;
+    caption: ReactNode;
+    tone?: 'gain' | 'loss';
+}): import("react").JSX.Element;
+/** Each bar split into parts (an account's sectors) on a full track; name and total over it. */
+export declare function StackedBars({ rows, parts, fmt, exact, share, }: {
+    rows: Record<string, number | string>[];
+    parts: {
+        name: string;
+        key: string;
+        fill: string;
+    }[];
+    fmt: Fmt;
+    exact: Fmt;
+    share: (v: number) => string;
+}): import("react").JSX.Element;
+/** Horizontal bars as a ranked list: a full track per row, each bar its own colour. */
+export declare function RankedBars({ id, items, signed, fmt, share, }: {
+    id: string;
+    items: Item[];
+    signed: boolean;
+    fmt: Fmt;
+    share: (v: number) => string;
+}): import("react").JSX.Element;
+/** A donut with its total in the middle; hovering a slice or its legend line shows its share. */
+export declare function Donut({ items, total, fmt, share, caption, legend, }: {
+    items: Item[];
+    total: number;
+    fmt: Fmt;
+    share: (v: number) => string;
+    caption: string;
+    /** Its lines under the ring (Edit widget ▸ Controls ▸ Legend). */
+    legend?: boolean;
+}): import("react").JSX.Element;
+/** One stacked bar with gaps, the name and share inside each slice wide enough for them. */
+export declare function AllocationBar({ items, total, config, tooltip, share, }: {
+    items: (Item & {
+        key: string;
+    })[];
+    total: number;
+    config: ChartConfig;
+    tooltip: ReactNode;
+    share: (v: number) => string;
+}): import("react").JSX.Element;
+export {};

package/dist/lumen-widget-charts.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Chart widgets: each leads with a headline number; bars are a ranked
+// list on full tracks (or split into parts by a text field), the donut carries its total in the
+// middle, allocation names its wide slices. Flat marks, no glow. Recharts only.
+import { useState } from 'react';
+import { Bar, BarChart, Cell, Label, LabelList, Pie, PieChart, XAxis, YAxis, usePlotArea, } from 'recharts';
+import { cn } from './lib/utils.js';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart.js';
+/** Parts a split bar shows on their own; the rest fold into Other. */
+export const STACK_MAX = 5;
+/** The widget's lead number over its chart: total and a short caption. */
+export function Headline({ value, caption, tone, }) {
+    return (_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("span", { className: cn('num font-semibold tracking-tight', 'text-2xl', tone === 'gain' && 'text-gain', tone === 'loss' && 'text-loss'), children: value }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: caption })] }));
+}
+/** Name and share over each bar, value at the track's right end. */
+function RankLabel(p) {
+    const area = usePlotArea();
+    const it = p.items[p.index ?? 0];
+    if (!it || !area)
+        return null;
+    const y = Number(p.y) - 6;
+    return (_jsxs("g", { children: [_jsx("text", { x: area.x, y: y, className: "fill-foreground", fontSize: 12, fontWeight: 500, children: it.name.length > 26 ? `${it.name.slice(0, 25)}…` : it.name }), _jsxs("text", { x: area.x + area.width, y: y, textAnchor: "end", fontSize: 12, className: "num fill-foreground", children: [_jsxs("tspan", { className: "fill-muted-foreground", fontSize: 11, children: [p.share(it.v), '  '] }), p.fmt(it.v)] })] }));
+}
+/** Each bar split into parts (an account's sectors) on a full track; name and total over it. */
+export function StackedBars({ rows, parts, fmt, exact, share, }) {
+    const hi = Math.max(0, ...rows.map((r) => Number(r.total)));
+    const config = Object.fromEntries(parts.map((p) => [p.key, { label: p.name, color: p.fill }]));
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [rows.map((r) => {
+                const total = Number(r.total);
+                return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline gap-2 text-xs", children: [_jsx("span", { className: "truncate font-medium", children: String(r.name) }), _jsx("span", { className: "num ml-auto text-[11px] text-muted-foreground", children: share(total) }), _jsx("span", { className: "num", children: fmt(total) })] }), _jsx("div", { className: "h-2.5 overflow-hidden rounded-full bg-muted", children: _jsx(ChartContainer, { config: config, className: "aspect-auto h-full w-full", children: _jsxs(BarChart, { data: [r], layout: "vertical", margin: { left: 0, right: 0, top: 0, bottom: 0 }, barCategoryGap: 0, children: [_jsx(XAxis, { type: "number", hide: true, domain: [0, hi] }), _jsx(YAxis, { type: "category", hide: true }), _jsx(ChartTooltip, { cursor: false, shared: false, allowEscapeViewBox: { x: false, y: true }, wrapperStyle: { zIndex: 50 }, content: _jsx(ChartTooltipContent, { hideLabel: true, formatter: (v, name) => (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: config[String(name)]?.color } }), _jsx("span", { children: config[String(name)]?.label }), _jsxs("span", { className: "num ml-auto pl-3 whitespace-nowrap", children: [exact(Number(v)), " \u00B7", ' ', total ? ((Number(v) / total) * 100).toFixed(1) : 0, "%"] })] })) }) }), parts.map((p) => (_jsx(Bar, { dataKey: p.key, stackId: "a", fill: p.fill, stroke: "var(--card)", strokeWidth: 1, isAnimationActive: false }, p.key)))] }) }) })] }, String(r.name)));
+            }), _jsx("ul", { className: "flex flex-wrap gap-x-3 gap-y-1 pt-1 text-xs text-muted-foreground", children: parts.map((p) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { background: p.fill } }), p.name] }, p.key))) })] }));
+}
+/** Horizontal bars as a ranked list: a full track per row, each bar its own colour. */
+export function RankedBars({ id, items, signed, fmt, share, }) {
+    const ROW = 34;
+    const lo = Math.min(0, ...items.map((i) => i.v));
+    const hi = Math.max(0, ...items.map((i) => i.v));
+    const config = { v: { label: 'Value', color: 'var(--chart-1)' } };
+    return (_jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height: items.length * ROW + 14 }, children: _jsxs(BarChart, { data: items, layout: "vertical", margin: { left: 0, right: 0, top: 14, bottom: 0 }, barCategoryGap: 0, children: [_jsx("defs", { children: items.map((it, i) => (_jsxs("linearGradient", { id: `rb-${id}-${i}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: it.fill, stopOpacity: it.v < 0 ? 1 : 0.35 }), _jsx("stop", { offset: "100%", stopColor: it.fill, stopOpacity: it.v < 0 ? 0.35 : 1 })] }, it.name))) }), _jsx(XAxis, { type: "number", hide: true, domain: signed ? [lo, hi] : [0, hi] }), _jsx(YAxis, { type: "category", dataKey: "name", hide: true }), _jsxs(Bar, { dataKey: "v", barSize: 10, radius: 5, background: { fill: 'var(--muted)', radius: 5 }, isAnimationActive: false, children: [items.map((it, i) => (_jsx(Cell, { fill: `url(#rb-${id}-${i})`, style: { color: it.fill } }, it.name))), _jsx(LabelList, { dataKey: "v", content: _jsx(RankLabel, { items: items, fmt: fmt, share: share }) })] })] }) }));
+}
+/** A donut with its total in the middle; hovering a slice or its legend line shows its share. */
+export function Donut({ items, total, fmt, share, caption, legend = true, }) {
+    const [active, setActive] = useState(null);
+    const config = Object.fromEntries(items.map((s) => [s.name, { label: s.name, color: s.fill }]));
+    const hot = active === null ? null : items[active];
+    return (_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(ChartContainer, { config: config, className: cn('aspect-square shrink-0 [&_.recharts-surface]:overflow-visible', 'size-44'), children: _jsx(PieChart, { children: _jsxs(Pie, { data: items, dataKey: "v", nameKey: "name", innerRadius: 54, outerRadius: 78, paddingAngle: 2, cornerRadius: 4, stroke: "none", isAnimationActive: false, onMouseEnter: (_, i) => setActive(i), onMouseLeave: () => setActive(null), children: [items.map((s) => (_jsx(Cell, { fill: s.fill, fillOpacity: active === null || items[active] === s ? 1 : 0.3, style: { color: s.fill } }, s.name))), _jsx(Label, { position: "center", content: () => {
+                                    const cx = '50%';
+                                    const cy = '50%';
+                                    return (_jsxs("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "middle", children: [_jsx("tspan", { x: cx, dy: "-0.4em", className: "num fill-foreground", fontSize: 16, fontWeight: 600, children: hot ? share(hot.v) : fmt(total) }), _jsx("tspan", { x: cx, dy: "1.5em", className: "fill-muted-foreground", fontSize: 11, children: hot
+                                                    ? hot.name.length > 14
+                                                        ? `${hot.name.slice(0, 13)}…`
+                                                        : hot.name
+                                                    : caption })] }));
+                                } })] }) }) }), legend && (_jsx("ul", { className: "grid w-full min-w-0 grid-cols-2 gap-x-5 gap-y-1.5 text-xs", children: items.map((s, i) => (_jsxs("li", { className: cn('flex min-w-0 items-center gap-2 rounded px-1 transition-opacity', active !== null && active !== i && 'opacity-40'), onMouseEnter: () => setActive(i), onMouseLeave: () => setActive(null), children: [_jsx("span", { className: "size-2.5 shrink-0 rounded-sm", style: { background: s.fill } }), _jsx("span", { className: "truncate font-medium", children: s.name }), _jsx("span", { className: "num ml-auto pl-2 text-muted-foreground", children: share(s.v) })] }, s.name))) }))] }));
+}
+/** One stacked bar with gaps, the name and share inside each slice wide enough for them. */
+export function AllocationBar({ items, total, config, tooltip, share, }) {
+    const row = Object.fromEntries(items.map((s) => [s.key, s.v]));
+    return (_jsx(ChartContainer, { config: config, className: cn('aspect-auto h-9 w-full [&_.recharts-surface]:[clip-path:inset(0_round_8px)]'), children: _jsxs(BarChart, { data: [row], layout: "vertical", margin: { left: 0, right: 0, top: 0, bottom: 0 }, children: [_jsx("defs", { children: items.map((s) => (_jsxs("linearGradient", { id: `al-${s.key}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.fill, stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: s.fill, stopOpacity: 0.6 })] }, s.key))) }), _jsx(XAxis, { type: "number", hide: true, domain: [0, total] }), _jsx(YAxis, { type: "category", hide: true }), tooltip, items.map((s) => (_jsx(Bar, { dataKey: s.key, stackId: "a", fill: `url(#al-${s.key})`, stroke: "var(--card)", strokeWidth: 3, isAnimationActive: false, children: _jsx(LabelList, { dataKey: s.key, content: (p) => {
+                            const w = Number(p.width);
+                            const text = `${s.name} ${share(s.v)}`;
+                            if (w < text.length * 7 + 16)
+                                return null;
+                            const name = s.name.length > Math.floor(w / 8)
+                                ? `${s.name.slice(0, Math.floor(w / 8) - 1)}…`
+                                : s.name;
+                            return (_jsxs("text", { x: Number(p.x) + 8, y: Number(p.y) + Number(p.height) / 2, dy: "0.35em", fontSize: 11, fontWeight: 600, style: { fill: 'var(--background)' }, children: [name, _jsx("tspan", { fontWeight: 400, dx: 6, className: "num", children: share(s.v) })] }));
+                        } }) }, s.key)))] }) }));
+}