@dssp/dkpi 1.0.0-alpha.84 → 1.0.0-alpha.85

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

@@ -25,6 +25,8 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         this.selectedKpi = null;
         /** 이 프로젝트에 아직 한 번도 입력되지 않은 metric (active 한 manual/import 한정) */
         this.pendingMetrics = [];
+        /** 현재 프로젝트의 모든 KpiMetricValue (metric.name 포함) — 2D lookup chart 의 progressRate / value 도출용. */
+        this.allKpiMetricValues = [];
     }
     get context() {
         var _a;
@@ -35,7 +37,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return html `
       <div content>
         <div left>
@@ -271,6 +273,14 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
               <div class="popup-content" @click=${(e) => e.stopPropagation()}>
                 <div class="popup-header">
                   <div class="popup-title">${this.selectedKpi.kpiName} — 성과 분포</div>
+                  ${this.selectedKpi.score !== undefined && this.selectedKpi.score !== null
+                ? html `
+                        <div class="popup-score">
+                          <span class="score-value">${Math.round(Number(this.selectedKpi.score))}</span>
+                          <span class="score-label">점</span>
+                        </div>
+                      `
+                : ''}
                   <button class="popup-close" @click=${this._closePopup}>×</button>
                 </div>
                 <div class="popup-chart-container">
@@ -284,32 +294,24 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
               * LOOKUP: 성과 분포 커브 (kpi-lookup-chart)
               * ASSESSMENT: 5단계 게이지 (kpi-lookup-chart 자동 감지)
               */''}
-                  ${(this.selectedKpi.scoreType === 'CUSTOM' ||
-                ((_l = this.selectedKpi.grades) === null || _l === void 0 ? void 0 : _l.type) === 'PROGRESS_DEVIATION_LOOKUP') &&
-                this.selectedKpi.value !== null &&
-                !(this.selectedKpi.value === Math.floor(this.selectedKpi.value) &&
-                    this.selectedKpi.value >= 1 &&
-                    this.selectedKpi.value <= 5)
-                ? html `
-                        <kpi-2d-lookup-chart
-                          .grades=${this.selectedKpi.grades}
-                          .value=${this.selectedKpi.value}
-                          .progressRate=${(_o = (_m = this.project) === null || _m === void 0 ? void 0 : _m.totalProgress) !== null && _o !== void 0 ? _o : 50}
-                          unit="%"
-                          kpiName=${this.selectedKpi.kpiName || ''}
-                        ></kpi-2d-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 `
-                          <kpi-lookup-chart
-                            .grades=${this.selectedKpi.grades || []}
-                            .value=${this.selectedKpi.value}
-                            .scoreType=${this.selectedKpi.scoreType || ''}
-                            .valueType=${this.selectedKpi.valueType || ''}
-                            unit=${this.selectedKpi.unit || ''}
-                          ></kpi-lookup-chart>
-                        `}
+                            <kpi-lookup-chart
+                              .grades=${this.selectedKpi.grades || []}
+                              .value=${this.selectedKpi.value}
+                              .scoreType=${this.selectedKpi.scoreType || ''}
+                              .valueType=${this.selectedKpi.valueType || ''}
+                              unit=${this.selectedKpi.unit || ''}
+                            ></kpi-lookup-chart>
+                          `}
                 </div>
               </div>
             </div>
@@ -489,7 +491,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                 this.pendingMetrics = [];
                 return;
             }
-            // 2) 이 프로젝트의 모든 KpiMetricValue (value 도 가져와서 null/undefined 체크)
+            // 2) 이 프로젝트의 모든 KpiMetricValue (metric.name 포함 — 2D 차트의 latest lookup 에도 사용)
             const valuesResp = await client.query({
                 query: gql `
           query KpiMetricValues($filters: [Filter!]) {
@@ -499,6 +501,10 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                 periodType
                 valueDate
                 value
+                metric {
+                  id
+                  name
+                }
               }
             }
           }
@@ -507,6 +513,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                 context: { headers: tenantHeaders((_e = this.project) === null || _e === void 0 ? void 0 : _e.code) }
             });
             const values = ((_g = (_f = valuesResp.data) === null || _f === void 0 ? void 0 : _f.kpiMetricValues) === null || _g === void 0 ? void 0 : _g.items) || [];
+            this.allKpiMetricValues = values;
             const lastMonthYm = moment().tz('Asia/Seoul').subtract(1, 'month').format('YYYY-MM');
             // 3) Step 1/2 와 동일 기준으로 미입력 판정 — row 존재 AND value 존재 (null/undefined 아님).
             const hasValid = (v) => v.value !== null && v.value !== undefined;
@@ -585,6 +592,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             projectXKpiValues(projectId: $projectId) {
               id
               value
+              score
               valueDate
               kpi {
                 id
@@ -616,7 +624,7 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         this._fetchKpiWithGradesByPattern(kpiNamePattern, metric.label);
     }
     async _fetchKpiWithGradesByPattern(kpiNamePattern, displayName) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         try {
             // X-KPI 이름 패턴으로 전체 이름 찾기 (projectXKpiValues에서)
             const kpiValue = this.projectXKpiValues.find(kv => { var _a; return ((_a = kv.kpi) === null || _a === void 0 ? void 0 : _a.name) && kv.kpi.name.includes(kpiNamePattern); });
@@ -657,7 +665,8 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                 scoreType: kpi.scoreType || '',
                 valueType: kpi.valueType || '',
                 value: (_c = kpiValue.value) !== null && _c !== void 0 ? _c : null,
-                unit: ((_d = kpi.vizMeta) === null || _d === void 0 ? void 0 : _d.unit) || ''
+                score: (_d = kpiValue.score) !== null && _d !== void 0 ? _d : null,
+                unit: ((_e = kpi.vizMeta) === null || _e === void 0 ? void 0 : _e.unit) || ''
             };
             this.showScoreDistribution = true;
         }
@@ -693,9 +702,10 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
     }
     /** 등급 기준 표시 (ASSESSED / 1~5 정수 score) — 현재 값 강조 + CUSTOM은 2D 히트맵도 표시 */
     _renderAssessmentGrades() {
-        var _a, _b, _c;
+        var _a;
         const kpi = this.selectedKpi;
-        const currentScore = (kpi === null || kpi === void 0 ? void 0 : kpi.value) != null ? Math.round(kpi.value) : 0;
+        // score 가 진짜 등급. kpi.value 는 raw 측정값 (편차율 등) 이라 score 로 쓰면 안 됨.
+        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' ||
@@ -714,11 +724,10 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         // ASSESSED(감리자 평가)이고 grades에 description이 있는 경우만 한 줄씩 상세 표시
         // X13 등 COMPOSITE/CUSTOM은 인라인 칩으로 간결하게
         const hasDescriptions = !is2D && grades.length > 0 && grades.some((g) => g.description);
+        // ASSESSMENT (감리자 평가) 의 등급 description 만 노출. 2D lookup 은 score 가 이미
+        // popup-header 큰 점수로 표시되므로 등급 기준 행/동그라미 중복 제거.
         return html `
-      <div style="padding: 20px;">
-        <div style="font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: #333;">
-          등급 기준 ${currentScore >= 1 ? html `<span style="color: ${colors[currentScore - 1]}; margin-left: 8px;">현재: ${currentScore}점</span>` : ''}
-        </div>
+      <div style="padding: 20px; display: flex; flex-direction: column; height: 100%;">
         ${hasDescriptions
             ? items.map(item => html `
                 <div
@@ -744,30 +753,19 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
                     ${item.desc}
                   </span>
                 </div>`)
-            : html `
-              <div style="display: flex; gap: 6px; flex-wrap: wrap;">
-                ${items.map(item => html `
-                    <span style="
-                      display: inline-flex; align-items: center; justify-content: center;
-                      width: 36px; height: 36px; border-radius: 50%;
-                      background: ${item.active ? item.color : '#e0e0e0'};
-                      color: ${item.active ? '#fff' : '#999'};
-                      font-weight: 700; font-size: 14px;
-                      border: 2px solid ${item.active ? item.color : 'transparent'};
-                    ">${item.score}</span>`)}
-              </div>
-            `}
+            : ''}
 
         ${is2D && ((_a = kpi === null || kpi === void 0 ? void 0 : kpi.grades) === null || _a === void 0 ? void 0 : _a.rows)
             ? html `
-              <div style="margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 16px;">
+              <div style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
                 <div style="font-size: 0.9rem; font-weight: 700; color: #333; margin-bottom: 8px;">
                   공정률 × 공기편차 성과 분포
                 </div>
-                <div style="height: 250px;">
+                <div style="flex: 1; min-height: 0;">
                   <kpi-2d-lookup-chart
                     .grades=${kpi.grades}
-                    .progressRate=${(_c = (_b = this.project) === null || _b === void 0 ? void 0 : _b.totalProgress) !== null && _c !== void 0 ? _c : 50}
+                    .value=${this._getScheduleDeviation()}
+                    .progressRate=${this._getProgressRate()}
                   ></kpi-2d-lookup-chart>
                 </div>
               </div>
@@ -882,6 +880,32 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
         });
         return data.sort((a, b) => a.org.localeCompare(b.org));
     }
+    /**
+     * KpiMetric.name 이 주어진 이름인 KpiMetricValue 중 가장 최근 valueDate 의 value.
+     * 2D lookup chart 의 progressRate / value 도출용.
+     */
+    _getLatestMetricValue(metricName) {
+        const candidates = this.allKpiMetricValues
+            .filter(v => { var _a; return ((_a = v.metric) === null || _a === void 0 ? void 0 : _a.name) === metricName && v.value !== null && v.value !== undefined; })
+            .sort((a, b) => (b.valueDate || '').localeCompare(a.valueDate || ''));
+        return candidates.length > 0 ? candidates[0].value : null;
+    }
+    /** 2D lookup chart 의 progressRate (X축, 실적공정율 %) — 실적공정율 metric latest 우선, 없으면 fallback. */
+    _getProgressRate() {
+        var _a, _b;
+        const latest = this._getLatestMetricValue('실적공정율');
+        if (latest !== null)
+            return latest;
+        return (_b = (_a = this.project) === null || _a === void 0 ? void 0 : _a.totalProgress) !== null && _b !== void 0 ? _b : 50;
+    }
+    /** 2D lookup chart 의 value (Y축, 공기편차 비율) — '일정 이탈 수준' metric latest 우선, 없으면 selectedKpi.value. */
+    _getScheduleDeviation() {
+        var _a, _b;
+        const latest = this._getLatestMetricValue('일정 이탈 수준');
+        if (latest !== null)
+            return latest;
+        return (_b = (_a = this.selectedKpi) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    }
     getProjectYKpiValue(kpiName) {
         var _a, _b;
         // 현재 프로젝트의 kpiValues 배열에서 해당 KPI 값을 찾습니다
@@ -1365,6 +1389,23 @@ SvProjectDetailPage.styles = [
         font-weight: 700;
         color: #35618e;
       }
+      .popup-score {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        margin-left: auto;
+        margin-right: 16px;
+      }
+      .popup-score .score-value {
+        font-size: 44px;
+        font-weight: 800;
+        color: #e53935;
+        line-height: 1;
+      }
+      .popup-score .score-label {
+        font-size: 14px;
+        color: #888;
+      }
       .popup-close {
         cursor: pointer;
         font-size: 24px;
@@ -1417,6 +1458,10 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], SvProjectDetailPage.prototype, "pendingMetrics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "allKpiMetricValues", void 0);
 SvProjectDetailPage = __decorate([
     customElement('sv-project-detail')
 ], SvProjectDetailPage);