@columenlabs/lumen-ui 0.1.124 → 0.1.125

package/dist/lumen-trend.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Trend widgets: up to 4 number fields over a date field of the view's rows, rolled up per day, week,
-// month or year, drawn as a line, area, stacked area, bars over time, combo, a spark or a tracker.
+// month or year, drawn as a line, area, stacked area, bars over time, stacked bars, combo, a spark
+// or a tracker.
 // With the allocation, donut, bars and card styles they cover every Tremor visualization, drawn on
 // our own Recharts in ChartContainer. Worked out in the browser from the rows; nothing is fetched.
 import { formatBytes, isDollarFormat, } from '@columenlabs/lumen-ui-types/views';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, ComposedChart, Line, LineChart, XAxis, YAxis, } from 'recharts';
 import { cn } from './lib/utils.js';
 import { Headline } from './lumen-widget-charts.js';
@@ -115,6 +116,8 @@ function tick(at, bucket) {
 export function TrendBody({ style, date, values, bucket, agg, rows, read, legend = true, }) {
     const hidden = useAmountsHidden();
     const points = useMemo(() => trendPoints(rows, date, values, bucket, agg, read), [rows, date, values, bucket, agg, read]);
+    // Series hidden by a tap on the legend; the last one shown can't be hidden.
+    const [off, setOff] = useState([]);
     const first = values[0];
     if (!points.length || !first)
         return _jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No dated rows to draw." });
@@ -124,6 +127,12 @@ export function TrendBody({ style, date, values, bucket, agg, rows, read, legend
         `v${i}`,
         { label: agg === 'count' ? `${f.label} (count)` : f.label, color: COLORS[i] },
     ]));
+    const keys = values.map((_, i) => `v${i}`);
+    const on = keys.filter((k) => !off.includes(k));
+    const toggle = (k) => setOff((o) => o.includes(k) ? o.filter((x) => x !== k) : o.length + 1 < keys.length ? [...o, k] : o);
+    // Stacked parts add up: the headline and tooltip read their total.
+    const stacks = (style === 'stacked' || style === 'stacked_bars') && on.length > 1;
+    const totalOf = (p) => on.reduce((t, k) => t + Number(p?.[k] ?? 0), 0);
     const last = Number(points[points.length - 1]?.v0 ?? 0);
     const start = Number(points[0]?.v0 ?? 0);
     if (style === 'tracker') {
@@ -143,17 +152,23 @@ export function TrendBody({ style, date, values, bucket, agg, rows, read, legend
         _jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }, "g"),
         _jsx(XAxis, { dataKey: "at", tickLine: false, axisLine: false, minTickGap: 24, tickFormatter: (v) => tick(String(v), bucket), fontSize: 11 }, "x"),
         _jsx(YAxis, { tickLine: false, axisLine: false, width: 48, tickFormatter: (v) => fmt(Number(v)), fontSize: 11 }, "y"),
-        _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (v) => tick(String(v), bucket), formatter: (v, name) => {
+        _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (v) => tick(String(v), bucket), formatter: (v, name, item) => {
                     const i = Number(String(name).slice(1));
                     const f = values[i] ?? first;
-                    return (_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: COLORS[i] } }), _jsx("span", { className: "truncate", children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v), f) })] }));
+                    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: COLORS[i] } }), _jsx("span", { className: "truncate", children: config[String(name)]?.label }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(Number(v), f) })] }), stacks && String(name) === on[on.length - 1] && (_jsxs("span", { className: "flex w-full items-center gap-2 border-t pt-1.5 font-medium", children: [_jsx("span", { className: "size-2 shrink-0" }), _jsx("span", { className: "truncate", children: "Total" }), _jsx("span", { className: "num ml-auto pl-3", children: fmt(totalOf(item.payload), f) })] }))] }));
                 } }) }, "t"),
         ...(legend && values.length > 1
-            ? [_jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }, "l")]
+            ? [_jsx(ChartLegend, { content: _jsx(ChartLegendContent, { off: off, onSeries: toggle }) }, "l")]
             : []),
     ];
-    const lead = (_jsx(Headline, { value: fmt(last), caption: `${config.v0?.label} · ${tick(String(points[points.length - 1]?.at), bucket)}` }));
+    const end = points[points.length - 1];
+    const lead0 = on[0] ?? 'v0';
+    const lead = (_jsx(Headline, { value: fmt(stacks ? totalOf(end) : Number(end?.[lead0] ?? 0)), caption: `${stacks ? 'Total' : config[lead0]?.label} · ${tick(String(end?.at), bucket)}` }));
     const box = 'aspect-auto h-56 w-full';
-    const keys = values.map((_, i) => `v${i}`);
-    return (_jsxs("div", { className: "flex flex-col", children: [lead, _jsx(ChartContainer, { config: config, className: box, children: style === 'bars' ? (_jsxs(BarChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)))] })) : style === 'combo' ? (_jsxs(ComposedChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k, i) => i === 0 ? (_jsx(Bar, { dataKey: k, fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)) : (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) : style === 'area' || style === 'stacked' ? (_jsxs(AreaChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Area, { dataKey: k, type: "monotone", stackId: style === 'stacked' ? 'a' : undefined, stroke: `var(--color-${k})`, fill: `var(--color-${k})`, fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }, k)))] })) : (_jsxs(LineChart, { data: points, margin: { left: 0, right: 4 }, children: [axes, keys.map((k) => (_jsx(Line, { dataKey: k, type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) })] }));
+    // Room above the top gridline, so its label sits on the line rather than below it (a bar near
+    // the top read as reaching the label's value).
+    const margin = { top: 8, left: 0, right: 4 };
+    // A stack's top part rounds its data end; a 2px gap of the card's colour parts the segments.
+    const top = on[on.length - 1];
+    return (_jsxs("div", { className: "flex flex-col", children: [lead, _jsx(ChartContainer, { config: config, className: box, children: style === 'bars' || style === 'stacked_bars' ? (_jsxs(BarChart, { data: points, margin: margin, children: [axes, keys.map((k) => style === 'stacked_bars' ? (_jsx(Bar, { dataKey: k, hide: off.includes(k), stackId: "a", fill: `var(--color-${k})`, stroke: "var(--card)", strokeWidth: on.length > 1 ? 2 : 0, radius: k === top ? [2, 2, 0, 0] : 0, isAnimationActive: false }, k)) : (_jsx(Bar, { dataKey: k, hide: off.includes(k), fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)))] })) : style === 'combo' ? (_jsxs(ComposedChart, { data: points, margin: margin, children: [axes, keys.map((k, i) => i === 0 ? (_jsx(Bar, { dataKey: k, hide: off.includes(k), fill: `var(--color-${k})`, radius: 2, isAnimationActive: false }, k)) : (_jsx(Line, { dataKey: k, hide: off.includes(k), type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) : style === 'area' || style === 'stacked' ? (_jsxs(AreaChart, { data: points, margin: margin, children: [axes, keys.map((k) => (_jsx(Area, { dataKey: k, hide: off.includes(k), type: "monotone", stackId: style === 'stacked' ? 'a' : undefined, stroke: `var(--color-${k})`, fill: `var(--color-${k})`, fillOpacity: 0.15, strokeWidth: 1.5, isAnimationActive: false }, k)))] })) : (_jsxs(LineChart, { data: points, margin: margin, children: [axes, keys.map((k) => (_jsx(Line, { dataKey: k, hide: off.includes(k), type: "monotone", stroke: `var(--color-${k})`, strokeWidth: 1.5, dot: false, isAnimationActive: false }, k)))] })) })] }));
 }

package/dist/lumen-widget.d.ts

@@ -690,7 +690,7 @@ export declare function cardsAfter(cards: ViewCard[], i: number, action: CardAct
     bucket: "day" | "month" | "week" | "year";
     agg: "count" | "last" | "mean" | "sum";
     kind: "chart";
-    style: "area" | "bars" | "combo" | "line" | "stacked";
+    style: "area" | "bars" | "combo" | "line" | "stacked" | "stacked_bars";
 } | {
     id: string;
     title: string | null;

package/dist/ui/chart.d.ts

@@ -37,8 +37,12 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelKey?: string;
 } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, 'accessibilityLayer'>): React.JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<'div'> & {
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, off, onSeries, }: React.ComponentProps<'div'> & {
     hideIcon?: boolean;
     nameKey?: string;
+    /** Series keys hidden by a tap on the legend; they stay listed, dimmed. */
+    off?: string[];
+    /** Given, each item is a button that shows or hides its series. */
+    onSeries?: (key: string) => void;
 } & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/ui/chart.js

@@ -81,7 +81,7 @@ function ChartTooltipContent({ active, payload, className, indicator = 'dot', hi
                 }) })] }));
 }
 const ChartLegend = RechartsPrimitive.Legend;
-function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, }) {
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey, off, onSeries, }) {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
@@ -91,8 +91,16 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
             .map((item, index) => {
             const key = `${nameKey ?? item.dataKey ?? 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (_jsxs("div", { title: typeof itemConfig?.label === 'string' ? itemConfig.label : undefined, className: cn('flex max-w-full min-w-0 items-center gap-1.5 sm:max-w-64 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
-                            backgroundColor: item.color,
+            const series = String(item.dataKey ?? key);
+            const hidden = off?.includes(series) ?? false;
+            const Item = onSeries ? 'button' : 'div';
+            return (_jsxs(Item, { title: typeof itemConfig?.label === 'string' ? itemConfig.label : undefined, ...(onSeries && {
+                    type: 'button',
+                    'aria-pressed': !hidden,
+                    onClick: () => onSeries(series),
+                }), className: cn('flex max-w-full min-w-0 items-center gap-1.5 sm:max-w-64 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground', onSeries &&
+                    'min-h-6 cursor-pointer rounded-sm px-1 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', hidden && 'text-muted-foreground line-through'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: hidden ? 'var(--muted-foreground)' : item.color,
                         } })), _jsx("span", { className: "truncate", children: itemConfig?.label })] }, index));
         }) }));
 }

package/dist/widget-settings.d.ts

@@ -514,5 +514,5 @@ export declare const readsRows: (card: ViewWidget) => card is {
     bucket: "day" | "month" | "week" | "year";
     agg: "count" | "last" | "mean" | "sum";
     kind: "chart";
-    style: "area" | "bars" | "combo" | "line" | "stacked";
+    style: "area" | "bars" | "combo" | "line" | "stacked" | "stacked_bars";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.124",
+  "version": "0.1.125",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.124",
+    "@columenlabs/lumen-ui-types": "0.1.125",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",