Aurora Chart

1"use client"
2 
3import * as React from "react"
4 
5export interface ChartDatum {
6  label: string
7  value: number
8}
9 
10export interface ChartProps extends React.HTMLAttributes<HTMLDivElement> {
11  data: ChartDatum[]
12  type?: "bar" | "line" | "area"
13  /** Accent color for the series. Defaults to the Aurora cyan accent. */
14  color?: string
15  /** Accessible label for the chart SVG. Defaults to a description derived from `type`. */
16  ariaLabel?: string
17}
18 
19export function Chart({
20  data,
21  type = "bar",
22  color = "var(--aurora-accent-primary)",
23  ariaLabel,
24  className,
25  style,
26  ...props
27}: ChartProps) {
28  const reactId = React.useId()
29  const gradId = `aurora-chart-grad-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`
30  const areaGradId = `aurora-chart-area-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`
31 
32  const max = Math.max(1, ...data.map((item) => item.value))
33  const points = data
34    .map((item, index) => {
35      const x = data.length === 1 ? 50 : (index / (data.length - 1)) * 100
36      const y = 90 - (item.value / max) * 72
37      return `${x},${y}`
38    })
39    .join(" ")
40  const areaPoints = `0,90 ${points} 100,90`
41 
42  return (
43    <div
44      className={["rounded-[8px] border p-4", className].filter(Boolean).join(" ")}
45      style={{
46        background: "var(--aurora-panel-medium)",
47        borderColor: "var(--aurora-border-default)",
48        color: "var(--aurora-text-primary)",
49        ...style,
50      }}
51      {...props}
52    >
53      {/* viewBox starts at -18 to give room for Y-axis labels on the left */}
54      <svg viewBox="-18 0 118 100" role="img" aria-label={ariaLabel ?? `${type} chart`} className="h-48 w-full overflow-visible">
55        <defs>
56          <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
57            <stop offset="0%" stopColor="var(--aurora-accent-strong)" />
58            <stop offset="100%" stopColor={color} />
59          </linearGradient>
60          <linearGradient id={areaGradId} x1="0" y1="0" x2="0" y2="1">
61            <stop offset="0%" stopColor={color} stopOpacity="0.32" />
62            <stop offset="100%" stopColor={color} stopOpacity="0" />
63          </linearGradient>
64        </defs>
65        {/* Gridlines + Y-axis labels */}
66        <g stroke="var(--aurora-border-default)" strokeWidth="0.5">
67          {[20, 40, 60, 80].map((y) => {
68            // Map SVG y-coordinate back to a data value: y = 90 - (v/max)*72 → v = (90-y)/72 * max
69            const tickValue = Math.round(((90 - y) / 72) * max)
70            return (
71// … truncated