@things-factory/kpi 10.0.18 → 10.1.0
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/pages/kpi/kpi-viz-editor.ts +7 -3
- package/client/pages/kpi-dashboard/kpi-dashboard.ts +13 -171
- package/dist-client/pages/kpi/kpi-viz-editor.js +7 -3
- package/dist-client/pages/kpi/kpi-viz-editor.js.map +1 -1
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.d.ts +0 -9
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.js +13 -168
- package/dist-client/pages/kpi-dashboard/kpi-dashboard.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/helps/kpi/kpi-metric-value.ko.md +5 -0
- package/helps/kpi/kpi-metric-value.md +14 -0
- package/package.json +5 -5
|
@@ -4,7 +4,7 @@ import '@material/web/textfield/outlined-text-field.js'
|
|
|
4
4
|
import '@material/web/icon/icon.js'
|
|
5
5
|
|
|
6
6
|
import { PageView } from '@operato/shell'
|
|
7
|
-
import { css, html, LitElement } from 'lit'
|
|
7
|
+
import { css, html, svg, LitElement } from 'lit'
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js'
|
|
9
9
|
import { client } from '@operato/graphql'
|
|
10
10
|
import { i18next, localize } from '@operato/i18n'
|
|
@@ -303,9 +303,13 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
|
|
|
303
303
|
stroke-width="28"
|
|
304
304
|
/>
|
|
305
305
|
<!-- 눈금 -->
|
|
306
|
+
<!--
|
|
307
|
+
조각은 svg 태그로 만든다 — html 로 만들면 HTML 이름공간의 노드가 되어 <svg> 안에서
|
|
308
|
+
**소리 없이 안 그려진다**(오류도 경고도 없다). 눈금과 눈금 숫자가 그래서 없었다.
|
|
309
|
+
-->
|
|
306
310
|
${ticks.map(
|
|
307
311
|
t =>
|
|
308
|
-
|
|
312
|
+
svg`<line
|
|
309
313
|
x1="${t.tx1 + 10}"
|
|
310
314
|
y1="${t.ty1}"
|
|
311
315
|
x2="${t.tx2 + 10}"
|
|
@@ -317,7 +321,7 @@ export class KpiVizEditor extends localize(i18next)(LitElement) {
|
|
|
317
321
|
<!-- 눈금 숫자 -->
|
|
318
322
|
${ticks.map(
|
|
319
323
|
t =>
|
|
320
|
-
|
|
324
|
+
svg`<text
|
|
321
325
|
x="${t.lx + 10}"
|
|
322
326
|
y="${t.ly}"
|
|
323
327
|
text-anchor="middle"
|
|
@@ -35,14 +35,14 @@ export class KpiDashboardPage extends PageView {
|
|
|
35
35
|
flex: 1;
|
|
36
36
|
padding: 24px;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
.charts-section {
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: column;
|
|
41
41
|
gap: 40px;
|
|
42
42
|
margin-bottom: 48px;
|
|
43
43
|
align-items: flex-start;
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.chart-card {
|
|
46
46
|
background: #fff;
|
|
47
47
|
border-radius: 12px;
|
|
48
48
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
@@ -55,12 +55,12 @@ export class KpiDashboardPage extends PageView {
|
|
|
55
55
|
align-items: stretch;
|
|
56
56
|
min-height: 500px;
|
|
57
57
|
}
|
|
58
|
-
.
|
|
58
|
+
.chart-title {
|
|
59
59
|
font-size: 1.1rem;
|
|
60
60
|
font-weight: bold;
|
|
61
61
|
margin-bottom: 12px;
|
|
62
62
|
}
|
|
63
|
-
.
|
|
63
|
+
.chart-container {
|
|
64
64
|
width: 100%;
|
|
65
65
|
height: 340px;
|
|
66
66
|
min-height: 340px;
|
|
@@ -120,127 +120,6 @@ export class KpiDashboardPage extends PageView {
|
|
|
120
120
|
@state() selectedPeriodType: string = 'MONTH' // 선택된 기간 타입 (MONTH로 고정)
|
|
121
121
|
@state() selectedValueDate: string = '' // 선택된 값 날짜
|
|
122
122
|
|
|
123
|
-
// 샘플 데이터
|
|
124
|
-
private get sampleCategories(): string[] {
|
|
125
|
-
return ['생산성', '품질', '안전', '환경', '비용', '일정']
|
|
126
|
-
}
|
|
127
|
-
private get sampleGroups(): string[] {
|
|
128
|
-
return ['A', 'B', 'C']
|
|
129
|
-
}
|
|
130
|
-
private get sampleSeriesData(): any[] {
|
|
131
|
-
// 각 카테고리별로 10개 이상의 다양한 값(평균, 분산, 이상치 포함)
|
|
132
|
-
// 생산성: 평균 높고 분산 큼, 이상치 포함
|
|
133
|
-
const 생산성 = [95, 92, 90, 88, 85, 80, 78, 75, 70, 60, 100] // 100은 이상치
|
|
134
|
-
// 품질: 평균 높고 분산 작음
|
|
135
|
-
const 품질 = [90, 89, 88, 87, 86, 85, 84, 83, 82, 80, 70]
|
|
136
|
-
// 안전: 평균 중간, 이상치 포함
|
|
137
|
-
const 안전 = [92, 91, 90, 89, 88, 87, 86, 85, 84, 65, 60] // 60은 이상치
|
|
138
|
-
// 환경: 낮은 값에 몰림, 분산 큼
|
|
139
|
-
const 환경 = [95, 90, 85, 80, 75, 70, 65, 60, 60, 60, 55]
|
|
140
|
-
// 비용: 전체적으로 낮음, 이상치 포함
|
|
141
|
-
const 비용 = [80, 78, 76, 74, 72, 70, 68, 66, 64, 62, 50] // 50은 이상치
|
|
142
|
-
// 일정: 분산 큼, 이상치 포함
|
|
143
|
-
const 일정 = [90, 88, 86, 84, 82, 80, 78, 76, 74, 60, 100] // 100은 이상치
|
|
144
|
-
|
|
145
|
-
const categories = this.sampleCategories
|
|
146
|
-
const groups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
|
|
147
|
-
const all: any[] = []
|
|
148
|
-
categories.forEach((cat, i) => {
|
|
149
|
-
let arr: number[] = []
|
|
150
|
-
switch (cat) {
|
|
151
|
-
case '생산성':
|
|
152
|
-
arr = 생산성
|
|
153
|
-
break
|
|
154
|
-
case '품질':
|
|
155
|
-
arr = 품질
|
|
156
|
-
break
|
|
157
|
-
case '안전':
|
|
158
|
-
arr = 안전
|
|
159
|
-
break
|
|
160
|
-
case '환경':
|
|
161
|
-
arr = 환경
|
|
162
|
-
break
|
|
163
|
-
case '비용':
|
|
164
|
-
arr = 비용
|
|
165
|
-
break
|
|
166
|
-
case '일정':
|
|
167
|
-
arr = 일정
|
|
168
|
-
break
|
|
169
|
-
}
|
|
170
|
-
arr.forEach((v, idx) => {
|
|
171
|
-
all.push({ group: groups[idx] ?? `G${idx + 1}`, category: cat, value: v })
|
|
172
|
-
})
|
|
173
|
-
})
|
|
174
|
-
return all
|
|
175
|
-
}
|
|
176
|
-
private get sampleRadarData(): any[] {
|
|
177
|
-
// 카테고리별로 min, max, avg, A(자신의 그룹)만 반환
|
|
178
|
-
const categories = this.sampleCategories
|
|
179
|
-
const data = this.sampleSeriesData
|
|
180
|
-
const minData: any = { group: 'Min' }
|
|
181
|
-
const maxData: any = { group: 'Max' }
|
|
182
|
-
const avgData: any = { group: 'Avg' }
|
|
183
|
-
const aData: any = { group: 'A' }
|
|
184
|
-
categories.forEach(category => {
|
|
185
|
-
const values = data.filter(d => d.category === category).map(d => d.value)
|
|
186
|
-
minData[category] = Math.min(...values)
|
|
187
|
-
maxData[category] = Math.max(...values)
|
|
188
|
-
avgData[category] = values.reduce((a, b) => a + b, 0) / values.length
|
|
189
|
-
aData[category] = data.find(d => d.category === category && d.org === 'A')?.value ?? avgData[category]
|
|
190
|
-
})
|
|
191
|
-
// kpi-radar-chart가 기대하는 구조로 변환: [{org, category, value} ...]
|
|
192
|
-
const result: any[] = []
|
|
193
|
-
categories.forEach(category => {
|
|
194
|
-
result.push({ org: 'Min', category, value: minData[category] })
|
|
195
|
-
result.push({ org: 'Max', category, value: maxData[category] })
|
|
196
|
-
result.push({ org: 'Avg', category, value: avgData[category] })
|
|
197
|
-
result.push({ org: 'A', category, value: aData[category] })
|
|
198
|
-
})
|
|
199
|
-
return result
|
|
200
|
-
}
|
|
201
|
-
private get sampleRadarCategories(): string[] {
|
|
202
|
-
return this.sampleCategories
|
|
203
|
-
}
|
|
204
|
-
private get sampleRadarGroups(): string[] {
|
|
205
|
-
return this.sampleGroups
|
|
206
|
-
}
|
|
207
|
-
private get sampleBoxplotData(): any[] {
|
|
208
|
-
// 카테고리별로 그룹별 value의 분포 계산
|
|
209
|
-
const categories = this.sampleCategories
|
|
210
|
-
const data = this.sampleSeriesData
|
|
211
|
-
return categories.map(category => {
|
|
212
|
-
const values = data.filter(d => d.category === category).map(d => d.value)
|
|
213
|
-
const sorted = [...values].sort((a, b) => a - b)
|
|
214
|
-
const min = sorted[0]
|
|
215
|
-
const max = sorted[sorted.length - 1]
|
|
216
|
-
const mean = values.reduce((a, b) => a + b, 0) / values.length
|
|
217
|
-
const median =
|
|
218
|
-
sorted.length % 2 === 0
|
|
219
|
-
? (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2
|
|
220
|
-
: sorted[Math.floor(sorted.length / 2)]
|
|
221
|
-
const q1 = sorted[Math.floor(sorted.length / 4)]
|
|
222
|
-
const q3 = sorted[Math.floor((sorted.length * 3) / 4)]
|
|
223
|
-
// value: A그룹의 실제값(강조)
|
|
224
|
-
const value = data.find(d => d.category === category && d.org === 'A')?.value ?? mean
|
|
225
|
-
return {
|
|
226
|
-
org: category, // x축: 카테고리
|
|
227
|
-
min,
|
|
228
|
-
q1,
|
|
229
|
-
median,
|
|
230
|
-
q3,
|
|
231
|
-
max,
|
|
232
|
-
mean,
|
|
233
|
-
value
|
|
234
|
-
}
|
|
235
|
-
})
|
|
236
|
-
}
|
|
237
|
-
private get sampleBoxplotGroups(): string[] {
|
|
238
|
-
return this.sampleCategories
|
|
239
|
-
}
|
|
240
|
-
private get sampleCurrentGroup() {
|
|
241
|
-
return 'A'
|
|
242
|
-
}
|
|
243
|
-
|
|
244
123
|
// 현재 월을 YYYY-MM 형식으로 반환
|
|
245
124
|
private get currentMonth(): string {
|
|
246
125
|
const now = new Date()
|
|
@@ -748,45 +627,8 @@ export class KpiDashboardPage extends PageView {
|
|
|
748
627
|
if (this.error) return html`<div>${this.error}</div>`
|
|
749
628
|
return html`
|
|
750
629
|
<div class="dashboard-root">
|
|
751
|
-
<!--
|
|
752
|
-
<div class="
|
|
753
|
-
<div class="sample-chart-card">
|
|
754
|
-
<div class="sample-chart-title">그룹별 KPI 비교 (Radar)</div>
|
|
755
|
-
<div class="sample-chart-container">
|
|
756
|
-
<kpi-radar-chart
|
|
757
|
-
.data=${this.sampleRadarData ?? []}
|
|
758
|
-
.categories=${this.sampleRadarCategories ?? []}
|
|
759
|
-
.currentGroup=${this.sampleCurrentGroup}
|
|
760
|
-
></kpi-radar-chart>
|
|
761
|
-
</div>
|
|
762
|
-
<div style="margin-top:12px;color:#666;font-size:0.98em;">
|
|
763
|
-
※ <b>Radar 차트</b>는 각 카테고리별로 최소(Min), 최대(Max), 평균(Avg), 그리고 이 프로젝트의 값을 한눈에
|
|
764
|
-
비교할 수 있도록 시각화합니다.<br />
|
|
765
|
-
<b>진한 파란색</b> 다각형이 이 프로젝트의 성과이며, 회색 다각형은 기준값(최소/최대/평균)입니다.
|
|
766
|
-
</div>
|
|
767
|
-
</div>
|
|
768
|
-
<div class="sample-chart-card">
|
|
769
|
-
<div class="sample-chart-title">그룹별 분포 (Boxplot)</div>
|
|
770
|
-
<div class="sample-chart-container">
|
|
771
|
-
<kpi-boxplot-chart
|
|
772
|
-
.data=${this.sampleBoxplotData ?? []}
|
|
773
|
-
.groups=${this.sampleBoxplotGroups ?? []}
|
|
774
|
-
.currentGroup=${this.sampleCurrentGroup}
|
|
775
|
-
></kpi-boxplot-chart>
|
|
776
|
-
</div>
|
|
777
|
-
<div style="margin-top:12px;color:#666;font-size:0.98em;">
|
|
778
|
-
※ <b>Boxplot(박스플롯)</b>은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치
|
|
779
|
-
등)를 보여줍니다.<br />
|
|
780
|
-
<b>박스</b>는 중앙 50% 구간, <b>수염</b>은 전체 범위, <b>굵은 검정색 가로선</b>은 중앙값(메디안),
|
|
781
|
-
<b>주황색 원</b>은 평균값(Mean)을 의미합니다.<br />
|
|
782
|
-
<b>이 프로젝트의 값</b>은 <b>진한 오렌지색 원</b>으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수
|
|
783
|
-
있습니다.<br />
|
|
784
|
-
</div>
|
|
785
|
-
</div>
|
|
786
|
-
</div>
|
|
787
|
-
|
|
788
|
-
<!-- 실제 KPI 통계 차트 섹션 -->
|
|
789
|
-
<div class="sample-charts-section">
|
|
630
|
+
<!-- KPI 통계 차트 — kpiStatistics 를 그린다 -->
|
|
631
|
+
<div class="charts-section">
|
|
790
632
|
<!-- 통계 필터 및 요약 -->
|
|
791
633
|
<div style="margin-bottom: 24px; background: #f8f9fa; padding: 16px; border-radius: 8px;">
|
|
792
634
|
<div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
|
|
@@ -832,9 +674,9 @@ export class KpiDashboardPage extends PageView {
|
|
|
832
674
|
</div>
|
|
833
675
|
</div>
|
|
834
676
|
|
|
835
|
-
<div class="
|
|
836
|
-
<div class="
|
|
837
|
-
<div class="
|
|
677
|
+
<div class="chart-card">
|
|
678
|
+
<div class="chart-title">실제 KPI 통계 비교 (Radar)</div>
|
|
679
|
+
<div class="chart-container">
|
|
838
680
|
${this.statisticsLoading
|
|
839
681
|
? html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
|
|
840
682
|
통계 데이터 로딩 중...
|
|
@@ -855,9 +697,9 @@ export class KpiDashboardPage extends PageView {
|
|
|
855
697
|
<b>평균</b>은 산술평균, <b>중앙값</b>은 50분위수, <b>표준편차</b>는 데이터 분산 정도를 나타냅니다.
|
|
856
698
|
</div>
|
|
857
699
|
</div>
|
|
858
|
-
<div class="
|
|
859
|
-
<div class="
|
|
860
|
-
<div class="
|
|
700
|
+
<div class="chart-card">
|
|
701
|
+
<div class="chart-title">실제 KPI 통계 분포 (Boxplot)</div>
|
|
702
|
+
<div class="chart-container">
|
|
861
703
|
${this.statisticsLoading
|
|
862
704
|
? html`<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">
|
|
863
705
|
통계 데이터 로딩 중...
|
|
@@ -881,7 +723,7 @@ export class KpiDashboardPage extends PageView {
|
|
|
881
723
|
</div>
|
|
882
724
|
|
|
883
725
|
<!-- 3레벨 KPI 플로팅 섹션 -->
|
|
884
|
-
<div class="
|
|
726
|
+
<div class="charts-section">
|
|
885
727
|
<div style="margin-bottom: 24px;">
|
|
886
728
|
<h2 style="font-size: 1.5rem; font-weight: bold; color: #333; text-align: center; margin-bottom: 8px;">
|
|
887
729
|
3레벨 KPI 분석
|
|
@@ -3,7 +3,7 @@ import '@material/web/button/elevated-button.js';
|
|
|
3
3
|
// import '@material/web/select/outlined-select.js'
|
|
4
4
|
import '@material/web/textfield/outlined-text-field.js';
|
|
5
5
|
import '@material/web/icon/icon.js';
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
6
|
+
import { css, html, svg, LitElement } from 'lit';
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
8
|
import { i18next, localize } from '@operato/i18n';
|
|
9
9
|
import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
|
|
@@ -292,7 +292,11 @@ let KpiVizEditor = class KpiVizEditor extends localize(i18next)(LitElement) {
|
|
|
292
292
|
stroke-width="28"
|
|
293
293
|
/>
|
|
294
294
|
<!-- 눈금 -->
|
|
295
|
-
|
|
295
|
+
<!--
|
|
296
|
+
조각은 svg 태그로 만든다 — html 로 만들면 HTML 이름공간의 노드가 되어 <svg> 안에서
|
|
297
|
+
**소리 없이 안 그려진다**(오류도 경고도 없다). 눈금과 눈금 숫자가 그래서 없었다.
|
|
298
|
+
-->
|
|
299
|
+
${ticks.map(t => svg `<line
|
|
296
300
|
x1="${t.tx1 + 10}"
|
|
297
301
|
y1="${t.ty1}"
|
|
298
302
|
x2="${t.tx2 + 10}"
|
|
@@ -301,7 +305,7 @@ let KpiVizEditor = class KpiVizEditor extends localize(i18next)(LitElement) {
|
|
|
301
305
|
stroke-width="2"
|
|
302
306
|
/>`)}
|
|
303
307
|
<!-- 눈금 숫자 -->
|
|
304
|
-
${ticks.map(t =>
|
|
308
|
+
${ticks.map(t => svg `<text
|
|
305
309
|
x="${t.lx + 10}"
|
|
306
310
|
y="${t.ly}"
|
|
307
311
|
text-anchor="middle"
|
|
@@ -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'\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"]}
|
|
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"]}
|
|
@@ -25,15 +25,6 @@ export declare class KpiDashboardPage extends PageView {
|
|
|
25
25
|
statisticsLoading: boolean;
|
|
26
26
|
selectedPeriodType: string;
|
|
27
27
|
selectedValueDate: string;
|
|
28
|
-
private get sampleCategories();
|
|
29
|
-
private get sampleGroups();
|
|
30
|
-
private get sampleSeriesData();
|
|
31
|
-
private get sampleRadarData();
|
|
32
|
-
private get sampleRadarCategories();
|
|
33
|
-
private get sampleRadarGroups();
|
|
34
|
-
private get sampleBoxplotData();
|
|
35
|
-
private get sampleBoxplotGroups();
|
|
36
|
-
private get sampleCurrentGroup();
|
|
37
28
|
private get currentMonth();
|
|
38
29
|
private get filteredKpiStatistics();
|
|
39
30
|
private get availablePeriodTypes();
|