@dssp/dkpi 1.0.0-alpha.7 → 1.0.0-alpha.70

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":"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","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;
+}