@things-factory/kpi 9.0.21 → 9.0.23

package/client/pages/kpi-category/kpi-category-value-calculator.ts

@@ -0,0 +1,233 @@
+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 정의 (서버와 동일하게)
+enum KpiPeriodType {
+  DAY = 'DAY',
+  WEEK = 'WEEK',
+  MONTH = 'MONTH',
+  QUARTER = 'QUARTER',
+  YEAR = 'YEAR',
+  RANGE = 'RANGE',
+  ALLTIME = 'ALLTIME'
+}
+
+// periodType에 따른 마지막 일자 계산 함수
+function getLastValueDate(periodType: KpiPeriodType = KpiPeriodType.DAY): string {
+  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: Date): number {
+  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
+}
+
+@customElement('kpi-category-value-calculator')
+export class KpiCategoryValueCalculator extends LitElement {
+  static 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;
+      }
+    `
+  ]
+
+  @property({ type: String }) categoryId = ''
+  @property({ type: String }) categoryName = ''
+  @state() valueDate = getLastValueDate()
+  @state() group = ''
+  @state() result: any = null
+  @state() loading = false
+
+  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
+    }
+  }
+}

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

@@ -13,6 +13,8 @@ import './kpi-history-viewer'
 import './kpi-list-summary'
 import './kpi-value-entry'
 import './kpi-alert-panel'
+import '../../charts/kpi-radar-chart'
+import '../../charts/kpi-boxplot-chart'
 
 @customElement('kpi-dashboard')
 export class KpiDashboardPage extends PageView {
@@ -28,6 +30,35 @@ export class KpiDashboardPage extends PageView {
         flex: 1;
         padding: 24px;
       }
+      .sample-charts-section {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 48px;
+        align-items: flex-start;
+      }
+      .sample-chart-card {
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        border: 1px solid #ececec;
+        padding: 24px 32px;
+        min-width: 340px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        min-height: 500px;
+      }
+      .sample-chart-title {
+        font-size: 1.1rem;
+        font-weight: bold;
+        margin-bottom: 12px;
+      }
+      .sample-chart-container {
+        width: 100%;
+        height: 340px;
+        min-height: 340px;
+      }
       .category-section {
         margin-bottom: 40px;
       }
@@ -79,6 +110,127 @@ export class KpiDashboardPage extends PageView {
   @state() modalHistories: any[] = []
   @state() modalKpiName: string = ''
 
+  // 샘플 데이터
+  private get sampleCategories(): string[] {
+    return ['생산성', '품질', '안전', '환경', '비용', '일정']
+  }
+  private get sampleGroups(): string[] {
+    return ['A', 'B', 'C']
+  }
+  private get sampleSeriesData(): any[] {
+    // 각 카테고리별로 10개 이상의 다양한 값(평균, 분산, 이상치 포함)
+    // 생산성: 평균 높고 분산 큼, 이상치 포함
+    const 생산성 = [95, 92, 90, 88, 85, 80, 78, 75, 70, 60, 100] // 100은 이상치
+    // 품질: 평균 높고 분산 작음
+    const 품질 = [90, 89, 88, 87, 86, 85, 84, 83, 82, 80, 70]
+    // 안전: 평균 중간, 이상치 포함
+    const 안전 = [92, 91, 90, 89, 88, 87, 86, 85, 84, 65, 60] // 60은 이상치
+    // 환경: 낮은 값에 몰림, 분산 큼
+    const 환경 = [95, 90, 85, 80, 75, 70, 65, 60, 60, 60, 55]
+    // 비용: 전체적으로 낮음, 이상치 포함
+    const 비용 = [80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 50] // 50은 이상치
+    // 일정: 분산 큼, 이상치 포함
+    const 일정 = [90, 88, 86, 84, 82, 80, 78, 76, 74, 60, 100] // 100은 이상치
+
+    const categories = this.sampleCategories
+    const groups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
+    const all: any[] = []
+    categories.forEach((cat, i) => {
+      let arr: number[] = []
+      switch (cat) {
+        case '생산성':
+          arr = 생산성
+          break
+        case '품질':
+          arr = 품질
+          break
+        case '안전':
+          arr = 안전
+          break
+        case '환경':
+          arr = 환경
+          break
+        case '비용':
+          arr = 비용
+          break
+        case '일정':
+          arr = 일정
+          break
+      }
+      arr.forEach((v, idx) => {
+        all.push({ group: groups[idx] ?? `G${idx + 1}`, category: cat, value: v })
+      })
+    })
+    return all
+  }
+  private get sampleRadarData(): any[] {
+    // 카테고리별로 min, max, avg, A(자신의 그룹)만 반환
+    const categories = this.sampleCategories
+    const data = this.sampleSeriesData
+    const minData: any = { group: 'Min' }
+    const maxData: any = { group: 'Max' }
+    const avgData: any = { group: 'Avg' }
+    const aData: any = { group: 'A' }
+    categories.forEach(category => {
+      const values = data.filter(d => d.category === category).map(d => d.value)
+      minData[category] = Math.min(...values)
+      maxData[category] = Math.max(...values)
+      avgData[category] = values.reduce((a, b) => a + b, 0) / values.length
+      aData[category] = data.find(d => d.category === category && d.group === 'A')?.value ?? avgData[category]
+    })
+    // kpi-radar-chart가 기대하는 구조로 변환: [{group, category, value} ...]
+    const result: any[] = []
+    categories.forEach(category => {
+      result.push({ group: 'Min', category, value: minData[category] })
+      result.push({ group: 'Max', category, value: maxData[category] })
+      result.push({ group: 'Avg', category, value: avgData[category] })
+      result.push({ group: 'A', category, value: aData[category] })
+    })
+    return result
+  }
+  private get sampleRadarCategories(): string[] {
+    return this.sampleCategories
+  }
+  private get sampleRadarGroups(): string[] {
+    return this.sampleGroups
+  }
+  private get sampleBoxplotData(): any[] {
+    // 카테고리별로 그룹별 value의 분포 계산
+    const categories = this.sampleCategories
+    const data = this.sampleSeriesData
+    return categories.map(category => {
+      const values = data.filter(d => d.category === category).map(d => d.value)
+      const sorted = [...values].sort((a, b) => a - b)
+      const min = sorted[0]
+      const max = sorted[sorted.length - 1]
+      const mean = values.reduce((a, b) => a + b, 0) / values.length
+      const median =
+        sorted.length % 2 === 0
+          ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2
+          : sorted[Math.floor(sorted.length / 2)]
+      const q1 = sorted[Math.floor(sorted.length / 4)]
+      const q3 = sorted[Math.floor((sorted.length * 3) / 4)]
+      // value: A그룹의 실제값(강조)
+      const value = data.find(d => d.category === category && d.group === 'A')?.value ?? mean
+      return {
+        group: category, // x축: 카테고리
+        min,
+        q1,
+        median,
+        q3,
+        max,
+        mean,
+        value
+      }
+    })
+  }
+  private get sampleBoxplotGroups(): string[] {
+    return this.sampleCategories
+  }
+  private get sampleCurrentGroup() {
+    return 'A'
+  }
+
   connectedCallback() {
     super.connectedCallback()
     this.fetchCategories()
@@ -313,6 +465,42 @@ export class KpiDashboardPage extends PageView {
     if (this.error) return html`<div>${this.error}</div>`
     return html`
       <div class="dashboard-root">
+        <!-- 샘플 차트 섹션 -->
+        <div class="sample-charts-section">
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 KPI 비교 (Radar)</div>
+            <div class="sample-chart-container">
+              <kpi-radar-chart
+                .data=${this.sampleRadarData ?? []}
+                .categories=${this.sampleRadarCategories ?? []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></kpi-radar-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Radar 차트</b>는 각 카테고리별로 최소(Min), 최대(Max), 평균(Avg), 그리고 이 프로젝트의 값을 한눈에
+              비교할 수 있도록 시각화합니다.<br />
+              <b>진한 파란색</b> 다각형이 이 프로젝트의 성과이며, 회색 다각형은 기준값(최소/최대/평균)입니다.
+            </div>
+          </div>
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 분포 (Boxplot)</div>
+            <div class="sample-chart-container">
+              <kpi-boxplot-chart
+                .data=${this.sampleBoxplotData ?? []}
+                .groups=${this.sampleBoxplotGroups ?? []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></kpi-boxplot-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Boxplot(박스플롯)</b>은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치
+              등)를 보여줍니다.<br />
+              <b>박스</b>는 중앙 50% 구간, <b>수염</b>은 전체 범위, <b>굵은 검정색 가로선</b>은 중앙값(메디안),
+              <b>주황색 원</b>은 평균값(Mean)을 의미합니다.<br />
+              <b>이 프로젝트의 값</b>은 <b>진한 오렌지색 원</b>으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수
+              있습니다.<br />
+            </div>
+          </div>
+        </div>
         ${this.showHistoryModal
           ? html`
               <div

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

@@ -194,7 +194,19 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
           type: 'select',
           name: 'periodType',
           header: '주기',
-          record: { editable: true, options: ['', 'DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR', 'RANGE'] },
+          record: {
+            editable: true,
+            options: [
+              { value: '', display: '' },
+              { value: 'DAY', display: '일' },
+              { value: 'WEEK', display: '주' },
+              { value: 'MONTH', display: '월' },
+              { value: 'QUARTER', display: '분기' },
+              { value: 'YEAR', display: '년' },
+              { value: 'RANGE', display: '범위' },
+              { value: 'ALLTIME', display: '전체' }
+            ]
+          },
           width: 80
         },
         { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: true }, width: 60 },

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

@@ -3,6 +3,7 @@ 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 './kpi-metric-value-manual-entry-form.js'
 
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
@@ -113,6 +114,18 @@ export class KpiMetricValueListPage extends connect(store)(localize(i18next)(Sco
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        // KPI Metric Value 수정 버튼 추가
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'edit',
+          title: '수정',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              this._editKpiMetricValue(record)
+            }
+          }
+        },
         {
           type: 'string',
           name: 'metric',
@@ -120,7 +133,7 @@ export class KpiMetricValueListPage extends connect(store)(localize(i18next)(Sco
           record: { editable: false, renderer: (v, c, r) => r.metric?.name },
           width: 150
         },
-        { type: 'date', name: 'valueDate', header: '날짜', record: { editable: true }, width: 120 },
+        { type: 'string', name: 'valueDate', header: '날짜', record: { editable: true }, width: 120 },
         { type: 'number', name: 'value', header: '값', record: { editable: true }, width: 120 },
         { type: 'string', name: 'group', header: '그룹', record: { editable: false }, width: 120 },
         { type: 'object', name: 'meta', header: '메타', record: { editable: false }, width: 120 },
@@ -151,6 +164,12 @@ export class KpiMetricValueListPage extends connect(store)(localize(i18next)(Sco
     }
   }
 
+  pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      this.grist.fetch()
+    }
+  }
+
   async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
     const response = await client.query({
       query: gql`
@@ -296,4 +315,27 @@ export class KpiMetricValueListPage extends connect(store)(localize(i18next)(Sco
   async importHandler(records) {
     // 임포트 팝업 등은 추후 구현
   }
+
+  async _editKpiMetricValue(metricValue) {
+    const popup = await openPopup(
+      html`
+        <kpi-metric-value-manual-entry-form
+          .metric=${metricValue.metric}
+          .valueDate=${metricValue.valueDate}
+          .value=${metricValue.value}
+          .group=${metricValue.group}
+          .meta=${metricValue.meta ? JSON.stringify(metricValue.meta) : ''}
+          @saved=${() => {
+            this.grist.fetch()
+            popup.close()
+          }}
+        ></kpi-metric-value-manual-entry-form>
+      `,
+      {
+        title: `${metricValue.metric?.name || ''} 값 수정`,
+        size: 'medium',
+        backdrop: true
+      }
+    )
+  }
 }

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

@@ -111,24 +111,14 @@ export class KpiMetricValueManualEntryForm extends LitElement {
     try {
       await client.mutate({
         mutation: gql`
-          mutation ($metricId: ID!, $valueDate: String!, $value: Float!, $group: String, $meta: Object) {
-            createKpiMetricValue(
-              metricValue: {
-                metricId: $metricId
-                valueDate: $valueDate
-                value: $value
-                group: $group
-                meta: $meta
-                periodType: DAY
-              }
-            ) {
+          mutation ($metricName: String!, $value: Float!, $group: String, $meta: Object) {
+            recordKpiMetricValue(metricName: $metricName, value: $value, meta: $meta, group: $group) {
               id
             }
           }
         `,
         variables: {
-          metricId: this.metric.id,
-          valueDate: this.valueDate,
+          metricName: this.metric.name,
           value: parseFloat(this.value),
           group: this.group || undefined,
           meta: parsedMeta

package/client/pages/kpi-metric-value/kpi-metric-value-manual-entry-page.ts

@@ -99,7 +99,19 @@ export class KpiMetricValueManualEntryPage extends connect(store)(localize(i18ne
           type: 'select',
           name: 'periodType',
           header: '주기',
-          record: { editable: true, options: ['', 'DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR', 'RANGE'] },
+          record: {
+            editable: true,
+            options: [
+              { value: '', display: '' },
+              { value: 'DAY', display: '일' },
+              { value: 'WEEK', display: '주' },
+              { value: 'MONTH', display: '월' },
+              { value: 'QUARTER', display: '분기' },
+              { value: 'YEAR', display: '년' },
+              { value: 'RANGE', display: '범위' },
+              { value: 'ALLTIME', display: '전체' }
+            ]
+          },
           width: 80
         },
         {

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

@@ -130,6 +130,7 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
           'version',
           'valueDate',
           'value',
+          'score',
           'group',
           'inputType',
           'source',
@@ -144,6 +145,7 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
           'version',
           'valueDate',
           'value',
+          'score',
           'group',
           'inputType',
           'source',
@@ -157,6 +159,18 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        // KPI Value 재계산 버튼 추가
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'refresh',
+          title: '재계산',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              this._recalculateKpiValue(record)
+            }
+          }
+        },
         {
           type: 'string',
           name: 'kpi',
@@ -165,8 +179,9 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
           width: 150
         },
         { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
-        { type: 'date', name: 'valueDate', header: '실적일', record: { editable: true }, width: 120 },
+        { type: 'string', name: 'valueDate', header: '실적일', record: { editable: true }, width: 120 },
         { type: 'number', name: 'value', header: '실적값', record: { editable: true }, width: 120 },
+        { type: 'number', name: 'score', header: '성과점수', record: { editable: false }, width: 120 },
         { type: 'string', name: 'group', header: '그룹', record: { editable: false }, width: 120 },
         { type: 'string', name: 'inputType', header: '입력방식', record: { editable: false }, width: 100 },
         { type: 'string', name: 'source', header: '수집출처', record: { editable: false }, width: 120 },
@@ -218,6 +233,7 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
               version
               valueDate
               value
+              score
               inputType
               source
               meta
@@ -308,6 +324,7 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
               version
               valueDate
               value
+              score
             }
           }
         `,
@@ -322,6 +339,33 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
     }
   }
 
+  async _recalculateKpiValue(kpiValue) {
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
+            recalculateKpiValue(id: $id) {
+              id
+              value
+              score
+              valueDate
+              group
+            }
+          }
+        `,
+        variables: {
+          id: kpiValue.id
+        }
+      })
+      if (!response.errors) {
+        notify({ message: 'KPI Value가 성공적으로 재계산되었습니다.' })
+        this.grist.fetch()
+      }
+    } catch (error) {
+      notify({ message: 'KPI Value 재계산 중 오류가 발생했습니다.' })
+    }
+  }
+
   async creationCallback(kpiValue) {
     try {
       const response = await client.query({