@things-factory/kpi 9.0.16 → 9.0.18

package/client/pages/kpi/kpi-viz-editor.ts

@@ -194,11 +194,13 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
   }
 
   _renderPreview() {
-    const kpiValue = this.kpi?.value?.value || 75
-    const targetValue = this.kpi?.targetValue || 100
-    const unit = this.kpi?.unit || ''
+    const kpiValue = this.kpi?.value?.value ?? 75
+    const targetValue = this.kpi?.targetValue ?? 100
+    const unit = this.kpi?.unit ?? ''
     const color = this.vizMeta.color || '#2196f3'
     const icon = this.vizMeta.icon || 'trending_up'
+    const min = this.vizMeta.minValue ?? 0
+    const max = this.vizMeta.maxValue ?? 100
 
     switch (this.selectedVizType) {
       case 'CARD':
@@ -213,22 +215,161 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
             </div>
           </div>
         `
-      case 'GAUGE':
-        const percentage = Math.min((kpiValue / targetValue) * 100, 100)
+      case 'GAUGE': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const r = 60
+        const cx = 90
+        const cy = 90
+        const startX = cx - r
+        const startY = cy
+        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
+        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
+        const needleAngle = Math.PI - Math.PI * percent
+        const needleX = cx + r * Math.cos(needleAngle)
+        const needleY = cy - r * Math.sin(needleAngle)
         return html`
           <div style="text-align:center;padding:16px;">
-            <div
-              style="width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${percentage *
-              3.6}deg, #e0e0e0 ${percentage * 3.6}deg 360deg);margin:0 auto;position:relative;"
-            >
-              <div
-                style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:1.2rem;font-weight:bold;color:${color};"
+            <svg width="180" height="110" viewBox="0 0 180 110">
+              <!-- 배경 arc -->
+              <path
+                d="M${startX},${startY} A${r},${r} 0 0,1 ${cx + r},${cy}"
+                fill="none"
+                stroke="#e0e0e0"
+                stroke-width="16"
+              />
+              <!-- 값 arc -->
+              <path
+                d="M${startX},${startY} A${r},${r} 0 0,1 ${endX},${endY}"
+                fill="none"
+                stroke="${color}"
+                stroke-width="16"
+              />
+              <!-- 바늘 -->
+              <line x1="${cx}" y1="${cy}" x2="${needleX}" y2="${needleY}" stroke="#333" stroke-width="4" />
+              <!-- 중심 원 -->
+              <circle cx="${cx}" cy="${cy}" r="7" fill="#333" />
+              <!-- 중앙값 -->
+              <text x="${cx}" y="${cy - 25}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
+                ${value}${unit}
+              </text>
+              <!-- min/max -->
+              <text x="${cx - r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${min}</text>
+              <text x="${cx + r}" y="${cy + 20}" text-anchor="middle" font-size="12" fill="#888">${max}</text>
+            </svg>
+          </div>
+        `
+      }
+      case 'SPEEDOMETER': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const r = 60
+        const cx = 90
+        const cy = 90
+        const startX = cx - r
+        const startY = cy
+        const endX = cx + r * Math.cos(Math.PI * (1 - percent))
+        const endY = cy - r * Math.sin(Math.PI * (1 - percent))
+        const needleAngle = Math.PI - Math.PI * percent
+        const needleX = cx + r * Math.cos(needleAngle)
+        const needleY = cy - r * Math.sin(needleAngle)
+        // 중간 눈금 (5개)
+        const ticks = Array.from({ length: 6 }, (_, i) => {
+          const tickAngle = Math.PI - (Math.PI * i) / 5
+          const tx1 = cx + (r - 8) * Math.cos(tickAngle)
+          const ty1 = cy - (r - 8) * Math.sin(tickAngle)
+          const tx2 = cx + (r + 8) * Math.cos(tickAngle)
+          const ty2 = cy - (r + 8) * Math.sin(tickAngle)
+          const label = Math.round(min + (max - min) * (i / 5))
+          const lx = cx + (r + 22) * Math.cos(tickAngle)
+          const ly = cy - (r + 22) * Math.sin(tickAngle) + 6
+          return { tx1, ty1, tx2, ty2, label, lx, ly }
+        })
+        return html`
+          <div style="text-align:center;padding:16px;">
+            <svg width="200" height="120" viewBox="0 0 200 120">
+              <!-- 배경 arc (더 두껍게) -->
+              <path
+                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${cx + r + 10},${cy}"
+                fill="none"
+                stroke="#e0e0e0"
+                stroke-width="28"
+              />
+              <!-- 값 arc -->
+              <path
+                d="M${startX + 10},${startY} A${r},${r} 0 0,1 ${endX + 10},${endY}"
+                fill="none"
+                stroke="${color}"
+                stroke-width="28"
+              />
+              <!-- 눈금 -->
+              ${ticks.map(
+                t =>
+                  html`<line
+                    x1="${t.tx1 + 10}"
+                    y1="${t.ty1}"
+                    x2="${t.tx2 + 10}"
+                    y2="${t.ty2}"
+                    stroke="#888"
+                    stroke-width="2"
+                  />`
+              )}
+              <!-- 눈금 숫자 -->
+              ${ticks.map(
+                t =>
+                  html`<text
+                    x="${t.lx + 10}"
+                    y="${t.ly}"
+                    text-anchor="middle"
+                    font-size="14"
+                    fill="#333"
+                    font-weight="bold"
+                    >${t.label}</text
+                  >`
+              )}
+              <!-- 바늘 (빨간색) -->
+              <line x1="${cx + 10}" y1="${cy}" x2="${needleX + 10}" y2="${needleY}" stroke="#d32f2f" stroke-width="6" />
+              <!-- 중심 원 -->
+              <circle cx="${cx + 10}" cy="${cy}" r="13" fill="#333" />
+              <!-- 중앙값 -->
+              <text
+                x="${cx + 10}"
+                y="${cy - 32}"
+                text-anchor="middle"
+                font-size="26"
+                fill="${color}"
+                font-weight="bold"
               >
-                ${kpiValue}${unit}
-              </div>
-            </div>
+                ${value}${unit}
+              </text>
+              <!-- min/max 포인트 -->
+              <circle cx="${startX + 10}" cy="${startY}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
+              <circle cx="${cx + r + 10}" cy="${cy}" r="7" fill="#fff" stroke="#888" stroke-width="2" />
+              <!-- min/max 숫자 크게 -->
+              <text
+                x="${startX + 10}"
+                y="${startY + 32}"
+                text-anchor="middle"
+                font-size="16"
+                fill="#333"
+                font-weight="bold"
+              >
+                ${min}
+              </text>
+              <text
+                x="${cx + r + 10}"
+                y="${cy + 32}"
+                text-anchor="middle"
+                font-size="16"
+                fill="#333"
+                font-weight="bold"
+              >
+                ${max}
+              </text>
+            </svg>
           </div>
         `
+      }
       case 'PROGRESS':
         const progressPercentage = Math.min((kpiValue / targetValue) * 100, 100)
         return html`
@@ -241,6 +382,65 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
             </div>
           </div>
         `
+      case 'THERMOMETER': {
+        const value = Math.max(min, Math.min(kpiValue, max))
+        const percent = max - min > 0 ? (value - min) / (max - min) : 0
+        const barHeight = 120
+        const barWidth = 24
+        const x = 100
+        const yTop = 30
+        const yBottom = yTop + barHeight
+        const fillY = yBottom - percent * barHeight
+        return html`
+          <div style="text-align:center;padding:16px;">
+            <svg width="200" height="180" viewBox="0 0 200 180">
+              <!-- 바깥 테두리 -->
+              <rect
+                x="${x - barWidth / 2 - 4}"
+                y="${yTop - 4}"
+                width="${barWidth + 8}"
+                height="${barHeight + 8}"
+                rx="16"
+                fill="#f5f5f5"
+                stroke="#bbb"
+                stroke-width="2"
+              />
+              <!-- 빈 막대 -->
+              <rect
+                x="${x - barWidth / 2}"
+                y="${yTop}"
+                width="${barWidth}"
+                height="${barHeight}"
+                rx="12"
+                fill="#e0e0e0"
+              />
+              <!-- 채워진 부분 -->
+              <rect
+                x="${x - barWidth / 2}"
+                y="${fillY}"
+                width="${barWidth}"
+                height="${yBottom - fillY}"
+                rx="12"
+                fill="${color}"
+              />
+              <!-- 하단 구슬 -->
+              <circle cx="${x}" cy="${yBottom + 18}" r="22" fill="#e0e0e0" stroke="#bbb" stroke-width="2" />
+              <circle cx="${x}" cy="${yBottom + 18}" r="18" fill="${color}" />
+              <!-- 현재값 -->
+              <text x="${x}" y="${fillY - 12}" text-anchor="middle" font-size="22" fill="${color}" font-weight="bold">
+                ${value}${unit}
+              </text>
+              <!-- min/max -->
+              <text x="${x}" y="${yBottom + 52}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
+                ${min}
+              </text>
+              <text x="${x}" y="${yTop - 12}" text-anchor="middle" font-size="16" fill="#333" font-weight="bold">
+                ${max}
+              </text>
+            </svg>
+          </div>
+        `
+      }
       case 'ICON':
         return html`
           <div style="text-align:center;padding:16px;">

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

@@ -1,11 +1,11 @@
 import '@material/web/button/elevated-button.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/text-button.js';
-import '@material/web/textfield/outlined-text-field.js';
-import '@material/web/select/outlined-select.js';
-import '@material/web/select/select-option.js';
 import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
 import { LitElement } from 'lit';
+import { DataGrist } from '@operato/data-grist/ox-grist.js';
+import { FetchOption } from '@operato/data-grist';
 interface KpiGrade {
     name: string;
     minValue: number;
@@ -15,21 +15,21 @@ interface KpiGrade {
     description?: string;
 }
 type KpiGrades = KpiGrade[];
-declare const KpiGradeEditor_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+declare const KpiGradeEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class KpiGradeEditor extends KpiGradeEditor_base {
     static styles: import("lit").CSSResult[];
     kpi: any;
     grades: KpiGrades;
-    isDirty: boolean;
-    connectedCallback(): void;
+    gristConfig: any;
+    grist: DataGrist;
+    firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
-    _renderGradeItem(grade: KpiGrade, index: number): import("lit-html").TemplateResult<1>;
-    _updateGrade(index: number, field: keyof KpiGrade, value: any): void;
-    _addGrade(): void;
-    _removeGrade(index: number): void;
-    _loadTemplate(template: string): void;
-    _save(): Promise<void>;
+    fetchHandler({ page, limit, sorters }: FetchOption): Promise<{
+        total: number;
+        records: KpiGrades;
+    }>;
+    _updateGrades(): Promise<void>;
     _validateGrades(): boolean;
-    _cancel(): void;
+    _deleteGrades(): Promise<void>;
 }
 export {};

package/dist-client/pages/kpi/kpi-grade-editor.js

@@ -2,261 +2,144 @@ import { __decorate, __metadata } from "tslib";
 import '@material/web/button/elevated-button.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/text-button.js';
-import '@material/web/textfield/outlined-text-field.js';
-import '@material/web/select/outlined-select.js';
-import '@material/web/select/select-option.js';
 import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import deepEquals from 'lodash-es/isEqual';
+import gql from 'graphql-tag';
 import { LitElement, css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist/ox-grist.js';
+import { i18next, localize } from '@operato/i18n';
+import { client } from '@operato/graphql';
 import { notify } from '@operato/layout';
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
-let KpiGradeEditor = class KpiGradeEditor extends ScopedElementsMixin(LitElement) {
+import { CommonHeaderStyles } from '@operato/styles';
+let KpiGradeEditor = class KpiGradeEditor extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.grades = [];
-        this.isDirty = false;
+        this.kpi = { grades: [] };
+        this.grades = this.kpi?.grades || [];
+        this.gristConfig = null;
     }
     static { this.styles = [
         CommonHeaderStyles,
-        ScrollbarStyles,
         css `
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--md-sys-color-surface, #f4f6fa);
-      }
-
-      .grade-list {
-        flex: 1;
-        margin-bottom: 20px;
-        overflow-y: auto;
-      }
-
-      .grade-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        margin-bottom: 10px;
-        background: #f9f9f9;
-      }
 
-      .grade-item:hover {
-        background: #f0f0f0;
+        background-color: var(--md-sys-color-surface);
       }
 
-      .grade-inputs {
-        display: flex;
-        gap: 10px;
+      ox-grist {
         flex: 1;
       }
-
-      .grade-inputs md-outlined-text-field {
-        flex: 1;
-      }
-
-      .grade-actions {
-        display: flex;
-        gap: 5px;
-      }
-
-      .footer span {
-        font-size: 0.8em;
-        color: var(--md-sys-color-on-surface);
-        line-height: 1.5;
-        padding: 10px;
-      }
     `
     ]; }
-    connectedCallback() {
-        super.connectedCallback();
+    async firstUpdated() {
         if (this.kpi?.grades) {
             this.grades = [...this.kpi.grades];
         }
+        this.gristConfig = {
+            list: { fields: ['name', 'minValue', 'maxValue', 'score', 'color', 'description'] },
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
+                { type: 'gutter', gutterName: 'sequence', fixed: true },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'add', handlers: { click: 'record-copy' } },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_upward', handlers: { click: 'move-up' } },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_downward', handlers: { click: 'move-down' } },
+                { type: 'string', name: 'name', header: '등급명', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'minValue', header: '최소값', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'maxValue', header: '최대값', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'score', header: '점수', record: { editable: true }, width: 80 },
+                { type: 'color', name: 'color', header: '색상', record: { editable: true }, width: 100 },
+                { type: 'string', name: 'description', header: '설명', record: { editable: true }, width: 200 }
+            ],
+            rows: { selectable: { multiple: true } },
+            pagination: { infinite: true }
+        };
     }
     render() {
         return html `
-      <div class="grade-list">${this.grades.map((grade, index) => this._renderGradeItem(grade, index))}</div>
-
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
       <div class="footer">
-        <button type="button" @click=${this._addGrade}><md-icon>add</md-icon>등급 추가</button>
         <div filler></div>
-        <button type="button" @click=${this._cancel}><md-icon>cancel</md-icon>취소</button>
-        <button type="button" @click=${this._save} ?disabled=${!this.isDirty} done><md-icon>save</md-icon>저장</button>
-      </div>
-    `;
-    }
-    _renderGradeItem(grade, index) {
-        return html `
-      <div class="grade-item">
-        <div class="grade-inputs">
-          <md-outlined-text-field
-            label="등급명"
-            value=${grade.name}
-            @input=${(e) => this._updateGrade(index, 'name', e.target.value)}
-          ></md-outlined-text-field>
-
-          <md-outlined-text-field
-            label="최소값"
-            type="number"
-            value=${grade.minValue}
-            @input=${(e) => this._updateGrade(index, 'minValue', parseFloat(e.target.value))}
-          ></md-outlined-text-field>
-
-          <md-outlined-text-field
-            label="최대값"
-            type="number"
-            value=${grade.maxValue}
-            @input=${(e) => this._updateGrade(index, 'maxValue', parseFloat(e.target.value))}
-          ></md-outlined-text-field>
-
-          <md-outlined-text-field
-            label="점수"
-            type="number"
-            value=${grade.score || ''}
-            @input=${(e) => this._updateGrade(index, 'score', parseFloat(e.target.value))}
-          ></md-outlined-text-field>
-
-          <md-outlined-text-field
-            label="색상"
-            value=${grade.color || ''}
-            @input=${(e) => this._updateGrade(index, 'color', e.target.value)}
-          ></md-outlined-text-field>
-        </div>
-
-        <div class="grade-actions">
-          <md-icon-button @click=${() => this._removeGrade(index)}>
-            <md-icon>delete</md-icon>
-          </md-icon-button>
-        </div>
+        <button danger @click=${this._deleteGrades.bind(this)}>
+          <md-icon>delete</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button done type="button" @click=${this._updateGrades}><md-icon>save</md-icon>저장</button>
       </div>
     `;
     }
-    _updateGrade(index, field, value) {
-        this.grades[index] = { ...this.grades[index], [field]: value };
-        this.isDirty = true;
-        this.requestUpdate();
-    }
-    _addGrade() {
-        const newGrade = {
-            name: '',
-            minValue: 0,
-            maxValue: 0,
-            score: 0,
-            color: '#4caf50',
-            description: ''
+    async fetchHandler({ page, limit, sorters = [] }) {
+        return {
+            total: this.grades.length,
+            records: this.grades
         };
-        this.grades.push(newGrade);
-        this.isDirty = true;
-        this.requestUpdate();
-    }
-    _removeGrade(index) {
-        this.grades.splice(index, 1);
-        this.isDirty = true;
-        this.requestUpdate();
     }
-    _loadTemplate(template) {
-        switch (template) {
-            case '5grade':
-                this.grades = [
-                    { name: 'A', minValue: 0, maxValue: 1.5, score: 95, color: '#4caf50', description: '우수' },
-                    { name: 'B', minValue: 1.5, maxValue: 2.5, score: 85, color: '#ff9800', description: '양호' },
-                    { name: 'C', minValue: 2.5, maxValue: 3.5, score: 75, color: '#ffc107', description: '보통' },
-                    { name: 'D', minValue: 3.5, maxValue: 4.5, score: 65, color: '#ff9800', description: '미흡' },
-                    { name: 'E', minValue: 4.5, maxValue: 999, score: 55, color: '#f44336', description: '불량' }
-                ];
-                break;
-            case '3grade':
-                this.grades = [
-                    { name: '우수', minValue: 0, maxValue: 1.5, score: 95, color: '#4caf50', description: '목표 달성' },
-                    { name: '양호', minValue: 1.5, maxValue: 2.5, score: 85, color: '#ff9800', description: '기준 달성' },
-                    { name: '미흡', minValue: 2.5, maxValue: 999, score: 75, color: '#f44336', description: '개선 필요' }
-                ];
-                break;
-            case 'continuous':
-                this.grades = [
-                    { name: '0.999999', minValue: 0, maxValue: 0.025, score: 0.999999, color: '#4caf50' },
-                    { name: '0.944189368', minValue: 0.025, maxValue: 0.05, score: 0.944189368, color: '#4caf50' },
-                    { name: '0.888379735', minValue: 0.05, maxValue: 0.075, score: 0.888379735, color: '#4caf50' }
-                ];
-                break;
-            case 'clear':
-                this.grades = [];
-                break;
+    async _updateGrades() {
+        this.grades = this.grist.dirtyData.records
+            .map(patch => {
+            const { name, minValue, maxValue, score, color, description } = patch;
+            return { name, minValue, maxValue, score, color, description };
+        })
+            .sort((a, b) => a.minValue - b.minValue);
+        if (!this._validateGrades()) {
+            return;
         }
-        this.isDirty = true;
-        this.requestUpdate();
-    }
-    async _save() {
-        try {
-            // 등급 유효성 검사
-            if (!this._validateGrades()) {
-                return;
+        if (!deepEquals(this.kpi?.grades, this.grades)) {
+            try {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($id: String!, $patch: KpiPatch!) {
+              updateKpi(id: $id, patch: $patch) {
+                id
+                name
+                grades
+              }
+            }
+          `,
+                    variables: {
+                        id: this.kpi.id,
+                        patch: { grades: this.grades }
+                    }
+                });
+                this.grades = response.data.updateKpi.grades;
+                this.grist.fetch();
+            }
+            catch (error) {
+                notify({ message: '등급 저장 중 오류가 발생했습니다.' });
             }
-            // 정렬 (minValue 기준)
-            this.grades.sort((a, b) => a.minValue - b.minValue);
-            this.dispatchEvent(new CustomEvent('grades-updated', {
-                detail: {
-                    kpiId: this.kpi.id,
-                    grades: this.grades
-                }
-            }));
-            this.isDirty = false;
-        }
-        catch (error) {
-            notify({
-                message: '등급 저장 중 오류가 발생했습니다.'
-            });
         }
     }
     _validateGrades() {
-        // 최소 1개 등급 필요
         if (this.grades.length === 0) {
-            notify({
-                message: '최소 1개 이상의 등급을 설정해야 합니다.'
-            });
+            notify({ message: '최소 1개 이상의 등급을 설정해야 합니다.' });
             return false;
         }
-        // 등급명 중복 체크
         const names = this.grades.map(g => g.name);
         const uniqueNames = new Set(names);
         if (names.length !== uniqueNames.size) {
-            notify({
-                message: '등급명이 중복되었습니다.'
-            });
+            notify({ message: '등급명이 중복되었습니다.' });
             return false;
         }
-        // 값 범위 체크
         for (let i = 0; i < this.grades.length; i++) {
             const grade = this.grades[i];
             if (grade.minValue >= grade.maxValue) {
-                notify({
-                    message: `등급 "${grade.name}"의 최소값이 최대값보다 크거나 같습니다.`
-                });
+                notify({ message: `등급 "${grade.name}"의 최소값이 최대값보다 크거나 같습니다.` });
                 return false;
             }
-            // 연속성 체크
             if (i > 0) {
                 const prevGrade = this.grades[i - 1];
                 if (prevGrade.maxValue !== grade.minValue) {
-                    notify({
-                        message: `등급 "${prevGrade.name}"과 "${grade.name}" 사이에 간격이 있습니다.`
-                    });
+                    notify({ message: `등급 "${prevGrade.name}"과 "${grade.name}" 사이에 간격이 있습니다.` });
                     return false;
                 }
             }
         }
         return true;
     }
-    _cancel() {
-        // 팝업 닫기
-        const popup = this.closest('ox-popup');
-        if (popup && popup.close) {
-            popup.close();
-        }
+    async _deleteGrades() {
+        this.grist.deleteSelectedRecords(true);
     }
 };
 __decorate([
@@ -270,7 +153,11 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], KpiGradeEditor.prototype, "isDirty", void 0);
+], KpiGradeEditor.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], KpiGradeEditor.prototype, "grist", void 0);
 KpiGradeEditor = __decorate([
     customElement('kpi-grade-editor')
 ], KpiGradeEditor);