229 lines
7.6 KiB
TypeScript
229 lines
7.6 KiB
TypeScript
/**
|
||
* 운송 통계 위젯
|
||
* - 총 운송량 (톤)
|
||
* - 누적 거리 (km)
|
||
* - 정시 도착률 (%)
|
||
* - 쿼리 결과 기반 통계 계산
|
||
*/
|
||
|
||
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { DashboardElement } from "@/components/admin/dashboard/types";
|
||
|
||
interface TransportStatsWidgetProps {
|
||
element?: DashboardElement;
|
||
refreshInterval?: number;
|
||
}
|
||
|
||
interface StatsData {
|
||
total_count: number;
|
||
total_weight: number;
|
||
total_distance: number;
|
||
on_time_rate: number;
|
||
}
|
||
|
||
export default function TransportStatsWidget({ element, refreshInterval = 60000 }: TransportStatsWidgetProps) {
|
||
const [stats, setStats] = useState<StatsData | null>(null);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// 데이터 로드
|
||
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({ total_count: 0, total_weight: 0, total_distance: 0, on_time_rate: 0 });
|
||
return;
|
||
}
|
||
|
||
// 자동으로 숫자 컬럼 감지 및 합계 계산
|
||
const firstRow = data[0];
|
||
const numericColumns: { [key: string]: number } = {};
|
||
|
||
// 모든 컬럼을 순회하며 숫자 컬럼 찾기
|
||
Object.keys(firstRow).forEach((key) => {
|
||
const value = firstRow[key];
|
||
// 숫자로 변환 가능한 컬럼만 선택
|
||
if (value !== null && !isNaN(parseFloat(value))) {
|
||
numericColumns[key] = data.reduce((sum: number, item: any) => {
|
||
return sum + (parseFloat(item[key]) || 0);
|
||
}, 0);
|
||
}
|
||
});
|
||
|
||
// 특정 키워드를 포함한 컬럼 자동 매핑
|
||
const weightKeys = ["weight", "cargo_weight", "total_weight", "중량", "무게"];
|
||
const distanceKeys = ["distance", "total_distance", "거리", "주행거리"];
|
||
const onTimeKeys = ["is_on_time", "on_time", "onTime", "정시", "정시도착"];
|
||
|
||
// 총 운송량 찾기
|
||
let total_weight = 0;
|
||
for (const key of Object.keys(numericColumns)) {
|
||
if (weightKeys.some((keyword) => key.toLowerCase().includes(keyword.toLowerCase()))) {
|
||
total_weight = numericColumns[key];
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 누적 거리 찾기
|
||
let total_distance = 0;
|
||
for (const key of Object.keys(numericColumns)) {
|
||
if (distanceKeys.some((keyword) => key.toLowerCase().includes(keyword.toLowerCase()))) {
|
||
total_distance = numericColumns[key];
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 정시 도착률 계산
|
||
let on_time_rate = 0;
|
||
for (const key of Object.keys(firstRow)) {
|
||
if (onTimeKeys.some((keyword) => key.toLowerCase().includes(keyword.toLowerCase()))) {
|
||
const onTimeItems = data.filter((item: any) => {
|
||
const onTime = item[key];
|
||
return onTime !== null && onTime !== undefined;
|
||
});
|
||
|
||
if (onTimeItems.length > 0) {
|
||
const onTimeCount = onTimeItems.filter((item: any) => {
|
||
const onTime = item[key];
|
||
return onTime === true || onTime === "true" || onTime === 1 || onTime === "1";
|
||
}).length;
|
||
|
||
on_time_rate = (onTimeCount / onTimeItems.length) * 100;
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
const calculatedStats: StatsData = {
|
||
total_count: data.length, // 총 건수
|
||
total_weight,
|
||
total_distance,
|
||
on_time_rate,
|
||
};
|
||
|
||
setStats(calculatedStats);
|
||
} 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]);
|
||
|
||
if (isLoading && !stats) {
|
||
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 || !stats) {
|
||
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>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-full items-center justify-center bg-white p-6">
|
||
<div className="grid w-full grid-cols-2 gap-4">
|
||
{/* 총 건수 */}
|
||
<div className="rounded-lg border bg-indigo-50 p-4 text-center">
|
||
<div className="text-sm text-gray-600">총 건수</div>
|
||
<div className="mt-2 text-3xl font-bold text-indigo-600">
|
||
{stats.total_count.toLocaleString()}
|
||
<span className="ml-1 text-lg">건</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 총 운송량 */}
|
||
<div className="rounded-lg border bg-green-50 p-4 text-center">
|
||
<div className="text-sm text-gray-600">총 운송량</div>
|
||
<div className="mt-2 text-3xl font-bold text-green-600">
|
||
{stats.total_weight.toFixed(1)}
|
||
<span className="ml-1 text-lg">톤</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 누적 거리 */}
|
||
<div className="rounded-lg border bg-blue-50 p-4 text-center">
|
||
<div className="text-sm text-gray-600">누적 거리</div>
|
||
<div className="mt-2 text-3xl font-bold text-blue-600">
|
||
{stats.total_distance.toFixed(1)}
|
||
<span className="ml-1 text-lg">km</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 정시 도착률 */}
|
||
<div className="rounded-lg border bg-purple-50 p-4 text-center">
|
||
<div className="text-sm text-gray-600">정시 도착률</div>
|
||
<div className="mt-2 text-3xl font-bold text-purple-600">
|
||
{stats.on_time_rate.toFixed(1)}
|
||
<span className="ml-1 text-lg">%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|