핵심 개념

@reopt-ai/opt-charts
├─ visuals
│  ├─ ChartContainer, ChartTooltipContent, ChartLegendContent
│  ├─ LineChart, BarChart, AreaChart, PieChart, ScatterChart, BubbleChart
│  └─ GaugeChart, FunnelChart, RetentionHeatmap, SankeyChart, CalendarHeatmap
├─ shells
│  ├─ MetricsCard, TrendChart, EventSparkline
│  └─ ReportWidget
└─ lib
   ├─ ChartDataPoint, ChartSeriesDef, ChartConfig, ChartMargin
   └─ chart color and token constants

import { ChartContainer } from "@reopt-ai/opt-charts";
import { LineChart as RechartsLineChart, Line } from "recharts";

export function CustomChart() {
  return (
    <ChartContainer height={300} aria-label="주간 활성 사용자">
      <RechartsLineChart data={data} accessibilityLayer>
        <Line dataKey="activeUsers" />
      </RechartsLineChart>
    </ChartContainer>
  );
}

import { MetricsCard, TrendChart } from "@reopt-ai/opt-charts";

export function RevenuePanel() {
  return (
    <section className="grid gap-4 lg:grid-cols-[18rem_1fr]">
      <MetricsCard
        title="ARR"
        value="₩18.4억"
        change="+12.8%"
        trend="up"
        sparklineData={[20, 24, 23, 31, 36, 42]}
      />
      <TrendChart
        title="월별 매출"
        data={data}
        series={series}
        chartProps={{ showTooltip: true, showLegend: true }}
      />
    </section>
  );
}