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

package/dist-client/pages/kpi-metric-value/kpi-metric-value-manual-entry-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-metric-value-manual-entry-page.js","sourceRoot":"","sources":["../../../client/pages/kpi-metric-value/kpi-metric-value-manual-entry-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './kpi-metric-value-manual-entry-form.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\nimport { DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup, notify } from '@operato/layout'\nimport { PageView, store } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport gql from 'graphql-tag'\n\n@customElement('kpi-metric-value-manual-entry-page')\nexport class KpiMetricValueManualEntryPage extends connect(store)(localize(i18next)(PageView)) {\n  static styles = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        width: 100%;\n      }\n      ox-grist {\n        overflow-y: auto;\n        flex: 1;\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: i18next.t('title.kpi metric value manual entry'),\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist.searchText\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      },\n      help: 'kpi/kpi-metric-value'\n    }\n  }\n\n  @state() private gristConfig: any\n  @state() private metrics: any[] = []\n  @query('ox-grist') private grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist mode=\"CARD\" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>\n    `\n  }\n\n  async pageInitialized() {\n    this.gristConfig = {\n      list: {\n        fields: ['name', 'description'],\n        details: ['periodType', 'active']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'note_alt',\n          iconOnly: false,\n          width: 96,\n          fixed: true,\n          title: () => i18next.t('button.enter-kpi-metric-value'),\n          handlers: {\n            click: (columns, data, column, record, rowIndex) => {\n              this.openManualEntryForm(record)\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          filter: 'search',\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 200\n        },\n        {\n          type: 'select',\n          name: 'periodType',\n          header: '주기',\n          record: {\n            editable: true,\n            options: [\n              { value: '', display: '' },\n              { value: 'DAY', display: '일' },\n              { value: 'WEEK', display: '주' },\n              { value: 'MONTH', display: '월' },\n              { value: 'QUARTER', display: '분기' },\n              { value: 'YEAR', display: '년' },\n              { value: 'RANGE', display: '범위' },\n              { value: 'ALLTIME', display: '전체' }\n            ]\n          },\n          width: 80\n        },\n        {\n          type: 'checkbox',\n          name: 'active',\n          label: true,\n          header: 'Active',\n          record: { editable: false },\n          width: 60\n        }\n      ],\n      rows: {\n        appendable: false,\n        editable: false,\n        selectable: {\n          multiple: false\n        },\n        classifier: function (record, rowIndex) {}\n      },\n      sorters: [\n        {\n          name: 'name'\n        }\n      ]\n    }\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          responses: kpiMetrics(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              periodType\n              active\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters,\n        pagination: { page, limit },\n        sortings\n      }\n    })\n    return {\n      total: response.data.responses.total || 0,\n      records: response.data.responses.items || []\n    }\n  }\n\n  openManualEntryForm(metric) {\n    openPopup(\n      html`\n        <kpi-metric-value-manual-entry-form\n          .metric=${metric}\n          @saved=${() => this.grist.fetch()}\n        ></kpi-metric-value-manual-entry-form>\n      `,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: `${metric.name} - Metric 값 수동 입력`\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"kpi-metric-value-manual-entry-page.js","sourceRoot":"","sources":["../../../client/pages/kpi-metric-value/kpi-metric-value-manual-entry-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './kpi-metric-value-manual-entry-form.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup, notify } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport gql from 'graphql-tag'\n\n@customElement('kpi-metric-value-manual-entry-page')\nexport class KpiMetricValueManualEntryPage extends localize(i18next)(PageView) {   static styles = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {         display: flex;\n        width: 100%;\n }\n      ox-grist {         overflow-y: auto;\n        flex: 1;\n }\n    `\n  ]\n\n  get context() {     return {       title: i18next.t('title.kpi metric value manual entry'),\n      search: {         handler: (search: string) => {           this.grist.searchText = search\n },\n        value: this.grist.searchText\n },\n      filter: {         handler: () => {           this.grist.toggleHeadroom()\n }\n },\n      help: 'kpi/kpi-metric-value'\n }\n }\n\n  @state() private gristConfig: any\n  @state() private metrics: any[] = []\n  @query('ox-grist') private grist!: DataGrist\n\n  render() {     return html`\n      <ox-grist mode=\"CARD\" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>\n    `\n }\n\n  async pageInitialized() {     this.gristConfig = {       list: {         fields: ['name', 'description'],\n        details: ['periodType', 'active']\n },\n      columns: [\n        {           type: 'gutter',\n          gutterName: 'button',\n          icon: 'note_alt',\n          iconOnly: false,\n          width: 96,\n          fixed: true,\n          title: () => i18next.t('button.enter-kpi-metric-value'),\n          handlers: {             click: (columns, data, column, record, rowIndex) => {               this.openManualEntryForm(record)\n }\n }\n },\n        {           type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          filter: 'search',\n          sortable: true,\n          width: 150\n },\n        {           type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 200\n },\n        {           type: 'select',\n          name: 'periodType',\n          header: '주기',\n          record: {             editable: true,\n            options: [\n              { value: '', display: '' },\n              { value: 'DAY', display: '일' },\n              { value: 'WEEK', display: '주' },\n              { value: 'MONTH', display: '월' },\n              { value: 'QUARTER', display: '분기' },\n              { value: 'YEAR', display: '년' },\n              { value: 'RANGE', display: '범위' },\n              { value: 'ALLTIME', display: '전체' }\n            ]\n },\n          width: 80\n },\n        {           type: 'checkbox',\n          name: 'active',\n          label: true,\n          header: 'Active',\n          record: { editable: false },\n          width: 60\n }\n      ],\n      rows: {         appendable: false,\n        editable: false,\n        selectable: {           multiple: false\n },\n        classifier: function (record, rowIndex) {}\n },\n      sorters: [\n        {           name: 'name'\n }\n      ]\n }\n }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {     const response = await client.query({       query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: kpiMetrics(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id\n              name\n              description\n              periodType\n              active\n }\n            total\n }\n }\n      `,\n      variables: {         filters,\n        pagination: { page, limit },\n        sortings\n }\n })\n    return {       total: response.data.responses.total || 0,\n      records: response.data.responses.items || []\n }\n }\n\n  openManualEntryForm(metric) {     openPopup(\n      html`\n        <kpi-metric-value-manual-entry-form\n          .metric=${metric}\n          @saved=${() => this.grist.fetch()}\n        ></kpi-metric-value-manual-entry-form>\n      `,\n      {         backdrop: true,\n        size: 'medium',\n        title: `${metric.name} - Metric 값 수동 입력`\n }\n    )\n }\n}\n"]}

package/dist-client/pages/kpi-statistic/kpi-statistic-editor-page.d.ts

@@ -2,13 +2,7 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
 import '@material/web/textfield/outlined-text-field.js';
 import { PageView } from '@operato/shell';
-declare const KpiStatisticEditorPage_base: (new (...args: any[]) => {
-    _storeUnsubscribe: import("redux").Unsubscribe;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    stateChanged(_state: unknown): void;
-    readonly isConnected: boolean;
-}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+declare const KpiStatisticEditorPage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 export declare class KpiStatisticEditorPage extends KpiStatisticEditorPage_base {
     static styles: import("lit").CSSResult[];
     periodType: string;

package/dist-client/pages/kpi-statistic/kpi-statistic-editor-page.js

@@ -3,16 +3,15 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/elevated-button.js';
 import '@material/web/textfield/outlined-text-field.js';
 import { CommonButtonStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
-import { PageView, store } from '@operato/shell';
+import { PageView } from '@operato/shell';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
-import { connect } from 'pwa-helpers/connect-mixin';
 import gql from 'graphql-tag';
-let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+let KpiStatisticEditorPage = class KpiStatisticEditorPage extends localize(i18next)(ScopedElementsMixin(PageView)) {
     constructor() {
         super(...arguments);
         this.periodType = 'MONTH';
@@ -45,45 +44,39 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         CommonHeaderStyles,
         ScrollbarStyles,
         css `
-      :host {
-        display: flex;
+      :host {         display: flex;
         flex-direction: column;
         padding: 20px;
         overflow-x: auto;
-      }
+ }
 
-      .header {
-        display: flex;
+      .header {         display: flex;
         gap: 16px;
         align-items: center;
         margin-bottom: 20px;
         padding: 16px;
         background: var(--md-sys-color-surface-container);
         border-radius: 8px;
-      }
+ }
 
-      .controls {
-        display: flex;
+      .controls {         display: flex;
         gap: 12px;
         align-items: center;
         flex-wrap: wrap;
-      }
+ }
 
-      .table-container {
-        flex: 1;
+      .table-container {         flex: 1;
         overflow: auto;
         border: 1px solid var(--md-sys-color-outline);
         border-radius: 8px;
-      }
+ }
 
-      table {
-        width: 100%;
+      table {         width: 100%;
         border-collapse: collapse;
         min-width: max-content;
-      }
+ }
 
-      th {
-        background: var(--md-sys-color-surface-container-low);
+      th {         background: var(--md-sys-color-surface-container-low);
         font-weight: 500;
         padding: 8px 12px;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -91,161 +84,137 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         height: 60px;
         vertical-align: middle;
         text-align: center;
-      }
+ }
 
-      td {
-        padding: 8px 12px;
+      td {         padding: 8px 12px;
         border: 1px solid var(--md-sys-color-outline-variant);
         min-width: 120px;
         height: 60px;
         text-align: center;
         vertical-align: middle;
-      }
+ }
 
-      .kpi-header {
-        position: sticky;
+      .kpi-header {         position: sticky;
         left: 0;
         top: 0;
         z-index: 3;
         min-width: 200px;
         text-align: left;
-      }
+ }
 
-      .field-header {
-        position: sticky;
+      .field-header {         position: sticky;
         left: 0;
         top: 0;
         z-index: 2;
         min-width: 200px;
         text-align: center;
-      }
+ }
 
-      .kpi-name {
-        position: sticky;
+      .kpi-name {         position: sticky;
         left: 0;
         background: var(--md-sys-color-surface);
         font-weight: 500;
         min-width: 200px;
         text-align: left;
         z-index: 2;
-      }
+ }
 
-      tr:hover {
-        background: var(--md-sys-color-surface-container-high);
-      }
+      tr:hover {         background: var(--md-sys-color-surface-container-high);
+ }
 
-      td.editable-cell {
-        cursor: pointer;
+      td.editable-cell {         cursor: pointer;
         background: var(--md-sys-color-primary-container);
         color: var(--md-sys-color-on-primary-container);
-      }
+ }
 
-      td.editable-cell:hover {
-        background: var(--md-sys-color-primary-container-high);
-      }
+      td.editable-cell:hover {         background: var(--md-sys-color-primary-container-high);
+ }
 
-      td.highlighted-cell {
-        background: var(--md-sys-color-secondary-container);
+      td.highlighted-cell {         background: var(--md-sys-color-secondary-container);
         color: var(--md-sys-color-on-secondary-container);
         font-weight: 500;
-      }
+ }
 
-      td.highlighted-cell:hover {
-        background: var(--md-sys-color-secondary-container-high);
-      }
+      td.highlighted-cell:hover {         background: var(--md-sys-color-secondary-container-high);
+ }
 
-      td.disabled-cell {
-        background: var(--md-sys-color-surface-container);
+      td.disabled-cell {         background: var(--md-sys-color-surface-container);
         color: var(--md-sys-color-on-surface-variant);
         cursor: not-allowed;
-      }
+ }
 
-      .value-input {
-        width: 100%;
+      .value-input {         width: 100%;
         text-align: center;
         border: none;
         background: transparent;
         color: inherit;
         font-size: 12px;
         padding: 2px;
-      }
+ }
 
-      .value-input:focus {
-        outline: 2px solid var(--md-sys-color-primary);
+      .value-input:focus {         outline: 2px solid var(--md-sys-color-primary);
         border-radius: 4px;
-      }
+ }
 
-      .period-badge {
-        font-size: 10px;
+      .period-badge {         font-size: 10px;
         padding: 2px 6px;
         border-radius: 4px;
         background: var(--md-sys-color-tertiary-container);
         color: var(--md-sys-color-on-tertiary-container);
         margin-left: 8px;
-      }
+ }
 
-      .loading {
-        display: flex;
+      .loading {         display: flex;
         justify-content: center;
         align-items: center;
         height: 200px;
         color: var(--md-sys-color-on-surface-variant);
-      }
+ }
 
-      .error {
-        color: var(--md-sys-color-error);
+      .error {         color: var(--md-sys-color-error);
         padding: 16px;
         text-align: center;
-      }
+ }
 
-      .legend {
-        display: flex;
+      .legend {         display: flex;
         gap: 16px;
         margin-top: 16px;
         font-size: 12px;
-      }
+ }
 
-      .legend-item {
-        display: flex;
+      .legend-item {         display: flex;
         align-items: center;
         gap: 4px;
-      }
+ }
 
-      .legend-color {
-        width: 16px;
+      .legend-color {         width: 16px;
         height: 16px;
         border-radius: 2px;
-      }
+ }
 
-      .field-group {
-        display: flex;
+      .field-group {         display: flex;
         flex-direction: column;
         gap: 4px;
-      }
+ }
 
-      .field-name {
-        font-size: 10px;
+      .field-name {         font-size: 10px;
         color: var(--md-sys-color-on-surface-variant);
         font-weight: 500;
-      }
+ }
 
-      .field-value {
-        font-size: 12px;
+      .field-value {         font-size: 12px;
         font-weight: 500;
-      }
+ }
     `
     ]; }
     get context() {
-        return {
-            title: i18next.t('title.kpi statistic editor'),
+        return { title: i18next.t('title.kpi statistic editor'),
             actions: [
-                {
-                    title: i18next.t('button.save'),
+                { title: i18next.t('button.save'),
                     action: this._saveStatistics.bind(this),
                     ...CommonButtonStyles.save
                 },
-                {
-                    title: i18next.t('button.cancel'),
+                { title: i18next.t('button.cancel'),
                     action: this._cancel.bind(this),
                     ...CommonButtonStyles.cancel
                 }
@@ -366,11 +335,9 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         return 'editable-cell';
     }
     _isFieldEditable(fieldName) {
-        // 모든 필드를 편집 가능하게 설정 (필요에 따라 제한 가능)
         return true;
     }
     _isFieldHighlighted(fieldName) {
-        // 중요 필드들을 하이라이트
         const importantFields = ['count', 'mean', 'median', 'minimum', 'maximum', 'standardDeviation'];
         return importantFields.includes(fieldName);
     }
@@ -416,41 +383,29 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         }
         this.loading = true;
         this.error = '';
-        try {
-            // KPI 목록 조회
-            const kpisResponse = await client.query({
-                query: gql `
-          query ($filters: [Filter!]) {
-            kpis(filters: $filters) {
-              items {
-                id
+        try { // KPI 목록 조회
+            const kpisResponse = await client.query({ query: gql `
+          query ($filters: [Filter!]) {             kpis(filters: $filters) {               items {                 id
                 name
                 periodType
                 active
-                category: parent {
-                  id
+                category: parent {                   id
                   name
-                }
-              }
+ }
+ }
               total
-            }
-          }
+ }
+ }
         `,
-                variables: {
-                    filters: [{ name: 'active', operator: 'eq', value: true }]
+                variables: { filters: [{ name: 'active', operator: 'eq', value: true }]
                 }
             });
             // 기존 KPI Statistic 데이터 조회
-            const statisticsResponse = await client.query({
-                query: gql `
-          query ($filters: [Filter!]) {
-            kpiStatistics(filters: $filters) {
-              items {
-                id
-                kpi {
-                  id
+            const statisticsResponse = await client.query({ query: gql `
+          query ($filters: [Filter!]) {             kpiStatistics(filters: $filters) {               items {                 id
+                kpi {                   id
                   name
-                }
+ }
                 valueDate
                 periodType
                 count
@@ -469,13 +424,12 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
                 upperFence
                 additionalStatistics
                 metadata
-              }
+ }
               total
-            }
-          }
+ }
+ }
         `,
-                variables: {
-                    filters: [
+                variables: { filters: [
                         { name: 'valueDate', operator: 'eq', value: this.valueDate },
                         { name: 'periodType', operator: 'eq', value: this.periodType }
                     ]
@@ -486,12 +440,10 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
             const filteredKpis = kpisResponse.data.kpis.items;
             console.log('모든 KPI 포함:', filteredKpis);
             console.log('필터링된 KPI:', filteredKpis);
-            this.kpis = filteredKpis.map((kpi) => ({
-                kpi: kpi,
+            this.kpis = filteredKpis.map((kpi) => ({ kpi: kpi,
                 valueDate: this.valueDate,
                 periodType: this.periodType,
-                statistics: {
-                    count: null,
+                statistics: { count: null,
                     sum: null,
                     range: null,
                     mean: null,
@@ -516,8 +468,7 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
                 const kpi = this.kpis.find(k => k.kpi.id === statistic.kpi.id); // KPI ID로 매칭
                 console.log(`통계 데이터 매핑: statistic.kpi.id=${statistic.kpi.id}, 찾은 KPI:`, kpi?.kpi.name || '없음');
                 if (kpi) {
-                    kpi.statistics = {
-                        count: statistic.count,
+                    kpi.statistics = { count: statistic.count,
                         sum: statistic.sum,
                         range: statistic.range,
                         mean: statistic.mean,
@@ -554,31 +505,24 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         try {
             const patches = [];
             this.kpis.forEach(kpi => {
-                // dirty 상태인 데이터만 처리
                 if (kpi.statistics.isDirty) {
                     const existingStatistic = this._findExistingStatistic(kpi.kpi.id);
-                    if (existingStatistic) {
-                        // 기존 데이터 업데이트
+                    if (existingStatistic) { // 기존 데이터 업데이트
                         const { isDirty, ...statisticsWithoutDirty } = kpi.statistics;
-                        patches.push({
-                            id: existingStatistic.id,
+                        patches.push({ id: existingStatistic.id,
                             ...statisticsWithoutDirty,
                             cuFlag: 'M'
                         });
                     }
-                    else {
-                        // 새로운 데이터 생성
+                    else { // 새로운 데이터 생성
                         const { isDirty, ...statisticsWithoutDirty } = kpi.statistics;
-                        patches.push({
-                            kpi: {
-                                id: kpi.kpi.id
+                        patches.push({ kpi: { id: kpi.kpi.id
                             },
                             valueDate: kpi.valueDate,
                             periodType: kpi.periodType,
                             ...statisticsWithoutDirty,
                             additionalStatistics: {},
-                            metadata: {
-                                calculationMethod: 'manual',
+                            metadata: { calculationMethod: 'manual',
                                 lastCalculated: new Date(),
                                 dataCount: kpi.statistics.count || 0
                             },
@@ -591,24 +535,19 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
                 notify({ message: '저장할 데이터가 없습니다.' });
                 return;
             }
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($patches: [KpiStatisticPatch!]!) {
-            updateMultipleKpiStatistic(patches: $patches) {
-              id
-              kpi {
-                id
+            const response = await client.mutate({ mutation: gql `
+          mutation ($patches: [KpiStatisticPatch!]!) {             updateMultipleKpiStatistic(patches: $patches) {               id
+              kpi {                 id
                 name
-              }
+ }
               valueDate
               periodType
-            }
-          }
+ }
+ }
         `,
                 variables: { patches }
             });
-            if (!response.errors) {
-                // 저장 후 dirty 상태 해제
+            if (!response.errors) { // 저장 후 dirty 상태 해제
                 this.kpis.forEach(kpi => {
                     kpi.statistics.isDirty = false;
                 });
@@ -669,7 +608,6 @@ let KpiStatisticEditorPage = class KpiStatisticEditorPage extends connect(store)
         this._loadData(); // 원본 데이터로 복원
     }
     async pageInitialized(lifecycle) {
-        // 기본값 설정 - 현재 날짜를 기준으로
         if (!this.targetDate) {
             this.targetDate = new Date().toLocaleDateString('sv-SE');
         }