@dssp/dkpi 1.0.0 → 1.0.1

package/dist-client/pages/kpi-admin/dssp-kpi-overview.js

@@ -0,0 +1,393 @@
+import { __decorate } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import { KpiOverview } from '@things-factory/kpi/dist-client/pages/kpi/kpi-overview.js';
+import '../../components/kpi-lookup-chart';
+import '../../components/kpi-2d-lookup-chart';
+import '../../components/kpi-step-lookup-chart';
+const GET_KPI_OVERVIEW_EXT = gql `
+  query {
+    kpiCategories: kpisLevel1 {
+      id
+      name
+      description
+      formula
+      active
+      kpis: children {
+        id
+        name
+        description
+        formula
+        active
+        grades
+        scoreType
+        valueType
+      }
+    }
+  }
+`;
+/**
+ * KPI scoreType 정의 — value → score 변환 방식
+ *
+ * NONE       — 미설정 (부모 KPI 등)
+ * DIRECT     — value = score, 별도 변환 없음 (Y/Z: formula 결과가 곧 score)
+ * FORMULA    — scoreFormula로 value → score 변환
+ * LOOKUP     — grade table(1D)로 raw value → 0~1 score 변환 (연속값 KPI)
+ *              예: X11(연면적 대비 공사기간), X33(검측 불합격률), X34(SL-PA)
+ *              → 성과 분포 커브 차트로 표시
+ * CUSTOM     — 2D 룩업 등 특수 구조의 grade (다차원 입력 → 점수)
+ *              예: X13(일정 이탈 수준) = 공정률 × 편차율 → 1~5점
+ *              → 히트맵 차트로 표시
+ * ASSESSMENT — 감리자 직접 평가, value(1~5) = score (grade table 불필요)
+ *              예: X14(일정성과 정성 평가), X23(비용성과), X35(품질성과) 등
+ *              → 등급 기준 설명만 표시 (차트 없음)
+ *
+ * Note: DIRECT와 ASSESSMENT는 모두 value=score이지만,
+ * ASSESSMENT는 감리자가 1~5점을 직접 입력하는 정성 평가를 의미하고,
+ * DIRECT는 산식 등으로 자동 계산된 value가 변환 없이 score가 되는 것을 의미한다.
+ */
+/**
+ * KPI 개요 페이지 — 등급 구간을 성과 분포 차트로 표현
+ *
+ * - 0~1 스케일 KPI: 성과 분포 커브 (kpi-lookup-chart)
+ * - 1~5 평가형 KPI: 5단계 세그먼트 게이지 (kpi-lookup-chart 자동 감지)
+ * - X13 2D 룩업: 공정률×편차율 히트맵 (kpi-2d-lookup-chart)
+ */
+let DsspKpiOverview = class DsspKpiOverview extends KpiOverview {
+    async firstUpdated() {
+        try {
+            const { data } = await client.query({ query: GET_KPI_OVERVIEW_EXT });
+            this.kpiCategories = data.kpiCategories;
+            this.loading = false;
+        }
+        catch (e) {
+            this.error = e instanceof Error ? e : new Error(String(e));
+            this.loading = false;
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        if (this.error)
+            return html `<div>에러: ${(_a = this.error) === null || _a === void 0 ? void 0 : _a.message}</div>`;
+        if (!this.kpiCategories.length)
+            return html `<div>KPI 카테고리가 없습니다.</div>`;
+        const selctedY = ((_b = this.kpiCategories) === null || _b === void 0 ? void 0 : _b[this.selectedGroup]) || '';
+        const groupRaw = this.kpiCategories[this.selectedGroup];
+        // active가 false인 KPI 제외 (X31, X32 등 삭제된 지표)
+        const activeKpis = ((_c = groupRaw === null || groupRaw === void 0 ? void 0 : groupRaw.kpis) === null || _c === void 0 ? void 0 : _c.filter((k) => k.active !== false)) || [];
+        const group = Object.assign(Object.assign({}, groupRaw), { kpis: activeKpis });
+        const kpi = (_d = group === null || group === void 0 ? void 0 : group.kpis) === null || _d === void 0 ? void 0 : _d[this.selectedKpi];
+        return html `
+      <div class="overview-container">
+        <div class="overview-left">
+          <div class="overview-title">KPI개요</div>
+          <div class="overview-desc">
+            건설프로젝트 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요 지표를 통해
+            프로젝트 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+          </div>
+        </div>
+      </div>
+      <div class="group-tabs">
+        ${this.kpiCategories.map((g, i) => html `
+            <button
+              class="group-tab"
+              ?selected=${i === this.selectedGroup}
+              @click=${() => {
+            this.selectedGroup = i;
+            this.selectedKpi = 0;
+        }}
+            >
+              ${g.name}
+            </button>
+          `)}
+      </div>
+      <!-- Y 섹션: 좌=Y 설명+산식 | 우=X-KPI 목록 -->
+      <div class="main-content">
+        <div class="markdown">
+          <div class="kpi-title">${group.name}</div>
+          ${group.description ? html `<div style="line-height:1.7;margin-bottom:12px;">${group.description}</div>` : ''}
+          ${group.formula
+            ? html `
+                <div class="subtitle"><span class="subtitle-icon"></span> 산식</div>
+                <div class="kpi-formula">${group.formula}</div>
+              `
+            : ''}
+        </div>
+        <div class="toc">
+          <div class="submenu-header">
+            <span class="submenu-icon"></span>
+            <span class="toc-title">${selctedY.name} 지표</span>
+          </div>
+          <ul class="toc-list">
+            ${(_e = group === null || group === void 0 ? void 0 : group.kpis) === null || _e === void 0 ? void 0 : _e.map((k, i) => html `
+                <li>
+                  <button class="toc-btn" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>
+                    ${k.name}
+                  </button>
+                </li>
+              `)}
+          </ul>
+        </div>
+      </div>
+
+      <!-- X 섹션: 좌=X 설명+산식 | 우=성과분포/등급 -->
+      <div class="x-section">
+        <div class="x-detail">
+          <div class="kpi-title">${(kpi === null || kpi === void 0 ? void 0 : kpi.name) || ''}</div>
+          <div style="line-height:1.7;margin-bottom:12px;">${(kpi === null || kpi === void 0 ? void 0 : kpi.description) || ''}</div>
+          ${(kpi === null || kpi === void 0 ? void 0 : kpi.formula)
+            ? html `
+                <div class="subtitle"><span class="subtitle-icon"></span> 주요산식</div>
+                <div class="kpi-formula">${kpi === null || kpi === void 0 ? void 0 : kpi.formula}</div>
+              `
+            : ''}
+          ${this._renderTypeInfo(kpi)}
+        </div>
+        <div class="x-chart">${this._renderGradesContent(kpi)}</div>
+      </div>
+    `;
+    }
+    /**
+     * 성과분포/등급 콘텐츠 렌더링 — scoreType + valueType 기반 분기
+     *
+     * valueType=ASSESSED → 등급 기준 설명만 (감리자 직접 평가, 차트 없음)
+     * scoreType=CUSTOM   → 2D 히트맵 (공정률×편차율)
+     * scoreType=LOOKUP   → 성과 분포 커브 (value→score 매핑)
+     * scoreType=DIRECT   → 등급 데이터 없음 (Y/Z 등)
+     */
+    _renderGradesContent(kpi) {
+        if (!(kpi === null || kpi === void 0 ? void 0 : kpi.grades))
+            return html `<div style="color:#999;padding:20px;">등급 데이터 없음</div>`;
+        const scoreType = kpi.scoreType;
+        const valueType = kpi.valueType;
+        const is2D = scoreType === 'CUSTOM' ||
+            (kpi.grades &&
+                typeof kpi.grades === 'object' &&
+                !Array.isArray(kpi.grades) &&
+                kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
+        const isArray = Array.isArray(kpi.grades) && kpi.grades.length > 0;
+        const isAssessment = valueType === 'ASSESSED' ||
+            (!scoreType &&
+                !valueType &&
+                isArray &&
+                kpi.grades.length <= 5 &&
+                kpi.grades.every((g) => g.score >= 1 && g.score <= 5 && g.score === Math.floor(g.score) && g.minValue === g.score));
+        // SL-PA 결과(X34 품질, X43 안전)만 계단형 등급 분포 차트 (overview 에서는 측정값 없이 구간 구조만)
+        const isSlpa = typeof (kpi === null || kpi === void 0 ? void 0 : kpi.name) === 'string' && (kpi.name.includes('X34') || kpi.name.includes('X43'));
+        if (isArray && isSlpa) {
+            return html `
+        <div class="grades-title">성과 분포</div>
+        <div class="grades-chart">
+          <kpi-step-lookup-chart .grades=${kpi.grades}></kpi-step-lookup-chart>
+        </div>
+      `;
+        }
+        if (isAssessment) {
+            return html `
+        <div class="grades-title">등급 기준</div>
+        ${isArray ? this._renderAssessmentDescriptions(kpi.grades) : nothing}
+      `;
+        }
+        if (is2D) {
+            return html `
+        <div class="grades-title">성과 분포</div>
+        <div class="grades-chart">
+          <kpi-2d-lookup-chart .grades=${kpi.grades} .progressRate=${50}></kpi-2d-lookup-chart>
+        </div>
+      `;
+        }
+        if (isArray) {
+            return html `
+        <div class="grades-title">성과 분포</div>
+        <div class="grades-chart">
+          <kpi-lookup-chart .grades=${kpi.grades} .showDots=${true} .scoreType=${kpi.scoreType || ''}></kpi-lookup-chart>
+        </div>
+      `;
+        }
+        return html `<div style="color:#999;padding:20px;">등급 데이터 없음</div>`;
+    }
+    _renderTypeInfo(kpi) {
+        const valueLabels = {
+            MEASURED: '외부 시스템 수집',
+            ASSESSED: '감리자 직접 평가 (1~5)',
+            CALCULATED: '산식 자동 계산',
+            COMPOSITE: '다차원 복합 입력'
+        };
+        const scoreLabels = {
+            DIRECT: 'value = score (변환 없음)',
+            FORMULA: 'scoreFormula 수식 변환',
+            LOOKUP: 'Grade Table 룩업',
+            CUSTOM: '2D 룩업 (특수 변환)'
+        };
+        const vLabel = (kpi === null || kpi === void 0 ? void 0 : kpi.valueType) ? valueLabels[kpi.valueType] || kpi.valueType : null;
+        const sLabel = (kpi === null || kpi === void 0 ? void 0 : kpi.scoreType) ? scoreLabels[kpi.scoreType] || kpi.scoreType : null;
+        if (!vLabel && !sLabel)
+            return nothing;
+        return html `
+      <div class="type-info">
+        ${vLabel
+            ? html `<span class="type-badge"><span class="label">Value 산정</span><span class="value">${vLabel}</span></span>`
+            : ''}
+        ${sLabel
+            ? html `<span class="type-badge"><span class="label">Score 산정</span><span class="value">${sLabel}</span></span>`
+            : ''}
+      </div>
+    `;
+    }
+    _renderAssessmentDescriptions(grades) {
+        const colors = ['#e53935', '#ff9800', '#ffca28', '#66bb6a', '#2e7d32'];
+        const sorted = [...grades].sort((a, b) => a.score - b.score);
+        return html `
+      <div class="grade-descriptions">
+        ${sorted.map((g) => html `
+            <div class="grade-chip">
+              <span class="dot" style="background: ${colors[(g.score || 1) - 1]}"></span>
+              <span class="score">${g.score}점</span>
+              <span class="desc">${g.description || g.name || ''}</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+DsspKpiOverview.styles = [
+    KpiOverview.styles,
+    css `
+      :host {
+        overflow-y: auto;
+      }
+      .grades-section {
+        margin-top: 16px;
+        background: #fff;
+        border-radius: 8px;
+        padding: 20px;
+        border: 2px solid #0c4da2;
+      }
+      .grades-title {
+        font-size: 1rem;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 12px;
+      }
+      .grades-chart {
+        width: 100%;
+        height: 320px;
+      }
+      .grade-descriptions {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        margin-top: 12px;
+      }
+      .grade-chip {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        border-radius: 20px;
+        font-size: 0.8rem;
+        font-weight: 500;
+        background: #f5f5f5;
+        border: 1px solid #e0e0e0;
+      }
+      .grade-chip .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .grade-chip .score {
+        font-weight: 700;
+        min-width: 24px;
+      }
+      .grade-chip .desc {
+        color: #555;
+      }
+      .type-info {
+        margin-top: 16px;
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+      .type-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 5px 10px;
+        border-radius: 6px;
+        font-size: 0.75rem;
+        border: 1px solid #e0e0e0;
+        background: #fafafa;
+      }
+      .type-badge .label {
+        color: #888;
+        font-weight: 400;
+      }
+      .type-badge .value {
+        font-weight: 600;
+        color: #333;
+      }
+      .x-section {
+        display: flex;
+        gap: 0;
+        margin-top: 12px;
+        background: #fff;
+        border: 2px solid #0c4da2;
+        border-top: none;
+        overflow: hidden;
+      }
+      .x-detail {
+        flex: 0 0 320px;
+        padding: 20px 25px;
+        border-right: 1px solid rgba(46, 164, 223, 0.1);
+        font-size: 0.875rem;
+        color: #212529;
+      }
+      .x-chart {
+        flex: 1;
+        padding: 16px;
+        min-height: 280px;
+      }
+      .y-info {
+        background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
+        border-radius: 8px;
+        padding: 16px 20px;
+        margin-bottom: 16px;
+        border-left: 4px solid #0c4da2;
+      }
+      .y-name {
+        font-size: 1rem;
+        font-weight: 700;
+        color: #0c4da2;
+        margin-bottom: 6px;
+      }
+      .y-desc {
+        font-size: 0.875rem;
+        color: #444;
+        line-height: 1.6;
+        margin-bottom: 8px;
+      }
+      .y-formula {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #333;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-family: monospace;
+      }
+      .y-formula-label {
+        font-size: 0.75rem;
+        color: #888;
+        margin-bottom: 4px;
+      }
+    `
+];
+DsspKpiOverview = __decorate([
+    customElement('dssp-kpi-overview')
+    // @ts-ignore styles type override
+], DsspKpiOverview);
+export { DsspKpiOverview };
+//# sourceMappingURL=dssp-kpi-overview.js.map

package/dist-client/pages/kpi-admin/dssp-kpi-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dssp-kpi-overview.js","sourceRoot":"","sources":["../../../client/pages/kpi-admin/dssp-kpi-overview.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing, CSSResultGroup } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { KpiOverview } from '@things-factory/kpi/dist-client/pages/kpi/kpi-overview.js'\n\nimport '../../components/kpi-lookup-chart'\nimport '../../components/kpi-2d-lookup-chart'\nimport '../../components/kpi-step-lookup-chart'\n\nconst GET_KPI_OVERVIEW_EXT = gql`\n  query {\n    kpiCategories: kpisLevel1 {\n      id\n      name\n      description\n      formula\n      active\n      kpis: children {\n        id\n        name\n        description\n        formula\n        active\n        grades\n        scoreType\n        valueType\n      }\n    }\n  }\n`\n\n/**\n * KPI scoreType 정의 — value → score 변환 방식\n *\n * NONE       — 미설정 (부모 KPI 등)\n * DIRECT     — value = score, 별도 변환 없음 (Y/Z: formula 결과가 곧 score)\n * FORMULA    — scoreFormula로 value → score 변환\n * LOOKUP     — grade table(1D)로 raw value → 0~1 score 변환 (연속값 KPI)\n *              예: X11(연면적 대비 공사기간), X33(검측 불합격률), X34(SL-PA)\n *              → 성과 분포 커브 차트로 표시\n * CUSTOM     — 2D 룩업 등 특수 구조의 grade (다차원 입력 → 점수)\n *              예: X13(일정 이탈 수준) = 공정률 × 편차율 → 1~5점\n *              → 히트맵 차트로 표시\n * ASSESSMENT — 감리자 직접 평가, value(1~5) = score (grade table 불필요)\n *              예: X14(일정성과 정성 평가), X23(비용성과), X35(품질성과) 등\n *              → 등급 기준 설명만 표시 (차트 없음)\n *\n * Note: DIRECT와 ASSESSMENT는 모두 value=score이지만,\n * ASSESSMENT는 감리자가 1~5점을 직접 입력하는 정성 평가를 의미하고,\n * DIRECT는 산식 등으로 자동 계산된 value가 변환 없이 score가 되는 것을 의미한다.\n */\n\n/**\n * KPI 개요 페이지 — 등급 구간을 성과 분포 차트로 표현\n *\n * - 0~1 스케일 KPI: 성과 분포 커브 (kpi-lookup-chart)\n * - 1~5 평가형 KPI: 5단계 세그먼트 게이지 (kpi-lookup-chart 자동 감지)\n * - X13 2D 룩업: 공정률×편차율 히트맵 (kpi-2d-lookup-chart)\n */\n@customElement('dssp-kpi-overview')\n// @ts-ignore styles type override\nexport class DsspKpiOverview extends KpiOverview {\n  static styles = [\n    KpiOverview.styles,\n    css`\n      :host {\n        overflow-y: auto;\n      }\n      .grades-section {\n        margin-top: 16px;\n        background: #fff;\n        border-radius: 8px;\n        padding: 20px;\n        border: 2px solid #0c4da2;\n      }\n      .grades-title {\n        font-size: 1rem;\n        font-weight: 700;\n        color: #333;\n        margin-bottom: 12px;\n      }\n      .grades-chart {\n        width: 100%;\n        height: 320px;\n      }\n      .grade-descriptions {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        margin-top: 12px;\n      }\n      .grade-chip {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 6px 12px;\n        border-radius: 20px;\n        font-size: 0.8rem;\n        font-weight: 500;\n        background: #f5f5f5;\n        border: 1px solid #e0e0e0;\n      }\n      .grade-chip .dot {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        flex-shrink: 0;\n      }\n      .grade-chip .score {\n        font-weight: 700;\n        min-width: 24px;\n      }\n      .grade-chip .desc {\n        color: #555;\n      }\n      .type-info {\n        margin-top: 16px;\n        display: flex;\n        gap: 8px;\n        flex-wrap: wrap;\n      }\n      .type-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 5px 10px;\n        border-radius: 6px;\n        font-size: 0.75rem;\n        border: 1px solid #e0e0e0;\n        background: #fafafa;\n      }\n      .type-badge .label {\n        color: #888;\n        font-weight: 400;\n      }\n      .type-badge .value {\n        font-weight: 600;\n        color: #333;\n      }\n      .x-section {\n        display: flex;\n        gap: 0;\n        margin-top: 12px;\n        background: #fff;\n        border: 2px solid #0c4da2;\n        border-top: none;\n        overflow: hidden;\n      }\n      .x-detail {\n        flex: 0 0 320px;\n        padding: 20px 25px;\n        border-right: 1px solid rgba(46, 164, 223, 0.1);\n        font-size: 0.875rem;\n        color: #212529;\n      }\n      .x-chart {\n        flex: 1;\n        padding: 16px;\n        min-height: 280px;\n      }\n      .y-info {\n        background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);\n        border-radius: 8px;\n        padding: 16px 20px;\n        margin-bottom: 16px;\n        border-left: 4px solid #0c4da2;\n      }\n      .y-name {\n        font-size: 1rem;\n        font-weight: 700;\n        color: #0c4da2;\n        margin-bottom: 6px;\n      }\n      .y-desc {\n        font-size: 0.875rem;\n        color: #444;\n        line-height: 1.6;\n        margin-bottom: 8px;\n      }\n      .y-formula {\n        font-size: 0.85rem;\n        font-weight: 600;\n        color: #333;\n        background: rgba(255, 255, 255, 0.7);\n        padding: 8px 12px;\n        border-radius: 4px;\n        font-family: monospace;\n      }\n      .y-formula-label {\n        font-size: 0.75rem;\n        color: #888;\n        margin-bottom: 4px;\n      }\n    `\n  ]\n\n  override async firstUpdated() {\n    try {\n      const { data } = await client.query({ query: GET_KPI_OVERVIEW_EXT })\n      this.kpiCategories = data.kpiCategories\n      this.loading = false\n    } catch (e) {\n      this.error = e instanceof Error ? e : new Error(String(e))\n      this.loading = false\n    }\n  }\n\n  override render() {\n    if (this.error) return html`<div>에러: ${this.error?.message}</div>`\n    if (!this.kpiCategories.length) return html`<div>KPI 카테고리가 없습니다.</div>`\n\n    const selctedY = this.kpiCategories?.[this.selectedGroup] || ''\n    const groupRaw = this.kpiCategories[this.selectedGroup] as any\n    // active가 false인 KPI 제외 (X31, X32 등 삭제된 지표)\n    const activeKpis = groupRaw?.kpis?.filter((k: any) => k.active !== false) || []\n    const group = { ...groupRaw, kpis: activeKpis }\n    const kpi = group?.kpis?.[this.selectedKpi] as any\n\n    return html`\n      <div class=\"overview-container\">\n        <div class=\"overview-left\">\n          <div class=\"overview-title\">KPI개요</div>\n          <div class=\"overview-desc\">\n            건설프로젝트 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요 지표를 통해\n            프로젝트 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.\n          </div>\n        </div>\n      </div>\n      <div class=\"group-tabs\">\n        ${this.kpiCategories.map(\n          (g: any, i: number) => html`\n            <button\n              class=\"group-tab\"\n              ?selected=${i === this.selectedGroup}\n              @click=${() => {\n                this.selectedGroup = i\n                this.selectedKpi = 0\n              }}\n            >\n              ${g.name}\n            </button>\n          `\n        )}\n      </div>\n      <!-- Y 섹션: 좌=Y 설명+산식 | 우=X-KPI 목록 -->\n      <div class=\"main-content\">\n        <div class=\"markdown\">\n          <div class=\"kpi-title\">${group.name}</div>\n          ${group.description ? html`<div style=\"line-height:1.7;margin-bottom:12px;\">${group.description}</div>` : ''}\n          ${group.formula\n            ? html`\n                <div class=\"subtitle\"><span class=\"subtitle-icon\"></span> 산식</div>\n                <div class=\"kpi-formula\">${group.formula}</div>\n              `\n            : ''}\n        </div>\n        <div class=\"toc\">\n          <div class=\"submenu-header\">\n            <span class=\"submenu-icon\"></span>\n            <span class=\"toc-title\">${selctedY.name} 지표</span>\n          </div>\n          <ul class=\"toc-list\">\n            ${group?.kpis?.map(\n              (k: any, i: number) => html`\n                <li>\n                  <button class=\"toc-btn\" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>\n                    ${k.name}\n                  </button>\n                </li>\n              `\n            )}\n          </ul>\n        </div>\n      </div>\n\n      <!-- X 섹션: 좌=X 설명+산식 | 우=성과분포/등급 -->\n      <div class=\"x-section\">\n        <div class=\"x-detail\">\n          <div class=\"kpi-title\">${kpi?.name || ''}</div>\n          <div style=\"line-height:1.7;margin-bottom:12px;\">${kpi?.description || ''}</div>\n          ${kpi?.formula\n            ? html`\n                <div class=\"subtitle\"><span class=\"subtitle-icon\"></span> 주요산식</div>\n                <div class=\"kpi-formula\">${kpi?.formula}</div>\n              `\n            : ''}\n          ${this._renderTypeInfo(kpi)}\n        </div>\n        <div class=\"x-chart\">${this._renderGradesContent(kpi)}</div>\n      </div>\n    `\n  }\n\n  /**\n   * 성과분포/등급 콘텐츠 렌더링 — scoreType + valueType 기반 분기\n   *\n   * valueType=ASSESSED → 등급 기준 설명만 (감리자 직접 평가, 차트 없음)\n   * scoreType=CUSTOM   → 2D 히트맵 (공정률×편차율)\n   * scoreType=LOOKUP   → 성과 분포 커브 (value→score 매핑)\n   * scoreType=DIRECT   → 등급 데이터 없음 (Y/Z 등)\n   */\n  private _renderGradesContent(kpi: any) {\n    if (!kpi?.grades) return html`<div style=\"color:#999;padding:20px;\">등급 데이터 없음</div>`\n\n    const scoreType = kpi.scoreType\n    const valueType = kpi.valueType\n    const is2D =\n      scoreType === 'CUSTOM' ||\n      (kpi.grades &&\n        typeof kpi.grades === 'object' &&\n        !Array.isArray(kpi.grades) &&\n        kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP')\n    const isArray = Array.isArray(kpi.grades) && kpi.grades.length > 0\n    const isAssessment =\n      valueType === 'ASSESSED' ||\n      (!scoreType &&\n        !valueType &&\n        isArray &&\n        kpi.grades.length <= 5 &&\n        kpi.grades.every((g: any) => g.score >= 1 && g.score <= 5 && g.score === Math.floor(g.score) && g.minValue === g.score))\n\n    // SL-PA 결과(X34 품질, X43 안전)만 계단형 등급 분포 차트 (overview 에서는 측정값 없이 구간 구조만)\n    const isSlpa = typeof kpi?.name === 'string' && (kpi.name.includes('X34') || kpi.name.includes('X43'))\n    if (isArray && isSlpa) {\n      return html`\n        <div class=\"grades-title\">성과 분포</div>\n        <div class=\"grades-chart\">\n          <kpi-step-lookup-chart .grades=${kpi.grades}></kpi-step-lookup-chart>\n        </div>\n      `\n    }\n\n    if (isAssessment) {\n      return html`\n        <div class=\"grades-title\">등급 기준</div>\n        ${isArray ? this._renderAssessmentDescriptions(kpi.grades) : nothing}\n      `\n    }\n\n    if (is2D) {\n      return html`\n        <div class=\"grades-title\">성과 분포</div>\n        <div class=\"grades-chart\">\n          <kpi-2d-lookup-chart .grades=${kpi.grades} .progressRate=${50}></kpi-2d-lookup-chart>\n        </div>\n      `\n    }\n\n    if (isArray) {\n      return html`\n        <div class=\"grades-title\">성과 분포</div>\n        <div class=\"grades-chart\">\n          <kpi-lookup-chart .grades=${kpi.grades} .showDots=${true} .scoreType=${kpi.scoreType || ''}></kpi-lookup-chart>\n        </div>\n      `\n    }\n\n    return html`<div style=\"color:#999;padding:20px;\">등급 데이터 없음</div>`\n  }\n\n  private _renderTypeInfo(kpi: any) {\n    const valueLabels: Record<string, string> = {\n      MEASURED: '외부 시스템 수집',\n      ASSESSED: '감리자 직접 평가 (1~5)',\n      CALCULATED: '산식 자동 계산',\n      COMPOSITE: '다차원 복합 입력'\n    }\n    const scoreLabels: Record<string, string> = {\n      DIRECT: 'value = score (변환 없음)',\n      FORMULA: 'scoreFormula 수식 변환',\n      LOOKUP: 'Grade Table 룩업',\n      CUSTOM: '2D 룩업 (특수 변환)'\n    }\n\n    const vLabel = kpi?.valueType ? valueLabels[kpi.valueType] || kpi.valueType : null\n    const sLabel = kpi?.scoreType ? scoreLabels[kpi.scoreType] || kpi.scoreType : null\n\n    if (!vLabel && !sLabel) return nothing\n\n    return html`\n      <div class=\"type-info\">\n        ${vLabel\n          ? html`<span class=\"type-badge\"><span class=\"label\">Value 산정</span><span class=\"value\">${vLabel}</span></span>`\n          : ''}\n        ${sLabel\n          ? html`<span class=\"type-badge\"><span class=\"label\">Score 산정</span><span class=\"value\">${sLabel}</span></span>`\n          : ''}\n      </div>\n    `\n  }\n\n  private _renderAssessmentDescriptions(grades: any[]) {\n    const colors = ['#e53935', '#ff9800', '#ffca28', '#66bb6a', '#2e7d32']\n    const sorted = [...grades].sort((a, b) => a.score - b.score)\n\n    return html`\n      <div class=\"grade-descriptions\">\n        ${sorted.map(\n          (g: any) => html`\n            <div class=\"grade-chip\">\n              <span class=\"dot\" style=\"background: ${colors[(g.score || 1) - 1]}\"></span>\n              <span class=\"score\">${g.score}점</span>\n              <span class=\"desc\">${g.description || g.name || ''}</span>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/kpi-grade-2d-editor.d.ts

@@ -0,0 +1,20 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import { LitElement } from 'lit';
+export declare class KpiGrade2dEditor extends LitElement {
+    static styles: import("lit").CSSResult[];
+    kpi: any;
+    private rows;
+    private gristConfig;
+    private grist;
+    private svgEl;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _fetchHandler;
+    private _onGristChange;
+    private _getCurrentRows;
+    private _drawChart;
+    private _validate;
+    private _save;
+}