@things-factory/kpi 10.1.248 → 10.1.249

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

@@ -0,0 +1,884 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import { state } from 'lit/decorators.js';
+import '@material/web/icon/icon.js';
+import './kpi-performance-summary';
+import './kpi-grade-visualization';
+import './kpi-history-viewer';
+import './kpi-list-summary';
+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);
+        this.categories = [];
+        this.loading = true;
+        this.error = '';
+        this.alerts = [];
+        this.showHistoryModal = false;
+        this.modalHistories = [];
+        this.modalKpiName = '';
+        this.kpiStatistics = []; // 실제 KPI 통계 데이터
+        this.statisticsLoading = true; // 통계 데이터 로딩 상태
+        this.selectedPeriodType = 'MONTH'; // 선택된 기간 타입 (MONTH로 고정)
+        this.selectedValueDate = ''; // 선택된 값 날짜
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      .dashboard-root {
+        flex: 1;
+        padding: 24px;
+      }
+      .charts-section {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+        margin-bottom: 48px;
+        align-items: flex-start;
+      }
+      .chart-card {
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        border: 1px solid #ececec;
+        padding: 24px 32px;
+        min-width: 340px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        min-height: 500px;
+      }
+      .chart-title {
+        font-size: 1.1rem;
+        font-weight: bold;
+        margin-bottom: 12px;
+      }
+      .chart-container {
+        width: 100%;
+        height: 340px;
+        min-height: 340px;
+      }
+      .category-section {
+        margin-bottom: 40px;
+      }
+      .category-title {
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-bottom: 16px;
+      }
+      .kpi-cards {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+      }
+      .kpi-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px 32px;
+        min-width: 220px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        border: 1px solid #ececec;
+      }
+      .kpi-name {
+        font-size: 1.1rem;
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+      .kpi-value {
+        font-size: 2.2rem;
+        font-weight: bold;
+        color: #3a3ad6;
+        margin-bottom: 4px;
+      }
+      .kpi-target {
+        font-size: 1rem;
+        color: #888;
+      }
+    `
+    ]; }
+    // 현재 월을 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() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            kpiCategories: kpisLevel1 {
+              id
+              name
+              kpis: children {
+                id
+                name
+                value {
+                  value
+                  valueDate
+                }
+                targetValue
+                unit
+                grades
+                vizType
+                vizMeta
+                histories(limit: 1) {
+                  version
+                  updatedAt
+                  updater {
+                    name
+                  }
+                }
+              }
+            }
+            kpiAlerts {
+              id
+              kpi {
+                id
+              }
+              message
+              level
+              createdAt
+            }
+          }
+        `
+            });
+            this.categories = response.data.kpiCategories || [];
+            this.alerts = response.data.kpiAlerts || [];
+        }
+        catch (e) {
+            this.error = 'KPI 카테고리 데이터를 불러오지 못했습니다.';
+        }
+        finally {
+            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: parent {
+                    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 {
+            const response = await client.query({
+                query: gql `
+          query ($kpiId: String!) {
+            kpi(id: $kpiId) {
+              name
+              histories {
+                version
+                updatedAt
+                updater {
+                  name
+                }
+              }
+            }
+          }
+        `,
+                variables: { kpiId: kpi.id }
+            });
+            this.modalHistories = response.data.kpi.histories || [];
+            this.modalKpiName = response.data.kpi.name || '';
+            this.showHistoryModal = true;
+        }
+        catch (e) {
+            alert('이력 데이터를 불러오지 못했습니다.');
+        }
+    }
+    closeHistoryModal() {
+        this.showHistoryModal = false;
+        this.modalHistories = [];
+        this.modalKpiName = '';
+    }
+    _renderKpiValue(kpi) {
+        const kpiValue = kpi.value?.value ?? 0;
+        const targetValue = kpi.targetValue ?? 100;
+        const unit = kpi.unit ?? '';
+        const vizType = kpi.vizType || 'CARD';
+        const vizMeta = kpi.vizMeta || {};
+        const color = vizMeta.color || '#3a3ad6';
+        const icon = vizMeta.icon || 'trending_up';
+        const minValue = vizMeta.minValue || 0;
+        const maxValue = vizMeta.maxValue || 100;
+        const decimalPlaces = vizMeta.decimalPlaces || 0;
+        const formattedValue = typeof kpiValue === 'number' ? kpiValue.toFixed(decimalPlaces) : kpiValue;
+        switch (vizType) {
+            case 'GAUGE':
+                const gaugePercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100);
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <div
+              style="width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${gaugePercentage *
+                    3.6}deg, #e0e0e0 ${gaugePercentage * 3.6}deg 360deg);margin:0 auto;position:relative;"
+            >
+              <div
+                style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:1.2rem;font-weight:bold;color:${color};"
+              >
+                ${formattedValue}${unit}
+              </div>
+            </div>
+          </div>
+        `;
+            case 'PROGRESS':
+                const progressPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100);
+                return html `
+          <div style="margin:16px 0;">
+            <div style="background:#e0e0e0;height:20px;border-radius:10px;overflow:hidden;">
+              <div style="background:${color};height:100%;width:${progressPercentage}%;transition:width 0.3s;"></div>
+            </div>
+            <div style="text-align:center;margin-top:8px;font-weight:bold;color:${color};font-size:1.2rem;">
+              ${formattedValue}${unit}
+            </div>
+          </div>
+        `;
+            case 'ICON':
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <md-icon style="color:${color};font-size:48px;">${icon}</md-icon>
+            <div style="font-size:1.5rem;font-weight:bold;color:${color};margin-top:8px;">${formattedValue}${unit}</div>
+          </div>
+        `;
+            case 'THERMOMETER':
+                const thermoPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100);
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <div
+              style="width:40px;height:120px;background:#e0e0e0;border-radius:20px;margin:0 auto;position:relative;overflow:hidden;"
+            >
+              <div
+                style="position:absolute;bottom:0;width:100%;height:${thermoPercentage}%;background:${color};border-radius:20px;"
+              ></div>
+            </div>
+            <div style="font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;">${formattedValue}${unit}</div>
+          </div>
+        `;
+            case 'SPEEDOMETER':
+                const speedPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100);
+                const angle = (speedPercentage / 100) * 180 - 90; // -90도에서 90도까지
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <div
+              style="width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} -90deg ${angle}deg, #e0e0e0 ${angle}deg 90deg);margin:0 auto;position:relative;"
+            >
+              <div
+                style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:1.2rem;font-weight:bold;color:${color};"
+              >
+                ${formattedValue}${unit}
+              </div>
+            </div>
+          </div>
+        `;
+            case 'BULLET':
+                const bulletPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100);
+                const targetPercentage = Math.min(((targetValue - minValue) / (maxValue - minValue)) * 100, 100);
+                return html `
+          <div style="margin:16px 0;">
+            <div style="background:#e0e0e0;height:30px;border-radius:15px;overflow:hidden;position:relative;">
+              <div style="background:${color};height:100%;width:${bulletPercentage}%;transition:width 0.3s;"></div>
+              <div
+                style="position:absolute;top:0;left:${targetPercentage}%;width:2px;height:100%;background:#333;"
+              ></div>
+            </div>
+            <div style="text-align:center;margin-top:8px;font-weight:bold;color:${color};font-size:1.2rem;">
+              ${formattedValue}${unit}
+            </div>
+          </div>
+        `;
+            case 'TEXT':
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <div style="font-size:1.5rem;font-weight:bold;color:${color};">${formattedValue}${unit}</div>
+          </div>
+        `;
+            case 'BADGE':
+                return html `
+          <div style="text-align:center;margin:16px 0;">
+            <span
+              style="display:inline-block;padding:8px 16px;background:${color};color:white;border-radius:20px;font-size:1.2rem;font-weight:bold;"
+              >${formattedValue}${unit}</span
+            >
+          </div>
+        `;
+            default: // CARD, BAR, LINE, PIE, DONUT, RADAR, TABLE
+                return html ` <div class="kpi-value">${formattedValue}${unit}</div> `;
+        }
+    }
+    get context() {
+        return {
+            title: 'KPI 대시보드',
+            description: '조직 KPI 실적, 등급, 이력, 시각화 등 KPI 전용 대시보드'
+        };
+    }
+    render() {
+        if (this.loading)
+            return nothing;
+        if (this.error)
+            return html `<div>${this.error}</div>`;
+        return html `
+      <div class="dashboard-root">
+        <!-- KPI 통계 차트 — kpiStatistics 를 그린다 -->
+        <div class="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="chart-card">
+            <div class="chart-title">실제 KPI 통계 비교 (Radar)</div>
+            <div class="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="chart-card">
+            <div class="chart-title">실제 KPI 통계 분포 (Boxplot)</div>
+            <div class="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="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
+                style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:1000;display:flex;align-items:center;justify-content:center;"
+              >
+                <div
+                  style="background:#fff;padding:32px 40px;border-radius:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 4px 24px rgba(0,0,0,0.15);"
+                >
+                  <div style="font-size:1.2rem;font-weight:bold;margin-bottom:16px;">
+                    ${this.modalKpiName} 변경 이력
+                  </div>
+                  <ul style="padding:0;list-style:none;">
+                    ${this.modalHistories.length === 0
+                ? html `<li style="color:#bbb;">이력이 없습니다.</li>`
+                : this.modalHistories.map(h => html `<li style="margin-bottom:8px;">
+                              v${h.version} (${h.updatedAt?.slice(0, 10) ?? ''} ${h.updater?.name ?? ''})
+                            </li>`)}
+                  </ul>
+                  <button style="margin-top:16px;padding:6px 18px;" @click=${() => this.closeHistoryModal()}>
+                    닫기
+                  </button>
+                </div>
+              </div>
+            `
+            : nothing}
+        ${this.categories.map(cat => html `
+            <div class="category-section">
+              <div class="category-title">${cat.name}</div>
+              <div class="kpi-cards">
+                ${(cat.kpis || []).map(kpi => html `
+                    <div class="kpi-card">
+                      <div class="kpi-name">${kpi.name}</div>
+                      ${this._renderKpiValue(kpi)}
+                      <div class="kpi-target">목표: ${kpi.targetValue ?? '-'}${kpi.unit ?? ''}</div>
+                      <!-- 등급 시각화 -->
+                      <div style="margin-top:8px;">
+                        <b>등급:</b>
+                        ${(() => {
+            const grades = kpi.grades || [];
+            const kpiValue = kpi.value?.value;
+            if (grades.length > 5) {
+                // 5개를 넘으면 현재 값에 해당하는 grade만 표시
+                const currentGrade = grades.find(g => kpiValue >= g.minValue && kpiValue <= g.maxValue);
+                if (currentGrade) {
+                    return html `<span
+                                style="display:inline-block;margin-right:8px;padding:4px 12px;border-radius:12px;background:${currentGrade.color ??
+                        '#3a3ad6'};color:white;font-size:1em;font-weight:bold;box-shadow:0 2px 8px rgba(58,58,214,0.3);border:2px solid ${currentGrade.color ??
+                        '#3a3ad6'};"
+                                >${currentGrade.name}(${currentGrade.minValue}~${currentGrade.maxValue}${kpi.unit ??
+                        ''},
+                                ${currentGrade.score ?? ''}점)</span
+                              >`;
+                }
+                else {
+                    return html `<span style="color:#bbb;font-size:0.95em;">등급 없음</span>`;
+                }
+            }
+            else {
+                // 5개 이하면 전체 리스트 표시하되 현재 등급은 강조
+                return grades.map(g => {
+                    const isCurrentGrade = kpiValue >= g.minValue && kpiValue <= g.maxValue;
+                    return html `<span
+                                style="display:inline-block;margin-right:8px;padding:${isCurrentGrade
+                        ? '4px 12px'
+                        : '2px 8px'};border-radius:${isCurrentGrade
+                        ? '12px'
+                        : '8px'};background:${isCurrentGrade
+                        ? (g.color ?? '#3a3ad6')
+                        : (g.color ?? '#eee')};color:${isCurrentGrade
+                        ? 'white'
+                        : '#222'};font-size:${isCurrentGrade ? '1em' : '0.95em'};font-weight:${isCurrentGrade
+                        ? 'bold'
+                        : 'normal'};box-shadow:${isCurrentGrade
+                        ? '0 2px 8px rgba(58,58,214,0.3)'
+                        : 'none'};border:${isCurrentGrade ? `2px solid ${g.color ?? '#3a3ad6'}` : 'none'};"
+                                >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span
+                              >`;
+                });
+            }
+        })()}
+                      </div>
+                      <!-- 최근 변경 이력(1건만) -->
+                      <div style="margin-top:8px;font-size:0.95em;color:#888;">
+                        <b>최근 변경:</b>
+                        ${kpi.histories && kpi.histories.length > 0
+            ? html `<span style="margin-right:8px;"
+                              >v${kpi.histories[0].version} (${kpi.histories[0].updatedAt?.slice(0, 10) ?? ''}
+                              ${kpi.histories[0].updater?.name ?? ''})</span
+                            >`
+            : html `<span style="color:#bbb">없음</span>`}
+                        <button
+                          style="margin-left:8px;font-size:0.95em;padding:2px 8px;"
+                          @click=${() => this.openHistoryModal(kpi)}
+                        >
+                          더보기
+                        </button>
+                      </div>
+                      <!-- 경고/알림 -->
+                      <div style="margin-top:8px;">
+                        ${this.alerts.filter(a => a.kpi?.id === kpi.id).length > 0
+            ? this.alerts
+                .filter(a => a.kpi?.id === kpi.id)
+                .map(a => html `<span
+                                    style="display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${a.level ===
+                'critical'
+                ? '#ffb3b3'
+                : a.level === 'warning'
+                    ? '#ffe082'
+                    : '#e0e0e0'};color:#b71c1c;font-size:0.95em;"
+                                    >${a.message}</span
+                                  >`)
+            : html `<span style="color:#4caf50;font-size:0.95em;">이상/경고 없음</span>`}
+                      </div>
+                    </div>
+                  `)}
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "categories", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "alerts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], KpiDashboardPage.prototype, "showHistoryModal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiDashboardPage.prototype, "modalHistories", void 0);
+__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);
+export { KpiDashboardPage };
+//# sourceMappingURL=kpi-dashboard.js.map