@siyahi/ui 0.1.9-next.23 → 0.1.9-next.25

package/dist/components/registry/heatmap/status-heatmap.js

@@ -2,14 +2,14 @@ import { cn } from "../../../lib/utils.js";
 import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
 import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, createContext, use, useId, useMemo } from "react";
 import { format } from "date-fns";
 //#region src/components/registry/heatmap/status-heatmap.tsx
 const DEFAULT_COLORS = {
 	0: "var(--color-secondary)",
 	1: "var(--destructive)",
 	2: "var(--warning)",
-	3: "color-mix(in oklab, var(--muted-foreground) 40%, transparent)"
+	3: "color-mix(in oklab, var(--muted-foreground) 30%, transparent)"
 };
 const SEMANTIC_KEYS = {
 	0: "noData",
@@ -47,11 +47,28 @@ const resolveStatusLabel = (value, labels) => {
 		default: return `Status ${value}`;
 	}
 };
-const getStatusFill = (value, colors, highlighted = false) => {
-	const base = resolveColor(value, colors);
-	if (!highlighted) return base;
-	return `color-mix(in oklch, ${base} 60%, transparent)`;
-};
+const DEGRADED = 2;
+/** A degraded day's paint: amber in the lower half of the bar, the healthy grey above it. */
+const DegradedGradient = ({ id, colors, healthyValue }) => /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+	id,
+	x1: "0",
+	y1: "0",
+	x2: "0",
+	y2: "1",
+	children: [/* @__PURE__ */ jsx("stop", {
+		offset: "0.5",
+		style: { stopColor: resolveColor(healthyValue, colors) }
+	}), /* @__PURE__ */ jsx("stop", {
+		offset: "0.5",
+		style: { stopColor: resolveColor(DEGRADED, colors) }
+	})]
+}) });
+const NO_DATA = 0;
+/** A no-data day is drawn hollow unless the page gave that state a colour of its own. */
+const isHollow = (value, colors) => value === NO_DATA && colors?.[NO_DATA] === void 0 && colors?.noData === void 0;
+/** The outline a day carries in the field-edge colour: solid round a healthy day, dashed round a day with no data. */
+const edgeOf = (value, healthyValue, colors) => isHollow(value, colors) ? "dashed" : value === healthyValue ? "solid" : null;
+const blockPaint = (value, degradedId, colors) => value === DEGRADED ? { fill: `url(#${degradedId})` } : { fill: isHollow(value, colors) ? "transparent" : resolveColor(value, colors) };
 const EMPTY_STYLE = {};
 const LEGEND_SWATCH = 10;
 const MIN_FITTED_BAR = 2;
@@ -99,6 +116,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 	3
 ], healthyValue = 3, style = EMPTY_STYLE, className, children, ...props }) => {
 	const [rootRef, rootWidth] = useElementWidth();
+	const degradedId = `status-degraded-${useId().replace(/[^\w-]/g, "")}`;
 	const labels = useMemo(() => ({
 		statuses: {
 			noData: "No Data",
@@ -125,6 +143,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 	const width = dates.length * (blockWidth + blockMargin) - blockMargin;
 	const height = blockSize;
 	const contextValue = useMemo(() => ({
+		degradedId,
 		data,
 		dates,
 		blockMargin,
@@ -142,6 +161,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		locale,
 		colors
 	}), [
+		degradedId,
 		data,
 		dates,
 		blockMargin,
@@ -176,7 +196,8 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 	});
 };
 const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
-	const { blockSize, blockWidth, blockMargin, blockRadius, labels, colors } = useStatusHeatmap();
+	const { blockSize, blockWidth, blockMargin, blockRadius, labels, colors, degradedId, healthyValue } = useStatusHeatmap();
+	const edge = edgeOf(activity.value, healthyValue, colors);
 	const statusText = resolveStatusLabel(activity.value, labels.statuses);
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{status}}").replace("{{date}}", activity.date).replace("{{status}}", statusText);
 	const xPosition = (blockWidth + blockMargin) * dayIndex;
@@ -187,7 +208,7 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, sele
 		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
-		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+		className: cn(edge && "stroke-input stroke-1", "hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:stroke-ring focus-visible:stroke-2", className),
 		"data-value": activity.value,
 		"data-date": activity.date,
 		"data-highlighted": highlighted || void 0,
@@ -196,14 +217,11 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, sele
 		rx: blockRadius,
 		ry: blockRadius,
 		width: blockWidth,
+		strokeDasharray: edge === "dashed" ? "2 2" : void 0,
 		x: xPosition,
 		y: 0,
 		style: {
-			fill: getStatusFill(activity.value, colors, highlighted),
-			...selected ? {
-				stroke: "var(--foreground)",
-				strokeWidth: 2
-			} : {},
+			...blockPaint(activity.value, degradedId, colors),
 			...styleProp
 		},
 		onClick: (event) => {
@@ -231,7 +249,7 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, sele
 StatusHeatmapBlock.displayName = "StatusHeatmapBlock";
 const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, className, labelClassName, children, ...props }) => {
 	const navigation = useHeatmapNavigation();
-	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels } = useStatusHeatmap();
+	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels, colors, degradedId, healthyValue } = useStatusHeatmap();
 	const activityMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		data.forEach((activity) => {
@@ -265,31 +283,39 @@ const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, classNa
 			height: height + labelHeight + 6,
 			viewBox: `-3 -3 ${width + 6} ${height + labelHeight + 6}`,
 			width: width + 6,
-			children: [!hideDateLabels && /* @__PURE__ */ jsx("g", {
-				className: cn("fill-current font-mono", labelClassName),
-				children: dates.map((date, dayIndex) => {
-					const isFirst = dayIndex === 0;
-					const isLast = dayIndex === dates.length - 1;
-					if (dayIndex % labelInterval !== 0 && !isLast) return null;
-					const blockLeft = (blockWidth + blockMargin) * dayIndex;
-					const xPosition = isFirst ? blockLeft : isLast ? blockLeft + blockWidth : blockLeft + blockWidth / 2;
-					const anchor = isFirst ? "start" : isLast ? "end" : "middle";
-					return /* @__PURE__ */ jsx("text", {
-						x: xPosition,
-						y: height + labelFontSize,
-						dominantBaseline: "hanging",
-						textAnchor: anchor,
-						style: { fontSize: `${labelFontSize}px` },
-						children: format(new Date(date), dateFormat, { locale })
-					}, `date-${date}`);
+			children: [
+				/* @__PURE__ */ jsx(DegradedGradient, {
+					id: degradedId,
+					colors,
+					healthyValue
+				}),
+				!hideDateLabels && /* @__PURE__ */ jsx("g", {
+					className: cn("fill-current font-mono", labelClassName),
+					children: dates.map((date, dayIndex) => {
+						const isFirst = dayIndex === 0;
+						const isLast = dayIndex === dates.length - 1;
+						if (dayIndex % labelInterval !== 0 && !isLast) return null;
+						const blockLeft = (blockWidth + blockMargin) * dayIndex;
+						const xPosition = isFirst ? blockLeft : isLast ? blockLeft + blockWidth : blockLeft + blockWidth / 2;
+						const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+						return /* @__PURE__ */ jsx("text", {
+							x: xPosition,
+							y: height + labelFontSize,
+							dominantBaseline: "hanging",
+							textAnchor: anchor,
+							style: { fontSize: `${labelFontSize}px` },
+							children: format(new Date(date), dateFormat, { locale })
+						}, `date-${date}`);
+					})
+				}),
+				allActivities.map((activity, dayIndex) => {
+					const key = activity.date;
+					return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+						activity,
+						dayIndex
+					}) }, key);
 				})
-			}), allActivities.map((activity, dayIndex) => {
-				const key = activity.date;
-				return /* @__PURE__ */ jsx(Fragment$1, { children: children({
-					activity,
-					dayIndex
-				}) }, key);
-			})]
+			]
 		})
 	});
 };
@@ -314,7 +340,7 @@ const StatusHeatmapStat = ({ compute, label, className, children, ...props }) =>
 	});
 };
 const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { labels, statusValues, blockRadius, colors } = useStatusHeatmap();
+	const { labels, statusValues, blockRadius, colors, degradedId, healthyValue } = useStatusHeatmap();
 	const statuses = statusValues.map((value) => ({
 		value,
 		label: resolveStatusLabel(value, labelsProp ?? labels.statuses)
@@ -322,25 +348,38 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "status-heatmap-legend",
 		"aria-label": labels.legendLabel ?? "Status legend",
-		className: cn("ml-auto flex items-center gap-3", className),
+		className: cn("ml-auto flex flex-wrap items-center gap-x-3 gap-y-1", className),
 		...props,
 		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({
 			value: status.value,
 			label: status.label
 		}) }, `status-${status.value}`) : /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ jsx("svg", {
+			children: [/* @__PURE__ */ jsxs("svg", {
 				"aria-hidden": "true",
 				height: LEGEND_SWATCH,
 				width: LEGEND_SWATCH,
-				children: /* @__PURE__ */ jsx("rect", {
+				children: [status.value === DEGRADED && /* @__PURE__ */ jsx(DegradedGradient, {
+					id: `${degradedId}-legend`,
+					colors,
+					healthyValue
+				}), /* @__PURE__ */ jsx("rect", {
 					"data-value": status.value,
-					height: LEGEND_SWATCH,
+					...edgeOf(status.value, healthyValue, colors) ? {
+						x: .5,
+						y: .5,
+						height: 9,
+						width: 9,
+						className: "stroke-input",
+						strokeDasharray: edgeOf(status.value, healthyValue, colors) === "dashed" ? "2 1" : void 0
+					} : {
+						height: LEGEND_SWATCH,
+						width: LEGEND_SWATCH
+					},
 					rx: blockRadius,
 					ry: blockRadius,
-					width: LEGEND_SWATCH,
-					style: { fill: getStatusFill(status.value, colors) }
-				})
+					style: blockPaint(status.value, `${degradedId}-legend`, colors)
+				})]
 			}), /* @__PURE__ */ jsx("span", {
 				className: "font-medium text-muted-foreground text-xs",
 				children: status.label

package/dist/components/siyahi/change-grid.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/siyahi/change-grid.d.ts
+export interface ChangeGridRow {
+  label: string;
+  /** One figure per column, in column order; null where there is none, such as a month still to come. NaN counts as none. */
+  values: readonly (number | null)[];
+  /** The row's total as the page works it out: monthly returns compound rather than add. Leave it out for no total. */
+  total?: number | null;
+  /** Unique key when labels repeat. Defaults to `label`. */
+  key?: string;
+}
+export interface ChangeGridProps {
+  /** The column heads, such as the months of a financial year. */
+  columns: readonly string[];
+  rows: readonly ChangeGridRow[];
+  /** "pct" takes fractions, 0.025 for 2.5%; "money" takes amounts, written short in one unit. */
+  format?: "pct" | "money";
+  /** The change that takes the deepest tint, as a size. Defaults to the grid's largest, totals aside. */
+  range?: number;
+  /** Heads the total column, which draws when any row has a total. */
+  totalLabel?: string;
+  /** Names the table for a screen reader, such as "Monthly sales growth by year". */
+  label: string;
+  className?: string;
+}
+/**
+ * Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size
+ * as a Treemap tile is and written with its sign, with an optional total per row. The figure is always written, so
+ * the tint only helps the eye find the large months.
+ */
+export declare function ChangeGrid({ columns, rows, format, range, totalLabel, label, className }: ChangeGridProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/change-grid.js

@@ -0,0 +1,74 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { useFormat } from "../../lib/format.js";
+import { heat } from "../../lib/heat.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/change-grid.tsx
+const MINUS = "−";
+/** A figure the grid can draw: anything that is not a finite number, NaN included, is no figure at all. */
+const known = (value) => value != null && Number.isFinite(value) ? value : null;
+/**
+* Signed changes laid out rows by columns, such as each month of each year, every cell tinted by its sign and size
+* as a Treemap tile is and written with its sign, with an optional total per row. The figure is always written, so
+* the tint only helps the eye find the large months.
+*/
+function ChangeGrid({ columns, rows, format = "pct", range, totalLabel = "Total", label, className }) {
+	const f = useFormat();
+	const sizes = rows.flatMap(({ values }) => values.flatMap((value) => known(value) ?? []).map(Math.abs));
+	const deepest = known(range) ?? Math.max(0, ...sizes);
+	const write = (value) => {
+		if (value === null) return "—";
+		const size = format === "money" ? f.moneyCompact(Math.abs(value), deepest) : f.pct(Math.abs(value));
+		return `${value > 0 ? "+" : value < 0 ? MINUS : ""}${size}`;
+	};
+	const totals = rows.some((row) => row.total !== void 0);
+	return /* @__PURE__ */ jsxs(Table, {
+		"aria-label": label,
+		"data-slot": "change-grid",
+		className: cn("border-separate border-spacing-0.5", className),
+		children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, {
+			className: "hover:bg-transparent",
+			children: [
+				/* @__PURE__ */ jsx(TableHead, {
+					className: "sticky left-0 bg-card",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Row"
+					})
+				}),
+				columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+					className: "text-right",
+					children: column
+				}, column)),
+				totals && /* @__PURE__ */ jsx(TableHead, {
+					className: "text-right",
+					children: totalLabel
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, {
+			className: "border-0 hover:bg-transparent",
+			children: [
+				/* @__PURE__ */ jsx(TableHead, {
+					scope: "row",
+					className: "sticky left-0 bg-card font-medium",
+					children: row.label
+				}),
+				columns.map((column, index) => {
+					const value = known(row.values[index]);
+					return /* @__PURE__ */ jsx(TableCell, {
+						"data-slot": "change-grid-cell",
+						className: cn("rounded-sm text-right font-mono tabular-nums", value === null && "text-muted-foreground"),
+						style: { backgroundColor: heat(value, deepest) },
+						children: write(value)
+					}, column);
+				}),
+				totals && /* @__PURE__ */ jsx(TableCell, {
+					className: "text-right font-mono font-medium tabular-nums",
+					children: write(known(row.total))
+				})
+			]
+		}, row.key ?? row.label)) })]
+	});
+}
+//#endregion
+export { ChangeGrid };

package/dist/components/siyahi/delta.js

@@ -17,11 +17,11 @@ function Delta({ value, format = "pct", className }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "delta",
 		"data-direction": direction,
-		className: cn("inline-flex items-center gap-1 whitespace-nowrap", className),
+		className: cn("inline-flex items-baseline gap-1 whitespace-nowrap", className),
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				className: cn("size-3.5 shrink-0", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
+				className: cn("size-3.5 shrink-0 self-center", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
 			}),
 			direction === "up" ? "+" : direction === "down" ? MINUS : "",
 			size

package/dist/components/siyahi/drawdown-chart.d.ts

@@ -0,0 +1,34 @@
+import { NumericKey, SeriesChartProps } from "../../lib/chart-series.js";
+//#region src/components/siyahi/drawdown-chart.d.ts
+/** One point as drawn: how far the level sits below the highest it had reached, and that high. */
+export interface DrawdownPoint<X> {
+  x: X;
+  /** The fall from the peak as a fraction, 0 at a new high and −0.25 a quarter below it; null when the level is unknown. */
+  drawdown: number | null;
+  /** The highest level so far. */
+  peak: number;
+  level: number | null;
+}
+/**
+ * Walks the levels in order, keeping the highest so far. A level that is not a finite number has no drawdown and
+ * leaves the peak as it was; the first level is the first peak.
+ */
+export declare function drawdowns<X>(levels: readonly {
+  x: X;
+  level: number | null;
+}[]): DrawdownPoint<X>[];
+export interface DrawdownChartCardProps<T extends object, K extends keyof T> extends Pick<SeriesChartProps<T, K>, "title" | "description" | "action" | "data" | "xKey" | "height" | "xFormatter" | "xTooltipFormatter" | "xTicks" | "placeholder" | "footer"> {
+  /** The field holding the level, such as the day's cash balance or a fund's value. */
+  levelKey: NumericKey<T>;
+  /** Writes the level and the peak in the tooltip. Defaults to useFormat().money. */
+  levelFormatter?: (value: number) => string;
+  /** Names the fall in the legend and tooltip. */
+  label?: string;
+}
+/**
+ * How far a level sits below the highest it had reached, over time: a fund's or a cash balance's fall from its
+ * peak. The area hangs from zero in the loss colour, so the deepest and longest falls read at once, and a dashed
+ * line marks the deepest one. Levels must be above zero: a fall is a share of the peak.
+ */
+export declare function DrawdownChartCard<T extends object, K extends keyof T>({ data, xKey, levelKey, levelFormatter, label, xFormatter, xTooltipFormatter, xTicks, ...props }: DrawdownChartCardProps<T, K>): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/drawdown-chart.js

@@ -0,0 +1,102 @@
+import { ChartFrame } from "../../lib/chart-frame.js";
+import { useFormat } from "../../lib/format.js";
+import { linearTicks } from "../../lib/scatter.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Area, AreaChart } from "recharts";
+//#region src/components/siyahi/drawdown-chart.tsx
+/**
+* Walks the levels in order, keeping the highest so far. A level that is not a finite number has no drawdown and
+* leaves the peak as it was; the first level is the first peak.
+*/
+function drawdowns(levels) {
+	let peak = Number.NEGATIVE_INFINITY;
+	return levels.map(({ x, level }) => {
+		if (level === null || !Number.isFinite(level)) return {
+			x,
+			level: null,
+			drawdown: null,
+			peak
+		};
+		peak = Math.max(peak, level);
+		return {
+			x,
+			level,
+			peak,
+			drawdown: peak > 0 ? level / peak - 1 : 0
+		};
+	});
+}
+/**
+* How far a level sits below the highest it had reached, over time: a fund's or a cash balance's fall from its
+* peak. The area hangs from zero in the loss colour, so the deepest and longest falls read at once, and a dashed
+* line marks the deepest one. Levels must be above zero: a fall is a share of the peak.
+*/
+function DrawdownChartCard({ data, xKey, levelKey, levelFormatter, label = "Below peak", xFormatter = String, xTooltipFormatter, xTicks, ...props }) {
+	const f = useFormat();
+	const formatLevel = levelFormatter ?? ((value) => f.money(value));
+	const points = useMemo(() => drawdowns(data.map((row) => ({
+		x: row[xKey],
+		level: row[levelKey]
+	}))), [
+		data,
+		xKey,
+		levelKey
+	]);
+	const fall = (value) => value < 0 ? `−${f.pct(-value)}` : f.pct(0);
+	const deepest = Math.min(0, ...points.flatMap(({ drawdown }) => drawdown ?? []));
+	const ticks = linearTicks(Math.min(deepest, -.01), 0);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		chart: AreaChart,
+		...props,
+		data: points,
+		xKey: "x",
+		xFormatter: (x) => xFormatter(x),
+		xTooltipFormatter: (x) => (xTooltipFormatter ?? xFormatter)(x),
+		xTicks,
+		series: [{
+			key: "drawdown",
+			label,
+			color: "var(--negative)"
+		}],
+		yDomain: [Math.min(deepest, ticks[0] ?? deepest), 0],
+		yTicks: ticks,
+		yTickFormatter: (value) => fall(value),
+		referenceLines: deepest < 0 ? [{
+			y: deepest,
+			label: `Deepest ${fall(deepest)}`,
+			labelPosition: "insideBottomRight"
+		}] : [],
+		tooltipRow: (_value, _name, item) => {
+			const point = item.payload;
+			return (point.drawdown === null ? [[label, "—"]] : [
+				[label, fall(point.drawdown)],
+				["Level", formatLevel(point.level ?? 0)],
+				["Peak so far", formatLevel(point.peak)]
+			]).map(([name, figure]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: figure
+				})]
+			}, name));
+		},
+		children: /* @__PURE__ */ jsx(Area, {
+			dataKey: "drawdown",
+			name: label,
+			type: "linear",
+			baseValue: 0,
+			stroke: "var(--negative)",
+			strokeWidth: 2,
+			fill: "color-mix(in oklab, var(--negative) 25%, var(--card))",
+			fillOpacity: 1,
+			dot: false,
+			connectNulls: false
+		})
+	});
+}
+//#endregion
+export { DrawdownChartCard, drawdowns };

package/dist/components/siyahi/histogram-chart.d.ts

@@ -0,0 +1,57 @@
+import { ChartReferenceLine, SeriesChartProps } from "../../lib/chart-series.js";
+//#region src/components/siyahi/histogram-chart.d.ts
+/** One bucket: the values from `from` up to, not including, `to`; the last bucket takes its upper edge too. */
+export interface HistogramBin {
+  key: string;
+  from: number;
+  to: number;
+  count: number;
+}
+/**
+ * Buckets of one round width (1, 2, 2.5 or 5 × 10ⁿ) covering the values, about `target` of them. Values that are not
+ * finite numbers are left out.
+ */
+export declare function histogram(values: readonly number[], target?: number): HistogramBin[];
+/**
+ * The bucket a value falls in, read against the buckets' own edges: dividing by the width instead put 0.3 in the
+ * 0.2–0.3 bucket, as 0.3 / 0.1 is 2.9999999999999996. A value past the last edge belongs to the last bucket.
+ */
+export declare function bucketOf(bins: readonly HistogramBin[], value: number): number;
+/** The value below which `share` of the values fall, interpolating between the two nearest, as spreadsheets do. */
+export declare function percentile(values: readonly number[], share: number): number | null;
+declare const MARKS: {
+  readonly median: 0.5;
+  readonly p90: 0.9;
+  readonly p95: 0.95;
+  readonly p99: 0.99;
+};
+export type HistogramMark = keyof typeof MARKS;
+/**
+ * One line per bucket that holds a mark, named by its marks: marks that share a bucket share a line and a name,
+ * "median, p90", rather than drawing over each other.
+ */
+export declare function markLines(bins: readonly HistogramBin[], marked: readonly {
+  mark: HistogramMark;
+  value: number;
+}[]): ChartReferenceLine[];
+export interface HistogramChartCardProps extends Pick<SeriesChartProps<HistogramBin, "key">, "title" | "description" | "action" | "height" | "xLabel" | "yLabel" | "placeholder" | "footer"> {
+  /** The raw values, one per item, such as each request's response time. */
+  values: readonly number[];
+  /** About how many buckets; the width is rounded, so the count varies a little. */
+  bins?: number;
+  /** Writes the bucket edges and the marks, such as (v) => `${v} ms`. Defaults to the locale's numbers. */
+  valueFormatter?: (value: number) => string;
+  /** The bucket edges under the axis, when they should be shorter than valueFormatter: 1,000 against 1,000 ms. */
+  tickFormatter?: (value: number) => string;
+  /** What is counted, in the legend and tooltip, such as "Requests". */
+  countLabel?: string;
+  /** Percentiles to mark with a line at their bucket; their exact values are written under the chart. */
+  marks?: readonly HistogramMark[];
+}
+/**
+ * How values spread: counts in buckets of one round width, such as response times by 50 ms, with the median or a
+ * high percentile marked. The page gives the raw values; the card buckets them.
+ */
+export declare function HistogramChartCard({ values, bins: target, valueFormatter, tickFormatter, countLabel, marks, ...props }: HistogramChartCardProps): import("react").JSX.Element;
+//#endregion
+export {};