jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차트 구현 1차 완료(바 차트 작동)

Browse Source
This commit is contained in:
dohyeons
2025-10-14 15:25:11 +09:00
parent 3db7feb36b
commit 4cc5f1344f
21 changed files with 1783 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/components/admin/dashboard/ChartConfigPanel.tsx
View File

@@ -16,6 +16,7 @@ interface ChartConfigPanelProps {
config?: ChartConfig;
queryResult?: QueryResult;
onConfigChange: (config: ChartConfig) => void;
chartType?: string;
}
/**
@@ -24,9 +25,12 @@ interface ChartConfigPanelProps {
* - 차트 스타일 설정
* - 실시간 미리보기
*/
export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartConfigPanelProps) {
export function ChartConfigPanel({ config, queryResult, onConfigChange, chartType }: ChartConfigPanelProps) {
const [currentConfig, setCurrentConfig] = useState<ChartConfig>(config || {});
// 원형/도넛 차트는 Y축이 필수가 아님
const isPieChart = chartType === "pie" || chartType === "donut";
// 설정 업데이트
const updateConfig = useCallback(
(updates: Partial<ChartConfig>) => {
@@ -78,7 +82,7 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
X축 (카테고리)
<span className="ml-1 text-red-500">*</span>
</Label>
<Select value={currentConfig.xAxis || ""} onValueChange={(value) => updateConfig({ xAxis: value })}>
<Select value={currentConfig.xAxis || undefined} onValueChange={(value) => updateConfig({ xAxis: value })}>
<SelectTrigger>
<SelectValue placeholder="선택하세요" />
</SelectTrigger>
@@ -96,7 +100,8 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
<div className="space-y-2">
<Label>
Y축 (값) - 여러 개 선택 가능
<span className="ml-1 text-red-500">*</span>
{!isPieChart && <span className="ml-1 text-red-500">*</span>}
{isPieChart && <span className="ml-2 text-xs text-gray-500">(선택사항)</span>}
</Label>
<Card className="max-h-60 overflow-y-auto p-3">
<div className="space-y-2">
@@ -154,13 +159,18 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
<span className="ml-2 text-xs text-gray-500">(데이터 처리 방식)</span>
</Label>
<Select
value={currentConfig.aggregation || "sum"}
onValueChange={(value) => updateConfig({ aggregation: value as any })}
value={currentConfig.aggregation || "none"}
onValueChange={(value) =>
updateConfig({
aggregation: value === "none" ? undefined : (value as "sum" | "avg" | "count" | "max" | "min"),
})
}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">없음 - SQL에서 집계됨</SelectItem>
<SelectItem value="sum">합계 (SUM) - 모든 값을 더함</SelectItem>
<SelectItem value="avg">평균 (AVG) - 평균값 계산</SelectItem>
<SelectItem value="count">개수 (COUNT) - 데이터 개수</SelectItem>
@@ -176,12 +186,15 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
{/* 그룹핑 필드 (선택사항) */}
<div className="space-y-2">
<Label>그룹핑 필드 (선택사항)</Label>
<Select value={currentConfig.groupBy || ""} onValueChange={(value) => updateConfig({ groupBy: value })}>
<Select
value={currentConfig.groupBy || undefined}
onValueChange={(value) => updateConfig({ groupBy: value })}
>
<SelectTrigger>
<SelectValue placeholder="없음" />
</SelectTrigger>
<SelectContent>
<SelectItem value="">없음</SelectItem>
<SelectItem value="__none__">없음</SelectItem>
{availableColumns.map((col) => (
<SelectItem key={col} value={col}>
{col}
@@ -253,14 +266,14 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
<div className="flex gap-2">
<span className="font-medium">Y축:</span>
<span>
{Array.isArray(currentConfig.yAxis)
{Array.isArray(currentConfig.yAxis) && currentConfig.yAxis.length > 0
? `${currentConfig.yAxis.length}개 (${currentConfig.yAxis.join(", ")})`
: currentConfig.yAxis || "미설정"}
</span>
</div>
<div className="flex gap-2">
<span className="font-medium">집계:</span>
<span>{currentConfig.aggregation || "sum"}</span>
<span>{currentConfig.aggregation || "없음"}</span>
</div>
{currentConfig.groupBy && (
<div className="flex gap-2">