@things-factory/kpi 10.1.247 → 10.1.248

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

@@ -1,884 +0,0 @@
-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