데이터 모델

export interface ChartDataPoint {
  name: string;
  [key: string]: string | number;
}

export interface ChartSeriesDef {
  dataKey: string;
  name: string;
  color?: string;
  type?: "line" | "bar" | "area";
  stackId?: string;
}

const data = [
  { name: "Enterprise", won: 42, lost: 8, pipeline: 19 },
  { name: "Mid-market", won: 31, lost: 11, pipeline: 27 },
  { name: "SMB", won: 24, lost: 14, pipeline: 32 },
];

const series = [
  { dataKey: "won", name: "Won", color: "hsl(142, 71%, 45%)" },
  { dataKey: "lost", name: "Lost", color: "hsl(349, 89%, 60%)" },
  { dataKey: "pipeline", name: "Pipeline", color: "hsl(221, 83%, 53%)" },
] satisfies ChartSeriesDef[];

<BarChart
  data={data}
  series={series}
  stacked
  showLegend
  aria-label="세그먼트별 영업 상태"
/>;

<LineChart
  data={data}
  series={series}
  aria-label="월별 매출"
  aria-describedby="revenue-chart-summary"
  tooltipOptions={{
    labelFormatter: (label) => `${label} 실적`,
    valueFormatter: (value, name) =>
      `${name}: ${Number(value).toLocaleString("ko-KR")}만원`,
  }}
  legendOptions={{
    formatter: (value) => <span className="font-medium">{value}</span>,
  }}
/>;

<p id="revenue-chart-summary" className="sr-only">
  1월부터 4월까지 매출과 비용이 모두 증가했고, 4월 매출이 가장 높습니다.
</p>

import { AreaChart, LoadingChart } from "@reopt-ai/opt-charts";

// First load: reserve the plot's space. Refetch: keep the previous data visible.
function ChartPanel({ data, series, loading }: ChartPanelProps) {
  if (loading && data.length === 0) {
    return <LoadingChart variant="area" height={288} />;
  }
  return (
    <AreaChart
      data={data}
      series={series}
      height={288}
      loading={loading}
      labels={{ empty: "아직 표시할 데이터가 없습니다." }}
      aria-label="매출 추세"
    />
  );
}