@dssp/dkpi 1.0.0-alpha.99 → 1.0.0

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

@@ -1,1097 +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 '../../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 = ''; // 선택된 값 날짜
-        this.selectedSectorType = ''; // 공공/민간 필터
-        this.selectedBuildingUsage = ''; // 주거/비주거 필터
-    }
-    // 샘플 데이터
-    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;
-    }
-    _onSectorTypeChange(event) {
-        const target = event.target;
-        this.selectedSectorType = target.value;
-    }
-    _onBuildingUsageChange(event) {
-        const target = event.target;
-        this.selectedBuildingUsage = 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">성과영역별 KPI (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> <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;">프로젝트 데이터 기반 다층적 KPI 성과 분석</p>
-          </div>
-
-          <!-- 프로젝트 속성 필터 -->
-          <div style="margin-bottom: 24px; background: #f8f9fa; padding: 16px; border-radius: 8px; border: 1px solid #e9ecef;">
-            <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; white-space: nowrap;">사업 유형:</label>
-                <select
-                  .value=${this.selectedSectorType}
-                  @change=${this._onSectorTypeChange}
-                  style="padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: white;"
-                >
-                  <option value="">전체</option>
-                  <option value="PUBLIC">공공</option>
-                  <option value="PRIVATE">민간</option>
-                </select>
-              </div>
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <label style="font-weight: 500; color: #333; white-space: nowrap;">건물 용도:</label>
-                <select
-                  .value=${this.selectedBuildingUsage}
-                  @change=${this._onBuildingUsageChange}
-                  style="padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: white;"
-                >
-                  <option value="">전체</option>
-                  <option value="RESIDENTIAL">주거</option>
-                  <option value="NON_RESIDENTIAL">비주거</option>
-                </select>
-              </div>
-              ${this.selectedSectorType || this.selectedBuildingUsage
-            ? html `<span style="color:#1976d2;font-size:0.9em;margin-left:8px;">
-                    필터 적용 중:
-                    ${[
-                this.selectedSectorType === 'PUBLIC' ? '공공' : this.selectedSectorType === 'PRIVATE' ? '민간' : '',
-                this.selectedBuildingUsage === 'RESIDENTIAL'
-                    ? '주거'
-                    : this.selectedBuildingUsage === 'NON_RESIDENTIAL'
-                        ? '비주거'
-                        : ''
-            ]
-                .filter(Boolean)
-                .join(' · ')}
-                  </span>`
-            : nothing}
-            </div>
-          </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
-              .sectorType=${this.selectedSectorType}
-              .buildingUsage=${this.selectedBuildingUsage}
-            ></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
-              .sectorType=${this.selectedSectorType}
-              .buildingUsage=${this.selectedBuildingUsage}
-            ></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
-              .sectorType=${this.selectedSectorType}
-              .buildingUsage=${this.selectedBuildingUsage}
-            ></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);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], KpiDashboardPage.prototype, "selectedSectorType", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], KpiDashboardPage.prototype, "selectedBuildingUsage", void 0);
-KpiDashboardPage = __decorate([
-    customElement('kpi-dashboard')
-], KpiDashboardPage);
-export { KpiDashboardPage };
-//# sourceMappingURL=kpi-dashboard.js.map