@dssp/dkpi 1.0.0-alpha.9 → 1.0.0-alpha.91

package/dist-client/components/kpi-2d-lookup-chart.js

@@ -0,0 +1,263 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+const SCORE_COLORS = {
+    5: '#1565c0',
+    4: '#4caf50',
+    3: '#ffc107',
+    2: '#ff9800',
+    1: '#e53935'
+};
+const SCORE_LABELS = {
+    5: '5점 (우수)',
+    4: '4점 (양호)',
+    3: '3점 (보통)',
+    2: '2점 (미흡)',
+    1: '1점 (매우 미흡)'
+};
+let Kpi2dLookupChart = class Kpi2dLookupChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.grades = null;
+        this.value = null;
+        this.progressRate = 50;
+        this.unit = '%';
+        this.kpiName = '';
+        this.chartWidth = 0;
+        this.chartHeight = 0;
+    }
+    render() {
+        return html `
+      <svg
+        id="lookup-2d-chart"
+        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.renderChart();
+    }
+    /**
+     * 단위 정합:
+     *   - this.value: metric value, % 단위 (예: 2.5 = 2.5%)
+     *   - row.boundary*: grade table, ratio 단위 (예: 0.025 = 2.5%)
+     *   - 비교 시 deviation (value %) 를 /100 해서 ratio 로 변환.
+     * deviation 인자가 이미 ratio 인 경우 (heatmap cell 그리기 등) 는 변환 안 함.
+     */
+    getScore(row, devRatio) {
+        if (devRatio < row.boundary5to4)
+            return 5;
+        if (devRatio < row.boundary4to3)
+            return 4;
+        if (devRatio < row.boundary3to2)
+            return 3;
+        if (devRatio < row.boundary2to1)
+            return 2;
+        return 1;
+    }
+    getCurrentScore() {
+        var _a;
+        if (this.value === null || !((_a = this.grades) === null || _a === void 0 ? void 0 : _a.rows))
+            return null;
+        const idx = Math.min(99, Math.max(0, Math.floor(this.progressRate)));
+        const row = this.grades.rows.find(r => r.progressRate === idx);
+        // value 가 % → ratio 변환 후 boundary 와 비교
+        return row ? this.getScore(row, this.value / 100) : null;
+    }
+    renderChart() {
+        var _a, _b;
+        const svg = d3.select(this.renderRoot.querySelector('#lookup-2d-chart'));
+        svg.selectAll('*').remove();
+        if (!((_b = (_a = this.grades) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.length)) {
+            svg.append('text')
+                .attr('x', this.chartWidth / 2).attr('y', this.chartHeight / 2)
+                .attr('text-anchor', 'middle').attr('fill', '#999').attr('font-size', '14px')
+                .text('No 2D grade data available');
+            return;
+        }
+        const w = this.chartWidth || 400;
+        const h = this.chartHeight || 250;
+        const margin = { top: 20, right: 80, bottom: 50, left: 60 };
+        const plotW = w - margin.left - margin.right;
+        const plotH = h - margin.top - margin.bottom;
+        if (plotW <= 0 || plotH <= 0)
+            return;
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        const rows = this.grades.rows;
+        // Y축 범위 (편차율, ratio 단위 = boundary 와 동일).
+        const allBoundaries = rows.flatMap(r => [r.boundary5to4, r.boundary4to3, r.boundary3to2, r.boundary2to1]);
+        let yMin = Math.min(...allBoundaries);
+        let yMax = Math.max(...allBoundaries);
+        // this.value 는 % 단위 → ratio (/100) 로 변환해 boundary 와 같은 축에서 처리
+        const valueRatio = this.value !== null ? this.value / 100 : null;
+        if (valueRatio !== null) {
+            yMin = Math.min(yMin, valueRatio);
+            yMax = Math.max(yMax, valueRatio);
+        }
+        const yPad = (yMax - yMin) * 0.1 || 0.01;
+        yMin -= yPad;
+        yMax += yPad;
+        // X축: 공정률 0~100
+        const xScale = d3.scaleLinear().domain([0, 100]).range([0, plotW]);
+        const yScale = d3.scaleLinear().domain([yMin, yMax]).range([plotH, 0]);
+        // 히트맵: 각 공정률(x) × 편차율(y) 셀의 점수를 색상으로
+        const xSteps = rows.map(r => r.progressRate).sort((a, b) => a - b);
+        const yStepCount = 50; // Y축 해상도
+        const yStep = (yMax - yMin) / yStepCount;
+        const xCellW = plotW / Math.max(xSteps.length, 1);
+        for (const row of rows) {
+            const xi = xScale(row.progressRate);
+            for (let j = 0; j < yStepCount; j++) {
+                const dev = yMin + j * yStep;
+                const score = this.getScore(row, dev);
+                g.append('rect')
+                    .attr('x', xi)
+                    .attr('y', yScale(dev + yStep))
+                    .attr('width', xCellW + 0.5) // 약간 겹쳐서 틈새 방지
+                    .attr('height', Math.abs(yScale(dev) - yScale(dev + yStep)) + 0.5)
+                    .attr('fill', SCORE_COLORS[score])
+                    .attr('opacity', 0.35);
+            }
+        }
+        // 경계선: 현재 공정률에서의 점수 전환선
+        const currentIdx = Math.min(99, Math.max(0, Math.floor(this.progressRate)));
+        const currentRow = rows.find(r => r.progressRate === currentIdx);
+        if (currentRow) {
+            const boundaries = [currentRow.boundary5to4, currentRow.boundary4to3, currentRow.boundary3to2, currentRow.boundary2to1];
+            boundaries.forEach(bdy => {
+                g.append('line')
+                    .attr('x1', xScale(this.progressRate)).attr('x2', xScale(this.progressRate))
+                    .attr('y1', yScale(bdy) - 3).attr('y2', yScale(bdy) + 3)
+                    .attr('stroke', '#333').attr('stroke-width', 2);
+            });
+        }
+        // 현재 공정률 수직선
+        g.append('line')
+            .attr('x1', xScale(this.progressRate)).attr('x2', xScale(this.progressRate))
+            .attr('y1', 0).attr('y2', plotH)
+            .attr('stroke', '#1565c0').attr('stroke-width', 1.5).attr('stroke-dasharray', '4,3');
+        // 현재 위치 포인트 (value % → ratio 변환해서 Y 좌표 매핑)
+        if (valueRatio !== null) {
+            g.append('circle')
+                .attr('cx', xScale(this.progressRate))
+                .attr('cy', yScale(valueRatio))
+                .attr('r', 7)
+                .attr('fill', '#e53935').attr('stroke', '#fff').attr('stroke-width', 2.5);
+            // 현재 편차율 수평선
+            g.append('line')
+                .attr('x1', 0).attr('x2', xScale(this.progressRate))
+                .attr('y1', yScale(valueRatio)).attr('y2', yScale(valueRatio))
+                .attr('stroke', '#e53935').attr('stroke-width', 1).attr('stroke-dasharray', '3,3');
+        }
+        // 축
+        g.append('g')
+            .attr('transform', `translate(0,${plotH})`)
+            .call(d3.axisBottom(xScale).ticks(10).tickFormat((d) => `${d}%`))
+            .selectAll('text').attr('font-size', '10px');
+        g.append('g')
+            .call(d3.axisLeft(yScale).ticks(8).tickFormat((d) => `${(d * 100).toFixed(1)}%`))
+            .selectAll('text').attr('font-size', '10px');
+        // 축 라벨
+        g.append('text')
+            .attr('x', plotW / 2).attr('y', plotH + 38)
+            .attr('text-anchor', 'middle').attr('font-size', '11px').attr('fill', '#666')
+            .text('공정률 (%)');
+        g.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -plotH / 2).attr('y', -45)
+            .attr('text-anchor', 'middle').attr('font-size', '11px').attr('fill', '#666')
+            .text('공기편차 (%)');
+        // 범례
+        const legendX = plotW + 15;
+        const legendY = 10;
+        [5, 4, 3, 2, 1].forEach((score, i) => {
+            g.append('rect')
+                .attr('x', legendX).attr('y', legendY + i * 22)
+                .attr('width', 14).attr('height', 14)
+                .attr('fill', SCORE_COLORS[score]).attr('opacity', 0.7).attr('rx', 2);
+            g.append('text')
+                .attr('x', legendX + 20).attr('y', legendY + i * 22 + 11)
+                .attr('font-size', '10px').attr('fill', '#555')
+                .text(`${score}점`);
+        });
+        // 헤더
+        const currentScore = this.getCurrentScore();
+        // 제목은 차트 외부에서 표시하므로 차트 내부에는 미표시
+        const headerY = 38;
+        if (this.value !== null) {
+            svg.append('text')
+                .attr('x', margin.left).attr('y', headerY)
+                .attr('font-size', '11px').attr('font-weight', 'bold').attr('fill', '#e53935')
+                .text(`편차율: ${this.value.toFixed(2)}%`);
+        }
+        svg.append('text')
+            .attr('x', w / 2).attr('y', headerY)
+            .attr('text-anchor', 'middle').attr('font-size', '11px').attr('font-weight', '600').attr('fill', '#1565c0')
+            .text(`공정률: ${this.progressRate.toFixed(0)}%`);
+        if (currentScore !== null) {
+            svg.append('text')
+                .attr('x', w - margin.right).attr('y', headerY)
+                .attr('text-anchor', 'end').attr('font-size', '11px').attr('font-weight', 'bold').attr('fill', SCORE_COLORS[currentScore])
+                .text(`${currentScore}점`);
+        }
+    }
+};
+Kpi2dLookupChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], Kpi2dLookupChart.prototype, "grades", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], Kpi2dLookupChart.prototype, "value", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], Kpi2dLookupChart.prototype, "progressRate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Kpi2dLookupChart.prototype, "unit", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Kpi2dLookupChart.prototype, "kpiName", void 0);
+Kpi2dLookupChart = __decorate([
+    customElement('kpi-2d-lookup-chart')
+], Kpi2dLookupChart);
+export { Kpi2dLookupChart };
+//# sourceMappingURL=kpi-2d-lookup-chart.js.map

package/dist-client/components/kpi-2d-lookup-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-2d-lookup-chart.js","sourceRoot":"","sources":["../../client/components/kpi-2d-lookup-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/**\n * X13 성과 분포 히트맵 (2D 룩업)\n *\n * 공정률(%)×공기편차(%) 2차원 입력에 대한 성과수준(1~5점) 분포를 히트맵으로 표시.\n * 현재 프로젝트의 위치를 강조 표시하여 성과 수준을 직관적으로 파악.\n *\n * X축: 공정률 (0~100%)\n * Y축: 공기편차 (%)\n * 색상: 성과수준 (5점=파랑 ~ 1점=빨강)\n * ● 현재 프로젝트 위치 (강조 표시)\n */\n\ninterface Grade2DRow {\n  progressRate: number\n  boundary5to4: number\n  boundary4to3: number\n  boundary3to2: number\n  boundary2to1: number\n}\n\ninterface Grade2DLookup {\n  type: 'PROGRESS_DEVIATION_LOOKUP'\n  description?: string\n  rows: Grade2DRow[]\n}\n\nconst SCORE_COLORS: Record<number, string> = {\n  5: '#1565c0',\n  4: '#4caf50',\n  3: '#ffc107',\n  2: '#ff9800',\n  1: '#e53935'\n}\n\nconst SCORE_LABELS: Record<number, string> = {\n  5: '5점 (우수)',\n  4: '4점 (양호)',\n  3: '3점 (보통)',\n  2: '2점 (미흡)',\n  1: '1점 (매우 미흡)'\n}\n\n@customElement('kpi-2d-lookup-chart')\nexport class Kpi2dLookupChart extends LitElement {\n  @property({ type: Object }) grades: Grade2DLookup | null = null\n  @property({ type: Number }) value: number | null = null\n  @property({ type: Number }) progressRate: number = 50\n  @property({ type: String }) unit: string = '%'\n  @property({ type: String }) kpiName: string = ''\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      min-height: 200px;\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`\n      <svg\n        id=\"lookup-2d-chart\"\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\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.renderChart()\n  }\n\n  /**\n   * 단위 정합:\n   *   - this.value: metric value, % 단위 (예: 2.5 = 2.5%)\n   *   - row.boundary*: grade table, ratio 단위 (예: 0.025 = 2.5%)\n   *   - 비교 시 deviation (value %) 를 /100 해서 ratio 로 변환.\n   * deviation 인자가 이미 ratio 인 경우 (heatmap cell 그리기 등) 는 변환 안 함.\n   */\n  private getScore(row: Grade2DRow, devRatio: number): number {\n    if (devRatio < row.boundary5to4) return 5\n    if (devRatio < row.boundary4to3) return 4\n    if (devRatio < row.boundary3to2) return 3\n    if (devRatio < row.boundary2to1) return 2\n    return 1\n  }\n\n  private getCurrentScore(): number | null {\n    if (this.value === null || !this.grades?.rows) return null\n    const idx = Math.min(99, Math.max(0, Math.floor(this.progressRate)))\n    const row = this.grades.rows.find(r => r.progressRate === idx)\n    // value 가 % → ratio 변환 후 boundary 와 비교\n    return row ? this.getScore(row, this.value / 100) : null\n  }\n\n  private renderChart() {\n    const svg = d3.select(this.renderRoot.querySelector('#lookup-2d-chart'))\n    svg.selectAll('*').remove()\n\n    if (!this.grades?.rows?.length) {\n      svg.append('text')\n        .attr('x', this.chartWidth / 2).attr('y', this.chartHeight / 2)\n        .attr('text-anchor', 'middle').attr('fill', '#999').attr('font-size', '14px')\n        .text('No 2D grade data available')\n      return\n    }\n\n    const w = this.chartWidth || 400\n    const h = this.chartHeight || 250\n    const margin = { top: 20, right: 80, bottom: 50, left: 60 }\n    const plotW = w - margin.left - margin.right\n    const plotH = h - margin.top - margin.bottom\n\n    if (plotW <= 0 || plotH <= 0) return\n\n    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n    const rows = this.grades.rows\n\n    // Y축 범위 (편차율, ratio 단위 = boundary 와 동일).\n    const allBoundaries = rows.flatMap(r => [r.boundary5to4, r.boundary4to3, r.boundary3to2, r.boundary2to1])\n    let yMin = Math.min(...allBoundaries)\n    let yMax = Math.max(...allBoundaries)\n    // this.value 는 % 단위 → ratio (/100) 로 변환해 boundary 와 같은 축에서 처리\n    const valueRatio = this.value !== null ? this.value / 100 : null\n    if (valueRatio !== null) {\n      yMin = Math.min(yMin, valueRatio)\n      yMax = Math.max(yMax, valueRatio)\n    }\n    const yPad = (yMax - yMin) * 0.1 || 0.01\n    yMin -= yPad\n    yMax += yPad\n\n    // X축: 공정률 0~100\n    const xScale = d3.scaleLinear().domain([0, 100]).range([0, plotW])\n    const yScale = d3.scaleLinear().domain([yMin, yMax]).range([plotH, 0])\n\n    // 히트맵: 각 공정률(x) × 편차율(y) 셀의 점수를 색상으로\n    const xSteps = rows.map(r => r.progressRate).sort((a, b) => a - b)\n    const yStepCount = 50 // Y축 해상도\n    const yStep = (yMax - yMin) / yStepCount\n    const xCellW = plotW / Math.max(xSteps.length, 1)\n\n    for (const row of rows) {\n      const xi = xScale(row.progressRate)\n      for (let j = 0; j < yStepCount; j++) {\n        const dev = yMin + j * yStep\n        const score = this.getScore(row, dev)\n        g.append('rect')\n          .attr('x', xi)\n          .attr('y', yScale(dev + yStep))\n          .attr('width', xCellW + 0.5) // 약간 겹쳐서 틈새 방지\n          .attr('height', Math.abs(yScale(dev) - yScale(dev + yStep)) + 0.5)\n          .attr('fill', SCORE_COLORS[score])\n          .attr('opacity', 0.35)\n      }\n    }\n\n    // 경계선: 현재 공정률에서의 점수 전환선\n    const currentIdx = Math.min(99, Math.max(0, Math.floor(this.progressRate)))\n    const currentRow = rows.find(r => r.progressRate === currentIdx)\n    if (currentRow) {\n      const boundaries = [currentRow.boundary5to4, currentRow.boundary4to3, currentRow.boundary3to2, currentRow.boundary2to1]\n      boundaries.forEach(bdy => {\n        g.append('line')\n          .attr('x1', xScale(this.progressRate)).attr('x2', xScale(this.progressRate))\n          .attr('y1', yScale(bdy) - 3).attr('y2', yScale(bdy) + 3)\n          .attr('stroke', '#333').attr('stroke-width', 2)\n      })\n    }\n\n    // 현재 공정률 수직선\n    g.append('line')\n      .attr('x1', xScale(this.progressRate)).attr('x2', xScale(this.progressRate))\n      .attr('y1', 0).attr('y2', plotH)\n      .attr('stroke', '#1565c0').attr('stroke-width', 1.5).attr('stroke-dasharray', '4,3')\n\n    // 현재 위치 포인트 (value % → ratio 변환해서 Y 좌표 매핑)\n    if (valueRatio !== null) {\n      g.append('circle')\n        .attr('cx', xScale(this.progressRate))\n        .attr('cy', yScale(valueRatio))\n        .attr('r', 7)\n        .attr('fill', '#e53935').attr('stroke', '#fff').attr('stroke-width', 2.5)\n\n      // 현재 편차율 수평선\n      g.append('line')\n        .attr('x1', 0).attr('x2', xScale(this.progressRate))\n        .attr('y1', yScale(valueRatio)).attr('y2', yScale(valueRatio))\n        .attr('stroke', '#e53935').attr('stroke-width', 1).attr('stroke-dasharray', '3,3')\n    }\n\n    // 축\n    g.append('g')\n      .attr('transform', `translate(0,${plotH})`)\n      .call(d3.axisBottom(xScale).ticks(10).tickFormat((d: any) => `${d}%`))\n      .selectAll('text').attr('font-size', '10px')\n\n    g.append('g')\n      .call(d3.axisLeft(yScale).ticks(8).tickFormat((d: any) => `${(d * 100).toFixed(1)}%`))\n      .selectAll('text').attr('font-size', '10px')\n\n    // 축 라벨\n    g.append('text')\n      .attr('x', plotW / 2).attr('y', plotH + 38)\n      .attr('text-anchor', 'middle').attr('font-size', '11px').attr('fill', '#666')\n      .text('공정률 (%)')\n\n    g.append('text')\n      .attr('transform', 'rotate(-90)')\n      .attr('x', -plotH / 2).attr('y', -45)\n      .attr('text-anchor', 'middle').attr('font-size', '11px').attr('fill', '#666')\n      .text('공기편차 (%)')\n\n    // 범례\n    const legendX = plotW + 15\n    const legendY = 10\n    ;[5, 4, 3, 2, 1].forEach((score, i) => {\n      g.append('rect')\n        .attr('x', legendX).attr('y', legendY + i * 22)\n        .attr('width', 14).attr('height', 14)\n        .attr('fill', SCORE_COLORS[score]).attr('opacity', 0.7).attr('rx', 2)\n\n      g.append('text')\n        .attr('x', legendX + 20).attr('y', legendY + i * 22 + 11)\n        .attr('font-size', '10px').attr('fill', '#555')\n        .text(`${score}점`)\n    })\n\n    // 헤더\n    const currentScore = this.getCurrentScore()\n\n    // 제목은 차트 외부에서 표시하므로 차트 내부에는 미표시\n\n    const headerY = 38\n    if (this.value !== null) {\n      svg.append('text')\n        .attr('x', margin.left).attr('y', headerY)\n        .attr('font-size', '11px').attr('font-weight', 'bold').attr('fill', '#e53935')\n        .text(`편차율: ${this.value.toFixed(2)}%`)\n    }\n\n    svg.append('text')\n      .attr('x', w / 2).attr('y', headerY)\n      .attr('text-anchor', 'middle').attr('font-size', '11px').attr('font-weight', '600').attr('fill', '#1565c0')\n      .text(`공정률: ${this.progressRate.toFixed(0)}%`)\n\n    if (currentScore !== null) {\n      svg.append('text')\n        .attr('x', w - margin.right).attr('y', headerY)\n        .attr('text-anchor', 'end').attr('font-size', '11px').attr('font-weight', 'bold').attr('fill', SCORE_COLORS[currentScore])\n        .text(`${currentScore}점`)\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class SvKpiBoxplotChart extends LitElement {
+    data: any[];
+    groups: string[];
+    minKey: string;
+    maxKey: string;
+    meanKey: string;
+    medianKey: string;
+    q1Key: string;
+    q3Key: string;
+    valueKey: string;
+    currentGroup: string;
+    independentScale: boolean;
+    /**
+     * 붉은 점 tooltip 라벨. 기본 '현재 프로젝트'(상세화면: 붉은 점 = 당해 프로젝트 값).
+     * 전국/지역 대시보드처럼 value 가 평균값이면 '평균' 으로 넘긴다.
+     */
+    valueLabel: string;
+    /** 붉은 점 tooltip 의 '정상 범위/이상치' 상태 라인 표시 여부. 대시보드(평균)에서는 false. */
+    showStatus: 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,306 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as d3 from 'd3';
+let SvKpiBoxplotChart = class SvKpiBoxplotChart 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;
+        /**
+         * 붉은 점 tooltip 라벨. 기본 '현재 프로젝트'(상세화면: 붉은 점 = 당해 프로젝트 값).
+         * 전국/지역 대시보드처럼 value 가 평균값이면 '평균' 으로 넘긴다.
+         */
+        this.valueLabel = '현재 프로젝트';
+        /** 붉은 점 tooltip 의 '정상 범위/이상치' 상태 라인 표시 여부. 대시보드(평균)에서는 false. */
+        this.showStatus = true;
+        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;
+        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; // 유효한 그룹이 없으면 차트를 그리지 않음
+        }
+        const x = d3.scaleBand().domain(groups).range([0, plotW]).padding(0.4);
+        // y축 스케일 설정
+        let y;
+        if (this.independentScale) {
+            // 독립 스케일: 각 시리즈별로 개별 스케일 생성 (모두 0-100 범위로 통일)
+            const yScales = this.data.map(d => {
+                return {
+                    org: d.org,
+                    scale: d3.scaleLinear().domain([0, 100]).range([plotH, 0])
+                };
+            });
+            // 기본 y축은 첫 번째 스케일 사용
+            y = ((_a = yScales[0]) === null || _a === void 0 ? void 0 : _a.scale) || d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
+        }
+        else {
+            // 통합 스케일: 0-100 범위로 고정
+            y = d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
+        }
+        const g = svg.attr('width', w).attr('height', h).append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+        // Y축 (왼쪽)
+        if (!this.independentScale) {
+            const yAxis = g.append('g').call(d3.axisLeft(y).tickSize(-plotW));
+            yAxis.select('.domain').remove();
+            yAxis.selectAll('.tick line').attr('stroke', '#e0e0e0').attr('stroke-width', 1).attr('opacity', 0.7);
+            yAxis.selectAll('.tick text').attr('fill', '#666').attr('font-size', '12px');
+        }
+        // X축 (아래쪽)
+        const xAxis = g.append('g').attr('transform', `translate(0,${plotH})`).call(d3.axisBottom(x).tickSize(0));
+        xAxis.select('.domain').attr('stroke', '#e0e0e0').attr('stroke-width', 1);
+        xAxis.selectAll('.tick text').attr('fill', '#333').attr('font-size', '13px').attr('font-weight', '500').attr('dy', '1.5em');
+        // 툴팁 (전체 공유, forEach 밖)
+        const tooltip = svg.append('g').attr('class', 'boxplot-tooltip').attr('visibility', 'hidden');
+        tooltip.append('rect').attr('rx', 4).attr('ry', 4).attr('fill', 'rgba(33,33,33,0.9)');
+        tooltip.append('text').attr('fill', '#fff').attr('font-size', '10px');
+        const showTooltip = (evt, lines) => {
+            const tipText = tooltip.select('text');
+            tipText.selectAll('tspan').remove();
+            lines.forEach((line, i) => {
+                tipText.append('tspan').attr('x', 8).attr('dy', i === 0 ? 14 : 13).text(line);
+            });
+            const tipW = Math.max(...lines.map(l => l.length)) * 8 + 24;
+            const tipH = lines.length * 13 + 10;
+            const [mx, my] = d3.pointer(evt, svg.node());
+            const tx = Math.min(mx + 10, (this.chartWidth || 400) - tipW - 5);
+            const ty = Math.max(my - tipH - 5, 5);
+            tooltip.select('rect').attr('x', tx).attr('y', ty).attr('width', tipW).attr('height', tipH);
+            tipText.attr('transform', `translate(${tx},${ty})`);
+            tooltip.attr('visibility', 'visible').raise();
+        };
+        const hideTooltip = () => tooltip.attr('visibility', 'hidden');
+        // 박스플롯 - 각 그룹별로 박스 생성
+        groups.forEach(groupName => {
+            var _a;
+            const groupData = this.data.find(d => this.getOrgValue(d) === groupName);
+            if (!groupData)
+                return;
+            const requiredFields = [this.minKey, this.maxKey, this.q1Key, this.q3Key, this.medianKey, this.meanKey];
+            if (requiredFields.some(field => groupData[field] == null))
+                return;
+            const gx = (_a = x(groupName)) !== null && _a !== void 0 ? _a : 0;
+            let currentY = y;
+            if (this.independentScale) {
+                currentY = d3.scaleLinear().domain([0, 100]).range([plotH, 0]);
+            }
+            const actualMin = groupData[this.minKey];
+            const actualMax = groupData[this.maxKey];
+            // 박스
+            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', '#B3D4FC')
+                .attr('opacity', 0.8)
+                .attr('stroke', '#7BB3F0')
+                .attr('stroke-width', 1)
+                .style('cursor', 'pointer')
+                .on('mouseenter', (evt) => showTooltip(evt, [
+                groupName,
+                `최대: ${Number(groupData[this.maxKey]).toFixed(2)}`,
+                `Q3: ${Number(groupData[this.q3Key]).toFixed(2)}`,
+                `중앙값: ${Number(groupData[this.medianKey]).toFixed(2)}`,
+                `Q1: ${Number(groupData[this.q1Key]).toFixed(2)}`,
+                `최소: ${Number(groupData[this.minKey]).toFixed(2)}`,
+                `평균: ${Number(groupData[this.meanKey]).toFixed(2)}`
+            ]))
+                .on('mouseleave', hideTooltip);
+            // 중앙선(중앙값)
+            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', '#7BB3F0')
+                .attr('stroke-width', 1.5);
+            // 수염 (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', '#7BB3F0')
+                .attr('stroke-width', 1);
+            // 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', '#7BB3F0')
+                .attr('stroke-width', 1);
+            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', '#7BB3F0')
+                .attr('stroke-width', 1);
+            // 평균값 (녹색)
+            g.append('circle')
+                .attr('cx', gx + x.bandwidth() / 2)
+                .attr('cy', currentY(groupData[this.meanKey]))
+                .attr('r', 3)
+                .attr('fill', '#4CAF50')
+                .attr('stroke', '#fff')
+                .attr('stroke-width', 1)
+                .style('cursor', 'pointer')
+                .on('mouseenter', (evt) => showTooltip(evt, [
+                `${groupName} — 평균`,
+                `${Number(groupData[this.meanKey]).toFixed(2)}`
+            ]))
+                .on('mouseleave', hideTooltip);
+            // 현재 프로젝트 값 (붉은색으로 통일 · 강조)
+            if (groupData[this.valueKey] != null) {
+                const currentValue = groupData[this.valueKey];
+                const isOutlier = currentValue < groupData[this.minKey] || currentValue > groupData[this.maxKey];
+                g.append('circle')
+                    .attr('cx', gx + x.bandwidth() / 2)
+                    .attr('cy', currentY(currentValue))
+                    .attr('r', 5)
+                    .attr('fill', '#e53935')
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1)
+                    .style('cursor', 'pointer')
+                    .on('mouseenter', (evt) => showTooltip(evt, [
+                    `${groupName} — ${this.valueLabel}`,
+                    `값: ${Number(currentValue).toFixed(2)}`,
+                    ...(this.showStatus ? [isOutlier ? '⚠ 이상치' : '정상 범위'] : [])
+                ]))
+                    .on('mouseleave', hideTooltip);
+            }
+        });
+        // 현재 그룹 값 강조는 이미 위에서 처리되므로 제거
+    }
+};
+SvKpiBoxplotChart.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], SvKpiBoxplotChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], SvKpiBoxplotChart.prototype, "groups", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "minKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "maxKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "meanKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "medianKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "q1Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "q3Key", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "valueKey", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "currentGroup", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], SvKpiBoxplotChart.prototype, "independentScale", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SvKpiBoxplotChart.prototype, "valueLabel", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], SvKpiBoxplotChart.prototype, "showStatus", void 0);
+SvKpiBoxplotChart = __decorate([
+    customElement('sv-kpi-boxplot-chart')
+], SvKpiBoxplotChart);
+export { SvKpiBoxplotChart };
+//# sourceMappingURL=kpi-boxplot-chart.js.map