258 lines
7.7 KiB
TypeScript
258 lines
7.7 KiB
TypeScript
"use client";
|
|
/**
|
|
* 수계별 유입ㆍ방류수질 분석
|
|
*/
|
|
import React, { useEffect, useState, useMemo } from 'react';
|
|
import { useStore } from "zustand";
|
|
import { Line } from 'react-chartjs-2';
|
|
import BasinSelect from "./basIn-select";
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale, LinearScale, PointElement, LineElement,
|
|
Title, Tooltip, Legend, type ChartOptions,
|
|
} from 'chart.js';
|
|
import type { OperWqltContent } from "../model/fo-interface";
|
|
import { OperationApi, basinStore } from "../api/fo-service";
|
|
import { defaultInitOperWqltState } from "../api/fo-service";
|
|
import { useDragHandle } from "./sortable-panel";
|
|
|
|
// Chart.js 등록
|
|
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
|
|
|
|
type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
|
|
|
|
const FoWqltInflEffl: React.FC = () => {
|
|
const { dragHandleProps, isDragging } = useDragHandle();
|
|
const { selectedBasin, setSelectedBasin } = useStore(basinStore);
|
|
const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');
|
|
const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
|
|
const tabs: WaterQualityType[] = ['BOD', 'TOC', 'SS', 'TP', 'TN'];
|
|
|
|
const onBasinChange = (value: string) => {
|
|
setSelectedBasin(value);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setWqltData(defaultInitOperWqltState.operWqltStatus);
|
|
const fetchData = async () => {
|
|
try {
|
|
const standardYear = await OperationApi.getStandardYear();
|
|
const data = await OperationApi.getDashOperWqlt(standardYear);
|
|
setWqltData(data);
|
|
// console.log(wqltData);
|
|
} catch (e) {
|
|
console.error("시설 유입ㆍ방류수질 데이터 조회 실패", e);
|
|
}
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
const chartData = useMemo(() => {
|
|
const filteredData = wqltData
|
|
.filter(d => d.rvbsn === selectedBasin) // 해당 유역
|
|
.sort((a, b) => Number(a.yr) - Number(b.yr));
|
|
|
|
const wqltKey = selectedTab.charAt(0).toUpperCase() + selectedTab.slice(1).toLowerCase();
|
|
const inflowKey = `sumInfl${wqltKey}` as keyof OperWqltContent;
|
|
const effluentKey = `sumEffl${wqltKey}` as keyof OperWqltContent;
|
|
const inflowAvgKey = `avgInfl${wqltKey}` as keyof OperWqltContent;
|
|
const effluentAvgKey = `avgEffl${wqltKey}` as keyof OperWqltContent;
|
|
|
|
|
|
const labels = filteredData.map(d => d.yr ?? '');
|
|
const inflowData = filteredData.map(d => d[inflowKey] as number);
|
|
const effluentData = filteredData.map(d => d[effluentKey] as number);
|
|
const inflowAvg = filteredData[0]?.[inflowAvgKey] as number ?? 0;
|
|
const effluentAvg = filteredData[0]?.[effluentAvgKey] as number ?? 0;
|
|
|
|
return { labels, inflowData, effluentData, inflowAvg, effluentAvg };
|
|
}, [wqltData, selectedBasin, selectedTab]);
|
|
|
|
// console.log(chartData);
|
|
|
|
// 차트 공통 옵션
|
|
// const getChartOptions = (yAxisLabel: string): ChartOptions<'line'> => ({
|
|
const getChartOptions = (): ChartOptions<'line'> => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
labels: {
|
|
usePointStyle: true,
|
|
boxWidth: 6,
|
|
color: '#000',
|
|
font: {
|
|
size: 8,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
titleFont: { size: 10 },
|
|
bodyFont: { size: 10 },
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
tickLength: 4, // 눈금 길이 축소
|
|
},
|
|
ticks: {
|
|
color: '#000',
|
|
font: {
|
|
size: 8, // 폰트 크기 축소
|
|
},
|
|
padding: 0,
|
|
},
|
|
},
|
|
y: {
|
|
grid: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
},
|
|
ticks: {
|
|
color: '#000',
|
|
font: {
|
|
size: 8, // 폰트 크기 축소
|
|
},
|
|
maxTicksLimit: 4, // 눈금 개수 제한
|
|
padding: 2,
|
|
},
|
|
title: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
layout: {
|
|
padding: {
|
|
top: 5,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 5
|
|
}
|
|
}
|
|
});
|
|
|
|
// 유입 데이터 차트 설정
|
|
const inflowChartData = {
|
|
labels: chartData.labels,
|
|
datasets: [
|
|
{
|
|
label: `유입${selectedTab} (mg/L)`,
|
|
data: chartData.inflowData,
|
|
borderColor: '#00D4FF',
|
|
backgroundColor: '#00D4FF',
|
|
borderWidth: 1,
|
|
pointRadius: 2,
|
|
pointHoverRadius: 4,
|
|
tension: 0.4,
|
|
},
|
|
{
|
|
label: '유입 평균 (mg/L)',
|
|
data: Array(chartData.labels.length).fill(chartData.inflowAvg),
|
|
borderColor: '#FF1493',
|
|
backgroundColor: '#FF1493',
|
|
borderWidth: 1,
|
|
borderDash: [10, 5],
|
|
pointRadius: 0,
|
|
pointHoverRadius: 4,
|
|
tension: 0,
|
|
},
|
|
],
|
|
};
|
|
|
|
// 방류 데이터 차트 설정
|
|
const effluentChartData = {
|
|
labels: chartData.labels,
|
|
datasets: [
|
|
{
|
|
label: `방류${selectedTab} (mg/L)`,
|
|
data: chartData.effluentData,
|
|
borderColor: '#00FF88',
|
|
backgroundColor: '#00FF88',
|
|
borderWidth: 1,
|
|
pointRadius: 2,
|
|
pointHoverRadius: 4,
|
|
tension: 0.4,
|
|
},
|
|
{
|
|
label: '방류 평균 (mg/L)',
|
|
data: Array(chartData.labels.length).fill(chartData.effluentAvg),
|
|
borderColor: '#FFB800',
|
|
backgroundColor: '#FFB800',
|
|
borderWidth: 1,
|
|
borderDash: [10, 5],
|
|
pointRadius: 0,
|
|
pointHoverRadius: 4,
|
|
tension: 0,
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className="card card-border" style={{ height: "250px" }}>
|
|
<div
|
|
className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
|
|
{...dragHandleProps}
|
|
title="헤더를 드래그하여 패널 순서 변경"
|
|
>
|
|
<h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
|
|
<div
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
|
|
</div>
|
|
</div>
|
|
<div className="h-70 p-0 flex items-center justify-center">
|
|
<div style={{ width: "100%", maxWidth: 400, height: 180 }}>
|
|
{/* 탭 메뉴 */}
|
|
<div style={{ display: 'flex', gap: '20px', borderBottom: '1px solid #000000', flexShrink: 0 }}>
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setSelectedTab(tab)}
|
|
style={{
|
|
background: 'none',
|
|
border: 'none',
|
|
color: selectedTab === tab ? '#00D4FF' : '#6b7c93',
|
|
fontSize: '8px',
|
|
fontWeight: selectedTab === tab ? 'bold' : 'normal',
|
|
cursor: 'pointer',
|
|
borderBottom: selectedTab === tab ? '3px solid #00D4FF' : 'none',
|
|
transition: 'all 0.3s',
|
|
}}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 차트 영역 */}
|
|
<div style={{ display: 'flex', flexDirection: 'row', flex: 1, minHeight: 0 }}>
|
|
{/* 유입 차트 */}
|
|
<div style={{ flex: 1, position: 'relative', minWidth: 0 }}>
|
|
<Line data={inflowChartData} options={getChartOptions()} />
|
|
</div>
|
|
|
|
{/* 방류 차트 */}
|
|
<div style={{ flex: 1, position: 'relative', minWidth: 0 }}>
|
|
<Line data={effluentChartData} options={getChartOptions()} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
);
|
|
};
|
|
|
|
export default FoWqltInflEffl;
|