Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend

apps/cm/src/pages/dashboard/ui/basIn-select.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import {
   Select,
   SelectContent,

apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx

@@ -31,9 +31,9 @@ const FoFcltCntRt: React.FC = () => {
     if (!operFcltStatus) {
       return { facilityCount: 0, operatingRate: 0, chartData: [0, 100] };
     }
-
-    const basinData = operFcltStatus.filter(d => d.rvbsn === selectedBasin);
-    const operatingData = basinData.find(d => d.gubun === 'R');
+    console.log(operFcltStatus);
+    const basinData = operFcltStatus.filter(d => d.rvbsn === selectedBasin); // 선택된 유역의 데이터만 filter
+    const operatingData = basinData.find(d => d.gubun === 'R'); // 선택 유역의 R 데이터만
     const nonOperatingData = basinData.find(d => d.gubun === 'A');
 
     const facilityCount = operatingData?.cnt ?? 0;
@@ -42,11 +42,12 @@ const FoFcltCntRt: React.FC = () => {
     const totalCapacity = operatingCapacity + nonOperatingCapacity;
 
     const operatingRate = totalCapacity > 0 ? Math.round((operatingCapacity / totalCapacity) * 100) : 0;
+    const nonOperatingRate = totalCapacity > 0 ? Math.round((nonOperatingCapacity / totalCapacity) * 100) : 0;
 
     return {
       facilityCount,
       operatingRate,
-      chartData: [operatingCapacity, nonOperatingCapacity],
+      chartData: [operatingRate, nonOperatingRate],
     };
   }, [operFcltStatus, selectedBasin]);
 

apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx

@@ -39,6 +39,7 @@ interface ChartData {
 }
 
 const FoWqltInflEffl: React.FC = () => {
+  const [selectedBasin, setSelectedBasin] = useState<string>("한강");
   const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');
 
   // 데이터 (실제로는 API에서 가져올 데이터)
@@ -53,7 +54,8 @@ const FoWqltInflEffl: React.FC = () => {
   const tabs: WaterQualityType[] = ['BOD', 'TOC', 'SS', 'TP', 'TN'];
 
   // 차트 공통 옵션
-  const getChartOptions = (yAxisLabel: string): ChartOptions<'line'> => ({
+  // const getChartOptions = (yAxisLabel: string): ChartOptions<'line'> => ({
+  const getChartOptions = (): ChartOptions<'line'> => ({
     responsive: true,
     maintainAspectRatio: false,
     interaction: {
@@ -180,7 +182,7 @@ const FoWqltInflEffl: React.FC = () => {
     <div className="card card-border">
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <BasinSelect />
+        <BasinSelect  selectedBasin={selectedBasin} onValueChange={setSelectedBasin}  />
       </div>
       <div className="h-60">
         <div style={{ padding: '4px', height: '100%', display: 'flex', flexDirection: 'column' }}>
@@ -210,12 +212,13 @@ const FoWqltInflEffl: React.FC = () => {
           <div style={{ display: 'flex', flexDirection: 'column',flex: 1, minHeight: 0 }}>
             {/* 유입 차트 */}
             <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>
-              <Line data={inflowChartData} options={getChartOptions('mg/L')} />
+              {/* <Line data={inflowChartData} options={getChartOptions('mg/L')} /> */}
+              <Line data={inflowChartData} options={getChartOptions()} />
             </div>
 
             {/* 발류 차트 */}
             <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>
-              <Line data={effluentChartData} options={getChartOptions('mg/L')} />
+              <Line data={effluentChartData} options={getChartOptions()} />
             </div>
           </div>
         </div>

apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx

@@ -59,7 +59,7 @@ export default function SnOldPpl() {
 
     const createDataset = (label: string, data: PplLengthContent[], color: string) => {
       const dataMap = new Map(data.map(item => [item.zoneNm, item.sumPrlgVl]));
-      console.log(dataMap);
+      // console.log(dataMap);
       return {
         label,
         data: allZones.map(zone => dataMap.get(zone) ?? 0),