npm - @dssp/dkpi - Versions diffs - 1.0.0-alpha.66 → 1.0.0-alpha.68 - Mend

@dssp/dkpi 1.0.0-alpha.66 → 1.0.0-alpha.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.js CHANGED Viewed

@@ -1,3 +1,4 @@
+var KpiRegionPopup_1;
 import { __decorate, __metadata } from "tslib";
 import gql from 'graphql-tag';
 import { LitElement, html, css, nothing } from 'lit';
@@ -7,10 +8,11 @@ import { ScrollbarStyles } from '@operato/styles';
 import '../../../components/kpi-radar-chart.js';
 import '../../../components/kpi-boxplot-chart.js';
 import '../../../components/kpi-trend-chart.js';
-let KpiRegionPopup = class KpiRegionPopup extends LitElement {
+let KpiRegionPopup = KpiRegionPopup_1 = class KpiRegionPopup extends LitElement {
     constructor() {
         super(...arguments);
         this.selectedRegion = null;
+        this.geoGroup = null; // 시군구 geo_group 코드 (있으면 시군구 쿼리 사용)
         this.selectedCategory = '전체 KPI';
         this.selectedChartType = 'boxplot';
         this.selectedPeriod = '월';
@@ -43,28 +45,58 @@ let KpiRegionPopup = class KpiRegionPopup extends LitElement {
         if (!this.selectedRegion)
             return;
         try {
-            const response = await client.query({
-                query: gql `
-          query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {
-            kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
-              kpiName
-              minVal
-              q1Val
-              medVal
-              q3Val
-              maxVal
-              avgVal
-              projectCount
+            let regionKpiStats;
+            if (this.geoGroup) {
+                // 시군구 모드: geo_group 코드로 조회
+                const response = await client.query({
+                    query: gql `
+            query GetSigunguKpiStats($geoGroup: String!, $startYearMonth: String, $endYearMonth: String) {
+              kpiYValueStatsByGeoGroup(geoGroup: $geoGroup, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+                kpiName
+                minVal
+                q1Val
+                medVal
+                q3Val
+                maxVal
+                avgVal
+                projectCount
+              }
             }
-          }
-        `,
-                variables: {
-                    metroArea: this.selectedRegion,
-                    startYearMonth: this.startYearMonth,
-                    endYearMonth: this.endYearMonth
-                }
-            });
-            this.regionKpiStats = response.data.kpiYValueStatsByMetroArea || [];
+          `,
+                    variables: {
+                        geoGroup: this.geoGroup,
+                        startYearMonth: this.startYearMonth,
+                        endYearMonth: this.endYearMonth
+                    }
+                });
+                regionKpiStats = response.data.kpiYValueStatsByGeoGroup || [];
+            }
+            else {
+                // 광역 모드: 광역시도 이름으로 조회
+                const response = await client.query({
+                    query: gql `
+            query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {
+              kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+                kpiName
+                minVal
+                q1Val
+                medVal
+                q3Val
+                maxVal
+                avgVal
+                projectCount
+              }
+            }
+          `,
+                    variables: {
+                        metroArea: this.selectedRegion,
+                        startYearMonth: this.startYearMonth,
+                        endYearMonth: this.endYearMonth
+                    }
+                });
+                regionKpiStats = response.data.kpiYValueStatsByMetroArea || [];
+            }
+            this.regionKpiStats = regionKpiStats;
             console.log('Region KPI Stats:', this.regionKpiStats);
             this.generateChartData();
         }
@@ -144,9 +176,12 @@ let KpiRegionPopup = class KpiRegionPopup extends LitElement {
     generateTrendData() {
         if (!this.selectedRegion)
             return;
-        // 선택된 지역의 월별 추이 데이터 추출
+        // 시군구 모드인 경우 소속 광역시도의 추이 데이터 사용
+        const trendRegion = this.geoGroup
+            ? KpiRegionPopup_1.GEO_TO_METRO[this.geoGroup] || this.selectedRegion
+            : this.selectedRegion;
         const regionTrendData = this.monthlyTrendData
-            .filter(d => d.geoGroup === this.selectedRegion)
+            .filter(d => d.geoGroup === trendRegion)
             .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
         this.trendData = regionTrendData.map(d => {
             const value = Math.round(d.avgVal * 100); // 20배 스케일
@@ -384,10 +419,34 @@ KpiRegionPopup.styles = [
       }
     `
 ];
+// geo_group → 광역시도 매핑 (시군구 모드에서 추이 데이터 조회용)
+KpiRegionPopup.GEO_TO_METRO = {
+    '01': '서울특별시', '02': '서울특별시', '03': '서울특별시', '04': '서울특별시',
+    '05': '서울특별시', '06': '서울특별시', '07': '서울특별시', '08': '서울특별시',
+    '10': '경기도', '11': '경기도', '12': '경기도', '13': '경기도', '14': '경기도',
+    '15': '경기도', '16': '경기도', '17': '경기도', '18': '경기도',
+    '21': '인천광역시', '22': '인천광역시', '23': '인천광역시',
+    '24': '강원도', '25': '강원도', '26': '강원도', '33': '강원도',
+    '27': '충청북도', '28': '충청북도', '29': '충청북도',
+    '30': '세종특별자치시', '31': '충청남도', '32': '충청남도',
+    '34': '대전광역시', '35': '대전광역시',
+    '36': '경상북도', '37': '경상북도', '38': '경상북도', '39': '경상북도', '40': '경상북도',
+    '41': '대구광역시', '42': '대구광역시', '43': '대구광역시',
+    '44': '울산광역시', '45': '울산광역시',
+    '46': '부산광역시', '47': '부산광역시', '48': '부산광역시', '49': '부산광역시',
+    '50': '경상남도', '51': '경상남도', '52': '경상남도', '53': '경상남도',
+    '54': '전라북도', '55': '전라북도', '56': '전라북도',
+    '57': '전라남도', '58': '전라남도', '59': '전라남도',
+    '61': '광주광역시', '62': '광주광역시', '63': '제주특별자치도'
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], KpiRegionPopup.prototype, "selectedRegion", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiRegionPopup.prototype, "geoGroup", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -432,7 +491,7 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], KpiRegionPopup.prototype, "regionKpiStats", void 0);
-KpiRegionPopup = __decorate([
+KpiRegionPopup = KpiRegionPopup_1 = __decorate([
     customElement('kpi-region-popup')
 ], KpiRegionPopup);
 export { KpiRegionPopup };

package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi-region-popup.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-region-popup.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,0CAA0C,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAGxC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAoIuB,mBAAc,GAAkB,IAAI,CAAA;QACpC,qBAAgB,GAAG,QAAQ,CAAA;QAC3B,sBAAiB,GAAG,SAAS,CAAA;QAC7B,mBAAc,GAAG,GAAG,CAAA;QACpB,mBAAc,GAAG,EAAE,CAAA,CAAC,aAAa;QACjC,iBAAY,GAAG,EAAE,CAAA,CAAC,aAAa;QAChC,qBAAgB,GAAU,EAAE,CAAA,CAAC,sBAAsB;QACnD,kBAAa,GAAU,EAAE,CAAA,CAAC,kBAAkB;QAEtD,cAAS,GAAU,EAAE,CAAA;QACrB,oBAAe,GAAa,EAAE,CAAA;QAC9B,cAAS,GAAsD,EAAE,CAAA;QACjE,mBAAc,GAAU,EAAE,CAAA;IAqQ7C,CAAC;IAnQC,OAAO,CAAC,iBAAmC;QACzC,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACnE,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAED,wDAAwD;QACxD,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC3F,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAED,0BAA0B;QAC1B,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;YACrF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAM;QAEhC,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;SAaT;gBACD,SAAS,EAAE;oBACT,SAAS,EAAE,IAAI,CAAC,cAAc;oBAC9B,cAAc,EAAE,IAAI,CAAC,cAAc;oBACnC,YAAY,EAAE,IAAI,CAAC,YAAY;iBAChC;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,yBAAyB,IAAI,EAAE,CAAA;YACnE,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YACrD,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,cAAc,GAAG,EAAE,CAAA;YACxB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,wBAAwB;QACxB,MAAM,eAAe,GAA2B;YAC9C,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,WAAW,EAAE,KAAK;SACnB,CAAA;QAED,2DAA2D;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,EAAE,CAAC;YACvC,gCAAgC;YAChC,MAAM,IAAI,GAA4D,EAAE,CAAA;YACxE,MAAM,UAAU,GAAa,EAAE,CAAA;YAE/B,UAAU;YACV,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACnC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC3B,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,cAAc;YACd,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAChC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,MAAM;oBACX,QAAQ;oBACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;iBACrC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,YAAY;YACZ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI;oBAChC,QAAQ;oBACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;iBACrC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;YACjG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACvB,CAAC;aAAM,CAAC;YACN,eAAe;YACf,MAAM,IAAI,GASL,EAAE,CAAA;YACP,MAAM,UAAU,GAAa,EAAE,CAAA;YAE/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACnC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC3B,CAAC;gBACD,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,QAAQ;oBACb,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG;oBACtB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG;oBACtB,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;oBACpB,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG;oBACpB,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG;oBACzB,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG;oBACvB,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG;iBACzB,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;YACjG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACvB,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAM;QAEhC,uBAAuB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB;aAC1C,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,CAAC;aAC/C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QAEzD,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,CAAA,CAAC,UAAU;YACnD,OAAO;gBACL,IAAI,EAAE,CAAC,CAAC,SAAS,EAAE,aAAa;gBAChC,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACnE,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,iBAAiB,CAAC,IAAY;QACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;QAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,cAAc;6CACT,IAAI,CAAC,OAAO;;;;;;;;qCAQpB,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAClE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;;;;;qCAKzB,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAChE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;;;;;;cAM9C,IAAI,CAAC,iBAAiB,KAAK,SAAS;YACpC,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;8BACZ,IAAI,CAAC,eAAe;gCAClB,OAAO;;iBAEtB;YACH,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;kCACR,IAAI,CAAC,eAAe;gCACtB,OAAO;;iBAEtB;;;;;;;;;sBASK,IAAI,CAAC,SAAS;2BACT,SAAS;6BACP,CAAC;4BACF,KAAK;6BACJ,CAAC;;;;;;;;;;;;;kBAaZ,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAA;;sEAEiC,IAAI,CAAC,IAAI;;0BAErD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;8CAGD,IAAI,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;mBAG/F,CACF;;;;;;KAMZ,CAAA;IACH,CAAC;;AAnZM,qBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8HF;CACF,AAjIY,CAiIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAqC;AACpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAkB;AAClB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;wDAA6B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;qDAA0B;AAEnC;IAAhB,KAAK,EAAE;;iDAA8B;AACrB;IAAhB,KAAK,EAAE;;uDAAuC;AAC9B;IAAhB,KAAK,EAAE;;iDAA0E;AACjE;IAAhB,KAAK,EAAE;;sDAAmC;AAhJhC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqZ1B","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport '../../../components/kpi-radar-chart.js'\nimport '../../../components/kpi-boxplot-chart.js'\nimport '../../../components/kpi-trend-chart.js'\n\n@customElement('kpi-region-popup')\nexport class KpiRegionPopup extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n position: absolute;\n top: 0;\n left: 402px;\n width: 400px;\n height: 100%;\n background: #fff;\n border-right: 1px solid #e0e0e0;\n z-index: 1000;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n }\n .popup-content {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n }\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fff;\n height: 70px;\n box-sizing: border-box;\n }\n .popup-title {\n font-size: 1.2rem;\n font-weight: bold;\n color: #333;\n }\n .popup-close {\n width: 32px;\n height: 32px;\n border: none;\n background: #fff;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n color: #666;\n transition: all 0.2s;\n }\n .popup-close:hover {\n background: #e9ecef;\n color: #333;\n }\n .sub-title {\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 16px;\n color: #495057;\n }\n .chart-section {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 20px;\n }\n .chart-toggle {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n }\n .toggle-button {\n padding: 8px 16px;\n border: 1px solid #ced4da;\n background: #fff;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: all 0.2s;\n }\n .toggle-button.active {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n .chart-container {\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n }\n .period-selector {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n }\n .period-button {\n padding: 6px 12px;\n border: 1px solid #ced4da;\n background: #fff;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: all 0.2s;\n }\n .period-button.active {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n .date-range-selector {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n }\n .date-select {\n padding: 6px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n background: white;\n font-size: 0.9rem;\n }\n `\n ]\n\n @property({ type: String }) selectedRegion: string \| null = null\n @property({ type: String }) selectedCategory = '전체 KPI'\n @property({ type: String }) selectedChartType = 'boxplot'\n @property({ type: String }) selectedPeriod = '월'\n @property({ type: String }) startYearMonth = '' // YYYY-MM 형식\n @property({ type: String }) endYearMonth = '' // YYYY-MM 형식\n @property({ type: Array }) monthlyTrendData: any[] = [] // 부모에서 전달받은 월별 추이 데이터\n @property({ type: Array }) totalKpiStats: any[] = [] // 전체 KPI 통계 (비교용)\n\n @state() private chartData: any[] = []\n @state() private chartCategories: string[] = []\n @state() private trendData: { date: string; value: number; color?: string }[] = []\n @state() private regionKpiStats: any[] = []\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('selectedRegion') && this.selectedRegion) {\n this.fetchRegionKpiStats()\n this.generateTrendData()\n }\n\n // selectedCategory 또는 monthlyTrendData가 변경되면 추이 데이터 재생성\n if (changedProperties.has('selectedCategory') \|\| changedProperties.has('monthlyTrendData')) {\n this.generateTrendData()\n }\n\n // 기간이 변경되면 차트 데이터 다시 가져오기\n if (changedProperties.has('startYearMonth') \|\| changedProperties.has('endYearMonth')) {\n if (this.selectedRegion) {\n this.fetchRegionKpiStats()\n }\n }\n }\n\n async fetchRegionKpiStats() {\n if (!this.selectedRegion) return\n\n try {\n const response = await client.query({\n query: gql`\n query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {\n kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {\n kpiName\n minVal\n q1Val\n medVal\n q3Val\n maxVal\n avgVal\n projectCount\n }\n }\n `,\n variables: {\n metroArea: this.selectedRegion,\n startYearMonth: this.startYearMonth,\n endYearMonth: this.endYearMonth\n }\n })\n\n this.regionKpiStats = response.data.kpiYValueStatsByMetroArea \|\| []\n console.log('Region KPI Stats:', this.regionKpiStats)\n this.generateChartData()\n } catch (error) {\n console.error('Failed to fetch region KPI stats:', error)\n this.regionKpiStats = []\n this.generateChartData()\n }\n }\n\n private generateChartData() {\n // KPI 이름을 카테고리로 매핑 및 축약\n const categoryMapping: Record<string, string> = {\n 'Y1. 일정성과': '일정',\n 'Y2. 비용성과': '비용',\n 'Y3. 품질성과': '품질',\n 'Y4. 안전성과': '안전',\n 'Y5. 환경성과': '환경',\n 'Y6. 생산성성과': '생산성'\n }\n\n // 레이더 차트와 박스플롯은 항상 전체 Y-level KPI 표시 (selectedCategory 무시)\n if (this.selectedChartType === 'radar') {\n // 레이더 차트용 데이터 생성 (전체평균 + 지역 비교)\n const data: Array<{ org: string; category: string; value: number }> = []\n const categories: string[] = []\n\n // 카테고리 수집\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n if (!categories.includes(category)) {\n categories.push(category)\n }\n })\n\n // 전체평균 데이터 추가\n this.totalKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n data.push({\n org: '전체평균',\n category,\n value: Math.round(stat.avgVal * 100)\n })\n })\n\n // 지역 데이터 추가\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n data.push({\n org: this.selectedRegion \|\| '지역',\n category,\n value: Math.round(stat.avgVal * 100)\n })\n })\n\n this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n this.chartData = data\n } else {\n // 박스플롯용 데이터 생성\n const data: Array<{\n org: string\n min: number\n max: number\n q1: number\n q3: number\n median: number\n mean: number\n value: number\n }> = []\n const categories: string[] = []\n\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n if (!categories.includes(category)) {\n categories.push(category)\n }\n data.push({\n org: category,\n min: stat.minVal * 100,\n max: stat.maxVal * 100,\n q1: stat.q1Val * 100,\n q3: stat.q3Val * 100,\n median: stat.medVal * 100,\n mean: stat.avgVal * 100,\n value: stat.avgVal * 100\n })\n })\n\n this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n this.chartData = data\n }\n }\n\n private generateTrendData() {\n if (!this.selectedRegion) return\n\n // 선택된 지역의 월별 추이 데이터 추출\n const regionTrendData = this.monthlyTrendData\n .filter(d => d.geoGroup === this.selectedRegion)\n .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth))\n\n this.trendData = regionTrendData.map(d => {\n const value = Math.round(d.avgVal * 100) // 20배 스케일\n return {\n date: d.yearMonth, // YYYY-MM 형식\n value: value,\n color: value > 60 ? '#4caf50' : value > 40 ? '#ff9800' : '#f44336'\n }\n })\n }\n\n private onClose() {\n this.dispatchEvent(\n new CustomEvent('popup-close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onChartTypeChange(type: string) {\n this.selectedChartType = type\n this.generateChartData()\n }\n\n render() {\n if (!this.selectedRegion) {\n return nothing\n }\n\n return html`\n <div class=\"popup-header\">\n <div class=\"popup-title\">${this.selectedRegion} KPI</div>\n <button class=\"popup-close\" @click=${this.onClose}>×</button>\n </div>\n <div class=\"popup-content\">\n <!-- 종합 성과 -->\n <div class=\"chart-section\">\n <div class=\"sub-title\">종합 성과</div>\n <div class=\"chart-toggle\">\n <button\n class=\"toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}\"\n @click=${() => this.onChartTypeChange('boxplot')}\n >\n 박스플롯\n </button>\n <button\n class=\"toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}\"\n @click=${() => this.onChartTypeChange('radar')}\n >\n 레이더차트\n </button>\n </div>\n <div class=\"chart-container\">\n ${this.selectedChartType === 'boxplot'\n ? html`\n <sv-kpi-boxplot-chart\n .data=${this.chartData}\n .groups=${this.chartCategories}\n .valueKey=${'value'}\n ></sv-kpi-boxplot-chart>\n `\n : html`\n <sv-kpi-radar-chart\n .data=${this.chartData}\n .categories=${this.chartCategories}\n .valueKey=${'value'}\n ></sv-kpi-radar-chart>\n `}\n </div>\n </div>\n\n <!-- 기간별 성과 추이 -->\n <div class=\"trend-section\">\n <div class=\"sub-title\">기간별 성과 추이</div>\n <div class=\"trend-chart-container\" style=\"height: 200px; margin-bottom: 16px;\">\n <sv-kpi-trend-chart\n .data=${this.trendData}\n .lineColor=${'#2196f3'}\n .strokeWidth=${2}\n .showPoints=${false}\n .pointRadius=${4}\n ></sv-kpi-trend-chart>\n </div>\n <div class=\"trend-table\">\n <table style=\"width: 100%; border-collapse: collapse; font-size: 0.85rem;\">\n <thead style=\"position: sticky; top: 0; background: white; z-index: 1;\">\n <tr style=\"border-bottom: 2px solid #f1f3f4; background-color: #f8f9fa;\">\n <th style=\"padding: 8px; text-align: left; font-weight: 600;\">날짜</th>\n <th style=\"padding: 8px; text-align: right; font-weight: 600;\">성과</th>\n <th style=\"padding: 8px; text-align: center; font-weight: 600;\">추이</th>\n </tr>\n </thead>\n <tbody>\n ${this.trendData.map(\n (item: any) => html`\n <tr style=\"border-bottom: 1px solid #f1f3f4;\">\n <td style=\"padding: 8px; font-size: 0.85rem;\">${item.date}</td>\n <td style=\"padding: 8px; text-align: right; font-size: 0.85rem; font-weight: 600;\">\n ${item.value.toFixed(1)}\n </td>\n <td style=\"padding: 8px; text-align: center; font-size: 0.85rem;\">\n <span style=\"color: ${item.color};\"> ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'} </span>\n </td>\n </tr>\n `\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"kpi-region-popup.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-region-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport '../../../components/kpi-radar-chart.js'\nimport '../../../components/kpi-boxplot-chart.js'\nimport '../../../components/kpi-trend-chart.js'\n\n@customElement('kpi-region-popup')\nexport class KpiRegionPopup extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n position: absolute;\n top: 0;\n left: 402px;\n width: 400px;\n height: 100%;\n background: #fff;\n border-right: 1px solid #e0e0e0;\n z-index: 1000;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n }\n .popup-content {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n }\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fff;\n height: 70px;\n box-sizing: border-box;\n }\n .popup-title {\n font-size: 1.2rem;\n font-weight: bold;\n color: #333;\n }\n .popup-close {\n width: 32px;\n height: 32px;\n border: none;\n background: #fff;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n color: #666;\n transition: all 0.2s;\n }\n .popup-close:hover {\n background: #e9ecef;\n color: #333;\n }\n .sub-title {\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 16px;\n color: #495057;\n }\n .chart-section {\n background: #f8f9fa;\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 20px;\n }\n .chart-toggle {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n }\n .toggle-button {\n padding: 8px 16px;\n border: 1px solid #ced4da;\n background: #fff;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: all 0.2s;\n }\n .toggle-button.active {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n .chart-container {\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n }\n .period-selector {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n }\n .period-button {\n padding: 6px 12px;\n border: 1px solid #ced4da;\n background: #fff;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: all 0.2s;\n }\n .period-button.active {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n .date-range-selector {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n }\n .date-select {\n padding: 6px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n background: white;\n font-size: 0.9rem;\n }\n `\n ]\n\n @property({ type: String }) selectedRegion: string \| null = null\n @property({ type: String }) geoGroup: string \| null = null // 시군구 geo_group 코드 (있으면 시군구 쿼리 사용)\n @property({ type: String }) selectedCategory = '전체 KPI'\n @property({ type: String }) selectedChartType = 'boxplot'\n @property({ type: String }) selectedPeriod = '월'\n @property({ type: String }) startYearMonth = '' // YYYY-MM 형식\n @property({ type: String }) endYearMonth = '' // YYYY-MM 형식\n @property({ type: Array }) monthlyTrendData: any[] = [] // 부모에서 전달받은 월별 추이 데이터\n @property({ type: Array }) totalKpiStats: any[] = [] // 전체 KPI 통계 (비교용)\n\n @state() private chartData: any[] = []\n @state() private chartCategories: string[] = []\n @state() private trendData: { date: string; value: number; color?: string }[] = []\n @state() private regionKpiStats: any[] = []\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('selectedRegion') && this.selectedRegion) {\n this.fetchRegionKpiStats()\n this.generateTrendData()\n }\n\n // selectedCategory 또는 monthlyTrendData가 변경되면 추이 데이터 재생성\n if (changedProperties.has('selectedCategory') \|\| changedProperties.has('monthlyTrendData')) {\n this.generateTrendData()\n }\n\n // 기간이 변경되면 차트 데이터 다시 가져오기\n if (changedProperties.has('startYearMonth') \|\| changedProperties.has('endYearMonth')) {\n if (this.selectedRegion) {\n this.fetchRegionKpiStats()\n }\n }\n }\n\n async fetchRegionKpiStats() {\n if (!this.selectedRegion) return\n\n try {\n let regionKpiStats: any[]\n\n if (this.geoGroup) {\n // 시군구 모드: geo_group 코드로 조회\n const response = await client.query({\n query: gql`\n query GetSigunguKpiStats($geoGroup: String!, $startYearMonth: String, $endYearMonth: String) {\n kpiYValueStatsByGeoGroup(geoGroup: $geoGroup, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {\n kpiName\n minVal\n q1Val\n medVal\n q3Val\n maxVal\n avgVal\n projectCount\n }\n }\n `,\n variables: {\n geoGroup: this.geoGroup,\n startYearMonth: this.startYearMonth,\n endYearMonth: this.endYearMonth\n }\n })\n regionKpiStats = response.data.kpiYValueStatsByGeoGroup \|\| []\n } else {\n // 광역 모드: 광역시도 이름으로 조회\n const response = await client.query({\n query: gql`\n query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {\n kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {\n kpiName\n minVal\n q1Val\n medVal\n q3Val\n maxVal\n avgVal\n projectCount\n }\n }\n `,\n variables: {\n metroArea: this.selectedRegion,\n startYearMonth: this.startYearMonth,\n endYearMonth: this.endYearMonth\n }\n })\n regionKpiStats = response.data.kpiYValueStatsByMetroArea \|\| []\n }\n\n this.regionKpiStats = regionKpiStats\n console.log('Region KPI Stats:', this.regionKpiStats)\n this.generateChartData()\n } catch (error) {\n console.error('Failed to fetch region KPI stats:', error)\n this.regionKpiStats = []\n this.generateChartData()\n }\n }\n\n private generateChartData() {\n // KPI 이름을 카테고리로 매핑 및 축약\n const categoryMapping: Record<string, string> = {\n 'Y1. 일정성과': '일정',\n 'Y2. 비용성과': '비용',\n 'Y3. 품질성과': '품질',\n 'Y4. 안전성과': '안전',\n 'Y5. 환경성과': '환경',\n 'Y6. 생산성성과': '생산성'\n }\n\n // 레이더 차트와 박스플롯은 항상 전체 Y-level KPI 표시 (selectedCategory 무시)\n if (this.selectedChartType === 'radar') {\n // 레이더 차트용 데이터 생성 (전체평균 + 지역 비교)\n const data: Array<{ org: string; category: string; value: number }> = []\n const categories: string[] = []\n\n // 카테고리 수집\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n if (!categories.includes(category)) {\n categories.push(category)\n }\n })\n\n // 전체평균 데이터 추가\n this.totalKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n data.push({\n org: '전체평균',\n category,\n value: Math.round(stat.avgVal * 100)\n })\n })\n\n // 지역 데이터 추가\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n data.push({\n org: this.selectedRegion \|\| '지역',\n category,\n value: Math.round(stat.avgVal * 100)\n })\n })\n\n this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n this.chartData = data\n } else {\n // 박스플롯용 데이터 생성\n const data: Array<{\n org: string\n min: number\n max: number\n q1: number\n q3: number\n median: number\n mean: number\n value: number\n }> = []\n const categories: string[] = []\n\n this.regionKpiStats.forEach(stat => {\n const category = categoryMapping[stat.kpiName] \|\| stat.kpiName\n if (!categories.includes(category)) {\n categories.push(category)\n }\n data.push({\n org: category,\n min: stat.minVal * 100,\n max: stat.maxVal * 100,\n q1: stat.q1Val * 100,\n q3: stat.q3Val * 100,\n median: stat.medVal * 100,\n mean: stat.avgVal * 100,\n value: stat.avgVal * 100\n })\n })\n\n this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n this.chartData = data\n }\n }\n\n // geo_group → 광역시도 매핑 (시군구 모드에서 추이 데이터 조회용)\n private static readonly GEO_TO_METRO: Record<string, string> = {\n '01':'서울특별시','02':'서울특별시','03':'서울특별시','04':'서울특별시',\n '05':'서울특별시','06':'서울특별시','07':'서울특별시','08':'서울특별시',\n '10':'경기도','11':'경기도','12':'경기도','13':'경기도','14':'경기도',\n '15':'경기도','16':'경기도','17':'경기도','18':'경기도',\n '21':'인천광역시','22':'인천광역시','23':'인천광역시',\n '24':'강원도','25':'강원도','26':'강원도','33':'강원도',\n '27':'충청북도','28':'충청북도','29':'충청북도',\n '30':'세종특별자치시','31':'충청남도','32':'충청남도',\n '34':'대전광역시','35':'대전광역시',\n '36':'경상북도','37':'경상북도','38':'경상북도','39':'경상북도','40':'경상북도',\n '41':'대구광역시','42':'대구광역시','43':'대구광역시',\n '44':'울산광역시','45':'울산광역시',\n '46':'부산광역시','47':'부산광역시','48':'부산광역시','49':'부산광역시',\n '50':'경상남도','51':'경상남도','52':'경상남도','53':'경상남도',\n '54':'전라북도','55':'전라북도','56':'전라북도',\n '57':'전라남도','58':'전라남도','59':'전라남도',\n '61':'광주광역시','62':'광주광역시','63':'제주특별자치도'\n }\n\n private generateTrendData() {\n if (!this.selectedRegion) return\n\n // 시군구 모드인 경우 소속 광역시도의 추이 데이터 사용\n const trendRegion = this.geoGroup\n ? KpiRegionPopup.GEO_TO_METRO[this.geoGroup] \|\| this.selectedRegion\n : this.selectedRegion\n\n const regionTrendData = this.monthlyTrendData\n .filter(d => d.geoGroup === trendRegion)\n .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth))\n\n this.trendData = regionTrendData.map(d => {\n const value = Math.round(d.avgVal * 100) // 20배 스케일\n return {\n date: d.yearMonth, // YYYY-MM 형식\n value: value,\n color: value > 60 ? '#4caf50' : value > 40 ? '#ff9800' : '#f44336'\n }\n })\n }\n\n private onClose() {\n this.dispatchEvent(\n new CustomEvent('popup-close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onChartTypeChange(type: string) {\n this.selectedChartType = type\n this.generateChartData()\n }\n\n render() {\n if (!this.selectedRegion) {\n return nothing\n }\n\n return html`\n <div class=\"popup-header\">\n <div class=\"popup-title\">${this.selectedRegion} KPI</div>\n <button class=\"popup-close\" @click=${this.onClose}>×</button>\n </div>\n <div class=\"popup-content\">\n <!-- 종합 성과 -->\n <div class=\"chart-section\">\n <div class=\"sub-title\">종합 성과</div>\n <div class=\"chart-toggle\">\n <button\n class=\"toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}\"\n @click=${() => this.onChartTypeChange('boxplot')}\n >\n 박스플롯\n </button>\n <button\n class=\"toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}\"\n @click=${() => this.onChartTypeChange('radar')}\n >\n 레이더차트\n </button>\n </div>\n <div class=\"chart-container\">\n ${this.selectedChartType === 'boxplot'\n ? html`\n <sv-kpi-boxplot-chart\n .data=${this.chartData}\n .groups=${this.chartCategories}\n .valueKey=${'value'}\n ></sv-kpi-boxplot-chart>\n `\n : html`\n <sv-kpi-radar-chart\n .data=${this.chartData}\n .categories=${this.chartCategories}\n .valueKey=${'value'}\n ></sv-kpi-radar-chart>\n `}\n </div>\n </div>\n\n <!-- 기간별 성과 추이 -->\n <div class=\"trend-section\">\n <div class=\"sub-title\">기간별 성과 추이</div>\n <div class=\"trend-chart-container\" style=\"height: 200px; margin-bottom: 16px;\">\n <sv-kpi-trend-chart\n .data=${this.trendData}\n .lineColor=${'#2196f3'}\n .strokeWidth=${2}\n .showPoints=${false}\n .pointRadius=${4}\n ></sv-kpi-trend-chart>\n </div>\n <div class=\"trend-table\">\n <table style=\"width: 100%; border-collapse: collapse; font-size: 0.85rem;\">\n <thead style=\"position: sticky; top: 0; background: white; z-index: 1;\">\n <tr style=\"border-bottom: 2px solid #f1f3f4; background-color: #f8f9fa;\">\n <th style=\"padding: 8px; text-align: left; font-weight: 600;\">날짜</th>\n <th style=\"padding: 8px; text-align: right; font-weight: 600;\">성과</th>\n <th style=\"padding: 8px; text-align: center; font-weight: 600;\">추이</th>\n </tr>\n </thead>\n <tbody>\n ${this.trendData.map(\n (item: any) => html`\n <tr style=\"border-bottom: 1px solid #f1f3f4;\">\n <td style=\"padding: 8px; font-size: 0.85rem;\">${item.date}</td>\n <td style=\"padding: 8px; text-align: right; font-size: 0.85rem; font-weight: 600;\">\n ${item.value.toFixed(1)}\n </td>\n <td style=\"padding: 8px; text-align: center; font-size: 0.85rem;\">\n <span style=\"color: ${item.color};\"> ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'} </span>\n </td>\n </tr>\n `\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n `\n }\n}\n"]}

package/dist-client/pages/kpi-dashboard/kpi-dashboard-map.d.ts CHANGED Viewed

@@ -10,6 +10,9 @@ export declare class KpiDashboardMapPage extends PageView {
     endYearMonth: string;
     selectedSectorType: string;
     selectedBuildingUsage: string;
+    currentZoom: number;
+    sigunguData: any[];
+    private static readonly SIGUNGU_ZOOM_THRESHOLD;
     nationalData: any;
     seoulData: any;
     mapData: any;
@@ -17,6 +20,7 @@ export declare class KpiDashboardMapPage extends PageView {
     totalKpiYStats: any[];
     regionalKpiStats: any[];
     selectedRegion: string | null;
+    selectedGeoGroup: string | null;
     showRegionPopup: boolean;
     connectedCallback(): void;
     private initializeDefaultPeriod;
@@ -26,6 +30,14 @@ export declare class KpiDashboardMapPage extends PageView {
     private generateMapDataFromKpiValues;
     private generateMapDataFromStatistics;
     private generateMapDataFromRegionalStats;
+    private static readonly SIGUNGU_MAP;
+    private fetchSigunguData;
+    private static readonly GEO_TO_METRO;
+    private calculateChangeRate;
+    private generateSigunguMapData;
+    private onZoomChanged;
+    private static readonly METRO_BOUNDS;
+    private focusMapOnRegion;
     private downloadExcel;
     private onRegionClick;
     private closeRegionPopup;

package/dist-client/pages/kpi-dashboard/kpi-dashboard-map.js CHANGED Viewed

@@ -1,3 +1,4 @@
+var KpiDashboardMapPage_1;
 import { __decorate, __metadata } from "tslib";
 import gql from 'graphql-tag';
 import { html, css, nothing } from 'lit';
@@ -9,7 +10,7 @@ import { notify } from '@operato/layout';
 import './components/kpi-map-panel';
 import './components/kpi-left-panel';
 import './components/kpi-region-popup';
-let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
+let KpiDashboardMapPage = KpiDashboardMapPage_1 = class KpiDashboardMapPage extends PageView {
     constructor() {
         super(...arguments);
         this.selectedCategory = '전체 KPI';
@@ -18,6 +19,8 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
         this.endYearMonth = ''; // YYYY-MM 형식
         this.selectedSectorType = ''; // PUBLIC | PRIVATE
         this.selectedBuildingUsage = ''; // RESIDENTIAL | NON_RESIDENTIAL
+        this.currentZoom = 7.2;
+        this.sigunguData = []; // 시군구 단위 데이터
         this.nationalData = null;
         this.seoulData = null;
         this.mapData = null;
@@ -26,6 +29,7 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
         this.regionalKpiStats = []; // 지역별 KPI 통계
         // 팝업 관련 상태 추가
         this.selectedRegion = null;
+        this.selectedGeoGroup = null; // 시군구 geo_group 코드
         this.showRegionPopup = false;
     }
     connectedCallback() {
@@ -334,19 +338,7 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
         };
         this.mapData = Object.keys(regionCoordinates).map(regionName => {
             const stat = this.regionalKpiStats.find(s => s.geoGroup === regionName);
-            // 해당 지역의 월별 데이터를 시간순으로 정렬
-            const regionMonthlyData = this.monthlyTrendData
-                .filter(d => d.geoGroup === regionName)
-                .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
-            // 변동율 계산: 가장 오래된 달과 가장 최근 달 비교
-            let changeRate = 0;
-            if (regionMonthlyData.length >= 2) {
-                const oldestValue = regionMonthlyData[0].avgVal;
-                const latestValue = regionMonthlyData[regionMonthlyData.length - 1].avgVal;
-                if (oldestValue !== 0) {
-                    changeRate = ((latestValue - oldestValue) / oldestValue) * 100;
-                }
-            }
+            const changeRate = this.calculateChangeRate(regionName);
             return {
                 region: regionName,
                 kpi: stat ? (stat.avgVal * 100).toFixed(1) : '0.0',
@@ -359,12 +351,123 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
         });
         console.log('Generated map data from regional stats:', this.mapData.length, 'regions');
     }
+    async fetchSigunguData() {
+        try {
+            const categoryToKpiName = {
+                '전체 KPI': null,
+                '일정 성과': 'Y1. 일정성과',
+                '비용 성과': 'Y2. 비용성과',
+                '품질 성과': 'Y3. 품질성과',
+                '안전 성과': 'Y4. 안전성과',
+                '환경 성과': 'Y5. 환경성과',
+                '생산성 성과': 'Y6. 생산성성과'
+            };
+            const kpiName = categoryToKpiName[this.selectedCategory];
+            const response = await client.query({
+                query: gql `
+          query GetSigunguStats(
+            $kpiName: String
+            $startYearMonth: String
+            $endYearMonth: String
+            $sectorType: String
+            $buildingUsage: String
+          ) {
+            kpiZValueStatsBySigungu(
+              kpiName: $kpiName
+              startYearMonth: $startYearMonth
+              endYearMonth: $endYearMonth
+              sectorType: $sectorType
+              buildingUsage: $buildingUsage
+            ) {
+              geoGroup
+              avgVal
+              minVal
+              maxVal
+              projectCount
+            }
+          }
+        `,
+                variables: {
+                    kpiName,
+                    startYearMonth: this.startYearMonth || null,
+                    endYearMonth: this.endYearMonth || null,
+                    sectorType: this.selectedSectorType || null,
+                    buildingUsage: this.selectedBuildingUsage || null
+                }
+            });
+            this.sigunguData = response.data.kpiZValueStatsBySigungu || [];
+            this.generateSigunguMapData();
+        }
+        catch (e) {
+            console.error('시군구 데이터 조회 실패:', e);
+        }
+    }
+    calculateChangeRate(metroName) {
+        const regionMonthlyData = this.monthlyTrendData
+            .filter((d) => d.geoGroup === metroName)
+            .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
+        if (regionMonthlyData.length >= 2) {
+            const oldest = regionMonthlyData[0].avgVal;
+            const latest = regionMonthlyData[regionMonthlyData.length - 1].avgVal;
+            if (oldest !== 0) {
+                return ((latest - oldest) / oldest) * 100;
+            }
+        }
+        return 0;
+    }
+    generateSigunguMapData() {
+        const map = KpiDashboardMapPage_1.SIGUNGU_MAP;
+        const geoToMetro = KpiDashboardMapPage_1.GEO_TO_METRO;
+        this.mapData = this.sigunguData
+            .filter((s) => s.geoGroup && map[s.geoGroup])
+            .map((s) => {
+            const info = map[s.geoGroup];
+            const metro = geoToMetro[s.geoGroup] || '';
+            const changeRate = this.calculateChangeRate(metro);
+            return {
+                region: info.name,
+                kpi: (s.avgVal * 100).toFixed(1),
+                change: changeRate.toFixed(2),
+                trend: changeRate >= 0 ? 'up' : 'down',
+                lat: info.lat,
+                lng: info.lng,
+                dataCount: s.projectCount || 0
+            };
+        });
+    }
+    onZoomChanged(e) {
+        const newZoom = e.detail.zoom;
+        const threshold = KpiDashboardMapPage_1.SIGUNGU_ZOOM_THRESHOLD;
+        const wasAbove = this.currentZoom >= threshold;
+        const isAbove = newZoom >= threshold;
+        this.currentZoom = newZoom;
+        // 줌 레벨이 threshold를 넘나들 때만 데이터 전환
+        if (wasAbove !== isAbove) {
+            if (isAbove) {
+                this.fetchSigunguData();
+            }
+            else {
+                this.generateMapDataFromRegionalStats();
+            }
+        }
+    }
+    focusMapOnRegion(regionName) {
+        var _a;
+        const bounds = KpiDashboardMapPage_1.METRO_BOUNDS[regionName];
+        if (!bounds)
+            return;
+        const mapPanel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('kpi-map-panel');
+        mapPanel === null || mapPanel === void 0 ? void 0 : mapPanel.focusOnLocation(bounds.lat, bounds.lng, bounds.zoom);
+    }
     downloadExcel() {
-        // 엑셀 다운로드 기능
         console.log('엑셀 다운로드');
     }
     onRegionClick(region) {
         this.selectedRegion = region;
+        // 시군구 모드인 경우 region name → geo_group 코드 역매핑
+        const sigunguMap = KpiDashboardMapPage_1.SIGUNGU_MAP;
+        const entry = Object.entries(sigunguMap).find(([, v]) => v.name === region);
+        this.selectedGeoGroup = entry ? entry[0] : null;
         this.showRegionPopup = true;
         // fetchRegionData는 더 이상 필요하지 않음 (kpi-region-popup에서 직접 데이터 가져옴)
         // this.fetchRegionData(region)
@@ -445,6 +548,9 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
         }}
           @region-click=${(e) => {
             this.onRegionClick(e.detail.region);
+        }}
+          @focus-region=${(e) => {
+            this.focusMapOnRegion(e.detail.region);
         }}
           @monthly-trend-data-loaded=${(e) => {
             this.monthlyTrendData = e.detail.data;
@@ -467,6 +573,9 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
           .mapData=${this.mapData}
           @region-click=${(e) => {
             this.onRegionClick(e.detail.region);
+        }}
+          @zoom-changed=${(e) => {
+            this.onZoomChanged(e);
         }}
         ></kpi-map-panel>
@@ -475,6 +584,7 @@ let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
             ? html `
               <kpi-region-popup
                 .selectedRegion=${this.selectedRegion}
+                .geoGroup=${this.selectedGeoGroup}
                 .selectedCategory=${this.selectedCategory}
                 .monthlyTrendData=${this.monthlyTrendData}
                 .totalKpiStats=${this.totalKpiYStats}
@@ -512,6 +622,111 @@ KpiDashboardMapPage.styles = [
       }
     `
 ];
+KpiDashboardMapPage.SIGUNGU_ZOOM_THRESHOLD = 10;
+// 시군구별 좌표 (geo_group 2자리 코드 → { name, lat, lng })
+KpiDashboardMapPage.SIGUNGU_MAP = {
+    '01': { name: '서울 종로구', lat: 37.5735, lng: 126.9790 },
+    '02': { name: '서울 중구', lat: 37.5641, lng: 126.9979 },
+    '03': { name: '서울 용산구', lat: 37.5326, lng: 126.9906 },
+    '04': { name: '서울 성동구', lat: 37.5634, lng: 127.0369 },
+    '05': { name: '서울 광진구', lat: 37.5385, lng: 127.0823 },
+    '06': { name: '서울 강남구', lat: 37.5172, lng: 127.0473 },
+    '07': { name: '서울 송파구', lat: 37.5145, lng: 127.1060 },
+    '08': { name: '서울 강서구', lat: 37.5510, lng: 126.8495 },
+    '10': { name: '수원시', lat: 37.2636, lng: 127.0286 },
+    '11': { name: '성남시', lat: 37.4200, lng: 127.1265 },
+    '12': { name: '고양시', lat: 37.6584, lng: 126.8320 },
+    '13': { name: '용인시', lat: 37.2411, lng: 127.1776 },
+    '14': { name: '부천시', lat: 37.5034, lng: 126.7660 },
+    '15': { name: '안산시', lat: 37.3219, lng: 126.8309 },
+    '16': { name: '화성시', lat: 37.1995, lng: 126.8312 },
+    '17': { name: '평택시', lat: 36.9921, lng: 127.1127 },
+    '18': { name: '파주시', lat: 37.7599, lng: 126.7799 },
+    '21': { name: '인천 남동구', lat: 37.4488, lng: 126.7308 },
+    '22': { name: '인천 부평구', lat: 37.5076, lng: 126.7218 },
+    '23': { name: '인천 서구', lat: 37.5458, lng: 126.6760 },
+    '24': { name: '춘천시', lat: 37.8813, lng: 127.7300 },
+    '25': { name: '원주시', lat: 37.3422, lng: 127.9202 },
+    '26': { name: '강릉시', lat: 37.7519, lng: 128.8761 },
+    '27': { name: '청주시', lat: 36.6424, lng: 127.4890 },
+    '28': { name: '충주시', lat: 36.9910, lng: 127.9259 },
+    '29': { name: '제천시', lat: 37.1327, lng: 128.1910 },
+    '30': { name: '세종시', lat: 36.4875, lng: 127.2816 },
+    '31': { name: '천안시', lat: 36.8151, lng: 127.1139 },
+    '32': { name: '아산시', lat: 36.7898, lng: 127.0018 },
+    '33': { name: '속초시', lat: 38.2071, lng: 128.5918 },
+    '34': { name: '대전 서구', lat: 36.3555, lng: 127.3835 },
+    '35': { name: '대전 유성구', lat: 36.3622, lng: 127.3561 },
+    '36': { name: '포항시', lat: 36.0190, lng: 129.3435 },
+    '37': { name: '경주시', lat: 35.8562, lng: 129.2247 },
+    '38': { name: '구미시', lat: 36.1196, lng: 128.3443 },
+    '39': { name: '안동시', lat: 36.5684, lng: 128.7294 },
+    '40': { name: '김천시', lat: 36.1398, lng: 128.1136 },
+    '41': { name: '대구 중구', lat: 35.8693, lng: 128.6062 },
+    '42': { name: '대구 수성구', lat: 35.8584, lng: 128.6308 },
+    '43': { name: '대구 달서구', lat: 35.8299, lng: 128.5327 },
+    '44': { name: '울산 남구', lat: 35.5444, lng: 129.3304 },
+    '45': { name: '울산 중구', lat: 35.5696, lng: 129.3324 },
+    '46': { name: '부산 중구', lat: 35.1060, lng: 129.0324 },
+    '47': { name: '부산 해운대구', lat: 35.1631, lng: 129.1636 },
+    '48': { name: '부산 사하구', lat: 35.1046, lng: 128.9751 },
+    '49': { name: '부산 금정구', lat: 35.2431, lng: 129.0923 },
+    '50': { name: '창원시', lat: 35.2281, lng: 128.6812 },
+    '51': { name: '김해시', lat: 35.2285, lng: 128.8894 },
+    '52': { name: '진주시', lat: 35.1798, lng: 128.1076 },
+    '53': { name: '양산시', lat: 35.3350, lng: 129.0373 },
+    '54': { name: '전주시', lat: 35.8242, lng: 127.1480 },
+    '55': { name: '익산시', lat: 35.9483, lng: 126.9576 },
+    '56': { name: '군산시', lat: 35.9676, lng: 126.7369 },
+    '57': { name: '목포시', lat: 34.8118, lng: 126.3922 },
+    '58': { name: '여수시', lat: 34.7604, lng: 127.6622 },
+    '59': { name: '순천시', lat: 34.9506, lng: 127.4873 },
+    '61': { name: '광주 서구', lat: 35.1525, lng: 126.8895 },
+    '62': { name: '광주 북구', lat: 35.1744, lng: 126.9120 },
+    '63': { name: '제주시', lat: 33.4996, lng: 126.5312 }
+};
+// geo_group 코드 → 광역시도 매핑
+KpiDashboardMapPage.GEO_TO_METRO = {
+    '01': '서울특별시', '02': '서울특별시', '03': '서울특별시', '04': '서울특별시',
+    '05': '서울특별시', '06': '서울특별시', '07': '서울특별시', '08': '서울특별시',
+    '10': '경기도', '11': '경기도', '12': '경기도', '13': '경기도', '14': '경기도',
+    '15': '경기도', '16': '경기도', '17': '경기도', '18': '경기도',
+    '21': '인천광역시', '22': '인천광역시', '23': '인천광역시',
+    '24': '강원도', '25': '강원도', '26': '강원도', '33': '강원도',
+    '27': '충청북도', '28': '충청북도', '29': '충청북도',
+    '30': '세종특별자치시',
+    '31': '충청남도', '32': '충청남도',
+    '34': '대전광역시', '35': '대전광역시',
+    '36': '경상북도', '37': '경상북도', '38': '경상북도', '39': '경상북도', '40': '경상북도',
+    '41': '대구광역시', '42': '대구광역시', '43': '대구광역시',
+    '44': '울산광역시', '45': '울산광역시',
+    '46': '부산광역시', '47': '부산광역시', '48': '부산광역시', '49': '부산광역시',
+    '50': '경상남도', '51': '경상남도', '52': '경상남도', '53': '경상남도',
+    '54': '전라북도', '55': '전라북도', '56': '전라북도',
+    '57': '전라남도', '58': '전라남도', '59': '전라남도',
+    '61': '광주광역시', '62': '광주광역시',
+    '63': '제주특별자치도'
+};
+// 광역시도별 중심 좌표 + 줌 레벨 (시군구가 모두 보이는 수준)
+KpiDashboardMapPage.METRO_BOUNDS = {
+    서울특별시: { lat: 37.5665, lng: 126.978, zoom: 11 },
+    부산광역시: { lat: 35.1796, lng: 129.0756, zoom: 11 },
+    대구광역시: { lat: 35.8714, lng: 128.6014, zoom: 11 },
+    인천광역시: { lat: 37.4563, lng: 126.7052, zoom: 11 },
+    광주광역시: { lat: 35.1595, lng: 126.8526, zoom: 12 },
+    대전광역시: { lat: 36.3504, lng: 127.3845, zoom: 12 },
+    울산광역시: { lat: 35.5384, lng: 129.3114, zoom: 11 },
+    세종특별자치시: { lat: 36.4875, lng: 127.2816, zoom: 12 },
+    경기도: { lat: 37.4138, lng: 127.0183, zoom: 9 },
+    강원도: { lat: 37.8228, lng: 128.1555, zoom: 9 },
+    충청북도: { lat: 36.8, lng: 127.7, zoom: 9 },
+    충청남도: { lat: 36.5184, lng: 126.8, zoom: 10 },
+    전라북도: { lat: 35.7175, lng: 127.153, zoom: 10 },
+    전라남도: { lat: 34.8679, lng: 126.991, zoom: 9 },
+    경상북도: { lat: 36.4919, lng: 128.8889, zoom: 9 },
+    경상남도: { lat: 35.4606, lng: 128.2132, zoom: 9 },
+    제주특별자치도: { lat: 33.4996, lng: 126.5312, zoom: 11 }
+};
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -536,6 +751,14 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiDashboardMapPage.prototype, "selectedBuildingUsage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "currentZoom", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardMapPage.prototype, "sigunguData", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -564,11 +787,15 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiDashboardMapPage.prototype, "selectedRegion", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedGeoGroup", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiDashboardMapPage.prototype, "showRegionPopup", void 0);
-KpiDashboardMapPage = __decorate([
+KpiDashboardMapPage = KpiDashboardMapPage_1 = __decorate([
     customElement('kpi-dashboard-map')
 ], KpiDashboardMapPage);
 export { KpiDashboardMapPage };