449 lines
19 KiB
TypeScript
449 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useCallback, useEffect } from "react";
|
|
import { ChartConfig, QueryResult, isCircularChart, isAxisBasedChart } from "./types";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { AlertCircle } from "lucide-react";
|
|
import { DateFilterPanel } from "./DateFilterPanel";
|
|
import { extractTableNameFromQuery } from "./utils/queryHelpers";
|
|
import { dashboardApi } from "@/lib/api/dashboard";
|
|
|
|
interface ChartConfigPanelProps {
|
|
config?: ChartConfig;
|
|
queryResult?: QueryResult;
|
|
onConfigChange: (config: ChartConfig) => void;
|
|
chartType?: string;
|
|
dataSourceType?: "database" | "api"; // 데이터 소스 타입
|
|
query?: string; // SQL 쿼리 (테이블명 추출용)
|
|
}
|
|
|
|
/**
|
|
* 차트 설정 패널 컴포넌트
|
|
* - 데이터 필드 매핑 설정
|
|
* - 차트 스타일 설정
|
|
* - 실시간 미리보기
|
|
*/
|
|
export function ChartConfigPanel({
|
|
config,
|
|
queryResult,
|
|
onConfigChange,
|
|
chartType,
|
|
dataSourceType,
|
|
query,
|
|
}: ChartConfigPanelProps) {
|
|
const [currentConfig, setCurrentConfig] = useState<ChartConfig>(config || {});
|
|
const [dateColumns, setDateColumns] = useState<string[]>([]);
|
|
|
|
// 원형 차트 또는 REST API는 Y축이 필수가 아님
|
|
const isPieChart = chartType ? isCircularChart(chartType as any) : false;
|
|
const isApiSource = dataSourceType === "api";
|
|
|
|
// 설정 업데이트
|
|
const updateConfig = useCallback(
|
|
(updates: Partial<ChartConfig>) => {
|
|
const newConfig = { ...currentConfig, ...updates };
|
|
setCurrentConfig(newConfig);
|
|
onConfigChange(newConfig);
|
|
},
|
|
[currentConfig, onConfigChange],
|
|
);
|
|
|
|
// 사용 가능한 컬럼 목록 및 타입 정보
|
|
const availableColumns = queryResult?.columns || [];
|
|
const columnTypes = queryResult?.columnTypes || {};
|
|
const sampleData = queryResult?.rows?.[0] || {};
|
|
|
|
// 차트에 사용 가능한 컬럼 필터링
|
|
const simpleColumns = availableColumns.filter((col) => {
|
|
const type = columnTypes[col];
|
|
// number, string, boolean만 허용 (object, array는 제외)
|
|
return !type || type === "number" || type === "string" || type === "boolean";
|
|
});
|
|
|
|
// 숫자 타입 컬럼만 필터링 (Y축용)
|
|
const numericColumns = availableColumns.filter((col) => columnTypes[col] === "number");
|
|
|
|
// 복잡한 타입의 컬럼 (경고 표시용)
|
|
const complexColumns = availableColumns.filter((col) => {
|
|
const type = columnTypes[col];
|
|
return type === "object" || type === "array";
|
|
});
|
|
|
|
// 테이블 스키마에서 실제 날짜 컬럼 가져오기
|
|
useEffect(() => {
|
|
if (!query || !queryResult || dataSourceType === "api") {
|
|
// API 소스는 스키마 조회 불가
|
|
setDateColumns([]);
|
|
return;
|
|
}
|
|
|
|
const tableName = extractTableNameFromQuery(query);
|
|
|
|
if (!tableName) {
|
|
setDateColumns([]);
|
|
return;
|
|
}
|
|
dashboardApi
|
|
.getTableSchema(tableName)
|
|
.then((schema) => {
|
|
// 원본 테이블의 모든 날짜 컬럼을 표시
|
|
// (SELECT에 없어도 WHERE 절에 사용 가능)
|
|
setDateColumns(schema.dateColumns);
|
|
})
|
|
.catch(() => {
|
|
// 실패 시 빈 배열 (날짜 필터 비활성화)
|
|
setDateColumns([]);
|
|
});
|
|
}, [query, queryResult, dataSourceType]);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* 데이터 필드 매핑 */}
|
|
{queryResult && (
|
|
<>
|
|
{/* 복잡한 타입 경고 */}
|
|
{complexColumns.length > 0 && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>
|
|
<div className="font-semibold">차트에 사용할 수 없는 컬럼 감지</div>
|
|
<div className="mt-1 text-sm">
|
|
다음 컬럼은 객체 또는 배열 타입이라서 차트 축으로 선택할 수 없습니다:
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{complexColumns.map((col) => (
|
|
<Badge key={col} variant="outline" className="bg-destructive/10">
|
|
{col} ({columnTypes[col]})
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-xs text-foreground">
|
|
<strong>해결 방법:</strong> JSON Path를 사용하여 중첩된 객체 내부의 값을 직접 추출하세요.
|
|
<br />
|
|
예: <code className="rounded bg-muted px-1">main</code> 또는{" "}
|
|
<code className="rounded bg-muted px-1">data.items</code>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* 차트 제목 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">차트 제목</Label>
|
|
<Input
|
|
type="text"
|
|
value={currentConfig.title || ""}
|
|
onChange={(e) => updateConfig({ title: e.target.value })}
|
|
placeholder="차트 제목을 입력하세요"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* X축 설정 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">
|
|
X축 (카테고리)
|
|
<span className="ml-1 text-destructive">*</span>
|
|
</Label>
|
|
<Select value={currentConfig.xAxis || undefined} onValueChange={(value) => updateConfig({ xAxis: value })}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="선택하세요" />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[99999]">
|
|
{simpleColumns.map((col) => {
|
|
const preview = sampleData[col];
|
|
const previewText =
|
|
preview !== undefined && preview !== null
|
|
? typeof preview === "object"
|
|
? JSON.stringify(preview).substring(0, 30)
|
|
: String(preview).substring(0, 30)
|
|
: "";
|
|
|
|
return (
|
|
<SelectItem key={col} value={col} className="text-xs">
|
|
{col}
|
|
{previewText && <span className="ml-1.5 text-[10px] text-muted-foreground">(예: {previewText})</span>}
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
{simpleColumns.length === 0 && (
|
|
<p className="text-[11px] text-destructive">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Y축 설정 (다중 선택 가능) */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">
|
|
Y축 (값) - 여러 개 선택 가능
|
|
{!isPieChart && !isApiSource && <span className="ml-1 text-destructive">*</span>}
|
|
{(isPieChart || isApiSource) && (
|
|
<span className="ml-1.5 text-[11px] text-muted-foreground">(선택사항 - 그룹핑+집계 사용 가능)</span>
|
|
)}
|
|
</Label>
|
|
<div className="max-h-48 overflow-y-auto rounded border border-border bg-muted p-2">
|
|
<div className="space-y-1.5">
|
|
{/* 숫자 타입 우선 표시 */}
|
|
{numericColumns.length > 0 && (
|
|
<>
|
|
<div className="mb-1.5 text-[11px] font-medium text-success">숫자 타입 (권장)</div>
|
|
{numericColumns.map((col) => {
|
|
const isSelected = Array.isArray(currentConfig.yAxis)
|
|
? currentConfig.yAxis.includes(col)
|
|
: currentConfig.yAxis === col;
|
|
|
|
return (
|
|
<div key={col} className="flex items-center gap-1.5 rounded border-success bg-success/10 p-1.5">
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={(checked) => {
|
|
const currentYAxis = Array.isArray(currentConfig.yAxis)
|
|
? currentConfig.yAxis
|
|
: currentConfig.yAxis
|
|
? [currentConfig.yAxis]
|
|
: [];
|
|
|
|
let newYAxis: string | string[];
|
|
if (checked) {
|
|
newYAxis = [...currentYAxis, col];
|
|
} else {
|
|
newYAxis = currentYAxis.filter((c) => c !== col);
|
|
}
|
|
|
|
if (newYAxis.length === 1) {
|
|
newYAxis = newYAxis[0];
|
|
}
|
|
|
|
updateConfig({ yAxis: newYAxis });
|
|
}}
|
|
/>
|
|
<Label className="flex-1 cursor-pointer text-xs font-normal">
|
|
<span className="font-medium">{col}</span>
|
|
{sampleData[col] !== undefined && (
|
|
<span className="ml-1.5 text-[10px] text-foreground">(예: {sampleData[col]})</span>
|
|
)}
|
|
</Label>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
|
|
{/* 기타 간단한 타입 */}
|
|
{simpleColumns.filter((col) => !numericColumns.includes(col)).length > 0 && (
|
|
<>
|
|
{numericColumns.length > 0 && <div className="my-1.5 border-t"></div>}
|
|
<div className="mb-1.5 text-[11px] font-medium text-foreground">기타 타입</div>
|
|
{simpleColumns
|
|
.filter((col) => !numericColumns.includes(col))
|
|
.map((col) => {
|
|
const isSelected = Array.isArray(currentConfig.yAxis)
|
|
? currentConfig.yAxis.includes(col)
|
|
: currentConfig.yAxis === col;
|
|
|
|
return (
|
|
<div key={col} className="flex items-center gap-1.5 rounded p-1.5 hover:bg-muted">
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={(checked) => {
|
|
const currentYAxis = Array.isArray(currentConfig.yAxis)
|
|
? currentConfig.yAxis
|
|
: currentConfig.yAxis
|
|
? [currentConfig.yAxis]
|
|
: [];
|
|
|
|
let newYAxis: string | string[];
|
|
if (checked) {
|
|
newYAxis = [...currentYAxis, col];
|
|
} else {
|
|
newYAxis = currentYAxis.filter((c) => c !== col);
|
|
}
|
|
|
|
if (newYAxis.length === 1) {
|
|
newYAxis = newYAxis[0];
|
|
}
|
|
|
|
updateConfig({ yAxis: newYAxis });
|
|
}}
|
|
/>
|
|
<Label className="flex-1 cursor-pointer text-xs font-normal">
|
|
{col}
|
|
{sampleData[col] !== undefined && (
|
|
<span className="ml-1.5 text-[10px] text-muted-foreground">
|
|
(예: {String(sampleData[col]).substring(0, 30)})
|
|
</span>
|
|
)}
|
|
</Label>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{simpleColumns.length === 0 && (
|
|
<p className="text-[11px] text-destructive">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
|
|
)}
|
|
<p className="text-[11px] text-muted-foreground">
|
|
팁: 여러 항목을 선택하면 비교 차트가 생성됩니다 (예: 갤럭시 vs 아이폰)
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 집계 함수 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">
|
|
집계 함수
|
|
<span className="ml-1.5 text-[11px] text-muted-foreground">(데이터 처리 방식)</span>
|
|
</Label>
|
|
<Select
|
|
value={currentConfig.aggregation || "none"}
|
|
onValueChange={(value) =>
|
|
updateConfig({
|
|
aggregation: value === "none" ? undefined : (value as "sum" | "avg" | "count" | "max" | "min"),
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[99999]">
|
|
<SelectItem value="none" className="text-xs">
|
|
없음 - SQL에서 집계됨
|
|
</SelectItem>
|
|
<SelectItem value="sum" className="text-xs">
|
|
합계 (SUM) - 모든 값을 더함
|
|
</SelectItem>
|
|
<SelectItem value="avg" className="text-xs">
|
|
평균 (AVG) - 평균값 계산
|
|
</SelectItem>
|
|
<SelectItem value="count" className="text-xs">
|
|
개수 (COUNT) - 데이터 개수
|
|
</SelectItem>
|
|
<SelectItem value="max" className="text-xs">
|
|
최대값 (MAX) - 가장 큰 값
|
|
</SelectItem>
|
|
<SelectItem value="min" className="text-xs">
|
|
최소값 (MIN) - 가장 작은 값
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
그룹핑 필드와 함께 사용하면 자동으로 데이터를 집계합니다. (예: 부서별 개수, 월별 합계)
|
|
</p>
|
|
</div>
|
|
|
|
{/* 그룹핑 필드 (선택사항) */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">
|
|
그룹핑 필드 (선택사항)
|
|
<span className="ml-1.5 text-[11px] text-muted-foreground">(같은 값끼리 묶어서 집계)</span>
|
|
</Label>
|
|
<Select
|
|
value={currentConfig.groupBy || undefined}
|
|
onValueChange={(value) => updateConfig({ groupBy: value })}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="없음" />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[99999]">
|
|
<SelectItem value="__none__" className="text-xs">
|
|
없음
|
|
</SelectItem>
|
|
{availableColumns.map((col) => (
|
|
<SelectItem key={col} value={col} className="text-xs">
|
|
{col}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 차트 색상 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium text-foreground">차트 색상</Label>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{[
|
|
["#3B82F6", "#EF4444", "#10B981", "#F59E0B"], // 기본
|
|
["#8B5CF6", "#EC4899", "#06B6D4", "#84CC16"], // 밝은
|
|
["#1F2937", "#374151", "#6B7280", "#9CA3AF"], // 회색
|
|
["#DC2626", "#EA580C", "#CA8A04", "#65A30D"], // 따뜻한
|
|
].map((colorSet, setIdx) => (
|
|
<button
|
|
key={setIdx}
|
|
type="button"
|
|
onClick={() => updateConfig({ colors: colorSet })}
|
|
className={`flex h-8 rounded border-2 transition-colors ${
|
|
JSON.stringify(currentConfig.colors) === JSON.stringify(colorSet)
|
|
? "border-foreground"
|
|
: "border-border hover:border-border/80"
|
|
}`}
|
|
>
|
|
{colorSet.map((color, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex-1 first:rounded-l last:rounded-r"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
))}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 범례 표시 */}
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
id="showLegend"
|
|
checked={currentConfig.showLegend !== false}
|
|
onCheckedChange={(checked) => updateConfig({ showLegend: checked as boolean })}
|
|
/>
|
|
<Label htmlFor="showLegend" className="cursor-pointer font-normal">
|
|
범례 표시
|
|
</Label>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 날짜 필터 */}
|
|
{dateColumns.length > 0 && (
|
|
<DateFilterPanel config={currentConfig} dateColumns={dateColumns} onChange={updateConfig} />
|
|
)}
|
|
|
|
{/* 필수 필드 확인 */}
|
|
{!currentConfig.xAxis && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>X축은 필수입니다.</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
{!isPieChart && !isApiSource && !currentConfig.yAxis && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>Y축을 설정해야 차트가 표시됩니다.</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
{(isPieChart || isApiSource) && !currentConfig.yAxis && !currentConfig.aggregation && (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>Y축 또는 집계 함수(COUNT 등)를 설정해야 차트가 표시됩니다.</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|