@dssp/dkpi 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-client/pages/component/project-update-header.js

@@ -0,0 +1,127 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+let DkpiProjectUpdateHeader = class DkpiProjectUpdateHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+        this.title = '';
+    }
+    render() {
+        const path = window.location.pathname;
+        const isCompleted = this.projectState === '20';
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.title}
+        </h2>
+
+        <div button-container>
+          ${isCompleted
+            ? html `
+                <md-elevated-button warn @click=${this._onUnfinalize} ?disabled=${!this.projectId}>
+                  <md-icon slot="icon">undo</md-icon>완료 상태 해제
+                </md-elevated-button>
+              `
+            : ''}
+          <md-elevated-button green @click=${this._dispatchEvent} ?disabled=${!this.projectId}>
+            <md-icon slot="icon">save</md-icon>정보 저장
+          </md-elevated-button>
+        </div>
+      </div>
+    `;
+    }
+    _dispatchEvent() {
+        this.dispatchEvent(new CustomEvent('custom-click'));
+    }
+    _onUnfinalize() {
+        this.dispatchEvent(new CustomEvent('unfinalize'));
+    }
+};
+DkpiProjectUpdateHeader.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      div[header] {
+        display: flex;
+        margin: 0px var(--spacing-large, 12px);
+
+        h2 {
+          display: flex;
+          gap: 7px;
+          flex: 1;
+          margin-bottom: var(--spacing-medium, 8px);
+          color: #3f71a0;
+          font-size: 18px;
+
+          md-icon[back] {
+            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
+            color: white;
+            padding: 8px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);
+            width: 14px;
+            height: 14px;
+            --md-icon-size: 20px;
+          }
+
+          md-icon[back]:hover {
+            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);
+            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);
+          }
+        }
+      }
+
+      div[button-container] {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        flex: 1;
+        padding-top: var(--spacing-medium, 8px);
+
+        md-elevated-button {
+          margin: 0 var(--spacing-small, 4px);
+
+          --md-elevated-button-container-height: 32px;
+          --md-elevated-button-label-text-size: 16px;
+          --md-elevated-button-container-color: #0595e5;
+
+          --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+          --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+
+          &[green] {
+            --md-elevated-button-container-color: #42b382;
+          }
+          &[warn] {
+            --md-elevated-button-container-color: #e67e22;
+          }
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "projectId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "title", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DkpiProjectUpdateHeader.prototype, "projectState", void 0);
+DkpiProjectUpdateHeader = __decorate([
+    customElement('dkpi-project-update-header')
+], DkpiProjectUpdateHeader);
+//# sourceMappingURL=project-update-header.js.map

package/dist-client/pages/component/project-update-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-update-header.js","sourceRoot":"","sources":["../../../client/pages/component/project-update-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGxE,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAsE8B,cAAS,GAAW,EAAE,CAAA;QACtB,UAAK,GAAW,EAAE,CAAA;IAsChD,CAAC;IAlCC,MAAM;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAA;QAE9C,OAAO,IAAI,CAAA;;;6CAG8B,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YACrD,IAAI,CAAC,KAAK;;;;YAIV,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;kDACgC,IAAI,CAAC,aAAa,cAAc,CAAC,IAAI,CAAC,SAAS;;;eAGlF;YACH,CAAC,CAAC,EAAE;6CAC6B,IAAI,CAAC,cAAc,cAAc,CAAC,IAAI,CAAC,SAAS;;;;;KAKxF,CAAA;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAA;IACrD,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;IACnD,CAAC;;AA3GM,8BAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,AAnEY,CAmEZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAsB;AAzE7C,uBAAuB;IAD5B,aAAa,CAAC,4BAA4B,CAAC;GACtC,uBAAuB,CA6G5B","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('dkpi-project-update-header')\nclass DkpiProjectUpdateHeader extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      div[header] {\n        display: flex;\n        margin: 0px var(--spacing-large, 12px);\n\n        h2 {\n          display: flex;\n          gap: 7px;\n          flex: 1;\n          margin-bottom: var(--spacing-medium, 8px);\n          color: #3f71a0;\n          font-size: 18px;\n\n          md-icon[back] {\n            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);\n            color: white;\n            padding: 8px;\n            border-radius: 50%;\n            cursor: pointer;\n            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);\n            width: 14px;\n            height: 14px;\n            --md-icon-size: 20px;\n          }\n\n          md-icon[back]:hover {\n            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);\n            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);\n          }\n        }\n      }\n\n      div[button-container] {\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        flex: 1;\n        padding-top: var(--spacing-medium, 8px);\n\n        md-elevated-button {\n          margin: 0 var(--spacing-small, 4px);\n\n          --md-elevated-button-container-height: 32px;\n          --md-elevated-button-label-text-size: 16px;\n          --md-elevated-button-container-color: #0595e5;\n\n          --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n          --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n          &[green] {\n            --md-elevated-button-container-color: #42b382;\n          }\n          &[warn] {\n            --md-elevated-button-container-color: #e67e22;\n          }\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) projectId: string = ''\n  @property({ type: String }) title: string = ''\n  /** ProjectState. '20' (COMPLETED) 면 \"완료 상태 해제\" 버튼 노출. */\n  @property({ type: String }) projectState?: string\n\n  render() {\n    const path = window.location.pathname\n    const isCompleted = this.projectState === '20'\n\n    return html`\n      <div header>\n        <h2>\n          <md-icon slot=\"icon\" back @click=${() => history.back()}>arrow_back</md-icon>\n          ${this.title}\n        </h2>\n\n        <div button-container>\n          ${isCompleted\n            ? html`\n                <md-elevated-button warn @click=${this._onUnfinalize} ?disabled=${!this.projectId}>\n                  <md-icon slot=\"icon\">undo</md-icon>완료 상태 해제\n                </md-elevated-button>\n              `\n            : ''}\n          <md-elevated-button green @click=${this._dispatchEvent} ?disabled=${!this.projectId}>\n            <md-icon slot=\"icon\">save</md-icon>정보 저장\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  private _dispatchEvent() {\n    this.dispatchEvent(new CustomEvent('custom-click'))\n  }\n\n  private _onUnfinalize() {\n    this.dispatchEvent(new CustomEvent('unfinalize'))\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/dssp-kpi-list-page.d.ts

@@ -0,0 +1,22 @@
+import './kpi-grade-2d-editor.js';
+import { TemplateResult } from 'lit';
+import { KpiListPage } from '@things-factory/kpi/dist-client/pages/kpi/kpi-list-page.js';
+import { KpiGrade2dEditor } from './kpi-grade-2d-editor.js';
+export declare class DsspKpiListPage extends KpiListPage {
+    static get scopedElements(): {
+        'kpi-grade-2d-editor': typeof KpiGrade2dEditor;
+        'kpi-importer': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-importer.js").KpiImporter;
+        'kpi-grade-editor': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-grade-editor.js").KpiGradeEditor;
+        'kpi-viz-editor': typeof import("@things-factory/kpi/dist-client/pages/kpi/kpi-viz-editor.js").KpiVizEditor;
+    };
+    /**
+     * CUSTOM scoreType 셀 렌더러.
+     * 2D 룩업 구조인 경우 행 수와 함께 표시.
+     */
+    protected renderCustomGradesCell(kpi: any): TemplateResult;
+    /**
+     * CUSTOM scoreType 편집.
+     * 2D 룩업이면 kpi-grade-2d-editor 팝업을 연다.
+     */
+    protected _editCustomGrades(kpi: any): Promise<void>;
+}

package/dist-client/pages/kpi-admin/dssp-kpi-list-page.js

@@ -0,0 +1,57 @@
+import { __decorate } from "tslib";
+import './kpi-grade-2d-editor.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { openPopup } from '@operato/layout';
+import { KpiListPage } from '@things-factory/kpi/dist-client/pages/kpi/kpi-list-page.js';
+import { KpiGrade2dEditor } from './kpi-grade-2d-editor.js';
+let DsspKpiListPage = class DsspKpiListPage extends KpiListPage {
+    static get scopedElements() {
+        return Object.assign(Object.assign({}, super.scopedElements), { 'kpi-grade-2d-editor': KpiGrade2dEditor });
+    }
+    /**
+     * CUSTOM scoreType 셀 렌더러.
+     * 2D 룩업 구조인 경우 행 수와 함께 표시.
+     */
+    renderCustomGradesCell(kpi) {
+        var _a, _b;
+        const grades = kpi.grades;
+        const sub = grades === null || grades === void 0 ? void 0 : grades.type;
+        let label;
+        if (sub === 'PROGRESS_DEVIATION_LOOKUP' || sub === '2d-lookup') {
+            const rowCount = (_b = (_a = grades === null || grades === void 0 ? void 0 : grades.rows) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+            label = `2D 룩업 (${rowCount}행)`;
+        }
+        else {
+            label = `커스텀 (${sub !== null && sub !== void 0 ? sub : '?'})`;
+        }
+        return html `<span
+      style="color:#4caf50;cursor:pointer;"
+      @click=${() => this._editGrades(kpi)}
+      >${label}</span
+    >`;
+    }
+    /**
+     * CUSTOM scoreType 편집.
+     * 2D 룩업이면 kpi-grade-2d-editor 팝업을 연다.
+     */
+    async _editCustomGrades(kpi) {
+        var _a;
+        const gradeType = (_a = kpi.grades) === null || _a === void 0 ? void 0 : _a.type;
+        if (gradeType !== 'PROGRESS_DEVIATION_LOOKUP' && gradeType !== '2d-lookup') {
+            return super._editCustomGrades(kpi);
+        }
+        const popup = await openPopup(html `<kpi-grade-2d-editor .kpi=${kpi}></kpi-grade-2d-editor>`, {
+            title: `${kpi.name} — 2D 룩업 편집`,
+            size: 'large'
+        });
+        popup.onclosed = () => {
+            this.grist.fetch();
+        };
+    }
+};
+DsspKpiListPage = __decorate([
+    customElement('dssp-kpi-list-page')
+], DsspKpiListPage);
+export { DsspKpiListPage };
+//# sourceMappingURL=dssp-kpi-list-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dssp-kpi-list-page.js","sourceRoot":"","sources":["../../../client/pages/kpi-admin/dssp-kpi-list-page.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,4DAA4D,CAAA;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAGpD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAC9C,MAAM,KAAc,cAAc;QAChC,uCACK,KAAK,CAAC,cAAc,KACvB,qBAAqB,EAAE,gBAAgB,IACxC;IACH,CAAC;IAED;;;OAGG;IACgB,sBAAsB,CAAC,GAAQ;;QAChD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAA;QACzB,MAAM,GAAG,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA;QACxB,IAAI,KAAa,CAAA;QAEjB,IAAI,GAAG,KAAK,2BAA2B,IAAI,GAAG,KAAK,WAAW,EAAE,CAAC;YAC/D,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,MAAM,mCAAI,CAAC,CAAA;YAC1C,KAAK,GAAG,UAAU,QAAQ,IAAI,CAAA;QAChC,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,QAAQ,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,GAAG,GAAG,CAAA;QAC/B,CAAC;QAED,OAAO,IAAI,CAAA;;eAEA,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;SACjC,KAAK;MACR,CAAA;IACJ,CAAC;IAED;;;OAGG;IACgB,KAAK,CAAC,iBAAiB,CAAC,GAAQ;;QACjD,MAAM,SAAS,GAAG,MAAA,GAAG,CAAC,MAAM,0CAAE,IAAI,CAAA;QAClC,IAAI,SAAS,KAAK,2BAA2B,IAAI,SAAS,KAAK,WAAW,EAAE,CAAC;YAC3E,OAAO,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAA;QACrC,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,SAAS,CAAC,IAAI,CAAA,6BAA6B,GAAG,yBAAyB,EAAE;YAC3F,KAAK,EAAE,GAAG,GAAG,CAAC,IAAI,aAAa;YAC/B,IAAI,EAAE,OAAO;SACd,CAAC,CAAA;QACF,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC,CAAA;IACH,CAAC;CACF,CAAA;AAjDY,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAiD3B","sourcesContent":["import './kpi-grade-2d-editor.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { openPopup } from '@operato/layout'\nimport { KpiListPage } from '@things-factory/kpi/dist-client/pages/kpi/kpi-list-page.js'\nimport { KpiGrade2dEditor } from './kpi-grade-2d-editor.js'\n\n@customElement('dssp-kpi-list-page')\nexport class DsspKpiListPage extends KpiListPage {\n  static override get scopedElements() {\n    return {\n      ...super.scopedElements,\n      'kpi-grade-2d-editor': KpiGrade2dEditor\n    }\n  }\n\n  /**\n   * CUSTOM scoreType 셀 렌더러.\n   * 2D 룩업 구조인 경우 행 수와 함께 표시.\n   */\n  protected override renderCustomGradesCell(kpi: any): TemplateResult {\n    const grades = kpi.grades\n    const sub = grades?.type\n    let label: string\n\n    if (sub === 'PROGRESS_DEVIATION_LOOKUP' || sub === '2d-lookup') {\n      const rowCount = grades?.rows?.length ?? 0\n      label = `2D 룩업 (${rowCount}행)`\n    } else {\n      label = `커스텀 (${sub ?? '?'})`\n    }\n\n    return html`<span\n      style=\"color:#4caf50;cursor:pointer;\"\n      @click=${() => this._editGrades(kpi)}\n      >${label}</span\n    >`\n  }\n\n  /**\n   * CUSTOM scoreType 편집.\n   * 2D 룩업이면 kpi-grade-2d-editor 팝업을 연다.\n   */\n  protected override async _editCustomGrades(kpi: any) {\n    const gradeType = kpi.grades?.type\n    if (gradeType !== 'PROGRESS_DEVIATION_LOOKUP' && gradeType !== '2d-lookup') {\n      return super._editCustomGrades(kpi)\n    }\n\n    const popup = await openPopup(html`<kpi-grade-2d-editor .kpi=${kpi}></kpi-grade-2d-editor>`, {\n      title: `${kpi.name} — 2D 룩업 편집`,\n      size: 'large'\n    })\n    popup.onclosed = () => {\n      this.grist.fetch()\n    }\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/dssp-kpi-overview.d.ts

@@ -0,0 +1,46 @@
+import { KpiOverview } from '@things-factory/kpi/dist-client/pages/kpi/kpi-overview.js';
+import '../../components/kpi-lookup-chart';
+import '../../components/kpi-2d-lookup-chart';
+/**
+ * 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)
+ */
+export declare class DsspKpiOverview extends KpiOverview {
+    static styles: import("lit").CSSResult[];
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 성과분포/등급 콘텐츠 렌더링 — scoreType + valueType 기반 분기
+     *
+     * valueType=ASSESSED → 등급 기준 설명만 (감리자 직접 평가, 차트 없음)
+     * scoreType=CUSTOM   → 2D 히트맵 (공정률×편차율)
+     * scoreType=LOOKUP   → 성과 분포 커브 (value→score 매핑)
+     * scoreType=DIRECT   → 등급 데이터 없음 (Y/Z 등)
+     */
+    private _renderGradesContent;
+    private _renderTypeInfo;
+    private _renderAssessmentDescriptions;
+}

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

@@ -0,0 +1,378 @@
+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';
+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));
+        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