diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts index 99a563184..a1489a1a2 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts @@ -70,15 +70,12 @@ export type TRainData = { mtrngDt: string; amrf: number; // 강우량 } -type lineBarChartDataProps = { - label : string; - lineVal : number; - barVal : number; - barVal0 : number; - barVal1 : number; - lineVal0 : number; - lineVal1 : number; + +function roundTo(n: number, digits: number): number { + const factor = Math.pow(10, digits); + return Math.round(n * factor) / factor; } + const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => { const yyyymms1 = yyyymms.map(dateStr => { const year = dateStr.slice(0, 4); @@ -126,7 +123,7 @@ export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string return options; }; -export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 +export const selectInftwtAnls = async(aplcnYm:string) => { // 침입수분석 try { const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : ''; const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`); @@ -141,7 +138,7 @@ export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => { const options = arr.map(anlsRslt => ({ label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("HH시"), - val: anlsRslt.predcOilq, + val: roundTo(anlsRslt.predcOilq, 2), })); return options; }; @@ -163,7 +160,7 @@ export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number }[] => { const options = arr.map(anlsRslt => ({ label: anlsRslt.mtrngDt, - val: anlsRslt.oilq, + val: roundTo(anlsRslt.oilq, 2), })); return options; }; @@ -225,7 +222,7 @@ export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; va return options; }; -export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석 +export const selectRdiiAnls = async(aplcnYm:string) => { // 침입수분석 try { const queryString = aplcnYm ? `aplcnYmFrom=${aplcnYm}&aplcnYmTo=${aplcnYm}` : ''; const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`); @@ -240,7 +237,7 @@ export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석 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시"), - lineVal0: anlsRslt.predcOilq, + lineVal0: roundTo(anlsRslt.predcOilq, 2), barVal0: 0 })); return options; @@ -248,7 +245,7 @@ export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => { const options = arr.map(anlsRslt => ({ label: moment(anlsRslt.anlsTm, "YYYYMMDDHHmmss").format("MM-DD HH시"), - val: anlsRslt.minq, + val: roundTo(anlsRslt.minq, 2), })); return options; }; @@ -285,7 +282,7 @@ export const getChartDataRainData = (arr: TRainData[]): { label: string; lineVal const options = arr.map(data => ({ label: moment(data.mtrngDt, "YYYY-MM-DD HH:mm:ss").format("MM-DD HH시"), lineVal0: 0, - barVal0: data.amrf, + barVal0: roundTo(data.amrf,2), })); return options; }; \ No newline at end of file diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx index 345aade49..fe1a1f61e 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx @@ -26,7 +26,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({ chartData1: [], chartData2: [], }); - const [inftwtQty, setInftwtQty] = useState(0); // 침입수량 + const [inftwtQty, setInftwtQty] = useState("0"); // 침입수량 const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기 pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여 @@ -56,7 +56,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { setInftwtAnls(null); // 침입수분석정보 초기화 setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화 setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화 - setInftwtQty(0); // 침입수량 초기화 + setInftwtQty("0"); // 침입수량 초기화 } }, [isModalOpen]); @@ -133,7 +133,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { }); fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회 if (data > 0) { - setInftwtQty(data); + setInftwtQty(data.toLocaleString('ko-KR')); } }); setPopupOpen(false); diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx index 7bd1a2ce2..152e2a19c 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx @@ -31,9 +31,9 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { const [rdiiAnls, setRdiiAnls] = useState(null); // 강우유입수분석정보 const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState(0); // 강우유입수분석 정보 선택시 사용 const [chartData, setChartData] = useState([]); - const [rdiiQty, setRdiiQty] = useState(0); // 강우유입수량 - const [rainTotal, setRainTotal] = useState(0); // 적용강우량 - const [totalVolume, setTotalVolume] = useState(0); // 총체적 m³/mm + const [rdiiQty, setRdiiQty] = useState("0"); // 강우유입수량 + const [rainTotal, setRainTotal] = useState("0"); // 적용강우량 + const [totalVolume, setTotalVolume] = useState("0"); // 총체적 m³/mm const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기 pplMngNo = "L"+pplMngNo; // "L13101003"; @@ -69,9 +69,9 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { setRdiiAnls(null); // 강우유입수분석정보 초기화 setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화 setChartData([]); // 차트 데이터 초기화 - setRdiiQty(0); // 강우유입수량 초기화 - setRainTotal(0); // 적용강우량 초기화 - setTotalVolume(0); // 총체적 m³/mm 초기화 + setRdiiQty("0"); // 강우유입수량 초기화 + setRainTotal("0"); // 적용강우량 초기화 + setTotalVolume("0"); // 총체적 m³/mm 초기화 } }, [isModalOpen]); @@ -114,10 +114,10 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { const rdiiRsltChart = () => { // 그래프 & 팝업 닫기 fetchFilteredData(); fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회 - setRdiiQty(Math.round(data.rdiih*24)); // cmd: m³/d 단위로 변환 + setRdiiQty(Math.round(data.rdiih*24).toLocaleString('ko-KR')); // cmd: m³/d 단위로 변환 if (data.raintotal && data.rainTotal !== 0) { - setRainTotal(data.raintotal); // 총강우량mm - setTotalVolume(Math.round(data.rdiih * data.sustaintime / data.raintotal)); // 총체적 m³/mm + setRainTotal(data.raintotal.toLocaleString('ko-KR')); // 총강우량mm + setTotalVolume(Math.round(data.rdiih * data.sustaintime / data.raintotal).toLocaleString('ko-KR')); // 총체적 m³/mm } }); setPopupOpen(false);