Chart Shared

import { Bar, BarChart, Tooltip, XAxis, YAxis } from 'recharts'
import {
  ChartCard,
  ChartTooltipShell,
} from '@/components/observability-chart-shared'

export function MyChart({ data }: { data: Row[] }) {
  return (
    <ChartCard
      title="My metric"
      subtitle="Per-turn trend"
      legend={[{ color: 'hsl(var(--primary))', label: 'Value' }]}
    >
      <BarChart data={data}>
        <XAxis dataKey="turn" />
        <YAxis />
        <Tooltip
          content={({ active, label, payload }) => (
            <ChartTooltipShell
              active={active}
              label={label}
              rows={(payload ?? []).map((p) => ({
                label: String(p.dataKey),
                value: String(p.value),
              }))}
            />
          )}
        />
        <Bar dataKey="value" fill="hsl(var(--primary))" />
      </BarChart>
    </ChartCard>
  )
}