발전시물레이션 차트 list 타입 추가

src/components/simulator/Simulator.jsx

@@ -41,6 +41,7 @@ export default function Simulator() {
 
   // 차트 관련
   const [chartData, setChartData] = useState([])
+
   const data = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     datasets: [
@@ -118,13 +119,30 @@ export default function Simulator() {
   // 파워컨디셔너 조회
   const [pcsInfoList, setPcsInfoList] = useState([])
 
+  // 타입별 list 조회
+  const [hatsudenryouAll, setHatsudenryouAll] = useState([])
+  const [hatsudenryouAllSnow, setHatsudenryouAllSnow] = useState([])
+  const [hatsudenryouPeakcutAll, setHatsudenryouPeakcutAll] = useState([])
+  const [hatsudenryouPeakcutAllSnow, setHatsudenryouPeakcutAllSnow] = useState([])
+
   const fetchObjectDetail = async (objectNo) => {
     const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${plan?.id}`
+
     const resultData = await get({ url: apiUrl })
     if (resultData) {
       setObjectDetail(resultData)
-      if (resultData.frcPwrGnrList) {
+      if (resultData.hatsudenryouAll) {
-        setChartData(resultData.frcPwrGnrList)
+        setHatsudenryouAll(resultData.hatsudenryouAll)
+      }
+      if (resultData.hatsudenryouAllSnow) {
+        setHatsudenryouAllSnow(resultData.hatsudenryouAllSnow)
+      }
+      if (resultData.hatsudenryouPeakcutAll) {
+        setHatsudenryouPeakcutAll(resultData.hatsudenryouPeakcutAll)
+      }
+      if (resultData.hatsudenryouPeakcutAllSnow) {
+        setHatsudenryouPeakcutAllSnow(resultData.hatsudenryouPeakcutAllSnow)
+        setChartData(resultData.hatsudenryouPeakcutAllSnow)
       }
       if (resultData.pcsList) {
         setPcsInfoList(resultData.pcsList)
@@ -148,6 +166,26 @@ export default function Simulator() {
     })
   }
 
+  // 차트 데이터 변경 시, list type 셋팅
+  const [pwrGnrSimType, setPwrGnrSimType] = useState('D')
+  const handleChartChangeData = (type) => {
+    setPwrGnrSimType(type)
+    switch (type) {
+      case 'A':
+        setChartData(hatsudenryouAll)
+        break
+      case 'B':
+        setChartData(hatsudenryouAllSnow)
+        break
+      case 'C':
+        setChartData(hatsudenryouPeakcutAll)
+        break
+      case 'D':
+        setChartData(hatsudenryouPeakcutAllSnow)
+        break
+    }
+  }
+
   return (
     <div className="sub-content estimate">
       <div className="sub-content-inner">
@@ -176,7 +214,7 @@ export default function Simulator() {
               {/* 연간예측발전량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
-                <div className="estimate-name">{objectDetail.anlFrcsGnrt ? convertNumberToPriceDecimal(objectDetail.anlFrcsGnrt) : ''}</div>
+                <div className="estimate-name">{chartData[chartData.length - 1]}</div>
               </div>
             </div>
             <div className="estimate-list-wrap">
@@ -208,6 +246,22 @@ export default function Simulator() {
             <div className="chart-inner">
               <div className="sub-table-box">
                 <div className="chart-box">
+                  {/* chart */}
+                  <div className="select-wrap">
+                    <select
+                      style={{ width: '30%' }}
+                      className="select-light"
+                      defaultValue={`D`}
+                      onChange={(e) => {
+                        handleChartChangeData(e.target.value)
+                      }}
+                    >
+                      <option value={`A`}>積雪考慮なし(ピークカットなし発電量)</option>
+                      <option value={`B`}>積雪考慮なし(ピークカットあり発電量)</option>
+                      <option value={`C`}>積雪考慮あり(ピークカットなし発電量)</option>
+                      <option value={`D`}>積雪考慮あり(ピークカットあり発電量)</option>
+                    </select>
+                  </div>
                   <Bar ref={chartRef} data={data} options={options} />
                 </div>
                 <div className="table-box-title-wrap">
@@ -239,7 +293,7 @@ export default function Simulator() {
                       {chartData.length > 0 ? (
                         <tr>
                           {chartData.map((data) => (
-                            <td key={data}>{convertNumberToPriceDecimal(data)}</td>
+                            <td key={data}>{data}</td>
                           ))}
                         </tr>
                       ) : (