@dssp/dkpi 1.0.0-alpha.6 → 1.0.0-alpha.60

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

@@ -0,0 +1,1027 @@
+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 '../../components/kpi-radar-chart';
+import '../../components/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 = ''; // 선택된 값 날짜
+    }
+    // 샘플 데이터
+    get sampleCategories() {
+        return ['생산성', '품질', '안전', '환경', '비용', '일정'];
+    }
+    get sampleGroups() {
+        return ['A', 'B', 'C'];
+    }
+    get sampleSeriesData() {
+        // 각 카테고리별로 10개 이상의 다양한 값(평균, 분산, 이상치 포함)
+        // 생산성: 평균 높고 분산 큼, 이상치 포함
+        const 생산성 = [95, 92, 90, 88, 85, 80, 78, 75, 70, 60, 100]; // 100은 이상치
+        // 품질: 평균 높고 분산 작음
+        const 품질 = [90, 89, 88, 87, 86, 85, 84, 83, 82, 80, 70];
+        // 안전: 평균 중간, 이상치 포함
+        const 안전 = [92, 91, 90, 89, 88, 87, 86, 85, 84, 65, 60]; // 60은 이상치
+        // 환경: 낮은 값에 몰림, 분산 큼
+        const 환경 = [95, 90, 85, 80, 75, 70, 65, 60, 60, 60, 55];
+        // 비용: 전체적으로 낮음, 이상치 포함
+        const 비용 = [80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 50]; // 50은 이상치
+        // 일정: 분산 큼, 이상치 포함
+        const 일정 = [90, 88, 86, 84, 82, 80, 78, 76, 74, 60, 100]; // 100은 이상치
+        const categories = this.sampleCategories;
+        const groups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
+        const all = [];
+        categories.forEach((cat, i) => {
+            let arr = [];
+            switch (cat) {
+                case '생산성':
+                    arr = 생산성;
+                    break;
+                case '품질':
+                    arr = 품질;
+                    break;
+                case '안전':
+                    arr = 안전;
+                    break;
+                case '환경':
+                    arr = 환경;
+                    break;
+                case '비용':
+                    arr = 비용;
+                    break;
+                case '일정':
+                    arr = 일정;
+                    break;
+            }
+            arr.forEach((v, idx) => {
+                var _a;
+                all.push({ group: (_a = groups[idx]) !== null && _a !== void 0 ? _a : `G${idx + 1}`, category: cat, value: v });
+            });
+        });
+        return all;
+    }
+    get sampleRadarData() {
+        // 카테고리별로 min, max, avg, A(자신의 그룹)만 반환
+        const categories = this.sampleCategories;
+        const data = this.sampleSeriesData;
+        const minData = { group: 'Min' };
+        const maxData = { group: 'Max' };
+        const avgData = { group: 'Avg' };
+        const aData = { group: 'A' };
+        categories.forEach(category => {
+            var _a, _b;
+            const values = data.filter(d => d.category === category).map(d => d.value);
+            minData[category] = Math.min(...values);
+            maxData[category] = Math.max(...values);
+            avgData[category] = values.reduce((a, b) => a + b, 0) / values.length;
+            aData[category] = (_b = (_a = data.find(d => d.category === category && d.org === 'A')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : avgData[category];
+        });
+        // kpi-radar-chart가 기대하는 구조로 변환: [{org, category, value} ...]
+        const result = [];
+        categories.forEach(category => {
+            result.push({ org: 'Min', category, value: minData[category] });
+            result.push({ org: 'Max', category, value: maxData[category] });
+            result.push({ org: 'Avg', category, value: avgData[category] });
+            result.push({ org: 'A', category, value: aData[category] });
+        });
+        return result;
+    }
+    get sampleRadarCategories() {
+        return this.sampleCategories;
+    }
+    get sampleRadarGroups() {
+        return this.sampleGroups;
+    }
+    get sampleBoxplotData() {
+        // 카테고리별로 그룹별 value의 분포 계산
+        const categories = this.sampleCategories;
+        const data = this.sampleSeriesData;
+        return categories.map(category => {
+            var _a, _b;
+            const values = data.filter(d => d.category === category).map(d => d.value);
+            const sorted = [...values].sort((a, b) => a - b);
+            const min = sorted[0];
+            const max = sorted[sorted.length - 1];
+            const mean = values.reduce((a, b) => a + b, 0) / values.length;
+            const median = sorted.length % 2 === 0
+                ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2
+                : sorted[Math.floor(sorted.length / 2)];
+            const q1 = sorted[Math.floor(sorted.length / 4)];
+            const q3 = sorted[Math.floor((sorted.length * 3) / 4)];
+            // value: A그룹의 실제값(강조)
+            const value = (_b = (_a = data.find(d => d.category === category && d.org === 'A')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : mean;
+            return {
+                org: category, // x축: 카테고리
+                min,
+                q1,
+                median,
+                q3,
+                max,
+                mean,
+                value
+            };
+        });
+    }
+    get sampleBoxplotGroups() {
+        return this.sampleCategories;
+    }
+    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 => { var _a, _b; return (_b = (_a = s.kpi) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.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 => {
+            var _a, _b;
+            if ((_b = (_a = stat.kpi) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.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 => {
+            var _a, _b;
+            if ((_b = (_a = stat.kpi) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.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 => {
+            var _a, _b;
+            if ((_b = (_a = stat.kpi) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.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 => {
+            var _a, _b;
+            if ((_b = (_a = stat.kpi) === null || _a === void 0 ? void 0 : _a.category) === null || _b === void 0 ? void 0 : _b.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) {
+        var _a, _b, _c, _d;
+        const kpiValue = (_b = (_a = kpi.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0;
+        const targetValue = (_c = kpi.targetValue) !== null && _c !== void 0 ? _c : 100;
+        const unit = (_d = kpi.unit) !== null && _d !== void 0 ? _d : '';
+        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() {
+        var _a, _b, _c, _d;
+        if (this.loading)
+            return nothing;
+        if (this.error)
+            return html `<div>${this.error}</div>`;
+        return html `
+      <div class="dashboard-root">
+        <!-- 샘플 차트 섹션 -->
+        <div class="sample-charts-section">
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 KPI 비교 (Radar)</div>
+            <div class="sample-chart-container">
+              <sv-kpi-radar-chart
+                .data=${(_a = this.sampleRadarData) !== null && _a !== void 0 ? _a : []}
+                .categories=${(_b = this.sampleRadarCategories) !== null && _b !== void 0 ? _b : []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></sv-kpi-radar-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Radar 차트</b>는 각 카테고리별로 최소(Min), 최대(Max), 평균(Avg), 그리고 이 프로젝트의 값을 한눈에 비교할 수
+              있도록 시각화합니다.<br />
+              <b>진한 파란색</b> 다각형이 이 프로젝트의 성과이며, 회색 다각형은 기준값(최소/최대/평균)입니다.
+            </div>
+          </div>
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 분포 (Boxplot)</div>
+            <div class="sample-chart-container">
+              <sv-kpi-boxplot-chart
+                .data=${(_c = this.sampleBoxplotData) !== null && _c !== void 0 ? _c : []}
+                .groups=${(_d = this.sampleBoxplotGroups) !== null && _d !== void 0 ? _d : []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></sv-kpi-boxplot-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Boxplot(박스플롯)</b>은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를
+              보여줍니다.<br />
+              <b>박스</b>는 중앙 50% 구간, <b>수염</b>은 전체 범위, <b>굵은 검정색 가로선</b>은 중앙값(메디안), <b>주황색 원</b>은
+              평균값(Mean)을 의미합니다.<br />
+              <b>이 프로젝트의 값</b>은 <b>진한 오렌지색 원</b>으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.<br />
+            </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 `<sv-kpi-radar-chart
+                      .data=${this.realKpiRadarData}
+                      .categories=${this.realKpiRadarCategories}
+                      .currentGroup=${'평균'}
+                    ></sv-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 `<sv-kpi-boxplot-chart
+                      .data=${this.realKpiBoxplotData}
+                      .groups=${this.realKpiBoxplotGroups}
+                      .currentGroup=${'평균'}
+                    ></sv-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
+                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 => {
+                    var _a, _b, _c, _d;
+                    return html `<li style="margin-bottom:8px;">
+                              v${h.version} (${(_b = (_a = h.updatedAt) === null || _a === void 0 ? void 0 : _a.slice(0, 10)) !== null && _b !== void 0 ? _b : ''} ${(_d = (_c = h.updater) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : ''})
+                            </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 => {
+            var _a, _b, _c, _d, _e, _f;
+            return html `
+                    <div class="kpi-card">
+                      <div class="kpi-name">${kpi.name}</div>
+                      ${this._renderKpiValue(kpi)}
+                      <div class="kpi-target">목표: ${(_a = kpi.targetValue) !== null && _a !== void 0 ? _a : '-'}${(_b = kpi.unit) !== null && _b !== void 0 ? _b : ''}</div>
+                      <!-- 등급 시각화 -->
+                      <div style="margin-top:8px;">
+                        <b>등급:</b>
+                        ${(() => {
+                var _a, _b, _c, _d, _e;
+                const grades = kpi.grades || [];
+                const kpiValue = (_a = kpi.value) === null || _a === void 0 ? void 0 : _a.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:${(_b = currentGrade.color) !== null && _b !== void 0 ? _b : '#3a3ad6'};color:white;font-size:1em;font-weight:bold;box-shadow:0 2px 8px rgba(58,58,214,0.3);border:2px solid ${(_c = currentGrade.color) !== null && _c !== void 0 ? _c : '#3a3ad6'};"
+                                >${currentGrade.name}(${currentGrade.minValue}~${currentGrade.maxValue}${(_d = kpi.unit) !== null && _d !== void 0 ? _d : ''},
+                                ${(_e = currentGrade.score) !== null && _e !== void 0 ? _e : ''}점)</span
+                              >`;
+                    }
+                    else {
+                        return html `<span style="color:#bbb;font-size:0.95em;">등급 없음</span>`;
+                    }
+                }
+                else {
+                    // 5개 이하면 전체 리스트 표시하되 현재 등급은 강조
+                    return grades.map(g => {
+                        var _a, _b, _c, _d, _e;
+                        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
+                            ? ((_a = g.color) !== null && _a !== void 0 ? _a : '#3a3ad6')
+                            : ((_b = g.color) !== null && _b !== void 0 ? _b : '#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 ${(_c = g.color) !== null && _c !== void 0 ? _c : '#3a3ad6'}` : 'none'};"
+                                >${g.name}(${g.minValue}~${g.maxValue}${(_d = kpi.unit) !== null && _d !== void 0 ? _d : ''}, ${(_e = g.score) !== null && _e !== void 0 ? _e : ''}점)</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} (${(_d = (_c = kpi.histories[0].updatedAt) === null || _c === void 0 ? void 0 : _c.slice(0, 10)) !== null && _d !== void 0 ? _d : ''}
+                              ${(_f = (_e = kpi.histories[0].updater) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : ''})</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 => { var _a; return ((_a = a.kpi) === null || _a === void 0 ? void 0 : _a.id) === kpi.id; }).length > 0
+                ? this.alerts
+                    .filter(a => { var _a; return ((_a = a.kpi) === null || _a === void 0 ? void 0 : _a.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>
+    `;
+    }
+};
+KpiDashboardPage.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      .dashboard-root {
+        flex: 1;
+        padding: 24px;
+      }
+      .sample-charts-section {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+        margin-bottom: 48px;
+        align-items: flex-start;
+      }
+      .sample-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;
+      }
+      .sample-chart-title {
+        font-size: 1.1rem;
+        font-weight: bold;
+        margin-bottom: 12px;
+      }
+      .sample-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;
+      }
+    `
+];
+__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