@things-factory/kpi 9.0.18 → 9.0.20

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({

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

package/client/pages/kpi-metric-value/kpi-metric-value-importer.ts

@@ -0,0 +1,65 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
+
+export class KpiMetricValueImporter extends LitElement {
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+      }
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) metricValues: any[] = []
+  @property({ type: Object }) columns = {
+    list: { fields: ['metric', 'value', 'valueDate', 'group', 'meta'] },
+    pagination: { infinite: true },
+    columns: [
+      { type: 'string', name: 'metric', header: 'Metric', width: 150 },
+      { type: 'number', name: 'value', header: '값', width: 120 },
+      { type: 'date', name: 'valueDate', header: '날짜', width: 120 },
+      { type: 'string', name: 'group', header: '그룹', width: 120 },
+      { type: 'object', name: 'meta', header: '메타', width: 120 }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{ records: this.metricValues }}
+      ></ox-grist>
+      <div class="button-container">
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      </div>
+    `
+  }
+
+  async save() {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation importKpiMetricValues($metricValues: [KpiMetricValuePatch!]!) {
+          importKpiMetricValues(metricValues: $metricValues)
+        }
+      `,
+      variables: { metricValues: this.metricValues }
+    })
+    if (response.errors?.length) return
+    this.dispatchEvent(new CustomEvent('imported'))
+  }
+}
+customElements.define('kpi-metric-value-importer', KpiMetricValueImporter)