@things-factory/kpi 9.1.19 → 10.0.0-beta.2

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

@@ -7,7 +7,7 @@ import '@operato/data-grist/ox-record-creator.js';
 import './kpi-viz-editor.js';
 import './kpi-grade-editor.js';
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
-import { PageView, store } from '@operato/shell';
+import { PageView } from '@operato/shell';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
@@ -18,12 +18,11 @@ import { notify, openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
-import { connect } from 'pwa-helpers/connect-mixin';
 import gql from 'graphql-tag';
 import { KpiImporter } from './kpi-importer';
 import { KpiGradeEditor } from './kpi-grade-editor';
 import { KpiVizEditor } from './kpi-viz-editor';
-let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next)(ScopedElementsMixin(PageView)))) {
+let KpiListPage = class KpiListPage extends p13n(localize(i18next)(ScopedElementsMixin(PageView))) {
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
@@ -36,53 +35,43 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         CommonGristStyles,
         CommonHeaderStyles,
         css `
-      :host {
-        display: flex;
+      :host {         display: flex;
 
         width: 100%;
 
         --grid-record-emphasized-background-color: #8b0000;
         --grid-record-emphasized-color: #ff6b6b;
-      }
+ }
 
-      ox-grist {
-        overflow-y: auto;
+      ox-grist {         overflow-y: auto;
         flex: 1;
-      }
+ }
 
-      ox-filters-form {
-        flex: 1;
-      }
+      ox-filters-form {         flex: 1;
+ }
     `
     ]; }
     static get scopedElements() {
-        return {
-            'kpi-importer': KpiImporter,
+        return { 'kpi-importer': KpiImporter,
             'kpi-grade-editor': KpiGradeEditor,
             'kpi-viz-editor': KpiVizEditor
         };
     }
     async getAvailableKpiMetricVariables(currentKpi) {
-        // Leaf KPI인 경우: kpi-metric을 변수로 사용
         if (!currentKpi || currentKpi.isLeaf) {
             if (this.availableVariablesLoaded) {
                 return this.availableVariables;
             }
-            const response = await client.query({
-                query: gql `
-          query {
-            kpiMetrics {
-              items {
-                name
+            const response = await client.query({ query: gql `
+          query {             kpiMetrics {               items {                 name
                 description
                 unit
-              }
-            }
-          }
+ }
+ }
+ }
         `
             });
-            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({
-                name: metric.name,
+            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({ name: metric.name,
                 description: metric.description,
                 type: 'kpi-metric',
                 unit: metric.unit
@@ -92,24 +81,18 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         }
         // 부모 KPI인 경우: 자식 KPI를 변수로 사용
         try {
-            const response = await client.query({
-                query: gql `
-          query ($id: String!) {
-            kpi(id: $id) {
-              children {
-                id
+            const response = await client.query({ query: gql `
+          query ($id: String!) {             kpi(id: $id) {               children {                 id
                 name
                 description
-              }
-            }
-          }
+ }
+ }
+ }
         `,
-                variables: {
-                    id: currentKpi.id
+                variables: { id: currentKpi.id
                 }
             });
-            return (response.data.kpi.children || []).map(childKpi => ({
-                name: childKpi.name,
+            return (response.data.kpi.children || []).map(childKpi => ({ name: childKpi.name,
                 description: childKpi.description,
                 type: 'child-kpi'
             }));
@@ -120,45 +103,35 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         }
     }
     get context() {
-        return {
-            title: i18next.t('title.kpi list'),
-            search: {
-                handler: (search) => {
+        return { title: i18next.t('title.kpi list'),
+            search: { handler: (search) => {
                     this.grist.searchText = search;
                 },
-                value: this.grist.searchText
-            },
-            filter: {
-                handler: () => {
+                value: this.grist.searchText },
+            filter: { handler: () => {
                     this.grist.toggleHeadroom();
                 }
             },
             help: 'kpi/kpi',
             actions: [
-                {
-                    title: this.hierarchicalView ? 'List View' : 'Tree View',
+                { title: this.hierarchicalView ? 'List View' : 'Tree View',
                     action: this._toggleHierarchicalView.bind(this),
                     icon: this.hierarchicalView ? 'list' : 'account_tree'
                 },
-                {
-                    title: i18next.t('button.save'),
+                { title: i18next.t('button.save'),
                     action: this._updateKpi.bind(this),
                     ...CommonButtonStyles.save
                 },
-                {
-                    title: i18next.t('button.delete'),
+                { title: i18next.t('button.delete'),
                     action: this._deleteKpi.bind(this),
                     ...CommonButtonStyles.delete
                 }
             ],
-            exportable: {
-                name: i18next.t('title.kpi list'),
+            exportable: { name: i18next.t('title.kpi list'),
                 data: this.exportHandler.bind(this)
             },
-            importable: {
-                handler: this.importHandler.bind(this)
-            }
-        };
+            importable: { handler: this.importHandler.bind(this)
+            } };
     }
     render() {
         const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID');
@@ -196,9 +169,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         this.fetchKpiMetrics();
     }
     async pageInitialized(lifecycle) {
-        this.gristConfig = {
-            list: {
-                fields: ['name', 'description'],
+        this.gristConfig = { list: { fields: ['name', 'description'],
                 details: [
                     'name',
                     'description',
@@ -221,19 +192,16 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                 { type: 'gutter', gutterName: 'sequence' },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
                 // KPI 실적값 계산 버튼 추가
-                {
-                    type: 'gutter',
+                { type: 'gutter',
                     gutterName: 'button',
                     icon: 'calculate',
                     title: '실적값 계산',
-                    handlers: {
-                        click: (columns, data, column, record, rowIndex) => {
+                    handlers: { click: (columns, data, column, record, rowIndex) => {
                             this._calculateKpiValue(record);
                         }
                     }
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'name',
                     header: '이름',
                     record: { editable: true },
@@ -241,66 +209,53 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                     sortable: true,
                     width: 120
                 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'description',
                     header: i18next.t('field.description'),
                     record: { editable: true },
                     filter: 'search',
                     width: 200
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'parent',
                     label: true,
                     header: '상위 KPI',
-                    record: {
-                        editable: true,
-                        options: {
-                            title: i18next.t('title.lookup KPI'),
+                    record: { editable: true,
+                        options: { title: i18next.t('title.lookup KPI'),
                             queryName: 'kpis',
-                            basicArgs: {
-                                filters: [{ name: 'isLeaf', operator: 'eq', value: false }]
+                            basicArgs: { filters: [{ name: 'isLeaf', operator: 'eq', value: false }]
                             }
                         }
                     },
                     width: 200
                 },
-                {
-                    type: 'boolean',
+                { type: 'boolean',
                     name: 'isLeaf',
                     header: '리프 KPI',
                     record: { editable: true },
                     width: 100
                 },
-                {
-                    type: 'formula',
+                { type: 'formula',
                     name: 'formula',
                     header: '산식',
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         availableVariables: async (value, column, record) => {
-                            // Leaf KPI인 경우: kpi-metric을 변수로 사용
                             if (!record || record.isLeaf) {
                                 return await this.getAvailableKpiMetricVariables(record);
                             }
                             // 부모 KPI인 경우: 자식 KPI를 변수로 사용
-                            return (record.children || []).map(child => ({
-                                name: child.name,
+                            return (record.children || []).map(child => ({ name: child.name,
                                 description: child.description || child.name,
                                 type: 'child-kpi',
                                 unit: ''
                             }));
                         }
                     },
-                    width: 320
-                },
-                {
-                    type: 'select',
+                    width: 320 },
+                { type: 'select',
                     name: 'periodType',
                     header: '계산주기',
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         options: [
                             { value: '', display: '' },
                             { value: 'DAY', display: '일' },
@@ -314,18 +269,14 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                     },
                     width: 80
                 },
-                {
-                    type: 'formula',
+                { type: 'formula',
                     name: 'scoreFormula',
                     header: '성과점수수식',
-                    record: {
-                        editable: true,
+                    record: { editable: true,
                         availableVariables: async (value, column, record) => {
-                            // leaf 이면 value를 사용
                             if (record.isLeaf) {
                                 return [
-                                    {
-                                        name: 'value',
+                                    { name: 'value',
                                         description: 'KPI 실적값',
                                         type: 'kpi-value',
                                         unit: ''
@@ -333,8 +284,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 ];
                             }
                             // 부모 이면 자식 KPI들을 변수로 사용
-                            return record.children.map(child => ({
-                                name: child.name,
+                            return record.children.map(child => ({ name: child.name,
                                 description: child.description || child.name,
                                 type: 'kpi-score',
                                 unit: ''
@@ -342,8 +292,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                         },
                         includeDefaultFunctions: false,
                         availableFunctions: [
-                            {
-                                name: 'INTEGRATE()',
+                            { name: 'INTEGRATE()',
                                 description: '수치 적분',
                                 template: 'INTEGRATE({func}, {a}, {b}, {n})',
                                 syntax: 'INTEGRATE(func, a, b, n)',
@@ -352,8 +301,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '사다리꼴 적분법을 사용하여 수치 적분을 계산합니다.',
                                 examples: ['INTEGRATE(x => x*x, 0, 1, 1000)', 'INTEGRATE([효율성], 0, 1)']
                             },
-                            {
-                                name: 'BETA_FUNCTION()',
+                            { name: 'BETA_FUNCTION()',
                                 description: '베타 함수',
                                 template: 'BETA_FUNCTION({x}, {alpha}, {beta})',
                                 syntax: 'BETA_FUNCTION(x, alpha, beta)',
@@ -362,8 +310,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '베타 분포 함수를 계산합니다. t^(α-1) × (1-t)^(β-1)',
                                 examples: ['BETA_FUNCTION(0.5, 2, 3)', 'BETA_FUNCTION([품질지수], 3, 2)']
                             },
-                            {
-                                name: 'INCOMPLETE_BETA()',
+                            { name: 'INCOMPLETE_BETA()',
                                 description: '불완전 베타 함수',
                                 template: 'INCOMPLETE_BETA({x}, {alpha}, {beta})',
                                 syntax: 'INCOMPLETE_BETA(x, alpha, beta)',
@@ -372,8 +319,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '불완전 베타 함수를 수치 적분으로 계산합니다.',
                                 examples: ['INCOMPLETE_BETA(0.7, 2, 3)', 'INCOMPLETE_BETA([목표달성률]/100, 2, 3)']
                             },
-                            {
-                                name: 'COMPLETE_BETA()',
+                            { name: 'COMPLETE_BETA()',
                                 description: '완전 베타 함수',
                                 template: 'COMPLETE_BETA({alpha}, {beta})',
                                 syntax: 'COMPLETE_BETA(alpha, beta)',
@@ -382,8 +328,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '완전 베타 함수 B(α,β)를 계산합니다.',
                                 examples: ['COMPLETE_BETA(2, 3)', 'COMPLETE_BETA(3, 2)']
                             },
-                            {
-                                name: 'PERFORMANCE_INDEX()',
+                            { name: 'PERFORMANCE_INDEX()',
                                 description: '성과 지수',
                                 template: 'PERFORMANCE_INDEX({x}, {alpha1}, {beta1}, {alpha2}, {beta2})',
                                 syntax: 'PERFORMANCE_INDEX(x, alpha1, beta1, alpha2, beta2)',
@@ -396,8 +341,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '성과 지수를 계산합니다: 1 - (불완전 베타 / 완전 베타)',
                                 examples: ['PERFORMANCE_INDEX(0.8, 2, 3, 2, 3)', 'PERFORMANCE_INDEX([성과점수]/100, 2, 3, 2, 3)']
                             },
-                            {
-                                name: 'EXP()',
+                            { name: 'EXP()',
                                 description: '지수 함수',
                                 template: 'EXP({x})',
                                 syntax: 'EXP(x)',
@@ -406,8 +350,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '자연상수 e의 x제곱을 계산합니다.',
                                 examples: ['EXP(1)', 'EXP([효율성])']
                             },
-                            {
-                                name: 'LOG()',
+                            { name: 'LOG()',
                                 description: '자연 로그',
                                 template: 'LOG({x})',
                                 syntax: 'LOG(x)',
@@ -416,8 +359,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '자연 로그 ln(x)를 계산합니다.',
                                 examples: ['LOG(2.718)', 'LOG([성과점수])']
                             },
-                            {
-                                name: 'POW()',
+                            { name: 'POW()',
                                 description: '거듭제곱',
                                 template: 'POW({x}, {y})',
                                 syntax: 'POW(x, y)',
@@ -426,8 +368,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: 'x의 y제곱을 계산합니다.',
                                 examples: ['POW(2, 3)', 'POW([효율성], 2)']
                             },
-                            {
-                                name: 'EXPONENTIAL_DECAY()',
+                            { name: 'EXPONENTIAL_DECAY()',
                                 description: '지수 감쇠',
                                 template: 'EXPONENTIAL_DECAY({value}, {scale}, {power})',
                                 syntax: 'EXPONENTIAL_DECAY(value, scale, power)',
@@ -436,16 +377,12 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                                 help: '지수 감쇠 함수 exp(-(value/scale)^power)를 계산합니다.',
                                 examples: ['EXPONENTIAL_DECAY(50, 100, 2)', 'EXPONENTIAL_DECAY([목표달성률], 50, 2)']
                             }
-                        ]
-                    },
-                    width: 200
-                },
-                {
-                    type: 'string',
+                        ] },
+                    width: 200 },
+                { type: 'string',
                     name: 'grades',
                     header: '성과지수 Lookup',
-                    record: {
-                        editable: false,
+                    record: { editable: false,
                         renderer: (v, c, r) => {
                             if (r.grades && r.grades.length > 0) {
                                 return html `<span style="color: #4caf50; cursor: pointer;" @click=${() => this._editGrades(r)}>
@@ -461,8 +398,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                     },
                     width: 150
                 },
-                {
-                    type: 'number',
+                { type: 'number',
                     name: 'weight',
                     header: '가중치',
                     record: { editable: true },
@@ -470,8 +406,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                     sortable: true,
                     width: 80
                 },
-                {
-                    type: 'checkbox',
+                { type: 'checkbox',
                     name: 'active',
                     label: true,
                     header: i18next.t('field.active'),
@@ -481,13 +416,11 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                     width: 60
                 },
                 { type: 'string', name: 'state', header: '상태', record: { editable: false }, width: 100 },
-                {
-                    type: 'string',
+                { type: 'string',
                     name: 'vizType',
                     hidden: true,
                     header: '시각화 설정',
-                    record: {
-                        editable: false,
+                    record: { editable: false,
                         renderer: (v, c, r) => {
                             const vizType = r.vizType || 'CARD';
                             const vizMeta = r.vizMeta || {};
@@ -510,23 +443,20 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                 { type: 'timezone', name: 'timezone', header: '타임존', record: { editable: true }, width: 120 },
                 { type: 'number', name: 'version', header: '버전', record: { editable: false }, width: 80 },
                 { type: 'datetime', name: 'createdAt', header: '생성일', record: { editable: false }, width: 180 },
-                {
-                    type: 'datetime',
+                { type: 'datetime',
                     name: 'updatedAt',
                     header: i18next.t('field.updated_at'),
                     record: { editable: false },
                     sortable: true,
                     width: 180
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'creator',
                     header: '생성자',
                     record: { editable: false, renderer: (v, c, r) => r.creator?.name },
                     width: 120
                 },
-                {
-                    type: 'resource-object',
+                { type: 'resource-object',
                     name: 'updater',
                     header: i18next.t('field.updater'),
                     record: { editable: false, renderer: (v, c, r) => r.updater?.name },
@@ -535,30 +465,22 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                 },
                 { type: 'string', name: 'thumbnail', header: '썸네일', record: { editable: false }, width: 120 }
             ],
-            rows: {
-                appendable: false,
-                selectable: {
-                    multiple: true
+            rows: { appendable: false,
+                selectable: { multiple: true
                 }
             },
-            sorters: [{ name: 'name' }]
-        };
+            sorters: [{ name: 'name' }] };
     }
     async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            // do something here when this page just became as active
+        if (this.active) { // do something here when this page just became as active
         }
     }
     async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
         if (this.hierarchicalView) {
             return this.fetchHierarchicalData();
         }
-        const response = await client.query({
-            query: gql `
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: kpis(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
+        const response = await client.query({ query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: kpis(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
               name
               description
               active
@@ -573,59 +495,48 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
               scheduleId
               timezone
               version
-              parent {
-                id
+              parent {                 id
                 name
-              }
-              children {
-                id
+ }
+              children {                 id
                 name
                 description
-              }
+ }
               isLeaf
-              updater {
-                id
+              updater {                 id
                 name
-              }
+ }
               updatedAt
-              creator {
-                id
+              creator {                 id
                 name
-              }
+ }
               createdAt
-            }
+ }
             total
-          }
-        }
+ }
+ }
       `,
-            variables: {
-                filters,
+            variables: { filters,
                 pagination: { page, limit },
                 sortings
             }
         });
-        return {
-            total: response.data.responses.total || 0,
+        return { total: response.data.responses.total || 0,
             records: response.data.responses.items || []
         };
     }
     async fetchKpiMetrics() {
-        const response = await client.query({
-            query: gql `
-        query {
-          kpiMetrics {
-            items {
-              name
+        const response = await client.query({ query: gql `
+        query {           kpiMetrics {             items {               name
               description
               unit
-            }
-          }
-        }
+ }
+ }
+ }
       `
         });
         if (!response.errors) {
-            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({
-                name: metric.name,
+            this.availableVariables = (response.data.kpiMetrics.items || []).map(metric => ({ name: metric.name,
                 description: metric.description,
                 type: 'kpi-metric',
                 unit: metric.unit
@@ -633,28 +544,23 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         }
     }
     async _deleteKpi() {
-        if (await OxPrompt.open({
-            title: i18next.t('text.are_you_sure'),
+        if (await OxPrompt.open({ title: i18next.t('text.are_you_sure'),
             text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
             confirmButton: { text: i18next.t('button.confirm') },
             cancelButton: { text: i18next.t('button.cancel') }
         })) {
             const ids = this.grist.selected.map(record => record.id);
             if (ids && ids.length > 0) {
-                const response = await client.mutate({
-                    mutation: gql `
-            mutation ($ids: [String!]!) {
-              deleteKpis(ids: $ids)
-            }
+                const response = await client.mutate({ mutation: gql `
+            mutation ($ids: [String!]!) {               deleteKpis(ids: $ids)
+ }
           `,
-                    variables: {
-                        ids
+                    variables: { ids
                     }
                 });
                 if (!response.errors) {
                     this.grist.fetch();
-                    notify({
-                        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+                    notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
                     });
                 }
             }
@@ -672,16 +578,12 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
                 patchField.cuFlag = patch.__dirty__;
                 return patchField;
             });
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($patches: [KpiPatch!]!) {
-            updateMultipleKpi(patches: $patches) {
-              name
-            }
-          }
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [KpiPatch!]!) {             updateMultipleKpi(patches: $patches) {               name
+ }
+ }
         `,
-                variables: {
-                    patches
+                variables: { patches
                 }
             });
             if (!response.errors) {
@@ -691,26 +593,19 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
     }
     async creationCallback(kpi) {
         try {
-            const response = await client.query({
-                query: gql `
-          mutation ($kpi: NewKpi!) {
-            createKpi(kpi: $kpi) {
-              id
-            }
-          }
+            const response = await client.query({ query: gql `
+          mutation ($kpi: NewKpi!) {             createKpi(kpi: $kpi) {               id
+ }
+ }
         `,
-                variables: {
-                    kpi
+                variables: { kpi
                 },
-                context: {
-                    hasUpload: true
+                context: { hasUpload: true
                 }
             });
             if (!response.errors) {
                 this.grist.fetch();
-                document.dispatchEvent(new CustomEvent('notify', {
-                    detail: {
-                        message: i18next.t('text.data_created_successfully')
+                document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_created_successfully')
                     }
                 }));
             }
@@ -718,9 +613,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         }
         catch (ex) {
             console.error(ex);
-            document.dispatchEvent(new CustomEvent('notify', {
-                detail: {
-                    type: 'error',
+            document.dispatchEvent(new CustomEvent('notify', { detail: { type: 'error',
                     message: i18next.t('text.error')
                 }
             }));
@@ -747,8 +640,7 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
             this.grist.fetch();
         }}
         ></kpi-importer>
-      `, {
-            backdrop: true,
+      `, { backdrop: true,
             size: 'large',
             title: i18next.t('title.import kpi')
         });
@@ -758,13 +650,11 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
     }
     async _editGrades(kpi) {
         if (!kpi.id) {
-            notify({
-                message: 'KPI를 먼저 저장한 후에 등급 설정을 할 수 있습니다.'
+            notify({ message: 'KPI를 먼저 저장한 후에 등급 설정을 할 수 있습니다.'
             });
             return;
         }
-        const popup = await openPopup(html ` <kpi-grade-editor .kpi=${kpi}></kpi-grade-editor> `, {
-            title: `${kpi.name} - 등급 설정`,
+        const popup = await openPopup(html ` <kpi-grade-editor .kpi=${kpi}></kpi-grade-editor> `, { title: `${kpi.name} - 등급 설정`,
             size: 'large'
         });
         popup.onclosed = () => {
@@ -778,57 +668,46 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
           .onSave=${(vizType, vizMeta) => this._onVizUpdated(kpi.id, vizType, vizMeta)}
           .onCancel=${() => popup.close()}
         ></kpi-viz-editor>
-      `, {
-            title: `${kpi.name} - 시각화 설정`,
+      `, { title: `${kpi.name} - 시각화 설정`,
             size: 'large'
         });
     }
     async _onVizUpdated(kpiId, vizType, vizMeta) {
         try {
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($id: String!, $patch: KpiPatch!) {
-            updateKpi(id: $id, patch: $patch) {
-              id
+            const response = await client.mutate({ mutation: gql `
+          mutation ($id: String!, $patch: KpiPatch!) {             updateKpi(id: $id, patch: $patch) {               id
               name
               vizType
               vizMeta
-            }
-          }
+ }
+ }
         `,
-                variables: {
-                    id: kpiId,
+                variables: { id: kpiId,
                     patch: { vizType, vizMeta }
                 }
             });
             if (!response.errors) {
                 this.grist.fetch();
-                notify({
-                    message: '시각화 설정이 성공적으로 업데이트되었습니다.'
+                notify({ message: '시각화 설정이 성공적으로 업데이트되었습니다.'
                 });
             }
         }
         catch (error) {
-            notify({
-                message: '시각화 설정 업데이트 중 오류가 발생했습니다.'
+            notify({ message: '시각화 설정 업데이트 중 오류가 발생했습니다.'
             });
         }
     }
     async _calculateKpiValue(kpi) {
         try {
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($kpiId: String!) {
-            calculateKpiValue(kpiId: $kpiId) {
-              id
+            const response = await client.mutate({ mutation: gql `
+          mutation ($kpiId: String!) {             calculateKpiValue(kpiId: $kpiId) {               id
               value
               valueDate
               org
-            }
-          }
+ }
+ }
         `,
-                variables: {
-                    kpiId: kpi.id
+                variables: { kpiId: kpi.id
                 }
             });
             if (!response.errors) {
@@ -845,11 +724,8 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
         this.grist.fetch();
     }
     async fetchHierarchicalData() {
-        const response = await client.query({
-            query: gql `
-        query {
-          kpiTree {
-            id
+        const response = await client.query({ query: gql `
+        query {           kpiTree {             id
             name
             description
             active
@@ -864,60 +740,52 @@ let KpiListPage = class KpiListPage extends connect(store)(p13n(localize(i18next
             scheduleId
             timezone
             version
-            parent {
-              id
+            parent {               id
               name
-            }
-            children {
-              id
+ }
+            children {               id
               name
               description
               active
               isLeaf
               weight
-              children {
-                id
+              children {                 id
                 name
                 description
                 active
                 isLeaf
                 weight
-                children {
-                  id
+                children {                   id
                   name
                   description
                   active
                   isLeaf
                   weight
-                }
-              }
-            }
+ }
+ }
+ }
             isLeaf
-            updater {
-              id
+            updater {               id
               name
-            }
+ }
             updatedAt
-            creator {
-              id
+            creator {               id
               name
-            }
+ }
             createdAt
-          }
-        }
+ }
+ }
       `
         });
         const flattenedRecords = this.flattenTreeData(response.data.kpiTree);
-        return {
-            total: flattenedRecords.length,
+        return { total: flattenedRecords.length,
             records: flattenedRecords
         };
     }
     flattenTreeData(treeData, level = 0) {
         const flattened = [];
         for (const item of treeData) {
-            const flattenedItem = {
-                ...item,
+            const flattenedItem = { ...item,
                 __level: level,
                 __hasChildren: item.children && item.children.length > 0,
                 __expanded: true