@things-factory/kpi 9.0.29 → 9.0.31

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

@@ -0,0 +1,399 @@
+import { LitElement, html, css } 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-mini-trend-chart.js'
+
+@customElement('kpi-left-panel')
+export class KpiLeftPanel extends LitElement {
+  static 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;
+    }
+  `
+
+  @property({ type: String }) selectedCategory = '전체 KPI'
+  @property({ type: String }) selectedChartType = 'boxplot'
+  @property({ type: Array }) mapData: any[] = []
+
+  @state() private chartData: any[] = []
+  @state() private chartCategories: string[] = []
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.generateChartData()
+  }
+
+  private generateTrendData(region: string): number[] {
+    // 각 지역별로 7일간의 트렌드 데이터 생성
+    const baseValue = Math.random() * 30 + 60 // 60-90 범위
+    const trendData: number[] = []
+
+    for (let i = 0; i < 7; i++) {
+      const trend = Math.sin(i * 0.5) * 5 // 사인파로 변동
+      const noise = (Math.random() - 0.5) * 3 // 랜덤 노이즈
+      const value = Math.max(0, Math.min(100, baseValue + trend + noise))
+      trendData.push(Math.round(value))
+    }
+
+    return trendData
+  }
+
+  private generateChartData() {
+    // 선택된 카테고리에 따른 차트 데이터 생성
+    const categories = ['일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']
+    this.chartCategories = categories
+
+    if (this.selectedChartType === 'radar') {
+      // 레이더 차트용 데이터 생성
+      this.chartData = categories.map(category => ({
+        category,
+        value: Math.random() * 50 + 25, // 25-75 범위
+        group: this.selectedCategory
+      }))
+    } 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 onCategoryChange(event: Event) {
+    const target = event.target as HTMLSelectElement
+    this.dispatchEvent(
+      new CustomEvent('category-change', {
+        detail: { category: target.value },
+        bubbles: true,
+        composed: true
+      })
+    )
+    this.generateChartData()
+  }
+
+  private onChartTypeChange(type: string) {
+    this.selectedChartType = type
+    this.generateChartData()
+  }
+
+  private onRegionClick(region: string) {
+    this.dispatchEvent(
+      new CustomEvent('region-click', {
+        detail: { region },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private downloadExcel() {
+    this.dispatchEvent(
+      new CustomEvent('download-excel', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  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 '─'
+  }
+
+  render() {
+    return html`
+      <div class="panel-header">
+        <div class="panel-title">전국 KPI</div>
+        <button class="panel-close" style="visibility: hidden;">×</button>
+      </div>
+      <div class="panel-content">
+        <!-- KPI 카테고리 선택 -->
+        <select class="category-select" .value=${this.selectedCategory} @change=${this.onCategoryChange}>
+          <option value="전체 KPI">전체 KPI</option>
+          <option value="일정 성과">일정 성과</option>
+          <option value="비용 성과">비용 성과</option>
+          <option value="품질 성과">품질 성과</option>
+          <option value="안전 성과">안전 성과</option>
+          <option value="환경 성과">환경 성과</option>
+        </select>
+
+        <!-- 종합 성과 -->
+        <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.selectedCategory}
+                  ></kpi-boxplot-chart>
+                `
+              : html`
+                  <kpi-radar-chart
+                    .data=${this.chartData}
+                    .categories=${this.chartCategories}
+                    .valueKey=${'value'}
+                    .currentGroup=${this.selectedCategory}
+                  ></kpi-radar-chart>
+                `}
+          </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>
+                      <kpi-mini-trend-chart
+                        .data=${this.generateTrendData(item.region)}
+                        .width=${60}
+                        .height=${30}
+                        .lineColor=${'#2196f3'}
+                        .strokeWidth=${1.5}
+                        .showPoints=${true}
+                        .pointRadius=${1.5}
+                      ></kpi-mini-trend-chart>
+                    </td>
+                  </tr>
+                `
+              )}
+            </tbody>
+          </table>
+          <button class="download-button" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>
+        </div>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,302 @@
+import { LitElement, html, css, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import '../../../google-map/common-google-map.js'
+
+declare global {
+  interface Window {
+    google: any
+  }
+}
+
+@customElement('kpi-map-panel')
+export class KpiMapPanel extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      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;
+    }
+    .map-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+    .map-controls {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      z-index: 10;
+    }
+    .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-direction {
+      position: absolute;
+      bottom: 16px;
+      right: 16px;
+      background: white;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid #ced4da;
+      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%;
+      height: 100%;
+    }
+  `
+
+  @property({ type: String }) selectedCategory = '전체 KPI'
+  @property({ type: Array }) mapData: any[] = []
+
+  @state() private map: any = null
+
+  // mapData를 지도 마커 형식으로 변환
+  get mapLocations() {
+    return (
+      this.mapData?.map(item => ({
+        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: 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>
+        `
+      })) || []
+    )
+  }
+
+  private onCategoryButtonClick(category: string) {
+    this.dispatchEvent(
+      new CustomEvent('category-change', {
+        detail: { category },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  private onMapChange(event: CustomEvent) {
+    this.map = event.detail
+  }
+
+  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)
+    }
+  }
+
+  render() {
+    return html`
+      <div class="map-overlay">
+        <div class="category-buttons">
+          <button
+            class="category-button ${this.selectedCategory === '전체 KPI' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('전체 KPI')}
+          >
+            전체 KPI
+          </button>
+          <button
+            class="category-button ${this.selectedCategory === '일정 성과' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('일정 성과')}
+          >
+            일정 성과
+          </button>
+          <button
+            class="category-button ${this.selectedCategory === '비용 성과' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('비용 성과')}
+          >
+            비용 성과
+          </button>
+          <button
+            class="category-button ${this.selectedCategory === '품질 성과' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('품질 성과')}
+          >
+            품질 성과
+          </button>
+          <button
+            class="category-button ${this.selectedCategory === '안전 성과' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('안전 성과')}
+          >
+            안전 성과
+          </button>
+          <button
+            class="category-button ${this.selectedCategory === '환경 성과' ? 'active' : ''}"
+            @click=${() => this.onCategoryButtonClick('환경 성과')}
+          >
+            환경 성과
+          </button>
+        </div>
+      </div>
+
+      <div class="map-container">
+        <!-- 지도 컨트롤 (오른쪽 상단) -->
+        <div class="map-controls">
+          <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-direction">
+          <div class="north-arrow">↑ N</div>
+          <div class="scale-info">25km</div>
+        </div>
+
+        <!-- 공통 Google Maps 컴포넌트 사용 -->
+        <common-google-map
+          .center=${{ lat: 36.5, lng: 127.5 }}
+          .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>
+    `
+  }
+}