@things-factory/kpi 9.0.29 → 9.0.31

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

@@ -0,0 +1,271 @@
+import { __decorate, __metadata } from "tslib";
+import gql from 'graphql-tag';
+import { html, css, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import './components/kpi-map-panel';
+import './components/kpi-left-panel';
+import './components/kpi-region-popup';
+let KpiDashboardMapPage = class KpiDashboardMapPage extends PageView {
+    constructor() {
+        super(...arguments);
+        this.selectedCategory = '전체 KPI';
+        this.selectedPeriod = '월';
+        this.startDate = '전체';
+        this.endDate = '전체';
+        this.nationalData = null;
+        this.seoulData = null;
+        this.mapData = null;
+        // 팝업 관련 상태 추가
+        this.selectedRegion = null;
+        this.showRegionPopup = false;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+      }
+
+      .dashboard-container {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .right-panel {
+        flex: 1;
+        background: #f8f9fa;
+        overflow: hidden;
+        position: relative;
+      }
+    `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchDashboardData();
+        this.setupKeyboardEvents();
+    }
+    setupKeyboardEvents() {
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape' && this.showRegionPopup) {
+                this.closeRegionPopup();
+            }
+        });
+    }
+    async fetchDashboardData() {
+        try {
+            // 전국 KPI 데이터 조회
+            const nationalResponse = await client.query({
+                query: gql `
+          query {
+            kpiStatistics {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                standardDeviation
+                kpi {
+                  id
+                  name
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `
+            });
+            this.nationalData = nationalResponse.data.kpiStatistics.items || [];
+            // 서울특별시 데이터는 전국 데이터에서 필터링
+            this.seoulData = this.nationalData.filter((item) => item.kpi?.category?.name === '서울특별시');
+            // 지도 데이터 생성 (시도별)
+            this.generateMapData();
+        }
+        catch (e) {
+            notify({
+                level: 'error',
+                message: '대시보드 데이터를 불러오지 못했습니다.'
+            });
+        }
+    }
+    generateMapData() {
+        // 시도별 샘플 데이터 생성 (실제 좌표 포함)
+        this.mapData = [
+            { region: '강원', kpi: 101.5, change: -0.08, trend: 'down', lat: 37.8228, lng: 128.1555 },
+            { region: '경북', kpi: 94.8, change: -0.1, trend: 'down', lat: 36.4919, lng: 128.8889 },
+            { region: '대구', kpi: 79.4, change: -0.2, trend: 'down', lat: 35.8714, lng: 128.6014 },
+            { region: '경남', kpi: 92.1, change: -0.08, trend: 'down', lat: 35.4606, lng: 128.2132 },
+            { region: '부산', kpi: 85.2, change: -0.18, trend: 'down', lat: 35.1796, lng: 129.0756 },
+            { region: '울산', kpi: 91.4, change: 0.19, trend: 'up', lat: 35.5384, lng: 129.3114 },
+            { region: '서울', kpi: 98.1, change: 1.28, trend: 'up', lat: 37.5665, lng: 126.978 },
+            { region: '인천', kpi: 87.3, change: 0.05, trend: 'up', lat: 37.4563, lng: 126.7052 },
+            { region: '대전', kpi: 89.7, change: -0.12, trend: 'down', lat: 36.3504, lng: 127.3845 },
+            { region: '광주', kpi: 91.1, change: -0.16, trend: 'down', lat: 35.1595, lng: 126.8526 },
+            { region: '전북', kpi: 99.3, change: 0.15, trend: 'up', lat: 35.7175, lng: 127.153 },
+            { region: '전남', kpi: 91.8, change: -0.12, trend: 'down', lat: 34.8679, lng: 126.991 },
+            { region: '충북', kpi: 93.2, change: 0.08, trend: 'up', lat: 36.8, lng: 127.7 },
+            { region: '충남', kpi: 88.9, change: -0.05, trend: 'down', lat: 36.5184, lng: 126.8 },
+            { region: '제주', kpi: 95.6, change: 0.22, trend: 'up', lat: 33.4996, lng: 126.5312 }
+        ];
+    }
+    downloadExcel() {
+        // 엑셀 다운로드 기능
+        console.log('엑셀 다운로드');
+    }
+    onRegionClick(region) {
+        this.selectedRegion = region;
+        this.showRegionPopup = true;
+        this.fetchRegionData(region);
+    }
+    closeRegionPopup() {
+        this.showRegionPopup = false;
+        this.selectedRegion = null;
+    }
+    async fetchRegionData(region) {
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetRegionKpiData($region: String) {
+            kpiStatistics(filters: [{ field: "kpi.category.name", operator: "eq", value: $region }]) {
+              items {
+                id
+                valueDate
+                periodType
+                mean
+                median
+                standardDeviation
+                kpi {
+                  id
+                  name
+                  category {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+          }
+        `,
+                variables: { region }
+            });
+            this.seoulData = response.data.kpiStatistics.items || [];
+        }
+        catch (e) {
+            notify({
+                level: 'error',
+                message: '지역 데이터를 불러오지 못했습니다.'
+            });
+        }
+    }
+    get context() {
+        return {
+            title: '전국 KPI 대시보드',
+            description: '전국 및 지역별 KPI 성과 분석 대시보드'
+        };
+    }
+    render() {
+        return html `
+      <div class="dashboard-container">
+        <!-- 좌측 패널: 전국 KPI -->
+        <kpi-left-panel
+          .selectedCategory=${this.selectedCategory}
+          .mapData=${this.mapData}
+          @category-change=${(e) => {
+            this.selectedCategory = e.detail.category;
+            this.fetchDashboardData();
+        }}
+          @region-click=${(e) => {
+            this.onRegionClick(e.detail.region);
+        }}
+          @download-excel=${this.downloadExcel}
+        ></kpi-left-panel>
+
+        <!-- 우측 패널: 지도 -->
+        <kpi-map-panel
+          class="right-panel"
+          .selectedCategory=${this.selectedCategory}
+          .mapData=${this.mapData}
+          @category-change=${(e) => {
+            this.selectedCategory = e.detail.category;
+            this.fetchDashboardData();
+        }}
+          @region-click=${(e) => {
+            this.onRegionClick(e.detail.region);
+        }}
+        ></kpi-map-panel>
+
+        <!-- 지역 상세 팝업 -->
+        ${this.showRegionPopup
+            ? html `
+              <kpi-region-popup
+                .selectedRegion=${this.selectedRegion}
+                .selectedPeriod=${this.selectedPeriod}
+                .startDate=${this.startDate}
+                .endDate=${this.endDate}
+                @popup-close=${this.closeRegionPopup}
+                @period-change=${(e) => {
+                this.selectedPeriod = e.detail.period;
+            }}
+                @date-range-change=${(e) => {
+                this.startDate = e.detail.startDate;
+                this.endDate = e.detail.endDate;
+            }}
+              ></kpi-region-popup>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedCategory", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedPeriod", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "startDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "endDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "nationalData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "seoulData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "mapData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "selectedRegion", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiDashboardMapPage.prototype, "showRegionPopup", void 0);
+KpiDashboardMapPage = __decorate([
+    customElement('kpi-dashboard-map')
+], KpiDashboardMapPage);
+export { KpiDashboardMapPage };
+//# sourceMappingURL=kpi-dashboard-map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-dashboard-map.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-dashboard-map.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { html, css, nothing } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\n\nimport './components/kpi-map-panel'\nimport './components/kpi-left-panel'\nimport './components/kpi-region-popup'\n\n@customElement('kpi-dashboard-map')\nexport class KpiDashboardMapPage extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        position: relative;\n      }\n\n      .dashboard-container {\n        display: flex;\n        flex: 1;\n        overflow: hidden;\n      }\n\n      .right-panel {\n        flex: 1;\n        background: #f8f9fa;\n        overflow: hidden;\n        position: relative;\n      }\n    `\n  ]\n\n  @state() selectedCategory = '전체 KPI'\n  @state() selectedPeriod = '월'\n  @state() startDate = '전체'\n  @state() endDate = '전체'\n  @state() nationalData: any = null\n  @state() seoulData: any = null\n  @state() mapData: any = null\n  // 팝업 관련 상태 추가\n  @state() selectedRegion: string | null = null\n  @state() showRegionPopup = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchDashboardData()\n    this.setupKeyboardEvents()\n  }\n\n  private setupKeyboardEvents() {\n    document.addEventListener('keydown', e => {\n      if (e.key === 'Escape' && this.showRegionPopup) {\n        this.closeRegionPopup()\n      }\n    })\n  }\n\n  async fetchDashboardData() {\n    try {\n      // 전국 KPI 데이터 조회\n      const nationalResponse = await client.query({\n        query: gql`\n          query {\n            kpiStatistics {\n              items {\n                id\n                valueDate\n                periodType\n                mean\n                median\n                standardDeviation\n                kpi {\n                  id\n                  name\n                  category {\n                    id\n                    name\n                  }\n                }\n              }\n            }\n          }\n        `\n      })\n\n      this.nationalData = nationalResponse.data.kpiStatistics.items || []\n\n      // 서울특별시 데이터는 전국 데이터에서 필터링\n      this.seoulData = this.nationalData.filter((item: any) => item.kpi?.category?.name === '서울특별시')\n\n      // 지도 데이터 생성 (시도별)\n      this.generateMapData()\n    } catch (e) {\n      notify({\n        level: 'error',\n        message: '대시보드 데이터를 불러오지 못했습니다.'\n      })\n    }\n  }\n\n  private generateMapData() {\n    // 시도별 샘플 데이터 생성 (실제 좌표 포함)\n    this.mapData = [\n      { region: '강원', kpi: 101.5, change: -0.08, trend: 'down', lat: 37.8228, lng: 128.1555 },\n      { region: '경북', kpi: 94.8, change: -0.1, trend: 'down', lat: 36.4919, lng: 128.8889 },\n      { region: '대구', kpi: 79.4, change: -0.2, trend: 'down', lat: 35.8714, lng: 128.6014 },\n      { region: '경남', kpi: 92.1, change: -0.08, trend: 'down', lat: 35.4606, lng: 128.2132 },\n      { region: '부산', kpi: 85.2, change: -0.18, trend: 'down', lat: 35.1796, lng: 129.0756 },\n      { region: '울산', kpi: 91.4, change: 0.19, trend: 'up', lat: 35.5384, lng: 129.3114 },\n      { region: '서울', kpi: 98.1, change: 1.28, trend: 'up', lat: 37.5665, lng: 126.978 },\n      { region: '인천', kpi: 87.3, change: 0.05, trend: 'up', lat: 37.4563, lng: 126.7052 },\n      { region: '대전', kpi: 89.7, change: -0.12, trend: 'down', lat: 36.3504, lng: 127.3845 },\n      { region: '광주', kpi: 91.1, change: -0.16, trend: 'down', lat: 35.1595, lng: 126.8526 },\n      { region: '전북', kpi: 99.3, change: 0.15, trend: 'up', lat: 35.7175, lng: 127.153 },\n      { region: '전남', kpi: 91.8, change: -0.12, trend: 'down', lat: 34.8679, lng: 126.991 },\n      { region: '충북', kpi: 93.2, change: 0.08, trend: 'up', lat: 36.8, lng: 127.7 },\n      { region: '충남', kpi: 88.9, change: -0.05, trend: 'down', lat: 36.5184, lng: 126.8 },\n      { region: '제주', kpi: 95.6, change: 0.22, trend: 'up', lat: 33.4996, lng: 126.5312 }\n    ]\n  }\n\n  private downloadExcel() {\n    // 엑셀 다운로드 기능\n    console.log('엑셀 다운로드')\n  }\n\n  private onRegionClick(region: string) {\n    this.selectedRegion = region\n    this.showRegionPopup = true\n    this.fetchRegionData(region)\n  }\n\n  private closeRegionPopup() {\n    this.showRegionPopup = false\n    this.selectedRegion = null\n  }\n\n  private async fetchRegionData(region: string) {\n    try {\n      const response = await client.query({\n        query: gql`\n          query GetRegionKpiData($region: String) {\n            kpiStatistics(filters: [{ field: \"kpi.category.name\", operator: \"eq\", value: $region }]) {\n              items {\n                id\n                valueDate\n                periodType\n                mean\n                median\n                standardDeviation\n                kpi {\n                  id\n                  name\n                  category {\n                    id\n                    name\n                  }\n                }\n              }\n            }\n          }\n        `,\n        variables: { region }\n      })\n\n      this.seoulData = response.data.kpiStatistics.items || []\n    } catch (e) {\n      notify({\n        level: 'error',\n        message: '지역 데이터를 불러오지 못했습니다.'\n      })\n    }\n  }\n\n  get context() {\n    return {\n      title: '전국 KPI 대시보드',\n      description: '전국 및 지역별 KPI 성과 분석 대시보드'\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dashboard-container\">\n        <!-- 좌측 패널: 전국 KPI -->\n        <kpi-left-panel\n          .selectedCategory=${this.selectedCategory}\n          .mapData=${this.mapData}\n          @category-change=${(e: CustomEvent) => {\n            this.selectedCategory = e.detail.category\n            this.fetchDashboardData()\n          }}\n          @region-click=${(e: CustomEvent) => {\n            this.onRegionClick(e.detail.region)\n          }}\n          @download-excel=${this.downloadExcel}\n        ></kpi-left-panel>\n\n        <!-- 우측 패널: 지도 -->\n        <kpi-map-panel\n          class=\"right-panel\"\n          .selectedCategory=${this.selectedCategory}\n          .mapData=${this.mapData}\n          @category-change=${(e: CustomEvent) => {\n            this.selectedCategory = e.detail.category\n            this.fetchDashboardData()\n          }}\n          @region-click=${(e: CustomEvent) => {\n            this.onRegionClick(e.detail.region)\n          }}\n        ></kpi-map-panel>\n\n        <!-- 지역 상세 팝업 -->\n        ${this.showRegionPopup\n          ? html`\n              <kpi-region-popup\n                .selectedRegion=${this.selectedRegion}\n                .selectedPeriod=${this.selectedPeriod}\n                .startDate=${this.startDate}\n                .endDate=${this.endDate}\n                @popup-close=${this.closeRegionPopup}\n                @period-change=${(e: CustomEvent) => {\n                  this.selectedPeriod = e.detail.period\n                }}\n                @date-range-change=${(e: CustomEvent) => {\n                  this.startDate = e.detail.startDate\n                  this.endDate = e.detail.endDate\n                }}\n              ></kpi-region-popup>\n            `\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}

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

@@ -9,6 +9,9 @@ import './kpi-value-entry';
 import './kpi-alert-panel';
 import '../../charts/kpi-radar-chart';
 import '../../charts/kpi-boxplot-chart';
+import './cards/kpi-level1-card';
+import './cards/kpi-level2-comparison';
+import './cards/kpi-level3-comparison';
 export declare class KpiDashboardPage extends PageView {
     static styles: import("lit").CSSResult[];
     categories: any[];
@@ -18,6 +21,10 @@ export declare class KpiDashboardPage extends PageView {
     showHistoryModal: boolean;
     modalHistories: any[];
     modalKpiName: string;
+    kpiStatistics: any[];
+    statisticsLoading: boolean;
+    selectedPeriodType: string;
+    selectedValueDate: string;
     private get sampleCategories();
     private get sampleGroups();
     private get sampleSeriesData();
@@ -27,9 +34,23 @@ export declare class KpiDashboardPage extends PageView {
     private get sampleBoxplotData();
     private get sampleBoxplotGroups();
     private get sampleCurrentGroup();
+    private get currentMonth();
+    private get filteredKpiStatistics();
+    private get availablePeriodTypes();
+    private get availableValueDates();
+    private get statisticsSummary();
+    private _onPeriodTypeChange;
+    private _onValueDateChange;
+    private get realKpiRadarData();
+    private get realKpiRadarCategories();
+    private get realKpiRadarGroups();
+    private get realKpiBoxplotData();
+    private get realKpiBoxplotGroups();
+    private get realKpiCurrentGroup();
     connectedCallback(): void;
     pageUpdated(changes: any, lifecycle: any): void;
     fetchCategories(): Promise<void>;
+    fetchKpiStatistics(): Promise<void>;
     openHistoryModal(kpi: any): Promise<void>;
     closeHistoryModal(): void;
     _renderKpiValue(kpi: any): import("lit-html").TemplateResult<1>;