@things-factory/kpi 10.1.248 → 10.1.249

package/dist-client/pages/kpi-statistic/kpi-statistic-editor-page.js

@@ -0,0 +1,655 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import gql from 'graphql-tag';
+let KpiStatisticEditorPage = class KpiStatisticEditorPage extends localize(i18next)(ScopedElementsMixin(PageView)) {
+    constructor() {
+        super(...arguments);
+        this.periodType = 'MONTH';
+        this.valueDate = '';
+        this.targetDate = ''; // 기준 날짜 (예: 2025-08-03)
+        this.kpis = [];
+        this.loading = false;
+        this.error = '';
+        this.editingCell = null;
+        this._existingStatistics = [];
+        // 통계 필드 정의
+        this.statisticFields = [
+            { name: 'count', label: 'Count', group: 'basic' },
+            { name: 'sum', label: 'Sum', group: 'basic' },
+            { name: 'range', label: 'Range', group: 'basic' },
+            { name: 'mean', label: 'Mean', group: 'central' },
+            { name: 'median', label: 'Median', group: 'central' },
+            { name: 'minimum', label: 'Min', group: 'range' },
+            { name: 'maximum', label: 'Max', group: 'range' },
+            { name: 'standardDeviation', label: 'Std Dev', group: 'dispersion' },
+            { name: 'variance', label: 'Variance', group: 'dispersion' },
+            { name: 'percentile25', label: 'P25', group: 'percentile' },
+            { name: 'percentile75', label: 'P75', group: 'percentile' },
+            { name: 'iqr', label: 'IQR', group: 'percentile' },
+            { name: 'lowerFence', label: 'Lower Fence', group: 'fence' },
+            { name: 'upperFence', label: 'Upper Fence', group: 'fence' }
+        ];
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        ScrollbarStyles,
+        css `
+      :host {         display: flex;
+        flex-direction: column;
+        padding: 20px;
+        overflow-x: auto;
+ }
+
+      .header {         display: flex;
+        gap: 16px;
+        align-items: center;
+        margin-bottom: 20px;
+        padding: 16px;
+        background: var(--md-sys-color-surface-container);
+        border-radius: 8px;
+ }
+
+      .controls {         display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+ }
+
+      .table-container {         flex: 1;
+        overflow: auto;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 8px;
+ }
+
+      table {         width: 100%;
+        border-collapse: collapse;
+        min-width: max-content;
+ }
+
+      th {         background: var(--md-sys-color-surface-container-low);
+        font-weight: 500;
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        min-width: 120px;
+        height: 60px;
+        vertical-align: middle;
+        text-align: center;
+ }
+
+      td {         padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        min-width: 120px;
+        height: 60px;
+        text-align: center;
+        vertical-align: middle;
+ }
+
+      .kpi-header {         position: sticky;
+        left: 0;
+        top: 0;
+        z-index: 3;
+        min-width: 200px;
+        text-align: left;
+ }
+
+      .field-header {         position: sticky;
+        left: 0;
+        top: 0;
+        z-index: 2;
+        min-width: 200px;
+        text-align: center;
+ }
+
+      .kpi-name {         position: sticky;
+        left: 0;
+        background: var(--md-sys-color-surface);
+        font-weight: 500;
+        min-width: 200px;
+        text-align: left;
+        z-index: 2;
+ }
+
+      tr:hover {         background: var(--md-sys-color-surface-container-high);
+ }
+
+      td.editable-cell {         cursor: pointer;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+ }
+
+      td.editable-cell:hover {         background: var(--md-sys-color-primary-container);
+ }
+
+      td.highlighted-cell {         background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        font-weight: 500;
+ }
+
+      td.highlighted-cell:hover {         background: var(--md-sys-color-secondary-container);
+ }
+
+      td.disabled-cell {         background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: not-allowed;
+ }
+
+      .value-input {         width: 100%;
+        text-align: center;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font-size: 12px;
+        padding: 2px;
+ }
+
+      .value-input:focus {         outline: 2px solid var(--md-sys-color-primary);
+        border-radius: 4px;
+ }
+
+      .period-badge {         font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: var(--md-sys-color-tertiary-container);
+        color: var(--md-sys-color-on-tertiary-container);
+        margin-left: 8px;
+ }
+
+      .loading {         display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 200px;
+        color: var(--md-sys-color-on-surface-variant);
+ }
+
+      .error {         color: var(--md-sys-color-error);
+        padding: 16px;
+        text-align: center;
+ }
+
+      .legend {         display: flex;
+        gap: 16px;
+        margin-top: 16px;
+        font-size: 12px;
+ }
+
+      .legend-item {         display: flex;
+        align-items: center;
+        gap: 4px;
+ }
+
+      .legend-color {         width: 16px;
+        height: 16px;
+        border-radius: 2px;
+ }
+
+      .field-group {         display: flex;
+        flex-direction: column;
+        gap: 4px;
+ }
+
+      .field-name {         font-size: 10px;
+        color: var(--md-sys-color-on-surface-variant);
+        font-weight: 500;
+ }
+
+      .field-value {         font-size: 12px;
+        font-weight: 500;
+ }
+    `
+    ]; }
+    get context() {
+        return { title: i18next.t('title.kpi statistic editor'),
+            actions: [
+                { title: i18next.t('button.save'),
+                    action: this._saveStatistics.bind(this),
+                    ...CommonButtonStyles.save
+                },
+                { title: i18next.t('button.cancel'),
+                    action: this._cancel.bind(this),
+                    ...CommonButtonStyles.cancel
+                }
+            ]
+        };
+    }
+    render() {
+        if (this.loading) {
+            return html `
+        <div class="loading">
+          <md-icon>hourglass_empty</md-icon>
+          <span>데이터를 불러오는 중...</span>
+        </div>
+      `;
+        }
+        if (this.error) {
+            return html `
+        <div class="error">
+          <md-icon>error</md-icon>
+          <span>${this.error}</span>
+        </div>
+      `;
+        }
+        return html `
+      <div class="header">
+        <div class="controls">
+          <md-outlined-text-field
+            label="기간 유형"
+            .value=${this.periodType}
+            @input=${(e) => this._onPeriodChange(e.target.value)}
+            style="width: 120px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="기준 날짜"
+            type="date"
+            .value=${this.targetDate}
+            @input=${(e) => this._onTargetDateChange(e.target.value)}
+            style="width: 150px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="값 날짜"
+            .value=${this.valueDate}
+            @input=${(e) => (this.valueDate = e.target.value)}
+            style="width: 150px;"
+            readonly
+          ></md-outlined-text-field>
+
+          <md-elevated-button @click=${this._loadData}>
+            <md-icon slot="icon">refresh</md-icon>
+            새로고침
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th class="kpi-header">KPI명</th>
+              ${this.statisticFields.map(field => html `
+                  <th class="field-header">
+                    <div class="field-group">
+                      <div class="field-name">${field.label}</div>
+                      <div class="field-value">${field.name}</div>
+                    </div>
+                  </th>
+                `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.kpis.map(kpi => html `
+                <tr>
+                  <td class="kpi-name">
+                    ${kpi.kpi.name}
+                    <span class="period-badge">${kpi.periodType}</span>
+                  </td>
+                  ${this.statisticFields.map(field => html `
+                      <td
+                        class=${this._getCellClass(kpi, field.name)}
+                        @click=${() => this._startEdit(kpi.kpi.id, field.name)}
+                      >
+                        ${this._renderCellContent(kpi, field.name)}
+                      </td>
+                    `)}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="legend">
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-primary-container);"></div>
+          <span>편집 가능</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-secondary-container);"></div>
+          <span>하이라이트 (중요 필드)</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: var(--md-sys-color-surface-container);"></div>
+          <span>편집 불가</span>
+        </div>
+      </div>
+    `;
+    }
+    _getCellClass(kpi, fieldName) {
+        const isEditable = this._isFieldEditable(fieldName);
+        const isHighlighted = this._isFieldHighlighted(fieldName);
+        if (!isEditable) {
+            return 'disabled-cell';
+        }
+        if (isHighlighted) {
+            return 'highlighted-cell';
+        }
+        return 'editable-cell';
+    }
+    _isFieldEditable(fieldName) {
+        return true;
+    }
+    _isFieldHighlighted(fieldName) {
+        const importantFields = ['count', 'mean', 'median', 'minimum', 'maximum', 'standardDeviation'];
+        return importantFields.includes(fieldName);
+    }
+    _renderCellContent(kpi, fieldName) {
+        const isEditing = this.editingCell?.kpi?.id === kpi.kpi.id && this.editingCell?.field === fieldName;
+        const value = kpi.statistics[fieldName];
+        if (isEditing) {
+            return html `
+        <input
+          class="value-input"
+          type="number"
+          step="0.01"
+          .value=${(value || '').toString()}
+          @blur=${(e) => this._finishEdit(kpi.kpi.id, fieldName, parseFloat(e.target.value) || null)}
+          @keydown=${(e) => e.key === 'Enter' && e.target.blur()}
+          autofocus
+        />
+      `;
+        }
+        return html `
+      <span style="color: ${value !== null && value !== undefined ? 'inherit' : '#999'};">
+        ${value !== null && value !== undefined ? value.toLocaleString() : '클릭하여 입력'}
+      </span>
+    `;
+    }
+    _startEdit(kpiId, fieldName) {
+        this.editingCell = { kpi: { id: kpiId }, field: fieldName };
+    }
+    _finishEdit(kpiId, fieldName, value) {
+        const kpi = this.kpis.find(k => k.kpi.id === kpiId);
+        if (kpi) {
+            const originalValue = this._findExistingStatistic(kpiId)?.[fieldName];
+            const isChanged = originalValue !== value;
+            kpi.statistics[fieldName] = value;
+            kpi.statistics.isDirty = isChanged;
+        }
+        this.editingCell = null;
+    }
+    async _loadData() {
+        if (!this.valueDate) {
+            this.error = '값 날짜를 입력해주세요.';
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try { // KPI 목록 조회
+            const kpisResponse = await client.query({ query: gql `
+          query ($filters: [Filter!]) {             kpis(filters: $filters) {               items {                 id
+                name
+                periodType
+                active
+                category: parent {                   id
+                  name
+ }
+ }
+              total
+ }
+ }
+        `,
+                variables: { filters: [{ name: 'active', operator: 'eq', value: true }]
+                }
+            });
+            // 기존 KPI Statistic 데이터 조회
+            const statisticsResponse = await client.query({ query: gql `
+          query ($filters: [Filter!]) {             kpiStatistics(filters: $filters) {               items {                 id
+                kpi {                   id
+                  name
+ }
+                valueDate
+                periodType
+                count
+                sum
+                range
+                mean
+                median
+                minimum
+                maximum
+                standardDeviation
+                variance
+                percentile25
+                percentile75
+                iqr
+                lowerFence
+                upperFence
+                additionalStatistics
+                metadata
+ }
+              total
+ }
+ }
+        `,
+                variables: { filters: [
+                        { name: 'valueDate', operator: 'eq', value: this.valueDate },
+                        { name: 'periodType', operator: 'eq', value: this.periodType }
+                    ]
+                }
+            });
+            // KPI 목록을 기준으로 데이터 구성 (카테고리별로 필터링)
+            console.log('KPI 원본 데이터:', kpisResponse.data.kpis.items);
+            const filteredKpis = kpisResponse.data.kpis.items;
+            console.log('모든 KPI 포함:', filteredKpis);
+            console.log('필터링된 KPI:', filteredKpis);
+            this.kpis = filteredKpis.map((kpi) => ({ kpi: kpi,
+                valueDate: this.valueDate,
+                periodType: this.periodType,
+                statistics: { count: null,
+                    sum: null,
+                    range: null,
+                    mean: null,
+                    median: null,
+                    minimum: null,
+                    maximum: null,
+                    standardDeviation: null,
+                    variance: null,
+                    percentile25: null,
+                    percentile75: null,
+                    iqr: null,
+                    lowerFence: null,
+                    upperFence: null,
+                    isDirty: false
+                }
+            }));
+            // 기존 KPI Statistic 데이터 저장
+            this._existingStatistics = statisticsResponse.data.kpiStatistics.items;
+            console.log('기존 통계 데이터:', this._existingStatistics);
+            // 기존 통계 데이터를 해당 KPI에 매핑
+            statisticsResponse.data.kpiStatistics.items.forEach((statistic) => {
+                const kpi = this.kpis.find(k => k.kpi.id === statistic.kpi.id); // KPI ID로 매칭
+                console.log(`통계 데이터 매핑: statistic.kpi.id=${statistic.kpi.id}, 찾은 KPI:`, kpi?.kpi.name || '없음');
+                if (kpi) {
+                    kpi.statistics = { count: statistic.count,
+                        sum: statistic.sum,
+                        range: statistic.range,
+                        mean: statistic.mean,
+                        median: statistic.median,
+                        minimum: statistic.minimum,
+                        maximum: statistic.maximum,
+                        standardDeviation: statistic.standardDeviation,
+                        variance: statistic.variance,
+                        percentile25: statistic.percentile25,
+                        percentile75: statistic.percentile75,
+                        iqr: statistic.iqr,
+                        lowerFence: statistic.lowerFence,
+                        upperFence: statistic.upperFence,
+                        isDirty: false
+                    };
+                }
+            });
+            console.log('KPI 총 개수:', kpisResponse.data.kpis.total);
+            console.log('KPI 목록:', kpisResponse.data.kpis.items);
+            console.log('기존 통계 데이터:', this._existingStatistics);
+            console.log('구성된 KPI 통계 데이터:', this.kpis);
+            console.log('최종 KPI 배열 길이:', this.kpis.length);
+            this.requestUpdate();
+        }
+        catch (error) {
+            console.error('데이터 로드 중 오류:', error);
+            this.error = '데이터를 불러오는 중 오류가 발생했습니다.';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async _saveStatistics() {
+        try {
+            const patches = [];
+            this.kpis.forEach(kpi => {
+                if (kpi.statistics.isDirty) {
+                    const existingStatistic = this._findExistingStatistic(kpi.kpi.id);
+                    if (existingStatistic) { // 기존 데이터 업데이트
+                        const { isDirty, ...statisticsWithoutDirty } = kpi.statistics;
+                        patches.push({ id: existingStatistic.id,
+                            ...statisticsWithoutDirty,
+                            cuFlag: 'M'
+                        });
+                    }
+                    else { // 새로운 데이터 생성
+                        const { isDirty, ...statisticsWithoutDirty } = kpi.statistics;
+                        patches.push({ kpi: { id: kpi.kpi.id
+                            },
+                            valueDate: kpi.valueDate,
+                            periodType: kpi.periodType,
+                            ...statisticsWithoutDirty,
+                            additionalStatistics: {},
+                            metadata: { calculationMethod: 'manual',
+                                lastCalculated: new Date(),
+                                dataCount: kpi.statistics.count || 0
+                            },
+                            cuFlag: '+'
+                        });
+                    }
+                }
+            });
+            if (patches.length === 0) {
+                notify({ message: '저장할 데이터가 없습니다.' });
+                return;
+            }
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [KpiStatisticPatch!]!) {             updateMultipleKpiStatistic(patches: $patches) {               id
+              kpi {                 id
+                name
+ }
+              valueDate
+              periodType
+ }
+ }
+        `,
+                variables: { patches }
+            });
+            if (!response.errors) { // 저장 후 dirty 상태 해제
+                this.kpis.forEach(kpi => {
+                    kpi.statistics.isDirty = false;
+                });
+                notify({ message: 'KPI 통계값이 성공적으로 저장되었습니다.' });
+                this.requestUpdate();
+            }
+        }
+        catch (error) {
+            console.error('저장 중 오류:', error);
+            notify({ message: '저장 중 오류가 발생했습니다.' });
+        }
+    }
+    _findExistingStatistic(kpiId) {
+        return this._existingStatistics?.find((s) => s.kpi === kpiId);
+    }
+    _onTargetDateChange(targetDate) {
+        this.targetDate = targetDate;
+        this._calculateDateRange();
+    }
+    _onPeriodChange(periodType) {
+        this.periodType = periodType;
+        this._calculateDateRange();
+    }
+    _calculateDateRange() {
+        if (!this.targetDate || !this.periodType)
+            return;
+        const target = new Date(this.targetDate);
+        let valueDate;
+        switch (this.periodType) {
+            case 'DAY':
+                valueDate = target.toISOString().split('T')[0];
+                break;
+            case 'WEEK':
+                // 해당 주의 월요일
+                const dayOfWeek = target.getDay();
+                const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+                const monday = new Date(target);
+                monday.setDate(target.getDate() - daysToMonday);
+                valueDate = monday.toISOString().split('T')[0];
+                break;
+            case 'MONTH':
+                valueDate = `${target.getFullYear()}-${String(target.getMonth() + 1).padStart(2, '0')}`;
+                break;
+            case 'QUARTER':
+                const quarter = Math.floor(target.getMonth() / 3) + 1;
+                valueDate = `${target.getFullYear()}-Q${quarter}`;
+                break;
+            case 'YEAR':
+                valueDate = target.getFullYear().toString();
+                break;
+            default:
+                valueDate = target.toISOString().split('T')[0];
+        }
+        this.valueDate = valueDate;
+    }
+    _cancel() {
+        this.editingCell = null;
+        this._loadData(); // 원본 데이터로 복원
+    }
+    async pageInitialized(lifecycle) {
+        if (!this.targetDate) {
+            this.targetDate = new Date().toLocaleDateString('sv-SE');
+        }
+        // 기간 유형에 따라 날짜 범위 계산
+        this._calculateDateRange();
+        await this._loadData();
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiStatisticEditorPage.prototype, "periodType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiStatisticEditorPage.prototype, "valueDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiStatisticEditorPage.prototype, "targetDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiStatisticEditorPage.prototype, "kpis", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], KpiStatisticEditorPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], KpiStatisticEditorPage.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiStatisticEditorPage.prototype, "editingCell", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiStatisticEditorPage.prototype, "_existingStatistics", void 0);
+KpiStatisticEditorPage = __decorate([
+    customElement('kpi-statistic-editor-page')
+], KpiStatisticEditorPage);
+export { KpiStatisticEditorPage };
+//# sourceMappingURL=kpi-statistic-editor-page.js.map