@dssp/dkpi 1.0.0-alpha.86 → 1.0.0-alpha.88

package/dist-client/pages/sv-project-detail.js

@@ -13,6 +13,7 @@ import '../components/kpi-boxplot-chart';
 import '../components/kpi-single-boxplot-chart';
 import '../components/kpi-radar-chart';
 import '../components/kpi-lookup-chart';
+import '../components/kpi-step-lookup-chart';
 import '../components/kpi-2d-lookup-chart';
 let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(PageView) {
     constructor() {
@@ -31,13 +32,11 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
     get context() {
         var _a;
         return {
-            title: !isProjectTypeDomain() && this.project
-                ? `프로젝트 상세 정보 - ${(_a = this.project) === null || _a === void 0 ? void 0 : _a.name}`
-                : '프로젝트 상세 정보'
+            title: !isProjectTypeDomain() && this.project ? `프로젝트 상세 정보 - ${(_a = this.project) === null || _a === void 0 ? void 0 : _a.name}` : '프로젝트 상세 정보'
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return html `
       <div content>
         <div left>
@@ -59,7 +58,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                   <div class="value">${this.project.startDate} ~ ${this.project.endDate}</div>
                 </div>
                 <div class="row">
-                  <div class="label">• 현장상태</div>
+                  <div class="label">• 프로젝트 상태</div>
                   <div class="value status-value">${PROJECT_STATE[this.project.state]}</div>
                 </div>
                 <div class="row">
@@ -96,15 +95,11 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
               </div>
               <div class="grid-item row">
                 <div class="label">• 용적률</div>
-                <div class="value">
-                  ${((_h = (_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.floorAreaRatio) === null || _h === void 0 ? void 0 : _h.toLocaleString()) || '-'} %
-                </div>
+                <div class="value">${((_h = (_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.floorAreaRatio) === null || _h === void 0 ? void 0 : _h.toLocaleString()) || '-'} %</div>
               </div>
               <div class="grid-item row">
-                <div class="label">• 투입인력</div>
-                <div class="value">
-                  ${((_k = (_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.workerCount) === null || _k === void 0 ? void 0 : _k.toLocaleString()) || '-'} 명
-                </div>
+                <div class="label">• 총 투입인력(M/M)</div>
+                <div class="value">${((_k = (_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.workerCount) === null || _k === void 0 ? void 0 : _k.toLocaleString()) || '-'} 명</div>
               </div>
             </div>
           </div>
@@ -214,14 +209,13 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
           <div class="card group-box">
             <div class="kpi-header">
               <div>
-                <div>그룹별 분포</div>
+                <div>성과영역별 KPI</div>
                 <div class="triangle"></div>
               </div>
             </div>
             <div class="desc">
-              Boxplot(박스플롯)은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를 보여줍니다.
-              박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 검정색 가로선은 중앙값(메디안), 초록색 원은 평균값(Mean)을 의미합니다.
-              이 프로젝트의 값은 진한 오렌지색 원으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.
+              Boxplot(박스플롯)은 박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 파란색 가로선은 중앙값(median), 초록색 원은
+              평균값(Mean)을 의미합니다. 당해 프로젝트의 값은 붉은색 원으로 표시됩니다.
             </div>
             <div class="group-chart">
               <sv-kpi-boxplot-chart .data=${this.getYKpiBoxplotData()}></sv-kpi-boxplot-chart>
@@ -231,7 +225,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
           <div class="metrics-card">
             <div class="metrics-header">
               <div class="title">
-                <span>그룹별 상세 매트릭 데이터</span>
+                <span>성과영역별 KPI 측정값</span>
                 <div class="triangle"></div>
               </div>
             </div>
@@ -276,38 +270,48 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                   ${this.selectedKpi.score !== undefined && this.selectedKpi.score !== null
                 ? html `
                         <div class="popup-score">
-                          <span class="score-value">${parseFloat(Number(this.selectedKpi.score).toFixed(4))}</span>
-                          <span class="score-label">점</span>
+                          <span class="score-value">${parseFloat(Number(this.selectedKpi.score).toFixed(2))}</span>
                         </div>
                       `
                 : ''}
                   <button class="popup-close" @click=${this._closePopup}>×</button>
                 </div>
                 <div class="popup-chart-container">
-                  ${ /*
-              * scoreType 기반 차트 분기:
-              *
-              * CUSTOM (X13 등): 2D 룩업 히트맵 — 단, 증강데이터에서는 value가
-              *   이미 1~5 정수(룩업 결과)이므로 히트맵 대신 게이지로 폴백.
-              *   실제 프로젝트에서는 value가 편차율(소수점)이므로 히트맵 표시.
-              *
-              * LOOKUP: 성과 분포 커브 (kpi-lookup-chart)
-              * ASSESSMENT: 5단계 게이지 (kpi-lookup-chart 자동 감지)
-              */''}
                   ${
-            // 2D lookup KPI (X13 등) 는 항상 등급 기준 + 히트맵 함께 표시 (value 가
-            // 정수든 소수든 일관). _renderAssessmentGrades 안의 is2D 분기가 히트맵
-            // 같이 그림. 그 외 ASSESSMENT 도 등급 기준, LOOKUP 은 분포 커브.
-            (this.selectedKpi.scoreType === 'CUSTOM' ||
-                ((_l = this.selectedKpi.grades) === null || _l === void 0 ? void 0 : _l.type) === 'PROGRESS_DEVIATION_LOOKUP')
-                ? this._renderAssessmentGrades()
-                : this._isAssessmentOrIntegerScore()
-                    ? this._renderAssessmentGrades()
-                    : html `
+            /*
+             * scoreType 기반 차트 분기:
+             *
+             * CUSTOM (X13 등): 2D 룩업 히트맵 — 단, 증강데이터에서는 value가
+             *   이미 1~5 정수(룩업 결과)이므로 히트맵 대신 게이지로 폴백.
+             *   실제 프로젝트에서는 value가 편차율(소수점)이므로 히트맵 표시.
+             *
+             * LOOKUP: 성과 분포 커브 (kpi-lookup-chart)
+             * ASSESSMENT: 5단계 게이지 (kpi-lookup-chart 자동 감지)
+             */ ''}
+                  ${
+            // SL-PA 결과(X34 품질, X43 안전) 만 계단형 등급 분포 차트로 표시.
+            // (다른 KPI 차트 경로에는 영향 없음)
+            this.selectedKpi.pattern === 'X34' || this.selectedKpi.pattern === 'X43'
+                ? html `
+                          <kpi-step-lookup-chart
+                            .grades=${this.selectedKpi.grades || []}
+                            .value=${this.selectedKpi.value}
+                            .score=${(_l = this.selectedKpi.score) !== null && _l !== void 0 ? _l : null}
+                            unit=${this.selectedKpi.unit || ''}
+                          ></kpi-step-lookup-chart>
+                        `
+                : // 2D lookup KPI (X13 등) 는 항상 등급 기준 + 히트맵 함께 표시 (value 가
+                    // 정수든 소수든 일관). _renderAssessmentGrades 안의 is2D 분기가 히트맵
+                    // 같이 그림. 그 외 ASSESSMENT 도 등급 기준, LOOKUP 은 분포 커브.
+                    this.selectedKpi.scoreType === 'CUSTOM' || ((_m = this.selectedKpi.grades) === null || _m === void 0 ? void 0 : _m.type) === 'PROGRESS_DEVIATION_LOOKUP'
+                        ? this._renderAssessmentGrades()
+                        : this._isAssessmentOrIntegerScore()
+                            ? this._renderAssessmentGrades()
+                            : html `
                             <kpi-lookup-chart
                               .grades=${this.selectedKpi.grades || []}
                               .value=${this.selectedKpi.value}
-                              .score=${(_m = this.selectedKpi.score) !== null && _m !== void 0 ? _m : null}
+                              .score=${(_o = this.selectedKpi.score) !== null && _o !== void 0 ? _o : null}
                               .scoreType=${this.selectedKpi.scoreType || ''}
                               .valueType=${this.selectedKpi.valueType || ''}
                               unit=${this.selectedKpi.unit || ''}
@@ -520,10 +524,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             const hasValid = (v) => v.value !== null && v.value !== undefined;
             this.pendingMetrics = targets.filter((m) => {
                 if (m.periodType === 'MONTH') {
-                    return !values.some(v => v.metricId === m.id &&
-                        v.periodType === 'MONTH' &&
-                        (v.valueDate || '').startsWith(lastMonthYm) &&
-                        hasValid(v));
+                    return !values.some(v => v.metricId === m.id && v.periodType === 'MONTH' && (v.valueDate || '').startsWith(lastMonthYm) && hasValid(v));
                 }
                 return !values.some(v => v.metricId === m.id && v.periodType === m.periodType && hasValid(v));
             });
@@ -662,6 +663,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             }
             this.selectedKpi = {
                 kpiName: displayName,
+                pattern: kpiNamePattern, // X34/X43 등 — 계단형 차트 라우팅용
                 grades: kpi.grades || [],
                 scoreType: kpi.scoreType || '',
                 valueType: kpi.valueType || '',
@@ -709,8 +711,12 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         const currentScore = (kpi === null || kpi === void 0 ? void 0 : kpi.score) != null ? Math.round(kpi.score) : 0;
         const grades = Array.isArray(kpi === null || kpi === void 0 ? void 0 : kpi.grades) ? kpi.grades : [];
         const colors = ['#e53935', '#ff9800', '#ffca28', '#66bb6a', '#2e7d32'];
-        const is2D = (kpi === null || kpi === void 0 ? void 0 : kpi.scoreType) === 'CUSTOM' || (kpi === null || kpi === void 0 ? void 0 : kpi.valueType) === 'COMPOSITE' ||
-            ((kpi === null || kpi === void 0 ? void 0 : kpi.grades) && typeof kpi.grades === 'object' && !Array.isArray(kpi.grades) && kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
+        const is2D = (kpi === null || kpi === void 0 ? void 0 : kpi.scoreType) === 'CUSTOM' ||
+            (kpi === null || kpi === void 0 ? void 0 : kpi.valueType) === 'COMPOSITE' ||
+            ((kpi === null || kpi === void 0 ? void 0 : kpi.grades) &&
+                typeof kpi.grades === 'object' &&
+                !Array.isArray(kpi.grades) &&
+                kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
         // grades가 있으면 description 사용, 없으면 기본 라벨
         const defaultLabels = ['매우 미흡', '미흡', '보통', '양호', '우수'];
         const items = [1, 2, 3, 4, 5].map(score => {
@@ -730,8 +736,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         return html `
       <div style="padding: 20px; display: flex; flex-direction: column; height: 100%;">
         ${hasDescriptions
-            ? items.map(item => html `
-                <div
+            ? items.map(item => html ` <div
                   style="
                     display: flex; align-items: center; gap: 10px;
                     padding: 10px 14px; margin-bottom: 6px;
@@ -749,13 +754,17 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                       display: flex; align-items: center; justify-content: center;
                       font-weight: 700; font-size: 14px; flex-shrink: 0;
                     "
-                  >${item.score}</span>
-                  <span style="font-size: 0.9rem; color: ${item.active ? '#333' : '#666'}; font-weight: ${item.active ? '600' : '400'};">
+                    >${item.score}</span
+                  >
+                  <span
+                    style="font-size: 0.9rem; color: ${item.active ? '#333' : '#666'}; font-weight: ${item.active
+                ? '600'
+                : '400'};"
+                  >
                     ${item.desc}
                   </span>
                 </div>`)
             : ''}
-
         ${is2D && ((_a = kpi === null || kpi === void 0 ? void 0 : kpi.grades) === null || _a === void 0 ? void 0 : _a.rows)
             ? html `
               <div style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
@@ -800,30 +809,30 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         return {
             Y1: {
                 name: '일정성과 (Y1)',
-                score: this.getYKpiScoreFormatted('Y1. 일정성과'),
+                score: this.getYKpiScoreFormatted('일정성과(Y1)'),
                 metrics: [
                     { label: '연면적 대비 공사기간', pattern: 'X11', value: this.getMetricValue('X11') },
                     { label: '설계변경 공기 증감률', pattern: 'X12', value: this.getMetricValue('X12') },
                     { label: '일정 이탈 수준', pattern: 'X13', value: this.getMetricValue('X13') },
-                    { label: '일정성과 수준 평가', pattern: 'X14', value: this.getMetricValue('X14') }
+                    { label: '일정성과 정성 평가', pattern: 'X14', value: this.getMetricValue('X14') }
                 ]
             },
             Y2: {
                 name: '비용성과 (Y2)',
-                score: this.getYKpiScoreFormatted('Y2. 비용성과'),
+                score: this.getYKpiScoreFormatted('비용성과(Y2)'),
                 metrics: [
                     { label: '연면적 대비 공사비', pattern: 'X21', value: this.getMetricValue('X21') },
-                    { label: '설계변경 공사비 증감', pattern: 'X22', value: this.getMetricValue('X22') },
-                    { label: '일정성과 수준 평가', pattern: 'X23', value: this.getMetricValue('X23') }
+                    { label: '설계변경 공사비 증감률', pattern: 'X22', value: this.getMetricValue('X22') },
+                    { label: '비용성과 정성 평가', pattern: 'X23', value: this.getMetricValue('X23') }
                 ]
             },
             Y3: {
                 name: '품질성과 (Y3)',
-                score: this.getYKpiScoreFormatted('Y3. 품질성과'),
+                score: this.getYKpiScoreFormatted('품질성과(Y3)'),
                 metrics: [
                     { label: '검측 불합격률', pattern: 'X33', value: this.getMetricValue('X33') },
                     { label: '품질 SL-PA 결과', pattern: 'X34', value: this.getMetricValue('X34') },
-                    { label: '품질성과 수준 평가', pattern: 'X35', value: this.getMetricValue('X35') }
+                    { label: '품질성과 정성 평가', pattern: 'X35', value: this.getMetricValue('X35') }
                 ]
             },
             Y4: {
@@ -833,41 +842,43 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                     { label: '재해율', pattern: 'X41', value: this.getMetricValue('X41') },
                     { label: '재해강도율', pattern: 'X42', value: this.getMetricValue('X42') },
                     { label: '안전 SL-PA 결과', pattern: 'X43', value: this.getMetricValue('X43') },
-                    { label: '안전성과 수준 평가', pattern: 'X44', value: this.getMetricValue('X44') }
+                    { label: '안전성과 정성 평가', pattern: 'X44', value: this.getMetricValue('X44') }
                 ]
             },
             Y5: {
                 name: '환경성과 (Y5)',
-                score: this.getYKpiScoreFormatted('Y5. 환경성과'),
+                score: this.getYKpiScoreFormatted('환경성과(Y5)'),
                 metrics: [
                     { label: '건설폐기물 발생량', pattern: 'X51', value: this.getMetricValue('X51') },
-                    { label: '환경성과 수준 평가', pattern: 'X52', value: this.getMetricValue('X52') }
+                    { label: '환경성과 정성 평가', pattern: 'X52', value: this.getMetricValue('X52') }
                 ]
             },
             Y6: {
                 name: '생산성 성과 (Y6)',
-                score: this.getYKpiScoreFormatted('Y6. 생산성성과'),
+                score: this.getYKpiScoreFormatted('생산성성과(Y6)'),
                 metrics: [
-                    { label: '투입인력 생산성', pattern: 'X61', value: this.getMetricValue('X61') },
-                    { label: '생산성성과 수준 평가', pattern: 'X62', value: this.getMetricValue('X62') }
+                    { label: '총 투입인력(M/M) 생산성', pattern: 'X61', value: this.getMetricValue('X61') },
+                    { label: '생산성성과 정성 평가', pattern: 'X62', value: this.getMetricValue('X62') }
                 ]
             }
         };
     }
     getYKpiBoxplotData() {
-        // KPI 카테고리 매핑 (Y-category KPI names to display categories)
-        const categoryMapping = {
-            Y01_productivity: '생산성과',
-            Y02_schedule: '일정성과',
-            Y03_cost: '비용성과',
-            Y04_quality: '품질성과',
-            Y05_safety: '안전성과',
-            Y06_environment: '환경성과'
+        // kpiName 표기가 환경마다 다양('Y1. 일정성과' / 'Y1. 일정' / '일정성과(Y1)' 등)하므로
+        // Y1~Y6 코드만 추출해 짧은 X축 라벨로 매핑 — 전체 문자열에 의존하지 않아 견고함.
+        const yLabelByCode = {
+            Y1: '일정',
+            Y2: '비용',
+            Y3: '품질',
+            Y4: '안전',
+            Y5: '환경',
+            Y6: '생산성'
         };
         const data = [];
         // Y-KPI 카테고리별로 통합된 통계 생성
         this.kpiYComprehensiveStats.forEach(stat => {
-            const category = categoryMapping[stat.kpiName] || stat.kpiName;
+            var _a, _b;
+            const category = yLabelByCode[(_b = (_a = (stat.kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''] || stat.kpiName;
             data.push({
                 org: category, // org 필드 사용 (boxplot 차트가 기대하는 필드명)
                 min: stat.minVal * 100,
@@ -914,20 +925,21 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         return (kpiValue === null || kpiValue === void 0 ? void 0 : kpiValue.value) || 0;
     }
     getRadarChartData() {
-        // KPI 카테고리 매핑 (Y-category KPI names to display categories)
-        const categoryMapping = {
-            Y01_productivity: '생산성',
-            Y02_schedule: '일정',
-            Y03_cost: '비용',
-            Y04_quality: '품질',
-            Y05_safety: '안전',
-            Y06_environment: '환경'
+        // kpiName 표기가 다양하므로 Y1~Y6 코드만 추출해 짧은 라벨로 매핑 (박스플롯과 동일 방식).
+        const yLabelByCode = {
+            Y1: '일정',
+            Y2: '비용',
+            Y3: '품질',
+            Y4: '안전',
+            Y5: '환경',
+            Y6: '생산성'
         };
         const data = [];
         const categories = [];
         // Create baseline data from comprehensive stats (using avgVal as baseline)
         this.kpiYComprehensiveStats.forEach(stat => {
-            const category = categoryMapping[stat.kpiName] || stat.kpiName;
+            var _a, _b;
+            const category = yLabelByCode[(_b = (_a = (stat.kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''] || stat.kpiName;
             if (!categories.includes(category)) {
                 categories.push(category);
             }
@@ -948,7 +960,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             data,
             categories: categories.length > 0
                 ? categories
-                : ['Y1. 일정성과', 'Y2. 비용성과', 'Y3. 품질성과', 'Y4. 안전성과', 'Y5. 환경성과', 'Y6. 생산성성과']
+                : ['일정', '비용', '품질', '안전', '환경', '생산성']
         };
     }
     getBoxPlotDataForProject(project) {