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

그래프 x축

Browse Source
This commit is contained in:
mind-one005
2025-06-30 15:45:01 +09:00
parent a2d48745b3
commit 515f75bd80
2 changed files with 68 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+30 -2
View File
@@ -27,6 +27,12 @@ export type TInftwtAnlsRslt = {
anlsTm: string;
predcOilq:number;
}
export type TOilqData = {
inftwtAnlsSn: number; // 침입수분석 일련번호
pplMngNo: string; // 관로관리번호
mtrngDt: string; // 계측일시
oilq: number; // 유량
}
const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => {
let yyyymms1 = yyyymms.map(dateStr => {
const year = dateStr.slice(0, 4);
@@ -78,7 +84,7 @@ export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석
const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : '';
const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`);
if (result && result.numberOfElements > 0) {
console.log("selectInftwtAnls", result.content);
//console.log("selectInftwtAnls", result.content);
return result.content;
}
} catch (error) {
@@ -100,7 +106,29 @@ export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string)
}
const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
if (result && result.numberOfElements > 0) {
console.log("selectInftwtAnlsRslt", result.content);
//console.log("selectInftwtAnlsRslt", result.content);
return result.content;
}
} catch (error) {
console.error(error);
}
};
export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number }[] => {
const options = arr.map(anlsRslt => ({
label: anlsRslt.mtrngDt,
val: anlsRslt.oilq,
}));
return options;
};
export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { // 유량
try {
if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
console.warn("inftwtAnlsSn or pplMngNo is not provided");
return [];
}
const result = await getData(`v1/inftwtAnlsRslt/oilqppl/${inftwtAnlsSn}/${pplMngNo}`);
if (result && result.numberOfElements > 0) {
console.log("selectOilq", result.content);
return result.content;
}
} catch (error) {
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+38 -32
View File
@@ -5,9 +5,11 @@ import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_compon
import Modal from '@/components/ui/modal';
import { Button } from '@common/components/ui';
import { getData } from "@/components/lib/api";
import type { TInftwtAnls, TInftwtAnlsRslt } from './aplcnYms';
import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms';
import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt} from './aplcnYms';
import { selectOilq, getChartDataOilq} from './aplcnYms';
import { set } from 'react-hook-form';
type ModalOpenProp = {
isModalOpen: boolean,
@@ -26,14 +28,25 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls|null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({
chartData1: [{ label: "1", val: 20 },
{ label: "3", val: 40 },
{ label: "5", val: 60 },],
chartData2: [{ label: "1", val: 15 },
{ label: "3", val: 35 },
{ label: "5", val: 55 },],
});
chartData1: [],chartData2: [],});
useEffect(() => {
if(isModalOpen === false){
setPopupOpen(true); // 모달이 닫힐 때 팝업은
setAplcnYm(""); // 상수사용월 초기화
setInftwtAnlss([]); // 침입수분석 초기화
setInftwtAnlsInfos([]); // 침입수분석정보 초기화
setInftwtAnls(null); // 침입수분석정보 초기화
setInftwtAnlsSn(0); // 침입수분석 일련번호 초기화
setChartData({
chartData1: [{ label: "1", val: 20 },
{ label: "3", val: 40 },
{ label: "5", val: 60 },],
chartData2: [{ label: "1", val: 15 },
{ label: "3", val: 35 },
{ label: "5", val: 55 },],
}); // 차트 데이터 초기화
}
}, [isModalOpen]);
//const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
const openPopup = () => {
@@ -49,34 +62,26 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
//console.log("btnTxt", btnTxt);
const chartForm = CHART_FORM.LINE;
// const chartData = {
// chartData1: [
// { label: "1", val: 20 },
// { label: "3", val: 40 },
// { label: "5", val: 60 },
// ],
// chartData2: [
// { label: "1", val: 15 },
// { label: "3", val: 35 },
// { label: "5", val: 55 },
// ],
// }
const chartConfig = Object.values(chartData).flat().reduce((config, element) => {
config[element.label] = {
label: element.label,
color: "hsl(var(--chart-1))",
};
return config;
}, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
const chartConfig = {
chartData1: {label: '침입수예측유량',color: "red",},
chartData2: {label: '실측유량',color: "orange",}
} as ChartConfig;
const closePopup = () => { // 팝업 닫기
selectInftwtAnlsRslt(inftwtAnlsSn,"L13101003").then((data) => {// 침입수분석 결과 조회
const rsltData = getChartDataInftwtAnlsRslt(data ?? []);
setChartData({
chartData1: rsltData,
chartData2: rsltData, // 예시로 같은 데이터를 사용
});
setChartData(prev => ({
...prev,
chartData1: rsltData // 침입수분석결과
}));
});
// selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회
// const rsltData = getChartDataOilq(data ?? []);
// setChartData(prev => ({
// ...prev,
// chartData2: rsltData // 유량
// }));
// });
setPopupOpen(false);
};
const onChangeAplcnYm = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -97,6 +102,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe
setInftwtAnls(selectedAnls);
}
};
return (
<Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} >
{/* 분석 입력현황 조회 */}