minerva-design 1.2.0 → 1.4.0

package/dist/charts/react/charts.d.cts

@@ -1,8 +1,16 @@
-import { BarChartProps, LineChartProps, QuadrantChartProps, ScatterChartProps } from './types.cjs';
+import { AreaChartProps, BarChartProps, BoxPlotChartProps, BubbleChartProps, CandlestickChartProps, GanttChartProps, HeatmapChartProps, HistogramChartProps, HorizontalBarChartProps, LineChartProps, MixedChartProps, QuadrantChartProps, RangeAreaChartProps, ScatterChartProps, SparklineProps, WaterfallChartProps } from './types.cjs';
 /** Line (or area) chart; handles millions of points on the GPU */
 export declare function LineChart(props: LineChartProps): import('react').JSX.Element;
-/** Bar chart: grouped side by side, or stacked */
+/** Area chart: smooth by default, stacked or 100% stacked */
+export declare function AreaChart(props: AreaChartProps): import('react').JSX.Element;
+/** Bar chart: grouped side by side, stacked or 100% stacked, with optional value labels */
 export declare function BarChart(props: BarChartProps): import('react').JSX.Element;
+/** Candlestick (OHLC) chart: rising and falling candles, zoomable on the GPU */
+export declare function CandlestickChart(props: CandlestickChartProps): import('react').JSX.Element;
+/** Heatmap: a grid of cells colored by value (categories or numbers on both axes) */
+export declare function HeatmapChart(props: HeatmapChartProps): import('react').JSX.Element;
+/** Word-sized chart without axes: a trend in a table cell, a KPI card, ... */
+export declare function Sparkline(props: SparklineProps): import('react').JSX.Element;
 /** Scatter chart: zooms on both axes, hit testing through a spatial index */
 export declare function ScatterChart(props: ScatterChartProps): import('react').JSX.Element;
 /**
@@ -11,3 +19,41 @@ export declare function ScatterChart(props: ScatterChartProps): import('react').
  * overlapping labels. Dots can be dragged to another quadrant.
  */
 export declare function QuadrantChart(props: QuadrantChartProps): import('react').JSX.Element;
+/**
+ * Horizontal bar chart: categories down the left side, values from the
+ * left (rankings, long names, diverging surveys, stacked progress)
+ */
+export declare function HorizontalBarChart(props: HorizontalBarChartProps): import('react').JSX.Element;
+/**
+ * Range area chart: bands between a lower (`y0`) and an upper edge
+ * (confidence intervals, min-max ranges), mixable with lines
+ */
+export declare function RangeAreaChart(props: RangeAreaChartProps): import('react').JSX.Element;
+/**
+ * Combination chart: bars, lines and areas on one or two value axes
+ * (`yAxis: "right"` series use `yAxis2`, aligned on the left grid)
+ */
+export declare function MixedChart(props: MixedChartProps): import('react').JSX.Element;
+/** Bubble chart: x, y and a value sized by area (√value diameters) */
+export declare function BubbleChart(props: BubbleChartProps): import('react').JSX.Element;
+/**
+ * Histogram: the distribution of raw samples in bins of equal width
+ * (Freedman-Diaconis, Sturges or a count); millions of samples are binned
+ * in milliseconds
+ */
+export declare function HistogramChart(props: HistogramChartProps): import('react').JSX.Element;
+/**
+ * Box plot: medians, quartiles, whiskers and outliers of samples, from raw
+ * values (`groups`) or computed statistics (`series`)
+ */
+export declare function BoxPlotChart(props: BoxPlotChartProps): import('react').JSX.Element;
+/**
+ * Waterfall (bridge) chart: how changes take a value from a start to an
+ * end, with subtotals and totals (P&L bridges, budget variances)
+ */
+export declare function WaterfallChart(props: WaterfallChartProps): import('react').JSX.Element;
+/**
+ * Gantt chart: tasks as bars on a time axis with their progress, groups,
+ * milestones and a today line; zooms and pans along the time
+ */
+export declare function GanttChart(props: GanttChartProps): import('react').JSX.Element;

package/dist/charts/react/charts.d.ts

@@ -1,8 +1,16 @@
-import { BarChartProps, LineChartProps, QuadrantChartProps, ScatterChartProps } from './types.js';
+import { AreaChartProps, BarChartProps, BoxPlotChartProps, BubbleChartProps, CandlestickChartProps, GanttChartProps, HeatmapChartProps, HistogramChartProps, HorizontalBarChartProps, LineChartProps, MixedChartProps, QuadrantChartProps, RangeAreaChartProps, ScatterChartProps, SparklineProps, WaterfallChartProps } from './types.js';
 /** Line (or area) chart; handles millions of points on the GPU */
 export declare function LineChart(props: LineChartProps): import('react').JSX.Element;
-/** Bar chart: grouped side by side, or stacked */
+/** Area chart: smooth by default, stacked or 100% stacked */
+export declare function AreaChart(props: AreaChartProps): import('react').JSX.Element;
+/** Bar chart: grouped side by side, stacked or 100% stacked, with optional value labels */
 export declare function BarChart(props: BarChartProps): import('react').JSX.Element;
+/** Candlestick (OHLC) chart: rising and falling candles, zoomable on the GPU */
+export declare function CandlestickChart(props: CandlestickChartProps): import('react').JSX.Element;
+/** Heatmap: a grid of cells colored by value (categories or numbers on both axes) */
+export declare function HeatmapChart(props: HeatmapChartProps): import('react').JSX.Element;
+/** Word-sized chart without axes: a trend in a table cell, a KPI card, ... */
+export declare function Sparkline(props: SparklineProps): import('react').JSX.Element;
 /** Scatter chart: zooms on both axes, hit testing through a spatial index */
 export declare function ScatterChart(props: ScatterChartProps): import('react').JSX.Element;
 /**
@@ -11,3 +19,41 @@ export declare function ScatterChart(props: ScatterChartProps): import('react').
  * overlapping labels. Dots can be dragged to another quadrant.
  */
 export declare function QuadrantChart(props: QuadrantChartProps): import('react').JSX.Element;
+/**
+ * Horizontal bar chart: categories down the left side, values from the
+ * left (rankings, long names, diverging surveys, stacked progress)
+ */
+export declare function HorizontalBarChart(props: HorizontalBarChartProps): import('react').JSX.Element;
+/**
+ * Range area chart: bands between a lower (`y0`) and an upper edge
+ * (confidence intervals, min-max ranges), mixable with lines
+ */
+export declare function RangeAreaChart(props: RangeAreaChartProps): import('react').JSX.Element;
+/**
+ * Combination chart: bars, lines and areas on one or two value axes
+ * (`yAxis: "right"` series use `yAxis2`, aligned on the left grid)
+ */
+export declare function MixedChart(props: MixedChartProps): import('react').JSX.Element;
+/** Bubble chart: x, y and a value sized by area (√value diameters) */
+export declare function BubbleChart(props: BubbleChartProps): import('react').JSX.Element;
+/**
+ * Histogram: the distribution of raw samples in bins of equal width
+ * (Freedman-Diaconis, Sturges or a count); millions of samples are binned
+ * in milliseconds
+ */
+export declare function HistogramChart(props: HistogramChartProps): import('react').JSX.Element;
+/**
+ * Box plot: medians, quartiles, whiskers and outliers of samples, from raw
+ * values (`groups`) or computed statistics (`series`)
+ */
+export declare function BoxPlotChart(props: BoxPlotChartProps): import('react').JSX.Element;
+/**
+ * Waterfall (bridge) chart: how changes take a value from a start to an
+ * end, with subtotals and totals (P&L bridges, budget variances)
+ */
+export declare function WaterfallChart(props: WaterfallChartProps): import('react').JSX.Element;
+/**
+ * Gantt chart: tasks as bars on a time axis with their progress, groups,
+ * milestones and a today line; zooms and pans along the time
+ */
+export declare function GanttChart(props: GanttChartProps): import('react').JSX.Element;

package/dist/charts/react/charts.js

@@ -1,10 +1,11 @@
 "use client";
-import { ChartBase as e, engineOptions as t } from "./Chart.js";
-import { barSeries as n, lineSeries as r, quadrantChartOptions as i, quadrantOf as a, scatterSeries as o } from "../engine/presets.js";
-import { useMemo as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { resolveLocale as e } from "../engine/locale.js";
+import { Chart as t, ChartBase as n, engineOptions as r } from "./Chart.js";
+import { areaSeries as i, barSeries as a, boxplotData as o, boxplotSeries as s, bubbleSeries as c, candlestickSeries as l, ganttSeries as u, heatmapChartOptions as d, histogramSeries as f, lineSeries as p, presetLabels as m, quadrantChartOptions as h, quadrantOf as g, rangeAreaSeries as _, scatterSeries as v, sparklineOptions as y, waterfallSeries as b } from "../engine/presets.js";
+import { useMemo as x, useState as S } from "react";
+import { jsx as C } from "react/jsx-runtime";
 //#region src/react/charts.tsx
-var l = (e) => ({
+var w = (e) => ({
 	height: e.height,
 	width: e.width,
 	className: e.className,
@@ -17,42 +18,170 @@ var l = (e) => ({
 	onRendererChange: e.onRendererChange,
 	renderTooltip: e.renderTooltip
 });
-function u(n) {
-	let { series: i, area: a = !1 } = n, o = s(() => r(i, a), [i, a]);
-	return /* @__PURE__ */ c(e, {
-		options: t({
-			...n,
-			series: o
+function T(e) {
+	let { series: t, area: i = !1, curve: a, stacked: o = !1, percent: s = !1 } = e, c = x(() => p(t, i, {
+		curve: a,
+		stacked: o || s
+	}), [
+		t,
+		i,
+		a,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			series: c,
+			stackMode: s ? "percent" : void 0
 		}),
-		...l(n)
+		...w(e)
 	});
 }
-function d(r) {
-	let { series: i, stacked: a = !1 } = r, o = s(() => n(i, a), [i, a]);
-	return /* @__PURE__ */ c(e, {
-		options: t({
-			...r,
-			series: o
+function E(e) {
+	let { series: t, curve: a = "smooth", stacked: o = !1, percent: s = !1 } = e, c = x(() => i(t, {
+		curve: a,
+		stacked: o || s
+	}), [
+		t,
+		a,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			series: c,
+			stackMode: s ? "percent" : void 0
 		}),
-		...l(r)
+		...w(e)
 	});
 }
-function f(n) {
-	let { series: r } = n, i = s(() => o(r), [r]);
-	return /* @__PURE__ */ c(e, {
-		options: t({
-			...n,
+function D(e) {
+	let { series: t, stacked: i = !1, percent: o = !1, labels: s = !1 } = e, c = x(() => a(t, i || o, s), [
+		t,
+		i,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			labels: void 0,
+			series: c,
+			stackMode: o ? "percent" : void 0
+		}),
+		...w(e)
+	});
+}
+function O(e) {
+	let { series: t } = e, i = x(() => l(t), [t]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			series: i
+		}),
+		...w(e)
+	});
+}
+function k(e) {
+	let { data: t, xCategories: i, yCategories: a, colorScale: o, valueRange: s, name: c, radius: l, format: u } = e, f = x(() => d({
+		data: t,
+		xCategories: i,
+		yCategories: a,
+		colorScale: o,
+		valueRange: s,
+		name: c,
+		radius: l,
+		format: u
+	}).series, [
+		t,
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		u
+	]), p = r({
+		...e,
+		series: f
+	});
+	return /* @__PURE__ */ C(n, {
+		options: {
+			...d({
+				data: t,
+				xCategories: i,
+				yCategories: a
+			}, {
+				...p,
+				legend: e.legend,
+				interaction: e.interaction,
+				tooltip: e.tooltip
+			}),
+			series: f
+		},
+		...w(e)
+	});
+}
+function A(e) {
+	let { data: t, type: r, color: i, curve: a, name: o, reference: s, format: c, height: l = 48, width: u, renderer: d, tooltip: f, palette: p, ariaLabel: m, locale: h, labels: g, className: _, style: v, ref: b, onHover: S, renderTooltip: w } = e, T = x(() => y({
+		data: t,
+		type: r,
+		color: i,
+		curve: a,
+		name: o,
+		reference: s,
+		format: c
+	}, {
+		renderer: d,
+		tooltip: f,
+		palette: p,
+		ariaLabel: m,
+		locale: h,
+		labels: g
+	}), [
+		t,
+		r,
+		i,
+		a,
+		o,
+		s,
+		c,
+		d,
+		f,
+		p,
+		m,
+		h,
+		g
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: T,
+		height: l,
+		width: u,
+		className: _,
+		style: v,
+		handleRef: b,
+		onHover: S,
+		renderTooltip: w
+	});
+}
+function j(e) {
+	let { series: t } = e, i = x(() => v(t), [t]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
 			series: i
 		}),
-		...l(n)
+		...w(e)
 	});
 }
-var p = [
+var M = [
 	"topLeft",
 	"topRight",
 	"bottomLeft",
 	"bottomRight"
-], m = (e, t, n) => {
+], N = (e, t, n) => {
 	let r = e.endsWith("Left"), i = e.startsWith("top");
 	return {
 		position: "absolute",
@@ -63,71 +192,237 @@ var p = [
 		pointerEvents: "none"
 	};
 };
-function h(n) {
-	let { points: r, xDomain: o, yDomain: s, xSplit: u, ySplit: d, quadrants: f, xLabel: h, yLabel: g, axisLabels: _, showTicks: v, reverseX: y, showLabels: b, pointSize: x, name: S, draggable: C, onPointClick: w, onPointDrop: T, onQuadrantClick: E, renderTooltip: D, quadrantContent: O } = n, k = {
-		xDomain: o,
-		yDomain: s,
-		xSplit: u,
-		ySplit: d,
-		reverseX: y
-	}, A = i({
-		points: r,
-		xDomain: o,
-		yDomain: s,
-		xSplit: u,
-		ySplit: d,
-		quadrants: f,
-		xLabel: h,
-		yLabel: g,
-		axisLabels: _,
-		showTicks: v,
-		reverseX: y,
-		showLabels: b,
-		pointSize: x,
-		name: S,
-		draggable: C ?? !!T
-	}, t({
-		...n,
+function P(e) {
+	let { points: t, xDomain: i, yDomain: a, xSplit: o, ySplit: s, quadrants: c, xLabel: l, yLabel: u, axisLabels: d, showTicks: f, reverseX: p, showLabels: m, pointSize: _, name: v, draggable: y, onPointClick: b, onPointDrop: x, onQuadrantClick: S, renderTooltip: T, quadrantContent: E } = e, D = {
+		xDomain: i,
+		yDomain: a,
+		xSplit: o,
+		ySplit: s,
+		reverseX: p
+	}, O = h({
+		points: t,
+		xDomain: i,
+		yDomain: a,
+		xSplit: o,
+		ySplit: s,
+		quadrants: c,
+		xLabel: l,
+		yLabel: u,
+		axisLabels: d,
+		showTicks: f,
+		reverseX: p,
+		showLabels: m,
+		pointSize: _,
+		name: v,
+		draggable: y ?? !!x
+	}, r({
+		...e,
 		series: []
-	})), j = O ? (e) => {
-		let [t, n] = o ?? [0, 10], [r, i] = s ?? [0, 10], a = u ?? (t + n) / 2, l = d ?? (r + i) / 2, f = (a - t) / (n - t || 1), h = (l - r) / (i - r || 1), g = {
-			x: e.x + e.width * (y ? 1 - f : f),
-			y: e.y + e.height * (1 - h)
+	})), k = E ? (e) => {
+		let [t, n] = i ?? [0, 10], [r, c] = a ?? [0, 10], l = o ?? (t + n) / 2, u = s ?? (r + c) / 2, d = (l - t) / (n - t || 1), f = (u - r) / (c - r || 1), m = {
+			x: e.x + e.width * (p ? 1 - d : d),
+			y: e.y + e.height * (1 - f)
 		};
-		return p.map((t) => O[t] ? /* @__PURE__ */ c("div", {
+		return M.map((t) => E[t] ? /* @__PURE__ */ C("div", {
 			className: `minerva-chart-quadrant minerva-chart-quadrant-${t}`,
-			style: m(t, e, g),
-			children: O[t]
+			style: N(t, e, m),
+			children: E[t]
 		}, t) : null);
 	} : void 0;
-	return /* @__PURE__ */ c(e, {
-		options: A,
-		...l({
-			...n,
+	return /* @__PURE__ */ C(n, {
+		options: O,
+		...w({
+			...e,
 			onPointClick: void 0,
 			renderTooltip: void 0
 		}),
-		overlay: j,
-		onPointClick: w ? (e) => {
-			let t = e.items[0]?.index;
-			t !== void 0 && r[t] && w(r[t], t);
+		overlay: k,
+		onPointClick: b ? (e) => {
+			let n = e.items[0]?.index;
+			n !== void 0 && t[n] && b(t[n], n);
 		} : void 0,
-		onPlotClick: E ? (e) => E(a(k, e.x, e.y), e) : void 0,
-		onDrop: T ? (e) => {
-			let t = e.item.index;
-			r[t] && T(r[t], t, {
+		onPlotClick: S ? (e) => S(g(D, e.x, e.y), e) : void 0,
+		onDrop: x ? (e) => {
+			let n = e.item.index;
+			t[n] && x(t[n], n, {
 				x: e.x,
 				y: e.y,
-				quadrant: a(k, e.x, e.y)
+				quadrant: g(D, e.x, e.y)
 			});
 		} : void 0,
-		renderTooltip: D ? (e) => {
-			let t = e.items[0]?.index;
-			return t !== void 0 && r[t] ? D(r[t], t) : null;
+		renderTooltip: T ? (e) => {
+			let n = e.items[0]?.index;
+			return n !== void 0 && t[n] ? T(t[n], n) : null;
 		} : void 0
 	});
 }
+function F(e) {
+	return /* @__PURE__ */ C(D, {
+		...e,
+		orientation: "horizontal"
+	});
+}
+function I(e) {
+	let { series: t, curve: i = "smooth" } = e, a = x(() => _(t, i), [t, i]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			series: a
+		}),
+		...w(e)
+	});
+}
+function L(e) {
+	return /* @__PURE__ */ C(t, { ...e });
+}
+function R(e) {
+	let { series: t, minSize: i, maxSize: a, maxValue: o } = e, s = x(() => c(t, {
+		minSize: i,
+		maxSize: a,
+		maxValue: o
+	}), [
+		t,
+		i,
+		a,
+		o
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...e,
+			series: s
+		}),
+		...w(e)
+	});
+}
+function z(t) {
+	let { values: i, bins: a, domain: o, nice: s, name: c, color: l, formatBin: u, series: d, locale: p } = t, m = e(p), h = x(() => [f(i, {
+		bins: a,
+		domain: o,
+		nice: s,
+		name: c,
+		color: l,
+		format: u,
+		locale: m
+	}), ...d ?? []], [
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		m
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...t,
+			series: h
+		}),
+		...w(t)
+	});
+}
+function B(t) {
+	let { series: i, groups: a, name: c, whisker: l, orientation: u, locale: d } = t, f = c ?? m(e(d)).values, p = x(() => s([...a?.length ? [{
+		id: "boxplot",
+		name: f,
+		data: o(a, { whisker: l })
+	}] : [], ...i ?? []]), [
+		i,
+		a,
+		f,
+		l
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...t,
+			series: p,
+			orientation: u
+		}),
+		...w(t)
+	});
+}
+function V(t) {
+	let { steps: i, name: a, upColor: o, downColor: s, totalColor: c, start: l, labels: u = !0, format: d, orientation: f, locale: p } = t, m = e(p), h = x(() => [b(i, {
+		name: a,
+		upColor: o,
+		downColor: s,
+		totalColor: c,
+		start: l,
+		labels: u,
+		format: d,
+		locale: m
+	})], [
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		m
+	]);
+	return /* @__PURE__ */ C(n, {
+		options: r({
+			...t,
+			labels: void 0,
+			series: h,
+			orientation: f
+		}),
+		...w(t)
+	});
+}
+function H(t) {
+	let { tasks: i, colors: a, taskName: o, progressName: s, milestoneName: c, formatProgress: l, today: d = !1, todayLabel: f, xAxis: p, yAxis: m, annotations: h, interaction: g, legend: _, locale: v } = t, y = e(v), b = x(() => u(i, {
+		colors: a,
+		taskName: o,
+		progressName: s,
+		milestoneName: c,
+		formatProgress: l,
+		locale: y
+	}), [
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		y
+	]), [T] = S(() => Date.now()), E = d === !1 ? null : d === !0 ? T : d instanceof Date ? d.getTime() : d, D = E === null ? [] : [{
+		type: "line",
+		axis: "y",
+		value: E,
+		color: "var(--danger-color, #dc2626)",
+		dash: [4, 3],
+		label: f
+	}];
+	return /* @__PURE__ */ C(n, {
+		options: {
+			...r({
+				...t,
+				series: b.series,
+				orientation: "horizontal"
+			}),
+			xAxis: {
+				type: "category",
+				categories: b.categories,
+				...p
+			},
+			yAxis: {
+				type: "time",
+				min: b.domain[0],
+				max: b.domain[1],
+				...m
+			},
+			annotations: [...h ?? [], ...D],
+			interaction: g ?? { zoom: "y" },
+			legend: _ ?? b.series.length > 1
+		},
+		...w(t)
+	});
+}
 //#endregion
-export { d as BarChart, u as LineChart, h as QuadrantChart, f as ScatterChart };
+export { E as AreaChart, D as BarChart, B as BoxPlotChart, R as BubbleChart, O as CandlestickChart, H as GanttChart, k as HeatmapChart, z as HistogramChart, F as HorizontalBarChart, T as LineChart, L as MixedChart, P as QuadrantChart, I as RangeAreaChart, j as ScatterChart, A as Sparkline, V as WaterfallChart };
 
 //# sourceMappingURL=charts.js.map