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