@things-factory/kpi 9.0.21 → 9.0.22
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.
- package/client/charts/kpi-boxplot-chart.ts +163 -0
- package/client/charts/kpi-radar-chart.ts +128 -0
- package/client/pages/kpi-dashboard/kpi-dashboard.ts +188 -0
- package/dist-client/charts/kpi-boxplot-chart.d.ts +22 -0
- package/dist-client/charts/kpi-boxplot-chart.js +198 -0
- package/dist-client/charts/kpi-boxplot-chart.js.map +1 -0
- package/dist-client/charts/kpi-radar-chart.d.ts +16 -0
- package/dist-client/charts/kpi-radar-chart.js +138 -0
- package/dist-client/charts/kpi-radar-chart.js.map +1 -0
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.d.ts +11 -0
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.js +185 -0
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kpi-dashboard.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-dashboard.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { state } from 'lit/decorators.js'\nimport '@material/web/icon/icon.js'\n\nimport './kpi-performance-summary'\nimport './kpi-grade-visualization'\nimport './kpi-history-viewer'\nimport './kpi-list-summary'\nimport './kpi-value-entry'\nimport './kpi-alert-panel'\n\n@customElement('kpi-dashboard')\nexport class KpiDashboardPage extends PageView {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n .dashboard-root {\n flex: 1;\n padding: 24px;\n }\n .category-section {\n margin-bottom: 40px;\n }\n .category-title {\n font-size: 1.3rem;\n font-weight: bold;\n margin-bottom: 16px;\n }\n .kpi-cards {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n .kpi-card {\n background: #fff;\n border-radius: 12px;\n padding: 24px 32px;\n min-width: 220px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 8px;\n border: 1px solid #ececec;\n }\n .kpi-name {\n font-size: 1.1rem;\n font-weight: 500;\n margin-bottom: 8px;\n }\n .kpi-value {\n font-size: 2.2rem;\n font-weight: bold;\n color: #3a3ad6;\n margin-bottom: 4px;\n }\n .kpi-target {\n font-size: 1rem;\n color: #888;\n }\n `\n ]\n\n @state() categories: any[] = []\n @state() loading = true\n @state() error = ''\n @state() alerts: any[] = []\n @state() showHistoryModal: boolean = false\n @state() modalHistories: any[] = []\n @state() modalKpiName: string = ''\n\n connectedCallback() {\n super.connectedCallback()\n this.fetchCategories()\n }\n\n pageUpdated(changes: any, lifecycle: any) {\n if (this.active) {\n this.fetchCategories()\n }\n }\n\n async fetchCategories() {\n this.loading = true\n this.error = ''\n try {\n const response = await client.query({\n query: gql`\n query {\n kpiCategories {\n items {\n id\n name\n kpis {\n id\n name\n value {\n value\n valueDate\n }\n targetValue\n unit\n grades\n vizType\n vizMeta\n histories(limit: 1) {\n version\n updatedAt\n updater {\n name\n }\n }\n }\n }\n }\n kpiAlerts {\n id\n kpi {\n id\n }\n message\n level\n createdAt\n }\n }\n `\n })\n this.categories = response.data.kpiCategories.items || []\n this.alerts = response.data.kpiAlerts || []\n } catch (e) {\n this.error = 'KPI 카테고리 데이터를 불러오지 못했습니다.'\n } finally {\n this.loading = false\n }\n }\n\n async openHistoryModal(kpi) {\n // 전체 이력 fetch (limit 없이)\n try {\n const response = await client.query({\n query: gql`\n query ($kpiId: String!) {\n kpi(id: $kpiId) {\n name\n histories {\n version\n updatedAt\n updater {\n name\n }\n }\n }\n }\n `,\n variables: { kpiId: kpi.id }\n })\n this.modalHistories = response.data.kpi.histories || []\n this.modalKpiName = response.data.kpi.name || ''\n this.showHistoryModal = true\n } catch (e) {\n alert('이력 데이터를 불러오지 못했습니다.')\n }\n }\n closeHistoryModal() {\n this.showHistoryModal = false\n this.modalHistories = []\n this.modalKpiName = ''\n }\n\n _renderKpiValue(kpi: any) {\n const kpiValue = kpi.value?.value ?? 0\n const targetValue = kpi.targetValue ?? 100\n const unit = kpi.unit ?? ''\n const vizType = kpi.vizType || 'CARD'\n const vizMeta = kpi.vizMeta || {}\n const color = vizMeta.color || '#3a3ad6'\n const icon = vizMeta.icon || 'trending_up'\n const minValue = vizMeta.minValue || 0\n const maxValue = vizMeta.maxValue || 100\n const decimalPlaces = vizMeta.decimalPlaces || 0\n\n const formattedValue = typeof kpiValue === 'number' ? kpiValue.toFixed(decimalPlaces) : kpiValue\n\n switch (vizType) {\n case 'GAUGE':\n const gaugePercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${gaugePercentage *\n 3.6}deg, #e0e0e0 ${gaugePercentage * 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 ${formattedValue}${unit}\n </div>\n </div>\n </div>\n `\n\n case 'PROGRESS':\n const progressPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"margin:16px 0;\">\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};font-size:1.2rem;\">\n ${formattedValue}${unit}\n </div>\n </div>\n `\n\n case 'ICON':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <md-icon style=\"color:${color};font-size:48px;\">${icon}</md-icon>\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};margin-top:8px;\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'THERMOMETER':\n const thermoPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:40px;height:120px;background:#e0e0e0;border-radius:20px;margin:0 auto;position:relative;overflow:hidden;\"\n >\n <div\n style=\"position:absolute;bottom:0;width:100%;height:${thermoPercentage}%;background:${color};border-radius:20px;\"\n ></div>\n </div>\n <div style=\"font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'SPEEDOMETER':\n const speedPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n const angle = (speedPercentage / 100) * 180 - 90 // -90도에서 90도까지\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} -90deg ${angle}deg, #e0e0e0 ${angle}deg 90deg);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 ${formattedValue}${unit}\n </div>\n </div>\n </div>\n `\n\n case 'BULLET':\n const bulletPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n const targetPercentage = Math.min(((targetValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"margin:16px 0;\">\n <div style=\"background:#e0e0e0;height:30px;border-radius:15px;overflow:hidden;position:relative;\">\n <div style=\"background:${color};height:100%;width:${bulletPercentage}%;transition:width 0.3s;\"></div>\n <div\n style=\"position:absolute;top:0;left:${targetPercentage}%;width:2px;height:100%;background:#333;\"\n ></div>\n </div>\n <div style=\"text-align:center;margin-top:8px;font-weight:bold;color:${color};font-size:1.2rem;\">\n ${formattedValue}${unit}\n </div>\n </div>\n `\n\n case 'TEXT':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'BADGE':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <span\n style=\"display:inline-block;padding:8px 16px;background:${color};color:white;border-radius:20px;font-size:1.2rem;font-weight:bold;\"\n >${formattedValue}${unit}</span\n >\n </div>\n `\n\n default: // CARD, BAR, LINE, PIE, DONUT, RADAR, TABLE\n return html` <div class=\"kpi-value\">${formattedValue}${unit}</div> `\n }\n }\n\n get context() {\n return {\n title: 'KPI 대시보드',\n description: '조직 KPI 실적, 등급, 이력, 시각화 등 KPI 전용 대시보드'\n } as any\n }\n\n render() {\n if (this.loading) return nothing\n if (this.error) return html`<div>${this.error}</div>`\n return html`\n <div class=\"dashboard-root\">\n ${this.showHistoryModal\n ? html`\n <div\n style=\"position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:1000;display:flex;align-items:center;justify-content:center;\"\n >\n <div\n style=\"background:#fff;padding:32px 40px;border-radius:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 4px 24px rgba(0,0,0,0.15);\"\n >\n <div style=\"font-size:1.2rem;font-weight:bold;margin-bottom:16px;\">\n ${this.modalKpiName} 변경 이력\n </div>\n <ul style=\"padding:0;list-style:none;\">\n ${this.modalHistories.length === 0\n ? html`<li style=\"color:#bbb;\">이력이 없습니다.</li>`\n : this.modalHistories.map(\n h =>\n html`<li style=\"margin-bottom:8px;\">\n v${h.version} (${h.updatedAt?.slice(0, 10) ?? ''} ${h.updater?.name ?? ''})\n </li>`\n )}\n </ul>\n <button style=\"margin-top:16px;padding:6px 18px;\" @click=${() => this.closeHistoryModal()}>\n 닫기\n </button>\n </div>\n </div>\n `\n : nothing}\n ${this.categories.map(\n cat => html`\n <div class=\"category-section\">\n <div class=\"category-title\">${cat.name}</div>\n <div class=\"kpi-cards\">\n ${(cat.kpis || []).map(\n kpi => html`\n <div class=\"kpi-card\">\n <div class=\"kpi-name\">${kpi.name}</div>\n ${this._renderKpiValue(kpi)}\n <div class=\"kpi-target\">목표: ${kpi.targetValue ?? '-'}${kpi.unit ?? ''}</div>\n <!-- 등급 시각화 -->\n <div style=\"margin-top:8px;\">\n <b>등급:</b>\n ${(() => {\n const grades = kpi.grades || []\n const kpiValue = kpi.value?.value\n\n if (grades.length > 5) {\n // 5개를 넘으면 현재 값에 해당하는 grade만 표시\n const currentGrade = grades.find(g => kpiValue >= g.minValue && kpiValue <= g.maxValue)\n if (currentGrade) {\n return html`<span\n style=\"display:inline-block;margin-right:8px;padding:4px 12px;border-radius:12px;background:${currentGrade.color ??\n '#3a3ad6'};color:white;font-size:1em;font-weight:bold;box-shadow:0 2px 8px rgba(58,58,214,0.3);border:2px solid ${currentGrade.color ??\n '#3a3ad6'};\"\n >${currentGrade.name}(${currentGrade.minValue}~${currentGrade.maxValue}${kpi.unit ??\n ''},\n ${currentGrade.score ?? ''}점)</span\n >`\n } else {\n return html`<span style=\"color:#bbb;font-size:0.95em;\">등급 없음</span>`\n }\n } else {\n // 5개 이하면 전체 리스트 표시하되 현재 등급은 강조\n return grades.map(g => {\n const isCurrentGrade = kpiValue >= g.minValue && kpiValue <= g.maxValue\n return html`<span\n style=\"display:inline-block;margin-right:8px;padding:${isCurrentGrade\n ? '4px 12px'\n : '2px 8px'};border-radius:${isCurrentGrade\n ? '12px'\n : '8px'};background:${isCurrentGrade\n ? (g.color ?? '#3a3ad6')\n : (g.color ?? '#eee')};color:${isCurrentGrade\n ? 'white'\n : '#222'};font-size:${isCurrentGrade ? '1em' : '0.95em'};font-weight:${isCurrentGrade\n ? 'bold'\n : 'normal'};box-shadow:${isCurrentGrade\n ? '0 2px 8px rgba(58,58,214,0.3)'\n : 'none'};border:${isCurrentGrade ? `2px solid ${g.color ?? '#3a3ad6'}` : 'none'};\"\n >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span\n >`\n })\n }\n })()}\n </div>\n <!-- 최근 변경 이력(1건만) -->\n <div style=\"margin-top:8px;font-size:0.95em;color:#888;\">\n <b>최근 변경:</b>\n ${kpi.histories && kpi.histories.length > 0\n ? html`<span style=\"margin-right:8px;\"\n >v${kpi.histories[0].version} (${kpi.histories[0].updatedAt?.slice(0, 10) ?? ''}\n ${kpi.histories[0].updater?.name ?? ''})</span\n >`\n : html`<span style=\"color:#bbb\">없음</span>`}\n <button\n style=\"margin-left:8px;font-size:0.95em;padding:2px 8px;\"\n @click=${() => this.openHistoryModal(kpi)}\n >\n 더보기\n </button>\n </div>\n <!-- 경고/알림 -->\n <div style=\"margin-top:8px;\">\n ${this.alerts.filter(a => a.kpi?.id === kpi.id).length > 0\n ? this.alerts\n .filter(a => a.kpi?.id === kpi.id)\n .map(\n a =>\n html`<span\n style=\"display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${a.level ===\n 'critical'\n ? '#ffb3b3'\n : a.level === 'warning'\n ? '#ffe082'\n : '#e0e0e0'};color:#b71c1c;font-size:0.95em;\"\n >${a.message}</span\n >`\n )\n : html`<span style=\"color:#4caf50;font-size:0.95em;\">이상/경고 없음</span>`}\n </div>\n </div>\n `\n )}\n </div>\n </div>\n `\n )}\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"kpi-dashboard.js","sourceRoot":"","sources":["../../../client/pages/kpi-dashboard/kpi-dashboard.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { state } from 'lit/decorators.js'\nimport '@material/web/icon/icon.js'\n\nimport './kpi-performance-summary'\nimport './kpi-grade-visualization'\nimport './kpi-history-viewer'\nimport './kpi-list-summary'\nimport './kpi-value-entry'\nimport './kpi-alert-panel'\nimport '../../charts/kpi-radar-chart'\nimport '../../charts/kpi-boxplot-chart'\n\n@customElement('kpi-dashboard')\nexport class KpiDashboardPage extends PageView {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n .dashboard-root {\n flex: 1;\n padding: 24px;\n }\n .sample-charts-section {\n display: flex;\n gap: 40px;\n margin-bottom: 48px;\n align-items: flex-start;\n }\n .sample-chart-card {\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n border: 1px solid #ececec;\n padding: 24px 32px;\n min-width: 340px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n min-height: 500px;\n }\n .sample-chart-title {\n font-size: 1.1rem;\n font-weight: bold;\n margin-bottom: 12px;\n }\n .sample-chart-container {\n width: 100%;\n height: 340px;\n min-height: 340px;\n }\n .category-section {\n margin-bottom: 40px;\n }\n .category-title {\n font-size: 1.3rem;\n font-weight: bold;\n margin-bottom: 16px;\n }\n .kpi-cards {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n .kpi-card {\n background: #fff;\n border-radius: 12px;\n padding: 24px 32px;\n min-width: 220px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 8px;\n border: 1px solid #ececec;\n }\n .kpi-name {\n font-size: 1.1rem;\n font-weight: 500;\n margin-bottom: 8px;\n }\n .kpi-value {\n font-size: 2.2rem;\n font-weight: bold;\n color: #3a3ad6;\n margin-bottom: 4px;\n }\n .kpi-target {\n font-size: 1rem;\n color: #888;\n }\n `\n ]\n\n @state() categories: any[] = []\n @state() loading = true\n @state() error = ''\n @state() alerts: any[] = []\n @state() showHistoryModal: boolean = false\n @state() modalHistories: any[] = []\n @state() modalKpiName: string = ''\n\n // 샘플 데이터\n private get sampleCategories(): string[] {\n return ['생산성', '품질', '안전', '환경', '비용', '일정']\n }\n private get sampleGroups(): string[] {\n return ['A', 'B', 'C']\n }\n private get sampleSeriesData(): any[] {\n // 각 카테고리별로 10개 이상의 다양한 값(평균, 분산, 이상치 포함)\n // 생산성: 평균 높고 분산 큼, 이상치 포함\n const 생산성 = [95, 92, 90, 88, 85, 80, 78, 75, 70, 60, 100] // 100은 이상치\n // 품질: 평균 높고 분산 작음\n const 품질 = [90, 89, 88, 87, 86, 85, 84, 83, 82, 80, 70]\n // 안전: 평균 중간, 이상치 포함\n const 안전 = [92, 91, 90, 89, 88, 87, 86, 85, 84, 65, 60] // 60은 이상치\n // 환경: 낮은 값에 몰림, 분산 큼\n const 환경 = [95, 90, 85, 80, 75, 70, 65, 60, 60, 60, 55]\n // 비용: 전체적으로 낮음, 이상치 포함\n const 비용 = [80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 50] // 50은 이상치\n // 일정: 분산 큼, 이상치 포함\n const 일정 = [90, 88, 86, 84, 82, 80, 78, 76, 74, 60, 100] // 100은 이상치\n\n const categories = this.sampleCategories\n const groups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']\n const all: any[] = []\n categories.forEach((cat, i) => {\n let arr: number[] = []\n switch (cat) {\n case '생산성':\n arr = 생산성\n break\n case '품질':\n arr = 품질\n break\n case '안전':\n arr = 안전\n break\n case '환경':\n arr = 환경\n break\n case '비용':\n arr = 비용\n break\n case '일정':\n arr = 일정\n break\n }\n arr.forEach((v, idx) => {\n all.push({ group: groups[idx] ?? `G${idx + 1}`, category: cat, value: v })\n })\n })\n return all\n }\n private get sampleRadarData(): any[] {\n // 카테고리별로 min, max, avg, A(자신의 그룹)만 반환\n const categories = this.sampleCategories\n const data = this.sampleSeriesData\n const minData: any = { group: 'Min' }\n const maxData: any = { group: 'Max' }\n const avgData: any = { group: 'Avg' }\n const aData: any = { group: 'A' }\n categories.forEach(category => {\n const values = data.filter(d => d.category === category).map(d => d.value)\n minData[category] = Math.min(...values)\n maxData[category] = Math.max(...values)\n avgData[category] = values.reduce((a, b) => a + b, 0) / values.length\n aData[category] = data.find(d => d.category === category && d.group === 'A')?.value ?? avgData[category]\n })\n // kpi-radar-chart가 기대하는 구조로 변환: [{group, category, value} ...]\n const result: any[] = []\n categories.forEach(category => {\n result.push({ group: 'Min', category, value: minData[category] })\n result.push({ group: 'Max', category, value: maxData[category] })\n result.push({ group: 'Avg', category, value: avgData[category] })\n result.push({ group: 'A', category, value: aData[category] })\n })\n return result\n }\n private get sampleRadarCategories(): string[] {\n return this.sampleCategories\n }\n private get sampleRadarGroups(): string[] {\n return this.sampleGroups\n }\n private get sampleBoxplotData(): any[] {\n // 카테고리별로 그룹별 value의 분포 계산\n const categories = this.sampleCategories\n const data = this.sampleSeriesData\n return categories.map(category => {\n const values = data.filter(d => d.category === category).map(d => d.value)\n const sorted = [...values].sort((a, b) => a - b)\n const min = sorted[0]\n const max = sorted[sorted.length - 1]\n const mean = values.reduce((a, b) => a + b, 0) / values.length\n const median =\n sorted.length % 2 === 0\n ? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2\n : sorted[Math.floor(sorted.length / 2)]\n const q1 = sorted[Math.floor(sorted.length / 4)]\n const q3 = sorted[Math.floor((sorted.length * 3) / 4)]\n // value: A그룹의 실제값(강조)\n const value = data.find(d => d.category === category && d.group === 'A')?.value ?? mean\n return {\n group: category, // x축: 카테고리\n min,\n q1,\n median,\n q3,\n max,\n mean,\n value\n }\n })\n }\n private get sampleBoxplotGroups(): string[] {\n return this.sampleCategories\n }\n private get sampleCurrentGroup() {\n return 'A'\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.fetchCategories()\n }\n\n pageUpdated(changes: any, lifecycle: any) {\n if (this.active) {\n this.fetchCategories()\n }\n }\n\n async fetchCategories() {\n this.loading = true\n this.error = ''\n try {\n const response = await client.query({\n query: gql`\n query {\n kpiCategories {\n items {\n id\n name\n kpis {\n id\n name\n value {\n value\n valueDate\n }\n targetValue\n unit\n grades\n vizType\n vizMeta\n histories(limit: 1) {\n version\n updatedAt\n updater {\n name\n }\n }\n }\n }\n }\n kpiAlerts {\n id\n kpi {\n id\n }\n message\n level\n createdAt\n }\n }\n `\n })\n this.categories = response.data.kpiCategories.items || []\n this.alerts = response.data.kpiAlerts || []\n } catch (e) {\n this.error = 'KPI 카테고리 데이터를 불러오지 못했습니다.'\n } finally {\n this.loading = false\n }\n }\n\n async openHistoryModal(kpi) {\n // 전체 이력 fetch (limit 없이)\n try {\n const response = await client.query({\n query: gql`\n query ($kpiId: String!) {\n kpi(id: $kpiId) {\n name\n histories {\n version\n updatedAt\n updater {\n name\n }\n }\n }\n }\n `,\n variables: { kpiId: kpi.id }\n })\n this.modalHistories = response.data.kpi.histories || []\n this.modalKpiName = response.data.kpi.name || ''\n this.showHistoryModal = true\n } catch (e) {\n alert('이력 데이터를 불러오지 못했습니다.')\n }\n }\n closeHistoryModal() {\n this.showHistoryModal = false\n this.modalHistories = []\n this.modalKpiName = ''\n }\n\n _renderKpiValue(kpi: any) {\n const kpiValue = kpi.value?.value ?? 0\n const targetValue = kpi.targetValue ?? 100\n const unit = kpi.unit ?? ''\n const vizType = kpi.vizType || 'CARD'\n const vizMeta = kpi.vizMeta || {}\n const color = vizMeta.color || '#3a3ad6'\n const icon = vizMeta.icon || 'trending_up'\n const minValue = vizMeta.minValue || 0\n const maxValue = vizMeta.maxValue || 100\n const decimalPlaces = vizMeta.decimalPlaces || 0\n\n const formattedValue = typeof kpiValue === 'number' ? kpiValue.toFixed(decimalPlaces) : kpiValue\n\n switch (vizType) {\n case 'GAUGE':\n const gaugePercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} 0deg ${gaugePercentage *\n 3.6}deg, #e0e0e0 ${gaugePercentage * 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 ${formattedValue}${unit}\n </div>\n </div>\n </div>\n `\n\n case 'PROGRESS':\n const progressPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"margin:16px 0;\">\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};font-size:1.2rem;\">\n ${formattedValue}${unit}\n </div>\n </div>\n `\n\n case 'ICON':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <md-icon style=\"color:${color};font-size:48px;\">${icon}</md-icon>\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};margin-top:8px;\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'THERMOMETER':\n const thermoPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:40px;height:120px;background:#e0e0e0;border-radius:20px;margin:0 auto;position:relative;overflow:hidden;\"\n >\n <div\n style=\"position:absolute;bottom:0;width:100%;height:${thermoPercentage}%;background:${color};border-radius:20px;\"\n ></div>\n </div>\n <div style=\"font-size:1.2rem;font-weight:bold;color:${color};margin-top:8px;\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'SPEEDOMETER':\n const speedPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n const angle = (speedPercentage / 100) * 180 - 90 // -90도에서 90도까지\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div\n style=\"width:120px;height:60px;border-radius:60px 60px 0 0;background:conic-gradient(${color} -90deg ${angle}deg, #e0e0e0 ${angle}deg 90deg);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 ${formattedValue}${unit}\n </div>\n </div>\n </div>\n `\n\n case 'BULLET':\n const bulletPercentage = Math.min(((kpiValue - minValue) / (maxValue - minValue)) * 100, 100)\n const targetPercentage = Math.min(((targetValue - minValue) / (maxValue - minValue)) * 100, 100)\n return html`\n <div style=\"margin:16px 0;\">\n <div style=\"background:#e0e0e0;height:30px;border-radius:15px;overflow:hidden;position:relative;\">\n <div style=\"background:${color};height:100%;width:${bulletPercentage}%;transition:width 0.3s;\"></div>\n <div\n style=\"position:absolute;top:0;left:${targetPercentage}%;width:2px;height:100%;background:#333;\"\n ></div>\n </div>\n <div style=\"text-align:center;margin-top:8px;font-weight:bold;color:${color};font-size:1.2rem;\">\n ${formattedValue}${unit}\n </div>\n </div>\n `\n\n case 'TEXT':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <div style=\"font-size:1.5rem;font-weight:bold;color:${color};\">${formattedValue}${unit}</div>\n </div>\n `\n\n case 'BADGE':\n return html`\n <div style=\"text-align:center;margin:16px 0;\">\n <span\n style=\"display:inline-block;padding:8px 16px;background:${color};color:white;border-radius:20px;font-size:1.2rem;font-weight:bold;\"\n >${formattedValue}${unit}</span\n >\n </div>\n `\n\n default: // CARD, BAR, LINE, PIE, DONUT, RADAR, TABLE\n return html` <div class=\"kpi-value\">${formattedValue}${unit}</div> `\n }\n }\n\n get context() {\n return {\n title: 'KPI 대시보드',\n description: '조직 KPI 실적, 등급, 이력, 시각화 등 KPI 전용 대시보드'\n } as any\n }\n\n render() {\n if (this.loading) return nothing\n if (this.error) return html`<div>${this.error}</div>`\n return html`\n <div class=\"dashboard-root\">\n <!-- 샘플 차트 섹션 -->\n <div class=\"sample-charts-section\">\n <div class=\"sample-chart-card\">\n <div class=\"sample-chart-title\">그룹별 KPI 비교 (Radar)</div>\n <div class=\"sample-chart-container\">\n <kpi-radar-chart\n .data=${this.sampleRadarData ?? []}\n .categories=${this.sampleRadarCategories ?? []}\n .currentGroup=${this.sampleCurrentGroup}\n ></kpi-radar-chart>\n </div>\n <div style=\"margin-top:12px;color:#666;font-size:0.98em;\">\n ※ <b>Radar 차트</b>는 각 카테고리별로 최소(Min), 최대(Max), 평균(Avg), 그리고 이 프로젝트의 값을 한눈에\n 비교할 수 있도록 시각화합니다.<br />\n <b>진한 파란색</b> 다각형이 이 프로젝트의 성과이며, 회색 다각형은 기준값(최소/최대/평균)입니다.\n </div>\n </div>\n <div class=\"sample-chart-card\">\n <div class=\"sample-chart-title\">그룹별 분포 (Boxplot)</div>\n <div class=\"sample-chart-container\">\n <kpi-boxplot-chart\n .data=${this.sampleBoxplotData ?? []}\n .groups=${this.sampleBoxplotGroups ?? []}\n .currentGroup=${this.sampleCurrentGroup}\n ></kpi-boxplot-chart>\n </div>\n <div style=\"margin-top:12px;color:#666;font-size:0.98em;\">\n ※ <b>Boxplot(박스플롯)</b>은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치\n 등)를 보여줍니다.<br />\n <b>박스</b>는 중앙 50% 구간, <b>수염</b>은 전체 범위, <b>굵은 검정색 가로선</b>은 중앙값(메디안),\n <b>주황색 원</b>은 평균값(Mean)을 의미합니다.<br />\n <b>이 프로젝트의 값</b>은 <b>진한 오렌지색 원</b>으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수\n 있습니다.<br />\n </div>\n </div>\n </div>\n ${this.showHistoryModal\n ? html`\n <div\n style=\"position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:1000;display:flex;align-items:center;justify-content:center;\"\n >\n <div\n style=\"background:#fff;padding:32px 40px;border-radius:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto;box-shadow:0 4px 24px rgba(0,0,0,0.15);\"\n >\n <div style=\"font-size:1.2rem;font-weight:bold;margin-bottom:16px;\">\n ${this.modalKpiName} 변경 이력\n </div>\n <ul style=\"padding:0;list-style:none;\">\n ${this.modalHistories.length === 0\n ? html`<li style=\"color:#bbb;\">이력이 없습니다.</li>`\n : this.modalHistories.map(\n h =>\n html`<li style=\"margin-bottom:8px;\">\n v${h.version} (${h.updatedAt?.slice(0, 10) ?? ''} ${h.updater?.name ?? ''})\n </li>`\n )}\n </ul>\n <button style=\"margin-top:16px;padding:6px 18px;\" @click=${() => this.closeHistoryModal()}>\n 닫기\n </button>\n </div>\n </div>\n `\n : nothing}\n ${this.categories.map(\n cat => html`\n <div class=\"category-section\">\n <div class=\"category-title\">${cat.name}</div>\n <div class=\"kpi-cards\">\n ${(cat.kpis || []).map(\n kpi => html`\n <div class=\"kpi-card\">\n <div class=\"kpi-name\">${kpi.name}</div>\n ${this._renderKpiValue(kpi)}\n <div class=\"kpi-target\">목표: ${kpi.targetValue ?? '-'}${kpi.unit ?? ''}</div>\n <!-- 등급 시각화 -->\n <div style=\"margin-top:8px;\">\n <b>등급:</b>\n ${(() => {\n const grades = kpi.grades || []\n const kpiValue = kpi.value?.value\n\n if (grades.length > 5) {\n // 5개를 넘으면 현재 값에 해당하는 grade만 표시\n const currentGrade = grades.find(g => kpiValue >= g.minValue && kpiValue <= g.maxValue)\n if (currentGrade) {\n return html`<span\n style=\"display:inline-block;margin-right:8px;padding:4px 12px;border-radius:12px;background:${currentGrade.color ??\n '#3a3ad6'};color:white;font-size:1em;font-weight:bold;box-shadow:0 2px 8px rgba(58,58,214,0.3);border:2px solid ${currentGrade.color ??\n '#3a3ad6'};\"\n >${currentGrade.name}(${currentGrade.minValue}~${currentGrade.maxValue}${kpi.unit ??\n ''},\n ${currentGrade.score ?? ''}점)</span\n >`\n } else {\n return html`<span style=\"color:#bbb;font-size:0.95em;\">등급 없음</span>`\n }\n } else {\n // 5개 이하면 전체 리스트 표시하되 현재 등급은 강조\n return grades.map(g => {\n const isCurrentGrade = kpiValue >= g.minValue && kpiValue <= g.maxValue\n return html`<span\n style=\"display:inline-block;margin-right:8px;padding:${isCurrentGrade\n ? '4px 12px'\n : '2px 8px'};border-radius:${isCurrentGrade\n ? '12px'\n : '8px'};background:${isCurrentGrade\n ? (g.color ?? '#3a3ad6')\n : (g.color ?? '#eee')};color:${isCurrentGrade\n ? 'white'\n : '#222'};font-size:${isCurrentGrade ? '1em' : '0.95em'};font-weight:${isCurrentGrade\n ? 'bold'\n : 'normal'};box-shadow:${isCurrentGrade\n ? '0 2px 8px rgba(58,58,214,0.3)'\n : 'none'};border:${isCurrentGrade ? `2px solid ${g.color ?? '#3a3ad6'}` : 'none'};\"\n >${g.name}(${g.minValue}~${g.maxValue}${kpi.unit ?? ''}, ${g.score ?? ''}점)</span\n >`\n })\n }\n })()}\n </div>\n <!-- 최근 변경 이력(1건만) -->\n <div style=\"margin-top:8px;font-size:0.95em;color:#888;\">\n <b>최근 변경:</b>\n ${kpi.histories && kpi.histories.length > 0\n ? html`<span style=\"margin-right:8px;\"\n >v${kpi.histories[0].version} (${kpi.histories[0].updatedAt?.slice(0, 10) ?? ''}\n ${kpi.histories[0].updater?.name ?? ''})</span\n >`\n : html`<span style=\"color:#bbb\">없음</span>`}\n <button\n style=\"margin-left:8px;font-size:0.95em;padding:2px 8px;\"\n @click=${() => this.openHistoryModal(kpi)}\n >\n 더보기\n </button>\n </div>\n <!-- 경고/알림 -->\n <div style=\"margin-top:8px;\">\n ${this.alerts.filter(a => a.kpi?.id === kpi.id).length > 0\n ? this.alerts\n .filter(a => a.kpi?.id === kpi.id)\n .map(\n a =>\n html`<span\n style=\"display:inline-block;margin-right:8px;padding:2px 8px;border-radius:8px;background:${a.level ===\n 'critical'\n ? '#ffb3b3'\n : a.level === 'warning'\n ? '#ffe082'\n : '#e0e0e0'};color:#b71c1c;font-size:0.95em;\"\n >${a.message}</span\n >`\n )\n : html`<span style=\"color:#4caf50;font-size:0.95em;\">이상/경고 없음</span>`}\n </div>\n </div>\n `\n )}\n </div>\n </div>\n `\n )}\n </div>\n `\n }\n}\n"]}
|