@dudousxd/nestjs-telescope-ui 1.21.0 → 1.22.0

package/dist/react/components/charts/breakdown-card.js

@@ -1,26 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { ChartCard } from './chart-card.js';
-import { tooltipContentStyle, tooltipItemStyle, tooltipLabelStyle } from './chart-theme.js';
-const DEFAULT_PALETTE = ['#34d399', '#fbbf24', '#f87171', '#38bdf8', '#a78bfa'];
-function resolveColor(index, override) {
-    if (override)
-        return override;
-    return DEFAULT_PALETTE[index % DEFAULT_PALETTE.length] ?? '#71717a';
-}
-export function BreakdownCard({ title, segments, style = 'donut', height = 220, }) {
+import { useMemo } from 'react';
+import { Bar, BarChart, Cell, Pie, PieChart } from 'recharts';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '../../ui/chart.js';
+import { ChartCard, ChartEmptyState } from './chart-card.js';
+import { chartSelection } from './chart-selection.js';
+import { chartConfig, hexForSegment } from './chart-theme.js';
+/** Donut (default) or single stacked bar showing how a total splits by category. */
+export function BreakdownCard({ title, segments, style = 'donut', height = 220, onSelect, }) {
     const bodyHeight = height - 64;
+    const config = useMemo(() => chartConfig(segments.map((s) => s.label), (label, index) => hexForSegment(label, index, segments[index]?.color)), [segments]);
+    function select(index) {
+        const segment = segments[index];
+        if (segment && onSelect) {
+            onSelect(chartSelection({ label: segment.label, value: segment.value }));
+        }
+    }
+    // Recharts hands a click handler its own datum first; the index is what we
+    // actually key off, so the datum is deliberately ignored.
+    const clickProps = onSelect
+        ? { onClick: (_datum, index) => select(index), cursor: 'pointer' }
+        : {};
+    if (segments.length === 0) {
+        return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartEmptyState, { height: bodyHeight }) }));
+    }
     if (style === 'bar') {
-        const data = [
+        // One row, one stacked bar per segment: the chart is a single 100% bar, so
+        // every segment is its own series rather than a row in a shared one.
+        const row = [
             { name: 'breakdown', ...Object.fromEntries(segments.map((s) => [s.label, s.value])) },
         ];
-        return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChart, { data: data, layout: "vertical", children: [_jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle }), segments.map((seg, i) => (_jsx(Bar, { dataKey: seg.label, stackId: "a", fill: resolveColor(i, seg.color), isAnimationActive: false }, seg.label)))] }) }) }));
+        return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartContainer, { config: config, children: _jsxs(BarChart, { data: row, layout: "vertical", children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), segments.map((segment, index) => (_jsx(Bar, { dataKey: segment.label, stackId: "a", fill: hexForSegment(segment.label, index, segment.color), isAnimationActive: false, ...(onSelect ? { onClick: () => select(index), cursor: 'pointer' } : {}) }, segment.label)))] }) }) }));
     }
-    const pieData = segments.map((seg, i) => ({
-        name: seg.label,
-        value: seg.value,
-        fill: resolveColor(i, seg.color),
+    const pieData = segments.map((segment, index) => ({
+        name: segment.label,
+        value: segment.value,
+        // `color` (not `fill`) so the hover card and the legend resolve the segment's
+        // own hue — see `seriesColor` in the vendored chart layer.
+        color: hexForSegment(segment.label, index, segment.color),
     }));
-    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(PieChart, { children: [_jsx(Pie, { data: pieData, dataKey: "value", nameKey: "name", innerRadius: "55%", outerRadius: "80%", isAnimationActive: false, children: pieData.map((entry) => (_jsx(Cell, { fill: entry.fill }, entry.name))) }), _jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle })] }) }) }));
+    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsx(ChartContainer, { config: config, children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Pie, { data: pieData, dataKey: "value", nameKey: "name", innerRadius: "55%", outerRadius: "80%", isAnimationActive: false, ...clickProps, children: pieData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) })] }) }) }));
 }
 //# sourceMappingURL=breakdown-card.js.map

package/dist/react/components/charts/breakdown-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakdown-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/breakdown-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"breakdown-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/breakdown-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EACL,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQ9D,oFAAoF;AACpF,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,MAAM,GAAG,GAAG,EACZ,QAAQ,GAQT;IACC,MAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CACH,WAAW,CACT,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAC5B,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CACtE,EACH,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,MAAM,CAAC,KAAa;QAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,OAAO,IAAI,QAAQ,EAAE,CAAC;YACxB,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAED,2EAA2E;IAC3E,0DAA0D;IAC1D,MAAM,UAAU,GAAG,QAAQ;QACzB,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,MAAe,EAAE,KAAa,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAkB,EAAE;QAC5F,CAAC,CAAC,EAAE,CAAC;IAEP,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,YACzC,KAAC,eAAe,IAAC,MAAM,EAAE,UAAU,GAAI,GAC7B,CACb,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QACpB,2EAA2E;QAC3E,qEAAqE;QACrE,MAAM,GAAG,GAAG;YACV,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;SACtF,CAAC;QACF,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,YACzC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,QAAQ,IAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,UAAU,aACpC,KAAC,YAAY,IAAC,OAAO,EAAE,KAAC,mBAAmB,IAAC,SAAS,SAAG,GAAI,EAC5D,KAAC,WAAW,IAAC,OAAO,EAAE,KAAC,kBAAkB,KAAG,GAAI,EAC/C,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,GAAG,IAEF,OAAO,EAAE,OAAO,CAAC,KAAK,EACtB,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,EACxD,iBAAiB,EAAE,KAAK,KACpB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAkB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAL7E,OAAO,CAAC,KAAK,CAMlB,CACH,CAAC,IACO,GACI,GACP,CACb,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAChD,IAAI,EAAE,OAAO,CAAC,KAAK;QACnB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,8EAA8E;QAC9E,2DAA2D;QAC3D,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC;KAC1D,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,YACzC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,YAC5B,MAAC,QAAQ,eACP,KAAC,YAAY,IAAC,OAAO,EAAE,KAAC,mBAAmB,IAAC,SAAS,SAAG,GAAI,EAC5D,KAAC,WAAW,IAAC,OAAO,EAAE,KAAC,kBAAkB,KAAG,GAAI,EAChD,KAAC,GAAG,IACF,IAAI,EAAE,OAAO,EACb,OAAO,EAAC,OAAO,EACf,OAAO,EAAC,MAAM,EACd,WAAW,EAAC,KAAK,EACjB,WAAW,EAAC,KAAK,EACjB,iBAAiB,EAAE,KAAK,KACpB,UAAU,YAEb,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,IAAI,IAAkB,IAAI,EAAE,KAAK,CAAC,KAAK,IAA7B,KAAK,CAAC,IAAI,CAAuB,CAC7C,CAAC,GACE,IACG,GACI,GACP,CACb,CAAC;AACJ,CAAC"}

package/dist/react/components/charts/chart-card.d.ts

@@ -5,6 +5,13 @@ export declare function ChartCard({ title, right, height, children, }: {
     height?: number;
     children: React.ReactNode;
 }): JSX.Element;
+/**
+ * "Nothing in this window" body. `height` is optional: given one it reserves
+ * exactly the space the chart would have taken, and without one it fills its
+ * parent — which is what a card that puts something else (percentile chips) above
+ * the chart needs, since there the chart's share of the body is not the card's
+ * height.
+ */
 export declare function ChartEmptyState({ height }: {
     height?: number;
 }): JSX.Element;

package/dist/react/components/charts/chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,CAYd;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAY,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CASlF"}
+{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,GAAG,CAAC,OAAO,CAYd;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAS5E"}

package/dist/react/components/charts/chart-card.js

@@ -3,7 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ChartCard({ title, right, height = 220, children, }) {
     return (_jsxs("section", { className: "rounded-lg border border-line bg-panel/40 p-4", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: title }), right] }), _jsx("div", { style: { height }, children: children })] }));
 }
-export function ChartEmptyState({ height = 220 }) {
-    return (_jsx("div", { className: "flex items-center justify-center text-xs text-muted-foreground", style: { height }, children: "No data in window." }));
+/**
+ * "Nothing in this window" body. `height` is optional: given one it reserves
+ * exactly the space the chart would have taken, and without one it fills its
+ * parent — which is what a card that puts something else (percentile chips) above
+ * the chart needs, since there the chart's share of the body is not the card's
+ * height.
+ */
+export function ChartEmptyState({ height }) {
+    return (_jsx("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", style: height === undefined ? undefined : { height }, children: "No data in window." }));
 }
 //# sourceMappingURL=chart-card.js.map

package/dist/react/components/charts/chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":";AAAA,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,QAAQ,GAMT;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,+CAA+C,aAChE,kBAAQ,SAAS,EAAC,wCAAwC,aACxD,aAAI,SAAS,EAAC,mEAAmE,YAC9E,KAAK,GACH,EACJ,KAAK,IACC,EACT,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,YAAG,QAAQ,GAAO,IAChC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,GAAG,GAAG,EAAuB;IACnE,OAAO,CACL,cACE,SAAS,EAAC,gEAAgE,EAC1E,KAAK,EAAE,EAAE,MAAM,EAAE,mCAGb,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-card.tsx"],"names":[],"mappings":";AAAA,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,QAAQ,GAMT;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,+CAA+C,aAChE,kBAAQ,SAAS,EAAC,wCAAwC,aACxD,aAAI,SAAS,EAAC,mEAAmE,YAC9E,KAAK,GACH,EACJ,KAAK,IACC,EACT,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,YAAG,QAAQ,GAAO,IAChC,CACX,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAuB;IAC7D,OAAO,CACL,cACE,SAAS,EAAC,uEAAuE,EACjF,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,mCAGhD,CACP,CAAC;AACJ,CAAC"}

package/dist/react/components/charts/chart-selection.d.ts

@@ -0,0 +1,44 @@
+/**
+ * What a user clicked inside a chart, in the one shape every card reports it.
+ *
+ * This is the drill-down intent and nothing more: a card knows what was clicked,
+ * it does not know what that should filter. The caller decides — `PanelView`
+ * forwards the selection, the extension dashboard turns it into provider query
+ * state. Keeping the card ignorant is what lets the same `AreaChartCard` sit on
+ * the Overview page (where clicking means nothing and no callback is passed) and
+ * on an extension dashboard (where it filters the page).
+ */
+export interface ChartSelection {
+    /** The category, bucket or x-axis label under the click. */
+    label: string;
+    /** Series key when the chart draws more than one; absent for single-series charts. */
+    series?: string;
+    /** Provider-supplied stable id, when the datum carried one (topN items do). */
+    id?: string;
+    /** The value at the click, when the click resolved to a single datum. */
+    value?: number;
+}
+/**
+ * Build a {@link ChartSelection} without tripping `exactOptionalPropertyTypes`,
+ * which rejects an explicit `undefined` for an optional field. Every card builds
+ * its selection here so "no id" is consistently an absent key rather than a
+ * present `undefined` — the difference shows up the moment a selection is spread
+ * into a query object.
+ */
+export declare function chartSelection(input: {
+    label: string;
+    series?: string | undefined;
+    id?: string | undefined;
+    value?: number | undefined;
+}): ChartSelection;
+/**
+ * The x-axis label under a click on a cartesian chart.
+ *
+ * A click on an area or a line has no single datum — Recharts reports the whole
+ * hovered category in its chart-level event state instead, and types that state
+ * loosely enough that reading it is a runtime question, not a compile-time one.
+ * Returns undefined when the click landed on chrome (axis, legend, padding),
+ * which is the case a drill-down must ignore rather than fire an empty filter.
+ */
+export declare function activeChartLabel(state: unknown): string | undefined;
+//# sourceMappingURL=chart-selection.d.ts.map

package/dist/react/components/charts/chart-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-selection.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,GAAG,cAAc,CAOjB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAKnE"}

package/dist/react/components/charts/chart-selection.js

@@ -0,0 +1,36 @@
+/**
+ * Build a {@link ChartSelection} without tripping `exactOptionalPropertyTypes`,
+ * which rejects an explicit `undefined` for an optional field. Every card builds
+ * its selection here so "no id" is consistently an absent key rather than a
+ * present `undefined` — the difference shows up the moment a selection is spread
+ * into a query object.
+ */
+export function chartSelection(input) {
+    return {
+        label: input.label,
+        ...(input.series !== undefined ? { series: input.series } : {}),
+        ...(input.id !== undefined ? { id: input.id } : {}),
+        ...(input.value !== undefined ? { value: input.value } : {}),
+    };
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+/**
+ * The x-axis label under a click on a cartesian chart.
+ *
+ * A click on an area or a line has no single datum — Recharts reports the whole
+ * hovered category in its chart-level event state instead, and types that state
+ * loosely enough that reading it is a runtime question, not a compile-time one.
+ * Returns undefined when the click landed on chrome (axis, legend, padding),
+ * which is the case a drill-down must ignore rather than fire an empty filter.
+ */
+export function activeChartLabel(state) {
+    if (!isRecord(state))
+        return undefined;
+    const label = state.activeLabel;
+    if (typeof label === 'string' && label.length > 0)
+        return label;
+    return typeof label === 'number' ? String(label) : undefined;
+}
+//# sourceMappingURL=chart-selection.js.map

package/dist/react/components/charts/chart-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-selection.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-selection.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,KAK9B;IACC,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,GAAG,CAAC,KAAK,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnD,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC7D,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAAc;IAC9B,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC;AACrD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;IACvC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;IAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,KAAK,CAAC;IAChE,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/D,CAAC"}

package/dist/react/components/charts/chart-theme.d.ts

@@ -1,22 +1,49 @@
+import type { ChartConfig } from '../../ui/chart.js';
 /**
- * Shared theme values for the Recharts chart cards. Only this folder imports
- * Recharts, so this is the one place chart colours are decided.
+ * Series colours for the chart cards. This file is the ONE place a chart decides
+ * what colour a series is; the chrome around it (grid, axes, tick text, brush,
+ * tooltip, legend) belongs to the vendored `ChartContainer` in `../../ui/chart.tsx`.
  *
- * Two palettes live here and they are NOT the same thing:
- *  - `TYPE_HEX` is CATEGORICAL: one hue per entry type, chosen to be mutually
- *    distinguishable. It is data, and deliberately does not go through the Aviary
- *    status tokens — a `request` series is not "healthy", it is just requests.
- *  - `chartTheme` / `ACCENT_HEX` is CHROME: grid, axes, tooltip, the throughput
- *    accent. Those follow the console tokens so they theme with everything else.
+ * That split is the point. Colours here are DATA — one hue per entry type, chosen
+ * to be mutually distinguishable — and deliberately do not go through the Aviary
+ * status tokens: a `request` series is not "healthy", it is just requests (see
+ * AVIARY-UI.md, "Categorical data hues are not tokens"). Chrome does follow the
+ * tokens, so it themes with the rest of the console.
  *
- * Recharts takes plain colour strings rather than classes, so chrome reads the
- * tokens as `var(--x)`; SVG resolves the custom property at paint time.
+ * Recharts takes plain colour strings rather than classes, so anything token-based
+ * reads as `var(--x)`; SVG resolves the custom property at paint time.
  */
 /** Resolved hex colors for known entry types (matches the `fill-*` tokens used elsewhere). */
 export declare const TYPE_HEX: Record<string, string>;
 /** Primary throughput accent — the console `--accent`, not a status hue. */
 export declare const ACCENT_HEX = "var(--accent)";
 export declare function hexForType(type: string, fallbackIndex?: number): string;
+/**
+ * Colour for one breakdown/pie segment: an author's explicit `color` wins, then
+ * the entry-type hue when the segment is named after a known type, then the
+ * palette by position.
+ *
+ * The {@link TYPE_HEX} step is why this is not just an array index: a breakdown
+ * of `request`/`query`/`exception` used to draw them green/amber/red purely by
+ * position, so the same `exception` was red in one card and amber in the next.
+ */
+export declare function hexForSegment(label: string, index: number, override?: string): string;
+/**
+ * Build a {@link ChartConfig} for a set of series keys. Every card goes through
+ * here so the tooltip, the legend and the marks all read the same colour from the
+ * same place — the shadcn chart layer resolves labels and swatches from the
+ * config, and a colour passed straight to a `<Bar>` would leave both blank.
+ */
+export declare function chartConfig(keys: string[], colorFor: (key: string, index: number) => string, labelFor?: (key: string) => string): ChartConfig;
+/**
+ * Chrome colours for the handful of places a Recharts prop is the only way in
+ * (a `cursor`, a gradient stop).
+ *
+ * @deprecated The grid/axis/tooltip/legend entries are now applied by
+ * `ChartContainer`'s token classes; a card should not pass them. Kept exported
+ * because this is a published module and removing names from it is a breaking
+ * change.
+ */
 export declare const chartTheme: {
     readonly gridStroke: "color-mix(in srgb, var(--line) 70%, transparent)";
     readonly axisStroke: "var(--line)";
@@ -27,7 +54,10 @@ export declare const chartTheme: {
     readonly tooltipLabel: "var(--muted)";
     readonly legendText: "var(--muted)";
 };
-/** Shared `contentStyle` for Recharts `<Tooltip>` so every chart looks identical. */
+/**
+ * @deprecated Superseded by `ChartTooltipContent`, which renders a real hover card
+ * instead of Recharts' single line of text. Kept for API compatibility.
+ */
 export declare const tooltipContentStyle: {
     readonly background: "var(--panel-2)";
     readonly border: "1px solid var(--line)";
@@ -35,15 +65,18 @@ export declare const tooltipContentStyle: {
     readonly fontSize: 11;
     readonly color: "var(--text)";
 };
+/** @deprecated See {@link tooltipContentStyle}. */
 export declare const tooltipLabelStyle: {
     readonly color: "var(--muted)";
     readonly fontSize: 10;
     readonly textTransform: "uppercase";
     readonly letterSpacing: "0.05em";
 };
+/** @deprecated See {@link tooltipContentStyle}. */
 export declare const tooltipItemStyle: {
     readonly color: "var(--text)";
 };
+/** @deprecated Tick text is filled by `ChartContainer`'s token classes. */
 export declare const axisTickStyle: {
     readonly fill: "var(--muted)";
     readonly fontSize: 10;

package/dist/react/components/charts/chart-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-theme.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAO3C,CAAC;AAKF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAE1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,SAAI,GAAG,MAAM,CAGlE;AAED,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAC;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB;;;;;;CAMtB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;CAEnB,CAAC;AAEX,eAAO,MAAM,aAAa;;;CAGhB,CAAC"}
+{"version":3,"file":"chart-theme.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;;;GAaG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAO3C,CAAC;AAYF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAE1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,SAAI,GAAG,MAAM,CAGlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAIrF;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,EAChD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GACjC,WAAW,CAMb;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAMtB,CAAC;AAEX,mDAAmD;AACnD,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX,mDAAmD;AACnD,eAAO,MAAM,gBAAgB;;CAEnB,CAAC;AAEX,2EAA2E;AAC3E,eAAO,MAAM,aAAa;;;CAGhB,CAAC"}

package/dist/react/components/charts/chart-theme.js

@@ -1,16 +1,16 @@
 /**
- * Shared theme values for the Recharts chart cards. Only this folder imports
- * Recharts, so this is the one place chart colours are decided.
+ * Series colours for the chart cards. This file is the ONE place a chart decides
+ * what colour a series is; the chrome around it (grid, axes, tick text, brush,
+ * tooltip, legend) belongs to the vendored `ChartContainer` in `../../ui/chart.tsx`.
  *
- * Two palettes live here and they are NOT the same thing:
- *  - `TYPE_HEX` is CATEGORICAL: one hue per entry type, chosen to be mutually
- *    distinguishable. It is data, and deliberately does not go through the Aviary
- *    status tokens — a `request` series is not "healthy", it is just requests.
- *  - `chartTheme` / `ACCENT_HEX` is CHROME: grid, axes, tooltip, the throughput
- *    accent. Those follow the console tokens so they theme with everything else.
+ * That split is the point. Colours here are DATA — one hue per entry type, chosen
+ * to be mutually distinguishable — and deliberately do not go through the Aviary
+ * status tokens: a `request` series is not "healthy", it is just requests (see
+ * AVIARY-UI.md, "Categorical data hues are not tokens"). Chrome does follow the
+ * tokens, so it themes with the rest of the console.
  *
- * Recharts takes plain colour strings rather than classes, so chrome reads the
- * tokens as `var(--x)`; SVG resolves the custom property at paint time.
+ * Recharts takes plain colour strings rather than classes, so anything token-based
+ * reads as `var(--x)`; SVG resolves the custom property at paint time.
  */
 /** Resolved hex colors for known entry types (matches the `fill-*` tokens used elsewhere). */
 export const TYPE_HEX = {
@@ -23,12 +23,55 @@ export const TYPE_HEX = {
 };
 /** Ordered palette for series whose type is not in {@link TYPE_HEX}. */
 const FALLBACK_PALETTE = ['#71717a', '#a1a1aa', '#22d3ee', '#c084fc', '#fb923c', '#4ade80'];
+/**
+ * Ordered palette for breakdown segments, which are usually an outcome split
+ * (ok / retried / failed) rather than a set of entry types — so it opens on the
+ * good/warn/bad progression instead of {@link FALLBACK_PALETTE}'s neutrals.
+ */
+const SEGMENT_PALETTE = ['#34d399', '#fbbf24', '#f87171', '#38bdf8', '#a78bfa'];
 /** Primary throughput accent — the console `--accent`, not a status hue. */
 export const ACCENT_HEX = 'var(--accent)';
 export function hexForType(type, fallbackIndex = 0) {
     const fallback = FALLBACK_PALETTE[fallbackIndex % FALLBACK_PALETTE.length];
     return TYPE_HEX[type] ?? fallback ?? '#71717a';
 }
+/**
+ * Colour for one breakdown/pie segment: an author's explicit `color` wins, then
+ * the entry-type hue when the segment is named after a known type, then the
+ * palette by position.
+ *
+ * The {@link TYPE_HEX} step is why this is not just an array index: a breakdown
+ * of `request`/`query`/`exception` used to draw them green/amber/red purely by
+ * position, so the same `exception` was red in one card and amber in the next.
+ */
+export function hexForSegment(label, index, override) {
+    if (override)
+        return override;
+    const palette = SEGMENT_PALETTE[index % SEGMENT_PALETTE.length];
+    return TYPE_HEX[label] ?? palette ?? '#71717a';
+}
+/**
+ * Build a {@link ChartConfig} for a set of series keys. Every card goes through
+ * here so the tooltip, the legend and the marks all read the same colour from the
+ * same place — the shadcn chart layer resolves labels and swatches from the
+ * config, and a colour passed straight to a `<Bar>` would leave both blank.
+ */
+export function chartConfig(keys, colorFor, labelFor) {
+    const config = {};
+    keys.forEach((key, index) => {
+        config[key] = { label: labelFor?.(key) ?? key, color: colorFor(key, index) };
+    });
+    return config;
+}
+/**
+ * Chrome colours for the handful of places a Recharts prop is the only way in
+ * (a `cursor`, a gradient stop).
+ *
+ * @deprecated The grid/axis/tooltip/legend entries are now applied by
+ * `ChartContainer`'s token classes; a card should not pass them. Kept exported
+ * because this is a published module and removing names from it is a breaking
+ * change.
+ */
 export const chartTheme = {
     gridStroke: 'color-mix(in srgb, var(--line) 70%, transparent)',
     axisStroke: 'var(--line)',
@@ -39,7 +82,10 @@ export const chartTheme = {
     tooltipLabel: 'var(--muted)',
     legendText: 'var(--muted)',
 };
-/** Shared `contentStyle` for Recharts `<Tooltip>` so every chart looks identical. */
+/**
+ * @deprecated Superseded by `ChartTooltipContent`, which renders a real hover card
+ * instead of Recharts' single line of text. Kept for API compatibility.
+ */
 export const tooltipContentStyle = {
     background: chartTheme.tooltipBg,
     border: `1px solid ${chartTheme.tooltipBorder}`,
@@ -47,15 +93,18 @@ export const tooltipContentStyle = {
     fontSize: 11,
     color: chartTheme.tooltipText,
 };
+/** @deprecated See {@link tooltipContentStyle}. */
 export const tooltipLabelStyle = {
     color: chartTheme.tooltipLabel,
     fontSize: 10,
     textTransform: 'uppercase',
     letterSpacing: '0.05em',
 };
+/** @deprecated See {@link tooltipContentStyle}. */
 export const tooltipItemStyle = {
     color: chartTheme.tooltipText,
 };
+/** @deprecated Tick text is filled by `ChartContainer`'s token classes. */
 export const axisTickStyle = {
     fill: chartTheme.axisTick,
     fontSize: 10,

package/dist/react/components/charts/chart-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-theme.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,8FAA8F;AAC9F,MAAM,CAAC,MAAM,QAAQ,GAA2B;IAC9C,OAAO,EAAE,SAAS,EAAE,cAAc;IAClC,KAAK,EAAE,SAAS,EAAE,UAAU;IAC5B,GAAG,EAAE,SAAS,EAAE,aAAa;IAC7B,SAAS,EAAE,SAAS,EAAE,UAAU;IAChC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,IAAI,EAAE,SAAS,EAAE,WAAW;CAC7B,CAAC;AAEF,wEAAwE;AACxE,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAE5F,4EAA4E;AAC5E,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;AAE1C,MAAM,UAAU,UAAU,CAAC,IAAY,EAAE,aAAa,GAAG,CAAC;IACxD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC3E,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,QAAQ,IAAI,SAAS,CAAC;AACjD,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,kDAAkD;IAC9D,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,aAAa;IAC1B,YAAY,EAAE,cAAc;IAC5B,UAAU,EAAE,cAAc;CAClB,CAAC;AAEX,qFAAqF;AACrF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,UAAU,CAAC,SAAS;IAChC,MAAM,EAAE,aAAa,UAAU,CAAC,aAAa,EAAE;IAC/C,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,UAAU,CAAC,WAAW;CACrB,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,UAAU,CAAC,YAAY;IAC9B,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,QAAQ;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,UAAU,CAAC,WAAW;CACrB,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,UAAU,CAAC,QAAQ;IACzB,QAAQ,EAAE,EAAE;CACJ,CAAC"}
+{"version":3,"file":"chart-theme.js","sourceRoot":"","sources":["../../../../src/react/components/charts/chart-theme.ts"],"names":[],"mappings":"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"}

package/dist/react/components/charts/distribution-chart-card.d.ts

@@ -1,5 +1,7 @@
 import type { JSX } from 'react';
-export declare function DistributionChartCard({ title, buckets, p50, p95, p99, height, }: {
+import { type ChartSelection } from './chart-selection.js';
+/** Latency histogram with p50/p95/p99 chips above it. */
+export declare function DistributionChartCard({ title, buckets, p50, p95, p99, height, onSelect, }: {
     title: string;
     buckets: {
         label: string;
@@ -9,5 +11,7 @@ export declare function DistributionChartCard({ title, buckets, p50, p95, p99, h
     p95?: number;
     p99?: number;
     height?: number;
+    /** Drill-down: called with the bucket under a click. Omit and the chart is inert. */
+    onSelect?: (selection: ChartSelection) => void;
 }): JSX.Element;
 //# sourceMappingURL=distribution-chart-card.d.ts.map

package/dist/react/components/charts/distribution-chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"distribution-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/distribution-chart-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAejC,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,CAsDd"}
+{"version":3,"file":"distribution-chart-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/distribution-chart-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAUjC,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,sBAAsB,CAAC;AAoB3E,yDAAyD;AACzD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD,GAAG,GAAG,CAAC,OAAO,CAgEd"}

package/dist/react/components/charts/distribution-chart-card.js

@@ -1,27 +1,46 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import { ChartCard } from './chart-card.js';
-import { axisTickStyle, chartTheme, tooltipContentStyle, tooltipItemStyle, tooltipLabelStyle, } from './chart-theme.js';
+import { useMemo } from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, chartColorVar, } from '../../ui/chart.js';
+import { ChartCard, ChartEmptyState } from './chart-card.js';
+import { chartSelection } from './chart-selection.js';
+import { chartConfig } from './chart-theme.js';
 function formatDuration(ms) {
     return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`;
 }
-export function DistributionChartCard({ title, buckets, p50, p95, p99, height = 220, }) {
+/**
+ * The percentile chips. `tint-*` rather than three inline colour strings: the
+ * tint classes are the console's single source of truth for a tinted chip, and
+ * they carry a `--good`/`--warn`/`--bad` that flips with the theme — the old
+ * `${color}22` concatenation only worked because the colours were hard-coded
+ * hexes, and would have produced an invalid colour the moment one became a token.
+ */
+const MARKER_TINT = {
+    p50: 'tint-good',
+    p95: 'tint-warn',
+    p99: 'tint-bad',
+};
+/** Latency histogram with p50/p95/p99 chips above it. */
+export function DistributionChartCard({ title, buckets, p50, p95, p99, height = 220, onSelect, }) {
     const chips = [];
     if (p50 !== undefined)
-        chips.push([p50, 'p50', '#34d399']);
+        chips.push([p50, 'p50']);
     if (p95 !== undefined)
-        chips.push([p95, 'p95', '#fbbf24']);
+        chips.push([p95, 'p95']);
     if (p99 !== undefined)
-        chips.push([p99, 'p99', '#f87171']);
+        chips.push([p99, 'p99']);
     const bodyHeight = height - 64;
-    return (_jsxs(ChartCard, { title: title, height: bodyHeight, children: [chips.length > 0 && (_jsx("div", { style: { display: 'flex', gap: 8, marginBottom: 6, flexWrap: 'wrap' }, children: chips.map(([val, name, color]) => (_jsxs("span", { style: {
-                        fontSize: 10,
-                        fontVariantNumeric: 'tabular-nums',
-                        color,
-                        background: `${color}22`,
-                        border: `1px solid ${color}55`,
-                        borderRadius: 4,
-                        padding: '1px 6px',
-                    }, children: [name, ": ", formatDuration(val)] }, name))) })), _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChart, { data: buckets, margin: { top: 4, right: 8, bottom: 0, left: -16 }, children: [_jsx(CartesianGrid, { stroke: chartTheme.gridStroke, vertical: false }), _jsx(XAxis, { dataKey: "label", tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false }), _jsx(YAxis, { tick: axisTickStyle, stroke: chartTheme.axisStroke, tickLine: false, allowDecimals: false, width: 40 }), _jsx(Tooltip, { contentStyle: tooltipContentStyle, labelStyle: tooltipLabelStyle, itemStyle: tooltipItemStyle }), _jsx(Bar, { dataKey: "count", fill: "#0ea5e9", radius: [3, 3, 0, 0], isAnimationActive: false })] }) })] }));
+    const config = useMemo(() => chartConfig(['count'], () => 'var(--live)'), []);
+    const clickProps = onSelect
+        ? {
+            onClick: (_datum, index) => {
+                const bucket = buckets[index];
+                if (bucket)
+                    onSelect(chartSelection({ label: bucket.label, value: bucket.count }));
+            },
+            cursor: 'pointer',
+        }
+        : {};
+    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsxs("div", { className: "flex h-full flex-col", children: [chips.length > 0 && (_jsx("div", { className: "mb-1.5 flex flex-wrap gap-2", children: chips.map(([value, name]) => (_jsxs("span", { className: `rounded border px-1.5 text-[10px] tabular-nums ${MARKER_TINT[name]}`, children: [name, ": ", formatDuration(value)] }, name))) })), _jsx("div", { className: "min-h-0 flex-1", children: buckets.length === 0 ? (_jsx(ChartEmptyState, {})) : (_jsx(ChartContainer, { config: config, children: _jsxs(BarChart, { data: buckets, margin: { top: 4, right: 8, bottom: 0, left: -16 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "label", tickLine: false }), _jsx(YAxis, { tickLine: false, allowDecimals: false, width: 40 }), _jsx(ChartTooltip, { cursor: { fill: 'color-mix(in srgb, var(--text) 5%, transparent)' }, content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: "count", name: "count", fill: chartColorVar('count'), radius: [3, 3, 0, 0], isAnimationActive: false, ...clickProps })] }) })) })] }) }));
 }
 //# sourceMappingURL=distribution-chart-card.js.map

package/dist/react/components/charts/distribution-chart-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"distribution-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/distribution-chart-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"distribution-chart-card.js","sourceRoot":"","sources":["../../../../src/react/components/charts/distribution-chart-card.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/charts/gauge-card.d.ts

@@ -1,4 +1,5 @@
 import type { JSX } from 'react';
+/** Half-dial gauge: one value against a min/max, with the reading over the arc. */
 export declare function GaugeCard({ title, value, min, max, label, color, height, }: {
     title: string;
     value: number;

package/dist/react/components/charts/gauge-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gauge-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/gauge-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,GAAO,EACP,GAAO,EACP,KAAK,EACL,KAAqB,EACrB,MAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,CAwCd"}
+{"version":3,"file":"gauge-card.d.ts","sourceRoot":"","sources":["../../../../src/react/components/charts/gauge-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,GAAO,EACP,GAAO,EACP,KAAK,EACL,KAAqB,EACrB,MAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,GAAG,CAAC,OAAO,CAiDd"}

package/dist/react/components/charts/gauge-card.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts';
+import { useMemo } from 'react';
+import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
+import { ChartContainer, chartColorVar } from '../../ui/chart.js';
 import { ChartCard } from './chart-card.js';
+import { chartConfig } from './chart-theme.js';
+/** Half-dial gauge: one value against a min/max, with the reading over the arc. */
 export function GaugeCard({ title, value, min = 0, max = 1, label, color = 'var(--good)', height = 220, }) {
     const range = max - min;
     const pct = range === 0 ? 0 : Math.max(0, Math.min(1, (value - min) / range));
     const displayLabel = label ?? `${Math.round(pct * 100)}%`;
     const bodyHeight = height - 64;
-    const data = [{ value: pct * 100, fill: color }];
-    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsxs("div", { style: { position: 'relative', height: bodyHeight }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsx(RadialBarChart, { innerRadius: "60%", outerRadius: "100%", data: data, startAngle: 180, endAngle: 0, barSize: 16, children: _jsx(RadialBar, { dataKey: "value", cornerRadius: 4, isAnimationActive: false }) }) }), _jsx("div", { style: {
-                        position: 'absolute',
-                        inset: 0,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        paddingTop: '40%',
-                    }, children: _jsx("span", { style: { fontSize: 20, fontWeight: 600, color: 'var(--text)' }, children: displayLabel }) })] }) }));
+    const config = useMemo(() => chartConfig(['value'], () => color, () => title), [color, title]);
+    const data = [{ value: pct * 100 }];
+    return (_jsx(ChartCard, { title: title, height: bodyHeight, children: _jsxs("div", { className: "relative h-full", children: [_jsx(ChartContainer, { config: config, children: _jsxs(RadialBarChart, { innerRadius: "60%", outerRadius: "100%", data: data, startAngle: 180, endAngle: 0, barSize: 16, children: [_jsx(PolarAngleAxis, { type: "number", domain: [0, 100], tick: false, axisLine: false }), _jsx(RadialBar, { dataKey: "value", fill: chartColorVar('value'), background: true, cornerRadius: 4, isAnimationActive: false })] }) }), _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center pt-[40%]", children: _jsx("span", { className: "text-xl font-semibold tabular-nums text-foreground", children: displayLabel }) })] }) }));
 }
 //# sourceMappingURL=gauge-card.js.map