506 lines
17 KiB
TypeScript
506 lines
17 KiB
TypeScript
/**
|
||
* 커스텀 통계 카드 위젯
|
||
* - 쿼리 결과에서 숫자 데이터를 자동으로 감지하여 통계 표시
|
||
* - 합계, 평균, 비율 등 자동 계산
|
||
* - 처리량, 효율, 가동설비, 재고점유율 등 다양한 통계 지원
|
||
*/
|
||
|
||
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||
|
||
interface CustomStatsWidgetProps {
|
||
element?: DashboardElement;
|
||
refreshInterval?: number;
|
||
}
|
||
|
||
interface StatItem {
|
||
label: string;
|
||
value: number;
|
||
unit: string;
|
||
color: string;
|
||
icon: string;
|
||
}
|
||
|
||
export default function CustomStatsWidget({ element, refreshInterval = 60000 }: CustomStatsWidgetProps) {
|
||
const [allStats, setAllStats] = useState<StatItem[]>([]); // 모든 통계
|
||
const [stats, setStats] = useState<StatItem[]>([]); // 표시할 통계
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [showSettings, setShowSettings] = useState(false);
|
||
const [selectedStats, setSelectedStats] = useState<string[]>([]); // 선택된 통계 라벨
|
||
|
||
// localStorage 키 생성 (위젯별로 고유하게)
|
||
const storageKey = `custom-stats-widget-${element?.id || "default"}`;
|
||
|
||
// 초기 로드 시 저장된 설정 불러오기
|
||
React.useEffect(() => {
|
||
const saved = localStorage.getItem(storageKey);
|
||
if (saved) {
|
||
try {
|
||
const parsed = JSON.parse(saved);
|
||
setSelectedStats(parsed);
|
||
} catch (e) {
|
||
console.error("설정 로드 실패:", e);
|
||
}
|
||
}
|
||
}, [storageKey]);
|
||
|
||
// 데이터 로드
|
||
const loadData = async () => {
|
||
try {
|
||
setIsLoading(true);
|
||
setError(null);
|
||
|
||
// 쿼리가 설정되어 있지 않으면 안내 메시지만 표시
|
||
if (!element?.dataSource?.query) {
|
||
setError("쿼리를 설정해주세요");
|
||
setIsLoading(false);
|
||
return;
|
||
}
|
||
|
||
// 쿼리 실행하여 통계 계산
|
||
const token = localStorage.getItem("authToken");
|
||
const response = await fetch("/api/dashboards/execute-query", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
body: JSON.stringify({
|
||
query: element.dataSource.query,
|
||
connectionType: element.dataSource.connectionType || "current",
|
||
externalConnectionId: element.dataSource.externalConnectionId,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) throw new Error("데이터 로딩 실패");
|
||
|
||
const result = await response.json();
|
||
|
||
if (!result.success || !result.data?.rows) {
|
||
throw new Error(result.message || "데이터 로드 실패");
|
||
}
|
||
|
||
const data = result.data.rows || [];
|
||
|
||
if (data.length === 0) {
|
||
setStats([]);
|
||
return;
|
||
}
|
||
|
||
const firstRow = data[0];
|
||
const statsItems: StatItem[] = [];
|
||
|
||
// 1. 총 건수 (항상 표시)
|
||
statsItems.push({
|
||
label: "총 건수",
|
||
value: data.length,
|
||
unit: "건",
|
||
color: "indigo",
|
||
icon: "📊",
|
||
});
|
||
|
||
// 2. 모든 숫자 컬럼 자동 감지
|
||
const numericColumns: { [key: string]: { sum: number; avg: number; count: number } } = {};
|
||
|
||
Object.keys(firstRow).forEach((key) => {
|
||
const value = firstRow[key];
|
||
// 숫자로 변환 가능한 컬럼만 선택 (id, order 같은 식별자 제외)
|
||
if (
|
||
value !== null &&
|
||
!isNaN(parseFloat(value)) &&
|
||
!key.toLowerCase().includes("id") &&
|
||
!key.toLowerCase().includes("order") &&
|
||
key.toLowerCase() !== "id"
|
||
) {
|
||
const validValues = data
|
||
.map((item: any) => parseFloat(item[key]))
|
||
.filter((v: number) => !isNaN(v) && v !== 0);
|
||
|
||
if (validValues.length > 0) {
|
||
const sum = validValues.reduce((acc: number, v: number) => acc + v, 0);
|
||
numericColumns[key] = {
|
||
sum,
|
||
avg: sum / validValues.length,
|
||
count: validValues.length,
|
||
};
|
||
}
|
||
}
|
||
});
|
||
|
||
// 3. 키워드 기반 자동 라벨링 및 단위 설정
|
||
const columnConfig: {
|
||
[key: string]: {
|
||
keywords: string[];
|
||
unit: string;
|
||
color: string;
|
||
icon: string;
|
||
useAvg?: boolean;
|
||
koreanLabel?: string; // 한글 라벨
|
||
};
|
||
} = {
|
||
// 무게/중량
|
||
weight: {
|
||
keywords: ["weight", "cargo_weight", "total_weight", "tonnage"],
|
||
unit: "톤",
|
||
color: "green",
|
||
icon: "⚖️",
|
||
koreanLabel: "총 운송량"
|
||
},
|
||
// 거리
|
||
distance: {
|
||
keywords: ["distance", "total_distance"],
|
||
unit: "km",
|
||
color: "blue",
|
||
icon: "🛣️",
|
||
koreanLabel: "누적 거리"
|
||
},
|
||
// 시간/기간
|
||
time: {
|
||
keywords: ["time", "duration", "delivery_time", "delivery_duration"],
|
||
unit: "분",
|
||
color: "orange",
|
||
icon: "⏱️",
|
||
useAvg: true,
|
||
koreanLabel: "평균 배송시간"
|
||
},
|
||
// 수량/개수
|
||
quantity: {
|
||
keywords: ["quantity", "qty", "amount"],
|
||
unit: "개",
|
||
color: "purple",
|
||
icon: "📦",
|
||
koreanLabel: "총 수량"
|
||
},
|
||
// 금액/가격
|
||
price: {
|
||
keywords: ["price", "cost", "fee"],
|
||
unit: "원",
|
||
color: "yellow",
|
||
icon: "💰",
|
||
koreanLabel: "총 금액"
|
||
},
|
||
// 비율/퍼센트
|
||
rate: {
|
||
keywords: ["rate", "ratio", "percent", "efficiency"],
|
||
unit: "%",
|
||
color: "cyan",
|
||
icon: "📈",
|
||
useAvg: true,
|
||
koreanLabel: "평균 비율"
|
||
},
|
||
// 처리량
|
||
throughput: {
|
||
keywords: ["throughput", "output", "production"],
|
||
unit: "개",
|
||
color: "pink",
|
||
icon: "⚡",
|
||
koreanLabel: "총 처리량"
|
||
},
|
||
// 재고
|
||
stock: {
|
||
keywords: ["stock", "inventory"],
|
||
unit: "개",
|
||
color: "teal",
|
||
icon: "📦",
|
||
koreanLabel: "재고 수량"
|
||
},
|
||
// 설비/장비
|
||
equipment: {
|
||
keywords: ["equipment", "facility", "machine"],
|
||
unit: "대",
|
||
color: "gray",
|
||
icon: "🏭",
|
||
koreanLabel: "가동 설비"
|
||
},
|
||
};
|
||
|
||
// 4. 각 숫자 컬럼을 통계 카드로 변환
|
||
Object.entries(numericColumns).forEach(([key, stats]) => {
|
||
let label = key;
|
||
let unit = "";
|
||
let color = "gray";
|
||
let icon = "📊";
|
||
let useAvg = false;
|
||
let matchedConfig = null;
|
||
|
||
// 키워드 매칭으로 라벨, 단위, 색상 자동 설정
|
||
for (const [configKey, config] of Object.entries(columnConfig)) {
|
||
if (config.keywords.some((keyword) => key.toLowerCase().includes(keyword.toLowerCase()))) {
|
||
unit = config.unit;
|
||
color = config.color;
|
||
icon = config.icon;
|
||
useAvg = config.useAvg || false;
|
||
matchedConfig = config;
|
||
|
||
// 한글 라벨 사용 또는 자동 변환
|
||
label = config.koreanLabel || key
|
||
.replace(/_/g, " ")
|
||
.replace(/([A-Z])/g, " $1")
|
||
.trim();
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 매칭되지 않은 경우 기본 라벨 생성
|
||
if (!matchedConfig) {
|
||
label = key
|
||
.replace(/_/g, " ")
|
||
.replace(/([A-Z])/g, " $1")
|
||
.trim()
|
||
.split(" ")
|
||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||
.join(" ");
|
||
}
|
||
|
||
// 합계 또는 평균 선택
|
||
const value = useAvg ? stats.avg : stats.sum;
|
||
|
||
statsItems.push({
|
||
label,
|
||
value,
|
||
unit,
|
||
color,
|
||
icon,
|
||
});
|
||
});
|
||
|
||
// 5. Boolean 컬럼 비율 계산 (정시도착률, 성공률 등)
|
||
const booleanMapping: { [key: string]: string } = {
|
||
is_on_time: "정시 도착률",
|
||
on_time: "정시 도착률",
|
||
success: "성공률",
|
||
completed: "완료율",
|
||
delivered: "배송 완료율",
|
||
approved: "승인률",
|
||
};
|
||
|
||
Object.keys(firstRow).forEach((key) => {
|
||
const lowerKey = key.toLowerCase();
|
||
const matchedKey = Object.keys(booleanMapping).find((k) => lowerKey.includes(k));
|
||
|
||
if (matchedKey) {
|
||
const validItems = data.filter((item: any) => item[key] !== null && item[key] !== undefined);
|
||
|
||
if (validItems.length > 0) {
|
||
const trueCount = validItems.filter((item: any) => {
|
||
const val = item[key];
|
||
return val === true || val === "true" || val === 1 || val === "1" || val === "Y";
|
||
}).length;
|
||
|
||
const rate = (trueCount / validItems.length) * 100;
|
||
|
||
statsItems.push({
|
||
label: booleanMapping[matchedKey],
|
||
value: rate,
|
||
unit: "%",
|
||
color: "purple",
|
||
icon: "✅",
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
setAllStats(statsItems);
|
||
|
||
// 초기에는 모든 통계 표시 (최대 6개)
|
||
if (selectedStats.length === 0) {
|
||
setStats(statsItems.slice(0, 6));
|
||
setSelectedStats(statsItems.slice(0, 6).map((s) => s.label));
|
||
} else {
|
||
// 선택된 통계만 표시
|
||
const filtered = statsItems.filter((s) => selectedStats.includes(s.label));
|
||
setStats(filtered);
|
||
}
|
||
} catch (err) {
|
||
console.error("통계 로드 실패:", err);
|
||
setError(err instanceof Error ? err.message : "데이터를 불러올 수 없습니다");
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
const interval = setInterval(loadData, refreshInterval);
|
||
return () => clearInterval(interval);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [refreshInterval, element?.dataSource]);
|
||
|
||
// 색상 매핑
|
||
const getColorClasses = (color: string) => {
|
||
const colorMap: { [key: string]: { bg: string; text: string } } = {
|
||
indigo: { bg: "bg-indigo-50", text: "text-indigo-600" },
|
||
green: { bg: "bg-green-50", text: "text-green-600" },
|
||
blue: { bg: "bg-blue-50", text: "text-blue-600" },
|
||
purple: { bg: "bg-purple-50", text: "text-purple-600" },
|
||
orange: { bg: "bg-orange-50", text: "text-orange-600" },
|
||
yellow: { bg: "bg-yellow-50", text: "text-yellow-600" },
|
||
cyan: { bg: "bg-cyan-50", text: "text-cyan-600" },
|
||
pink: { bg: "bg-pink-50", text: "text-pink-600" },
|
||
teal: { bg: "bg-teal-50", text: "text-teal-600" },
|
||
gray: { bg: "bg-gray-50", text: "text-gray-600" },
|
||
};
|
||
return colorMap[color] || colorMap.gray;
|
||
};
|
||
|
||
if (isLoading && stats.length === 0) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center bg-gray-50">
|
||
<div className="text-center">
|
||
<div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" />
|
||
<div className="mt-2 text-sm text-gray-600">로딩 중...</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center bg-gray-50 p-4">
|
||
<div className="text-center">
|
||
<div className="mb-2 text-4xl">⚠️</div>
|
||
<div className="text-sm font-medium text-gray-600">{error}</div>
|
||
{!element?.dataSource?.query && (
|
||
<div className="mt-2 text-xs text-gray-500">톱니바퀴 아이콘을 클릭하여 쿼리를 설정하세요</div>
|
||
)}
|
||
<button
|
||
onClick={loadData}
|
||
className="mt-3 rounded-lg bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
|
||
>
|
||
다시 시도
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (stats.length === 0) {
|
||
return (
|
||
<div className="flex h-full items-center justify-center bg-gray-50 p-4">
|
||
<div className="text-center">
|
||
<div className="mb-2 text-4xl">📊</div>
|
||
<div className="text-sm font-medium text-gray-600">데이터 없음</div>
|
||
<div className="mt-2 text-xs text-gray-500">쿼리를 실행하여 통계를 확인하세요</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const handleToggleStat = (label: string) => {
|
||
setSelectedStats((prev) => {
|
||
if (prev.includes(label)) {
|
||
return prev.filter((l) => l !== label);
|
||
} else {
|
||
return [...prev, label];
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleApplySettings = () => {
|
||
const filtered = allStats.filter((s) => selectedStats.includes(s.label));
|
||
setStats(filtered);
|
||
setShowSettings(false);
|
||
|
||
// localStorage에 설정 저장
|
||
localStorage.setItem(storageKey, JSON.stringify(selectedStats));
|
||
};
|
||
|
||
return (
|
||
<div className="relative flex h-full flex-col bg-white">
|
||
{/* 헤더 영역 */}
|
||
<div className="flex items-center justify-between border-b bg-gray-50 px-4 py-2">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-lg">📊</span>
|
||
<span className="text-sm font-medium text-gray-700">커스텀 통계</span>
|
||
<span className="text-xs text-gray-500">({stats.length}개 표시 중)</span>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowSettings(true)}
|
||
className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100"
|
||
title="표시할 통계 선택"
|
||
>
|
||
<span>⚙️</span>
|
||
<span>설정</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 통계 카드 */}
|
||
<div className="flex flex-1 items-center justify-center p-6">
|
||
<div className="grid w-full gap-4" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))" }}>
|
||
{stats.map((stat, index) => {
|
||
const colors = getColorClasses(stat.color);
|
||
return (
|
||
<div key={index} className={`rounded-lg border ${colors.bg} p-4 text-center`}>
|
||
<div className="text-sm text-gray-600">
|
||
{stat.icon} {stat.label}
|
||
</div>
|
||
<div className={`mt-2 text-3xl font-bold ${colors.text}`}>
|
||
{stat.value.toFixed(stat.unit === "%" || stat.unit === "분" ? 1 : 0).toLocaleString()}
|
||
<span className="ml-1 text-lg">{stat.unit}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 설정 모달 */}
|
||
{showSettings && (
|
||
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/50">
|
||
<div className="max-h-[80%] w-[90%] max-w-md overflow-auto rounded-lg bg-white p-6 shadow-xl">
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<h3 className="text-lg font-bold">표시할 통계 선택</h3>
|
||
<button onClick={() => setShowSettings(false)} className="text-2xl text-gray-500 hover:text-gray-700">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mb-4 text-sm text-gray-600">
|
||
표시하고 싶은 통계를 선택하세요 (최대 제한 없음)
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
{allStats.map((stat, index) => (
|
||
<label
|
||
key={index}
|
||
className="flex cursor-pointer items-center gap-3 rounded-lg border p-3 hover:bg-gray-50"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedStats.includes(stat.label)}
|
||
onChange={() => handleToggleStat(stat.label)}
|
||
className="h-5 w-5"
|
||
/>
|
||
<span className="text-xl">{stat.icon}</span>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{stat.label}</div>
|
||
<div className="text-sm text-gray-500">단위: {stat.unit}</div>
|
||
</div>
|
||
</label>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-6 flex gap-2">
|
||
<button
|
||
onClick={handleApplySettings}
|
||
className="flex-1 rounded-lg bg-blue-500 py-2 text-white hover:bg-blue-600"
|
||
>
|
||
적용 ({selectedStats.length}개 선택)
|
||
</button>
|
||
<button
|
||
onClick={() => setShowSettings(false)}
|
||
className="rounded-lg border px-4 py-2 hover:bg-gray-50"
|
||
>
|
||
취소
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|