@things-factory/kpi 9.0.28 → 9.0.29

package/client/pages/kpi-statistic/kpi-statistic-editor-page.ts

@@ -0,0 +1,761 @@
+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, store } 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 { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+
+interface KpiStatisticData {
+  kpi: {
+    id: string
+    name: string
+  }
+  valueDate: string
+  periodType: string
+  statistics: {
+    count?: number
+    sum?: number
+    range?: number
+    mean?: number
+    median?: number
+    minimum?: number
+    maximum?: number
+    standardDeviation?: number
+    variance?: number
+    percentile25?: number
+    percentile75?: number
+    iqr?: number
+    lowerFence?: number
+    upperFence?: number
+    isDirty?: boolean
+  }
+}
+
+interface EditorCell {
+  field: string
+  value: number | null
+  isEditable: boolean
+  isHighlighted: boolean
+}
+
+@customElement('kpi-statistic-editor-page')
+export class KpiStatisticEditorPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static 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-high);
+      }
+
+      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-high);
+      }
+
+      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;
+      }
+    `
+  ]
+
+  @property({ type: String }) periodType: string = 'MONTH'
+  @property({ type: String }) valueDate: string = ''
+  @property({ type: String }) targetDate: string = '' // 기준 날짜 (예: 2025-08-03)
+
+  @state() private kpis: KpiStatisticData[] = []
+  @state() private loading: boolean = false
+  @state() private error: string = ''
+  @state() private editingCell: { kpi: { id: string }; field: string } | null = null
+  @state() private _existingStatistics: any[] = []
+
+  // 통계 필드 정의
+  private readonly 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' }
+  ]
+
+  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: any) => this._onPeriodChange(e.target.value)}
+            style="width: 120px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="기준 날짜"
+            type="date"
+            .value=${this.targetDate}
+            @input=${(e: any) => this._onTargetDateChange(e.target.value)}
+            style="width: 150px;"
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="값 날짜"
+            .value=${this.valueDate}
+            @input=${(e: any) => (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>
+    `
+  }
+
+  private _getCellClass(kpi: KpiStatisticData, fieldName: string): string {
+    const isEditable = this._isFieldEditable(fieldName)
+    const isHighlighted = this._isFieldHighlighted(fieldName)
+
+    if (!isEditable) {
+      return 'disabled-cell'
+    }
+    if (isHighlighted) {
+      return 'highlighted-cell'
+    }
+    return 'editable-cell'
+  }
+
+  private _isFieldEditable(fieldName: string): boolean {
+    // 모든 필드를 편집 가능하게 설정 (필요에 따라 제한 가능)
+    return true
+  }
+
+  private _isFieldHighlighted(fieldName: string): boolean {
+    // 중요 필드들을 하이라이트
+    const importantFields = ['count', 'mean', 'median', 'minimum', 'maximum', 'standardDeviation']
+    return importantFields.includes(fieldName)
+  }
+
+  private _renderCellContent(kpi: KpiStatisticData, fieldName: string) {
+    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: any) => this._finishEdit(kpi.kpi.id, fieldName, parseFloat(e.target.value) || null)}
+          @keydown=${(e: any) => 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>
+    `
+  }
+
+  private _startEdit(kpiId: string, fieldName: string) {
+    this.editingCell = { kpi: { id: kpiId }, field: fieldName }
+  }
+
+  private _finishEdit(kpiId: string, fieldName: string, value: number | null) {
+    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
+  }
+
+  private 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
+                categoryId
+                category {
+                  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: any) => ({
+        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: any) => {
+        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
+    }
+  }
+
+  private async _saveStatistics() {
+    try {
+      const patches: any[] = []
+
+      this.kpis.forEach(kpi => {
+        // dirty 상태인 데이터만 처리
+        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: '저장 중 오류가 발생했습니다.' })
+    }
+  }
+
+  private _findExistingStatistic(kpiId: string) {
+    return this._existingStatistics?.find((s: any) => s.kpi === kpiId)
+  }
+
+  private _onTargetDateChange(targetDate: string) {
+    this.targetDate = targetDate
+    this._calculateDateRange()
+  }
+
+  private _onPeriodChange(periodType: string) {
+    this.periodType = periodType
+    this._calculateDateRange()
+  }
+
+  private _calculateDateRange() {
+    if (!this.targetDate || !this.periodType) return
+
+    const target = new Date(this.targetDate)
+    let valueDate: string
+
+    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
+  }
+
+  private _cancel() {
+    this.editingCell = null
+    this._loadData() // 원본 데이터로 복원
+  }
+
+  async pageInitialized(lifecycle: any) {
+    // 기본값 설정 - 현재 날짜를 기준으로
+    if (!this.targetDate) {
+      this.targetDate = new Date().toLocaleDateString('sv-SE')
+    }
+
+    // 기간 유형에 따라 날짜 범위 계산
+    this._calculateDateRange()
+
+    await this._loadData()
+  }
+}