@things-factory/kpi 9.0.30 → 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-mini-trend-chart.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import * as d3 from 'd3'
+
+@customElement('kpi-mini-trend-chart')
+export class KpiMiniTrendChart extends LitElement {
+  @property({ type: Array }) data: number[] = []
+  @property({ type: Number }) width: number = 60
+  @property({ type: Number }) height: number = 30
+  @property({ type: String }) lineColor: string = '#2196f3'
+  @property({ type: Number }) strokeWidth: number = 1.5
+  @property({ type: Boolean }) showPoints: boolean = true
+  @property({ type: Number }) pointRadius: number = 1.5
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .mini-chart {
+      width: 100%;
+      height: 100%;
+      background: #f8f9fa;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .trend-line {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .data-point {
+      fill: white;
+      stroke-width: 1;
+    }
+  `
+
+  render() {
+    return html`
+      <div class="mini-chart">
+        <svg
+          id="mini-trend"
+          width=${this.width}
+          height=${this.height}
+          viewBox="0 0 ${this.width} ${this.height}"
+          preserveAspectRatio="xMidYMid meet"
+        ></svg>
+      </div>
+    `
+  }
+
+  updated() {
+    this.drawMiniTrend()
+  }
+
+  drawMiniTrend() {
+    if (!this.data || this.data.length === 0) return
+
+    const svg = d3.select(this.renderRoot.querySelector('#mini-trend'))
+    svg.selectAll('*').remove()
+
+    const margin = { top: 2, right: 2, bottom: 2, left: 2 }
+    const width = this.width - margin.left - margin.right
+    const height = this.height - margin.top - margin.bottom
+
+    // 스케일 설정
+    const xScale = d3
+      .scaleLinear()
+      .domain([0, this.data.length - 1])
+      .range([0, width])
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, d3.max(this.data) || 100])
+      .range([height, 0])
+
+    // SVG 설정
+    svg.attr('width', this.width).attr('height', this.height)
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+
+    // 라인 생성기
+    const line = d3
+      .line<number>()
+      .x((d, i) => xScale(i))
+      .y(d => yScale(d))
+      .curve(d3.curveMonotoneX)
+
+    // 트렌드 라인 그리기
+    g.append('path')
+      .datum(this.data)
+      .attr('class', 'trend-line')
+      .attr('d', line as any)
+      .attr('stroke', this.lineColor)
+      .attr('stroke-width', this.strokeWidth)
+
+    // 데이터 포인트 그리기 (첫 번째와 마지막 포인트만)
+    if (this.showPoints && this.data.length > 0) {
+      // 첫 번째 포인트
+      g.append('circle')
+        .attr('class', 'data-point')
+        .attr('cx', xScale(0))
+        .attr('cy', yScale(this.data[0]))
+        .attr('r', this.pointRadius)
+        .attr('stroke', '#4caf50')
+        .attr('fill', 'white')
+
+      // 마지막 포인트
+      if (this.data.length > 1) {
+        g.append('circle')
+          .attr('class', 'data-point')
+          .attr('cx', xScale(this.data.length - 1))
+          .attr('cy', yScale(this.data[this.data.length - 1]))
+          .attr('r', this.pointRadius)
+          .attr('stroke', '#2196f3')
+          .attr('fill', 'white')
+      }
+    }
+  }
+}

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/charts/kpi-trend-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-trend-chart')
+export class KpiTrendChart extends LitElement {
+  @property({ type: Array }) data: { date: string; value: number; color?: string }[] = []
+  @property({ type: String }) valueKey: string = 'value'
+  @property({ type: String }) dateKey: string = 'date'
+  @property({ type: Number }) width: number = 400
+  @property({ type: Number }) height: number = 200
+  @property({ type: String }) lineColor: string = '#2196f3'
+  @property({ type: Number }) strokeWidth: number = 2
+  @property({ type: Boolean }) showPoints: boolean = true
+  @property({ type: Number }) pointRadius: number = 4
+
+  private chartWidth = 0
+  private chartHeight = 0
+  private resizeObserver?: ResizeObserver
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .trend-line {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .data-point {
+      fill: white;
+      stroke-width: 2;
+    }
+
+    .axis line,
+    .axis path {
+      stroke: #ddd;
+    }
+
+    .axis text {
+      font-size: 10px;
+      fill: #666;
+    }
+  `
+
+  render() {
+    return html`
+      <div class="chart-container">
+        <svg
+          id="trend-chart"
+          width=${this.chartWidth || this.width}
+          height=${this.chartHeight || this.height}
+          viewBox="0 0 ${this.chartWidth || this.width} ${this.chartHeight || this.height}"
+          preserveAspectRatio="xMidYMid meet"
+        ></svg>
+      </div>
+    `
+  }
+
+  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.drawTrendChart()
+  }
+
+  drawTrendChart() {
+    if (!this.data || this.data.length === 0) return
+
+    const svg = d3.select(this.renderRoot.querySelector('#trend-chart'))
+    svg.selectAll('*').remove()
+
+    const margin = { top: 20, right: 20, bottom: 30, left: 40 }
+    const width = this.chartWidth || this.width
+    const height = this.chartHeight || this.height
+    const chartWidth = width - margin.left - margin.right
+    const chartHeight = height - margin.top - margin.bottom
+
+    // 데이터 파싱
+    const parsedData = this.data.map(d => ({
+      date: new Date(d[this.dateKey]),
+      value: +d[this.valueKey],
+      color: d.color || this.lineColor
+    }))
+
+    // 스케일 설정
+    const xScale = d3
+      .scaleTime()
+      .domain(d3.extent(parsedData, d => d.date) as [Date, Date])
+      .range([0, chartWidth])
+
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, d3.max(parsedData, d => d.value) || 100])
+      .range([chartHeight, 0])
+
+    // SVG 설정
+    svg.attr('width', width).attr('height', height)
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
+
+    // 축 생성
+    const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat('%m/%d')).ticks(5)
+
+    const yAxis = d3.axisLeft(yScale).ticks(5)
+
+    g.append('g').attr('class', 'axis').attr('transform', `translate(0,${chartHeight})`).call(xAxis)
+
+    g.append('g').attr('class', 'axis').call(yAxis)
+
+    // 라인 생성기
+    const line = d3
+      .line<{ date: Date; value: number; color: string }>()
+      .x(d => xScale(d.date))
+      .y(d => yScale(d.value))
+      .curve(d3.curveMonotoneX)
+
+    // 트렌드 라인 그리기
+    g.append('path')
+      .datum(parsedData)
+      .attr('class', 'trend-line')
+      .attr('d', line as any)
+      .attr('stroke', this.lineColor)
+      .attr('stroke-width', this.strokeWidth)
+
+    // 데이터 포인트 그리기
+    if (this.showPoints) {
+      g.selectAll('.data-point')
+        .data(parsedData)
+        .enter()
+        .append('circle')
+        .attr('class', 'data-point')
+        .attr('cx', d => xScale(d.date))
+        .attr('cy', d => yScale(d.value))
+        .attr('r', this.pointRadius)
+        .attr('stroke', d => d.color)
+        .attr('fill', 'white')
+    }
+  }
+}