@things-factory/kpi 9.0.29 → 9.0.30

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

@@ -0,0 +1,813 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import './components/kpi-map-panel';
+// Google Maps API 키 (실제 구현 시 환경변수에서 가져와야 함)
+// 개발 중에는 무료 API 키를 사용하거나, 키 없이 테스트용 지도 사용
+const GOOGLE_MAPS_API_KEY = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA'; // 실제 API 키가 없으므로 빈 문자열로 설정
+let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
+    constructor() {
+        super(...arguments);
+        this.loading = true;
+        this.error = '';
+        this.selectedCategory = '전체 KPI';
+        this.selectedChartType = 'boxplot';
+        this.selectedPeriod = '월';
+        this.startDate = '전체';
+        this.endDate = '전체';
+        this.nationalData = null;
+        this.seoulData = null;
+        this.mapData = null;
+        // 팝업 관련 상태 추가
+        this.selectedRegion = null;
+        this.showRegionPopup = false;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        overflow: hidden;
+
+        position: relative;
+      }
+      .dashboard-container {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+      .left-panel {
+        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);
+      }
+      .left-panel-content {
+        padding: 24px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      .right-panel {
+        flex: 1;
+        background: #f8f9fa;
+        overflow: hidden;
+        position: relative;
+        min-height: 500px;
+      }
+      .map-overlay {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 8px;
+        padding: 12px 16px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(4px);
+      }
+      .category-buttons {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+      .category-button {
+        padding: 6px 12px;
+        border: 1px solid #ced4da;
+        background: #fff;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.2s;
+        white-space: nowrap;
+      }
+      .category-button.active {
+        background: #667eea;
+        color: white;
+        border-color: #667eea;
+      }
+      .category-button:hover {
+        background: #f8f9fa;
+      }
+      .category-button.active:hover {
+        background: #5a6fd8;
+      }
+      .region-popup {
+        position: absolute;
+        top: 0;
+        left: 402px; /* 왼쪽 패널 너비와 동일 */
+        width: 400px; /* 왼쪽 패널과 동일한 너비 */
+        height: 100%; /* 전체 화면 높이 */
+        background: #fff;
+        border-right: 1px solid #e0e0e0;
+        z-index: 1000;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+      }
+      .popup-content {
+        padding: 24px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      .popup-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;
+      }
+      .popup-title {
+        font-size: 1.2rem;
+        font-weight: bold;
+        color: #333;
+      }
+      .popup-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;
+      }
+      .popup-close:hover {
+        background: #e9ecef;
+        color: #333;
+      }
+      .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;
+      }
+      .period-selector {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 16px;
+      }
+      .period-button {
+        padding: 6px 12px;
+        border: 1px solid #ced4da;
+        background: #fff;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.2s;
+      }
+      .period-button.active {
+        background: #667eea;
+        color: white;
+        border-color: #667eea;
+      }
+      .date-range-selector {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 16px;
+      }
+      .date-select {
+        padding: 6px 12px;
+        border: 1px solid #ced4da;
+        border-radius: 4px;
+        background: white;
+        font-size: 0.9rem;
+      }
+      .map-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+      #map-container {
+        width: 100% !important;
+        height: 100% !important;
+        position: relative !important;
+      }
+      .region-cluster {
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .region-cluster:hover {
+        opacity: 0.9;
+        transform: scale(1.1);
+      }
+      .map-controls {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .map-control-button {
+        width: 40px;
+        height: 40px;
+        background: white;
+        border: 1px solid #ced4da;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .map-control-button:hover {
+        background: #f8f9fa;
+      }
+      .map-scale {
+        position: absolute;
+        bottom: 16px;
+        right: 16px;
+        background: white;
+        padding: 8px 12px;
+        border-radius: 6px;
+        border: 1px solid #ced4da;
+        font-size: 0.8rem;
+        color: #666;
+      }
+      .region-tooltip {
+        position: absolute;
+        background: white;
+        border: 1px solid #ced4da;
+        border-radius: 6px;
+        padding: 8px 12px;
+        font-size: 0.9rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+        pointer-events: none;
+      }
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: #666;
+        font-size: 1rem;
+      }
+      .error {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: #d32f2f;
+        font-size: 1rem;
+      }
+    `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchDashboardData();
+        this.setupKeyboardEvents();
+    }
+    setupKeyboardEvents() {
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape' && this.showRegionPopup) {
+                this.closeRegionPopup();
+            }
+        });
+    }
+    async fetchDashboardData() {
+        this.loading = true;
+        this.error = '';
+        try {
+            // 전국 KPI 데이터 조회
+            const nationalResponse = await client.query({
+                query: gql `
+          query {
+            kpiStatistics {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                standardDeviation
+                kpi {
+                  id
+                  name
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `
+            });
+            this.nationalData = nationalResponse.data.kpiStatistics.items || [];
+            // 서울특별시 데이터는 전국 데이터에서 필터링
+            this.seoulData = this.nationalData.filter((item) => item.kpi?.category?.name === '서울특별시');
+            // 지도 데이터 생성 (시도별)
+            this.generateMapData();
+            // 지도 데이터가 생성된 후 지도 초기화
+            if (this.mapData && this.mapData.length > 0) {
+                console.log('지도 데이터 생성 완료');
+            }
+        }
+        catch (e) {
+            console.error('대시보드 데이터를 불러오지 못했습니다:', e);
+            this.error = '대시보드 데이터를 불러오지 못했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    generateMapData() {
+        // 시도별 샘플 데이터 생성 (실제 좌표 포함)
+        this.mapData = [
+            { region: '강원', kpi: 101.5, change: -0.08, trend: 'down', lat: 37.8228, lng: 128.1555 },
+            { region: '경북', kpi: 94.8, change: -0.1, trend: 'down', lat: 36.4919, lng: 128.8889 },
+            { region: '대구', kpi: 79.4, change: -0.2, trend: 'down', lat: 35.8714, lng: 128.6014 },
+            { region: '경남', kpi: 92.1, change: -0.08, trend: 'down', lat: 35.4606, lng: 128.2132 },
+            { region: '부산', kpi: 85.2, change: -0.18, trend: 'down', lat: 35.1796, lng: 129.0756 },
+            { region: '울산', kpi: 91.4, change: 0.19, trend: 'up', lat: 35.5384, lng: 129.3114 },
+            { region: '서울', kpi: 98.1, change: 1.28, trend: 'up', lat: 37.5665, lng: 126.978 },
+            { region: '인천', kpi: 87.3, change: 0.05, trend: 'up', lat: 37.4563, lng: 126.7052 },
+            { region: '대전', kpi: 89.7, change: -0.12, trend: 'down', lat: 36.3504, lng: 127.3845 },
+            { region: '광주', kpi: 91.1, change: -0.16, trend: 'down', lat: 35.1595, lng: 126.8526 },
+            { region: '전북', kpi: 99.3, change: 0.15, trend: 'up', lat: 35.7175, lng: 127.153 },
+            { region: '전남', kpi: 91.8, change: -0.12, trend: 'down', lat: 34.8679, lng: 126.991 },
+            { region: '충북', kpi: 93.2, change: 0.08, trend: 'up', lat: 36.8, lng: 127.7 },
+            { region: '충남', kpi: 88.9, change: -0.05, trend: 'down', lat: 36.5184, lng: 126.8 },
+            { region: '제주', kpi: 95.6, change: 0.22, trend: 'up', lat: 33.4996, lng: 126.5312 }
+        ];
+    }
+    onCategoryChange(event) {
+        const target = event.target;
+        this.selectedCategory = target.value;
+        this.fetchDashboardData();
+    }
+    onChartTypeChange(type) {
+        this.selectedChartType = type;
+    }
+    onPeriodChange(period) {
+        this.selectedPeriod = period;
+    }
+    onDateRangeChange() {
+        // 날짜 범위 변경 처리
+    }
+    downloadExcel() {
+        // 엑셀 다운로드 기능
+        console.log('엑셀 다운로드');
+    }
+    onRegionClick(region) {
+        this.selectedRegion = region;
+        this.showRegionPopup = true;
+        this.fetchRegionData(region);
+    }
+    closeRegionPopup() {
+        this.showRegionPopup = false;
+        this.selectedRegion = null;
+    }
+    async fetchRegionData(region) {
+        try {
+            // 선택된 지역의 KPI 데이터 조회
+            const response = await client.query({
+                query: gql `
+          query GetRegionKpiData($region: String) {
+            kpiStatistics(filters: [{ field: "kpi.category.name", operator: "eq", value: $region }]) {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                standardDeviation
+                kpi {
+                  id
+                  name
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `,
+                variables: { region }
+            });
+            this.seoulData = response.data.kpiStatistics.items || [];
+        }
+        catch (e) {
+            console.error('지역 데이터를 불러오지 못했습니다:', e);
+        }
+    }
+    getChangeRateClass(change) {
+        if (change > 0)
+            return 'change-up';
+        if (change < 0)
+            return 'change-down';
+        return 'change-neutral';
+    }
+    getChangeIcon(change) {
+        if (change > 0)
+            return '▲';
+        if (change < 0)
+            return '▼';
+        return '─';
+    }
+    get context() {
+        return {
+            title: '전국 KPI 대시보드',
+            description: '전국 및 지역별 KPI 성과 분석 대시보드'
+        };
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
+          <div style="color: #666; font-size: 1.1rem;">데이터 로딩 중...</div>
+        </div>
+      `;
+        }
+        if (this.error) {
+            return html `
+        <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
+          <div style="color: #d32f2f; font-size: 1.1rem;">${this.error}</div>
+        </div>
+      `;
+        }
+        return html `
+      <div class="dashboard-container">
+        <!-- 좌측 패널: 전국 KPI -->
+        <div class="left-panel">
+          <div class="panel-header">
+            <div class="panel-title">전국 KPI</div>
+            <button class="panel-close" style="visibility: hidden;">×</button>
+          </div>
+          <div class="left-panel-content">
+            <!-- KPI 카테고리 선택 -->
+            <div style="margin-bottom: 20px;">
+              <select
+                .value=${this.selectedCategory}
+                @change=${this.onCategoryChange}
+                style="width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 6px; background: white;"
+              >
+                <option value="전체 KPI">전체 KPI</option>
+                <option value="일정 성과">일정 성과</option>
+                <option value="비용 성과">비용 성과</option>
+                <option value="품질 성과">품질 성과</option>
+                <option value="안전 성과">안전 성과</option>
+                <option value="환경 성과">환경 성과</option>
+              </select>
+            </div>
+
+            <!-- 종합 성과 -->
+            <div class="chart-section">
+              <div class="sub-title">종합 성과</div>
+              <div class="chart-toggle">
+                <button
+                  class="toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}"
+                  @click=${() => this.onChartTypeChange('boxplot')}
+                >
+                  박스플롯
+                </button>
+                <button
+                  class="toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}"
+                  @click=${() => this.onChartTypeChange('radar')}
+                >
+                  레이더차트
+                </button>
+              </div>
+              <div class="chart-container">
+                ${this.selectedChartType === 'boxplot'
+            ? html `<div style="color: #666;">박스플롯 차트</div>`
+            : html `<div style="color: #666;">레이더 차트</div>`}
+              </div>
+            </div>
+
+            <!-- 시도별 성과 -->
+            <div class="chart-section">
+              <div class="sub-title">시도별 성과</div>
+              <table class="performance-table">
+                <thead>
+                  <tr>
+                    <th>지역명</th>
+                    <th>KPI</th>
+                    <th>변동률(%)</th>
+                    <th>성과 추이</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${this.mapData?.slice(0, 5).map((item) => html `
+                      <tr
+                        style="cursor: pointer; transition: background-color 0.2s;"
+                        @click=${() => this.onRegionClick(item.region)}
+                        @mouseenter=${(e) => (e.target.style.backgroundColor = '#f8f9fa')}
+                        @mouseleave=${(e) => (e.target.style.backgroundColor = '')}
+                      >
+                        <td>${item.region}</td>
+                        <td>${item.kpi}</td>
+                        <td>
+                          <div class="change-rate ${this.getChangeRateClass(item.change)}">
+                            ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%
+                          </div>
+                        </td>
+                        <td>
+                          <div class="trend-chart">
+                            ${item.trend === 'up' ? '↗' : item.trend === 'down' ? '↘' : '→'}
+                          </div>
+                        </td>
+                      </tr>
+                    `)}
+                </tbody>
+              </table>
+              <button class="download-button" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 우측 패널: 지도 -->
+        <kpi-map-panel
+          class="right-panel"
+          .selectedCategory=${this.selectedCategory}
+          .mapData=${this.mapData}
+          @category-change=${(e) => {
+            this.selectedCategory = e.detail.category;
+            this.fetchDashboardData();
+        }}
+        ></kpi-map-panel>
+
+        <!-- 지역 상세 팝업 -->
+        ${this.showRegionPopup
+            ? html `
+              <div class="region-popup">
+                <div class="panel-header">
+                  <div class="panel-title">${this.selectedRegion} KPI</div>
+                  <button class="panel-close" @click=${this.closeRegionPopup}>×</button>
+                </div>
+                <div class="popup-content">
+                  <!-- 종합 성과 -->
+                  <div class="chart-section">
+                    <div class="sub-title">종합 성과</div>
+                    <div class="chart-toggle">
+                      <button
+                        class="toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}"
+                        @click=${() => this.onChartTypeChange('boxplot')}
+                      >
+                        박스플롯
+                      </button>
+                      <button
+                        class="toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}"
+                        @click=${() => this.onChartTypeChange('radar')}
+                      >
+                        레이더차트
+                      </button>
+                    </div>
+                    <div class="chart-container">
+                      ${this.selectedChartType === 'boxplot'
+                ? html `<div style="color: #666;">${this.selectedRegion} 박스플롯</div>`
+                : html `<div style="color: #666;">${this.selectedRegion} 레이더 차트</div>`}
+                    </div>
+                  </div>
+
+                  <!-- 기간별 성과 추이 -->
+                  <div class="chart-section">
+                    <div class="sub-title">기간별 성과 추이</div>
+                    <div class="period-selector">
+                      <button
+                        class="period-button ${this.selectedPeriod === '월' ? 'active' : ''}"
+                        @click=${() => this.onPeriodChange('월')}
+                      >
+                        월
+                      </button>
+                      <button
+                        class="period-button ${this.selectedPeriod === '년' ? 'active' : ''}"
+                        @click=${() => this.onPeriodChange('년')}
+                      >
+                        년
+                      </button>
+                      <button
+                        class="period-button ${this.selectedPeriod === '전체' ? 'active' : ''}"
+                        @click=${() => this.onPeriodChange('전체')}
+                      >
+                        전체
+                      </button>
+                    </div>
+                    <div class="date-range-selector">
+                      <select class="date-select" .value=${this.startDate} @change=${this.onDateRangeChange}>
+                        <option value="전체">전체</option>
+                        <option value="2024">2024</option>
+                        <option value="2023">2023</option>
+                      </select>
+                      <span>~</span>
+                      <select class="date-select" .value=${this.endDate} @change=${this.onDateRangeChange}>
+                        <option value="전체">전체</option>
+                        <option value="12">12월</option>
+                        <option value="11">11월</option>
+                      </select>
+                    </div>
+                    <div class="chart-container">
+                      <div style="color: #666;">데이터 차트(꺾은선 그래프) 또는 테이블</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedCategory", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedChartType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedPeriod", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "startDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "endDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "nationalData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "seoulData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "mapData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedRegion", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "showRegionPopup", void 0);
+KpiDashboardMapPage = __decorate([
+    customElement('kpi-dashboard-map')
+], KpiDashboardMapPage);
+export { KpiDashboardMapPage };
+//# sourceMappingURL=kpi-dashboard-map.js.map