wimui 0.27.0 → 0.29.0

package/dist/charts.cjs

@@ -1,2 +1,2 @@
 "use client";
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/charts/AreaChart/AreaChart.cjs"),t=require("./components/charts/BarChart/BarChart.cjs"),n=require("./components/charts/FunnelChart/FunnelChart.cjs"),r=require("./components/charts/GanttChart/GanttChart.cjs"),i=require("./components/charts/GaugeChart/GaugeChart.cjs"),a=require("./components/charts/Heatmap/Heatmap.cjs"),o=require("./components/charts/LineChart/LineChart.cjs"),s=require("./components/charts/PieChart/PieChart.cjs"),c=require("./components/charts/RadarChart/RadarChart.cjs"),l=require("./components/charts/ScatterChart/ScatterChart.cjs"),u=require("./components/charts/Treemap/Treemap.cjs"),d=require("./components/charts/Sparkline/Sparkline.cjs");exports.AreaChart=e.AreaChart,exports.BarChart=t.BarChart,exports.FunnelChart=n.FunnelChart,exports.GanttChart=r.GanttChart,exports.GaugeChart=i.GaugeChart,exports.Heatmap=a.Heatmap,exports.LineChart=o.LineChart,exports.PieChart=s.PieChart,exports.RadarChart=c.RadarChart,exports.ScatterChart=l.ScatterChart,exports.Sparkline=d.Sparkline,exports.Treemap=u.Treemap;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/charts/AreaChart/AreaChart.cjs"),t=require("./components/charts/BarChart/BarChart.cjs"),n=require("./components/charts/FunnelChart/FunnelChart.cjs"),r=require("./components/charts/GanttChart/GanttChart.cjs"),i=require("./components/charts/GaugeChart/GaugeChart.cjs"),a=require("./components/charts/Heatmap/Heatmap.cjs"),o=require("./components/charts/LineChart/LineChart.cjs"),s=require("./components/charts/PieChart/PieChart.cjs"),c=require("./components/charts/RadarChart/RadarChart.cjs"),l=require("./components/charts/ScatterChart/ScatterChart.cjs"),u=require("./components/charts/Treemap/Treemap.cjs"),d=require("./components/charts/Sparkline/Sparkline.cjs"),f=require("./components/charts/SankeyChart/SankeyChart.cjs"),p=require("./components/charts/WaterfallChart/WaterfallChart.cjs"),m=require("./components/charts/BoxPlot/BoxPlot.cjs"),h=require("./components/charts/CandlestickChart/CandlestickChart.cjs");exports.AreaChart=e.AreaChart,exports.BarChart=t.BarChart,exports.BoxPlot=m.BoxPlot,exports.CandlestickChart=h.CandlestickChart,exports.FunnelChart=n.FunnelChart,exports.GanttChart=r.GanttChart,exports.GaugeChart=i.GaugeChart,exports.Heatmap=a.Heatmap,exports.LineChart=o.LineChart,exports.PieChart=s.PieChart,exports.RadarChart=c.RadarChart,exports.SankeyChart=f.SankeyChart,exports.ScatterChart=l.ScatterChart,exports.Sparkline=d.Sparkline,exports.Treemap=u.Treemap,exports.WaterfallChart=p.WaterfallChart;

package/dist/charts.d.ts

@@ -11,3 +11,7 @@ export * from './components/charts/RadarChart/RadarChart';
 export * from './components/charts/ScatterChart/ScatterChart';
 export * from './components/charts/Treemap/Treemap';
 export * from './components/charts/Sparkline/Sparkline';
+export * from './components/charts/SankeyChart/SankeyChart';
+export * from './components/charts/WaterfallChart/WaterfallChart';
+export * from './components/charts/BoxPlot/BoxPlot';
+export * from './components/charts/CandlestickChart/CandlestickChart';

package/dist/charts.js

@@ -11,4 +11,8 @@ import { RadarChart as c } from "./components/charts/RadarChart/RadarChart.js";
 import { ScatterChart as l } from "./components/charts/ScatterChart/ScatterChart.js";
 import { Treemap as u } from "./components/charts/Treemap/Treemap.js";
 import { Sparkline as d } from "./components/charts/Sparkline/Sparkline.js";
-export { e as AreaChart, t as BarChart, n as FunnelChart, r as GanttChart, i as GaugeChart, a as Heatmap, o as LineChart, s as PieChart, c as RadarChart, l as ScatterChart, d as Sparkline, u as Treemap };
+import { SankeyChart as f } from "./components/charts/SankeyChart/SankeyChart.js";
+import { WaterfallChart as p } from "./components/charts/WaterfallChart/WaterfallChart.js";
+import { BoxPlot as m } from "./components/charts/BoxPlot/BoxPlot.js";
+import { CandlestickChart as h } from "./components/charts/CandlestickChart/CandlestickChart.js";
+export { e as AreaChart, t as BarChart, m as BoxPlot, h as CandlestickChart, n as FunnelChart, r as GanttChart, i as GaugeChart, a as Heatmap, o as LineChart, s as PieChart, c as RadarChart, f as SankeyChart, l as ScatterChart, d as Sparkline, u as Treemap, p as WaterfallChart };

package/dist/components/_internal/barSpan.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=(e,t,n)=>{let[r,i]=t,a=i-r;return a===0?n.y:n.y+(i-e)/a*n.height},t=e=>typeof e==`number`&&Number.isFinite(e),n=(e,n=.06)=>{let r=(e??[]).flat().filter(e=>t(e));if(r.length===0)return;let i=Math.min(...r),a=Math.max(...r),o=a-i,s=o>0?o*n:Math.max(Math.abs(a)*n,1),c=10**(Math.floor(Math.log10(o>0?o:Math.abs(a)||1))-1),l=Math.max(0,-Math.floor(Math.log10(c))),u=(e,t)=>Number(((t<0?Math.floor(e/c):Math.ceil(e/c))*c).toFixed(l)),d=u(i-s,-1),f=u(a+s,1);return[i>=0&&d<0?0:d,f]};exports.isFiniteNumber=t,exports.spanDomain=n,exports.spanPixel=e;

package/dist/components/_internal/barSpan.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 「1 本の `<Bar>` ＋ 配列 `dataKey` ＋ カスタム shape」で描くチャートの共有部分
+ * （`WaterfallChart` / `BoxPlot` / `CandlestickChart`）。
+ *
+ * ── なぜ `<Bar>` を 2 本重ねないのか ────────────────────────────────────
+ * ヒゲと実体を別々の `<Bar>` にすると、**recharts がカテゴリ帯の中で横に並べる**ので
+ * 中心が揃わない（実測: 104 と 116 で 12px ずれた）。1 本にしてカスタム shape の中で
+ * 描き分けると一致する（実測: どちらも cx 112.5）。
+ *
+ * ── shape に `yAxis.scale` は渡ってこない ──────────────────────────────
+ * それに頼った版は矩形が 0 個だった。**そして必要ない** ── recharts は
+ * `dataKey` が `[lo, hi]` を返すと `y = scale(hi)` / `height = scale(lo) - scale(hi)`
+ * の**画素の矩形**をくれる（`recharts/es6/cartesian/Bar.js` の horizontal 分岐）。
+ * その矩形の中で値を比で置けば、軸の目盛りと必ず一致する。
+ */
+/** `dataKey` が返す形。**昇順で渡すこと** ── 逆にすると `height` が負になる。 */
+export type BarSpan = [low: number, high: number];
+export type SpanRect = {
+    /** `high` 側の画素。矩形の上端。 */
+    y: number;
+    /** `high` から `low` までの画素の高さ。 */
+    height: number;
+};
+/**
+ * 値 → 画素。矩形が覆う値域 `[low, high]` の中で比を取る。
+ *
+ * `high === low`（幅の無い span）のときは矩形の高さが 0 なので、比は取れない。
+ * その場合は上端を返す ── 呼び出し側は線として描く。
+ */
+export declare const spanPixel: (value: number, span: BarSpan, rect: SpanRect) => number;
+/**
+ * 数として扱えるか。`null` / `undefined` / `NaN` を「0」に読み替えない
+ * ── 欠測を 0 として描くと、**無かった値が「ゼロだった」という主張**になる。
+ */
+export declare const isFiniteNumber: (value: unknown) => value is number;
+/**
+ * 値域に合わせた軸の domain（上下に少しだけ余白を足し、切りのいい数に丸める）。
+ *
+ * **分布や四本値に 0 起点の軸を使わない。** 棒の長さは 0 からの量そのものなので
+ * 0 を含めないと嘘になるが、箱ヒゲやローソク足が語るのは**値域の中の位置**で、
+ * 0 を入れると図の大半が空白になって形が潰れる。
+ *
+ * 余白が要るのは、`dataMin` をそのまま使うと**いちばん低いヒゲが軸線に乗る**ため
+ * （実測: `CandlestickChart` の Wed のヒゲが下端の格子線と同じ y=265 になった）。
+ *
+ * ── 3 つとも実測から出た条件 ──────────────────────────────────────────
+ * 1. **recharts の関数 domain（`[(dataMin) => …, (dataMax) => …]`）では書けない。**
+ *    片側ずつしか呼ばれないので、関数の中から値幅が見えない ── 最初にそう書いて、
+ *    両側とも「値幅 0」の分岐に落ちていた。
+ * 2. **端を丸めないと、その数がそのまま目盛りに出る。**（実測: 軸に
+ *    `-11.399999999999999` と描かれた。余白は生の掛け算なので当然そうなる。）
+ * 3. **正の値しか無いデータに負の目盛りを作らない。**（実測: 応答時間の軸が
+ *    `-113` から始まった。ミリ秒に負は無い。）ただし丸めた下端が正なら
+ *    そのまま使う ── ここで 0 に寄せると、値が 0 から遠いデータ（給与など）で
+ *    図の下半分が空になって箱が潰れる。
+ *
+ * 空の data では domain を決められないので `undefined` を返す（recharts の既定に
+ * 任せる）── 0 と 1 を勝手に置くと、**データが無いのに軸だけが在る**図になる。
+ */
+export declare const spanDomain: (spans: BarSpan[], ratio?: number) => [number, number] | undefined;

package/dist/components/_internal/barSpan.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/_internal/barSpan.ts
+var e = (e, t, n) => {
+	let [r, i] = t, a = i - r;
+	return a === 0 ? n.y : n.y + (i - e) / a * n.height;
+}, t = (e) => typeof e == "number" && Number.isFinite(e), n = (e, n = .06) => {
+	let r = (e ?? []).flat().filter((e) => t(e));
+	if (r.length === 0) return;
+	let i = Math.min(...r), a = Math.max(...r), o = a - i, s = o > 0 ? o * n : Math.max(Math.abs(a) * n, 1), c = 10 ** (Math.floor(Math.log10(o > 0 ? o : Math.abs(a) || 1)) - 1), l = Math.max(0, -Math.floor(Math.log10(c))), u = (e, t) => Number(((t < 0 ? Math.floor(e / c) : Math.ceil(e / c)) * c).toFixed(l)), d = u(i - s, -1), f = u(a + s, 1);
+	return [i >= 0 && d < 0 ? 0 : d, f];
+};
+//#endregion
+export { t as isFiniteNumber, n as spanDomain, e as spanPixel };

package/dist/components/_internal/chartTableData.d.ts

@@ -51,3 +51,58 @@ export declare const pointTable: (data: {
     z?: number;
     name: string;
 }[], xLabel: string, yLabel: string, zLabel: string) => ChartTable;
+/**
+ * 流れ型: 1 行が 1 本の流れ（どこから・どこへ・いくつ）。`SankeyChart` がこれ。
+ *
+ * **ノードの一覧は出さない。** 描かれているのは流れで、ノードはその端点だから
+ * ── 端点は from / to の列にすべて現れる。両方を出すと同じ名前が 2 か所に並び、
+ * 読み上げが長くなるだけで情報は増えない。
+ *
+ * 見出しは既定の英語を持つ（`PieChart` / `GanttChart` と同じ扱い）。呼び出し側が
+ * キー名を決める形ではないため。
+ */
+export declare const linkTable: (links: {
+    source: string;
+    target: string;
+    value: number;
+}[]) => ChartTable;
+/**
+ * 増減型: 1 行が 1 段（何が・いくつ動いて・合計がいくつになったか）。
+ * `WaterfallChart` がこれ。
+ *
+ * **running total の列を落とさない。** 図では棒の高さと位置の両方が意味を持つが、
+ * 表に増減だけを並べると「その時点の合計」が消え、読み手が足し算をやり直す
+ * ことになる ── 図が見えている人だけが答えを持っている状態になる。
+ */
+export declare const stepTable: (steps: {
+    name: string;
+    change: string;
+    running: number;
+}[]) => ChartTable;
+/**
+ * 五数要約型: 1 行が 1 群。`BoxPlot` がこれ。
+ *
+ * 図は箱とヒゲの**位置**でしか分布を語らないので、表には 5 つの数をそのまま出す
+ * ── 「中央値がどこか」は箱を見れば分かるが、見えない人には数が要る。
+ */
+export declare const summaryTable: (groups: {
+    name: string;
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+}[]) => ChartTable;
+/**
+ * 四本値型: 1 行が 1 期間。`CandlestickChart` がこれ。
+ *
+ * 列の順は始値 → 高値 → 安値 → 終値（OHLC）── 相場の慣習の順で、
+ * 「上げか下げか」は始値と終値を並べれば読める。色の説明を表に足さない。
+ */
+export declare const ohlcTable: (candles: {
+    name: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+}[]) => ChartTable;

package/dist/components/charts/BoxPlot/BoxPlot.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("../../_internal/barSpan.cjs"),o=require("./box-plot.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("recharts");var u=.62,d=.32,f=({x:e=0,y:t=0,width:n=0,height:r=0,payload:i})=>{if(!i)return null;let s={y:t,height:r},l=e=>a.spanPixel(e,i.span,s),f=e+n/2,p=n*u,m=n*d,h=l(i.q3),g=l(i.q1),_=Math.max(g-h,1);return(0,c.jsxs)(`g`,{children:[(0,c.jsx)(`line`,{className:o.default.whisker,x1:f,x2:f,y1:l(i.min),y2:l(i.max)}),(0,c.jsx)(`line`,{className:o.default.whisker,x1:f-m/2,x2:f+m/2,y1:l(i.min),y2:l(i.min)}),(0,c.jsx)(`line`,{className:o.default.whisker,x1:f-m/2,x2:f+m/2,y1:l(i.max),y2:l(i.max)}),(0,c.jsx)(`rect`,{className:o.default.box,x:f-p/2,y:h,width:p,height:_,rx:2}),(0,c.jsx)(`line`,{className:o.default.median,x1:f-p/2,x2:f+p/2,y1:l(i.median),y2:l(i.median)})]})},p=({data:e,height:s=300,width:u=`100%`,title:d,"aria-label":p})=>{let m=p??d,h=(e??[]).map(e=>({...e,span:[e.min,e.max]})),g=i.summaryTable(e??[]),_=a.spanDomain(h.map(e=>e.span));return(0,c.jsxs)(`div`,{className:`wim-box-plot ${o.default.root}`,style:{width:u},role:m?`figure`:void 0,"aria-label":m,children:[d&&(0,c.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,c.jsx)(`div`,{className:o.default.container,style:{height:s},"aria-hidden":`true`,children:(0,c.jsx)(l.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,c.jsxs)(l.BarChart,{...n.CHART_HIDDEN_A11Y_PROPS,data:h,margin:{top:8,right:30,left:0,bottom:5},children:[(0,c.jsx)(l.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,c.jsx)(l.XAxis,{dataKey:`name`,interval:0,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.YAxis,{width:44,domain:_,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,c.jsx)(l.Bar,{dataKey:`span`,shape:(0,c.jsx)(f,{}),isAnimationActive:!1})]})})}),(0,c.jsx)(r.ChartDataTable,{caption:m,columns:g.columns,rows:g.rows})]})};exports.BoxPlot=p;

package/dist/components/charts/BoxPlot/BoxPlot.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export type BoxPlotItem = {
+    /** Label for this group, shown on the X axis. */
+    name: string;
+    /** The smallest value that is not an outlier. */
+    min: number;
+    /** First quartile — a quarter of the values are below this. */
+    q1: number;
+    /** The middle value. */
+    median: number;
+    /** Third quartile — a quarter of the values are above this. */
+    q3: number;
+    /** The largest value that is not an outlier. */
+    max: number;
+};
+export type BoxPlotProps = {
+    /** One entry per group. Each is a five-number summary, already computed. */
+    data: BoxPlotItem[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /** Optional title displayed above the chart. */
+    title?: string;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Shows how values are spread within each group — response times per endpoint,
+ * salaries per role, scores per class.
+ *
+ * **A box plot shows the shape of a distribution, not one number for it.** Two
+ * groups with the same average can have completely different boxes, which is
+ * exactly what a `BarChart` of averages hides.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const BoxPlot: ({ data, height, width, title, "aria-label": ariaLabel, }: BoxPlotProps) => React.JSX.Element;

package/dist/components/charts/BoxPlot/BoxPlot.js

@@ -0,0 +1,130 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_HIDDEN_A11Y_PROPS as t, CHART_THEME as n } from "../../helpers.js";
+import { ChartDataTable as r } from "../../_internal/ChartDataTable.js";
+import { summaryTable as i } from "../../_internal/chartTableData.js";
+import { spanDomain as a, spanPixel as o } from "../../_internal/barSpan.js";
+import s from "./box-plot.module.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Bar as u, BarChart as d, CartesianGrid as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
+//#region src/components/charts/BoxPlot/BoxPlot.tsx
+var _ = .62, v = .32, y = ({ x: e = 0, y: t = 0, width: n = 0, height: r = 0, payload: i }) => {
+	if (!i) return null;
+	let a = {
+		y: t,
+		height: r
+	}, u = (e) => o(e, i.span, a), d = e + n / 2, f = n * _, p = n * v, m = u(i.q3), h = u(i.q1), g = Math.max(h - m, 1);
+	return /* @__PURE__ */ l("g", { children: [
+		/* @__PURE__ */ c("line", {
+			className: s.whisker,
+			x1: d,
+			x2: d,
+			y1: u(i.min),
+			y2: u(i.max)
+		}),
+		/* @__PURE__ */ c("line", {
+			className: s.whisker,
+			x1: d - p / 2,
+			x2: d + p / 2,
+			y1: u(i.min),
+			y2: u(i.min)
+		}),
+		/* @__PURE__ */ c("line", {
+			className: s.whisker,
+			x1: d - p / 2,
+			x2: d + p / 2,
+			y1: u(i.max),
+			y2: u(i.max)
+		}),
+		/* @__PURE__ */ c("rect", {
+			className: s.box,
+			x: d - f / 2,
+			y: m,
+			width: f,
+			height: g,
+			rx: 2
+		}),
+		/* @__PURE__ */ c("line", {
+			className: s.median,
+			x1: d - f / 2,
+			x2: d + f / 2,
+			y1: u(i.median),
+			y2: u(i.median)
+		})
+	] });
+}, b = ({ data: o, height: _ = 300, width: v = "100%", title: b, "aria-label": x }) => {
+	let S = x ?? b, C = (o ?? []).map((e) => ({
+		...e,
+		span: [e.min, e.max]
+	})), w = i(o ?? []), T = a(C.map((e) => e.span));
+	return /* @__PURE__ */ l("div", {
+		className: `wim-box-plot ${s.root}`,
+		style: { width: v },
+		role: S ? "figure" : void 0,
+		"aria-label": S,
+		children: [
+			b && /* @__PURE__ */ c(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: b
+			}),
+			/* @__PURE__ */ c("div", {
+				className: s.container,
+				style: { height: _ },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ c(p, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ l(d, {
+						...t,
+						data: C,
+						margin: {
+							top: 8,
+							right: 30,
+							left: 0,
+							bottom: 5
+						},
+						children: [
+							/* @__PURE__ */ c(f, {
+								...n.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ c(h, {
+								dataKey: "name",
+								interval: 0,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ c(g, {
+								width: 44,
+								domain: T,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ c(m, {
+								contentStyle: n.tooltip.contentStyle,
+								cursor: n.tooltip.cursor
+							}),
+							/* @__PURE__ */ c(u, {
+								dataKey: "span",
+								shape: /* @__PURE__ */ c(y, {}),
+								isAnimationActive: !1
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ c(r, {
+				caption: S,
+				columns: w.columns,
+				rows: w.rows
+			})
+		]
+	});
+};
+//#endregion
+export { b as BoxPlot };

package/dist/components/charts/BoxPlot/box-plot.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_10hv1_3`,t=`_container_10hv1_6`,n=`_box_10hv1_15`,r=`_whisker_10hv1_20`,i=`_median_10hv1_25`,a={root:e,container:t,box:n,whisker:r,median:i};exports.box=n,exports.container=t,exports.default=a,exports.median=i,exports.root=e,exports.whisker=r;

package/dist/components/charts/BoxPlot/box-plot.module.js

@@ -0,0 +1,11 @@
+"use client";
+//#region src/components/charts/BoxPlot/box-plot.module.scss
+var e = "_root_10hv1_3", t = "_container_10hv1_6", n = "_box_10hv1_15", r = "_whisker_10hv1_20", i = "_median_10hv1_25", a = {
+	root: e,
+	container: t,
+	box: n,
+	whisker: r,
+	median: i
+};
+//#endregion
+export { n as box, t as container, a as default, i as median, e as root, r as whisker };

package/dist/components/charts/CandlestickChart/CandlestickChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("../../_internal/barSpan.cjs"),o=require("./candlestick-chart.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("recharts");var u=.62,d=({x:e=0,y:t=0,width:n=0,height:r=0,payload:i})=>{if(!i)return null;let s={y:t,height:r},l=e=>a.spanPixel(e,i.span,s),d=e+n/2,f=n*u,p=l(Math.max(i.open,i.close)),m=l(Math.min(i.open,i.close)),h=Math.max(m-p,1);return(0,c.jsxs)(`g`,{className:i.rising?o.default.rising:o.default.falling,children:[(0,c.jsx)(`line`,{className:o.default.wick,x1:d,x2:d,y1:l(i.low),y2:p+h}),(0,c.jsx)(`line`,{className:o.default.wick,x1:d,x2:d,y1:p,y2:l(i.high)}),(0,c.jsx)(`rect`,{className:i.rising?o.default.hollowBody:o.default.filledBody,x:d-f/2,y:p,width:f,height:h})]})},f=({data:e,height:s=300,width:u=`100%`,title:f,"aria-label":p})=>{let m=p??f,h=(e??[]).map(e=>({...e,span:[e.low,e.high],rising:e.close>=e.open})),g=i.ohlcTable(e??[]),_=a.spanDomain(h.map(e=>e.span));return(0,c.jsxs)(`div`,{className:`wim-candlestick-chart ${o.default.root}`,style:{width:u},role:m?`figure`:void 0,"aria-label":m,children:[f&&(0,c.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:f}),(0,c.jsx)(`div`,{className:o.default.container,style:{height:s},"aria-hidden":`true`,children:(0,c.jsx)(l.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,c.jsxs)(l.BarChart,{...n.CHART_HIDDEN_A11Y_PROPS,data:h,margin:{top:8,right:30,left:0,bottom:5},children:[(0,c.jsx)(l.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,c.jsx)(l.XAxis,{dataKey:`name`,interval:0,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.YAxis,{width:44,domain:_,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,c.jsx)(l.Bar,{dataKey:`span`,shape:(0,c.jsx)(d,{}),isAnimationActive:!1})]})})}),(0,c.jsx)(r.ChartDataTable,{caption:m,columns:g.columns,rows:g.rows})]})};exports.CandlestickChart=f;

package/dist/components/charts/CandlestickChart/CandlestickChart.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+export type Candle = {
+    /** Label for this period, shown on the X axis. */
+    name: string;
+    /** Value at the start of the period. */
+    open: number;
+    /** Highest value reached during the period. */
+    high: number;
+    /** Lowest value reached during the period. */
+    low: number;
+    /** Value at the end of the period. */
+    close: number;
+};
+export type CandlestickChartProps = {
+    /** One entry per period, oldest first. */
+    data: Candle[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /** Optional title displayed above the chart. */
+    title?: string;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Shows how a value opened, ranged, and closed within each period — a price
+ * series, a daily temperature range, a load metric per hour.
+ *
+ * **Each mark carries four numbers, not one**, which is what a `LineChart` of
+ * closing values drops: the line says where the period ended and nothing about
+ * how far it travelled to get there.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const CandlestickChart: ({ data, height, width, title, "aria-label": ariaLabel, }: CandlestickChartProps) => React.JSX.Element;

package/dist/components/charts/CandlestickChart/CandlestickChart.js

@@ -0,0 +1,119 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_HIDDEN_A11Y_PROPS as t, CHART_THEME as n } from "../../helpers.js";
+import { ChartDataTable as r } from "../../_internal/ChartDataTable.js";
+import { ohlcTable as i } from "../../_internal/chartTableData.js";
+import { spanDomain as a, spanPixel as o } from "../../_internal/barSpan.js";
+import s from "./candlestick-chart.module.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Bar as u, BarChart as d, CartesianGrid as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
+//#region src/components/charts/CandlestickChart/CandlestickChart.tsx
+var _ = .62, v = ({ x: e = 0, y: t = 0, width: n = 0, height: r = 0, payload: i }) => {
+	if (!i) return null;
+	let a = {
+		y: t,
+		height: r
+	}, u = (e) => o(e, i.span, a), d = e + n / 2, f = n * _, p = u(Math.max(i.open, i.close)), m = u(Math.min(i.open, i.close)), h = Math.max(m - p, 1);
+	return /* @__PURE__ */ l("g", {
+		className: i.rising ? s.rising : s.falling,
+		children: [
+			/* @__PURE__ */ c("line", {
+				className: s.wick,
+				x1: d,
+				x2: d,
+				y1: u(i.low),
+				y2: p + h
+			}),
+			/* @__PURE__ */ c("line", {
+				className: s.wick,
+				x1: d,
+				x2: d,
+				y1: p,
+				y2: u(i.high)
+			}),
+			/* @__PURE__ */ c("rect", {
+				className: i.rising ? s.hollowBody : s.filledBody,
+				x: d - f / 2,
+				y: p,
+				width: f,
+				height: h
+			})
+		]
+	});
+}, y = ({ data: o, height: _ = 300, width: y = "100%", title: b, "aria-label": x }) => {
+	let S = x ?? b, C = (o ?? []).map((e) => ({
+		...e,
+		span: [e.low, e.high],
+		rising: e.close >= e.open
+	})), w = i(o ?? []), T = a(C.map((e) => e.span));
+	return /* @__PURE__ */ l("div", {
+		className: `wim-candlestick-chart ${s.root}`,
+		style: { width: y },
+		role: S ? "figure" : void 0,
+		"aria-label": S,
+		children: [
+			b && /* @__PURE__ */ c(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: b
+			}),
+			/* @__PURE__ */ c("div", {
+				className: s.container,
+				style: { height: _ },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ c(p, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ l(d, {
+						...t,
+						data: C,
+						margin: {
+							top: 8,
+							right: 30,
+							left: 0,
+							bottom: 5
+						},
+						children: [
+							/* @__PURE__ */ c(f, {
+								...n.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ c(h, {
+								dataKey: "name",
+								interval: 0,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ c(g, {
+								width: 44,
+								domain: T,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ c(m, {
+								contentStyle: n.tooltip.contentStyle,
+								cursor: n.tooltip.cursor
+							}),
+							/* @__PURE__ */ c(u, {
+								dataKey: "span",
+								shape: /* @__PURE__ */ c(v, {}),
+								isAnimationActive: !1
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ c(r, {
+				caption: S,
+				columns: w.columns,
+				rows: w.rows
+			})
+		]
+	});
+};
+//#endregion
+export { y as CandlestickChart };

package/dist/components/charts/CandlestickChart/candlestick-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_wvf5o_3`,t=`_container_wvf5o_6`,n=`_rising_wvf5o_14`,r=`_falling_wvf5o_17`,i=`_wick_wvf5o_20`,a=`_hollowBody_wvf5o_11`,o=`_filledBody_wvf5o_11`,s={root:e,container:t,rising:n,falling:r,wick:i,hollowBody:a,filledBody:o};exports.container=t,exports.default=s,exports.falling=r,exports.filledBody=o,exports.hollowBody=a,exports.rising=n,exports.root=e,exports.wick=i;

package/dist/components/charts/CandlestickChart/candlestick-chart.module.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/charts/CandlestickChart/candlestick-chart.module.scss
+var e = "_root_wvf5o_3", t = "_container_wvf5o_6", n = "_rising_wvf5o_14", r = "_falling_wvf5o_17", i = "_wick_wvf5o_20", a = "_hollowBody_wvf5o_11", o = "_filledBody_wvf5o_11", s = {
+	root: e,
+	container: t,
+	rising: n,
+	falling: r,
+	wick: i,
+	hollowBody: a,
+	filledBody: o
+};
+//#endregion
+export { t as container, s as default, r as falling, o as filledBody, a as hollowBody, n as rising, e as root, i as wick };

package/dist/components/charts/SankeyChart/SankeyChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("./warn-unknown-node.cjs"),o=require("./sankey-chart.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("recharts");var u=12,d=24,f=8,p=({x:e=0,y:t=0,width:r=0,height:i=0,index:a=0,payload:s})=>{let l=(s?.targetNodes?.length??0)===0;return(0,c.jsxs)(`g`,{children:[(0,c.jsx)(`rect`,{x:e,y:t,width:r,height:i,fill:n.CHART_COLORS[a%n.CHART_COLORS.length],rx:2}),(0,c.jsx)(`text`,{className:o.default.label,x:l?e-f:e+r+f,y:t+i/2,textAnchor:l?`end`:`start`,dominantBaseline:`middle`,children:s?.name})]})},m=({sourceX:e=0,targetX:t=0,sourceY:r=0,targetY:i=0,sourceControlX:a=0,targetControlX:o=0,linkWidth:s=0,payload:l,colorIndexOf:u})=>{let d=l?.source?.name,f=(d===void 0?void 0:u?.get(d))??0;return(0,c.jsx)(`path`,{d:`M${e},${r}C${a},${r} ${o},${i} ${t},${i}`,fill:`none`,stroke:n.CHART_COLORS[f%n.CHART_COLORS.length],strokeWidth:s,strokeOpacity:.28})},h=({nodes:e,links:s,height:f=300,width:h=`100%`,title:g,"aria-label":_})=>{let v=_??g,y=new Map;e.forEach((e,t)=>{if(y.has(e)){a.warnDuplicateSankeyNode(e);return}y.set(e,t)});let b=s.filter(t=>{let n=y.has(t.source)?y.has(t.target)?null:t.target:t.source;return n===null?!0:(a.warnUnknownSankeyNode(n,e),!1)}),x=i.linkTable(b);return(0,c.jsxs)(`div`,{className:`wim-sankey-chart ${o.default.root}`,style:{width:h},role:v?`figure`:void 0,"aria-label":v,children:[g&&(0,c.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:g}),(0,c.jsx)(`div`,{className:o.default.container,style:{height:f},"aria-hidden":`true`,children:(0,c.jsx)(l.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,c.jsx)(l.Sankey,{...n.CHART_HIDDEN_A11Y_PROPS,data:{nodes:e.map(e=>({name:e})),links:b.map(e=>({source:y.get(e.source),target:y.get(e.target),value:e.value}))},nodeWidth:u,nodePadding:d,margin:{top:8,right:8,bottom:8,left:8},node:(0,c.jsx)(p,{}),link:(0,c.jsx)(m,{colorIndexOf:y}),children:(0,c.jsx)(l.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor})})})}),(0,c.jsx)(r.ChartDataTable,{caption:v,columns:x.columns,rows:x.rows})]})};exports.SankeyChart=h;

package/dist/components/charts/SankeyChart/SankeyChart.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export type SankeyLink = {
+    /** Name of the node the flow leaves. */
+    source: string;
+    /** Name of the node the flow arrives at. */
+    target: string;
+    /** Size of the flow. The band's thickness is this value. */
+    value: number;
+};
+export type SankeyChartProps = {
+    /**
+     * Every node in the diagram, in the order their colors are assigned. Names
+     * are what `links` refers to, so they have to be unique.
+     */
+    nodes: string[];
+    /**
+     * Flows between nodes, by node name. A link naming a node that is not in
+     * `nodes` is dropped (and reported in the console during development).
+     */
+    links: SankeyLink[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Optional title displayed above the chart.
+     */
+    title?: string;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Shows how a quantity splits and recombines as it moves through stages —
+ * where traffic goes, where a budget ends up, where applicants drop out.
+ *
+ * **The width of a band is the amount that flows through it**, which is what
+ * `NodeGraph` cannot express: its edges show that two things are connected, not
+ * how much moves between them.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const SankeyChart: ({ nodes, links, height, width, title, "aria-label": ariaLabel, }: SankeyChartProps) => React.JSX.Element;