4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
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-primary" />;
|
|
case "pie":
|
|
return <PieChart className="h-8 w-8 text-emerald-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-muted-foreground">{getChartTypeName()}</div>
|
|
<div className="mt-1 text-xs text-muted-foreground/70">미리보기 모드</div>
|
|
{data.length > 0 && <div className="mt-2 text-xs text-muted-foreground">데이터 {data.length}개 항목</div>}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
// 레지스트리에 등록
|
|
componentRegistry.register("chart", ChartRenderer);
|
|
componentRegistry.register("chart-basic", ChartRenderer);
|
|
|
|
export { ChartRenderer };
|