diff --git a/apps/cm/src/pages/dashboard/api/sn-service.ts b/apps/cm/src/pages/dashboard/api/sn-service.ts index a612da51b..ae4355e1e 100644 --- a/apps/cm/src/pages/dashboard/api/sn-service.ts +++ b/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((set) => ({ chartData: initialOldPplChartData, setChartData: (chartData) => set(() => ({ chartData })), })); +export const useUsePplStore = create((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 { diff --git a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx b/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx index 0a378975c..73e08a73a 100644 --- a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx +++ b/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([]); const [stormwaterData, setStormwaterData] = useState([]); const [totalData, setTotalData] = useState([]); - 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,