{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "heatmap-chart",
  "title": "Activity Heatmap",
  "type": "registry:charts",
  "description": "64-day contribution and production deployment intensity matrix with interactive cell hover inspection.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { HeatmapStatisticChart } from \"@etherealui/react\"\n\nexport function HeatmapChartDemo() {\n  return (\n    <HeatmapStatisticChart\n      title=\"Deployment & Commit Frequency Heatmap\"\n      subtitle=\"64-day production release intensity across workspace repositories\"\n    />\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/chart.tsx",
      "target": "components/ui/heatmap-chart.tsx",
      "type": "registry:charts",
      "content": "import * as React from \"react\"\nimport {\n  ArrowUpRight,\n  TrendingUp,\n  Activity,\n  PieChart as PieChartIcon,\n  Gauge,\n  Grid,\n  LineChart as LineChartIcon,\n} from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\n\nexport interface ChartDataPoint {\n  label: string\n  value: number\n  secondary?: number\n}\n\nconst DEFAULT_AREA_SERIES: Record<string, ChartDataPoint[]> = {\n  \"7d\": [\n    { label: \"Mon\", value: 14200, secondary: 11800 },\n    { label: \"Tue\", value: 16800, secondary: 13200 },\n    { label: \"Wed\", value: 15900, secondary: 14100 },\n    { label: \"Thu\", value: 19400, secondary: 15600 },\n    { label: \"Fri\", value: 22100, secondary: 17200 },\n    { label: \"Sat\", value: 24600, secondary: 18900 },\n    { label: \"Sun\", value: 28400, secondary: 21400 },\n  ],\n  \"30d\": [\n    { label: \"Oct 05\", value: 64000, secondary: 52000 },\n    { label: \"Oct 10\", value: 72000, secondary: 58000 },\n    { label: \"Oct 15\", value: 69500, secondary: 61000 },\n    { label: \"Oct 20\", value: 84200, secondary: 67500 },\n    { label: \"Oct 25\", value: 96800, secondary: 74200 },\n    { label: \"Oct 30\", value: 112400, secondary: 82900 },\n    { label: \"Nov 05\", value: 128430, secondary: 94100 },\n  ],\n  \"90d\": [\n    { label: \"Aug\", value: 195000, secondary: 162000 },\n    { label: \"Sep\", value: 248000, secondary: 198000 },\n    { label: \"Oct\", value: 312000, secondary: 244000 },\n    { label: \"Nov\", value: 384500, secondary: 289000 },\n  ],\n}\n\nexport interface AreaStatisticChartProps {\n  title?: string\n  subtitle?: string\n  value?: string\n  change?: string\n  data?: ChartDataPoint[]\n  className?: string\n}\n\nexport const AreaStatisticChart: React.FC<AreaStatisticChartProps> = ({\n  title = \"Net Revenue & MRR Velocity\",\n  subtitle = \"Real-time settled volume vs previous billing cycle\",\n  value = \"$128,430\",\n  change = \"+18.4%\",\n  data,\n  className,\n}) => {\n  const [range, setRange] = React.useState<\"7d\" | \"30d\" | \"90d\">(\"30d\")\n  const [hoverIdx, setHoverIdx] = React.useState<number | null>(null)\n\n  const series = data || DEFAULT_AREA_SERIES[range]\n  const maxVal = Math.max(...series.map((d) => Math.max(d.value, d.secondary || 0)), 1)\n  const width = 540\n  const height = 160\n  const padX = 16\n  const padY = 18\n\n  const getCoords = (val: number, idx: number) => {\n    const x = padX + (idx / Math.max(series.length - 1, 1)) * (width - padX * 2)\n    const y = height - padY - (val / maxVal) * (height - padY * 2)\n    return { x, y }\n  }\n\n  const primaryPoints = series.map((d, i) => getCoords(d.value, i))\n  const secondaryPoints = series.map((d, i) =>\n    getCoords(d.secondary ?? d.value * 0.75, i)\n  )\n\n  const linePath = primaryPoints\n    .map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p.x.toFixed(1)},${p.y.toFixed(1)}`)\n    .join(\" \")\n\n  const secondaryPath = secondaryPoints\n    .map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p.x.toFixed(1)},${p.y.toFixed(1)}`)\n    .join(\" \")\n\n  const areaPath = `${linePath} L${primaryPoints[primaryPoints.length - 1].x.toFixed(\n    1\n  )},${height - padY} L${primaryPoints[0].x.toFixed(1)},${height - padY} Z`\n\n  const activePoint = hoverIdx !== null ? series[hoverIdx] : series[series.length - 1]\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <TrendingUp className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n            <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n              {title}\n            </h3>\n          </div>\n          <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">\n            {subtitle}\n          </p>\n        </div>\n\n        <div className=\"inline-flex items-center rounded-xl border border-zinc-200 bg-zinc-50 p-0.5 dark:border-zinc-800 dark:bg-zinc-950 self-start\">\n          {([\"7d\", \"30d\", \"90d\"] as const).map((r) => (\n            <button\n              key={r}\n              type=\"button\"\n              onClick={() => {\n                setRange(r)\n                setHoverIdx(null)\n              }}\n              className={cn(\n                \"rounded-lg px-2.5 py-1 text-[11px] font-semibold uppercase transition-all cursor-pointer\",\n                range === r\n                  ? \"bg-white text-zinc-900 shadow-2xs dark:bg-zinc-800 dark:text-white\"\n                  : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200\"\n              )}\n            >\n              {r}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Live KPI Readout */}\n      <div className=\"mt-4 flex flex-wrap items-baseline justify-between gap-4 border-b border-zinc-100 pb-4 dark:border-zinc-800/80\">\n        <div className=\"flex items-baseline gap-2.5\">\n          <span className=\"text-2xl font-bold tracking-tight text-zinc-900 dark:text-white\">\n            {hoverIdx !== null\n              ? `$${activePoint.value.toLocaleString()}`\n              : value}\n          </span>\n          <span className=\"inline-flex items-center gap-0.5 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400\">\n            <ArrowUpRight className=\"h-3 w-3\" />\n            {change}\n          </span>\n          <span className=\"text-xs text-zinc-400\">\n            {hoverIdx !== null ? `on ${activePoint.label}` : \"current period\"}\n          </span>\n        </div>\n\n        <div className=\"flex items-center gap-4 text-[11px] text-zinc-500 dark:text-zinc-400\">\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"h-2 w-2 rounded-full bg-blue-600\" />\n            Current (${activePoint.value.toLocaleString()})\n          </span>\n          {activePoint.secondary !== undefined && (\n            <span className=\"flex items-center gap-1.5\">\n              <span className=\"h-2 w-2 rounded-full bg-zinc-300 dark:bg-zinc-600\" />\n              Previous (${activePoint.secondary.toLocaleString()})\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Interactive SVG Area Canvas */}\n      <div className=\"mt-4\">\n        <svg\n          viewBox={`0 0 ${width} ${height}`}\n          className=\"h-44 w-full overflow-visible select-none\"\n          onMouseLeave={() => setHoverIdx(null)}\n        >\n          <defs>\n            <linearGradient id=\"etherealAreaGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"#2563eb\" stopOpacity=\"0.28\" />\n              <stop offset=\"100%\" stopColor=\"#2563eb\" stopOpacity=\"0.0\" />\n            </linearGradient>\n          </defs>\n\n          {[0.2, 0.5, 0.8].map((ratio) => (\n            <line\n              key={ratio}\n              x1={padX}\n              x2={width - padX}\n              y1={height * ratio}\n              y2={height * ratio}\n              stroke=\"currentColor\"\n              strokeDasharray=\"3 3\"\n              className=\"text-zinc-200 dark:text-zinc-800\"\n            />\n          ))}\n\n          <path\n            d={secondaryPath}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.75\"\n            strokeDasharray=\"4 4\"\n            className=\"text-zinc-300 dark:text-zinc-700\"\n          />\n\n          <path d={areaPath} fill=\"url(#etherealAreaGrad)\" />\n          <path\n            d={linePath}\n            fill=\"none\"\n            stroke=\"#2563eb\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n\n          {primaryPoints.map((pt, idx) => {\n            const isHovered = hoverIdx === idx\n            return (\n              <g\n                key={series[idx].label}\n                className=\"cursor-pointer\"\n                onMouseEnter={() => setHoverIdx(idx)}\n              >\n                {isHovered && (\n                  <line\n                    x1={pt.x}\n                    x2={pt.x}\n                    y1={padY}\n                    y2={height - padY}\n                    stroke=\"#2563eb\"\n                    strokeWidth=\"1\"\n                    strokeDasharray=\"2 2\"\n                  />\n                )}\n                <circle\n                  cx={pt.x}\n                  cy={pt.y}\n                  r={isHovered ? 5 : 3.5}\n                  className={cn(\n                    \"transition-all\",\n                    isHovered\n                      ? \"fill-blue-600 stroke-white dark:stroke-zinc-900 stroke-2\"\n                      : \"fill-white dark:fill-zinc-900 stroke-blue-600 stroke-2\"\n                  )}\n                />\n                <rect\n                  x={pt.x - 24}\n                  y={0}\n                  width={48}\n                  height={height}\n                  fill=\"transparent\"\n                />\n              </g>\n            )\n          })}\n        </svg>\n\n        <div className=\"mt-2 flex items-center justify-between px-2 text-[11px] font-mono text-zinc-400\">\n          {series.map((item, idx) => (\n            <span\n              key={item.label}\n              className={cn(\n                hoverIdx === idx && \"font-semibold text-blue-600 dark:text-blue-400\"\n              )}\n            >\n              {item.label}\n            </span>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface BarStatisticChartProps {\n  title?: string\n  subtitle?: string\n  data?: ChartDataPoint[]\n  className?: string\n}\n\nconst DEFAULT_BAR_DATA: ChartDataPoint[] = [\n  { label: \"Jan\", value: 68, secondary: 52 },\n  { label: \"Feb\", value: 74, secondary: 58 },\n  { label: \"Mar\", value: 64, secondary: 60 },\n  { label: \"Apr\", value: 82, secondary: 66 },\n  { label: \"May\", value: 89, secondary: 72 },\n  { label: \"Jun\", value: 96, secondary: 78 },\n]\n\nexport const BarStatisticChart: React.FC<BarStatisticChartProps> = ({\n  title = \"Monthly Cohort Conversion\",\n  subtitle = \"Enterprise vs self-serve onboarding completion (%)\",\n  data = DEFAULT_BAR_DATA,\n  className,\n}) => {\n  const [activeIdx, setActiveIdx] = React.useState<number | null>(null)\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2\">\n            <Activity className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n            {title}\n          </h3>\n          <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">\n            {subtitle}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3 text-[11px] text-zinc-500\">\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"h-2.5 w-2.5 rounded-xs bg-blue-600\" />\n            Enterprise\n          </span>\n          <span className=\"flex items-center gap-1.5\">\n            <span className=\"h-2.5 w-2.5 rounded-xs bg-zinc-200 dark:bg-zinc-700\" />\n            Self-Serve\n          </span>\n        </div>\n      </div>\n\n      <div className=\"mt-6 grid grid-cols-6 items-end gap-3 h-44 pt-6 px-2\">\n        {data.map((d, idx) => {\n          const isHovered = activeIdx === idx\n          return (\n            <div\n              key={d.label}\n              onMouseEnter={() => setActiveIdx(idx)}\n              onMouseLeave={() => setActiveIdx(null)}\n              className=\"group relative flex flex-col items-center gap-2 h-full justify-end cursor-pointer\"\n            >\n              {isHovered && (\n                <div className=\"absolute -top-6 rounded-md bg-zinc-900 px-2 py-0.5 font-mono text-[10px] text-white shadow-sm dark:bg-zinc-100 dark:text-zinc-900\">\n                  {d.value}%\n                </div>\n              )}\n              <div className=\"w-full flex items-end justify-center gap-1.5 h-full\">\n                <div\n                  style={{ height: `${d.value}%` }}\n                  className=\"w-full max-w-[18px] rounded-t-md bg-blue-600 transition-all duration-300 group-hover:bg-blue-500\"\n                />\n                {d.secondary !== undefined && (\n                  <div\n                    style={{ height: `${d.secondary}%` }}\n                    className=\"w-full max-w-[14px] rounded-t-md bg-zinc-200 transition-all duration-300 dark:bg-zinc-700\"\n                  />\n                )}\n              </div>\n              <span className=\"text-[11px] font-mono text-zinc-500 dark:text-zinc-400\">\n                {d.label}\n              </span>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport interface LineStatisticChartProps {\n  title?: string\n  subtitle?: string\n  className?: string\n}\n\nconst DEFAULT_LINE_TELEMETRY = [\n  { time: \"00:00\", p95: 22, p50: 11 },\n  { time: \"04:00\", p95: 19, p50: 10 },\n  { time: \"08:00\", p95: 28, p50: 14 },\n  { time: \"12:00\", p95: 34, p50: 16 },\n  { time: \"16:00\", p95: 25, p50: 12 },\n  { time: \"20:00\", p95: 21, p50: 11 },\n  { time: \"24:00\", p95: 18, p50: 9 },\n]\n\nexport const LineStatisticChart: React.FC<LineStatisticChartProps> = ({\n  title = \"Edge API Response Latency (ms)\",\n  subtitle = \"P95 vs P50 global edge worker response time over 24 hours\",\n  className,\n}) => {\n  const [hoverIdx, setHoverIdx] = React.useState<number | null>(null)\n  const width = 520\n  const height = 150\n  const padX = 18\n  const padY = 18\n  const maxVal = 45\n\n  const toPoint = (val: number, i: number) => ({\n    x: padX + (i / (DEFAULT_LINE_TELEMETRY.length - 1)) * (width - padX * 2),\n    y: height - padY - (val / maxVal) * (height - padY * 2),\n  })\n\n  const p95Pts = DEFAULT_LINE_TELEMETRY.map((d, i) => toPoint(d.p95, i))\n  const p50Pts = DEFAULT_LINE_TELEMETRY.map((d, i) => toPoint(d.p50, i))\n\n  const p95Path = p95Pts\n    .map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p.x.toFixed(1)},${p.y.toFixed(1)}`)\n    .join(\" \")\n  const p50Path = p50Pts\n    .map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p.x.toFixed(1)},${p.y.toFixed(1)}`)\n    .join(\" \")\n\n  const current =\n    hoverIdx !== null\n      ? DEFAULT_LINE_TELEMETRY[hoverIdx]\n      : DEFAULT_LINE_TELEMETRY[DEFAULT_LINE_TELEMETRY.length - 1]\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2\">\n            <LineChartIcon className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n            {title}\n          </h3>\n          <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">\n            {subtitle}\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-4 text-xs\">\n          <span className=\"flex items-center gap-1.5 font-mono text-zinc-700 dark:text-zinc-200\">\n            <span className=\"h-2 w-2 rounded-full bg-blue-600\" />\n            P95: <strong>{current.p95}ms</strong>\n          </span>\n          <span className=\"flex items-center gap-1.5 font-mono text-zinc-700 dark:text-zinc-200\">\n            <span className=\"h-2 w-2 rounded-full bg-emerald-500\" />\n            P50: <strong>{current.p50}ms</strong>\n          </span>\n        </div>\n      </div>\n\n      <div className=\"mt-4\">\n        <svg\n          viewBox={`0 0 ${width} ${height}`}\n          className=\"h-40 w-full overflow-visible select-none\"\n          onMouseLeave={() => setHoverIdx(null)}\n        >\n          {[0.25, 0.5, 0.75].map((r) => (\n            <line\n              key={r}\n              x1={padX}\n              x2={width - padX}\n              y1={height * r}\n              y2={height * r}\n              stroke=\"currentColor\"\n              strokeDasharray=\"3 3\"\n              className=\"text-zinc-200 dark:text-zinc-800\"\n            />\n          ))}\n\n          <path\n            d={p95Path}\n            fill=\"none\"\n            stroke=\"#2563eb\"\n            strokeWidth=\"2.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <path\n            d={p50Path}\n            fill=\"none\"\n            stroke=\"#10b981\"\n            strokeWidth=\"2.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n\n          {p95Pts.map((pt, i) => (\n            <g\n              key={DEFAULT_LINE_TELEMETRY[i].time}\n              className=\"cursor-pointer\"\n              onMouseEnter={() => setHoverIdx(i)}\n            >\n              <circle\n                cx={pt.x}\n                cy={pt.y}\n                r={hoverIdx === i ? 5 : 3}\n                className=\"fill-blue-600 stroke-white dark:stroke-zinc-900 stroke-2\"\n              />\n              <circle\n                cx={p50Pts[i].x}\n                cy={p50Pts[i].y}\n                r={hoverIdx === i ? 5 : 3}\n                className=\"fill-emerald-500 stroke-white dark:stroke-zinc-900 stroke-2\"\n              />\n              <rect\n                x={pt.x - 24}\n                y={0}\n                width={48}\n                height={height}\n                fill=\"transparent\"\n              />\n            </g>\n          ))}\n        </svg>\n\n        <div className=\"mt-2 flex justify-between px-2 font-mono text-[11px] text-zinc-400\">\n          {DEFAULT_LINE_TELEMETRY.map((d, i) => (\n            <span\n              key={d.time}\n              className={cn(\n                hoverIdx === i && \"font-semibold text-blue-600 dark:text-blue-400\"\n              )}\n            >\n              {d.time}\n            </span>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface DonutSegment {\n  label: string\n  value: number\n  color: string\n  dotClass: string\n}\n\nconst DEFAULT_DONUT_SEGMENTS: DonutSegment[] = [\n  { label: \"Enterprise Cloud\", value: 48, color: \"#2563eb\", dotClass: \"bg-blue-600\" },\n  { label: \"Growth Team\", value: 32, color: \"#8b5cf6\", dotClass: \"bg-violet-500\" },\n  { label: \"Self-Serve Pro\", value: 20, color: \"#10b981\", dotClass: \"bg-emerald-500\" },\n]\n\nexport const DonutStatisticChart: React.FC<{\n  title?: string\n  segments?: DonutSegment[]\n  className?: string\n}> = ({\n  title = \"Revenue Distribution by Tier\",\n  segments = DEFAULT_DONUT_SEGMENTS,\n  className,\n}) => {\n  const [activeSegment, setActiveSegment] = React.useState<number | null>(null)\n  const total = segments.reduce((acc, s) => acc + s.value, 0)\n  const radius = 50\n  const circumference = 2 * Math.PI * radius\n  let cumulativePercent = 0\n\n  const current = activeSegment !== null ? segments[activeSegment] : null\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <PieChartIcon className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n        <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n          {title}\n        </h3>\n      </div>\n\n      <div className=\"mt-5 flex flex-col items-center gap-6 sm:flex-row sm:justify-around\">\n        <div className=\"relative flex h-36 w-36 items-center justify-center shrink-0\">\n          <svg className=\"h-36 w-36 -rotate-90\" viewBox=\"0 0 128 128\">\n            <circle\n              cx=\"64\"\n              cy=\"64\"\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"14\"\n              className=\"text-zinc-100 dark:text-zinc-800\"\n            />\n            {segments.map((seg, idx) => {\n              const strokeDasharray = `${(seg.value / total) * circumference} ${circumference}`\n              const strokeDashoffset = -cumulativePercent * circumference\n              cumulativePercent += seg.value / total\n\n              return (\n                <circle\n                  key={seg.label}\n                  cx=\"64\"\n                  cy=\"64\"\n                  r={radius}\n                  fill=\"none\"\n                  stroke={seg.color}\n                  strokeWidth={activeSegment === idx ? \"17\" : \"14\"}\n                  strokeDasharray={strokeDasharray}\n                  strokeDashoffset={strokeDashoffset}\n                  className=\"transition-all duration-200 cursor-pointer\"\n                  onMouseEnter={() => setActiveSegment(idx)}\n                  onMouseLeave={() => setActiveSegment(null)}\n                />\n              )\n            })}\n          </svg>\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center text-center pointer-events-none\">\n            <span className=\"text-xl font-bold text-zinc-900 dark:text-white\">\n              {current ? `${current.value}%` : \"100%\"}\n            </span>\n            <span className=\"text-[10px] text-zinc-400\">\n              {current ? current.label : \"Total Share\"}\n            </span>\n          </div>\n        </div>\n\n        <div className=\"w-full max-w-xs space-y-2.5\">\n          {segments.map((seg, idx) => (\n            <div\n              key={seg.label}\n              onMouseEnter={() => setActiveSegment(idx)}\n              onMouseLeave={() => setActiveSegment(null)}\n              className={cn(\n                \"flex items-center justify-between rounded-xl border px-3 py-2 text-xs transition-colors cursor-pointer\",\n                activeSegment === idx\n                  ? \"border-blue-500/40 bg-zinc-50 dark:bg-zinc-800/70\"\n                  : \"border-zinc-200/70 dark:border-zinc-800\"\n              )}\n            >\n              <span className=\"flex items-center gap-2 font-medium text-zinc-700 dark:text-zinc-200\">\n                <span className={cn(\"h-2.5 w-2.5 rounded-full\", seg.dotClass)} />\n                {seg.label}\n              </span>\n              <span className=\"font-mono font-semibold text-zinc-900 dark:text-white\">\n                {seg.value}%\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const RadialStatisticChart: React.FC<{\n  title?: string\n  score?: number\n  className?: string\n}> = ({\n  title = \"Workspace Health & SLA Score\",\n  score = 98,\n  className,\n}) => {\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <Gauge className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n            {title}\n          </h3>\n        </div>\n        <span className=\"rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400\">\n          Excellent\n        </span>\n      </div>\n\n      <div className=\"mt-5 flex flex-col items-center gap-6 sm:flex-row sm:justify-around\">\n        {/* Concentric Activity Rings */}\n        <div className=\"relative flex h-36 w-36 items-center justify-center shrink-0\">\n          <svg className=\"h-36 w-36 -rotate-90\" viewBox=\"0 0 128 128\">\n            <circle\n              cx=\"64\"\n              cy=\"64\"\n              r=\"52\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"10\"\n              className=\"text-zinc-100 dark:text-zinc-800\"\n            />\n            <circle\n              cx=\"64\"\n              cy=\"64\"\n              r=\"52\"\n              fill=\"none\"\n              stroke=\"#2563eb\"\n              strokeWidth=\"10\"\n              strokeDasharray=\"326\"\n              strokeDashoffset=\"22\"\n              strokeLinecap=\"round\"\n            />\n            <circle\n              cx=\"64\"\n              cy=\"64\"\n              r=\"38\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"10\"\n              className=\"text-zinc-100 dark:text-zinc-800\"\n            />\n            <circle\n              cx=\"64\"\n              cy=\"64\"\n              r=\"38\"\n              fill=\"none\"\n              stroke=\"#10b981\"\n              strokeWidth=\"10\"\n              strokeDasharray=\"238\"\n              strokeDashoffset=\"28\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n            <span className=\"text-2xl font-bold text-zinc-900 dark:text-white\">\n              {score}\n            </span>\n            <span className=\"text-[10px] text-zinc-400\">/ 100</span>\n          </div>\n        </div>\n\n        <div className=\"w-full max-w-xs space-y-3 text-xs\">\n          <div className=\"space-y-1\">\n            <div className=\"flex justify-between\">\n              <span className=\"text-zinc-500\">Global Uptime SLA</span>\n              <span className=\"font-mono font-semibold text-zinc-900 dark:text-white\">\n                99.98%\n              </span>\n            </div>\n            <div className=\"h-1.5 w-full rounded-full bg-zinc-100 dark:bg-zinc-800\">\n              <div className=\"h-full w-[98%] rounded-full bg-blue-600\" />\n            </div>\n          </div>\n\n          <div className=\"space-y-1\">\n            <div className=\"flex justify-between\">\n              <span className=\"text-zinc-500\">Edge Cache Hit Ratio</span>\n              <span className=\"font-mono font-semibold text-zinc-900 dark:text-white\">\n                94.2%\n              </span>\n            </div>\n            <div className=\"h-1.5 w-full rounded-full bg-zinc-100 dark:bg-zinc-800\">\n              <div className=\"h-full w-[94%] rounded-full bg-emerald-500\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst HEATMAP_DATA = [\n  1, 2, 3, 2, 1, 0, 2, 3, 4, 3, 2, 1, 3, 4, 2, 3,\n  2, 3, 4, 3, 2, 1, 3, 4, 2, 1, 3, 2, 4, 3, 1, 2,\n  0, 1, 2, 4, 3, 2, 1, 3, 4, 4, 3, 2, 3, 4, 3, 4,\n  2, 3, 1, 2, 3, 4, 2, 1, 3, 2, 4, 3, 2, 1, 4, 3,\n]\n\nexport const HeatmapStatisticChart: React.FC<{\n  title?: string\n  subtitle?: string\n  className?: string\n}> = ({\n  title = \"Deployment & Commit Frequency Heatmap\",\n  subtitle = \"64-day production release intensity across workspace repositories\",\n  className,\n}) => {\n  const [hoveredCell, setHoveredCell] = React.useState<number | null>(null)\n\n  return (\n    <div\n      className={cn(\n        \"w-full rounded-2xl border border-zinc-200 bg-white p-5 shadow-2xs dark:border-zinc-800 dark:bg-zinc-900\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2\">\n            <Grid className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n            {title}\n          </h3>\n          <p className=\"mt-0.5 text-xs text-zinc-500 dark:text-zinc-400\">\n            {subtitle}\n          </p>\n        </div>\n\n        <span className=\"font-mono text-xs text-zinc-500 dark:text-zinc-400\">\n          {hoveredCell !== null\n            ? `Day ${hoveredCell + 1}: ${HEATMAP_DATA[hoveredCell] * 6} events`\n            : \"1,428 total events\"}\n        </span>\n      </div>\n\n      <div className=\"mt-5 grid grid-cols-16 gap-1.5\">\n        {HEATMAP_DATA.map((lvl, idx) => (\n          <button\n            key={idx}\n            type=\"button\"\n            onMouseEnter={() => setHoveredCell(idx)}\n            onMouseLeave={() => setHoveredCell(null)}\n            aria-label={`Day ${idx + 1}`}\n            className={cn(\n              \"h-5 w-full rounded-[4px] transition-transform hover:scale-115 cursor-pointer\",\n              lvl === 0 && \"bg-zinc-100 dark:bg-zinc-800\",\n              lvl === 1 && \"bg-blue-200 dark:bg-blue-950\",\n              lvl === 2 && \"bg-blue-400 dark:bg-blue-800\",\n              lvl === 3 && \"bg-blue-500 dark:bg-blue-600\",\n              lvl === 4 && \"bg-blue-600 dark:bg-blue-400\"\n            )}\n          />\n        ))}\n      </div>\n\n      <div className=\"mt-4 flex items-center justify-between text-[11px] text-zinc-400\">\n        <span>64 days ago</span>\n        <div className=\"flex items-center gap-1\">\n          <span>Less</span>\n          <span className=\"h-2.5 w-2.5 rounded-[2px] bg-zinc-100 dark:bg-zinc-800\" />\n          <span className=\"h-2.5 w-2.5 rounded-[2px] bg-blue-200 dark:bg-blue-950\" />\n          <span className=\"h-2.5 w-2.5 rounded-[2px] bg-blue-400 dark:bg-blue-800\" />\n          <span className=\"h-2.5 w-2.5 rounded-[2px] bg-blue-600 dark:bg-blue-400\" />\n          <span>More</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
    }
  ]
}