@things-factory/kpi 9.0.22 → 9.0.24

package/dist-client/pages/kpi-category/kpi-category-value-calculator.js

@@ -0,0 +1,256 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import gql from 'graphql-tag';
+// KpiPeriodType enum 정의 (서버와 동일하게)
+var KpiPeriodType;
+(function (KpiPeriodType) {
+    KpiPeriodType["DAY"] = "DAY";
+    KpiPeriodType["WEEK"] = "WEEK";
+    KpiPeriodType["MONTH"] = "MONTH";
+    KpiPeriodType["QUARTER"] = "QUARTER";
+    KpiPeriodType["YEAR"] = "YEAR";
+    KpiPeriodType["RANGE"] = "RANGE";
+    KpiPeriodType["ALLTIME"] = "ALLTIME";
+})(KpiPeriodType || (KpiPeriodType = {}));
+// periodType에 따른 마지막 일자 계산 함수
+function getLastValueDate(periodType = KpiPeriodType.DAY) {
+    const now = new Date();
+    switch (periodType) {
+        case KpiPeriodType.DAY: {
+            const d = new Date(now);
+            d.setDate(d.getDate() - 1);
+            return d.toISOString().slice(0, 10);
+        }
+        case KpiPeriodType.MONTH: {
+            const d = new Date(now);
+            d.setMonth(d.getMonth() - 1);
+            return d.toISOString().slice(0, 7);
+        }
+        case KpiPeriodType.QUARTER: {
+            let year = now.getFullYear();
+            let quarter = Math.floor(now.getMonth() / 3);
+            if (quarter === 0) {
+                year -= 1;
+                quarter = 4;
+            }
+            return `${year}-Q${quarter}`;
+        }
+        case KpiPeriodType.WEEK: {
+            const d = new Date(now);
+            d.setDate(d.getDate() - 7);
+            const year = d.getFullYear();
+            const week = getISOWeek(d);
+            return `${year}-W${week}`;
+        }
+        case KpiPeriodType.ALLTIME:
+            return 'ALLTIME';
+        default: {
+            const d = new Date(now);
+            d.setDate(d.getDate() - 1);
+            return d.toISOString().slice(0, 10);
+        }
+    }
+}
+// ISO 주차 계산 함수
+function getISOWeek(date) {
+    const tmp = new Date(date.getTime());
+    tmp.setHours(0, 0, 0, 0);
+    tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
+    const yearStart = new Date(tmp.getFullYear(), 0, 1);
+    const weekNo = Math.ceil(((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+    return weekNo;
+}
+let KpiCategoryValueCalculator = class KpiCategoryValueCalculator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.categoryId = '';
+        this.categoryName = '';
+        this.valueDate = getLastValueDate();
+        this.group = '';
+        this.result = null;
+        this.loading = false;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        padding: 20px;
+        min-width: 400px;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 15px;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
+
+      input,
+      select {
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+
+      .result {
+        margin-top: 20px;
+        padding: 15px;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+      }
+
+      .result-value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #2196f3;
+      }
+
+      .kpi-values {
+        margin-top: 10px;
+      }
+
+      .kpi-value-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 0;
+        border-bottom: 1px solid #eee;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <div class="container">
+        <h3>${this.categoryName} - KPI 값 계산</h3>
+
+        <div class="form-group">
+          <label>계산 기준일</label>
+          <input type="date" .value=${this.valueDate} @input=${e => (this.valueDate = e.target.value)} />
+        </div>
+
+        <div class="form-group">
+          <label>그룹</label>
+          <input
+            type="text"
+            placeholder="그룹명 (선택사항)"
+            .value=${this.group}
+            @input=${e => (this.group = e.target.value)}
+          />
+        </div>
+
+        <button
+          @click=${this.calculateValue}
+          ?disabled=${this.loading}
+          style="width: 100%; padding: 10px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          ${this.loading ? '계산 중...' : '계산하기'}
+        </button>
+
+        ${this.result
+            ? html `
+              <div class="result">
+                <div class="result-value">
+                  계산 결과: ${this.result.value !== null ? this.result.value.toFixed(2) : 'N/A'}
+                </div>
+                ${this.result.kpiValues && this.result.kpiValues.length > 0
+                ? html `
+                      <div class="kpi-values">
+                        <h4>개별 KPI 값:</h4>
+                        ${this.result.kpiValues.map(item => html `
+                            <div class="kpi-value-item">
+                              <span>KPI ID: ${item.kpiId}</span>
+                              <span>${item.value !== null ? item.value.toFixed(2) : 'N/A'}</span>
+                            </div>
+                          `)}
+                      </div>
+                    `
+                : ''}
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    async calculateValue() {
+        if (!this.categoryId)
+            return;
+        this.loading = true;
+        try {
+            const response = await client.query({
+                query: gql `
+          query ($categoryId: String!, $valueDate: String, $group: String) {
+            calculateKpiValue(categoryId: $categoryId, valueDate: $valueDate, group: $group) {
+              value
+              valueDate
+              group
+              kpiValues {
+                kpiId
+                value
+              }
+            }
+          }
+        `,
+                variables: {
+                    categoryId: this.categoryId,
+                    valueDate: this.valueDate || null,
+                    group: this.group || null
+                }
+            });
+            if (!response.errors) {
+                this.result = response.data.calculateKpiValue;
+            }
+        }
+        catch (error) {
+            console.error('KPI 값 계산 중 오류:', error);
+            notify({
+                message: 'KPI 값 계산 중 오류가 발생했습니다.'
+            });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "categoryId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "categoryName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "valueDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "group", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "result", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiCategoryValueCalculator.prototype, "loading", void 0);
+KpiCategoryValueCalculator = __decorate([
+    customElement('kpi-category-value-calculator')
+], KpiCategoryValueCalculator);
+export { KpiCategoryValueCalculator };
+//# sourceMappingURL=kpi-category-value-calculator.js.map

package/dist-client/pages/kpi-category/kpi-category-value-calculator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-category-value-calculator.js","sourceRoot":"","sources":["../../../client/pages/kpi-category/kpi-category-value-calculator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\n\n// KpiPeriodType enum 정의 (서버와 동일하게)\nenum KpiPeriodType {\n  DAY = 'DAY',\n  WEEK = 'WEEK',\n  MONTH = 'MONTH',\n  QUARTER = 'QUARTER',\n  YEAR = 'YEAR',\n  RANGE = 'RANGE',\n  ALLTIME = 'ALLTIME'\n}\n\n// periodType에 따른 마지막 일자 계산 함수\nfunction getLastValueDate(periodType: KpiPeriodType = KpiPeriodType.DAY): string {\n  const now = new Date()\n\n  switch (periodType) {\n    case KpiPeriodType.DAY: {\n      const d = new Date(now)\n      d.setDate(d.getDate() - 1)\n      return d.toISOString().slice(0, 10)\n    }\n    case KpiPeriodType.MONTH: {\n      const d = new Date(now)\n      d.setMonth(d.getMonth() - 1)\n      return d.toISOString().slice(0, 7)\n    }\n    case KpiPeriodType.QUARTER: {\n      let year = now.getFullYear()\n      let quarter = Math.floor(now.getMonth() / 3)\n      if (quarter === 0) {\n        year -= 1\n        quarter = 4\n      }\n      return `${year}-Q${quarter}`\n    }\n    case KpiPeriodType.WEEK: {\n      const d = new Date(now)\n      d.setDate(d.getDate() - 7)\n      const year = d.getFullYear()\n      const week = getISOWeek(d)\n      return `${year}-W${week}`\n    }\n    case KpiPeriodType.ALLTIME:\n      return 'ALLTIME'\n    default: {\n      const d = new Date(now)\n      d.setDate(d.getDate() - 1)\n      return d.toISOString().slice(0, 10)\n    }\n  }\n}\n\n// ISO 주차 계산 함수\nfunction getISOWeek(date: Date): number {\n  const tmp = new Date(date.getTime())\n  tmp.setHours(0, 0, 0, 0)\n  tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7))\n  const yearStart = new Date(tmp.getFullYear(), 0, 1)\n  const weekNo = Math.ceil(((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)\n  return weekNo\n}\n\n@customElement('kpi-category-value-calculator')\nexport class KpiCategoryValueCalculator extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 20px;\n        min-width: 400px;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      .form-group {\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 15px;\n      }\n\n      label {\n        display: block;\n        margin-bottom: 5px;\n        font-weight: bold;\n      }\n\n      input,\n      select {\n        padding: 8px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n      }\n\n      .result {\n        margin-top: 20px;\n        padding: 15px;\n        background-color: #f5f5f5;\n        border-radius: 4px;\n      }\n\n      .result-value {\n        font-size: 18px;\n        font-weight: bold;\n        color: #2196f3;\n      }\n\n      .kpi-values {\n        margin-top: 10px;\n      }\n\n      .kpi-value-item {\n        display: flex;\n        justify-content: space-between;\n        padding: 5px 0;\n        border-bottom: 1px solid #eee;\n      }\n    `\n  ]\n\n  @property({ type: String }) categoryId = ''\n  @property({ type: String }) categoryName = ''\n  @state() valueDate = getLastValueDate()\n  @state() group = ''\n  @state() result: any = null\n  @state() loading = false\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <h3>${this.categoryName} - KPI 값 계산</h3>\n\n        <div class=\"form-group\">\n          <label>계산 기준일</label>\n          <input type=\"date\" .value=${this.valueDate} @input=${e => (this.valueDate = e.target.value)} />\n        </div>\n\n        <div class=\"form-group\">\n          <label>그룹</label>\n          <input\n            type=\"text\"\n            placeholder=\"그룹명 (선택사항)\"\n            .value=${this.group}\n            @input=${e => (this.group = e.target.value)}\n          />\n        </div>\n\n        <button\n          @click=${this.calculateValue}\n          ?disabled=${this.loading}\n          style=\"width: 100%; padding: 10px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer;\"\n        >\n          ${this.loading ? '계산 중...' : '계산하기'}\n        </button>\n\n        ${this.result\n          ? html`\n              <div class=\"result\">\n                <div class=\"result-value\">\n                  계산 결과: ${this.result.value !== null ? this.result.value.toFixed(2) : 'N/A'}\n                </div>\n                ${this.result.kpiValues && this.result.kpiValues.length > 0\n                  ? html`\n                      <div class=\"kpi-values\">\n                        <h4>개별 KPI 값:</h4>\n                        ${this.result.kpiValues.map(\n                          item => html`\n                            <div class=\"kpi-value-item\">\n                              <span>KPI ID: ${item.kpiId}</span>\n                              <span>${item.value !== null ? item.value.toFixed(2) : 'N/A'}</span>\n                            </div>\n                          `\n                        )}\n                      </div>\n                    `\n                  : ''}\n              </div>\n            `\n          : ''}\n      </div>\n    `\n  }\n\n  async calculateValue() {\n    if (!this.categoryId) return\n\n    this.loading = true\n    try {\n      const response = await client.query({\n        query: gql`\n          query ($categoryId: String!, $valueDate: String, $group: String) {\n            calculateKpiValue(categoryId: $categoryId, valueDate: $valueDate, group: $group) {\n              value\n              valueDate\n              group\n              kpiValues {\n                kpiId\n                value\n              }\n            }\n          }\n        `,\n        variables: {\n          categoryId: this.categoryId,\n          valueDate: this.valueDate || null,\n          group: this.group || null\n        }\n      })\n\n      if (!response.errors) {\n        this.result = response.data.calculateKpiValue\n      }\n    } catch (error) {\n      console.error('KPI 값 계산 중 오류:', error)\n      notify({\n        message: 'KPI 값 계산 중 오류가 발생했습니다.'\n      })\n    } finally {\n      this.loading = false\n    }\n  }\n}\n"]}

package/dist-client/pages/kpi-category-value/kpi-category-value-list-page.d.ts

@@ -0,0 +1,63 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-record-creator.js';
+import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
+declare const KpiCategoryValueListPage_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class KpiCategoryValueListPage extends KpiCategoryValueListPage_base {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    mode: 'CARD' | 'GRID' | 'LIST';
+    private grist;
+    get context(): {
+        title: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        help: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
+        exportable: {
+            name: string;
+            data: () => Promise<never[]>;
+        };
+        importable: {
+            handler: (records: any) => Promise<void>;
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+    _deleteKpiCategoryValue(): Promise<void>;
+    _updateKpiCategoryValue(): Promise<void>;
+    _calculateKpiCategoryValue(kpiCategoryValue: any): Promise<void>;
+    creationCallback(kpiCategoryValue: any): Promise<void>;
+    exportHandler(): Promise<never[]>;
+    importHandler(records: any): Promise<void>;
+}
+export {};