@things-factory/kpi 9.0.13 → 9.0.15

package/client/pages/kpi/kpi-grade-editor.ts

@@ -0,0 +1,294 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/select/outlined-select.js'
+import '@material/web/select/select-option.js'
+import '@material/web/icon/icon.js'
+
+import { LitElement, 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 { notify } from '@operato/layout'
+import gql from 'graphql-tag'
+import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+
+// KPI 등급 타입 정의 (서버와 동일한 구조)
+interface KpiGrade {
+  name: string
+  minValue: number
+  maxValue: number
+  score?: number
+  color?: string
+  description?: string
+}
+
+type KpiGrades = KpiGrade[]
+
+@customElement('kpi-grade-editor')
+export class KpiGradeEditor extends ScopedElementsMixin(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface, #f4f6fa);
+      }
+
+      .grade-list {
+        flex: 1;
+        margin-bottom: 20px;
+        overflow-y: auto;
+      }
+
+      .grade-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        background: #f9f9f9;
+      }
+
+      .grade-item:hover {
+        background: #f0f0f0;
+      }
+
+      .grade-inputs {
+        display: flex;
+        gap: 10px;
+        flex: 1;
+      }
+
+      .grade-inputs md-outlined-text-field {
+        flex: 1;
+      }
+
+      .grade-actions {
+        display: flex;
+        gap: 5px;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) kpi: any
+  @state() grades: KpiGrades = []
+  @state() isDirty = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (this.kpi?.grades) {
+      this.grades = [...this.kpi.grades]
+    }
+  }
+
+  render() {
+    return html`
+      <div class="grade-list">${this.grades.map((grade, index) => this._renderGradeItem(grade, index))}</div>
+
+      <div class="footer">
+        <button type="button" @click=${this._addGrade}><md-icon>add</md-icon>등급 추가</button>
+        <div filler></div>
+        <button type="button" @click=${this._cancel}><md-icon>cancel</md-icon>취소</button>
+        <button type="button" @click=${this._save} ?disabled=${!this.isDirty} done><md-icon>save</md-icon>저장</button>
+      </div>
+    `
+  }
+
+  _renderGradeItem(grade: KpiGrade, index: number) {
+    return html`
+      <div class="grade-item">
+        <div class="grade-inputs">
+          <md-outlined-text-field
+            label="등급명"
+            value=${grade.name}
+            @input=${(e: any) => this._updateGrade(index, 'name', e.target.value)}
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="최소값"
+            type="number"
+            value=${grade.minValue}
+            @input=${(e: any) => this._updateGrade(index, 'minValue', parseFloat(e.target.value))}
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="최대값"
+            type="number"
+            value=${grade.maxValue}
+            @input=${(e: any) => this._updateGrade(index, 'maxValue', parseFloat(e.target.value))}
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="점수"
+            type="number"
+            value=${grade.score || ''}
+            @input=${(e: any) => this._updateGrade(index, 'score', parseFloat(e.target.value))}
+          ></md-outlined-text-field>
+
+          <md-outlined-text-field
+            label="색상"
+            value=${grade.color || ''}
+            @input=${(e: any) => this._updateGrade(index, 'color', e.target.value)}
+          ></md-outlined-text-field>
+        </div>
+
+        <div class="grade-actions">
+          <md-icon-button @click=${() => this._removeGrade(index)}>
+            <md-icon>delete</md-icon>
+          </md-icon-button>
+        </div>
+      </div>
+    `
+  }
+
+  _updateGrade(index: number, field: keyof KpiGrade, value: any) {
+    this.grades[index] = { ...this.grades[index], [field]: value }
+    this.isDirty = true
+    this.requestUpdate()
+  }
+
+  _addGrade() {
+    const newGrade: KpiGrade = {
+      name: '',
+      minValue: 0,
+      maxValue: 0,
+      score: 0,
+      color: '#4caf50',
+      description: ''
+    }
+    this.grades.push(newGrade)
+    this.isDirty = true
+    this.requestUpdate()
+  }
+
+  _removeGrade(index: number) {
+    this.grades.splice(index, 1)
+    this.isDirty = true
+    this.requestUpdate()
+  }
+
+  _loadTemplate(template: string) {
+    switch (template) {
+      case '5grade':
+        this.grades = [
+          { name: 'A', minValue: 0, maxValue: 1.5, score: 95, color: '#4caf50', description: '우수' },
+          { name: 'B', minValue: 1.5, maxValue: 2.5, score: 85, color: '#ff9800', description: '양호' },
+          { name: 'C', minValue: 2.5, maxValue: 3.5, score: 75, color: '#ffc107', description: '보통' },
+          { name: 'D', minValue: 3.5, maxValue: 4.5, score: 65, color: '#ff9800', description: '미흡' },
+          { name: 'E', minValue: 4.5, maxValue: 999, score: 55, color: '#f44336', description: '불량' }
+        ]
+        break
+      case '3grade':
+        this.grades = [
+          { name: '우수', minValue: 0, maxValue: 1.5, score: 95, color: '#4caf50', description: '목표 달성' },
+          { name: '양호', minValue: 1.5, maxValue: 2.5, score: 85, color: '#ff9800', description: '기준 달성' },
+          { name: '미흡', minValue: 2.5, maxValue: 999, score: 75, color: '#f44336', description: '개선 필요' }
+        ]
+        break
+      case 'continuous':
+        this.grades = [
+          { name: '0.999999', minValue: 0, maxValue: 0.025, score: 0.999999, color: '#4caf50' },
+          { name: '0.944189368', minValue: 0.025, maxValue: 0.05, score: 0.944189368, color: '#4caf50' },
+          { name: '0.888379735', minValue: 0.05, maxValue: 0.075, score: 0.888379735, color: '#4caf50' }
+        ]
+        break
+      case 'clear':
+        this.grades = []
+        break
+    }
+    this.isDirty = true
+    this.requestUpdate()
+  }
+
+  async _save() {
+    try {
+      // 등급 유효성 검사
+      if (!this._validateGrades()) {
+        return
+      }
+
+      // 정렬 (minValue 기준)
+      this.grades.sort((a, b) => a.minValue - b.minValue)
+
+      this.dispatchEvent(
+        new CustomEvent('grades-updated', {
+          detail: {
+            kpiId: this.kpi.id,
+            grades: this.grades
+          }
+        })
+      )
+
+      this.isDirty = false
+    } catch (error) {
+      notify({
+        message: '등급 저장 중 오류가 발생했습니다.'
+      })
+    }
+  }
+
+  _validateGrades(): boolean {
+    // 최소 1개 등급 필요
+    if (this.grades.length === 0) {
+      notify({
+        message: '최소 1개 이상의 등급을 설정해야 합니다.'
+      })
+      return false
+    }
+
+    // 등급명 중복 체크
+    const names = this.grades.map(g => g.name)
+    const uniqueNames = new Set(names)
+    if (names.length !== uniqueNames.size) {
+      notify({
+        message: '등급명이 중복되었습니다.'
+      })
+      return false
+    }
+
+    // 값 범위 체크
+    for (let i = 0; i < this.grades.length; i++) {
+      const grade = this.grades[i]
+      if (grade.minValue >= grade.maxValue) {
+        notify({
+          message: `등급 "${grade.name}"의 최소값이 최대값보다 크거나 같습니다.`
+        })
+        return false
+      }
+
+      // 연속성 체크
+      if (i > 0) {
+        const prevGrade = this.grades[i - 1]
+        if (prevGrade.maxValue !== grade.minValue) {
+          notify({
+            message: `등급 "${prevGrade.name}"과 "${grade.name}" 사이에 간격이 있습니다.`
+          })
+          return false
+        }
+      }
+    }
+
+    return true
+  }
+
+  _cancel() {
+    // 팝업 닫기
+    const popup = this.closest('ox-popup') as any
+    if (popup && popup.close) {
+      popup.close()
+    }
+  }
+}

package/client/pages/kpi/kpi-list-page.ts

@@ -20,6 +20,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import gql from 'graphql-tag'
 
 import { KpiImporter } from './kpi-importer'
+import { KpiGradeEditor } from './kpi-grade-editor'
 
 @customElement('kpi-list-page')
 export class KpiListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
@@ -50,7 +51,8 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
 
   static get scopedElements() {
     return {
-      'kpi-importer': KpiImporter
+      'kpi-importer': KpiImporter,
+      'kpi-grade-editor': KpiGradeEditor
     }
   }
 
@@ -204,6 +206,26 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           width: 200
         },
         { type: 'string', name: 'formula', header: '산식', record: { editable: true }, width: 200 },
+        {
+          type: 'string',
+          name: 'grades',
+          header: '등급 설정',
+          record: {
+            editable: false,
+            renderer: (v, c, r) => {
+              if (r.grades && r.grades.length > 0) {
+                return html`<span style="color: #4caf50; cursor: pointer;" @click=${() => this._editGrades(r)}>
+                  ${r.grades.length}개 등급 설정됨
+                </span>`
+              } else {
+                return html`<span style="color: #999; cursor: pointer;" @click=${() => this._editGrades(r)}>
+                  등급 설정 없음
+                </span>`
+              }
+            }
+          },
+          width: 150
+        },
         {
           type: 'checkbox',
           name: 'active',
@@ -272,6 +294,7 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
               name
               description
               active
+              grades
               category {
                 id
                 name
@@ -450,4 +473,49 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
       this.grist.fetch()
     }
   }
+
+  async _editGrades(kpi: any) {
+    const popup = await openPopup(
+      html`
+        <kpi-grade-editor .kpi=${kpi} @grades-updated=${(e: any) => this._onGradesUpdated(e.detail)}></kpi-grade-editor>
+      `,
+      {
+        title: `${kpi.name} - 등급 설정`,
+        size: 'large'
+      }
+    )
+  }
+
+  async _onGradesUpdated(detail: any) {
+    const { kpiId, grades } = detail
+
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $patch: KpiPatch!) {
+            updateKpi(id: $id, patch: $patch) {
+              id
+              name
+              grades
+            }
+          }
+        `,
+        variables: {
+          id: kpiId,
+          patch: { grades }
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+        notify({
+          message: '등급 설정이 성공적으로 업데이트되었습니다.'
+        })
+      }
+    } catch (error) {
+      notify({
+        message: '등급 설정 업데이트 중 오류가 발생했습니다.'
+      })
+    }
+  }
 }

package/client/pages/kpi/kpi-overview.ts

@@ -20,15 +20,7 @@ const GET_KPI_OVERVIEW = gql`
           description
           formula
           active
-          grades {
-            id
-            name
-            minValue
-            maxValue
-            score
-            color
-            description
-          }
+          grades
         }
       }
     }
@@ -246,11 +238,13 @@ export class KpiOverview extends PageView {
           <div style="font-size:1.5rem;font-weight:bold;margin-bottom:16px;">${kpi?.name || ''}</div>
           <div style="margin-bottom:16px;">${kpi?.formula ? html`<b>산식:</b> ${kpi.formula}` : ''}</div>
           <div .innerHTML=${marked(md)}></div>
-          ${kpi?.grades?.length
+          ${kpi?.grades && Array.isArray(kpi.grades) && kpi.grades.length > 0
             ? html`<div style="margin-top:32px;">
                 <b>등급 구간</b>
                 <ul>
-                  ${kpi.grades.map(g => html`<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`)}
+                  ${kpi.grades.map(
+                    (g: any) => html`<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`
+                  )}
                 </ul>
               </div>`
             : ''}

package/client/pages/kpi-dashboard/kpi-dashboard.ts

@@ -109,13 +109,7 @@ export class KpiDashboardPage extends PageView {
                   }
                   targetValue
                   unit
-                  grades {
-                    name
-                    minValue
-                    maxValue
-                    score
-                    color
-                  }
+                  grades
                   histories(limit: 1) {
                     version
                     updatedAt
@@ -234,14 +228,48 @@ export class KpiDashboardPage extends PageView {
                       <!-- 등급 시각화 -->
                       <div style="margin-top:8px;">
                         <b>등급:</b>
-                        ${(kpi.grades || []).map(
-                          g =>
-                            html`<span
-                              style="display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${g.color ??
-                              '#eee'};color:#222;font-size:0.95em;"
-                              >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span
-                            >`
-                        )}
+                        ${(() => {
+                          const grades = kpi.grades || []
+                          const kpiValue = kpi.value?.value
+
+                          if (grades.length > 5) {
+                            // 5개를 넘으면 현재 값에 해당하는 grade만 표시
+                            const currentGrade = grades.find(g => kpiValue >= g.minValue && kpiValue <= g.maxValue)
+                            if (currentGrade) {
+                              return html`<span
+                                style="display:inline-block;margin-right:8px;padding:4px 12px;border-radius:12px;background:${currentGrade.color ??
+                                '#3a3ad6'};color:white;font-size:1em;font-weight:bold;box-shadow:0 2px 8px rgba(58,58,214,0.3);border:2px solid ${currentGrade.color ??
+                                '#3a3ad6'};"
+                                >${currentGrade.name}(${currentGrade.minValue}~${currentGrade.maxValue}${kpi.unit ??
+                                ''},
+                                ${currentGrade.score ?? ''}점)</span
+                              >`
+                            } else {
+                              return html`<span style="color:#bbb;font-size:0.95em;">등급 없음</span>`
+                            }
+                          } else {
+                            // 5개 이하면 전체 리스트 표시하되 현재 등급은 강조
+                            return grades.map(g => {
+                              const isCurrentGrade = kpiValue >= g.minValue && kpiValue <= g.maxValue
+                              return html`<span
+                                style="display:inline-block;margin-right:8px;padding:${isCurrentGrade
+                                  ? '4px 12px'
+                                  : '2px 8px'};border-radius:${isCurrentGrade
+                                  ? '12px'
+                                  : '8px'};background:${isCurrentGrade
+                                  ? (g.color ?? '#3a3ad6')
+                                  : (g.color ?? '#eee')};color:${isCurrentGrade
+                                  ? 'white'
+                                  : '#222'};font-size:${isCurrentGrade ? '1em' : '0.95em'};font-weight:${isCurrentGrade
+                                  ? 'bold'
+                                  : 'normal'};box-shadow:${isCurrentGrade
+                                  ? '0 2px 8px rgba(58,58,214,0.3)'
+                                  : 'none'};border:${isCurrentGrade ? `2px solid ${g.color ?? '#3a3ad6'}` : 'none'};"
+                                >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span
+                              >`
+                            })
+                          }
+                        })()}
                       </div>
                       <!-- 최근 변경 이력(1건만) -->
                       <div style="margin-top:8px;font-size:0.95em;color:#888;">

package/client/pages/kpi-dashboard/kpi-performance-summary.ts

@@ -72,10 +72,7 @@ export class KpiPerformanceSummary extends LitElement {
                 id
                 name
                 description
-                value {
-                  value
-                  valueDate
-                }
+                value
                 targetValue
                 unit
               }
@@ -84,12 +81,22 @@ export class KpiPerformanceSummary extends LitElement {
           }
         `
       })
-      this.kpis = (response.data.kpis.items || []).map(kpi => ({
-        name: kpi.name,
-        value: kpi.value?.value ?? '-',
-        target: kpi.targetValue ?? '-',
-        unit: kpi.unit ?? ''
-      }))
+      this.kpis = (response.data.kpis.items || []).map(kpi => {
+        // value가 JSON 형태로 반환되므로 적절히 처리
+        let value = '-'
+        if (kpi.value && typeof kpi.value === 'object') {
+          value = kpi.value.value ?? kpi.value.latestValue ?? '-'
+        } else if (kpi.value) {
+          value = kpi.value
+        }
+
+        return {
+          name: kpi.name,
+          value: value,
+          target: kpi.targetValue ?? '-',
+          unit: kpi.unit ?? ''
+        }
+      })
     } catch (e) {
       this.error = 'KPI 데이터를 불러오지 못했습니다.'
     } finally {

package/client/pages/kpi-value/kpi-value-manual-entry-form.ts

@@ -102,6 +102,7 @@ export class KpiValueManualEntryForm extends LitElement {
           <div class="desc">입력방식: MANUAL, Source: MANUAL (자동 지정)</div>
         </div>
       </form>
+
       <div class="footer">
         <div filler></div>
         <button type="button" ?disabled=${this.loading} done @click=${this.save}><md-icon>save</md-icon>저장</button>

package/client/route.ts

@@ -28,10 +28,6 @@ export default function route(page: string) {
       import('./pages/kpi-value/kpi-value-manual-entry-page')
       return page
 
-    case 'kpi-grade-list':
-      import('./pages/kpi-grade/kpi-grade-list-page')
-      return page
-
     case 'kpi-history-list':
       import('./pages/kpi-history/kpi-history-list-page')
       return page

package/dist-client/pages/kpi/kpi-grade-editor.d.ts

@@ -0,0 +1,35 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/select/outlined-select.js';
+import '@material/web/select/select-option.js';
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+interface KpiGrade {
+    name: string;
+    minValue: number;
+    maxValue: number;
+    score?: number;
+    color?: string;
+    description?: string;
+}
+type KpiGrades = KpiGrade[];
+declare const KpiGradeEditor_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class KpiGradeEditor extends KpiGradeEditor_base {
+    static styles: import("lit").CSSResult[];
+    kpi: any;
+    grades: KpiGrades;
+    isDirty: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _renderGradeItem(grade: KpiGrade, index: number): import("lit-html").TemplateResult<1>;
+    _updateGrade(index: number, field: keyof KpiGrade, value: any): void;
+    _addGrade(): void;
+    _removeGrade(index: number): void;
+    _loadTemplate(template: string): void;
+    _save(): Promise<void>;
+    _validateGrades(): boolean;
+    _cancel(): void;
+}
+export {};