Chart frame

"use client"

import { ChartFrame, type TableView } from "@/components/chart-frame"
import { formatValue, linear, seriesColor } from "@/components/scale"

// A custom plot in the shared chassis: p95 query time per table, as horizontal bars.
const rows: { table: string; p95: number }[] = [
  { table: "deployments", p95: 0.84 },
  { table: "audit_log", p95: 0.61 },
  { table: "projects", p95: 0.32 },
  { table: "users", p95: 0.18 },
]

const table: TableView = { columns: ["Table", "p95"], rows: rows.map((r) => [r.table, formatValue(r.p95, "duration", true)]) }

export default function Example() {
  return (
    <ChartFrame className="max-w-xl" title="Slowest tables" subtitle="p95 query time · Production, last 24 hours" table={table} height={140}>
      {({ width, height }) => {
        const label = 96
        const x = linear(0, 1, 0, width - label - 48)
        const band = height / rows.length
        return (
          <svg width={width} height={height} role="img" aria-label={rows.map((r) => `${r.table} ${formatValue(r.p95, "duration", true)}`).join(", ")}>
            {rows.map((r, i) => (
              <g key={r.table} transform={`translate(0, ${i * band})`}>
                <text x={0} y={band / 2} dominantBaseline="middle" className="fill-muted-foreground text-xs">
                  {r.table}
                </text>
                <rect x={label} y={band / 2 - 8} width={x(r.p95)} height={16} rx={4} fill={seriesColor(0)} />
                <text x={label + x(r.p95) + 6} y={band / 2} dominantBaseline="middle" className="fill-foreground text-xs tabular-nums">
                  {formatValue(r.p95, "duration")}
                </text>
              </g>
            ))}
          </svg>
        )
      }}
    </ChartFrame>
  )
}