@things-factory/kpi 9.0.29 → 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>
+    `
+  }
+}

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

@@ -0,0 +1,243 @@
+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 { notify } from '@operato/layout'
+
+import './components/kpi-map-panel'
+import './components/kpi-left-panel'
+import './components/kpi-region-popup'
+
+@customElement('kpi-dashboard-map')
+export class KpiDashboardMapPage extends PageView {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+      }
+
+      .dashboard-container {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .right-panel {
+        flex: 1;
+        background: #f8f9fa;
+        overflow: hidden;
+        position: relative;
+      }
+    `
+  ]
+
+  @state() selectedCategory = '전체 KPI'
+  @state() selectedPeriod = '월'
+  @state() startDate = '전체'
+  @state() endDate = '전체'
+  @state() nationalData: any = null
+  @state() seoulData: any = null
+  @state() mapData: any = null
+  // 팝업 관련 상태 추가
+  @state() selectedRegion: string | null = null
+  @state() showRegionPopup = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchDashboardData()
+    this.setupKeyboardEvents()
+  }
+
+  private setupKeyboardEvents() {
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && this.showRegionPopup) {
+        this.closeRegionPopup()
+      }
+    })
+  }
+
+  async fetchDashboardData() {
+    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: any) => item.kpi?.category?.name === '서울특별시')
+
+      // 지도 데이터 생성 (시도별)
+      this.generateMapData()
+    } catch (e) {
+      notify({
+        level: 'error',
+        message: '대시보드 데이터를 불러오지 못했습니다.'
+      })
+    }
+  }
+
+  private 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 }
+    ]
+  }
+
+  private downloadExcel() {
+    // 엑셀 다운로드 기능
+    console.log('엑셀 다운로드')
+  }
+
+  private onRegionClick(region: string) {
+    this.selectedRegion = region
+    this.showRegionPopup = true
+    this.fetchRegionData(region)
+  }
+
+  private closeRegionPopup() {
+    this.showRegionPopup = false
+    this.selectedRegion = null
+  }
+
+  private async fetchRegionData(region: string) {
+    try {
+      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) {
+      notify({
+        level: 'error',
+        message: '지역 데이터를 불러오지 못했습니다.'
+      })
+    }
+  }
+
+  get context() {
+    return {
+      title: '전국 KPI 대시보드',
+      description: '전국 및 지역별 KPI 성과 분석 대시보드'
+    }
+  }
+
+  render() {
+    return html`
+      <div class="dashboard-container">
+        <!-- 좌측 패널: 전국 KPI -->
+        <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
+          class="right-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)
+          }}
+        ></kpi-map-panel>
+
+        <!-- 지역 상세 팝업 -->
+        ${this.showRegionPopup
+          ? html`
+              <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>
+    `
+  }
+}