63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { BarChart3, LineChart, PieChart } from "lucide-react";
|
|
|
|
// 차트 컴포넌트 렌더러
|
|
const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
|
|
const config = component.componentConfig || {};
|
|
const {
|
|
title = "차트 제목",
|
|
chartType = "bar", // bar, line, pie
|
|
data = [],
|
|
style = {},
|
|
} = config;
|
|
|
|
const getChartIcon = () => {
|
|
switch (chartType) {
|
|
case "line":
|
|
return <LineChart className="h-8 w-8 text-blue-500" />;
|
|
case "pie":
|
|
return <PieChart className="h-8 w-8 text-green-500" />;
|
|
default:
|
|
return <BarChart3 className="h-8 w-8 text-purple-500" />;
|
|
}
|
|
};
|
|
|
|
const getChartTypeName = () => {
|
|
switch (chartType) {
|
|
case "line":
|
|
return "라인 차트";
|
|
case "pie":
|
|
return "파이 차트";
|
|
default:
|
|
return "바 차트";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="h-full w-full" style={style}>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-1 items-center justify-center">
|
|
<div className="text-center">
|
|
{getChartIcon()}
|
|
<div className="mt-2 text-sm text-gray-600">{getChartTypeName()}</div>
|
|
<div className="mt-1 text-xs text-gray-400">미리보기 모드</div>
|
|
{data.length > 0 && <div className="mt-2 text-xs text-gray-500">데이터 {data.length}개 항목</div>}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("chart", ChartRenderer);
|
|
componentRegistry.register("chart-basic", ChartRenderer);
|
|
|
|
export { ChartRenderer };
|