@dssp/dkpi 1.0.0-alpha.50 → 1.0.0-alpha.51

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

@@ -0,0 +1,24 @@
+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;
+    independentScale: boolean;
+    static styles: import("lit").CSSResult;
+    private chartWidth;
+    private chartHeight;
+    private resizeObserver?;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private getOrgValue;
+    drawBoxplot(): void;
+}

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

@@ -0,0 +1,328 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiBoxplotChart = class KpiBoxplotChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.groups = []; // 조직 단위 목록 (빈 배열이면 데이터에서 자동 추출)
+        this.minKey = 'min';
+        this.maxKey = 'max';
+        this.meanKey = 'mean';
+        this.medianKey = 'median';
+        this.q1Key = 'q1';
+        this.q3Key = 'q3';
+        this.valueKey = 'value';
+        this.currentGroup = '';
+        this.independentScale = false;
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+        this.getOrgValue = (d) => d.org || d.group;
+    }
+    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() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.drawBoxplot();
+    }
+    drawBoxplot() {
+        var _a, _b, _c, _d, _e;
+        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: this.independentScale ? 20 : 40
+        };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        // 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 => {
+                var _a, _b;
+                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 = (_a = d3.min(values)) !== null && _a !== void 0 ? _a : 0;
+                const max = (_b = d3.max(values)) !== null && _b !== void 0 ? _b : 1;
+                return {
+                    org: d.org,
+                    scale: d3.scaleLinear().domain([min, max]).nice().range([plotH, 0])
+                };
+            });
+            // 기본 y축은 첫 번째 스케일 사용
+            y = ((_a = yScales[0]) === null || _a === void 0 ? void 0 : _a.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([(_b = d3.min(allValues)) !== null && _b !== void 0 ? _b : 0, (_c = d3.max(allValues)) !== null && _c !== void 0 ? _c : 1])
+                .nice()
+                .range([plotH, 0]);
+        }
+        const g = svg
+            .attr('width', w)
+            .attr('height', h)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        // 축
+        if (!this.independentScale) {
+            g.append('g').call(d3.axisLeft(y));
+        }
+        g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x));
+        // 박스플롯 - 각 그룹별로 박스 생성
+        groups.forEach(groupName => {
+            var _a, _b, _c;
+            // 해당 그룹의 데이터 찾기
+            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 = (_a = x(groupName)) !== null && _a !== void 0 ? _a : 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 = (_b = d3.min(values)) !== null && _b !== void 0 ? _b : 0;
+                const max = (_c = d3.max(values)) !== null && _c !== void 0 ? _c : 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', currentY(groupData[this.q3Key]))
+                .attr('width', x.bandwidth())
+                .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', currentY(groupData[this.medianKey]))
+                .attr('y2', currentY(groupData[this.medianKey]))
+                .attr('stroke', '#333')
+                .attr('stroke-width', 2);
+            // 수염 (fence 내부의 min-max)
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 2)
+                .attr('x2', gx + x.bandwidth() / 2)
+                .attr('y1', currentY(actualMin))
+                .attr('y2', currentY(actualMax))
+                .attr('stroke', '#333');
+            // min/max 선 (fence 내부)
+            g.append('line')
+                .attr('x1', gx + x.bandwidth() / 4)
+                .attr('x2', gx + (x.bandwidth() * 3) / 4)
+                .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', 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', currentY(groupData[this.meanKey]))
+                .attr('r', 4)
+                .attr('fill', 'orange');
+        });
+        // 현재 그룹 값 강조
+        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 = (_d = d3.min(values)) !== null && _d !== void 0 ? _d : 0;
+                    const max = (_e = d3.max(values)) !== null && _e !== void 0 ? _e : 1;
+                    currentY = d3.scaleLinear().domain([min, max]).nice().range([plotH, 0]);
+                }
+                g.append('circle')
+                    .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);
+            }
+        }
+    }
+};
+KpiBoxplotChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiBoxplotChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiBoxplotChart.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "minKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "maxKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "meanKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "medianKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "q1Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "q3Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiBoxplotChart.prototype, "valueKey", void 0);
+__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);
+export { KpiBoxplotChart };
+//# sourceMappingURL=kpi-boxplot-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-boxplot-chart.js","sourceRoot":"","sources":["../../client/components/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/components/kpi-radar-chart.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class KpiRadarChart extends LitElement {
+    data: any[];
+    categories: 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;
+    drawRadar(): void;
+}

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

@@ -0,0 +1,139 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let KpiRadarChart = class KpiRadarChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        this.categories = [];
+        this.valueKey = 'value';
+        this.currentGroup = '';
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    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() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.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);
+        // 데이터 변환: { 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 };
+            })
+        }));
+        // 스케일
+        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);
+        });
+        // 그룹별 폴리곤
+        orgData.forEach(gd => {
+            // 마지막에 첫 점을 한 번 더 추가
+            const closedValues = [...gd.values, gd.values[0]];
+            const line = d3
+                .lineRadial()
+                .radius((d) => radius(d.value))
+                .angle((d, i) => i * angleSlice);
+            g.append('path')
+                .datum(closedValues)
+                .attr('d', line)
+                .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);
+        });
+    }
+};
+KpiRadarChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiRadarChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], KpiRadarChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiRadarChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiRadarChart.prototype, "currentGroup", void 0);
+KpiRadarChart = __decorate([
+    customElement('kpi-radar-chart')
+], KpiRadarChart);
+export { KpiRadarChart };
+//# sourceMappingURL=kpi-radar-chart.js.map

package/dist-client/components/kpi-radar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-radar-chart.js","sourceRoot":"","sources":["../../client/components/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/project-complete-tabs/pc-tab2-rating.d.ts

@@ -1,9 +1,11 @@
 import { LitElement } from 'lit';
 export declare class SvProjectCompleteTab2Rating extends LitElement {
     static styles: import("lit").CSSResult[];
-    data: any;
     kpiCategories: any;
+    kpiMetrics: any;
     render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    private _getInitData;
     private _setRatingHalf;
     private _save;
     private _reset;