80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
|
||
|
|
interface ChartConfigPanelProps {
|
||
|
|
component: ComponentData;
|
||
|
|
onUpdateProperty: (path: string, value: any) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ChartConfigPanel: React.FC<ChartConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="chart-title">차트 제목</Label>
|
||
|
|
<Input
|
||
|
|
id="chart-title"
|
||
|
|
value={config.title || "차트 제목"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
|
||
|
|
placeholder="차트 제목을 입력하세요"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="chart-type">차트 타입</Label>
|
||
|
|
<Select
|
||
|
|
value={config.chartType || "bar"}
|
||
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.chartType", value)}
|
||
|
|
>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="차트 타입 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="bar">바 차트 (Bar)</SelectItem>
|
||
|
|
<SelectItem value="line">라인 차트 (Line)</SelectItem>
|
||
|
|
<SelectItem value="pie">파이 차트 (Pie)</SelectItem>
|
||
|
|
<SelectItem value="area">영역 차트 (Area)</SelectItem>
|
||
|
|
<SelectItem value="scatter">산점도 (Scatter)</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="chart-data-source">데이터 소스</Label>
|
||
|
|
<Input
|
||
|
|
id="chart-data-source"
|
||
|
|
value={config.dataSource || ""}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.dataSource", e.target.value)}
|
||
|
|
placeholder="데이터 소스 URL 또는 API 엔드포인트"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="chart-x-axis">X축 라벨</Label>
|
||
|
|
<Input
|
||
|
|
id="chart-x-axis"
|
||
|
|
value={config.xAxisLabel || ""}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.xAxisLabel", e.target.value)}
|
||
|
|
placeholder="X축 라벨"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="chart-y-axis">Y축 라벨</Label>
|
||
|
|
<Input
|
||
|
|
id="chart-y-axis"
|
||
|
|
value={config.yAxisLabel || ""}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.yAxisLabel", e.target.value)}
|
||
|
|
placeholder="Y축 라벨"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|