ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LineBarchart 1차

Browse Source
This commit is contained in:
mind-one005
2025-07-24 22:13:37 +09:00
parent c0c7bdfa5b
commit b513fddbd5
2 changed files with 86 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+42 -5
View File
@@ -1,6 +1,7 @@
import {useState, useEffect} from 'react';
import { getData, getDcData } from '@/components/lib/api';
import moment from "moment";
import { library } from 'webpack';
export type TInftwtAnls = {
inftwtAnlsSn:number;
@@ -64,7 +65,20 @@ export type TOilqData = {
mtrngDt: string; // 계측일시
oilq: number; // 유량
}
export type TRainData = {
rainInfwtAnlsSn: number;
mtrngDt: string;
amrf: number; // 강우량
}
type lineBarChartDataProps = {
label : string;
lineVal : number;
barVal : number;
barVal0 : number;
barVal1 : number;
lineVal0 : number;
lineVal1 : number;
}
const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => {
const yyyymms1 = yyyymms.map(dateStr => {
const year = dateStr.slice(0, 4);
@@ -223,10 +237,11 @@ export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석
console.error(error);
}
};
export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => {
export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; lineVal0: number, barVal0:number }[] => {
const options = arr.map(anlsRslt => ({
label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"),
val: anlsRslt.predcOilq,
lineVal0: anlsRslt.predcOilq,
barVal0: 0
}));
return options;
};
@@ -237,7 +252,7 @@ export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: str
}));
return options;
};
export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과
export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // RDII분석 결과
try {
if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) {
console.warn("RdiiAnlsSn or pplMngNo is not provided");
@@ -245,10 +260,32 @@ export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string)
}
const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${pplMngNo}`);
if (result && result.numberOfElements > 0) {
console.log("selectRdiiAnlsRslt", result.content);
return result.content;
}
} catch (error) {
console.error(error);
}
};
export const selectRainData = async(rainInfwtAnlsSn:number) => { // 강우데이터
try {
if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0)) {
console.warn("RdiiAnlsSn or pplMngNo is not provided");
return [];
}
const result = await getData(`v1/rdiiAnlsRslt/rainData/${rainInfwtAnlsSn}`);
if (result && result.numberOfElements > 0) {
console.log("selectRainData", result.content);
return result.content;
}
} catch (error) {
console.error(error);
}
};
export const getChartDataRainData = (arr: TRainData[]): { label: string; lineVal0: number, barVal0: number }[] => {
const options = arr.map(data => ({
label: moment(data.mtrngDt, "YYYY-MM-DD HH:mm:ss").format("MM-DD HH시"),
lineVal0: 0,
barVal0: data.amrf,
}));
return options;
};
apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+44 -16
View File
@@ -11,7 +11,13 @@ import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태
type ModalOpenProp = {
pplMngNo: string, // 관로관리번호
}
type DataType = {label: string; val: number};
// 차트
type lineBarChartData = {
label : string;
lineVal0 : number;
barVal0 : number;
}
const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어
@@ -23,10 +29,9 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<any[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options
const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(0); // 강우유입수분석 정보 선택시 사용
const [chartData, setChartData] = useState<{ chartData1: DataType[]; }>({
chartData1: [], //chartData2: [],
});
const [chartData, setChartData] = useState<lineBarChartData[]>([]);
const [rdiiQty, setRdiiQty] = useState<number>(0); // 강우유입수량
const [rainTotal, setRainTotal] = useState<number>(0); // 적용강우량
const [totalVolume, setTotalVolume] = useState<number>(0); // 총체적 m³/mm
const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
pplMngNo = "L"+pplMngNo; // "L13101003";
@@ -42,10 +47,16 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
setPopupOpen(true); // 팝업 열기
};
const chartForm = CHART_FORM.LINE;
const chartForm = CHART_FORM.LINEBAR;
const chartConfig = {
chartData1: { label: 'RDII', color: "red", },
//chartData2: { label: '순오수량(m³/h)', color: "orange", },
barVal0: {
label: '강수량',
color: "#33AAFF",
},
lineVal0: {
label: 'RDII',
color: "#FF0000",
},
} as ChartConfig;
useEffect(() => {
@@ -56,8 +67,9 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
setRdiiAnls(null); // 강우유입수분석정보 초기화
setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
setChartData({chartData1: [], }); // 차트 데이터 초기화
setChartData([]); // 차트 데이터 초기화
setRdiiQty(0); // 강우유입수량 초기화
setRainTotal(0); // 적용강우량 초기화
setTotalVolume(0); // 총체적 m³/mm 초기화
}
}, [isModalOpen]);
@@ -99,23 +111,34 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
setPopupOpen(false);
}
const rdiiRsltChart = () => { // 그래프 & 팝업 닫기
fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수분석 결과 조회
const rsltData1 = fn.getChartDataRdiiAnlsRslt(data ?? []);
//const rsltData2 = fn.getChartDataRdiiAnlsRsltMinq(data ?? []);
setChartData(prev => ({
chartData1: rsltData1, // 순오수량(m³/h)
// chartData2: rsltData2 // RDII(m³/h) 강우유입수분석결과
}));
});
fetchFilteredData();
fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회
setRdiiQty(Math.round(data.rdiih*24)); // cmd: m³/d 단위로 변환
if (data.raintotal && data.rainTotal !== 0) {
setRainTotal(data.raintotal); // 총강우량mm
setTotalVolume(Math.round(data.rdiih * data.sustaintime / data.raintotal)); // 총체적 m³/mm
}
});
setPopupOpen(false);
};
const fetchFilteredData: () => Promise<void> = async () => {
const rsltData = await fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo);
const rsltDataformatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []); // format 변경
const rainData = await fn.selectRainData(rainInfwtAnlsSn);
const rainDataformatted = fn.getChartDataRainData(rainData ?? []); // format 변경
console.log('rainDataformatted :', rainDataformatted);
const rainMap = new Map(rainDataformatted.map(item => [item.label, item.barVal0]));
rsltDataformatted.forEach(item => {
const matchedVal = rainMap.get(item.label);
if (matchedVal !== undefined) {
item.barVal0 = matchedVal;
}
});
console.log('rsltDataformatted :', rsltDataformatted);
setChartData(rsltDataformatted); // 차트 데이터 설정
}
const renderBody = () => (
<>
<div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
@@ -143,6 +166,11 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
<span className="w-[30px] inline-block text-right text-black text-xl font-bold"> {rdiiQty}</span>
<span className="ml-2 text-black"> m³/d</span>
</div>
<div className="flex items-center mt-2">
<span className="w-[95px] inline-block text-right text-black text-xl">적용강우량 : </span>
<span className="w-[30px] inline-block text-right text-black text-xl font-bold"> {rainTotal}</span>
<span className="ml-2 text-black"> mm</span>
</div>
<div className="flex items-center mt-2">
<span className="w-[95px] inline-block text-right text-black text-xl">강우량대비RDII : </span>
<span className="w-[30px] inline-block text-right text-black text-xl font-bold"> {totalVolume}</span>