@things-factory/kpi 9.0.29 → 9.0.30

package/client/pages/kpi-dashboard/cards/kpi-level1-card.ts

@@ -0,0 +1,248 @@
+import { html, css } 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-level1-card')
+export class KpiLevel1Card extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .score-card {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 16px;
+      padding: 32px;
+      color: white;
+      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .score-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 16px;
+    }
+    .score-content {
+      position: relative;
+      z-index: 1;
+    }
+    .score-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      opacity: 0.9;
+    }
+    .score-value {
+      font-size: 4rem;
+      font-weight: bold;
+      margin-bottom: 8px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+    .score-grade {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      opacity: 0.9;
+    }
+    .score-period {
+      font-size: 0.9rem;
+      opacity: 0.7;
+      margin-bottom: 16px;
+    }
+    .score-details {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 24px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    .detail-item {
+      text-align: center;
+    }
+    .detail-value {
+      font-size: 1.4rem;
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+    .detail-label {
+      font-size: 0.8rem;
+      opacity: 0.8;
+    }
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: #666;
+      font-size: 1.1rem;
+    }
+    .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: #d32f2f;
+      font-size: 1.1rem;
+    }
+  `
+
+  @state() loading = true
+  @state() error = ''
+  @state() totalScore = 0
+  @state() grade = ''
+  @state() totalKpis = 0
+  @state() totalCategories = 0
+  @state() averageScore = 0
+  @state() currentMonth = ''
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.currentMonth = this.getCurrentMonth()
+    this.fetchTotalScore()
+  }
+
+  private getCurrentMonth(): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = String(now.getMonth() + 1).padStart(2, '0')
+    return `${year}-${month}`
+  }
+
+  private calculateGrade(score: number): string {
+    if (score >= 90) return 'A+'
+    if (score >= 85) return 'A'
+    if (score >= 80) return 'A-'
+    if (score >= 75) return 'B+'
+    if (score >= 70) return 'B'
+    if (score >= 65) return 'B-'
+    if (score >= 60) return 'C+'
+    if (score >= 55) return 'C'
+    if (score >= 50) return 'C-'
+    return 'D'
+  }
+
+  async fetchTotalScore() {
+    this.loading = true
+    this.error = ''
+
+    try {
+      const response = await client.query({
+        query: gql`
+          query {
+            kpiStatistics {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                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 scores = currentMonthStats.map(stat => {
+        const mean = stat.mean || 0
+        const targetValue = stat.kpi?.targetValue || 100
+
+        if (targetValue === 0) return 0
+
+        // 목표 대비 달성률 계산 (최대 100점)
+        const achievement = Math.min((mean / targetValue) * 100, 100)
+        return Math.max(achievement, 0) // 음수 방지
+      })
+
+      this.totalScore = Math.round(scores.reduce((sum, score) => sum + score, 0) / scores.length)
+      this.grade = this.calculateGrade(this.totalScore)
+      this.totalKpis = currentMonthStats.length
+
+      // 카테고리 수 계산
+      const categories = new Set(currentMonthStats.map(stat => stat.kpi?.category?.name).filter(Boolean))
+      this.totalCategories = categories.size
+
+      // 평균 점수 계산
+      this.averageScore = Math.round(scores.reduce((sum, score) => sum + score, 0) / scores.length)
+    } catch (e) {
+      console.error('총점 데이터를 불러오지 못했습니다:', e)
+      this.error = '총점 데이터를 불러오지 못했습니다.'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  render() {
+    if (this.loading) {
+      return html`
+        <div class="score-card">
+          <div class="loading">총점 계산 중...</div>
+        </div>
+      `
+    }
+
+    if (this.error) {
+      return html`
+        <div class="score-card">
+          <div class="error">${this.error}</div>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="score-card">
+        <div class="score-content">
+          <div class="score-title">그룹 총점</div>
+          <div class="score-value">${this.totalScore}</div>
+          <div class="score-grade">${this.grade}</div>
+          <div class="score-period">${this.currentMonth} 기준</div>
+
+          <div class="score-details">
+            <div class="detail-item">
+              <div class="detail-value">${this.totalKpis}</div>
+              <div class="detail-label">KPI</div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-value">${this.totalCategories}</div>
+              <div class="detail-label">카테고리</div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-value">${this.averageScore}</div>
+              <div class="detail-label">평균</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,369 @@
+import { html, css } 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-level2-comparison')
+export class KpiLevel2Comparison 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;
+    }
+    .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;
+    }
+    .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() categories: string[] = []
+  @state() currentMonth = ''
+  @state() totalCategories = 0
+  @state() totalKpis = 0
+  @state() averageScore = 0
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.currentMonth = this.getCurrentMonth()
+    this.fetchCategoryComparison()
+  }
+
+  private getCurrentMonth(): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = String(now.getMonth() + 1).padStart(2, '0')
+    return `${year}-${month}`
+  }
+
+  async fetchCategoryComparison() {
+    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.categories = Array.from(categoryStats.keys())
+      this.totalCategories = this.categories.length
+      this.totalKpis = currentMonthStats.length
+
+      // 레이더 차트 데이터 생성
+      this.generateRadarData(categoryStats)
+
+      // 박스플롯 데이터 생성
+      this.generateBoxplotData(categoryStats)
+
+      // 평균 점수 계산
+      const scores = currentMonthStats.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)
+    } catch (e) {
+      console.error('카테고리 비교 데이터를 불러오지 못했습니다:', e)
+      this.error = '카테고리 비교 데이터를 불러오지 못했습니다.'
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private generateRadarData(categoryStats: Map<string, any[]>) {
+    const result: any[] = []
+
+    this.categories.forEach(category => {
+      const stats = categoryStats.get(category)!
+      const means = stats.map(s => s.mean || 0).filter(v => v > 0)
+      const medians = stats.map(s => s.median || 0).filter(v => v > 0)
+      const stdDevs = stats.map(s => s.standardDeviation || 0).filter(v => v > 0)
+
+      if (means.length > 0) {
+        result.push({
+          group: '평균',
+          category,
+          value: means.reduce((a, b) => a + b, 0) / means.length
+        })
+      }
+      if (medians.length > 0) {
+        result.push({
+          group: '중앙값',
+          category,
+          value: medians.reduce((a, b) => a + b, 0) / medians.length
+        })
+      }
+      if (stdDevs.length > 0) {
+        result.push({
+          group: '표준편차',
+          category,
+          value: stdDevs.reduce((a, b) => a + b, 0) / stdDevs.length
+        })
+      }
+    })
+
+    this.radarData = result
+  }
+
+  private generateBoxplotData(categoryStats: Map<string, any[]>) {
+    const result: any[] = []
+
+    this.categories.forEach(category => {
+      const stats = categoryStats.get(category)!
+
+      // 각 KPI의 평균값들을 수집
+      const allMeans = stats.map(s => s.mean || 0).filter(v => v > 0)
+      const allMedians = stats.map(s => s.median || 0).filter(v => v > 0)
+      const allMins = stats.map(s => s.minimum || 0).filter(v => v > 0)
+      const allMaxs = stats.map(s => s.maximum || 0).filter(v => v > 0)
+      const allQ1s = stats.map(s => s.percentile25 || 0).filter(v => v > 0)
+      const allQ3s = stats.map(s => s.percentile75 || 0).filter(v => v > 0)
+
+      if (allMeans.length > 0) {
+        const sortedMeans = [...allMeans].sort((a, b) => a - b)
+        const min = sortedMeans[0]
+        const max = sortedMeans[sortedMeans.length - 1]
+        const mean = allMeans.reduce((a, b) => a + b, 0) / allMeans.length
+        const median = allMedians.length > 0 ? allMedians.reduce((a, b) => a + b, 0) / allMedians.length : mean
+
+        const q1 = sortedMeans[Math.floor(sortedMeans.length / 4)]
+        const q3 = sortedMeans[Math.floor((sortedMeans.length * 3) / 4)]
+
+        result.push({
+          group: category,
+          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">카테고리 비교 분석</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">카테고리 비교 분석</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">카테고리 비교 분석 (${this.currentMonth})</div>
+
+        <div class="charts-section">
+          <div class="chart-card">
+            <div class="chart-title">레이더 차트</div>
+            <div class="chart-container">
+              ${this.radarData.length > 0
+                ? html`<kpi-radar-chart
+                    .data=${this.radarData}
+                    .categories=${this.categories}
+                    .currentGroup=${'평균'}
+                  ></kpi-radar-chart>`
+                : html`<div class="no-data">데이터가 없습니다.</div>`}
+            </div>
+          </div>
+
+          <div class="chart-card">
+            <div class="chart-title">박스플롯</div>
+            <div class="chart-container">
+              ${this.boxplotData.length > 0
+                ? html`<kpi-boxplot-chart
+                    .data=${this.boxplotData}
+                    .groups=${this.categories}
+                    .currentGroup=${'평균'}
+                  ></kpi-boxplot-chart>`
+                : html`<div class="no-data">데이터가 없습니다.</div>`}
+            </div>
+          </div>
+        </div>
+
+        <div class="summary-info">
+          <div class="summary-item">
+            <div class="summary-value">${this.totalCategories}</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>
+      </div>
+    `
+  }
+}