npm - @things-factory/kpi - Versions diffs - 9.0.17 → 9.0.19 - Mend

@things-factory/kpi 9.0.17 → 9.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/dist-client/pages/kpi/kpi-viz-editor.js CHANGED Viewed

@@ -184,11 +184,13 @@ let KpiVizEditor = class KpiVizEditor extends localize(i18next)(LitElement) {
         this.requestUpdate();
     }
     _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':
                 return html `
@@ -202,22 +204,155 @@ let KpiVizEditor = 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 `
@@ -230,6 +365,65 @@ let KpiVizEditor = 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-viz-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kpi-viz-editor.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-viz-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/select/outlined-select.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { OxPopup } from '@operato/popup'\nimport gql from 'graphql-tag'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\nconst VIZ_TYPES = [\n { value: 'CARD', label: '카드', icon: 'dashboard' },\n { value: 'GAUGE', label: '게이지', icon: 'speed' },\n { value: 'PROGRESS', label: '진행률', icon: 'linear_scale' },\n { value: 'BAR', label: '막대 차트', icon: 'bar_chart' },\n { value: 'LINE', label: '선 차트', icon: 'show_chart' },\n { value: 'PIE', label: '파이 차트', icon: 'pie_chart' },\n { value: 'DONUT', label: '도넛 차트', icon: 'donut_large' },\n { value: 'RADAR', label: '레이더 차트', icon: 'radar' },\n { value: 'BULLET', label: '불릿 차트', icon: 'track_changes' },\n { value: 'THERMOMETER', label: '온도계', icon: 'thermostat' },\n { value: 'SPEEDOMETER', label: '속도계', icon: 'speed' },\n { value: 'ICON', label: '아이콘', icon: 'emoji_events' },\n { value: 'BADGE', label: '배지', icon: 'badge' },\n { value: 'TEXT', label: '텍스트', icon: 'text_fields' },\n { value: 'TABLE', label: '테이블', icon: 'table_chart' }\n]\n\n@customElement('kpi-viz-editor')\nexport class KpiVizEditor extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface, #f4f6fa);\n }\n\n .viz-editor {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n background: white;\n padding: 24px;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 500;\n color: #555;\n }\n\n .form-options {\n flex: 1;\n display: flex;\n flex-direction: row;\n }\n\n .viz-type-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .viz-type-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n }\n\n .viz-type-option:hover {\n border-color: #2196f3;\n background: #f5f9ff;\n }\n\n .viz-type-option.selected {\n border-color: #2196f3;\n background: #e3f2fd;\n }\n\n .viz-type-option md-icon {\n font-size: 24px;\n margin-bottom: 8px;\n color: #666;\n }\n\n .viz-type-option.selected md-icon {\n color: #2196f3;\n }\n\n .viz-type-option .label {\n font-size: 0.9rem;\n font-weight: 500;\n color: #333;\n }\n\n .viz-meta-section {\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n }\n\n .color-picker {\n display: flex;\n gap: 12px;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .color-input {\n width: 60px;\n height: 40px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .buttons {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n }\n\n .preview {\n flex: 1;\n margin: 30px 16px 16px 16px;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e9ecef;\n }\n\n .preview h4 {\n margin: 0 0 12px 0;\n color: #495057;\n font-size: 0.95rem;\n }\n\n .footer span {\n font-size: 0.8em;\n color: var(--md-sys-color-on-surface);\n line-height: 1.5;\n padding: 10px;\n }\n `\n ]\n\n @property({ type: Object }) kpi: any = null\n @property({ type: String }) selectedVizType: string = 'CARD'\n @property({ type: Object }) vizMeta: any = {}\n @property({ type: Object }) onSave: Function = () => {}\n @property({ type: Object }) onCancel: Function = () => {}\n\n connectedCallback() {\n super.connectedCallback()\n if (this.kpi) {\n this.selectedVizType = this.kpi.vizType \|\| 'CARD'\n this.vizMeta = this.kpi.vizMeta \|\| {}\n }\n }\n\n _selectVizType(type: string) {\n this.selectedVizType = type\n this.requestUpdate()\n }\n\n _updateVizMeta(key: string, value: any) {\n this.vizMeta = { ...this.vizMeta, [key]: value }\n this.requestUpdate()\n }\n\n _renderPreview() {\n const kpiValue = this.kpi?.value?.value \|\| 75\n const targetValue = this.kpi?.targetValue \|\| 100\n const unit = this.kpi?.unit \|\| ''\n const color = this.vizMeta.color \|\| '#2196f3'\n const icon = this.vizMeta.icon \|\| 'trending_up'\n\n switch (this.selectedVizType) {\n case 'CARD':\n return html`\n <div\n style=\"display:flex;align-items:center;gap:12px;padding:16px;background:white;border-radius:8px;border:1px solid #e0e0e0;\"\n >\n <md-icon style=\"color:${color};font-size:32px;\">${icon}</md-icon>\n <div>\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};\">${kpiValue}${unit}</div>\n <div style=\"font-size:0.9rem;color:#666;\">목표: ${targetValue}${unit}</div>\n </div>\n </div>\n `\n case 'GAUGE':\n const percentage = Math.min((kpiValue / targetValue) * 100, 100)\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <div\n style=\"width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${percentage \n 3.6}deg, #e0e0e0 ${percentage 3.6}deg 360deg);margin:0 auto;position:relative;\"\n >\n <div\n style=\"position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:1.2rem;font-weight:bold;color:${color};\"\n >\n ${kpiValue}${unit}\n </div>\n </div>\n </div>\n `\n case 'PROGRESS':\n const progressPercentage = Math.min((kpiValue / targetValue) * 100, 100)\n return html`\n <div style=\"padding:16px;\">\n <div style=\"background:#e0e0e0;height:20px;border-radius:10px;overflow:hidden;\">\n <div style=\"background:${color};height:100%;width:${progressPercentage}%;transition:width 0.3s;\"></div>\n </div>\n <div style=\"text-align:center;margin-top:8px;font-weight:bold;color:${color};\">\n ${kpiValue}${unit} / ${targetValue}${unit}\n </div>\n </div>\n `\n case 'ICON':\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <md-icon style=\"color:${color};font-size:48px;\">${icon}</md-icon>\n <div style=\"font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;\">${kpiValue}${unit}</div>\n </div>\n `\n default:\n return html` <div style=\"padding:16px;text-align:center;color:#666;\">${this.selectedVizType} 미리보기</div> `\n }\n }\n\n render() {\n return html`\n <div class=\"viz-editor\">\n <div class=\"form-group\">\n <label>시각화 타입 선택</label>\n <div class=\"viz-type-grid\">\n ${VIZ_TYPES.map(\n type => html`\n <div\n class=\"viz-type-option ${this.selectedVizType === type.value ? 'selected' : ''}\"\n @click=${() => this._selectVizType(type.value)}\n >\n <md-icon>${type.icon}</md-icon>\n <div class=\"label\">${type.label}</div>\n </div>\n `\n )}\n </div>\n </div>\n\n <div class=\"form-options\">\n <div class=\"viz-meta-section\">\n <label>시각화 옵션</label>\n\n <div class=\"form-group\">\n <label>색상</label>\n <div class=\"color-picker\">\n <input\n type=\"color\"\n class=\"color-input\"\n .value=${this.vizMeta.color \|\| '#2196f3'}\n @change=${(e: any) => this._updateVizMeta('color', e.target.value)}\n />\n <md-outlined-text-field\n label=\"색상 코드\"\n .value=${this.vizMeta.color \|\| '#2196f3'}\n @change=${(e: any) => this._updateVizMeta('color', e.target.value)}\n ></md-outlined-text-field>\n </div>\n </div>\n\n <div class=\"form-group\">\n <label>아이콘</label>\n <md-outlined-text-field\n label=\"Material Icons 이름\"\n .value=${this.vizMeta.icon \|\| 'trending_up'}\n @change=${(e: any) => this._updateVizMeta('icon', e.target.value)}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>최소값</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"최소값\"\n .value=${this.vizMeta.minValue \|\| 0}\n @change=${(e: any) => this._updateVizMeta('minValue', parseFloat(e.target.value))}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>최대값</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"최대값\"\n .value=${this.vizMeta.maxValue \|\| 100}\n @change=${(e: any) => this._updateVizMeta('maxValue', parseFloat(e.target.value))}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>소수점 자릿수</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"소수점 자릿수\"\n .value=${this.vizMeta.decimalPlaces \|\| 0}\n @change=${(e: any) => this._updateVizMeta('decimalPlaces', parseInt(e.target.value))}\n ></md-outlined-text-field>\n </div>\n </div>\n\n <div class=\"preview\">\n <h4>미리보기</h4>\n ${this._renderPreview()}\n </div>\n </div>\n </div>\n\n <div class=\"footer\">\n <div filler></div>\n <button type=\"button\" @click=${this.onCancel}><md-icon>cancel</md-icon>취소</button>\n <button type=\"button\" @click=${() => this.onSave(this.selectedVizType, this.vizMeta)} done>\n <md-icon>save</md-icon>저장\n </button>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"kpi-viz-editor.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-viz-editor.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAChD,OAAO,gDAAgD,CAAA;AACvD,OAAO,4BAA4B,CAAA;AAGnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIjD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAErE,MAAM,SAAS,GAAG;IAChB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE;IACjD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;IAC/C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE;IACzD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE;IACnD,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE;IACpD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE;IACnD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE;IACvD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE;IAClD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE;IAC1D,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE;IAC1D,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;IACrD,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE;IACrD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE;IAC9C,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE;CACtD,CAAA;AAGM,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxD;;QAyIuB,QAAG,GAAQ,IAAI,CAAA;QACf,oBAAe,GAAW,MAAM,CAAA;QAChC,YAAO,GAAQ,EAAE,CAAA;QACjB,WAAM,GAAa,GAAG,EAAE,GAAE,CAAC,CAAA;QAC3B,aAAQ,GAAa,GAAG,EAAE,GAAE,CAAC,CAAA;IAyX3D,CAAC;aArgBQ,WAAM,GAAG;QACd,kBAAkB;QAClB,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkIF;KACF,AAtIY,CAsIZ;IAQD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,MAAM,CAAA;YACjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAA;QACvC,CAAC;IACH,CAAC;IAED,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;QAC3B,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc,CAAC,GAAW,EAAE,KAAU;QACpC,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAA;QAChD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,CAAA;QAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,WAAW,IAAI,GAAG,CAAA;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,SAAS,CAAA;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,CAAA;QAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAA;QACtC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,GAAG,CAAA;QAExC,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;YAC7B,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA;;;;oCAIiB,KAAK,qBAAqB,IAAI;;oEAEE,KAAK,MAAM,QAAQ,GAAG,IAAI;8DAChC,WAAW,GAAG,IAAI;;;SAGvE,CAAA;YACH,KAAK,OAAO,CAAC,CAAC,CAAC;gBACb,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAA;gBACpD,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC/D,MAAM,CAAC,GAAG,EAAE,CAAA;gBACZ,MAAM,EAAE,GAAG,EAAE,CAAA;gBACb,MAAM,EAAE,GAAG,EAAE,CAAA;gBACb,MAAM,MAAM,GAAG,EAAE,GAAG,CAAC,CAAA;gBACrB,MAAM,MAAM,GAAG,EAAE,CAAA;gBACjB,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;gBACvD,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;gBACvD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,CAAA;gBAC/C,MAAM,OAAO,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC9C,MAAM,OAAO,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC9C,OAAO,IAAI,CAAA;;;;;sBAKG,MAAM,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,EAAE;;;;;;;sBAOjD,MAAM,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,IAAI;;0BAE7C,KAAK;;;;0BAIL,EAAE,SAAS,EAAE,SAAS,OAAO,SAAS,OAAO;;4BAE3C,EAAE,SAAS,EAAE;;yBAEhB,EAAE,QAAQ,EAAE,GAAG,EAAE,+CAA+C,KAAK;kBAC5E,KAAK,GAAG,IAAI;;;yBAGL,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,EAAE,qDAAqD,GAAG;yBAC7E,EAAE,GAAG,CAAC,QAAQ,EAAE,GAAG,EAAE,qDAAqD,GAAG;;;SAG7F,CAAA;YACH,CAAC;YACD,KAAK,aAAa,CAAC,CAAC,CAAC;gBACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAA;gBACpD,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC/D,MAAM,CAAC,GAAG,EAAE,CAAA;gBACZ,MAAM,EAAE,GAAG,EAAE,CAAA;gBACb,MAAM,EAAE,GAAG,EAAE,CAAA;gBACb,MAAM,MAAM,GAAG,EAAE,GAAG,CAAC,CAAA;gBACrB,MAAM,MAAM,GAAG,EAAE,CAAA;gBACjB,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;gBACvD,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAA;gBACvD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,CAAA;gBAC/C,MAAM,OAAO,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC9C,MAAM,OAAO,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC9C,aAAa;gBACb,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;oBAC7C,MAAM,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;oBAC9C,MAAM,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;oBAC9C,MAAM,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;oBAC9C,MAAM,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;oBAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;oBACrD,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;oBAC9C,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;oBAClD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;gBAC9C,CAAC,CAAC,CAAA;gBACF,OAAO,IAAI,CAAA;;;;;sBAKG,MAAM,GAAG,EAAE,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE;;;;;;;sBAO3D,MAAM,GAAG,EAAE,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,GAAG,EAAE,IAAI,IAAI;;0BAEvD,KAAK;;;;gBAIf,KAAK,CAAC,GAAG,CACT,CAAC,CAAC,EAAE,CACF,IAAI,CAAA;0BACI,CAAC,CAAC,GAAG,GAAG,EAAE;0BACV,CAAC,CAAC,GAAG;0BACL,CAAC,CAAC,GAAG,GAAG,EAAE;0BACV,CAAC,CAAC,GAAG;;;qBAGV,CACN;;gBAEC,KAAK,CAAC,GAAG,CACT,CAAC,CAAC,EAAE,CACF,IAAI,CAAA;yBACG,CAAC,CAAC,EAAE,GAAG,EAAE;yBACT,CAAC,CAAC,EAAE;;;;;uBAKN,CAAC,CAAC,KAAK;oBACV,CACL;;0BAEW,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,OAAO,GAAG,EAAE,SAAS,OAAO;;4BAErD,EAAE,GAAG,EAAE,SAAS,EAAE;;;qBAGzB,EAAE,GAAG,EAAE;qBACP,EAAE,GAAG,EAAE;;;wBAGJ,KAAK;;;kBAGX,KAAK,GAAG,IAAI;;;4BAGF,MAAM,GAAG,EAAE,SAAS,MAAM;4BAC1B,EAAE,GAAG,CAAC,GAAG,EAAE,SAAS,EAAE;;;qBAG7B,MAAM,GAAG,EAAE;qBACX,MAAM,GAAG,EAAE;;;;;;kBAMd,GAAG;;;qBAGA,EAAE,GAAG,CAAC,GAAG,EAAE;qBACX,EAAE,GAAG,EAAE;;;;;;kBAMV,GAAG;;;;SAIZ,CAAA;YACH,CAAC;YACD,KAAK,UAAU;gBACb,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAA;gBACxE,OAAO,IAAI,CAAA;;;uCAGoB,KAAK,sBAAsB,kBAAkB;;kFAEF,KAAK;gBACvE,QAAQ,GAAG,IAAI,MAAM,WAAW,GAAG,IAAI;;;SAG9C,CAAA;YACH,KAAK,aAAa,CAAC,CAAC,CAAC;gBACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAA;gBACpD,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC/D,MAAM,SAAS,GAAG,GAAG,CAAA;gBACrB,MAAM,QAAQ,GAAG,EAAE,CAAA;gBACnB,MAAM,CAAC,GAAG,GAAG,CAAA;gBACb,MAAM,IAAI,GAAG,EAAE,CAAA;gBACf,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;gBAChC,MAAM,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;gBAC3C,OAAO,IAAI,CAAA;;;;;qBAKE,CAAC,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC;qBACpB,IAAI,GAAG,CAAC;yBACJ,QAAQ,GAAG,CAAC;0BACX,SAAS,GAAG,CAAC;;;;;;;;qBAQlB,CAAC,GAAG,QAAQ,GAAG,CAAC;qBAChB,IAAI;yBACA,QAAQ;0BACP,SAAS;;;;;;qBAMd,CAAC,GAAG,QAAQ,GAAG,CAAC;qBAChB,KAAK;yBACD,QAAQ;0BACP,OAAO,GAAG,KAAK;;wBAEjB,KAAK;;;4BAGD,CAAC,SAAS,OAAO,GAAG,EAAE;4BACtB,CAAC,SAAS,OAAO,GAAG,EAAE,kBAAkB,KAAK;;yBAEhD,CAAC,QAAQ,KAAK,GAAG,EAAE,+CAA+C,KAAK;kBAC9E,KAAK,GAAG,IAAI;;;yBAGL,CAAC,QAAQ,OAAO,GAAG,EAAE;kBAC5B,GAAG;;yBAEI,CAAC,QAAQ,IAAI,GAAG,EAAE;kBACzB,GAAG;;;;SAIZ,CAAA;YACH,CAAC;YACD,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA;;oCAEiB,KAAK,qBAAqB,IAAI;kEACA,KAAK,qBAAqB,QAAQ,GAAG,IAAI;;SAElG,CAAA;YACH;gBACE,OAAO,IAAI,CAAA,4DAA4D,IAAI,CAAC,eAAe,cAAc,CAAA;QAC7G,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;cAKD,SAAS,CAAC,GAAG,CACb,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;2CAEiB,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;2BACrE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;6BAEnC,IAAI,CAAC,IAAI;uCACC,IAAI,CAAC,KAAK;;eAElC,CACF;;;;;;;;;;;;;;2BAcc,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,SAAS;4BAC9B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;2BAIzD,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,SAAS;4BAC9B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;;yBAS3D,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa;0BACjC,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;;;;;;;yBASxD,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC;0BACzB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;;;;;;yBASxE,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,GAAG;0BAC3B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;;;;;;yBASxE,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC;0BAC9B,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;;;;cAOtF,IAAI,CAAC,cAAc,EAAE;;;;;;;uCAOI,IAAI,CAAC,QAAQ;uCACb,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,CAAC;;;;KAIvF,CAAA;IACH,CAAC;;AA5X2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qDAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAS,QAAQ;4CAAW;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAW,QAAQ;8CAAW;AA7I9C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsgBxB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/select/outlined-select.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { OxPopup } from '@operato/popup'\nimport gql from 'graphql-tag'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\nconst VIZ_TYPES = [\n { value: 'CARD', label: '카드', icon: 'dashboard' },\n { value: 'GAUGE', label: '게이지', icon: 'speed' },\n { value: 'PROGRESS', label: '진행률', icon: 'linear_scale' },\n { value: 'BAR', label: '막대 차트', icon: 'bar_chart' },\n { value: 'LINE', label: '선 차트', icon: 'show_chart' },\n { value: 'PIE', label: '파이 차트', icon: 'pie_chart' },\n { value: 'DONUT', label: '도넛 차트', icon: 'donut_large' },\n { value: 'RADAR', label: '레이더 차트', icon: 'radar' },\n { value: 'BULLET', label: '불릿 차트', icon: 'track_changes' },\n { value: 'THERMOMETER', label: '온도계', icon: 'thermostat' },\n { value: 'SPEEDOMETER', label: '속도계', icon: 'speed' },\n { value: 'ICON', label: '아이콘', icon: 'emoji_events' },\n { value: 'BADGE', label: '배지', icon: 'badge' },\n { value: 'TEXT', label: '텍스트', icon: 'text_fields' },\n { value: 'TABLE', label: '테이블', icon: 'table_chart' }\n]\n\n@customElement('kpi-viz-editor')\nexport class KpiVizEditor extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-surface, #f4f6fa);\n }\n\n .viz-editor {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n background: white;\n padding: 24px;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 500;\n color: #555;\n }\n\n .form-options {\n flex: 1;\n display: flex;\n flex-direction: row;\n }\n\n .viz-type-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .viz-type-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n }\n\n .viz-type-option:hover {\n border-color: #2196f3;\n background: #f5f9ff;\n }\n\n .viz-type-option.selected {\n border-color: #2196f3;\n background: #e3f2fd;\n }\n\n .viz-type-option md-icon {\n font-size: 24px;\n margin-bottom: 8px;\n color: #666;\n }\n\n .viz-type-option.selected md-icon {\n color: #2196f3;\n }\n\n .viz-type-option .label {\n font-size: 0.9rem;\n font-weight: 500;\n color: #333;\n }\n\n .viz-meta-section {\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n }\n\n .color-picker {\n display: flex;\n gap: 12px;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .color-input {\n width: 60px;\n height: 40px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .buttons {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 24px;\n padding-top: 20px;\n border-top: 1px solid #eee;\n }\n\n .preview {\n flex: 1;\n margin: 30px 16px 16px 16px;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e9ecef;\n }\n\n .preview h4 {\n margin: 0 0 12px 0;\n color: #495057;\n font-size: 0.95rem;\n }\n\n .footer span {\n font-size: 0.8em;\n color: var(--md-sys-color-on-surface);\n line-height: 1.5;\n padding: 10px;\n }\n `\n ]\n\n @property({ type: Object }) kpi: any = null\n @property({ type: String }) selectedVizType: string = 'CARD'\n @property({ type: Object }) vizMeta: any = {}\n @property({ type: Object }) onSave: Function = () => {}\n @property({ type: Object }) onCancel: Function = () => {}\n\n connectedCallback() {\n super.connectedCallback()\n if (this.kpi) {\n this.selectedVizType = this.kpi.vizType \|\| 'CARD'\n this.vizMeta = this.kpi.vizMeta \|\| {}\n }\n }\n\n _selectVizType(type: string) {\n this.selectedVizType = type\n this.requestUpdate()\n }\n\n _updateVizMeta(key: string, value: any) {\n this.vizMeta = { ...this.vizMeta, [key]: value }\n this.requestUpdate()\n }\n\n _renderPreview() {\n const kpiValue = this.kpi?.value?.value ?? 75\n const targetValue = this.kpi?.targetValue ?? 100\n const unit = this.kpi?.unit ?? ''\n const color = this.vizMeta.color \|\| '#2196f3'\n const icon = this.vizMeta.icon \|\| 'trending_up'\n const min = this.vizMeta.minValue ?? 0\n const max = this.vizMeta.maxValue ?? 100\n\n switch (this.selectedVizType) {\n case 'CARD':\n return html`\n <div\n style=\"display:flex;align-items:center;gap:12px;padding:16px;background:white;border-radius:8px;border:1px solid #e0e0e0;\"\n >\n <md-icon style=\"color:${color};font-size:32px;\">${icon}</md-icon>\n <div>\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};\">${kpiValue}${unit}</div>\n <div style=\"font-size:0.9rem;color:#666;\">목표: ${targetValue}${unit}</div>\n </div>\n </div>\n `\n case 'GAUGE': {\n const value = Math.max(min, Math.min(kpiValue, max))\n const percent = max - min > 0 ? (value - min) / (max - min) : 0\n const r = 60\n const cx = 90\n const cy = 90\n const startX = cx - r\n const startY = cy\n const endX = cx + r * Math.cos(Math.PI * (1 - percent))\n const endY = cy - r * Math.sin(Math.PI * (1 - percent))\n const needleAngle = Math.PI - Math.PI * percent\n const needleX = cx + r * Math.cos(needleAngle)\n const needleY = cy - r * Math.sin(needleAngle)\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <svg width=\"180\" height=\"110\" viewBox=\"0 0 180 110\">\n <!-- 배경 arc -->\n <path\n d=\"M${startX},${startY} A${r},${r} 0 0,1 ${cx + r},${cy}\"\n fill=\"none\"\n stroke=\"#e0e0e0\"\n stroke-width=\"16\"\n />\n <!-- 값 arc -->\n <path\n d=\"M${startX},${startY} A${r},${r} 0 0,1 ${endX},${endY}\"\n fill=\"none\"\n stroke=\"${color}\"\n stroke-width=\"16\"\n />\n <!-- 바늘 -->\n <line x1=\"${cx}\" y1=\"${cy}\" x2=\"${needleX}\" y2=\"${needleY}\" stroke=\"#333\" stroke-width=\"4\" />\n <!-- 중심 원 -->\n <circle cx=\"${cx}\" cy=\"${cy}\" r=\"7\" fill=\"#333\" />\n <!-- 중앙값 -->\n <text x=\"${cx}\" y=\"${cy - 25}\" text-anchor=\"middle\" font-size=\"22\" fill=\"${color}\" font-weight=\"bold\">\n ${value}${unit}\n </text>\n <!-- min/max -->\n <text x=\"${cx - r}\" y=\"${cy + 20}\" text-anchor=\"middle\" font-size=\"12\" fill=\"#888\">${min}</text>\n <text x=\"${cx + r}\" y=\"${cy + 20}\" text-anchor=\"middle\" font-size=\"12\" fill=\"#888\">${max}</text>\n </svg>\n </div>\n `\n }\n case 'SPEEDOMETER': {\n const value = Math.max(min, Math.min(kpiValue, max))\n const percent = max - min > 0 ? (value - min) / (max - min) : 0\n const r = 60\n const cx = 90\n const cy = 90\n const startX = cx - r\n const startY = cy\n const endX = cx + r * Math.cos(Math.PI * (1 - percent))\n const endY = cy - r * Math.sin(Math.PI * (1 - percent))\n const needleAngle = Math.PI - Math.PI * percent\n const needleX = cx + r * Math.cos(needleAngle)\n const needleY = cy - r * Math.sin(needleAngle)\n // 중간 눈금 (5개)\n const ticks = Array.from({ length: 6 }, (_, i) => {\n const tickAngle = Math.PI - (Math.PI * i) / 5\n const tx1 = cx + (r - 8) * Math.cos(tickAngle)\n const ty1 = cy - (r - 8) * Math.sin(tickAngle)\n const tx2 = cx + (r + 8) * Math.cos(tickAngle)\n const ty2 = cy - (r + 8) * Math.sin(tickAngle)\n const label = Math.round(min + (max - min) * (i / 5))\n const lx = cx + (r + 22) * Math.cos(tickAngle)\n const ly = cy - (r + 22) * Math.sin(tickAngle) + 6\n return { tx1, ty1, tx2, ty2, label, lx, ly }\n })\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <svg width=\"200\" height=\"120\" viewBox=\"0 0 200 120\">\n <!-- 배경 arc (더 두껍게) -->\n <path\n d=\"M${startX + 10},${startY} A${r},${r} 0 0,1 ${cx + r + 10},${cy}\"\n fill=\"none\"\n stroke=\"#e0e0e0\"\n stroke-width=\"28\"\n />\n <!-- 값 arc -->\n <path\n d=\"M${startX + 10},${startY} A${r},${r} 0 0,1 ${endX + 10},${endY}\"\n fill=\"none\"\n stroke=\"${color}\"\n stroke-width=\"28\"\n />\n <!-- 눈금 -->\n ${ticks.map(\n t =>\n html`<line\n x1=\"${t.tx1 + 10}\"\n y1=\"${t.ty1}\"\n x2=\"${t.tx2 + 10}\"\n y2=\"${t.ty2}\"\n stroke=\"#888\"\n stroke-width=\"2\"\n />`\n )}\n <!-- 눈금 숫자 -->\n ${ticks.map(\n t =>\n html`<text\n x=\"${t.lx + 10}\"\n y=\"${t.ly}\"\n text-anchor=\"middle\"\n font-size=\"14\"\n fill=\"#333\"\n font-weight=\"bold\"\n >${t.label}</text\n >`\n )}\n <!-- 바늘 (빨간색) -->\n <line x1=\"${cx + 10}\" y1=\"${cy}\" x2=\"${needleX + 10}\" y2=\"${needleY}\" stroke=\"#d32f2f\" stroke-width=\"6\" />\n <!-- 중심 원 -->\n <circle cx=\"${cx + 10}\" cy=\"${cy}\" r=\"13\" fill=\"#333\" />\n <!-- 중앙값 -->\n <text\n x=\"${cx + 10}\"\n y=\"${cy - 32}\"\n text-anchor=\"middle\"\n font-size=\"26\"\n fill=\"${color}\"\n font-weight=\"bold\"\n >\n ${value}${unit}\n </text>\n <!-- min/max 포인트 -->\n <circle cx=\"${startX + 10}\" cy=\"${startY}\" r=\"7\" fill=\"#fff\" stroke=\"#888\" stroke-width=\"2\" />\n <circle cx=\"${cx + r + 10}\" cy=\"${cy}\" r=\"7\" fill=\"#fff\" stroke=\"#888\" stroke-width=\"2\" />\n <!-- min/max 숫자 크게 -->\n <text\n x=\"${startX + 10}\"\n y=\"${startY + 32}\"\n text-anchor=\"middle\"\n font-size=\"16\"\n fill=\"#333\"\n font-weight=\"bold\"\n >\n ${min}\n </text>\n <text\n x=\"${cx + r + 10}\"\n y=\"${cy + 32}\"\n text-anchor=\"middle\"\n font-size=\"16\"\n fill=\"#333\"\n font-weight=\"bold\"\n >\n ${max}\n </text>\n </svg>\n </div>\n `\n }\n case 'PROGRESS':\n const progressPercentage = Math.min((kpiValue / targetValue) * 100, 100)\n return html`\n <div style=\"padding:16px;\">\n <div style=\"background:#e0e0e0;height:20px;border-radius:10px;overflow:hidden;\">\n <div style=\"background:${color};height:100%;width:${progressPercentage}%;transition:width 0.3s;\"></div>\n </div>\n <div style=\"text-align:center;margin-top:8px;font-weight:bold;color:${color};\">\n ${kpiValue}${unit} / ${targetValue}${unit}\n </div>\n </div>\n `\n case 'THERMOMETER': {\n const value = Math.max(min, Math.min(kpiValue, max))\n const percent = max - min > 0 ? (value - min) / (max - min) : 0\n const barHeight = 120\n const barWidth = 24\n const x = 100\n const yTop = 30\n const yBottom = yTop + barHeight\n const fillY = yBottom - percent * barHeight\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <svg width=\"200\" height=\"180\" viewBox=\"0 0 200 180\">\n <!-- 바깥 테두리 -->\n <rect\n x=\"${x - barWidth / 2 - 4}\"\n y=\"${yTop - 4}\"\n width=\"${barWidth + 8}\"\n height=\"${barHeight + 8}\"\n rx=\"16\"\n fill=\"#f5f5f5\"\n stroke=\"#bbb\"\n stroke-width=\"2\"\n />\n <!-- 빈 막대 -->\n <rect\n x=\"${x - barWidth / 2}\"\n y=\"${yTop}\"\n width=\"${barWidth}\"\n height=\"${barHeight}\"\n rx=\"12\"\n fill=\"#e0e0e0\"\n />\n <!-- 채워진 부분 -->\n <rect\n x=\"${x - barWidth / 2}\"\n y=\"${fillY}\"\n width=\"${barWidth}\"\n height=\"${yBottom - fillY}\"\n rx=\"12\"\n fill=\"${color}\"\n />\n <!-- 하단 구슬 -->\n <circle cx=\"${x}\" cy=\"${yBottom + 18}\" r=\"22\" fill=\"#e0e0e0\" stroke=\"#bbb\" stroke-width=\"2\" />\n <circle cx=\"${x}\" cy=\"${yBottom + 18}\" r=\"18\" fill=\"${color}\" />\n <!-- 현재값 -->\n <text x=\"${x}\" y=\"${fillY - 12}\" text-anchor=\"middle\" font-size=\"22\" fill=\"${color}\" font-weight=\"bold\">\n ${value}${unit}\n </text>\n <!-- min/max -->\n <text x=\"${x}\" y=\"${yBottom + 52}\" text-anchor=\"middle\" font-size=\"16\" fill=\"#333\" font-weight=\"bold\">\n ${min}\n </text>\n <text x=\"${x}\" y=\"${yTop - 12}\" text-anchor=\"middle\" font-size=\"16\" fill=\"#333\" font-weight=\"bold\">\n ${max}\n </text>\n </svg>\n </div>\n `\n }\n case 'ICON':\n return html`\n <div style=\"text-align:center;padding:16px;\">\n <md-icon style=\"color:${color};font-size:48px;\">${icon}</md-icon>\n <div style=\"font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;\">${kpiValue}${unit}</div>\n </div>\n `\n default:\n return html` <div style=\"padding:16px;text-align:center;color:#666;\">${this.selectedVizType} 미리보기</div> `\n }\n }\n\n render() {\n return html`\n <div class=\"viz-editor\">\n <div class=\"form-group\">\n <label>시각화 타입 선택</label>\n <div class=\"viz-type-grid\">\n ${VIZ_TYPES.map(\n type => html`\n <div\n class=\"viz-type-option ${this.selectedVizType === type.value ? 'selected' : ''}\"\n @click=${() => this._selectVizType(type.value)}\n >\n <md-icon>${type.icon}</md-icon>\n <div class=\"label\">${type.label}</div>\n </div>\n `\n )}\n </div>\n </div>\n\n <div class=\"form-options\">\n <div class=\"viz-meta-section\">\n <label>시각화 옵션</label>\n\n <div class=\"form-group\">\n <label>색상</label>\n <div class=\"color-picker\">\n <input\n type=\"color\"\n class=\"color-input\"\n .value=${this.vizMeta.color \|\| '#2196f3'}\n @change=${(e: any) => this._updateVizMeta('color', e.target.value)}\n />\n <md-outlined-text-field\n label=\"색상 코드\"\n .value=${this.vizMeta.color \|\| '#2196f3'}\n @change=${(e: any) => this._updateVizMeta('color', e.target.value)}\n ></md-outlined-text-field>\n </div>\n </div>\n\n <div class=\"form-group\">\n <label>아이콘</label>\n <md-outlined-text-field\n label=\"Material Icons 이름\"\n .value=${this.vizMeta.icon \|\| 'trending_up'}\n @change=${(e: any) => this._updateVizMeta('icon', e.target.value)}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>최소값</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"최소값\"\n .value=${this.vizMeta.minValue \|\| 0}\n @change=${(e: any) => this._updateVizMeta('minValue', parseFloat(e.target.value))}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>최대값</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"최대값\"\n .value=${this.vizMeta.maxValue \|\| 100}\n @change=${(e: any) => this._updateVizMeta('maxValue', parseFloat(e.target.value))}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"form-group\">\n <label>소수점 자릿수</label>\n <md-outlined-text-field\n type=\"number\"\n label=\"소수점 자릿수\"\n .value=${this.vizMeta.decimalPlaces \|\| 0}\n @change=${(e: any) => this._updateVizMeta('decimalPlaces', parseInt(e.target.value))}\n ></md-outlined-text-field>\n </div>\n </div>\n\n <div class=\"preview\">\n <h4>미리보기</h4>\n ${this._renderPreview()}\n </div>\n </div>\n </div>\n\n <div class=\"footer\">\n <div filler></div>\n <button type=\"button\" @click=${this.onCancel}><md-icon>cancel</md-icon>취소</button>\n <button type=\"button\" @click=${() => this.onSave(this.selectedVizType, this.vizMeta)} done>\n <md-icon>save</md-icon>저장\n </button>\n </div>\n `\n }\n}\n"]}

package/dist-client/pages/kpi-category/kpi-category-list-page.d.ts CHANGED Viewed

@@ -21,6 +21,9 @@ export declare class KpiCategoryListPage extends KpiCategoryListPage_base {
     gristConfig: any;
     mode: 'CARD' | 'GRID' | 'LIST';
     private grist;
+    availableVariables: any[];
+    availableVariablesLoaded: boolean;
+    getAvailableVariables(): Promise<any[]>;
     get context(): {
         title: string;
         search: {
@@ -51,12 +54,14 @@ export declare class KpiCategoryListPage extends KpiCategoryListPage_base {
         };
     };
     render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
     pageInitialized(lifecycle: any): Promise<void>;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
         total: any;
         records: any;
     }>;
+    fetchKpis(): Promise<void>;
     _deleteKpiCategory(): Promise<void>;
     _updateKpiCategory(): Promise<void>;
     creationCallback(kpiCategory: any): Promise<boolean>;

package/dist-client/pages/kpi-category/kpi-category-list-page.js CHANGED Viewed

@@ -7,7 +7,7 @@ import '@operato/data-grist/ox-record-creator.js';
 import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
 import { PageView, store } from '@operato/shell';
 import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
@@ -22,6 +22,8 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        this.availableVariables = [];
+        this.availableVariablesLoaded = false;
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -52,6 +54,31 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
             'kpi-category-importer': KpiCategoryImporter
         };
     }
+    async getAvailableVariables() {
+        if (this.availableVariablesLoaded) {
+            return this.availableVariables;
+        }
+        const response = await client.query({
+            query: gql `
+        query {
+          kpis {
+            items {
+              name
+              description
+            }
+          }
+        }
+      `
+        });
+        this.availableVariables = (response.data.kpis.items || []).map(kpi => ({
+            name: kpi.name,
+            description: kpi.description,
+            type: 'kpi',
+            unit: ''
+        }));
+        this.availableVariablesLoaded = true;
+        return this.availableVariables;
+    }
     get context() {
         return {
             title: i18next.t('title.kpi category list'),
@@ -112,11 +139,15 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
       </ox-grist>
     `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchKpis();
+    }
     async pageInitialized(lifecycle) {
         this.gristConfig = {
             list: {
-                fields: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater'],
-                details: ['name', 'description', 'active', 'parent', 'createdAt', 'updatedAt', 'creator', 'updater']
+                fields: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater'],
+                details: ['name', 'description', 'active', 'formula', 'weight', 'createdAt', 'updatedAt', 'creator', 'updater']
             },
             columns: [
                 { type: 'gutter', gutterName: 'sequence' },
@@ -139,11 +170,23 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
                     width: 200
                 },
                 {
-                    type: 'string',
-                    name: 'parent',
-                    header: '상위분류',
-                    record: { editable: false, renderer: (v, c, r) => r.parent?.name },
-                    width: 120
+                    type: 'formula',
+                    name: 'formula',
+                    header: '산식',
+                    record: {
+                        editable: true,
+                        availableVariables: async () => {
+                            return await this.getAvailableVariables();
+                        }
+                    },
+                    width: 320
+                },
+                {
+                    type: 'number',
+                    name: 'weight',
+                    header: '가중치',
+                    record: { editable: true },
+                    width: 80
                 },
                 {
                     type: 'checkbox',
@@ -204,6 +247,8 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
               name
               description
               active
+              formula
+              weight
               updater {
                 id
                 name
@@ -230,6 +275,28 @@ let KpiCategoryListPage = class KpiCategoryListPage extends connect(store)(local
             records: response.data.responses.items || []
         };
     }
+    async fetchKpis() {
+        const response = await client.query({
+            query: gql `
+        query {
+          kpis {
+            items {
+              name
+              description
+            }
+          }
+        }
+      `
+        });
+        if (!response.errors) {
+            this.availableVariables = (response.data.kpis.items || []).map(kpi => ({
+                name: kpi.name,
+                description: kpi.description,
+                type: 'kpi',
+                unit: ''
+            }));
+        }
+    }
     async _deleteKpiCategory() {
         if (await OxPrompt.open({
             title: i18next.t('text.are_you_sure'),
@@ -367,6 +434,14 @@ __decorate([
     query('ox-grist'),
     __metadata("design:type", DataGrist)
 ], KpiCategoryListPage.prototype, "grist", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiCategoryListPage.prototype, "availableVariables", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiCategoryListPage.prototype, "availableVariablesLoaded", void 0);
 KpiCategoryListPage = __decorate([
     customElement('kpi-category-list-page')
 ], KpiCategoryListPage);