619 lines
22 KiB
TypeScript
619 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { DashboardElement, ChartDataSource } from "@/components/admin/dashboard/types";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Loader2, RefreshCw } from "lucide-react";
|
|
|
|
interface CustomMetricTestWidgetProps {
|
|
element: DashboardElement;
|
|
}
|
|
|
|
// 집계 함수 실행
|
|
const calculateMetric = (rows: any[], field: string, aggregation: string): number => {
|
|
if (rows.length === 0) return 0;
|
|
|
|
switch (aggregation) {
|
|
case "count":
|
|
return rows.length;
|
|
case "sum": {
|
|
return rows.reduce((sum, row) => sum + (parseFloat(row[field]) || 0), 0);
|
|
}
|
|
case "avg": {
|
|
const sum = rows.reduce((s, row) => s + (parseFloat(row[field]) || 0), 0);
|
|
return rows.length > 0 ? sum / rows.length : 0;
|
|
}
|
|
case "min": {
|
|
return Math.min(...rows.map((row) => parseFloat(row[field]) || 0));
|
|
}
|
|
case "max": {
|
|
return Math.max(...rows.map((row) => parseFloat(row[field]) || 0));
|
|
}
|
|
default:
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
// 색상 스타일 매핑
|
|
const colorMap = {
|
|
indigo: { bg: "bg-indigo-50", text: "text-indigo-600", border: "border-indigo-200" },
|
|
green: { bg: "bg-green-50", text: "text-green-600", border: "border-green-200" },
|
|
blue: { bg: "bg-blue-50", text: "text-blue-600", border: "border-blue-200" },
|
|
purple: { bg: "bg-purple-50", text: "text-purple-600", border: "border-purple-200" },
|
|
orange: { bg: "bg-orange-50", text: "text-orange-600", border: "border-orange-200" },
|
|
gray: { bg: "bg-gray-50", text: "text-gray-600", border: "border-gray-200" },
|
|
};
|
|
|
|
/**
|
|
* 커스텀 메트릭 테스트 위젯 (다중 데이터 소스 지원)
|
|
* - 여러 REST API 연결 가능
|
|
* - 여러 Database 연결 가능
|
|
* - REST API + Database 혼합 가능
|
|
* - 데이터 자동 병합 후 집계
|
|
*/
|
|
export default function CustomMetricTestWidget({ element }: CustomMetricTestWidgetProps) {
|
|
const [metrics, setMetrics] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [lastRefreshTime, setLastRefreshTime] = useState<Date | null>(null);
|
|
|
|
console.log("🧪 CustomMetricTestWidget 렌더링!", element);
|
|
|
|
const dataSources = useMemo(() => {
|
|
return element?.dataSources || element?.chartConfig?.dataSources;
|
|
}, [element?.dataSources, element?.chartConfig?.dataSources]);
|
|
|
|
// 메트릭 설정 (없으면 기본값 사용) - useMemo로 메모이제이션
|
|
const metricConfig = useMemo(() => {
|
|
return element?.customMetricConfig?.metrics || [
|
|
{
|
|
label: "총 개수",
|
|
field: "id",
|
|
aggregation: "count",
|
|
color: "indigo",
|
|
},
|
|
];
|
|
}, [element?.customMetricConfig?.metrics]);
|
|
|
|
// 다중 데이터 소스 로딩
|
|
const loadMultipleDataSources = useCallback(async () => {
|
|
const dataSources = element?.dataSources || element?.chartConfig?.dataSources;
|
|
|
|
if (!dataSources || dataSources.length === 0) {
|
|
console.log("⚠️ 데이터 소스가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
console.log(`🔄 ${dataSources.length}개의 데이터 소스 로딩 시작...`);
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// 모든 데이터 소스를 병렬로 로딩 (각각 별도로 처리)
|
|
const results = await Promise.allSettled(
|
|
dataSources.map(async (source, sourceIndex) => {
|
|
try {
|
|
console.log(`📡 데이터 소스 ${sourceIndex + 1} "${source.name || source.id}" 로딩 중...`);
|
|
|
|
let rows: any[] = [];
|
|
if (source.type === "api") {
|
|
rows = await loadRestApiData(source);
|
|
} else if (source.type === "database") {
|
|
rows = await loadDatabaseData(source);
|
|
}
|
|
|
|
console.log(`✅ 데이터 소스 ${sourceIndex + 1}: ${rows.length}개 행`);
|
|
|
|
return {
|
|
sourceName: source.name || `데이터 소스 ${sourceIndex + 1}`,
|
|
sourceIndex: sourceIndex,
|
|
rows: rows,
|
|
};
|
|
} catch (err: any) {
|
|
console.error(`❌ 데이터 소스 "${source.name || source.id}" 로딩 실패:`, err);
|
|
return {
|
|
sourceName: source.name || `데이터 소스 ${sourceIndex + 1}`,
|
|
sourceIndex: sourceIndex,
|
|
rows: [],
|
|
};
|
|
}
|
|
})
|
|
);
|
|
|
|
console.log(`✅ 총 ${results.length}개의 데이터 소스 로딩 완료`);
|
|
|
|
// 각 데이터 소스별로 메트릭 생성
|
|
const allMetrics: any[] = [];
|
|
const colors = ["indigo", "green", "blue", "purple", "orange", "gray"];
|
|
|
|
results.forEach((result) => {
|
|
if (result.status !== "fulfilled" || !result.value.rows || result.value.rows.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const { sourceName, rows } = result.value;
|
|
|
|
// 집계된 데이터인지 확인 (행이 적고 숫자 컬럼이 있으면)
|
|
const hasAggregatedData = rows.length > 0 && rows.length <= 100;
|
|
|
|
if (hasAggregatedData && rows.length > 0) {
|
|
const firstRow = rows[0];
|
|
const columns = Object.keys(firstRow);
|
|
|
|
// 숫자 컬럼 찾기
|
|
const numericColumns = columns.filter(col => {
|
|
const value = firstRow[col];
|
|
return typeof value === 'number' || !isNaN(Number(value));
|
|
});
|
|
|
|
// 문자열 컬럼 찾기
|
|
const stringColumns = columns.filter(col => {
|
|
const value = firstRow[col];
|
|
return typeof value === 'string' || !numericColumns.includes(col);
|
|
});
|
|
|
|
console.log(`📊 [${sourceName}] 컬럼 분석:`, {
|
|
전체: columns,
|
|
숫자: numericColumns,
|
|
문자열: stringColumns
|
|
});
|
|
|
|
// 숫자 컬럼이 있으면 집계된 데이터로 판단
|
|
if (numericColumns.length > 0) {
|
|
console.log(`✅ [${sourceName}] 집계된 데이터, 각 행을 메트릭으로 변환`);
|
|
|
|
rows.forEach((row, index) => {
|
|
// 라벨: 첫 번째 문자열 컬럼
|
|
const labelField = stringColumns[0] || columns[0];
|
|
const label = String(row[labelField] || `항목 ${index + 1}`);
|
|
|
|
// 값: 첫 번째 숫자 컬럼
|
|
const valueField = numericColumns[0] || columns[1] || columns[0];
|
|
const value = Number(row[valueField]) || 0;
|
|
|
|
console.log(` [${sourceName}] 메트릭: ${label} = ${value}`);
|
|
|
|
allMetrics.push({
|
|
label: `${sourceName} - ${label}`,
|
|
value: value,
|
|
field: valueField,
|
|
aggregation: "custom",
|
|
color: colors[allMetrics.length % colors.length],
|
|
sourceName: sourceName,
|
|
});
|
|
});
|
|
} else {
|
|
// 숫자 컬럼이 없으면 각 컬럼별 고유값 개수 표시
|
|
console.log(`📊 [${sourceName}] 문자열 데이터, 각 컬럼별 고유값 개수 표시`);
|
|
|
|
// 데이터 소스에서 선택된 컬럼 가져오기
|
|
const dataSourceConfig = (element?.dataSources || element?.chartConfig?.dataSources)?.find(
|
|
ds => ds.name === sourceName || ds.id === result.value.sourceIndex.toString()
|
|
);
|
|
const selectedColumns = dataSourceConfig?.selectedColumns || [];
|
|
|
|
// 선택된 컬럼이 있으면 해당 컬럼만, 없으면 전체 컬럼 표시
|
|
const columnsToShow = selectedColumns.length > 0 ? selectedColumns : columns;
|
|
|
|
console.log(` [${sourceName}] 표시할 컬럼:`, columnsToShow);
|
|
|
|
columnsToShow.forEach((col) => {
|
|
// 해당 컬럼이 실제로 존재하는지 확인
|
|
if (!columns.includes(col)) {
|
|
console.warn(` [${sourceName}] 컬럼 "${col}"이 데이터에 없습니다.`);
|
|
return;
|
|
}
|
|
|
|
// 해당 컬럼의 고유값 개수 계산
|
|
const uniqueValues = new Set(rows.map(row => row[col]));
|
|
const uniqueCount = uniqueValues.size;
|
|
|
|
console.log(` [${sourceName}] ${col}: ${uniqueCount}개 고유값`);
|
|
|
|
allMetrics.push({
|
|
label: `${sourceName} - ${col} (고유값)`,
|
|
value: uniqueCount,
|
|
field: col,
|
|
aggregation: "distinct",
|
|
color: colors[allMetrics.length % colors.length],
|
|
sourceName: sourceName,
|
|
});
|
|
});
|
|
|
|
// 총 행 개수도 추가
|
|
allMetrics.push({
|
|
label: `${sourceName} - 총 개수`,
|
|
value: rows.length,
|
|
field: "count",
|
|
aggregation: "count",
|
|
color: colors[allMetrics.length % colors.length],
|
|
sourceName: sourceName,
|
|
});
|
|
}
|
|
} else {
|
|
// 행이 많으면 각 컬럼별 고유값 개수 + 총 개수 표시
|
|
console.log(`📊 [${sourceName}] 일반 데이터 (행 많음), 컬럼별 통계 표시`);
|
|
|
|
const firstRow = rows[0];
|
|
const columns = Object.keys(firstRow);
|
|
|
|
// 데이터 소스에서 선택된 컬럼 가져오기
|
|
const dataSourceConfig = (element?.dataSources || element?.chartConfig?.dataSources)?.find(
|
|
ds => ds.name === sourceName || ds.id === result.value.sourceIndex.toString()
|
|
);
|
|
const selectedColumns = dataSourceConfig?.selectedColumns || [];
|
|
|
|
// 선택된 컬럼이 있으면 해당 컬럼만, 없으면 전체 컬럼 표시
|
|
const columnsToShow = selectedColumns.length > 0 ? selectedColumns : columns;
|
|
|
|
console.log(` [${sourceName}] 표시할 컬럼:`, columnsToShow);
|
|
|
|
// 각 컬럼별 고유값 개수
|
|
columnsToShow.forEach((col) => {
|
|
// 해당 컬럼이 실제로 존재하는지 확인
|
|
if (!columns.includes(col)) {
|
|
console.warn(` [${sourceName}] 컬럼 "${col}"이 데이터에 없습니다.`);
|
|
return;
|
|
}
|
|
|
|
const uniqueValues = new Set(rows.map(row => row[col]));
|
|
const uniqueCount = uniqueValues.size;
|
|
|
|
console.log(` [${sourceName}] ${col}: ${uniqueCount}개 고유값`);
|
|
|
|
allMetrics.push({
|
|
label: `${sourceName} - ${col} (고유값)`,
|
|
value: uniqueCount,
|
|
field: col,
|
|
aggregation: "distinct",
|
|
color: colors[allMetrics.length % colors.length],
|
|
sourceName: sourceName,
|
|
});
|
|
});
|
|
|
|
// 총 행 개수
|
|
allMetrics.push({
|
|
label: `${sourceName} - 총 개수`,
|
|
value: rows.length,
|
|
field: "count",
|
|
aggregation: "count",
|
|
color: colors[allMetrics.length % colors.length],
|
|
sourceName: sourceName,
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log(`✅ 총 ${allMetrics.length}개의 메트릭 생성 완료`);
|
|
setMetrics(allMetrics);
|
|
setLastRefreshTime(new Date());
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "데이터 로딩 실패");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [element?.dataSources, element?.chartConfig?.dataSources, metricConfig]);
|
|
|
|
// 수동 새로고침 핸들러
|
|
const handleManualRefresh = useCallback(() => {
|
|
console.log("🔄 수동 새로고침 버튼 클릭");
|
|
loadMultipleDataSources();
|
|
}, [loadMultipleDataSources]);
|
|
|
|
// XML 데이터 파싱
|
|
const parseXmlData = (xmlText: string): any[] => {
|
|
console.log("🔍 XML 파싱 시작");
|
|
try {
|
|
const parser = new DOMParser();
|
|
const xmlDoc = parser.parseFromString(xmlText, "text/xml");
|
|
|
|
const records = xmlDoc.getElementsByTagName("record");
|
|
const result: any[] = [];
|
|
|
|
for (let i = 0; i < records.length; i++) {
|
|
const record = records[i];
|
|
const obj: any = {};
|
|
|
|
for (let j = 0; j < record.children.length; j++) {
|
|
const child = record.children[j];
|
|
obj[child.tagName] = child.textContent || "";
|
|
}
|
|
|
|
result.push(obj);
|
|
}
|
|
|
|
console.log(`✅ XML 파싱 완료: ${result.length}개 레코드`);
|
|
return result;
|
|
} catch (error) {
|
|
console.error("❌ XML 파싱 실패:", error);
|
|
throw new Error("XML 파싱 실패");
|
|
}
|
|
};
|
|
|
|
// 텍스트/CSV 데이터 파싱
|
|
const parseTextData = (text: string): any[] => {
|
|
console.log("🔍 텍스트 파싱 시작 (처음 500자):", text.substring(0, 500));
|
|
|
|
// XML 감지
|
|
if (text.trim().startsWith("<?xml") || text.trim().startsWith("<result>")) {
|
|
console.log("📄 XML 형식 감지");
|
|
return parseXmlData(text);
|
|
}
|
|
|
|
// CSV 파싱
|
|
console.log("📄 CSV 형식으로 파싱 시도");
|
|
const lines = text.trim().split("\n");
|
|
if (lines.length === 0) return [];
|
|
|
|
const headers = lines[0].split(",").map(h => h.trim());
|
|
const result: any[] = [];
|
|
|
|
for (let i = 1; i < lines.length; i++) {
|
|
const values = lines[i].split(",");
|
|
const obj: any = {};
|
|
|
|
headers.forEach((header, index) => {
|
|
obj[header] = values[index]?.trim() || "";
|
|
});
|
|
|
|
result.push(obj);
|
|
}
|
|
|
|
console.log(`✅ CSV 파싱 완료: ${result.length}개 행`);
|
|
return result;
|
|
};
|
|
|
|
// REST API 데이터 로딩
|
|
const loadRestApiData = async (source: ChartDataSource): Promise<any[]> => {
|
|
if (!source.endpoint) {
|
|
throw new Error("API endpoint가 없습니다.");
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
|
|
// queryParams 배열 또는 객체 처리
|
|
if (source.queryParams) {
|
|
if (Array.isArray(source.queryParams)) {
|
|
source.queryParams.forEach((param: any) => {
|
|
if (param.key && param.value) {
|
|
params.append(param.key, String(param.value));
|
|
}
|
|
});
|
|
} else {
|
|
Object.entries(source.queryParams).forEach(([key, value]) => {
|
|
if (key && value) {
|
|
params.append(key, String(value));
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
console.log("🌐 API 호출:", source.endpoint, "파라미터:", Object.fromEntries(params));
|
|
|
|
const response = await fetch("http://localhost:8080/api/dashboards/fetch-external-api", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
url: source.endpoint,
|
|
method: "GET",
|
|
headers: source.headers || {},
|
|
queryParams: Object.fromEntries(params),
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
console.error("❌ API 호출 실패:", {
|
|
status: response.status,
|
|
statusText: response.statusText,
|
|
body: errorText.substring(0, 500),
|
|
});
|
|
throw new Error(`HTTP ${response.status}: ${errorText.substring(0, 100)}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
console.log("✅ API 응답:", result);
|
|
|
|
if (!result.success) {
|
|
console.error("❌ API 실패:", result);
|
|
throw new Error(result.message || result.error || "외부 API 호출 실패");
|
|
}
|
|
|
|
let processedData = result.data;
|
|
|
|
// 텍스트/XML 데이터 처리
|
|
if (typeof processedData === "string") {
|
|
console.log("📄 텍스트 형식 데이터 감지");
|
|
processedData = parseTextData(processedData);
|
|
} else if (processedData && typeof processedData === "object" && processedData.text) {
|
|
console.log("📄 래핑된 텍스트 데이터 감지");
|
|
processedData = parseTextData(processedData.text);
|
|
}
|
|
|
|
// JSON Path 처리
|
|
if (source.jsonPath) {
|
|
const paths = source.jsonPath.split(".");
|
|
for (const path of paths) {
|
|
if (processedData && typeof processedData === "object" && path in processedData) {
|
|
processedData = processedData[path];
|
|
} else {
|
|
throw new Error(`JSON Path "${source.jsonPath}"에서 데이터를 찾을 수 없습니다`);
|
|
}
|
|
}
|
|
} else if (!Array.isArray(processedData) && typeof processedData === "object") {
|
|
// JSON Path 없으면 자동으로 배열 찾기
|
|
console.log("🔍 JSON Path 없음, 자동으로 배열 찾기 시도");
|
|
const arrayKeys = ["data", "items", "result", "records", "rows", "list"];
|
|
|
|
for (const key of arrayKeys) {
|
|
if (Array.isArray(processedData[key])) {
|
|
console.log(`✅ 배열 발견: ${key}`);
|
|
processedData = processedData[key];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return Array.isArray(processedData) ? processedData : [processedData];
|
|
};
|
|
|
|
// Database 데이터 로딩
|
|
const loadDatabaseData = async (source: ChartDataSource): Promise<any[]> => {
|
|
if (!source.query) {
|
|
throw new Error("SQL 쿼리가 없습니다.");
|
|
}
|
|
|
|
if (source.connectionType === "external" && source.externalConnectionId) {
|
|
// 외부 DB
|
|
const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
|
|
const externalResult = await ExternalDbConnectionAPI.executeQuery(
|
|
parseInt(source.externalConnectionId),
|
|
source.query,
|
|
);
|
|
|
|
if (!externalResult.success || !externalResult.data) {
|
|
throw new Error(externalResult.message || "외부 DB 쿼리 실행 실패");
|
|
}
|
|
|
|
const resultData = externalResult.data as unknown as {
|
|
rows: Record<string, unknown>[];
|
|
};
|
|
|
|
return resultData.rows;
|
|
} else {
|
|
// 현재 DB
|
|
const { dashboardApi } = await import("@/lib/api/dashboard");
|
|
const result = await dashboardApi.executeQuery(source.query);
|
|
|
|
return result.rows;
|
|
}
|
|
};
|
|
|
|
// 초기 로드
|
|
useEffect(() => {
|
|
if (dataSources && dataSources.length > 0 && metricConfig.length > 0) {
|
|
loadMultipleDataSources();
|
|
}
|
|
}, [dataSources, loadMultipleDataSources, metricConfig]);
|
|
|
|
// 자동 새로고침
|
|
useEffect(() => {
|
|
if (!dataSources || dataSources.length === 0) return;
|
|
|
|
const intervals = dataSources
|
|
.map((ds) => ds.refreshInterval)
|
|
.filter((interval): interval is number => typeof interval === "number" && interval > 0);
|
|
|
|
if (intervals.length === 0) return;
|
|
|
|
const minInterval = Math.min(...intervals);
|
|
console.log(`⏱️ 자동 새로고침 설정: ${minInterval}초마다`);
|
|
|
|
const intervalId = setInterval(() => {
|
|
console.log("🔄 자동 새로고침 실행");
|
|
loadMultipleDataSources();
|
|
}, minInterval * 1000);
|
|
|
|
return () => {
|
|
console.log("⏹️ 자동 새로고침 정리");
|
|
clearInterval(intervalId);
|
|
};
|
|
}, [dataSources, loadMultipleDataSources]);
|
|
|
|
// 메트릭 카드 렌더링
|
|
const renderMetricCard = (metric: any, index: number) => {
|
|
const color = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
|
|
const formattedValue = metric.value.toLocaleString(undefined, {
|
|
minimumFractionDigits: metric.decimals || 0,
|
|
maximumFractionDigits: metric.decimals || 0,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`rounded-lg border ${color.border} ${color.bg} p-4 shadow-sm transition-all hover:shadow-md`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-xs font-medium text-muted-foreground">{metric.label}</p>
|
|
<p className={`mt-1 text-2xl font-bold ${color.text}`}>
|
|
{formattedValue}
|
|
{metric.unit && <span className="ml-1 text-sm">{metric.unit}</span>}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 메트릭 개수에 따라 그리드 컬럼 동적 결정
|
|
const getGridCols = () => {
|
|
const count = metrics.length;
|
|
if (count === 0) return "grid-cols-1";
|
|
if (count === 1) return "grid-cols-1";
|
|
if (count <= 4) return "grid-cols-1 sm:grid-cols-2";
|
|
return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col rounded-lg border bg-card shadow-sm">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between border-b p-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold">
|
|
{element?.customTitle || "커스텀 메트릭 (다중 데이터 소스)"}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
{dataSources?.length || 0}개 데이터 소스 • {metrics.length}개 메트릭
|
|
{lastRefreshTime && (
|
|
<span className="ml-2">
|
|
• {lastRefreshTime.toLocaleTimeString("ko-KR")}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleManualRefresh}
|
|
disabled={loading}
|
|
className="h-8 gap-2 text-xs"
|
|
>
|
|
<RefreshCw className={`h-3 w-3 ${loading ? "animate-spin" : ""}`} />
|
|
새로고침
|
|
</Button>
|
|
{loading && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 컨텐츠 */}
|
|
<div className="flex-1 overflow-auto p-4">
|
|
{error ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-sm text-destructive">{error}</p>
|
|
</div>
|
|
) : !(element?.dataSources || element?.chartConfig?.dataSources) || (element?.dataSources || element?.chartConfig?.dataSources)?.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
데이터 소스를 연결해주세요
|
|
</p>
|
|
</div>
|
|
) : metricConfig.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
메트릭을 설정해주세요
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className={`grid gap-4 ${getGridCols()}`}>
|
|
{metrics.map((metric, index) => renderMetricCard(metric, index))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|