@things-factory/kpi 9.0.21 → 9.0.22

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-dashboard/kpi-dashboard.ts

@@ -13,6 +13,8 @@ import './kpi-history-viewer'
 import './kpi-list-summary'
 import './kpi-value-entry'
 import './kpi-alert-panel'
+import '../../charts/kpi-radar-chart'
+import '../../charts/kpi-boxplot-chart'
 
 @customElement('kpi-dashboard')
 export class KpiDashboardPage extends PageView {
@@ -28,6 +30,35 @@ export class KpiDashboardPage extends PageView {
         flex: 1;
         padding: 24px;
       }
+      .sample-charts-section {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 48px;
+        align-items: flex-start;
+      }
+      .sample-chart-card {
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        border: 1px solid #ececec;
+        padding: 24px 32px;
+        min-width: 340px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        min-height: 500px;
+      }
+      .sample-chart-title {
+        font-size: 1.1rem;
+        font-weight: bold;
+        margin-bottom: 12px;
+      }
+      .sample-chart-container {
+        width: 100%;
+        height: 340px;
+        min-height: 340px;
+      }
       .category-section {
         margin-bottom: 40px;
       }
@@ -79,6 +110,127 @@ export class KpiDashboardPage extends PageView {
   @state() modalHistories: any[] = []
   @state() modalKpiName: string = ''
 
+  // 샘플 데이터
+  private get sampleCategories(): string[] {
+    return ['생산성', '품질', '안전', '환경', '비용', '일정']
+  }
+  private get sampleGroups(): string[] {
+    return ['A', 'B', 'C']
+  }
+  private get sampleSeriesData(): any[] {
+    // 각 카테고리별로 10개 이상의 다양한 값(평균, 분산, 이상치 포함)
+    // 생산성: 평균 높고 분산 큼, 이상치 포함
+    const 생산성 = [95, 92, 90, 88, 85, 80, 78, 75, 70, 60, 100] // 100은 이상치
+    // 품질: 평균 높고 분산 작음
+    const 품질 = [90, 89, 88, 87, 86, 85, 84, 83, 82, 80, 70]
+    // 안전: 평균 중간, 이상치 포함
+    const 안전 = [92, 91, 90, 89, 88, 87, 86, 85, 84, 65, 60] // 60은 이상치
+    // 환경: 낮은 값에 몰림, 분산 큼
+    const 환경 = [95, 90, 85, 80, 75, 70, 65, 60, 60, 60, 55]
+    // 비용: 전체적으로 낮음, 이상치 포함
+    const 비용 = [80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 50] // 50은 이상치
+    // 일정: 분산 큼, 이상치 포함
+    const 일정 = [90, 88, 86, 84, 82, 80, 78, 76, 74, 60, 100] // 100은 이상치
+
+    const categories = this.sampleCategories
+    const groups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
+    const all: any[] = []
+    categories.forEach((cat, i) => {
+      let arr: number[] = []
+      switch (cat) {
+        case '생산성':
+          arr = 생산성
+          break
+        case '품질':
+          arr = 품질
+          break
+        case '안전':
+          arr = 안전
+          break
+        case '환경':
+          arr = 환경
+          break
+        case '비용':
+          arr = 비용
+          break
+        case '일정':
+          arr = 일정
+          break
+      }
+      arr.forEach((v, idx) => {
+        all.push({ group: groups[idx] ?? `G${idx + 1}`, category: cat, value: v })
+      })
+    })
+    return all
+  }
+  private get sampleRadarData(): any[] {
+    // 카테고리별로 min, max, avg, A(자신의 그룹)만 반환
+    const categories = this.sampleCategories
+    const data = this.sampleSeriesData
+    const minData: any = { group: 'Min' }
+    const maxData: any = { group: 'Max' }
+    const avgData: any = { group: 'Avg' }
+    const aData: any = { group: 'A' }
+    categories.forEach(category => {
+      const values = data.filter(d => d.category === category).map(d => d.value)
+      minData[category] = Math.min(...values)
+      maxData[category] = Math.max(...values)
+      avgData[category] = values.reduce((a, b) => a + b, 0) / values.length
+      aData[category] = data.find(d => d.category === category && d.group === 'A')?.value ?? avgData[category]
+    })
+    // kpi-radar-chart가 기대하는 구조로 변환: [{group, category, value} ...]
+    const result: any[] = []
+    categories.forEach(category => {
+      result.push({ group: 'Min', category, value: minData[category] })
+      result.push({ group: 'Max', category, value: maxData[category] })
+      result.push({ group: 'Avg', category, value: avgData[category] })
+      result.push({ group: 'A', category, value: aData[category] })
+    })
+    return result
+  }
+  private get sampleRadarCategories(): string[] {
+    return this.sampleCategories
+  }
+  private get sampleRadarGroups(): string[] {
+    return this.sampleGroups
+  }
+  private get sampleBoxplotData(): any[] {
+    // 카테고리별로 그룹별 value의 분포 계산
+    const categories = this.sampleCategories
+    const data = this.sampleSeriesData
+    return categories.map(category => {
+      const values = data.filter(d => d.category === category).map(d => d.value)
+      const sorted = [...values].sort((a, b) => a - b)
+      const min = sorted[0]
+      const max = sorted[sorted.length - 1]
+      const mean = values.reduce((a, b) => a + b, 0) / values.length
+      const median =
+        sorted.length % 2 === 0
+          ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2
+          : sorted[Math.floor(sorted.length / 2)]
+      const q1 = sorted[Math.floor(sorted.length / 4)]
+      const q3 = sorted[Math.floor((sorted.length * 3) / 4)]
+      // value: A그룹의 실제값(강조)
+      const value = data.find(d => d.category === category && d.group === 'A')?.value ?? mean
+      return {
+        group: category, // x축: 카테고리
+        min,
+        q1,
+        median,
+        q3,
+        max,
+        mean,
+        value
+      }
+    })
+  }
+  private get sampleBoxplotGroups(): string[] {
+    return this.sampleCategories
+  }
+  private get sampleCurrentGroup() {
+    return 'A'
+  }
+
   connectedCallback() {
     super.connectedCallback()
     this.fetchCategories()
@@ -313,6 +465,42 @@ export class KpiDashboardPage extends PageView {
     if (this.error) return html`<div>${this.error}</div>`
     return html`
       <div class="dashboard-root">
+        <!-- 샘플 차트 섹션 -->
+        <div class="sample-charts-section">
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 KPI 비교 (Radar)</div>
+            <div class="sample-chart-container">
+              <kpi-radar-chart
+                .data=${this.sampleRadarData ?? []}
+                .categories=${this.sampleRadarCategories ?? []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></kpi-radar-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Radar 차트</b>는 각 카테고리별로 최소(Min), 최대(Max), 평균(Avg), 그리고 이 프로젝트의 값을 한눈에
+              비교할 수 있도록 시각화합니다.<br />
+              <b>진한 파란색</b> 다각형이 이 프로젝트의 성과이며, 회색 다각형은 기준값(최소/최대/평균)입니다.
+            </div>
+          </div>
+          <div class="sample-chart-card">
+            <div class="sample-chart-title">그룹별 분포 (Boxplot)</div>
+            <div class="sample-chart-container">
+              <kpi-boxplot-chart
+                .data=${this.sampleBoxplotData ?? []}
+                .groups=${this.sampleBoxplotGroups ?? []}
+                .currentGroup=${this.sampleCurrentGroup}
+              ></kpi-boxplot-chart>
+            </div>
+            <div style="margin-top:12px;color:#666;font-size:0.98em;">
+              ※ <b>Boxplot(박스플롯)</b>은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치
+              등)를 보여줍니다.<br />
+              <b>박스</b>는 중앙 50% 구간, <b>수염</b>은 전체 범위, <b>굵은 검정색 가로선</b>은 중앙값(메디안),
+              <b>주황색 원</b>은 평균값(Mean)을 의미합니다.<br />
+              <b>이 프로젝트의 값</b>은 <b>진한 오렌지색 원</b>으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수
+              있습니다.<br />
+            </div>
+          </div>
+        </div>
         ${this.showHistoryModal
           ? html`
               <div

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class KpiBoxplotChart extends LitElement {
+    data: any[];
+    groups: string[];
+    minKey: string;
+    maxKey: string;
+    meanKey: string;
+    medianKey: string;
+    q1Key: string;
+    q3Key: string;
+    valueKey: string;
+    currentGroup: string;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    drawBoxplot(): void;
+}