@things-factory/kpi 9.0.30 → 9.0.31

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

@@ -0,0 +1,355 @@
+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: 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;
+    }
+    .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 || '전체'}
+                  ></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>
+    `
+  }
+}