@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/MetricsLineChart-BnY9JKzc.cjs

@@ -0,0 +1,279 @@
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_components_ChartTooltip = require("./components/ChartTooltip.cjs.js");
+const require_components_ChartSkeleton = require("./components/ChartSkeleton.cjs.js");
+const require_primitives_chart_axes = require("./primitives/chart-axes.cjs.js");
+const require_primitives_chart_frame = require("./primitives/chart-frame.cjs.js");
+const require_primitives_chart_layout = require("./primitives/chart-layout.cjs.js");
+const require_primitives_chart_plot = require("./primitives/chart-plot.cjs.js");
+const require_primitives_chart_tooltip_position = require("./primitives/chart-tooltip-position.cjs.js");
+const require_primitives_use_chart_defs_id = require("./primitives/use-chart-defs-id.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+// src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx
+/** A marker and a label per series. Totals belong in the card's header, not here. */
+function MetricsLineChartLegend({ series, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("flex flex-wrap items-center gap-x-4 gap-y-1", className),
+		children: series.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "inline-flex items-center gap-1.5",
+			children: [s.dashed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "h-0 w-3 shrink-0 border-t-2 border-dashed",
+				style: { borderColor: s.color }
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "size-2 shrink-0 rounded-[2px]",
+				style: { backgroundColor: s.color }
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "body-sm",
+				tone: "muted",
+				className: "max-w-48 truncate",
+				children: s.label
+			})]
+		}, s.dataKey))
+	});
+}
+// src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx
+function MetricsLineChartTooltip({ active, payload, label, suffix, formatValue = (value) => value.toLocaleString("en-US"), showTotal = false, labelKey, formatByKey }) {
+	if (!active || !payload?.length) return null;
+	const finite = (value) => typeof value === "number" && Number.isFinite(value);
+	const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);
+	const hasReading = payload.some((entry) => finite(entry.value));
+	const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? "") : label;
+	const format = (entry) => formatByKey?.[String(entry.dataKey)] ?? formatValue;
+	const reading = (entry) => {
+		if (finite(entry.value)) return format(entry)(entry.value);
+		if (typeof entry.value === "number" || entry.value == null) return "—";
+		return entry.value;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_ChartTooltip.ChartTooltip, {
+		className: "min-w-32",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+			variant: "column",
+			tone: "ink",
+			className: "mb-1",
+			children: heading
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1",
+			children: [payload.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "contents",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "size-2 rounded-[2px]",
+						style: { backgroundColor: entry.color }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "caption",
+						tone: "muted",
+						className: "max-w-40 truncate",
+						children: entry.name
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-right font-mono text-foreground tabular-nums",
+						children: [reading(entry), finite(entry.value) && suffix]
+					})
+				]
+			}, entry.name)), showTotal && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					className: "col-span-2",
+					children: "Total"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-right font-mono text-foreground tabular-nums",
+					children: [hasReading ? formatValue(total) : "—", hasReading && suffix]
+				})]
+			})]
+		})]
+	});
+}
+// src/ds/components/MetricsLineChart/metrics-line-chart.tsx
+/** Line weight; an emphasised series adds half a pixel. */
+var LINE_WIDTH = 1.75;
+/** Opacity at the top of the fill under a line (it fades to nothing at the base). */
+var AREA_OPACITY = .12;
+var LINE_STYLES = {
+	default: {
+		width: LINE_WIDTH,
+		emphasis: 2.25,
+		areaOpacity: AREA_OPACITY
+	},
+	thin: {
+		width: 1.5,
+		emphasis: 1.5,
+		areaOpacity: AREA_OPACITY * .4
+	}
+};
+/**
+* Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical
+* edge where the line starts and stops. A mask sized to each fill's own box.
+*/
+var THIN_FILL_FADE = "[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]";
+/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */
+var SPARSE_POINTS = 1;
+function HoverLine({ points }) {
+	const [top, bottom] = points ?? [];
+	if (!top || !bottom) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+		x1: top.x,
+		x2: top.x,
+		y1: top.y,
+		y2: bottom.y,
+		...require_primitives_chart_axes.CHART_CURSOR_PROPS,
+		className: "pointer-events-none"
+	});
+}
+function MetricsLineChart(props) {
+	const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;
+	const root = require_utils.cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: root,
+		children: [showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsLineChartLegend, {
+			series,
+			className: "mb-4"
+		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_ChartSkeleton.ChartSkeleton, {
+			kind: "line",
+			height
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinePlot, { ...props })]
+	});
+}
+/** The plot itself, once the data is in. */
+function LinePlot({ data, series, height = 210, yDomain, onPointClick, onBucketClick, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, showDots = false, dots = "auto", lineStyle = "default", valueFormatter, axisFormatter, showYAxis = true, markers = [] }) {
+	const id = require_primitives_use_chart_defs_id.useChartDefsId();
+	const { size, onResize, ref } = require_primitives_chart_axes.useChartSize();
+	const format = valueFormatter ?? require_primitives_chart_frame.compactNumber.format;
+	const isSparse = (key) => data.filter((row) => typeof row[key] === "number").length <= SPARSE_POINTS;
+	const plotWidth = size.width - (showYAxis ? 44 : 0);
+	const line = LINE_STYLES[lineStyle];
+	const restDot = (s) => dots === "auto" && (showDots || isSparse(s.dataKey)) ? {
+		r: 3,
+		fill: s.color,
+		strokeWidth: 0
+	} : false;
+	const activeDot = (s) => ({
+		r: 3.5,
+		fill: s.color,
+		stroke: "var(--background)",
+		strokeWidth: 2,
+		...onPointClick && {
+			style: { cursor: "pointer" },
+			onClick: (_, payload) => {
+				if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);
+			}
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_chart_plot.ChartPlot, {
+		height,
+		plotRef: ref,
+		onResize,
+		clickable: !!onBucketClick,
+		className: require_utils.cn(lineStyle === "thin" && THIN_FILL_FADE),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.ComposedChart, {
+			data,
+			margin: require_primitives_chart_layout.CHART_MARGIN,
+			onClick: (state) => {
+				const i = state?.activeTooltipIndex;
+				const row = i === void 0 || i === null ? void 0 : data[Number(i)];
+				if (onBucketClick && row) onBucketClick(row, Number(i));
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: series.map((s, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+					id: `${id}-area-${i}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "0%",
+						stopColor: s.color,
+						stopOpacity: line.areaOpacity
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+						offset: "95%",
+						stopColor: s.color,
+						stopOpacity: 0
+					})]
+				}, s.dataKey)) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { ...require_primitives_chart_axes.CHART_GRID_PROPS }),
+				require_primitives_chart_frame.timeXAxis({
+					data,
+					xKey,
+					timestampKey,
+					xLabels,
+					plotWidth
+				}),
+				require_primitives_chart_frame.valueYAxis({
+					show: showYAxis,
+					size,
+					formatter: axisFormatter ?? format,
+					domain: yDomain,
+					max: require_primitives_chart_frame.dataMax(data, series.map((s) => s.dataKey)),
+					integer: require_primitives_chart_frame.isWholeData(data, series.map((s) => s.dataKey))
+				}),
+				markers.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
+					x: m.x,
+					stroke: "var(--border-strong)",
+					strokeDasharray: "3 3",
+					label: m.label ? {
+						value: m.label,
+						position: "insideTopLeft",
+						fill: "var(--muted-foreground)",
+						fontSize: 11
+					} : void 0
+				}, m.x)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
+					...require_primitives_chart_axes.CHART_TOOLTIP_PROPS,
+					content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_chart_tooltip_position.ChartTooltipPosition, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsLineChartTooltip, {
+						formatValue: format,
+						labelKey: tooltipLabelKey
+					}) }),
+					cursor: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverLine, {})
+				}),
+				series.map((s, i) => {
+					const common = {
+						type: "monotone",
+						dataKey: s.dataKey,
+						name: s.label,
+						stroke: s.color,
+						strokeWidth: s.emphasis ? line.emphasis : line.width,
+						strokeDasharray: s.dashed ? "4 3" : void 0,
+						dot: restDot(s),
+						activeDot: activeDot(s),
+						isAnimationActive: false,
+						connectNulls: true
+					};
+					return s.dashed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Line, { ...common }, s.dataKey) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Area, {
+						...common,
+						fill: `url(#${id}-area-${i})`,
+						fillOpacity: 1
+					}, s.dataKey);
+				})
+			]
+		})
+	});
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+Object.defineProperty(exports, "MetricsLineChart", {
+	enumerable: true,
+	get: function() {
+		return MetricsLineChart;
+	}
+});
+Object.defineProperty(exports, "MetricsLineChartLegend", {
+	enumerable: true,
+	get: function() {
+		return MetricsLineChartLegend;
+	}
+});
+Object.defineProperty(exports, "MetricsLineChartTooltip", {
+	enumerable: true,
+	get: function() {
+		return MetricsLineChartTooltip;
+	}
+});
+
+//# sourceMappingURL=MetricsLineChart-BnY9JKzc.cjs.map

package/dist/MetricsLineChart-BnY9JKzc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsLineChart-BnY9JKzc.cjs","names":["cn","Txt","ChartTooltip","Txt","CHART_CURSOR_PROPS","cn","ChartSkeleton","useChartDefsId","useChartSize","compactNumber","ChartPlot","ComposedChart","CHART_MARGIN","CartesianGrid","CHART_GRID_PROPS","timeXAxis","valueYAxis","dataMax","isWholeData","ReferenceLine","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","Line","Area"],"sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/** A marker and a label per series. Totals belong in the card's header, not here. */\nexport function MetricsLineChartLegend({\n  series,\n  className,\n}: {\n  series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-1', className)}>\n      {series.map(s => (\n        <div key={s.dataKey} className=\"inline-flex items-center gap-1.5\">\n          {s.dashed ? (\n            <span className=\"h-0 w-3 shrink-0 border-t-2 border-dashed\" style={{ borderColor: s.color }} />\n          ) : (\n            <div className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: s.color }} />\n          )}\n          <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-48 truncate\">\n            {s.label}\n          </Txt>\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n  showTotal = false,\n  labelKey,\n  formatByKey,\n}: {\n  active?: boolean;\n  payload?: Array<{\n    name: string;\n    value: number;\n    color: string;\n    dataKey?: string | number;\n    payload?: Record<string, unknown>;\n  }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n  /** Adds a \"Total\" row under a hairline: the sum of every row, e.g. a stacked column's height. */\n  showTotal?: boolean;\n  /** Read the heading from this field of the hovered row instead of the x-axis label. */\n  labelKey?: string;\n  /** Per-series formatters, by data key, for charts that mix units (counts and durations). */\n  formatByKey?: Record<string, (value: number) => string>;\n}) {\n  if (!active || !payload?.length) return null;\n  // A missing reading (NaN, Infinity) shows as a dash and stays out of the total.\n  const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);\n  const total = payload.reduce((sum, entry) => sum + (finite(entry.value) ? entry.value : 0), 0);\n  // A bucket with no readings at all totals to a dash, not 0.\n  const hasReading = payload.some(entry => finite(entry.value));\n  const heading = labelKey ? String(payload[0]?.payload?.[labelKey] ?? label ?? '') : label;\n  const format = (entry: { dataKey?: string | number }) => formatByKey?.[String(entry.dataKey)] ?? formatValue;\n  // A number through its formatter; a missing or non-finite one as a dash; text as it is.\n  const reading = (entry: (typeof payload)[number]) => {\n    if (finite(entry.value)) return format(entry)(entry.value);\n    if (typeof entry.value === 'number' || entry.value == null) return '—';\n    return entry.value;\n  };\n  return (\n    // A floor like shadcn's chart tooltip, so short readouts don't size it to their own label.\n    <ChartTooltip className=\"min-w-32\">\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {heading}\n      </Txt>\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 gap-y-1\">\n        {payload.map(entry => (\n          <div key={entry.name} className=\"contents\">\n            <span className=\"size-2 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-40 truncate\">\n              {entry.name}\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {reading(entry)}\n              {finite(entry.value) && suffix}\n            </span>\n          </div>\n        ))}\n        {showTotal && (\n          <div className=\"col-span-3 grid grid-cols-subgrid items-center border-t border-border pt-1\">\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"col-span-2\">\n              Total\n            </Txt>\n            <span className=\"text-right font-mono text-foreground tabular-nums\">\n              {hasReading ? formatValue(total) : '—'}\n              {hasReading && suffix}\n            </span>\n          </div>\n        )}\n      </div>\n    </ChartTooltip>\n  );\n}\n","import { Area, CartesianGrid, ComposedChart, Line, ReferenceLine, Tooltip } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport { CHART_CURSOR_PROPS, CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { Y_AXIS_WIDTH, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */\n  dashed?: boolean;\n  /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */\n  emphasis?: boolean;\n};\n\n/** Line weight; an emphasised series adds half a pixel. */\nconst LINE_WIDTH = 1.75;\n/** Opacity at the top of the fill under a line (it fades to nothing at the base). */\nconst AREA_OPACITY = 0.12;\n\n/**\n * How the series draw.\n * - `default`: 1.75px lines over a fill.\n * - `thin`: 1.5px lines (emphasis included) over a fainter fill (40% of the default), for small\n *   cards in a grid.\n */\nexport type MetricsLineChartLineStyle = 'default' | 'thin';\n\nconst LINE_STYLES: Record<MetricsLineChartLineStyle, { width: number; emphasis: number; areaOpacity: number }> = {\n  default: { width: LINE_WIDTH, emphasis: LINE_WIDTH + 0.5, areaOpacity: AREA_OPACITY },\n  thin: { width: 1.5, emphasis: 1.5, areaOpacity: AREA_OPACITY * 0.4 },\n};\n\n/**\n * Fills fade out sideways over their first and last 24px, so they don't end in a hard vertical\n * edge where the line starts and stops. A mask sized to each fill's own box.\n */\nconst THIN_FILL_FADE = '[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]';\n/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */\nconst SPARSE_POINTS = 1;\n\n// Jumps straight to the hovered point, with the dots and the tooltip.\nfunction HoverLine({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line x1={top.x} x2={top.x} y1={top.y} y2={bottom.y} {...CHART_CURSOR_PROPS} className=\"pointer-events-none\" />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport type MetricsLineChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Click on a series' active dot. */\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  /** Render a visible dot on every point. A series with a single point gets one anyway. */\n  showDots?: boolean;\n  /**\n   * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:\n   * none at rest, only the hovered point's.\n   */\n  dots?: 'auto' | 'hover';\n  /** Line weight and fill. `thin` suits small cards in a grid. */\n  lineStyle?: MetricsLineChartLineStyle;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n  /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  /**\n   * Vertical lines at buckets, e.g. where a billing period starts. `x` must be one of the data's\n   * `xKey` values: the axis is categorical, so any other value draws nothing.\n   */\n  markers?: { x: string; label?: string }[];\n  className?: string;\n};\n\nexport function MetricsLineChart(props: MetricsLineChartProps) {\n  const { data, series, height = 210, showLegend = true, isLoading = false, className } = props;\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root}>\n      {showLegend && <MetricsLineChartLegend series={series} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"line\" height={height} /> : <LinePlot {...props} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in. */\nfunction LinePlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  onBucketClick,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  showDots = false,\n  dots = 'auto',\n  lineStyle = 'default',\n  valueFormatter,\n  axisFormatter,\n  showYAxis = true,\n  markers = [],\n}: MetricsLineChartProps) {\n  const id = useChartDefsId();\n  const { size, onResize, ref } = useChartSize();\n\n  const format = valueFormatter ?? compactNumber.format;\n  const isSparse = (key: string) => data.filter(row => typeof row[key] === 'number').length <= SPARSE_POINTS;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const line = LINE_STYLES[lineStyle];\n  const restDot = (s: MetricsLineChartSeries) =>\n    dots === 'auto' && (showDots || isSparse(s.dataKey)) ? { r: 3, fill: s.color, strokeWidth: 0 } : false;\n  const activeDot = (s: MetricsLineChartSeries) => ({\n    r: 3.5,\n    fill: s.color,\n    stroke: 'var(--background)',\n    strokeWidth: 2,\n    ...(onPointClick && {\n      style: { cursor: 'pointer' },\n      onClick: (_: unknown, payload: unknown) => {\n        // Recharts passes the dot's props; the hovered row is under `payload`.\n        if (isRecord(payload) && isRecord(payload.payload)) onPointClick(payload.payload, s.dataKey);\n      },\n    }),\n  });\n\n  return (\n    <ChartPlot\n      height={height}\n      plotRef={ref}\n      onResize={onResize}\n      clickable={!!onBucketClick}\n      className={cn(lineStyle === 'thin' && THIN_FILL_FADE)}\n    >\n      <ComposedChart\n        data={data}\n        margin={CHART_MARGIN}\n        onClick={state => {\n          const i = state?.activeTooltipIndex;\n          const row = i === undefined || i === null ? undefined : data[Number(i)];\n          if (onBucketClick && row) onBucketClick(row, Number(i));\n        }}\n      >\n        <defs>\n          {series.map((s, i) => (\n            <linearGradient key={s.dataKey} id={`${id}-area-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={s.color} stopOpacity={line.areaOpacity} />\n              <stop offset=\"95%\" stopColor={s.color} stopOpacity={0} />\n            </linearGradient>\n          ))}\n        </defs>\n        <CartesianGrid {...CHART_GRID_PROPS} />\n        {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n        {valueYAxis({\n          show: showYAxis,\n          size,\n          formatter: axisFormatter ?? format,\n          domain: yDomain,\n          max: dataMax(\n            data,\n            series.map(s => s.dataKey),\n          ),\n          integer: isWholeData(\n            data,\n            series.map(s => s.dataKey),\n          ),\n        })}\n        {markers.map(m => (\n          <ReferenceLine\n            key={m.x}\n            x={m.x}\n            stroke=\"var(--border-strong)\"\n            strokeDasharray=\"3 3\"\n            label={\n              m.label\n                ? { value: m.label, position: 'insideTopLeft', fill: 'var(--muted-foreground)', fontSize: 11 }\n                : undefined\n            }\n          />\n        ))}\n        <Tooltip\n          {...CHART_TOOLTIP_PROPS}\n          content={\n            <ChartTooltipPosition>\n              <MetricsLineChartTooltip formatValue={format} labelKey={tooltipLabelKey} />\n            </ChartTooltipPosition>\n          }\n          cursor={<HoverLine />}\n        />\n        {series.map((s, i) => {\n          const common = {\n            type: 'monotone' as const,\n            dataKey: s.dataKey,\n            name: s.label,\n            stroke: s.color,\n            strokeWidth: s.emphasis ? line.emphasis : line.width,\n            strokeDasharray: s.dashed ? '4 3' : undefined,\n            dot: restDot(s),\n            activeDot: activeDot(s),\n            isAnimationActive: false,\n            connectNulls: true,\n          };\n          return s.dashed ? (\n            <Line key={s.dataKey} {...common} />\n          ) : (\n            <Area key={s.dataKey} {...common} fill={`url(#${id}-area-${i})`} fillOpacity={1} />\n          );\n        })}\n      </ComposedChart>\n    </ChartPlot>\n  );\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}

package/dist/MetricsStackedBarChart-Bmk0OjYp.js

@@ -0,0 +1,308 @@
+import { ChartSkeleton } from "./components/ChartSkeleton.es.js";
+import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-4w5lpH63.js";
+import { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from "./primitives/chart-axes.es.js";
+import { singleBarBox, stackedSegmentBox } from "./primitives/chart-column-layout.es.js";
+import { CHART_TICK, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from "./primitives/chart-frame.es.js";
+import { CHART_MARGIN } from "./primitives/chart-layout.es.js";
+import { ChartPlot } from "./primitives/chart-plot.es.js";
+import { ChartTooltipPosition } from "./primitives/chart-tooltip-position.es.js";
+import { DragSelectionBand } from "./primitives/charts/drag-selection/drag-selection-band.es.js";
+import { activeIndex } from "./primitives/charts/drag-selection/drag-selection-range.es.js";
+import { useDragSelection } from "./primitives/charts/drag-selection/use-drag-selection.es.js";
+import { useChartDefsId } from "./primitives/use-chart-defs-id.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from "recharts";
+// src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx
+/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */
+var RADIUS = 2;
+/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */
+var SEGMENT_GAP = 2;
+/** Opacity at the base of a segment's gradient (the top is fully opaque). */
+var GRADIENT_BASE = .75;
+/** Single-series bars: translucent body under a solid cap that marks the value. */
+var CAP_BODY = .55;
+var CAP_HEIGHT = 3;
+/** Opacity of the other columns while one is hovered. */
+var DIMMED = .3;
+var COLUMN_LABEL_SPACE = 16;
+function segmentShape({ fill, color, capped, keys, dataKey }) {
+	return function Segment({ x = 0, width = 0, index, payload, ...geo }) {
+		const values = keys.map((k) => Number(payload?.[k]) || 0);
+		const self = keys.indexOf(dataKey);
+		const box = {
+			y: geo.y ?? 0,
+			height: Math.max(geo.height ?? 0, 0)
+		};
+		const laid = keys.length > 1 ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP }) : singleBarBox(values[self] ?? 0, box);
+		if (!laid) return /* @__PURE__ */ jsx("g", {});
+		const { y, height: h } = laid;
+		const radius = Math.min(RADIUS, Math.floor(h / 3));
+		const bucket = { "data-bucket": index };
+		if (capped) return /* @__PURE__ */ jsxs("g", {
+			...bucket,
+			children: [/* @__PURE__ */ jsx(Rectangle, {
+				x,
+				y,
+				width,
+				height: h,
+				radius,
+				fill: color,
+				fillOpacity: CAP_BODY
+			}), /* @__PURE__ */ jsx(Rectangle, {
+				x,
+				y,
+				width,
+				height: Math.min(CAP_HEIGHT, h),
+				radius,
+				fill: color
+			})]
+		});
+		return /* @__PURE__ */ jsx("g", {
+			...bucket,
+			children: /* @__PURE__ */ jsx(Rectangle, {
+				x,
+				y,
+				width,
+				height: h,
+				radius,
+				fill
+			})
+		});
+	};
+}
+/**
+* Dims every column outside the hovered one, or outside the range being dragged. Its own tiny
+* state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the
+* bars on each move froze the pointer.
+*/
+function HoverDim({ scope, setter }) {
+	const [lit, setLit] = useState();
+	useLayoutEffect(() => {
+		setter.current = setLit;
+	}, [setter]);
+	if (!lit) return null;
+	const columns = `[data-chart-scope="${scope}"] [data-bucket]`;
+	const kept = Array.from({ length: lit.end - lit.start + 1 }, (_, i) => `${columns}[data-bucket="${lit.start + i}"]`).join(",");
+	return /* @__PURE__ */ jsx("style", { children: `${columns}{opacity:${DIMMED}}${kept}{opacity:1}` });
+}
+function MetricsStackedBarChart(props) {
+	const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;
+	const id = useChartDefsId();
+	const root = cn(height === "fill" && "flex min-h-0 flex-1 flex-col", className);
+	const legend = overlay ? [...series, {
+		...overlay,
+		dashed: true
+	}] : series;
+	return /* @__PURE__ */ jsxs("div", {
+		className: root,
+		"data-chart-scope": id,
+		children: [showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, {
+			series: legend,
+			className: "mb-4"
+		}), isLoading ? /* @__PURE__ */ jsx(ChartSkeleton, {
+			kind: "bar",
+			height
+		}) : /* @__PURE__ */ jsx(BarPlot, {
+			...props,
+			id
+		})]
+	});
+}
+/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */
+function BarPlot({ data, series, height = 210, yDomain, valueFormatter, axisFormatter, referenceLine, variant = "gradient", showYAxis = true, showTotal = series.length > 1, xKey = "time", timestampKey = "tsMs", xLabels = "auto", tooltipLabelKey, columnLabelKey, maxBarSize = 28, onBucketClick, onZoom, overlay, id }) {
+	const setLit = useRef(() => {});
+	const { size, onResize, ref } = useChartSize();
+	const selection = useDragSelection({
+		onSelect: onZoom,
+		onPreview: (range) => setLit.current(range)
+	});
+	const keyList = series.map((s) => s.dataKey).join("\0");
+	const colorList = series.map((s) => s.color).join("\0");
+	const shapes = useMemo(() => {
+		const keys = keyList.split("\0");
+		const colors = colorList.split("\0");
+		return keys.map((dataKey, i) => segmentShape({
+			fill: `url(#${id}-bar-${i})`,
+			color: colors[i] ?? "",
+			capped: variant === "capped",
+			keys,
+			dataKey
+		}));
+	}, [
+		keyList,
+		colorList,
+		variant,
+		id
+	]);
+	const format = valueFormatter ?? compactNumber.format;
+	const plotWidth = size.width - (showYAxis ? 44 : 0);
+	const margin = columnLabelKey ? {
+		...CHART_MARGIN,
+		top: CHART_MARGIN.top + COLUMN_LABEL_SPACE
+	} : CHART_MARGIN;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HoverDim, {
+		scope: id,
+		setter: setLit
+	}), /* @__PURE__ */ jsx(ChartPlot, {
+		height,
+		plotRef: ref,
+		onResize,
+		clickable: !!onBucketClick && !selection.enabled,
+		className: selection.className,
+		children: /* @__PURE__ */ jsxs(ComposedChart, {
+			data,
+			margin,
+			onMouseDown: selection.onMouseDown,
+			onMouseMove: (state) => {
+				if (selection.isDragging()) return selection.onMouseMove(state);
+				const index = activeIndex(state);
+				setLit.current(index === void 0 ? void 0 : {
+					start: index,
+					end: index
+				});
+			},
+			onMouseLeave: () => {
+				if (!selection.isDragging()) setLit.current(void 0);
+			},
+			onClick: (state) => {
+				if (selection.consumeReleaseClick()) return;
+				const i = activeIndex(state);
+				const row = i === void 0 ? void 0 : data[i];
+				if (onBucketClick && row && i !== void 0) onBucketClick(row, i);
+			},
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", {
+					id: `${id}-bar-${i}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: s.color,
+						stopOpacity: 1
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: s.color,
+						stopOpacity: GRADIENT_BASE
+					})]
+				}, s.dataKey)) }),
+				/* @__PURE__ */ jsx(CartesianGrid, { ...CHART_GRID_PROPS }),
+				selection.enabled && /* @__PURE__ */ jsx(DragSelectionBand, {
+					selection,
+					count: data.length
+				}),
+				timeXAxis({
+					data,
+					xKey,
+					timestampKey,
+					xLabels,
+					plotWidth
+				}),
+				valueYAxis({
+					show: showYAxis,
+					size,
+					formatter: axisFormatter ?? format,
+					domain: yDomain,
+					max: Math.max(dataMax(data, series.map((s) => s.dataKey), true), referenceLine?.value ?? 0),
+					integer: isWholeData(data, series.map((s) => s.dataKey))
+				}),
+				overlay && valueYAxis({
+					id: "overlay",
+					show: false,
+					size,
+					formatter: overlay.valueFormatter ?? compactNumber.format,
+					max: dataMax(data, [overlay.dataKey]),
+					integer: isWholeData(data, [overlay.dataKey]),
+					right: true
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					...CHART_TOOLTIP_PROPS,
+					cursor: false,
+					content: /* @__PURE__ */ jsx(ChartTooltipPosition, { children: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {
+						formatValue: format,
+						showTotal: showTotal && !overlay,
+						labelKey: tooltipLabelKey,
+						formatByKey: overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : void 0
+					}) })
+				}),
+				series.map((s, i) => /* @__PURE__ */ jsx(Bar, {
+					dataKey: s.dataKey,
+					name: s.label,
+					stackId: "1",
+					fill: s.color,
+					maxBarSize,
+					isAnimationActive: false,
+					shape: shapes[i],
+					children: columnLabelKey && /* @__PURE__ */ jsx(LabelList, {
+						dataKey: columnLabelKey,
+						content: (props) => /* @__PURE__ */ jsx(ColumnLabel, {
+							...props,
+							row: data[Number(props.index)],
+							keys: series.map(({ dataKey }) => dataKey),
+							self: i,
+							color: s.color
+						})
+					})
+				}, s.dataKey)),
+				overlay && /* @__PURE__ */ jsx(Line, {
+					yAxisId: "overlay",
+					type: "monotone",
+					dataKey: overlay.dataKey,
+					name: overlay.label,
+					stroke: overlay.color,
+					strokeWidth: 1.75,
+					strokeDasharray: "4 3",
+					dot: false,
+					activeDot: {
+						r: 3.5,
+						fill: overlay.color,
+						stroke: "var(--background)",
+						strokeWidth: 2
+					},
+					isAnimationActive: false,
+					connectNulls: true
+				}),
+				referenceLine && /* @__PURE__ */ jsx(ReferenceLine, {
+					y: referenceLine.value,
+					ifOverflow: "extendDomain",
+					stroke: referenceLine.color,
+					strokeDasharray: "4 4",
+					label: {
+						value: referenceLine.label,
+						position: "insideTopLeft",
+						...CHART_TICK
+					}
+				})
+			]
+		})
+	})] });
+}
+function paintedTop(values, self, box) {
+	if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;
+	return singleBarBox(values[self] ?? 0, box)?.y;
+}
+function ColumnLabel({ x, y, width, height, value, row, keys, self, color }) {
+	if (value === void 0 || value === null || value === "") return null;
+	const values = keys.map((key) => Number(row?.[key]) || 0);
+	const topmost = values.findLastIndex((v) => v > 0);
+	if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;
+	const top = paintedTop(values, self, {
+		y: Number(y),
+		height: Math.max(Number(height), 0)
+	}) ?? Number(y);
+	return /* @__PURE__ */ jsx("text", {
+		x: Number(x) + Number(width) / 2,
+		y: top - 6,
+		textAnchor: "middle",
+		fontSize: 11,
+		fill: color,
+		className: "tabular-nums",
+		children: String(value)
+	});
+}
+export { MetricsStackedBarChart as t };
+
+//# sourceMappingURL=MetricsStackedBarChart-Bmk0OjYp.js.map