@dssp/dkpi 1.0.0-alpha.57 → 1.0.0-alpha.59

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

@@ -0,0 +1,642 @@
+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.chartData = [];
+        this.chartCategories = [];
+        this.kpiYComprehensiveStats = [];
+        this.regionalKpiStats = [];
+        this.monthlyTrendData = [];
+        // 행정안전부 행정구역코드 순서
+        this.regionOrder = [
+            '서울특별시',
+            '부산광역시',
+            '대구광역시',
+            '인천광역시',
+            '광주광역시',
+            '대전광역시',
+            '울산광역시',
+            '세종특별자치시',
+            '경기도',
+            '강원도',
+            '충청북도',
+            '충청남도',
+            '전라북도',
+            '전라남도',
+            '경상북도',
+            '경상남도',
+            '제주특별자치도'
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchKpiYComprehensiveStats();
+        this.fetchRegionalKpiStats();
+        this.fetchMonthlyTrendData();
+    }
+    updated(changedProperties) {
+        // selectedCategory, startYearMonth, endYearMonth가 변경되면 데이터 다시 가져오기
+        if (changedProperties.has('selectedCategory') ||
+            changedProperties.has('startYearMonth') ||
+            changedProperties.has('endYearMonth')) {
+            // 기간 정보가 설정되어 있을 때만 조회 (빈 문자열이면 전체 기간)
+            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) {
+            totalKpiYValueComprehensiveStats(startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+              kpiName
+              minVal
+              q1Val
+              medVal
+              q3Val
+              maxVal
+              avgVal
+            }
+          }
+        `,
+                variables: {
+                    startYearMonth: this.startYearMonth,
+                    endYearMonth: this.endYearMonth
+                }
+            });
+            this.kpiYComprehensiveStats = response.data.totalKpiYValueComprehensiveStats || [];
+            console.log('KPI Y-Value Comprehensive Stats:', this.kpiYComprehensiveStats);
+            // 부모에게 전체 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) {
+            kpiZValueComprehensiveStatsByGeoGroup(
+              kpiName: $kpiName
+              startYearMonth: $startYearMonth
+              endYearMonth: $endYearMonth
+            ) {
+              geoGroup
+              avgVal
+              minVal
+              maxVal
+              projectCount
+            }
+          }
+        `,
+                variables: {
+                    kpiName,
+                    startYearMonth: this.startYearMonth,
+                    endYearMonth: this.endYearMonth
+                }
+            });
+            this.regionalKpiStats = response.data.kpiZValueComprehensiveStatsByGeoGroup || [];
+            console.log('Regional KPI Stats:', this.regionalKpiStats);
+            // 부모에게 지역별 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) {
+            kpiZValueMonthlyTrendByGeoGroup(kpiName: $kpiName, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {
+              geoGroup
+              yearMonth
+              avgVal
+              projectCount
+            }
+          }
+        `,
+                variables: {
+                    kpiName,
+                    startYearMonth: this.startYearMonth,
+                    endYearMonth: this.endYearMonth
+                }
+            });
+            this.monthlyTrendData = response.data.kpiZValueMonthlyTrendByGeoGroup || [];
+            console.log('Monthly Trend Data:', this.monthlyTrendData);
+            // 부모에게 월별 추이 데이터 전달
+            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) {
+        // 해당 지역의 최근 12개월 트렌드 데이터 추출
+        const regionData = this.monthlyTrendData
+            .filter(d => d.geoGroup === region)
+            .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth))
+            .map(d => d.avgVal * 20); // 20배 스케일
+        // 12개월 데이터가 없으면 빈 배열 반환
+        return regionData.length > 0 ? regionData : [];
+    }
+    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() {
+        // KPI 이름을 카테고리로 매핑 및 축약
+        const categoryMapping = {
+            'Y1. 일정성과': '일정',
+            'Y2. 비용성과': '비용',
+            'Y3. 품질성과': '품질',
+            'Y4. 안전성과': '안전',
+            'Y5. 환경성과': '환경',
+            'Y6. 생산성성과': '생산성'
+        };
+        console.log('generateChartData - selectedChartType:', this.selectedChartType);
+        console.log('generateChartData - kpiYComprehensiveStats:', this.kpiYComprehensiveStats);
+        if (this.selectedChartType === 'radar') {
+            // 레이더 차트용 데이터 생성 (전체 평균만 표시)
+            const data = [];
+            const categories = [];
+            this.kpiYComprehensiveStats.forEach(stat => {
+                const category = categoryMapping[stat.kpiName] || stat.kpiName;
+                if (!categories.includes(category)) {
+                    categories.push(category);
+                }
+                // 전체 평균 데이터만 표시 (비교 시리즈 없음)
+                data.push({
+                    org: '전체평균',
+                    category,
+                    value: Math.round(stat.avgVal * 20)
+                });
+            });
+            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
+            this.chartData = data;
+            console.log('Radar chart data:', data);
+            console.log('Radar chart categories:', this.chartCategories);
+        }
+        else {
+            // 박스플롯용 데이터 생성 (sv-project-detail.ts의 getYKpiBoxplotData 참조)
+            const data = [];
+            const categories = [];
+            this.kpiYComprehensiveStats.forEach(stat => {
+                const category = categoryMapping[stat.kpiName] || stat.kpiName;
+                if (!categories.includes(category)) {
+                    categories.push(category);
+                }
+                data.push({
+                    org: category,
+                    min: stat.minVal * 20,
+                    max: stat.maxVal * 20,
+                    q1: stat.q1Val * 20,
+                    q3: stat.q3Val * 20,
+                    median: stat.medVal * 20,
+                    mean: stat.avgVal * 20,
+                    value: stat.avgVal * 20
+                });
+            });
+            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
+            this.chartData = data;
+            console.log('Boxplot chart data:', data);
+            console.log('Boxplot chart categories:', this.chartCategories);
+        }
+    }
+    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('region-click', {
+            detail: { region },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    downloadExcel() {
+        this.dispatchEvent(new CustomEvent('download-excel', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    // 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 * 20).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 '─';
+    }
+    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 카테고리 선택 -->
+        <select class="category-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>
+
+        <!-- 종합 성과 -->
+        <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.selectedChartType === 'boxplot'
+            ? html ` <sv-kpi-boxplot-chart .data=${this.chartData} .valueKey=${'value'}></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">시도별 성과</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: #198754;
+      }
+      .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;
+      }
+      .category-select {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ced4da;
+        border-radius: 6px;
+        background: white;
+        margin-bottom: 20px;
+      }
+    `
+];
+__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([
+    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