@things-factory/kpi 9.0.31 → 9.0.32

package/README.md

@@ -3,14 +3,13 @@
 ## 1. KPI란?
 
 - KPI(Key Performance Indicator)는 조직의 목표 달성도를 수치로 측정/관리하는 핵심 지표입니다.
-- KPI는 산식(formula), 목표값(target), 카테고리(category), 버전(version), 상태(state) 등 다양한 속성을 가집니다.
+- KPI는 산식(formula), 목표값(target), 버전(version), 상태(state) 등 다양한 속성을 가집니다.
 - KPI의 실적값(Performance Value)은 특정 시점/조직/프로젝트별로 기록됩니다.
 
 ## 2. KPI 모듈의 주요 엔티티
 
 - **Kpi**: KPI 정의(이름, 산식, 카테고리, 상태, 버전 등)
 - **KpiValue**: KPI별 실적값(날짜, 값, 입력방식, 소스 등)
-- **KpiCategory**: KPI 분류(트리 구조 가능)
 - **KpiMetric**: KPI 산식에 사용되는 원천 데이터 항목(코드, 단위, 데이터셋 등)
 - **KpiGrade**: KPI별 등급/구간(구간별 점수, 색상 등)
 - **KpiHistory**: KPI의 버전별 이력(스냅샷)

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

@@ -5,7 +5,7 @@ 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: Array }) groups: string[] = [] // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)
   @property({ type: String }) minKey: string = 'min'
   @property({ type: String }) maxKey: string = 'max'
   @property({ type: String }) meanKey: string = 'mean'
@@ -14,6 +14,7 @@ export class KpiBoxplotChart extends LitElement {
   @property({ type: String }) q3Key: string = 'q3'
   @property({ type: String }) valueKey: string = 'value'
   @property({ type: String }) currentGroup: string = ''
+  @property({ type: Boolean }) independentScale: boolean = false
 
   static styles = css`
     :host {
@@ -64,32 +65,83 @@ export class KpiBoxplotChart extends LitElement {
     this.drawBoxplot()
   }
 
+  private getOrgValue = (d: any) => d.org || d.group
+
   drawBoxplot() {
     const svg = d3.select(this.renderRoot.querySelector('#boxplot'))
     svg.selectAll('*').remove()
+    
+    // 데이터 검증
+    if (!this.data || this.data.length === 0) {
+      return
+    }
     const w = this.chartWidth || 300
     const h = this.chartHeight || 300
-    const margin = { top: 20, right: 20, bottom: 40, left: 40 }
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 40,
+      left: this.independentScale ? 20 : 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])
+    // x축: 조직 단위 (그룹) - org 또는 group 필드 지원
+    const groups = this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))]
+    if (groups.length === 0) {
+      console.warn('No valid groups found in data:', this.data)
+      return // 유효한 그룹이 없으면 차트를 그리지 않음
+    }
+    
+    console.log('Boxplot groups:', groups)
+    console.log('Data org values:', this.data.map(d => this.getOrgValue(d)))
+    console.log('Full data:', this.data)
+    console.log('Chart dimensions:', { w, h, plotW, plotH })
+    
+    const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4)
+
+    // y축 스케일 설정
+    let y: d3.ScaleLinear<number, number>
+
+    if (this.independentScale) {
+      // 독립 스케일: 각 시리즈별로 개별 스케일 생성
+      const yScales = this.data.map(d => {
+        const values = [
+          d[this.minKey],
+          d[this.maxKey],
+          d[this.q1Key],
+          d[this.q3Key],
+          d[this.medianKey],
+          d[this.meanKey],
+          d[this.valueKey]
+        ]
+        const min = d3.min(values) ?? 0
+        const max = d3.max(values) ?? 1
+        return {
+          org: d.org,
+          scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+        }
+      })
+
+      // 기본 y축은 첫 번째 스케일 사용
+      y = yScales[0]?.scale || d3.scaleLinear().domain([0, 1]).range([plotH, 0])
+    } else {
+      // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤
+      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]
+      ])
+      y = d3
+        .scaleLinear()
+        .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])
+        .nice()
+        .range([plotH, 0])
+    }
 
     const g = svg
       .attr('width', w)
@@ -98,66 +150,154 @@ export class KpiBoxplotChart extends LitElement {
       .attr('transform', `translate(${margin.left},${margin.top})`)
 
     // 축
-    g.append('g').call(d3.axisLeft(y))
+    if (!this.independentScale) {
+      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
+    // 박스플롯 - 각 그룹별로 박스 생성
+    groups.forEach(groupName => {
+      // 해당 그룹의 데이터 찾기
+      const groupData = this.data.find(d => this.getOrgValue(d) === groupName)
+      console.log(`Searching for group: ${groupName}, found:`, groupData)
+      if (!groupData) {
+        console.warn(`No data found for group: ${groupName}. Available data:`, this.data.map(d => ({ org: d.org, keys: Object.keys(d) })))
+        return
+      }
+      
+      // 필수 필드 검증
+      const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]
+      const missingFields = requiredFields.filter(field => groupData[field] == null)
+      if (missingFields.length > 0) {
+        console.warn(`Missing required fields for group ${groupName}:`, missingFields)
+        console.log('Group data:', groupData)
+        return
+      }
+      
+      const gx = x(groupName) ?? 0
+      console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`)
+
+      // 독립 스케일 사용 시 해당 그룹의 스케일 찾기
+      let currentY = y
+      if (this.independentScale) {
+        const values = [
+          groupData[this.minKey],
+          groupData[this.maxKey],
+          groupData[this.q1Key],
+          groupData[this.q3Key],
+          groupData[this.medianKey],
+          groupData[this.meanKey],
+          groupData[this.valueKey]
+        ]
+        const min = d3.min(values) ?? 0
+        const max = d3.max(values) ?? 1
+        currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+      }
+
+      // Outlier 계산 (1.5 * IQR 규칙)
+      const iqr = groupData[this.q3Key] - groupData[this.q1Key]
+      const lowerFence = groupData[this.q1Key] - 1.5 * iqr
+      const upperFence = groupData[this.q3Key] + 1.5 * iqr
+
+      // 실제 min/max 값 (fence 내부)
+      const actualMin = Math.max(groupData[this.minKey], lowerFence)
+      const actualMax = Math.min(groupData[this.maxKey], upperFence)
+
       // 박스
       g.append('rect')
         .attr('x', gx)
-        .attr('y', y(d[this.q3Key]))
+        .attr('y', currentY(groupData[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('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))
+        .attr('fill', this.getOrgValue(groupData) === 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('y1', currentY(groupData[this.medianKey]))
+        .attr('y2', currentY(groupData[this.medianKey]))
         .attr('stroke', '#333')
         .attr('stroke-width', 2)
-      // 수염(min-max)
+
+      // 수염 (fence 내부의 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('y1', currentY(actualMin))
+        .attr('y2', currentY(actualMax))
         .attr('stroke', '#333')
-      // min/max
+
+      // min/max 선 (fence 내부)
       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('y1', currentY(actualMin))
+        .attr('y2', currentY(actualMin))
         .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('y1', currentY(actualMax))
+        .attr('y2', currentY(actualMax))
         .attr('stroke', '#333')
+
+      // Outlier 표시 (fence 외부의 값들)
+      if (groupData[this.minKey] < lowerFence) {
+        g.append('circle')
+          .attr('cx', gx + x.bandwidth() / 2)
+          .attr('cy', currentY(groupData[this.minKey]))
+          .attr('r', 3)
+          .attr('fill', '#ff4444')
+          .attr('stroke', '#333')
+          .attr('stroke-width', 1)
+      }
+      if (groupData[this.maxKey] > upperFence) {
+        g.append('circle')
+          .attr('cx', gx + x.bandwidth() / 2)
+          .attr('cy', currentY(groupData[this.maxKey]))
+          .attr('r', 3)
+          .attr('fill', '#ff4444')
+          .attr('stroke', '#333')
+          .attr('stroke-width', 1)
+      }
+
       // 평균값
       g.append('circle')
         .attr('cx', gx + x.bandwidth() / 2)
-        .attr('cy', y(d[this.meanKey]))
+        .attr('cy', currentY(groupData[this.meanKey]))
         .attr('r', 4)
         .attr('fill', 'orange')
     })
     // 현재 그룹 값 강조
-    this.data.forEach(d => {
-      if (d.group === this.currentGroup) {
+    if (this.currentGroup && groups.includes(this.currentGroup)) {
+      const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup)
+      if (currentGroupData) {
+        let currentY = y
+        if (this.independentScale) {
+          const values = [
+            currentGroupData[this.minKey],
+            currentGroupData[this.maxKey],
+            currentGroupData[this.q1Key],
+            currentGroupData[this.q3Key],
+            currentGroupData[this.medianKey],
+            currentGroupData[this.meanKey],
+            currentGroupData[this.valueKey]
+          ]
+          const min = d3.min(values) ?? 0
+          const max = d3.max(values) ?? 1
+          currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+        }
+
         g.append('circle')
-          .attr('cx', x(d.group) + x.bandwidth() / 2)
-          .attr('cy', y(d[this.valueKey]))
+          .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)
+          .attr('cy', currentY(currentGroupData[this.valueKey]))
           .attr('r', 6)
           .attr('fill', '#e91e63')
           .attr('stroke', '#fff')
           .attr('stroke-width', 2)
       }
-    })
+    }
   }
 }

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

@@ -66,11 +66,11 @@ export class KpiRadarChart extends LitElement {
     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,
+    // 데이터 변환: { org, values: [ {category, value} ... ] }
+    const orgData = d3
+      .groups(this.data, d => d.org)
+      .map(([org, values]) => ({
+        org,
         values: this.categories.map((cat, i) => {
           const found = values.find(v => v.category === cat)
           return { category: cat, value: found ? found[this.valueKey] : 0 }
@@ -110,7 +110,7 @@ export class KpiRadarChart extends LitElement {
     })
 
     // 그룹별 폴리곤
-    groupData.forEach(gd => {
+    orgData.forEach(gd => {
       // 마지막에 첫 점을 한 번 더 추가
       const closedValues = [...gd.values, gd.values[0]]
       const line = d3
@@ -120,9 +120,9 @@ export class KpiRadarChart extends LitElement {
       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)
+        .attr('fill', gd.org === this.currentGroup ? 'rgba(33,150,243,0.4)' : 'rgba(200,200,200,0.2)')
+        .attr('stroke', gd.org === this.currentGroup ? '#2196f3' : '#aaa')
+        .attr('stroke-width', gd.org === this.currentGroup ? 3 : 1)
     })
   }
 }

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

@@ -17,6 +17,7 @@ import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { OxPopup, OxPrompt } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
+import { p13n } from '@operato/p13n'
 
 import { connect } from 'pwa-helpers/connect-mixin'
 import gql from 'graphql-tag'
@@ -26,7 +27,7 @@ import { KpiGradeEditor } from './kpi-grade-editor'
 import { KpiVizEditor } from './kpi-viz-editor'
 
 @customElement('kpi-list-page')
-export class KpiListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+export class KpiListPage extends connect(store)(p13n(localize(i18next)(ScopedElementsMixin(PageView)))) {
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -67,32 +68,65 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
 
   @state() availableVariables: any[] = []
   @state() availableVariablesLoaded = false
+  @state() hierarchicalView = false
 
-  async getAvailableKpiMetricVariables() {
-    if (this.availableVariablesLoaded) {
+  async getAvailableKpiMetricVariables(currentKpi?: any) {
+    // Leaf KPI인 경우: kpi-metric을 변수로 사용
+    if (!currentKpi || currentKpi.isLeaf) {
+      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
     }
-    const response = await client.query({
-      query: gql`
-        query {
-          kpiMetrics {
-            items {
-              name
-              description
-              unit
+
+    // 부모 KPI인 경우: 자식 KPI를 변수로 사용
+    try {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            kpi(id: $id) {
+              children {
+                id
+                name
+                description
+              }
             }
           }
+        `,
+        variables: {
+          id: currentKpi.id
         }
-      `
-    })
-    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
+      })
+
+      return (response.data.kpi.children || []).map(childKpi => ({
+        name: childKpi.name,
+        description: childKpi.description,
+        type: 'child-kpi'
+      }))
+    } catch (error) {
+      console.error('Failed to fetch child KPIs:', error)
+      return []
+    }
   }
 
   get context() {
@@ -111,6 +145,11 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
       },
       help: 'kpi/kpi',
       actions: [
+        {
+          title: this.hierarchicalView ? 'List View' : 'Tree View',
+          action: this._toggleHierarchicalView.bind(this),
+          icon: this.hierarchicalView ? 'list' : 'account_tree'
+        },
         {
           title: i18next.t('button.save'),
           action: this._updateKpi.bind(this),
@@ -136,7 +175,12 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
@@ -154,6 +198,8 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
             </ox-record-creator>
           </div>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
@@ -170,7 +216,6 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
         details: [
           'name',
           'description',
-          'category',
           'formula',
           'active',
           'state',
@@ -220,26 +265,36 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
         },
         {
           type: 'resource-object',
-          name: 'category',
+          name: 'parent',
           label: true,
-          header: '카테고리',
+          header: '상위 KPI',
           record: {
             editable: true,
             options: {
-              title: i18next.t('title.lookup category'),
-              queryName: 'kpiCategories'
+              title: i18next.t('title.lookup KPI'),
+              queryName: 'kpis',
+              basicArgs: {
+                filters: [{ name: 'isLeaf', operator: 'eq', value: false }]
+              }
             }
           },
           width: 200
         },
+        {
+          type: 'boolean',
+          name: 'isLeaf',
+          header: '리프 KPI',
+          record: { editable: true },
+          width: 100
+        },
         {
           type: 'formula',
           name: 'formula',
           header: '산식',
           record: {
             editable: true,
-            availableVariables: async () => {
-              return await this.getAvailableKpiMetricVariables()
+            availableVariables: async (value: string, column: ColumnConfig, record: any) => {
+              return await this.getAvailableKpiMetricVariables(record)
             }
           },
           width: 320
@@ -490,6 +545,10 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
   }
 
   async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    if (this.hierarchicalView) {
+      return this.fetchHierarchicalData()
+    }
+
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -510,11 +569,15 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
               scheduleId
               timezone
               version
-              category {
+              parent {
+                id
+                name
+              }
+              children {
                 id
                 name
-                description
               }
+              isLeaf
               updater {
                 id
                 name
@@ -790,7 +853,7 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
               id
               value
               valueDate
-              group
+              org
             }
           }
         `,
@@ -806,4 +869,105 @@ export class KpiListPage extends connect(store)(localize(i18next)(ScopedElements
       notify({ message: 'KPI 실적값 계산 중 오류가 발생했습니다.' })
     }
   }
+
+  _toggleHierarchicalView() {
+    this.hierarchicalView = !this.hierarchicalView
+    this.grist.fetch()
+  }
+
+  async fetchHierarchicalData() {
+    const response = await client.query({
+      query: gql`
+        query {
+          kpiTree {
+            id
+            name
+            description
+            active
+            formula
+            periodType
+            scoreFormula
+            grades
+            vizType
+            vizMeta
+            weight
+            schedule
+            scheduleId
+            timezone
+            version
+            parent {
+              id
+              name
+            }
+            children {
+              id
+              name
+              description
+              active
+              isLeaf
+              weight
+              children {
+                id
+                name
+                description
+                active
+                isLeaf
+                weight
+                children {
+                  id
+                  name
+                  description
+                  active
+                  isLeaf
+                  weight
+                }
+              }
+            }
+            isLeaf
+            updater {
+              id
+              name
+            }
+            updatedAt
+            creator {
+              id
+              name
+            }
+            createdAt
+          }
+        }
+      `
+    })
+
+    const flattenedRecords = this.flattenTreeData(response.data.kpiTree)
+
+    return {
+      total: flattenedRecords.length,
+      records: flattenedRecords
+    }
+  }
+
+  flattenTreeData(treeData: any[], level = 0): any[] {
+    const flattened: any[] = []
+
+    for (const item of treeData) {
+      const flattenedItem = {
+        ...item,
+        __level: level,
+        __hasChildren: item.children && item.children.length > 0,
+        __expanded: true
+      }
+
+      // Add indentation to name for visual hierarchy
+      flattenedItem.name = '  '.repeat(level) + (level > 0 ? '└ ' : '') + item.name
+
+      flattened.push(flattenedItem)
+
+      if (item.children && item.children.length > 0) {
+        flattened.push(...this.flattenTreeData(item.children, level + 1))
+      }
+    }
+
+    return flattened
+  }
 }