npm - @dssp/dkpi - Versions diffs - 1.0.0-alpha.65 → 1.0.0-alpha.67 - Mend

@dssp/dkpi 1.0.0-alpha.65 → 1.0.0-alpha.67

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 (82) hide show

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

@@ -1,11 +1,14 @@
+var KpiMapPanel_1;
 import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import '../../../google-map/common-google-map.js';
-let KpiMapPanel = class KpiMapPanel extends LitElement {
+let KpiMapPanel = KpiMapPanel_1 = class KpiMapPanel extends LitElement {
     constructor() {
         super(...arguments);
         this.selectedCategory = '전체 KPI';
+        this.sectorType = '';
+        this.buildingUsage = '';
         this.mapData = [];
         this.map = null;
         this.isAllPeriod = false; // 전체 기간 체크박스
@@ -130,6 +133,12 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
             composed: true
         }));
     }
+    focusOnLocation(lat, lng, zoom) {
+        if (this.map) {
+            this.map.setCenter({ lat, lng });
+            this.map.setZoom(zoom);
+        }
+    }
     zoomIn() {
         if (this.map) {
             this.map.setZoom(this.map.getZoom() + 1);
@@ -160,138 +169,6 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
     }
     render() {
         return html `
-      <div class="map-overlay">
-        <div class="category-buttons">
-          <button
-            class="category-button ${this.selectedCategory === '전체 KPI' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('전체 KPI')}
-          >
-            전체 KPI
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '일정 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('일정 성과')}
-          >
-            일정 성과
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '비용 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('비용 성과')}
-          >
-            비용 성과
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '품질 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('품질 성과')}
-          >
-            품질 성과
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '안전 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('안전 성과')}
-          >
-            안전 성과
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '환경 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('환경 성과')}
-          >
-            환경 성과
-          </button>
-          <button
-            class="category-button ${this.selectedCategory === '생산성 성과' ? 'active' : ''}"
-            @click=${() => this.onCategoryButtonClick('생산성 성과')}
-          >
-            생산성 성과
-          </button>
-        </div>
-        <!-- 기간 선택 폼 -->
-        <div class="period-form">
-          <div class="period-row">
-            <span class="period-label">기간:</span>
-            <select
-              class="period-select"
-              .value=${this.startYear}
-              ?disabled=${this.isAllPeriod}
-              @change=${(e) => {
-            this.startYear = e.target.value;
-            this.onPeriodChange();
-        }}
-            >
-              <option value="2025">2025년</option>
-              <option value="2024">2024년</option>
-              <option value="2023">2023년</option>
-              <option value="2022">2022년</option>
-            </select>
-            <select
-              class="period-select"
-              .value=${this.startMonth}
-              ?disabled=${this.isAllPeriod}
-              @change=${(e) => {
-            this.startMonth = e.target.value;
-            this.onPeriodChange();
-        }}
-            >
-              <option value="1">1월</option>
-              <option value="2">2월</option>
-              <option value="3">3월</option>
-              <option value="4">4월</option>
-              <option value="5">5월</option>
-              <option value="6">6월</option>
-              <option value="7">7월</option>
-              <option value="8">8월</option>
-              <option value="9">9월</option>
-              <option value="10">10월</option>
-              <option value="11">11월</option>
-              <option value="12">12월</option>
-            </select>
-            <span class="period-separator">~</span>
-            <select
-              class="period-select"
-              .value=${this.endYear}
-              ?disabled=${this.isAllPeriod}
-              @change=${(e) => {
-            this.endYear = e.target.value;
-            this.onPeriodChange();
-        }}
-            >
-              <option value="2025">2025년</option>
-              <option value="2024">2024년</option>
-              <option value="2023">2023년</option>
-              <option value="2022">2022년</option>
-            </select>
-            <select
-              class="period-select"
-              .value=${this.endMonth}
-              ?disabled=${this.isAllPeriod}
-              @change=${(e) => {
-            this.endMonth = e.target.value;
-            this.onPeriodChange();
-        }}
-            >
-              <option value="1">1월</option>
-              <option value="2">2월</option>
-              <option value="3">3월</option>
-              <option value="4">4월</option>
-              <option value="5">5월</option>
-              <option value="6">6월</option>
-              <option value="7">7월</option>
-              <option value="8">8월</option>
-              <option value="9">9월</option>
-              <option value="10">10월</option>
-              <option value="11">11월</option>
-              <option value="12">12월</option>
-            </select>
-            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
-              <input type="checkbox" .checked=${this.isAllPeriod} @change=${this.onAllPeriodChange} style="cursor: pointer;" />
-              <span class="period-label" style="min-width: auto;">전체 기간</span>
-            </label>
-          </div>
-        </div>
-      </div>
       <div class="map-container">
         <!-- 지도 컨트롤 (오른쪽 상단) -->
         <div class="map-controls">
@@ -308,10 +185,10 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
         <!-- 공통 Google Maps 컴포넌트 사용 -->
         <common-google-map
-          .center=${{ lat: 36.0, lng: 127.8 }}
+          .center=${KpiMapPanel_1.DEFAULT_CENTER}
           .zoom=${7.2}
           .locations=${this.mapLocations}
-          .clusterZoom=${10}
+          .clusterZoom=${13}
           .controls=${{
             zoomControl: false,
             mapTypeControl: false,
@@ -335,77 +212,6 @@ KpiMapPanel.styles = css `
       position: relative;
       min-height: 500px;
     }
-    .map-overlay {
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      z-index: 10;
-      background: rgba(255, 255, 255, 0.95);
-      border-radius: 8px;
-      padding: 12px 16px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      backdrop-filter: blur(4px);
-    }
-    .category-buttons {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    .category-button {
-      padding: 6px 12px;
-      border: 1px solid #ced4da;
-      background: #fff;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 0.85rem;
-      transition: all 0.2s;
-      white-space: nowrap;
-    }
-    .category-button.active {
-      background: #667eea;
-      color: white;
-      border-color: #667eea;
-    }
-    .category-button:hover {
-      background: #f8f9fa;
-    }
-    .category-button.active:hover {
-      background: #5a6fd8;
-    }
-    .period-form {
-      margin-top: 12px;
-      padding-top: 12px;
-      border-top: 1px solid #e9ecef;
-    }
-    .period-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
-    .period-label {
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: #495057;
-      min-width: 40px;
-    }
-    .period-select {
-      padding: 4px 8px;
-      border: 1px solid #ced4da;
-      border-radius: 4px;
-      background: white;
-      font-size: 0.8rem;
-      cursor: pointer;
-    }
-    .period-select:focus {
-      outline: none;
-      border-color: #667eea;
-    }
-    .period-separator {
-      font-size: 0.85rem;
-      color: #6c757d;
-      margin: 0 4px;
-    }
     .map-container {
       flex: 1;
       position: relative;
@@ -462,10 +268,19 @@ KpiMapPanel.styles = css `
       height: 100%;
     }
   `;
+KpiMapPanel.DEFAULT_CENTER = { lat: 36.0, lng: 127.8 };
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], KpiMapPanel.prototype, "selectedCategory", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "sectorType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "buildingUsage", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
@@ -494,7 +309,7 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiMapPanel.prototype, "endMonth", void 0);
-KpiMapPanel = __decorate([
+KpiMapPanel = KpiMapPanel_1 = __decorate([
     customElement('kpi-map-panel')
 ], KpiMapPanel);
 export { KpiMapPanel };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi-map-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-map-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../google-map/common-google-map.js'\n\ndeclare global {\n interface Window {\n google: any\n }\n}\n\n@customElement('kpi-map-panel')\nexport class KpiMapPanel extends LitElement {\n static styles = css`\n :host {\n display: flex;\n background: #f8f9fa;\n overflow: hidden;\n position: relative;\n min-height: 500px;\n }\n .map-overlay {\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: 10;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 8px;\n padding: 12px 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(4px);\n }\n .category-buttons {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n .category-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 white-space: nowrap;\n }\n .category-button.active {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n .category-button:hover {\n background: #f8f9fa;\n }\n .category-button.active:hover {\n background: #5a6fd8;\n }\n .period-form {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n }\n .period-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n }\n .period-label {\n font-size: 0.85rem;\n font-weight: 600;\n color: #495057;\n min-width: 40px;\n }\n .period-select {\n padding: 4px 8px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n background: white;\n font-size: 0.8rem;\n cursor: pointer;\n }\n .period-select:focus {\n outline: none;\n border-color: #667eea;\n }\n .period-separator {\n font-size: 0.85rem;\n color: #6c757d;\n margin: 0 4px;\n }\n .map-container {\n flex: 1;\n position: relative;\n overflow: hidden;\n }\n .map-controls {\n position: absolute;\n top: 16px;\n right: 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n z-index: 10;\n }\n .map-control-button {\n width: 40px;\n height: 40px;\n background: white;\n border: 1px solid #ced4da;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n .map-control-button:hover {\n background: #f8f9fa;\n }\n .map-scale-direction {\n position: absolute;\n bottom: 16px;\n right: 16px;\n background: white;\n padding: 8px 12px;\n border-radius: 6px;\n border: 1px solid #ced4da;\n font-size: 0.8rem;\n color: #666;\n z-index: 10;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n text-align: center;\n }\n .north-arrow {\n font-size: 1rem;\n margin-bottom: 4px;\n }\n .scale-info {\n font-size: 0.7rem;\n }\n common-google-map {\n width: 100%;\n height: 100%;\n }\n `\n\n @property({ type: String }) selectedCategory = '전체 KPI'\n @property({ type: Array }) mapData: any[] = []\n\n @state() private map: any = null\n @state() private isAllPeriod = false // 전체 기간 체크박스\n @state() private startYear = ''\n @state() private startMonth = ''\n @state() private endYear = ''\n @state() private endMonth = ''\n\n connectedCallback() {\n super.connectedCallback()\n this.initializeDefaultPeriod()\n }\n\n private initializeDefaultPeriod() {\n const now = new Date()\n const currentYear = now.getFullYear()\n const currentMonth = now.getMonth() + 1 // 0-based이므로 +1\n\n // 12개월 전 계산\n const startDate = new Date(now)\n startDate.setMonth(startDate.getMonth() - 11) // 현재 월 포함 12개월\n const startYear = startDate.getFullYear()\n const startMonth = startDate.getMonth() + 1\n\n this.startYear = startYear.toString()\n this.startMonth = startMonth.toString()\n this.endYear = currentYear.toString()\n this.endMonth = currentMonth.toString()\n }\n\n private onAllPeriodChange(e: Event) {\n this.isAllPeriod = (e.target as HTMLInputElement).checked\n this.onPeriodChange()\n }\n\n // mapData를 지도 마커 형식으로 변환\n get mapLocations() {\n return (\n this.mapData?.map(item => ({\n lat: item.lat,\n lng: item.lng,\n title: item.region,\n region: item.region, // 지역명 추가\n // 커스텀 마커 콘텐츠 생성\n markerContent: `\n <div style=\"\n background: white;\n border-radius: 8px;\n padding: 8px 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n border: 1px solid #e9ecef;\n min-width: 80px;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n cursor: pointer;\n \">\n <div style=\"\n font-size: 11px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 2px;\n white-space: nowrap;\n \">${item.region}</div>\n <div style=\"\n font-size: 13px;\n font-weight: 700;\n color: #212529;\n margin-bottom: 2px;\n \">${item.kpi}</div>\n <div style=\"\n font-size: 10px;\n color: ${item.change > 0 ? '#dc3545' : '#198754'};\n font-weight: 500;\n \">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>\n </div>\n `,\n content: `\n <div style=\"padding: 12px; min-width: 200px;\">\n <h3 style=\"margin: 0 0 8px 0; font-size: 16px; color: #212529;\">${item.region}</h3>\n <div style=\"margin-bottom: 8px;\">\n <span style=\"font-size: 14px; color: #6c757d;\">KPI: </span>\n <span style=\"font-size: 16px; font-weight: 600; color: #212529;\">${item.kpi}</span>\n </div>\n <div style=\"\n font-size: 14px;\n color: ${item.change > 0 ? '#dc3545' : '#198754'};\n font-weight: 500;\n \">\n ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화\n </div>\n </div>\n `\n })) \|\| []\n )\n }\n\n private onCategoryButtonClick(category: string) {\n this.dispatchEvent(\n new CustomEvent('category-change', {\n detail: { category },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onMapChange(event: CustomEvent) {\n this.map = event.detail\n // 지도가 로드되면 남한 영역에 맞게 자동 조정\n this.fitBoundsToSouthKorea()\n }\n\n private fitBoundsToSouthKorea() {\n if (!this.map \|\| !window.google) return\n\n // 남한의 실제 행정구역 경계 설정 (울릉도/독도 제외)\n const bounds = new window.google.maps.LatLngBounds()\n\n // 최북단: 강원도 고성 (DMZ 남쪽)\n bounds.extend(new window.google.maps.LatLng(38.3, 128.3))\n // 최남단: 제주도 남쪽\n bounds.extend(new window.google.maps.LatLng(33.1, 126.3))\n // 최서단: 전남 서쪽\n bounds.extend(new window.google.maps.LatLng(34.5, 125.1))\n // 최동단: 강원도 동해안\n bounds.extend(new window.google.maps.LatLng(37.5, 129.4))\n\n // 패딩을 추가하여 여유 공간 확보\n this.map.fitBounds(bounds, { top: 30, bottom: 30, left: 30, right: 30 })\n }\n\n private onRegionClick(event: CustomEvent) {\n this.dispatchEvent(\n new CustomEvent('region-click', {\n detail: event.detail,\n bubbles: true,\n composed: true\n })\n )\n }\n\n private zoomIn() {\n if (this.map) {\n this.map.setZoom(this.map.getZoom() + 1)\n }\n }\n\n private zoomOut() {\n if (this.map) {\n this.map.setZoom(this.map.getZoom() - 1)\n }\n }\n\n private resetView() {\n if (this.map) {\n this.fitBoundsToSouthKorea()\n }\n }\n\n private onPeriodChange() {\n this.dispatchEvent(\n new CustomEvent('period-change', {\n detail: {\n startYear: this.isAllPeriod ? null : this.startYear,\n startMonth: this.isAllPeriod ? null : this.startMonth,\n endYear: this.isAllPeriod ? null : this.endYear,\n endMonth: this.isAllPeriod ? null : this.endMonth,\n isAllPeriod: this.isAllPeriod\n },\n bubbles: true,\n composed: true\n })\n )\n }\n\n render() {\n return html`\n <div class=\"map-overlay\">\n <div class=\"category-buttons\">\n <button\n class=\"category-button ${this.selectedCategory === '전체 KPI' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('전체 KPI')}\n >\n 전체 KPI\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '일정 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('일정 성과')}\n >\n 일정 성과\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '비용 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('비용 성과')}\n >\n 비용 성과\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '품질 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('품질 성과')}\n >\n 품질 성과\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '안전 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('안전 성과')}\n >\n 안전 성과\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '환경 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('환경 성과')}\n >\n 환경 성과\n </button>\n <button\n class=\"category-button ${this.selectedCategory === '생산성 성과' ? 'active' : ''}\"\n @click=${() => this.onCategoryButtonClick('생산성 성과')}\n >\n 생산성 성과\n </button>\n </div>\n\n <!-- 기간 선택 폼 -->\n <div class=\"period-form\">\n <div class=\"period-row\">\n <span class=\"period-label\">기간:</span>\n <select\n class=\"period-select\"\n .value=${this.startYear}\n ?disabled=${this.isAllPeriod}\n @change=${(e: Event) => {\n this.startYear = (e.target as HTMLSelectElement).value\n this.onPeriodChange()\n }}\n >\n <option value=\"2025\">2025년</option>\n <option value=\"2024\">2024년</option>\n <option value=\"2023\">2023년</option>\n <option value=\"2022\">2022년</option>\n </select>\n <select\n class=\"period-select\"\n .value=${this.startMonth}\n ?disabled=${this.isAllPeriod}\n @change=${(e: Event) => {\n this.startMonth = (e.target as HTMLSelectElement).value\n this.onPeriodChange()\n }}\n >\n <option value=\"1\">1월</option>\n <option value=\"2\">2월</option>\n <option value=\"3\">3월</option>\n <option value=\"4\">4월</option>\n <option value=\"5\">5월</option>\n <option value=\"6\">6월</option>\n <option value=\"7\">7월</option>\n <option value=\"8\">8월</option>\n <option value=\"9\">9월</option>\n <option value=\"10\">10월</option>\n <option value=\"11\">11월</option>\n <option value=\"12\">12월</option>\n </select>\n <span class=\"period-separator\">~</span>\n <select\n class=\"period-select\"\n .value=${this.endYear}\n ?disabled=${this.isAllPeriod}\n @change=${(e: Event) => {\n this.endYear = (e.target as HTMLSelectElement).value\n this.onPeriodChange()\n }}\n >\n <option value=\"2025\">2025년</option>\n <option value=\"2024\">2024년</option>\n <option value=\"2023\">2023년</option>\n <option value=\"2022\">2022년</option>\n </select>\n <select\n class=\"period-select\"\n .value=${this.endMonth}\n ?disabled=${this.isAllPeriod}\n @change=${(e: Event) => {\n this.endMonth = (e.target as HTMLSelectElement).value\n this.onPeriodChange()\n }}\n >\n <option value=\"1\">1월</option>\n <option value=\"2\">2월</option>\n <option value=\"3\">3월</option>\n <option value=\"4\">4월</option>\n <option value=\"5\">5월</option>\n <option value=\"6\">6월</option>\n <option value=\"7\">7월</option>\n <option value=\"8\">8월</option>\n <option value=\"9\">9월</option>\n <option value=\"10\">10월</option>\n <option value=\"11\">11월</option>\n <option value=\"12\">12월</option>\n </select>\n\n <label style=\"display: flex; align-items: center; gap: 6px; cursor: pointer;\">\n <input type=\"checkbox\" .checked=${this.isAllPeriod} @change=${this.onAllPeriodChange} style=\"cursor: pointer;\" />\n <span class=\"period-label\" style=\"min-width: auto;\">전체 기간</span>\n </label>\n </div>\n </div>\n </div>\n\n <div class=\"map-container\">\n <!-- 지도 컨트롤 (오른쪽 상단) -->\n <div class=\"map-controls\">\n <button class=\"map-control-button\" title=\"확대\" @click=${() => this.zoomIn()}>+</button>\n <button class=\"map-control-button\" title=\"축소\" @click=${() => this.zoomOut()}>-</button>\n <button class=\"map-control-button\" title=\"뷰 초기화\" @click=${() => this.resetView()}>⌖</button>\n </div>\n\n <!-- 스케일 및 방향 정보 (오른쪽 하단) -->\n <div class=\"map-scale-direction\">\n <div class=\"north-arrow\">↑ N</div>\n <div class=\"scale-info\">25km</div>\n </div>\n\n <!-- 공통 Google Maps 컴포넌트 사용 -->\n <common-google-map\n .center=${{ lat: 36.0, lng: 127.8 }}\n .zoom=${7.2}\n .locations=${this.mapLocations}\n .clusterZoom=${10}\n .controls=${{\n zoomControl: false,\n mapTypeControl: false,\n scaleControl: false,\n streetViewControl: false,\n rotateControl: false,\n fullscreenControl: false\n }}\n @map-change=${this.onMapChange}\n @region-click=${this.onRegionClick}\n ></common-google-map>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"kpi-map-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-map-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../google-map/common-google-map.js'\n\ndeclare global {\n interface Window {\n google: any\n }\n}\n\n@customElement('kpi-map-panel')\nexport class KpiMapPanel extends LitElement {\n static styles = css`\n :host {\n display: flex;\n background: #f8f9fa;\n overflow: hidden;\n position: relative;\n min-height: 500px;\n }\n .map-container {\n flex: 1;\n position: relative;\n overflow: hidden;\n }\n .map-controls {\n position: absolute;\n top: 16px;\n right: 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n z-index: 10;\n }\n .map-control-button {\n width: 40px;\n height: 40px;\n background: white;\n border: 1px solid #ced4da;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n .map-control-button:hover {\n background: #f8f9fa;\n }\n .map-scale-direction {\n position: absolute;\n bottom: 16px;\n right: 16px;\n background: white;\n padding: 8px 12px;\n border-radius: 6px;\n border: 1px solid #ced4da;\n font-size: 0.8rem;\n color: #666;\n z-index: 10;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n text-align: center;\n }\n .north-arrow {\n font-size: 1rem;\n margin-bottom: 4px;\n }\n .scale-info {\n font-size: 0.7rem;\n }\n common-google-map {\n width: 100%;\n height: 100%;\n }\n `\n\n @property({ type: String }) selectedCategory = '전체 KPI'\n @property({ type: String }) sectorType = ''\n @property({ type: String }) buildingUsage = ''\n @property({ type: Array }) mapData: any[] = []\n\n private static readonly DEFAULT_CENTER = { lat: 36.0, lng: 127.8 }\n\n @state() private map: any = null\n @state() private isAllPeriod = false // 전체 기간 체크박스\n @state() private startYear = ''\n @state() private startMonth = ''\n @state() private endYear = ''\n @state() private endMonth = ''\n\n connectedCallback() {\n super.connectedCallback()\n this.initializeDefaultPeriod()\n }\n\n private initializeDefaultPeriod() {\n const now = new Date()\n const currentYear = now.getFullYear()\n const currentMonth = now.getMonth() + 1 // 0-based이므로 +1\n\n // 12개월 전 계산\n const startDate = new Date(now)\n startDate.setMonth(startDate.getMonth() - 11) // 현재 월 포함 12개월\n const startYear = startDate.getFullYear()\n const startMonth = startDate.getMonth() + 1\n\n this.startYear = startYear.toString()\n this.startMonth = startMonth.toString()\n this.endYear = currentYear.toString()\n this.endMonth = currentMonth.toString()\n }\n\n private onAllPeriodChange(e: Event) {\n this.isAllPeriod = (e.target as HTMLInputElement).checked\n this.onPeriodChange()\n }\n\n // mapData를 지도 마커 형식으로 변환\n get mapLocations() {\n return (\n this.mapData?.map(item => ({\n lat: item.lat,\n lng: item.lng,\n title: item.region,\n region: item.region, // 지역명 추가\n // 커스텀 마커 콘텐츠 생성\n markerContent: `\n <div style=\"\n background: white;\n border-radius: 8px;\n padding: 8px 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n border: 1px solid #e9ecef;\n min-width: 80px;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n cursor: pointer;\n \">\n <div style=\"\n font-size: 11px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 2px;\n white-space: nowrap;\n \">${item.region}</div>\n <div style=\"\n font-size: 13px;\n font-weight: 700;\n color: #212529;\n margin-bottom: 2px;\n \">${item.kpi}</div>\n <div style=\"\n font-size: 10px;\n color: ${item.change > 0 ? '#dc3545' : '#198754'};\n font-weight: 500;\n \">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>\n </div>\n `,\n content: `\n <div style=\"padding: 12px; min-width: 200px;\">\n <h3 style=\"margin: 0 0 8px 0; font-size: 16px; color: #212529;\">${item.region}</h3>\n <div style=\"margin-bottom: 8px;\">\n <span style=\"font-size: 14px; color: #6c757d;\">KPI: </span>\n <span style=\"font-size: 16px; font-weight: 600; color: #212529;\">${item.kpi}</span>\n </div>\n <div style=\"\n font-size: 14px;\n color: ${item.change > 0 ? '#dc3545' : '#198754'};\n font-weight: 500;\n \">\n ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화\n </div>\n </div>\n `\n })) \|\| []\n )\n }\n\n private onCategoryButtonClick(category: string) {\n this.dispatchEvent(\n new CustomEvent('category-change', {\n detail: { category },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onMapChange(event: CustomEvent) {\n this.map = event.detail\n // 지도가 로드되면 남한 영역에 맞게 자동 조정\n this.fitBoundsToSouthKorea()\n }\n\n private fitBoundsToSouthKorea() {\n if (!this.map \|\| !window.google) return\n\n // 남한의 실제 행정구역 경계 설정 (울릉도/독도 제외)\n const bounds = new window.google.maps.LatLngBounds()\n\n // 최북단: 강원도 고성 (DMZ 남쪽)\n bounds.extend(new window.google.maps.LatLng(38.3, 128.3))\n // 최남단: 제주도 남쪽\n bounds.extend(new window.google.maps.LatLng(33.1, 126.3))\n // 최서단: 전남 서쪽\n bounds.extend(new window.google.maps.LatLng(34.5, 125.1))\n // 최동단: 강원도 동해안\n bounds.extend(new window.google.maps.LatLng(37.5, 129.4))\n\n // 패딩을 추가하여 여유 공간 확보\n this.map.fitBounds(bounds, { top: 30, bottom: 30, left: 30, right: 30 })\n }\n\n private onRegionClick(event: CustomEvent) {\n this.dispatchEvent(\n new CustomEvent('region-click', {\n detail: event.detail,\n bubbles: true,\n composed: true\n })\n )\n }\n\n focusOnLocation(lat: number, lng: number, zoom: number) {\n if (this.map) {\n this.map.setCenter({ lat, lng })\n this.map.setZoom(zoom)\n }\n }\n\n private zoomIn() {\n if (this.map) {\n this.map.setZoom(this.map.getZoom() + 1)\n }\n }\n\n private zoomOut() {\n if (this.map) {\n this.map.setZoom(this.map.getZoom() - 1)\n }\n }\n\n private resetView() {\n if (this.map) {\n this.fitBoundsToSouthKorea()\n }\n }\n\n private onPeriodChange() {\n this.dispatchEvent(\n new CustomEvent('period-change', {\n detail: {\n startYear: this.isAllPeriod ? null : this.startYear,\n startMonth: this.isAllPeriod ? null : this.startMonth,\n endYear: this.isAllPeriod ? null : this.endYear,\n endMonth: this.isAllPeriod ? null : this.endMonth,\n isAllPeriod: this.isAllPeriod\n },\n bubbles: true,\n composed: true\n })\n )\n }\n\n render() {\n return html`\n <div class=\"map-container\">\n <!-- 지도 컨트롤 (오른쪽 상단) -->\n <div class=\"map-controls\">\n <button class=\"map-control-button\" title=\"확대\" @click=${() => this.zoomIn()}>+</button>\n <button class=\"map-control-button\" title=\"축소\" @click=${() => this.zoomOut()}>-</button>\n <button class=\"map-control-button\" title=\"뷰 초기화\" @click=${() => this.resetView()}>⌖</button>\n </div>\n\n <!-- 스케일 및 방향 정보 (오른쪽 하단) -->\n <div class=\"map-scale-direction\">\n <div class=\"north-arrow\">↑ N</div>\n <div class=\"scale-info\">25km</div>\n </div>\n\n <!-- 공통 Google Maps 컴포넌트 사용 -->\n <common-google-map\n .center=${KpiMapPanel.DEFAULT_CENTER}\n .zoom=${7.2}\n .locations=${this.mapLocations}\n .clusterZoom=${13}\n .controls=${{\n zoomControl: false,\n mapTypeControl: false,\n scaleControl: false,\n streetViewControl: false,\n rotateControl: false,\n fullscreenControl: false\n }}\n @map-change=${this.onMapChange}\n @region-click=${this.onRegionClick}\n ></common-google-map>\n </div>\n `\n }\n}\n"]}

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

@@ -5,6 +5,7 @@ import '../../../components/kpi-trend-chart.js';
 export declare class KpiRegionPopup extends LitElement {
     static styles: import("lit").CSSResult[];
     selectedRegion: string | null;
+    geoGroup: string | null;
     selectedCategory: string;
     selectedChartType: string;
     selectedPeriod: string;
@@ -19,6 +20,7 @@ export declare class KpiRegionPopup extends LitElement {
     updated(changedProperties: Map<string, any>): void;
     fetchRegionKpiStats(): Promise<void>;
     private generateChartData;
+    private static readonly GEO_TO_METRO;
     private generateTrendData;
     private onClose;
     private onChartTypeChange;

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 };