@dssp/dkpi 1.0.0-alpha.7 → 1.0.0-alpha.70

package/dist-client/pages/kpi-dashboard/kpi-alert-panel.js

@@ -0,0 +1,131 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+let KpiAlertPanel = class KpiAlertPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.alerts = [];
+        this.loading = true;
+        this.error = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchAlerts();
+    }
+    async fetchAlerts() {
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await client.query({
+                query: gql `
+          query {
+            kpiAlerts {
+              id
+              message
+              level
+              createdAt
+              kpi {
+                name
+              }
+            }
+          }
+        `
+            });
+            this.alerts = response.data.kpiAlerts || [];
+        }
+        catch (e) {
+            this.error = 'KPI 알림 데이터를 불러오지 못했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    getIcon(level) {
+        switch (level) {
+            case 'critical':
+                return '❗';
+            case 'warning':
+                return '⚠️';
+            case 'info':
+            default:
+                return 'ℹ️';
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="alert-container">로딩 중...</div>`;
+        }
+        if (this.error) {
+            return html `<div class="alert-container">${this.error}</div>`;
+        }
+        return html `
+      <div class="alert-container">
+        <div class="alert-title">KPI 알림/상태/이상감지</div>
+        <ul class="alert-list">
+          ${this.alerts.length === 0
+            ? html `<li class="alert-item"><span class="alert-icon">✅</span> <span>이상/경고 없음</span></li>`
+            : this.alerts.map(a => {
+                var _a;
+                return html `
+                  <li class="alert-item">
+                    <span class="alert-icon">${this.getIcon(a.level)}</span>
+                    <span>${((_a = a.kpi) === null || _a === void 0 ? void 0 : _a.name) ? `[${a.kpi.name}] ` : ''}${a.message}</span>
+                  </li>
+                `;
+            })}
+        </ul>
+      </div>
+    `;
+    }
+};
+KpiAlertPanel.styles = css `
+    .alert-container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      margin-bottom: 16px;
+    }
+    .alert-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+    .alert-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .alert-item {
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+      font-size: 1.1rem;
+      color: #d32f2f;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .alert-icon {
+      font-size: 1.3rem;
+      color: #d32f2f;
+    }
+  `;
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiAlertPanel.prototype, "alerts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiAlertPanel.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiAlertPanel.prototype, "error", void 0);
+KpiAlertPanel = __decorate([
+    customElement('kpi-alert-panel')
+], KpiAlertPanel);
+export { KpiAlertPanel };
+//# sourceMappingURL=kpi-alert-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-alert-panel.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-alert-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAGtB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAkCI,WAAM,GAAyF,EAAE,CAAA;QACjG,YAAO,GAAG,IAAI,CAAA;QACd,UAAK,GAAG,EAAE,CAAA;IAuErB,CAAC;IArEC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACf,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;SAYT;aACF,CAAC,CAAA;YACF,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAA;QAC7C,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,GAAG,yBAAyB,CAAA;QACxC,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;IACH,CAAC;IAED,OAAO,CAAC,KAAa;QACnB,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,UAAU;gBACb,OAAO,GAAG,CAAA;YACZ,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA;YACb,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA;QACf,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,4CAA4C,CAAA;QACzD,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAA,gCAAgC,IAAI,CAAC,KAAK,QAAQ,CAAA;QAC/D,CAAC;QACD,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YACxB,CAAC,CAAC,IAAI,CAAA,qFAAqF;YAC3F,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CACb,CAAC,CAAC,EAAE;;gBAAC,OAAA,IAAI,CAAA;;+CAEsB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;4BACxC,CAAA,MAAA,CAAC,CAAC,GAAG,0CAAE,IAAI,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,OAAO;;iBAE5D,CAAA;aAAA,CACF;;;KAGV,CAAA;IACH,CAAC;;AAzGM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BlB,AA/BY,CA+BZ;AAEQ;IAAR,KAAK,EAAE;8BAAS,KAAK;6CAAoF;AACjG;IAAR,KAAK,EAAE;;8CAAe;AACd;IAAR,KAAK,EAAE;;4CAAW;AApCR,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA2GzB","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\n@customElement('kpi-alert-panel')\nexport class KpiAlertPanel extends LitElement {\n  static styles = css`\n    .alert-container {\n      background: #fff;\n      border-radius: 16px;\n      padding: 32px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n      margin-bottom: 16px;\n    }\n    .alert-title {\n      font-size: 1.5rem;\n      font-weight: bold;\n      margin-bottom: 16px;\n    }\n    .alert-list {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n    .alert-item {\n      padding: 10px 0;\n      border-bottom: 1px solid #eee;\n      font-size: 1.1rem;\n      color: #d32f2f;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .alert-icon {\n      font-size: 1.3rem;\n      color: #d32f2f;\n    }\n  `\n\n  @state() alerts: Array<{ level: string; message: string; kpi?: { name: string }; createdAt: string }> = []\n  @state() loading = true\n  @state() error = ''\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.fetchAlerts()\n  }\n\n  async fetchAlerts() {\n    this.loading = true\n    this.error = ''\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            kpiAlerts {\n              id\n              message\n              level\n              createdAt\n              kpi {\n                name\n              }\n            }\n          }\n        `\n      })\n      this.alerts = response.data.kpiAlerts || []\n    } catch (e) {\n      this.error = 'KPI 알림 데이터를 불러오지 못했습니다.'\n    } finally {\n      this.loading = false\n    }\n  }\n\n  getIcon(level: string) {\n    switch (level) {\n      case 'critical':\n        return '❗'\n      case 'warning':\n        return '⚠️'\n      case 'info':\n      default:\n        return 'ℹ️'\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return html`<div class=\"alert-container\">로딩 중...</div>`\n    }\n    if (this.error) {\n      return html`<div class=\"alert-container\">${this.error}</div>`\n    }\n    return html`\n      <div class=\"alert-container\">\n        <div class=\"alert-title\">KPI 알림/상태/이상감지</div>\n        <ul class=\"alert-list\">\n          ${this.alerts.length === 0\n            ? html`<li class=\"alert-item\"><span class=\"alert-icon\">✅</span> <span>이상/경고 없음</span></li>`\n            : this.alerts.map(\n                a => html`\n                  <li class=\"alert-item\">\n                    <span class=\"alert-icon\">${this.getIcon(a.level)}</span>\n                    <span>${a.kpi?.name ? `[${a.kpi.name}] ` : ''}${a.message}</span>\n                  </li>\n                `\n              )}\n        </ul>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,52 @@
+import { PageView } from '@operato/shell';
+import './components/kpi-map-panel';
+import './components/kpi-left-panel';
+import './components/kpi-region-popup';
+export declare class KpiDashboardMapPage extends PageView {
+    static styles: import("lit").CSSResult[];
+    selectedCategory: string;
+    selectedPeriod: string;
+    startYearMonth: string;
+    endYearMonth: string;
+    selectedSectorType: string;
+    selectedBuildingUsage: string;
+    currentZoom: number;
+    sigunguData: any[];
+    private static readonly SIGUNGU_ZOOM_THRESHOLD;
+    nationalData: any;
+    seoulData: any;
+    mapData: any;
+    monthlyTrendData: any[];
+    totalKpiYStats: any[];
+    regionalKpiStats: any[];
+    selectedRegion: string | null;
+    selectedGeoGroup: string | null;
+    showRegionPopup: boolean;
+    connectedCallback(): void;
+    private initializeDefaultPeriod;
+    private setupKeyboardEvents;
+    fetchDashboardData(): Promise<void>;
+    fetchDashboardDataFallback(): Promise<void>;
+    private generateMapDataFromKpiValues;
+    private generateMapDataFromStatistics;
+    private generateMapDataFromRegionalStats;
+    private static readonly SIGUNGU_MAP;
+    private fetchSigunguData;
+    private static readonly GEO_TO_METRO;
+    private calculateChangeRate;
+    private generateSigunguMapData;
+    private onZoomChanged;
+    private static readonly METRO_BOUNDS;
+    private focusMapOnRegion;
+    private downloadExcel;
+    private onRegionClick;
+    private closeRegionPopup;
+    private fetchRegionData;
+    get context(): {
+        title: string;
+        description: string;
+    };
+    private _onSectorTypeChange;
+    private _onBuildingUsageChange;
+    render(): import("lit-html").TemplateResult<1>;
+}