@ai-matrx/design-system 0.49.54 → 0.49.55

package/dist/data-table/drill-chart.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { M as MatrxDrillDimension, a as MatrxDrillMeasure, b as MatrxDrillQuestion, c as MatrxDrillChartAnswers } from '../drill-cISpem5b.cjs';
-export { d as MATRX_DRILL_CHART_CEILING, e as MATRX_DRILL_CHART_OTHER, f as MATRX_DRILL_CHART_SERIES_LIMIT, g as MatrxDrillChartContext, h as MatrxDrillChartData, i as MatrxDrillChartPeriod, j as MatrxDrillChartPlan, k as MatrxDrillChartRequest, l as MatrxDrillChartRequestKey, m as MatrxDrillChartRow, n as MatrxDrillChartSeries, o as drillChartCellsQuestion, p as drillChartData, q as drillChartDrill, r as drillChartNarrowToPeriod, s as drillChartQuestions, t as drillChartSeriesKey } from '../drill-cISpem5b.cjs';
+import { M as MatrxDrillDimension, a as MatrxDrillMeasure, b as MatrxDrillQuestion, c as MatrxDrillChartAnswers } from '../drill-qJ5gHL2F.cjs';
+export { d as MATRX_DRILL_CHART_CEILING, e as MATRX_DRILL_CHART_OTHER, f as MATRX_DRILL_CHART_SERIES_LIMIT, g as MatrxDrillChartContext, h as MatrxDrillChartData, i as MatrxDrillChartPeriod, j as MatrxDrillChartPlan, k as MatrxDrillChartRequest, l as MatrxDrillChartRequestKey, m as MatrxDrillChartRow, n as MatrxDrillChartSeries, o as drillChartCellsQuestion, p as drillChartData, q as drillChartDrill, r as drillChartNarrowToPeriod, s as drillChartQuestions, t as drillChartSeriesKey } from '../drill-qJ5gHL2F.cjs';
 
 interface MatrxDrillChartProps {
     dimensions: readonly MatrxDrillDimension[];
@@ -15,6 +15,11 @@ interface MatrxDrillChartProps {
     seriesLimit?: number | undefined;
     /** The Measure stacked. Default: the question's first shown Measure. */
     measure?: string | null | undefined;
+    /**
+     * STACK THESE MEASURES instead (two or more that add up, e.g. input and output tokens): one series
+     * each, no split; a segment click narrows to its period (lane DRILL-FLIP-FIXES L3).
+     */
+    stack?: readonly string[] | null | undefined;
     /** The time reference when the question does not group by time. */
     time?: string | null | undefined;
     /** The store's page ceiling, when the host knows it is not 1000. */
@@ -39,6 +44,6 @@ interface MatrxDrillChartProps {
  * A long formatted value ("28,000,000 points") was clipped to ",000,000 points" (lane DRILL-ADOPT walk).
  */
 declare function drillChartAxisNumber(measure: MatrxDrillMeasure | undefined, value: number): string;
-declare function MatrxDrillChart({ dimensions, measures, question, onQuestionChange, answers, seriesLimit, measure: measureKey, time, ceiling, paths, error, emptyLabel, height, width, note, className, }: MatrxDrillChartProps): React.JSX.Element;
+declare function MatrxDrillChart({ dimensions, measures, question, onQuestionChange, answers, seriesLimit, measure: measureKey, stack, time, ceiling, paths, error, emptyLabel, height, width, note, className, }: MatrxDrillChartProps): React.JSX.Element;
 
 export { MatrxDrillChart, MatrxDrillChartAnswers, type MatrxDrillChartProps, drillChartAxisNumber };

package/dist/data-table/drill-chart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { M as MatrxDrillDimension, a as MatrxDrillMeasure, b as MatrxDrillQuestion, c as MatrxDrillChartAnswers } from '../drill-cISpem5b.js';
-export { d as MATRX_DRILL_CHART_CEILING, e as MATRX_DRILL_CHART_OTHER, f as MATRX_DRILL_CHART_SERIES_LIMIT, g as MatrxDrillChartContext, h as MatrxDrillChartData, i as MatrxDrillChartPeriod, j as MatrxDrillChartPlan, k as MatrxDrillChartRequest, l as MatrxDrillChartRequestKey, m as MatrxDrillChartRow, n as MatrxDrillChartSeries, o as drillChartCellsQuestion, p as drillChartData, q as drillChartDrill, r as drillChartNarrowToPeriod, s as drillChartQuestions, t as drillChartSeriesKey } from '../drill-cISpem5b.js';
+import { M as MatrxDrillDimension, a as MatrxDrillMeasure, b as MatrxDrillQuestion, c as MatrxDrillChartAnswers } from '../drill-qJ5gHL2F.js';
+export { d as MATRX_DRILL_CHART_CEILING, e as MATRX_DRILL_CHART_OTHER, f as MATRX_DRILL_CHART_SERIES_LIMIT, g as MatrxDrillChartContext, h as MatrxDrillChartData, i as MatrxDrillChartPeriod, j as MatrxDrillChartPlan, k as MatrxDrillChartRequest, l as MatrxDrillChartRequestKey, m as MatrxDrillChartRow, n as MatrxDrillChartSeries, o as drillChartCellsQuestion, p as drillChartData, q as drillChartDrill, r as drillChartNarrowToPeriod, s as drillChartQuestions, t as drillChartSeriesKey } from '../drill-qJ5gHL2F.js';
 
 interface MatrxDrillChartProps {
     dimensions: readonly MatrxDrillDimension[];
@@ -15,6 +15,11 @@ interface MatrxDrillChartProps {
     seriesLimit?: number | undefined;
     /** The Measure stacked. Default: the question's first shown Measure. */
     measure?: string | null | undefined;
+    /**
+     * STACK THESE MEASURES instead (two or more that add up, e.g. input and output tokens): one series
+     * each, no split; a segment click narrows to its period (lane DRILL-FLIP-FIXES L3).
+     */
+    stack?: readonly string[] | null | undefined;
     /** The time reference when the question does not group by time. */
     time?: string | null | undefined;
     /** The store's page ceiling, when the host knows it is not 1000. */
@@ -39,6 +44,6 @@ interface MatrxDrillChartProps {
  * A long formatted value ("28,000,000 points") was clipped to ",000,000 points" (lane DRILL-ADOPT walk).
  */
 declare function drillChartAxisNumber(measure: MatrxDrillMeasure | undefined, value: number): string;
-declare function MatrxDrillChart({ dimensions, measures, question, onQuestionChange, answers, seriesLimit, measure: measureKey, time, ceiling, paths, error, emptyLabel, height, width, note, className, }: MatrxDrillChartProps): React.JSX.Element;
+declare function MatrxDrillChart({ dimensions, measures, question, onQuestionChange, answers, seriesLimit, measure: measureKey, stack, time, ceiling, paths, error, emptyLabel, height, width, note, className, }: MatrxDrillChartProps): React.JSX.Element;
 
 export { MatrxDrillChart, MatrxDrillChartAnswers, type MatrxDrillChartProps, drillChartAxisNumber };

package/dist/data-table/drill-chart.js

@@ -267,9 +267,16 @@ function drillChartQuestions(question, seriesLimit = MATRX_DRILL_CHART_SERIES_LI
   const timeInBy = question.by.find((ref) => parseDimensionRef(ref).grain !== null);
   const firstTime = context.dimensions.find((d) => d.kind === "time");
   const time = timeInBy ?? context.time ?? (firstTime ? `${firstTime.key}:${drillAutoGrain(question.window ?? null, context.now, firstTime.grains ?? MATRX_DRILL_DEFAULT_GRAINS)}` : null);
-  const split = question.by.find((ref) => parseDimensionRef(ref).grain === null && dimensionFor(context.dimensions, ref)?.kind !== "time") ?? null;
+  const stack = context.stack && context.stack.length >= 2 ? [...context.stack] : null;
+  const split = stack ? null : question.by.find((ref) => parseDimensionRef(ref).grain === null && dimensionFor(context.dimensions, ref)?.kind !== "time") ?? null;
   const refuse = (sentence) => ({ ...base, time, split, refused: sentence, first: [], periodsHint: null });
   if (!time) return refuse("This answer has no time to chart it over.");
+  if (stack) {
+    const missing = stack.find((k) => !context.measures.some((m) => m.key === k));
+    if (missing) return refuse(`There is no Measure "${missing}" to chart.`);
+    const loose = stack.map((k) => context.measures.find((m) => m.key === k)).find((m) => !m.additive || m.moment);
+    if (loose) return refuse(`${loose.label} does not add up, so it cannot be stacked.`);
+  }
   if (!measure) return refuse(`There is no Measure "${measureKey}" to chart.`);
   if (split && !measure.additive) {
     return refuse(
@@ -282,13 +289,13 @@ function drillChartQuestions(question, seriesLimit = MATRX_DRILL_CHART_SERIES_LI
   const periodsHint = Number.isFinite(days) && days > 0 ? Math.ceil(days / GRAIN_DAYS[grain]) + 1 : null;
   const where = trailWhere(question);
   const window = question.window ?? null;
-  const show = [measureKey];
+  const show = stack ?? [measureKey];
   const first = [];
   if (split) {
     first.push({ key: "series", by: [split], where, show, sort: { key: measureKey, direction: "desc" }, limit, window });
   }
   first.push({ key: "periods", by: [time], where, show, sort: null, limit: periodsHint ? clampLimit(periodsHint, ceiling) : null, window });
-  return { ...base, time, split, refused: null, first, periodsHint };
+  return { ...base, ...stack ? { measure: stack[0], stack } : {}, time, split, refused: null, first, periodsHint };
 }
 function drillChartCellsQuestion(plan, question, series) {
   if (plan.refused || !plan.split || !plan.time) return null;
@@ -362,6 +369,35 @@ function drillChartData(plan, answers, dimensions, measures, emptyLabel = "No va
       values: {}
     };
   });
+  if (plan.stack) {
+    const keys = plan.stack;
+    const readOf = (row, k) => {
+      const v = row?.measures[k];
+      return v === null || v === void 0 ? null : v;
+    };
+    const totalRow = periodRows.find((r) => rowKind(r) === "total");
+    for (const [i, p] of periodBase.entries()) {
+      const row = groups[i];
+      let sum = null;
+      for (const k of keys) {
+        const v = readOf(row, k);
+        p.values[`m:${k}`] = v;
+        if (v !== null) sum = (sum ?? 0) + v;
+      }
+      p.total = sum;
+    }
+    const totals = keys.map((k) => readOf(totalRow, k));
+    const total = totals.every((t) => t === null) ? null : totals.reduce((a, t) => a + (t ?? 0), 0);
+    return {
+      time,
+      split: null,
+      measure: m,
+      series: keys.map((k, i) => ({ key: `m:${k}`, value: null, label: measures.find((x) => x.key === k)?.label ?? k, other: false, total: totals[i] ?? null })),
+      periods: periodBase,
+      total,
+      says
+    };
+  }
   if (!split) {
     const key = "all";
     for (const p of periodBase) p.values[key] = p.total;
@@ -488,6 +524,7 @@ function MatrxDrillChart({
   answers,
   seriesLimit = MATRX_DRILL_CHART_SERIES_LIMIT,
   measure: measureKey,
+  stack,
   time,
   ceiling,
   paths = NO_PATHS,
@@ -499,8 +536,8 @@ function MatrxDrillChart({
   className
 }) {
   const plan = useMemo(
-    () => drillChartQuestions(question, seriesLimit, { dimensions, measures, measure: measureKey, time, ceiling }),
-    [question, seriesLimit, dimensions, measures, measureKey, time, ceiling]
+    () => drillChartQuestions(question, seriesLimit, { dimensions, measures, measure: measureKey, stack, time, ceiling }),
+    [question, seriesLimit, dimensions, measures, measureKey, stack, time, ceiling]
   );
   const data = useMemo(() => drillChartData(plan, answers, dimensions, measures, emptyLabel), [plan, answers, dimensions, measures, emptyLabel]);
   const measure = measures.find((m) => m.key === plan.measure);
@@ -508,7 +545,8 @@ function MatrxDrillChart({
   const [hover, setHover] = useState(null);
   const segmentClicked = useRef(false);
   const plotRef = useRef(null);
-  const title = plan.time ? `${measure?.label ?? plan.measure} by ${dimensionRefLabel(dimensions, plan.time).replace(/^.* by /, "")}${plan.split ? `, split by ${dimensionRefLabel(dimensions, plan.split)}` : ""}` : measure?.label ?? plan.measure;
+  const measureWords = plan.stack ? plan.stack.map((k) => measures.find((m) => m.key === k)?.label ?? k).join(" and ") : measure?.label ?? plan.measure;
+  const title = plan.time ? `${measureWords} by ${dimensionRefLabel(dimensions, plan.time).replace(/^.* by /, "")}${plan.split ? `, split by ${dimensionRefLabel(dimensions, plan.split)}` : ""}` : measureWords;
   const frame = (body) => /* @__PURE__ */ jsxs2("section", { "data-matrx-drill-chart": true, "aria-label": title, className: cn("flex min-w-0 flex-col gap-1.5 px-2 py-2", className), children: [
     note ? /* @__PURE__ */ jsx3("div", { "data-matrx-drill-chart-note": true, className: "text-xs text-muted-foreground", children: note }) : null,
     body