@things-factory/kpi 9.0.28 → 9.0.30

package/client/pages/kpi-dashboard/cards/kpi-level3-comparison.ts

@@ -0,0 +1,443 @@
+import { html, css, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { LitElement } from 'lit'
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
+
+@customElement('kpi-level3-comparison')
+export class KpiLevel3Comparison extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .comparison-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+      border: 1px solid #e0e0e0;
+      width: 100%;
+    }
+    .comparison-title {
+      font-size: 1.3rem;
+      font-weight: bold;
+      margin-bottom: 20px;
+      color: #333;
+      text-align: center;
+    }
+    .category-selector {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+      padding: 16px;
+      background: #f8f9fa;
+      border-radius: 8px;
+      border: 1px solid #e9ecef;
+    }
+    .selector-label {
+      font-weight: 600;
+      color: #495057;
+      min-width: 80px;
+    }
+    .category-select {
+      padding: 8px 12px;
+      border: 1px solid #ced4da;
+      border-radius: 6px;
+      background: white;
+      font-size: 1rem;
+      min-width: 200px;
+    }
+    .category-select:focus {
+      outline: none;
+      border-color: #667eea;
+      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+    }
+    .charts-section {
+      display: flex;
+      gap: 24px;
+      margin-bottom: 20px;
+    }
+    .chart-card {
+      flex: 1;
+      background: #f8f9fa;
+      border-radius: 12px;
+      padding: 20px;
+      border: 1px solid #e9ecef;
+    }
+    .chart-title {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #495057;
+      text-align: center;
+    }
+    .chart-container {
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .loading {
+      color: #666;
+      font-size: 1rem;
+    }
+    .error {
+      color: #d32f2f;
+      font-size: 1rem;
+    }
+    .no-data {
+      color: #666;
+      font-size: 1rem;
+      text-align: center;
+    }
+    .no-category {
+      color: #666;
+      font-size: 1rem;
+      text-align: center;
+      font-style: italic;
+    }
+    .summary-info {
+      display: flex;
+      justify-content: space-around;
+      padding: 16px;
+      background: #f8f9fa;
+      border-radius: 8px;
+      margin-top: 16px;
+    }
+    .summary-item {
+      text-align: center;
+    }
+    .summary-value {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 4px;
+    }
+    .summary-label {
+      font-size: 0.9rem;
+      color: #666;
+    }
+  `
+
+  @state() loading = true
+  @state() error = ''
+  @state() radarData: any[] = []
+  @state() boxplotData: any[] = []
+  @state() kpis: string[] = []
+  @state() availableCategories: string[] = []
+  @state() selectedCategory = ''
+  @state() currentMonth = ''
+  @state() totalKpis = 0
+  @state() averageScore = 0
+  @state() categoryStats = new Map<string, any[]>()
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.currentMonth = this.getCurrentMonth()
+    this.fetchKpiComparison()
+  }
+
+  private getCurrentMonth(): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = String(now.getMonth() + 1).padStart(2, '0')
+    return `${year}-${month}`
+  }
+
+  async fetchKpiComparison() {
+    this.loading = true
+    this.error = ''
+
+    try {
+      const response = await client.query({
+        query: gql`
+          query {
+            kpiStatistics {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                standardDeviation
+                minimum
+                maximum
+                percentile25
+                percentile75
+                kpi {
+                  id
+                  name
+                  targetValue
+                  unit
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `
+      })
+
+      const statistics = response.data.kpiStatistics.items || []
+
+      // MONTH 타입의 현재 월 데이터만 필터링
+      const currentMonthStats = statistics.filter(
+        stat => stat.periodType === 'MONTH' && stat.valueDate === this.currentMonth
+      )
+
+      if (currentMonthStats.length === 0) {
+        this.error = '현재 월의 데이터가 없습니다.'
+        return
+      }
+
+      // 카테고리별로 데이터 그룹화
+      const categoryStats = new Map<string, any[]>()
+
+      currentMonthStats.forEach(stat => {
+        if (stat.kpi?.category?.name) {
+          const categoryName = stat.kpi.category.name
+          if (!categoryStats.has(categoryName)) {
+            categoryStats.set(categoryName, [])
+          }
+          categoryStats.get(categoryName)!.push(stat)
+        }
+      })
+
+      this.categoryStats = categoryStats
+      this.availableCategories = Array.from(categoryStats.keys())
+
+      // 첫 번째 카테고리를 기본 선택
+      if (this.availableCategories.length > 0 && !this.selectedCategory) {
+        this.selectedCategory = this.availableCategories[0]
+      }
+
+      // 선택된 카테고리의 데이터로 차트 생성
+      if (this.selectedCategory) {
+        this.generateKpiCharts()
+      }
+    } catch (e) {
+      console.error('KPI 비교 데이터를 불러오지 못했습니다:', e)
+      this.error = 'KPI 비교 데이터를 불러오지 못했습니다.'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private onCategoryChange(event: Event) {
+    const target = event.target as HTMLSelectElement
+    this.selectedCategory = target.value
+    this.generateKpiCharts()
+  }
+
+  private generateKpiCharts() {
+    if (!this.selectedCategory || !this.categoryStats.has(this.selectedCategory)) {
+      this.radarData = []
+      this.boxplotData = []
+      this.kpis = []
+      this.totalKpis = 0
+      this.averageScore = 0
+      return
+    }
+
+    const categoryData = this.categoryStats.get(this.selectedCategory)!
+    this.kpis = categoryData.map(stat => stat.kpi?.name || '').filter(Boolean)
+    this.totalKpis = this.kpis.length
+
+    // 레이더 차트 데이터 생성
+    this.generateRadarData(categoryData)
+
+    // 박스플롯 데이터 생성
+    this.generateBoxplotData(categoryData)
+
+    // 평균 점수 계산
+    const scores = categoryData.map(stat => {
+      const mean = stat.mean || 0
+      const targetValue = stat.kpi?.targetValue || 100
+      if (targetValue === 0) return 0
+      const achievement = Math.min((mean / targetValue) * 100, 100)
+      return Math.max(achievement, 0)
+    })
+    this.averageScore = Math.round(scores.reduce((sum, score) => sum + score, 0) / scores.length)
+  }
+
+  private generateRadarData(categoryData: any[]) {
+    const result: any[] = []
+
+    this.kpis.forEach(kpiName => {
+      const stat = categoryData.find(s => s.kpi?.name === kpiName)
+      if (stat) {
+        const mean = stat.mean || 0
+        const median = stat.median || 0
+        const stdDev = stat.standardDeviation || 0
+
+        if (mean > 0) {
+          result.push({ group: '평균', category: kpiName, value: mean })
+        }
+        if (median > 0) {
+          result.push({ group: '중앙값', category: kpiName, value: median })
+        }
+        if (stdDev > 0) {
+          result.push({ group: '표준편차', category: kpiName, value: stdDev })
+        }
+      }
+    })
+
+    this.radarData = result
+  }
+
+  private generateBoxplotData(categoryData: any[]) {
+    const result: any[] = []
+
+    this.kpis.forEach(kpiName => {
+      const stat = categoryData.find(s => s.kpi?.name === kpiName)
+      if (stat) {
+        const mean = stat.mean || 0
+        const median = stat.median || 0
+        const min = stat.minimum || 0
+        const max = stat.maximum || 0
+        const q1 = stat.percentile25 || 0
+        const q3 = stat.percentile75 || 0
+
+        if (mean > 0) {
+          result.push({
+            group: kpiName,
+            min,
+            q1,
+            median,
+            q3,
+            max,
+            mean,
+            value: mean
+          })
+        }
+      }
+    })
+
+    this.boxplotData = result
+  }
+
+  render() {
+    if (this.loading) {
+      return html`
+        <div class="comparison-container">
+          <div class="comparison-title">KPI 상세 비교 분석</div>
+          <div class="category-selector">
+            <div class="selector-label">카테고리:</div>
+            <select class="category-select" disabled>
+              <option>로딩 중...</option>
+            </select>
+          </div>
+          <div class="charts-section">
+            <div class="chart-card">
+              <div class="chart-title">레이더 차트</div>
+              <div class="chart-container">
+                <div class="loading">데이터 로딩 중...</div>
+              </div>
+            </div>
+            <div class="chart-card">
+              <div class="chart-title">박스플롯</div>
+              <div class="chart-container">
+                <div class="loading">데이터 로딩 중...</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+
+    if (this.error) {
+      return html`
+        <div class="comparison-container">
+          <div class="comparison-title">KPI 상세 비교 분석</div>
+          <div class="category-selector">
+            <div class="selector-label">카테고리:</div>
+            <select class="category-select" disabled>
+              <option>오류 발생</option>
+            </select>
+          </div>
+          <div class="charts-section">
+            <div class="chart-card">
+              <div class="chart-title">레이더 차트</div>
+              <div class="chart-container">
+                <div class="error">${this.error}</div>
+              </div>
+            </div>
+            <div class="chart-card">
+              <div class="chart-title">박스플롯</div>
+              <div class="chart-container">
+                <div class="error">${this.error}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="comparison-container">
+        <div class="comparison-title">KPI 상세 비교 분석 (${this.currentMonth})</div>
+
+        <div class="category-selector">
+          <div class="selector-label">카테고리:</div>
+          <select class="category-select" .value=${this.selectedCategory} @change=${this.onCategoryChange}>
+            ${this.availableCategories.map(category => html`<option value="${category}">${category}</option>`)}
+          </select>
+        </div>
+
+        <div class="charts-section">
+          <div class="chart-card">
+            <div class="chart-title">레이더 차트</div>
+            <div class="chart-container">
+              ${this.selectedCategory
+                ? this.radarData.length > 0
+                  ? html`<kpi-radar-chart
+                      .data=${this.radarData}
+                      .categories=${this.kpis}
+                      .currentGroup=${'평균'}
+                    ></kpi-radar-chart>`
+                  : html`<div class="no-data">선택된 카테고리에 데이터가 없습니다.</div>`
+                : html`<div class="no-category">카테고리를 선택해주세요.</div>`}
+            </div>
+          </div>
+
+          <div class="chart-card">
+            <div class="chart-title">박스플롯</div>
+            <div class="chart-container">
+              ${this.selectedCategory
+                ? this.boxplotData.length > 0
+                  ? html`<kpi-boxplot-chart
+                      .data=${this.boxplotData}
+                      .groups=${this.kpis}
+                      .currentGroup=${'평균'}
+                    ></kpi-boxplot-chart>`
+                  : html`<div class="no-data">선택된 카테고리에 데이터가 없습니다.</div>`
+                : html`<div class="no-category">카테고리를 선택해주세요.</div>`}
+            </div>
+          </div>
+        </div>
+
+        ${this.selectedCategory
+          ? html`
+              <div class="summary-info">
+                <div class="summary-item">
+                  <div class="summary-value">${this.selectedCategory}</div>
+                  <div class="summary-label">선택된 카테고리</div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-value">${this.totalKpis}</div>
+                  <div class="summary-label">KPI</div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-value">${this.averageScore}</div>
+                  <div class="summary-label">평균 점수</div>
+                </div>
+              </div>
+            `
+          : nothing}
+      </div>
+    `
+  }
+}

package/client/pages/kpi-dashboard/components/kpi-chart-toggle.ts

@@ -0,0 +1,73 @@
+import { html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { LitElement } from 'lit'
+
+@customElement('kpi-chart-toggle')
+export class KpiChartToggle extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .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:hover {
+      background: #f8f9fa;
+    }
+    .toggle-button.active {
+      background: #667eea;
+      color: white;
+      border-color: #667eea;
+    }
+  `
+
+  @property({ type: String })
+  selectedType = 'boxplot'
+
+  @property({ type: Function })
+  onTypeChange?: (type: string) => void
+
+  private handleTypeChange(type: string) {
+    this.selectedType = type
+    if (this.onTypeChange) {
+      this.onTypeChange(type)
+    }
+    this.dispatchEvent(
+      new CustomEvent('type-change', {
+        detail: { type },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  render() {
+    return html`
+      <div class="chart-toggle">
+        <button
+          class="toggle-button ${this.selectedType === 'boxplot' ? 'active' : ''}"
+          @click=${() => this.handleTypeChange('boxplot')}
+        >
+          박스플롯
+        </button>
+        <button
+          class="toggle-button ${this.selectedType === 'radar' ? 'active' : ''}"
+          @click=${() => this.handleTypeChange('radar')}
+        >
+          레이더차트
+        </button>
+      </div>
+    `
+  }
+}