@dssp/dkpi 1.0.0-alpha.9 → 1.0.0-alpha.90

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

@@ -0,0 +1,937 @@
+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;
+        }}
+          >
+            <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;
+        }}
+          >
+            <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