@nexub/react 3.1.0 → 3.2.0

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+/** A colour from the categorical chart palette, 1–8. */
+export type ChartColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface ChartSeries {
+    /** Key of the value in each data row. */
+    key: string;
+    /** Name shown in the legend and the data table. Defaults to `key`. */
+    label?: string;
+    /** Palette colour, 1–8. Defaults to the series' position. */
+    color?: ChartColor;
+}
+/** Rounds up to 1, 2, 2.5 or 5 × 10ⁿ so the four gridlines get round labels. */
+export declare function niceMax(max: number): number;
+declare const PLOT_HEIGHT: {
+    readonly sm: "h-32";
+    readonly md: "h-48";
+    readonly lg: "h-64";
+};
+export interface ChartLegendProps extends React.HTMLAttributes<HTMLUListElement> {
+    items: {
+        label: string;
+        color?: ChartColor;
+    }[];
+}
+/** A row of colour dots and labels. Charts render one for you when `legend` is on. */
+export declare function ChartLegend({ items, className, ...props }: ChartLegendProps): React.JSX.Element;
+interface CartesianProps<T> extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** One row per category, in order. */
+    data: T[];
+    /** Key of the category label in each row (the x axis). */
+    index: keyof T & string;
+    /** The values to plot, one entry per series. */
+    series: ChartSeries[];
+    /** Accessible name of the chart, e.g. "Revenue by month". */
+    title: string;
+    /** Formats axis labels, the hover text and the data table. */
+    valueFormat?: (value: number) => string;
+    /** Height of the plot area. */
+    size?: keyof typeof PLOT_HEIGHT;
+    /** Show the legend above the chart. Defaults to on for more than one series. */
+    legend?: boolean;
+}
+export interface BarChartProps<T> extends CartesianProps<T> {
+    /** Stack the series in one bar per category instead of side by side. */
+    stacked?: boolean;
+}
+/** Bars per category, grouped or stacked. Values must be 0 or more. */
+export declare function BarChart<T extends object>({ stacked, ...props }: BarChartProps<T>): React.JSX.Element;
+export interface LineChartProps<T> extends CartesianProps<T> {
+    /** Fill the area under each line. */
+    area?: boolean;
+}
+/** One line per series across the categories. Values must be 0 or more. */
+export declare function LineChart<T extends object>({ area, ...props }: LineChartProps<T>): React.JSX.Element;
+export interface DonutChartProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    data: {
+        label: string;
+        value: number;
+        color?: ChartColor;
+    }[];
+    /** Accessible name of the chart. */
+    title: string;
+    /** Content in the hole, such as the total. */
+    center?: React.ReactNode;
+    valueFormat?: (value: number) => string;
+    /** Show the legend beside the donut. Default on. */
+    legend?: boolean;
+}
+/** Parts of a whole. Keep it to six slices or fewer; group the rest as "Other". */
+export declare function DonutChart({ data, title, center, valueFormat, legend, className, ...props }: DonutChartProps): React.JSX.Element;
+export interface SparklineProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'values' | 'color'> {
+    values: number[];
+    /** Accessible summary, e.g. "Revenue, last 12 weeks, up 8%". Without it the sparkline is decorative. */
+    label?: string;
+    color?: ChartColor;
+    /** Fill the area under the line. */
+    area?: boolean;
+}
+/** A tiny trend line with no axes, for stat cards and table cells. Fills its box (default 6rem × 2rem). */
+export declare function Sparkline({ values, label, color, area, className, ...props }: SparklineProps): React.JSX.Element;
+export {};

package/dist/components/Chart/Chart.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const FILL = ["fill-chart-1", "fill-chart-2", "fill-chart-3", "fill-chart-4", "fill-chart-5", "fill-chart-6", "fill-chart-7", "fill-chart-8"];
+const STROKE = ["stroke-chart-1", "stroke-chart-2", "stroke-chart-3", "stroke-chart-4", "stroke-chart-5", "stroke-chart-6", "stroke-chart-7", "stroke-chart-8"];
+const BG = ["bg-chart-1", "bg-chart-2", "bg-chart-3", "bg-chart-4", "bg-chart-5", "bg-chart-6", "bg-chart-7", "bg-chart-8"];
+const colorIndex = (color, i) => ((color ?? i % 8 + 1) - 1) % 8;
+function niceMax(max) {
+  if (!(max > 0)) return 1;
+  const pow = 10 ** Math.floor(Math.log10(max));
+  const step = [1, 2, 2.5, 5, 10].find((s) => s * pow >= max);
+  return step * pow;
+}
+const defaultFormat = (n) => n.toLocaleString();
+const PLOT_HEIGHT = { sm: "h-32", md: "h-48", lg: "h-64" };
+const VB_W = 300;
+const VB_H = 100;
+function ChartLegend({ items, className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-wrap gap-x-4 gap-y-1 text-label-md text-[var(--color-on-surface-variant)]", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-2.5 shrink-0 rounded-full", BG[colorIndex(item.color, i)]) }),
+    item.label
+  ] }, item.label)) });
+}
+function Frame({
+  data,
+  index,
+  series,
+  title,
+  valueFormat = defaultFormat,
+  size = "md",
+  legend,
+  max,
+  className,
+  children,
+  ...props
+}) {
+  const labels = series.map((s) => s.label ?? s.key);
+  const ticks = [1, 0.75, 0.5, 0.25, 0];
+  return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 flex flex-col gap-3", className), ...props, children: [
+    (legend ?? series.length > 1) && /* @__PURE__ */ jsx(ChartLegend, { "aria-hidden": "true", items: series.map((s, i) => ({ label: labels[i], color: s.color })) }),
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-between text-end text-label-sm tabular-nums text-[var(--color-on-surface-muted)]", PLOT_HEIGHT[size]), children: ticks.map((t) => /* @__PURE__ */ jsx("span", { className: "flex h-0 items-center justify-end", children: valueFormat(max * t) }, t)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${VB_W} ${VB_H}`, preserveAspectRatio: "none", className: cn("w-full overflow-visible rtl:-scale-x-100", PLOT_HEIGHT[size]), children: [
+          ticks.map((t) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: "0",
+              x2: VB_W,
+              y1: VB_H * (1 - t),
+              y2: VB_H * (1 - t),
+              strokeWidth: "1",
+              vectorEffect: "non-scaling-stroke",
+              className: t === 0 ? "stroke-[var(--color-outline)]" : "stroke-[var(--color-outline-variant)]"
+            },
+            t
+          )),
+          children
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-flow-col text-center text-label-sm text-[var(--color-on-surface-muted)]", children: data.map((row, i) => /* @__PURE__ */ jsx("span", { className: "truncate px-0.5", children: String(row[index]) }, i)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("caption", { children: title }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", children: index }),
+        labels.map((l) => /* @__PURE__ */ jsx("th", { scope: "col", children: l }, l))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: String(row[index]) }),
+        series.map((s) => /* @__PURE__ */ jsx("td", { children: valueFormat(Number(row[s.key]) || 0) }, s.key))
+      ] }, i)) })
+    ] })
+  ] });
+}
+const valueOf = (row, key) => Math.max(0, Number(row[key]) || 0);
+function BarChart({ stacked = false, ...props }) {
+  const { data, series, index, valueFormat = defaultFormat } = props;
+  const max = niceMax(Math.max(0, ...data.map((row) => stacked ? series.reduce((sum, s) => sum + valueOf(row, s.key), 0) : Math.max(0, ...series.map((s) => valueOf(row, s.key))))));
+  const slot = VB_W / Math.max(1, data.length);
+  const groupW = slot * 0.7;
+  const barW = stacked ? groupW : groupW / series.length;
+  return /* @__PURE__ */ jsx(Frame, { ...props, max, children: data.map((row, i) => {
+    let base = 0;
+    return /* @__PURE__ */ jsx("g", { children: series.map((s, j) => {
+      const v = valueOf(row, s.key);
+      const h = v / max * VB_H;
+      const x = i * slot + (slot - groupW) / 2 + (stacked ? 0 : j * barW);
+      const y = VB_H - base - h;
+      if (stacked) base += h;
+      return /* @__PURE__ */ jsx("rect", { x, y, width: Math.max(0, barW - (stacked ? 0 : 1)), height: h, className: FILL[colorIndex(s.color, j)], children: /* @__PURE__ */ jsx("title", { children: `${String(row[index])} \xB7 ${s.label ?? s.key}: ${valueFormat(v)}` }) }, s.key);
+    }) }, i);
+  }) });
+}
+function LineChart({ area = false, ...props }) {
+  const { data, series, index, valueFormat = defaultFormat } = props;
+  const max = niceMax(Math.max(0, ...data.flatMap((row) => series.map((s) => valueOf(row, s.key)))));
+  const slot = VB_W / Math.max(1, data.length);
+  const x = (i) => i * slot + slot / 2;
+  const y = (v) => VB_H - v / max * VB_H;
+  return /* @__PURE__ */ jsx(Frame, { ...props, max, children: series.map((s, j) => {
+    const c = colorIndex(s.color, j);
+    const pts = data.map((row, i) => `${x(i)},${y(valueOf(row, s.key))}`);
+    return /* @__PURE__ */ jsxs("g", { children: [
+      area && data.length > 0 && /* @__PURE__ */ jsx("polygon", { points: `${x(0)},${VB_H} ${pts.join(" ")} ${x(data.length - 1)},${VB_H}`, className: cn(FILL[c], "opacity-15") }),
+      /* @__PURE__ */ jsx("polyline", { points: pts.join(" "), fill: "none", strokeWidth: "2", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: STROKE[c] }),
+      data.map((row, i) => (
+        // A wide, invisible hit area per point carries the hover text.
+        /* @__PURE__ */ jsx("rect", { x: x(i) - slot / 2, y: "0", width: slot, height: VB_H, className: "fill-transparent", children: /* @__PURE__ */ jsx("title", { children: `${String(row[index])} \xB7 ${s.label ?? s.key}: ${valueFormat(valueOf(row, s.key))}` }) }, i)
+      ))
+    ] }, s.key);
+  }) });
+}
+function DonutChart({ data, title, center, valueFormat = defaultFormat, legend = true, className, ...props }) {
+  const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0) || 1;
+  const r = 15.9155;
+  let offset = 25;
+  return /* @__PURE__ */ jsxs("figure", { "aria-label": title, className: cn("m-0 flex flex-wrap items-center gap-6", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "relative size-40 shrink-0", children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 42 42", className: "size-full rtl:-scale-x-100", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "21", cy: "21", r, fill: "none", strokeWidth: "6", className: "stroke-[var(--color-surface-container-high)]" }),
+        data.map((d, i) => {
+          const pct = Math.max(0, d.value) / total * 100;
+          const dash = `${pct} ${100 - pct}`;
+          const el = /* @__PURE__ */ jsx("circle", { cx: "21", cy: "21", r, fill: "none", strokeWidth: "6", strokeDasharray: dash, strokeDashoffset: offset, className: STROKE[colorIndex(d.color, i)], children: /* @__PURE__ */ jsx("title", { children: `${d.label}: ${valueFormat(d.value)} (${Math.round(pct)}%)` }) }, d.label);
+          offset -= pct;
+          return el;
+        })
+      ] }),
+      center != null && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-center text-title-md text-[var(--color-on-surface)]", children: center })
+    ] }),
+    legend && /* @__PURE__ */ jsx(ChartLegend, { "aria-hidden": "true", className: "flex-col", items: data.map((d) => ({ label: d.label, color: d.color })) }),
+    /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("caption", { children: title }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((d) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: d.label }),
+        /* @__PURE__ */ jsx("td", { children: valueFormat(d.value) }),
+        /* @__PURE__ */ jsxs("td", { children: [
+          Math.round(Math.max(0, d.value) / total * 100),
+          "%"
+        ] })
+      ] }, d.label)) })
+    ] })
+  ] });
+}
+function Sparkline({ values, label, color = 1, area = false, className, ...props }) {
+  const min = Math.min(...values);
+  const span = Math.max(...values) - min || 1;
+  const step = values.length > 1 ? VB_W / (values.length - 1) : 0;
+  const pts = values.map((v, i) => `${i * step},${VB_H - 4 - (v - min) / span * (VB_H - 8)}`).join(" ");
+  const c = colorIndex(color, 0);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${VB_W} ${VB_H}`,
+      preserveAspectRatio: "none",
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      className: cn("h-8 w-24 overflow-visible rtl:-scale-x-100", className),
+      ...props,
+      children: [
+        area && values.length > 1 && /* @__PURE__ */ jsx("polygon", { points: `0,${VB_H} ${pts} ${VB_W},${VB_H}`, className: cn(FILL[c], "opacity-15") }),
+        /* @__PURE__ */ jsx("polyline", { points: pts, fill: "none", strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: STROKE[c] })
+      ]
+    }
+  );
+}
+export {
+  BarChart,
+  ChartLegend,
+  DonutChart,
+  LineChart,
+  Sparkline,
+  niceMax
+};

package/dist/components/Chart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from './Chart.js';
+export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './Chart.js';

package/dist/components/Chart/index.js

@@ -0,0 +1,9 @@
+import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from "./Chart.js";
+export {
+  BarChart,
+  ChartLegend,
+  DonutChart,
+  LineChart,
+  Sparkline,
+  niceMax
+};

package/dist/index.d.ts

@@ -36,6 +36,8 @@ export type { NumberInputProps } from './components/NumberInput/index.js';
 export { MoneyInput } from './components/MoneyInput/index.js';
 export type { MoneyInputProps } from './components/MoneyInput/index.js';
 export { Amount } from './components/Amount/index.js';
+export { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from './components/Chart/index.js';
+export type { BarChartProps, LineChartProps, DonutChartProps, SparklineProps, ChartLegendProps, ChartSeries, ChartColor } from './components/Chart/index.js';
 export type { AmountProps } from './components/Amount/index.js';
 export { NumberTicker } from './components/NumberTicker/index.js';
 export type { NumberTickerProps, NumberTickerPart } from './components/NumberTicker/index.js';

package/dist/index.js

@@ -21,6 +21,7 @@ import { Textarea, textareaVariants } from "./components/Textarea/index.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { MoneyInput } from "./components/MoneyInput/index.js";
 import { Amount } from "./components/Amount/index.js";
+import { BarChart, LineChart, DonutChart, Sparkline, ChartLegend, niceMax } from "./components/Chart/index.js";
 import { NumberTicker } from "./components/NumberTicker/index.js";
 import { SearchInput } from "./components/SearchInput/index.js";
 import { PasswordInput } from "./components/PasswordInput/index.js";
@@ -121,12 +122,14 @@ export {
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Box,
   Breadcrumb,
   Button,
   ButtonGroup,
   Card,
   CardLink,
+  ChartLegend,
   CheckList,
   CheckListItem,
   Checkbox,
@@ -145,6 +148,7 @@ export {
   DatePicker,
   DateRangePicker,
   Dialog,
+  DonutChart,
   Drawer,
   DropdownMenu,
   EmptyState,
@@ -168,6 +172,7 @@ export {
   Kbd,
   KeyboardShortcut,
   Label,
+  LineChart,
   Link,
   ListTransition,
   Logo,
@@ -208,6 +213,7 @@ export {
   Slider,
   SourceChip,
   SourceList,
+  Sparkline,
   Spinner,
   SplitButton,
   Stack,
@@ -249,6 +255,7 @@ export {
   labelVariants,
   linkVariants,
   logoVariants,
+  niceMax,
   progressFillVariants,
   progressTrackVariants,
   ratingVariants,