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

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

@@ -43,316 +43,290 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
     updated() {
         this.renderChart();
     }
+    /** 1~5 평가형 KPI인지 판별 (grades 없거나, value가 1~5 정수) */
+    isAssessmentKpi() {
+        if (!this.grades || !Array.isArray(this.grades) || this.grades.length === 0)
+            return true;
+        const scores = this.grades.map(g => g.score).filter(s => s !== undefined && s !== null);
+        return scores.length <= 5 && scores.every(s => s >= 1 && s <= 5 && s === Math.floor(s));
+    }
     renderChart() {
         const svg = d3.select(this.renderRoot.querySelector('#lookup-chart'));
         svg.selectAll('*').remove();
-        // 데이터 검증
-        if (!this.grades || this.grades.length === 0) {
-            this.drawEmptyState(svg);
+        // 1~5 평가형 KPI → 세그먼트 바
+        if (this.isAssessmentKpi()) {
+            this.renderAssessmentGauge(svg);
             return;
         }
         const w = this.chartWidth || 400;
         const h = this.chartHeight || 200;
-        const margin = { top: 40, right: 30, bottom: 50, left: 60 };
+        const margin = { top: 50, right: 30, bottom: 45, left: 55 };
         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);
-        }
-        // KPI Value와 Score를 차트 상단에 표시
-        this.drawHeader(svg, w);
-        // grades를 정렬 (minValue 기준)
         const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue);
-        this.drawChart(g, svg, sortedGrades, plotW, plotH, w);
-    }
-    drawHeader(svg, chartWidth) {
-        const headerY = 30;
-        // KPI Value 표시
+        // 중간값 포인트 생성 (maxValue >= 99999인 마지막 구간 제외)
+        const points = this.buildMidpoints(sortedGrades);
+        if (points.length === 0)
+            return;
+        // 스케일 — grade의 minValue~maxValue 범위, 마지막 grade의 큰 maxValue(999, 99999 등) 제외
+        const allMaxValues = sortedGrades.map(g => g.maxValue).sort((a, b) => a - b);
+        const secondLargestMax = allMaxValues.length > 1 ? allMaxValues[allMaxValues.length - 2] : allMaxValues[0];
+        const lastGradeMin = sortedGrades[sortedGrades.length - 1].minValue;
+        let xMin = sortedGrades[0].minValue;
+        let xMax = Math.max(secondLargestMax, lastGradeMin);
         if (this.value !== null && this.value !== undefined) {
-            svg
-                .append('text')
-                .attr('class', 'value-label')
-                .attr('x', 10)
-                .attr('y', headerY)
-                .attr('font-size', '12px')
-                .attr('font-weight', 'bold')
-                .text(`KPI Value: ${this.value.toFixed(2)}${this.unit}`);
-        }
-        else {
-            svg
-                .append('text')
-                .attr('class', 'value-label')
-                .attr('x', 10)
-                .attr('y', headerY)
-                .attr('font-size', '12px')
-                .attr('font-weight', 'bold')
-                .attr('fill', '#999')
-                .text(`KPI Value: N/A`);
+            xMax = Math.max(xMax, this.value);
         }
-        // KPI Score 표시
+        const xPad = (xMax - xMin) * 0.15 || 0.5;
+        const xScale = d3.scaleLinear().domain([xMin - xPad, xMax + xPad]).range([0, plotW]).nice();
+        const yExtent = d3.extent(points, d => d.score);
+        const [yMin, yMax] = yExtent;
+        const yPad = (yMax - yMin) * 0.08 || 0.1;
+        const yScale = d3.scaleLinear().domain([yMin - yPad, yMax + yPad]).range([plotH, 0]).nice();
+        // 스코어 구간 배경 (연한 색상)
+        const scoreColors = ['#e8f5e9', '#f1f8e9', '#fff9c4', '#fff3e0', '#fce4ec'];
+        const uniqueScores = [...new Set(points.map(p => p.score))].sort((a, b) => b - a);
+        uniqueScores.forEach((score, i) => {
+            const yPos = yScale(score);
+            const nextScore = i < uniqueScores.length - 1 ? uniqueScores[i + 1] : yMin - yPad;
+            const yNext = yScale(nextScore);
+            g.append('rect')
+                .attr('x', 0)
+                .attr('y', Math.min(yPos, yNext))
+                .attr('width', plotW)
+                .attr('height', Math.abs(yNext - yPos))
+                .attr('fill', scoreColors[i % scoreColors.length])
+                .attr('opacity', 0.5);
+        });
+        // X축 범위 내 포인트만 사용
+        const xDomainMax = xMax + xPad;
+        const visiblePoints = points.filter(p => p.x <= xDomainMax);
+        // 스코어 커브 (중간값 연결)
+        const line = d3
+            .line()
+            .x(d => xScale(d.x))
+            .y(d => yScale(d.score))
+            .curve(d3.curveMonotoneX);
+        g.append('path')
+            .datum(visiblePoints)
+            .attr('d', line)
+            .attr('fill', 'none')
+            .attr('stroke', '#1976d2')
+            .attr('stroke-width', 2.5);
+        // 축
+        g.append('g')
+            .attr('transform', `translate(0,${plotH})`)
+            .call(d3.axisBottom(xScale).ticks(Math.min(points.length, 8)))
+            .selectAll('text')
+            .attr('font-size', '10px');
+        g.append('g').call(d3.axisLeft(yScale).ticks(5)).selectAll('text').attr('font-size', '10px');
+        // 축 라벨
+        g.append('text')
+            .attr('x', plotW / 2)
+            .attr('y', plotH + 35)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '11px')
+            .attr('fill', '#666')
+            .text(`측정값${this.unit ? ` (${this.unit})` : ''}`);
+        g.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -plotH / 2)
+            .attr('y', -40)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '11px')
+            .attr('fill', '#666')
+            .text('성과 점수');
+        // 현재 값 표시
         if (this.value !== null && this.value !== undefined) {
-            // grades를 정렬
-            const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue);
-            // grades를 범위로 변환
-            const gradeRanges = sortedGrades.map((grade, index) => {
-                let min, max;
-                if (grade.minValue === grade.maxValue) {
-                    min = index === 0 ? 0 : (sortedGrades[index - 1].maxValue || 0);
-                    max = grade.maxValue;
-                }
-                else {
-                    min = grade.minValue;
-                    max = grade.maxValue;
-                }
-                return Object.assign(Object.assign({}, grade), { actualMin: min, actualMax: max });
-            });
-            // 마지막 grade인지 확인
-            const isLastGrade = (idx) => idx === gradeRanges.length - 1;
-            // 해당 value가 속한 grade 찾기
-            let matchedGradeRange = gradeRanges.find((g, idx) => {
-                if (isLastGrade(idx)) {
-                    return this.value >= g.actualMin;
-                }
-                return this.value >= g.actualMin && this.value <= g.actualMax;
-            });
-            const kpiScore = matchedGradeRange === null || matchedGradeRange === void 0 ? void 0 : matchedGradeRange.score;
-            // KPI Score 표시
-            if (kpiScore !== undefined && kpiScore !== null) {
+            const currentScore = this.interpolateScore(points, this.value);
+            if (currentScore !== null) {
+                const cx = xScale(this.value);
+                const cy = yScale(currentScore);
+                // 가이드 라인
+                g.append('line')
+                    .attr('x1', cx).attr('x2', cx)
+                    .attr('y1', cy).attr('y2', plotH)
+                    .attr('stroke', '#e53935').attr('stroke-width', 1).attr('stroke-dasharray', '3,3');
+                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', '3,3');
+                // 현재 값 포인트 + 툴팁
+                const tooltip = svg.append('g')
+                    .attr('class', 'tooltip-group')
+                    .attr('visibility', 'hidden');
+                const tipRect = tooltip.append('rect')
+                    .attr('rx', 4).attr('ry', 4)
+                    .attr('fill', 'rgba(33,33,33,0.9)')
+                    .attr('stroke', '#e53935').attr('stroke-width', 1);
+                const tipText1 = tooltip.append('text')
+                    .attr('fill', '#fff').attr('font-size', '11px').attr('font-weight', '600');
+                const tipText2 = tooltip.append('text')
+                    .attr('fill', '#ccc').attr('font-size', '10px');
+                const tipContent1 = `${this.kpiName || 'KPI'}`;
+                const tipContent2 = `측정값: ${this.value.toFixed(4)}${this.unit}  |  성과 점수: ${currentScore.toFixed(4)}`;
+                tipText1.text(tipContent1);
+                tipText2.text(tipContent2);
+                const tipW = Math.max(tipContent1.length, tipContent2.length) * 6.5 + 20;
+                const tipH = 40;
+                const tipX = Math.min(cx + margin.left + 12, w - tipW - 5);
+                const tipY = Math.max(cy + margin.top - tipH - 10, 5);
+                tipRect.attr('x', tipX).attr('y', tipY).attr('width', tipW).attr('height', tipH);
+                tipText1.attr('x', tipX + 8).attr('y', tipY + 15);
+                tipText2.attr('x', tipX + 8).attr('y', tipY + 30);
+                g.append('circle')
+                    .attr('cx', cx).attr('cy', cy)
+                    .attr('r', 7)
+                    .attr('fill', '#e53935').attr('stroke', '#fff').attr('stroke-width', 2)
+                    .style('cursor', 'pointer')
+                    .on('mouseenter', () => tooltip.attr('visibility', 'visible'))
+                    .on('mouseleave', () => tooltip.attr('visibility', 'hidden'));
+                // 헤더: 현재 값 + 스코어
                 svg
                     .append('text')
-                    .attr('class', 'value-label')
-                    .attr('x', chartWidth / 2)
-                    .attr('y', headerY)
+                    .attr('x', margin.left)
+                    .attr('y', 18)
                     .attr('font-size', '12px')
                     .attr('font-weight', 'bold')
-                    .attr('text-anchor', 'middle')
-                    .text(`KPI Score: ${kpiScore.toFixed(2)}`);
-            }
-            else {
+                    .attr('fill', '#e53935')
+                    .text(`측정값: ${this.value.toFixed(3)}${this.unit}`);
                 svg
                     .append('text')
-                    .attr('class', 'value-label')
-                    .attr('x', chartWidth / 2)
-                    .attr('y', headerY)
+                    .attr('x', margin.left + plotW / 2)
+                    .attr('y', 18)
                     .attr('font-size', '12px')
                     .attr('font-weight', 'bold')
-                    .attr('text-anchor', 'middle')
-                    .attr('fill', '#ff0000')
-                    .text(`KPI Score: 범위를 찾을 수 없음`);
+                    .attr('fill', '#e53935')
+                    .text(`성과 점수: ${currentScore.toFixed(4)}`);
             }
         }
-        else {
-            // value가 없을 때 KPI Score N/A 표시
+        // 제목
+        if (this.kpiName) {
             svg
                 .append('text')
-                .attr('class', 'value-label')
-                .attr('x', chartWidth / 2)
-                .attr('y', headerY)
-                .attr('font-size', '12px')
-                .attr('font-weight', 'bold')
+                .attr('x', w / 2)
+                .attr('y', 35)
                 .attr('text-anchor', 'middle')
-                .attr('fill', '#999')
-                .text(`KPI Score: N/A`);
+                .attr('font-size', '13px')
+                .attr('font-weight', '600')
+                .attr('fill', '#333')
+                .text(this.kpiName);
         }
     }
-    drawChart(g, svg, grades, width, height, chartWidth) {
-        var _a;
-        console.log('drawVerticalChart - Original grades:', grades);
-        console.log('drawVerticalChart - Current value:', this.value);
-        // grades를 범위로 변환 (minValue == maxValue인 경우, 이전 값부터 현재 값까지를 범위로 간주)
-        const gradeRanges = grades.map((grade, index) => {
-            let min, max;
-            if (grade.minValue === grade.maxValue) {
-                // Point 값인 경우: 이전 grade의 max ~ 현재 grade의 value
-                min = index === 0 ? 0 : (grades[index - 1].maxValue || 0);
-                max = grade.maxValue;
-            }
-            else {
-                // Range 값인 경우: 그대로 사용
-                min = grade.minValue;
-                max = grade.maxValue;
-            }
-            return Object.assign(Object.assign({}, grade), { actualMin: min, actualMax: max });
-        });
-        console.log('drawVerticalChart - Grade ranges:', gradeRanges);
-        // X축 스케일 (value 범위)
-        // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 "이상"으로 표시)
-        const allValues = gradeRanges
-            .slice(0, -1) // 마지막 제외
-            .flatMap(g => [g.actualMin, g.actualMax]);
-        // 마지막 grade의 min도 포함
-        if (gradeRanges.length > 0) {
-            allValues.push(gradeRanges[gradeRanges.length - 1].actualMin);
+    /** 1~5 평가형 KPI: 5단계 세그먼트 바 */
+    renderAssessmentGauge(svg) {
+        const w = this.chartWidth || 400;
+        const h = this.chartHeight || 200;
+        const currentScore = this.value !== null && this.value !== undefined ? Math.round(this.value) : 0;
+        // 제목
+        if (this.kpiName) {
+            svg.append('text')
+                .attr('x', w / 2).attr('y', 28)
+                .attr('text-anchor', 'middle')
+                .attr('font-size', '13px').attr('font-weight', '600').attr('fill', '#333')
+                .text(this.kpiName);
         }
-        const minVal = allValues.length > 0 ? Math.min(...allValues, 0) : 0;
-        const maxVal = allValues.length > 0 ? Math.max(...allValues) : 100;
-        console.log('drawVerticalChart - Scaled min/max:', minVal, maxVal);
-        // 현재 value가 있으면 범위에 포함
-        let displayMax = maxVal;
-        if (this.value !== null && this.value !== undefined) {
-            displayMax = Math.max(maxVal, this.value);
+        const barY = h * 0.4;
+        const barH = 36;
+        const barMargin = 40;
+        const barW = w - barMargin * 2;
+        const segW = barW / 5;
+        const colors = ['#ef5350', '#ff9800', '#ffca28', '#66bb6a', '#2e7d32'];
+        const labels = ['1', '2', '3', '4', '5'];
+        // 5개 세그먼트
+        for (let i = 0; i < 5; i++) {
+            const x = barMargin + i * segW;
+            const isActive = currentScore === i + 1;
+            // 배경
+            svg.append('rect')
+                .attr('x', x + 2).attr('y', barY)
+                .attr('width', segW - 4).attr('height', barH)
+                .attr('rx', 6)
+                .attr('fill', isActive ? colors[i] : '#e0e0e0')
+                .attr('opacity', isActive ? 1 : 0.4);
+            // 숫자 라벨
+            svg.append('text')
+                .attr('x', x + segW / 2).attr('y', barY + barH / 2 + 5)
+                .attr('text-anchor', 'middle')
+                .attr('font-size', isActive ? '16px' : '13px')
+                .attr('font-weight', isActive ? 'bold' : 'normal')
+                .attr('fill', isActive ? '#fff' : '#999')
+                .text(labels[i]);
+            // 설명 라벨 (아래)
+            const descLabels = ['매우 미흡', '미흡', '보통', '양호', '우수'];
+            svg.append('text')
+                .attr('x', x + segW / 2).attr('y', barY + barH + 18)
+                .attr('text-anchor', 'middle')
+                .attr('font-size', '10px')
+                .attr('fill', isActive ? colors[i] : '#bbb')
+                .text(descLabels[i]);
         }
-        const xScale = d3.scaleLinear().domain([minVal, displayMax]).range([0, width]).nice();
-        // Y축 스케일 (score 범위) - 실제 score 값에 비례하도록 설정
-        const scores = gradeRanges.map(g => g.score).filter(s => s !== undefined && s !== null);
-        const minScore = Math.min(...scores);
-        const maxScore = Math.max(...scores);
-        const yScale = d3.scaleLinear()
-            .domain([minScore, maxScore])
-            .range([height, 0])
-            .nice();
-        const isManyGrades = grades.length > 10; // 10개 이상이면 "많은 경우"로 간주
-        // 각 grade별로 영역과 라인 그리기
-        const isLastGrade = (idx) => idx === gradeRanges.length - 1;
-        gradeRanges.forEach((grade, index) => {
-            var _a, _b, _c;
-            // 마지막 grade는 "infinity"로 간주하고 차트 오른쪽까지 표시
-            const minValue = grade.actualMin;
-            const maxValue = grade.actualMax;
-            const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue;
-            const xMin = xScale(minValue);
-            const xMax = xScale(effectiveMaxValue);
-            // Y축 위치와 높이를 score 값에 비례하여 계산
-            const currentScore = (_a = grade.score) !== null && _a !== void 0 ? _a : 0;
-            const nextScore = index < gradeRanges.length - 1 ? ((_b = gradeRanges[index + 1].score) !== null && _b !== void 0 ? _b : currentScore) : maxScore;
-            const prevScore = index > 0 ? ((_c = gradeRanges[index - 1].score) !== null && _c !== void 0 ? _c : currentScore) : minScore;
-            const yBottom = index === 0 ? yScale(minScore) : yScale((prevScore + currentScore) / 2);
-            const yTop = isLastGrade(index) ? yScale(maxScore) : yScale((currentScore + nextScore) / 2);
-            const barHeight = yBottom - yTop;
-            const yCenter = (yTop + yBottom) / 2;
-            // 배경 영역 (매우 연한 색상)
-            g.append('rect')
-                .attr('x', xMin)
-                .attr('y', yTop)
-                .attr('width', xMax - xMin)
-                .attr('height', barHeight)
-                .attr('fill', grade.color || this.getDefaultColor(index))
-                .attr('opacity', 0.1);
-            // 수직선으로 grade 경계 표시
-            // 하한선 (마지막 grade가 아닌 경우만 - 마지막은 차트 오른쪽 경계이므로 불필요)
-            if (!isLastGrade(index)) {
-                g.append('line')
-                    .attr('x1', xMin)
-                    .attr('x2', xMin)
-                    .attr('y1', yTop)
-                    .attr('y2', yBottom)
-                    .attr('stroke', grade.color || this.getDefaultColor(index))
-                    .attr('stroke-width', 2);
-            }
-            // 상한선 (첫 번째와 마지막 grade 제외 - 첫 번째는 차트 왼쪽 경계, 마지막은 infinity)
-            if (index !== 0 && !isLastGrade(index)) {
-                g.append('line')
-                    .attr('x1', xMax)
-                    .attr('x2', xMax)
-                    .attr('y1', yTop)
-                    .attr('y2', yBottom)
-                    .attr('stroke', grade.color || this.getDefaultColor(index))
-                    .attr('stroke-width', 2)
-                    .attr('stroke-dasharray', '3,3');
+        // 현재 점수 강조
+        if (currentScore >= 1 && currentScore <= 5) {
+            const activeX = barMargin + (currentScore - 1) * segW;
+            // 위쪽 화살표
+            svg.append('text')
+                .attr('x', activeX + segW / 2).attr('y', barY - 8)
+                .attr('text-anchor', 'middle')
+                .attr('font-size', '14px').attr('font-weight', 'bold')
+                .attr('fill', colors[currentScore - 1])
+                .text(`${currentScore}점`);
+        }
+        else if (this.value !== null) {
+            svg.append('text')
+                .attr('x', w / 2).attr('y', barY - 8)
+                .attr('text-anchor', 'middle')
+                .attr('font-size', '13px').attr('fill', '#e53935')
+                .text(`Value: ${this.value}`);
+        }
+    }
+    /** grades에서 중간값(x) → score 포인트 배열 생성 */
+    buildMidpoints(grades) {
+        var _a;
+        const points = [];
+        // 마지막 유효 grade의 maxValue (99999 제외)
+        const validGrades = grades.filter(g => g.maxValue < 99999);
+        const lastValidMax = validGrades.length > 0 ? validGrades[validGrades.length - 1].maxValue : 1;
+        for (let i = 0; i < grades.length; i++) {
+            const g = grades[i];
+            const score = (_a = g.score) !== null && _a !== void 0 ? _a : 0;
+            if (g.minValue === g.maxValue) {
+                // point value
+                const prevMax = i > 0 ? grades[i - 1].maxValue : 0;
+                points.push({ x: (prevMax + g.maxValue) / 2, score });
             }
-            // Grade가 많은 경우: 라벨을 표시하지 않음
-            if (!isManyGrades) {
-                // Grade 라벨
-                g.append('text')
-                    .attr('class', 'grade-label')
-                    .attr('x', (xMin + xMax) / 2)
-                    .attr('y', yCenter + 4)
-                    .attr('text-anchor', 'middle')
-                    .text(grade.name);
-                // Score 라벨 (score가 있을 경우만 표시)
-                if (grade.score !== undefined && grade.score !== null) {
-                    g.append('text')
-                        .attr('class', 'grade-label')
-                        .attr('x', -5)
-                        .attr('y', yCenter)
-                        .attr('text-anchor', 'end')
-                        .text(`Score: ${grade.score.toFixed(2)}`);
-                }
-                // Value range 라벨 (마지막 grade인 경우 "이상" 표시)
-                const rangeText = isLastGrade(index)
-                    ? `${minValue.toFixed(1)}${this.unit} 이상`
-                    : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`;
-                g.append('text')
-                    .attr('class', 'axis-label')
-                    .attr('x', (xMin + xMax) / 2)
-                    .attr('y', height + 35)
-                    .attr('text-anchor', 'middle')
-                    .text(rangeText);
+            else if (g.maxValue >= 99999) {
+                // 마지막 "이상" 구간 — minValue 사용 (99999는 무시)
+                points.push({ x: g.minValue, score });
             }
-        });
-        // Y축 그리기
-        const yAxis = d3.axisLeft(yScale).ticks(5);
-        g.append('g').call(yAxis);
-        // Y축 라벨 (KPI Score)
-        g.append('text')
-            .attr('class', 'axis-label')
-            .attr('transform', 'rotate(-90)')
-            .attr('x', -height / 2)
-            .attr('y', -45)
-            .attr('text-anchor', 'middle')
-            .attr('font-weight', 'bold')
-            .text('KPI Score');
-        // X축 그리기 - d3 axis 사용
-        const xAxis = d3.axisBottom(xScale).ticks(10);
-        g.append('g')
-            .attr('transform', `translate(0,${height})`)
-            .call(xAxis);
-        // X축 라벨 (KPI Value)
-        g.append('text')
-            .attr('class', 'axis-label')
-            .attr('x', width / 2)
-            .attr('y', height + 40)
-            .attr('text-anchor', 'middle')
-            .text('KPI Value');
-        // 현재 value가 있을 때만 차트에 포인터 표시
-        if (this.value !== null && this.value !== undefined) {
-            // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)
-            // 마지막 grade는 "이상"이므로 actualMin 이상만 체크
-            let matchedGradeRange = gradeRanges.find((g, idx) => {
-                if (isLastGrade(idx)) {
-                    return this.value >= g.actualMin;
-                }
-                return this.value >= g.actualMin && this.value <= g.actualMax;
-            });
-            // 범위를 찾은 경우에만 차트에 포인터 표시
-            if (matchedGradeRange) {
-                const valueX = xScale(this.value);
-                const matchedScore = (_a = matchedGradeRange.score) !== null && _a !== void 0 ? _a : 0;
-                const valueY = yScale(matchedScore);
-                console.log('Current value:', this.value, 'valueX:', valueX);
-                console.log('Matched score:', matchedScore, 'valueY:', valueY);
-                // 현재 값 포인터
-                g.append('circle')
-                    .attr('cx', valueX)
-                    .attr('cy', valueY)
-                    .attr('r', 6)
-                    .attr('fill', '#e53935')
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 2);
+            else {
+                points.push({ x: (g.minValue + g.maxValue) / 2, score });
             }
         }
+        return points;
     }
-    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 grade data available');
-    }
-    getDefaultColor(index) {
-        const colors = ['#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
-        return colors[index % colors.length];
+    /** 포인트 배열에서 value에 대한 score를 선형 보간 */
+    interpolateScore(points, value) {
+        if (points.length === 0)
+            return null;
+        if (points.length === 1)
+            return points[0].score;
+        // value가 범위 밖인 경우
+        if (value <= points[0].x)
+            return points[0].score;
+        if (value >= points[points.length - 1].x)
+            return points[points.length - 1].score;
+        // 두 포인트 사이에서 보간
+        for (let i = 0; i < points.length - 1; i++) {
+            if (value >= points[i].x && value <= points[i + 1].x) {
+                const t = (value - points[i].x) / (points[i + 1].x - points[i].x);
+                return points[i].score + t * (points[i + 1].score - points[i].score);
+            }
+        }
+        return points[points.length - 1].score;
     }
 };
 KpiLookupChart.styles = css `
@@ -367,24 +341,6 @@ KpiLookupChart.styles = css `
       height: 100%;
       display: block;
     }
-    .chart-title {
-      font-size: 14px;
-      font-weight: 600;
-      fill: #333;
-    }
-    .grade-label {
-      font-size: 11px;
-      fill: #666;
-    }
-    .value-label {
-      font-size: 12px;
-      font-weight: 600;
-      fill: #e53935;
-    }
-    .axis-label {
-      font-size: 11px;
-      fill: #999;
-    }
   `;
 __decorate([
     property({ type: Array }),