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

package/dist/MetricsStackedBarChart-CDLE76IB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MetricsStackedBarChart-CDLE76IB.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\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  /** Formats tooltip values, 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  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\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  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\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  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}

package/dist/MetricsStackedBarChart-D2QyS4-z.js

@@ -1,308 +0,0 @@
-import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as MetricsLineChartTooltip, r as MetricsLineChartLegend } from "./MetricsLineChart-4SwxBbQx.js";
-import { CHART_MARGIN } from "./primitives/chart-layout.es.js";
-import { ChartSkeleton } from "./components/ChartSkeleton.es.js";
-import { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from "./primitives/chart-axes.es.js";
-import { CHART_TICK, compactNumber, dataMax, isWholeData, timeXAxis, valueYAxis } from "./primitives/chart-frame.es.js";
-import { ChartPlot } from "./primitives/chart-plot.es.js";
-import { ChartTooltipPosition } from "./primitives/chart-tooltip-position.es.js";
-import { useChartDefsId } from "./primitives/use-chart-defs-id.es.js";
-import { singleBarBox, stackedSegmentBox } from "./primitives/chart-column-layout.es.js";
-import { activeIndex } from "./primitives/charts/drag-selection/drag-selection-range.es.js";
-import { DragSelectionBand } from "./primitives/charts/drag-selection/drag-selection-band.es.js";
-import { useDragSelection } from "./primitives/charts/drag-selection/use-drag-selection.es.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-D2QyS4-z.js.map

package/dist/MetricsStackedBarChart-D2QyS4-z.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MetricsStackedBarChart-D2QyS4-z.js","names":["_Fragment"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\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  /** Formats tooltip values, 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  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\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  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\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  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}