Chart

Recharts 기반의 데이터 시각화 컴포넌트

Bar Chart

기본 막대 차트입니다. ChartContainer로 감싸서 스타일을 적용합니다.

tsx

const chartConfig: ChartConfig = {
  desktop: {
    label: 'Desktop',
    color: 'var(--color-primary)',
  },
  mobile: {
    label: 'Mobile',
    color: 'var(--color-secondary)',
  },
};

<ChartContainer config={chartConfig} className="h-[300px] w-full">
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

Line Chart

선형 차트로 추세를 표현합니다.

tsx

<ChartContainer config={chartConfig} className="h-[300px] w-full">
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Line
      type="monotone"
      dataKey="desktop"
      stroke="var(--color-desktop)"
      strokeWidth={2}
    />
    <Line
      type="monotone"
      dataKey="mobile"
      stroke="var(--color-mobile)"
      strokeWidth={2}
    />
  </LineChart>
</ChartContainer>

Pie Chart

원형 차트로 비율을 표현합니다.

tsx

<ChartContainer config={pieConfig} className="h-[300px] w-full">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent />} />
    <Pie
      data={pieData}
      dataKey="visitors"
      nameKey="browser"
      cx="50%"
      cy="50%"
      innerRadius={60}
      outerRadius={80}
    />
  </PieChart>
</ChartContainer>

Usage

tsx

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from '@gpters-internal/ui';
import { Bar, BarChart, XAxis, YAxis } from 'recharts';

const chartConfig: ChartConfig = {
  value: {
    label: 'Value',
    color: 'var(--color-primary)',
  },
};

function Example() {
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="value" fill="var(--color-value)" />
      </BarChart>
    </ChartContainer>
  );
}