@things-factory/kpi 9.0.28 → 9.0.30

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

@@ -16,6 +16,11 @@ import './kpi-alert-panel'
 import '../../charts/kpi-radar-chart'
 import '../../charts/kpi-boxplot-chart'
 
+// 3레벨 KPI 플로팅 컴포넌트들
+import './cards/kpi-level1-card'
+import './cards/kpi-level2-comparison'
+import './cards/kpi-level3-comparison'
+
 @customElement('kpi-dashboard')
 export class KpiDashboardPage extends PageView {
   static styles = [
@@ -32,6 +37,7 @@ export class KpiDashboardPage extends PageView {
       }
       .sample-charts-section {
         display: flex;
+        flex-direction: column;
         gap: 40px;
         margin-bottom: 48px;
         align-items: flex-start;
@@ -109,6 +115,10 @@ export class KpiDashboardPage extends PageView {
   @state() showHistoryModal: boolean = false
   @state() modalHistories: any[] = []
   @state() modalKpiName: string = ''
+  @state() kpiStatistics: any[] = [] // 실제 KPI 통계 데이터
+  @state() statisticsLoading = true // 통계 데이터 로딩 상태
+  @state() selectedPeriodType: string = 'MONTH' // 선택된 기간 타입 (MONTH로 고정)
+  @state() selectedValueDate: string = '' // 선택된 값 날짜
 
   // 샘플 데이터
   private get sampleCategories(): string[] {
@@ -231,14 +241,225 @@ export class KpiDashboardPage extends PageView {
     return 'A'
   }
 
+  // 현재 월을 YYYY-MM 형식으로 반환
+  private get currentMonth(): string {
+    const now = new Date()
+    const year = now.getFullYear()
+    const month = String(now.getMonth() + 1).padStart(2, '0')
+    return `${year}-${month}`
+  }
+
+  // 필터링된 KPI 통계 데이터
+  private get filteredKpiStatistics(): any[] {
+    if (!this.kpiStatistics || this.kpiStatistics.length === 0) return []
+
+    return this.kpiStatistics.filter(stat => stat.periodType === 'MONTH' && stat.valueDate === this.selectedValueDate)
+  }
+
+  // 사용 가능한 기간 타입들 (MONTH로 고정)
+  private get availablePeriodTypes(): string[] {
+    return ['MONTH']
+  }
+
+  // MONTH 기간에 사용 가능한 날짜들
+  private get availableValueDates(): string[] {
+    if (!this.kpiStatistics || this.kpiStatistics.length === 0) return []
+
+    const valueDates = new Set<string>()
+    this.kpiStatistics.forEach(stat => {
+      if (stat.periodType === 'MONTH' && stat.valueDate) {
+        valueDates.add(stat.valueDate)
+      }
+    })
+
+    return Array.from(valueDates).sort().reverse() // 최신 날짜부터 정렬
+  }
+
+  // 통계 요약 정보
+  private get statisticsSummary(): any {
+    const filteredStats = this.filteredKpiStatistics
+    if (filteredStats.length === 0) return null
+
+    const totalKpis = filteredStats.length
+    const categories = new Set(filteredStats.map(s => s.kpi?.category?.name).filter(Boolean))
+    const totalCategories = categories.size
+
+    const means = filteredStats.map(s => s.mean || 0).filter(v => v > 0)
+    const medians = filteredStats.map(s => s.median || 0).filter(v => v > 0)
+    const stdDevs = filteredStats.map(s => s.standardDeviation || 0).filter(v => v > 0)
+
+    const avgMean = means.length > 0 ? means.reduce((a, b) => a + b, 0) / means.length : 0
+    const avgMedian = medians.length > 0 ? medians.reduce((a, b) => a + b, 0) / medians.length : 0
+    const avgStdDev = stdDevs.length > 0 ? stdDevs.reduce((a, b) => a + b, 0) / stdDevs.length : 0
+
+    return {
+      totalKpis,
+      totalCategories,
+      avgMean: avgMean.toFixed(2),
+      avgMedian: avgMedian.toFixed(2),
+      avgStdDev: avgStdDev.toFixed(2),
+      periodType: this.selectedPeriodType,
+      valueDate: this.selectedValueDate
+    }
+  }
+
+  // 기간 타입 변경 핸들러 (사용하지 않음 - MONTH로 고정)
+  private _onPeriodTypeChange(event: Event) {
+    // MONTH로 고정되어 있으므로 변경하지 않음
+  }
+
+  // 날짜 변경 핸들러
+  private _onValueDateChange(event: Event) {
+    const target = event.target as HTMLSelectElement
+    this.selectedValueDate = target.value
+  }
+
+  // 실제 KPI 통계 데이터를 기반으로 한 레이더 차트 데이터
+  private get realKpiRadarData(): any[] {
+    const filteredStats = this.filteredKpiStatistics
+    if (filteredStats.length === 0) return []
+
+    // 카테고리별로 통계 데이터 그룹화
+    const categoryStats = new Map<string, any[]>()
+
+    filteredStats.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)
+      }
+    })
+
+    // 각 카테고리별로 평균, 중앙값, 표준편차 계산
+    const result: any[] = []
+    const categories = Array.from(categoryStats.keys())
+
+    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 })
+      }
+    })
+
+    return result
+  }
+
+  private get realKpiRadarCategories(): string[] {
+    const filteredStats = this.filteredKpiStatistics
+    if (filteredStats.length === 0) return []
+
+    const categories = new Set<string>()
+    filteredStats.forEach(stat => {
+      if (stat.kpi?.category?.name) {
+        categories.add(stat.kpi.category.name)
+      }
+    })
+
+    return Array.from(categories)
+  }
+
+  private get realKpiRadarGroups(): string[] {
+    return ['평균', '중앙값', '표준편차']
+  }
+
+  // 실제 KPI 통계 데이터를 기반으로 한 박스플롯 데이터
+  private get realKpiBoxplotData(): any[] {
+    const filteredStats = this.filteredKpiStatistics
+    if (filteredStats.length === 0) return []
+
+    // 카테고리별로 통계 데이터 그룹화
+    const categoryStats = new Map<string, any[]>()
+
+    filteredStats.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)
+      }
+    })
+
+    const result: any[] = []
+    const categories = Array.from(categoryStats.keys())
+
+    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 // 현재 값으로 평균 사용
+        })
+      }
+    })
+
+    return result
+  }
+
+  private get realKpiBoxplotGroups(): string[] {
+    const filteredStats = this.filteredKpiStatistics
+    if (filteredStats.length === 0) return []
+
+    const categories = new Set<string>()
+    filteredStats.forEach(stat => {
+      if (stat.kpi?.category?.name) {
+        categories.add(stat.kpi.category.name)
+      }
+    })
+
+    return Array.from(categories)
+  }
+
+  private get realKpiCurrentGroup() {
+    return '평균'
+  }
+
   connectedCallback() {
     super.connectedCallback()
     this.fetchCategories()
+    this.fetchKpiStatistics()
   }
 
   pageUpdated(changes: any, lifecycle: any) {
     if (this.active) {
       this.fetchCategories()
+      this.fetchKpiStatistics()
     }
   }
 
@@ -296,6 +517,70 @@ export class KpiDashboardPage extends PageView {
     }
   }
 
+  async fetchKpiStatistics() {
+    this.statisticsLoading = true
+    try {
+      const response = await client.query({
+        query: gql`
+          query {
+            kpiStatistics {
+              items {
+                id
+                valueDate
+                periodType
+                count
+                sum
+                range
+                mean
+                median
+                minimum
+                maximum
+                standardDeviation
+                variance
+                percentile25
+                percentile75
+                iqr
+                lowerFence
+                upperFence
+                additionalStatistics
+                metadata
+                kpi {
+                  id
+                  name
+                  unit
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `
+      })
+      this.kpiStatistics = response.data.kpiStatistics.items || []
+
+      // 현재 월을 기본값으로 설정
+      const currentMonth = this.currentMonth
+      const availableDates = this.availableValueDates
+
+      if (availableDates.includes(currentMonth)) {
+        // 현재 월 데이터가 있으면 현재 월로 설정
+        this.selectedValueDate = currentMonth
+      } else if (availableDates.length > 0) {
+        // 현재 월 데이터가 없으면 가장 최근 데이터로 설정
+        this.selectedValueDate = availableDates[0]
+      } else {
+        // 데이터가 없으면 현재 월로 설정
+        this.selectedValueDate = currentMonth
+      }
+    } catch (e) {
+      console.error('KPI 통계 데이터를 불러오지 못했습니다:', e)
+    } finally {
+      this.statisticsLoading = false
+    }
+  }
+
   async openHistoryModal(kpi) {
     // 전체 이력 fetch (limit 없이)
     try {
@@ -501,6 +786,137 @@ export class KpiDashboardPage extends PageView {
             </div>
           </div>
         </div>
+
+        <!-- 실제 KPI 통계 차트 섹션 -->
+        <div class="sample-charts-section">
+          <!-- 통계 필터 및 요약 -->
+          <div style="margin-bottom: 24px; background: #f8f9fa; padding: 16px; border-radius: 8px;">
+            <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <label style="font-weight: 500; color: #333;">기간:</label>
+                <span style="padding: 6px 12px; background: #e9ecef; border-radius: 4px; color: #495057;">
+                  MONTH (월별)
+                </span>
+              </div>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <label style="font-weight: 500; color: #333;">날짜:</label>
+                <select
+                  .value=${this.selectedValueDate}
+                  @change=${this._onValueDateChange}
+                  style="padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: white;"
+                >
+                  ${this.availableValueDates.map(
+                    date => html`<option value="${date}">${date}${date === this.currentMonth ? ' (현재)' : ''}</option>`
+                  )}
+                </select>
+              </div>
+              ${this.statisticsSummary
+                ? html`
+                    <div style="display: flex; gap: 16px; margin-left: auto;">
+                      <span style="color: #666; font-size: 0.9em;">
+                        <b>KPI:</b> ${this.statisticsSummary.totalKpis}개
+                      </span>
+                      <span style="color: #666; font-size: 0.9em;">
+                        <b>카테고리:</b> ${this.statisticsSummary.totalCategories}개
+                      </span>
+                      <span style="color: #666; font-size: 0.9em;">
+                        <b>평균:</b> ${this.statisticsSummary.avgMean}
+                      </span>
+                      <span style="color: #666; font-size: 0.9em;">
+                        <b>중앙값:</b> ${this.statisticsSummary.avgMedian}
+                      </span>
+                      <span style="color: #666; font-size: 0.9em;">
+                        <b>표준편차:</b> ${this.statisticsSummary.avgStdDev}
+                      </span>
+                    </div>
+                  `
+                : nothing}
+            </div>
+          </div>
+
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">실제 KPI 통계 비교 (Radar)</div>
+            <div class="sample-chart-container">
+              ${this.statisticsLoading
+                ? html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
+                    통계 데이터 로딩 중...
+                  </div>`
+                : this.realKpiRadarData.length > 0
+                  ? html`<kpi-radar-chart
+                      .data=${this.realKpiRadarData}
+                      .categories=${this.realKpiRadarCategories}
+                      .currentGroup=${'평균'}
+                    ></kpi-radar-chart>`
+                  : html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
+                      선택된 기간에 통계 데이터가 없습니다.
+                    </div>`}
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>실제 KPI 통계 Radar 차트</b>는 실제 KPIStatistic 데이터를 기반으로 각 카테고리별 평균, 중앙값,
+              표준편차를 비교합니다.<br />
+              <b>평균</b>은 산술평균, <b>중앙값</b>은 50분위수, <b>표준편차</b>는 데이터 분산 정도를 나타냅니다.
+            </div>
+          </div>
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">실제 KPI 통계 분포 (Boxplot)</div>
+            <div class="sample-chart-container">
+              ${this.statisticsLoading
+                ? html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
+                    통계 데이터 로딩 중...
+                  </div>`
+                : this.realKpiBoxplotData.length > 0
+                  ? html`<kpi-boxplot-chart
+                      .data=${this.realKpiBoxplotData}
+                      .groups=${this.realKpiBoxplotGroups}
+                      .currentGroup=${'평균'}
+                    ></kpi-boxplot-chart>`
+                  : html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
+                      선택된 기간에 통계 데이터가 없습니다.
+                    </div>`}
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>실제 KPI 통계 Boxplot</b>은 실제 KPIStatistic 데이터를 기반으로 각 카테고리별 통계값의 분포를
+              보여줍니다.<br />
+              각 카테고리의 <b>평균값들</b>을 기준으로 분포를 계산하여, 카테고리 간 통계적 특성을 비교할 수 있습니다.
+            </div>
+          </div>
+        </div>
+
+        <!-- 3레벨 KPI 플로팅 섹션 -->
+        <div class="sample-charts-section">
+          <div style="margin-bottom: 24px;">
+            <h2 style="font-size: 1.5rem; font-weight: bold; color: #333; text-align: center; margin-bottom: 8px;">
+              3레벨 KPI 분석
+            </h2>
+            <p style="text-align: center; color: #666; font-size: 0.95rem;">
+              실제 KPIStatistic 데이터를 기반으로 한 다층적 분석
+            </p>
+          </div>
+
+          <!-- 1레벨: 그룹 총 스코어 -->
+          <div style="margin-bottom: 32px;">
+            <h3 style="font-size: 1.2rem; font-weight: 600; color: #495057; margin-bottom: 16px;">
+              📊 1레벨: 그룹 총 스코어
+            </h3>
+            <kpi-level1-card></kpi-level1-card>
+          </div>
+
+          <!-- 2레벨: 카테고리 비교 -->
+          <div style="margin-bottom: 32px;">
+            <h3 style="font-size: 1.2rem; font-weight: 600; color: #495057; margin-bottom: 16px;">
+              📈 2레벨: 카테고리 비교 분석
+            </h3>
+            <kpi-level2-comparison></kpi-level2-comparison>
+          </div>
+
+          <!-- 3레벨: 개별 KPI 비교 -->
+          <div style="margin-bottom: 32px;">
+            <h3 style="font-size: 1.2rem; font-weight: 600; color: #495057; margin-bottom: 16px;">
+              🔍 3레벨: 개별 KPI 상세 분석
+            </h3>
+            <kpi-level3-comparison></kpi-level3-comparison>
+          </div>
+        </div>
         ${this.showHistoryModal
           ? html`
               <div