@things-factory/kpi 10.1.247 → 10.1.248

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

@@ -1,655 +0,0 @@
-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