{availableColumns
.filter(col =>
!columnSearchTerm ||
@@ -526,7 +514,7 @@ ORDER BY 하위부서수 DESC`,
onChange({ selectedColumns: newSelected });
}}
className={`
- relative flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-all
+ relative flex items-start gap-2 rounded-lg border p-2 cursor-pointer transition-all
${isSelected
? "border-primary bg-primary/5 shadow-sm"
: "border-border bg-card hover:border-primary/50 hover:bg-muted/50"
diff --git a/frontend/components/dashboard/widgets/ChartTestWidget.tsx b/frontend/components/dashboard/widgets/ChartTestWidget.tsx
index 362ad8cd..412e4961 100644
--- a/frontend/components/dashboard/widgets/ChartTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/ChartTestWidget.tsx
@@ -1,27 +1,11 @@
"use client";
-import React, { useEffect, useState, useCallback, useMemo } from "react";
-import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
+import { DashboardElement, ChartDataSource, ChartData } from "@/components/admin/dashboard/types";
import { Button } from "@/components/ui/button";
import { Loader2, RefreshCw } from "lucide-react";
import { applyColumnMapping } from "@/lib/utils/columnMapping";
-import {
- LineChart,
- Line,
- BarChart,
- Bar,
- PieChart,
- Pie,
- Cell,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
- ComposedChart, // 🆕 바/라인/영역 혼합 차트
- Area, // 🆕 영역 차트
-} from "recharts";
+import { Chart } from "@/components/admin/dashboard/charts/Chart";
interface ChartTestWidgetProps {
element: DashboardElement;
@@ -34,16 +18,32 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState
(null);
const [lastRefreshTime, setLastRefreshTime] = useState(null);
+ const containerRef = useRef(null);
+ const [containerSize, setContainerSize] = useState({ width: 600, height: 400 });
- console.log("🧪 ChartTestWidget 렌더링!", element);
+ console.log("🧪 ChartTestWidget 렌더링 (D3 기반)!", element);
const dataSources = useMemo(() => {
return element?.dataSources || element?.chartConfig?.dataSources;
}, [element?.dataSources, element?.chartConfig?.dataSources]);
+ // 컨테이너 크기 측정
+ useEffect(() => {
+ const updateSize = () => {
+ if (containerRef.current) {
+ const width = containerRef.current.offsetWidth || 600;
+ const height = containerRef.current.offsetHeight || 400;
+ setContainerSize({ width, height });
+ }
+ };
+
+ updateSize();
+ window.addEventListener("resize", updateSize);
+ return () => window.removeEventListener("resize", updateSize);
+ }, []);
+
// 다중 데이터 소스 로딩
const loadMultipleDataSources = useCallback(async () => {
- // dataSources는 element.dataSources 또는 chartConfig.dataSources에서 로드
const dataSources = element?.dataSources || element?.chartConfig?.dataSources;
if (!dataSources || dataSources.length === 0) {
@@ -51,16 +51,15 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
return;
}
- console.log(`🔄 \${dataSources.length}개의 데이터 소스 로딩 시작...`);
+ console.log(`🔄 ${dataSources.length}개의 데이터 소스 로딩 시작...`);
setLoading(true);
setError(null);
try {
- // 모든 데이터 소스를 병렬로 로딩
const results = await Promise.allSettled(
dataSources.map(async (source) => {
try {
- console.log(`📡 데이터 소스 "\${source.name || source.id}" 로딩 중...`);
+ console.log(`📡 데이터 소스 "${source.name || source.id}" 로딩 중...`);
if (source.type === "api") {
return await loadRestApiData(source);
@@ -70,25 +69,24 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
return [];
} catch (err: any) {
- console.error(`❌ 데이터 소스 "\${source.name || source.id}" 로딩 실패:`, err);
+ console.error(`❌ 데이터 소스 "${source.name || source.id}" 로딩 실패:`, err);
return [];
}
}),
);
- // 성공한 데이터만 병합
const allData: any[] = [];
results.forEach((result, index) => {
if (result.status === "fulfilled" && Array.isArray(result.value)) {
const sourceData = result.value.map((item: any) => ({
...item,
- _source: dataSources[index].name || dataSources[index].id || `소스 \${index + 1}`,
+ _source: dataSources[index].name || dataSources[index].id || `소스 ${index + 1}`,
}));
allData.push(...sourceData);
}
});
- console.log(`✅ 총 \${allData.length}개의 데이터 로딩 완료`);
+ console.log(`✅ 총 ${allData.length}개의 데이터 로딩 완료`);
setData(allData);
setLastRefreshTime(new Date());
} catch (err: any) {
@@ -97,9 +95,9 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
} finally {
setLoading(false);
}
- }, [element?.dataSources]);
+ }, [element?.dataSources, element?.chartConfig?.dataSources]);
- // 수동 새로고침 핸들러
+ // 수동 새로고침
const handleManualRefresh = useCallback(() => {
console.log("🔄 수동 새로고침 버튼 클릭");
loadMultipleDataSources();
@@ -142,7 +140,7 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
});
if (!response.ok) {
- throw new Error(`API 호출 실패: \${response.status}`);
+ throw new Error(`API 호출 실패: ${response.status}`);
}
const result = await response.json();
@@ -159,8 +157,6 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
}
const rows = Array.isArray(apiData) ? apiData : [apiData];
-
- // 컬럼 매핑 적용
return applyColumnMapping(rows, source.columnMapping);
};
@@ -172,11 +168,9 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
let result;
if (source.connectionType === "external" && source.externalConnectionId) {
- // 외부 DB (ExternalDbConnectionAPI 사용)
const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
result = await ExternalDbConnectionAPI.executeQuery(parseInt(source.externalConnectionId), source.query);
} else {
- // 현재 DB (dashboardApi.executeQuery 사용)
const { dashboardApi } = await import("@/lib/api/dashboard");
try {
@@ -196,25 +190,7 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
}
const rows = result.rows || result.data || [];
-
- console.log("💾 내부 DB 쿼리 결과:", {
- hasRows: !!rows,
- rowCount: rows.length,
- hasColumns: rows.length > 0 && Object.keys(rows[0]).length > 0,
- columnCount: rows.length > 0 ? Object.keys(rows[0]).length : 0,
- firstRow: rows[0],
- });
-
- // 컬럼 매핑 적용
- const mappedRows = applyColumnMapping(rows, source.columnMapping);
-
- console.log("✅ 매핑 후:", {
- columns: mappedRows.length > 0 ? Object.keys(mappedRows[0]) : [],
- rowCount: mappedRows.length,
- firstMappedRow: mappedRows[0],
- });
-
- return mappedRows;
+ return applyColumnMapping(rows, source.columnMapping);
};
// 초기 로드
@@ -253,372 +229,133 @@ export default function ChartTestWidget({ element }: ChartTestWidgetProps) {
const mergeMode = chartConfig.mergeMode || false;
const dataSourceConfigs = chartConfig.dataSourceConfigs || [];
- // 멀티 데이터 소스 차트 렌더링
- const renderChart = () => {
- if (data.length === 0) {
- return (
-
- );
+ // 데이터를 D3 Chart 컴포넌트 형식으로 변환
+ const chartData = useMemo((): ChartData | null => {
+ if (data.length === 0 || dataSourceConfigs.length === 0) {
+ return null;
}
- if (dataSourceConfigs.length === 0) {
- return (
-
-
- 차트 설정에서 데이터 소스를 추가하고
-
- X축, Y축을 설정해주세요
-
-
-
병합 모드는 라인, 바, 영역 차트만 지원합니다
-
-
파이 차트에 표시할 데이터가 없습니다.
-
-
모든 값이 0입니다. Y축 필드를 확인해주세요.
-
|
- ))}
-
-
-
-
-
- );
- }
- return (
-
-
파이 차트를 표시하려면 데이터 소스를 설정하세요.
-
-
지원하지 않는 차트 타입: {chartType}
-
-
-
-
{element?.customTitle || "차트"}
-
- {dataSources?.length || 0}개 데이터 소스 • {data.length}개 데이터
- {lastRefreshTime && • {lastRefreshTime.toLocaleTimeString("ko-KR")}}
-
-
-
-
- {loading && }
-
-
-
-
+
+ {/* 차트 영역 - 전체 공간 사용 */}
+
{error ? (
- ) : !(element?.dataSources || element?.chartConfig?.dataSources) ||
- (element?.dataSources || element?.chartConfig?.dataSources)?.length === 0 ? (
+ ) : !dataSources || dataSources.length === 0 ? (
+ ) : loading && data.length === 0 ? (
+
+ ) : !chartData ? (
+
+
+ 차트 설정에서 데이터 소스를 추가하고
+
+ X축, Y축을 설정해주세요
+
+
) : (
- renderChart()
+
)}
- {data.length > 0 && (
-
총 {data.length}개 데이터 표시 중
- )}
+ {/* 푸터 - 주석 처리 (공간 확보) */}
+ {/* {data.length > 0 && (
+
+ 총 {data.length.toLocaleString()}개 데이터 표시 중
+
+ )} */}
);
}