@things-factory/kpi 9.0.31 → 9.0.32

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
 import '../../../charts/kpi-radar-chart.js';
 import '../../../charts/kpi-boxplot-chart.js';
 import '../../../charts/kpi-mini-trend-chart.js';
@@ -12,166 +13,189 @@ let KpiLeftPanel = class KpiLeftPanel extends LitElement {
         this.mapData = [];
         this.chartData = [];
         this.chartCategories = [];
-    }
-    static { this.styles = css `
-    :host {
-      display: block;
-      width: 400px;
-      background: #fff;
-      border-right: 1px solid #e0e0e0;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-    }
-    .panel-content {
-      padding: 24px;
-      overflow-y: auto;
-      flex: 1;
-    }
-    .panel-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20px 24px;
-      border-bottom: 1px solid #e0e0e0;
-      background: #fff;
-      height: 70px;
-      box-sizing: border-box;
-    }
-    .panel-title {
-      font-size: 1.3rem;
-      font-weight: bold;
-      color: #333;
-      margin: 0;
-    }
-    .panel-close {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: #fff;
-      border-radius: 50%;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.2rem;
-      color: #666;
-      transition: all 0.2s;
-    }
-    .panel-close:hover {
-      background: #e9ecef;
-      color: #333;
-    }
-    .sub-title {
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 16px;
-      color: #495057;
-    }
-    .chart-section {
-      background: #f8f9fa;
-      border-radius: 8px;
-      padding: 16px;
-      margin-bottom: 20px;
-    }
-    .chart-toggle {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 16px;
-    }
-    .toggle-button {
-      padding: 8px 16px;
-      border: 1px solid #ced4da;
-      background: #fff;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: all 0.2s;
-    }
-    .toggle-button.active {
-      background: #667eea;
-      color: white;
-      border-color: #667eea;
-    }
-    .chart-container {
-      height: 300px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: white;
-      border-radius: 6px;
-      border: 1px solid #e9ecef;
-    }
-    .performance-table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-top: 16px;
-    }
-    .performance-table th,
-    .performance-table td {
-      padding: 12px 8px;
-      text-align: left;
-      border-bottom: 1px solid #e9ecef;
-    }
-    .performance-table th {
-      background: #f8f9fa;
-      font-weight: 600;
-      color: #495057;
-    }
-    .performance-table td {
-      color: #333;
-    }
-    .change-rate {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .change-up {
-      color: #dc3545;
-    }
-    .change-down {
-      color: #198754;
-    }
-    .change-neutral {
-      color: #6c757d;
-    }
-    .trend-chart {
-      width: 60px;
-      height: 30px;
-      background: #f8f9fa;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.8rem;
-      color: #666;
-    }
-    .download-button {
-      margin-top: 16px;
-      padding: 8px 16px;
-      background: #28a745;
-      color: white;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .download-button:hover {
-      background: #218838;
-    }
-    .category-select {
-      width: 100%;
-      padding: 8px 12px;
-      border: 1px solid #ced4da;
-      border-radius: 6px;
-      background: white;
-      margin-bottom: 20px;
-    }
-  `; }
+        // 행정안전부 행정구역코드 순서
+        this.regionOrder = [
+            '서울특별시',
+            '부산광역시',
+            '대구광역시',
+            '인천광역시',
+            '광주광역시',
+            '대전광역시',
+            '울산광역시',
+            '세종특별자치시',
+            '경기도',
+            '강원도',
+            '충청북도',
+            '충청남도',
+            '전라북도',
+            '전라남도',
+            '경상북도',
+            '경상남도',
+            '제주특별자치도'
+        ];
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        width: 400px;
+        background: #fff;
+        border-right: 1px solid #e0e0e0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+      }
+      .panel-content {
+        padding: 20px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      .panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+        height: 70px;
+        box-sizing: border-box;
+      }
+      .panel-title {
+        font-size: 1.3rem;
+        font-weight: bold;
+        color: #333;
+        margin: 0;
+      }
+      .panel-close {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        color: #666;
+        transition: all 0.2s;
+      }
+      .panel-close:hover {
+        background: #e9ecef;
+        color: #333;
+      }
+      .sub-title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: #495057;
+      }
+      .chart-section {
+        background: #f8f9fa;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 20px;
+      }
+      .chart-toggle {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 16px;
+      }
+      .toggle-button {
+        padding: 8px 16px;
+        border: 1px solid #ced4da;
+        background: #fff;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        transition: all 0.2s;
+      }
+      .toggle-button.active {
+        background: #667eea;
+        color: white;
+        border-color: #667eea;
+      }
+      .chart-container {
+        height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: white;
+        border-radius: 6px;
+        border: 1px solid #e9ecef;
+      }
+      .performance-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 16px;
+      }
+      .performance-table th,
+      .performance-table td {
+        padding: 12px 8px;
+        text-align: left;
+        border-bottom: 1px solid #e9ecef;
+      }
+      .performance-table th {
+        background: #f8f9fa;
+        font-weight: 600;
+        color: #495057;
+      }
+      .performance-table td {
+        color: #333;
+      }
+      .change-rate {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .change-up {
+        color: #dc3545;
+      }
+      .change-down {
+        color: #198754;
+      }
+      .change-neutral {
+        color: #6c757d;
+      }
+      .trend-chart {
+        width: 60px;
+        height: 30px;
+        background: #f8f9fa;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.8rem;
+        color: #666;
+      }
+      .download-button {
+        margin-top: 16px;
+        padding: 8px 16px;
+        background: #28a745;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .download-button:hover {
+        background: #218838;
+      }
+      .category-select {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ced4da;
+        border-radius: 6px;
+        background: white;
+        margin-bottom: 20px;
+      }
+    `
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         this.generateChartData();
@@ -260,6 +284,17 @@ let KpiLeftPanel = class KpiLeftPanel extends LitElement {
             composed: true
         }));
     }
+    // regionOrder에 따라 지역 데이터를 정렬
+    getSortedRegionData() {
+        // 모든 시도에 대한 데이터 생성
+        return this.regionOrder.map(regionName => ({
+            region: regionName,
+            kpi: (Math.random() * 30 + 70).toFixed(1), // 70-100 범위
+            change: (Math.random() * 0.4 - 0.2).toFixed(2), // -0.2 ~ 0.2 범위
+            lat: 36.5,
+            lng: 127.5
+        }));
+    }
     getChangeRateClass(change) {
         if (change > 0)
             return 'change-up';
@@ -316,6 +351,7 @@ let KpiLeftPanel = class KpiLeftPanel extends LitElement {
                     .groups=${this.chartCategories}
                     .valueKey=${'value'}
                     .currentGroup=${this.selectedCategory}
+                    .independentScale=${true}
                   ></kpi-boxplot-chart>
                 `
             : html `
@@ -342,7 +378,7 @@ let KpiLeftPanel = class KpiLeftPanel extends LitElement {
               </tr>
             </thead>
             <tbody>
-              ${this.mapData?.slice(0, 5).map((item) => html `
+              ${this.getSortedRegionData().map((item) => html `
                   <tr
                     style="cursor: pointer; transition: background-color 0.2s;"
                     @click=${() => this.onRegionClick(item.region)}

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

@@ -1 +1 @@
-{"version":3,"file":"kpi-left-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-left-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,oCAAoC,CAAA;AAC3C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,yCAAyC,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAiKuB,qBAAgB,GAAG,QAAQ,CAAA;QAC3B,sBAAiB,GAAG,SAAS,CAAA;QAC9B,YAAO,GAAU,EAAE,CAAA;QAE7B,cAAS,GAAU,EAAE,CAAA;QACrB,oBAAe,GAAa,EAAE,CAAA;IAgOjD,CAAC;aArYQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8JlB,AA9JY,CA8JZ;IASD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAEO,iBAAiB,CAAC,MAAc;QACtC,yBAAyB;QACzB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA,CAAC,WAAW;QACrD,MAAM,SAAS,GAAa,EAAE,CAAA;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,CAAC,UAAU;YAC9C,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,CAAC,SAAS;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;YACnE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;QACnC,CAAC;QAED,OAAO,SAAS,CAAA;IAClB,CAAC;IAEO,iBAAiB;QACvB,yBAAyB;QACzB,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;QAChE,IAAI,CAAC,eAAe,GAAG,UAAU,CAAA;QAEjC,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,EAAE,CAAC;YACvC,iBAAiB;YACjB,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBAC3C,QAAQ;gBACR,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,WAAW;gBAC3C,KAAK,EAAE,IAAI,CAAC,gBAAgB;aAC7B,CAAC,CAAC,CAAA;QACL,CAAC;aAAM,CAAC;YACN,eAAe;YACf,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACzC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA,CAAC,WAAW;gBACrD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAA,CAAC,MAAM;gBAE3C,2BAA2B;gBAC3B,MAAM,UAAU,GAAuC,EAAE,CAAA;gBACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC5B,UAAU,CAAC,IAAI,CAAC;wBACd,KAAK,EAAE,SAAS,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,SAAS;wBACpD,KAAK,EAAE,QAAQ;qBAChB,CAAC,CAAA;gBACJ,CAAC;gBAED,SAAS;gBACT,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;gBAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;gBAC/B,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;gBACnD,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;gBACnD,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAA;gBACtD,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAA;gBAE9D,OAAO;oBACL,KAAK,EAAE,QAAQ;oBACf,GAAG,EAAE,GAAG;oBACR,GAAG,EAAE,GAAG;oBACR,EAAE,EAAE,EAAE;oBACN,EAAE,EAAE,EAAE;oBACN,MAAM,EAAE,MAAM;oBACd,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE,IAAI;iBACZ,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAA;QAChD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAEO,iBAAiB,CAAC,IAAY;QACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;QAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE,EAAE,MAAM,EAAE;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,kBAAkB,CAAC,MAAc;QACvC,IAAI,MAAM,GAAG,CAAC;YAAE,OAAO,WAAW,CAAA;QAClC,IAAI,MAAM,GAAG,CAAC;YAAE,OAAO,aAAa,CAAA;QACpC,OAAO,gBAAgB,CAAA;IACzB,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,MAAM,GAAG,CAAC;YAAE,OAAO,GAAG,CAAA;QAC1B,IAAI,MAAM,GAAG,CAAC;YAAE,OAAO,GAAG,CAAA;QAC1B,OAAO,GAAG,CAAA;IACZ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;iDAOkC,IAAI,CAAC,gBAAgB,YAAY,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;qCAclE,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAClE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;;;;;qCAKzB,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAChE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;;;;;;cAM9C,IAAI,CAAC,iBAAiB,KAAK,SAAS;YACpC,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;8BACZ,IAAI,CAAC,eAAe;gCAClB,OAAO;oCACH,IAAI,CAAC,gBAAgB;;iBAExC;YACH,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;kCACR,IAAI,CAAC,eAAe;gCACtB,OAAO;oCACH,IAAI,CAAC,gBAAgB;;iBAExC;;;;;;;;;;;;;;;;;gBAiBD,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAC7B,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAA;;;6BAGN,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;kCAChC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAsB,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;kCAC3E,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAsB,CAAC,KAAK,CAAC,eAAe,GAAG,EAAE,CAAC;;0BAE5E,IAAI,CAAC,MAAM;0BACX,IAAI,CAAC,GAAG;;gDAEc,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;0BAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;gCAKjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC;iCAClC,EAAE;kCACD,EAAE;qCACC,SAAS;uCACP,GAAG;sCACJ,IAAI;uCACH,GAAG;;;;iBAIzB,CACF;;;mDAGoC,IAAI,CAAC,aAAa;;;KAGhE,CAAA;IACH,CAAC;;AApO2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAA8B;AAC9B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6CAAoB;AAE7B;IAAhB,KAAK,EAAE;;+CAA8B;AACrB;IAAhB,KAAK,EAAE;;qDAAuC;AAtKpC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsYxB","sourcesContent":["import { LitElement, html, css } 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-mini-trend-chart.js'\n\n@customElement('kpi-left-panel')\nexport class KpiLeftPanel extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      width: 400px;\n      background: #fff;\n      border-right: 1px solid #e0e0e0;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n    }\n    .panel-content {\n      padding: 24px;\n      overflow-y: auto;\n      flex: 1;\n    }\n    .panel-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    .panel-title {\n      font-size: 1.3rem;\n      font-weight: bold;\n      color: #333;\n      margin: 0;\n    }\n    .panel-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    .panel-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    .performance-table {\n      width: 100%;\n      border-collapse: collapse;\n      margin-top: 16px;\n    }\n    .performance-table th,\n    .performance-table td {\n      padding: 12px 8px;\n      text-align: left;\n      border-bottom: 1px solid #e9ecef;\n    }\n    .performance-table th {\n      background: #f8f9fa;\n      font-weight: 600;\n      color: #495057;\n    }\n    .performance-table td {\n      color: #333;\n    }\n    .change-rate {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .change-up {\n      color: #dc3545;\n    }\n    .change-down {\n      color: #198754;\n    }\n    .change-neutral {\n      color: #6c757d;\n    }\n    .trend-chart {\n      width: 60px;\n      height: 30px;\n      background: #f8f9fa;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 0.8rem;\n      color: #666;\n    }\n    .download-button {\n      margin-top: 16px;\n      padding: 8px 16px;\n      background: #28a745;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 0.9rem;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .download-button:hover {\n      background: #218838;\n    }\n    .category-select {\n      width: 100%;\n      padding: 8px 12px;\n      border: 1px solid #ced4da;\n      border-radius: 6px;\n      background: white;\n      margin-bottom: 20px;\n    }\n  `\n\n  @property({ type: String }) selectedCategory = '전체 KPI'\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: Array }) mapData: any[] = []\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.generateChartData()\n  }\n\n  private generateTrendData(region: string): number[] {\n    // 각 지역별로 7일간의 트렌드 데이터 생성\n    const baseValue = Math.random() * 30 + 60 // 60-90 범위\n    const trendData: number[] = []\n\n    for (let i = 0; i < 7; i++) {\n      const trend = Math.sin(i * 0.5) * 5 // 사인파로 변동\n      const noise = (Math.random() - 0.5) * 3 // 랜덤 노이즈\n      const value = Math.max(0, Math.min(100, baseValue + trend + noise))\n      trendData.push(Math.round(value))\n    }\n\n    return trendData\n  }\n\n  private generateChartData() {\n    // 선택된 카테고리에 따른 차트 데이터 생성\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.selectedCategory\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 onCategoryChange(event: Event) {\n    const target = event.target as HTMLSelectElement\n    this.dispatchEvent(\n      new CustomEvent('category-change', {\n        detail: { category: target.value },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.generateChartData()\n  }\n\n  private onChartTypeChange(type: string) {\n    this.selectedChartType = type\n    this.generateChartData()\n  }\n\n  private onRegionClick(region: string) {\n    this.dispatchEvent(\n      new CustomEvent('region-click', {\n        detail: { region },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private downloadExcel() {\n    this.dispatchEvent(\n      new CustomEvent('download-excel', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private getChangeRateClass(change: number): string {\n    if (change > 0) return 'change-up'\n    if (change < 0) return 'change-down'\n    return 'change-neutral'\n  }\n\n  private getChangeIcon(change: number): string {\n    if (change > 0) return '▲'\n    if (change < 0) return '▼'\n    return '─'\n  }\n\n  render() {\n    return html`\n      <div class=\"panel-header\">\n        <div class=\"panel-title\">전국 KPI</div>\n        <button class=\"panel-close\" style=\"visibility: hidden;\">×</button>\n      </div>\n      <div class=\"panel-content\">\n        <!-- KPI 카테고리 선택 -->\n        <select class=\"category-select\" .value=${this.selectedCategory} @change=${this.onCategoryChange}>\n          <option value=\"전체 KPI\">전체 KPI</option>\n          <option value=\"일정 성과\">일정 성과</option>\n          <option value=\"비용 성과\">비용 성과</option>\n          <option value=\"품질 성과\">품질 성과</option>\n          <option value=\"안전 성과\">안전 성과</option>\n          <option value=\"환경 성과\">환경 성과</option>\n        </select>\n\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.selectedCategory}\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.selectedCategory}\n                  ></kpi-radar-chart>\n                `}\n          </div>\n        </div>\n\n        <!-- 시도별 성과 -->\n        <div class=\"chart-section\">\n          <div class=\"sub-title\">시도별 성과</div>\n          <table class=\"performance-table\">\n            <thead>\n              <tr>\n                <th>지역명</th>\n                <th>KPI</th>\n                <th>변동률(%)</th>\n                <th>성과 추이</th>\n              </tr>\n            </thead>\n            <tbody>\n              ${this.mapData?.slice(0, 5).map(\n                (item: any) => html`\n                  <tr\n                    style=\"cursor: pointer; transition: background-color 0.2s;\"\n                    @click=${() => this.onRegionClick(item.region)}\n                    @mouseenter=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '#f8f9fa')}\n                    @mouseleave=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '')}\n                  >\n                    <td>${item.region}</td>\n                    <td>${item.kpi}</td>\n                    <td>\n                      <div class=\"change-rate ${this.getChangeRateClass(item.change)}\">\n                        ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%\n                      </div>\n                    </td>\n                    <td>\n                      <kpi-mini-trend-chart\n                        .data=${this.generateTrendData(item.region)}\n                        .width=${60}\n                        .height=${30}\n                        .lineColor=${'#2196f3'}\n                        .strokeWidth=${1.5}\n                        .showPoints=${true}\n                        .pointRadius=${1.5}\n                      ></kpi-mini-trend-chart>\n                    </td>\n                  </tr>\n                `\n              )}\n            </tbody>\n          </table>\n          <button class=\"download-button\" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"kpi-left-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-left-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport '../../../charts/kpi-radar-chart.js'\nimport '../../../charts/kpi-boxplot-chart.js'\nimport '../../../charts/kpi-mini-trend-chart.js'\n\n@customElement('kpi-left-panel')\nexport class KpiLeftPanel extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        width: 400px;\n        background: #fff;\n        border-right: 1px solid #e0e0e0;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n      }\n      .panel-content {\n        padding: 20px;\n        overflow-y: auto;\n        flex: 1;\n      }\n      .panel-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      .panel-title {\n        font-size: 1.3rem;\n        font-weight: bold;\n        color: #333;\n        margin: 0;\n      }\n      .panel-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      .panel-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      .performance-table {\n        width: 100%;\n        border-collapse: collapse;\n        margin-top: 16px;\n      }\n      .performance-table th,\n      .performance-table td {\n        padding: 12px 8px;\n        text-align: left;\n        border-bottom: 1px solid #e9ecef;\n      }\n      .performance-table th {\n        background: #f8f9fa;\n        font-weight: 600;\n        color: #495057;\n      }\n      .performance-table td {\n        color: #333;\n      }\n      .change-rate {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n      .change-up {\n        color: #dc3545;\n      }\n      .change-down {\n        color: #198754;\n      }\n      .change-neutral {\n        color: #6c757d;\n      }\n      .trend-chart {\n        width: 60px;\n        height: 30px;\n        background: #f8f9fa;\n        border-radius: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 0.8rem;\n        color: #666;\n      }\n      .download-button {\n        margin-top: 16px;\n        padding: 8px 16px;\n        background: #28a745;\n        color: white;\n        border: none;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .download-button:hover {\n        background: #218838;\n      }\n      .category-select {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ced4da;\n        border-radius: 6px;\n        background: white;\n        margin-bottom: 20px;\n      }\n    `\n  ]\n\n  @property({ type: String }) selectedCategory = '전체 KPI'\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: Array }) mapData: any[] = []\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n\n  // 행정안전부 행정구역코드 순서\n  private readonly regionOrder = [\n    '서울특별시',\n    '부산광역시',\n    '대구광역시',\n    '인천광역시',\n    '광주광역시',\n    '대전광역시',\n    '울산광역시',\n    '세종특별자치시',\n    '경기도',\n    '강원도',\n    '충청북도',\n    '충청남도',\n    '전라북도',\n    '전라남도',\n    '경상북도',\n    '경상남도',\n    '제주특별자치도'\n  ]\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.generateChartData()\n  }\n\n  private generateTrendData(region: string): number[] {\n    // 각 지역별로 7일간의 트렌드 데이터 생성\n    const baseValue = Math.random() * 30 + 60 // 60-90 범위\n    const trendData: number[] = []\n\n    for (let i = 0; i < 7; i++) {\n      const trend = Math.sin(i * 0.5) * 5 // 사인파로 변동\n      const noise = (Math.random() - 0.5) * 3 // 랜덤 노이즈\n      const value = Math.max(0, Math.min(100, baseValue + trend + noise))\n      trendData.push(Math.round(value))\n    }\n\n    return trendData\n  }\n\n  private generateChartData() {\n    // 선택된 카테고리에 따른 차트 데이터 생성\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.selectedCategory\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 onCategoryChange(event: Event) {\n    const target = event.target as HTMLSelectElement\n    this.dispatchEvent(\n      new CustomEvent('category-change', {\n        detail: { category: target.value },\n        bubbles: true,\n        composed: true\n      })\n    )\n    this.generateChartData()\n  }\n\n  private onChartTypeChange(type: string) {\n    this.selectedChartType = type\n    this.generateChartData()\n  }\n\n  private onRegionClick(region: string) {\n    this.dispatchEvent(\n      new CustomEvent('region-click', {\n        detail: { region },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private downloadExcel() {\n    this.dispatchEvent(\n      new CustomEvent('download-excel', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  // regionOrder에 따라 지역 데이터를 정렬\n  private getSortedRegionData() {\n    // 모든 시도에 대한 데이터 생성\n    return this.regionOrder.map(regionName => ({\n      region: regionName,\n      kpi: (Math.random() * 30 + 70).toFixed(1), // 70-100 범위\n      change: (Math.random() * 0.4 - 0.2).toFixed(2), // -0.2 ~ 0.2 범위\n      lat: 36.5,\n      lng: 127.5\n    }))\n  }\n\n  private getChangeRateClass(change: number): string {\n    if (change > 0) return 'change-up'\n    if (change < 0) return 'change-down'\n    return 'change-neutral'\n  }\n\n  private getChangeIcon(change: number): string {\n    if (change > 0) return '▲'\n    if (change < 0) return '▼'\n    return '─'\n  }\n\n  render() {\n    return html`\n      <div class=\"panel-header\">\n        <div class=\"panel-title\">전국 KPI</div>\n        <button class=\"panel-close\" style=\"visibility: hidden;\">×</button>\n      </div>\n      <div class=\"panel-content\">\n        <!-- KPI 카테고리 선택 -->\n        <select class=\"category-select\" .value=${this.selectedCategory} @change=${this.onCategoryChange}>\n          <option value=\"전체 KPI\">전체 KPI</option>\n          <option value=\"일정 성과\">일정 성과</option>\n          <option value=\"비용 성과\">비용 성과</option>\n          <option value=\"품질 성과\">품질 성과</option>\n          <option value=\"안전 성과\">안전 성과</option>\n          <option value=\"환경 성과\">환경 성과</option>\n        </select>\n\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.selectedCategory}\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.selectedCategory}\n                  ></kpi-radar-chart>\n                `}\n          </div>\n        </div>\n\n        <!-- 시도별 성과 -->\n        <div class=\"chart-section\">\n          <div class=\"sub-title\">시도별 성과</div>\n          <table class=\"performance-table\">\n            <thead>\n              <tr>\n                <th>지역명</th>\n                <th>KPI</th>\n                <th>변동률(%)</th>\n                <th>성과 추이</th>\n              </tr>\n            </thead>\n            <tbody>\n              ${this.getSortedRegionData().map(\n                (item: any) => html`\n                  <tr\n                    style=\"cursor: pointer; transition: background-color 0.2s;\"\n                    @click=${() => this.onRegionClick(item.region)}\n                    @mouseenter=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '#f8f9fa')}\n                    @mouseleave=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '')}\n                  >\n                    <td>${item.region}</td>\n                    <td>${item.kpi}</td>\n                    <td>\n                      <div class=\"change-rate ${this.getChangeRateClass(item.change)}\">\n                        ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%\n                      </div>\n                    </td>\n                    <td>\n                      <kpi-mini-trend-chart\n                        .data=${this.generateTrendData(item.region)}\n                        .width=${60}\n                        .height=${30}\n                        .lineColor=${'#2196f3'}\n                        .strokeWidth=${1.5}\n                        .showPoints=${true}\n                        .pointRadius=${1.5}\n                      ></kpi-mini-trend-chart>\n                    </td>\n                  </tr>\n                `\n              )}\n            </tbody>\n          </table>\n          <button class=\"download-button\" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -10,6 +10,10 @@ export declare class KpiMapPanel extends LitElement {
     selectedCategory: string;
     mapData: any[];
     private map;
+    private startYear;
+    private startMonth;
+    private endYear;
+    private endMonth;
     get mapLocations(): {
         lat: any;
         lng: any;
@@ -24,5 +28,6 @@ export declare class KpiMapPanel extends LitElement {
     private zoomIn;
     private zoomOut;
     private resetView;
+    private onPeriodChange;
     render(): import("lit-html").TemplateResult<1>;
 }