npm - @dssp/dkpi - Versions diffs - 1.0.0-alpha.64 → 1.0.0-alpha.65 - Mend

@dssp/dkpi 1.0.0-alpha.64 → 1.0.0-alpha.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist-client/components/kpi-lookup-chart.js +43 -43
package/dist-client/components/kpi-lookup-chart.js.map +1 -1
package/dist-client/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2

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

@@ -183,7 +183,7 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
             return Object.assign(Object.assign({}, grade), { actualMin: min, actualMax: max });
         });
         console.log('drawVerticalChart - Grade ranges:', gradeRanges);
-        // Y축 스케일 (value 범위)
+        // X축 스케일 (value 범위)
         // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 "이상"으로 표시)
         const allValues = gradeRanges
             .slice(0, -1) // 마지막 제외
@@ -200,60 +200,60 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
         if (this.value !== null && this.value !== undefined) {
             displayMax = Math.max(maxVal, this.value);
         }
-        const yScale = d3.scaleLinear().domain([minVal, displayMax]).range([height, 0]).nice();
-        // X축 스케일 (score 범위) - 실제 score 값에 비례하도록 설정
+        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 xScale = d3.scaleLinear()
+        const yScale = d3.scaleLinear()
             .domain([minScore, maxScore])
-            .range([0, width])
+            .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"로 간주하고 차트 상단까지 표시
+            // 마지막 grade는 "infinity"로 간주하고 차트 오른쪽까지 표시
             const minValue = grade.actualMin;
             const maxValue = grade.actualMax;
             const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue;
-            const yMin = yScale(minValue);
-            const yMax = yScale(effectiveMaxValue);
-            // X축 위치와 너비를 score 값에 비례하여 계산
+            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 xLeft = index === 0 ? xScale(minScore) : xScale((prevScore + currentScore) / 2);
-            const xRight = isLastGrade(index) ? xScale(maxScore) : xScale((currentScore + nextScore) / 2);
-            const barWidth = xRight - xLeft;
-            const xCenter = (xLeft + xRight) / 2;
+            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', xLeft)
-                .attr('y', yMax)
-                .attr('width', barWidth)
-                .attr('height', yMin - yMax)
+                .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가 아닌 경우만 - 마지막은 차트 하단 경계이므로 불필요)
+            // 수직선으로 grade 경계 표시
+            // 하한선 (마지막 grade가 아닌 경우만 - 마지막은 차트 오른쪽 경계이므로 불필요)
             if (!isLastGrade(index)) {
                 g.append('line')
-                    .attr('x1', xLeft)
-                    .attr('x2', xRight)
-                    .attr('y1', yMin)
-                    .attr('y2', yMin)
+                    .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)
+            // 상한선 (첫 번째와 마지막 grade 제외 - 첫 번째는 차트 왼쪽 경계, 마지막은 infinity)
             if (index !== 0 && !isLastGrade(index)) {
                 g.append('line')
-                    .attr('x1', xLeft)
-                    .attr('x2', xRight)
-                    .attr('y1', yMax)
-                    .attr('y2', yMax)
+                    .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');
@@ -263,17 +263,17 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
                 // Grade 라벨
                 g.append('text')
                     .attr('class', 'grade-label')
-                    .attr('x', xCenter)
-                    .attr('y', (yMin + yMax) / 2 + 4)
+                    .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', xCenter)
-                        .attr('y', height + 20)
-                        .attr('text-anchor', 'middle')
+                        .attr('x', -5)
+                        .attr('y', yCenter)
+                        .attr('text-anchor', 'end')
                         .text(`Score: ${grade.score.toFixed(2)}`);
                 }
                 // Value range 라벨 (마지막 grade인 경우 "이상" 표시)
@@ -282,7 +282,7 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
                     : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`;
                 g.append('text')
                     .attr('class', 'axis-label')
-                    .attr('x', xCenter)
+                    .attr('x', (xMin + xMax) / 2)
                     .attr('y', height + 35)
                     .attr('text-anchor', 'middle')
                     .text(rangeText);
@@ -291,27 +291,27 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
         // Y축 그리기
         const yAxis = d3.axisLeft(yScale).ticks(5);
         g.append('g').call(yAxis);
-        // Y축 라벨 (KPI Value)
+        // 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')
-            .text('KPI Value');
+            .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 Score)
+        // X축 라벨 (KPI Value)
         g.append('text')
             .attr('class', 'axis-label')
             .attr('x', width / 2)
             .attr('y', height + 40)
             .attr('text-anchor', 'middle')
-            .attr('font-weight', 'bold')
-            .text('KPI Score');
+            .text('KPI Value');
         // 현재 value가 있을 때만 차트에 포인터 표시
         if (this.value !== null && this.value !== undefined) {
             // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)
@@ -324,11 +324,11 @@ let KpiLookupChart = class KpiLookupChart extends LitElement {
             });
             // 범위를 찾은 경우에만 차트에 포인터 표시
             if (matchedGradeRange) {
-                const valueY = yScale(this.value);
+                const valueX = xScale(this.value);
                 const matchedScore = (_a = matchedGradeRange.score) !== null && _a !== void 0 ? _a : 0;
-                const valueX = xScale(matchedScore);
-                console.log('Current value:', this.value, 'valueY:', valueY);
-                console.log('Matched score:', matchedScore, 'valueX:', valueX);
+                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)

package/dist-client/components/kpi-lookup-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi-lookup-chart.js","sourceRoot":"","sources":["../../client/components/kpi-lookup-chart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AAYjB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACsB,WAAM,GAAY,EAAE,CAAA;QACnB,UAAK,GAAkB,IAAI,CAAA;QAC3B,SAAI,GAAW,EAAE,CAAA;QACjB,YAAO,GAAW,EAAE,CAAA;QAkCxC,eAAU,GAAG,CAAC,CAAA;QACd,gBAAW,GAAG,CAAC,CAAA;IAuYzB,CAAC;IApYC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,UAAU;iBACd,IAAI,CAAC,WAAW;uBACV,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;;;KAGrD,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACjD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;gBAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAA;gBAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAA;QACjC,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAEO,WAAW;QACjB,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAA;QACrE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAE3B,SAAS;QACT,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;YACxB,OAAM;QACR,CAAC;QAED,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,GAAG,CAAA;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAA;QACjC,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA;QAC3D,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;QAE5C,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAEtF,KAAK;QACL,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;iBAChB,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;iBAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACvB,CAAC;QAED,8BAA8B;QAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QAEvB,2BAA2B;QAC3B,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;QAE7E,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACvD,CAAC;IAEO,UAAU,CAAC,GAAQ,EAAE,UAAkB;QAC7C,MAAM,OAAO,GAAG,EAAE,CAAA;QAElB,eAAe;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;QAC5D,CAAC;aAAM,CAAC;YACN,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;iBACpB,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC3B,CAAC;QAED,eAAe;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,aAAa;YACb,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;YAE7E,iBAAiB;YACjB,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpD,IAAI,GAAW,EAAE,GAAW,CAAA;gBAC5B,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACtC,GAAG,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAA;oBAC/D,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACtB,CAAC;qBAAM,CAAC;oBACN,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;oBACpB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACtB,CAAC;gBACD,uCAAY,KAAK,KAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAE;YACrD,CAAC,CAAC,CAAA;YAEF,iBAAiB;YACjB,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,CAAA;YAEnE,wBAAwB;YACxB,IAAI,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBAClD,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;oBACrB,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;gBACnC,CAAC;gBACD,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;YACjE,CAAC,CAAC,CAAA;YAEF,MAAM,QAAQ,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,CAAA;YAEzC,eAAe;YACf,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAChD,GAAG;qBACA,MAAM,CAAC,MAAM,CAAC;qBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;qBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;qBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;qBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,cAAc,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC9C,CAAC;iBAAM,CAAC;gBACN,GAAG;qBACA,MAAM,CAAC,MAAM,CAAC;qBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;qBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;qBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;qBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,wBAAwB,CAAC,CAAA;YACnC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,+BAA+B;YAC/B,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;iBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;iBAC7B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;iBACpB,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,CAAM,EAAE,GAAQ,EAAE,MAAe,EAAE,KAAa,EAAE,MAAc,EAAE,UAAkB;;QACpG,OAAO,CAAC,GAAG,CAAC,sCAAsC,EAAE,MAAM,CAAC,CAAA;QAC3D,OAAO,CAAC,GAAG,CAAC,oCAAoC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAE7D,mEAAmE;QACnE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,GAAW,EAAE,GAAW,CAAA;YAE5B,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACtC,+CAA+C;gBAC/C,GAAG,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAA;gBACzD,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,sBAAsB;gBACtB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACpB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;YACtB,CAAC;YAED,uCAAY,KAAK,KAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAE;QACrD,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,WAAW,CAAC,CAAA;QAE7D,oBAAoB;QACpB,qDAAqD;QACrD,MAAM,SAAS,GAAG,WAAW;aAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;aACtB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QAE3C,qBAAqB;QACrB,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAC/D,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACnE,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;QAElE,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAElE,uBAAuB;QACvB,IAAI,UAAU,GAAG,MAAM,CAAA;QACvB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC3C,CAAC;QAED,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QAEtF,2CAA2C;QAC3C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAAa,CAAA;QACnG,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QAEpC,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,EAAE;aAC5B,MAAM,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;aAC5B,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;aACjB,IAAI,EAAE,CAAA;QAET,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,CAAA,CAAC,uBAAuB;QAE/D,uBAAuB;QACvB,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,CAAA;QAEnE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;YACnC,yCAAyC;YACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAA;YAChC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAA;YAChC,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAA;YACpE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC7B,MAAM,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;YAEtC,8BAA8B;YAC9B,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,CAAC,CAAA;YACrC,MAAM,SAAS,GAAG,KAAK,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;YAC5G,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEvF,MAAM,KAAK,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;YACrF,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;YAC7F,MAAM,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;YAC/B,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;YAEpC,mBAAmB;YACnB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC;iBAChB,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC;iBACf,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;iBACvB,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;iBAC3B,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxD,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAEvB,oBAAoB;YACpB,iDAAiD;YACjD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;qBACjB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;qBAC1D,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;YAED,2DAA2D;YAC3D,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;qBACjB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;qBAC1D,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;qBACvB,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;YACpC,CAAC;YAED,4BAA4B;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,WAAW;gBACX,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;qBAChC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBAEnB,8BAA8B;gBAC9B,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;oBACtD,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;yBACb,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;yBAC5B,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;yBAClB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;yBACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;yBAC7B,IAAI,CAAC,UAAU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;gBAC7C,CAAC;gBAED,yCAAyC;gBACzC,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC;oBAClC,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,KAAK;oBACzC,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAA;gBAE/D,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;qBAC3B,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;qBACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,SAAS,CAAC,CAAA;YACpB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,SAAS;QACT,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAC1C,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAEzB,oBAAoB;QACpB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;aAC3B,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;aAChC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;aACtB,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;aACd,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,WAAW,CAAC,CAAA;QAEpB,sBAAsB;QACtB,MAAM,KAAK,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAC7C,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;aACV,IAAI,CAAC,WAAW,EAAE,eAAe,MAAM,GAAG,CAAC;aAC3C,IAAI,CAAC,KAAK,CAAC,CAAA;QAEd,oBAAoB;QACpB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;aAC3B,IAAI,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC;aACpB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;aACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;aAC3B,IAAI,CAAC,WAAW,CAAC,CAAA;QAEpB,6BAA6B;QAC7B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,kDAAkD;YAClD,sCAAsC;YACtC,IAAI,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBAClD,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;oBACrB,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;gBACnC,CAAC;gBACD,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;YACjE,CAAC,CAAC,CAAA;YAEF,yBAAyB;YACzB,IAAI,iBAAiB,EAAE,CAAC;gBACtB,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACjC,MAAM,YAAY,GAAG,MAAA,iBAAiB,CAAC,KAAK,mCAAI,CAAC,CAAA;gBACjD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;gBAEnC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;gBAC5D,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;gBAE9D,WAAW;gBACX,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,GAAQ;QAC7B,GAAG;aACA,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aAC9B,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;aAC/B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;aACpB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACzB,IAAI,CAAC,yBAAyB,CAAC,CAAA;IACpC,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;QAC5F,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;;AAvaM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BZ;AAnC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAqB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAqB;AAJrC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8a1B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\ninterface Grade {\n name: string\n minValue: number\n maxValue: number\n score?: number // Optional to match KpiScore type\n color?: string\n description?: string // Optional field from KpiScore\n}\n\n@customElement('kpi-lookup-chart')\nexport class KpiLookupChart extends LitElement {\n @property({ type: Array }) grades: Grade[] = []\n @property({ type: Number }) value: number \| null = null\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 .chart-title {\n font-size: 14px;\n font-weight: 600;\n fill: #333;\n }\n .grade-label {\n font-size: 11px;\n fill: #666;\n }\n .value-label {\n font-size: 12px;\n font-weight: 600;\n fill: #e53935;\n }\n .axis-label {\n font-size: 11px;\n fill: #999;\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-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 private renderChart() {\n const svg = d3.select(this.renderRoot.querySelector('#lookup-chart'))\n svg.selectAll('*').remove()\n\n // 데이터 검증\n if (!this.grades \|\| this.grades.length === 0) {\n this.drawEmptyState(svg)\n return\n }\n\n const w = this.chartWidth \|\| 400\n const h = this.chartHeight \|\| 200\n const margin = { top: 40, right: 30, bottom: 50, left: 60 }\n const plotW = w - margin.left - margin.right\n const plotH = h - margin.top - margin.bottom\n\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n // 제목\n if (this.kpiName) {\n svg\n .append('text')\n .attr('class', 'chart-title')\n .attr('x', w / 2)\n .attr('y', 15)\n .attr('text-anchor', 'middle')\n .text(this.kpiName)\n }\n\n // KPI Value와 Score를 차트 상단에 표시\n this.drawHeader(svg, w)\n\n // grades를 정렬 (minValue 기준)\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n this.drawChart(g, svg, sortedGrades, plotW, plotH, w)\n }\n\n private drawHeader(svg: any, chartWidth: number) {\n const headerY = 30\n\n // KPI Value 표시\n if (this.value !== null && this.value !== undefined) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .text(`KPI Value: ${this.value.toFixed(2)}${this.unit}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('fill', '#999')\n .text(`KPI Value: N/A`)\n }\n\n // KPI Score 표시\n if (this.value !== null && this.value !== undefined) {\n // grades를 정렬\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n // grades를 범위로 변환\n const gradeRanges = sortedGrades.map((grade, index) => {\n let min: number, max: number\n if (grade.minValue === grade.maxValue) {\n min = index === 0 ? 0 : (sortedGrades[index - 1].maxValue \|\| 0)\n max = grade.maxValue\n } else {\n min = grade.minValue\n max = grade.maxValue\n }\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n // 마지막 grade인지 확인\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n // 해당 value가 속한 grade 찾기\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n const kpiScore = matchedGradeRange?.score\n\n // KPI Score 표시\n if (kpiScore !== undefined && kpiScore !== null) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .text(`KPI Score: ${kpiScore.toFixed(2)}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#ff0000')\n .text(`KPI Score: 범위를 찾을 수 없음`)\n }\n } else {\n // value가 없을 때 KPI Score N/A 표시\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .text(`KPI Score: N/A`)\n }\n }\n\n private drawChart(g: any, svg: any, grades: Grade[], width: number, height: number, chartWidth: number) {\n console.log('drawVerticalChart - Original grades:', grades)\n console.log('drawVerticalChart - Current value:', this.value)\n\n // grades를 범위로 변환 (minValue == maxValue인 경우, 이전 값부터 현재 값까지를 범위로 간주)\n const gradeRanges = grades.map((grade, index) => {\n let min: number, max: number\n\n if (grade.minValue === grade.maxValue) {\n // Point 값인 경우: 이전 grade의 max ~ 현재 grade의 value\n min = index === 0 ? 0 : (grades[index - 1].maxValue \|\| 0)\n max = grade.maxValue\n } else {\n // Range 값인 경우: 그대로 사용\n min = grade.minValue\n max = grade.maxValue\n }\n\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n console.log('drawVerticalChart - Grade ranges:', gradeRanges)\n\n // Y축 스케일 (value 범위)\n // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 \"이상\"으로 표시)\n const allValues = gradeRanges\n .slice(0, -1) // 마지막 제외\n .flatMap(g => [g.actualMin, g.actualMax])\n\n // 마지막 grade의 min도 포함\n if (gradeRanges.length > 0) {\n allValues.push(gradeRanges[gradeRanges.length - 1].actualMin)\n }\n\n const minVal = allValues.length > 0 ? Math.min(...allValues, 0) : 0\n const maxVal = allValues.length > 0 ? Math.max(...allValues) : 100\n\n console.log('drawVerticalChart - Scaled min/max:', minVal, maxVal)\n\n // 현재 value가 있으면 범위에 포함\n let displayMax = maxVal\n if (this.value !== null && this.value !== undefined) {\n displayMax = Math.max(maxVal, this.value)\n }\n\n const yScale = d3.scaleLinear().domain([minVal, displayMax]).range([height, 0]).nice()\n\n // X축 스케일 (score 범위) - 실제 score 값에 비례하도록 설정\n const scores = gradeRanges.map(g => g.score).filter(s => s !== undefined && s !== null) as number[]\n const minScore = Math.min(...scores)\n const maxScore = Math.max(...scores)\n\n const xScale = d3.scaleLinear()\n .domain([minScore, maxScore])\n .range([0, width])\n .nice()\n\n const isManyGrades = grades.length > 10 // 10개 이상이면 \"많은 경우\"로 간주\n\n // 각 grade별로 영역과 라인 그리기\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n gradeRanges.forEach((grade, index) => {\n // 마지막 grade는 \"infinity\"로 간주하고 차트 상단까지 표시\n const minValue = grade.actualMin\n const maxValue = grade.actualMax\n const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue\n const yMin = yScale(minValue)\n const yMax = yScale(effectiveMaxValue)\n\n // X축 위치와 너비를 score 값에 비례하여 계산\n const currentScore = grade.score ?? 0\n const nextScore = index < gradeRanges.length - 1 ? (gradeRanges[index + 1].score ?? currentScore) : maxScore\n const prevScore = index > 0 ? (gradeRanges[index - 1].score ?? currentScore) : minScore\n\n const xLeft = index === 0 ? xScale(minScore) : xScale((prevScore + currentScore) / 2)\n const xRight = isLastGrade(index) ? xScale(maxScore) : xScale((currentScore + nextScore) / 2)\n const barWidth = xRight - xLeft\n const xCenter = (xLeft + xRight) / 2\n\n // 배경 영역 (매우 연한 색상)\n g.append('rect')\n .attr('x', xLeft)\n .attr('y', yMax)\n .attr('width', barWidth)\n .attr('height', yMin - yMax)\n .attr('fill', grade.color \|\| this.getDefaultColor(index))\n .attr('opacity', 0.1)\n\n // 수평선으로 grade 경계 표시\n // 하한선 (마지막 grade가 아닌 경우만 - 마지막은 차트 하단 경계이므로 불필요)\n if (!isLastGrade(index)) {\n g.append('line')\n .attr('x1', xLeft)\n .attr('x2', xRight)\n .attr('y1', yMin)\n .attr('y2', yMin)\n .attr('stroke', grade.color \|\| this.getDefaultColor(index))\n .attr('stroke-width', 2)\n }\n\n // 상한선 (첫 번째와 마지막 grade 제외 - 첫 번째는 차트 상단 경계, 마지막은 infinity)\n if (index !== 0 && !isLastGrade(index)) {\n g.append('line')\n .attr('x1', xLeft)\n .attr('x2', xRight)\n .attr('y1', yMax)\n .attr('y2', yMax)\n .attr('stroke', grade.color \|\| this.getDefaultColor(index))\n .attr('stroke-width', 2)\n .attr('stroke-dasharray', '3,3')\n }\n\n // Grade가 많은 경우: 라벨을 표시하지 않음\n if (!isManyGrades) {\n // Grade 라벨\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', xCenter)\n .attr('y', (yMin + yMax) / 2 + 4)\n .attr('text-anchor', 'middle')\n .text(grade.name)\n\n // Score 라벨 (score가 있을 경우만 표시)\n if (grade.score !== undefined && grade.score !== null) {\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', xCenter)\n .attr('y', height + 20)\n .attr('text-anchor', 'middle')\n .text(`Score: ${grade.score.toFixed(2)}`)\n }\n\n // Value range 라벨 (마지막 grade인 경우 \"이상\" 표시)\n const rangeText = isLastGrade(index)\n ? `${minValue.toFixed(1)}${this.unit} 이상`\n : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`\n\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', xCenter)\n .attr('y', height + 35)\n .attr('text-anchor', 'middle')\n .text(rangeText)\n }\n })\n\n // Y축 그리기\n const yAxis = d3.axisLeft(yScale).ticks(5)\n g.append('g').call(yAxis)\n\n // Y축 라벨 (KPI Value)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('transform', 'rotate(-90)')\n .attr('x', -height / 2)\n .attr('y', -45)\n .attr('text-anchor', 'middle')\n .text('KPI Value')\n\n // X축 그리기 - d3 axis 사용\n const xAxis = d3.axisBottom(xScale).ticks(10)\n g.append('g')\n .attr('transform', `translate(0,${height})`)\n .call(xAxis)\n\n // X축 라벨 (KPI Score)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', width / 2)\n .attr('y', height + 40)\n .attr('text-anchor', 'middle')\n .attr('font-weight', 'bold')\n .text('KPI Score')\n\n // 현재 value가 있을 때만 차트에 포인터 표시\n if (this.value !== null && this.value !== undefined) {\n // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)\n // 마지막 grade는 \"이상\"이므로 actualMin 이상만 체크\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n // 범위를 찾은 경우에만 차트에 포인터 표시\n if (matchedGradeRange) {\n const valueY = yScale(this.value)\n const matchedScore = matchedGradeRange.score ?? 0\n const valueX = xScale(matchedScore)\n\n console.log('Current value:', this.value, 'valueY:', valueY)\n console.log('Matched score:', matchedScore, 'valueX:', valueX)\n\n // 현재 값 포인터\n g.append('circle')\n .attr('cx', valueX)\n .attr('cy', valueY)\n .attr('r', 6)\n .attr('fill', '#e53935')\n .attr('stroke', '#fff')\n .attr('stroke-width', 2)\n }\n }\n }\n\n private drawEmptyState(svg: any) {\n svg\n .append('text')\n .attr('x', this.chartWidth / 2)\n .attr('y', this.chartHeight / 2)\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .attr('font-size', '14px')\n .text('No grade data available')\n }\n\n private getDefaultColor(index: number): string {\n const colors = ['#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722']\n return colors[index % colors.length]\n }\n}\n"]}
1	+ {"version":3,"file":"kpi-lookup-chart.js","sourceRoot":"","sources":["../../client/components/kpi-lookup-chart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AAYjB,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACsB,WAAM,GAAY,EAAE,CAAA;QACnB,UAAK,GAAkB,IAAI,CAAA;QAC3B,SAAI,GAAW,EAAE,CAAA;QACjB,YAAO,GAAW,EAAE,CAAA;QAkCxC,eAAU,GAAG,CAAC,CAAA;QACd,gBAAW,GAAG,CAAC,CAAA;IAuYzB,CAAC;IApYC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,UAAU;iBACd,IAAI,CAAC,WAAW;uBACV,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;;;KAGrD,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACjD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;gBAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAA;gBAC9B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAA;QACjC,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAEO,WAAW;QACjB,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAA;QACrE,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAE3B,SAAS;QACT,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;YACxB,OAAM;QACR,CAAC;QAED,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,GAAG,CAAA;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,CAAA;QACjC,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA;QAC3D,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAA;QAC5C,MAAM,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;QAE5C,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,GAAG,CAAC,CAAA;QAEtF,KAAK;QACL,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;iBAChB,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;iBAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QACvB,CAAC;QAED,8BAA8B;QAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QAEvB,2BAA2B;QAC3B,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;QAE7E,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IACvD,CAAC;IAEO,UAAU,CAAC,GAAQ,EAAE,UAAkB;QAC7C,MAAM,OAAO,GAAG,EAAE,CAAA;QAElB,eAAe;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;QAC5D,CAAC;aAAM,CAAC;YACN,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;iBACpB,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC3B,CAAC;QAED,eAAe;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,aAAa;YACb,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;YAE7E,iBAAiB;YACjB,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpD,IAAI,GAAW,EAAE,GAAW,CAAA;gBAC5B,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACtC,GAAG,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAA;oBAC/D,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACtB,CAAC;qBAAM,CAAC;oBACN,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;oBACpB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACtB,CAAC;gBACD,uCAAY,KAAK,KAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAE;YACrD,CAAC,CAAC,CAAA;YAEF,iBAAiB;YACjB,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,CAAA;YAEnE,wBAAwB;YACxB,IAAI,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBAClD,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;oBACrB,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;gBACnC,CAAC;gBACD,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;YACjE,CAAC,CAAC,CAAA;YAEF,MAAM,QAAQ,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,CAAA;YAEzC,eAAe;YACf,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAChD,GAAG;qBACA,MAAM,CAAC,MAAM,CAAC;qBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;qBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;qBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;qBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,cAAc,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC9C,CAAC;iBAAM,CAAC;gBACN,GAAG;qBACA,MAAM,CAAC,MAAM,CAAC;qBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;qBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;qBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;qBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;qBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,wBAAwB,CAAC,CAAA;YACnC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,+BAA+B;YAC/B,GAAG;iBACA,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;iBAC5B,IAAI,CAAC,GAAG,EAAE,UAAU,GAAG,CAAC,CAAC;iBACzB,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;iBAClB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;iBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;iBAC3B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;iBAC7B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;iBACpB,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,CAAM,EAAE,GAAQ,EAAE,MAAe,EAAE,KAAa,EAAE,MAAc,EAAE,UAAkB;;QACpG,OAAO,CAAC,GAAG,CAAC,sCAAsC,EAAE,MAAM,CAAC,CAAA;QAC3D,OAAO,CAAC,GAAG,CAAC,oCAAoC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAE7D,mEAAmE;QACnE,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,GAAW,EAAE,GAAW,CAAA;YAE5B,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACtC,+CAA+C;gBAC/C,GAAG,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAA;gBACzD,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,sBAAsB;gBACtB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;gBACpB,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAA;YACtB,CAAC;YAED,uCAAY,KAAK,KAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAE;QACrD,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,WAAW,CAAC,CAAA;QAE7D,oBAAoB;QACpB,qDAAqD;QACrD,MAAM,SAAS,GAAG,WAAW;aAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;aACtB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QAE3C,qBAAqB;QACrB,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAC/D,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACnE,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;QAElE,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAElE,uBAAuB;QACvB,IAAI,UAAU,GAAG,MAAM,CAAA;QACvB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC3C,CAAC;QAED,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QAErF,2CAA2C;QAC3C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAAa,CAAA;QACnG,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QAEpC,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,EAAE;aAC5B,MAAM,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;aAC5B,KAAK,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;aAClB,IAAI,EAAE,CAAA;QAET,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,CAAA,CAAC,uBAAuB;QAE/D,uBAAuB;QACvB,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC,CAAA;QAEnE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;YACnC,0CAA0C;YAC1C,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAA;YAChC,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAA;YAChC,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAA;YACpE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC7B,MAAM,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;YAEtC,8BAA8B;YAC9B,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,CAAC,CAAA;YACrC,MAAM,SAAS,GAAG,KAAK,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;YAC5G,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEvF,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAA;YACvF,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;YAC3F,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAA;YAChC,MAAM,OAAO,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YAEpC,mBAAmB;YACnB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC;iBACf,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC;iBACf,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;iBAC1B,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;iBACxD,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAEvB,oBAAoB;YACpB,kDAAkD;YAClD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;gBACxB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;qBACnB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;qBAC1D,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;YAED,2DAA2D;YAC3D,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;qBACnB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;qBAC1D,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;qBACvB,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;YACpC,CAAC;YAED,4BAA4B;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,WAAW;gBACX,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,OAAO,GAAG,CAAC,CAAC;qBACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBAEnB,8BAA8B;gBAC9B,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;oBACtD,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;yBACb,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC;yBAC5B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;yBACb,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC;yBAClB,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;yBAC1B,IAAI,CAAC,UAAU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;gBAC7C,CAAC;gBAED,yCAAyC;gBACzC,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC;oBAClC,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,KAAK;oBACzC,CAAC,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAA;gBAE/D,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;qBACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;qBAC3B,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;qBAC5B,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;qBACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;qBAC7B,IAAI,CAAC,SAAS,CAAC,CAAA;YACpB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,SAAS;QACT,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAC1C,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAEzB,oBAAoB;QACpB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;aAC3B,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;aAChC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;aACtB,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;aACd,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;aAC3B,IAAI,CAAC,WAAW,CAAC,CAAA;QAEpB,sBAAsB;QACtB,MAAM,KAAK,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAC7C,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;aACV,IAAI,CAAC,WAAW,EAAE,eAAe,MAAM,GAAG,CAAC;aAC3C,IAAI,CAAC,KAAK,CAAC,CAAA;QAEd,oBAAoB;QACpB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;aAC3B,IAAI,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC;aACpB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;aACtB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,WAAW,CAAC,CAAA;QAEpB,6BAA6B;QAC7B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YACpD,kDAAkD;YAClD,sCAAsC;YACtC,IAAI,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBAClD,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;oBACrB,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;gBACnC,CAAC;gBACD,OAAO,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAM,IAAI,CAAC,CAAC,SAAS,CAAA;YACjE,CAAC,CAAC,CAAA;YAEF,yBAAyB;YACzB,IAAI,iBAAiB,EAAE,CAAC;gBACtB,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACjC,MAAM,YAAY,GAAG,MAAA,iBAAiB,CAAC,KAAK,mCAAI,CAAC,CAAA;gBACjD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;gBAEnC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;gBAC5D,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;gBAE9D,WAAW;gBACX,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACf,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;qBAClB,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;qBACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;qBACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,GAAQ;QAC7B,GAAG;aACA,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;aAC9B,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;aAC/B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;aACpB,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACzB,IAAI,CAAC,yBAAyB,CAAC,CAAA;IACpC,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;QAC5F,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;;AAvaM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BZ;AAnC0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAqB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAqB;AAJrC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8a1B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport * as d3 from 'd3'\n\ninterface Grade {\n name: string\n minValue: number\n maxValue: number\n score?: number // Optional to match KpiScore type\n color?: string\n description?: string // Optional field from KpiScore\n}\n\n@customElement('kpi-lookup-chart')\nexport class KpiLookupChart extends LitElement {\n @property({ type: Array }) grades: Grade[] = []\n @property({ type: Number }) value: number \| null = null\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 .chart-title {\n font-size: 14px;\n font-weight: 600;\n fill: #333;\n }\n .grade-label {\n font-size: 11px;\n fill: #666;\n }\n .value-label {\n font-size: 12px;\n font-weight: 600;\n fill: #e53935;\n }\n .axis-label {\n font-size: 11px;\n fill: #999;\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-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 private renderChart() {\n const svg = d3.select(this.renderRoot.querySelector('#lookup-chart'))\n svg.selectAll('*').remove()\n\n // 데이터 검증\n if (!this.grades \|\| this.grades.length === 0) {\n this.drawEmptyState(svg)\n return\n }\n\n const w = this.chartWidth \|\| 400\n const h = this.chartHeight \|\| 200\n const margin = { top: 40, right: 30, bottom: 50, left: 60 }\n const plotW = w - margin.left - margin.right\n const plotH = h - margin.top - margin.bottom\n\n const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)\n\n // 제목\n if (this.kpiName) {\n svg\n .append('text')\n .attr('class', 'chart-title')\n .attr('x', w / 2)\n .attr('y', 15)\n .attr('text-anchor', 'middle')\n .text(this.kpiName)\n }\n\n // KPI Value와 Score를 차트 상단에 표시\n this.drawHeader(svg, w)\n\n // grades를 정렬 (minValue 기준)\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n this.drawChart(g, svg, sortedGrades, plotW, plotH, w)\n }\n\n private drawHeader(svg: any, chartWidth: number) {\n const headerY = 30\n\n // KPI Value 표시\n if (this.value !== null && this.value !== undefined) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .text(`KPI Value: ${this.value.toFixed(2)}${this.unit}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', 10)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('fill', '#999')\n .text(`KPI Value: N/A`)\n }\n\n // KPI Score 표시\n if (this.value !== null && this.value !== undefined) {\n // grades를 정렬\n const sortedGrades = [...this.grades].sort((a, b) => a.minValue - b.minValue)\n\n // grades를 범위로 변환\n const gradeRanges = sortedGrades.map((grade, index) => {\n let min: number, max: number\n if (grade.minValue === grade.maxValue) {\n min = index === 0 ? 0 : (sortedGrades[index - 1].maxValue \|\| 0)\n max = grade.maxValue\n } else {\n min = grade.minValue\n max = grade.maxValue\n }\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n // 마지막 grade인지 확인\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n // 해당 value가 속한 grade 찾기\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n const kpiScore = matchedGradeRange?.score\n\n // KPI Score 표시\n if (kpiScore !== undefined && kpiScore !== null) {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .text(`KPI Score: ${kpiScore.toFixed(2)}`)\n } else {\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#ff0000')\n .text(`KPI Score: 범위를 찾을 수 없음`)\n }\n } else {\n // value가 없을 때 KPI Score N/A 표시\n svg\n .append('text')\n .attr('class', 'value-label')\n .attr('x', chartWidth / 2)\n .attr('y', headerY)\n .attr('font-size', '12px')\n .attr('font-weight', 'bold')\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .text(`KPI Score: N/A`)\n }\n }\n\n private drawChart(g: any, svg: any, grades: Grade[], width: number, height: number, chartWidth: number) {\n console.log('drawVerticalChart - Original grades:', grades)\n console.log('drawVerticalChart - Current value:', this.value)\n\n // grades를 범위로 변환 (minValue == maxValue인 경우, 이전 값부터 현재 값까지를 범위로 간주)\n const gradeRanges = grades.map((grade, index) => {\n let min: number, max: number\n\n if (grade.minValue === grade.maxValue) {\n // Point 값인 경우: 이전 grade의 max ~ 현재 grade의 value\n min = index === 0 ? 0 : (grades[index - 1].maxValue \|\| 0)\n max = grade.maxValue\n } else {\n // Range 값인 경우: 그대로 사용\n min = grade.minValue\n max = grade.maxValue\n }\n\n return { ...grade, actualMin: min, actualMax: max }\n })\n\n console.log('drawVerticalChart - Grade ranges:', gradeRanges)\n\n // X축 스케일 (value 범위)\n // 마지막 grade를 제외한 모든 값으로 범위 계산 (마지막 grade는 \"이상\"으로 표시)\n const allValues = gradeRanges\n .slice(0, -1) // 마지막 제외\n .flatMap(g => [g.actualMin, g.actualMax])\n\n // 마지막 grade의 min도 포함\n if (gradeRanges.length > 0) {\n allValues.push(gradeRanges[gradeRanges.length - 1].actualMin)\n }\n\n const minVal = allValues.length > 0 ? Math.min(...allValues, 0) : 0\n const maxVal = allValues.length > 0 ? Math.max(...allValues) : 100\n\n console.log('drawVerticalChart - Scaled min/max:', minVal, maxVal)\n\n // 현재 value가 있으면 범위에 포함\n let displayMax = maxVal\n if (this.value !== null && this.value !== undefined) {\n displayMax = Math.max(maxVal, this.value)\n }\n\n const xScale = d3.scaleLinear().domain([minVal, displayMax]).range([0, width]).nice()\n\n // Y축 스케일 (score 범위) - 실제 score 값에 비례하도록 설정\n const scores = gradeRanges.map(g => g.score).filter(s => s !== undefined && s !== null) as number[]\n const minScore = Math.min(...scores)\n const maxScore = Math.max(...scores)\n\n const yScale = d3.scaleLinear()\n .domain([minScore, maxScore])\n .range([height, 0])\n .nice()\n\n const isManyGrades = grades.length > 10 // 10개 이상이면 \"많은 경우\"로 간주\n\n // 각 grade별로 영역과 라인 그리기\n const isLastGrade = (idx: number) => idx === gradeRanges.length - 1\n\n gradeRanges.forEach((grade, index) => {\n // 마지막 grade는 \"infinity\"로 간주하고 차트 오른쪽까지 표시\n const minValue = grade.actualMin\n const maxValue = grade.actualMax\n const effectiveMaxValue = isLastGrade(index) ? displayMax : maxValue\n const xMin = xScale(minValue)\n const xMax = xScale(effectiveMaxValue)\n\n // Y축 위치와 높이를 score 값에 비례하여 계산\n const currentScore = grade.score ?? 0\n const nextScore = index < gradeRanges.length - 1 ? (gradeRanges[index + 1].score ?? currentScore) : maxScore\n const prevScore = index > 0 ? (gradeRanges[index - 1].score ?? currentScore) : minScore\n\n const yBottom = index === 0 ? yScale(minScore) : yScale((prevScore + currentScore) / 2)\n const yTop = isLastGrade(index) ? yScale(maxScore) : yScale((currentScore + nextScore) / 2)\n const barHeight = yBottom - yTop\n const yCenter = (yTop + yBottom) / 2\n\n // 배경 영역 (매우 연한 색상)\n g.append('rect')\n .attr('x', xMin)\n .attr('y', yTop)\n .attr('width', xMax - xMin)\n .attr('height', barHeight)\n .attr('fill', grade.color \|\| this.getDefaultColor(index))\n .attr('opacity', 0.1)\n\n // 수직선으로 grade 경계 표시\n // 하한선 (마지막 grade가 아닌 경우만 - 마지막은 차트 오른쪽 경계이므로 불필요)\n if (!isLastGrade(index)) {\n g.append('line')\n .attr('x1', xMin)\n .attr('x2', xMin)\n .attr('y1', yTop)\n .attr('y2', yBottom)\n .attr('stroke', grade.color \|\| this.getDefaultColor(index))\n .attr('stroke-width', 2)\n }\n\n // 상한선 (첫 번째와 마지막 grade 제외 - 첫 번째는 차트 왼쪽 경계, 마지막은 infinity)\n if (index !== 0 && !isLastGrade(index)) {\n g.append('line')\n .attr('x1', xMax)\n .attr('x2', xMax)\n .attr('y1', yTop)\n .attr('y2', yBottom)\n .attr('stroke', grade.color \|\| this.getDefaultColor(index))\n .attr('stroke-width', 2)\n .attr('stroke-dasharray', '3,3')\n }\n\n // Grade가 많은 경우: 라벨을 표시하지 않음\n if (!isManyGrades) {\n // Grade 라벨\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', (xMin + xMax) / 2)\n .attr('y', yCenter + 4)\n .attr('text-anchor', 'middle')\n .text(grade.name)\n\n // Score 라벨 (score가 있을 경우만 표시)\n if (grade.score !== undefined && grade.score !== null) {\n g.append('text')\n .attr('class', 'grade-label')\n .attr('x', -5)\n .attr('y', yCenter)\n .attr('text-anchor', 'end')\n .text(`Score: ${grade.score.toFixed(2)}`)\n }\n\n // Value range 라벨 (마지막 grade인 경우 \"이상\" 표시)\n const rangeText = isLastGrade(index)\n ? `${minValue.toFixed(1)}${this.unit} 이상`\n : `${minValue.toFixed(1)}-${maxValue.toFixed(1)}${this.unit}`\n\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', (xMin + xMax) / 2)\n .attr('y', height + 35)\n .attr('text-anchor', 'middle')\n .text(rangeText)\n }\n })\n\n // Y축 그리기\n const yAxis = d3.axisLeft(yScale).ticks(5)\n g.append('g').call(yAxis)\n\n // Y축 라벨 (KPI Score)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('transform', 'rotate(-90)')\n .attr('x', -height / 2)\n .attr('y', -45)\n .attr('text-anchor', 'middle')\n .attr('font-weight', 'bold')\n .text('KPI Score')\n\n // X축 그리기 - d3 axis 사용\n const xAxis = d3.axisBottom(xScale).ticks(10)\n g.append('g')\n .attr('transform', `translate(0,${height})`)\n .call(xAxis)\n\n // X축 라벨 (KPI Value)\n g.append('text')\n .attr('class', 'axis-label')\n .attr('x', width / 2)\n .attr('y', height + 40)\n .attr('text-anchor', 'middle')\n .text('KPI Value')\n\n // 현재 value가 있을 때만 차트에 포인터 표시\n if (this.value !== null && this.value !== undefined) {\n // 해당 value가 속한 grade 찾기 (actualMin, actualMax 사용)\n // 마지막 grade는 \"이상\"이므로 actualMin 이상만 체크\n let matchedGradeRange = gradeRanges.find((g, idx) => {\n if (isLastGrade(idx)) {\n return this.value! >= g.actualMin\n }\n return this.value! >= g.actualMin && this.value! <= g.actualMax\n })\n\n // 범위를 찾은 경우에만 차트에 포인터 표시\n if (matchedGradeRange) {\n const valueX = xScale(this.value)\n const matchedScore = matchedGradeRange.score ?? 0\n const valueY = yScale(matchedScore)\n\n console.log('Current value:', this.value, 'valueX:', valueX)\n console.log('Matched score:', matchedScore, 'valueY:', valueY)\n\n // 현재 값 포인터\n g.append('circle')\n .attr('cx', valueX)\n .attr('cy', valueY)\n .attr('r', 6)\n .attr('fill', '#e53935')\n .attr('stroke', '#fff')\n .attr('stroke-width', 2)\n }\n }\n }\n\n private drawEmptyState(svg: any) {\n svg\n .append('text')\n .attr('x', this.chartWidth / 2)\n .attr('y', this.chartHeight / 2)\n .attr('text-anchor', 'middle')\n .attr('fill', '#999')\n .attr('font-size', '14px')\n .text('No grade data available')\n }\n\n private getDefaultColor(index: number): string {\n const colors = ['#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722']\n return colors[index % colors.length]\n }\n}\n"]}