@things-factory/kpi 10.1.248 → 10.1.249

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

@@ -0,0 +1,562 @@
+import { __decorate, __metadata } from "tslib";
+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 { css, html, svg, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+const VIZ_TYPES = [
+    { value: 'CARD', label: '카드', icon: 'dashboard' },
+    { value: 'GAUGE', label: '게이지', icon: 'speed' },
+    { value: 'PROGRESS', label: '진행률', icon: 'linear_scale' },
+    { value: 'BAR', label: '막대 차트', icon: 'bar_chart' },
+    { value: 'LINE', label: '선 차트', icon: 'show_chart' },
+    { value: 'PIE', label: '파이 차트', icon: 'pie_chart' },
+    { value: 'DONUT', label: '도넛 차트', icon: 'donut_large' },
+    { value: 'RADAR', label: '레이더 차트', icon: 'radar' },
+    { value: 'BULLET', label: '불릿 차트', icon: 'track_changes' },
+    { value: 'THERMOMETER', label: '온도계', icon: 'thermostat' },
+    { value: 'SPEEDOMETER', label: '속도계', icon: 'speed' },
+    { value: 'ICON', label: '아이콘', icon: 'emoji_events' },
+    { value: 'BADGE', label: '배지', icon: 'badge' },
+    { value: 'TEXT', label: '텍스트', icon: 'text_fields' },
+    { value: 'TABLE', label: '테이블', icon: 'table_chart' }
+];
+let KpiVizEditor = class KpiVizEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.kpi = null;
+        this.selectedVizType = 'CARD';
+        this.vizMeta = {};
+        this.onSave = () => { };
+        this.onCancel = () => { };
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface, #f4f6fa);
+      }
+
+      .viz-editor {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        background: white;
+        padding: 24px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #555;
+      }
+
+      .form-options {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .viz-type-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 12px;
+        margin-bottom: 20px;
+      }
+
+      .viz-type-option {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 16px 12px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-align: center;
+      }
+
+      .viz-type-option:hover {
+        border-color: #2196f3;
+        background: #f5f9ff;
+      }
+
+      .viz-type-option.selected {
+        border-color: #2196f3;
+        background: #e3f2fd;
+      }
+
+      .viz-type-option md-icon {
+        font-size: 24px;
+        margin-bottom: 8px;
+        color: #666;
+      }
+
+      .viz-type-option.selected md-icon {
+        color: #2196f3;
+      }
+
+      .viz-type-option .label {
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .viz-meta-section {
+        margin-top: 24px;
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+      }
+
+      .color-picker {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+
+      .color-input {
+        width: 60px;
+        height: 40px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+
+      .buttons {
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+        margin-top: 24px;
+        padding-top: 20px;
+        border-top: 1px solid #eee;
+      }
+
+      .preview {
+        flex: 1;
+        margin: 30px 16px 16px 16px;
+        padding: 16px;
+        background: #f8f9fa;
+        border-radius: 8px;
+        border: 1px solid #e9ecef;
+      }
+
+      .preview h4 {
+        margin: 0 0 12px 0;
+        color: #495057;
+        font-size: 0.95rem;
+      }
+
+      .footer span {
+        font-size: 0.8em;
+        color: var(--md-sys-color-on-surface);
+        line-height: 1.5;
+        padding: 10px;
+      }
+    `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.kpi) {
+            this.selectedVizType = this.kpi.vizType || 'CARD';
+            this.vizMeta = this.kpi.vizMeta || {};
+        }
+    }
+    _selectVizType(type) {
+        this.selectedVizType = type;
+        this.requestUpdate();
+    }
+    _updateVizMeta(key, value) {
+        this.vizMeta = { ...this.vizMeta, [key]: value };
+        this.requestUpdate();
+    }
+    _renderPreview() {
+        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 `
+          <div
+            style="display:flex;align-items:center;gap:12px;padding:16px;background:white;border-radius:8px;border:1px solid #e0e0e0;"
+          >
+            <md-icon style="color:${color};font-size:32px;">${icon}</md-icon>
+            <div>
+              <div style="font-size:1.5rem;font-weight:bold;color:${color};">${kpiValue}${unit}</div>
+              <div style="font-size:0.9rem;color:#666;">목표: ${targetValue}${unit}</div>
+            </div>
+          </div>
+        `;
+            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;">
+            <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"
+              />
+              <!-- 눈금 -->
+              <!--
+                조각은 svg 태그로 만든다 — html 로 만들면 HTML 이름공간의 노드가 되어 <svg> 안에서
+                **소리 없이 안 그려진다**(오류도 경고도 없다). 눈금과 눈금 숫자가 그래서 없었다.
+              -->
+              ${ticks.map(t => svg `<line
+                    x1="${t.tx1 + 10}"
+                    y1="${t.ty1}"
+                    x2="${t.tx2 + 10}"
+                    y2="${t.ty2}"
+                    stroke="#888"
+                    stroke-width="2"
+                  />`)}
+              <!-- 눈금 숫자 -->
+              ${ticks.map(t => svg `<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"
+              >
+                ${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 `
+          <div style="padding:16px;">
+            <div style="background:#e0e0e0;height:20px;border-radius:10px;overflow:hidden;">
+              <div style="background:${color};height:100%;width:${progressPercentage}%;transition:width 0.3s;"></div>
+            </div>
+            <div style="text-align:center;margin-top:8px;font-weight:bold;color:${color};">
+              ${kpiValue}${unit} / ${targetValue}${unit}
+            </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;">
+            <md-icon style="color:${color};font-size:48px;">${icon}</md-icon>
+            <div style="font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;">${kpiValue}${unit}</div>
+          </div>
+        `;
+            default:
+                return html ` <div style="padding:16px;text-align:center;color:#666;">${this.selectedVizType} 미리보기</div> `;
+        }
+    }
+    render() {
+        return html `
+      <div class="viz-editor">
+        <div class="form-group">
+          <label>시각화 타입 선택</label>
+          <div class="viz-type-grid">
+            ${VIZ_TYPES.map(type => html `
+                <div
+                  class="viz-type-option ${this.selectedVizType === type.value ? 'selected' : ''}"
+                  @click=${() => this._selectVizType(type.value)}
+                >
+                  <md-icon>${type.icon}</md-icon>
+                  <div class="label">${type.label}</div>
+                </div>
+              `)}
+          </div>
+        </div>
+
+        <div class="form-options">
+          <div class="viz-meta-section">
+            <label>시각화 옵션</label>
+
+            <div class="form-group">
+              <label>색상</label>
+              <div class="color-picker">
+                <input
+                  type="color"
+                  class="color-input"
+                  .value=${this.vizMeta.color || '#2196f3'}
+                  @change=${(e) => this._updateVizMeta('color', e.target.value)}
+                />
+                <md-outlined-text-field
+                  label="색상 코드"
+                  .value=${this.vizMeta.color || '#2196f3'}
+                  @change=${(e) => this._updateVizMeta('color', e.target.value)}
+                ></md-outlined-text-field>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>아이콘</label>
+              <md-outlined-text-field
+                label="Material Icons 이름"
+                .value=${this.vizMeta.icon || 'trending_up'}
+                @change=${(e) => this._updateVizMeta('icon', e.target.value)}
+              ></md-outlined-text-field>
+            </div>
+
+            <div class="form-group">
+              <label>최소값</label>
+              <md-outlined-text-field
+                type="number"
+                label="최소값"
+                .value=${this.vizMeta.minValue || 0}
+                @change=${(e) => this._updateVizMeta('minValue', parseFloat(e.target.value))}
+              ></md-outlined-text-field>
+            </div>
+
+            <div class="form-group">
+              <label>최대값</label>
+              <md-outlined-text-field
+                type="number"
+                label="최대값"
+                .value=${this.vizMeta.maxValue || 100}
+                @change=${(e) => this._updateVizMeta('maxValue', parseFloat(e.target.value))}
+              ></md-outlined-text-field>
+            </div>
+
+            <div class="form-group">
+              <label>소수점 자릿수</label>
+              <md-outlined-text-field
+                type="number"
+                label="소수점 자릿수"
+                .value=${this.vizMeta.decimalPlaces || 0}
+                @change=${(e) => this._updateVizMeta('decimalPlaces', parseInt(e.target.value))}
+              ></md-outlined-text-field>
+            </div>
+          </div>
+
+          <div class="preview">
+            <h4>미리보기</h4>
+            ${this._renderPreview()}
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <div filler></div>
+        <button type="button" @click=${this.onCancel}><md-icon>cancel</md-icon>취소</button>
+        <button type="button" @click=${() => this.onSave(this.selectedVizType, this.vizMeta)} done>
+          <md-icon>save</md-icon>저장
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiVizEditor.prototype, "kpi", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], KpiVizEditor.prototype, "selectedVizType", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiVizEditor.prototype, "vizMeta", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], KpiVizEditor.prototype, "onSave", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], KpiVizEditor.prototype, "onCancel", void 0);
+KpiVizEditor = __decorate([
+    customElement('kpi-viz-editor')
+], KpiVizEditor);
+export { KpiVizEditor };
+//# sourceMappingURL=kpi-viz-editor.js.map

package/dist-client/pages/kpi/kpi-viz-editor.js.map

@@ -0,0 +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, svg, 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              <!--\n                조각은 svg 태그로 만든다 — html 로 만들면 HTML 이름공간의 노드가 되어 <svg> 안에서\n                **소리 없이 안 그려진다**(오류도 경고도 없다). 눈금과 눈금 숫자가 그래서 없었다.\n              -->\n              ${ticks.map(\n                t =>\n                  svg`<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                  svg`<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-dashboard/cards/kpi-level1-card.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class KpiLevel1Card extends LitElement {
+    static styles: import("lit").CSSResult;
+    loading: boolean;
+    error: string;
+    totalScore: number;
+    grade: string;
+    totalKpis: number;
+    totalCategories: number;
+    averageScore: number;
+    currentMonth: string;
+    connectedCallback(): void;
+    private getCurrentMonth;
+    private calculateGrade;
+    fetchTotalScore(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}