@things-factory/kpi 9.0.31 → 9.0.32

package/design-entities.md

@@ -1,12 +1,11 @@
-
 # KPI 모듈 엔티티 설계
 
 ## 1. KPI (핵심성과지표)
+
 - **id**: string (PK)
 - **name**: string (지표명)
 - **code**: string (지표코드, unique)
 - **description**: string (설명)
-- **categoryId**: string (FK, KPI 카테고리)
 - **unit**: string (단위)
 - **formula**: string (산식)
 - **targetValue**: number (목표값)
@@ -16,13 +15,8 @@
 - **createdAt**: datetime
 - **updatedAt**: datetime
 
-## 2. KPI_CATEGORY (지표 분류)
-- **id**: string (PK)
-- **name**: string (분류명)
-- **description**: string
-- **parentId**: string (FK, 상위 분류)
-
 ## 3. KPI_VALUE (지표 실적값)
+
 - **id**: string (PK)
 - **kpiId**: string (FK, KPI)
 - **date**: date (실적 기준일)
@@ -32,13 +26,14 @@
 - **createdAt**: datetime
 
 ## 4. KPI_OWNER (담당자/조직)
+
 - **id**: string (PK)
 - **name**: string (이름/조직명)
 - **type**: enum('USER', 'DEPT')
 - **email**: string
 
-
 ## 5. KPI_HISTORY (변경이력)
+
 - **id**: string (PK)
 - **kpiId**: string (FK, KPI)
 - **changedAt**: datetime
@@ -48,6 +43,7 @@
 - **newValue**: string
 
 ## 6. METRIC (측정지표)
+
 - **id**: string (PK)
 - **name**: string (지표명)
 - **code**: string (지표코드, unique)
@@ -57,14 +53,15 @@
 - **createdAt**: datetime
 - **updatedAt**: datetime
 
-
 ## 7. KPI_METRIC_MAP (KPI-메트릭 매핑)
+
 - **id**: string (PK)
 - **kpiId**: string (FK, KPI)
 - **metricId**: string (FK, METRIC)
 - **order**: number (산식 내 사용 순서/우선순위)
 
 ## 8. KPI_GRADE (KPI별 등급/구간)
+
 - **id**: string (PK)
 - **kpiId**: string (FK, KPI)
 - **grade**: string (등급명, 예: A, B, C, D)
@@ -79,10 +76,8 @@
 ## 엔티티 간 릴레이션
 
 - **KPI** 1 --- N **KPI_VALUE** (한 KPI에 여러 실적값)
-- **KPI** N --- 1 **KPI_CATEGORY** (여러 KPI가 한 분류에 속함)
 - **KPI** N --- 1 **KPI_OWNER** (여러 KPI가 한 담당자/조직에 속함)
 - **KPI** 1 --- N **KPI_HISTORY** (한 KPI에 여러 변경이력)
-- **KPI_CATEGORY** N --- 1 **KPI_CATEGORY** (상위-하위 분류 구조)
 - **KPI** N --- M **METRIC** (KPI와 Metric은 N:M, KPI_METRIC_MAP으로 연결)
 
 - **KPI** 1 --- N **KPI_GRADE** (한 KPI에 여러 등급/구간)
@@ -90,6 +85,7 @@
 ---
 
 ## 확장 고려사항
+
 - KPI별 첨부파일, 알림설정, 외부연계정보 등은 추후 별도 엔티티로 확장 가능
 
 ---

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

@@ -10,6 +10,7 @@ export declare class KpiBoxplotChart extends LitElement {
     q3Key: string;
     valueKey: string;
     currentGroup: string;
+    independentScale: boolean;
     static styles: import("lit").CSSResult;
     private chartWidth;
     private chartHeight;
@@ -18,5 +19,6 @@ export declare class KpiBoxplotChart extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): void;
+    private getOrgValue;
     drawBoxplot(): void;
 }

package/dist-client/charts/kpi-boxplot-chart.js

@@ -6,7 +6,7 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
     constructor() {
         super(...arguments);
         this.data = [];
-        this.groups = [];
+        this.groups = []; // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)
         this.minKey = 'min';
         this.maxKey = 'max';
         this.meanKey = 'mean';
@@ -15,8 +15,10 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
         this.q3Key = 'q3';
         this.valueKey = 'value';
         this.currentGroup = '';
+        this.independentScale = false;
         this.chartWidth = 0;
         this.chartHeight = 0;
+        this.getOrgValue = (d) => d.org || d.group;
     }
     static { this.styles = css `
     :host {
@@ -61,94 +63,214 @@ let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
     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;
+        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)
             .attr('height', h)
             .append('g')
             .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);
             }
-        });
+        }
     }
 };
 __decorate([
@@ -191,6 +313,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], KpiBoxplotChart.prototype, "currentGroup", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], KpiBoxplotChart.prototype, "independentScale", void 0);
 KpiBoxplotChart = __decorate([
     customElement('kpi-boxplot-chart')
 ], KpiBoxplotChart);

package/dist-client/charts/kpi-boxplot-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/charts/kpi-boxplot-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('kpi-boxplot-chart')\nexport class KpiBoxplotChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) groups: string[] = []\n  @property({ type: String }) minKey: string = 'min'\n  @property({ type: String }) maxKey: string = 'max'\n  @property({ type: String }) meanKey: string = 'mean'\n  @property({ type: String }) medianKey: string = 'median'\n  @property({ type: String }) q1Key: string = 'q1'\n  @property({ type: String }) q3Key: string = 'q3'\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  render() {\n    return html`<svg\n      id=\"boxplot\"\n      width=${this.chartWidth}\n      height=${this.chartHeight}\n      viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n      preserveAspectRatio=\"xMidYMid meet\"\n    ></svg>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const rect = entry.contentRect\n        this.chartWidth = rect.width\n        this.chartHeight = rect.height\n        this.requestUpdate()\n      }\n    })\n    this.resizeObserver.observe(this)\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  updated() {\n    this.drawBoxplot()\n  }\n\n  drawBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n    svg.selectAll('*').remove()\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n    const margin = { top: 20, right: 20, bottom: 40, left: 40 }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n\n    // x축: 그룹\n    const x = d3.scaleBand().domain(this.groups).range([0, plotW]).padding(0.4)\n    // y축: 값\n    const allValues = this.data.flatMap(d => [\n      d[this.minKey],\n      d[this.maxKey],\n      d[this.q1Key],\n      d[this.q3Key],\n      d[this.medianKey],\n      d[this.meanKey],\n      d[this.valueKey]\n    ])\n    const y = d3\n      .scaleLinear()\n      .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])\n      .nice()\n      .range([plotH, 0])\n\n    const g = svg\n      .attr('width', w)\n      .attr('height', h)\n      .append('g')\n      .attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 축\n    g.append('g').call(d3.axisLeft(y))\n    g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))\n\n    // 박스플롯\n    this.data.forEach(d => {\n      const gx = x(d.group) ?? 0\n      // 박스\n      g.append('rect')\n        .attr('x', gx)\n        .attr('y', y(d[this.q3Key]))\n        .attr('width', x.bandwidth())\n        .attr('height', y(d[this.q1Key]) - y(d[this.q3Key]))\n        .attr('fill', d.group === this.currentGroup ? '#2196f3' : '#bbb')\n        .attr('opacity', 0.5)\n      // 중앙선(중앙값)\n      g.append('line')\n        .attr('x1', gx)\n        .attr('x2', gx + x.bandwidth())\n        .attr('y1', y(d[this.medianKey]))\n        .attr('y2', y(d[this.medianKey]))\n        .attr('stroke', '#333')\n        .attr('stroke-width', 2)\n      // 수염(min-max)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 2)\n        .attr('x2', gx + x.bandwidth() / 2)\n        .attr('y1', y(d[this.minKey]))\n        .attr('y2', y(d[this.maxKey]))\n        .attr('stroke', '#333')\n      // min/max\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', y(d[this.minKey]))\n        .attr('y2', y(d[this.minKey]))\n        .attr('stroke', '#333')\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', y(d[this.maxKey]))\n        .attr('y2', y(d[this.maxKey]))\n        .attr('stroke', '#333')\n      // 평균값\n      g.append('circle')\n        .attr('cx', gx + x.bandwidth() / 2)\n        .attr('cy', y(d[this.meanKey]))\n        .attr('r', 4)\n        .attr('fill', 'orange')\n    })\n    // 현재 그룹 값 강조\n    this.data.forEach(d => {\n      if (d.group === this.currentGroup) {\n        g.append('circle')\n          .attr('cx', x(d.group) + x.bandwidth() / 2)\n          .attr('cy', y(d[this.valueKey]))\n          .attr('r', 6)\n          .attr('fill', '#e91e63')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 2)\n      }\n    })\n  }\n}\n"]}
+{"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/charts/kpi-boxplot-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\n@customElement('kpi-boxplot-chart')\nexport class KpiBoxplotChart extends LitElement {\n  @property({ type: Array }) data: any[] = []\n  @property({ type: Array }) groups: string[] = [] // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)\n  @property({ type: String }) minKey: string = 'min'\n  @property({ type: String }) maxKey: string = 'max'\n  @property({ type: String }) meanKey: string = 'mean'\n  @property({ type: String }) medianKey: string = 'median'\n  @property({ type: String }) q1Key: string = 'q1'\n  @property({ type: String }) q3Key: string = 'q3'\n  @property({ type: String }) valueKey: string = 'value'\n  @property({ type: String }) currentGroup: string = ''\n  @property({ type: Boolean }) independentScale: boolean = false\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `\n\n  private chartWidth = 0\n  private chartHeight = 0\n  private resizeObserver?: ResizeObserver\n\n  render() {\n    return html`<svg\n      id=\"boxplot\"\n      width=${this.chartWidth}\n      height=${this.chartHeight}\n      viewBox=\"0 0 ${this.chartWidth} ${this.chartHeight}\"\n      preserveAspectRatio=\"xMidYMid meet\"\n    ></svg>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const rect = entry.contentRect\n        this.chartWidth = rect.width\n        this.chartHeight = rect.height\n        this.requestUpdate()\n      }\n    })\n    this.resizeObserver.observe(this)\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  updated() {\n    this.drawBoxplot()\n  }\n\n  private getOrgValue = (d: any) => d.org || d.group\n\n  drawBoxplot() {\n    const svg = d3.select(this.renderRoot.querySelector('#boxplot'))\n    svg.selectAll('*').remove()\n    \n    // 데이터 검증\n    if (!this.data || this.data.length === 0) {\n      return\n    }\n    const w = this.chartWidth || 300\n    const h = this.chartHeight || 300\n    const margin = {\n      top: 20,\n      right: 20,\n      bottom: 40,\n      left: this.independentScale ? 20 : 40\n    }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n\n    // x축: 조직 단위 (그룹) - org 또는 group 필드 지원\n    const groups = this.groups.length > 0 ? this.groups : [...new Set(this.data.map(d => this.getOrgValue(d)).filter(org => org != null))]\n    if (groups.length === 0) {\n      console.warn('No valid groups found in data:', this.data)\n      return // 유효한 그룹이 없으면 차트를 그리지 않음\n    }\n    \n    console.log('Boxplot groups:', groups)\n    console.log('Data org values:', this.data.map(d => this.getOrgValue(d)))\n    console.log('Full data:', this.data)\n    console.log('Chart dimensions:', { w, h, plotW, plotH })\n    \n    const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4)\n\n    // y축 스케일 설정\n    let y: d3.ScaleLinear<number, number>\n\n    if (this.independentScale) {\n      // 독립 스케일: 각 시리즈별로 개별 스케일 생성\n      const yScales = this.data.map(d => {\n        const values = [\n          d[this.minKey],\n          d[this.maxKey],\n          d[this.q1Key],\n          d[this.q3Key],\n          d[this.medianKey],\n          d[this.meanKey],\n          d[this.valueKey]\n        ]\n        const min = d3.min(values) ?? 0\n        const max = d3.max(values) ?? 1\n        return {\n          org: d.org,\n          scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n        }\n      })\n\n      // 기본 y축은 첫 번째 스케일 사용\n      y = yScales[0]?.scale || d3.scaleLinear().domain([0, 1]).range([plotH, 0])\n    } else {\n      // 통합 스케일: 모든 데이터를 하나의 스케일에 맞춤\n      const allValues = this.data.flatMap(d => [\n        d[this.minKey],\n        d[this.maxKey],\n        d[this.q1Key],\n        d[this.q3Key],\n        d[this.medianKey],\n        d[this.meanKey],\n        d[this.valueKey]\n      ])\n      y = d3\n        .scaleLinear()\n        .domain([d3.min(allValues) ?? 0, d3.max(allValues) ?? 1])\n        .nice()\n        .range([plotH, 0])\n    }\n\n    const g = svg\n      .attr('width', w)\n      .attr('height', h)\n      .append('g')\n      .attr('transform', `translate(${margin.left},${margin.top})`)\n\n    // 축\n    if (!this.independentScale) {\n      g.append('g').call(d3.axisLeft(y))\n    }\n    g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x))\n\n    // 박스플롯 - 각 그룹별로 박스 생성\n    groups.forEach(groupName => {\n      // 해당 그룹의 데이터 찾기\n      const groupData = this.data.find(d => this.getOrgValue(d) === groupName)\n      console.log(`Searching for group: ${groupName}, found:`, groupData)\n      if (!groupData) {\n        console.warn(`No data found for group: ${groupName}. Available data:`, this.data.map(d => ({ org: d.org, keys: Object.keys(d) })))\n        return\n      }\n      \n      // 필수 필드 검증\n      const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey]\n      const missingFields = requiredFields.filter(field => groupData[field] == null)\n      if (missingFields.length > 0) {\n        console.warn(`Missing required fields for group ${groupName}:`, missingFields)\n        console.log('Group data:', groupData)\n        return\n      }\n      \n      const gx = x(groupName) ?? 0\n      console.log(`Drawing box for ${groupName} at x=${gx}, bandwidth=${x.bandwidth()}`)\n\n      // 독립 스케일 사용 시 해당 그룹의 스케일 찾기\n      let currentY = y\n      if (this.independentScale) {\n        const values = [\n          groupData[this.minKey],\n          groupData[this.maxKey],\n          groupData[this.q1Key],\n          groupData[this.q3Key],\n          groupData[this.medianKey],\n          groupData[this.meanKey],\n          groupData[this.valueKey]\n        ]\n        const min = d3.min(values) ?? 0\n        const max = d3.max(values) ?? 1\n        currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n      }\n\n      // Outlier 계산 (1.5 * IQR 규칙)\n      const iqr = groupData[this.q3Key] - groupData[this.q1Key]\n      const lowerFence = groupData[this.q1Key] - 1.5 * iqr\n      const upperFence = groupData[this.q3Key] + 1.5 * iqr\n\n      // 실제 min/max 값 (fence 내부)\n      const actualMin = Math.max(groupData[this.minKey], lowerFence)\n      const actualMax = Math.min(groupData[this.maxKey], upperFence)\n\n      // 박스\n      g.append('rect')\n        .attr('x', gx)\n        .attr('y', currentY(groupData[this.q3Key]))\n        .attr('width', x.bandwidth())\n        .attr('height', currentY(groupData[this.q1Key]) - currentY(groupData[this.q3Key]))\n        .attr('fill', this.getOrgValue(groupData) === this.currentGroup ? '#2196f3' : '#bbb')\n        .attr('opacity', 0.5)\n\n      // 중앙선(중앙값)\n      g.append('line')\n        .attr('x1', gx)\n        .attr('x2', gx + x.bandwidth())\n        .attr('y1', currentY(groupData[this.medianKey]))\n        .attr('y2', currentY(groupData[this.medianKey]))\n        .attr('stroke', '#333')\n        .attr('stroke-width', 2)\n\n      // 수염 (fence 내부의 min-max)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 2)\n        .attr('x2', gx + x.bandwidth() / 2)\n        .attr('y1', currentY(actualMin))\n        .attr('y2', currentY(actualMax))\n        .attr('stroke', '#333')\n\n      // min/max 선 (fence 내부)\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', currentY(actualMin))\n        .attr('y2', currentY(actualMin))\n        .attr('stroke', '#333')\n      g.append('line')\n        .attr('x1', gx + x.bandwidth() / 4)\n        .attr('x2', gx + (x.bandwidth() * 3) / 4)\n        .attr('y1', currentY(actualMax))\n        .attr('y2', currentY(actualMax))\n        .attr('stroke', '#333')\n\n      // Outlier 표시 (fence 외부의 값들)\n      if (groupData[this.minKey] < lowerFence) {\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(groupData[this.minKey]))\n          .attr('r', 3)\n          .attr('fill', '#ff4444')\n          .attr('stroke', '#333')\n          .attr('stroke-width', 1)\n      }\n      if (groupData[this.maxKey] > upperFence) {\n        g.append('circle')\n          .attr('cx', gx + x.bandwidth() / 2)\n          .attr('cy', currentY(groupData[this.maxKey]))\n          .attr('r', 3)\n          .attr('fill', '#ff4444')\n          .attr('stroke', '#333')\n          .attr('stroke-width', 1)\n      }\n\n      // 평균값\n      g.append('circle')\n        .attr('cx', gx + x.bandwidth() / 2)\n        .attr('cy', currentY(groupData[this.meanKey]))\n        .attr('r', 4)\n        .attr('fill', 'orange')\n    })\n    // 현재 그룹 값 강조\n    if (this.currentGroup && groups.includes(this.currentGroup)) {\n      const currentGroupData = this.data.find(d => this.getOrgValue(d) === this.currentGroup)\n      if (currentGroupData) {\n        let currentY = y\n        if (this.independentScale) {\n          const values = [\n            currentGroupData[this.minKey],\n            currentGroupData[this.maxKey],\n            currentGroupData[this.q1Key],\n            currentGroupData[this.q3Key],\n            currentGroupData[this.medianKey],\n            currentGroupData[this.meanKey],\n            currentGroupData[this.valueKey]\n          ]\n          const min = d3.min(values) ?? 0\n          const max = d3.max(values) ?? 1\n          currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])\n        }\n\n        g.append('circle')\n          .attr('cx', x(this.currentGroup) + x.bandwidth() / 2)\n          .attr('cy', currentY(currentGroupData[this.valueKey]))\n          .attr('r', 6)\n          .attr('fill', '#e91e63')\n          .attr('stroke', '#fff')\n          .attr('stroke-width', 2)\n      }\n    }\n  }\n}\n"]}

package/dist-client/charts/kpi-radar-chart.js

@@ -59,11 +59,11 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
         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,
+        // 데이터 변환: { 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 };
@@ -99,7 +99,7 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
                 .text(cat);
         });
         // 그룹별 폴리곤
-        groupData.forEach(gd => {
+        orgData.forEach(gd => {
             // 마지막에 첫 점을 한 번 더 추가
             const closedValues = [...gd.values, gd.values[0]];
             const line = d3
@@ -109,9 +109,9 @@ let KpiRadarChart = class KpiRadarChart extends LitElement {
             g.append('path')
                 .datum(closedValues)
                 .attr('d', line)
-                .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/dist-client/charts/kpi-radar-chart.js.map

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

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

@@ -16,6 +16,11 @@ declare const KpiListPage_base: (new (...args: any[]) => {
     disconnectedCallback(): void;
     stateChanged(_state: unknown): void;
     readonly isConnected: boolean;
+}) & (new (...args: any[]) => {
+    __preferenceProviders: {
+        [element: string]: import("@operato/p13n").PagePreferenceProvider;
+    };
+    getPagePreferenceProvider(element: string): import("@operato/p13n").PagePreferenceProvider | undefined;
 }) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
 export declare class KpiListPage extends KpiListPage_base {
     static styles: import("lit").CSSResult[];
@@ -29,7 +34,8 @@ export declare class KpiListPage extends KpiListPage_base {
     private grist;
     availableVariables: any[];
     availableVariablesLoaded: boolean;
-    getAvailableKpiMetricVariables(): Promise<any[]>;
+    hierarchicalView: boolean;
+    getAvailableKpiMetricVariables(currentKpi?: any): Promise<any>;
     get context(): {
         title: string;
         search: {
@@ -40,7 +46,11 @@ export declare class KpiListPage extends KpiListPage_base {
             handler: () => void;
         };
         help: string;
-        actions: {
+        actions: ({
+            title: string;
+            action: () => void;
+            icon: string;
+        } | {
             icon: string;
             emphasis: {
                 raised: boolean;
@@ -50,7 +60,7 @@ export declare class KpiListPage extends KpiListPage_base {
             };
             title: string;
             action: () => Promise<void>;
-        }[];
+        })[];
         exportable: {
             name: string;
             data: () => Promise<{}[]>;
@@ -77,5 +87,11 @@ export declare class KpiListPage extends KpiListPage_base {
     _editViz(kpi: any): Promise<void>;
     _onVizUpdated(kpiId: string, vizType: string, vizMeta: any): Promise<void>;
     _calculateKpiValue(kpi: any): Promise<void>;
+    _toggleHierarchicalView(): void;
+    fetchHierarchicalData(): Promise<{
+        total: number;
+        records: any[];
+    }>;
+    flattenTreeData(treeData: any[], level?: number): any[];
 }
 export {};