@things-factory/kpi 9.0.31 → 9.0.33

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

@@ -8,6 +8,10 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
         this.selectedCategory = '전체 KPI';
         this.mapData = [];
         this.map = null;
+        this.startYear = '전체';
+        this.startMonth = '전체';
+        this.endYear = '전체';
+        this.endMonth = '전체';
     }
     static { this.styles = css `
     :host {
@@ -54,6 +58,40 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
     .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;
@@ -201,6 +239,18 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
             this.map.setZoom(7);
         }
     }
+    onPeriodChange() {
+        this.dispatchEvent(new CustomEvent('period-change', {
+            detail: {
+                startYear: this.startYear,
+                startMonth: this.startMonth,
+                endYear: this.endYear,
+                endMonth: this.endMonth
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
     render() {
         return html `
       <div class="map-overlay">
@@ -242,6 +292,86 @@ let KpiMapPanel = class KpiMapPanel extends LitElement {
             환경 성과
           </button>
         </div>
+
+        <!-- 기간 선택 폼 -->
+        <div class="period-form">
+          <div class="period-row">
+            <span class="period-label">기간:</span>
+            <select
+              class="period-select"
+              .value=${this.startYear}
+              @change=${(e) => {
+            this.startYear = e.target.value;
+            this.onPeriodChange();
+        }}
+            >
+              <option value="전체">전체</option>
+              <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}
+              @change=${(e) => {
+            this.startMonth = e.target.value;
+            this.onPeriodChange();
+        }}
+            >
+              <option value="전체">전체</option>
+              <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}
+              @change=${(e) => {
+            this.endYear = e.target.value;
+            this.onPeriodChange();
+        }}
+            >
+              <option value="전체">전체</option>
+              <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}
+              @change=${(e) => {
+            this.endMonth = e.target.value;
+            this.onPeriodChange();
+        }}
+            >
+              <option value="전체">전체</option>
+              <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>
+          </div>
+        </div>
       </div>
 
       <div class="map-container">
@@ -291,6 +421,22 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], KpiMapPanel.prototype, "map", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "startYear", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "startMonth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "endYear", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiMapPanel.prototype, "endMonth", void 0);
 KpiMapPanel = __decorate([
     customElement('kpi-map-panel')
 ], KpiMapPanel);

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

@@ -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    .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\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\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.map.setCenter({ lat: 36.5, lng: 127.5 })\n      this.map.setZoom(7)\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        </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.5, lng: 127.5 }}\n          .zoom=${7}\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"]}
+{"version":3,"file":"kpi-map-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-map-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAW,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,0CAA0C,CAAA;AAS1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAyIuB,qBAAgB,GAAG,QAAQ,CAAA;QAC5B,YAAO,GAAU,EAAE,CAAA;QAE7B,QAAG,GAAQ,IAAI,CAAA;QACf,cAAS,GAAG,IAAI,CAAA;QAChB,eAAU,GAAG,IAAI,CAAA;QACjB,YAAO,GAAG,IAAI,CAAA;QACd,aAAQ,GAAG,IAAI,CAAA;IAsRlC,CAAC;aAraQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsIlB,AAtIY,CAsIZ;IAWD,yBAAyB;IACzB,IAAI,YAAY;QACd,OAAO,CACL,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzB,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS;YAC9B,gBAAgB;YAChB,aAAa,EAAE;;;;;;;;;;;;;;;;;;gBAkBP,IAAI,CAAC,MAAM;;;;;;gBAMX,IAAI,CAAC,GAAG;;;uBAGD,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;gBAE9C,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;SAE3D;YACD,OAAO,EAAE;;8EAE6D,IAAI,CAAC,MAAM;;;iFAGR,IAAI,CAAC,GAAG;;;;uBAIlE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;;gBAG9C,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;;SAG3D;SACF,CAAC,CAAC,IAAI,EAAE,CACV,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,QAAgB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,MAAM,EAAE,EAAE,QAAQ,EAAE;YACpB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAkB;QACpC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAA;IACzB,CAAC;IAEO,aAAa,CAAC,KAAkB;QACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YAC7C,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE;gBACN,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;qCAIsB,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBAClE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC;;;;;qCAK1B,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;;;;qCAKzB,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;;;;qCAKzB,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;;;;qCAKzB,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;;;;qCAKzB,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACjE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;;;;;;;;;;;uBAYvC,IAAI,CAAC,SAAS;wBACb,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAA;YACtD,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;;;;;;;;;;uBAUQ,IAAI,CAAC,UAAU;wBACd,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAA;YACvD,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;;;;;;;;;;;;;;;;;;;uBAmBQ,IAAI,CAAC,OAAO;wBACX,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAA;YACpD,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;;;;;;;;;;uBAUQ,IAAI,CAAC,QAAQ;wBACZ,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAA;YACrD,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;iEAuBkD,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;iEACnB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;oEACjB,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;;;;;;;;;;;oBAWtE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE;kBAC3B,CAAC;uBACI,IAAI,CAAC,YAAY;yBACf,EAAE;sBACL;YACV,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,KAAK;YACrB,YAAY,EAAE,KAAK;YACnB,iBAAiB,EAAE,KAAK;YACxB,aAAa,EAAE,KAAK;YACpB,iBAAiB,EAAE,KAAK;SACzB;wBACa,IAAI,CAAC,WAAW;0BACd,IAAI,CAAC,aAAa;;;KAGvC,CAAA;IACH,CAAC;;AA5R2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAA4B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4CAAoB;AAE7B;IAAhB,KAAK,EAAE;;wCAAwB;AACf;IAAhB,KAAK,EAAE;;8CAAyB;AAChB;IAAhB,KAAK,EAAE;;+CAA0B;AACjB;IAAhB,KAAK,EAAE;;4CAAuB;AACd;IAAhB,KAAK,EAAE;;6CAAwB;AAhJrB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAsavB","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 startYear = '전체'\n  @state() private startMonth = '전체'\n  @state() private endYear = '전체'\n  @state() private endMonth = '전체'\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\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.map.setCenter({ lat: 36.5, lng: 127.5 })\n      this.map.setZoom(7)\n    }\n  }\n\n  private onPeriodChange() {\n    this.dispatchEvent(\n      new CustomEvent('period-change', {\n        detail: {\n          startYear: this.startYear,\n          startMonth: this.startMonth,\n          endYear: this.endYear,\n          endMonth: this.endMonth\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        </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              @change=${(e: Event) => {\n                this.startYear = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"전체\">전체</option>\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              @change=${(e: Event) => {\n                this.startMonth = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"전체\">전체</option>\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              @change=${(e: Event) => {\n                this.endYear = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"전체\">전체</option>\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              @change=${(e: Event) => {\n                this.endMonth = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"전체\">전체</option>\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          </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.5, lng: 127.5 }}\n          .zoom=${7}\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"]}

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

@@ -33,7 +33,7 @@ let KpiRegionPopup = class KpiRegionPopup extends LitElement {
       box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
     }
     .popup-content {
-      padding: 24px;
+      padding: 20px;
       overflow-y: auto;
       flex: 1;
     }
@@ -41,7 +41,7 @@ let KpiRegionPopup = class KpiRegionPopup extends LitElement {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 20px 24px;
+      padding: 20px;
       border-bottom: 1px solid #e0e0e0;
       background: #fff;
       height: 70px;
@@ -273,6 +273,7 @@ let KpiRegionPopup = class KpiRegionPopup extends LitElement {
                     .groups=${this.chartCategories}
                     .valueKey=${'value'}
                     .currentGroup=${this.selectedRegion || '전체'}
+                    .independentScale=${true}
                   ></kpi-boxplot-chart>
                 `
             : html `

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

@@ -1 +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 { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../charts/kpi-radar-chart.js'\nimport '../../../charts/kpi-boxplot-chart.js'\nimport '../../../charts/kpi-trend-chart.js'\n\n@customElement('kpi-region-popup')\nexport class KpiRegionPopup extends LitElement {\n  static styles = 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: 24px;\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 24px;\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  @property({ type: String }) selectedRegion: string | null = null\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: String }) selectedPeriod = '월'\n  @property({ type: String }) startDate = '전체'\n  @property({ type: String }) endDate = '전체'\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n  @state() private trendData: { date: string; value: number; color?: string }[] = []\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.generateChartData()\n    this.generateTrendData()\n  }\n\n  private generateChartData() {\n    // 선택된 지역의 KPI 데이터 생성\n    const categories = ['일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']\n    this.chartCategories = categories\n\n    if (this.selectedChartType === 'radar') {\n      // 레이더 차트용 데이터 생성\n      this.chartData = categories.map(category => ({\n        category,\n        value: Math.random() * 50 + 25, // 25-75 범위\n        group: this.selectedRegion || '전체'\n      }))\n    } else {\n      // 박스플롯용 데이터 생성\n      this.chartData = categories.map(category => {\n        const baseValue = Math.random() * 50 + 25 // 25-75 범위\n        const variation = Math.random() * 20 // 변동폭\n\n        // 각 카테고리별로 20개의 데이터 포인트 생성\n        const dataPoints: { value: number; group: string }[] = []\n        for (let i = 0; i < 20; i++) {\n          dataPoints.push({\n            value: baseValue + (Math.random() - 0.5) * variation,\n            group: category\n          })\n        }\n\n        // 통계값 계산\n        const values = dataPoints.map(d => d.value).sort((a, b) => a - b)\n        const min = Math.min(...values)\n        const max = Math.max(...values)\n        const q1 = values[Math.floor(values.length * 0.25)]\n        const q3 = values[Math.floor(values.length * 0.75)]\n        const median = values[Math.floor(values.length * 0.5)]\n        const mean = values.reduce((a, b) => a + b, 0) / values.length\n\n        return {\n          group: category,\n          min: min,\n          max: max,\n          q1: q1,\n          q3: q3,\n          median: median,\n          mean: mean,\n          value: mean\n        }\n      })\n    }\n  }\n\n  private generateTrendData() {\n    // 최근 30일간의 트렌드 데이터 생성\n    const today = new Date()\n    this.trendData = []\n\n    for (let i = 29; i >= 0; i--) {\n      const date = new Date(today)\n      date.setDate(date.getDate() - i)\n\n      // 기본값에서 약간의 변동을 주어 트렌드 생성\n      const baseValue = 50\n      const trend = Math.sin(i * 0.2) * 10 // 사인파로 변동\n      const noise = (Math.random() - 0.5) * 5 // 랜덤 노이즈\n      const value = Math.max(0, Math.min(100, baseValue + trend + noise))\n\n      this.trendData.push({\n        date: date.toISOString().split('T')[0], // YYYY-MM-DD 형식\n        value: Math.round(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  private onPeriodChange(period: string) {\n    this.dispatchEvent(\n      new CustomEvent('period-change', {\n        detail: { period },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.generateTrendData()\n  }\n\n  private onDateRangeChange() {\n    this.dispatchEvent(\n      new CustomEvent('date-range-change', {\n        detail: { startDate: this.startDate, endDate: this.endDate },\n        bubbles: true,\n        composed: true\n      })\n    )\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                  <kpi-boxplot-chart\n                    .data=${this.chartData}\n                    .groups=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedRegion || '전체'}\n                  ></kpi-boxplot-chart>\n                `\n              : html`\n                  <kpi-radar-chart\n                    .data=${this.chartData}\n                    .categories=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedRegion || '전체'}\n                  ></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            <kpi-trend-chart\n              .data=${this.trendData}\n              .lineColor=${'#2196f3'}\n              .strokeWidth=${2}\n              .showPoints=${true}\n              .pointRadius=${4}\n            ></kpi-trend-chart>\n          </div>\n          <div class=\"trend-table\">\n            <table style=\"width: 100%; border-collapse: collapse; font-size: 0.85rem;\">\n              <thead>\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.slice(-10).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}\n                      </td>\n                      <td style=\"padding: 8px; text-align: center; font-size: 0.85rem;\">\n                        <span style=\"color: ${item.color};\">\n                          ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'}\n                        </span>\n                      </td>\n                    </tr>\n                  `\n                )}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"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 { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../charts/kpi-radar-chart.js'\nimport '../../../charts/kpi-boxplot-chart.js'\nimport '../../../charts/kpi-trend-chart.js'\n\n@customElement('kpi-region-popup')\nexport class KpiRegionPopup extends LitElement {\n  static styles = 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  @property({ type: String }) selectedRegion: string | null = null\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: String }) selectedPeriod = '월'\n  @property({ type: String }) startDate = '전체'\n  @property({ type: String }) endDate = '전체'\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n  @state() private trendData: { date: string; value: number; color?: string }[] = []\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.generateChartData()\n    this.generateTrendData()\n  }\n\n  private generateChartData() {\n    // 선택된 지역의 KPI 데이터 생성\n    const categories = ['일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']\n    this.chartCategories = categories\n\n    if (this.selectedChartType === 'radar') {\n      // 레이더 차트용 데이터 생성\n      this.chartData = categories.map(category => ({\n        category,\n        value: Math.random() * 50 + 25, // 25-75 범위\n        group: this.selectedRegion || '전체'\n      }))\n    } else {\n      // 박스플롯용 데이터 생성\n      this.chartData = categories.map(category => {\n        const baseValue = Math.random() * 50 + 25 // 25-75 범위\n        const variation = Math.random() * 20 // 변동폭\n\n        // 각 카테고리별로 20개의 데이터 포인트 생성\n        const dataPoints: { value: number; group: string }[] = []\n        for (let i = 0; i < 20; i++) {\n          dataPoints.push({\n            value: baseValue + (Math.random() - 0.5) * variation,\n            group: category\n          })\n        }\n\n        // 통계값 계산\n        const values = dataPoints.map(d => d.value).sort((a, b) => a - b)\n        const min = Math.min(...values)\n        const max = Math.max(...values)\n        const q1 = values[Math.floor(values.length * 0.25)]\n        const q3 = values[Math.floor(values.length * 0.75)]\n        const median = values[Math.floor(values.length * 0.5)]\n        const mean = values.reduce((a, b) => a + b, 0) / values.length\n\n        return {\n          group: category,\n          min: min,\n          max: max,\n          q1: q1,\n          q3: q3,\n          median: median,\n          mean: mean,\n          value: mean\n        }\n      })\n    }\n  }\n\n  private generateTrendData() {\n    // 최근 30일간의 트렌드 데이터 생성\n    const today = new Date()\n    this.trendData = []\n\n    for (let i = 29; i >= 0; i--) {\n      const date = new Date(today)\n      date.setDate(date.getDate() - i)\n\n      // 기본값에서 약간의 변동을 주어 트렌드 생성\n      const baseValue = 50\n      const trend = Math.sin(i * 0.2) * 10 // 사인파로 변동\n      const noise = (Math.random() - 0.5) * 5 // 랜덤 노이즈\n      const value = Math.max(0, Math.min(100, baseValue + trend + noise))\n\n      this.trendData.push({\n        date: date.toISOString().split('T')[0], // YYYY-MM-DD 형식\n        value: Math.round(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  private onPeriodChange(period: string) {\n    this.dispatchEvent(\n      new CustomEvent('period-change', {\n        detail: { period },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.generateTrendData()\n  }\n\n  private onDateRangeChange() {\n    this.dispatchEvent(\n      new CustomEvent('date-range-change', {\n        detail: { startDate: this.startDate, endDate: this.endDate },\n        bubbles: true,\n        composed: true\n      })\n    )\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                  <kpi-boxplot-chart\n                    .data=${this.chartData}\n                    .groups=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedRegion || '전체'}\n                    .independentScale=${true}\n                  ></kpi-boxplot-chart>\n                `\n              : html`\n                  <kpi-radar-chart\n                    .data=${this.chartData}\n                    .categories=${this.chartCategories}\n                    .valueKey=${'value'}\n                    .currentGroup=${this.selectedRegion || '전체'}\n                  ></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            <kpi-trend-chart\n              .data=${this.trendData}\n              .lineColor=${'#2196f3'}\n              .strokeWidth=${2}\n              .showPoints=${true}\n              .pointRadius=${4}\n            ></kpi-trend-chart>\n          </div>\n          <div class=\"trend-table\">\n            <table style=\"width: 100%; border-collapse: collapse; font-size: 0.85rem;\">\n              <thead>\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.slice(-10).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}\n                      </td>\n                      <td style=\"padding: 8px; text-align: center; font-size: 0.85rem;\">\n                        <span style=\"color: ${item.color};\">\n                          ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'}\n                        </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

@@ -16,7 +16,9 @@ export declare class KpiDashboardMapPage extends PageView {
     connectedCallback(): void;
     private setupKeyboardEvents;
     fetchDashboardData(): Promise<void>;
-    private generateMapData;
+    fetchDashboardDataFallback(): Promise<void>;
+    private generateMapDataFromKpiValues;
+    private generateMapDataFromStatistics;
     private downloadExcel;
     private onRegionClick;
     private closeRegionPopup;