@visactor/vchart-extension 0.0.3-vstory.2 → 1.12.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +22 -20
- package/build/index.js +0 -362
- package/build/index.min.js +0 -1
- package/cjs/index.d.ts +0 -1
- package/cjs/index.js +0 -20
- package/cjs/index.js.map +0 -1
- package/cjs/ranking-bar/interface.d.ts +0 -52
- package/cjs/ranking-bar/interface.js +0 -6
- package/cjs/ranking-bar/interface.js.map +0 -1
- package/cjs/ranking-bar/ranking-bar-transformer.d.ts +0 -10
- package/cjs/ranking-bar/ranking-bar-transformer.js +0 -294
- package/cjs/ranking-bar/ranking-bar-transformer.js.map +0 -1
- package/cjs/ranking-bar/ranking-bar.d.ts +0 -16
- package/cjs/ranking-bar/ranking-bar.js +0 -59
- package/cjs/ranking-bar/ranking-bar.js.map +0 -1
- package/cjs/type/index.d.ts +0 -1
- package/cjs/type/index.js +0 -21
- package/cjs/type/index.js.map +0 -1
- package/cjs/type/type.d.ts +0 -8
- package/cjs/type/type.js +0 -6
- package/cjs/type/type.js.map +0 -1
- package/esm/index.d.ts +0 -1
- package/esm/index.js +0 -1
- package/esm/index.js.map +0 -1
- package/esm/ranking-bar/interface.d.ts +0 -52
- package/esm/ranking-bar/interface.js +0 -2
- package/esm/ranking-bar/interface.js.map +0 -1
- package/esm/ranking-bar/ranking-bar-transformer.d.ts +0 -10
- package/esm/ranking-bar/ranking-bar-transformer.js +0 -288
- package/esm/ranking-bar/ranking-bar-transformer.js.map +0 -1
- package/esm/ranking-bar/ranking-bar.d.ts +0 -16
- package/esm/ranking-bar/ranking-bar.js +0 -27
- package/esm/ranking-bar/ranking-bar.js.map +0 -1
- package/esm/type/index.d.ts +0 -1
- package/esm/type/index.js +0 -2
- package/esm/type/index.js.map +0 -1
- package/esm/type/type.d.ts +0 -8
- package/esm/type/type.js +0 -2
- package/esm/type/type.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vchart-extension",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "1.12.14",
|
|
4
|
+
"description": "vchart extension package, including extension plugins and components",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
7
7
|
"module": "esm/index.js",
|
|
@@ -11,25 +11,16 @@
|
|
|
11
11
|
"esm",
|
|
12
12
|
"build"
|
|
13
13
|
],
|
|
14
|
-
"scripts": {
|
|
15
|
-
"compile": "tsc --noEmit",
|
|
16
|
-
"eslint": "eslint --debug --fix src/",
|
|
17
|
-
"build": "bundle",
|
|
18
|
-
"build:umd": "bundle --clean -f umd",
|
|
19
|
-
"start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser"
|
|
20
|
-
},
|
|
21
|
-
"pearDependencies": {
|
|
22
|
-
"@visactor/vchart": "^1.11.11"
|
|
23
|
-
},
|
|
24
14
|
"dependencies": {
|
|
25
|
-
"@visactor/vrender-core": "0.
|
|
26
|
-
"@visactor/vrender-kits": "0.
|
|
27
|
-
"@visactor/
|
|
15
|
+
"@visactor/vrender-core": "0.20.17",
|
|
16
|
+
"@visactor/vrender-kits": "0.20.17",
|
|
17
|
+
"@visactor/vrender-components": "0.20.17",
|
|
18
|
+
"@visactor/vgrammar-core": "0.14.17",
|
|
19
|
+
"@visactor/vutils": "~0.19.2",
|
|
20
|
+
"@visactor/vdataset": "~0.19.2",
|
|
21
|
+
"@visactor/vchart": "1.12.14"
|
|
28
22
|
},
|
|
29
23
|
"devDependencies": {
|
|
30
|
-
"@internal/bundler": "workspace:*",
|
|
31
|
-
"@internal/eslint-config": "workspace:*",
|
|
32
|
-
"@internal/ts-config": "workspace:*",
|
|
33
24
|
"@rushstack/eslint-patch": "~1.1.4",
|
|
34
25
|
"@types/node": "*",
|
|
35
26
|
"@types/offscreencanvas": "2019.6.4",
|
|
@@ -51,11 +42,22 @@
|
|
|
51
42
|
"rollup-plugin-bundle-size": "1.0.3",
|
|
52
43
|
"rollup-plugin-sizes": "1.0.5",
|
|
53
44
|
"rollup": "3.20.5",
|
|
54
|
-
"@
|
|
45
|
+
"@internal/bundler": "0.0.1",
|
|
46
|
+
"@internal/eslint-config": "0.0.1",
|
|
47
|
+
"@internal/ts-config": "0.0.1"
|
|
55
48
|
},
|
|
56
49
|
"publishConfig": {
|
|
57
50
|
"access": "public",
|
|
58
51
|
"registry": "https://registry.npmjs.org/"
|
|
59
52
|
},
|
|
60
|
-
"license": "MIT"
|
|
53
|
+
"license": "MIT",
|
|
54
|
+
"scripts": {
|
|
55
|
+
"compile": "tsc --noEmit",
|
|
56
|
+
"eslint": "eslint --debug --fix src/",
|
|
57
|
+
"build": "bundle",
|
|
58
|
+
"build:umd": "bundle --clean -f umd",
|
|
59
|
+
"build:es": "bundle --clean -f es",
|
|
60
|
+
"build:cjs": "bundle --clean -f cjs",
|
|
61
|
+
"start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser"
|
|
62
|
+
}
|
|
61
63
|
}
|
package/build/index.js
DELETED
|
@@ -1,362 +0,0 @@
|
|
|
1
|
-
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vchart'), require('@visactor/vutils')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@visactor/vchart', '@visactor/vutils'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VChartExtension = {}, global.VChart, global.VUtils));
|
|
5
|
-
})(this, (function (exports, VChart, vutils) { 'use strict';
|
|
6
|
-
|
|
7
|
-
class RankingBarChartSpecTransformer extends VChart.BaseChartSpecTransformer {
|
|
8
|
-
transformSpec(spec) {
|
|
9
|
-
const { timeData, timeNodes } = processData(spec);
|
|
10
|
-
const { interval: userInterval, xField, yField, color, icon, iconPosition, iconShape, timeLabel, label, nameLabel, xAxis, yAxis, animationAppear, animationDisappear, animationEnter, animationExit, animationNormal, animationUpdate, player } = spec;
|
|
11
|
-
const interval = userInterval ? userInterval : 1000;
|
|
12
|
-
const exchangeDuration = Math.min(interval, 500);
|
|
13
|
-
spec.type = 'common';
|
|
14
|
-
spec.data = [
|
|
15
|
-
{
|
|
16
|
-
id: 'timeData',
|
|
17
|
-
values: timeData.get(timeNodes[0])
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
id: 'time',
|
|
21
|
-
values: [{ time: timeNodes[0] }]
|
|
22
|
-
}
|
|
23
|
-
];
|
|
24
|
-
spec.color = {
|
|
25
|
-
specified: Object.assign({}, color)
|
|
26
|
-
};
|
|
27
|
-
spec.region = [{ clip: true }];
|
|
28
|
-
spec.series = [
|
|
29
|
-
{
|
|
30
|
-
type: 'bar',
|
|
31
|
-
id: 'ranking-bar',
|
|
32
|
-
dataId: 'timeData',
|
|
33
|
-
direction: 'horizontal',
|
|
34
|
-
yField,
|
|
35
|
-
xField,
|
|
36
|
-
seriesField: yField,
|
|
37
|
-
extensionMark: [],
|
|
38
|
-
label: labelSpec(label, Object.assign(Object.assign({}, nameLabel), { yField }))
|
|
39
|
-
}
|
|
40
|
-
];
|
|
41
|
-
spec.axes = axisSpec(xAxis, yAxis);
|
|
42
|
-
spec.player = vutils.merge({
|
|
43
|
-
type: 'continuous',
|
|
44
|
-
auto: true,
|
|
45
|
-
loop: false,
|
|
46
|
-
interval,
|
|
47
|
-
specs: timeNodes.map(time => ({
|
|
48
|
-
data: [
|
|
49
|
-
{ id: 'timeData', values: timeData.get(time) },
|
|
50
|
-
{ id: 'time', values: [{ time }] }
|
|
51
|
-
]
|
|
52
|
-
}))
|
|
53
|
-
}, player || {});
|
|
54
|
-
spec.tooltip = { visible: false };
|
|
55
|
-
spec.customMark = [];
|
|
56
|
-
transformAnimationSpec(spec, { interval, exchangeDuration });
|
|
57
|
-
if (animationAppear === false) {
|
|
58
|
-
spec.animationAppear = animationAppear;
|
|
59
|
-
}
|
|
60
|
-
if (animationDisappear === false) {
|
|
61
|
-
spec.animationDisappear = animationDisappear;
|
|
62
|
-
}
|
|
63
|
-
if (animationEnter === false) {
|
|
64
|
-
spec.animationEnter = animationEnter;
|
|
65
|
-
}
|
|
66
|
-
if (animationExit === false) {
|
|
67
|
-
spec.animationExit = animationExit;
|
|
68
|
-
}
|
|
69
|
-
if (animationNormal === false) {
|
|
70
|
-
spec.animationNormal = animationNormal;
|
|
71
|
-
}
|
|
72
|
-
if (animationUpdate === false) {
|
|
73
|
-
spec.animationUpdate = animationUpdate;
|
|
74
|
-
}
|
|
75
|
-
if (!timeLabel || timeLabel.visible !== false) {
|
|
76
|
-
spec.customMark.push(timeLabelSpec(timeLabel.style));
|
|
77
|
-
}
|
|
78
|
-
if (icon) {
|
|
79
|
-
const icon = iconSpec(iconPosition, iconShape, { interval, exchangeDuration });
|
|
80
|
-
spec.series[0].extensionMark.push(icon);
|
|
81
|
-
}
|
|
82
|
-
super.transformSpec(spec);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
function processData(spec) {
|
|
86
|
-
const { xField, yField, timeField, data, topN = 10, icon } = spec;
|
|
87
|
-
const timeNodes = new Set();
|
|
88
|
-
const timeData = new Map();
|
|
89
|
-
data.sort((d1, d2) => Number(d2[xField]) - Number(d1[xField]));
|
|
90
|
-
data.forEach(d => {
|
|
91
|
-
const time = d[timeField];
|
|
92
|
-
if (vutils.isValid(time)) {
|
|
93
|
-
timeNodes.add(time);
|
|
94
|
-
}
|
|
95
|
-
if (!timeData.has(time)) {
|
|
96
|
-
timeData.set(time, []);
|
|
97
|
-
}
|
|
98
|
-
const currentData = timeData.get(time);
|
|
99
|
-
if (currentData.length < topN) {
|
|
100
|
-
const _d = Object.assign({}, d);
|
|
101
|
-
if (icon && icon[_d[yField]]) {
|
|
102
|
-
_d['icon'] = icon[_d[yField]];
|
|
103
|
-
}
|
|
104
|
-
currentData.push(_d);
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
return { timeData, timeNodes: Array.from(timeNodes).sort() };
|
|
108
|
-
}
|
|
109
|
-
function transformAnimationSpec(spec, { interval, exchangeDuration }) {
|
|
110
|
-
spec.animationAppear = false;
|
|
111
|
-
spec.animationUpdate = {
|
|
112
|
-
bar: [
|
|
113
|
-
{
|
|
114
|
-
type: 'update',
|
|
115
|
-
options: { excludeChannels: ['y'] },
|
|
116
|
-
easing: 'linear',
|
|
117
|
-
duration: interval
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
channel: ['y'],
|
|
121
|
-
easing: 'circInOut',
|
|
122
|
-
duration: exchangeDuration
|
|
123
|
-
}
|
|
124
|
-
],
|
|
125
|
-
axis: {
|
|
126
|
-
duration: interval,
|
|
127
|
-
easing: 'linear'
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
spec.animationEnter = {
|
|
131
|
-
bar: [
|
|
132
|
-
{
|
|
133
|
-
type: 'moveIn',
|
|
134
|
-
duration: exchangeDuration,
|
|
135
|
-
easing: 'cubicInOut',
|
|
136
|
-
options: {
|
|
137
|
-
direction: 'y',
|
|
138
|
-
orient: 'negative',
|
|
139
|
-
point: (datum, element, param) => {
|
|
140
|
-
return {
|
|
141
|
-
y: param.groupHeight + element.getBounds().height()
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
]
|
|
147
|
-
};
|
|
148
|
-
spec.animationExit = {
|
|
149
|
-
bar: [
|
|
150
|
-
{
|
|
151
|
-
type: 'moveOut',
|
|
152
|
-
duration: exchangeDuration,
|
|
153
|
-
easing: 'cubicInOut',
|
|
154
|
-
options: {
|
|
155
|
-
direction: 'y',
|
|
156
|
-
orient: 'negative'
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
]
|
|
160
|
-
};
|
|
161
|
-
}
|
|
162
|
-
function labelSpec(label = {}, nameLabel) {
|
|
163
|
-
var _a, _b, _c, _e;
|
|
164
|
-
const spec = [];
|
|
165
|
-
if (label.visible !== false) {
|
|
166
|
-
spec.push({
|
|
167
|
-
visible: true,
|
|
168
|
-
overlap: false,
|
|
169
|
-
style: Object.assign({ fill: `rgb(64, 64, 64)` }, label.style),
|
|
170
|
-
smartInvert: {
|
|
171
|
-
fillStrategy: ((_a = label.style) === null || _a === void 0 ? void 0 : _a.fill) ? 'null' : undefined,
|
|
172
|
-
strokeStrategy: ((_b = label.style) === null || _b === void 0 ? void 0 : _b.stroke) ? 'null' : undefined
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
if (nameLabel.visible) {
|
|
177
|
-
spec.push({
|
|
178
|
-
visible: true,
|
|
179
|
-
overlap: false,
|
|
180
|
-
style: Object.assign({}, nameLabel.style),
|
|
181
|
-
smartInvert: {
|
|
182
|
-
fillStrategy: ((_c = nameLabel.style) === null || _c === void 0 ? void 0 : _c.fill) ? 'null' : undefined,
|
|
183
|
-
strokeStrategy: ((_e = nameLabel.style) === null || _e === void 0 ? void 0 : _e.stroke) ? 'null' : undefined
|
|
184
|
-
},
|
|
185
|
-
position: nameLabel.position === 'bar-end' ? 'inside-right' : 'inside-left',
|
|
186
|
-
formatter: `{${nameLabel.yField}}`
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
return spec;
|
|
190
|
-
}
|
|
191
|
-
function axisSpec(xAxis = {}, yAxis = {}) {
|
|
192
|
-
const leftAxis = {
|
|
193
|
-
orient: 'left',
|
|
194
|
-
type: 'band',
|
|
195
|
-
inverse: true,
|
|
196
|
-
label: { style: yAxis.label },
|
|
197
|
-
domainLine: { style: yAxis.domainLine },
|
|
198
|
-
grid: { style: yAxis.grid }
|
|
199
|
-
};
|
|
200
|
-
const bottomAxis = {
|
|
201
|
-
orient: 'bottom',
|
|
202
|
-
type: 'linear',
|
|
203
|
-
nice: false,
|
|
204
|
-
animation: true,
|
|
205
|
-
label: { style: xAxis.label },
|
|
206
|
-
domainLine: { style: xAxis.domainLine },
|
|
207
|
-
grid: { style: xAxis.grid },
|
|
208
|
-
innerOffset: { right: '10%' }
|
|
209
|
-
};
|
|
210
|
-
if (xAxis.label) {
|
|
211
|
-
bottomAxis.label = xAxis.label;
|
|
212
|
-
}
|
|
213
|
-
return [leftAxis, bottomAxis];
|
|
214
|
-
}
|
|
215
|
-
function timeLabelSpec(textStyle = {}) {
|
|
216
|
-
return {
|
|
217
|
-
type: 'text',
|
|
218
|
-
dataId: 'time',
|
|
219
|
-
style: Object.assign({ textBaseline: 'alphabetic', fontSize: 200, textAlign: 'end', fontWeight: 600, text: (datum) => datum.time, x: (datum, ctx) => {
|
|
220
|
-
var _a;
|
|
221
|
-
return (_a = ctx.vchart.getChart().getLayoutRect()) === null || _a === void 0 ? void 0 : _a.width;
|
|
222
|
-
}, y: (datum, ctx) => {
|
|
223
|
-
var _a, _b;
|
|
224
|
-
return (_b = (_a = ctx.vchart.getChart().getAllRegions()[0]) === null || _a === void 0 ? void 0 : _a.getLayoutRect()) === null || _b === void 0 ? void 0 : _b.height;
|
|
225
|
-
}, fill: 'grey', fillOpacity: 0.5 }, textStyle)
|
|
226
|
-
};
|
|
227
|
-
}
|
|
228
|
-
function iconSpec(iconPosition = 'bar-end', iconShape = 'circle', { interval, exchangeDuration }) {
|
|
229
|
-
return {
|
|
230
|
-
type: 'symbol',
|
|
231
|
-
dataId: 'timeData',
|
|
232
|
-
style: {
|
|
233
|
-
symbolType: iconShape,
|
|
234
|
-
stroke: 'white',
|
|
235
|
-
lineWidth: 1,
|
|
236
|
-
size: (data, ctx) => {
|
|
237
|
-
var _a, _b;
|
|
238
|
-
const vchart = ctx.vchart;
|
|
239
|
-
const series = (_a = vchart.getChart()) === null || _a === void 0 ? void 0 : _a.getSeriesInIndex(0)[0];
|
|
240
|
-
if (vchart && series) {
|
|
241
|
-
const bandwidth = (_b = series.getYAxisHelper().getBandwidth(0)) !== null && _b !== void 0 ? _b : 0;
|
|
242
|
-
return Math.max(bandwidth - 4, 0);
|
|
243
|
-
}
|
|
244
|
-
return 10;
|
|
245
|
-
},
|
|
246
|
-
background: (data) => data.icon,
|
|
247
|
-
x: (data, ctx) => {
|
|
248
|
-
var _a, _b;
|
|
249
|
-
const vchart = ctx.vchart;
|
|
250
|
-
const series = (_a = vchart.getChart()) === null || _a === void 0 ? void 0 : _a.getSeriesInIndex(0)[0];
|
|
251
|
-
if (vchart && series) {
|
|
252
|
-
const bandwidth = (_b = series.getYAxisHelper().getBandwidth(0)) !== null && _b !== void 0 ? _b : 0;
|
|
253
|
-
if (iconPosition === 'bar-start') {
|
|
254
|
-
return bandwidth / 2;
|
|
255
|
-
}
|
|
256
|
-
else if (iconPosition === 'axis') {
|
|
257
|
-
return -bandwidth / 2;
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
260
|
-
return series.dataToPositionX(data) - bandwidth / 2;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
return undefined;
|
|
264
|
-
},
|
|
265
|
-
y: (data, ctx) => {
|
|
266
|
-
var _a, _b;
|
|
267
|
-
const vchart = ctx.vchart;
|
|
268
|
-
const series = (_a = vchart.getChart()) === null || _a === void 0 ? void 0 : _a.getSeriesInIndex(0)[0];
|
|
269
|
-
if (vchart && series) {
|
|
270
|
-
const bandwidth = (_b = series.getYAxisHelper().getBandwidth(0)) !== null && _b !== void 0 ? _b : 0;
|
|
271
|
-
return series.dataToPositionY(data) + bandwidth / 2;
|
|
272
|
-
}
|
|
273
|
-
return undefined;
|
|
274
|
-
},
|
|
275
|
-
scaleY: iconShape === 'rect' ? 1.2 : 1
|
|
276
|
-
},
|
|
277
|
-
animationUpdate: customMarkUpdateAnimation(interval, exchangeDuration),
|
|
278
|
-
animationEnter: [
|
|
279
|
-
{
|
|
280
|
-
type: 'moveIn',
|
|
281
|
-
duration: exchangeDuration,
|
|
282
|
-
easing: 'cubicInOut',
|
|
283
|
-
options: {
|
|
284
|
-
direction: 'y',
|
|
285
|
-
orient: 'negative',
|
|
286
|
-
point: (datum, element, param) => {
|
|
287
|
-
return {
|
|
288
|
-
y: param.groupHeight + element.getBounds().height()
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
],
|
|
294
|
-
animationExit: [
|
|
295
|
-
{
|
|
296
|
-
type: 'moveOut',
|
|
297
|
-
duration: exchangeDuration,
|
|
298
|
-
easing: 'cubicInOut',
|
|
299
|
-
options: {
|
|
300
|
-
direction: 'y',
|
|
301
|
-
orient: 'negative'
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
]
|
|
305
|
-
};
|
|
306
|
-
}
|
|
307
|
-
function customMarkUpdateAnimation(duration, exchangeDuration) {
|
|
308
|
-
return [
|
|
309
|
-
{
|
|
310
|
-
duration: exchangeDuration,
|
|
311
|
-
easing: 'cubicInOut',
|
|
312
|
-
channel: ['y']
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
options: { excludeChannels: ['y'] },
|
|
316
|
-
channel: ['x', 'x2', 'x1'],
|
|
317
|
-
easing: 'linear',
|
|
318
|
-
duration
|
|
319
|
-
}
|
|
320
|
-
];
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
class RankingBar extends VChart.BaseChart {
|
|
324
|
-
constructor() {
|
|
325
|
-
super(...arguments);
|
|
326
|
-
this.type = 'rankingBar';
|
|
327
|
-
this.transformerConstructor = RankingBarChartSpecTransformer;
|
|
328
|
-
}
|
|
329
|
-
init() {
|
|
330
|
-
if (!this.isValid()) {
|
|
331
|
-
return;
|
|
332
|
-
}
|
|
333
|
-
super.init();
|
|
334
|
-
}
|
|
335
|
-
isValid() {
|
|
336
|
-
var _a, _b, _c, _d;
|
|
337
|
-
const { xField, yField, timeField, data } = this._spec;
|
|
338
|
-
if (!xField || !yField || !timeField) {
|
|
339
|
-
(_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField`, `timeField` ');
|
|
340
|
-
return false;
|
|
341
|
-
}
|
|
342
|
-
if (!data) {
|
|
343
|
-
(_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
|
|
344
|
-
return false;
|
|
345
|
-
}
|
|
346
|
-
return true;
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
RankingBar.type = 'rankingBar';
|
|
350
|
-
RankingBar.view = 'singleDefault';
|
|
351
|
-
RankingBar.transformerConstructor = RankingBarChartSpecTransformer;
|
|
352
|
-
const registerRankingBarChart = (option) => {
|
|
353
|
-
const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || VChart;
|
|
354
|
-
if (vchartConstructor) {
|
|
355
|
-
vchartConstructor.useChart([RankingBar]);
|
|
356
|
-
}
|
|
357
|
-
};
|
|
358
|
-
|
|
359
|
-
exports.RankingBar = RankingBar;
|
|
360
|
-
exports.registerRankingBarChart = registerRankingBarChart;
|
|
361
|
-
|
|
362
|
-
}));
|
package/build/index.min.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@visactor/vchart"),require("@visactor/vutils")):"function"==typeof define&&define.amd?define(["exports","@visactor/vchart","@visactor/vutils"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VChartExtension={},t.VChart,t.VUtils)}(this,(function(t,e,i){"use strict";class n extends e.BaseChartSpecTransformer{transformSpec(t){const{timeData:e,timeNodes:n}=function(t){const{xField:e,yField:n,timeField:a,data:o,topN:r=10,icon:s}=t,l=new Set,d=new Map;return o.sort(((t,i)=>Number(i[e])-Number(t[e]))),o.forEach((t=>{const e=t[a];i.isValid(e)&&l.add(e),d.has(e)||d.set(e,[]);const o=d.get(e);if(o.length<r){const e=Object.assign({},t);s&&s[e[n]]&&(e.icon=s[e[n]]),o.push(e)}})),{timeData:d,timeNodes:Array.from(l).sort()}}(t),{interval:r,xField:s,yField:l,color:d,icon:u,iconPosition:c,iconShape:g,timeLabel:p,label:v,nameLabel:m,xAxis:y,yAxis:h,animationAppear:b,animationDisappear:f,animationEnter:x,animationExit:I,animationNormal:C,animationUpdate:O,player:F}=t,k=r||1e3,D=Math.min(k,500);if(t.type="common",t.data=[{id:"timeData",values:e.get(n[0])},{id:"time",values:[{time:n[0]}]}],t.color={specified:Object.assign({},d)},t.region=[{clip:!0}],t.series=[{type:"bar",id:"ranking-bar",dataId:"timeData",direction:"horizontal",yField:l,xField:s,seriesField:l,extensionMark:[],label:a(v,Object.assign(Object.assign({},m),{yField:l}))}],t.axes=function(t={},e={}){const i={orient:"left",type:"band",inverse:!0,label:{style:e.label},domainLine:{style:e.domainLine},grid:{style:e.grid}},n={orient:"bottom",type:"linear",nice:!1,animation:!0,label:{style:t.label},domainLine:{style:t.domainLine},grid:{style:t.grid},innerOffset:{right:"10%"}};t.label&&(n.label=t.label);return[i,n]}(y,h),t.player=i.merge({type:"continuous",auto:!0,loop:!1,interval:k,specs:n.map((t=>({data:[{id:"timeData",values:e.get(t)},{id:"time",values:[{time:t}]}]})))},F||{}),t.tooltip={visible:!1},t.customMark=[],function(t,{interval:e,exchangeDuration:i}){t.animationAppear=!1,t.animationUpdate={bar:[{type:"update",options:{excludeChannels:["y"]},easing:"linear",duration:e},{channel:["y"],easing:"circInOut",duration:i}],axis:{duration:e,easing:"linear"}},t.animationEnter={bar:[{type:"moveIn",duration:i,easing:"cubicInOut",options:{direction:"y",orient:"negative",point:(t,e,i)=>({y:i.groupHeight+e.getBounds().height()})}}]},t.animationExit={bar:[{type:"moveOut",duration:i,easing:"cubicInOut",options:{direction:"y",orient:"negative"}}]}}(t,{interval:k,exchangeDuration:D}),!1===b&&(t.animationAppear=b),!1===f&&(t.animationDisappear=f),!1===x&&(t.animationEnter=x),!1===I&&(t.animationExit=I),!1===C&&(t.animationNormal=C),!1===O&&(t.animationUpdate=O),p&&!1===p.visible||t.customMark.push(function(t={}){return{type:"text",dataId:"time",style:Object.assign({textBaseline:"alphabetic",fontSize:200,textAlign:"end",fontWeight:600,text:t=>t.time,x:(t,e)=>{var i;return null===(i=e.vchart.getChart().getLayoutRect())||void 0===i?void 0:i.width},y:(t,e)=>{var i,n;return null===(n=null===(i=e.vchart.getChart().getAllRegions()[0])||void 0===i?void 0:i.getLayoutRect())||void 0===n?void 0:n.height},fill:"grey",fillOpacity:.5},t)}}(p.style)),u){const e=function(t="bar-end",e="circle",{interval:i,exchangeDuration:n}){return{type:"symbol",dataId:"timeData",style:{symbolType:e,stroke:"white",lineWidth:1,size:(t,e)=>{var i,n;const a=e.vchart,o=null===(i=a.getChart())||void 0===i?void 0:i.getSeriesInIndex(0)[0];if(a&&o){const t=null!==(n=o.getYAxisHelper().getBandwidth(0))&&void 0!==n?n:0;return Math.max(t-4,0)}return 10},background:t=>t.icon,x:(e,i)=>{var n,a;const o=i.vchart,r=null===(n=o.getChart())||void 0===n?void 0:n.getSeriesInIndex(0)[0];if(o&&r){const i=null!==(a=r.getYAxisHelper().getBandwidth(0))&&void 0!==a?a:0;return"bar-start"===t?i/2:"axis"===t?-i/2:r.dataToPositionX(e)-i/2}},y:(t,e)=>{var i,n;const a=e.vchart,o=null===(i=a.getChart())||void 0===i?void 0:i.getSeriesInIndex(0)[0];if(a&&o){const e=null!==(n=o.getYAxisHelper().getBandwidth(0))&&void 0!==n?n:0;return o.dataToPositionY(t)+e/2}},scaleY:"rect"===e?1.2:1},animationUpdate:o(i,n),animationEnter:[{type:"moveIn",duration:n,easing:"cubicInOut",options:{direction:"y",orient:"negative",point:(t,e,i)=>({y:i.groupHeight+e.getBounds().height()})}}],animationExit:[{type:"moveOut",duration:n,easing:"cubicInOut",options:{direction:"y",orient:"negative"}}]}}(c,g,{interval:k,exchangeDuration:D});t.series[0].extensionMark.push(e)}super.transformSpec(t)}}function a(t={},e){var i,n,a,o;const r=[];return!1!==t.visible&&r.push({visible:!0,overlap:!1,style:Object.assign({fill:"rgb(64, 64, 64)"},t.style),smartInvert:{fillStrategy:(null===(i=t.style)||void 0===i?void 0:i.fill)?"null":void 0,strokeStrategy:(null===(n=t.style)||void 0===n?void 0:n.stroke)?"null":void 0}}),e.visible&&r.push({visible:!0,overlap:!1,style:Object.assign({},e.style),smartInvert:{fillStrategy:(null===(a=e.style)||void 0===a?void 0:a.fill)?"null":void 0,strokeStrategy:(null===(o=e.style)||void 0===o?void 0:o.stroke)?"null":void 0},position:"bar-end"===e.position?"inside-right":"inside-left",formatter:`{${e.yField}}`}),r}function o(t,e){return[{duration:e,easing:"cubicInOut",channel:["y"]},{options:{excludeChannels:["y"]},channel:["x","x2","x1"],easing:"linear",duration:t}]}class r extends e.BaseChart{constructor(){super(...arguments),this.type="rankingBar",this.transformerConstructor=n}init(){this.isValid()&&super.init()}isValid(){var t,e,i,n;const{xField:a,yField:o,timeField:r,data:s}=this._spec;return a&&o&&r?!!s||(null===(n=(i=this._option).onError)||void 0===n||n.call(i,"Data is required"),!1):(null===(e=(t=this._option).onError)||void 0===e||e.call(t,"Missing Required Config: `xField`, `yField`, `timeField` "),!1)}}r.type="rankingBar",r.view="singleDefault",r.transformerConstructor=n;t.RankingBar=r,t.registerRankingBarChart=t=>{const i=(null==t?void 0:t.VChart)||e;i&&i.useChart([r])}}));
|
package/cjs/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ranking-bar/ranking-bar';
|
package/cjs/index.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
|
|
4
|
-
void 0 === k2 && (k2 = k);
|
|
5
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
-
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
|
|
7
|
-
enumerable: !0,
|
|
8
|
-
get: function() {
|
|
9
|
-
return m[k];
|
|
10
|
-
}
|
|
11
|
-
}), Object.defineProperty(o, k2, desc);
|
|
12
|
-
} : function(o, m, k, k2) {
|
|
13
|
-
void 0 === k2 && (k2 = k), o[k2] = m[k];
|
|
14
|
-
}), __exportStar = this && this.__exportStar || function(m, exports) {
|
|
15
|
-
for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
Object.defineProperty(exports, "__esModule", {
|
|
19
|
-
value: !0
|
|
20
|
-
}), __exportStar(require("./ranking-bar/ranking-bar"), exports);
|
package/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4DAA0C","file":"index.js","sourcesContent":["export * from './ranking-bar/ranking-bar';\n"]}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import type { ILineGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';
|
|
2
|
-
export type IRankingBarData = any[];
|
|
3
|
-
export interface IPlayConfig {
|
|
4
|
-
interval?: number;
|
|
5
|
-
}
|
|
6
|
-
export interface IRankingBarSpec extends IPlayConfig {
|
|
7
|
-
type: string;
|
|
8
|
-
data: IRankingBarData;
|
|
9
|
-
timeField: string;
|
|
10
|
-
xField: string;
|
|
11
|
-
yField: string;
|
|
12
|
-
topN?: number;
|
|
13
|
-
bar?: {
|
|
14
|
-
padding?: number;
|
|
15
|
-
cornerRadius?: number;
|
|
16
|
-
};
|
|
17
|
-
color?: Record<string, string>;
|
|
18
|
-
icon?: Record<string, string>;
|
|
19
|
-
iconPosition?: 'bar-end' | 'bar-start' | 'axis';
|
|
20
|
-
iconShape?: 'circle' | 'rect';
|
|
21
|
-
background?: string;
|
|
22
|
-
label?: {
|
|
23
|
-
visible?: boolean;
|
|
24
|
-
style?: ITextGraphicAttribute;
|
|
25
|
-
};
|
|
26
|
-
nameLabel?: ITextGraphicAttribute & {
|
|
27
|
-
visible?: boolean;
|
|
28
|
-
position?: 'bar-end' | 'bar-start';
|
|
29
|
-
style?: ITextGraphicAttribute;
|
|
30
|
-
};
|
|
31
|
-
timeLabel?: {
|
|
32
|
-
visible?: boolean;
|
|
33
|
-
style?: ITextGraphicAttribute;
|
|
34
|
-
};
|
|
35
|
-
xAxis?: {
|
|
36
|
-
label?: ITextGraphicAttribute;
|
|
37
|
-
domainLine?: ILineGraphicAttribute;
|
|
38
|
-
grid?: ILineGraphicAttribute;
|
|
39
|
-
};
|
|
40
|
-
yAxis?: {
|
|
41
|
-
label?: ITextGraphicAttribute;
|
|
42
|
-
domainLine?: ILineGraphicAttribute;
|
|
43
|
-
grid?: ILineGraphicAttribute;
|
|
44
|
-
};
|
|
45
|
-
animationAppear?: boolean | any;
|
|
46
|
-
animationEnter?: boolean | any;
|
|
47
|
-
animationUpdate?: boolean | any;
|
|
48
|
-
animationExit?: boolean | any;
|
|
49
|
-
animationDisappear?: boolean | any;
|
|
50
|
-
animationNormal?: boolean | any;
|
|
51
|
-
player?: any;
|
|
52
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["ranking-bar/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { ILineGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';\n\nexport type IRankingBarData = any[];\n\nexport interface IPlayConfig {\n interval?: number; // 单位毫秒\n}\n\nexport interface IRankingBarSpec extends IPlayConfig {\n type: string;\n data: IRankingBarData;\n\n timeField: string;\n xField: string;\n yField: string;\n\n topN?: number;\n\n bar?: {\n padding?: number;\n cornerRadius?: number;\n };\n\n color?: Record<string, string>;\n\n icon?: Record<string, string>;\n\n iconPosition?: 'bar-end' | 'bar-start' | 'axis';\n\n iconShape?: 'circle' | 'rect';\n\n background?: string;\n\n label?: {\n visible?: boolean;\n style?: ITextGraphicAttribute;\n };\n\n nameLabel?: ITextGraphicAttribute & {\n visible?: boolean;\n position?: 'bar-end' | 'bar-start';\n style?: ITextGraphicAttribute;\n };\n\n timeLabel?: {\n visible?: boolean;\n style?: ITextGraphicAttribute;\n };\n\n xAxis?: {\n label?: ITextGraphicAttribute;\n domainLine?: ILineGraphicAttribute;\n grid?: ILineGraphicAttribute;\n };\n\n yAxis?: {\n label?: ITextGraphicAttribute;\n domainLine?: ILineGraphicAttribute;\n grid?: ILineGraphicAttribute;\n };\n\n animationAppear?: boolean | any;\n animationEnter?: boolean | any;\n animationUpdate?: boolean | any;\n animationExit?: boolean | any;\n animationDisappear?: boolean | any;\n animationNormal?: boolean | any;\n player?: any;\n}\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { IRankingBarSpec } from './interface';
|
|
2
|
-
import type { ICommonChartSpec } from '@visactor/vchart';
|
|
3
|
-
import { BaseChartSpecTransformer } from '@visactor/vchart';
|
|
4
|
-
export declare class RankingBarChartSpecTransformer<T extends ICommonChartSpec> extends BaseChartSpecTransformer<any> {
|
|
5
|
-
transformSpec(spec: T): void;
|
|
6
|
-
}
|
|
7
|
-
export declare function processData(spec: IRankingBarSpec): {
|
|
8
|
-
timeData: Map<any, any>;
|
|
9
|
-
timeNodes: string[];
|
|
10
|
-
};
|