@cryptiklemur/lattice 1.4.0 → 1.6.0

package/client/src/components/analytics/charts/ContextUtilizationChart.tsx

@@ -0,0 +1,110 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+var LINE_COLORS = [
+  "oklch(55% 0.25 280)",
+  "#a855f7",
+  "#22c55e",
+  "#f59e0b",
+  "oklch(65% 0.2 240)",
+];
+
+interface ContextUtilDatum {
+  messageIndex: number;
+  contextPercent: number;
+  sessionId: string;
+  title: string;
+}
+
+interface ContextUtilizationChartProps {
+  data: ContextUtilDatum[];
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      {payload.map(function (entry) {
+        return (
+          <div key={entry.name} className="flex items-center gap-2 text-[11px] font-mono">
+            <span className="inline-block w-2 h-2 rounded-full" style={{ background: entry.color }} />
+            <span className="text-base-content/60 truncate max-w-[120px]">{entry.name}</span>
+            <span className="text-base-content ml-auto pl-4">{entry.value.toFixed(1)}%</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ContextUtilizationChart({ data }: ContextUtilizationChartProps) {
+  var sessionMap = new Map<string, { title: string; points: Array<{ messageIndex: number; contextPercent: number }> }>();
+  for (var i = 0; i < data.length; i++) {
+    var d = data[i];
+    var entry = sessionMap.get(d.sessionId);
+    if (!entry) {
+      entry = { title: d.title, points: [] };
+      sessionMap.set(d.sessionId, entry);
+    }
+    entry.points.push({ messageIndex: d.messageIndex, contextPercent: d.contextPercent });
+  }
+
+  var sessions = Array.from(sessionMap.entries()).slice(0, 5);
+
+  var maxIndex = 0;
+  sessions.forEach(function (s) {
+    s[1].points.forEach(function (p) {
+      if (p.messageIndex > maxIndex) maxIndex = p.messageIndex;
+    });
+  });
+
+  var merged: Array<Record<string, number>> = [];
+  for (var mi = 0; mi <= maxIndex; mi++) {
+    var row: Record<string, number> = { messageIndex: mi };
+    sessions.forEach(function (s) {
+      var point = s[1].points.find(function (p) { return p.messageIndex === mi; });
+      if (point) row[s[0]] = point.contextPercent;
+    });
+    merged.push(row);
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <LineChart data={merged} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="messageIndex" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis domain={[0, 100]} tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return v + "%"; }} />
+        <Tooltip content={<CustomTooltip />} />
+        {sessions.map(function (s, idx) {
+          return (
+            <Line
+              key={s[0]}
+              type="monotone"
+              dataKey={s[0]}
+              name={s[1].title.slice(0, 30)}
+              stroke={LINE_COLORS[idx % LINE_COLORS.length]}
+              strokeWidth={1.5}
+              dot={false}
+              connectNulls
+            />
+          );
+        })}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/CostAreaChart.tsx

@@ -0,0 +1,83 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+interface CostAreaDatum {
+  date: string;
+  total: number;
+  opus: number;
+  sonnet: number;
+  haiku: number;
+  other: number;
+}
+
+interface CostAreaChartProps {
+  data: CostAreaDatum[];
+}
+
+function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1">{label}</p>
+      {payload.map(function (entry) {
+        return (
+          <div key={entry.name} className="flex items-center gap-2 text-[11px] font-mono">
+            <span className="inline-block w-2 h-2 rounded-full" style={{ background: entry.color }} />
+            <span className="text-base-content/60 capitalize">{entry.name}</span>
+            <span className="text-base-content ml-auto pl-4">${entry.value.toFixed(4)}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function CostAreaChart({ data }: CostAreaChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="opusGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#a855f7" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#a855f7" stopOpacity={0.05} />
+          </linearGradient>
+          <linearGradient id="sonnetGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.05} />
+          </linearGradient>
+          <linearGradient id="haikuGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#22c55e" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#22c55e" stopOpacity={0.05} />
+          </linearGradient>
+          <linearGradient id="otherGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
+            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return "$" + v.toFixed(2); }} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area type="monotone" dataKey="opus" stackId="1" stroke="#a855f7" fill="url(#opusGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="sonnet" stackId="1" stroke="oklch(55% 0.25 280)" fill="url(#sonnetGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="haiku" stackId="1" stroke="#22c55e" fill="url(#haikuGrad)" strokeWidth={1.5} />
+        <Area type="monotone" dataKey="other" stackId="1" stroke="#f59e0b" fill="url(#otherGrad)" strokeWidth={1.5} />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/CostDistributionChart.tsx

@@ -0,0 +1,62 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+interface DistributionDatum {
+  bucket: string;
+  count: number;
+}
+
+interface CostDistributionChartProps {
+  data: DistributionDatum[];
+}
+
+function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number }>; label?: string }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1">{label}</p>
+      <p className="text-[11px] font-mono text-base-content">{payload[0].value} sessions</p>
+    </div>
+  );
+}
+
+export function CostDistributionChart({ data }: CostDistributionChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="distGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.35} />
+            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.02} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="bucket" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} allowDecimals={false} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area
+          type="monotone"
+          dataKey="count"
+          stroke="oklch(55% 0.25 280)"
+          fill="url(#distGrad)"
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/CostDonutChart.tsx

@@ -0,0 +1,93 @@
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
+
+var MODEL_COLORS: Record<string, string> = {
+  opus: "#a855f7",
+  sonnet: "oklch(55% 0.25 280)",
+  haiku: "#22c55e",
+  other: "#f59e0b",
+};
+
+function getModelColor(model: string): string {
+  var key = model.toLowerCase();
+  if (key.includes("opus")) return MODEL_COLORS.opus;
+  if (key.includes("sonnet")) return MODEL_COLORS.sonnet;
+  if (key.includes("haiku")) return MODEL_COLORS.haiku;
+  return MODEL_COLORS.other;
+}
+
+interface ModelUsage {
+  model: string;
+  cost: number;
+  percentage: number;
+}
+
+interface CostDonutChartProps {
+  modelUsage: ModelUsage[];
+  totalCost: number;
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: ModelUsage }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var entry = payload[0];
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1">{entry.name}</p>
+      <p className="text-[11px] font-mono text-base-content">${entry.value.toFixed(4)}</p>
+      <p className="text-[10px] font-mono text-base-content/50">{entry.payload.percentage.toFixed(1)}%</p>
+    </div>
+  );
+}
+
+function CenterLabel({ totalCost }: { totalCost: number }) {
+  return (
+    <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle">
+      <tspan x="50%" dy="-0.4em" style={{ fontSize: 11, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.4)" }}>
+        TOTAL
+      </tspan>
+      <tspan x="50%" dy="1.4em" style={{ fontSize: 14, fontFamily: "var(--font-mono)", fill: "oklch(0.9 0.02 280 / 0.9)", fontWeight: 700 }}>
+        ${totalCost.toFixed(2)}
+      </tspan>
+    </text>
+  );
+}
+
+export function CostDonutChart({ modelUsage, totalCost }: CostDonutChartProps) {
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={200}>
+        <PieChart>
+          <Pie
+            data={modelUsage}
+            dataKey="cost"
+            nameKey="model"
+            innerRadius={50}
+            outerRadius={80}
+            paddingAngle={2}
+            startAngle={90}
+            endAngle={-270}
+          >
+            {modelUsage.map(function (entry, index) {
+              return <Cell key={entry.model + index} fill={getModelColor(entry.model)} />;
+            })}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+          <CenterLabel totalCost={totalCost} />
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="flex flex-wrap justify-center gap-3 mt-2">
+        {modelUsage.map(function (entry) {
+          return (
+            <div key={entry.model} className="flex items-center gap-1.5 text-[10px] font-mono text-base-content/50">
+              <span
+                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+                style={{ background: getModelColor(entry.model) }}
+              />
+              <span className="capitalize">{entry.model}</span>
+              <span className="text-base-content/30">{entry.percentage.toFixed(1)}%</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/client/src/components/analytics/charts/CumulativeCostChart.tsx

@@ -0,0 +1,62 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+interface CumulativeDatum {
+  date: string;
+  total: number;
+}
+
+interface CumulativeCostChartProps {
+  data: CumulativeDatum[];
+}
+
+function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ value: number }>; label?: string }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1">{label}</p>
+      <p className="text-[11px] font-mono text-base-content">${payload[0].value.toFixed(4)}</p>
+    </div>
+  );
+}
+
+export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <defs>
+          <linearGradient id="cumulativeGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="oklch(55% 0.25 280)" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="oklch(55% 0.25 280)" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} vertical={false} />
+        <XAxis dataKey="date" tick={TICK_STYLE} axisLine={false} tickLine={false} />
+        <YAxis tick={TICK_STYLE} axisLine={false} tickLine={false} tickFormatter={function (v) { return "$" + v.toFixed(2); }} />
+        <Tooltip content={<CustomTooltip />} />
+        <Area
+          type="monotone"
+          dataKey="total"
+          stroke="oklch(55% 0.25 280)"
+          fill="url(#cumulativeGrad)"
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/ResponseTimeScatter.tsx

@@ -0,0 +1,101 @@
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+var MODEL_COLORS: Record<string, string> = {
+  opus: "#a855f7",
+  sonnet: "oklch(55% 0.25 280)",
+  haiku: "#22c55e",
+  other: "#f59e0b",
+};
+
+interface ResponseTimeDatum {
+  tokens: number;
+  duration: number;
+  model: string;
+  sessionId: string;
+}
+
+interface ResponseTimeScatterProps {
+  data: ResponseTimeDatum[];
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { tokens: number; durationSec: number; model: string } }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var d = payload[0].payload;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg">
+      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
+        <p><span className="text-base-content/40">duration </span>{d.durationSec.toFixed(1)}s</p>
+        <p><span className="text-base-content/40">model </span>{d.model}</p>
+      </div>
+    </div>
+  );
+}
+
+export function ResponseTimeScatter({ data }: ResponseTimeScatterProps) {
+  var models = Array.from(new Set(data.map(function (d) { return d.model; })));
+
+  var byModel = models.map(function (model) {
+    return {
+      model: model,
+      color: MODEL_COLORS[model] || "#f59e0b",
+      points: data
+        .filter(function (d) { return d.model === model; })
+        .map(function (d) { return { tokens: d.tokens, durationSec: d.duration / 1000, model: d.model }; }),
+    };
+  });
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <XAxis
+          dataKey="tokens"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
+          name="tokens"
+        />
+        <YAxis
+          dataKey="durationSec"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v.toFixed(0) + "s"; }}
+          name="duration"
+        />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        {byModel.map(function (group) {
+          return (
+            <Scatter
+              key={group.model}
+              name={group.model}
+              data={group.points}
+              fill={group.color}
+              fillOpacity={0.7}
+            />
+          );
+        })}
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+}

package/client/src/components/analytics/charts/SessionBubbleChart.tsx

@@ -0,0 +1,122 @@
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ZAxis,
+} from "recharts";
+
+var TICK_STYLE = {
+  fontSize: 10,
+  fontFamily: "var(--font-mono)",
+  fill: "oklch(0.9 0.02 280 / 0.3)",
+};
+
+var GRID_COLOR = "oklch(0.9 0.02 280 / 0.06)";
+
+var PROJECT_PALETTE = [
+  "oklch(55% 0.25 280)",
+  "#a855f7",
+  "#22c55e",
+  "#f59e0b",
+  "oklch(65% 0.2 240)",
+  "oklch(65% 0.25 25)",
+  "oklch(65% 0.25 150)",
+  "oklch(70% 0.2 60)",
+];
+
+interface SessionBubbleDatum {
+  id: string;
+  title: string;
+  cost: number;
+  tokens: number;
+  timestamp: number;
+  project: string;
+}
+
+interface SessionBubbleChartProps {
+  data: SessionBubbleDatum[];
+}
+
+function formatDate(ts: number): string {
+  var d = new Date(ts);
+  return (d.getMonth() + 1) + "/" + d.getDate();
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: SessionBubbleDatum }> }) {
+  if (!active || !payload || payload.length === 0) return null;
+  var d = payload[0].payload;
+  return (
+    <div className="rounded-lg border border-base-content/8 bg-base-200 px-3 py-2 shadow-lg max-w-[180px]">
+      <p className="text-[10px] font-mono text-base-content/50 mb-1 truncate">{d.title || d.id}</p>
+      <div className="text-[11px] font-mono text-base-content/70 space-y-0.5">
+        <p><span className="text-base-content/40">cost </span>${d.cost.toFixed(4)}</p>
+        <p><span className="text-base-content/40">tokens </span>{d.tokens.toLocaleString()}</p>
+        <p><span className="text-base-content/40">project </span>{d.project}</p>
+      </div>
+    </div>
+  );
+}
+
+export function SessionBubbleChart({ data }: SessionBubbleChartProps) {
+  var projects = Array.from(new Set(data.map(function (d) { return d.project; })));
+
+  function getColor(project: string): string {
+    var idx = projects.indexOf(project);
+    return PROJECT_PALETTE[idx % PROJECT_PALETTE.length];
+  }
+
+  var byProject = projects.map(function (project) {
+    return {
+      project,
+      color: getColor(project),
+      points: data
+        .filter(function (d) { return d.project === project; })
+        .map(function (d) { return { ...d, x: d.timestamp, y: d.tokens, z: Math.max(d.cost * 1000, 20) }; }),
+    };
+  });
+
+  var minTs = Math.min(...data.map(function (d) { return d.timestamp; }));
+  var maxTs = Math.max(...data.map(function (d) { return d.timestamp; }));
+
+  return (
+    <ResponsiveContainer width="100%" height={200}>
+      <ScatterChart margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke={GRID_COLOR} />
+        <XAxis
+          dataKey="x"
+          type="number"
+          domain={[minTs, maxTs]}
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return formatDate(v); }}
+        />
+        <YAxis
+          dataKey="y"
+          type="number"
+          tick={TICK_STYLE}
+          axisLine={false}
+          tickLine={false}
+          tickFormatter={function (v) { return v >= 1000 ? (v / 1000).toFixed(0) + "k" : String(v); }}
+        />
+        <ZAxis dataKey="z" range={[20, 300]} />
+        <Tooltip content={<CustomTooltip />} cursor={{ strokeDasharray: "3 3", stroke: GRID_COLOR }} />
+        {byProject.map(function (group) {
+          return (
+            <Scatter
+              key={group.project}
+              name={group.project}
+              data={group.points}
+              fill={group.color}
+              fillOpacity={0.7}
+            />
+          );
+        })}
+      </ScatterChart>
+    </ResponsiveContainer>
+  );
+}