@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/charts/InputCacheChart.tsx

@@ -1,23 +1,30 @@
+import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 import type { ConversationMetricDay } from "@sentry/junior/api/schema";
 
-import { ToggleButton } from "../Button";
 import { Card } from "../layout/Card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { dashboardDisclosureChevronClass } from "../../styles";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
 import { formatCompactNumber } from "../../format";
 import {
   type TimeRangeBucketUnit,
   timeRangeBucketPerLabel,
 } from "../controls/TimeRangeSelector";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import {
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
 import { CacheWrites } from "./CacheWrites";
-import { useChartLayout } from "./useChartLayout";
 import {
   CACHE_INPUT_SERIES,
   cacheInputTotal,
@@ -26,6 +33,13 @@ import {
   summarizeCacheInput,
 } from "./cache-input";
 
+const chartConfig = {
+  ...Object.fromEntries(
+    CACHE_INPUT_SERIES.map(({ color, key, label }) => [key, { color, label }]),
+  ),
+  missing: { color: "var(--color-slate-400)", label: "Missing data" },
+};
+
 /** Show cache reuse and write volume without treating missing counters as zero. */
 export function InputCacheChart(props: {
   bucketUnit: TimeRangeBucketUnit;
@@ -33,40 +47,53 @@ export function InputCacheChart(props: {
 }) {
   const [mode, setMode] = useState<"share" | "tokens">("share");
   const summary = summarizeCacheInput(props.days);
-  const { ref, layout } = useChartLayout(160);
-  const reportedTotals = props.days.map((day) =>
-    CACHE_INPUT_SERIES.reduce((sum, { key }) => sum + (day[key] ?? 0), 0),
-  );
-  const maximum = mode === "share" ? 100 : Math.max(1, ...reportedTotals);
-  const step = layout.plotWidth / Math.max(1, props.days.length);
-  const barWidth = Math.min(32, step * 0.7);
-  const x = (index: number) => layout.left + step * (index + 0.5);
+  const data = props.days.map((day) => {
+    const total = cacheInputTotal(day);
+    const plotted = Object.fromEntries(
+      CACHE_INPUT_SERIES.map(({ key }) => {
+        const value = day[key] ?? 0;
+        return [
+          key,
+          mode === "share" ? (total ? (value / total) * 100 : 0) : value,
+        ];
+      }),
+    );
+    return {
+      ...plotted,
+      date: day.date,
+      day,
+      // A zero-height bar that `minPointSize` draws as a gray mark.
+      missing: total === undefined && hasCacheActivity(day) ? 0 : undefined,
+    };
+  });
+  const maximum =
+    mode === "share"
+      ? 100
+      : Math.max(
+          1,
+          ...props.days.map((day) =>
+            CACHE_INPUT_SERIES.reduce(
+              (sum, { key }) => sum + (day[key] ?? 0),
+              0,
+            ),
+          ),
+        );
 
   return (
     <Card>
       <ChartHeader
         title="Input cache"
         trailing={
-          <div
+          <ToggleGroup
             aria-label="Cache chart display"
-            className="flex gap-1"
-            role="group"
+            onValueChange={([next]) => {
+              if (next) setMode(next);
+            }}
+            value={[mode]}
           >
-            <ToggleButton
-              pressed={mode === "share"}
-              variant="segment"
-              onClick={() => setMode("share")}
-            >
-              Percent
-            </ToggleButton>
-            <ToggleButton
-              pressed={mode === "tokens"}
-              variant="segment"
-              onClick={() => setMode("tokens")}
-            >
-              Tokens
-            </ToggleButton>
-          </div>
+            <ToggleGroupItem value="share">Percent</ToggleGroupItem>
+            <ToggleGroupItem value="tokens">Tokens</ToggleGroupItem>
+          </ToggleGroup>
         }
       />
       <dl className="m-0 flex flex-wrap gap-x-5 gap-y-2 px-4 py-3 font-sans tabular-nums text-xs sm:px-5">
@@ -97,112 +124,91 @@ export function InputCacheChart(props: {
           reported values.
         </p>
       ) : null}
-      <div className="px-2 pb-2" ref={ref}>
-        <ChartSvg
-          aria-label={`Input cache ${mode} per ${timeRangeBucketPerLabel(props.bucketUnit)}`}
-          layout={layout}
+      <div className="px-2 pb-2">
+        <ChartContainer
+          className="aspect-auto h-40 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid
-            format={
-              mode === "share" ? (value) => `${value}%` : formatCompactNumber
-            }
-            layout={layout}
-            maximum={maximum}
-          />
-          {props.days.map((day, index) => {
-            const total = cacheInputTotal(day);
-            const incomplete = total === undefined && hasCacheActivity(day);
-            let offset = 0;
-            const bars = CACHE_INPUT_SERIES.map(({ key, color }) => {
-              const value = day[key] ?? 0;
-              const plotted =
-                mode === "share" ? (total ? (value / total) * 100 : 0) : value;
-              const height = (plotted / maximum) * layout.plotHeight;
-              offset += height;
-              return (
-                <rect
-                  key={key}
-                  fill={color}
-                  opacity={0.85}
-                  height={height}
-                  width={barWidth}
-                  x={x(index) - barWidth / 2}
-                  y={layout.top + layout.plotHeight - offset}
-                />
-              );
-            });
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                date={day.date}
-                summary={
-                  incomplete
-                    ? "Missing cache data"
-                    : total === undefined
-                      ? "No input reported"
-                      : `${formatCacheShare(day.cachedInputTokens, total)} cached · ${formatCompactNumber(total)} input tokens`
-                }
-                content={
-                  <ActivityTooltipRows
-                    rows={CACHE_INPUT_SERIES.map(({ key, label }) => [
+          <BarChart
+            aria-label={`Input cache ${mode} per ${timeRangeBucketPerLabel(props.bucketUnit)}`}
+            data={data}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis
+              format={
+                mode === "share" ? (value) => `${value}%` : formatCompactNumber
+              }
+              maximum={maximum}
+            />
+            <ActivityChartXAxis keys={data.map((day) => day.date)} />
+            {/* A hidden second axis lets the missing mark overlay the stack. */}
+            <XAxis dataKey="date" hide xAxisId="missing" />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={({ day }: (typeof data)[number]) => {
+                    const total = cacheInputTotal(day);
+                    return CACHE_INPUT_SERIES.map(({ key, label }) => [
                       label,
                       day[key] === undefined
                         ? "Not reported"
                         : `${formatCompactNumber(day[key])} · ${formatCacheShare(day[key], total)}`,
-                    ])}
-                  />
-                }
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill="transparent"
-                    x={x(index) - step / 2}
-                    y={layout.top}
-                    width={step}
-                    height={layout.plotHeight}
-                  />
-                  {bars}
-                  {incomplete ? (
-                    <rect
-                      fill="var(--color-slate-400)"
-                      x={x(index) - barWidth / 2}
-                      y={layout.top + layout.plotHeight - 3}
-                      width={barWidth}
-                      height={3}
-                    />
-                  ) : null}
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={x}
-          />
-        </ChartSvg>
+                    ]);
+                  }}
+                />
+              }
+            />
+            {CACHE_INPUT_SERIES.map(({ key }) => (
+              <Bar
+                dataKey={key}
+                fill={`var(--color-${key})`}
+                fillOpacity={0.85}
+                isAnimationActive={false}
+                key={key}
+                maxBarSize={32}
+                stackId="input"
+              />
+            ))}
+            <Bar
+              dataKey="missing"
+              fill="var(--color-missing)"
+              isAnimationActive={false}
+              maxBarSize={32}
+              minPointSize={3}
+              xAxisId="missing"
+            />
+          </BarChart>
+        </ChartContainer>
       </div>
       <CacheWrites days={props.days} bucketUnit={props.bucketUnit} />
-      <details className="border-t border-dashboard-border-subtle px-4 py-3 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
-        <summary className="cursor-pointer text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+      <Collapsible className="border-t border-dashboard-border-subtle px-4 py-3 font-sans tabular-nums text-xs text-dashboard-text-muted sm:px-5">
+        <CollapsibleTrigger className="group flex cursor-pointer items-center gap-1 text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
           How to read this
-        </summary>
-        <div className="mt-3 grid gap-2 leading-relaxed">
-          <p className="m-0">
-            From cache is input reused. Written to cache is input saved for
-            reuse. Uncached is the remaining input.
-          </p>
-          <p className="m-0">
-            Percentages use total input tokens, not call counts. Gray marks and
-            — mean missing data; zero means a reported zero. The latest interval
-            may be incomplete.
-          </p>
-          <p className="m-0">
-            These totals can show when reuse changes, but not why. They do not
-            show individual calls or prove that every call reported cache use.
-          </p>
-        </div>
-      </details>
+        </CollapsibleTrigger>
+        <CollapsibleContent hiddenUntilFound>
+          <div className="mt-3 grid gap-2 leading-relaxed">
+            <p className="m-0">
+              From cache is input reused. Written to cache is input saved for
+              reuse. Uncached is the remaining input.
+            </p>
+            <p className="m-0">
+              Percentages use total input tokens, not call counts. Gray marks
+              and — mean missing data; zero means a reported zero. The latest
+              interval may be incomplete.
+            </p>
+            <p className="m-0">
+              These totals can show when reuse changes, but not why. They do not
+              show individual calls or prove that every call reported cache use.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </Card>
   );
 }

package/src/client/components/charts/README.md

@@ -27,12 +27,12 @@ or a cache failure rate.
 The list and chart consume the same selected buckets. There is no local time
 selector or comparison window. The list is collapsed until needed.
 
-`useChartLayout` measures the available width. Charts keep a fixed, compact
-height rather than growing taller on wide screens.
+The chart fills the available width. It keeps a fixed, compact height rather
+than growing taller on wide screens.
 
 This report has no per-call model, release, environment, trace, or write-cost
 fields. Add a reporting contract before adding those filters or drilldowns.
 A large write alone cannot identify cache expiry, a cold start, or prefix loss.
 
-The chart gallery includes a reuse drop and a missing counter. The System
-browser scenario covers display modes and verifies that the page time control also filters the list.
+The System browser scenario covers display modes and verifies that the page
+time control also filters the list.

package/src/client/components/charts/SystemMetricCharts.tsx

@@ -11,16 +11,17 @@ import {
   formatCompactNumber,
   formatCostSummary,
 } from "../../format";
+import { Area, Bar, CartesianGrid, ComposedChart, Scatter } from "recharts";
+import { ChartContainer, ChartTooltip } from "../ui/chart";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
   activityChartAverage,
-  ChartSvg,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "./ActivityChart";
 import { ChartHeader } from "./ChartHeader";
-import { useChartLayout } from "./useChartLayout";
 import { InputCacheChart } from "./InputCacheChart";
 
 type Metric = "costUsd" | "durationMs" | "tokens";
@@ -123,108 +124,80 @@ function MetricChart(props: {
   days: ConversationMetricDay[];
 }) {
   const { chart, days } = props;
-  const { ref, layout } = useChartLayout(
-    150,
-    chart.metric === "costUsd" ? 72 : 64,
-  );
   const values = days.map((day) => metricValue(day, chart.metric));
-  const maximum = Math.max(Number.EPSILON, ...values);
-  const step = layout.plotWidth / Math.max(1, days.length);
-  const points = values.map((value, index) => ({
-    x: layout.left + step * index + step / 2,
-    y: layout.top + layout.plotHeight - (value / maximum) * layout.plotHeight,
+  const data = days.map((day, index) => ({
+    date: day.date,
+    value: values[index]!,
   }));
-  const area = points.length
-    ? `M ${points[0]!.x} ${layout.top + layout.plotHeight} L ${points
-        .map((point) => `${point.x} ${point.y}`)
-        .join(" L ")} L ${points.at(-1)!.x} ${layout.top + layout.plotHeight} Z`
-    : "";
+  const maximum = Math.max(Number.EPSILON, ...values);
   const total = values.reduce((sum, value) => sum + value, 0);
   const average = activityChartAverage(values);
-  const barWidth = Math.max(1.5, Math.min(8, step * 0.65));
+  const series = {
+    dataKey: "value",
+    fill: "var(--color-value)",
+    isAnimationActive: false,
+  } as const;
 
   return (
     <Card>
       <ChartHeader title={chart.title} total={chart.format(total)} />
-      <div className="px-2 py-2" ref={ref}>
-        <ChartSvg
-          aria-label={`${chart.title} per ${props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit}`}
-          layout={layout}
+      <div className="px-2 py-2">
+        <ChartContainer
+          className="aspect-auto h-38 w-full"
+          config={{ value: { color: chart.color, label: chart.title } }}
         >
-          <ActivityChartGrid
-            format={chart.axisFormat}
-            layout={layout}
-            maximum={maximum}
-          />
-          {chart.type === "area" && area ? (
-            <>
-              <path d={area} fill={chart.color} fillOpacity={0.08} />
-              <polyline
-                fill="none"
-                points={points
-                  .map((point) => `${point.x},${point.y}`)
-                  .join(" ")}
-                stroke={chart.color}
+          <ComposedChart
+            aria-label={`${chart.title} per ${props.bucketUnit === "6hour" ? "6 hours" : props.bucketUnit}`}
+            data={data}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis format={chart.axisFormat} maximum={maximum} />
+            <ActivityChartXAxis keys={data.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: (typeof data)[number]) => [
+                    [chart.title, chart.format(day.value)],
+                  ]}
+                />
+              }
+            />
+            {chart.type === "bar" ? (
+              <Bar
+                {...series}
+                fillOpacity={0.8}
+                maxBarSize={8}
+                minPointSize={(value) => (value ? 2 : 0)}
+                radius={1.5}
+              />
+            ) : chart.type === "area" ? (
+              <Area
+                {...series}
+                dot={{ fillOpacity: 0.45, r: 2.5, stroke: "none" }}
+                fillOpacity={0.08}
+                stroke="var(--color-value)"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                strokeWidth="2"
+                strokeWidth={2}
+                type="linear"
               />
-            </>
-          ) : null}
-          {days.map((day, index) => {
-            const value = values[index]!;
-            const point = points[index]!;
-            const barHeight = (value / maximum) * layout.plotHeight;
-            const renderedBarHeight = Math.max(value ? 2 : 0, barHeight);
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={chart.format(value)}
-                date={day.date}
-                summary={chart.format(value)}
-              >
-                {chart.type === "bar" ? (
-                  <rect
-                    fill={chart.color}
-                    height={renderedBarHeight}
-                    opacity={value ? 0.8 : 0.1}
-                    rx="1.5"
-                    tabIndex={0}
-                    width={barWidth}
-                    x={point.x - barWidth / 2}
-                    y={layout.top + layout.plotHeight - renderedBarHeight}
-                  />
-                ) : (
-                  <circle
-                    cx={point.x}
-                    cy={point.y}
-                    fill={chart.color}
-                    opacity={chart.type === "scatter" ? 0.75 : 0.45}
-                    r={chart.type === "scatter" ? 3.5 : 2.5}
-                    tabIndex={0}
-                  />
-                )}
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            average={average}
-            format={
-              chart.metric === "tokens"
-                ? formatActivityChartAverage
-                : chart.format
-            }
-            layout={layout}
-            maximum={maximum}
-            stroke={chart.color}
-            unit={timeRangeBucketAverageUnit(props.bucketUnit)}
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => points[index]?.x ?? layout.left}
-          />
-        </ChartSvg>
+            ) : (
+              <Scatter {...series} fillOpacity={0.75} />
+            )}
+            <ActivityChartAverageLine
+              average={average}
+              format={
+                chart.metric === "tokens"
+                  ? formatActivityChartAverage
+                  : chart.format
+              }
+              stroke={chart.color}
+              unit={timeRangeBucketAverageUnit(props.bucketUnit)}
+            />
+          </ComposedChart>
+        </ChartContainer>
       </div>
     </Card>
   );