cortena-ui 1.3.0 → 1.4.0

package/dist/components/chart/chart.d.ts

@@ -0,0 +1,71 @@
+"use client";
+import { ChartConfig, ChartDataFor, ChartLabels, ChartRenderer, ChartScale, ChartType } from "./types.js";
+import { ChartContainerProps } from "./container.js";
+import * as React from "react";
+//#region src/components/chart/chart.d.ts
+export interface ChartProps<T extends ChartType = ChartType> extends Omit<ChartContainerProps, "children" | "config" | "responsive"> {
+  /** Which chart to draw; the package picks the engine. See {@link ChartType} for the data shape per type. */
+  type: T;
+  /** The data, in the shape documented on {@link ChartType}. */
+  data: ChartDataFor<T>;
+  /** Series presentation keyed by series id; colours default to `--ds-viz-1..n` in order. */
+  config?: ChartConfig;
+  /** Nivo renderer; `canvas` for large series. Ignored by the Recharts types and by sunburst. */
+  renderer?: ChartRenderer;
+  /** Category key for row data (bar, line, area, radar); inferred as the first string field. */
+  indexBy?: string;
+  /** Series keys for row data; inferred as every numeric field. */
+  keys?: string[];
+  /** Stack bars and areas instead of grouping them. */
+  stacked?: boolean;
+  /** Continuous scale for heatmap and calendar. Default sequential. */
+  scale?: ChartScale;
+  /** Show a legend. Default: when there is more than one series. */
+  legend?: boolean;
+  /** Draw grid lines (cartesian and radar types). Default true. */
+  grid?: boolean;
+  /** Show a tooltip on hover. Default true. */
+  tooltip?: boolean;
+  /**
+   * Per-arc labels for `pie` and `donut`; ignored by every other type. Default
+   * `percent`, which is what the reader almost always wants and what cortenaweb's
+   * donuts showed before this package existed. See {@link ChartLabels}.
+   */
+  labels?: ChartLabels;
+  /** Format values in axes, tooltips and labels. */
+  valueFormatter?: (value: number) => string;
+  /** Calendar range (ISO dates); defaults to the data's extent. */
+  from?: string;
+  to?: string;
+  /** Render the loading skeleton instead of the data. */
+  loading?: boolean;
+  /** Render the error state with this message instead of the data. */
+  error?: React.ReactNode | Error | null;
+  /** Content of the empty state. Default "No data". */
+  emptyMessage?: React.ReactNode;
+}
+/**
+ * Chart — one component for every chart type the fleet draws.
+ *
+ * `type` picks the engine: Recharts for bar, line, area, pie, donut, scatter,
+ * radar and funnel; Nivo for heatmap, calendar, treemap and sunburst, with
+ * `renderer="canvas"` for large series. Both are loaded on the first render of
+ * a chart that needs them — Recharts as one chunk, each `@nivo/*` package as
+ * its own — so importing `Chart` costs nothing until a chart is drawn, and a
+ * screen that draws a bar chart never fetches Nivo.
+ * Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
+ * error states all come from cortena-design tokens; a consumer passes data
+ * and, optionally, a `config` of labels.
+ *
+ * `heatmap` takes either the Nivo series shape or a categorical
+ * {@link ChartMatrix} — `{ rows, columns, values }` — for the correlation and
+ * confusion matrices that are already in that form.
+ *
+ * `testMode` gives the drawing area a 600×300 floor so a chart still draws
+ * where the layout gives it no size; see {@link ChartContainerProps.testMode}
+ * and README.md, "Charts in tests".
+ */
+declare function Chart<T extends ChartType>({ type, data, config, renderer, indexBy, keys, stacked, scale, legend, grid, tooltip, labels, valueFormatter, from, to, loading, error, emptyMessage, className, height, ...props }: ChartProps<T>): React.JSX.Element;
+//#endregion
+export { Chart };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart/chart.js

@@ -0,0 +1,167 @@
+"use client";
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RechartsChartLazy, resetRechartsChunks } from "./recharts-lazy.js";
+import { ChartContainer, ChartEmpty, ChartError, ChartLoading } from "./container.js";
+import { configFor, isEmptyData, isMatrix, isSeriesArray, toRows, toSlices } from "./data.js";
+import { NivoChartLazy, resetNivoChunks } from "./nivo-lazy.js";
+import { chartEngine } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/chart/chart.tsx
+function seriesKeys(type, data, indexBy, keys) {
+	switch (type) {
+		case "bar":
+		case "line":
+		case "area":
+		case "radar": return toRows(data, indexBy, keys).keys;
+		case "pie":
+		case "donut":
+		case "funnel": return toSlices(data).map((s) => s.id);
+		case "heatmap":
+			if (isMatrix(data)) return data.rows.map(String);
+			return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
+		case "scatter":
+		case "scatterplot": return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
+		case "treemap":
+		case "sunburst": return (data.children ?? []).map((c) => String(c.id ?? c.name ?? ""));
+		case "calendar": return [];
+	}
+}
+/**
+* Catches a Nivo chunk that failed to load. Recovering takes two things,
+* because `React.lazy` memoises a rejection for the life of the page: fresh
+* lazy components ({@link resetNivoChunks}) and a boundary that leaves its
+* failed state. `resetKey` does the second on its own when the chart changes,
+* and the fallback gets a `retry` that does both.
+*/
+var ChunkBoundary = class extends React.Component {
+	state = {
+		failed: false,
+		key: this.props.resetKey
+	};
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	static getDerivedStateFromProps(props, state) {
+		return props.resetKey === state.key ? null : {
+			failed: false,
+			key: props.resetKey
+		};
+	}
+	retry = () => {
+		resetNivoChunks();
+		resetRechartsChunks();
+		this.setState({ failed: false });
+	};
+	render() {
+		return this.state.failed ? this.props.fallback(this.retry) : this.props.children;
+	}
+};
+/** Shown when an engine chunk could not be fetched, with a way back. */
+function chunkFallback(retry) {
+	return /* @__PURE__ */ jsxs(ChartError, { children: [
+		"Chart could not be loaded.",
+		" ",
+		/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "chart-retry",
+			onClick: retry,
+			className: "underline underline-offset-2",
+			children: "Retry"
+		})
+	] });
+}
+/**
+* Chart — one component for every chart type the fleet draws.
+*
+* `type` picks the engine: Recharts for bar, line, area, pie, donut, scatter,
+* radar and funnel; Nivo for heatmap, calendar, treemap and sunburst, with
+* `renderer="canvas"` for large series. Both are loaded on the first render of
+* a chart that needs them — Recharts as one chunk, each `@nivo/*` package as
+* its own — so importing `Chart` costs nothing until a chart is drawn, and a
+* screen that draws a bar chart never fetches Nivo.
+* Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
+* error states all come from cortena-design tokens; a consumer passes data
+* and, optionally, a `config` of labels.
+*
+* `heatmap` takes either the Nivo series shape or a categorical
+* {@link ChartMatrix} — `{ rows, columns, values }` — for the correlation and
+* confusion matrices that are already in that form.
+*
+* `testMode` gives the drawing area a 600×300 floor so a chart still draws
+* where the layout gives it no size; see {@link ChartContainerProps.testMode}
+* and README.md, "Charts in tests".
+*/
+function Chart({ type, data, config, renderer = "svg", indexBy, keys, stacked, scale = "sequential", legend, grid = true, tooltip = true, labels = "percent", valueFormatter, from, to, loading, error, emptyMessage, className, height, ...props }) {
+	const engine = chartEngine(type);
+	const empty = isEmptyData(data);
+	const fullConfig = React.useMemo(() => configFor(empty ? [] : seriesKeys(type, data, indexBy, keys), config), [
+		type,
+		data,
+		indexBy,
+		keys,
+		config,
+		empty
+	]);
+	const showLegend = legend ?? Object.keys(fullConfig).length > 1;
+	const errorText = error instanceof Error ? error.message : error;
+	let body;
+	let responsive = false;
+	if (loading) body = /* @__PURE__ */ jsx(ChartLoading, {});
+	else if (errorText) body = /* @__PURE__ */ jsx(ChartError, { children: errorText });
+	else if (empty) body = /* @__PURE__ */ jsx(ChartEmpty, { children: emptyMessage });
+	else if (engine === "nivo") body = /* @__PURE__ */ jsx(ChunkBoundary, {
+		resetKey: `${type}|${renderer}`,
+		fallback: chunkFallback,
+		children: /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: /* @__PURE__ */ jsx(ChartLoading, {}),
+			children: /* @__PURE__ */ jsx(NivoChartLazy, {
+				type,
+				data,
+				config: fullConfig,
+				renderer,
+				scale,
+				legend: showLegend,
+				valueFormatter,
+				from,
+				to
+			})
+		})
+	});
+	else {
+		responsive = true;
+		body = /* @__PURE__ */ jsx(ChunkBoundary, {
+			resetKey: type,
+			fallback: chunkFallback,
+			children: /* @__PURE__ */ jsx(RechartsChartLazy, {
+				type,
+				data,
+				config: fullConfig,
+				indexBy,
+				keys,
+				stacked,
+				legend: showLegend,
+				grid,
+				tooltip,
+				labels,
+				valueFormatter
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		"data-type": type,
+		"data-engine": engine,
+		"data-renderer": engine === "nivo" ? renderer : "svg",
+		config: fullConfig,
+		height,
+		responsive,
+		className: cn(className),
+		...props,
+		children: body
+	});
+}
+//#endregion
+export { Chart };
+
+//# sourceMappingURL=chart.js.map

package/dist/components/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../../src/components/chart/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ChartContainer, ChartEmpty, ChartError, ChartLoading, type ChartContainerProps } from \"./container\";\nimport { configFor, isEmptyData, isMatrix, isSeriesArray, toRows, toSlices } from \"./data\";\nimport type { NivoType } from \"./nivo-charts\";\nimport { NivoChartLazy, resetNivoChunks } from \"./nivo-lazy\";\nimport type { RechartsType } from \"./recharts-charts\";\nimport { RechartsChartLazy, resetRechartsChunks } from \"./recharts-lazy\";\nimport {\n  chartEngine,\n  type ChartConfig,\n  type ChartDataFor,\n  type ChartLabels,\n  type ChartMatrix,\n  type ChartRenderer,\n  type ChartRow,\n  type ChartScale,\n  type ChartSeries,\n  type ChartSlice,\n  type ChartTree,\n  type ChartType,\n} from \"./types\";\n\nexport interface ChartProps<T extends ChartType = ChartType>\n  extends Omit<ChartContainerProps, \"children\" | \"config\" | \"responsive\"> {\n  /** Which chart to draw; the package picks the engine. See {@link ChartType} for the data shape per type. */\n  type: T;\n  /** The data, in the shape documented on {@link ChartType}. */\n  data: ChartDataFor<T>;\n  /** Series presentation keyed by series id; colours default to `--ds-viz-1..n` in order. */\n  config?: ChartConfig;\n  /** Nivo renderer; `canvas` for large series. Ignored by the Recharts types and by sunburst. */\n  renderer?: ChartRenderer;\n  /** Category key for row data (bar, line, area, radar); inferred as the first string field. */\n  indexBy?: string;\n  /** Series keys for row data; inferred as every numeric field. */\n  keys?: string[];\n  /** Stack bars and areas instead of grouping them. */\n  stacked?: boolean;\n  /** Continuous scale for heatmap and calendar. Default sequential. */\n  scale?: ChartScale;\n  /** Show a legend. Default: when there is more than one series. */\n  legend?: boolean;\n  /** Draw grid lines (cartesian and radar types). Default true. */\n  grid?: boolean;\n  /** Show a tooltip on hover. Default true. */\n  tooltip?: boolean;\n  /**\n   * Per-arc labels for `pie` and `donut`; ignored by every other type. Default\n   * `percent`, which is what the reader almost always wants and what cortenaweb's\n   * donuts showed before this package existed. See {@link ChartLabels}.\n   */\n  labels?: ChartLabels;\n  /** Format values in axes, tooltips and labels. */\n  valueFormatter?: (value: number) => string;\n  /** Calendar range (ISO dates); defaults to the data's extent. */\n  from?: string;\n  to?: string;\n  /** Render the loading skeleton instead of the data. */\n  loading?: boolean;\n  /** Render the error state with this message instead of the data. */\n  error?: React.ReactNode | Error | null;\n  /** Content of the empty state. Default \"No data\". */\n  emptyMessage?: React.ReactNode;\n}\n\nfunction seriesKeys(type: ChartType, data: unknown, indexBy?: string, keys?: string[]): string[] {\n  switch (type) {\n    case \"bar\":\n    case \"line\":\n    case \"area\":\n    case \"radar\":\n      return toRows(data as ChartRow[] | ChartSeries[], indexBy, keys).keys;\n    case \"pie\":\n    case \"donut\":\n    case \"funnel\":\n      return toSlices(data as ChartSlice[]).map((s) => s.id);\n    case \"heatmap\":\n      if (isMatrix(data)) return data.rows.map(String);\n      return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];\n    case \"scatter\":\n    case \"scatterplot\":\n      return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];\n    case \"treemap\":\n    case \"sunburst\":\n      return ((data as ChartTree).children ?? []).map((c) => String(c.id ?? c.name ?? \"\"));\n    case \"calendar\":\n      return [];\n  }\n}\n\ninterface ChunkBoundaryProps {\n  children: React.ReactNode;\n  /** Changing it clears a previous failure and renders the children again. */\n  resetKey: string;\n  fallback: (retry: () => void) => React.ReactNode;\n}\n\n/**\n * Catches a Nivo chunk that failed to load. Recovering takes two things,\n * because `React.lazy` memoises a rejection for the life of the page: fresh\n * lazy components ({@link resetNivoChunks}) and a boundary that leaves its\n * failed state. `resetKey` does the second on its own when the chart changes,\n * and the fallback gets a `retry` that does both.\n */\nclass ChunkBoundary extends React.Component<ChunkBoundaryProps, { failed: boolean; key: string }> {\n  state = { failed: false, key: this.props.resetKey };\n  static getDerivedStateFromError() {\n    return { failed: true };\n  }\n  static getDerivedStateFromProps(props: ChunkBoundaryProps, state: { failed: boolean; key: string }) {\n    return props.resetKey === state.key ? null : { failed: false, key: props.resetKey };\n  }\n  retry = () => {\n    resetNivoChunks();\n    resetRechartsChunks();\n    this.setState({ failed: false });\n  };\n  render() {\n    return this.state.failed ? this.props.fallback(this.retry) : this.props.children;\n  }\n}\n\n/** Shown when an engine chunk could not be fetched, with a way back. */\nfunction chunkFallback(retry: () => void): React.ReactNode {\n  return (\n    <ChartError>\n      Chart could not be loaded.{\" \"}\n      <button type=\"button\" data-slot=\"chart-retry\" onClick={retry} className=\"underline underline-offset-2\">\n        Retry\n      </button>\n    </ChartError>\n  );\n}\n\n/**\n * Chart — one component for every chart type the fleet draws.\n *\n * `type` picks the engine: Recharts for bar, line, area, pie, donut, scatter,\n * radar and funnel; Nivo for heatmap, calendar, treemap and sunburst, with\n * `renderer=\"canvas\"` for large series. Both are loaded on the first render of\n * a chart that needs them — Recharts as one chunk, each `@nivo/*` package as\n * its own — so importing `Chart` costs nothing until a chart is drawn, and a\n * screen that draws a bar chart never fetches Nivo.\n * Colours, fonts, axes, grid, tooltip, legend and the empty, loading and\n * error states all come from cortena-design tokens; a consumer passes data\n * and, optionally, a `config` of labels.\n *\n * `heatmap` takes either the Nivo series shape or a categorical\n * {@link ChartMatrix} — `{ rows, columns, values }` — for the correlation and\n * confusion matrices that are already in that form.\n *\n * `testMode` gives the drawing area a 600×300 floor so a chart still draws\n * where the layout gives it no size; see {@link ChartContainerProps.testMode}\n * and README.md, \"Charts in tests\".\n */\nfunction Chart<T extends ChartType>({\n  type,\n  data,\n  config,\n  renderer = \"svg\",\n  indexBy,\n  keys,\n  stacked,\n  scale = \"sequential\",\n  legend,\n  grid = true,\n  tooltip = true,\n  labels = \"percent\",\n  valueFormatter,\n  from,\n  to,\n  loading,\n  error,\n  emptyMessage,\n  className,\n  height,\n  ...props\n}: ChartProps<T>) {\n  const engine = chartEngine(type);\n  const empty = isEmptyData(data);\n  const fullConfig = React.useMemo(\n    () => configFor(empty ? [] : seriesKeys(type, data, indexBy, keys), config),\n    [type, data, indexBy, keys, config, empty],\n  );\n  const showLegend = legend ?? Object.keys(fullConfig).length > 1;\n  const errorText = error instanceof Error ? error.message : error;\n\n  let body: React.ReactNode;\n  let responsive = false;\n  if (loading) body = <ChartLoading />;\n  else if (errorText) body = <ChartError>{errorText}</ChartError>;\n  else if (empty) body = <ChartEmpty>{emptyMessage}</ChartEmpty>;\n  else if (engine === \"nivo\") {\n    body = (\n      <ChunkBoundary resetKey={`${type}|${renderer}`} fallback={chunkFallback}>\n        <React.Suspense fallback={<ChartLoading />}>\n          <NivoChartLazy\n            type={type as NivoType}\n            data={data}\n            config={fullConfig}\n            renderer={renderer}\n            scale={scale}\n            legend={showLegend}\n            valueFormatter={valueFormatter}\n            from={from}\n            to={to}\n          />\n        </React.Suspense>\n      </ChunkBoundary>\n    );\n  } else {\n    responsive = true;\n    body = (\n      <ChunkBoundary resetKey={type} fallback={chunkFallback}>\n        <RechartsChartLazy\n          type={type as RechartsType}\n          data={data}\n          config={fullConfig}\n          indexBy={indexBy}\n          keys={keys}\n          stacked={stacked}\n          legend={showLegend}\n          grid={grid}\n          tooltip={tooltip}\n          labels={labels}\n          valueFormatter={valueFormatter}\n        />\n      </ChunkBoundary>\n    );\n  }\n\n  return (\n    <ChartContainer\n      data-type={type}\n      data-engine={engine}\n      data-renderer={engine === \"nivo\" ? renderer : \"svg\"}\n      config={fullConfig}\n      height={height}\n      responsive={responsive}\n      className={cn(className)}\n      {...props}\n    >\n      {body}\n    </ChartContainer>\n  );\n}\n\nexport { Chart };\n"],"mappings":"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"}

package/dist/components/chart/container.d.ts

@@ -0,0 +1,88 @@
+"use client";
+import { ChartConfig } from "./types.js";
+import * as React from "react";
+import { LegendPayload, TooltipContentProps } from "recharts";
+//#region src/components/chart/container.d.ts
+interface ChartContextValue {
+  config: ChartConfig;
+  /** The container element, so token resolution can honour a nested theme scope. */
+  element: HTMLDivElement | null;
+}
+/** The nearest ChartContainer's config and element; null outside one. */
+export declare function useChart(): ChartContextValue | null;
+/**
+ * Resolve the colour a series key paints with: `config[key].color` when set,
+ * otherwise `var(--ds-viz-N)` by the key's position in the config (or the
+ * `index` given). Recharts consumers reference it as `var(--color-<key>)`,
+ * which ChartContainer defines on its element.
+ */
+export declare function seriesColor(config: ChartConfig | undefined, key: string, index?: number): string;
+export interface ChartContainerProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Series presentation; colours default to `--ds-viz-1..n` in key order. */
+  config?: ChartConfig;
+  /** Height of the drawing area; width is always 100% of the parent. Default 300. */
+  height?: number | string;
+  /**
+   * Wrap children in Recharts' ResponsiveContainer (default). Nivo's
+   * `Responsive*` components size themselves, so the Nivo renderers pass
+   * `responsive={false}`.
+   */
+  responsive?: boolean;
+  /**
+   * Give the drawing area a floor of 600×300 so it draws where the layout
+   * gives it none.
+   *
+   * Both engines size themselves from the parent box. Under jsdom nothing has
+   * layout — every element measures 0×0 — so a page test that renders a screen
+   * containing a Chart gets an empty `<div>` and can assert nothing about it.
+   * `testMode` sets `min-width` / `min-height` on the container and hands the
+   * same floor to Recharts' ResponsiveContainer, so the chart draws at
+   * 600×300. It is a floor, not a fixed size: a parent that *does* give the
+   * chart 900px still gets 900px, so a screenshot test is unaffected.
+   */
+  testMode?: boolean;
+  children: React.ReactNode;
+}
+/**
+ * ChartContainer — the sized, token-styled surface every chart draws in.
+ *
+ * It defines `--color-<key>` for each config key (so Recharts parts can say
+ * `fill="var(--color-revenue)"`) and styles Recharts' axis, grid, tick and
+ * cursor classes from tokens with a caption-sm floor for text, so a custom
+ * chart composed inside it needs no local colours or fonts.
+ */
+declare function ChartContainer({ config, height, responsive, testMode, className, style, children, ...props }: ChartContainerProps): React.JSX.Element;
+/** "No data" placeholder; rendered by Chart when the data is empty. */
+declare function ChartEmpty({ children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Error placeholder; rendered by Chart for an `error` prop or a failed Nivo chunk. */
+declare function ChartError({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Loading placeholder: a skeleton the size of the drawing area, shown while a Nivo chunk loads. */
+declare function ChartLoading({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface ChartTooltipContentProps extends Partial<Pick<TooltipContentProps, "active" | "payload" | "label">> {
+  className?: string;
+  /** Hide the series label column. */
+  hideLabel?: boolean;
+  /** Hide the colour swatch. */
+  hideIndicator?: boolean;
+  /** Format a value; defaults to `toLocaleString`. */
+  formatter?: (value: number | string, name: string) => React.ReactNode;
+  /** Format the header (the category). */
+  labelFormatter?: (label: React.ReactNode) => React.ReactNode;
+}
+/**
+ * ChartTooltipContent — the popover body for Recharts' Tooltip, styled like
+ * the package Tooltip on the popover tokens. Pass as `content` to
+ * ChartTooltip; reads series labels and colours from the ChartContainer config.
+ */
+declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, formatter, labelFormatter }: ChartTooltipContentProps): React.JSX.Element | null;
+export interface ChartLegendContentProps {
+  payload?: readonly LegendPayload[];
+  verticalAlign?: "top" | "bottom" | "middle";
+  className?: string;
+  hideIcon?: boolean;
+}
+/** ChartLegendContent — Recharts' legend on tokens; reads labels from the config. */
+declare function ChartLegendContent({ payload, verticalAlign, className, hideIcon }: ChartLegendContentProps): React.JSX.Element | null;
+//#endregion
+export { ChartContainer, ChartEmpty, ChartError, ChartLegendContent, ChartLoading, ChartTooltipContent };
+//# sourceMappingURL=container.d.ts.map

package/dist/components/chart/container.js

@@ -0,0 +1,189 @@
+"use client";
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../skeleton.js";
+import { RechartsResponsive } from "./recharts-lazy.js";
+import { vizVar } from "./tokens.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/chart/container.tsx
+const ChartContext = /* @__PURE__ */ React.createContext(null);
+/** The nearest ChartContainer's config and element; null outside one. */
+function useChart() {
+	return React.useContext(ChartContext);
+}
+/**
+* Resolve the colour a series key paints with: `config[key].color` when set,
+* otherwise `var(--ds-viz-N)` by the key's position in the config (or the
+* `index` given). Recharts consumers reference it as `var(--color-<key>)`,
+* which ChartContainer defines on its element.
+*/
+function seriesColor(config, key, index) {
+	const entry = config?.[key];
+	if (entry?.color) return entry.color;
+	const position = (config ? Object.keys(config) : []).indexOf(key);
+	return vizVar(position >= 0 ? position : index ?? 0);
+}
+/** The box `testMode` falls back to when the layout gives the chart none. */
+const TEST_WIDTH = 600;
+const TEST_HEIGHT = 300;
+/**
+* ChartContainer — the sized, token-styled surface every chart draws in.
+*
+* It defines `--color-<key>` for each config key (so Recharts parts can say
+* `fill="var(--color-revenue)"`) and styles Recharts' axis, grid, tick and
+* cursor classes from tokens with a caption-sm floor for text, so a custom
+* chart composed inside it needs no local colours or fonts.
+*/
+function ChartContainer({ config = {}, height = 300, responsive = true, testMode = false, className, style, children, ...props }) {
+	const [element, setElement] = React.useState(null);
+	const vars = React.useMemo(() => {
+		const out = {};
+		for (const key of Object.keys(config)) out[`--color-${key}`] = seriesColor(config, key);
+		return out;
+	}, [config]);
+	const ctx = React.useMemo(() => ({
+		config,
+		element
+	}), [config, element]);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setElement,
+			"data-slot": "chart",
+			"data-test-mode": testMode ? "" : void 0,
+			className: cn("relative w-full min-w-0 overflow-hidden text-[length:var(--ds-text-caption-sm)] text-[color:var(--ds-foreground)]", responsive ? "flex justify-center" : "block [&>div]:h-full [&>div]:w-full", "[&_.recharts-cartesian-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-polar-angle-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-polar-radius-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-cartesian-grid-horizontal_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-cartesian-grid-vertical_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-angle_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-concentric-polygon]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-concentric-circle]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-cartesian-axis-line]:stroke-[var(--ds-border)]", "[&_.recharts-cartesian-axis-tick-line]:stroke-[var(--ds-border)]", "[&_.recharts-radial-bar-background-sector]:fill-[var(--ds-muted)]", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--ds-hover)]", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--ds-border-strong)]", "[&_.recharts-reference-line_line]:stroke-[var(--ds-border-strong)]", "[&_.recharts-pie-sector_.recharts-sector]:stroke-[var(--ds-card)]", "[&_.recharts-funnel-trapezoid_.recharts-trapezoid]:stroke-[var(--ds-card)]", "[&_.recharts-layer]:outline-hidden [&_.recharts-surface]:outline-hidden [&_.recharts-sector]:outline-hidden", "[&_text]:font-[family-name:var(--ds-font-body)]", className),
+			style: {
+				height,
+				...testMode ? {
+					minWidth: TEST_WIDTH,
+					minHeight: TEST_HEIGHT
+				} : null,
+				...vars,
+				...style
+			},
+			...props,
+			children: responsive ? /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: /* @__PURE__ */ jsx(ChartLoading, {}),
+				children: /* @__PURE__ */ jsx(RechartsResponsive, {
+					width: "100%",
+					height: "100%",
+					minWidth: testMode ? TEST_WIDTH : void 0,
+					minHeight: testMode ? TEST_HEIGHT : void 0,
+					children
+				})
+			}) : children
+		})
+	});
+}
+function ChartState({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full w-full items-center justify-center rounded-[var(--ds-radius-md)] border border-dashed border-[var(--ds-border-subtle)]", "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+/** "No data" placeholder; rendered by Chart when the data is empty. */
+function ChartEmpty({ children = "No data", ...props }) {
+	return /* @__PURE__ */ jsx(ChartState, {
+		"data-slot": "chart-empty",
+		role: "status",
+		...props,
+		children
+	});
+}
+/** Error placeholder; rendered by Chart for an `error` prop or a failed Nivo chunk. */
+function ChartError({ className, children = "Chart could not be rendered", ...props }) {
+	return /* @__PURE__ */ jsx(ChartState, {
+		"data-slot": "chart-error",
+		role: "alert",
+		className: cn("border-[var(--ds-destructive)] text-[color:var(--ds-destructive)]", className),
+		...props,
+		children
+	});
+}
+/** Loading placeholder: a skeleton the size of the drawing area, shown while a Nivo chunk loads. */
+function ChartLoading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-loading",
+		className: cn("h-full w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-[var(--ds-radius-md)]" })
+	});
+}
+function formatValue(value, formatter, name = "") {
+	if (formatter && (typeof value === "number" || typeof value === "string")) return formatter(value, name);
+	if (typeof value === "number") return value.toLocaleString();
+	if (value == null) return "";
+	return String(value);
+}
+/**
+* ChartTooltipContent — the popover body for Recharts' Tooltip, styled like
+* the package Tooltip on the popover tokens. Pass as `content` to
+* ChartTooltip; reads series labels and colours from the ChartContainer config.
+*/
+function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, formatter, labelFormatter }) {
+	const chart = useChart();
+	if (!active || !payload?.length) return null;
+	const heading = labelFormatter ? labelFormatter(label) : label;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-tooltip",
+		className: cn("grid min-w-32 gap-1.5 rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-popover)] px-2.5 py-1.5", "text-[length:var(--ds-text-caption)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-md)]", className),
+		children: [!hideLabel && heading != null && heading !== "" ? /* @__PURE__ */ jsx("div", {
+			className: "font-medium",
+			children: heading
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1",
+			children: payload.map((item, i) => {
+				const key = String(item.dataKey ?? item.name ?? i);
+				const entry = chart?.config[key];
+				const colour = item.color ?? item.fill ?? item.stroke ?? `var(--color-${key})`;
+				const name = entry?.label ?? item.name ?? key;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						hideIndicator ? null : /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							"data-slot": "chart-tooltip-indicator",
+							className: "size-2 shrink-0 rounded-[var(--ds-radius-sm)]",
+							style: { background: colour }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 text-[color:var(--ds-muted-foreground)]",
+							children: name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-[family-name:var(--ds-font-mono)] font-medium tabular-nums",
+							children: formatValue(item.value, formatter, String(name))
+						})
+					]
+				}, key);
+			})
+		})]
+	});
+}
+/** ChartLegendContent — Recharts' legend on tokens; reads labels from the config. */
+function ChartLegendContent({ payload, verticalAlign = "bottom", className, hideIcon }) {
+	const chart = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-legend",
+		className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1", "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.map((item, i) => {
+			const key = String(item.dataKey ?? item.value ?? i);
+			const entry = chart?.config[key];
+			const Icon = entry?.icon;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [hideIcon ? null : Icon ? /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-2 shrink-0 rounded-[var(--ds-radius-sm)]",
+					style: { background: item.color ?? `var(--color-${key})` }
+				}), entry?.label ?? item.value]
+			}, key);
+		})
+	});
+}
+//#endregion
+export { ChartContainer, ChartContext, ChartEmpty, ChartError, ChartLegendContent, ChartLoading, ChartTooltipContent, seriesColor, useChart };
+
+//# sourceMappingURL=container.js.map

package/dist/components/chart/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/components/chart/container.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n// Types only. The two Recharts *values* this file used to reach for — `Tooltip`\n// and `Legend` — are in `recharts-parts.tsx`, so that nothing on the eager path\n// imports the engine; see the note there.\nimport type { LegendPayload, TooltipContentProps } from \"recharts\";\nimport { RechartsResponsive } from \"./recharts-lazy\";\nimport { cn } from \"@/lib/cn\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { vizVar } from \"./tokens\";\nimport type { ChartConfig } from \"./types\";\n\n/* ── context ─────────────────────────────────────────────────────────────── */\n\ninterface ChartContextValue {\n  config: ChartConfig;\n  /** The container element, so token resolution can honour a nested theme scope. */\n  element: HTMLDivElement | null;\n}\n\nconst ChartContext = /* @__PURE__ */ React.createContext<ChartContextValue | null>(null);\n\n/** The nearest ChartContainer's config and element; null outside one. */\nexport function useChart(): ChartContextValue | null {\n  return React.useContext(ChartContext);\n}\n\n/**\n * Resolve the colour a series key paints with: `config[key].color` when set,\n * otherwise `var(--ds-viz-N)` by the key's position in the config (or the\n * `index` given). Recharts consumers reference it as `var(--color-<key>)`,\n * which ChartContainer defines on its element.\n */\nexport function seriesColor(config: ChartConfig | undefined, key: string, index?: number): string {\n  const entry = config?.[key];\n  if (entry?.color) return entry.color;\n  const keys = config ? Object.keys(config) : [];\n  const position = keys.indexOf(key);\n  return vizVar(position >= 0 ? position : (index ?? 0));\n}\n\n/* ── container ───────────────────────────────────────────────────────────── */\n\nexport interface ChartContainerProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** Series presentation; colours default to `--ds-viz-1..n` in key order. */\n  config?: ChartConfig;\n  /** Height of the drawing area; width is always 100% of the parent. Default 300. */\n  height?: number | string;\n  /**\n   * Wrap children in Recharts' ResponsiveContainer (default). Nivo's\n   * `Responsive*` components size themselves, so the Nivo renderers pass\n   * `responsive={false}`.\n   */\n  responsive?: boolean;\n  /**\n   * Give the drawing area a floor of 600×300 so it draws where the layout\n   * gives it none.\n   *\n   * Both engines size themselves from the parent box. Under jsdom nothing has\n   * layout — every element measures 0×0 — so a page test that renders a screen\n   * containing a Chart gets an empty `<div>` and can assert nothing about it.\n   * `testMode` sets `min-width` / `min-height` on the container and hands the\n   * same floor to Recharts' ResponsiveContainer, so the chart draws at\n   * 600×300. It is a floor, not a fixed size: a parent that *does* give the\n   * chart 900px still gets 900px, so a screenshot test is unaffected.\n   */\n  testMode?: boolean;\n  children: React.ReactNode;\n}\n\n/** The box `testMode` falls back to when the layout gives the chart none. */\nconst TEST_WIDTH = 600;\nconst TEST_HEIGHT = 300;\n\n/**\n * ChartContainer — the sized, token-styled surface every chart draws in.\n *\n * It defines `--color-<key>` for each config key (so Recharts parts can say\n * `fill=\"var(--color-revenue)\"`) and styles Recharts' axis, grid, tick and\n * cursor classes from tokens with a caption-sm floor for text, so a custom\n * chart composed inside it needs no local colours or fonts.\n */\nfunction ChartContainer({\n  config = {},\n  height = 300,\n  responsive = true,\n  testMode = false,\n  className,\n  style,\n  children,\n  ...props\n}: ChartContainerProps) {\n  const [element, setElement] = React.useState<HTMLDivElement | null>(null);\n  const vars = React.useMemo(() => {\n    const out: Record<string, string> = {};\n    for (const key of Object.keys(config)) out[`--color-${key}`] = seriesColor(config, key);\n    return out;\n  }, [config]);\n  const ctx = React.useMemo(() => ({ config, element }), [config, element]);\n\n  return (\n    <ChartContext.Provider value={ctx}>\n      <div\n        ref={setElement}\n        data-slot=\"chart\"\n        data-test-mode={testMode ? \"\" : undefined}\n        className={cn(\n          \"relative w-full min-w-0 overflow-hidden text-[length:var(--ds-text-caption-sm)] text-[color:var(--ds-foreground)]\",\n          responsive ? \"flex justify-center\" : \"block [&>div]:h-full [&>div]:w-full\",\n          \"[&_.recharts-cartesian-axis-tick-value]:fill-[var(--ds-muted-foreground)]\",\n          \"[&_.recharts-polar-angle-axis-tick-value]:fill-[var(--ds-muted-foreground)]\",\n          \"[&_.recharts-polar-radius-axis-tick-value]:fill-[var(--ds-muted-foreground)]\",\n          \"[&_.recharts-cartesian-grid-horizontal_line]:stroke-[var(--ds-border-subtle)]\",\n          \"[&_.recharts-cartesian-grid-vertical_line]:stroke-[var(--ds-border-subtle)]\",\n          \"[&_.recharts-polar-grid-angle_line]:stroke-[var(--ds-border-subtle)]\",\n          \"[&_.recharts-polar-grid-concentric-polygon]:stroke-[var(--ds-border-subtle)]\",\n          \"[&_.recharts-polar-grid-concentric-circle]:stroke-[var(--ds-border-subtle)]\",\n          \"[&_.recharts-cartesian-axis-line]:stroke-[var(--ds-border)]\",\n          \"[&_.recharts-cartesian-axis-tick-line]:stroke-[var(--ds-border)]\",\n          \"[&_.recharts-radial-bar-background-sector]:fill-[var(--ds-muted)]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--ds-hover)]\",\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--ds-border-strong)]\",\n          \"[&_.recharts-reference-line_line]:stroke-[var(--ds-border-strong)]\",\n          \"[&_.recharts-pie-sector_.recharts-sector]:stroke-[var(--ds-card)]\",\n          \"[&_.recharts-funnel-trapezoid_.recharts-trapezoid]:stroke-[var(--ds-card)]\",\n          \"[&_.recharts-layer]:outline-hidden [&_.recharts-surface]:outline-hidden [&_.recharts-sector]:outline-hidden\",\n          \"[&_text]:font-[family-name:var(--ds-font-body)]\",\n          className,\n        )}\n        style={\n          {\n            height,\n            ...(testMode ? { minWidth: TEST_WIDTH, minHeight: TEST_HEIGHT } : null),\n            ...vars,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {responsive ? (\n          // Recharts' ResponsiveContainer arrives with the engine chunk, so\n          // this suspends on the first chart drawn on the page — and so does\n          // whatever it wraps, which is why the skeleton lives here rather than\n          // in `Chart`: this is the innermost boundary, so it is the one that\n          // catches. A `ChartContainer` used directly, to compose a one-off\n          // Recharts chart, gets the same treatment and needs no boundary of\n          // its own.\n          <React.Suspense fallback={<ChartLoading />}>\n            <RechartsResponsive\n              width=\"100%\"\n              height=\"100%\"\n              minWidth={testMode ? TEST_WIDTH : undefined}\n              minHeight={testMode ? TEST_HEIGHT : undefined}\n            >\n              {children as React.ReactElement}\n            </RechartsResponsive>\n          </React.Suspense>\n        ) : (\n          children\n        )}\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/* ── states ──────────────────────────────────────────────────────────────── */\n\nfunction ChartState({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full items-center justify-center rounded-[var(--ds-radius-md)] border border-dashed border-[var(--ds-border-subtle)]\",\n        \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"No data\" placeholder; rendered by Chart when the data is empty. */\nfunction ChartEmpty({ children = \"No data\", ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <ChartState data-slot=\"chart-empty\" role=\"status\" {...props}>\n      {children}\n    </ChartState>\n  );\n}\n\n/** Error placeholder; rendered by Chart for an `error` prop or a failed Nivo chunk. */\nfunction ChartError({ className, children = \"Chart could not be rendered\", ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <ChartState\n      data-slot=\"chart-error\"\n      role=\"alert\"\n      className={cn(\"border-[var(--ds-destructive)] text-[color:var(--ds-destructive)]\", className)}\n      {...props}\n    >\n      {children}\n    </ChartState>\n  );\n}\n\n/** Loading placeholder: a skeleton the size of the drawing area, shown while a Nivo chunk loads. */\nfunction ChartLoading({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"chart-loading\" className={cn(\"h-full w-full\", className)} {...props}>\n      <Skeleton className=\"h-full w-full rounded-[var(--ds-radius-md)]\" />\n    </div>\n  );\n}\n\n/* ── tooltip ─────────────────────────────────────────────────────────────── */\n\nexport interface ChartTooltipContentProps\n  extends Partial<Pick<TooltipContentProps, \"active\" | \"payload\" | \"label\">> {\n  className?: string;\n  /** Hide the series label column. */\n  hideLabel?: boolean;\n  /** Hide the colour swatch. */\n  hideIndicator?: boolean;\n  /** Format a value; defaults to `toLocaleString`. */\n  formatter?: (value: number | string, name: string) => React.ReactNode;\n  /** Format the header (the category). */\n  labelFormatter?: (label: React.ReactNode) => React.ReactNode;\n}\n\nfunction formatValue(value: unknown, formatter?: ChartTooltipContentProps[\"formatter\"], name = \"\"): React.ReactNode {\n  if (formatter && (typeof value === \"number\" || typeof value === \"string\")) return formatter(value, name);\n  if (typeof value === \"number\") return value.toLocaleString();\n  if (value == null) return \"\";\n  return String(value);\n}\n\n/**\n * ChartTooltipContent — the popover body for Recharts' Tooltip, styled like\n * the package Tooltip on the popover tokens. Pass as `content` to\n * ChartTooltip; reads series labels and colours from the ChartContainer config.\n */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  label,\n  className,\n  hideLabel,\n  hideIndicator,\n  formatter,\n  labelFormatter,\n}: ChartTooltipContentProps) {\n  const chart = useChart();\n  if (!active || !payload?.length) return null;\n  const heading = labelFormatter ? labelFormatter(label) : label;\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(\n        \"grid min-w-32 gap-1.5 rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-popover)] px-2.5 py-1.5\",\n        \"text-[length:var(--ds-text-caption)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-md)]\",\n        className,\n      )}\n    >\n      {!hideLabel && heading != null && heading !== \"\" ? (\n        <div className=\"font-medium\">{heading}</div>\n      ) : null}\n      <div className=\"grid gap-1\">\n        {payload.map((item, i) => {\n          const key = String(item.dataKey ?? item.name ?? i);\n          const entry = chart?.config[key];\n          const colour = item.color ?? item.fill ?? item.stroke ?? `var(--color-${key})`;\n          const name = entry?.label ?? item.name ?? key;\n          return (\n            <div key={key} className=\"flex items-center gap-2\">\n              {hideIndicator ? null : (\n                <span\n                  aria-hidden\n                  data-slot=\"chart-tooltip-indicator\"\n                  className=\"size-2 shrink-0 rounded-[var(--ds-radius-sm)]\"\n                  style={{ background: colour }}\n                />\n              )}\n              <span className=\"flex-1 text-[color:var(--ds-muted-foreground)]\">{name}</span>\n              <span className=\"font-[family-name:var(--ds-font-mono)] font-medium tabular-nums\">\n                {formatValue(item.value, formatter, String(name))}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/* ── legend ──────────────────────────────────────────────────────────────── */\n\nexport interface ChartLegendContentProps {\n  payload?: readonly LegendPayload[];\n  verticalAlign?: \"top\" | \"bottom\" | \"middle\";\n  className?: string;\n  hideIcon?: boolean;\n}\n\n/** ChartLegendContent — Recharts' legend on tokens; reads labels from the config. */\nfunction ChartLegendContent({ payload, verticalAlign = \"bottom\", className, hideIcon }: ChartLegendContentProps) {\n  const chart = useChart();\n  if (!payload?.length) return null;\n  return (\n    <div\n      data-slot=\"chart-legend\"\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-x-4 gap-y-1\",\n        \"text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload.map((item, i) => {\n        const key = String(item.dataKey ?? item.value ?? i);\n        const entry = chart?.config[key];\n        const Icon = entry?.icon;\n        return (\n          <div key={key} className=\"flex items-center gap-1.5\">\n            {hideIcon ? null : Icon ? (\n              <Icon />\n            ) : (\n              <span\n                aria-hidden\n                className=\"size-2 shrink-0 rounded-[var(--ds-radius-sm)]\"\n                style={{ background: item.color ?? `var(--color-${key})` }}\n              />\n            )}\n            {entry?.label ?? item.value}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { ChartContainer, ChartContext, ChartEmpty, ChartError, ChartLoading, ChartTooltipContent, ChartLegendContent };\n"],"mappings":";;;;;;;;;AAqBA,MAAM,eAA+B,sBAAM,cAAwC,IAAI;;AAGvF,SAAgB,WAAqC;CACnD,OAAO,MAAM,WAAW,YAAY;AACtC;;;;;;;AAQA,SAAgB,YAAY,QAAiC,KAAa,OAAwB;CAChG,MAAM,QAAQ,SAAS;CACvB,IAAI,OAAO,OAAO,OAAO,MAAM;CAE/B,MAAM,YADO,SAAS,OAAO,KAAK,MAAM,IAAI,CAAC,EAAA,CACvB,QAAQ,GAAG;CACjC,OAAO,OAAO,YAAY,IAAI,WAAY,SAAS,CAAE;AACvD;;AAgCA,MAAM,aAAa;AACnB,MAAM,cAAc;;;;;;;;;AAUpB,SAAS,eAAe,EACtB,SAAS,CAAC,GACV,SAAS,KACT,aAAa,MACb,WAAW,OACX,WACA,OACA,UACA,GAAG,SACmB;CACtB,MAAM,CAAC,SAAS,cAAc,MAAM,SAAgC,IAAI;CACxE,MAAM,OAAO,MAAM,cAAc;EAC/B,MAAM,MAA8B,CAAC;EACrC,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAAG,IAAI,WAAW,SAAS,YAAY,QAAQ,GAAG;EACtF,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,MAAM,MAAM,eAAe;EAAE;EAAQ;CAAQ,IAAI,CAAC,QAAQ,OAAO,CAAC;CAExE,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,OAAD;GACE,KAAK;GACL,aAAU;GACV,kBAAgB,WAAW,KAAK,KAAA;GAChC,WAAW,GACT,qHACA,aAAa,wBAAwB,uCACrC,6EACA,+EACA,gFACA,iFACA,+EACA,wEACA,gFACA,+EACA,+DACA,oEACA,qEACA,0EACA,gFACA,sEACA,qEACA,8EACA,+GACA,mDACA,SACF;GACA,OACE;IACE;IACA,GAAI,WAAW;KAAE,UAAU;KAAY,WAAW;IAAY,IAAI;IAClE,GAAG;IACH,GAAG;GACL;GAEF,GAAI;GAEH,UAAA,aAQC,oBAAC,MAAM,UAAP;IAAgB,UAAU,oBAAC,cAAD,CAAe,CAAA;IACvC,UAAA,oBAAC,oBAAD;KACE,OAAM;KACN,QAAO;KACP,UAAU,WAAW,aAAa,KAAA;KAClC,WAAW,WAAW,cAAc,KAAA;KAEnC;IACiB,CAAA;GACN,CAAA,IAEhB;EAEC,CAAA;CACgB,CAAA;AAE3B;AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,sIACA,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,WAAW,GAAG,SAAsC;CACnF,OACE,oBAAC,YAAD;EAAY,aAAU;EAAc,MAAK;EAAS,GAAI;EACnD;CACS,CAAA;AAEhB;;AAGA,SAAS,WAAW,EAAE,WAAW,WAAW,+BAA+B,GAAG,SAAsC;CAClH,OACE,oBAAC,YAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;EAEH;CACS,CAAA;AAEhB;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,iBAAiB,SAAS;EAAG,GAAI;EAC5E,UAAA,oBAAC,UAAD,EAAU,WAAU,8CAA+C,CAAA;CAChE,CAAA;AAET;AAiBA,SAAS,YAAY,OAAgB,WAAmD,OAAO,IAAqB;CAClH,IAAI,cAAc,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,UAAU,OAAO,IAAI;CACvG,IAAI,OAAO,UAAU,UAAU,OAAO,MAAM,eAAe;CAC3D,IAAI,SAAS,MAAM,OAAO;CAC1B,OAAO,OAAO,KAAK;AACrB;;;;;;AAOA,SAAS,oBAAoB,EAC3B,QACA,SACA,OACA,WACA,WACA,eACA,WACA,kBAC2B;CAC3B,MAAM,QAAQ,SAAS;CACvB,IAAI,CAAC,UAAU,CAAC,SAAS,QAAQ,OAAO;CACxC,MAAM,UAAU,iBAAiB,eAAe,KAAK,IAAI;CACzD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oIACA,+GACA,SACF;EANF,UAAA,CAQG,CAAC,aAAa,WAAW,QAAQ,YAAY,KAC5C,oBAAC,OAAD;GAAK,WAAU;GAAe,UAAA;EAAa,CAAA,IACzC,MACJ,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,QAAQ,KAAK,MAAM,MAAM;IACxB,MAAM,MAAM,OAAO,KAAK,WAAW,KAAK,QAAQ,CAAC;IACjD,MAAM,QAAQ,OAAO,OAAO;IAC5B,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,eAAe,IAAI;IAC5E,MAAM,OAAO,OAAO,SAAS,KAAK,QAAQ;IAC1C,OACE,qBAAC,OAAD;KAAe,WAAU;KAAzB,UAAA;MACG,gBAAgB,OACf,oBAAC,QAAD;OACE,eAAA;OACA,aAAU;OACV,WAAU;OACV,OAAO,EAAE,YAAY,OAAO;MAC7B,CAAA;MAEH,oBAAC,QAAD;OAAM,WAAU;OAAkD,UAAA;MAAW,CAAA;MAC7E,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,YAAY,KAAK,OAAO,WAAW,OAAO,IAAI,CAAC;MAC5C,CAAA;KACH;IAbK,GAAA,GAaL;GAET,CAAC;EACE,CAAA,CACF;;AAET;;AAYA,SAAS,mBAAmB,EAAE,SAAS,gBAAgB,UAAU,WAAW,YAAqC;CAC/G,MAAM,QAAQ,SAAS;CACvB,IAAI,CAAC,SAAS,QAAQ,OAAO;CAC7B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8DACA,gFACA,kBAAkB,QAAQ,SAAS,QACnC,SACF;EAEC,UAAA,QAAQ,KAAK,MAAM,MAAM;GACxB,MAAM,MAAM,OAAO,KAAK,WAAW,KAAK,SAAS,CAAC;GAClD,MAAM,QAAQ,OAAO,OAAO;GAC5B,MAAM,OAAO,OAAO;GACpB,OACE,qBAAC,OAAD;IAAe,WAAU;IAAzB,UAAA,CACG,WAAW,OAAO,OACjB,oBAAC,MAAD,CAAO,CAAA,IAEP,oBAAC,QAAD;KACE,eAAA;KACA,WAAU;KACV,OAAO,EAAE,YAAY,KAAK,SAAS,eAAe,IAAI,GAAG;IAC1D,CAAA,GAEF,OAAO,SAAS,KAAK,KACnB;GAXK,GAAA,GAWL;EAET,CAAC;CACE,CAAA;AAET"}