@columenlabs/lumen-ui 0.1.130 → 0.1.131

package/dist/lumen-widget-charts.js

@@ -42,7 +42,7 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
     const total = (r) => parts.reduce((n, p) => n + (Number(r[p.key]) || 0), 0);
     // The highest part with a value carries the column's rounded cap.
     const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
-    const ticks = niceTicks(Math.max(0, ...rows.map(total)));
+    const ticks = niceTicks(Math.max(0, ...rows.map(total)), 4, rows.every((r) => Number.isInteger(total(r))));
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tick: axisTick(fmt) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
@@ -54,7 +54,8 @@ export function TimeLines({ rows, x, lines, label, height = 220, tick = String,
     const config = Object.fromEntries(lines.map((l) => [l.key, { label: l.name, color: l.fill }]));
     const axis = (right) => {
         const keys = lines.filter((l) => !!l.right === right).map((l) => l.key);
-        return niceTicks(Math.max(0, ...rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0))));
+        const values = rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0));
+        return niceTicks(Math.max(0, ...values), 4, values.every(Number.isInteger));
     };
     const left = axis(false);
     const hasRight = lines.some((l) => l.right);
@@ -113,14 +114,16 @@ export function AllocationBar({ items, total, config, tooltip, share, }) {
 }
 /**
  * Round axis steps (1, 2, 2.5 or 5 times a power of ten) from 0 to just above `max`, about four
- * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k.
+ * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k. When every value
+ * is a whole number (a count), so is every step: 0, 1, 2 rather than 0, 0.5, 1, 1.5.
  */
-function niceTicks(max, count = 4) {
+function niceTicks(max, count = 4, whole = false) {
     if (!(max > 0))
         return [0, 1];
     const raw = max / count;
     const pow = 10 ** Math.floor(Math.log10(raw));
-    const step = ([1, 2, 2.5, 5, 10].find((m) => m * pow >= raw) ?? 10) * pow;
+    const steps = whole ? [1, 2, 5, 10] : [1, 2, 2.5, 5, 10];
+    const step = Math.max(whole ? 1 : 0, (steps.find((m) => m * pow >= raw) ?? 10) * pow);
     const n = Math.ceil(max / step - 1e-9);
     return Array.from({ length: n + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
 }

package/dist/page.d.ts

@@ -21,7 +21,10 @@ export interface PageHeaderProps {
 }
 /** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */
 export declare function PageHeader({ crumbs, actions, layout, meta, status }: PageHeaderProps): import("react").JSX.Element;
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export declare function PageBody({ className, children }: {
     className?: string;
     children: ReactNode;

package/dist/page.js

@@ -36,9 +36,12 @@ export function PageHeader({ crumbs, actions, layout, meta, status }) {
                         isMobile &&
                             '[&_[data-slot=button]]:size-8 [&_[data-slot=button]]:gap-0 [&_[data-slot=button]]:px-0 [&_[data-slot=button]]:text-[0px]'), children: [actions && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "shell-page-actions", className: "flex items-center gap-0.5", children: actions }), _jsx(Separator, { orientation: "vertical", className: "mx-2 data-vertical:h-5 data-vertical:self-center" })] })), _jsxs("div", { "data-slot": "shell-actions", className: "flex items-center gap-0.5", children: [layout, _jsx(LumenFinderButton, {}), hideAmounts && (_jsx(IconButton, { icon: hidden ? EyeOffIcon : EyeIcon, label: hidden ? 'Show amounts' : 'Hide amounts', "aria-pressed": hidden, onClick: () => setPref('hideAmounts', !hidden) })), refresh && (_jsx(IconButton, { icon: RefreshCwIcon, busy: refreshing, label: "Refresh (skip cache)", disabled: refreshing, onClick: () => void refresh() })), headerActions] })] })] }), status && statusSlot && createPortal(status, statusSlot)] }));
 }
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export function PageBody({ className, children }) {
-    return (_jsx("main", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
+    return (_jsx("div", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
 }
 export function Page({ className, children, ...header }) {
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsx(PageBody, { className: className, children: children })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.130",
+  "version": "0.1.131",
   "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.130",
+    "@columenlabs/lumen-ui-types": "0.1.131",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",