npm - @things-factory/kpi - Versions diffs - 9.0.23 → 9.0.24 - Mend

@things-factory/kpi 9.0.23 → 9.0.24

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 (76) hide show

package/client/pages/kpi-value/kpi-value-list-page.ts CHANGED Viewed

@@ -75,6 +75,12 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
       },
       help: 'kpi/kpi-value',
       actions: [
+        {
+          title: '일괄 편집',
+          action: this._openEditor.bind(this),
+          icon: 'edit',
+          style: 'background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'
+        },
         {
           title: i18next.t('button.save'),
           action: this._updateKpiValue.bind(this),
@@ -266,6 +272,13 @@ export class KpiValueListPage extends connect(store)(localize(i18next)(ScopedEle
     }
   }
+  async _openEditor() {
+    const { KpiValueEditorPage } = await import('./kpi-value-editor-page.js')
+    await openPopup(html`
+      <${KpiValueEditorPage}></${KpiValueEditorPage}>
+    `)
+  }
   async _deleteKpiValue() {
     if (
       await OxPrompt.open({

package/client/route.ts CHANGED Viewed

@@ -16,6 +16,14 @@ export default function route(page: string) {
       import('./pages/kpi-category/kpi-category-list-page')
       return page
+    case 'kpi-category-list':
+      import('./pages/kpi-category/kpi-category-list-page')
+      return page
+    case 'kpi-category-value-list':
+      import('./pages/kpi-category-value/kpi-category-value-list-page')
+      return page
     case 'kpi-metric-list':
       import('./pages/kpi-metric/kpi-metric-list-page')
       return page
@@ -24,10 +32,18 @@ export default function route(page: string) {
       import('./pages/kpi-value/kpi-value-list-page')
       return page
+    case 'kpi-value-editor':
+      import('./pages/kpi-value/kpi-value-editor-page')
+      return page
     case 'kpi-metric-value-list':
       import('./pages/kpi-metric-value/kpi-metric-value-list-page')
       return page
+    case 'kpi-metric-value-editor':
+      import('./pages/kpi-metric-value/kpi-metric-value-editor-page')
+      return page
     case 'kpi-metric-value-manual-entry':
       import('./pages/kpi-metric-value/kpi-metric-value-manual-entry-page')
       return page

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

@@ -1,5 +1,4 @@
 import '@material/web/button/elevated-button.js';
-import '@material/web/select/outlined-select.js';
 import '@material/web/textfield/outlined-text-field.js';
 import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/button/elevated-button.js';
-import '@material/web/select/outlined-select.js';
+// import '@material/web/select/outlined-select.js'
 import '@material/web/textfield/outlined-text-field.js';
 import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';

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 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"]}
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'\n// import '@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-value/kpi-category-value-list-page.d.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/data-grist/ox-filters-form.js';
+import '@operato/data-grist/ox-record-creator.js';
+import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
+declare const KpiCategoryValueListPage_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>;
+export declare class KpiCategoryValueListPage extends KpiCategoryValueListPage_base {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    mode: 'CARD' | 'GRID' | 'LIST';
+    private grist;
+    get context(): {
+        title: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        filter: {
+            handler: () => void;
+        };
+        help: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
+        exportable: {
+            name: string;
+            data: () => Promise<never[]>;
+        };
+        importable: {
+            handler: (records: any) => Promise<void>;
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
+    _deleteKpiCategoryValue(): Promise<void>;
+    _updateKpiCategoryValue(): Promise<void>;
+    _calculateKpiCategoryValue(kpiCategoryValue: any): Promise<void>;
+    creationCallback(kpiCategoryValue: any): Promise<void>;
+    exportHandler(): Promise<never[]>;
+    importHandler(records: any): Promise<void>;
+}
+export {};