83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { BarChart } from "./BarChart";
|
|
import { HorizontalBarChart } from "./HorizontalBarChart";
|
|
import { LineChart } from "./LineChart";
|
|
import { AreaChart } from "./AreaChart";
|
|
import { PieChart } from "./PieChart";
|
|
import { StackedBarChart } from "./StackedBarChart";
|
|
import { ComboChart } from "./ComboChart";
|
|
import { ChartConfig, ChartData, ElementSubtype } from "../types";
|
|
|
|
interface ChartProps {
|
|
chartType: ElementSubtype;
|
|
data: ChartData;
|
|
config: ChartConfig;
|
|
width?: number;
|
|
height?: number;
|
|
}
|
|
|
|
/**
|
|
* 통합 차트 컴포넌트
|
|
* - 차트 타입에 따라 적절한 D3 차트 컴포넌트를 렌더링
|
|
*/
|
|
export function Chart({ chartType, data, config, width, height }: ChartProps) {
|
|
// 데이터가 없으면 placeholder 표시
|
|
if (!data || !data.labels.length || !data.datasets.length) {
|
|
return (
|
|
<div
|
|
className="flex items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted"
|
|
style={{ width, height }}
|
|
>
|
|
<div className="text-center">
|
|
<div className="mb-2 text-4xl">📊</div>
|
|
<div className="text-sm font-medium text-foreground">데이터를 설정하세요</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">차트 설정에서 데이터 소스와 축을 설정하세요</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 차트 타입에 따라 렌더링
|
|
switch (chartType) {
|
|
case "bar":
|
|
return <BarChart data={data} config={config} width={width} height={height} />;
|
|
|
|
case "horizontal-bar":
|
|
return <HorizontalBarChart data={data} config={config} width={width} height={height} />;
|
|
|
|
case "line":
|
|
return <LineChart data={data} config={config} width={width} height={height} />;
|
|
|
|
case "area":
|
|
return <AreaChart data={data} config={config} width={width} height={height} />;
|
|
|
|
case "pie":
|
|
return <PieChart data={data} config={config} width={width} height={height} isDonut={false} />;
|
|
|
|
case "donut":
|
|
return <PieChart data={data} config={config} width={width} height={height} isDonut={true} />;
|
|
|
|
case "stacked-bar":
|
|
return <StackedBarChart data={data} config={config} width={width} height={height} />;
|
|
|
|
case "combo":
|
|
return <ComboChart data={data} config={config} width={width} height={height} />;
|
|
|
|
default:
|
|
return (
|
|
<div
|
|
className="flex items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted"
|
|
style={{ width, height }}
|
|
>
|
|
<div className="text-center">
|
|
<div className="mb-2 text-4xl">❓</div>
|
|
<div className="text-sm font-medium text-foreground">지원하지 않는 차트 타입</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">{chartType}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|