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

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

@@ -0,0 +1,632 @@
+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.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');
+        if ((regionChanged || periodChanged) && this.selectedRegion) {
+            this.fetchRegionKpiStats();
+        }
+        // 추이 갱신: 시군구 모드면 시군구 전용 추이 조회, 아니면 부모가 준 광역(metro) 데이터로 생성
+        if (regionChanged || periodChanged || 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) {
+            kpiZValueMonthlyTrendBySigungu(geoGroup: $geoGroup, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+              geoGroup
+              yearMonth
+              avgVal
+              projectCount
+            }
+          }
+        `,
+                variables: {
+                    geoGroup: this.geoGroup,
+                    startYearMonth: this.startYearMonth || null,
+                    endYearMonth: this.endYearMonth || 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) {
+              kpiYValueStatsByGeoGroup(geoGroup: $geoGroup, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+                kpiName
+                minVal
+                q1Val
+                medVal
+                q3Val
+                maxVal
+                avgVal
+                projectCount
+              }
+            }
+          `,
+                    variables: {
+                        geoGroup: this.geoGroup,
+                        startYearMonth: this.startYearMonth,
+                        endYearMonth: this.endYearMonth
+                    }
+                });
+                regionKpiStats = response.data.kpiYValueStatsByGeoGroup || [];
+            }
+            else {
+                // 광역 모드: 광역시도 이름으로 조회
+                const response = await client.query({
+                    query: gql `
+            query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {
+              kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+                kpiName
+                minVal
+                q1Val
+                medVal
+                q3Val
+                maxVal
+                avgVal
+                projectCount
+              }
+            }
+          `,
+                    variables: {
+                        metroArea: this.selectedRegion,
+                        startYearMonth: this.startYearMonth,
+                        endYearMonth: this.endYearMonth
+                    }
+                });
+                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: 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