@keboola/design 10.1.0 → 11.0.1

package/dist/charts.js

@@ -1,256 +1,310 @@
-import { cn } from './chunk-JP7PNHLH.js';
-import { ResponsiveContainer, Tooltip, LineChart as LineChart$1, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Legend, Pie, Cell, CartesianGrid, XAxis, YAxis } from 'recharts';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var ChartContainer = ({
-  height = 300,
-  width = "100%",
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "tw:text-xs",
-      // Axis ticks and labels follow the muted foreground token.
-      "tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
-      "tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground",
-      "tw:[&_.recharts-label]:fill-muted-foreground",
-      "tw:[&_.recharts-legend-item-text]:!text-muted-foreground",
-      // Grid lines, axis lines and the hover cursor follow the border token.
-      "tw:[&_.recharts-cartesian-grid_line]:stroke-border/60",
-      "tw:[&_.recharts-cartesian-axis-line]:stroke-border",
-      "tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border",
-      "tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
-      "tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60",
-      "tw:[&_.recharts-surface]:outline-hidden",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children })
-  }
-);
-var ChartTooltipContent = ({
-  active,
-  label,
-  payload,
-  valueFormatter,
-  className
-}) => {
-  if (!active || !payload?.length) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md",
-        className
-      ),
-      children: [
-        label != null && /* @__PURE__ */ jsx("div", { className: "tw:mb-1 tw:font-medium", children: label }),
-        /* @__PURE__ */ jsx("div", { className: "tw:flex tw:flex-col tw:gap-1", children: payload.map((entry) => {
-          const name = String(entry.name ?? entry.dataKey ?? "");
-          const value = entry.value;
-          const hasNumber = value != null && value !== "" && Number.isFinite(Number(value));
-          const display = hasNumber ? valueFormatter ? valueFormatter(Number(value), name) : String(Number(value)) : value ?? "";
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "tw:flex tw:items-center tw:justify-between tw:gap-3",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "tw:flex tw:items-center tw:gap-1.5", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "tw:size-2 tw:shrink-0 tw:rounded-[2px]",
-                      style: { backgroundColor: entry.color }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "tw:text-muted-foreground", children: name })
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "tw:font-medium tw:tabular-nums", children: display })
-              ]
-            },
-            String(entry.dataKey ?? name)
-          );
-        }) })
-      ]
-    }
-  );
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, Cell, Legend, Line, LineChart as LineChart$1, Pie, PieChart as PieChart$1, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/blocks/Charts/ChartContainer.tsx
+/**
+* Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
+* `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
+* grid, cursor) through CSS so every chart inside inherits it. Sizing is
+* intrinsic: give it a `height` (default 300) and it fills the parent width.
+*/
+const ChartContainer = ({ height = 300, width = "100%", className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:text-xs", "tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground", "tw:[&_.recharts-label]:fill-muted-foreground", "tw:[&_.recharts-legend-item-text]:!text-muted-foreground", "tw:[&_.recharts-cartesian-grid_line]:stroke-border/60", "tw:[&_.recharts-cartesian-axis-line]:stroke-border", "tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border", "tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60", "tw:[&_.recharts-surface]:outline-hidden", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width,
+		height,
+		children
+	})
+});
+//#endregion
+//#region src/blocks/Charts/ChartTooltip.tsx
+/**
+* Brand-themed tooltip body. Surfaces (background, border, text) resolve from
+* semantic tokens, and each series swatch reuses the recharts-provided series
+* `color` (already a `--chart-*` token from this package's charts).
+*/
+const ChartTooltipContent = ({ active, label, payload, valueFormatter, className }) => {
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md", className),
+		children: [label != null && /* @__PURE__ */ jsx("div", {
+			className: "tw:mb-1 tw:font-medium",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "tw:flex tw:flex-col tw:gap-1",
+			children: payload.map((entry) => {
+				const name = String(entry.name ?? entry.dataKey ?? "");
+				const value = entry.value;
+				const display = value != null && value !== "" && Number.isFinite(Number(value)) ? valueFormatter ? valueFormatter(Number(value), name) : String(Number(value)) : value ?? "";
+				return /* @__PURE__ */ jsxs("div", {
+					className: "tw:flex tw:items-center tw:justify-between tw:gap-3",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "tw:flex tw:items-center tw:gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "tw:size-2 tw:shrink-0 tw:rounded-[2px]",
+							style: { backgroundColor: entry.color }
+						}), /* @__PURE__ */ jsx("span", {
+							className: "tw:text-muted-foreground",
+							children: name
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "tw:font-medium tw:tabular-nums",
+						children: display
+					})]
+				}, String(entry.dataKey ?? name));
+			})
+		})]
+	});
 };
-var ChartTooltip = ({ valueFormatter, ...props }) => /* @__PURE__ */ jsx(
-  Tooltip,
-  {
-    cursor: { strokeWidth: 1 },
-    content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter }),
-    ...props
-  }
-);
-
-// src/blocks/Charts/format.ts
-var formatValue = (value, valueFormatter) => {
-  if (value == null || value === "") return "";
-  const num = Number(value);
-  if (!Number.isFinite(num)) return "";
-  return valueFormatter ? valueFormatter(num) : String(num);
+/**
+* Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
+* Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
+*/
+const ChartTooltip = ({ valueFormatter, ...props }) => /* @__PURE__ */ jsx(Tooltip, {
+	cursor: { strokeWidth: 1 },
+	content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter }),
+	...props
+});
+//#endregion
+//#region src/blocks/Charts/format.ts
+/**
+* Apply a numeric `valueFormatter` safely. recharts hands axis ticks and
+* tooltip payload values as `string | number | null | undefined`, and partial
+* or streaming data can carry gaps. Coercing those straight through
+* `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),
+* so a missing / non-finite value is rendered as an empty string instead of
+* being fed to the formatter.
+*/
+const formatValue = (value, valueFormatter) => {
+	if (value == null || value === "") return "";
+	const num = Number(value);
+	if (!Number.isFinite(num)) return "";
+	return valueFormatter ? valueFormatter(num) : String(num);
 };
-var AXIS_PROPS = {
-  tickLine: false,
-  axisLine: false,
-  tick: { fontSize: 11 }
+//#endregion
+//#region src/blocks/Charts/cartesian.tsx
+const AXIS_PROPS = {
+	tickLine: false,
+	axisLine: false,
+	tick: { fontSize: 11 }
 };
-var cartesianChrome = ({
-  xKey,
-  showGrid = true,
-  showYAxis = true,
-  showLegend = false,
-  showTooltip = true,
-  valueFormatter,
-  yDomain
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-  /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS_PROPS }),
-  (showYAxis || yDomain !== void 0) && /* @__PURE__ */ jsx(
-    YAxis,
-    {
-      hide: !showYAxis,
-      domain: yDomain,
-      width: 48,
-      ...AXIS_PROPS,
-      tickFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showTooltip && /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } })
+/**
+* The grid + axes + tooltip + legend shared by the line, bar, and area charts.
+* Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so
+* these stay brand-safe.
+*/
+const cartesianChrome = ({ xKey, showGrid = true, showYAxis = true, showLegend = false, showTooltip = true, valueFormatter, yDomain }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+		strokeDasharray: "3 3",
+		vertical: false
+	}),
+	/* @__PURE__ */ jsx(XAxis, {
+		dataKey: xKey,
+		...AXIS_PROPS
+	}),
+	(showYAxis || yDomain !== void 0) && /* @__PURE__ */ jsx(YAxis, {
+		hide: !showYAxis,
+		domain: yDomain,
+		width: 48,
+		...AXIS_PROPS,
+		tickFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+	}),
+	showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0 }),
+	showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } })
 ] });
-
-// src/blocks/Charts/theme.ts
-var CHART_TOKEN_COUNT = 5;
-var chartTokenColor = (index) => {
-  const slot = (index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1;
-  return `rgb(var(--chart-${slot}))`;
+//#endregion
+//#region src/blocks/Charts/theme.ts
+/**
+* The design system ships a five-slot categorical chart palette as CSS
+* variables (`--chart-1` … `--chart-5`). Charts resolve their
+* series colors from these tokens only — never from inline hex or a primitive
+* scale — so they follow both the active color scheme (light/dark, via
+* `data-theme` in `styles.css`) and the active brand: a brand reskins charts
+* by defining `colors.chart` (and `colorsDark.chart`) in its
+* `@keboola/brand-registry` definition, which `ThemeProvider` emits as the
+* `--chart-*` variables.
+*
+* The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`
+* opacity modifiers), so they are wrapped in `rgb(...)` before handing them to
+* recharts as ordinary SVG `stroke` / `fill` strings.
+*/
+const CHART_TOKEN_COUNT = 5;
+/**
+* The CSS color for a chart token. `index` is 0-based (series position); it
+* wraps around the five-slot palette so any number of series stays on-brand.
+*/
+const chartTokenColor = (index) => {
+	return `rgb(var(--chart-${(index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1}))`;
 };
-var resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 : index);
-var LineChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  ...chrome
-}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => {
-    const color = resolveSeriesColor(index, s.color);
-    return /* @__PURE__ */ jsx(
-      Line,
-      {
-        type: "monotone",
-        dataKey: s.dataKey,
-        name: s.name ?? s.dataKey,
-        stroke: color,
-        strokeWidth: 2,
-        dot: { r: 3, fill: color, stroke: color },
-        activeDot: { r: 4 },
-        isAnimationActive: false
-      },
-      s.dataKey
-    );
-  })
-] }) });
-var BarChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  stacked = false,
-  ...chrome
-}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => /* @__PURE__ */ jsx(
-    Bar,
-    {
-      dataKey: s.dataKey,
-      name: s.name ?? s.dataKey,
-      fill: resolveSeriesColor(index, s.color),
-      radius: stacked ? 0 : [4, 4, 0, 0],
-      stackId: stacked ? "stack" : void 0,
-      isAnimationActive: false
-    },
-    s.dataKey
-  ))
-] }) });
-var AreaChart = ({
-  data,
-  xKey,
-  series,
-  height,
-  width,
-  className,
-  stacked = false,
-  ...chrome
-}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
-  cartesianChrome({ xKey, ...chrome }),
-  series.map((s, index) => {
-    const color = resolveSeriesColor(index, s.color);
-    return /* @__PURE__ */ jsx(
-      Area,
-      {
-        type: "monotone",
-        dataKey: s.dataKey,
-        name: s.name ?? s.dataKey,
-        stroke: color,
-        fill: color,
-        fillOpacity: 0.15,
-        strokeWidth: 2,
-        stackId: stacked ? "stack" : void 0,
-        isAnimationActive: false
-      },
-      s.dataKey
-    );
-  })
-] }) });
-var PieChart = ({
-  data,
-  nameKey,
-  dataKey,
-  innerRadius = 0,
-  height,
-  width,
-  className,
-  showLegend = true,
-  showTooltip = true,
-  valueFormatter
-}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-  showTooltip && /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
-    }
-  ),
-  showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } }),
-  /* @__PURE__ */ jsx(
-    Pie,
-    {
-      data,
-      nameKey,
-      dataKey,
-      innerRadius,
-      stroke: "rgb(var(--background))",
-      isAnimationActive: false,
-      children: data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: chartTokenColor(index) }, String(datum[nameKey] ?? index)))
-    }
-  )
-] }) });
-
+/** Resolve an explicit token (1–5) or fall back to the series position. */
+const resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 : index);
+//#endregion
+//#region src/blocks/Charts/LineChart.tsx
+/**
+* A themed multi-series line chart. Each series' color comes from the semantic
+* `--chart-*` palette (by order, or pinned via `series[].color`), which
+* follows the active color scheme and the active brand's `colors.chart` when it
+* defines one. Wrap-free — mounts its own {@link ChartContainer}.
+*
+* @example
+* <LineChart
+*   data={data}
+*   xKey="month"
+*   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
+* />
+*
+* @example Two close-but-high series, on a baseline that shows the gap
+* <LineChart data={data} xKey="month" series={series} yDomain={[7000, 9000]} />
+*/
+const LineChart = ({ data, xKey, series, height, width, className, ...chrome }) => /* @__PURE__ */ jsx(ChartContainer, {
+	height,
+	width,
+	className,
+	children: /* @__PURE__ */ jsxs(LineChart$1, {
+		data,
+		margin: {
+			top: 8,
+			right: 8,
+			left: 0,
+			bottom: 0
+		},
+		children: [cartesianChrome({
+			xKey,
+			...chrome
+		}), series.map((s, index) => {
+			const color = resolveSeriesColor(index, s.color);
+			return /* @__PURE__ */ jsx(Line, {
+				type: "monotone",
+				dataKey: s.dataKey,
+				name: s.name ?? s.dataKey,
+				stroke: color,
+				strokeWidth: 2,
+				dot: {
+					r: 3,
+					fill: color,
+					stroke: color
+				},
+				activeDot: { r: 4 },
+				isAnimationActive: false
+			}, s.dataKey);
+		})]
+	})
+});
+//#endregion
+//#region src/blocks/Charts/BarChart.tsx
+/**
+* A themed multi-series bar chart. Series colors come from the semantic
+* `--chart-*` palette (by order, or pinned via `series[].color`), which
+* follows the active color scheme and the active brand's `colors.chart` when it
+* defines one. Pass `stacked` to stack the series instead of grouping them.
+*
+* @example
+* <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+*/
+const BarChart = ({ data, xKey, series, height, width, className, stacked = false, ...chrome }) => /* @__PURE__ */ jsx(ChartContainer, {
+	height,
+	width,
+	className,
+	children: /* @__PURE__ */ jsxs(BarChart$1, {
+		data,
+		margin: {
+			top: 8,
+			right: 8,
+			left: 0,
+			bottom: 0
+		},
+		children: [cartesianChrome({
+			xKey,
+			...chrome
+		}), series.map((s, index) => /* @__PURE__ */ jsx(Bar, {
+			dataKey: s.dataKey,
+			name: s.name ?? s.dataKey,
+			fill: resolveSeriesColor(index, s.color),
+			radius: stacked ? 0 : [
+				4,
+				4,
+				0,
+				0
+			],
+			stackId: stacked ? "stack" : void 0,
+			isAnimationActive: false
+		}, s.dataKey))]
+	})
+});
+//#endregion
+//#region src/blocks/Charts/AreaChart.tsx
+/**
+* A themed multi-series area chart. Each series is stroked and softly filled
+* from the semantic `--chart-*` palette (by order, or pinned via
+* `series[].color`), which follows the active color scheme and the active
+* brand's `colors.chart` when it defines one. Pass `stacked` to stack the
+* series cumulatively.
+*
+* @example
+* <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+*/
+const AreaChart = ({ data, xKey, series, height, width, className, stacked = false, ...chrome }) => /* @__PURE__ */ jsx(ChartContainer, {
+	height,
+	width,
+	className,
+	children: /* @__PURE__ */ jsxs(AreaChart$1, {
+		data,
+		margin: {
+			top: 8,
+			right: 8,
+			left: 0,
+			bottom: 0
+		},
+		children: [cartesianChrome({
+			xKey,
+			...chrome
+		}), series.map((s, index) => {
+			const color = resolveSeriesColor(index, s.color);
+			return /* @__PURE__ */ jsx(Area, {
+				type: "monotone",
+				dataKey: s.dataKey,
+				name: s.name ?? s.dataKey,
+				stroke: color,
+				fill: color,
+				fillOpacity: .15,
+				strokeWidth: 2,
+				stackId: stacked ? "stack" : void 0,
+				isAnimationActive: false
+			}, s.dataKey);
+		})]
+	})
+});
+//#endregion
+//#region src/blocks/Charts/PieChart.tsx
+/**
+* A themed pie / donut chart. Each sector cycles through the semantic
+* `--chart-*` palette, which follows the active color scheme and the
+* active brand's `colors.chart` when it defines one. Pass `innerRadius` to make
+* a donut.
+*
+* @example
+* <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
+*/
+const PieChart = ({ data, nameKey, dataKey, innerRadius = 0, height, width, className, showLegend = true, showTooltip = true, valueFormatter }) => /* @__PURE__ */ jsx(ChartContainer, {
+	height,
+	width,
+	className,
+	children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+		showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0 }),
+		showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } }),
+		/* @__PURE__ */ jsx(Pie, {
+			data,
+			nameKey,
+			dataKey,
+			innerRadius,
+			stroke: "rgb(var(--background))",
+			isAnimationActive: false,
+			children: data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: chartTokenColor(index) }, String(datum[nameKey] ?? index)))
+		})
+	] })
+});
+//#endregion
 export { AreaChart, BarChart, ChartContainer, ChartTooltip, ChartTooltipContent, LineChart, PieChart, chartTokenColor };
-//# sourceMappingURL=charts.js.map
+
 //# sourceMappingURL=charts.js.map