@dssp/dkpi 1.0.0-alpha.6 → 1.0.0-alpha.60

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-map-panel.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-map-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '../../../google-map/common-google-map.js'\n\ndeclare global {\n  interface Window {\n    google: any\n  }\n}\n\n@customElement('kpi-map-panel')\nexport class KpiMapPanel extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      background: #f8f9fa;\n      overflow: hidden;\n      position: relative;\n      min-height: 500px;\n    }\n    .map-overlay {\n      position: absolute;\n      top: 16px;\n      left: 16px;\n      z-index: 10;\n      background: rgba(255, 255, 255, 0.95);\n      border-radius: 8px;\n      padding: 12px 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      backdrop-filter: blur(4px);\n    }\n    .category-buttons {\n      display: flex;\n      gap: 8px;\n      flex-wrap: wrap;\n    }\n    .category-button {\n      padding: 6px 12px;\n      border: 1px solid #ced4da;\n      background: #fff;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 0.85rem;\n      transition: all 0.2s;\n      white-space: nowrap;\n    }\n    .category-button.active {\n      background: #667eea;\n      color: white;\n      border-color: #667eea;\n    }\n    .category-button:hover {\n      background: #f8f9fa;\n    }\n    .category-button.active:hover {\n      background: #5a6fd8;\n    }\n    .period-form {\n      margin-top: 12px;\n      padding-top: 12px;\n      border-top: 1px solid #e9ecef;\n    }\n    .period-row {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 8px;\n    }\n    .period-label {\n      font-size: 0.85rem;\n      font-weight: 600;\n      color: #495057;\n      min-width: 40px;\n    }\n    .period-select {\n      padding: 4px 8px;\n      border: 1px solid #ced4da;\n      border-radius: 4px;\n      background: white;\n      font-size: 0.8rem;\n      cursor: pointer;\n    }\n    .period-select:focus {\n      outline: none;\n      border-color: #667eea;\n    }\n    .period-separator {\n      font-size: 0.85rem;\n      color: #6c757d;\n      margin: 0 4px;\n    }\n    .map-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n    }\n    .map-controls {\n      position: absolute;\n      top: 16px;\n      right: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 10;\n    }\n    .map-control-button {\n      width: 40px;\n      height: 40px;\n      background: white;\n      border: 1px solid #ced4da;\n      border-radius: 6px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.2rem;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    .map-control-button:hover {\n      background: #f8f9fa;\n    }\n    .map-scale-direction {\n      position: absolute;\n      bottom: 16px;\n      right: 16px;\n      background: white;\n      padding: 8px 12px;\n      border-radius: 6px;\n      border: 1px solid #ced4da;\n      font-size: 0.8rem;\n      color: #666;\n      z-index: 10;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      text-align: center;\n    }\n    .north-arrow {\n      font-size: 1rem;\n      margin-bottom: 4px;\n    }\n    .scale-info {\n      font-size: 0.7rem;\n    }\n    common-google-map {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  @property({ type: String }) selectedCategory = '전체 KPI'\n  @property({ type: Array }) mapData: any[] = []\n\n  @state() private map: any = null\n  @state() private isAllPeriod = false // 전체 기간 체크박스\n  @state() private startYear = ''\n  @state() private startMonth = ''\n  @state() private endYear = ''\n  @state() private endMonth = ''\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.initializeDefaultPeriod()\n  }\n\n  private initializeDefaultPeriod() {\n    const now = new Date()\n    const currentYear = now.getFullYear()\n    const currentMonth = now.getMonth() + 1 // 0-based이므로 +1\n\n    // 12개월 전 계산\n    const startDate = new Date(now)\n    startDate.setMonth(startDate.getMonth() - 11) // 현재 월 포함 12개월\n    const startYear = startDate.getFullYear()\n    const startMonth = startDate.getMonth() + 1\n\n    this.startYear = startYear.toString()\n    this.startMonth = startMonth.toString()\n    this.endYear = currentYear.toString()\n    this.endMonth = currentMonth.toString()\n  }\n\n  private onAllPeriodChange(e: Event) {\n    this.isAllPeriod = (e.target as HTMLInputElement).checked\n    this.onPeriodChange()\n  }\n\n  // mapData를 지도 마커 형식으로 변환\n  get mapLocations() {\n    return (\n      this.mapData?.map(item => ({\n        lat: item.lat,\n        lng: item.lng,\n        title: item.region,\n        region: item.region, // 지역명 추가\n        // 커스텀 마커 콘텐츠 생성\n        markerContent: `\n          <div style=\"\n            background: white;\n            border-radius: 8px;\n            padding: 8px 12px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n            border: 1px solid #e9ecef;\n            min-width: 80px;\n            text-align: center;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            cursor: pointer;\n          \">\n            <div style=\"\n              font-size: 11px;\n              font-weight: 600;\n              color: #495057;\n              margin-bottom: 2px;\n              white-space: nowrap;\n            \">${item.region}</div>\n            <div style=\"\n              font-size: 13px;\n              font-weight: 700;\n              color: #212529;\n              margin-bottom: 2px;\n            \">${item.kpi}</div>\n            <div style=\"\n              font-size: 10px;\n              color: ${item.change > 0 ? '#dc3545' : '#198754'};\n              font-weight: 500;\n            \">${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}%</div>\n          </div>\n        `,\n        content: `\n          <div style=\"padding: 12px; min-width: 200px;\">\n            <h3 style=\"margin: 0 0 8px 0; font-size: 16px; color: #212529;\">${item.region}</h3>\n            <div style=\"margin-bottom: 8px;\">\n              <span style=\"font-size: 14px; color: #6c757d;\">KPI: </span>\n              <span style=\"font-size: 16px; font-weight: 600; color: #212529;\">${item.kpi}</span>\n            </div>\n            <div style=\"\n              font-size: 14px;\n              color: ${item.change > 0 ? '#dc3545' : '#198754'};\n              font-weight: 500;\n            \">\n              ${item.change > 0 ? '▲' : '▼'} ${Math.abs(item.change)}% 변화\n            </div>\n          </div>\n        `\n      })) || []\n    )\n  }\n\n  private onCategoryButtonClick(category: string) {\n    this.dispatchEvent(\n      new CustomEvent('category-change', {\n        detail: { category },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onMapChange(event: CustomEvent) {\n    this.map = event.detail\n    // 지도가 로드되면 남한 영역에 맞게 자동 조정\n    this.fitBoundsToSouthKorea()\n  }\n\n  private fitBoundsToSouthKorea() {\n    if (!this.map || !window.google) return\n\n    // 남한의 실제 행정구역 경계 설정 (울릉도/독도 제외)\n    const bounds = new window.google.maps.LatLngBounds()\n\n    // 최북단: 강원도 고성 (DMZ 남쪽)\n    bounds.extend(new window.google.maps.LatLng(38.3, 128.3))\n    // 최남단: 제주도 남쪽\n    bounds.extend(new window.google.maps.LatLng(33.1, 126.3))\n    // 최서단: 전남 서쪽\n    bounds.extend(new window.google.maps.LatLng(34.5, 125.1))\n    // 최동단: 강원도 동해안\n    bounds.extend(new window.google.maps.LatLng(37.5, 129.4))\n\n    // 패딩을 추가하여 여유 공간 확보\n    this.map.fitBounds(bounds, { top: 30, bottom: 30, left: 30, right: 30 })\n  }\n\n  private onRegionClick(event: CustomEvent) {\n    this.dispatchEvent(\n      new CustomEvent('region-click', {\n        detail: event.detail,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private zoomIn() {\n    if (this.map) {\n      this.map.setZoom(this.map.getZoom() + 1)\n    }\n  }\n\n  private zoomOut() {\n    if (this.map) {\n      this.map.setZoom(this.map.getZoom() - 1)\n    }\n  }\n\n  private resetView() {\n    if (this.map) {\n      this.fitBoundsToSouthKorea()\n    }\n  }\n\n  private onPeriodChange() {\n    this.dispatchEvent(\n      new CustomEvent('period-change', {\n        detail: {\n          startYear: this.isAllPeriod ? null : this.startYear,\n          startMonth: this.isAllPeriod ? null : this.startMonth,\n          endYear: this.isAllPeriod ? null : this.endYear,\n          endMonth: this.isAllPeriod ? null : this.endMonth,\n          isAllPeriod: this.isAllPeriod\n        },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  render() {\n    return html`\n      <div class=\"map-overlay\">\n        <div class=\"category-buttons\">\n          <button\n            class=\"category-button ${this.selectedCategory === '전체 KPI' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('전체 KPI')}\n          >\n            전체 KPI\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '일정 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('일정 성과')}\n          >\n            일정 성과\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '비용 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('비용 성과')}\n          >\n            비용 성과\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '품질 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('품질 성과')}\n          >\n            품질 성과\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '안전 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('안전 성과')}\n          >\n            안전 성과\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '환경 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('환경 성과')}\n          >\n            환경 성과\n          </button>\n          <button\n            class=\"category-button ${this.selectedCategory === '생산성 성과' ? 'active' : ''}\"\n            @click=${() => this.onCategoryButtonClick('생산성 성과')}\n          >\n            생산성 성과\n          </button>\n        </div>\n\n        <!-- 기간 선택 폼 -->\n        <div class=\"period-form\">\n          <div class=\"period-row\">\n            <span class=\"period-label\">기간:</span>\n            <select\n              class=\"period-select\"\n              .value=${this.startYear}\n              ?disabled=${this.isAllPeriod}\n              @change=${(e: Event) => {\n                this.startYear = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"2025\">2025년</option>\n              <option value=\"2024\">2024년</option>\n              <option value=\"2023\">2023년</option>\n              <option value=\"2022\">2022년</option>\n            </select>\n            <select\n              class=\"period-select\"\n              .value=${this.startMonth}\n              ?disabled=${this.isAllPeriod}\n              @change=${(e: Event) => {\n                this.startMonth = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"1\">1월</option>\n              <option value=\"2\">2월</option>\n              <option value=\"3\">3월</option>\n              <option value=\"4\">4월</option>\n              <option value=\"5\">5월</option>\n              <option value=\"6\">6월</option>\n              <option value=\"7\">7월</option>\n              <option value=\"8\">8월</option>\n              <option value=\"9\">9월</option>\n              <option value=\"10\">10월</option>\n              <option value=\"11\">11월</option>\n              <option value=\"12\">12월</option>\n            </select>\n            <span class=\"period-separator\">~</span>\n            <select\n              class=\"period-select\"\n              .value=${this.endYear}\n              ?disabled=${this.isAllPeriod}\n              @change=${(e: Event) => {\n                this.endYear = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"2025\">2025년</option>\n              <option value=\"2024\">2024년</option>\n              <option value=\"2023\">2023년</option>\n              <option value=\"2022\">2022년</option>\n            </select>\n            <select\n              class=\"period-select\"\n              .value=${this.endMonth}\n              ?disabled=${this.isAllPeriod}\n              @change=${(e: Event) => {\n                this.endMonth = (e.target as HTMLSelectElement).value\n                this.onPeriodChange()\n              }}\n            >\n              <option value=\"1\">1월</option>\n              <option value=\"2\">2월</option>\n              <option value=\"3\">3월</option>\n              <option value=\"4\">4월</option>\n              <option value=\"5\">5월</option>\n              <option value=\"6\">6월</option>\n              <option value=\"7\">7월</option>\n              <option value=\"8\">8월</option>\n              <option value=\"9\">9월</option>\n              <option value=\"10\">10월</option>\n              <option value=\"11\">11월</option>\n              <option value=\"12\">12월</option>\n            </select>\n\n            <label style=\"display: flex; align-items: center; gap: 6px; cursor: pointer;\">\n              <input type=\"checkbox\" .checked=${this.isAllPeriod} @change=${this.onAllPeriodChange} style=\"cursor: pointer;\" />\n              <span class=\"period-label\" style=\"min-width: auto;\">전체 기간</span>\n            </label>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"map-container\">\n        <!-- 지도 컨트롤 (오른쪽 상단) -->\n        <div class=\"map-controls\">\n          <button class=\"map-control-button\" title=\"확대\" @click=${() => this.zoomIn()}>+</button>\n          <button class=\"map-control-button\" title=\"축소\" @click=${() => this.zoomOut()}>-</button>\n          <button class=\"map-control-button\" title=\"뷰 초기화\" @click=${() => this.resetView()}>⌖</button>\n        </div>\n\n        <!-- 스케일 및 방향 정보 (오른쪽 하단) -->\n        <div class=\"map-scale-direction\">\n          <div class=\"north-arrow\">↑ N</div>\n          <div class=\"scale-info\">25km</div>\n        </div>\n\n        <!-- 공통 Google Maps 컴포넌트 사용 -->\n        <common-google-map\n          .center=${{ lat: 36.0, lng: 127.8 }}\n          .zoom=${7.2}\n          .locations=${this.mapLocations}\n          .clusterZoom=${10}\n          .controls=${{\n            zoomControl: false,\n            mapTypeControl: false,\n            scaleControl: false,\n            streetViewControl: false,\n            rotateControl: false,\n            fullscreenControl: false\n          }}\n          @map-change=${this.onMapChange}\n          @region-click=${this.onRegionClick}\n        ></common-google-map>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+import { LitElement, nothing } from 'lit';
+import '../../../components/kpi-radar-chart.js';
+import '../../../components/kpi-boxplot-chart.js';
+import '../../../components/kpi-trend-chart.js';
+export declare class KpiRegionPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selectedRegion: string | null;
+    selectedCategory: string;
+    selectedChartType: string;
+    selectedPeriod: string;
+    startYearMonth: string;
+    endYearMonth: string;
+    monthlyTrendData: any[];
+    totalKpiStats: any[];
+    private chartData;
+    private chartCategories;
+    private trendData;
+    private regionKpiStats;
+    updated(changedProperties: Map<string, any>): void;
+    fetchRegionKpiStats(): Promise<void>;
+    private generateChartData;
+    private generateTrendData;
+    private onClose;
+    private onChartTypeChange;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}

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

@@ -0,0 +1,439 @@
+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.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 = [];
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('selectedRegion') && this.selectedRegion) {
+            this.fetchRegionKpiStats();
+            this.generateTrendData();
+        }
+        // selectedCategory 또는 monthlyTrendData가 변경되면 추이 데이터 재생성
+        if (changedProperties.has('selectedCategory') || changedProperties.has('monthlyTrendData')) {
+            this.generateTrendData();
+        }
+        // 기간이 변경되면 차트 데이터 다시 가져오기
+        if (changedProperties.has('startYearMonth') || changedProperties.has('endYearMonth')) {
+            if (this.selectedRegion) {
+                this.fetchRegionKpiStats();
+            }
+        }
+    }
+    async fetchRegionKpiStats() {
+        if (!this.selectedRegion)
+            return;
+        try {
+            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
+                }
+            });
+            this.regionKpiStats = response.data.kpiYValueStatsByMetroArea || [];
+            console.log('Region KPI Stats:', this.regionKpiStats);
+            this.generateChartData();
+        }
+        catch (error) {
+            console.error('Failed to fetch region KPI stats:', error);
+            this.regionKpiStats = [];
+            this.generateChartData();
+        }
+    }
+    generateChartData() {
+        // KPI 이름을 카테고리로 매핑 및 축약
+        const categoryMapping = {
+            'Y1. 일정성과': '일정',
+            'Y2. 비용성과': '비용',
+            'Y3. 품질성과': '품질',
+            'Y4. 안전성과': '안전',
+            'Y5. 환경성과': '환경',
+            'Y6. 생산성성과': '생산성'
+        };
+        // 레이더 차트와 박스플롯은 항상 전체 Y-level KPI 표시 (selectedCategory 무시)
+        if (this.selectedChartType === 'radar') {
+            // 레이더 차트용 데이터 생성 (전체평균 + 지역 비교)
+            const data = [];
+            const categories = [];
+            // 카테고리 수집
+            this.regionKpiStats.forEach(stat => {
+                const category = categoryMapping[stat.kpiName] || stat.kpiName;
+                if (!categories.includes(category)) {
+                    categories.push(category);
+                }
+            });
+            // 전체평균 데이터 추가
+            this.totalKpiStats.forEach(stat => {
+                const category = categoryMapping[stat.kpiName] || stat.kpiName;
+                data.push({
+                    org: '전체평균',
+                    category,
+                    value: Math.round(stat.avgVal * 20)
+                });
+            });
+            // 지역 데이터 추가
+            this.regionKpiStats.forEach(stat => {
+                const category = categoryMapping[stat.kpiName] || stat.kpiName;
+                data.push({
+                    org: this.selectedRegion || '지역',
+                    category,
+                    value: Math.round(stat.avgVal * 20)
+                });
+            });
+            this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성'];
+            this.chartData = data;
+        }
+        else {
+            // 박스플롯용 데이터 생성
+            const data = [];
+            const categories = [];
+            this.regionKpiStats.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;
+        }
+    }
+    generateTrendData() {
+        if (!this.selectedRegion)
+            return;
+        // 선택된 지역의 월별 추이 데이터 추출
+        const regionTrendData = this.monthlyTrendData
+            .filter(d => d.geoGroup === this.selectedRegion)
+            .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
+        this.trendData = regionTrendData.map(d => {
+            const value = Math.round(d.avgVal * 20); // 20배 스케일
+            return {
+                date: d.yearMonth, // YYYY-MM 형식
+                value: value,
+                color: value > 60 ? '#4caf50' : value > 40 ? '#ff9800' : '#f44336'
+            };
+        });
+    }
+    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.selectedChartType === 'boxplot'
+            ? html `
+                  <sv-kpi-boxplot-chart
+                    .data=${this.chartData}
+                    .groups=${this.chartCategories}
+                    .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="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.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.toFixed(1)}
+                      </td>
+                      <td style="padding: 8px; text-align: center; font-size: 0.85rem;">
+                        <span style="color: ${item.color};"> ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'} </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;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiRegionPopup.prototype, "selectedRegion", 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);
+KpiRegionPopup = __decorate([
+    customElement('kpi-region-popup')
+], KpiRegionPopup);
+export { KpiRegionPopup };
+//# sourceMappingURL=kpi-region-popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-region-popup.js","sourceRoot":"","sources":["../../../../client/pages/kpi-dashboard/components/kpi-region-popup.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,wCAAwC,CAAA;AAC/C,OAAO,0CAA0C,CAAA;AACjD,OAAO,wCAAwC,CAAA;AAGxC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAoIuB,mBAAc,GAAkB,IAAI,CAAA;QACpC,qBAAgB,GAAG,QAAQ,CAAA;QAC3B,sBAAiB,GAAG,SAAS,CAAA;QAC7B,mBAAc,GAAG,GAAG,CAAA;QACpB,mBAAc,GAAG,EAAE,CAAA,CAAC,aAAa;QACjC,iBAAY,GAAG,EAAE,CAAA,CAAC,aAAa;QAChC,qBAAgB,GAAU,EAAE,CAAA,CAAC,sBAAsB;QACnD,kBAAa,GAAU,EAAE,CAAA,CAAC,kBAAkB;QAEtD,cAAS,GAAU,EAAE,CAAA;QACrB,oBAAe,GAAa,EAAE,CAAA;QAC9B,cAAS,GAAsD,EAAE,CAAA;QACjE,mBAAc,GAAU,EAAE,CAAA;IAqQ7C,CAAC;IAnQC,OAAO,CAAC,iBAAmC;QACzC,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACnE,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAED,wDAAwD;QACxD,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC3F,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAED,0BAA0B;QAC1B,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;YACrF,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAM;QAEhC,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;SAaT;gBACD,SAAS,EAAE;oBACT,SAAS,EAAE,IAAI,CAAC,cAAc;oBAC9B,cAAc,EAAE,IAAI,CAAC,cAAc;oBACnC,YAAY,EAAE,IAAI,CAAC,YAAY;iBAChC;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,yBAAyB,IAAI,EAAE,CAAA;YACnE,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YACrD,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,cAAc,GAAG,EAAE,CAAA;YACxB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,wBAAwB;QACxB,MAAM,eAAe,GAA2B;YAC9C,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,UAAU,EAAE,IAAI;YAChB,WAAW,EAAE,KAAK;SACnB,CAAA;QAED,2DAA2D;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,OAAO,EAAE,CAAC;YACvC,gCAAgC;YAChC,MAAM,IAAI,GAA4D,EAAE,CAAA;YACxE,MAAM,UAAU,GAAa,EAAE,CAAA;YAE/B,UAAU;YACV,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACnC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC3B,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,cAAc;YACd,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAChC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,MAAM;oBACX,QAAQ;oBACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;iBACpC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,YAAY;YACZ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI;oBAChC,QAAQ;oBACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;iBACpC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;YACjG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACvB,CAAC;aAAM,CAAC;YACN,eAAe;YACf,MAAM,IAAI,GASL,EAAE,CAAA;YACP,MAAM,UAAU,GAAa,EAAE,CAAA;YAE/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAA;gBAC9D,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACnC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;gBAC3B,CAAC;gBACD,IAAI,CAAC,IAAI,CAAC;oBACR,GAAG,EAAE,QAAQ;oBACb,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACrB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACrB,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;oBACnB,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACxB,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;oBACtB,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,EAAE;iBACxB,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;YACjG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;QACvB,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAM;QAEhC,uBAAuB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB;aAC1C,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,CAAC;aAC/C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QAEzD,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA,CAAC,UAAU;YAClD,OAAO;gBACL,IAAI,EAAE,CAAC,CAAC,SAAS,EAAE,aAAa;gBAChC,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aACnE,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAEO,iBAAiB,CAAC,IAAY;QACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;QAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,cAAc;6CACT,IAAI,CAAC,OAAO;;;;;;;;qCAQpB,IAAI,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAClE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;;;;;qCAKzB,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;uBAChE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC;;;;;;cAM9C,IAAI,CAAC,iBAAiB,KAAK,SAAS;YACpC,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;8BACZ,IAAI,CAAC,eAAe;gCAClB,OAAO;;iBAEtB;YACH,CAAC,CAAC,IAAI,CAAA;;4BAEQ,IAAI,CAAC,SAAS;kCACR,IAAI,CAAC,eAAe;gCACtB,OAAO;;iBAEtB;;;;;;;;;sBASK,IAAI,CAAC,SAAS;2BACT,SAAS;6BACP,CAAC;4BACF,KAAK;6BACJ,CAAC;;;;;;;;;;;;;kBAaZ,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAA;;sEAEiC,IAAI,CAAC,IAAI;;0BAErD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;;8CAGD,IAAI,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;mBAG/F,CACF;;;;;;KAMZ,CAAA;IACH,CAAC;;AAnZM,qBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8HF;CACF,AAjIY,CAiIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAqC;AACpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAA8B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAkB;AAClB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;wDAA6B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;qDAA0B;AAEnC;IAAhB,KAAK,EAAE;;iDAA8B;AACrB;IAAhB,KAAK,EAAE;;uDAAuC;AAC9B;IAAhB,KAAK,EAAE;;iDAA0E;AACjE;IAAhB,KAAK,EAAE;;sDAAmC;AAhJhC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqZ1B","sourcesContent":["import gql from 'graphql-tag'\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport '../../../components/kpi-radar-chart.js'\nimport '../../../components/kpi-boxplot-chart.js'\nimport '../../../components/kpi-trend-chart.js'\n\n@customElement('kpi-region-popup')\nexport class KpiRegionPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 402px;\n        width: 400px;\n        height: 100%;\n        background: #fff;\n        border-right: 1px solid #e0e0e0;\n        z-index: 1000;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n      }\n      .popup-content {\n        padding: 20px;\n        overflow-y: auto;\n        flex: 1;\n      }\n      .popup-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 20px;\n        border-bottom: 1px solid #e0e0e0;\n        background: #fff;\n        height: 70px;\n        box-sizing: border-box;\n      }\n      .popup-title {\n        font-size: 1.2rem;\n        font-weight: bold;\n        color: #333;\n      }\n      .popup-close {\n        width: 32px;\n        height: 32px;\n        border: none;\n        background: #fff;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.2rem;\n        color: #666;\n        transition: all 0.2s;\n      }\n      .popup-close:hover {\n        background: #e9ecef;\n        color: #333;\n      }\n      .sub-title {\n        font-size: 1rem;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: #495057;\n      }\n      .chart-section {\n        background: #f8f9fa;\n        border-radius: 8px;\n        padding: 16px;\n        margin-bottom: 20px;\n      }\n      .chart-toggle {\n        display: flex;\n        gap: 8px;\n        margin-bottom: 16px;\n      }\n      .toggle-button {\n        padding: 8px 16px;\n        border: 1px solid #ced4da;\n        background: #fff;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        transition: all 0.2s;\n      }\n      .toggle-button.active {\n        background: #667eea;\n        color: white;\n        border-color: #667eea;\n      }\n      .chart-container {\n        height: 300px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: white;\n        border-radius: 6px;\n        border: 1px solid #e9ecef;\n      }\n      .period-selector {\n        display: flex;\n        gap: 8px;\n        margin-bottom: 16px;\n      }\n      .period-button {\n        padding: 6px 12px;\n        border: 1px solid #ced4da;\n        background: #fff;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 0.85rem;\n        transition: all 0.2s;\n      }\n      .period-button.active {\n        background: #667eea;\n        color: white;\n        border-color: #667eea;\n      }\n      .date-range-selector {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-bottom: 16px;\n      }\n      .date-select {\n        padding: 6px 12px;\n        border: 1px solid #ced4da;\n        border-radius: 4px;\n        background: white;\n        font-size: 0.9rem;\n      }\n    `\n  ]\n\n  @property({ type: String }) selectedRegion: string | null = null\n  @property({ type: String }) selectedCategory = '전체 KPI'\n  @property({ type: String }) selectedChartType = 'boxplot'\n  @property({ type: String }) selectedPeriod = '월'\n  @property({ type: String }) startYearMonth = '' // YYYY-MM 형식\n  @property({ type: String }) endYearMonth = '' // YYYY-MM 형식\n  @property({ type: Array }) monthlyTrendData: any[] = [] // 부모에서 전달받은 월별 추이 데이터\n  @property({ type: Array }) totalKpiStats: any[] = [] // 전체 KPI 통계 (비교용)\n\n  @state() private chartData: any[] = []\n  @state() private chartCategories: string[] = []\n  @state() private trendData: { date: string; value: number; color?: string }[] = []\n  @state() private regionKpiStats: any[] = []\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('selectedRegion') && this.selectedRegion) {\n      this.fetchRegionKpiStats()\n      this.generateTrendData()\n    }\n\n    // selectedCategory 또는 monthlyTrendData가 변경되면 추이 데이터 재생성\n    if (changedProperties.has('selectedCategory') || changedProperties.has('monthlyTrendData')) {\n      this.generateTrendData()\n    }\n\n    // 기간이 변경되면 차트 데이터 다시 가져오기\n    if (changedProperties.has('startYearMonth') || changedProperties.has('endYearMonth')) {\n      if (this.selectedRegion) {\n        this.fetchRegionKpiStats()\n      }\n    }\n  }\n\n  async fetchRegionKpiStats() {\n    if (!this.selectedRegion) return\n\n    try {\n      const response = await client.query({\n        query: gql`\n          query GetRegionKpiStats($metroArea: String!, $startYearMonth: String, $endYearMonth: String) {\n            kpiYValueStatsByMetroArea(metroArea: $metroArea, startYearMonth: $startYearMonth, endYearMonth: $endYearMonth) {\n              kpiName\n              minVal\n              q1Val\n              medVal\n              q3Val\n              maxVal\n              avgVal\n              projectCount\n            }\n          }\n        `,\n        variables: {\n          metroArea: this.selectedRegion,\n          startYearMonth: this.startYearMonth,\n          endYearMonth: this.endYearMonth\n        }\n      })\n\n      this.regionKpiStats = response.data.kpiYValueStatsByMetroArea || []\n      console.log('Region KPI Stats:', this.regionKpiStats)\n      this.generateChartData()\n    } catch (error) {\n      console.error('Failed to fetch region KPI stats:', error)\n      this.regionKpiStats = []\n      this.generateChartData()\n    }\n  }\n\n  private generateChartData() {\n    // KPI 이름을 카테고리로 매핑 및 축약\n    const categoryMapping: Record<string, string> = {\n      'Y1. 일정성과': '일정',\n      'Y2. 비용성과': '비용',\n      'Y3. 품질성과': '품질',\n      'Y4. 안전성과': '안전',\n      'Y5. 환경성과': '환경',\n      'Y6. 생산성성과': '생산성'\n    }\n\n    // 레이더 차트와 박스플롯은 항상 전체 Y-level KPI 표시 (selectedCategory 무시)\n    if (this.selectedChartType === 'radar') {\n      // 레이더 차트용 데이터 생성 (전체평균 + 지역 비교)\n      const data: Array<{ org: string; category: string; value: number }> = []\n      const categories: string[] = []\n\n      // 카테고리 수집\n      this.regionKpiStats.forEach(stat => {\n        const category = categoryMapping[stat.kpiName] || stat.kpiName\n        if (!categories.includes(category)) {\n          categories.push(category)\n        }\n      })\n\n      // 전체평균 데이터 추가\n      this.totalKpiStats.forEach(stat => {\n        const category = categoryMapping[stat.kpiName] || stat.kpiName\n        data.push({\n          org: '전체평균',\n          category,\n          value: Math.round(stat.avgVal * 20)\n        })\n      })\n\n      // 지역 데이터 추가\n      this.regionKpiStats.forEach(stat => {\n        const category = categoryMapping[stat.kpiName] || stat.kpiName\n        data.push({\n          org: this.selectedRegion || '지역',\n          category,\n          value: Math.round(stat.avgVal * 20)\n        })\n      })\n\n      this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n      this.chartData = data\n    } else {\n      // 박스플롯용 데이터 생성\n      const data: Array<{\n        org: string\n        min: number\n        max: number\n        q1: number\n        q3: number\n        median: number\n        mean: number\n        value: number\n      }> = []\n      const categories: string[] = []\n\n      this.regionKpiStats.forEach(stat => {\n        const category = categoryMapping[stat.kpiName] || stat.kpiName\n        if (!categories.includes(category)) {\n          categories.push(category)\n        }\n        data.push({\n          org: category,\n          min: stat.minVal * 20,\n          max: stat.maxVal * 20,\n          q1: stat.q1Val * 20,\n          q3: stat.q3Val * 20,\n          median: stat.medVal * 20,\n          mean: stat.avgVal * 20,\n          value: stat.avgVal * 20\n        })\n      })\n\n      this.chartCategories = categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']\n      this.chartData = data\n    }\n  }\n\n  private generateTrendData() {\n    if (!this.selectedRegion) return\n\n    // 선택된 지역의 월별 추이 데이터 추출\n    const regionTrendData = this.monthlyTrendData\n      .filter(d => d.geoGroup === this.selectedRegion)\n      .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth))\n\n    this.trendData = regionTrendData.map(d => {\n      const value = Math.round(d.avgVal * 20) // 20배 스케일\n      return {\n        date: d.yearMonth, // YYYY-MM 형식\n        value: value,\n        color: value > 60 ? '#4caf50' : value > 40 ? '#ff9800' : '#f44336'\n      }\n    })\n  }\n\n  private onClose() {\n    this.dispatchEvent(\n      new CustomEvent('popup-close', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onChartTypeChange(type: string) {\n    this.selectedChartType = type\n    this.generateChartData()\n  }\n\n  render() {\n    if (!this.selectedRegion) {\n      return nothing\n    }\n\n    return html`\n      <div class=\"popup-header\">\n        <div class=\"popup-title\">${this.selectedRegion} KPI</div>\n        <button class=\"popup-close\" @click=${this.onClose}>×</button>\n      </div>\n      <div class=\"popup-content\">\n        <!-- 종합 성과 -->\n        <div class=\"chart-section\">\n          <div class=\"sub-title\">종합 성과</div>\n          <div class=\"chart-toggle\">\n            <button\n              class=\"toggle-button ${this.selectedChartType === 'boxplot' ? 'active' : ''}\"\n              @click=${() => this.onChartTypeChange('boxplot')}\n            >\n              박스플롯\n            </button>\n            <button\n              class=\"toggle-button ${this.selectedChartType === 'radar' ? 'active' : ''}\"\n              @click=${() => this.onChartTypeChange('radar')}\n            >\n              레이더차트\n            </button>\n          </div>\n          <div class=\"chart-container\">\n            ${this.selectedChartType === 'boxplot'\n              ? html`\n                  <sv-kpi-boxplot-chart\n                    .data=${this.chartData}\n                    .groups=${this.chartCategories}\n                    .valueKey=${'value'}\n                  ></sv-kpi-boxplot-chart>\n                `\n              : html`\n                  <sv-kpi-radar-chart\n                    .data=${this.chartData}\n                    .categories=${this.chartCategories}\n                    .valueKey=${'value'}\n                  ></sv-kpi-radar-chart>\n                `}\n          </div>\n        </div>\n\n        <!-- 기간별 성과 추이 -->\n        <div class=\"trend-section\">\n          <div class=\"sub-title\">기간별 성과 추이</div>\n          <div class=\"trend-chart-container\" style=\"height: 200px; margin-bottom: 16px;\">\n            <sv-kpi-trend-chart\n              .data=${this.trendData}\n              .lineColor=${'#2196f3'}\n              .strokeWidth=${2}\n              .showPoints=${false}\n              .pointRadius=${4}\n            ></sv-kpi-trend-chart>\n          </div>\n          <div class=\"trend-table\">\n            <table style=\"width: 100%; border-collapse: collapse; font-size: 0.85rem;\">\n              <thead style=\"position: sticky; top: 0; background: white; z-index: 1;\">\n                <tr style=\"border-bottom: 2px solid #f1f3f4; background-color: #f8f9fa;\">\n                  <th style=\"padding: 8px; text-align: left; font-weight: 600;\">날짜</th>\n                  <th style=\"padding: 8px; text-align: right; font-weight: 600;\">성과</th>\n                  <th style=\"padding: 8px; text-align: center; font-weight: 600;\">추이</th>\n                </tr>\n              </thead>\n              <tbody>\n                ${this.trendData.map(\n                  (item: any) => html`\n                    <tr style=\"border-bottom: 1px solid #f1f3f4;\">\n                      <td style=\"padding: 8px; font-size: 0.85rem;\">${item.date}</td>\n                      <td style=\"padding: 8px; text-align: right; font-size: 0.85rem; font-weight: 600;\">\n                        ${item.value.toFixed(1)}\n                      </td>\n                      <td style=\"padding: 8px; text-align: center; font-size: 0.85rem;\">\n                        <span style=\"color: ${item.color};\"> ${item.value > 60 ? '▲' : item.value > 40 ? '▲' : '▼'} </span>\n                      </td>\n                    </tr>\n                  `\n                )}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-dashboard/kpi-alert-panel.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class KpiAlertPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    alerts: Array<{
+        level: string;
+        message: string;
+        kpi?: {
+            name: string;
+        };
+        createdAt: string;
+    }>;
+    loading: boolean;
+    error: string;
+    connectedCallback(): void;
+    fetchAlerts(): Promise<void>;
+    getIcon(level: string): "❗" | "⚠️" | "ℹ️";
+    render(): import("lit-html").TemplateResult<1>;
+}