@dssp/dkpi 1.0.0-alpha.99 → 1.0.0

package/dist-client/pages/kpi-dashboard/components/kpi-region-popup.js

@@ -1,689 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import gql from 'graphql-tag';
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
-import { ScrollbarStyles } from '@operato/styles';
-import '../../../components/kpi-radar-chart.js';
-import '../../../components/kpi-boxplot-chart.js';
-import '../../../components/kpi-trend-chart.js';
-let KpiRegionPopup = class KpiRegionPopup extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.selectedRegion = null;
-        this.geoGroup = null; // 시군구 geo_group 코드 (있으면 시군구 쿼리 사용)
-        this.selectedCategory = '전체 KPI';
-        this.selectedChartType = 'boxplot';
-        this.selectedPeriod = '월';
-        this.startYearMonth = ''; // YYYY-MM 형식
-        this.endYearMonth = ''; // YYYY-MM 형식
-        this.sectorType = ''; // 유형 필터 PUBLIC | PRIVATE
-        this.buildingUsage = ''; // 용도 필터 RESIDENTIAL | NON_RESIDENTIAL
-        this.monthlyTrendData = []; // 부모에서 전달받은 월별 추이 데이터
-        this.totalKpiStats = []; // 전체 KPI 통계 (비교용)
-        this.chartData = [];
-        this.chartCategories = [];
-        this.trendData = [];
-        this.regionKpiStats = [];
-        /** 시군구 모드일 때만 사용하는 해당 시군구 월별 추이 (광역 추이 monthlyTrendData 와 별개) */
-        this.sigunguTrendData = [];
-    }
-    updated(changedProperties) {
-        const regionChanged = changedProperties.has('selectedRegion') || changedProperties.has('geoGroup');
-        const periodChanged = changedProperties.has('startYearMonth') || changedProperties.has('endYearMonth');
-        const filterChanged = changedProperties.has('sectorType') || changedProperties.has('buildingUsage');
-        if ((regionChanged || periodChanged || filterChanged) && this.selectedRegion) {
-            this.fetchRegionKpiStats();
-        }
-        // 추이 갱신: 시군구 모드면 시군구 전용 추이 조회, 아니면 부모가 준 광역(metro) 데이터로 생성
-        if (regionChanged ||
-            periodChanged ||
-            filterChanged ||
-            changedProperties.has('selectedCategory') ||
-            changedProperties.has('monthlyTrendData')) {
-            this._refreshTrend();
-        }
-    }
-    _refreshTrend() {
-        if (this.geoGroup) {
-            this.fetchSigunguTrend(); // 완료 후 내부에서 generateTrendData 호출
-        }
-        else {
-            this.generateTrendData();
-        }
-    }
-    /** 시군구(geo_group 코드) 단위 월별 추이 조회 → generateTrendData 재생성 */
-    async fetchSigunguTrend() {
-        var _a;
-        if (!this.geoGroup) {
-            this.sigunguTrendData = [];
-            this.generateTrendData();
-            return;
-        }
-        try {
-            const response = await client.query({
-                query: gql `
-          query GetSigunguTrend(
-            $geoGroup: String!
-            $startYearMonth: String
-            $endYearMonth: String
-            $sectorType: String
-            $buildingUsage: String
-          ) {
-            kpiZValueMonthlyTrendBySigungu(
-              geoGroup: $geoGroup
-              startYearMonth: $startYearMonth
-              endYearMonth: $endYearMonth
-              sectorType: $sectorType
-              buildingUsage: $buildingUsage
-            ) {
-              geoGroup
-              yearMonth
-              avgVal
-              projectCount
-            }
-          }
-        `,
-                variables: {
-                    geoGroup: this.geoGroup,
-                    startYearMonth: this.startYearMonth || null,
-                    endYearMonth: this.endYearMonth || null,
-                    sectorType: this.sectorType || null,
-                    buildingUsage: this.buildingUsage || null
-                }
-            });
-            this.sigunguTrendData = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.kpiZValueMonthlyTrendBySigungu) || [];
-        }
-        catch (e) {
-            console.error('시군구 추이 조회 실패:', e);
-            this.sigunguTrendData = [];
-        }
-        this.generateTrendData();
-    }
-    async fetchRegionKpiStats() {
-        if (!this.selectedRegion)
-            return;
-        try {
-            let regionKpiStats;
-            if (this.geoGroup) {
-                // 시군구 모드: geo_group 코드로 조회
-                const response = await client.query({
-                    query: gql `
-            query GetSigunguKpiStats(
-              $geoGroup: String!
-              $startYearMonth: String
-              $endYearMonth: String
-              $sectorType: String
-              $buildingUsage: String
-            ) {
-              kpiYValueStatsByGeoGroup(
-                geoGroup: $geoGroup
-                startYearMonth: $startYearMonth
-                endYearMonth: $endYearMonth
-                sectorType: $sectorType
-                buildingUsage: $buildingUsage
-              ) {
-                kpiName
-                minVal
-                q1Val
-                medVal
-                q3Val
-                maxVal
-                avgVal
-                projectCount
-              }
-            }
-          `,
-                    variables: {
-                        geoGroup: this.geoGroup,
-                        startYearMonth: this.startYearMonth,
-                        endYearMonth: this.endYearMonth,
-                        sectorType: this.sectorType || null,
-                        buildingUsage: this.buildingUsage || null
-                    }
-                });
-                regionKpiStats = response.data.kpiYValueStatsByGeoGroup || [];
-            }
-            else {
-                // 광역 모드: 광역시도 이름으로 조회
-                const response = await client.query({
-                    query: gql `
-            query GetRegionKpiStats(
-              $metroArea: String!
-              $startYearMonth: String
-              $endYearMonth: String
-              $sectorType: String
-              $buildingUsage: String
-            ) {
-              kpiYValueStatsByMetroArea(
-                metroArea: $metroArea
-                startYearMonth: $startYearMonth
-                endYearMonth: $endYearMonth
-                sectorType: $sectorType
-                buildingUsage: $buildingUsage
-              ) {
-                kpiName
-                minVal
-                q1Val
-                medVal
-                q3Val
-                maxVal
-                avgVal
-                projectCount
-              }
-            }
-          `,
-                    variables: {
-                        metroArea: this.selectedRegion,
-                        startYearMonth: this.startYearMonth,
-                        endYearMonth: this.endYearMonth,
-                        sectorType: this.sectorType || null,
-                        buildingUsage: this.buildingUsage || null
-                    }
-                });
-                regionKpiStats = response.data.kpiYValueStatsByMetroArea || [];
-            }
-            this.regionKpiStats = regionKpiStats;
-            this.generateChartData();
-        }
-        catch (error) {
-            console.error('Failed to fetch region KPI stats:', error);
-            this.regionKpiStats = [];
-            this.generateChartData();
-        }
-    }
-    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; };
-        // 레이더 차트와 박스플롯은 항상 전체 Y-level KPI 표시 (selectedCategory 무시)
-        if (this.selectedChartType === 'radar') {
-            // 레이더 차트용 데이터 생성 — 지역 평균 단일 시리즈
-            // (전체평균 기준선은 지역 평균과 차별성이 적어 제거 → 단일 시리즈라 범례도 자동 미표시)
-            const data = [];
-            const categories = [];
-            // 카테고리 수집
-            this.regionKpiStats.forEach(stat => {
-                const category = toCategory(stat.kpiName);
-                if (!categories.includes(category)) {
-                    categories.push(category);
-                }
-            });
-            // 지역 데이터 추가 (박스플롯과 동일 스케일·정밀도 — Math.round 제거해 수치 일치)
-            this.regionKpiStats.forEach(stat => {
-                const category = toCategory(stat.kpiName);
-                data.push({
-                    org: this.selectedRegion || '지역',
-                    category,
-                    value: stat.avgVal * 100
-                });
-            });
-            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
-            this.chartData = data;
-        }
-        else {
-            // 박스플롯용 데이터 생성
-            const data = [];
-            const categories = [];
-            this.regionKpiStats.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;
-        }
-    }
-    generateTrendData() {
-        if (!this.selectedRegion)
-            return;
-        // 추이 데이터 소스: 시군구 모드면 시군구 전용 추이(sigunguTrendData), 아니면 광역(metro) 추이에서 해당 지역 필터.
-        const rows = this.geoGroup
-            ? this.sigunguTrendData
-            : this.monthlyTrendData.filter(d => d.geoGroup === this.selectedRegion);
-        // 월별 데이터를 YYYY-MM 기준 맵으로
-        const byMonth = new Map();
-        rows.forEach(d => byMonth.set(d.yearMonth, d));
-        // 선택 기간(start~end) 전체 월을 축으로 사용 — 데이터가 없는 월도 레코드(값 0)로 채워
-        // 전국 패널의 기간과 동일한 범위를 플로팅. (전체 기간 모드 등으로 start/end 가 비면 데이터 월만 사용)
-        const months = this.startYearMonth && this.endYearMonth
-            ? this.buildMonthRange(this.startYearMonth, this.endYearMonth)
-            : [...byMonth.keys()].sort();
-        let prev = null;
-        this.trendData = months.map(ym => {
-            const d = byMonth.get(ym);
-            const hasData = !!d;
-            // 데이터 없는 월은 0이 아니라 null — 0(실제 0점)과 구분하여 플로팅/표시에서 제외.
-            // 값은 반올림하지 않음(정수화하면 표의 소수점이 항상 .0 으로 나옴) — 표시 시 toFixed(1) 적용.
-            const value = hasData ? d.avgVal * 100 : null;
-            // 추이: 무데이터 'none', 직전 데이터 없으면(첫 점) 'flat', 그 외 실제 증감 비교
-            let trendDir;
-            if (!hasData) {
-                trendDir = 'none';
-            }
-            else if (prev === null) {
-                trendDir = 'flat';
-            }
-            else {
-                trendDir = value > prev ? 'up' : value < prev ? 'down' : 'flat';
-            }
-            if (hasData)
-                prev = value;
-            return {
-                date: ym, // YYYY-MM 형식
-                value,
-                color: value == null ? undefined : value > 60 ? '#4caf50' : value > 40 ? '#ff9800' : '#f44336',
-                trendDir
-            };
-        });
-    }
-    /** 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; // start > end 방어
-            m++;
-            if (m > 12) {
-                m = 1;
-                y++;
-            }
-        }
-        return out;
-    }
-    onClose() {
-        this.dispatchEvent(new CustomEvent('popup-close', {
-            bubbles: true,
-            composed: true
-        }));
-    }
-    onChartTypeChange(type) {
-        this.selectedChartType = type;
-        this.generateChartData();
-    }
-    render() {
-        if (!this.selectedRegion) {
-            return nothing;
-        }
-        return html `
-      <div class="popup-header">
-        <div class="popup-title">${this.selectedRegion} KPI</div>
-        <button class="popup-close" @click=${this.onClose}>×</button>
-      </div>
-      <div class="popup-content">
-        <!-- 종합 성과 -->
-        <div class="chart-section">
-          <div class="sub-title">종합 성과</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}
-                      .groups=${this.chartCategories}
-                      .valueKey=${'value'}
-                      .valueLabel=${this.selectedRegion || '지역'}
-                      .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="trend-section">
-          <div class="sub-title">기간별 성과 추이</div>
-          <div class="trend-chart-container" style="height: 200px; margin-bottom: 16px;">
-            <sv-kpi-trend-chart
-              .data=${this.trendData}
-              .lineColor=${'#2196f3'}
-              .strokeWidth=${2}
-              .showPoints=${false}
-              .pointRadius=${4}
-            ></sv-kpi-trend-chart>
-          </div>
-          <div class="trend-table">
-            <table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">
-              <thead style="position: sticky; top: 0; background: white; z-index: 1;">
-                <tr style="border-bottom: 2px solid #f1f3f4; background-color: #f8f9fa;">
-                  <th style="padding: 8px; text-align: left; font-weight: 600;">날짜</th>
-                  <th style="padding: 8px; text-align: right; font-weight: 600;">성과</th>
-                  <th style="padding: 8px; text-align: center; font-weight: 600;">추이</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${[...this.trendData].reverse().map((item) => html `
-                    <tr style="border-bottom: 1px solid #f1f3f4;">
-                      <td style="padding: 8px; font-size: 0.85rem;">${item.date}</td>
-                      <td style="padding: 8px; text-align: right; font-size: 0.85rem; font-weight: 600;">
-                        ${item.value != null ? item.value.toFixed(1) : '-'}
-                      </td>
-                      <td style="padding: 8px; text-align: center; font-size: 0.85rem;">
-                        <span style="color: ${item.trendDir === 'up' ? '#e53935' : item.trendDir === 'down' ? '#2196f3' : '#999'};">
-                          ${item.trendDir === 'up' ? '▲' : item.trendDir === 'down' ? '▼' : '–'}
-                        </span>
-                      </td>
-                    </tr>
-                  `)}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-};
-KpiRegionPopup.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 402px;
-        width: 400px;
-        height: 100%;
-        background: #fff;
-        border-right: 1px solid #e0e0e0;
-        z-index: 1000;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-      }
-      .popup-content {
-        padding: 20px;
-        overflow-y: auto;
-        flex: 1;
-      }
-      .popup-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;
-      }
-      .popup-title {
-        font-size: 1.2rem;
-        font-weight: bold;
-        color: #333;
-      }
-      .popup-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;
-      }
-      .popup-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;
-      }
-      .period-selector {
-        display: flex;
-        gap: 8px;
-        margin-bottom: 16px;
-      }
-      .period-button {
-        padding: 6px 12px;
-        border: 1px solid #ced4da;
-        background: #fff;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 0.85rem;
-        transition: all 0.2s;
-      }
-      .period-button.active {
-        background: #667eea;
-        color: white;
-        border-color: #667eea;
-      }
-      .date-range-selector {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 16px;
-      }
-      .date-select {
-        padding: 6px 12px;
-        border: 1px solid #ced4da;
-        border-radius: 4px;
-        background: white;
-        font-size: 0.9rem;
-      }
-    `
-];
-// geo_group → 광역시도 매핑 (시군구 모드에서 추이 데이터 조회용)
-KpiRegionPopup.GEO_TO_METRO = {
-    '01': '서울특별시',
-    '02': '서울특별시',
-    '03': '서울특별시',
-    '04': '서울특별시',
-    '05': '서울특별시',
-    '06': '서울특별시',
-    '07': '서울특별시',
-    '08': '서울특별시',
-    '10': '경기도',
-    '11': '경기도',
-    '12': '경기도',
-    '13': '경기도',
-    '14': '경기도',
-    '15': '경기도',
-    '16': '경기도',
-    '17': '경기도',
-    '18': '경기도',
-    '21': '인천광역시',
-    '22': '인천광역시',
-    '23': '인천광역시',
-    '24': '강원도',
-    '25': '강원도',
-    '26': '강원도',
-    '33': '강원도',
-    '27': '충청북도',
-    '28': '충청북도',
-    '29': '충청북도',
-    '30': '세종특별자치시',
-    '31': '충청남도',
-    '32': '충청남도',
-    '34': '대전광역시',
-    '35': '대전광역시',
-    '36': '경상북도',
-    '37': '경상북도',
-    '38': '경상북도',
-    '39': '경상북도',
-    '40': '경상북도',
-    '41': '대구광역시',
-    '42': '대구광역시',
-    '43': '대구광역시',
-    '44': '울산광역시',
-    '45': '울산광역시',
-    '46': '부산광역시',
-    '47': '부산광역시',
-    '48': '부산광역시',
-    '49': '부산광역시',
-    '50': '경상남도',
-    '51': '경상남도',
-    '52': '경상남도',
-    '53': '경상남도',
-    '54': '전라북도',
-    '55': '전라북도',
-    '56': '전라북도',
-    '57': '전라남도',
-    '58': '전라남도',
-    '59': '전라남도',
-    '61': '광주광역시',
-    '62': '광주광역시',
-    '63': '제주특별자치도'
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "selectedRegion", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "geoGroup", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "selectedCategory", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "selectedChartType", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "selectedPeriod", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "startYearMonth", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "endYearMonth", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "sectorType", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], KpiRegionPopup.prototype, "buildingUsage", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "monthlyTrendData", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "totalKpiStats", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "chartData", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "chartCategories", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "trendData", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "regionKpiStats", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], KpiRegionPopup.prototype, "sigunguTrendData", void 0);
-KpiRegionPopup = __decorate([
-    customElement('kpi-region-popup')
-], KpiRegionPopup);
-export { KpiRegionPopup };
-//# sourceMappingURL=kpi-region-popup.js.map