@things-factory/kpi 9.0.30 → 9.0.32

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

@@ -1,6 +1,6 @@
-import { html, css } from 'lit'
+import { LitElement, html, css, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { LitElement } from 'lit'
+
 import '../../../google-map/common-google-map.js'
 
 declare global {
@@ -56,6 +56,40 @@ export 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;
@@ -86,7 +120,7 @@ export class KpiMapPanel extends LitElement {
     .map-control-button:hover {
       background: #f8f9fa;
     }
-    .map-scale {
+    .map-scale-direction {
       position: absolute;
       bottom: 16px;
       right: 16px;
@@ -97,6 +131,15 @@ export class KpiMapPanel extends LitElement {
       font-size: 0.8rem;
       color: #666;
       z-index: 10;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      text-align: center;
+    }
+    .north-arrow {
+      font-size: 1rem;
+      margin-bottom: 4px;
+    }
+    .scale-info {
+      font-size: 0.7rem;
     }
     common-google-map {
       width: 100%;
@@ -104,17 +147,14 @@ export class KpiMapPanel extends LitElement {
     }
   `
 
-  @property({ type: String })
-  selectedCategory = '전체 KPI'
-
-  @property({ type: Array })
-  mapData: any[] = []
+  @property({ type: String }) selectedCategory = '전체 KPI'
+  @property({ type: Array }) mapData: any[] = []
 
-  @state()
-  private map: any = null
-
-  @state()
-  private mapInitialized = false
+  @state() private map: any = null
+  @state() private startYear = '전체'
+  @state() private startMonth = '전체'
+  @state() private endYear = '전체'
+  @state() private endMonth = '전체'
 
   // mapData를 지도 마커 형식으로 변환
   get mapLocations() {
@@ -123,15 +163,56 @@ export class KpiMapPanel extends LitElement {
         lat: item.lat,
         lng: item.lng,
         title: item.region,
+        region: item.region, // 지역명 추가
+        // 커스텀 마커 콘텐츠 생성
+        markerContent: `
+          <div style="
+            background: white;
+            border-radius: 8px;
+            padding: 8px 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            border: 1px solid #e9ecef;
+            min-width: 80px;
+            text-align: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            cursor: pointer;
+          ">
+            <div style="
+              font-size: 11px;
+              font-weight: 600;
+              color: #495057;
+              margin-bottom: 2px;
+              white-space: nowrap;
+            ">${item.region}</div>
+            <div style="
+              font-size: 13px;
+              font-weight: 700;
+              color: #212529;
+              margin-bottom: 2px;
+            ">${item.kpi}</div>
+            <div style="
+              font-size: 10px;
+              color: ${item.change > 0 ? '#dc3545' : '#198754'};
+              font-weight: 500;
+            ">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>
+          </div>
+        `,
         content: `
-        <div style="padding: 8px;">
-          <h3 style="margin: 0 0 8px 0; font-size: 14px;">${item.region}</h3>
-          <p style="margin: 0 0 4px 0; font-size: 12px;">KPI: ${item.kpi}</p>
-          <p style="margin: 0; font-size: 12px; color: ${item.change > 0 ? '#dc3545' : '#198754'}">
-            ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%
-          </p>
-        </div>
-      `
+          <div style="padding: 12px; min-width: 200px;">
+            <h3 style="margin: 0 0 8px 0; font-size: 16px; color: #212529;">${item.region}</h3>
+            <div style="margin-bottom: 8px;">
+              <span style="font-size: 14px; color: #6c757d;">KPI: </span>
+              <span style="font-size: 16px; font-weight: 600; color: #212529;">${item.kpi}</span>
+            </div>
+            <div style="
+              font-size: 14px;
+              color: ${item.change > 0 ? '#dc3545' : '#198754'};
+              font-weight: 500;
+            ">
+              ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화
+            </div>
+          </div>
+        `
       })) || []
     )
   }
@@ -148,7 +229,50 @@ export class KpiMapPanel extends LitElement {
 
   private onMapChange(event: CustomEvent) {
     this.map = event.detail
-    this.mapInitialized = true
+  }
+
+  private onRegionClick(event: CustomEvent) {
+    this.dispatchEvent(
+      new CustomEvent('region-click', {
+        detail: event.detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private zoomIn() {
+    if (this.map) {
+      this.map.setZoom(this.map.getZoom() + 1)
+    }
+  }
+
+  private zoomOut() {
+    if (this.map) {
+      this.map.setZoom(this.map.getZoom() - 1)
+    }
+  }
+
+  private resetView() {
+    if (this.map) {
+      this.map.setCenter({ lat: 36.5, lng: 127.5 })
+      this.map.setZoom(7)
+    }
+  }
+
+  private 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() {
@@ -192,20 +316,100 @@ export 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: Event) => {
+                this.startYear = (e.target as HTMLSelectElement).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: Event) => {
+                this.startMonth = (e.target as HTMLSelectElement).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: Event) => {
+                this.endYear = (e.target as HTMLSelectElement).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: Event) => {
+                this.endMonth = (e.target as HTMLSelectElement).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">
-        <!-- 지도 컨트롤 -->
+        <!-- 지도 컨트롤 (오른쪽 상단) -->
         <div class="map-controls">
-          <button class="map-control-button" title="확대">+</button>
-          <button class="map-control-button" title="축소">-</button>
-          <button class="map-control-button" title="뷰 초기화">⌖</button>
+          <button class="map-control-button" title="확대" @click=${() => this.zoomIn()}>+</button>
+          <button class="map-control-button" title="축소" @click=${() => this.zoomOut()}>-</button>
+          <button class="map-control-button" title="뷰 초기화" @click=${() => this.resetView()}>⌖</button>
         </div>
 
-        <!-- 지도 스케일 -->
-        <div class="map-scale">
-          ↑ N<br />
-          25km
+        <!-- 스케일 및 방향 정보 (오른쪽 하단) -->
+        <div class="map-scale-direction">
+          <div class="north-arrow">↑ N</div>
+          <div class="scale-info">25km</div>
         </div>
 
         <!-- 공통 Google Maps 컴포넌트 사용 -->
@@ -214,7 +418,16 @@ export class KpiMapPanel extends LitElement {
           .zoom=${7}
           .locations=${this.mapLocations}
           .clusterZoom=${10}
+          .controls=${{
+            zoomControl: false,
+            mapTypeControl: false,
+            scaleControl: false,
+            streetViewControl: false,
+            rotateControl: false,
+            fullscreenControl: false
+          }}
           @map-change=${this.onMapChange}
+          @region-click=${this.onRegionClick}
         ></common-google-map>
       </div>
     `

package/client/pages/kpi-dashboard/components/kpi-region-popup.ts

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