@things-factory/kpi 9.0.21 → 9.0.23

package/client/charts/kpi-boxplot-chart.ts

@@ -0,0 +1,163 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+@customElement('kpi-boxplot-chart')
+export class KpiBoxplotChart extends LitElement {
+  @property({ type: Array }) data: any[] = []
+  @property({ type: Array }) groups: string[] = []
+  @property({ type: String }) minKey: string = 'min'
+  @property({ type: String }) maxKey: string = 'max'
+  @property({ type: String }) meanKey: string = 'mean'
+  @property({ type: String }) medianKey: string = 'median'
+  @property({ type: String }) q1Key: string = 'q1'
+  @property({ type: String }) q3Key: string = 'q3'
+  @property({ type: String }) valueKey: string = 'value'
+  @property({ type: String }) currentGroup: string = ''
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `
+
+  private chartWidth = 0
+  private chartHeight = 0
+  private resizeObserver?: ResizeObserver
+
+  render() {
+    return html`<svg
+      id="boxplot"
+      width=${this.chartWidth}
+      height=${this.chartHeight}
+      viewBox="0 0 ${this.chartWidth} ${this.chartHeight}"
+      preserveAspectRatio="xMidYMid meet"
+    ></svg>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const rect = entry.contentRect
+        this.chartWidth = rect.width
+        this.chartHeight = rect.height
+        this.requestUpdate()
+      }
+    })
+    this.resizeObserver.observe(this)
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect()
+    super.disconnectedCallback()
+  }
+
+  updated() {
+    this.drawBoxplot()
+  }
+
+  drawBoxplot() {
+    const svg = d3.select(this.renderRoot.querySelector('#boxplot'))
+    svg.selectAll('*').remove()
+    const w = this.chartWidth || 300
+    const h = this.chartHeight || 300
+    const margin = { top: 20, right: 20, bottom: 40, left: 40 }
+    const plotW = w - margin.left - margin.right
+    const plotH = h - margin.top - margin.bottom
+
+    // x축: 그룹
+    const x = d3.scaleBand().domain(this.groups).range([0, plotW]).padding(0.4)
+    // y축: 값
+    const allValues = this.data.flatMap(d => [
+      d[this.minKey],
+      d[this.maxKey],
+      d[this.q1Key],
+      d[this.q3Key],
+      d[this.medianKey],
+      d[this.meanKey],
+      d[this.valueKey]
+    ])
+    const y = d3
+      .scaleLinear()
+      .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])
+      .nice()
+      .range([plotH, 0])
+
+    const g = svg
+      .attr('width', w)
+      .attr('height', h)
+      .append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`)
+
+    // 축
+    g.append('g').call(d3.axisLeft(y))
+    g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))
+
+    // 박스플롯
+    this.data.forEach(d => {
+      const gx = x(d.group) ?? 0
+      // 박스
+      g.append('rect')
+        .attr('x', gx)
+        .attr('y', y(d[this.q3Key]))
+        .attr('width', x.bandwidth())
+        .attr('height', y(d[this.q1Key]) - y(d[this.q3Key]))
+        .attr('fill', d.group === this.currentGroup ? '#2196f3' : '#bbb')
+        .attr('opacity', 0.5)
+      // 중앙선(중앙값)
+      g.append('line')
+        .attr('x1', gx)
+        .attr('x2', gx + x.bandwidth())
+        .attr('y1', y(d[this.medianKey]))
+        .attr('y2', y(d[this.medianKey]))
+        .attr('stroke', '#333')
+        .attr('stroke-width', 2)
+      // 수염(min-max)
+      g.append('line')
+        .attr('x1', gx + x.bandwidth() / 2)
+        .attr('x2', gx + x.bandwidth() / 2)
+        .attr('y1', y(d[this.minKey]))
+        .attr('y2', y(d[this.maxKey]))
+        .attr('stroke', '#333')
+      // min/max
+      g.append('line')
+        .attr('x1', gx + x.bandwidth() / 4)
+        .attr('x2', gx + (x.bandwidth() * 3) / 4)
+        .attr('y1', y(d[this.minKey]))
+        .attr('y2', y(d[this.minKey]))
+        .attr('stroke', '#333')
+      g.append('line')
+        .attr('x1', gx + x.bandwidth() / 4)
+        .attr('x2', gx + (x.bandwidth() * 3) / 4)
+        .attr('y1', y(d[this.maxKey]))
+        .attr('y2', y(d[this.maxKey]))
+        .attr('stroke', '#333')
+      // 평균값
+      g.append('circle')
+        .attr('cx', gx + x.bandwidth() / 2)
+        .attr('cy', y(d[this.meanKey]))
+        .attr('r', 4)
+        .attr('fill', 'orange')
+    })
+    // 현재 그룹 값 강조
+    this.data.forEach(d => {
+      if (d.group === this.currentGroup) {
+        g.append('circle')
+          .attr('cx', x(d.group) + x.bandwidth() / 2)
+          .attr('cy', y(d[this.valueKey]))
+          .attr('r', 6)
+          .attr('fill', '#e91e63')
+          .attr('stroke', '#fff')
+          .attr('stroke-width', 2)
+      }
+    })
+  }
+}

package/client/charts/kpi-radar-chart.ts

@@ -0,0 +1,128 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+@customElement('kpi-radar-chart')
+export class KpiRadarChart extends LitElement {
+  @property({ type: Array }) data: any[] = []
+  @property({ type: Array }) categories: string[] = []
+  @property({ type: String }) valueKey: string = 'value'
+  @property({ type: String }) currentGroup: string = ''
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `
+
+  private chartWidth = 0
+  private chartHeight = 0
+  private resizeObserver?: ResizeObserver
+
+  render() {
+    return html`<svg
+      id="radar"
+      width=${this.chartWidth}
+      height=${this.chartHeight}
+      viewBox="0 0 ${this.chartWidth} ${this.chartHeight}"
+      preserveAspectRatio="xMidYMid meet"
+    ></svg>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const rect = entry.contentRect
+        this.chartWidth = rect.width
+        this.chartHeight = rect.height
+        this.requestUpdate()
+      }
+    })
+    this.resizeObserver.observe(this)
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect()
+    super.disconnectedCallback()
+  }
+
+  updated() {
+    this.drawRadar()
+  }
+
+  drawRadar() {
+    const svg = d3.select(this.renderRoot.querySelector('#radar'))
+    svg.selectAll('*').remove()
+    const w = this.chartWidth || 300
+    const h = this.chartHeight || 300
+    const r = Math.min(w, h) / 2 - 40
+    const angleSlice = (2 * Math.PI) / (this.categories.length || 1)
+
+    // 데이터 변환: { group, values: [ {category, value} ... ] }
+    const groupData = d3
+      .groups(this.data, d => d.group)
+      .map(([group, values]) => ({
+        group,
+        values: this.categories.map((cat, i) => {
+          const found = values.find(v => v.category === cat)
+          return { category: cat, value: found ? found[this.valueKey] : 0 }
+        })
+      }))
+
+    // 스케일
+    const maxValue = d3.max(this.data, d => d[this.valueKey]) || 1
+    const radius = d3.scaleLinear().domain([0, maxValue]).range([0, r])
+
+    // SVG 기본
+    svg.attr('width', w).attr('height', h)
+    const g = svg.append('g').attr('transform', `translate(${w / 2},${h / 2})`)
+
+    // 그리드/축
+    for (let i = 1; i <= 5; i++) {
+      g.append('circle')
+        .attr('r', (r / 5) * i)
+        .attr('fill', 'none')
+        .attr('stroke', '#ccc')
+    }
+    this.categories.forEach((cat, i) => {
+      const angle = i * angleSlice - Math.PI / 2
+      g.append('line')
+        .attr('x1', 0)
+        .attr('y1', 0)
+        .attr('x2', radius(maxValue) * Math.cos(angle))
+        .attr('y2', radius(maxValue) * Math.sin(angle))
+        .attr('stroke', '#ccc')
+      g.append('text')
+        .attr('x', (radius(maxValue) + 10) * Math.cos(angle))
+        .attr('y', (radius(maxValue) + 10) * Math.sin(angle))
+        .attr('text-anchor', 'middle')
+        .attr('alignment-baseline', 'middle')
+        .attr('font-size', 12)
+        .text(cat)
+    })
+
+    // 그룹별 폴리곤
+    groupData.forEach(gd => {
+      // 마지막에 첫 점을 한 번 더 추가
+      const closedValues = [...gd.values, gd.values[0]]
+      const line = d3
+        .lineRadial()
+        .radius((d: any) => radius(d.value))
+        .angle((d, i) => i * angleSlice)
+      g.append('path')
+        .datum(closedValues)
+        .attr('d', line as any)
+        .attr('fill', gd.group === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')
+        .attr('stroke', gd.group === this.currentGroup ? '#2196f3' : '#aaa')
+        .attr('stroke-width', gd.group === this.currentGroup ? 3 : 1)
+    })
+  }
+}

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

@@ -68,7 +68,7 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
   @state() availableVariables: any[] = []
   @state() availableVariablesLoaded = false
 
-  async getAvailableVariables() {
+  async getAvailableKpiMetricVariables() {
     if (this.availableVariablesLoaded) {
       return this.availableVariables
     }
@@ -166,24 +166,7 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: [
-          'name',
-          'description',
-          'category',
-          'formula',
-          'active',
-          'state',
-          'vizType',
-          'schedule',
-          'scheduleId',
-          'timezone',
-          'version',
-          'createdAt',
-          'updatedAt',
-          'creator',
-          'updater',
-          'thumbnail'
-        ],
+        fields: ['name', 'description'],
         details: [
           'name',
           'description',
@@ -206,6 +189,18 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        // KPI 실적값 계산 버튼 추가
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'calculate',
+          title: '실적값 계산',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              this._calculateKpiValue(record)
+            }
+          }
+        },
         {
           type: 'string',
           name: 'name',
@@ -244,15 +239,150 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
           record: {
             editable: true,
             availableVariables: async () => {
-              return await this.getAvailableVariables()
+              return await this.getAvailableKpiMetricVariables()
             }
           },
           width: 320
         },
+        {
+          type: 'select',
+          name: 'periodType',
+          header: '계산주기',
+          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: 'formula',
+          name: 'scoreFormula',
+          header: '성과점수수식',
+          record: {
+            editable: true,
+            availableVariables: async () => {
+              return [
+                {
+                  name: 'value',
+                  description: 'KPI 실적값',
+                  type: 'kpi-value',
+                  unit: ''
+                }
+              ]
+            },
+            includeDefaultFunctions: false,
+            availableFunctions: [
+              {
+                name: 'INTEGRATE()',
+                description: '수치 적분',
+                template: 'INTEGRATE({func}, {a}, {b}, {n})',
+                syntax: 'INTEGRATE(func, a, b, n)',
+                parameters: ['func - 적분할 함수', 'a - 하한값', 'b - 상한값', 'n - 분할 수 (기본값: 1000)'],
+                returnType: 'number',
+                help: '사다리꼴 적분법을 사용하여 수치 적분을 계산합니다.',
+                examples: ['INTEGRATE(x => x*x, 0, 1, 1000)', 'INTEGRATE([효율성], 0, 1)']
+              },
+              {
+                name: 'BETA_FUNCTION()',
+                description: '베타 함수',
+                template: 'BETA_FUNCTION({x}, {alpha}, {beta})',
+                syntax: 'BETA_FUNCTION(x, alpha, beta)',
+                parameters: ['x - 변수 (0 ≤ x ≤ 1)', 'alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                returnType: 'number',
+                help: '베타 분포 함수를 계산합니다. t^(α-1) × (1-t)^(β-1)',
+                examples: ['BETA_FUNCTION(0.5, 2, 3)', 'BETA_FUNCTION([품질지수], 3, 2)']
+              },
+              {
+                name: 'INCOMPLETE_BETA()',
+                description: '불완전 베타 함수',
+                template: 'INCOMPLETE_BETA({x}, {alpha}, {beta})',
+                syntax: 'INCOMPLETE_BETA(x, alpha, beta)',
+                parameters: ['x - 상한값 (0 ≤ x ≤ 1)', 'alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                returnType: 'number',
+                help: '불완전 베타 함수를 수치 적분으로 계산합니다.',
+                examples: ['INCOMPLETE_BETA(0.7, 2, 3)', 'INCOMPLETE_BETA([목표달성률]/100, 2, 3)']
+              },
+              {
+                name: 'COMPLETE_BETA()',
+                description: '완전 베타 함수',
+                template: 'COMPLETE_BETA({alpha}, {beta})',
+                syntax: 'COMPLETE_BETA(alpha, beta)',
+                parameters: ['alpha - 첫 번째 모수', 'beta - 두 번째 모수'],
+                returnType: 'number',
+                help: '완전 베타 함수 B(α,β)를 계산합니다.',
+                examples: ['COMPLETE_BETA(2, 3)', 'COMPLETE_BETA(3, 2)']
+              },
+              {
+                name: 'PERFORMANCE_INDEX()',
+                description: '성과 지수',
+                template: 'PERFORMANCE_INDEX({x}, {alpha1}, {beta1}, {alpha2}, {beta2})',
+                syntax: 'PERFORMANCE_INDEX(x, alpha1, beta1, alpha2, beta2)',
+                parameters: [
+                  'x - 성과 값 (0 ≤ x ≤ 1)',
+                  'alpha1, beta1 - 분자 베타 함수 모수',
+                  'alpha2, beta2 - 분모 베타 함수 모수'
+                ],
+                returnType: 'number',
+                help: '성과 지수를 계산합니다: 1 - (불완전 베타 / 완전 베타)',
+                examples: ['PERFORMANCE_INDEX(0.8, 2, 3, 2, 3)', 'PERFORMANCE_INDEX([성과점수]/100, 2, 3, 2, 3)']
+              },
+              {
+                name: 'EXP()',
+                description: '지수 함수',
+                template: 'EXP({x})',
+                syntax: 'EXP(x)',
+                parameters: ['x - 지수'],
+                returnType: 'number',
+                help: '자연상수 e의 x제곱을 계산합니다.',
+                examples: ['EXP(1)', 'EXP([효율성])']
+              },
+              {
+                name: 'LOG()',
+                description: '자연 로그',
+                template: 'LOG({x})',
+                syntax: 'LOG(x)',
+                parameters: ['x - 로그를 취할 값'],
+                returnType: 'number',
+                help: '자연 로그 ln(x)를 계산합니다.',
+                examples: ['LOG(2.718)', 'LOG([성과점수])']
+              },
+              {
+                name: 'POW()',
+                description: '거듭제곱',
+                template: 'POW({x}, {y})',
+                syntax: 'POW(x, y)',
+                parameters: ['x - 밑수', 'y - 지수'],
+                returnType: 'number',
+                help: 'x의 y제곱을 계산합니다.',
+                examples: ['POW(2, 3)', 'POW([효율성], 2)']
+              },
+              {
+                name: 'EXPONENTIAL_DECAY()',
+                description: '지수 감쇠',
+                template: 'EXPONENTIAL_DECAY({value}, {scale}, {power})',
+                syntax: 'EXPONENTIAL_DECAY(value, scale, power)',
+                parameters: ['value - 입력 값', 'scale - 스케일 파라미터', 'power - 지수 파라미터'],
+                returnType: 'number',
+                help: '지수 감쇠 함수 exp(-(value/scale)^power)를 계산합니다.',
+                examples: ['EXPONENTIAL_DECAY(50, 100, 2)', 'EXPONENTIAL_DECAY([목표달성률], 50, 2)']
+              }
+            ]
+          },
+          width: 200
+        },
         {
           type: 'string',
           name: 'grades',
-          header: '등급 설정',
+          header: '성과지수 Lookup',
           record: {
             editable: false,
             renderer: (v, c, r) => {
@@ -369,11 +499,13 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
               name
               description
               active
+              formula
+              periodType
+              scoreFormula
               grades
               vizType
               vizMeta
               weight
-              formula
               schedule
               scheduleId
               timezone
@@ -648,4 +780,30 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
       })
     }
   }
+
+  async _calculateKpiValue(kpi) {
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($kpiId: String!) {
+            calculateKpiValue(kpiId: $kpiId) {
+              id
+              value
+              valueDate
+              group
+            }
+          }
+        `,
+        variables: {
+          kpiId: kpi.id
+        }
+      })
+      if (!response.errors) {
+        notify({ message: 'KPI 실적값이 성공적으로 계산되었습니다.' })
+        this.grist.fetch()
+      }
+    } catch (error) {
+      notify({ message: 'KPI 실적값 계산 중 오류가 발생했습니다.' })
+    }
+  }
 }

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

@@ -20,6 +20,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import gql from 'graphql-tag'
 
 import { KpiCategoryImporter } from './kpi-category-importer'
+import { KpiCategoryValueCalculator } from './kpi-category-value-calculator'
 
 @customElement('kpi-category-list-page')
 export class KpiCategoryListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
@@ -50,7 +51,8 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
 
   static get scopedElements() {
     return {
-      'kpi-category-importer': KpiCategoryImporter
+      'kpi-category-importer': KpiCategoryImporter,
+      'kpi-category-value-calculator': KpiCategoryValueCalculator
     }
   }
 
@@ -159,12 +161,45 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
-        fields: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater'],
-        details: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater']
+        fields: [
+          'name',
+          'description',
+          'active',
+          'formula',
+          'weight',
+          'periodType',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ],
+        details: [
+          'name',
+          'description',
+          'active',
+          'formula',
+          'weight',
+          'periodType',
+          'createdAt',
+          'updatedAt',
+          'creator',
+          'updater'
+        ]
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'calculate',
+          title: '실적값 계산',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              this.openCalculator(record)
+            }
+          }
+        },
         {
           type: 'string',
           name: 'name',
@@ -201,6 +236,26 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
           record: { editable: true },
           width: 80
         },
+        {
+          type: 'select',
+          name: 'periodType',
+          header: '계산주기',
+          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',
@@ -264,6 +319,7 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
               active
               formula
               weight
+              periodType
               updater {
                 id
                 name
@@ -461,4 +517,21 @@ export class KpiCategoryListPage extends connect(store)(localize(i18next)(Scoped
       this.grist.fetch()
     }
   }
+
+  private async openCalculator(record: any) {
+    const popup = openPopup(
+      html`
+        <kpi-category-value-calculator
+          .categoryId=${record.id}
+          .categoryName=${record.name}
+          @closed=${() => popup.close()}
+        ></kpi-category-value-calculator>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.calculate kpi value')
+      }
+    )
+  }
 }