@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/ui/chart-cartesian.js

@@ -0,0 +1,420 @@
+import { chartColor, chartSeriesColor } from "./chart-colors.js";
+import { chartCurve } from "./chart-curves.js";
+import { chartBarFill, chartBarGradients, chartBars, chartFillPaint, chartGradients, chartOutline, chartPart, chartReferenceMarks, dimUnfocused, quietAxis, quietGrid, seriesTooltip } from "./chart-marks.js";
+import { chartFormatters, chartSeriesRows, chartXScale, resolveChartSeries } from "./chart-series.js";
+import { areaY, barX, barY, crosshair, defineChart, dot, group, lineY, stack, stackRowsY } from "@tanstack/charts";
+import { decorative } from "@tanstack/charts/mark/decorative";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { tooltip } from "@tanstack/charts/tooltip";
+//#region src/ui/chart-cartesian.ts
+function cartesianSetup(options, percent) {
+	const series = resolveChartSeries(options.series, options.fill ?? "gradient");
+	const rows = chartSeriesRows(options.data, options.x, series);
+	const formats = chartFormatters(options.locale);
+	const formatX = options.formatX ?? formats.x;
+	const formatValue = options.formatValue ?? formats.value;
+	return {
+		series,
+		rows,
+		formatX,
+		valueScale: {
+			scale: scaleLinear,
+			nice: true,
+			grid: options.grid === false ? false : quietGrid,
+			axis: quietAxis(options.formatTick ?? (percent ? formats.percent : formats.tick)),
+			...options.yScale
+		},
+		tooltip: options.tooltip === false ? false : seriesTooltip(series.map((entry) => entry.label), formatX, formatValue),
+		lastX: rows.at(-1)?.x
+	};
+}
+function gradientColors(series) {
+	return series.filter((entry) => entry.fill === "gradient").map((entry) => entry.color);
+}
+const SERIES_FOCUS_POINT = {
+	id: "focus",
+	key: "id",
+	x: "x",
+	z: "series",
+	r: 4,
+	fillOpacity: 0,
+	strokeOpacity: 0
+};
+function areaChart(options) {
+	const stacked = options.stacked ?? false;
+	const { series, rows, formatX, valueScale, tooltip, lastX } = cartesianSetup(options, stacked === "percent");
+	const curve = chartCurve(options.curve ?? "smooth");
+	const stackedRows = stacked ? stackRowsY(rows, {
+		x: "x",
+		y: "value",
+		z: "series",
+		offset: stacked === "percent" ? "normalize" : void 0
+	}) : [];
+	const seriesMarks = series.flatMap((entry) => {
+		const areaParts = entry.fill === "hatched" ? ["area", "area-hatched"] : ["area"];
+		const fill = chartFillPaint(entry.color, entry.fill, "area");
+		const line = {
+			id: `line-${entry.key}`,
+			key: "id",
+			x: "x",
+			stroke: chartColor(entry.color),
+			strokeDasharray: entry.dashed ? "4 4" : void 0,
+			curve
+		};
+		if (stacked) {
+			const seriesRows = stackedRows.filter((row) => row.series === entry.label);
+			return [decorative(chartPart(areaY(seriesRows, {
+				id: `area-${entry.key}`,
+				key: "id",
+				x: "x",
+				y1: "y1",
+				y2: "y2",
+				fill,
+				curve
+			}), ...areaParts)), decorative(chartPart(lineY(seriesRows, {
+				...line,
+				y: "y2"
+			}), "line"))];
+		}
+		const seriesRows = rows.filter((row) => row.series === entry.label);
+		return [decorative(chartPart(areaY(seriesRows, {
+			id: `area-${entry.key}`,
+			key: "id",
+			x: "x",
+			y: "value",
+			fill,
+			curve
+		}), ...areaParts)), decorative(chartPart(lineY(seriesRows, {
+			...line,
+			y: "value"
+		}), "line"))];
+	});
+	const focusPoints = stacked ? dot(stackedRows, {
+		...SERIES_FOCUS_POINT,
+		y: "y2"
+	}) : dot(rows, {
+		...SERIES_FOCUS_POINT,
+		y: "value"
+	});
+	return defineChart({
+		marks: [
+			...seriesMarks,
+			...chartReferenceMarks(options.references ?? [], "y", lastX),
+			focusPoints,
+			crosshair({
+				x: true,
+				y: false,
+				strokeDasharray: "3 3"
+			})
+		],
+		scales: {
+			x: {
+				...chartXScale(rows, "point", options.xScale),
+				axis: quietAxis(formatX)
+			},
+			y: valueScale
+		},
+		gradients: chartGradients(gradientColors(series), "area"),
+		margin: { top: 8 },
+		focus: "group-x",
+		maxFocusDistance: Number.POSITIVE_INFINITY,
+		tooltip
+	});
+}
+function lineChart(options) {
+	const { series, rows, formatX, valueScale, tooltip, lastX } = cartesianSetup(options, false);
+	const curve = chartCurve(options.curve ?? "smooth");
+	const seriesMarks = series.flatMap((entry) => {
+		const seriesRows = rows.filter((row) => row.series === entry.label);
+		const line = decorative(chartPart(lineY(seriesRows, {
+			id: `line-${entry.key}`,
+			key: "id",
+			x: "x",
+			y: "value",
+			stroke: chartColor(entry.color),
+			strokeDasharray: entry.dashed ? "4 4" : void 0,
+			curve
+		}), "line"));
+		if (!options.dots) return [line];
+		return [line, decorative(chartPart(dot(seriesRows, {
+			id: `dot-${entry.key}`,
+			key: "id",
+			x: "x",
+			y: "value",
+			r: 3,
+			fill: chartColor(entry.color),
+			stroke: "var(--cui-chart-background)",
+			strokeWidth: 1.5
+		}), "dot"))];
+	});
+	return defineChart({
+		marks: [
+			...seriesMarks,
+			...chartReferenceMarks(options.references ?? [], "y", lastX),
+			dot(rows, {
+				...SERIES_FOCUS_POINT,
+				y: "value"
+			}),
+			crosshair({
+				x: true,
+				y: false,
+				strokeDasharray: "3 3"
+			})
+		],
+		scales: {
+			x: {
+				...chartXScale(rows, "point", options.xScale),
+				axis: quietAxis(formatX)
+			},
+			y: valueScale
+		},
+		margin: { top: 8 },
+		focus: "group-x",
+		maxFocusDistance: Number.POSITIVE_INFINITY,
+		tooltip
+	});
+}
+function barChart(options) {
+	const layoutName = options.layout ?? "grouped";
+	const { rows, formatX, valueScale, tooltip } = cartesianSetup(options, layoutName === "percent");
+	const layout = {
+		grouped: group({ padding: .15 }),
+		stacked: void 0,
+		percent: stack({ offset: "normalize" })
+	}[layoutName];
+	const categoryScale = {
+		...chartXScale(rows, "band", options.xScale),
+		axis: quietAxis(formatX)
+	};
+	const band = {
+		inset: -4,
+		radius: 6,
+		fillOpacity: .06
+	};
+	const shared = {
+		id: "bars",
+		key: "id",
+		z: "series",
+		stroke: (row) => chartOutline(row.color, row.fill),
+		strokeWidth: 1,
+		radius: { end: 6 },
+		states: dimUnfocused,
+		layout
+	};
+	if (options.orientation === "horizontal") return defineChart({
+		marks: [
+			crosshair({
+				x: false,
+				y: { band }
+			}),
+			chartBars(barX(rows, {
+				...shared,
+				y: "x",
+				x: "value",
+				fill: (row) => chartBarFill(row, "x")
+			}), "x"),
+			...chartReferenceMarks(options.references ?? [], "x", rows[0]?.x)
+		],
+		scales: {
+			x: valueScale,
+			y: categoryScale
+		},
+		gradients: chartBarGradients(rows, "x"),
+		margin: { top: 8 },
+		focus: "group-y",
+		maxFocusDistance: Number.POSITIVE_INFINITY,
+		tooltip
+	});
+	return defineChart({
+		marks: [
+			crosshair({
+				x: { band },
+				y: false
+			}),
+			chartBars(barY(rows, {
+				...shared,
+				x: "x",
+				y: "value",
+				fill: (row) => chartBarFill(row, "y")
+			}), "y"),
+			...chartReferenceMarks(options.references ?? [], "y", rows.at(-1)?.x)
+		],
+		scales: {
+			x: categoryScale,
+			y: valueScale
+		},
+		gradients: chartBarGradients(rows, "y"),
+		margin: { top: 8 },
+		focus: "group-x",
+		maxFocusDistance: Number.POSITIVE_INFINITY,
+		tooltip
+	});
+}
+function finiteNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function scatterRows(options) {
+	return options.data.flatMap((datum, index) => {
+		const x = finiteNumber(datum[options.x]);
+		const y = finiteNumber(datum[options.y]);
+		if (x === void 0 || y === void 0) return [];
+		const size = options.size === void 0 ? 0 : finiteNumber(datum[options.size]) ?? 0;
+		const groupValue = options.group ? datum[options.group] : "";
+		const groupName = groupValue instanceof Date ? groupValue.toISOString() : String(groupValue ?? "");
+		return {
+			id: String(index),
+			x,
+			y,
+			size,
+			group: groupName
+		};
+	});
+}
+function scatterChart(options) {
+	const rows = scatterRows(options);
+	const groups = [...new Set(rows.map((row) => row.group))];
+	const maxSize = Math.max(1, ...rows.map((row) => row.size));
+	const formats = chartFormatters(options.locale);
+	const formatX = options.formatX ?? formats.value;
+	const formatValue = options.formatValue ?? formats.value;
+	const xLabel = options.xLabel ?? options.x;
+	const yLabel = options.yLabel ?? options.y;
+	const sizeKey = options.size;
+	const radius = sizeKey ? (row) => 3 + 11 * Math.sqrt(row.size / maxSize) : 4;
+	const dots = groups.map((groupName, groupIndex) => {
+		const color = chartColor(options.colors?.[groupName] ?? chartSeriesColor(groupIndex));
+		return chartPart(dot(rows.filter((row) => row.group === groupName), {
+			id: `dot-${groupName}`,
+			key: "id",
+			x: "x",
+			y: "y",
+			r: radius,
+			fill: color,
+			fillOpacity: .65,
+			stroke: color,
+			strokeWidth: 1,
+			states: dimUnfocused
+		}), "dot");
+	});
+	const rightmostX = rows.length > 0 ? Math.max(...rows.map((row) => row.x)) : void 0;
+	return defineChart({
+		marks: [...dots, ...chartReferenceMarks(options.references ?? [], "y", rightmostX)],
+		scales: {
+			x: {
+				scale: scaleLinear,
+				nice: true,
+				grid: quietGrid,
+				axis: quietAxis(formats.tick),
+				...options.xScale
+			},
+			y: {
+				scale: scaleLinear,
+				nice: true,
+				grid: quietGrid,
+				axis: quietAxis(formats.tick),
+				...options.yScale
+			}
+		},
+		margin: { top: 8 },
+		focus: "nearest",
+		tooltip: {
+			use: tooltip,
+			content: (points) => {
+				const point = points[0]?.datum;
+				if (!point) return { rows: [] };
+				const color = chartColor(options.colors?.[point.group] ?? chartSeriesColor(groups.indexOf(point.group)));
+				return {
+					title: point.group || void 0,
+					rows: [
+						{
+							label: xLabel,
+							value: formatX(point.x),
+							color
+						},
+						{
+							label: yLabel,
+							value: formatValue(point.y),
+							color
+						},
+						...sizeKey ? [{
+							label: sizeKey,
+							value: formatValue(point.size),
+							color
+						}] : []
+					]
+				};
+			}
+		}
+	});
+}
+function sparklineChart(options) {
+	const color = options.color ?? "blue";
+	const fill = options.fill ?? "gradient";
+	const type = options.type ?? "area";
+	const curve = chartCurve(options.curve ?? "smooth");
+	const rows = chartSeriesRows(options.data, options.x, resolveChartSeries([{
+		key: options.y,
+		color,
+		fill
+	}]));
+	const values = rows.flatMap((row) => row.value === null ? [] : row.value);
+	const min = values.length > 0 ? Math.min(...values) : 0;
+	const shared = {
+		guides: false,
+		margin: 2,
+		focus: false,
+		pointer: false,
+		keyboard: false,
+		tooltip: false
+	};
+	const valueScale = {
+		scale: scaleLinear,
+		nice: false
+	};
+	if (type === "bar") return defineChart({
+		...shared,
+		marks: [chartBars(barY(rows, {
+			key: "id",
+			x: "x",
+			y: "value",
+			fill: (row) => chartBarFill(row, "y"),
+			radius: { end: 2 }
+		}), "y")],
+		scales: {
+			x: {
+				scale: () => scaleBand().padding(.2),
+				...options.xScale
+			},
+			y: valueScale
+		},
+		gradients: chartBarGradients(rows, "y")
+	});
+	const line = chartPart(lineY(rows, {
+		key: "id",
+		x: "x",
+		y: "value",
+		stroke: chartColor(color),
+		curve
+	}), "line");
+	const areaParts = fill === "hatched" ? ["area", "area-hatched"] : ["area"];
+	const area = chartPart(areaY(rows, {
+		key: "id",
+		x: "x",
+		y1: min,
+		y2: "value",
+		fill: chartFillPaint(color, fill, "area"),
+		curve
+	}), ...areaParts);
+	return defineChart({
+		...shared,
+		marks: type === "area" ? [area, line] : [line],
+		scales: {
+			x: chartXScale(rows, "point", options.xScale),
+			y: valueScale
+		},
+		gradients: type === "area" && fill === "gradient" ? chartGradients([color], "area") : []
+	});
+}
+//#endregion
+export { areaChart, barChart, lineChart, scatterChart, sparklineChart };

package/dist/ui/chart-colors.d.ts

@@ -0,0 +1,7 @@
+//#region src/ui/chart-colors.d.ts
+export declare const CHART_COLORS: readonly ["blue", "purple", "pink", "orange", "green", "yellow", "red", "neutral"];
+export type ChartColor = (typeof CHART_COLORS)[number];
+export declare const CHART_SERIES_COLORS: readonly ["blue", "purple", "pink", "orange", "green", "yellow"];
+export declare function chartColor(color: ChartColor): string;
+export declare function chartSeriesColor(index: number): ChartColor;
+//#endregion

package/dist/ui/chart-colors.js

@@ -0,0 +1,27 @@
+//#region src/ui/chart-colors.ts
+const CHART_COLORS = [
+	"blue",
+	"purple",
+	"pink",
+	"orange",
+	"green",
+	"yellow",
+	"red",
+	"neutral"
+];
+const CHART_SERIES_COLORS = [
+	"blue",
+	"purple",
+	"pink",
+	"orange",
+	"green",
+	"yellow"
+];
+function chartColor(color) {
+	return `var(--chart-${color})`;
+}
+function chartSeriesColor(index) {
+	return CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length] ?? "blue";
+}
+//#endregion
+export { CHART_COLORS, CHART_SERIES_COLORS, chartColor, chartSeriesColor };

package/dist/ui/chart-curves.d.ts

@@ -0,0 +1,7 @@
+import { ChartCurve } from "@tanstack/charts";
+//#region src/ui/chart-curves.d.ts
+export type ChartCurveName = "smooth" | "linear" | "step";
+export declare const smoothCurve: ChartCurve;
+export declare const stepCurve: ChartCurve;
+export declare function chartCurve(name: ChartCurveName): ChartCurve | undefined;
+//#endregion

package/dist/ui/chart-curves.js

@@ -0,0 +1,87 @@
+//#region src/ui/chart-curves.ts
+function monotoneTangents(points) {
+	const tangents = points.map(() => 0);
+	const last = points.length - 1;
+	for (let index = 1; index < last; index += 1) {
+		const [x0, y0] = points[index - 1] ?? [0, 0];
+		const [x1, y1] = points[index] ?? [0, 0];
+		const [x2, y2] = points[index + 1] ?? [0, 0];
+		const h0 = x1 - x0;
+		const h1 = x2 - x1;
+		const s0 = h0 ? (y1 - y0) / h0 : 0;
+		const s1 = h1 ? (y2 - y1) / h1 : 0;
+		const weightedSlope = (s0 * h1 + s1 * h0) / (h0 + h1);
+		tangents[index] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), .5 * Math.abs(weightedSlope)) || 0;
+	}
+	if (last > 0) {
+		tangents[0] = endTangent(points[0], points[1], tangents[1] ?? 0);
+		tangents[last] = endTangent(points[last - 1], points[last], tangents[last - 1] ?? 0);
+	}
+	return tangents;
+}
+function endTangent(from, to, neighbourTangent) {
+	if (!(from && to)) return neighbourTangent;
+	const h = to[0] - from[0];
+	return h ? (3 * (to[1] - from[1]) / h - neighbourTangent) / 2 : neighbourTangent;
+}
+function monotoneSegments(points) {
+	if (points.length < 3) return points.slice(1).map(([x, y]) => `L${x},${y}`);
+	const tangents = monotoneTangents(points);
+	return points.slice(1).map(([x1, y1], index) => {
+		const [x0, y0] = points[index] ?? [x1, y1];
+		const t0 = tangents[index] ?? 0;
+		const t1 = tangents[index + 1] ?? 0;
+		const dx = (x1 - x0) / 3;
+		return `C${x0 + dx},${y0 + dx * t0} ${x1 - dx},${y1 - dx * t1} ${x1},${y1}`;
+	});
+}
+function reversedMonotoneSegments(points) {
+	if (points.length < 3) return points.slice(0, -1).map(([x, y]) => `L${x},${y}`).reverse();
+	const tangents = monotoneTangents(points);
+	return points.slice(1).map(([x1, y1], index) => {
+		const [x0, y0] = points[index] ?? [x1, y1];
+		const t0 = tangents[index] ?? 0;
+		const t1 = tangents[index + 1] ?? 0;
+		const dx = (x1 - x0) / 3;
+		return `C${x1 - dx},${y1 - dx * t1} ${x0 + dx},${y0 + dx * t0} ${x0},${y0}`;
+	}).reverse();
+}
+function closedArea(top, bottom, topSegments, bottomSegments) {
+	const [firstX, firstY] = top[0] ?? [0, 0];
+	const [lastX, lastY] = bottom.at(-1) ?? top.at(-1) ?? [0, 0];
+	return `M${firstX},${firstY}${topSegments.join("")}L${lastX},${lastY}${bottomSegments.join("")}Z`;
+}
+const smoothCurve = {
+	line(points) {
+		if (points.length === 0) return "";
+		const [x, y] = points[0] ?? [0, 0];
+		return `M${x},${y}${monotoneSegments(points).join("")}`;
+	},
+	area(top, bottom) {
+		if (top.length === 0) return "";
+		return closedArea(top, bottom, monotoneSegments(top), reversedMonotoneSegments(bottom));
+	}
+};
+function stepSegments(points) {
+	return points.slice(1).map(([x, y]) => `H${x}V${y}`);
+}
+function reversedStepSegments(points) {
+	return points.slice(0, -1).map(([, y], index) => `V${y}H${points[index]?.[0] ?? 0}`).reverse();
+}
+const stepCurve = {
+	line(points) {
+		if (points.length === 0) return "";
+		const [x, y] = points[0] ?? [0, 0];
+		return `M${x},${y}${stepSegments(points).join("")}`;
+	},
+	area(top, bottom) {
+		if (top.length === 0) return "";
+		return closedArea(top, bottom, stepSegments(top), reversedStepSegments(bottom));
+	}
+};
+function chartCurve(name) {
+	if (name === "smooth") return smoothCurve;
+	if (name === "step") return stepCurve;
+}
+//#endregion
+export { chartCurve, smoothCurve, stepCurve };

package/dist/ui/chart-marks.d.ts

@@ -0,0 +1,68 @@
+import { ChartColor } from "./chart-colors.js";
+import { ChartFill, ChartSeriesRow, ChartXValue } from "./chart-series.js";
+import { ChartLinearGradient, ChartTooltipContentContext } from "@tanstack/charts";
+import { decorative } from "@tanstack/charts/mark/decorative";
+//#region src/ui/chart-marks.d.ts
+type AnyChartMark = Parameters<typeof decorative>[0];
+export type ChartPart = "area" | "area-hatched" | "line" | "dot" | "reference";
+export declare function chartPart<TMark extends AnyChartMark>(mark: TMark, ...parts: ChartPart[]): TMark;
+export declare function chartBars<TMark extends AnyChartMark>(mark: TMark, axis: "x" | "y"): TMark;
+export type ChartGradientKind = "area" | "bar-y" | "bar-y-negative" | "bar-x" | "bar-x-negative" | "arc";
+export declare function chartGradient(color: ChartColor, kind: ChartGradientKind): ChartLinearGradient;
+export declare function chartGradients(colors: Iterable<ChartColor>, kind: ChartGradientKind): ChartLinearGradient[];
+export declare function chartHatch(color: ChartColor): string;
+export declare function chartFillPaint(color: ChartColor, fill: ChartFill, kind: ChartGradientKind): string;
+type ChartBarPaintRow = {
+  color: ChartColor;
+  fill: ChartFill;
+  value: number | null;
+};
+export declare function chartBarFill(row: ChartBarPaintRow, axis: "x" | "y"): string;
+export declare function chartBarGradients(rows: readonly ChartBarPaintRow[], axis: "x" | "y"): ChartLinearGradient[];
+export declare function chartOutline(color: ChartColor, fill: ChartFill): string;
+export declare function quietAxis<TValue>(format: (value: TValue) => string): {
+  readonly line: false;
+  readonly ticks: {
+    readonly line: false;
+    readonly padding: 8;
+    readonly format: (value: TValue) => string;
+  };
+};
+export declare const quietGrid: {
+  readonly strokeDasharray: "3 3";
+};
+export declare const dimUnfocused: readonly [{
+  readonly when: {
+    readonly focus: "unmatched";
+  };
+  readonly style: {
+    readonly opacity: 0.4;
+  };
+}];
+export type ChartReference = {
+  value: number;
+  label?: string;
+  color?: ChartColor;
+};
+export declare function chartReferenceMarks(references: readonly ChartReference[], axis: "x" | "y", anchor: ChartXValue | undefined): ((import("@tanstack/charts").CartesianChartMark<ChartReference, number, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>> & {
+  readonly __decorativeMark: import("@tanstack/charts").CartesianChartMark<ChartReference, number, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>> | import("@tanstack/charts").CartesianChartMark<ChartReference, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, number, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>>;
+}) | (import("@tanstack/charts").CartesianChartMark<ChartReference, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, number, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>> & {
+  readonly __decorativeMark: import("@tanstack/charts").CartesianChartMark<ChartReference, number, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>> | import("@tanstack/charts").CartesianChartMark<ChartReference, NonNullable<ChartXValue>, number, NonNullable<ChartXValue>, number, import("@tanstack/charts/types/core").MarkScaleBindings<undefined, undefined>>;
+}))[];
+type SeriesPoint = {
+  key: string;
+  datum: ChartSeriesRow;
+};
+export declare function seriesTooltip(seriesLabels: readonly string[], formatX: (value: ChartXValue) => string, formatValue: (value: number) => string): {
+  use: import("@tanstack/charts").ChartTooltipExtension;
+  content: (points: readonly SeriesPoint[], context: ChartTooltipContentContext) => {
+    title: string | undefined;
+    rows: {
+      label: string;
+      value: string;
+      color: string;
+      active: boolean;
+    }[];
+  };
+};
+//#endregion