@things-factory/kpi 9.0.17 → 9.0.19

package/client/bootstrap.ts

@@ -0,0 +1,8 @@
+import '@operato/app/filter-renderer.js' /* register resource-object filter renderer */
+
+import { registerEditor as registerGristEditor } from '@operato/data-grist'
+import { OxGristEditorFormula } from '@operato/grist-editor/ox-grist-editor-formula.js'
+
+export default function bootstrap() {
+  registerGristEditor('formula', OxGristEditorFormula)
+}

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

@@ -4,11 +4,12 @@ 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-viz-editor.js'
+import './kpi-grade-editor.js'
 
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -64,6 +65,36 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
 
   @query('ox-grist') private grist!: DataGrist
 
+  @state() availableVariables: any[] = []
+  @state() availableVariablesLoaded = false
+
+  async getAvailableVariables() {
+    if (this.availableVariablesLoaded) {
+      return this.availableVariables
+    }
+    const response = await client.query({
+      query: gql`
+        query {
+          kpiMetrics {
+            items {
+              name
+              description
+              unit
+            }
+          }
+        }
+      `
+    })
+    this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({
+      name: metric.name,
+      description: metric.description,
+      type: 'kpi-metric',
+      unit: metric.unit
+    }))
+    this.availableVariablesLoaded = true
+    return this.availableVariables
+  }
+
   get context() {
     return {
       title: i18next.t('title.kpi list'),
@@ -127,6 +158,11 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchKpiMetrics()
+  }
+
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
@@ -187,13 +223,6 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           filter: 'search',
           width: 200
         },
-        // {
-        //   type: 'string',
-        //   name: 'category',
-        //   header: '카테고리',
-        //   record: { editable: false, renderer: (v, c, r) => r.category?.name },
-        //   width: 120
-        // },
         {
           type: 'resource-object',
           name: 'category',
@@ -208,7 +237,18 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           },
           width: 200
         },
-        { type: 'string', name: 'formula', header: '산식', record: { editable: true }, width: 200 },
+        {
+          type: 'formula',
+          name: 'formula',
+          header: '산식',
+          record: {
+            editable: true,
+            availableVariables: async () => {
+              return await this.getAvailableVariables()
+            }
+          },
+          width: 320
+        },
         {
           type: 'string',
           name: 'grades',
@@ -229,6 +269,15 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           },
           width: 150
         },
+        {
+          type: 'number',
+          name: 'weight',
+          header: '가중치',
+          record: { editable: true },
+          filter: true,
+          sortable: true,
+          width: 80
+        },
         {
           type: 'checkbox',
           name: 'active',
@@ -264,9 +313,9 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           },
           width: 150
         },
-        { type: 'string', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
+        { type: 'crontab', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
         { type: 'string', name: 'scheduleId', header: '스케줄ID', record: { editable: false }, width: 120 },
-        { type: 'string', name: 'timezone', header: '타임존', record: { editable: true }, width: 100 },
+        { type: 'timezone', name: 'timezone', header: '타임존', record: { editable: true }, width: 120 },
         { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
         { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
         {
@@ -323,6 +372,12 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
               grades
               vizType
               vizMeta
+              weight
+              formula
+              schedule
+              scheduleId
+              timezone
+              version
               category {
                 id
                 name
@@ -356,6 +411,31 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
     }
   }
 
+  async fetchKpiMetrics() {
+    const response = await client.query({
+      query: gql`
+        query {
+          kpiMetrics {
+            items {
+              name
+              description
+              unit
+            }
+          }
+        }
+      `
+    })
+
+    if (!response.errors) {
+      this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({
+        name: metric.name,
+        description: metric.description,
+        type: 'kpi-metric',
+        unit: metric.unit
+      }))
+    }
+  }
+
   async _deleteKpi() {
     if (
       await OxPrompt.open({
@@ -503,6 +583,14 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
   }
 
   async _editGrades(kpi: any) {
+    if (!kpi.id) {
+      notify({
+        message: 'KPI를 먼저 저장한 후에 등급 설정을 할 수 있습니다.'
+      })
+
+      return
+    }
+
     const popup = await openPopup(html` <kpi-grade-editor .kpi=${kpi}></kpi-grade-editor> `, {
       title: `${kpi.name} - 등급 설정`,
       size: 'large'

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

@@ -194,11 +194,13 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
   }
 
   _renderPreview() {
-    const kpiValue = this.kpi?.value?.value || 75
-    const targetValue = this.kpi?.targetValue || 100
-    const unit = this.kpi?.unit || ''
+    const kpiValue = this.kpi?.value?.value ?? 75
+    const targetValue = this.kpi?.targetValue ?? 100
+    const unit = this.kpi?.unit ?? ''
     const color = this.vizMeta.color || '#2196f3'
     const icon = this.vizMeta.icon || 'trending_up'
+    const min = this.vizMeta.minValue ?? 0
+    const max = this.vizMeta.maxValue ?? 100
 
     switch (this.selectedVizType) {
       case 'CARD':
@@ -213,22 +215,161 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
             </div>
           </div>
         `
-      case 'GAUGE':
-        const percentage = Math.min((kpiValue / targetValue) * 100, 100)
+      case 'GAUGE': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const r = 60
+        const cx = 90
+        const cy = 90
+        const startX = cx - r
+        const startY = cy
+        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
+        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
+        const needleAngle = Math.PI - Math.PI * percent
+        const needleX = cx + r * Math.cos(needleAngle)
+        const needleY = cy - r * Math.sin(needleAngle)
         return html`
           <div style="text-align:center;padding:16px;">
-            <div
-              style="width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${percentage *
-              3.6}deg, #e0e0e0 ${percentage * 3.6}deg 360deg);margin:0 auto;position:relative;"
-            >
-              <div
-                style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:1.2rem;font-weight:bold;color:${color};"
+            <svg width="180" height="110" viewBox="0 0 180 110">
+              <!-- 배경 arc -->
+              <path
+                d="M${startX},${startY} A${r},${r} 0 0,1 ${cx + r},${cy}"
+                fill="none"
+                stroke="#e0e0e0"
+                stroke-width="16"
+              />
+              <!-- 값 arc -->
+              <path
+                d="M${startX},${startY} A${r},${r} 0 0,1 ${endX},${endY}"
+                fill="none"
+                stroke="${color}"
+                stroke-width="16"
+              />
+              <!-- 바늘 -->
+              <line x1="${cx}" y1="${cy}" x2="${needleX}" y2="${needleY}" stroke="#333" stroke-width="4" />
+              <!-- 중심 원 -->
+              <circle cx="${cx}" cy="${cy}" r="7" fill="#333" />
+              <!-- 중앙값 -->
+              <text x="${cx}" y="${cy - 25}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
+                ${value}${unit}
+              </text>
+              <!-- min/max -->
+              <text x="${cx - r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${min}</text>
+              <text x="${cx + r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${max}</text>
+            </svg>
+          </div>
+        `
+      }
+      case 'SPEEDOMETER': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const r = 60
+        const cx = 90
+        const cy = 90
+        const startX = cx - r
+        const startY = cy
+        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
+        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
+        const needleAngle = Math.PI - Math.PI * percent
+        const needleX = cx + r * Math.cos(needleAngle)
+        const needleY = cy - r * Math.sin(needleAngle)
+        // 중간 눈금 (5개)
+        const ticks = Array.from({ length: 6 }, (_, i) => {
+          const tickAngle = Math.PI - (Math.PI * i) / 5
+          const tx1 = cx + (r - 8) * Math.cos(tickAngle)
+          const ty1 = cy - (r - 8) * Math.sin(tickAngle)
+          const tx2 = cx + (r + 8) * Math.cos(tickAngle)
+          const ty2 = cy - (r + 8) * Math.sin(tickAngle)
+          const label = Math.round(min + (max - min) * (i / 5))
+          const lx = cx + (r + 22) * Math.cos(tickAngle)
+          const ly = cy - (r + 22) * Math.sin(tickAngle) + 6
+          return { tx1, ty1, tx2, ty2, label, lx, ly }
+        })
+        return html`
+          <div style="text-align:center;padding:16px;">
+            <svg width="200" height="120" viewBox="0 0 200 120">
+              <!-- 배경 arc (더 두껍게) -->
+              <path
+                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${cx + r + 10},${cy}"
+                fill="none"
+                stroke="#e0e0e0"
+                stroke-width="28"
+              />
+              <!-- 값 arc -->
+              <path
+                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${endX + 10},${endY}"
+                fill="none"
+                stroke="${color}"
+                stroke-width="28"
+              />
+              <!-- 눈금 -->
+              ${ticks.map(
+                t =>
+                  html`<line
+                    x1="${t.tx1 + 10}"
+                    y1="${t.ty1}"
+                    x2="${t.tx2 + 10}"
+                    y2="${t.ty2}"
+                    stroke="#888"
+                    stroke-width="2"
+                  />`
+              )}
+              <!-- 눈금 숫자 -->
+              ${ticks.map(
+                t =>
+                  html`<text
+                    x="${t.lx + 10}"
+                    y="${t.ly}"
+                    text-anchor="middle"
+                    font-size="14"
+                    fill="#333"
+                    font-weight="bold"
+                    >${t.label}</text
+                  >`
+              )}
+              <!-- 바늘 (빨간색) -->
+              <line x1="${cx + 10}" y1="${cy}" x2="${needleX + 10}" y2="${needleY}" stroke="#d32f2f" stroke-width="6" />
+              <!-- 중심 원 -->
+              <circle cx="${cx + 10}" cy="${cy}" r="13" fill="#333" />
+              <!-- 중앙값 -->
+              <text
+                x="${cx + 10}"
+                y="${cy - 32}"
+                text-anchor="middle"
+                font-size="26"
+                fill="${color}"
+                font-weight="bold"
               >
-                ${kpiValue}${unit}
-              </div>
-            </div>
+                ${value}${unit}
+              </text>
+              <!-- min/max 포인트 -->
+              <circle cx="${startX + 10}" cy="${startY}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
+              <circle cx="${cx + r + 10}" cy="${cy}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
+              <!-- min/max 숫자 크게 -->
+              <text
+                x="${startX + 10}"
+                y="${startY + 32}"
+                text-anchor="middle"
+                font-size="16"
+                fill="#333"
+                font-weight="bold"
+              >
+                ${min}
+              </text>
+              <text
+                x="${cx + r + 10}"
+                y="${cy + 32}"
+                text-anchor="middle"
+                font-size="16"
+                fill="#333"
+                font-weight="bold"
+              >
+                ${max}
+              </text>
+            </svg>
           </div>
         `
+      }
       case 'PROGRESS':
         const progressPercentage = Math.min((kpiValue / targetValue) * 100, 100)
         return html`
@@ -241,6 +382,65 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
             </div>
           </div>
         `
+      case 'THERMOMETER': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const barHeight = 120
+        const barWidth = 24
+        const x = 100
+        const yTop = 30
+        const yBottom = yTop + barHeight
+        const fillY = yBottom - percent * barHeight
+        return html`
+          <div style="text-align:center;padding:16px;">
+            <svg width="200" height="180" viewBox="0 0 200 180">
+              <!-- 바깥 테두리 -->
+              <rect
+                x="${x - barWidth / 2 - 4}"
+                y="${yTop - 4}"
+                width="${barWidth + 8}"
+                height="${barHeight + 8}"
+                rx="16"
+                fill="#f5f5f5"
+                stroke="#bbb"
+                stroke-width="2"
+              />
+              <!-- 빈 막대 -->
+              <rect
+                x="${x - barWidth / 2}"
+                y="${yTop}"
+                width="${barWidth}"
+                height="${barHeight}"
+                rx="12"
+                fill="#e0e0e0"
+              />
+              <!-- 채워진 부분 -->
+              <rect
+                x="${x - barWidth / 2}"
+                y="${fillY}"
+                width="${barWidth}"
+                height="${yBottom - fillY}"
+                rx="12"
+                fill="${color}"
+              />
+              <!-- 하단 구슬 -->
+              <circle cx="${x}" cy="${yBottom + 18}" r="22" fill="#e0e0e0" stroke="#bbb" stroke-width="2" />
+              <circle cx="${x}" cy="${yBottom + 18}" r="18" fill="${color}" />
+              <!-- 현재값 -->
+              <text x="${x}" y="${fillY - 12}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
+                ${value}${unit}
+              </text>
+              <!-- min/max -->
+              <text x="${x}" y="${yBottom + 52}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
+                ${min}
+              </text>
+              <text x="${x}" y="${yTop - 12}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
+                ${max}
+              </text>
+            </svg>
+          </div>
+        `
+      }
       case 'ICON':
         return html`
           <div style="text-align:center;padding:16px;">

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

@@ -7,7 +7,7 @@ import '@operato/data-grist/ox-record-creator.js'
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -59,6 +59,35 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
 
   @query('ox-grist') private grist!: DataGrist
 
+  @state() availableVariables: any[] = []
+  @state() availableVariablesLoaded = false
+
+  async getAvailableVariables() {
+    if (this.availableVariablesLoaded) {
+      return this.availableVariables
+    }
+    const response = await client.query({
+      query: gql`
+        query {
+          kpis {
+            items {
+              name
+              description
+            }
+          }
+        }
+      `
+    })
+    this.availableVariables = (response.data.kpis.items || []).map(kpi => ({
+      name: kpi.name,
+      description: kpi.description,
+      type: 'kpi',
+      unit: ''
+    }))
+    this.availableVariablesLoaded = true
+    return this.availableVariables
+  }
+
   get context() {
     return {
       title: i18next.t('title.kpi category list'),
@@ -122,11 +151,16 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.fetchKpis()
+  }
+
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater'],
-        details: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater']
+        fields: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater'],
+        details: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -149,11 +183,23 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
           width: 200
         },
         {
-          type: 'string',
-          name: 'parent',
-          header: '상위분류',
-          record: { editable: false, renderer: (v, c, r) => r.parent?.name },
-          width: 120
+          type: 'formula',
+          name: 'formula',
+          header: '산식',
+          record: {
+            editable: true,
+            availableVariables: async () => {
+              return await this.getAvailableVariables()
+            }
+          },
+          width: 320
+        },
+        {
+          type: 'number',
+          name: 'weight',
+          header: '가중치',
+          record: { editable: true },
+          width: 80
         },
         {
           type: 'checkbox',
@@ -216,6 +262,8 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
               name
               description
               active
+              formula
+              weight
               updater {
                 id
                 name
@@ -244,6 +292,30 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
     }
   }
 
+  async fetchKpis() {
+    const response = await client.query({
+      query: gql`
+        query {
+          kpis {
+            items {
+              name
+              description
+            }
+          }
+        }
+      `
+    })
+
+    if (!response.errors) {
+      this.availableVariables = (response.data.kpis.items || []).map(kpi => ({
+        name: kpi.name,
+        description: kpi.description,
+        type: 'kpi',
+        unit: ''
+      }))
+    }
+  }
+
   async _deleteKpiCategory() {
     if (
       await OxPrompt.open({

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

@@ -105,7 +105,7 @@ export class KpiHistoryListPage extends localize(i18next)(PageView) {
         record: { editable: false, renderer: (v, c, r) => r.category?.name },
         width: 120
       },
-      { type: 'string', name: 'formula', header: '산식', record: { editable: false }, width: 200 },
+      { type: 'formula', name: 'formula', header: '산식', record: { editable: false }, width: 200 },
       { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: false }, width: 60 },
       { type: 'string', name: 'state', header: '상태', record: { editable: false }, width: 100 },
       { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },

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

@@ -6,8 +6,8 @@ import '@operato/data-grist/ox-record-creator.js'
 
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -132,7 +132,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
           'source',
           'dataSet',
           'fieldName',
-          'formula',
+          'periodType',
           'active',
           'schedule',
           'scheduleId',
@@ -149,7 +149,7 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
           'source',
           'dataSet',
           'fieldName',
-          'formula',
+          'periodType',
           'active',
           'schedule',
           'scheduleId',
@@ -183,11 +183,24 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
           width: 120
         },
         { type: 'string', name: 'fieldName', header: '필드명', record: { editable: true }, width: 120 },
-        { type: 'string', name: 'formula', header: '산식', record: { editable: true }, width: 200 },
+        {
+          type: 'select',
+          name: 'collectType',
+          header: '수집방법',
+          record: { editable: true, options: ['', 'AUTO', 'MANUAL', 'IMPORT', 'EXTERNAL'] },
+          width: 120
+        },
+        {
+          type: 'select',
+          name: 'periodType',
+          header: '주기',
+          record: { editable: true, options: ['', 'DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR', 'RANGE'] },
+          width: 80
+        },
         { type: 'checkbox', name: 'active', label: true, header: '활성', record: { editable: true }, width: 60 },
-        { type: 'string', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
+        { type: 'crontab', name: 'schedule', header: '스케줄', record: { editable: true }, width: 120 },
         { type: 'string', name: 'scheduleId', header: '스케줄ID', record: { editable: false }, width: 120 },
-        { type: 'string', name: 'timezone', header: '타임존', record: { editable: true }, width: 100 },
+        { type: 'timezone', name: 'timezone', header: '타임존', record: { editable: true }, width: 120 },
         { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
         { type: 'datetime', name: 'updatedAt', header: '수정일', record: { editable: false }, width: 180 },
         {
@@ -230,7 +243,18 @@ export class KpiMetricListPage extends connect(store)(localize(i18next)(ScopedEl
               id
               name
               description
+              periodType
               active
+              unit
+              source
+              collectType
+              dataSet {
+                id
+                name
+              }
+              fieldName
+              schedule
+              timezone
               updater {
                 id
                 name