cm: 오수관로 우수관로 초기화

apps/cm/src/pages/dashboard/api/sn-service.ts

@@ -13,44 +13,44 @@ export type SnStateActions = {
 };
 export type SnStore = SnState & SnStateActions;
 
+const initialUsePplChartData: OldPplChartData={  
+    "labels": ["금강","한강","낙동강", "영산강"],
+    "datasets": [
+        {
+            "label": "기타",
+            "data": [1966,15480,6957,1936],
+            "backgroundColor": "rgba(255, 178, 150, 0.9)"
+        },
+        {
+            "label": "오수관로",
+            "data": [8074,15879,16337,5671],
+            "backgroundColor": "rgba(180, 240, 190, 0.95)"
+        },
+        {
+            "label": "우수관로",
+            "data": [4838,12893,10492,4281],
+            "backgroundColor": "rgba(170, 210, 245, 0.95)"
+        }
+    ]
+};
 const initialOldPplChartData: OldPplChartData={     
-  labels: [
-        "금강",
-        "한강",
-        "낙동강",
-        "영산강"
-    ],
+  labels: ["금강","한강","낙동강","영산강"],
     datasets: [
         {
             label: "20-25년",
-            data: [
-                1140,
-                3181,
-                3100,
-                1662
-            ],
+            data: [ 1140,3181,3100,1662],
             backgroundColor: "#3B82F6",
             borderRadius: 4
         },
         {
             label: "25-30년",
-            data: [
-                1391,
-                3615,
-                1814,
-                1411
-            ],
+            data: [1391, 3615, 1814, 1411],
             backgroundColor: "#EF4444",
             borderRadius: 4
         },
         {
             label: "30년이상",
-            data: [
-                2014,
-                10303,
-                9831,
-                2000
-            ],
+            data: [ 2014, 10303,9831,2000],
             backgroundColor: "#F87171",
             borderRadius: 4
         }
@@ -64,6 +64,10 @@ export const useOldPplStore = create<OldPplStoreState>((set) => ({
   chartData: initialOldPplChartData,
   setChartData: (chartData) => set(() => ({ chartData })),
 }));
+export const useUsePplStore = create<OldPplStoreState>((set) => ({
+  chartData: initialUsePplChartData,
+  setChartData: (chartData) => set(() => ({ chartData })),
+}));
 
 export const initailMapOldPplData: mapPplOldType = {
     colTitle:  {totalLen: "총길이",pplLen2025: "20~25년",pplLen2530: "25~30년",pplLen30  : "30년 이상" }, //헤더 영역
@@ -115,6 +119,7 @@ export function transformChartDataToMapData(chartData: OldPplChartData): mapPplO
 }
 
 
+
 export class SewerageApiService implements SewerageService {
   // 기간별 관로 총길이
   public async getPplLength(instlYmdFrom: string, instlYmdTo: string): Promise<PplLengthContent[]> {

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

@@ -16,7 +16,7 @@ import {
 import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent } from "../model/sn-interface";
-import { SewerageApi } from "../api/sn-service";
+import { SewerageApi,useUsePplStore } from "../api/sn-service";
 
 interface ChartDataSet {
   label: string;
@@ -31,10 +31,11 @@ export default function SnPplStatus() {
   const [sewageData, setSewageData] = useState<PplLengthContent[]>([]);
   const [stormwaterData, setStormwaterData] = useState<PplLengthContent[]>([]);
   const [totalData, setTotalData] = useState<PplLengthContent[]>([]);
-  const [chartData, setChartData] = useState<{
-    labels: string[];
-    datasets: ChartDataSet[];
-  }>({ labels: [], datasets: [] });
+  // const [chartData, setChartData] = useState<{
+  //   labels: string[];
+  //   datasets: ChartDataSet[];
+  // }>({ labels: [], datasets: [] });
+  const {chartData, setChartData}  = useUsePplStore();
 
   useEffect(() => {
     const ymdFrom = "19010101";
@@ -65,7 +66,7 @@ export default function SnPplStatus() {
   
   // 데이터가 변경될 때마다 차트를 다시 계산
   useEffect(() => {
-    // 오수관 또는 우수관 데이터가 없으면 차트를 그리지 않음
+    // 오수관 우수관 두 데이터 모두 없으면 차트를 그리지 않음
     if (sewageData.length === 0 && stormwaterData.length === 0) return;
 
     const allZones = new Set([
@@ -133,6 +134,7 @@ export default function SnPplStatus() {
   const totals = chartData.labels.map((_, i) =>
     chartData.datasets.reduce((s, ds) => s + (ds.data[i] as number), 0)
   );
+console.log(chartData);
 
   const options: ChartOptions<"bar"> = {
     responsive: true,