@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/pages/locations/LocationActivityChart.tsx

@@ -4,19 +4,19 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import type { DailyConversationActivity } from "@sentry/junior/api/schema";
 
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import { Card } from "../../components/layout/Card";
 import { CardHeader } from "../../components/layout/CardHeader";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatActivityChartAverage } from "../../format";
 
 /** Plot daily conversation volume across one public location. */
@@ -27,12 +27,9 @@ export function LocationActivityChart(props: {
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
 
-  const layout = createActivityChartLayout(240);
   const values = props.days.map((day) => day.conversations);
   const maximum = Math.max(1, ...values);
   const average = activityChartAverage(values);
-  const step = layout.plotWidth / Math.max(1, props.days.length);
-  const barWidth = Math.max(4, Math.min(20, step * 0.55));
 
   return (
     <Card>
@@ -54,68 +51,54 @@ export function LocationActivityChart(props: {
         }
       />
       <div className="px-2 py-3 sm:px-4 sm:py-4">
-        <ChartSvg
-          aria-label="Daily conversations for this location"
-          className="min-h-52 w-full overflow-visible"
-          layout={layout}
-        >
-          <defs>
-            <linearGradient id="location-bars" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="var(--color-cyan-400)" />
-              <stop
-                offset="100%"
-                stopColor="var(--color-amber-500)"
-                stopOpacity="0.65"
-              />
-            </linearGradient>
-          </defs>
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {props.days.map((day, index) => {
-            const barHeight = (day.conversations / maximum) * layout.plotHeight;
-            const x = layout.left + index * step + (step - barWidth) / 2;
-            const y = layout.top + layout.plotHeight - barHeight;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[
-                      ["conversations", day.conversations],
-                      ["active", day.active],
-                      ["failed", day.failed],
-                    ]}
-                  />
-                }
-                date={day.date}
-                summary={`${day.conversations} conversations, ${day.active} active, ${day.failed} failed`}
-              >
-                <rect
-                  fill="url(#location-bars)"
-                  height={Math.max(day.conversations ? 2 : 0, barHeight)}
-                  opacity={day.conversations ? 0.9 : 0.18}
-                  rx="2"
-                  tabIndex={0}
-                  width={barWidth}
-                  x={x}
-                  y={y}
+        <ChartContainer className="aspect-auto h-60 w-full" config={{}}>
+          <BarChart
+            aria-label="Daily conversations for this location"
+            data={props.days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <defs>
+              <linearGradient id="location-bars" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" stopColor="var(--color-cyan-400)" />
+                <stop
+                  offset="100%"
+                  stopColor="var(--color-amber-500)"
+                  stopOpacity="0.65"
                 />
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={formatActivityChartAverage}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-cyan-400)"
-          />
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={props.days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: DailyConversationActivity) => [
+                    ["conversations", day.conversations],
+                    ["active", day.active],
+                    ["failed", day.failed],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="conversations"
+              fill="url(#location-bars)"
+              fillOpacity={0.9}
+              isAnimationActive={false}
+              maxBarSize={20}
+              minPointSize={(value) => (value ? 2 : 0)}
+              radius={2}
+            />
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatActivityChartAverage}
+              stroke="var(--color-cyan-400)"
+            />
+          </BarChart>
+        </ChartContainer>
       </div>
     </Card>
   );

package/src/client/pages/locations/LocationDirectoryActivityChart.tsx

@@ -5,17 +5,35 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import type { LocationActivityDayReport } from "@sentry/junior/api/schema";
 
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import { Card } from "../../components/layout/Card";
 import { CardHeader } from "../../components/layout/CardHeader";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
+
+const series = [
+  {
+    color: "var(--color-cyan-400)",
+    dataKey: "publicConversations",
+    key: "public",
+    label: "public",
+  },
+  {
+    color: "var(--color-amber-400)",
+    dataKey: "privateConversations",
+    key: "private",
+    label: "private",
+  },
+] as const;
+const chartConfig = Object.fromEntries(
+  series.map((item) => [item.key, { color: item.color, label: item.label }]),
+);
 
 /** Compare public and privacy-preserving private conversation volume by day. */
 export function LocationDirectoryActivityChart(props: {
@@ -26,7 +44,6 @@ export function LocationDirectoryActivityChart(props: {
   const bucketUnit = props.bucketUnit ?? "day";
   const perBucket = `Conversations per ${timeRangeBucketPerLabel(bucketUnit)}`;
 
-  const layout = createActivityChartLayout(260);
   const maximum = Math.max(
     1,
     ...props.days.flatMap((day) => [
@@ -34,10 +51,6 @@ export function LocationDirectoryActivityChart(props: {
       day.publicConversations,
     ]),
   );
-  const step = layout.plotWidth / Math.max(1, props.days.length);
-  const groupWidth = Math.max(3, Math.min(18, step * 0.8));
-  const gap = Math.min(2, groupWidth * 0.15);
-  const barWidth = Math.max(1.5, (groupWidth - gap) / 2);
   return (
     <Card>
       <CardHeader
@@ -47,81 +60,48 @@ export function LocationDirectoryActivityChart(props: {
           <ChartLegend
             ariaLabel="Conversation visibility legend"
             inline
-            items={[
-              {
-                color: "var(--color-cyan-400)",
-                key: "public",
-                label: "public",
-              },
-              {
-                color: "var(--color-amber-400)",
-                key: "private",
-                label: "private",
-              },
-            ]}
+            items={series}
           />
         }
       />
       <div className="px-2 py-3 sm:px-4 sm:py-4">
-        <ChartSvg
-          aria-label={`Public and private ${perBucket.toLowerCase()}`}
-          className="min-h-56 w-full overflow-visible"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-65 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {props.days.flatMap((day, index) => {
-            const groupX = layout.left + index * step + (step - groupWidth) / 2;
-            return (
-              [
-                {
-                  count: day.publicConversations,
-                  fill: "var(--color-cyan-400)",
-                  key: "public",
-                  x: groupX,
-                },
-                {
-                  count: day.privateConversations,
-                  fill: "var(--color-amber-400)",
-                  key: "private",
-                  x: groupX + barWidth + gap,
-                },
-              ] as const
-            ).map((bar) => {
-              const barHeight = (bar.count / maximum) * layout.plotHeight;
-              return (
-                <ActivityChartTooltip
-                  key={`${day.date}-${bar.key}`}
-                  content={
-                    <ActivityTooltipRows
-                      rows={[
-                        ["public", day.publicConversations],
-                        ["private", day.privateConversations],
-                      ]}
-                    />
+          <BarChart
+            aria-label={`Public and private ${perBucket.toLowerCase()}`}
+            barGap={2}
+            data={props.days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={props.days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: LocationActivityDayReport) =>
+                    series.map((item) => [item.label, day[item.dataKey]])
                   }
-                  date={day.date}
-                  summary={`${day.publicConversations} public conversations, ${day.privateConversations} private conversations`}
-                >
-                  <rect
-                    fill={bar.fill}
-                    height={Math.max(bar.count ? 2 : 0, barHeight)}
-                    opacity={bar.count ? 0.85 : 0.12}
-                    rx="1.5"
-                    tabIndex={0}
-                    width={barWidth}
-                    x={bar.x}
-                    y={layout.top + layout.plotHeight - barHeight}
-                  />
-                </ActivityChartTooltip>
-              );
-            });
-          })}
-          <ActivityChartDateLabels
-            dates={props.days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+                />
+              }
+            />
+            {series.map((item) => (
+              <Bar
+                dataKey={item.dataKey}
+                fill={`var(--color-${item.key})`}
+                fillOpacity={0.85}
+                isAnimationActive={false}
+                key={item.key}
+                maxBarSize={8}
+                minPointSize={(value) => (value ? 2 : 0)}
+                radius={1.5}
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
       </div>
     </Card>
   );

package/src/client/pages/memory/MemoryCostChart.tsx

@@ -3,22 +3,31 @@ import {
   timeRangeBucketAverageUnit,
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
   ActivityChartAverageLine,
-  ActivityChartDateLabels,
-  ActivityChartGrid,
   activityChartAverage,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 
 import { Card } from "../../components/layout/Card";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 import { formatCostSummary } from "../../format";
 import type { MemoryCostDay } from "./memoryDashboard";
 
+const chartConfig = {
+  extraction: { color: "var(--color-cyan-300)", label: "Extraction" },
+  recall: { color: "var(--color-fuchsia-400)", label: "Recall" },
+};
+
+function formatCost(value: number): string {
+  return formatCostSummary({ total: value });
+}
+
 /** Render stacked memory extraction and recall cost from durable plugin events. */
 export function MemoryCostChart(props: {
   bucketUnit?: TimeRangeBucketUnit;
@@ -30,15 +39,20 @@ export function MemoryCostChart(props: {
   const bucketUnit = props.bucketUnit ?? "day";
 
   const recallByDate = new Map(props.recallDays.map((day) => [day.date, day]));
-  const days = props.extractionDays.map((extraction) => ({
-    date: extraction.date,
-    extraction,
-    recall: recallByDate.get(extraction.date) ?? {
+  const days = props.extractionDays.map((extraction) => {
+    const recall = recallByDate.get(extraction.date) ?? {
       costUsd: 0,
       date: extraction.date,
       events: 0,
-    },
-  }));
+    };
+    return {
+      date: extraction.date,
+      extraction,
+      extractionCost: extraction.costUsd,
+      recall,
+      recallCost: recall.costUsd,
+    };
+  });
   const extractionTotal = days.reduce(
     (sum, day) => sum + day.extraction.costUsd,
     0,
@@ -54,11 +68,6 @@ export function MemoryCostChart(props: {
   );
   const maximum = Math.max(0.01, ...dayTotals);
   const average = activityChartAverage(dayTotals);
-  // Cost charts need a wider left gutter for currency tick labels.
-  const layout = createActivityChartLayout(200, { left: 112 });
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
 
   return (
     <Card className="min-h-[17rem] p-4 sm:p-5">
@@ -90,93 +99,60 @@ export function MemoryCostChart(props: {
       </div>
 
       <div className="relative mt-4 overflow-hidden">
-        <ChartSvg
-          aria-label={`Memory extraction and recall cost during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-50 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-          />
-          {days.map((day, index) => {
-            const extractionHeight =
-              (day.extraction.costUsd / maximum) * layout.plotHeight;
-            const recallHeight =
-              (day.recall.costUsd / maximum) * layout.plotHeight;
-            const x = layout.left + index * step + (step - barWidth) / 2;
-            const dayTotal = day.extraction.costUsd + day.recall.costUsd;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[
-                      [
-                        "extraction",
-                        `${formatCostSummary({ total: day.extraction.costUsd })} · ${formatRunCount(day.extraction.events)}`,
-                      ],
-                      [
-                        "recall",
-                        `${formatCostSummary({ total: day.recall.costUsd })} · ${formatRunCount(day.recall.events)}`,
-                      ],
-                      ["total", formatCostSummary({ total: dayTotal })],
-                    ]}
-                  />
-                }
-                date={day.date}
-                summary={`extraction ${formatCostSummary({ total: day.extraction.costUsd })}, ${formatRunCount(day.extraction.events)}; recall ${formatCostSummary({ total: day.recall.costUsd })}, ${formatRunCount(day.recall.events)}`}
-              >
-                <g tabIndex={0}>
-                  <rect
-                    fill="var(--color-cyan-300)"
-                    height={extractionHeight}
-                    opacity={day.extraction.costUsd > 0 ? 0.82 : 0.1}
-                    rx="1"
-                    width={barWidth}
-                    x={x}
-                    y={layout.top + layout.plotHeight - extractionHeight}
-                  />
-                  <rect
-                    fill="var(--color-fuchsia-400)"
-                    height={recallHeight}
-                    opacity={day.recall.costUsd > 0 ? 0.82 : 0.1}
-                    rx="1"
-                    width={barWidth}
-                    x={x}
-                    y={
-                      layout.top +
-                      layout.plotHeight -
-                      extractionHeight -
-                      recallHeight
-                    }
-                  />
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartAverageLine
-            unit={timeRangeBucketAverageUnit(bucketUnit)}
-            average={average}
-            format={(value) => formatCostSummary({ total: value })}
-            layout={layout}
-            maximum={maximum}
-            stroke="var(--color-slate-200)"
-          />
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Memory extraction and recall cost during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis format={formatCost} maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: (typeof days)[number]) => [
+                    [
+                      "extraction",
+                      `${formatCost(day.extractionCost)} · ${formatRunCount(day.extraction.events)}`,
+                    ],
+                    [
+                      "recall",
+                      `${formatCost(day.recallCost)} · ${formatRunCount(day.recall.events)}`,
+                    ],
+                    ["total", formatCost(day.extractionCost + day.recallCost)],
+                  ]}
+                />
+              }
+            />
+            <Bar
+              dataKey="extractionCost"
+              fill="var(--color-extraction)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              stackId="cost"
+            />
+            <Bar
+              dataKey="recallCost"
+              fill="var(--color-recall)"
+              fillOpacity={0.82}
+              isAnimationActive={false}
+              maxBarSize={13}
+              stackId="cost"
+            />
+            <ActivityChartAverageLine
+              unit={timeRangeBucketAverageUnit(bucketUnit)}
+              average={average}
+              format={formatCost}
+              stroke="var(--color-slate-200)"
+            />
+          </BarChart>
+        </ChartContainer>
         {runs === 0 ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No memory extraction or recall ran in this period.