실적현황 차트 진행중

apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx

@@ -5,7 +5,7 @@ import { btnClass } from "@/app/store/common/code";
 import type { FcPrfType, PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
 import type { prfmncType } from "@/app/store/prfmncSttn/pbnstPrfmncSttn/headList";
 import { yearOptions } from "@/components/lib/func/commom";
-import { ContentsDiv, Title, SearchBaseForm, SelectBox, SearchInput, UiTable, type ReturnType, } from "@common/business_components";
+import { ContentsDiv, Title, SearchBaseForm, SelectBox, SearchInput, UiTable, type ReturnType, MainChart, type ChartConfig } from "@common/business_components";
 import DoughnutChart from "@common/business_components/ui/chart/DoughnutChart";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Label } from "@common/components/ui";
@@ -15,7 +15,7 @@ import { useEffect, useRef, useState } from "react";
 
 export default function PbnstPrfmncSttn() {
     const { code, tableHeadMaker, pbnstPrfmncSttn, pbnstPrfmncInit, pbnstPrfmncSearch } = useWrStore((state) => state);
-    const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes } = pbnstPrfmncSttn;
+    const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes, rawData } = pbnstPrfmncSttn;
     const [isChHead, setIsChHead] = useState(false);
     const [fromDate, setFromDate] = useState<string>(String(new Date().getFullYear()));
     const [toDate, setToDate] = useState<string>(String(new Date().getFullYear()));
@@ -24,8 +24,18 @@ export default function PbnstPrfmncSttn() {
     const [bdstTable, setbdstTable] = useState<FcPrfType[]>();
     const ref = useRef<ReturnType>({} as ReturnType);
     const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>();
+    const [chartConfig, setChartConfig] = useState<ChartConfig>();
+    
+    useEffect(() => {
+        console.log("ㅇㅇ", rawData)
+        if (rawData) {
+            rawData.forEach((item) => {
+                item.prfList.forEach((element) => {
 
-
+                });
+            })
+        }
+    }, [rawData])
 
     useEffect(() => {
         if (!pbnstPrfmncSttn.isInit) {
@@ -85,7 +95,7 @@ export default function PbnstPrfmncSttn() {
                                         label="시설명"
                                         textValue={swtrmtFcltNm}
                                         setText={(e) => {
-                                            setSwtrmtFcltNm(e)
+                                            setSwtrmtFcltNm(e);
                                         }} />
                                     <SelectBox
                                         className="h-full text-2xl"
@@ -115,7 +125,7 @@ export default function PbnstPrfmncSttn() {
                             excelClick={() => { }}
                             initClick={function (): void { }}
                             btnClass={btnClass}
-                            ref={ref} />
+                            ref={ref} isAdmin={false} />
                     </div>
                 </div>
                 <div className="grid grid-cols-6 gap-4 ">
@@ -141,15 +151,18 @@ export default function PbnstPrfmncSttn() {
                                 selectArray={yearOptions}
                                 value={year}
                                 onSelectValue={(val: string | number) => setYear(String(val))} />
-                                <h1 className="">장내·외 용도별 하수재이용실적 현황(계)</h1>
-                            
+                            <h1 className="">장내·외 용도별 하수재이용실적 현황(계)</h1>
+
                             <div className="flex">
-                                <div className="w-1/3"><DoughnutChart chartConfig={() => { }} chartData={[]} chartTitle={"장내·외 용수 총 실적"}>
-                                </DoughnutChart></div>
-                                <div className="w-1/3"><DoughnutChart chartConfig={() => { }} chartData={[]} chartTitle={"장내용수 실적"}>
-                                </DoughnutChart></div>
-                                <div className="w-1/3"><DoughnutChart chartConfig={() => { }} chartData={[]} chartTitle={"장외용수 실적"}>
-                                </DoughnutChart></div>
+                                <div className="w-1/3">
+                                    <MainChart chartConfig={() => { }} chartData={[]} chartTitle={"장내·외 용수 총 실적"} chartForm={"daughnut"} />
+                                </div>
+                                <div className="w-1/3">\
+                                    <MainChart chartConfig={() => { }} chartData={[]} chartTitle={"장내용수 실적"} chartForm={"daughnut"} />
+                                </div>
+                                <div className="w-1/3">
+                                    <MainChart chartConfig={() => { }} chartData={[]} chartTitle={"장외용수 실적"} chartForm={"daughnut"} />
+                                </div>
                             </div>
                             <h1 className="">장내·외 월별 하수재이용실적 현황</h1>
                         </ListDiv>

apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx

@@ -20,6 +20,7 @@ export type pbnstPrfmncSttnState = {
         pbnstPrfmncRes: PrfType[];
         prfmncRes: any[];
         isInit: boolean;
+        rawData:any[];
     }
 }
 
@@ -31,6 +32,7 @@ export const pbnstPrfmncSttnExport: pbnstPrfmncSttnState = {
         pbnstPrfmncRes: pbnstPrfmncRes,
         prfmncRes: prfmncRes,
         isInit: false,
+        rawData:[]
     }
 }
 
@@ -169,7 +171,8 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
                 ...state,
                 pbnstPrfmncSttn: {
                     ...state.pbnstPrfmncSttn,
-                    prfmncRes:resData
+                    prfmncRes:resData,
+                    rawData:res.data
                 },
             }));
         }