@things-factory/kpi 9.0.30 → 9.0.32

package/client/pages/kpi-dashboard/kpi-dashboard-map.ts

@@ -1,21 +1,15 @@
+import gql from 'graphql-tag'
 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'
+import { notify } from '@operato/layout'
 
-// Google Maps API 사용을 위한 스크립트 로드
-declare global {
-  interface Window {
-    google: any
-  }
-}
-
-// Google Maps API 키 (실제 구현 시 환경변수에서 가져와야 함)
-// 개발 중에는 무료 API 키를 사용하거나, 키 없이 테스트용 지도 사용
-const GOOGLE_MAPS_API_KEY = 'AIzaSyBgQZb-SFqjQBC_XTxNiz0XapejNwV9PgA' // 실제 API 키가 없으므로 빈 문자열로 설정
+import './components/kpi-map-panel'
+import './components/kpi-left-panel'
+import './components/kpi-region-popup'
 
 @customElement('kpi-dashboard-map')
 export class KpiDashboardMapPage extends PageView {
@@ -25,380 +19,26 @@ export class KpiDashboardMapPage extends PageView {
       :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;
       }
     `
   ]
 
-  @state() loading = true
-  @state() error = ''
   @state() selectedCategory = '전체 KPI'
-  @state() selectedChartType = 'boxplot'
   @state() selectedPeriod = '월'
   @state() startDate = '전체'
   @state() endDate = '전체'
@@ -424,9 +64,6 @@ export class KpiDashboardMapPage extends PageView {
   }
 
   async fetchDashboardData() {
-    this.loading = true
-    this.error = ''
-
     try {
       // 전국 KPI 데이터 조회
       const nationalResponse = await client.query({
@@ -443,7 +80,7 @@ export class KpiDashboardMapPage extends PageView {
                 kpi {
                   id
                   name
-                  category {
+                  category: parent {
                     id
                     name
                   }
@@ -461,16 +98,11 @@ export class KpiDashboardMapPage extends PageView {
 
       // 지도 데이터 생성 (시도별)
       this.generateMapData()
-
-      // 지도 데이터가 생성된 후 지도 초기화
-      if (this.mapData && this.mapData.length > 0) {
-        console.log('지도 데이터 생성 완료')
-      }
     } catch (e) {
-      console.error('대시보드 데이터를 불러오지 못했습니다:', e)
-      this.error = '대시보드 데이터를 불러오지 못했습니다.'
-    } finally {
-      this.loading = false
+      notify({
+        level: 'error',
+        message: '대시보드 데이터를 불러오지 못했습니다.'
+      })
     }
   }
 
@@ -495,24 +127,6 @@ export class KpiDashboardMapPage extends PageView {
     ]
   }
 
-  private onCategoryChange(event: Event) {
-    const target = event.target as HTMLSelectElement
-    this.selectedCategory = target.value
-    this.fetchDashboardData()
-  }
-
-  private onChartTypeChange(type: string) {
-    this.selectedChartType = type
-  }
-
-  private onPeriodChange(period: string) {
-    this.selectedPeriod = period
-  }
-
-  private onDateRangeChange() {
-    // 날짜 범위 변경 처리
-  }
-
   private downloadExcel() {
     // 엑셀 다운로드 기능
     console.log('엑셀 다운로드')
@@ -531,13 +145,13 @@ export class KpiDashboardMapPage extends PageView {
 
   private async fetchRegionData(region: string) {
     try {
-      // 선택된 지역의 KPI 데이터 조회
       const response = await client.query({
         query: gql`
           query GetRegionKpiData($region: String) {
-            kpiStatistics(filters: [{ field: "kpi.category.name", operator: "eq", value: $region }]) {
+            kpiStatistics(filters: [{ field: "scope", operator: "eq", value: $region }]) {
               items {
                 id
+                scope
                 valueDate
                 periodType
                 mean
@@ -546,7 +160,7 @@ export class KpiDashboardMapPage extends PageView {
                 kpi {
                   id
                   name
-                  category {
+                  category: parent {
                     id
                     name
                   }
@@ -560,137 +174,36 @@ export class KpiDashboardMapPage extends PageView {
 
       this.seoulData = response.data.kpiStatistics.items || []
     } catch (e) {
-      console.error('지역 데이터를 불러오지 못했습니다:', e)
+      notify({
+        level: 'error',
+        message: '지역 데이터를 불러오지 못했습니다.'
+      })
     }
   }
 
-  private getChangeRateClass(change: number): string {
-    if (change > 0) return 'change-up'
-    if (change < 0) return 'change-down'
-    return 'change-neutral'
-  }
-
-  private getChangeIcon(change: number): string {
-    if (change > 0) return '▲'
-    if (change < 0) return '▼'
-    return '─'
-  }
-
   get context() {
     return {
       title: '전국 KPI 대시보드',
       description: '전국 및 지역별 KPI 성과 분석 대시보드'
-    } as any
+    }
   }
 
   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: any) => html`
-                      <tr
-                        style="cursor: pointer; transition: background-color 0.2s;"
-                        @click=${() => this.onRegionClick(item.region)}
-                        @mouseenter=${(e: Event) => ((e.target as HTMLElement).style.backgroundColor = '#f8f9fa')}
-                        @mouseleave=${(e: Event) => ((e.target as HTMLElement).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-left-panel
+          .selectedCategory=${this.selectedCategory}
+          .mapData=${this.mapData}
+          @category-change=${(e: CustomEvent) => {
+            this.selectedCategory = e.detail.category
+            this.fetchDashboardData()
+          }}
+          @region-click=${(e: CustomEvent) => {
+            this.onRegionClick(e.detail.region)
+          }}
+          @download-excel=${this.downloadExcel}
+        ></kpi-left-panel>
 
         <!-- 우측 패널: 지도 -->
         <kpi-map-panel
@@ -701,83 +214,28 @@ export class KpiDashboardMapPage extends PageView {
             this.selectedCategory = e.detail.category
             this.fetchDashboardData()
           }}
+          @region-click=${(e: CustomEvent) => {
+            this.onRegionClick(e.detail.region)
+          }}
         ></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>
+              <kpi-region-popup
+                .selectedRegion=${this.selectedRegion}
+                .selectedPeriod=${this.selectedPeriod}
+                .startDate=${this.startDate}
+                .endDate=${this.endDate}
+                @popup-close=${this.closeRegionPopup}
+                @period-change=${(e: CustomEvent) => {
+                  this.selectedPeriod = e.detail.period
+                }}
+                @date-range-change=${(e: CustomEvent) => {
+                  this.startDate = e.detail.startDate
+                  this.endDate = e.detail.endDate
+                }}
+              ></kpi-region-popup>
             `
           : nothing}
       </div>