@things-factory/kpi 9.0.29 → 9.0.31

package/dist-client/pages/kpi-dashboard/kpi-dashboard.js

@@ -15,6 +15,10 @@ import './kpi-value-entry';
 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';
 let KpiDashboardPage = class KpiDashboardPage extends PageView {
     constructor() {
         super(...arguments);
@@ -25,6 +29,10 @@ let KpiDashboardPage = class KpiDashboardPage extends PageView {
         this.showHistoryModal = false;
         this.modalHistories = [];
         this.modalKpiName = '';
+        this.kpiStatistics = []; // 실제 KPI 통계 데이터
+        this.statisticsLoading = true; // 통계 데이터 로딩 상태
+        this.selectedPeriodType = 'MONTH'; // 선택된 기간 타입 (MONTH로 고정)
+        this.selectedValueDate = ''; // 선택된 값 날짜
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -40,6 +48,7 @@ let KpiDashboardPage = class KpiDashboardPage extends PageView {
       }
       .sample-charts-section {
         display: flex;
+        flex-direction: column;
         gap: 40px;
         margin-bottom: 48px;
         align-items: flex-start;
@@ -227,13 +236,192 @@ let KpiDashboardPage = class KpiDashboardPage extends PageView {
     get sampleCurrentGroup() {
         return 'A';
     }
+    // 현재 월을 YYYY-MM 형식으로 반환
+    get currentMonth() {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        return `${year}-${month}`;
+    }
+    // 필터링된 KPI 통계 데이터
+    get filteredKpiStatistics() {
+        if (!this.kpiStatistics || this.kpiStatistics.length === 0)
+            return [];
+        return this.kpiStatistics.filter(stat => stat.periodType === 'MONTH' && stat.valueDate === this.selectedValueDate);
+    }
+    // 사용 가능한 기간 타입들 (MONTH로 고정)
+    get availablePeriodTypes() {
+        return ['MONTH'];
+    }
+    // MONTH 기간에 사용 가능한 날짜들
+    get availableValueDates() {
+        if (!this.kpiStatistics || this.kpiStatistics.length === 0)
+            return [];
+        const valueDates = new Set();
+        this.kpiStatistics.forEach(stat => {
+            if (stat.periodType === 'MONTH' && stat.valueDate) {
+                valueDates.add(stat.valueDate);
+            }
+        });
+        return Array.from(valueDates).sort().reverse(); // 최신 날짜부터 정렬
+    }
+    // 통계 요약 정보
+    get statisticsSummary() {
+        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로 고정)
+    _onPeriodTypeChange(event) {
+        // MONTH로 고정되어 있으므로 변경하지 않음
+    }
+    // 날짜 변경 핸들러
+    _onValueDateChange(event) {
+        const target = event.target;
+        this.selectedValueDate = target.value;
+    }
+    // 실제 KPI 통계 데이터를 기반으로 한 레이더 차트 데이터
+    get realKpiRadarData() {
+        const filteredStats = this.filteredKpiStatistics;
+        if (filteredStats.length === 0)
+            return [];
+        // 카테고리별로 통계 데이터 그룹화
+        const categoryStats = new Map();
+        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 = [];
+        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;
+    }
+    get realKpiRadarCategories() {
+        const filteredStats = this.filteredKpiStatistics;
+        if (filteredStats.length === 0)
+            return [];
+        const categories = new Set();
+        filteredStats.forEach(stat => {
+            if (stat.kpi?.category?.name) {
+                categories.add(stat.kpi.category.name);
+            }
+        });
+        return Array.from(categories);
+    }
+    get realKpiRadarGroups() {
+        return ['평균', '중앙값', '표준편차'];
+    }
+    // 실제 KPI 통계 데이터를 기반으로 한 박스플롯 데이터
+    get realKpiBoxplotData() {
+        const filteredStats = this.filteredKpiStatistics;
+        if (filteredStats.length === 0)
+            return [];
+        // 카테고리별로 통계 데이터 그룹화
+        const categoryStats = new Map();
+        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 = [];
+        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;
+    }
+    get realKpiBoxplotGroups() {
+        const filteredStats = this.filteredKpiStatistics;
+        if (filteredStats.length === 0)
+            return [];
+        const categories = new Set();
+        filteredStats.forEach(stat => {
+            if (stat.kpi?.category?.name) {
+                categories.add(stat.kpi.category.name);
+            }
+        });
+        return Array.from(categories);
+    }
+    get realKpiCurrentGroup() {
+        return '평균';
+    }
     connectedCallback() {
         super.connectedCallback();
         this.fetchCategories();
+        this.fetchKpiStatistics();
     }
     pageUpdated(changes, lifecycle) {
         if (this.active) {
             this.fetchCategories();
+            this.fetchKpiStatistics();
         }
     }
     async fetchCategories() {
@@ -291,6 +479,71 @@ let KpiDashboardPage = class KpiDashboardPage extends PageView {
             this.loading = false;
         }
     }
+    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 {
@@ -486,6 +739,135 @@ let KpiDashboardPage = 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
@@ -636,6 +1018,22 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], KpiDashboardPage.prototype, "modalKpiName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "kpiStatistics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardPage.prototype, "statisticsLoading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], KpiDashboardPage.prototype, "selectedPeriodType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], KpiDashboardPage.prototype, "selectedValueDate", void 0);
 KpiDashboardPage = __decorate([
     customElement('kpi-dashboard')
 ], KpiDashboardPage);