@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/package.json +1 -1
  2. package/build/components/data/icon-names.js +0 -129
  3. package/build/components/examples/opsnow-common-calendar-examples-data.js +0 -48
  4. package/build/components/examples/opsnow-common-chart-examples-data.js +0 -6590
  5. package/build/components/examples/opsnow-common-data-status-examples-data.js +0 -65
  6. package/build/components/examples/opsnow-common-file-upload-examples-data.js +0 -95
  7. package/build/components/examples/opsnow-common-forms-examples-data.js +0 -1699
  8. package/build/components/examples/opsnow-common-grid-examples-data.js +0 -2328
  9. package/build/components/examples/opsnow-common-icons-examples-data.js +0 -72
  10. package/build/components/examples/opsnow-common-layout-examples-data.js +0 -72
  11. package/build/components/examples/opsnow-common-notification-examples-data.js +0 -78
  12. package/build/components/examples/opsnow-common-pagination-examples-data.js +0 -82
  13. package/build/components/examples/opsnow-common-popup-examples-data.js +0 -205
  14. package/build/components/examples/opsnow-common-progress-examples-data.js +0 -86
  15. package/build/components/examples/opsnow-common-select-examples-data.js +0 -106
  16. package/build/components/examples/opsnow-common-stepper-examples-data.js +0 -180
  17. package/build/components/examples/opsnow-common-storage-examples-data.js +0 -8
  18. package/build/components/examples/opsnow-common-tab-examples-data.js +0 -87
  19. package/build/components/examples/opsnow-common-toast-popup-examples-data.js +0 -129
  20. package/build/components/examples/opsnow-common-tooltip-examples-data.js +0 -80
  21. package/build/components/examples/opsnow-common-typography-examples-data.js +0 -366
  22. package/build/components/opsnow-common-calendar.js +0 -228
  23. package/build/components/opsnow-common-chart.js +0 -1643
  24. package/build/components/opsnow-common-data-status.js +0 -116
  25. package/build/components/opsnow-common-examples.js +0 -109
  26. package/build/components/opsnow-common-file-upload.js +0 -57
  27. package/build/components/opsnow-common-forms.js +0 -1006
  28. package/build/components/opsnow-common-grid.js +0 -352
  29. package/build/components/opsnow-common-icons.js +0 -139
  30. package/build/components/opsnow-common-layout.js +0 -138
  31. package/build/components/opsnow-common-notification.js +0 -110
  32. package/build/components/opsnow-common-pagination.js +0 -164
  33. package/build/components/opsnow-common-popup.js +0 -71
  34. package/build/components/opsnow-common-progress.js +0 -177
  35. package/build/components/opsnow-common-select.js +0 -132
  36. package/build/components/opsnow-common-stepper.js +0 -72
  37. package/build/components/opsnow-common-tab.js +0 -111
  38. package/build/components/opsnow-common-toast-popup.js +0 -135
  39. package/build/components/opsnow-common-tooltip.js +0 -204
  40. package/build/components/opsnow-common-typography.js +0 -93
  41. package/build/index.js +0 -124
package/build/components/opsnow-common-chart.js DELETED
@@ -1,1643 +0,0 @@
1
- import { z } from "zod";
2
- const XyMultiChartSchema = z.object({
3
- chartId: z.string().describe("차트의 고유 식별자"),
4
- chartProps: z.object({}).describe(`
5
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
6
- **유효한 JSON 형식이어야합니다.**
7
- {
8
- // 차트 기본 설정
9
- "chart": {
10
- "paddingTop": 20, // 차트 상단 패딩 (px)
11
- "paddingBottom": 30, // 차트 하단 패딩 (px)
12
- "paddingLeft": 10, // 차트 좌측 패딩 (px)
13
- "paddingRight": 50 // 차트 우측 패딩 (px, 이중 축 사용 시 우측 여유 공간 확보)
14
- },
15
-
16
- // X축 설정
17
- "xAxis": {
18
- "type": "date", // 축 타입: 'date' | 'category'
19
- "valueField": "date", // X축 값 필드
20
- "dateFormats": [ // xAxis type이 'date'일 때 사용
21
- {
22
- "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
23
- "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
24
- }
25
- ],
26
- "baseInterval": { // xAxis type이 'date'일 때 사용
27
- "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
28
- "count": 1 // 간격 수(1로 고정이며 변경 불가)
29
- },
30
- "gridHidden": true, // 격자선 표시 여부 (기본값: true)
31
- "startLocation": 1, // X축 시작 위치 (0~1 사이 값)
32
- "endLocation": 0, // X축 끝 위치 (0~1 사이 값)
33
- "cellStartLocation": 0.1, // 셀 시작 위치 (0~1, Grouped Bar 간격 조정 시 사용)
34
- "cellEndLocation": 0.9, // 셀 끝 위치 (0~1, Grouped Bar 간격 조정 시 사용)
35
- "strictMinMax": false, // X축 최소/최대값 엄격 적용 여부
36
- "renderer": { // 렌더러 설정
37
- "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
38
- }
39
- },
40
-
41
- // Y축 설정
42
- "yAxis": {
43
- "type": "value", // Y축 타입: 'value'
44
- "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
45
- "min": 0, // Y축 최소값 직접 지정
46
- "max": 100, // Y축 최대값 직접 지정
47
- "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
48
- "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
49
- "strictMinMax": true, // Y축 최소/최대값 엄격 적용 여부
50
- "gridHidden": false, // Y축 격자선 표시 여부
51
- "label": { // Y축 라벨 설정
52
- "maxWidth": 100, // Y축 라벨 최대 너비
53
- "rotation": 0, // Y축 라벨 회전 각도
54
- "fontSize": 12, // Y축 라벨 폰트 크기
55
- "color": "#666666" // Y축 라벨 색상
56
- },
57
- "numberFormatter": { // 숫자 포맷터 설정
58
- "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
59
- "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
60
- {
61
- "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
62
- "suffix": "K" // 접미사 (예: K, M, B, T 등)
63
- },
64
- {
65
- "number": 1000000,
66
- "suffix": "M"
67
- }
68
- ],
69
- "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
70
- {
71
- "number": 0.001,
72
- "suffix": "m"
73
- }
74
- ]
75
- }
76
- },
77
-
78
- // 보조 Y축 설정 (이중 축 차트에서 사용, seriesTypes[].yAxis에서 'yAxis2'로 참조)
79
- "yAxis2": {
80
- "type": "value", // 보조 Y축 타입: 'value'
81
- "numberFormat": "#'%'", // 보조 Y축 숫자 포맷
82
- "opposite": true, // 반대편(우측)에 표시 (기본값: true)
83
- "gridHidden": true, // 보조 Y축 격자선 숨김 여부
84
- "min": 0, // 보조 Y축 최소값 직접 지정
85
- "max": 100, // 보조 Y축 최대값 직접 지정
86
- "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
87
- "extraMax": 0.1 // 최대값 위 추가 여유 공간 (0~1 비율)
88
- },
89
-
90
- // 시리즈 설정
91
- "series": {
92
- "valueXField": "date", // X축 값 필드
93
- "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
94
- "dateFields": ["date"], // X축 값 필드
95
- "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
96
- },
97
- "seriesTypes": [ // XY 멀티 차트용 시리즈 타입 설정
98
- {
99
- "type": "stack-line", // 시리즈 타입: 'line' | 'stack' | 'stack-line'
100
- "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
101
- "order": "front", // 시리즈 순서: 'front' | 'back'
102
- "connect": true, // 라인 연결 여부
103
- "lineType": "smoothedX", // 라인 스무딩 타입
104
- "bullet": { // 불릿 설정, 라인 유형 차트에서 필수
105
- "type": "circle", // 불릿 타입: 'circle' | 'square' | 'triangle' | 'label'
106
- "lineOnly": true, // 라인만 표시 여부
107
- "cursorOverStyle": "pointer", // 마우스 오버시 커서 스타일
108
- "customField": "custom_bullet", // 불릿 커스텀 필드
109
- "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
110
- "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
111
- "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
112
- "dy": -10, // Y축 오프셋
113
- "dx": 0, // X축 오프셋
114
- "text": "{valueY}", // 라벨 텍스트
115
- "fontSize": 12, // 폰트 크기
116
- "format": "#,###", // 숫자 포맷
117
- "prefix": "", // 접두사
118
- "suffix": "", // 접미사
119
- "background": { // 라벨 배경 설정
120
- "fill": "#ffffff", // 배경 색상
121
- "fillOpacity": 0.8 // 배경 투명도
122
- }
123
- }
124
- },
125
- "clickTarget": true, // 클릭 대상 여부
126
- "setPreviousToZero": false, // 이전 데이터를 0으로 설정 여부
127
- "strokeDasharray": [5, 5], // 라인 점선 패턴
128
- "strokeWidth": 2, // 라인 두께
129
- "area": { // 영역 설정
130
- "type": "range", // 영역 타입
131
- "opacity": 0.3, // 영역 투명도 (0~1)
132
- "openValueField": "open_value", // 영역 시작 값 필드
133
- "fillOpacity": 0.5 // 영역 투명도 (0~1)
134
- },
135
- "yAxis": "cost_axis", // 같은 카테고리 그룹에서 사용할 Y축 필드
136
- "noRisers": false, // 라인 높이 조정 여부
137
- "layer": 1, // 레이어 순서
138
- "columns": { // 칼럼 설정, 컬럼 유형 차트에서 필수
139
- "width": "p50", // 칼럼 너비 (예: p50 = 50%), 컬럼 바 차트일 때만 필요함
140
- "height": "p80", // 칼럼 높이 (예: p80 = 80%), 바 차트일 때만 필요함
141
- "hover": { // 호버 설정
142
- "enabled": true, // 호버 표시 여부
143
- "grouped": true // 그룹 표시 여부
144
- },
145
- "fillOpacity": 0.8, // 칼럼 투명도 (0~1)
146
- "fillPattern": "diagonal" // 칼럼 패턴: 'diagonal' | 'horizontal' | 'vertical' | 'none'
147
- }
148
- },
149
- {
150
- "type": "stack", // 스택 타입
151
- "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
152
- "columns": {
153
- "width": "p50",
154
- "hover": {
155
- "enabled": true,
156
- "grouped": true
157
- }
158
- }
159
- }
160
- ],
161
- "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
162
- "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
163
- "withinArea": true, // 차트 영역 내에서만 툴팁 표시 여부
164
- "stopActionEnabled": false, // 툴팁 액션 중지 여부
165
- "orientation": "horizontal", // 툴팁 방향: 'horizontal' | 'vertical'
166
- "showAt": "ondemand_cost", // 특정 카테고리 그룹에서만 툴팁 표시
167
- "position": { // 툴팁 위치 설정
168
- "topFixed": true, // 상단 고정
169
- "criteria": "pointer" // 위치 기준
170
- },
171
- "header": { // 툴팁 헤더 설정
172
- "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름 (단순 문자열)
173
- // 또는 카테고리별로 다른 헤더를 표시하려면:
174
- // "name": [
175
- // {
176
- // "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
177
- // "value": "{l.cost}" // 헤더 값
178
- // },
179
- // {
180
- // "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
181
- // "value": "{l.usage}" // 헤더 값
182
- // }
183
- // ]
184
- },
185
- "body": { // 툴팁 바디 설정
186
- "maxRowCount": 6, // 최대 행 개수
187
- "name": "{name}", // 툴팁 바디 이름
188
- "value": [ // 툴팁 바디 값 (배열 형태로 카테고리별 설정 가능)
189
- {
190
- "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
191
- "value": "{valueY.formatNumber('0,0')}({valueYPercent.formatNumber('0.0')}%)" // 바디 값
192
- },
193
- {
194
- "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
195
- "value": "{valueY.formatNumber('0,0')}"
196
- }
197
- ],
198
- "useMarker": true // 툴팁 바디 마커 사용 여부
199
- },
200
- "footer": { // 툴팁 푸터 설정
201
- "name": "{l.total}", // 툴팁 푸터 이름 (단순 문자열)
202
- "value": "{valueYSum.formatNumber('0,0')}" // 툴팁 푸터 값 (단순 문자열)
203
- // 또는 카테고리별로 다른 푸터를 표시하려면:
204
- // "name": [
205
- // {
206
- // "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
207
- // "value": "{l.total}" // 푸터 이름
208
- // }
209
- // ],
210
- // "value": [
211
- // {
212
- // "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
213
- // "value": "{valueYSum.formatNumber('0,0')}(100.0%)" // 푸터 값
214
- // },
215
- // {
216
- // "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
217
- // "value": "{valueYSum.formatNumber('0,0')}"
218
- // }
219
- // ]
220
- },
221
- "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
222
- },
223
- "animation": { // 애니메이션 설정
224
- "duration": 2000, // 애니메이션 지속 시간
225
- "delay": 500 // 애니메이션 지연 시간
226
- }
227
- },
228
-
229
- // 커서 설정
230
- "cursor": {
231
- "visibleY": false // Y축 커서 표시 여부
232
- },
233
-
234
- // 범례 설정
235
- "legend": {
236
- "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
237
- "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
238
- }
239
- }
240
- `),
241
- chartData: z.array(z.record(z.any())
242
- .and(z.object({
243
- bullet_alarm: z.object({
244
- type: z.enum(['alarm']).describe('알람 타입'),
245
- target: z.string().describe('알람 대상 필드명')
246
- }).optional().describe('알람 표시를 위한 bullet 설정')
247
- })))
248
- .optional().describe(`차트에 표시할 데이터 배열입니다.
249
- 예시)
250
- [
251
- {
252
- 'date': '2022-07-01',
253
- 'cost_test_01': 3,
254
- 'cost_test_02': 7
255
- },
256
- {
257
- 'date': '2022-07-02',
258
- 'cost_test_01': 5,
259
- 'cost_test_02': 10
260
- }
261
- ]`),
262
- chartCategory: z.array(z.object({
263
- name: z.string(),
264
- categories: z.array(z.string())
265
- })).describe(`차트 카테고리 설정입니다.
266
- 예시)
267
- [
268
- {
269
- name: 'ondemand_cost',
270
- categories: [
271
- 'rds_ondemand_cost',
272
- 'elasti_cache_ondemand_cost'
273
- ]
274
- },
275
- {
276
- name: 'savings_cost',
277
- categories: [
278
- 'rds_savings_cost'
279
- ]
280
- }
281
- ]
282
- `),
283
- chartLocaleProps: z.array(z.object({
284
- name: z.string(),
285
- locale: z.string()
286
- }))
287
- .optional()
288
- .describe(`차트에 적용할 다국어 목록입니다.
289
- 예시)
290
- [
291
- {
292
- 'name': 'l.cost.test',
293
- 'locale': t('cost.test')
294
- }
295
- ]`),
296
- chartLocaleData: z.array(z.object({
297
- name: z.string().describe("chartData에 정의된 필드 이름"),
298
- value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
299
- locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
300
- }))
301
- .optional()
302
- .describe(`차트 데이터에 다국어를 적용합니다.
303
- 예시)
304
- [
305
- {
306
- name: 'category',
307
- value: 'Usage',
308
- locale: $t('usage')
309
- }
310
- ]`),
311
- chartLocaleMessage: z.array(z.object({
312
- name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
313
- locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
314
- }))
315
- .optional()
316
- .describe(`차트 특정 메시지에 다국어를 적용합니다.
317
- 예시)
318
- [
319
- {
320
- name: '사용량',
321
- locale: $t('usage')
322
- },
323
- {
324
- name: '상한',
325
- locale: $t('maximum')
326
- }
327
- ]`),
328
- chartCategoryLocaleMapping: z.array(z.object({
329
- name: z.string(),
330
- value: z.string()
331
- }))
332
- .optional()
333
- .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
334
- 예시)
335
- [
336
- {
337
- 'name': 'cost_test_01',
338
- 'value': '{l.cost.test} 01'
339
- }
340
- ]`),
341
- // 사용자 정의 설정
342
- chartCustomCategory: z.array(z.object({
343
- name: z.string(),
344
- color: z.string().optional(),
345
- pattern: z.string().optional(),
346
- shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
347
- strokeDasharray: z.array(z.number()).optional(),
348
- tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
349
- }).describe('사용자 정의 카테고리 스타일 및 설정'))
350
- .optional()
351
- .describe("사용자 정의 카테고리 스타일 및 설정"),
352
- chartUserDefinedFunc: z.record(z.string()).optional().describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
353
- langCd: z.string().optional().describe("언어 코드"),
354
- onChartClick: z.string().optional().describe("차트 클릭 이벤트"),
355
- onSeriesPointerOver: z.string().optional().describe("시리즈 포인터 오버 이벤트"),
356
- chartTooltipDetailText: z.string().optional().describe("툴팁에서 보여주는 상세 텍스트")
357
- });
358
- // opsnow-common-stack-chart
359
- export const StackChartSchema = z.object({
360
- // 차트 식별자 및 데이터
361
- chartId: z.string().describe("차트의 고유 식별자"),
362
- chartProps: z.object({}).describe(`
363
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
364
- **유효한 JSON 형식이어야합니다.**
365
- {
366
- // 차트 기본 설정
367
- "chart": {
368
- "paddingTop": 20, // 차트 상단 패딩 (px)
369
- "paddingBottom": 30, // 차트 하단 패딩 (px)
370
- "paddingLeft": 10, // 차트 좌측 패딩 (px)
371
- "paddingRight": 30 // 차트 우측 패딩 (px)
372
- },
373
-
374
- // X축 설정
375
- "xAxis": {
376
- "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
377
- "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
378
- "dateFormats": [ // xAxis type이 'date'일 때 사용
379
- {
380
- "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
381
- "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
382
- }
383
- ],
384
- "baseInterval": { // xAxis type이 'date'일 때 사용
385
- "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
386
- "count": 1 // 간격 수(1로 고정이며 변경 불가)
387
- },
388
- "gridHidden": true, // 격자선 표시 여부 (기본값: true)
389
- "renderer": { // 렌더러 설정
390
- "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
391
- }
392
- },
393
-
394
- // Y축 설정
395
- "yAxis": {
396
- "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
397
- "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
398
- "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
399
- "min": 0, // Y축 최소값 직접 지정
400
- "max": 100, // Y축 최대값 직접 지정
401
- "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
402
- "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
403
- "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
404
- "numberFormatter": { // 숫자 포맷터 설정
405
- "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
406
- "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
407
- {
408
- "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
409
- "suffix": "K" // 접미사 (예: K, M, B, T 등)
410
- },
411
- {
412
- "number": 1000000,
413
- "suffix": "M"
414
- }
415
- ],
416
- "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
417
- {
418
- "number": 0.001,
419
- "suffix": "m"
420
- }
421
- ]
422
- }
423
- },
424
-
425
- // 시리즈 설정
426
- "series": {
427
- "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
428
- "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
429
- "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
430
- "dateFields": ["date"], // X축 값 필드
431
- "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
432
- },
433
- "columns": { // 칼럼 설정
434
- "width": "p50", // 칼럼 너비 (예: p50 = 50%), 축 변경시 필요 없음
435
- "height": "p80", // 칼럼 높이 (예: p80 = 80%), 축 변경시 필요
436
- "hover": { // 호버 설정
437
- "enabled": true, // 호버 표시 여부
438
- "grouped": true // 그룹 표시 여부
439
- }
440
- },
441
- "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
442
- "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
443
- "header": { // 툴팁 헤더 설정
444
- "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
445
- },
446
- "body": { // 툴팁 바디 설정
447
- "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
448
- "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
449
- "useMarker": true // 툴팁 바디 마커 사용 여부
450
- },
451
- "footer": { // 툴팁 푸터 설정
452
- "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
453
- "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
454
- },
455
- "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
456
- },
457
- "bullet": { // 스택 차트의 블릿 설정 (선택 사항)
458
- "type": "label", // 블릿 타입: 'circle' | 'square' | 'triangle' | 'label'
459
- "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
460
- "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
461
- "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
462
- "dy": -10, // Y축 오프셋
463
- "dx": 0, // X축 오프셋
464
- "text": "{valueY}", // 라벨 텍스트
465
- "fontSize": 12, // 폰트 크기
466
- "format": "#,###", // 숫자 포맷
467
- "prefix": "", // 접두사
468
- "suffix": "", // 접미사
469
- "background": { // 라벨 배경 설정
470
- "fill": "#ffffff", // 배경 색상
471
- "fillOpacity": 0.8 // 배경 투명도
472
- }
473
- }
474
- },
475
- "topNOthers": { // Top N + Others 옵션
476
- "topN": 5, // 상위 N개 항목만 표시
477
- "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
478
- "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
479
- "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
480
- "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
481
- "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
482
- },
483
- "animation": { // 애니메이션 설정
484
- "duration": 2000, // 애니메이션 지속 시간
485
- "delay": 500 // 애니메이션 지연 시간
486
- }
487
- },
488
-
489
- // 범례 설정
490
- "legend": {
491
- "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
492
- "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
493
- }
494
- }
495
- `),
496
- chartData: z.array(z.record(z.any())
497
- .and(z.object({
498
- customLabel: z.string().optional().describe('해당 데이터의 축 라벨(예: X축 또는 범례 이름)을 커스터마이징'),
499
- columnSettings: z
500
- .object({
501
- strokeWidth: z.number().optional().describe('선 두께'),
502
- strokeDasharray: z.array(z.number()).optional().describe('점선 패턴'),
503
- fillOpacity: z.number().optional().describe('채우기 투명도'),
504
- fillPattern: z.enum(['diagonal']).optional().describe('채우기 패턴'),
505
- stroke: z.string().optional().describe('선 색상'),
506
- fill: z.string().optional().describe('채우기 색상'),
507
- })
508
- .optional().describe('해당 데이터 시리즈의 시각적 스타일을 정의'),
509
- })))
510
- .optional().describe(`차트에 표시할 데이터 배열입니다.
511
- 예시)
512
- [
513
- {
514
- 'date': '2022-07-01',
515
- 'cost_test_01': 3,
516
- 'cost_test_02': 7
517
- },
518
- {
519
- 'date': '2022-07-02',
520
- 'cost_test_01': 5,
521
- 'cost_test_02': 10
522
- }
523
- ]`),
524
- chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
525
- 예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
526
- [
527
- {
528
- 'date': '2022-07-01',
529
- 'cost_test_01': 3,
530
- 'cost_test_02': 7
531
- },
532
- {
533
- 'date': '2022-07-02',
534
- 'cost_test_01': 5,
535
- 'cost_test_02': 10
536
- }
537
- ]`),
538
- // 국제화 설정
539
- chartLocaleProps: z.array(z.object({
540
- name: z.string(),
541
- locale: z.string()
542
- }))
543
- .optional()
544
- .describe(`차트에 적용할 다국어 목록입니다.
545
- 예시)
546
- [
547
- {
548
- 'name': 'l.cost.test',
549
- 'locale': t('cost.test')
550
- }
551
- ]`),
552
- chartLocaleData: z.array(z.object({
553
- name: z.string().describe("chartData에 정의된 필드 이름"),
554
- value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
555
- locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
556
- }))
557
- .optional()
558
- .describe(`차트 데이터에 다국어를 적용합니다.
559
- 예시)
560
- [
561
- {
562
- name: 'category',
563
- value: 'Usage',
564
- locale: $t('usage')
565
- }
566
- ]`),
567
- chartLocaleMessage: z.array(z.object({
568
- name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
569
- locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
570
- }))
571
- .optional()
572
- .describe(`차트 특정 메시지에 다국어를 적용합니다.
573
- 예시)
574
- [
575
- {
576
- name: '사용량',
577
- locale: $t('usage')
578
- },
579
- {
580
- name: '상한',
581
- locale: $t('maximum')
582
- }
583
- ]`),
584
- chartCategoryLocaleMapping: z.array(z.object({
585
- name: z.string(),
586
- value: z.string()
587
- }))
588
- .optional()
589
- .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
590
- 예시)
591
- [
592
- {
593
- 'name': 'cost_test_01',
594
- 'value': '{l.cost.test} 01'
595
- }
596
- ]`),
597
- // 사용자 정의 설정
598
- chartCustomCategory: z.array(z.object({
599
- name: z.string(),
600
- color: z.string().optional(),
601
- pattern: z.string().optional(),
602
- shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
603
- strokeDasharray: z.array(z.number()).optional(),
604
- tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
605
- }))
606
- .optional()
607
- .describe("사용자 정의 카테고리 스타일 및 설정"),
608
- // 기타 설정
609
- chartTooltipDetailText: z.string()
610
- .optional()
611
- .describe("툴팁에서 보여주는 상세 텍스트"),
612
- chartSelectAllLegends: z.string()
613
- .optional()
614
- .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
615
- chartUnfoldLegend: z.string()
616
- .optional()
617
- .describe("'범례 전체 펼침' 버튼 다국어 적용"),
618
- chartFoldLegend: z.string()
619
- .optional()
620
- .describe("'범례 전체 접힘' 버튼 다국어 적용"),
621
- chartUserDefinedFunc: z.record(z.string())
622
- .optional()
623
- .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
624
- langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
625
- .optional()
626
- .describe("언어 코드"),
627
- onChartClick: z.string()
628
- .optional()
629
- .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
630
- });
631
- // opsnow-common-bar-chart
632
- export const BarChartSchema = z.object({
633
- // 차트 식별자 및 데이터
634
- chartId: z.string().describe("차트의 고유 식별자"),
635
- chartProps: z.object({}).describe(`
636
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
637
- **유효한 JSON 형식이어야합니다.**
638
- {
639
- // 차트 기본 설정
640
- "chart": {
641
- "paddingTop": 20, // 차트 상단 패딩 (px)
642
- "paddingBottom": 30, // 차트 하단 패딩 (px)
643
- "paddingLeft": 10, // 차트 좌측 패딩 (px)
644
- "paddingRight": 30 // 차트 우측 패딩 (px)
645
- },
646
-
647
- // X축 설정
648
- "xAxis": {
649
- "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
650
- "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
651
- "dateFormats": [ // xAxis type이 'date'일 때 사용
652
- {
653
- "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
654
- "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
655
- }
656
- ],
657
- "baseInterval": { // xAxis type이 'date'일 때 사용
658
- "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
659
- "count": 1 // 간격 수(1로 고정이며 변경 불가)
660
- },
661
- "gridHidden": true, // 격자선 표시 여부 (기본값: true)
662
- "renderer": { // 렌더러 설정
663
- "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
664
- }
665
- },
666
-
667
- // Y축 설정
668
- "yAxis": {
669
- "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
670
- "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
671
- "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
672
- "min": 0, // Y축 최소값 직접 지정
673
- "max": 100, // Y축 최대값 직접 지정
674
- "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
675
- "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
676
- "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
677
- "numberFormatter": { // 숫자 포맷터 설정
678
- "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
679
- "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
680
- {
681
- "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
682
- "suffix": "K" // 접미사 (예: K, M, B, T 등)
683
- },
684
- {
685
- "number": 1000000,
686
- "suffix": "M"
687
- }
688
- ],
689
- "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
690
- {
691
- "number": 0.001,
692
- "suffix": "m"
693
- }
694
- ]
695
- }
696
- },
697
-
698
- // 시리즈 설정
699
- "series": {
700
- "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
701
- "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
702
- "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
703
- "dateFields": ["date"], // X축 값 필드
704
- "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
705
- },
706
- "columns": { // 칼럼 설정
707
- "width": "p50", // 칼럼 너비 (예: p50 = 50%), 축 변경시 필요 없음
708
- "height": "p80", // 칼럼 높이 (예: p80 = 80%), 축 변경시 필요
709
- "hover": { // 호버 설정
710
- "enabled": true, // 호버 표시 여부
711
- "grouped": true // 그룹 표시 여부
712
- }
713
- },
714
- "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
715
- "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
716
- "header": { // 툴팁 헤더 설정
717
- "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
718
- },
719
- "body": { // 툴팁 바디 설정
720
- "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
721
- "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
722
- "useMarker": true // 툴팁 바디 마커 사용 여부
723
- },
724
- "footer": { // 툴팁 푸터 설정
725
- "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
726
- "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
727
- },
728
- "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
729
- },
730
- "bullet": { // 바 차트의 블릿 설정 (선택 사항)
731
- "type": "label", // 블릿 타입: 'circle' | 'square' | 'triangle' | 'label'
732
- "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
733
- "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
734
- "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
735
- "dy": -10, // Y축 오프셋
736
- "dx": 0, // X축 오프셋
737
- "text": "{valueY}", // 라벨 텍스트
738
- "fontSize": 12, // 폰트 크기
739
- "format": "#,###", // 숫자 포맷
740
- "prefix": "", // 접두사
741
- "suffix": "", // 접미사
742
- "background": { // 라벨 배경 설정
743
- "fill": "#ffffff", // 배경 색상
744
- "fillOpacity": 0.8 // 배경 투명도
745
- }
746
- }
747
- },
748
- "topNOthers": { // Top N + Others 옵션
749
- "topN": 5, // 상위 N개 항목만 표시
750
- "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
751
- "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
752
- "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
753
- "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
754
- "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
755
- },
756
- "animation": { // 애니메이션 설정
757
- "duration": 2000, // 애니메이션 지속 시간
758
- "delay": 500 // 애니메이션 지연 시간
759
- }
760
- },
761
-
762
- // 범례 설정
763
- "legend": {
764
- "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
765
- "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
766
- }
767
- }
768
- `),
769
- chartData: z.array(z.record(z.any())
770
- .and(z.object({
771
- customLabel: z.string().optional().describe('해당 데이터의 축 라벨(예: X축 또는 범례 이름)을 커스터마이징'),
772
- columnSettings: z
773
- .object({
774
- strokeWidth: z.number().optional().describe('선 두께'),
775
- strokeDasharray: z.array(z.number()).optional().describe('점선 패턴'),
776
- fillOpacity: z.number().optional().describe('채우기 투명도'),
777
- fillPattern: z.enum(['diagonal']).optional().describe('채우기 패턴'),
778
- })
779
- .optional().describe('해당 데이터 시리즈의 시각적 스타일을 정의'),
780
- })))
781
- .optional().describe(`차트에 표시할 데이터 배열입니다.
782
- 예시)
783
- [
784
- {
785
- 'date': '2022-07-01',
786
- 'cost_test_01': 3,
787
- 'cost_test_02': 7
788
- },
789
- {
790
- 'date': '2022-07-02',
791
- 'cost_test_01': 5,
792
- 'cost_test_02': 10
793
- }
794
- ]`),
795
- chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
796
- 예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
797
- [
798
- {
799
- 'date': '2022-07-01',
800
- 'cost_test_01': 3,
801
- 'cost_test_02': 7
802
- },
803
- {
804
- 'date': '2022-07-02',
805
- 'cost_test_01': 5,
806
- 'cost_test_02': 10
807
- }
808
- ]`),
809
- // 국제화 설정
810
- chartLocaleProps: z.array(z.object({
811
- name: z.string(),
812
- locale: z.string()
813
- }))
814
- .optional()
815
- .describe(`차트에 적용할 다국어 목록입니다.
816
- 예시)
817
- [
818
- {
819
- 'name': 'l.cost.test',
820
- 'locale': t('cost.test')
821
- }
822
- ]`),
823
- chartLocaleData: z.array(z.object({
824
- name: z.string().describe("chartData에 정의된 필드 이름"),
825
- value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
826
- locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
827
- }))
828
- .optional()
829
- .describe(`차트 데이터에 다국어를 적용합니다.
830
- 예시)
831
- [
832
- {
833
- name: 'category',
834
- value: 'Usage',
835
- locale: $t('usage')
836
- }
837
- ]`),
838
- chartLocaleMessage: z.array(z.object({
839
- name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
840
- locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
841
- }))
842
- .optional()
843
- .describe(`차트 특정 메시지에 다국어를 적용합니다.
844
- 예시)
845
- [
846
- {
847
- name: '사용량',
848
- locale: $t('usage')
849
- },
850
- {
851
- name: '상한',
852
- locale: $t('maximum')
853
- }
854
- ]`),
855
- chartCategoryLocaleMapping: z.array(z.object({
856
- name: z.string(),
857
- value: z.string()
858
- }))
859
- .optional()
860
- .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
861
- 예시)
862
- [
863
- {
864
- 'name': 'cost_test_01',
865
- 'value': '{l.cost.test} 01'
866
- }
867
- ]`),
868
- // 사용자 정의 설정
869
- chartCustomCategory: z.array(z.object({
870
- name: z.string(),
871
- color: z.string().optional(),
872
- pattern: z.string().optional(),
873
- shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
874
- strokeDasharray: z.array(z.number()).optional(),
875
- tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
876
- }).describe('사용자 정의 카테고리 스타일 및 설정'))
877
- .optional()
878
- .describe("사용자 정의 카테고리 스타일 및 설정"),
879
- // 기타 설정
880
- chartTooltipDetailText: z.string()
881
- .optional()
882
- .describe("툴팁에서 보여주는 상세 텍스트"),
883
- chartSelectAllLegends: z.string()
884
- .optional()
885
- .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
886
- chartUnfoldLegend: z.string()
887
- .optional()
888
- .describe("'범례 전체 펼침' 버튼 다국어 적용"),
889
- chartFoldLegend: z.string()
890
- .optional()
891
- .describe("'범례 전체 접힘' 버튼 다국어 적용"),
892
- chartUserDefinedFunc: z.record(z.string())
893
- .optional()
894
- .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
895
- langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
896
- .optional()
897
- .describe("언어 코드"),
898
- onChartClick: z.string()
899
- .optional()
900
- .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
901
- });
902
- // opsnow-common-line-chart
903
- export const LineChartSchema = z.object({
904
- // 차트 식별자 및 데이터
905
- chartId: z.string().describe("차트의 고유 식별자"),
906
- chartProps: z.object({}).describe(`
907
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
908
- **유효한 JSON 형식이어야합니다.**
909
- {
910
- // 차트 기본 설정
911
- "chart": {
912
- "paddingTop": 20, // 차트 상단 패딩 (px)
913
- "paddingBottom": 30, // 차트 하단 패딩 (px)
914
- "paddingLeft": 10, // 차트 좌측 패딩 (px)
915
- "paddingRight": 30 // 차트 우측 패딩 (px)
916
- },
917
-
918
- // X축 설정
919
- "xAxis": {
920
- "type": "category", // 축 타입: 'date' | 'value' | 'category'
921
- "valueField": "date", // X축 값 필드
922
- "dateFormats": [ // xAxis type이 'date'일 때 사용
923
- {
924
- "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
925
- "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
926
- }
927
- ],
928
- "baseInterval": { // xAxis type이 'date'일 때 사용
929
- "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
930
- "count": 1 // 간격 수(1로 고정이며 변경 불가)
931
- },
932
- "gridHidden": true, // 격자선 표시 여부 (기본값: true)
933
- "renderer": { // 렌더러 설정
934
- "minGridDistance": 50 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
935
- }
936
- },
937
-
938
- // Y축 설정
939
- "yAxis": {
940
- "type": "value", // Y축 타입: 'value' | 'date' | 'category'
941
- "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
942
- "min": 0, // Y축 최소값 직접 지정
943
- "max": 100, // Y축 최대값 직접 지정
944
- "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
945
- "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
946
- "numberFormatter": { // 숫자 포맷터 설정
947
- "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
948
- "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
949
- {
950
- "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
951
- "suffix": "K" // 접미사 (예: K, M, B, T 등)
952
- },
953
- {
954
- "number": 1000000,
955
- "suffix": "M"
956
- }
957
- ],
958
- "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
959
- {
960
- "number": 0.001,
961
- "suffix": "m"
962
- }
963
- ]
964
- }
965
- },
966
-
967
- // 시리즈 설정
968
- "series": {
969
- "valueXField": "date", // X축 값 필드
970
- "connect": true, // 시리즈 연결 여부 (기본값: true)
971
- "area": { // min-max area 영역 표시 옵션
972
- "type": "min-max", // area 타입 (현재 min-max만 지원)
973
- "minMaxCategories": { // min/max 카테고리명
974
- "min": "min_value", // 최소값 카테고리명
975
- "max": "max_value" // 최대값 카테고리명
976
- },
977
- "fill": "#ff0000", // area 채우기 색상
978
- "fillOpacity": 0.3 // area 투명도 (0~1)
979
- },
980
- "clickTarget": true, // 시리즈 클릭 대상 여부 (기본값: false)
981
- "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
982
- "dateFields": ["date"], // X축 값 필드
983
- "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
984
- },
985
- "bullet": { // 라인 차트의 블릿 설정으로 필수 속성
986
- "type": "circle", // 라인 차트의 블릿 타입: 'circle' | 'square' | 'triangle' | 'label' (기본값: "circle")
987
- "cursorOverStyle": "pointer", // 커서 오버 스타일, 클릭 대상이 true일 때 사용: "pointer" | "hand" (기본값: "pointer")
988
- "lineOnly": false, // 라인만 표시 여부 (기본값: false)
989
- "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
990
- "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
991
- "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
992
- "dy": -10, // Y축 오프셋
993
- "dx": 0, // X축 오프셋
994
- "text": "{valueY}", // 라벨 텍스트
995
- "fontSize": 12, // 폰트 크기
996
- "format": "#,###", // 숫자 포맷
997
- "prefix": "", // 접두사
998
- "suffix": "", // 접미사
999
- "background": { // 라벨 배경 설정
1000
- "fill": "#ffffff", // 배경 색상
1001
- "fillOpacity": 0.8 // 배경 투명도
1002
- }
1003
- }
1004
- },
1005
- "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
1006
- "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
1007
- "header": { // 툴팁 헤더 설정
1008
- "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
1009
- },
1010
- "body": { // 툴팁 바디 설정
1011
- "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
1012
- "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
1013
- "useMarker": true // 툴팁 바디 마커 사용 여부
1014
- },
1015
- "footer": { // 툴팁 푸터 설정
1016
- "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
1017
- "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
1018
- },
1019
- "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
1020
- },
1021
- "topNOthers": { // Top N + Others 옵션
1022
- "topN": 5, // 상위 N개 항목만 표시
1023
- "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
1024
- "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
1025
- "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
1026
- "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
1027
- "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
1028
- },
1029
- "animation": { // 애니메이션 설정
1030
- "duration": 2000, // 애니메이션 지속 시간
1031
- "delay": 500 // 애니메이션 지연 시간
1032
- }
1033
- },
1034
-
1035
- // 범례 설정
1036
- "legend": {
1037
- "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
1038
- "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
1039
- }
1040
- }
1041
- `),
1042
- chartData: z.array(z.record(z.any())).optional().describe(`차트에 표시할 데이터 배열입니다.
1043
- 예시)
1044
- [
1045
- {
1046
- 'date': '2022-07-01',
1047
- 'cost_test_01': 3,
1048
- 'cost_test_02': 7
1049
- },
1050
- {
1051
- 'date': '2022-07-02',
1052
- 'cost_test_01': 5,
1053
- 'cost_test_02': 10
1054
- }
1055
- ]`),
1056
- chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
1057
- 예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
1058
- [
1059
- {
1060
- 'date': '2022-07-01',
1061
- 'cost_test_01': 3,
1062
- 'cost_test_02': 7
1063
- },
1064
- {
1065
- 'date': '2022-07-02',
1066
- 'cost_test_01': 5,
1067
- 'cost_test_02': 10
1068
- }
1069
- ]`),
1070
- // 국제화 설정
1071
- chartLocaleProps: z.array(z.object({
1072
- name: z.string(),
1073
- locale: z.string()
1074
- }))
1075
- .optional()
1076
- .describe(`차트에 적용할 다국어 목록입니다.
1077
- 예시)
1078
- [
1079
- {
1080
- 'name': 'l.cost.test',
1081
- 'locale': t('cost.test')
1082
- }
1083
- ]`),
1084
- chartLocaleData: z.array(z.object({
1085
- name: z.string().describe("chartData에 정의된 필드 이름"),
1086
- value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
1087
- locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
1088
- }))
1089
- .optional()
1090
- .describe(`차트 데이터에 다국어를 적용합니다.
1091
- 예시)
1092
- [
1093
- {
1094
- name: 'category',
1095
- value: 'Usage',
1096
- locale: $t('usage')
1097
- }
1098
- ]`),
1099
- chartLocaleMessage: z.array(z.object({
1100
- name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
1101
- locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
1102
- }))
1103
- .optional()
1104
- .describe(`차트 특정 메시지에 다국어를 적용합니다.
1105
- 예시)
1106
- [
1107
- {
1108
- name: '사용량',
1109
- locale: $t('usage')
1110
- },
1111
- {
1112
- name: '상한',
1113
- locale: $t('maximum')
1114
- }
1115
- ]`),
1116
- chartCategoryLocaleMapping: z.array(z.object({
1117
- name: z.string(),
1118
- value: z.string()
1119
- }))
1120
- .optional()
1121
- .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
1122
- 예시)
1123
- [
1124
- {
1125
- 'name': 'cost_test_01',
1126
- 'value': '{l.cost.test} 01'
1127
- }
1128
- ]`),
1129
- // 사용자 정의 설정
1130
- chartCustomCategory: z.array(z.object({
1131
- name: z.string(),
1132
- color: z.string().optional(),
1133
- pattern: z.string().optional(),
1134
- shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
1135
- strokeDasharray: z.array(z.number()).optional(),
1136
- tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
1137
- }).describe('사용자 정의 카테고리 스타일 및 설정'))
1138
- .optional()
1139
- .describe("사용자 정의 카테고리 스타일 및 설정"),
1140
- // 기타 설정
1141
- chartTooltipDetailText: z.string()
1142
- .optional()
1143
- .describe("툴팁에서 보여주는 상세 텍스트"),
1144
- chartSelectAllLegends: z.string()
1145
- .optional()
1146
- .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
1147
- chartUnfoldLegend: z.string()
1148
- .optional()
1149
- .describe("'범례 전체 펼침' 버튼 다국어 적용"),
1150
- chartFoldLegend: z.string()
1151
- .optional()
1152
- .describe("'범례 전체 접힘' 버튼 다국어 적용"),
1153
- chartUserDefinedFunc: z.record(z.string())
1154
- .optional()
1155
- .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
1156
- langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
1157
- .optional()
1158
- .describe("언어 코드"),
1159
- onChartClick: z.string()
1160
- .optional()
1161
- .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
1162
- });
1163
- // opsnow-common-pie-chart
1164
- export const PieChartSchema = z.object({
1165
- chartId: z.string().describe("차트의 고유 식별자"),
1166
- chartProps: z.object({}).describe(`
1167
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
1168
- **유효한 JSON 형식이어야합니다.**
1169
- {
1170
- // 차트 기본 설정
1171
- "chart": {
1172
- "innerRadius": "p62", // 내부 반지름 (퍼센트 값을 문자열로 표시: 예) 20% -> 'p20', 30% -> 'p30', ...)
1173
- "layout": "horizontal" // 레이아웃: 'horizontal' | 'vertical'
1174
- },
1175
-
1176
- // 라벨 설정
1177
- "label": {
1178
- "fontSize": 15, // 폰트 크기
1179
- "text": "[bold fontSize:30px]4.56[/]\n[fontSize:18px]total[/]", // 차트 가운데에 표시되는 라벨 텍스트. [bold fontSize:30px]4.56[/]\n[fontSize:18px]total[/]와 같이 텍스트 스타일을 지정할 수 있습니다.
1180
- "src": "data:image/svg+xml,..." // svg 이미지 값
1181
- },
1182
-
1183
- // 시리즈 설정
1184
- "series": {
1185
- "valueField": "cost", // 값 필드명
1186
- "categoryField": "ratioName", // 카테고리 필드명
1187
- "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
1188
- "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
1189
- "position": { // 툴팁 위치 설정
1190
- "criteria": "left" // 위치 기준: 'left' | 'right'
1191
- },
1192
- "body": { // 툴팁 바디 설정
1193
- "name": "{category}", // 툴팁 바디 이름
1194
- "value": "{valuePercentTotal.formatNumber('0.00')}%", // 툴팁 바디 값
1195
- "useMarker": true // 툴팁 바디 마커 사용 여부
1196
- }
1197
- },
1198
- "animation": { // 애니메이션 설정
1199
- "duration": 2000, // 애니메이션 지속 시간
1200
- "delay": 500 // 애니메이션 지연 시간
1201
- }
1202
- },
1203
-
1204
- // 범례 설정
1205
- "legend": {
1206
- "layout": "vertical", // 범례 레이아웃: 'horizontal' | 'vertical'
1207
- "valueLabel": { // 값 라벨 설정
1208
- "textAlign": "right", // 텍스트 정렬
1209
- "fontSize": 11 // 폰트 크기
1210
- },
1211
- "label": { // 범례 라벨 설정
1212
- "fontSize": 11, // 폰트 크기
1213
- "maxWidth": 200, // 최대 너비
1214
- "width": 120, // 너비
1215
- "oversizedBehavior": "wrap" // 크기 초과 시 동작: 'none' | 'hide' | 'fit' | 'wrap' | 'wrap-no-break' | 'truncate'
1216
- }
1217
- }
1218
- }
1219
- `),
1220
- chartData: z.array(z.record(z.any())).optional().describe(`차트에 표시할 데이터 배열입니다.
1221
- 예시)
1222
- [
1223
- {
1224
- 'date': '2022-07-01',
1225
- 'cost_test_01': 3,
1226
- 'cost_test_02': 7
1227
- },
1228
- {
1229
- 'date': '2022-07-02',
1230
- 'cost_test_01': 5,
1231
- 'cost_test_02': 10
1232
- }
1233
- ]`),
1234
- chartLocaleProps: z.array(z.object({
1235
- name: z.string(),
1236
- locale: z.string()
1237
- })).optional().describe(`차트에 적용할 다국어 목록입니다.
1238
- 예시)
1239
- [
1240
- {
1241
- 'name': 'l.cost.test',
1242
- 'locale': t('cost.test')
1243
- }
1244
- ]`),
1245
- chartLocaleData: z.array(z.object({
1246
- name: z.string().describe("chartData에 정의된 필드 이름"),
1247
- value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
1248
- locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
1249
- })).optional().describe(`차트 데이터에 다국어를 적용합니다.
1250
- 예시)
1251
- [
1252
- {
1253
- name: 'category',
1254
- value: 'Usage',
1255
- locale: $t('usage')
1256
- }
1257
- ]`),
1258
- chartCustomCategory: z.array(z.object({
1259
- name: z.string(),
1260
- color: z.string().optional(),
1261
- pattern: z.string().optional(),
1262
- shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
1263
- strokeDasharray: z.array(z.number()).optional(),
1264
- tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
1265
- }).describe('사용자 정의 카테고리 스타일 및 설정')).optional().describe("사용자 정의 카테고리"),
1266
- chartUserDefinedFunc: z.record(z.string()).optional().describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
1267
- langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar']).optional().describe("언어 코드"),
1268
- onChartClick: z.string().optional().describe('차트 클릭 시 호출되는 콜백 함수(stringified)'),
1269
- onLegendClick: z.string().optional().describe('범례 클릭 시 호출되는 콜백 함수(stringified)')
1270
- });
1271
- // opsnow-common-gauge-chart
1272
- export const GaugeChartSchema = z.object({
1273
- chartId: z.string().describe("차트의 고유 식별자"),
1274
- chartProps: z.object({}).describe(`
1275
- 다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
1276
- **유효한 JSON 형식이어야합니다.**
1277
- {
1278
- // 차트 기본 설정
1279
- "chart": {
1280
- "panX": false, // X축 이동 가능 여부 (기본값: false)
1281
- "panY": false, // Y축 이동 가능 여부 (기본값: false)
1282
- "startAngle": 100, // 시작 각도 (기본값: 100)
1283
- "endAngle": 360 // 종료 각도 (기본값: 360)
1284
- },
1285
-
1286
- // 축 렌더러 설정
1287
- "axisRenderer": {
1288
- "innerRadius": -20, // 내부 반지름 (기본값: -20)
1289
- "labels": {
1290
- "fill": "#7e8793" // 라벨 색상 (기본값: "#7e8793")
1291
- }
1292
- },
1293
-
1294
- // X축 설정
1295
- "xAxis": {
1296
- "min": 0, // 최소값 (기본값: 0)
1297
- "max": 100 // 최대값 (기본값: 100)
1298
- },
1299
-
1300
- // 시계 바늘 설정
1301
- "clockHand": {
1302
- "innerRadius": 20, // 내부 반지름 (기본값: 20)
1303
- "radius": 99, // 반지름 (기본값: 99)
1304
- "topWidth": 1, // 상단 너비 (기본값: 1)
1305
- "bottomWidth": 1, // 하단 너비 (기본값: 1)
1306
- "pinRadius": 0 // 핀 반지름 (기본값: 0)
1307
- },
1308
-
1309
- // 라벨 설정
1310
- "label": {
1311
- "centerX": 50, // 중앙 X 좌표 (기본값: 50)
1312
- "textAlign": "center", // 텍스트 정렬 (기본값: "center")
1313
- "centerY": 25, // 중앙 Y 좌표 (기본값: 25)
1314
- "fontSize": "16px", // 폰트 크기 (기본값: "16px")
1315
- "fontFamily": "Montserrat" // 폰트 패밀리 (기본값: "Montserrat")
1316
- },
1317
-
1318
- // 불릿 설정
1319
- "bullet": {
1320
- "labelText": "" // 게이지 가운데 표시하는 라벨 (기본값: "")
1321
- },
1322
-
1323
- // 전면 축 범위 설정
1324
- "axisRangeFront": {
1325
- "axisFill": {
1326
- "fill": "#57A000" // 전면 축 채우기 색상 (기본값: "#57A000")
1327
- }
1328
- },
1329
-
1330
- // 후면 축 범위 설정
1331
- "axisRangeBack": {
1332
- "axisFill": {
1333
- "fill": "#B0B6BD" // 후면 축 채우기 색상 (기본값: "#B0B6BD")
1334
- }
1335
- }
1336
- }
1337
- `),
1338
- chartValue: z.number().describe("차트 값"),
1339
- });
1340
- // Chart 컴포넌트 함수 - 배열 반환
1341
- export function createChartComponent() {
1342
- return [
1343
- {
1344
- name: "createGaugeChart",
1345
- description: `게이지 차트 컴포넌트 - 가이어 차트 시각화 지원
1346
-
1347
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1348
-
1349
- **import:**
1350
- \`\`\`javascript
1351
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1352
- const { OpsnowCommonGaugeChart } = useCommonComponents();
1353
- \`\`\``,
1354
- parameters: GaugeChartSchema,
1355
- handler: async (args) => {
1356
- const props = [];
1357
- if (args.chartId)
1358
- props.push(`chartId="${args.chartId}"`);
1359
- if (args.chartProps)
1360
- props.push(`chartProps={${args.chartProps}}`);
1361
- if (args.chartValue)
1362
- props.push(`chartValue={${args.chartValue}}`);
1363
- const code = `<OpsnowCommonGaugeChart ${props.join(' ')} />`;
1364
- return {
1365
- content: [
1366
- {
1367
- type: "text",
1368
- text: `\`\`\`jsx\n${code}\n\`\`\``
1369
- }
1370
- ]
1371
- };
1372
- }
1373
- },
1374
- {
1375
- name: "createPieChart",
1376
- description: `파이 차트 컴포넌트 - 파이, 도넛 차트 시각화 지원
1377
-
1378
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1379
- **레전드는 차트 좌우로만 배치가 가능합니다. 따라서 위,아래 배치는 불가능합니다.**
1380
-
1381
- **import:**
1382
- \`\`\`javascript
1383
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1384
- const { OpsnowCommonPieChart } = useCommonComponents();
1385
- \`\`\``,
1386
- parameters: PieChartSchema,
1387
- handler: async (args) => {
1388
- const props = [];
1389
- if (args.chartId)
1390
- props.push(`chartId="${args.chartId}"`);
1391
- if (args.chartProps)
1392
- props.push(`chartProps={${args.chartProps}}`);
1393
- if (args.chartData)
1394
- props.push(`chartData={${args.chartData}}`);
1395
- else
1396
- props.push(`chartData={[]}`);
1397
- if (args.chartLocaleProps)
1398
- props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
1399
- if (args.chartLocaleData)
1400
- props.push(`chartLocaleData={${args.chartLocaleData}}`);
1401
- if (args.chartCustomCategory)
1402
- props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
1403
- const code = `<OpsnowCommonPieChart ${props.join(' ')} />`;
1404
- return {
1405
- content: [
1406
- {
1407
- type: "text",
1408
- text: `\`\`\`jsx\n${code}\n\`\`\``
1409
- }
1410
- ]
1411
- };
1412
- }
1413
- },
1414
- {
1415
- name: "createLineChart",
1416
- description: `라인 차트 컴포넌트 - 라인 차트 시각화 지원
1417
-
1418
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1419
-
1420
- **import:**
1421
- \`\`\`javascript
1422
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1423
- const { OpsnowCommonLineChart } = useCommonComponents();
1424
- \`\`\``,
1425
- parameters: LineChartSchema,
1426
- handler: async (args) => {
1427
- const props = [];
1428
- if (args.chartId)
1429
- props.push(`chartId="${args.chartId}"`);
1430
- if (args.chartProps)
1431
- props.push(`chartProps={${args.chartProps}}`);
1432
- if (args.chartData)
1433
- props.push(`chartData={${args.chartData}}`);
1434
- else
1435
- props.push(`chartData={[]}`);
1436
- if (args.chartCategory)
1437
- props.push(`chartCategory={${args.chartCategory}}`);
1438
- if (args.chartLocaleProps)
1439
- props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
1440
- if (args.chartCategoryLocaleMapping)
1441
- props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
1442
- if (args.chartLocaleData)
1443
- props.push(`chartLocaleData={${args.chartLocaleData}}`);
1444
- if (args.chartCustomCategory)
1445
- props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
1446
- if (args.langCd)
1447
- props.push(`langCd="${args.langCd}"`);
1448
- if (args.onChartClick)
1449
- props.push(`onChartClick={${args.onChartClick}}`);
1450
- if (args.chartTooltipDetailText)
1451
- props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
1452
- if (args.chartSelectAllLegends)
1453
- props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
1454
- if (args.chartUnfoldLegend)
1455
- props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
1456
- if (args.chartFoldLegend)
1457
- props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
1458
- const code = `<OpsnowCommonLineChart ${props.join(' ')} />`;
1459
- return {
1460
- content: [
1461
- {
1462
- type: "text",
1463
- text: `\`\`\`jsx\n${code}\n\`\`\``
1464
- }
1465
- ]
1466
- };
1467
- }
1468
- },
1469
- {
1470
- name: "createBarChart",
1471
- description: `바 차트 컴포넌트 - 바 차트 시각화 지원
1472
-
1473
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1474
-
1475
- **주의: Grouped Bar Chart(묶음 막대 차트)는 이 컴포넌트가 아닌 OpsnowCommonXyMultiChart를 사용해야 합니다.**
1476
- Grouped Bar Chart란 각 카테고리에서 여러 시리즈의 막대가 나란히 배치되는 차트입니다.
1477
-
1478
- **import:**
1479
- \`\`\`javascript
1480
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1481
- const { OpsnowCommonBarChart } = useCommonComponents();
1482
- \`\`\``,
1483
- parameters: BarChartSchema,
1484
- handler: async (args) => {
1485
- const props = [];
1486
- if (args.chartId)
1487
- props.push(`chartId="${args.chartId}"`);
1488
- if (args.chartProps) {
1489
- // const chartProps = JSON.parse(args.chartProps);
1490
- props.push(`chartProps={${args.chartProps}}`);
1491
- }
1492
- if (args.chartData)
1493
- props.push(`chartData={${args.chartData}}`);
1494
- else
1495
- props.push(`chartData={[]}`);
1496
- if (args.chartCategory)
1497
- props.push(`chartCategory={${args.chartCategory}}`);
1498
- if (args.chartLocaleProps)
1499
- props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
1500
- if (args.chartCategoryLocaleMapping)
1501
- props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
1502
- if (args.chartLocaleData)
1503
- props.push(`chartLocaleData={${args.chartLocaleData}}`);
1504
- if (args.chartCustomCategory)
1505
- props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
1506
- if (args.langCd)
1507
- props.push(`langCd="${args.langCd}"`);
1508
- if (args.onChartClick)
1509
- props.push(`onChartClick={${args.onChartClick}}`);
1510
- if (args.chartTooltipDetailText)
1511
- props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
1512
- if (args.chartSelectAllLegends)
1513
- props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
1514
- if (args.chartUnfoldLegend)
1515
- props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
1516
- if (args.chartFoldLegend)
1517
- props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
1518
- const code = `<OpsnowCommonBarChart ${props.join(' ')} />`;
1519
- return {
1520
- content: [
1521
- {
1522
- type: "text",
1523
- text: `\`\`\`jsx\n${code}\n\`\`\``
1524
- }
1525
- ]
1526
- };
1527
- }
1528
- },
1529
- {
1530
- name: "createStackChart",
1531
- description: `스택 차트 컴포넌트 - 스택 차트 시각화 지원
1532
-
1533
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1534
-
1535
- **import:**
1536
- \`\`\`javascript
1537
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1538
- const { OpsnowCommonStackChart } = useCommonComponents();
1539
- \`\`\``,
1540
- parameters: StackChartSchema,
1541
- handler: async (args) => {
1542
- const props = [];
1543
- if (args.chartId)
1544
- props.push(`chartId="${args.chartId}"`);
1545
- if (args.chartProps)
1546
- props.push(`chartProps={${args.chartProps}}`);
1547
- if (args.chartData)
1548
- props.push(`chartData={${args.chartData}}`);
1549
- else
1550
- props.push(`chartData={[]}`);
1551
- if (args.chartCategory)
1552
- props.push(`chartCategory={${args.chartCategory}}`);
1553
- if (args.chartLocaleProps)
1554
- props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
1555
- if (args.chartCategoryLocaleMapping)
1556
- props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
1557
- if (args.chartLocaleData)
1558
- props.push(`chartLocaleData={${args.chartLocaleData}}`);
1559
- if (args.chartCustomCategory)
1560
- props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
1561
- if (args.chartUserDefinedFunc)
1562
- props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
1563
- if (args.langCd)
1564
- props.push(`langCd="${args.langCd}"`);
1565
- if (args.onChartClick)
1566
- props.push(`onChartClick={${args.onChartClick}}`);
1567
- if (args.chartTooltipDetailText)
1568
- props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
1569
- if (args.chartSelectAllLegends)
1570
- props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
1571
- if (args.chartUnfoldLegend)
1572
- props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
1573
- if (args.chartFoldLegend)
1574
- props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
1575
- const code = `<OpsnowCommonStackChart ${props.join(' ')} />`;
1576
- return {
1577
- content: [
1578
- {
1579
- type: "text",
1580
- text: `\`\`\`jsx\n${code}\n\`\`\``
1581
- }
1582
- ]
1583
- };
1584
- }
1585
- },
1586
- {
1587
- name: "createXyMultiChart",
1588
- description: `XY 멀티 차트 컴포넌트 - XY 멀티 차트 시각화 지원
1589
-
1590
- **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
1591
-
1592
- **Grouped Bar Chart(묶음 막대 차트)를 만들려면 이 컴포넌트를 사용하세요.**
1593
- series의 type을 'grouped'로 설정하면 각 카테고리에서 여러 시리즈의 막대가 나란히 배치됩니다.
1594
-
1595
- **import:**
1596
- \`\`\`javascript
1597
- import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
1598
- const { OpsnowCommonXyMultiChart } = useCommonComponents();
1599
- \`\`\``,
1600
- parameters: XyMultiChartSchema,
1601
- handler: async (args) => {
1602
- const props = [];
1603
- if (args.chartId)
1604
- props.push(`chartId="${args.chartId}"`);
1605
- if (args.chartProps)
1606
- props.push(`chartProps={${args.chartProps}}`);
1607
- if (args.chartData)
1608
- props.push(`chartData={${args.chartData}}`);
1609
- else
1610
- props.push(`chartData={[]}`);
1611
- if (args.chartCategory)
1612
- props.push(`chartCategory={${args.chartCategory}}`);
1613
- if (args.chartLocaleProps)
1614
- props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
1615
- if (args.chartLocaleMessage)
1616
- props.push(`chartLocaleMessage={${args.chartLocaleMessage}}`);
1617
- if (args.chartCategoryLocaleMapping)
1618
- props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
1619
- if (args.chartLocaleData)
1620
- props.push(`chartLocaleData={${args.chartLocaleData}}`);
1621
- if (args.chartCustomCategory)
1622
- props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
1623
- if (args.chartUserDefinedFunc)
1624
- props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
1625
- if (args.langCd)
1626
- props.push(`langCd="${args.langCd}"`);
1627
- if (args.onChartClick)
1628
- props.push(`onChartClick={${args.onChartClick}}`);
1629
- if (args.onSeriesPointerOver)
1630
- props.push(`onSeriesPointerOver={${args.onSeriesPointerOver}}`);
1631
- const code = `<OpsnowCommonXyMultiChart ${props.join(' ')} />`;
1632
- return {
1633
- content: [
1634
- {
1635
- type: "text",
1636
- text: `\`\`\`jsx\n${code}\n\`\`\``
1637
- }
1638
- ]
1639
- };
1640
- }
1641
- },
1642
- ];
1643
- }