@visactor/vchart-aurora-theme 1.12.3-alpha.4 → 1.12.3-alpha.7

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 (49) hide show
  1. package/README.md +1 -1
  2. package/build/index.js +186 -653
  3. package/build/index.min.js +1 -1
  4. package/cjs/common/color-scheme.d.ts +3 -0
  5. package/cjs/common/color-scheme.js +14 -34
  6. package/cjs/common/color-scheme.js.map +1 -1
  7. package/cjs/common/component/crosshair.d.ts +2 -1
  8. package/cjs/common/component/crosshair.js +23 -19
  9. package/cjs/common/component/crosshair.js.map +1 -1
  10. package/cjs/common/component/legend.d.ts +1 -0
  11. package/cjs/common/component/legend.js +22 -115
  12. package/cjs/common/component/legend.js.map +1 -1
  13. package/cjs/common/component/tooltip.js +3 -61
  14. package/cjs/common/component/tooltip.js.map +1 -1
  15. package/cjs/common/series/area.js +19 -9
  16. package/cjs/common/series/area.js.map +1 -1
  17. package/cjs/common/series/bar.js +8 -10
  18. package/cjs/common/series/bar.js.map +1 -1
  19. package/cjs/common/series/line.js +5 -7
  20. package/cjs/common/series/line.js.map +1 -1
  21. package/cjs/common/series/pie.js +42 -5
  22. package/cjs/common/series/pie.js.map +1 -1
  23. package/cjs/index.d.ts +2 -0
  24. package/cjs/index.js +46 -23
  25. package/cjs/index.js.map +1 -1
  26. package/esm/common/color-scheme.d.ts +3 -0
  27. package/esm/common/color-scheme.js +13 -29
  28. package/esm/common/color-scheme.js.map +1 -1
  29. package/esm/common/component/crosshair.d.ts +2 -1
  30. package/esm/common/component/crosshair.js +25 -19
  31. package/esm/common/component/crosshair.js.map +1 -1
  32. package/esm/common/component/legend.d.ts +1 -0
  33. package/esm/common/component/legend.js +23 -112
  34. package/esm/common/component/legend.js.map +1 -1
  35. package/esm/common/component/tooltip.js +3 -61
  36. package/esm/common/component/tooltip.js.map +1 -1
  37. package/esm/common/series/area.js +19 -9
  38. package/esm/common/series/area.js.map +1 -1
  39. package/esm/common/series/bar.js +8 -10
  40. package/esm/common/series/bar.js.map +1 -1
  41. package/esm/common/series/line.js +5 -7
  42. package/esm/common/series/line.js.map +1 -1
  43. package/esm/common/series/pie.js +42 -5
  44. package/esm/common/series/pie.js.map +1 -1
  45. package/esm/index.d.ts +2 -0
  46. package/esm/index.js +35 -56
  47. package/esm/index.js.map +1 -1
  48. package/package.json +8 -7
  49. package/public/aurora.json +0 -1
package/build/index.js CHANGED
@@ -1,361 +1,156 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
3
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vchart-semi-theme"] = {}));
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vchart-aurora-theme"] = {}));
5
5
  })(this, (function (exports) { 'use strict';
6
6
 
7
- const defaultColor = [
8
- '#1443FF',
9
- '#33CCB2',
10
- '#FFD500',
11
- '#FFAA33',
12
- '#FF7733',
13
- '#F65656',
14
- '#E93DBD',
15
- '#9933FF',
16
- '#5533FF',
17
- '#A3ABC2'
7
+ const colorList = [
8
+ '#3377FF',
9
+ '#1FE7F9',
10
+ '#53F3B3',
11
+ '#FFCD50',
12
+ '#ADB8D6',
13
+ '#867AFF',
14
+ '#FAA64D',
15
+ '#FF8082',
16
+ '#B46FF4'
17
+ ];
18
+ const barColorList = [
19
+ '#3377FF',
20
+ '#1FE7F9',
21
+ '#FFCD50',
22
+ '#53F3B3',
23
+ '#ADB8D6',
24
+ '#867AFF',
25
+ '#FAA64D',
26
+ '#FF8082',
27
+ '#B46FF4'
28
+ ];
29
+ const nestColorList = [
30
+ ['#3377FF', '#5587FD', '#76A4FF', '#A0C0FF', '#BFD4FF', '#E5EEFF'],
31
+ ['#1FE7F9', '#71F1FF', '#A2F5FF', '#BCF8FF', '#D2FAFF', '#E5FDFF'],
32
+ ['#53F3B3', '#6BFFC4', '#9FFFD9', '#C1FFE6', '#DCFFF1', '#EBFFF7'],
33
+ ['#FFCD50', '#FFD971', '#FFE395', '#FFEBB2', '#FEF2D1', '#FFF8E8'],
34
+ ['#ADB8D6', '#BEC8E4', '#CBD3ED', '#D9E0F5', '#E7ECFB', '#F2F5FF'],
35
+ ['#867AFF', '#9A8DFF', '#ACA1FF', '#C4BCFF', '#DBD6FF', '#EDEBFF'],
36
+ ['#FAA64D', '#FFB96F', '#FECB94', '#FFD8AD', '#FFE5C9', '#FFF4E9'],
37
+ ['#FF8082', '#FF99A0', '#FFBBBF', '#FFD4D7', '#FFE8EA', '#FFF7F8'],
38
+ ['#B46FF4', '#BF80FF', '#D1A4FD', '#E0C1FF', '#EDDAFF', '#F5ECFF']
18
39
  ];
19
- const BLACK_COLORS = {
20
- 100: '#000',
21
- 95: '#0D0D0D',
22
- 85: '#262626',
23
- 65: '#595959',
24
- 45: '#8C8C8C',
25
- 25: '#BFBFBF',
26
- 15: '#D9D9D9',
27
- 6: '#F0F0F0'
28
- };
29
- const WHITE_COLORS = {
30
- 100: '#FFFFFF',
31
- 95: '#F2F2F2',
32
- 85: '#D9D9D9',
33
- 65: '#A6A6A6',
34
- 45: '#737373',
35
- 25: '#404040',
36
- 15: '#262626',
37
- 6: '#0F0F0F'
38
- };
39
- const blackColorPalettes = {};
40
- for (const key in BLACK_COLORS) {
41
- blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key];
42
- }
43
- const whiteColorPalettes = {};
44
- for (const key in WHITE_COLORS) {
45
- whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key];
46
- }
47
40
  const colorScheme = {
48
41
  default: {
49
- dataScheme: defaultColor,
50
- palette: Object.assign(Object.assign({ bandColor: defaultColor[0], backgroundColor: 'transparent', axisDomainColor: '#DCDEE1', axisLabelFontColor: '#909199', axisGridColor: '#E1E2E5' }, blackColorPalettes), whiteColorPalettes)
51
- }
52
- };
53
-
54
- const axis = {
55
- axis: {
56
- domainLine: {
57
- visible: true,
58
- style: {
59
- lineWidth: 1,
60
- stroke: { type: 'palette', key: 'axisDomainColor' }
61
- }
62
- },
63
- grid: {
64
- visible: true,
65
- style: {
66
- lineWidth: 1,
67
- stroke: { type: 'palette', key: 'axisGridColor' },
68
- lineDash: [4, 4]
69
- }
70
- },
71
- subGrid: {
72
- visible: false,
73
- style: {
74
- lineWidth: 1,
75
- stroke: { type: 'palette', key: 'axisGridColor' },
76
- lineDash: [4, 4]
77
- }
78
- },
79
- tick: {
80
- visible: true,
81
- style: {
82
- lineWidth: 1,
83
- stroke: { type: 'palette', key: 'blackColors25' }
84
- }
85
- },
86
- subTick: {
87
- visible: false,
88
- tickSize: 2,
89
- style: {
90
- lineWidth: 1,
91
- stroke: { type: 'palette', key: 'blackColors15' }
92
- }
93
- },
94
- label: {
95
- visible: true,
96
- space: 8,
97
- style: {
98
- fontSize: 12,
99
- fill: { type: 'palette', key: 'blackColors45' },
100
- fontWeight: 400,
101
- fillOpacity: 1
102
- }
103
- },
104
- title: {
105
- visible: false,
106
- style: {
107
- fill: { type: 'palette', key: 'blackColors65' },
108
- fontSize: 12,
109
- lineHeight: 12
110
- }
42
+ dataScheme: colorList,
43
+ palette: {
44
+ bandColor: colorList[0],
45
+ backgroundColor: 'transparent',
46
+ primaryFontColor: '#17171A',
47
+ secondaryFontColor: '#5E5F66',
48
+ tertiaryFontColor: '#888888',
49
+ axisDomainColor: '#DCDEE1',
50
+ axisLabelFontColor: '#888888',
51
+ axisGridColor: '#EFF0F2',
52
+ popupBackgroundColor: '#ffffff'
111
53
  }
112
54
  }
113
55
  };
114
56
 
115
- const axisRadius = {
116
- domainLine: {},
117
- grid: {
118
- smooth: false,
119
- visible: true
120
- },
121
- subGrid: {
122
- smooth: false
123
- }
124
- };
125
- const axisAngle = {
126
- grid: {
127
- visible: true,
128
- smooth: false
129
- },
130
- label: {
131
- space: 4
132
- }
133
- };
134
- const axisPolar = {
135
- axisRadius,
136
- axisAngle
137
- };
138
-
139
- const commonColorLegendTheme = {
140
- handlerText: {
141
- space: 10,
142
- style: {
143
- fontSize: 12,
144
- fill: '#2C3542'
145
- }
146
- },
147
- title: {
148
- space: 5,
149
- style: {
150
- fontSize: 12,
151
- fill: '#2C3542'
152
- }
153
- }
154
- };
155
57
  const legend = {
156
58
  discreteLegend: {
157
59
  visible: true,
158
60
  orient: 'top',
159
- padding: [8, 8, 8, 8],
61
+ position: 'middle',
160
62
  maxRow: 1,
161
63
  title: {
162
- visible: false,
163
- textStyle: {
164
- fill: { type: 'palette', key: 'blackColors45' },
165
- fontSize: 12,
166
- lineHeight: 21
167
- }
64
+ visible: false
168
65
  },
169
66
  item: {
170
67
  visible: true,
171
- spaceCol: 24,
172
- spaceRow: 12,
173
- padding: 0,
174
68
  background: {
175
69
  visible: false
176
70
  },
177
71
  shape: {
178
- space: 4,
179
72
  style: {
180
- size: 8,
181
73
  symbolType: 'circle'
182
- },
183
- state: { unSelected: { fill: '#D8D8D8' } }
184
- },
185
- label: {
186
- space: 100,
187
- style: {
188
- fill: '#85878A',
189
- fontSize: 12,
190
- lineHeight: 12,
191
- opacity: 1,
192
- fontWeight: 400
193
- },
194
- state: {
195
- unSelected: {
196
- fill: '#D8D8D8',
197
- opacity: 1
198
- }
199
74
  }
200
75
  }
201
76
  },
202
- pager: {
203
- handler: {
204
- space: 8,
77
+ allowAllCanceled: false
78
+ }
79
+ };
80
+ const lineLegend = {
81
+ discreteLegend: {
82
+ visible: true,
83
+ orient: 'top',
84
+ position: 'middle',
85
+ maxRow: 1,
86
+ title: {
87
+ visible: false
88
+ },
89
+ item: {
90
+ visible: true,
91
+ background: {
92
+ visible: false
93
+ },
94
+ shape: {
205
95
  style: {
206
- size: 10,
207
- fill: {
208
- type: 'palette',
209
- key: 'blackColors100'
210
- }
96
+ size: [8, 2],
97
+ symbolType: 'rect'
211
98
  }
212
- },
213
- textStyle: {
214
- fill: { type: 'palette', key: 'blackColors45' },
215
- fontSize: 10
216
99
  }
217
100
  },
218
101
  allowAllCanceled: false
219
- },
220
- colorLegend: {
221
- horizontal: Object.assign(Object.assign({}, commonColorLegendTheme), { handler: {
222
- style: {
223
- symbolType: 'rectRound',
224
- size: 16,
225
- scaleX: 0.5,
226
- fill: '#fff',
227
- lineWidth: 1,
228
- stroke: '#99B0F3',
229
- radius: 2,
230
- outerBorder: null
231
- }
232
- }, rail: {
233
- height: 4,
234
- width: 100,
235
- style: {
236
- fill: '#DCDEE2'
237
- }
238
- } }),
239
- vertical: Object.assign(Object.assign({}, commonColorLegendTheme), { handler: {
240
- style: {
241
- symbolType: 'rectRound',
242
- size: 16,
243
- scaleY: 0.5,
244
- fill: '#fff',
245
- lineWidth: 1,
246
- stroke: '#99B0F3',
247
- radius: 2,
248
- outerBorder: null
249
- }
250
- }, rail: {
251
- width: 4,
252
- height: 100,
253
- style: {
254
- fill: '#DCDEE2'
255
- }
256
- } })
257
102
  }
258
103
  };
259
104
 
260
- const token = {
261
- fontFamily: `"PingFang SC", "-apple-system", "Segoe UI", "Helvetica Neue", Arial,
262
- Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
263
- fontSize: 12
264
- };
265
-
266
105
  const tooltip = {
267
- offset: { x: 16, y: 16 },
268
106
  panel: {
269
- padding: { top: 12, left: 12, right: 12, bottom: 12 },
270
- backgroundColor: {
271
- type: 'palette',
272
- key: 'popupBackgroundColor'
273
- },
274
107
  border: {
275
- color: {
276
- type: 'palette',
277
- key: 'popupBackgroundColor'
278
- },
279
- width: 0,
280
- radius: 3
281
- },
282
- shadow: {
283
- x: 0,
284
- y: 0,
285
- blur: 10,
286
- spread: 0,
287
- color: '#aeaeae'
108
+ radius: 8
288
109
  }
289
110
  },
290
- spaceRow: 12,
291
- titleLabel: {
292
- fontSize: 12,
293
- lineHeight: 12,
294
- fontColor: '#1D1D2E',
295
- fontWeight: '500',
296
- textAlign: 'left',
297
- textBaseline: 'middle',
298
- spacing: 0
299
- },
300
- shape: { size: 8, spacing: 8 },
301
- keyLabel: {
302
- fontSize: 12,
303
- lineHeight: 12,
304
- fontColor: {
305
- type: 'palette',
306
- key: 'blackColors65'
307
- },
308
- textAlign: 'left',
309
- textBaseline: 'middle',
310
- spacing: 12
311
- },
312
- valueLabel: {
313
- fontSize: 12,
314
- lineHeight: 12,
315
- fontColor: {
316
- type: 'palette',
317
- key: 'blackColors65'
318
- },
319
- fontWeight: 'normal',
320
- textBaseline: 'middle',
321
- spacing: 0
111
+ shape: {
112
+ shapeType: 'circle',
113
+ size: 8
322
114
  }
323
115
  };
324
116
 
325
- const crosshair = {
326
- trigger: 'hover',
327
- bandField: {
117
+ const barCrosshair = {
118
+ xField: {
328
119
  line: {
329
120
  type: 'rect',
330
- visible: true,
331
121
  style: {
332
- fill: '#CCD7EB',
333
- fillOpacity: 0.4,
334
- lineDash: []
122
+ fill: {
123
+ gradient: 'linear',
124
+ x0: 0,
125
+ y0: 0,
126
+ x1: 0,
127
+ y1: 1,
128
+ stops: [
129
+ { offset: 0, color: 'rgba(51, 119, 255, 0.1)' },
130
+ { offset: 1, color: 'rgba(118, 164, 255, 0.1)' }
131
+ ]
132
+ }
335
133
  }
336
- },
337
- label: {
338
- visible: false
339
134
  }
340
- },
341
- linearField: {
342
- visible: false,
135
+ }
136
+ };
137
+ const lineCrosshair = {
138
+ bandField: {
343
139
  line: {
344
140
  type: 'line',
141
+ width: 1,
345
142
  style: {
346
- stroke: '#CCD7EB',
347
- lineWidth: 0.4,
348
- lineDash: []
143
+ lineWidth: 1,
144
+ stroke: '#DCDEE1',
145
+ lineDash: [2, 2]
349
146
  }
350
- },
351
- label: {
352
- visible: false
353
147
  }
354
148
  }
355
149
  };
356
150
 
357
151
  const area = {
358
152
  area: {
153
+ seriesMark: 'line',
359
154
  point: {
360
155
  style: {
361
156
  visible: false,
@@ -363,7 +158,12 @@
363
158
  lineWidth: 2,
364
159
  shadowColor: 'rgba(0, 0, 0, 0.1)',
365
160
  shadowBlur: 3,
366
- stroke: { type: 'palette', key: 'whiteColors100' }
161
+ stroke: '#fff'
162
+ },
163
+ state: {
164
+ dimension_hover: {
165
+ visible: true
166
+ }
367
167
  }
368
168
  },
369
169
  line: {
@@ -374,12 +174,22 @@
374
174
  },
375
175
  area: {
376
176
  style: {
377
- fillOpacity: 0.25,
378
- lineWidth: 2
379
- },
380
- state: {
381
- selected: {
382
- fillOpacity: 0.5
177
+ fill: {
178
+ gradient: 'linear',
179
+ x0: 0,
180
+ y0: 0,
181
+ x1: 0,
182
+ y1: 1,
183
+ stops: [
184
+ {
185
+ offset: 0,
186
+ opacity: 0.7
187
+ },
188
+ {
189
+ offset: 1,
190
+ opacity: 0
191
+ }
192
+ ]
383
193
  }
384
194
  }
385
195
  }
@@ -387,23 +197,23 @@
387
197
  };
388
198
 
389
199
  const bar = {
390
- barMaxWidth: 8,
391
- barGapInGroup: 4,
392
- label: {
200
+ barMaxWidth: 16,
201
+ barGapInGroup: 2,
202
+ bar: {
393
203
  style: {
394
- fill: { type: 'palette', key: 'secondaryFontColor' }
204
+ visible: datum => datum.value > 0
395
205
  }
396
206
  }
397
207
  };
398
208
  const bar_horizontal = {
399
- stackCornerRadius: [0, 1, 1, 0],
209
+ stackCornerRadius: [0, 2, 2, 0],
400
210
  label: {
401
211
  position: 'right',
402
212
  offset: 4
403
213
  }
404
214
  };
405
215
  const bar_vertical = {
406
- stackCornerRadius: [1, 1, 0, 0],
216
+ stackCornerRadius: [2, 2, 0, 0],
407
217
  label: {
408
218
  position: 'top',
409
219
  offset: 4
@@ -429,392 +239,115 @@
429
239
  lineWidth: 2,
430
240
  shadowColor: 'rgba(0, 0, 0, 0.1)',
431
241
  shadowBlur: 3,
432
- stroke: { type: 'palette', key: 'whiteColors100' }
433
- }
434
- },
435
- label: {
436
- position: 'top',
437
- offset: 4
438
- }
439
- };
440
-
441
- const markByName = {
442
- label: {
443
- style: {
444
- fontSize: 12,
445
- fill: { type: 'palette', key: 'blackColors65' },
446
- lineWidth: 0
242
+ stroke: '#fff'
243
+ },
244
+ state: {
245
+ dimension_hover: {
246
+ visible: true
247
+ }
447
248
  }
448
249
  }
449
250
  };
450
251
 
451
- const scatter = {
452
- point: {
453
- style: {
454
- symbolType: 'circle',
455
- fillOpacity: 0.35,
456
- lineWidth: 1,
457
- size: 8,
458
- stroke: null
459
- }
460
- },
461
- label: {
462
- position: 'top'
463
- }
464
- };
465
-
466
252
  const pie = {
467
253
  outerRadius: 0.8,
468
- innerRadius: 0.54,
254
+ innerRadius: 0,
469
255
  pie: {
470
256
  style: {
471
257
  padAngle: 0,
472
258
  stroke: '#fff',
473
- lineWidth: 2
259
+ lineWidth: 2,
260
+ lineJoin: 'round',
261
+ cornerRadius: 2,
262
+ visible: datum => datum.value > 0
474
263
  },
475
264
  state: {
476
265
  hover: {
477
- lineWidth: 0
266
+ outerRadius: 0.85,
267
+ lineWidth: 2
478
268
  },
479
269
  selected: {
480
- lineWidth: 0
270
+ outerRadius: 0.85,
271
+ lineWidth: 2
481
272
  }
482
273
  }
483
274
  },
275
+ minAngle: 3,
484
276
  label: {
485
277
  visible: true,
486
278
  position: 'outside',
487
- style: {
488
- fill: null
489
- }
490
- }
491
- };
492
-
493
- const indicator = {
494
- title: {
495
- visible: true,
496
- style: {
497
- fill: '#12141A',
498
- fontWeight: 500,
499
- fontSize: 16
500
- }
501
- },
502
- content: {
503
- visible: true,
504
- style: {
505
- fill: '#85878A',
506
- fontWeight: 400,
507
- fontSize: 12
508
- }
509
- }
510
- };
511
-
512
- const funnel = {
513
- funnel: {
514
- state: {
515
- selected: {
516
- fill: '#1966FF',
517
- stroke: '#3958E0',
518
- strokeOpacity: 0.2,
519
- lineWidth: 4
520
- }
521
- }
522
- },
523
- outerLabel: {
524
- style: {
525
- fontSize: 12
279
+ formatMethod: (label, data) => {
280
+ const midAngle = data.__VCHART_ARC_MIDDLE_ANGLE;
281
+ const cos = Math.cos(midAngle);
282
+ return {
283
+ type: 'rich',
284
+ text: [
285
+ {
286
+ text: `${data === null || data === void 0 ? void 0 : data.value}\n`,
287
+ fill: '#111',
288
+ fontSize: 16,
289
+ fontWeight: '500',
290
+ fontFamily: 'douyinNumber',
291
+ stroke: false,
292
+ textAlign: cos < 0 ? 'right' : 'left'
293
+ },
294
+ {
295
+ text: data === null || data === void 0 ? void 0 : data.type,
296
+ fill: '#606165',
297
+ fontSize: 12,
298
+ fontWeight: '400',
299
+ stroke: false,
300
+ textAlign: cos < 0 ? 'right' : 'left'
301
+ }
302
+ ]
303
+ };
526
304
  },
527
305
  line: {
528
306
  style: {
529
307
  lineWidth: 2
530
308
  }
531
- }
532
- },
533
- label: {
534
- style: {
535
- fill: { type: 'palette', key: 'whiteColors100' },
536
- fontSize: 12
537
- }
538
- }
539
- };
540
-
541
- const treemap = {
542
- gapWidth: 0,
543
- leaf: {
544
- style: {
545
- lineWidth: 2,
546
- stroke: { type: 'palette', key: 'whiteColors100' }
547
- },
548
- state: {
549
- hover: {
550
- fillOpacity: 0.8,
551
- lineWidth: 0
552
- }
553
- }
554
- },
555
- label: {
556
- style: {
557
- fill: { type: 'palette', key: 'whiteColors100' }
558
- }
559
- }
560
- };
561
-
562
- const gauge = {
563
- circularProgress: {
564
- progress: {
565
- style: {
566
- cornerRadius: 100
567
- }
568
- },
569
- track: {
570
- interactive: false,
571
- style: {
572
- cornerRadius: 100,
573
- fill: '#DCDEE1',
574
- fillOpacity: 1
575
- }
576
- }
577
- },
578
- gaugePointer: {
579
- pin: { visible: false },
580
- pinBackground: { visible: false },
581
- pointer: { visible: false }
582
- }
583
- };
584
-
585
- const heatmap = {
586
- cell: {
587
- style: {
588
- stroke: { type: 'palette', key: 'whiteColors100' },
589
- lineWidth: 1
590
309
  },
591
- state: {
592
- hover: {
593
- zIndex: 100,
594
- stroke: '#000'
595
- }
596
- }
597
- },
598
- label: {
599
- position: 'inside',
600
- style: {
601
- fill: { type: 'palette', key: 'whiteColors100' },
602
- fontSize: 12
603
- }
604
- }
605
- };
606
-
607
- const markLine = {
608
- line: {
609
- style: {
610
- lineDash: [],
611
- lineWidth: 1,
612
- stroke: { type: 'palette', key: 'blackColors25' }
613
- }
614
- },
615
- startSymbol: {
616
- visible: false
617
- },
618
- endSymbol: {
619
- visible: false
620
- },
621
- label: {
622
- position: 'insideStartTop',
623
- refY: 0,
624
- autoRotate: true,
625
- style: {
626
- fontSize: { type: 'token', key: 'l5FontSize' },
627
- fill: { type: 'palette', key: 'blackColors65' }
310
+ layout: {
311
+ align: 'labelLine'
628
312
  },
629
- labelBackground: {
630
- visible: false
631
- }
632
- }
633
- };
634
-
635
- const markArea = {
636
- area: {
637
313
  style: {
638
- fill: { type: 'palette', key: 'blackColors100', a: 0.06 }
639
- }
640
- },
641
- label: {
642
- style: {
643
- fontSize: { type: 'token', key: 'l5FontSize' },
644
- fill: { type: 'palette', key: 'blackColors65' }
645
- },
646
- labelBackground: {
647
- visible: false
314
+ type: 'rich',
315
+ boundsPadding: [6, 0, 6, 0]
648
316
  }
649
317
  }
650
318
  };
651
319
 
652
- const markPoint = {
653
- itemContent: {
654
- autoRotate: false,
655
- offsetY: -16,
656
- text: {
657
- style: {
658
- fontSize: { type: 'token', key: 'l5FontSize' },
659
- fill: { type: 'palette', key: 'blackColors65' }
660
- }
661
- }
662
- },
663
- itemLine: {
664
- decorativeLine: {
665
- visible: false
666
- },
667
- startSymbol: {
668
- visible: true,
669
- size: 6,
670
- style: {
671
- fill: '#fff',
672
- stroke: { type: 'palette', key: 'bandColor' },
673
- lineWidth: 2
674
- }
675
- },
676
- endSymbol: {
677
- visible: false
678
- },
320
+ const chartAuroraTheme = {
321
+ name: 'aurora',
322
+ type: 'light',
323
+ description: 'light theme for Aurora.',
324
+ colorScheme,
325
+ component: Object.assign(Object.assign({}, legend), { tooltip }),
326
+ chart: {
679
327
  line: {
680
- style: {
681
- lineWidth: 1,
682
- stroke: { type: 'palette', key: 'blackColors25' }
683
- }
684
- }
685
- }
686
- };
687
-
688
- const dataZoomCommon = {
689
- middleHandler: {
690
- visible: false
691
- },
692
- startHandler: {
693
- style: {
694
- size: 22
695
- }
696
- },
697
- selectedBackground: {
698
- style: {
699
- fill: '#6699FF',
700
- fillOpacity: 0.2,
701
- opacity: 1,
702
- stroke: '#6699FF',
703
- lineWidth: 2,
704
- cornerRadius: 4
705
- }
706
- },
707
- background: {
708
- style: {
709
- fill: '#F3F4F6',
710
- fillOpacity: 0.2,
711
- cornerRadius: 4,
712
- stroke: '#EDEEF0',
713
- opacity: 1,
714
- lineWidth: 2
715
- }
716
- },
717
- endHandler: {
718
- style: {
719
- size: 22
720
- }
721
- },
722
- backgroundChart: {
328
+ component: Object.assign({ crosshair: lineCrosshair }, lineLegend)
329
+ },
723
330
  area: {
724
- style: {
725
- fill: false,
726
- stroke: '#6699FF'
727
- }
331
+ component: Object.assign({ crosshair: lineCrosshair }, lineLegend)
728
332
  },
729
- line: {
730
- style: {
731
- fill: false,
732
- stroke: '#6699FF'
733
- }
734
- }
735
- },
736
- startText: {
737
- visible: false
738
- },
739
- endText: {
740
- visible: false
741
- }
742
- };
743
- const dataZoom = {
744
- horizontal: Object.assign(Object.assign({}, dataZoomCommon), { height: 44 }),
745
- vertical: Object.assign(Object.assign({}, dataZoomCommon), { width: 44 })
746
- };
747
-
748
- const scrollBar = {
749
- horizontal: {
750
- height: 12,
751
- slider: {
752
- style: {
753
- fill: 'rgba(0,0,0,0.15)'
754
- }
755
- }
756
- },
757
- vertical: {
758
- width: 12,
759
- slider: {
760
- style: {
761
- fill: 'rgba(0,0,0,0.15)'
333
+ bar: {
334
+ component: {
335
+ crosshair: barCrosshair
336
+ },
337
+ colorScheme: {
338
+ default: {
339
+ dataScheme: barColorList
340
+ }
762
341
  }
763
342
  }
764
- }
765
- };
766
-
767
- const radar = {
768
- line: {
769
- style: {
770
- lineWidth: 1
771
- }
772
343
  },
773
- point: {
774
- style: {
775
- visible: false,
776
- size: 12,
777
- lineWidth: 2,
778
- shadowColor: 'rgba(0, 0, 0, 0.1)',
779
- shadowBlur: 3,
780
- stroke: { type: 'palette', key: 'whiteColors100' }
781
- }
782
- },
783
- area: {
784
- visible: true
785
- },
786
- label: {
787
- position: 'top',
788
- offset: 4
789
- }
790
- };
791
-
792
- const chartAuroraTheme = {
793
- name: 'aurora',
794
- type: 'light',
795
- description: 'light theme for ChartHub.',
796
- colorScheme,
797
- token,
798
- component: Object.assign(Object.assign(Object.assign(Object.assign({}, axis), legend), axisPolar), { tooltip,
799
- crosshair,
800
- indicator,
801
- markLine,
802
- markArea,
803
- markPoint,
804
- dataZoom,
805
- scrollBar }),
806
- series: Object.assign(Object.assign(Object.assign(Object.assign({}, area), barTheme), gauge), { line,
807
- scatter,
808
- pie,
809
- funnel,
810
- treemap,
811
- heatmap,
812
- radar }),
813
- markByName
344
+ series: Object.assign(Object.assign(Object.assign({ pie }, barTheme), area), { line })
814
345
  };
815
346
  const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]);
816
347
 
817
348
  exports.allThemeMap = allThemeMap;
818
349
  exports.chartAuroraTheme = chartAuroraTheme;
350
+ exports.colorList = colorList;
351
+ exports.nestColorList = nestColorList;
819
352
 
820
353
  }));