@dssp/dkpi 1.0.0-alpha.66 → 1.0.0-alpha.68

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

@@ -1,12 +1,14 @@
 import { LitElement } from 'lit';
 /**
- * X13 등 2D lookup KPI를 위한 차트 컴포넌트
+ * X13 성과 분포 히트맵 (2D 룩업)
  *
- * Y축: 성과수준 (0~1) — 다른 1D 차트와 동일
- * X축: 편차율 (KPI value)
- * 실선 계단: 현재 공정률 기준 편차→성과 매핑
- * 반투명 밴드: 공정률 0~100% 범위에서 경계 이동 폭
- * ● 점: 현재 프로젝트 위치
+ * 공정률(%)×공기편차(%) 2차원 입력에 대한 성과수준(1~5점) 분포를 히트맵으로 표시.
+ * 현재 프로젝트의 위치를 강조 표시하여 성과 수준을 직관적으로 파악.
+ *
+ * X축: 공정률 (0~100%)
+ * Y축: 공기편차 (%)
+ * 색상: 성과수준 (5점=파랑 ~ 1점=빨강)
+ * ● 현재 프로젝트 위치 (강조 표시)
  */
 interface Grade2DRow {
     progressRate: number;
@@ -21,15 +23,10 @@ interface Grade2DLookup {
     rows: Grade2DRow[];
 }
 export declare class Kpi2dLookupChart extends LitElement {
-    /** 2D grades 객체 ({ type: 'PROGRESS_DEVIATION_LOOKUP', rows: [...] }) */
     grades: Grade2DLookup | null;
-    /** 현재 편차율 (KPI value = formula 결과) */
     value: number | null;
-    /** 현재 공정률 (0~100) */
     progressRate: number;
-    /** 단위 표시 */
     unit: string;
-    /** 차트 제목 */
     kpiName: string;
     static styles: import("lit").CSSResult;
     private chartWidth;
@@ -39,25 +36,8 @@ export declare class Kpi2dLookupChart extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): void;
-    private renderChart;
-    /**
-     * 현재 공정률에서의 점수 계산
-     */
+    private getScore;
     private getCurrentScore;
-    private drawHeader;
-    private draw2DChart;
-    /**
-     * 반투명 밴드: 공정률 0~100% 전체에서 각 경계가 이동하는 범위
-     */
-    private drawBands;
-    /**
-     * 현재 공정률 기준 계단 함수 그리기
-     */
-    private drawStepFunction;
-    /**
-     * 현재 프로젝트 위치 표시
-     */
-    private drawCurrentValuePointer;
-    private drawEmptyState;
+    private renderChart;
 }
 export {};

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

@@ -2,26 +2,27 @@ import { __decorate, __metadata } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import * as d3 from 'd3';
-/* 5점→1.0, 4점→0.8, 3점→0.6, 2점→0.4, 1점→0.2 */
-const SCORE_LEVELS = [
-    { score: 5, normalized: 1.0, label: '5점', color: '#1565c0' },
-    { score: 4, normalized: 0.8, label: '4점', color: '#4caf50' },
-    { score: 3, normalized: 0.6, label: '3점', color: '#ffc107' },
-    { score: 2, normalized: 0.4, label: '2점', color: '#ff9800' },
-    { score: 1, normalized: 0.2, label: '1점', color: '#e53935' }
-];
+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);
-        /** 2D grades 객체 ({ type: 'PROGRESS_DEVIATION_LOOKUP', rows: [...] }) */
         this.grades = null;
-        /** 현재 편차율 (KPI value = formula 결과) */
         this.value = null;
-        /** 현재 공정률 (0~100) */
         this.progressRate = 50;
-        /** 단위 표시 */
         this.unit = '%';
-        /** 차트 제목 */
         this.kpiName = '';
         this.chartWidth = 0;
         this.chartHeight = 0;
@@ -57,353 +58,164 @@ let Kpi2dLookupChart = class Kpi2dLookupChart extends LitElement {
     updated() {
         this.renderChart();
     }
+    getScore(row, deviation) {
+        if (deviation < row.boundary5to4)
+            return 5;
+        if (deviation < row.boundary4to3)
+            return 4;
+        if (deviation < row.boundary3to2)
+            return 3;
+        if (deviation < 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);
+        return row ? this.getScore(row, this.value) : null;
+    }
     renderChart() {
+        var _a, _b;
         const svg = d3.select(this.renderRoot.querySelector('#lookup-2d-chart'));
         svg.selectAll('*').remove();
-        if (!this.grades || !this.grades.rows || this.grades.rows.length === 0) {
-            this.drawEmptyState(svg);
+        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: 45, right: 30, bottom: 55, left: 65 };
+        const margin = { top: 50, 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})`);
-        // 제목
-        if (this.kpiName) {
-            svg
-                .append('text')
-                .attr('class', 'chart-title')
-                .attr('x', w / 2)
-                .attr('y', 15)
-                .attr('text-anchor', 'middle')
-                .text(this.kpiName);
-        }
-        // 헤더 (현재 값, 점수)
-        this.drawHeader(svg, w);
-        // 차트 본체
-        this.draw2DChart(g, plotW, plotH);
-    }
-    /**
-     * 현재 공정률에서의 점수 계산
-     */
-    getCurrentScore() {
-        var _a;
-        if (this.value === null || !((_a = this.grades) === null || _a === void 0 ? void 0 : _a.rows))
-            return null;
-        const progressIdx = Math.min(99, Math.max(0, Math.floor(this.progressRate)));
-        const row = this.grades.rows.find(r => r.progressRate === progressIdx);
-        if (!row)
-            return null;
-        if (this.value < row.boundary5to4)
-            return 5;
-        if (this.value < row.boundary4to3)
-            return 4;
-        if (this.value < row.boundary3to2)
-            return 3;
-        if (this.value < row.boundary2to1)
-            return 2;
-        return 1;
-    }
-    drawHeader(svg, chartWidth) {
-        const headerY = 32;
-        // 편차율(value) 표시
+        const rows = this.grades.rows;
+        // Y축 범위 (편차율)
+        const allBoundaries = rows.flatMap(r => [r.boundary5to4, r.boundary4to3, r.boundary3to2, r.boundary2to1]);
+        let yMin = Math.min(...allBoundaries);
+        let yMax = Math.max(...allBoundaries);
         if (this.value !== null) {
-            svg
-                .append('text')
-                .attr('class', 'value-label')
-                .attr('x', 10)
-                .attr('y', headerY)
-                .attr('font-size', '11px')
-                .text(`편차율: ${(this.value * 100).toFixed(2)}%`);
+            yMin = Math.min(yMin, this.value);
+            yMax = Math.max(yMax, this.value);
         }
-        // 공정률 표시
-        svg
-            .append('text')
-            .attr('class', 'progress-label')
-            .attr('x', chartWidth / 2)
-            .attr('y', headerY)
-            .attr('text-anchor', 'middle')
-            .attr('font-size', '11px')
-            .text(`공정률: ${this.progressRate.toFixed(0)}%`);
-        // Score 표시
-        const currentScore = this.getCurrentScore();
-        if (currentScore !== null) {
-            const normalized = currentScore / 5;
-            svg
-                .append('text')
-                .attr('class', 'value-label')
-                .attr('x', chartWidth - 10)
-                .attr('y', headerY)
-                .attr('text-anchor', 'end')
-                .attr('font-size', '11px')
-                .text(`성과수준: ${normalized.toFixed(1)} (${currentScore}점)`);
+        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);
+            }
         }
-    }
-    draw2DChart(g, width, height) {
-        const rows = this.grades.rows;
-        // --- X축 범위 계산 (편차율) ---
-        // 모든 공정률에서의 최소/최대 경계값
-        const allBoundaries = rows.flatMap(r => [r.boundary5to4, r.boundary2to1]);
-        let xMin = Math.min(...allBoundaries);
-        let xMax = Math.max(...allBoundaries);
-        // 현재 value 포함
+        // 경계선: 현재 공정률에서의 점수 전환선
+        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');
+        // 현재 위치 포인트
         if (this.value !== null) {
-            xMin = Math.min(xMin, this.value);
-            xMax = Math.max(xMax, this.value);
+            g.append('circle')
+                .attr('cx', xScale(this.progressRate))
+                .attr('cy', yScale(this.value))
+                .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(this.value)).attr('y2', yScale(this.value))
+                .attr('stroke', '#e53935').attr('stroke-width', 1).attr('stroke-dasharray', '3,3');
         }
-        // 약간의 여백
-        const xPadding = (xMax - xMin) * 0.08;
-        xMin -= xPadding;
-        xMax += xPadding;
-        const xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, width]);
-        // --- Y축 (성과수준 0~1) ---
-        const yScale = d3.scaleLinear().domain([0, 1.05]).range([height, 0]);
-        // --- 반투명 밴드: 모든 공정률에서의 경계 변동 범위 ---
-        this.drawBands(g, rows, xScale, yScale, width);
-        // --- 현재 공정률 기준 계단 함수 ---
-        this.drawStepFunction(g, xScale, yScale, xMin, xMax);
-        // --- 현재 위치 포인터 ---
-        this.drawCurrentValuePointer(g, xScale, yScale);
-        // --- 축 그리기 ---
-        // Y축
-        const yAxis = d3.axisLeft(yScale).tickValues([0, 0.2, 0.4, 0.6, 0.8, 1.0]);
-        g.append('g').call(yAxis);
+        // 축
+        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))
+            .selectAll('text').attr('font-size', '10px');
+        // 축 라벨
         g.append('text')
-            .attr('class', 'axis-label')
-            .attr('transform', 'rotate(-90)')
-            .attr('x', -height / 2)
-            .attr('y', -50)
-            .attr('text-anchor', 'middle')
-            .attr('font-weight', 'bold')
-            .text('성과수준');
-        // X축
-        const xAxis = d3
-            .axisBottom(xScale)
-            .ticks(8)
-            .tickFormat((d) => `${(d * 100).toFixed(1)}%`);
-        g.append('g').attr('transform', `translate(0,${height})`).call(xAxis);
+            .attr('x', plotW / 2).attr('y', plotH + 38)
+            .attr('text-anchor', 'middle').attr('font-size', '11px').attr('fill', '#666')
+            .text('공정률 (%)');
         g.append('text')
-            .attr('class', 'axis-label')
-            .attr('x', width / 2)
-            .attr('y', height + 42)
-            .attr('text-anchor', 'middle')
-            .text('편차율');
-        // --- 점수 라벨 (우측) ---
-        SCORE_LEVELS.forEach(level => {
-            g.append('text')
-                .attr('class', 'score-label')
-                .attr('x', width + 5)
-                .attr('y', yScale(level.normalized) + 4)
-                .attr('fill', level.color)
-                .text(level.label);
-        });
-    }
-    /**
-     * 반투명 밴드: 공정률 0~100% 전체에서 각 경계가 이동하는 범위
-     */
-    drawBands(g, rows, xScale, yScale, width) {
-        // 각 점수 경계별로 min/max 범위 계산
-        const b5to4_min = Math.min(...rows.map(r => r.boundary5to4));
-        const b5to4_max = Math.max(...rows.map(r => r.boundary5to4));
-        const b3to2_min = Math.min(...rows.map(r => r.boundary3to2));
-        const b3to2_max = Math.max(...rows.map(r => r.boundary3to2));
-        const b2to1_min = Math.min(...rows.map(r => r.boundary2to1));
-        const b2to1_max = Math.max(...rows.map(r => r.boundary2to1));
-        // 5점 영역 (맨 왼쪽)
-        g.append('rect')
-            .attr('x', 0)
-            .attr('y', yScale(1.0))
-            .attr('width', xScale(b5to4_max) - xScale(xScale.domain()[0]))
-            .attr('height', yScale(0.8) - yScale(1.0))
-            .attr('fill', SCORE_LEVELS[0].color)
-            .attr('opacity', 0.06);
-        // 4점 영역
-        g.append('rect')
-            .attr('x', xScale(b5to4_min))
-            .attr('y', yScale(0.8))
-            .attr('width', xScale(0) - xScale(b5to4_min))
-            .attr('height', yScale(0.6) - yScale(0.8))
-            .attr('fill', SCORE_LEVELS[1].color)
-            .attr('opacity', 0.06);
-        // 3점 영역
-        g.append('rect')
-            .attr('x', xScale(0))
-            .attr('y', yScale(0.6))
-            .attr('width', xScale(b3to2_max) - xScale(0))
-            .attr('height', yScale(0.4) - yScale(0.6))
-            .attr('fill', SCORE_LEVELS[2].color)
-            .attr('opacity', 0.06);
-        // 2점 영역
-        g.append('rect')
-            .attr('x', xScale(b3to2_min))
-            .attr('y', yScale(0.4))
-            .attr('width', xScale(b2to1_max) - xScale(b3to2_min))
-            .attr('height', yScale(0.2) - yScale(0.4))
-            .attr('fill', SCORE_LEVELS[3].color)
-            .attr('opacity', 0.06);
-        // 1점 영역 (맨 오른쪽)
-        g.append('rect')
-            .attr('x', xScale(b2to1_min))
-            .attr('y', yScale(0.2))
-            .attr('width', width - xScale(b2to1_min))
-            .attr('height', yScale(0) - yScale(0.2))
-            .attr('fill', SCORE_LEVELS[4].color)
-            .attr('opacity', 0.06);
-        // 경계 변동 범위를 수직 반투명 밴드로 표시
-        const boundaryRanges = [
-            { min: b5to4_min, max: b5to4_max, color: '#666' },
-            { min: b3to2_min, max: b3to2_max, color: '#666' },
-            { min: b2to1_min, max: b2to1_max, color: '#666' }
-        ];
-        boundaryRanges.forEach(br => {
-            if (Math.abs(br.max - br.min) > 0.0001) {
-                g.append('rect')
-                    .attr('x', xScale(br.min))
-                    .attr('y', 0)
-                    .attr('width', xScale(br.max) - xScale(br.min))
-                    .attr('height', yScale(0))
-                    .attr('fill', br.color)
-                    .attr('opacity', 0.05);
-            }
-        });
-    }
-    /**
-     * 현재 공정률 기준 계단 함수 그리기
-     */
-    drawStepFunction(g, xScale, yScale, xMin, xMax) {
-        var _a;
-        const progressIdx = Math.min(99, Math.max(0, Math.floor(this.progressRate)));
-        const row = (_a = this.grades) === null || _a === void 0 ? void 0 : _a.rows.find(r => r.progressRate === progressIdx);
-        if (!row)
-            return;
-        const boundaries = [
-            { x: xMin, score: 1.0 }, // 5점 시작 (왼쪽 끝)
-            { x: row.boundary5to4, score: 1.0 }, // 5점→4점 전환점
-            { x: row.boundary5to4, score: 0.8 }, // 4점 시작
-            { x: row.boundary4to3, score: 0.8 }, // 4점→3점 전환점
-            { x: row.boundary4to3, score: 0.6 }, // 3점 시작
-            { x: row.boundary3to2, score: 0.6 }, // 3점→2점 전환점
-            { x: row.boundary3to2, score: 0.4 }, // 2점 시작
-            { x: row.boundary2to1, score: 0.4 }, // 2점→1점 전환점
-            { x: row.boundary2to1, score: 0.2 }, // 1점 시작
-            { x: xMax, score: 0.2 } // 1점 끝 (오른쪽 끝)
-        ];
-        // 계단 함수 영역 채우기 (반투명)
-        const areaData = [...boundaries];
-        const areaBottom = [...boundaries].reverse().map(b => ({ x: b.x, score: 0 }));
-        const area = d3
-            .area()
-            .x(d => xScale(d.x))
-            .y0(yScale(0))
-            .y1(d => yScale(d.score));
-        g.append('path')
-            .datum(boundaries)
-            .attr('d', area)
-            .attr('fill', '#1565c0')
-            .attr('opacity', 0.1);
-        // 계단 함수 라인
-        const line = d3
-            .line()
-            .x(d => xScale(d.x))
-            .y(d => yScale(d.score));
-        g.append('path')
-            .datum(boundaries)
-            .attr('d', line)
-            .attr('fill', 'none')
-            .attr('stroke', '#1565c0')
-            .attr('stroke-width', 2.5);
-        // 경계 전환점에 수직 점선
-        const verticalBoundaries = [row.boundary5to4, row.boundary4to3, row.boundary3to2, row.boundary2to1];
-        const verticalScorePairs = [
-            [1.0, 0.8],
-            [0.8, 0.6],
-            [0.6, 0.4],
-            [0.4, 0.2]
-        ];
-        verticalBoundaries.forEach((bx, i) => {
-            // 수직 점선 (X축까지)
-            g.append('line')
-                .attr('x1', xScale(bx))
-                .attr('x2', xScale(bx))
-                .attr('y1', yScale(verticalScorePairs[i][0]))
-                .attr('y2', yScale(0))
-                .attr('stroke', '#999')
-                .attr('stroke-width', 0.8)
-                .attr('stroke-dasharray', '3,3');
-            // 경계값 라벨 (X축 아래)
+            .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('class', 'axis-label')
-                .attr('x', xScale(bx))
-                .attr('y', yScale(0) + 12)
-                .attr('text-anchor', 'middle')
-                .attr('font-size', '9px')
-                .attr('fill', '#1565c0')
-                .text(`${(bx * 100).toFixed(1)}%`);
+                .attr('x', legendX + 20).attr('y', legendY + i * 22 + 11)
+                .attr('font-size', '10px').attr('fill', '#555')
+                .text(`${score}점`);
         });
-    }
-    /**
-     * 현재 프로젝트 위치 표시
-     */
-    drawCurrentValuePointer(g, xScale, yScale) {
-        if (this.value === null)
-            return;
+        // 헤더
         const currentScore = this.getCurrentScore();
-        if (currentScore === null)
-            return;
-        const normalizedScore = currentScore / 5;
-        const cx = xScale(this.value);
-        const cy = yScale(normalizedScore);
-        // 수평 가이드라인 (Y축까지)
-        g.append('line')
-            .attr('x1', 0)
-            .attr('x2', cx)
-            .attr('y1', cy)
-            .attr('y2', cy)
-            .attr('stroke', '#e53935')
-            .attr('stroke-width', 1)
-            .attr('stroke-dasharray', '4,3')
-            .attr('opacity', 0.6);
-        // 수직 가이드라인 (X축까지)
-        g.append('line')
-            .attr('x1', cx)
-            .attr('x2', cx)
-            .attr('y1', cy)
-            .attr('y2', yScale(0))
-            .attr('stroke', '#e53935')
-            .attr('stroke-width', 1)
-            .attr('stroke-dasharray', '4,3')
-            .attr('opacity', 0.6);
-        // 포인터 원
-        g.append('circle')
-            .attr('cx', cx)
-            .attr('cy', cy)
-            .attr('r', 7)
-            .attr('fill', '#e53935')
-            .attr('stroke', '#fff')
-            .attr('stroke-width', 2.5);
-        // 포인터 위에 값 라벨
-        g.append('text')
-            .attr('x', cx)
-            .attr('y', cy - 14)
-            .attr('text-anchor', 'middle')
-            .attr('font-size', '11px')
-            .attr('font-weight', '700')
-            .attr('fill', '#e53935')
-            .text(`${(this.value * 100).toFixed(2)}% → ${normalizedScore.toFixed(1)}`);
-    }
-    drawEmptyState(svg) {
-        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');
+        if (this.kpiName) {
+            svg.append('text')
+                .attr('x', w / 2).attr('y', 18)
+                .attr('text-anchor', 'middle').attr('font-size', '13px').attr('font-weight', '600').attr('fill', '#333')
+                .text(this.kpiName);
+        }
+        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 * 100).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 `
@@ -418,30 +230,6 @@ Kpi2dLookupChart.styles = css `
       height: 100%;
       display: block;
     }
-    .chart-title {
-      font-size: 14px;
-      font-weight: 600;
-      fill: #333;
-    }
-    .value-label {
-      font-size: 12px;
-      font-weight: 600;
-      fill: #e53935;
-    }
-    .axis-label {
-      font-size: 11px;
-      fill: #999;
-    }
-    .score-label {
-      font-size: 10px;
-      fill: #666;
-      font-weight: 500;
-    }
-    .progress-label {
-      font-size: 10px;
-      fill: #1565c0;
-      font-weight: 600;
-    }
   `;
 __decorate([
     property({ type: Object }),