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

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'\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\">\n          ${this._renderGradesContent(kpi)}\n        </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 = scoreType === 'CUSTOM' ||\n      (kpi.grades && typeof kpi.grades === 'object' && !Array.isArray(kpi.grades) && kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP')\n    const isArray = Array.isArray(kpi.grades) && kpi.grades.length > 0\n    const isAssessment = valueType === 'ASSESSED' ||\n      (!scoreType && !valueType && isArray && 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    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;
+}

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

@@ -0,0 +1,445 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import gql from 'graphql-tag';
+import * as d3 from 'd3';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import { CommonHeaderStyles } from '@operato/styles';
+import { DataGrist } from '@operato/data-grist';
+// 점수 구간 정의 (높은 점수 = 좋음 = 낮은 공기편차)
+const SCORE_ZONES = [
+    { score: 5, label: '5점', color: '#1b5e20', fillColor: 'rgba(76,175,80,0.15)' },
+    { score: 4, label: '4점', color: '#33691e', fillColor: 'rgba(139,195,74,0.15)' },
+    { score: 3, label: '3점', color: '#e65100', fillColor: 'rgba(255,193,7,0.15)' },
+    { score: 2, label: '2점', color: '#bf360c', fillColor: 'rgba(255,152,0,0.15)' },
+    { score: 1, label: '1점', color: '#b71c1c', fillColor: 'rgba(244,67,54,0.15)' }
+];
+const BOUNDARIES = [
+    { key: 'boundary5to4', label: '5점 기준선', subLabel: '이하 → 5점', color: '#4caf50' },
+    { key: 'boundary4to3', label: '4점 기준선', subLabel: '이하 → 4점', color: '#8bc34a' },
+    { key: 'boundary3to2', label: '3점 기준선', subLabel: '이하 → 3점', color: '#ff9800' },
+    { key: 'boundary2to1', label: '2점 기준선', subLabel: '이하 → 2점', color: '#f44336' }
+];
+let KpiGrade2dEditor = class KpiGrade2dEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.gristConfig = null;
+    }
+    firstUpdated() {
+        var _a;
+        const grades = (_a = this.kpi) === null || _a === void 0 ? void 0 : _a.grades;
+        this.rows = (grades === null || grades === void 0 ? void 0 : grades.rows) ? grades.rows.map((r) => (Object.assign({}, r))) : [];
+        this.gristConfig = {
+            list: { fields: ['progressRate', 'boundary5to4', 'boundary4to3', 'boundary3to2', 'boundary2to1'] },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence', fixed: true },
+                {
+                    type: 'number',
+                    name: 'progressRate',
+                    header: '공정률 (%)',
+                    record: { editable: false },
+                    sortable: false,
+                    width: 90
+                },
+                {
+                    type: 'number',
+                    name: 'boundary5to4',
+                    header: '5점 기준선',
+                    record: { editable: true, align: 'right' },
+                    width: 110
+                },
+                {
+                    type: 'number',
+                    name: 'boundary4to3',
+                    header: '4점 기준선',
+                    record: { editable: true, align: 'right' },
+                    width: 110
+                },
+                {
+                    type: 'number',
+                    name: 'boundary3to2',
+                    header: '3점 기준선',
+                    record: { editable: true, align: 'right' },
+                    width: 110
+                },
+                {
+                    type: 'number',
+                    name: 'boundary2to1',
+                    header: '2점 기준선',
+                    record: { editable: true, align: 'right' },
+                    width: 110
+                }
+            ],
+            rows: { selectable: false, appendable: false },
+            pagination: { infinite: true }
+        };
+        requestAnimationFrame(() => this._drawChart(this.rows));
+    }
+    render() {
+        return html `
+      <div class="info-bar">
+        <span><strong>X축</strong>: 공정률 (%)</span>
+        <span><strong>Y축</strong>: 공기편차 (%)</span>
+        <span class="arrow">|</span>
+        <span class="rule">
+          공기편차
+          <span class="score-badge" style="background:#4caf50">5</span>
+          기준선 미만 → 5점,
+          <span class="score-badge" style="background:#8bc34a">4</span>
+          기준선 미만 → 4점,
+          <span class="score-badge" style="background:#ff9800">3</span>
+          기준선 미만 → 3점,
+          <span class="score-badge" style="background:#f44336">2</span>
+          기준선 미만 → 2점, 초과 → 1점
+        </span>
+      </div>
+
+      <div class="chart-wrap">
+        <svg height="220"></svg>
+      </div>
+
+      <div class="legend">
+        ${BOUNDARIES.map(b => html `
+            <div class="legend-item">
+              <div class="legend-line" style="background:${b.color}"></div>
+              <span>${b.label}</span>
+              <span class="legend-sub">(${b.subLabel})</span>
+            </div>
+          `)}
+      </div>
+
+      <ox-grist
+        .mode=${'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this._fetchHandler.bind(this)}
+        @change=${this._onGristChange}
+      ></ox-grist>
+
+      <div class="footer">
+        <md-filled-button @click=${this._save}>
+          <md-icon slot="icon">save</md-icon>
+          저장
+        </md-filled-button>
+      </div>
+    `;
+    }
+    async _fetchHandler({ page, limit }) {
+        return { total: this.rows.length, records: this.rows };
+    }
+    _onGristChange() {
+        this._drawChart(this._getCurrentRows());
+    }
+    _getCurrentRows() {
+        var _a, _b;
+        const records = (_b = (_a = this.grist) === null || _a === void 0 ? void 0 : _a.dirtyData) === null || _b === void 0 ? void 0 : _b.records;
+        if (!records || records.length === 0)
+            return this.rows;
+        return records.map((r) => ({
+            progressRate: r.progressRate,
+            boundary5to4: Number(r.boundary5to4),
+            boundary4to3: Number(r.boundary4to3),
+            boundary3to2: Number(r.boundary3to2),
+            boundary2to1: Number(r.boundary2to1)
+        }));
+    }
+    _drawChart(rows) {
+        if (!this.svgEl || !rows.length)
+            return;
+        const W = this.svgEl.clientWidth || 560;
+        const H = 220;
+        const m = { top: 16, right: 32, bottom: 36, left: 56 };
+        const w = W - m.left - m.right;
+        const h = H - m.top - m.bottom;
+        const svg = d3.select(this.svgEl).attr('height', H);
+        svg.selectAll('*').remove();
+        const g = svg.append('g').attr('transform', `translate(${m.left},${m.top})`);
+        const x = d3.scaleLinear().domain([0, 99]).range([0, w]);
+        const allVals = rows.flatMap(r => [r.boundary5to4, r.boundary4to3, r.boundary3to2, r.boundary2to1]);
+        const [yMin, yMax] = d3.extent(allVals);
+        const pad = (yMax - yMin) * 0.15 || 5;
+        const y = d3.scaleLinear().domain([yMin - pad, yMax + pad]).range([h, 0]);
+        // 점수 구간 채우기 (5개 존)
+        const zoneDefs = [
+            { y0: _r => h, y1: r => y(r.boundary5to4), fill: 'rgba(76,175,80,0.12)', label: '5점' },
+            { y0: r => y(r.boundary5to4), y1: r => y(r.boundary4to3), fill: 'rgba(139,195,74,0.12)', label: '4점' },
+            { y0: r => y(r.boundary4to3), y1: r => y(r.boundary3to2), fill: 'rgba(255,193,7,0.12)', label: '3점' },
+            { y0: r => y(r.boundary3to2), y1: r => y(r.boundary2to1), fill: 'rgba(255,152,0,0.12)', label: '2점' },
+            { y0: r => y(r.boundary2to1), y1: _r => 0, fill: 'rgba(244,67,54,0.12)', label: '1점' }
+        ];
+        for (const zone of zoneDefs) {
+            const area = d3.area()
+                .x(r => x(r.progressRate))
+                .y0(zone.y0)
+                .y1(zone.y1)
+                .curve(d3.curveMonotoneX);
+            g.append('path')
+                .datum(rows)
+                .attr('fill', zone.fill)
+                .attr('d', area);
+        }
+        // 중간 공정률 지점에 점수 레이블
+        const midRow = rows[Math.floor(rows.length / 2)];
+        if (midRow) {
+            const scoreColors = ['#2e7d32', '#558b2f', '#f57f17', '#e65100', '#c62828'];
+            const scorePositions = [
+                (h + y(midRow.boundary5to4)) / 2,
+                (y(midRow.boundary5to4) + y(midRow.boundary4to3)) / 2,
+                (y(midRow.boundary4to3) + y(midRow.boundary3to2)) / 2,
+                (y(midRow.boundary3to2) + y(midRow.boundary2to1)) / 2,
+                y(midRow.boundary2to1) / 2
+            ];
+            const scoreLabels = ['5점', '4점', '3점', '2점', '1점'];
+            scorePositions.forEach((yPos, i) => {
+                if (yPos > 4 && yPos < h - 4) {
+                    g.append('text')
+                        .attr('x', w - 4)
+                        .attr('y', yPos)
+                        .attr('text-anchor', 'end')
+                        .attr('dominant-baseline', 'middle')
+                        .attr('font-size', '10px')
+                        .attr('font-weight', 'bold')
+                        .attr('fill', scoreColors[i])
+                        .attr('opacity', 0.8)
+                        .text(scoreLabels[i]);
+                }
+            });
+        }
+        // 격자선
+        g.append('g')
+            .attr('stroke', '#e0e0e0')
+            .attr('stroke-dasharray', '2,3')
+            .selectAll('line')
+            .data(y.ticks(5))
+            .join('line')
+            .attr('x1', 0).attr('x2', w)
+            .attr('y1', d => y(d)).attr('y2', d => y(d));
+        // y=0 기준선 (공기편차 0%)
+        const yZero = y(0);
+        if (yZero >= 0 && yZero <= h) {
+            g.append('line')
+                .attr('x1', 0).attr('x2', w)
+                .attr('y1', yZero).attr('y2', yZero)
+                .attr('stroke', '#90a4ae')
+                .attr('stroke-width', 1)
+                .attr('stroke-dasharray', '4,2');
+            g.append('text')
+                .attr('x', -4)
+                .attr('y', yZero)
+                .attr('text-anchor', 'end')
+                .attr('dominant-baseline', 'middle')
+                .attr('font-size', '9px')
+                .attr('fill', '#90a4ae')
+                .text('0%');
+        }
+        // X축
+        g.append('g')
+            .attr('transform', `translate(0,${h})`)
+            .call(d3.axisBottom(x).ticks(10).tickFormat(d => `${d}%`))
+            .selectAll('text')
+            .style('font-size', '10px');
+        // X축 레이블
+        g.append('text')
+            .attr('x', w / 2)
+            .attr('y', h + 30)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '11px')
+            .attr('fill', '#666')
+            .text('공정률 (%)');
+        // Y축
+        g.append('g')
+            .call(d3.axisLeft(y).ticks(5))
+            .selectAll('text')
+            .style('font-size', '10px');
+        // Y축 레이블
+        g.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -h / 2)
+            .attr('y', -44)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '11px')
+            .attr('fill', '#666')
+            .text('공기편차 (%)');
+        // 4개 경계선
+        for (const { key, color } of BOUNDARIES) {
+            const line = d3
+                .line()
+                .x(r => x(r.progressRate))
+                .y(r => y(r[key]))
+                .curve(d3.curveMonotoneX);
+            g.append('path')
+                .datum(rows)
+                .attr('fill', 'none')
+                .attr('stroke', color)
+                .attr('stroke-width', 2)
+                .attr('d', line);
+        }
+    }
+    _validate(rows) {
+        for (const row of rows) {
+            const { progressRate: p, boundary5to4: b54, boundary4to3: b43, boundary3to2: b32, boundary2to1: b21 } = row;
+            if (!(b54 < b43 && b43 < b32 && b32 < b21)) {
+                notify({
+                    message: `공정률 ${p}%행: 기준선 값이 잘못됐습니다. 5점 < 4점 < 3점 < 2점 기준선 순서여야 합니다.`,
+                    level: 'error'
+                });
+                return false;
+            }
+        }
+        return true;
+    }
+    async _save() {
+        const rows = this._getCurrentRows();
+        if (!this._validate(rows))
+            return;
+        const grades = { type: 'PROGRESS_DEVIATION_LOOKUP', rows };
+        try {
+            await client.mutate({
+                mutation: gql `
+          mutation ($id: String!, $patch: KpiPatch!) {
+            updateKpi(id: $id, patch: $patch) {
+              id
+              grades
+              scoreType
+            }
+          }
+        `,
+                variables: {
+                    id: this.kpi.id,
+                    patch: { grades, scoreType: 'CUSTOM' }
+                }
+            });
+            this.rows = rows;
+            this._drawChart(rows);
+            notify({ message: '저장되었습니다.' });
+        }
+        catch (e) {
+            notify({ message: '저장 중 오류가 발생했습니다.', level: 'error' });
+        }
+    }
+};
+KpiGrade2dEditor.styles = [
+    CommonHeaderStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .info-bar {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        padding: 8px 16px;
+        background: var(--md-sys-color-surface-variant, #f5f5f5);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, #ddd);
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant, #555);
+        flex-shrink: 0;
+      }
+
+      .info-bar .rule {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .info-bar .arrow {
+        color: #888;
+      }
+
+      .score-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 11px;
+        font-weight: bold;
+        color: #fff;
+      }
+
+      .chart-wrap {
+        padding: 8px 16px 0;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .chart-wrap svg {
+        width: 100%;
+        display: block;
+      }
+
+      .legend {
+        display: flex;
+        gap: 20px;
+        padding: 4px 16px 8px;
+        font-size: 12px;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+      }
+
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .legend-line {
+        width: 20px;
+        height: 3px;
+        border-radius: 2px;
+      }
+
+      .legend-sub {
+        color: #888;
+        font-size: 11px;
+      }
+
+      ox-grist {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 8px 16px;
+        border-top: 1px solid var(--md-sys-color-outline-variant, #ccc);
+        flex-shrink: 0;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiGrade2dEditor.prototype, "kpi", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiGrade2dEditor.prototype, "rows", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiGrade2dEditor.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], KpiGrade2dEditor.prototype, "grist", void 0);
+__decorate([
+    query('svg'),
+    __metadata("design:type", SVGElement)
+], KpiGrade2dEditor.prototype, "svgEl", void 0);
+KpiGrade2dEditor = __decorate([
+    customElement('kpi-grade-2d-editor')
+], KpiGrade2dEditor);
+export { KpiGrade2dEditor };
+//# sourceMappingURL=kpi-grade-2d-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-grade-2d-editor.js","sourceRoot":"","sources":["../../../client/pages/kpi-admin/kpi-grade-2d-editor.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AAExC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AACxB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,SAAS,EAAe,MAAM,qBAAqB,CAAA;AAU5D,kCAAkC;AAClC,MAAM,WAAW,GAAG;IAClB,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE;IAC9E,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,uBAAuB,EAAE;IAC/E,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE;IAC9E,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE;IAC9E,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE;CAC/E,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,GAAG,EAAE,cAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxF,EAAE,GAAG,EAAE,cAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxF,EAAE,GAAG,EAAE,cAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxF,EAAE,GAAG,EAAE,cAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CACzF,CAAA;AAGM,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAmGY,SAAI,GAAiB,EAAE,CAAA;QACvB,gBAAW,GAAQ,IAAI,CAAA;IAkU1C,CAAC;IA9TC,YAAY;;QACV,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,GAAG,0CAAE,MAAM,CAAA;QAC/B,IAAI,CAAC,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,mBAAM,CAAC,EAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAEvE,IAAI,CAAC,WAAW,GAAG;YACjB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC,EAAE;YAClG,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE;gBACvD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,KAAK;oBACf,KAAK,EAAE,EAAE;iBACV;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;oBAC1C,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;oBAC1C,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;oBAC1C,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;oBAC1C,KAAK,EAAE,GAAG;iBACX;aACF;YACD,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE;YAC9C,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;SAC/B,CAAA;QAED,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;UAuBL,UAAU,CAAC,GAAG,CACd,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;;2DAEwC,CAAC,CAAC,KAAK;sBAC5C,CAAC,CAAC,KAAK;0CACa,CAAC,CAAC,QAAQ;;WAEzC,CACF;;;;gBAIO,MAAM;kBACJ,IAAI,CAAC,WAAW;wBACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;kBACnC,IAAI,CAAC,cAAc;;;;mCAIF,IAAI,CAAC,KAAK;;;;;KAKxC,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAe;QACtD,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAA;IACxD,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAA;IACzC,CAAC;IAEO,eAAe;;QACrB,MAAM,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,OAAO,CAAA;QAC9C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC,IAAI,CAAA;QAEtD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,YAAY,EAAE,CAAC,CAAC,YAAY;YAC5B,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;YACpC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;YACpC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;YACpC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC;SACrC,CAAC,CAAC,CAAA;IACL,CAAC;IAEO,UAAU,CAAC,IAAkB;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAEvC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,GAAG,CAAA;QACvC,MAAM,CAAC,GAAG,GAAG,CAAA;QACb,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA;QACtD,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,CAAA;QAC9B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAA;QAE9B,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;QACnD,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;QAE3B,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;QAE5E,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAExD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;QACnG,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAqB,CAAA;QAC3D,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAA;QACrC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAEzE,mBAAmB;QACnB,MAAM,QAAQ,GAAyG;YACrH,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,IAAI,EAAE;YACtF,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,IAAI,EAAE;YACtG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,IAAI,EAAE;YACrG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,IAAI,EAAE;YACrG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,IAAI,EAAE;SACvF,CAAA;QAED,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,GAAG,EAAE,CAAC,IAAI,EAAc;iBAC/B,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;iBACzB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;iBACX,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;iBACX,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAA;YAE3B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,KAAK,CAAC,IAAI,CAAC;iBACX,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;iBACvB,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;QACpB,CAAC;QAED,oBAAoB;QACpB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;QAChD,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;YAC3E,MAAM,cAAc,GAAG;gBACrB,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC;gBAChC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC;gBACrD,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC;gBACrD,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC;gBACrD,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC;aAC3B,CAAA;YACD,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;YAElD,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACjC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC7B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;yBACb,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;yBAChB,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC;yBACf,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;yBAC1B,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC;yBACnC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;yBACzB,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;yBAC3B,IAAI,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;yBAC5B,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC;yBACpB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBACzB,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,MAAM;QACN,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;aACV,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;aACzB,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC;aAC/B,SAAS,CAAC,MAAM,CAAC;aACjB,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aAChB,IAAI,CAAC,MAAM,CAAC;aACZ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aAC3B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE9C,oBAAoB;QACpB,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAClB,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YAC7B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3B,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;iBACnC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;iBACzB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;iBACvB,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAA;YAClC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;iBACb,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC;iBAChB,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC;iBAC1B,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC;iBACnC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC;iBACxB,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;iBACvB,IAAI,CAAC,IAAI,CAAC,CAAA;QACf,CAAC;QAED,KAAK;QACL,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;aACV,IAAI,CAAC,WAAW,EAAE,eAAe,CAAC,GAAG,CAAC;aACtC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;aACzD,SAAS,CAAC,MAAM,CAAC;aACjB,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QAE7B,SAAS;QACT,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;aAChB,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;aACjB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACzB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;aACpB,IAAI,CAAC,SAAS,CAAC,CAAA;QAElB,KAAK;QACL,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;aACV,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aAC7B,SAAS,CAAC,MAAM,CAAC;aACjB,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QAE7B,SAAS;QACT,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;aAChC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;aACjB,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;aACd,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACzB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;aACpB,IAAI,CAAC,UAAU,CAAC,CAAA;QAEnB,SAAS;QACT,KAAK,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,UAAU,EAAE,CAAC;YACxC,MAAM,IAAI,GAAG,EAAE;iBACZ,IAAI,EAAc;iBAClB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;iBACzB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;iBACjB,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAA;YAE3B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;iBACb,KAAK,CAAC,IAAI,CAAC;iBACX,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;iBACpB,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC;iBACrB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;iBACvB,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;QACpB,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,IAAkB;QAClC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;YAC3G,IAAI,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC;gBAC3C,MAAM,CAAC;oBACL,OAAO,EAAE,OAAO,CAAC,oDAAoD;oBACrE,KAAK,EAAE,OAAO;iBACf,CAAC,CAAA;gBACF,OAAO,KAAK,CAAA;YACd,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAEO,KAAK,CAAC,KAAK;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACnC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAAE,OAAM;QAEjC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,2BAA2B,EAAE,IAAI,EAAE,CAAA;QAE1D,IAAI,CAAC;YACH,MAAM,MAAM,CAAC,MAAM,CAAC;gBAClB,QAAQ,EAAE,GAAG,CAAA;;;;;;;;SAQZ;gBACD,SAAS,EAAE;oBACT,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE;oBACf,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;iBACvC;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACrB,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA;QACjC,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,MAAM,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QACzD,CAAC;IACH,CAAC;;AApaM,uBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,AA/FY,CA+FZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAS;AACnB;IAAhB,KAAK,EAAE;;8CAAgC;AACvB;IAAhB,KAAK,EAAE;;qDAAgC;AACb;IAA1B,KAAK,CAAC,UAAU,CAAC;8BAAiB,SAAS;+CAAA;AACtB;IAArB,KAAK,CAAC,KAAK,CAAC;8BAAiB,UAAU;+CAAA;AAtG7B,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAsa5B","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport * as d3 from 'd3'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { DataGrist, FetchOption } from '@operato/data-grist'\n\ninterface Grade2DRow {\n  progressRate: number\n  boundary5to4: number\n  boundary4to3: number\n  boundary3to2: number\n  boundary2to1: number\n}\n\n// 점수 구간 정의 (높은 점수 = 좋음 = 낮은 공기편차)\nconst SCORE_ZONES = [\n  { score: 5, label: '5점', color: '#1b5e20', fillColor: 'rgba(76,175,80,0.15)' },\n  { score: 4, label: '4점', color: '#33691e', fillColor: 'rgba(139,195,74,0.15)' },\n  { score: 3, label: '3점', color: '#e65100', fillColor: 'rgba(255,193,7,0.15)' },\n  { score: 2, label: '2점', color: '#bf360c', fillColor: 'rgba(255,152,0,0.15)' },\n  { score: 1, label: '1점', color: '#b71c1c', fillColor: 'rgba(244,67,54,0.15)' }\n]\n\nconst BOUNDARIES = [\n  { key: 'boundary5to4' as const, label: '5점 기준선', subLabel: '이하 → 5점', color: '#4caf50' },\n  { key: 'boundary4to3' as const, label: '4점 기준선', subLabel: '이하 → 4점', color: '#8bc34a' },\n  { key: 'boundary3to2' as const, label: '3점 기준선', subLabel: '이하 → 3점', color: '#ff9800' },\n  { key: 'boundary2to1' as const, label: '2점 기준선', subLabel: '이하 → 2점', color: '#f44336' }\n]\n\n@customElement('kpi-grade-2d-editor')\nexport class KpiGrade2dEditor extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      .info-bar {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        padding: 8px 16px;\n        background: var(--md-sys-color-surface-variant, #f5f5f5);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant, #ddd);\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant, #555);\n        flex-shrink: 0;\n      }\n\n      .info-bar .rule {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .info-bar .arrow {\n        color: #888;\n      }\n\n      .score-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 20px;\n        height: 20px;\n        border-radius: 50%;\n        font-size: 11px;\n        font-weight: bold;\n        color: #fff;\n      }\n\n      .chart-wrap {\n        padding: 8px 16px 0;\n        flex-shrink: 0;\n        position: relative;\n      }\n\n      .chart-wrap svg {\n        width: 100%;\n        display: block;\n      }\n\n      .legend {\n        display: flex;\n        gap: 20px;\n        padding: 4px 16px 8px;\n        font-size: 12px;\n        flex-shrink: 0;\n        flex-wrap: wrap;\n      }\n\n      .legend-item {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .legend-line {\n        width: 20px;\n        height: 3px;\n        border-radius: 2px;\n      }\n\n      .legend-sub {\n        color: #888;\n        font-size: 11px;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow: hidden;\n      }\n\n      .footer {\n        display: flex;\n        justify-content: flex-end;\n        gap: 8px;\n        padding: 8px 16px;\n        border-top: 1px solid var(--md-sys-color-outline-variant, #ccc);\n        flex-shrink: 0;\n      }\n    `\n  ]\n\n  @property({ type: Object }) kpi: any\n  @state() private rows: Grade2DRow[] = []\n  @state() private gristConfig: any = null\n  @query('ox-grist') private grist!: DataGrist\n  @query('svg') private svgEl!: SVGElement\n\n  firstUpdated() {\n    const grades = this.kpi?.grades\n    this.rows = grades?.rows ? grades.rows.map((r: any) => ({ ...r })) : []\n\n    this.gristConfig = {\n      list: { fields: ['progressRate', 'boundary5to4', 'boundary4to3', 'boundary3to2', 'boundary2to1'] },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        {\n          type: 'number',\n          name: 'progressRate',\n          header: '공정률 (%)',\n          record: { editable: false },\n          sortable: false,\n          width: 90\n        },\n        {\n          type: 'number',\n          name: 'boundary5to4',\n          header: '5점 기준선',\n          record: { editable: true, align: 'right' },\n          width: 110\n        },\n        {\n          type: 'number',\n          name: 'boundary4to3',\n          header: '4점 기준선',\n          record: { editable: true, align: 'right' },\n          width: 110\n        },\n        {\n          type: 'number',\n          name: 'boundary3to2',\n          header: '3점 기준선',\n          record: { editable: true, align: 'right' },\n          width: 110\n        },\n        {\n          type: 'number',\n          name: 'boundary2to1',\n          header: '2점 기준선',\n          record: { editable: true, align: 'right' },\n          width: 110\n        }\n      ],\n      rows: { selectable: false, appendable: false },\n      pagination: { infinite: true }\n    }\n\n    requestAnimationFrame(() => this._drawChart(this.rows))\n  }\n\n  render() {\n    return html`\n      <div class=\"info-bar\">\n        <span><strong>X축</strong>: 공정률 (%)</span>\n        <span><strong>Y축</strong>: 공기편차 (%)</span>\n        <span class=\"arrow\">|</span>\n        <span class=\"rule\">\n          공기편차\n          <span class=\"score-badge\" style=\"background:#4caf50\">5</span>\n          기준선 미만 → 5점,\n          <span class=\"score-badge\" style=\"background:#8bc34a\">4</span>\n          기준선 미만 → 4점,\n          <span class=\"score-badge\" style=\"background:#ff9800\">3</span>\n          기준선 미만 → 3점,\n          <span class=\"score-badge\" style=\"background:#f44336\">2</span>\n          기준선 미만 → 2점, 초과 → 1점\n        </span>\n      </div>\n\n      <div class=\"chart-wrap\">\n        <svg height=\"220\"></svg>\n      </div>\n\n      <div class=\"legend\">\n        ${BOUNDARIES.map(\n          b => html`\n            <div class=\"legend-item\">\n              <div class=\"legend-line\" style=\"background:${b.color}\"></div>\n              <span>${b.label}</span>\n              <span class=\"legend-sub\">(${b.subLabel})</span>\n            </div>\n          `\n        )}\n      </div>\n\n      <ox-grist\n        .mode=${'GRID'}\n        .config=${this.gristConfig}\n        .fetchHandler=${this._fetchHandler.bind(this)}\n        @change=${this._onGristChange}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <md-filled-button @click=${this._save}>\n          <md-icon slot=\"icon\">save</md-icon>\n          저장\n        </md-filled-button>\n      </div>\n    `\n  }\n\n  private async _fetchHandler({ page, limit }: FetchOption) {\n    return { total: this.rows.length, records: this.rows }\n  }\n\n  private _onGristChange() {\n    this._drawChart(this._getCurrentRows())\n  }\n\n  private _getCurrentRows(): Grade2DRow[] {\n    const records = this.grist?.dirtyData?.records\n    if (!records || records.length === 0) return this.rows\n\n    return records.map((r: any) => ({\n      progressRate: r.progressRate,\n      boundary5to4: Number(r.boundary5to4),\n      boundary4to3: Number(r.boundary4to3),\n      boundary3to2: Number(r.boundary3to2),\n      boundary2to1: Number(r.boundary2to1)\n    }))\n  }\n\n  private _drawChart(rows: Grade2DRow[]) {\n    if (!this.svgEl || !rows.length) return\n\n    const W = this.svgEl.clientWidth || 560\n    const H = 220\n    const m = { top: 16, right: 32, bottom: 36, left: 56 }\n    const w = W - m.left - m.right\n    const h = H - m.top - m.bottom\n\n    const svg = d3.select(this.svgEl).attr('height', H)\n    svg.selectAll('*').remove()\n\n    const g = svg.append('g').attr('transform', `translate(${m.left},${m.top})`)\n\n    const x = d3.scaleLinear().domain([0, 99]).range([0, w])\n\n    const allVals = rows.flatMap(r => [r.boundary5to4, r.boundary4to3, r.boundary3to2, r.boundary2to1])\n    const [yMin, yMax] = d3.extent(allVals) as [number, number]\n    const pad = (yMax - yMin) * 0.15 || 5\n    const y = d3.scaleLinear().domain([yMin - pad, yMax + pad]).range([h, 0])\n\n    // 점수 구간 채우기 (5개 존)\n    const zoneDefs: Array<{ y0: (r: Grade2DRow) => number; y1: (r: Grade2DRow) => number; fill: string; label: string }> = [\n      { y0: _r => h, y1: r => y(r.boundary5to4), fill: 'rgba(76,175,80,0.12)', label: '5점' },\n      { y0: r => y(r.boundary5to4), y1: r => y(r.boundary4to3), fill: 'rgba(139,195,74,0.12)', label: '4점' },\n      { y0: r => y(r.boundary4to3), y1: r => y(r.boundary3to2), fill: 'rgba(255,193,7,0.12)', label: '3점' },\n      { y0: r => y(r.boundary3to2), y1: r => y(r.boundary2to1), fill: 'rgba(255,152,0,0.12)', label: '2점' },\n      { y0: r => y(r.boundary2to1), y1: _r => 0, fill: 'rgba(244,67,54,0.12)', label: '1점' }\n    ]\n\n    for (const zone of zoneDefs) {\n      const area = d3.area<Grade2DRow>()\n        .x(r => x(r.progressRate))\n        .y0(zone.y0)\n        .y1(zone.y1)\n        .curve(d3.curveMonotoneX)\n\n      g.append('path')\n        .datum(rows)\n        .attr('fill', zone.fill)\n        .attr('d', area)\n    }\n\n    // 중간 공정률 지점에 점수 레이블\n    const midRow = rows[Math.floor(rows.length / 2)]\n    if (midRow) {\n      const scoreColors = ['#2e7d32', '#558b2f', '#f57f17', '#e65100', '#c62828']\n      const scorePositions = [\n        (h + y(midRow.boundary5to4)) / 2,\n        (y(midRow.boundary5to4) + y(midRow.boundary4to3)) / 2,\n        (y(midRow.boundary4to3) + y(midRow.boundary3to2)) / 2,\n        (y(midRow.boundary3to2) + y(midRow.boundary2to1)) / 2,\n        y(midRow.boundary2to1) / 2\n      ]\n      const scoreLabels = ['5점', '4점', '3점', '2점', '1점']\n\n      scorePositions.forEach((yPos, i) => {\n        if (yPos > 4 && yPos < h - 4) {\n          g.append('text')\n            .attr('x', w - 4)\n            .attr('y', yPos)\n            .attr('text-anchor', 'end')\n            .attr('dominant-baseline', 'middle')\n            .attr('font-size', '10px')\n            .attr('font-weight', 'bold')\n            .attr('fill', scoreColors[i])\n            .attr('opacity', 0.8)\n            .text(scoreLabels[i])\n        }\n      })\n    }\n\n    // 격자선\n    g.append('g')\n      .attr('stroke', '#e0e0e0')\n      .attr('stroke-dasharray', '2,3')\n      .selectAll('line')\n      .data(y.ticks(5))\n      .join('line')\n      .attr('x1', 0).attr('x2', w)\n      .attr('y1', d => y(d)).attr('y2', d => y(d))\n\n    // y=0 기준선 (공기편차 0%)\n    const yZero = y(0)\n    if (yZero >= 0 && yZero <= h) {\n      g.append('line')\n        .attr('x1', 0).attr('x2', w)\n        .attr('y1', yZero).attr('y2', yZero)\n        .attr('stroke', '#90a4ae')\n        .attr('stroke-width', 1)\n        .attr('stroke-dasharray', '4,2')\n      g.append('text')\n        .attr('x', -4)\n        .attr('y', yZero)\n        .attr('text-anchor', 'end')\n        .attr('dominant-baseline', 'middle')\n        .attr('font-size', '9px')\n        .attr('fill', '#90a4ae')\n        .text('0%')\n    }\n\n    // X축\n    g.append('g')\n      .attr('transform', `translate(0,${h})`)\n      .call(d3.axisBottom(x).ticks(10).tickFormat(d => `${d}%`))\n      .selectAll('text')\n      .style('font-size', '10px')\n\n    // X축 레이블\n    g.append('text')\n      .attr('x', w / 2)\n      .attr('y', h + 30)\n      .attr('text-anchor', 'middle')\n      .attr('font-size', '11px')\n      .attr('fill', '#666')\n      .text('공정률 (%)')\n\n    // Y축\n    g.append('g')\n      .call(d3.axisLeft(y).ticks(5))\n      .selectAll('text')\n      .style('font-size', '10px')\n\n    // Y축 레이블\n    g.append('text')\n      .attr('transform', 'rotate(-90)')\n      .attr('x', -h / 2)\n      .attr('y', -44)\n      .attr('text-anchor', 'middle')\n      .attr('font-size', '11px')\n      .attr('fill', '#666')\n      .text('공기편차 (%)')\n\n    // 4개 경계선\n    for (const { key, color } of BOUNDARIES) {\n      const line = d3\n        .line<Grade2DRow>()\n        .x(r => x(r.progressRate))\n        .y(r => y(r[key]))\n        .curve(d3.curveMonotoneX)\n\n      g.append('path')\n        .datum(rows)\n        .attr('fill', 'none')\n        .attr('stroke', color)\n        .attr('stroke-width', 2)\n        .attr('d', line)\n    }\n  }\n\n  private _validate(rows: Grade2DRow[]): boolean {\n    for (const row of rows) {\n      const { progressRate: p, boundary5to4: b54, boundary4to3: b43, boundary3to2: b32, boundary2to1: b21 } = row\n      if (!(b54 < b43 && b43 < b32 && b32 < b21)) {\n        notify({\n          message: `공정률 ${p}%행: 기준선 값이 잘못됐습니다. 5점 < 4점 < 3점 < 2점 기준선 순서여야 합니다.`,\n          level: 'error'\n        })\n        return false\n      }\n    }\n    return true\n  }\n\n  private async _save() {\n    const rows = this._getCurrentRows()\n    if (!this._validate(rows)) return\n\n    const grades = { type: 'PROGRESS_DEVIATION_LOOKUP', rows }\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: KpiPatch!) {\n            updateKpi(id: $id, patch: $patch) {\n              id\n              grades\n              scoreType\n            }\n          }\n        `,\n        variables: {\n          id: this.kpi.id,\n          patch: { grades, scoreType: 'CUSTOM' }\n        }\n      })\n\n      this.rows = rows\n      this._drawChart(rows)\n      notify({ message: '저장되었습니다.' })\n    } catch (e) {\n      notify({ message: '저장 중 오류가 발생했습니다.', level: 'error' })\n    }\n  }\n}\n"]}

package/dist-client/pages/kpi-admin/kpi-system-guide.d.ts

@@ -0,0 +1,18 @@
+import { PageView } from '@operato/shell';
+export declare class KpiSystemGuide extends PageView {
+    static styles: import("lit").CSSResult[];
+    kpiRoot: any[];
+    metrics: any[];
+    loading: boolean;
+    selectedDetail: any;
+    get context(): {
+        title: string;
+    };
+    firstUpdated(): Promise<void>;
+    /** 메트릭이 사용되는 KPI 목록 */
+    private getMetricUsage;
+    private showDetail;
+    private closeDetail;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDetailPopup;
+}