@dssp/dkpi 1.0.0-alpha.99 → 1.0.0

package/dist-client/pages/kpi-dashboard/components/kpi-left-panel.js

@@ -1,945 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import gql from 'graphql-tag';
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
-import { client } from '@operato/graphql';
-import '../../../components/kpi-radar-chart.js';
-import '../../../components/kpi-boxplot-chart.js';
-import '../../../components/kpi-mini-trend-chart.js';
-let KpiLeftPanel = class KpiLeftPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.selectedCategory = '전체 KPI';
-        this.selectedChartType = 'boxplot';
-        this.mapData = [];
-        this.startYearMonth = ''; // YYYY-MM 형식
-        this.endYearMonth = ''; // YYYY-MM 형식
-        this.sectorType = '';
-        this.buildingUsage = '';
-        this.isAllPeriod = false;
-        this.chartData = [];
-        this.chartCategories = [];
-        this.kpiYComprehensiveStats = [];
-        this.regionalKpiStats = [];
-        this.monthlyTrendData = [];
-        // 행정안전부 행정구역코드 순서
-        this.regionOrder = [
-            '서울특별시',
-            '부산광역시',
-            '대구광역시',
-            '인천광역시',
-            '광주광역시',
-            '대전광역시',
-            '울산광역시',
-            '세종특별자치시',
-            '경기도',
-            '강원도',
-            '충청북도',
-            '충청남도',
-            '전라북도',
-            '전라남도',
-            '경상북도',
-            '경상남도',
-            '제주특별자치도'
-        ];
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // 기간 초기값이 비어있으면 현재 월 기준 12개월로 설정
-        if (!this.startYearMonth || !this.endYearMonth) {
-            const now = new Date();
-            const end = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-            const start = new Date(now);
-            start.setMonth(start.getMonth() - 11);
-            const startStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}`;
-            this.startYearMonth = startStr;
-            this.endYearMonth = end;
-        }
-        this.fetchKpiYComprehensiveStats();
-        this.fetchRegionalKpiStats();
-        this.fetchMonthlyTrendData();
-    }
-    updated(changedProperties) {
-        // selectedCategory, startYearMonth, endYearMonth가 변경되면 데이터 다시 가져오기
-        if (changedProperties.has('selectedCategory') ||
-            changedProperties.has('startYearMonth') ||
-            changedProperties.has('endYearMonth') ||
-            changedProperties.has('sectorType') ||
-            changedProperties.has('buildingUsage')) {
-            // 기간 정보가 설정되어 있을 때만 조회 (빈 문자열이면 전체 기간)
-            if (this.startYearMonth !== undefined && this.endYearMonth !== undefined) {
-                this.fetchKpiYComprehensiveStats();
-                this.fetchRegionalKpiStats();
-                this.fetchMonthlyTrendData();
-            }
-        }
-    }
-    async fetchKpiYComprehensiveStats() {
-        try {
-            const response = await client.query({
-                query: gql `
-          query GetKpiYValueComprehensiveStats(
-            $startYearMonth: String
-            $endYearMonth: String
-            $sectorType: String
-            $buildingUsage: String
-          ) {
-            totalKpiYValueComprehensiveStats(
-              startYearMonth: $startYearMonth
-              endYearMonth: $endYearMonth
-              sectorType: $sectorType
-              buildingUsage: $buildingUsage
-            ) {
-              kpiName
-              minVal
-              q1Val
-              medVal
-              q3Val
-              maxVal
-              avgVal
-            }
-          }
-        `,
-                variables: {
-                    startYearMonth: this.startYearMonth,
-                    endYearMonth: this.endYearMonth,
-                    sectorType: this.sectorType || null,
-                    buildingUsage: this.buildingUsage || null
-                }
-            });
-            this.kpiYComprehensiveStats = response.data.totalKpiYValueComprehensiveStats || [];
-            // 부모에게 전체 Y-level KPI 통계 전달
-            this.dispatchEvent(new CustomEvent('total-kpi-y-stats-loaded', {
-                detail: { data: this.kpiYComprehensiveStats },
-                bubbles: true,
-                composed: true
-            }));
-            this.generateChartData();
-        }
-        catch (error) {
-            console.error('Failed to fetch KPI Y comprehensive stats:', error);
-            this.kpiYComprehensiveStats = [];
-            this.generateChartData();
-        }
-    }
-    async fetchRegionalKpiStats() {
-        try {
-            // selectedCategory에 따라 kpiName 결정
-            const categoryToKpiName = {
-                '전체 KPI': null,
-                '일정 성과': '일정성과(Y1)',
-                '비용 성과': '비용성과(Y2)',
-                '품질 성과': '품질성과(Y3)',
-                '안전 성과': 'Y4. 안전성과',
-                '환경 성과': '환경성과(Y5)',
-                '생산성 성과': '생산성성과(Y6)'
-            };
-            const kpiName = categoryToKpiName[this.selectedCategory];
-            const response = await client.query({
-                query: gql `
-          query GetRegionalKpiStats(
-            $kpiName: String
-            $startYearMonth: String
-            $endYearMonth: String
-            $sectorType: String
-            $buildingUsage: String
-          ) {
-            kpiZValueComprehensiveStatsByGeoGroup(
-              kpiName: $kpiName
-              startYearMonth: $startYearMonth
-              endYearMonth: $endYearMonth
-              sectorType: $sectorType
-              buildingUsage: $buildingUsage
-            ) {
-              geoGroup
-              avgVal
-              minVal
-              maxVal
-              projectCount
-            }
-          }
-        `,
-                variables: {
-                    kpiName,
-                    startYearMonth: this.startYearMonth,
-                    endYearMonth: this.endYearMonth,
-                    sectorType: this.sectorType || null,
-                    buildingUsage: this.buildingUsage || null
-                }
-            });
-            this.regionalKpiStats = response.data.kpiZValueComprehensiveStatsByGeoGroup || [];
-            // 부모에게 지역별 KPI 통계 전달
-            this.dispatchEvent(new CustomEvent('regional-kpi-stats-loaded', {
-                detail: { data: this.regionalKpiStats },
-                bubbles: true,
-                composed: true
-            }));
-        }
-        catch (error) {
-            console.error('Failed to fetch regional KPI stats:', error);
-            this.regionalKpiStats = [];
-        }
-    }
-    async fetchMonthlyTrendData() {
-        try {
-            // selectedCategory에 따라 kpiName 결정
-            const categoryToKpiName = {
-                '전체 KPI': null,
-                '일정 성과': '일정성과(Y1)',
-                '비용 성과': '비용성과(Y2)',
-                '품질 성과': '품질성과(Y3)',
-                '안전 성과': 'Y4. 안전성과',
-                '환경 성과': '환경성과(Y5)',
-                '생산성 성과': '생산성성과(Y6)'
-            };
-            const kpiName = categoryToKpiName[this.selectedCategory];
-            const response = await client.query({
-                query: gql `
-          query GetMonthlyTrendData(
-            $kpiName: String
-            $startYearMonth: String
-            $endYearMonth: String
-            $sectorType: String
-            $buildingUsage: String
-          ) {
-            kpiZValueMonthlyTrendByGeoGroup(
-              kpiName: $kpiName
-              startYearMonth: $startYearMonth
-              endYearMonth: $endYearMonth
-              sectorType: $sectorType
-              buildingUsage: $buildingUsage
-            ) {
-              geoGroup
-              yearMonth
-              avgVal
-              projectCount
-            }
-          }
-        `,
-                variables: {
-                    kpiName,
-                    startYearMonth: this.startYearMonth,
-                    endYearMonth: this.endYearMonth,
-                    sectorType: this.sectorType || null,
-                    buildingUsage: this.buildingUsage || null
-                }
-            });
-            this.monthlyTrendData = response.data.kpiZValueMonthlyTrendByGeoGroup || [];
-            // 부모에게 월별 추이 데이터 전달
-            this.dispatchEvent(new CustomEvent('monthly-trend-data-loaded', {
-                detail: { data: this.monthlyTrendData },
-                bubbles: true,
-                composed: true
-            }));
-        }
-        catch (error) {
-            console.error('Failed to fetch monthly trend data:', error);
-            this.monthlyTrendData = [];
-        }
-    }
-    getRegionTrendData(region) {
-        // 해당 지역 월별 값 맵 (20배 스케일)
-        const byMonth = new Map();
-        this.monthlyTrendData
-            .filter(d => d.geoGroup === region)
-            .forEach(d => byMonth.set(d.yearMonth, d.avgVal * 100));
-        // 선택 기간 전체 월을 커버 — 데이터 없는 월은 null(0 아님). 기간 정보 없으면 데이터 월만.
-        const months = this.startYearMonth && this.endYearMonth
-            ? this._buildMonthRange(this.startYearMonth, this.endYearMonth)
-            : [...byMonth.keys()].sort();
-        return months.map(ym => (byMonth.has(ym) ? byMonth.get(ym) : null));
-    }
-    /** start~end(YYYY-MM) 사이 모든 월을 순서대로 반환 */
-    _buildMonthRange(start, end) {
-        const [sy, sm] = start.split('-').map(Number);
-        const [ey, em] = end.split('-').map(Number);
-        if (!sy || !sm || !ey || !em)
-            return [];
-        const out = [];
-        let y = sy;
-        let m = sm;
-        for (let i = 0; i < 240; i++) {
-            out.push(`${y}-${String(m).padStart(2, '0')}`);
-            if (y === ey && m === em)
-                break;
-            if (y > ey || (y === ey && m > em))
-                break;
-            m++;
-            if (m > 12) {
-                m = 1;
-                y++;
-            }
-        }
-        return out;
-    }
-    calculateChangeRate(region) {
-        // 해당 지역의 월별 데이터를 시간순으로 정렬
-        const regionData = this.monthlyTrendData
-            .filter(d => d.geoGroup === region)
-            .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
-        if (regionData.length < 2)
-            return 0;
-        // 가장 오래된 달과 가장 최근 달의 값 비교
-        const oldestValue = regionData[0].avgVal;
-        const latestValue = regionData[regionData.length - 1].avgVal;
-        if (oldestValue === 0)
-            return 0;
-        // 변동율 계산: (최근값 - 과거값) / 과거값 * 100
-        return ((latestValue - oldestValue) / oldestValue) * 100;
-    }
-    generateChartData() {
-        // kpiName 표기가 'Y1. 일정성과' / '일정성과(Y1)' 등으로 환경마다 달라 전체 문자열 매칭은 깨짐.
-        // Y1~Y6 코드만 추출해 짧은 라벨로 매핑.
-        const yLabelByCode = {
-            Y1: '일정',
-            Y2: '비용',
-            Y3: '품질',
-            Y4: '안전',
-            Y5: '환경',
-            Y6: '생산성'
-        };
-        const toCategory = (kpiName) => { var _a, _b; return yLabelByCode[(_b = (_a = (kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''] || kpiName; };
-        if (this.selectedChartType === 'radar') {
-            // 레이더 차트용 데이터 생성 (전체 평균만 표시)
-            const data = [];
-            const categories = [];
-            this.kpiYComprehensiveStats.forEach(stat => {
-                const category = toCategory(stat.kpiName);
-                if (!categories.includes(category)) {
-                    categories.push(category);
-                }
-                // 전체 평균 데이터만 표시 (비교 시리즈 없음) — 박스플롯과 동일 정밀도(Math.round 제거)
-                data.push({
-                    org: '전체평균',
-                    category,
-                    value: stat.avgVal * 100
-                });
-            });
-            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
-            this.chartData = data;
-        }
-        else {
-            // 박스플롯용 데이터 생성 (sv-project-detail.ts의 getYKpiBoxplotData 참조)
-            const data = [];
-            const categories = [];
-            this.kpiYComprehensiveStats.forEach(stat => {
-                const category = toCategory(stat.kpiName);
-                if (!categories.includes(category)) {
-                    categories.push(category);
-                }
-                data.push({
-                    org: category,
-                    min: stat.minVal * 100,
-                    max: stat.maxVal * 100,
-                    q1: stat.q1Val * 100,
-                    q3: stat.q3Val * 100,
-                    median: stat.medVal * 100,
-                    mean: stat.avgVal * 100,
-                    value: stat.avgVal * 100
-                });
-            });
-            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
-            this.chartData = data;
-        }
-    }
-    _onAllPeriodChange(e) {
-        this.isAllPeriod = e.target.checked;
-        if (this.isAllPeriod) {
-            // 전체: 시작 = 선택 가능한 가장 이른 월(2022-01), 종료 = 현재월 → 모든 데이터 포함하며 표시도 명확
-            // (빈 문자열로 두면 드롭다운이 2022-01~2022-01 로 잘못 보이던 문제 방지)
-            const now = new Date();
-            this.startYearMonth = '2022-01';
-            this.endYearMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-        }
-        this._emitPeriodChange();
-    }
-    /** 시작월 설정 — 시작 > 종료(역전)면 종료를 시작에 맞춰 보정. (YYYY-MM 문자열 비교 = 시간순) */
-    _setStartYearMonth(ym) {
-        this.startYearMonth = ym;
-        if (this.endYearMonth && this.startYearMonth > this.endYearMonth) {
-            this.endYearMonth = this.startYearMonth;
-        }
-        this._emitPeriodChange();
-    }
-    /** 종료월 설정 — 종료 < 시작(역전)이면 시작을 종료에 맞춰 보정. */
-    _setEndYearMonth(ym) {
-        this.endYearMonth = ym;
-        if (this.startYearMonth && this.endYearMonth < this.startYearMonth) {
-            this.startYearMonth = this.endYearMonth;
-        }
-        this._emitPeriodChange();
-    }
-    /** 기간 변경을 부모로 전파 → 지역 팝업 등 다른 패널이 동일 기간을 쓰도록 동기화 */
-    _emitPeriodChange() {
-        this.dispatchEvent(new CustomEvent('period-change', {
-            detail: { startYearMonth: this.startYearMonth, endYearMonth: this.endYearMonth, isAllPeriod: this.isAllPeriod },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    onCategoryChange(event) {
-        const target = event.target;
-        this.selectedCategory = target.value;
-        // 카테고리 변경 시 지역별 통계와 월별 추이 데이터만 다시 가져오기
-        // 종합 성과(박스플롯/레이더)는 항상 전체 Y-level KPI를 표시
-        this.fetchRegionalKpiStats();
-        this.fetchMonthlyTrendData();
-        this.dispatchEvent(new CustomEvent('category-change', {
-            detail: { category: target.value },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    onChartTypeChange(type) {
-        this.selectedChartType = type;
-        this.generateChartData();
-    }
-    onRegionClick(region) {
-        // 지도를 해당 광역시도로 포커스
-        this.dispatchEvent(new CustomEvent('focus-region', {
-            detail: { region },
-            bubbles: true,
-            composed: true
-        }));
-        // 팝업 열기
-        this.dispatchEvent(new CustomEvent('region-click', {
-            detail: { region },
-            bubbles: true,
-            composed: true
-        }));
-    }
-    downloadExcel() {
-        import('xlsx').then(XLSX => {
-            const filterLabel = [
-                this.selectedCategory,
-                this.sectorType === 'PUBLIC' ? '공공' : this.sectorType === 'PRIVATE' ? '민간' : '',
-                this.buildingUsage === 'RESIDENTIAL' ? '주거' : this.buildingUsage === 'NON_RESIDENTIAL' ? '비주거' : ''
-            ]
-                .filter(Boolean)
-                .join('_');
-            const period = this.isAllPeriod ? '전체기간' : `${this.startYearMonth}~${this.endYearMonth}`;
-            const wb = XLSX.utils.book_new();
-            // Sheet 1: 검색 조건
-            const condData = [
-                { 항목: 'KPI 카테고리', 값: this.selectedCategory },
-                { 항목: '사업 유형', 값: this.sectorType === 'PUBLIC' ? '공공' : this.sectorType === 'PRIVATE' ? '민간' : '전체' },
-                {
-                    항목: '건물 용도',
-                    값: this.buildingUsage === 'RESIDENTIAL' ? '주거' : this.buildingUsage === 'NON_RESIDENTIAL' ? '비주거' : '전체'
-                },
-                { 항목: '기간', 값: this.isAllPeriod ? '전체 기간' : `${this.startYearMonth} ~ ${this.endYearMonth}` },
-                { 항목: '다운로드 일시', 값: new Date().toLocaleString('ko-KR') }
-            ];
-            const wsCond = XLSX.utils.json_to_sheet(condData);
-            wsCond['!cols'] = [{ wch: 16 }, { wch: 30 }];
-            XLSX.utils.book_append_sheet(wb, wsCond, '검색 조건');
-            // Sheet 2: 종합 성과
-            const yData = this.kpiYComprehensiveStats.map((s) => ({
-                KPI: s.kpiName,
-                최소: Number((s.minVal * 100).toFixed(2)),
-                Q1: Number((s.q1Val * 100).toFixed(2)),
-                중앙값: Number((s.medVal * 100).toFixed(2)),
-                Q3: Number((s.q3Val * 100).toFixed(2)),
-                최대: Number((s.maxVal * 100).toFixed(2)),
-                평균: Number((s.avgVal * 100).toFixed(2))
-            }));
-            const ws1 = XLSX.utils.json_to_sheet(yData);
-            ws1['!cols'] = [{ wch: 20 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }];
-            XLSX.utils.book_append_sheet(wb, ws1, '종합 성과');
-            // Sheet 2: 시도별 성과
-            const rData = this.getSortedRegionData().map((item) => {
-                var _a;
-                const stat = this.regionalKpiStats.find((s) => s.geoGroup === item.region);
-                return {
-                    지역: item.region,
-                    'KPI 점수': Number(item.kpi) || 0,
-                    '변동률(%)': Number(Number(item.change).toFixed(2)),
-                    프로젝트수: (_a = stat === null || stat === void 0 ? void 0 : stat.projectCount) !== null && _a !== void 0 ? _a : 0
-                };
-            });
-            const ws2 = XLSX.utils.json_to_sheet(rData);
-            ws2['!cols'] = [{ wch: 16 }, { wch: 12 }, { wch: 12 }, { wch: 12 }];
-            XLSX.utils.book_append_sheet(wb, ws2, '시도별 성과');
-            // Sheet 3: 월별 추이
-            if (this.monthlyTrendData.length > 0) {
-                const mData = this.monthlyTrendData.map((d) => ({
-                    지역: d.geoGroup,
-                    기간: d.yearMonth,
-                    평균: Number((d.avgVal * 100).toFixed(2)),
-                    프로젝트수: d.projectCount
-                }));
-                const ws3 = XLSX.utils.json_to_sheet(mData);
-                ws3['!cols'] = [{ wch: 16 }, { wch: 12 }, { wch: 10 }, { wch: 12 }];
-                XLSX.utils.book_append_sheet(wb, ws3, '월별 추이');
-            }
-            XLSX.writeFile(wb, `KPI_대시보드_${filterLabel}_${period}.xlsx`);
-        });
-    }
-    // regionOrder에 따라 지역 데이터를 정렬
-    getSortedRegionData() {
-        // 실제 데이터를 기반으로 각 시도에 대한 데이터 생성
-        return this.regionOrder.map(regionName => {
-            const stat = this.regionalKpiStats.find(s => s.geoGroup === regionName);
-            const changeRate = this.calculateChangeRate(regionName);
-            return {
-                region: regionName,
-                kpi: stat ? (stat.avgVal * 100).toFixed(1) : '-',
-                change: changeRate.toFixed(2),
-                trendData: this.getRegionTrendData(regionName),
-                lat: 36.5,
-                lng: 127.5
-            };
-        });
-    }
-    getChangeRateClass(change) {
-        if (change > 0)
-            return 'change-up';
-        if (change < 0)
-            return 'change-down';
-        return 'change-neutral';
-    }
-    getChangeIcon(change) {
-        if (change > 0)
-            return '▲';
-        if (change < 0)
-            return '▼';
-        return ''; // 변동 없음(0)이면 화살표 미표시
-    }
-    render() {
-        return html `
-      <div class="panel-header">
-        <div class="panel-title">전국 KPI</div>
-        <button class="panel-close" style="visibility: hidden;">×</button>
-      </div>
-      <div class="panel-content">
-        <!-- 필터: KPI / 사업유형 / 건물용도 -->
-        <div class="filter-row">
-          <span class="filter-label">KPI</span>
-          <select class="filter-select" .value=${this.selectedCategory} @change=${this.onCategoryChange}>
-            <option value="전체 KPI">전체 KPI</option>
-            <option value="일정 성과">일정</option>
-            <option value="비용 성과">비용</option>
-            <option value="품질 성과">품질</option>
-            <option value="안전 성과">안전</option>
-            <option value="환경 성과">환경</option>
-            <option value="생산성 성과">생산성</option>
-          </select>
-          <span class="filter-label">유형</span>
-          <select
-            class="filter-select"
-            .value=${this.sectorType}
-            @change=${(e) => {
-            this.sectorType = e.target.value;
-            // 부모로 전파 → selectedSectorType 동기화 → 지역 팝업도 같은 유형 필터 사용
-            this.dispatchEvent(new CustomEvent('sector-change', { detail: { sectorType: this.sectorType }, bubbles: true, composed: true }));
-        }}
-          >
-            <option value="">전체</option>
-            <option value="PUBLIC">공공</option>
-            <option value="PRIVATE">민간</option>
-          </select>
-          <span class="filter-label">용도</span>
-          <select
-            class="filter-select"
-            .value=${this.buildingUsage}
-            @change=${(e) => {
-            this.buildingUsage = e.target.value;
-            // 부모로 전파 → selectedBuildingUsage 동기화 → 지역 팝업도 같은 용도 필터 사용
-            this.dispatchEvent(new CustomEvent('usage-change', {
-                detail: { buildingUsage: this.buildingUsage },
-                bubbles: true,
-                composed: true
-            }));
-        }}
-          >
-            <option value="">전체</option>
-            <option value="RESIDENTIAL">주거</option>
-            <option value="NON_RESIDENTIAL">비주거</option>
-          </select>
-        </div>
-
-        <!-- 기간 필터 -->
-        <div class="filter-row">
-          <span class="filter-label">기간</span>
-          <select
-            class="filter-select"
-            ?disabled=${this.isAllPeriod}
-            @change=${(e) => {
-            const y = e.target.value;
-            const m = this.startYearMonth.split('-')[1] || '01';
-            this._setStartYearMonth(`${y}-${m}`);
-        }}
-          >
-            ${[2022, 2023, 2024, 2025, 2026].map(y => html `<option value="${y}" ?selected=${this.startYearMonth.startsWith(String(y))}>${y}</option>`)}
-          </select>
-          <select
-            class="filter-select"
-            ?disabled=${this.isAllPeriod}
-            @change=${(e) => {
-            const y = this.startYearMonth.split('-')[0] || '2025';
-            const m = e.target.value.padStart(2, '0');
-            this._setStartYearMonth(`${y}-${m}`);
-        }}
-          >
-            ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(m => html `<option value="${m}" ?selected=${parseInt(this.startYearMonth.split('-')[1]) === m}>${m}월</option>`)}
-          </select>
-          <span style="color:#6c757d;font-size:0.8rem;">~</span>
-          <select
-            class="filter-select"
-            ?disabled=${this.isAllPeriod}
-            @change=${(e) => {
-            const y = e.target.value;
-            const m = this.endYearMonth.split('-')[1] || '12';
-            this._setEndYearMonth(`${y}-${m}`);
-        }}
-          >
-            ${[2022, 2023, 2024, 2025, 2026].map(y => html `<option value="${y}" ?selected=${this.endYearMonth.startsWith(String(y))}>${y}</option>`)}
-          </select>
-          <select
-            class="filter-select"
-            ?disabled=${this.isAllPeriod}
-            @change=${(e) => {
-            const y = this.endYearMonth.split('-')[0] || '2026';
-            const m = e.target.value.padStart(2, '0');
-            this._setEndYearMonth(`${y}-${m}`);
-        }}
-          >
-            ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(m => html `<option value="${m}" ?selected=${parseInt(this.endYearMonth.split('-')[1]) === m}>${m}월</option>`)}
-          </select>
-          <label style="display:flex;align-items:center;gap:3px;cursor:pointer;">
-            <input type="checkbox" .checked=${this.isAllPeriod} @change=${this._onAllPeriodChange} style="cursor:pointer;" />
-            <span class="filter-label" style="min-width:auto;">전체</span>
-          </label>
-        </div>
-
-        <!-- 종합 성과 -->
-        <div class="chart-section">
-          <div class="sub-title">성과영역별 KPI</div>
-          <div class="chart-toggle">
-            <button
-              class="toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}"
-              @click=${() => this.onChartTypeChange('boxplot')}
-            >
-              박스플롯
-            </button>
-            <button
-              class="toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}"
-              @click=${() => this.onChartTypeChange('radar')}
-            >
-              레이더차트
-            </button>
-          </div>
-          <div class="chart-container">
-            ${this.chartData.length === 0
-            ? html `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#888;font-size:0.9rem;">
-                  선택한 기간에 데이터가 없습니다.
-                </div>`
-            : this.selectedChartType === 'boxplot'
-                ? html `
-                    <sv-kpi-boxplot-chart
-                      .data=${this.chartData}
-                      .valueKey=${'value'}
-                      .valueLabel=${'전국'}
-                      .showStatus=${false}
-                    ></sv-kpi-boxplot-chart>
-                  `
-                : html `
-                    <sv-kpi-radar-chart
-                      .data=${this.chartData}
-                      .categories=${this.chartCategories}
-                      .valueKey=${'value'}
-                    ></sv-kpi-radar-chart>
-                  `}
-          </div>
-        </div>
-
-        <!-- 시도별 성과 -->
-        <div class="chart-section">
-          <div class="sub-title">시도별 종합 KPI</div>
-          <table class="performance-table">
-            <thead>
-              <tr>
-                <th>지역명</th>
-                <th>KPI</th>
-                <th>변동률(%)</th>
-                <th>성과 추이</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${this.getSortedRegionData().map((item) => html `
-                  <tr
-                    style="cursor: pointer; transition: background-color 0.2s;"
-                    @click=${() => this.onRegionClick(item.region)}
-                    @mouseenter=${(e) => (e.target.style.backgroundColor = '#f8f9fa')}
-                    @mouseleave=${(e) => (e.target.style.backgroundColor = '')}
-                  >
-                    <td>${item.region}</td>
-                    <td>${item.kpi}</td>
-                    <td>
-                      <div class="change-rate ${this.getChangeRateClass(item.change)}">
-                        ${this.getChangeIcon(item.change)}${Math.abs(item.change)}%
-                      </div>
-                    </td>
-                    <td>
-                      ${item.trendData && item.trendData.length > 0
-            ? html `
-                            <sv-kpi-mini-trend-chart
-                              .data=${item.trendData}
-                              .width=${60}
-                              .height=${30}
-                              .lineColor=${'#2196f3'}
-                              .strokeWidth=${1.5}
-                              .showPoints=${true}
-                              .pointRadius=${1.5}
-                            ></sv-kpi-mini-trend-chart>
-                          `
-            : html `<span style="color: #999;">-</span>`}
-                    </td>
-                  </tr>
-                `)}
-            </tbody>
-          </table>
-          <button class="download-button" @click=${this.downloadExcel}>📊 엑셀 다운로드</button>
-        </div>
-      </div>
-    `;
-    }
-};
-KpiLeftPanel.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: block;
-        width: 400px;
-        background: #fff;
-        border-right: 1px solid #e0e0e0;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-      }
-      .panel-content {
-        padding: 20px;
-        overflow-y: auto;
-        flex: 1;
-      }
-      .panel-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20px;
-        border-bottom: 1px solid #e0e0e0;
-        background: #fff;
-        height: 70px;
-        box-sizing: border-box;
-      }
-      .panel-title {
-        font-size: 1.3rem;
-        font-weight: bold;
-        color: #333;
-        margin: 0;
-      }
-      .panel-close {
-        width: 32px;
-        height: 32px;
-        border: none;
-        background: #fff;
-        border-radius: 50%;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.2rem;
-        color: #666;
-        transition: all 0.2s;
-      }
-      .panel-close:hover {
-        background: #e9ecef;
-        color: #333;
-      }
-      .sub-title {
-        font-size: 1rem;
-        font-weight: 600;
-        margin-bottom: 16px;
-        color: #495057;
-      }
-      .chart-section {
-        background: #f8f9fa;
-        border-radius: 8px;
-        padding: 16px;
-        margin-bottom: 20px;
-      }
-      .chart-toggle {
-        display: flex;
-        gap: 8px;
-        margin-bottom: 16px;
-      }
-      .toggle-button {
-        padding: 8px 16px;
-        border: 1px solid #ced4da;
-        background: #fff;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        transition: all 0.2s;
-      }
-      .toggle-button.active {
-        background: #667eea;
-        color: white;
-        border-color: #667eea;
-      }
-      .chart-container {
-        height: 300px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: white;
-        border-radius: 6px;
-        border: 1px solid #e9ecef;
-      }
-      .performance-table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-top: 16px;
-      }
-      .performance-table th,
-      .performance-table td {
-        padding: 12px 8px;
-        text-align: left;
-        border-bottom: 1px solid #e9ecef;
-      }
-      .performance-table th {
-        background: #f8f9fa;
-        font-weight: 600;
-        color: #495057;
-      }
-      .performance-table td {
-        color: #333;
-      }
-      .change-rate {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-      .change-up {
-        color: #dc3545;
-      }
-      .change-down {
-        color: #2196f3;
-      }
-      .change-neutral {
-        color: #6c757d;
-      }
-      .trend-chart {
-        width: 60px;
-        height: 30px;
-        background: #f8f9fa;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.8rem;
-        color: #666;
-      }
-      .download-button {
-        margin-top: 16px;
-        padding: 8px 16px;
-        background: #28a745;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .download-button:hover {
-        background: #218838;
-      }
-      .filter-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 6px;
-        margin-bottom: 10px;
-      }
-      .filter-label {
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: #495057;
-        white-space: nowrap;
-      }
-      .filter-select {
-        flex: 1;
-        min-width: 0;
-        padding: 4px 6px;
-        border: 1px solid #ced4da;
-        border-radius: 4px;
-        background: white;
-        font-size: 0.78rem;
-      }
-      .filter-select:focus {
-        outline: none;
-        border-color: #667eea;
-      }
-    `
-];
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "selectedCategory", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "selectedChartType", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "mapData", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "startYearMonth", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "endYearMonth", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "sectorType", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "buildingUsage", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], KpiLeftPanel.prototype, "isAllPeriod", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "chartData", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "chartCategories", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "kpiYComprehensiveStats", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "regionalKpiStats", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiLeftPanel.prototype, "monthlyTrendData", void 0);
-KpiLeftPanel = __decorate([
-    customElement('kpi-left-panel')
-], KpiLeftPanel);
-export { KpiLeftPanel };
-//# sourceMappingURL=kpi-left-panel.js.map