@easyv/charts 1.10.8 → 1.10.10
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/lib/components/CartesianChart.js +33 -16
- package/lib/components/Legend.js +51 -5
- package/lib/components/Line.js +5 -5
- package/lib/components/PieChart.js +5 -0
- package/lib/formatter/legend.js +111 -6
- package/lib/hooks/useAxes.js +10 -5
- package/lib/hooks/useCarouselAxisX.js +18 -16
- package/lib/utils/index.js +116 -105
- package/package.json +1 -1
- package/src/components/CartesianChart.js +38 -20
- package/src/components/Legend.js +63 -1
- package/src/components/Line.js +61 -38
- package/src/components/PieChart.js +37 -32
- package/src/formatter/legend.js +134 -24
- package/src/hooks/useAxes.js +18 -8
- package/src/hooks/useCarouselAxisX.js +320 -318
- package/src/utils/index.js +171 -155
package/lib/utils/index.js
CHANGED
|
@@ -20,7 +20,7 @@ var _excluded = ["color", "fill", "bold", "italic"],
|
|
|
20
20
|
_excluded2 = ["backgroundSize"];
|
|
21
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
22
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
-
var defaultBackground =
|
|
23
|
+
var defaultBackground = "#000000";
|
|
24
24
|
var defaultIcon = {
|
|
25
25
|
background: defaultBackground
|
|
26
26
|
};
|
|
@@ -38,22 +38,22 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
|
|
|
38
38
|
stops = _ref$fill$linear.stops,
|
|
39
39
|
_ref$pattern = _ref.pattern,
|
|
40
40
|
_ref$pattern$path = _ref$pattern.path,
|
|
41
|
-
path = _ref$pattern$path === void 0 ?
|
|
41
|
+
path = _ref$pattern$path === void 0 ? "" : _ref$pattern$path,
|
|
42
42
|
_ref$pattern$width = _ref$pattern.width,
|
|
43
|
-
width = _ref$pattern$width === void 0 ?
|
|
43
|
+
width = _ref$pattern$width === void 0 ? "100%" : _ref$pattern$width,
|
|
44
44
|
_ref$pattern$height = _ref$pattern.height,
|
|
45
|
-
height = _ref$pattern$height === void 0 ?
|
|
45
|
+
height = _ref$pattern$height === void 0 ? "100%" : _ref$pattern$height,
|
|
46
46
|
_ref$pattern$boderCol = _ref$pattern.boderColor,
|
|
47
|
-
stroke = _ref$pattern$boderCol === void 0 ?
|
|
47
|
+
stroke = _ref$pattern$boderCol === void 0 ? "transparent" : _ref$pattern$boderCol,
|
|
48
48
|
_ref$pattern$boderWid = _ref$pattern.boderWidth,
|
|
49
49
|
boderWidth = _ref$pattern$boderWid === void 0 ? 0 : _ref$pattern$boderWid;
|
|
50
50
|
// 处理宽高(支持百分比/数字)
|
|
51
|
-
var canvasWidth = width ===
|
|
52
|
-
var canvasHeight = height ===
|
|
51
|
+
var canvasWidth = width === "100%" ? 200 : Number(width) || 200; // 百分比默认200,可根据实际场景调整
|
|
52
|
+
var canvasHeight = height === "100%" ? 200 : Number(height) || 200;
|
|
53
53
|
|
|
54
54
|
// 创建离屏 Canvas
|
|
55
|
-
var canvas = document.createElement(
|
|
56
|
-
var ctx = canvas.getContext(
|
|
55
|
+
var canvas = document.createElement("canvas");
|
|
56
|
+
var ctx = canvas.getContext("2d");
|
|
57
57
|
canvas.width = canvasWidth;
|
|
58
58
|
canvas.height = canvasHeight;
|
|
59
59
|
|
|
@@ -64,7 +64,7 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
|
|
|
64
64
|
var path2D = new Path2D(path);
|
|
65
65
|
|
|
66
66
|
// 2. 处理填充(纯色/渐变)
|
|
67
|
-
if (type ===
|
|
67
|
+
if (type === "pure") {
|
|
68
68
|
ctx.fillStyle = pure;
|
|
69
69
|
} else {
|
|
70
70
|
// 线性渐变(对应原 SVG linearGradient)
|
|
@@ -101,7 +101,7 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
// 5. 转换为 DataURL(替代 SVG DataURL)
|
|
104
|
-
return canvas.toDataURL(
|
|
104
|
+
return canvas.toDataURL("image/png");
|
|
105
105
|
};
|
|
106
106
|
var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
|
|
107
107
|
var _ref3$fill = _ref3.fill,
|
|
@@ -113,13 +113,13 @@ var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
|
|
|
113
113
|
stops = _ref3$fill$linear.stops,
|
|
114
114
|
_ref3$pattern = _ref3.pattern,
|
|
115
115
|
_ref3$pattern$path = _ref3$pattern.path,
|
|
116
|
-
path = _ref3$pattern$path === void 0 ?
|
|
116
|
+
path = _ref3$pattern$path === void 0 ? "" : _ref3$pattern$path,
|
|
117
117
|
_ref3$pattern$width = _ref3$pattern.width,
|
|
118
|
-
width = _ref3$pattern$width === void 0 ?
|
|
118
|
+
width = _ref3$pattern$width === void 0 ? "100%" : _ref3$pattern$width,
|
|
119
119
|
_ref3$pattern$height = _ref3$pattern.height,
|
|
120
|
-
height = _ref3$pattern$height === void 0 ?
|
|
120
|
+
height = _ref3$pattern$height === void 0 ? "100%" : _ref3$pattern$height,
|
|
121
121
|
_ref3$pattern$boderCo = _ref3$pattern.boderColor,
|
|
122
|
-
stroke = _ref3$pattern$boderCo === void 0 ?
|
|
122
|
+
stroke = _ref3$pattern$boderCo === void 0 ? "transparent" : _ref3$pattern$boderCo,
|
|
123
123
|
_ref3$pattern$boderWi = _ref3$pattern.boderWidth,
|
|
124
124
|
boderWidth = _ref3$pattern$boderWi === void 0 ? 0 : _ref3$pattern$boderWi;
|
|
125
125
|
return /*#__PURE__*/React.createElement("svg", {
|
|
@@ -133,19 +133,19 @@ var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
|
|
|
133
133
|
y1: "0%",
|
|
134
134
|
x2: "0%",
|
|
135
135
|
y2: "100%",
|
|
136
|
-
gradientTransform:
|
|
136
|
+
gradientTransform: "rotate(" + (angle + 180) + ", 0.5, 0.5)"
|
|
137
137
|
}, stops.map(function (_ref4, index) {
|
|
138
138
|
var offset = _ref4.offset,
|
|
139
139
|
color = _ref4.color;
|
|
140
140
|
return /*#__PURE__*/React.createElement("stop", {
|
|
141
141
|
key: index,
|
|
142
|
-
offset: offset +
|
|
142
|
+
offset: offset + "%",
|
|
143
143
|
stopColor: color,
|
|
144
144
|
stopOpacity: opacity
|
|
145
145
|
});
|
|
146
146
|
}))), /*#__PURE__*/React.createElement("path", {
|
|
147
147
|
d: path,
|
|
148
|
-
fill: type ===
|
|
148
|
+
fill: type === "pure" ? pure : "url(#linearGradient)",
|
|
149
149
|
stroke: stroke,
|
|
150
150
|
strokeWidth: boderWidth
|
|
151
151
|
}));
|
|
@@ -157,7 +157,7 @@ var getColorList = exports.getColorList = function getColorList(_ref5) {
|
|
|
157
157
|
stops = _ref5$linear.stops,
|
|
158
158
|
angle = _ref5$linear.angle,
|
|
159
159
|
opacity = _ref5$linear.opacity;
|
|
160
|
-
if (type ==
|
|
160
|
+
if (type == "pure") {
|
|
161
161
|
return [{
|
|
162
162
|
color: pure,
|
|
163
163
|
offset: 1
|
|
@@ -179,7 +179,7 @@ var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colo
|
|
|
179
179
|
if (colors) {
|
|
180
180
|
var stops = colors.stops,
|
|
181
181
|
angle = colors.angle;
|
|
182
|
-
var result =
|
|
182
|
+
var result = "linear-gradient(" + angle + "deg, ";
|
|
183
183
|
var stops_ = JSON.parse(JSON.stringify(stops));
|
|
184
184
|
stops_.sort(function (a, b) {
|
|
185
185
|
return a.offset - b.offset;
|
|
@@ -190,14 +190,14 @@ var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colo
|
|
|
190
190
|
offset = _stops_$i.offset;
|
|
191
191
|
result += "".concat(color, " ").concat(offset, "%,");
|
|
192
192
|
}
|
|
193
|
-
return result.slice(0, -1) +
|
|
193
|
+
return result.slice(0, -1) + ")";
|
|
194
194
|
}
|
|
195
195
|
};
|
|
196
196
|
var getIcon = exports.getIcon = function getIcon(type, icon) {
|
|
197
197
|
var lineType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "solid";
|
|
198
198
|
switch (type) {
|
|
199
|
-
case
|
|
200
|
-
case
|
|
199
|
+
case "area":
|
|
200
|
+
case "line":
|
|
201
201
|
var color = icon.background;
|
|
202
202
|
return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultLineIcon), icon), {}, {
|
|
203
203
|
minWidth: icon.width,
|
|
@@ -212,30 +212,30 @@ var getIcon = exports.getIcon = function getIcon(type, icon) {
|
|
|
212
212
|
var dateFormat = exports.dateFormat = function dateFormat(date, fmt) {
|
|
213
213
|
date = new Date(date);
|
|
214
214
|
var o = {
|
|
215
|
-
|
|
215
|
+
"M+": date.getMonth() + 1,
|
|
216
216
|
//月份
|
|
217
|
-
|
|
217
|
+
"D+": date.getDate(),
|
|
218
218
|
//日
|
|
219
|
-
|
|
219
|
+
"H+": date.getHours(),
|
|
220
220
|
//小时
|
|
221
|
-
|
|
221
|
+
"h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12,
|
|
222
222
|
//小时
|
|
223
|
-
|
|
223
|
+
"m+": date.getMinutes(),
|
|
224
224
|
//分
|
|
225
|
-
|
|
225
|
+
"s+": date.getSeconds(),
|
|
226
226
|
//秒
|
|
227
227
|
S: date.getMilliseconds(),
|
|
228
228
|
//毫秒
|
|
229
|
-
X:
|
|
230
|
-
W: new Array(
|
|
231
|
-
w: new Array(
|
|
229
|
+
X: "星期" + "日一二三四五六".charAt(date.getDay()),
|
|
230
|
+
W: new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")[date.getDay()],
|
|
231
|
+
w: new Array("Sun.", "Mon.", " Tues.", "Wed.", " Thur.", "Fri.", "Sat.")[date.getDay()]
|
|
232
232
|
};
|
|
233
|
-
if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() +
|
|
234
|
-
for (var k in o) if (new RegExp(
|
|
233
|
+
if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
234
|
+
for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
|
|
235
235
|
return fmt;
|
|
236
236
|
};
|
|
237
237
|
var getBreakWord = exports.getBreakWord = function getBreakWord(str, breakNumber) {
|
|
238
|
-
var re = new RegExp(
|
|
238
|
+
var re = new RegExp("([^]){1," + breakNumber + "}", "g");
|
|
239
239
|
return str.match(re);
|
|
240
240
|
};
|
|
241
241
|
|
|
@@ -288,17 +288,17 @@ var getTickCoord = exports.getTickCoord = function getTickCoord(_ref7) {
|
|
|
288
288
|
y = _ref7$y === void 0 ? 0 : _ref7$y;
|
|
289
289
|
var x1, x2, y1, y2;
|
|
290
290
|
switch (orientation) {
|
|
291
|
-
case
|
|
291
|
+
case "top":
|
|
292
292
|
x1 = x2 = coordinate;
|
|
293
293
|
y2 = y;
|
|
294
294
|
y1 = y2 - tickSize;
|
|
295
295
|
break;
|
|
296
|
-
case
|
|
296
|
+
case "left":
|
|
297
297
|
y1 = y2 = coordinate;
|
|
298
298
|
x2 = x;
|
|
299
299
|
x1 = x2 - tickSize;
|
|
300
300
|
break;
|
|
301
|
-
case
|
|
301
|
+
case "right":
|
|
302
302
|
y1 = y2 = coordinate;
|
|
303
303
|
x2 = x;
|
|
304
304
|
x1 = x2 + tickSize;
|
|
@@ -322,22 +322,22 @@ var getGridCoord = exports.getGridCoord = function getGridCoord(_ref8) {
|
|
|
322
322
|
end = _ref8.end;
|
|
323
323
|
var x1, x2, y1, y2;
|
|
324
324
|
switch (orientation) {
|
|
325
|
-
case
|
|
325
|
+
case "top":
|
|
326
326
|
x1 = x2 = coordinate;
|
|
327
327
|
y1 = 0;
|
|
328
328
|
y2 = end;
|
|
329
329
|
break;
|
|
330
|
-
case
|
|
330
|
+
case "bottom":
|
|
331
331
|
x1 = x2 = coordinate;
|
|
332
332
|
y1 = 0;
|
|
333
333
|
y2 = end * -1;
|
|
334
334
|
break;
|
|
335
|
-
case
|
|
335
|
+
case "left":
|
|
336
336
|
y1 = y2 = coordinate;
|
|
337
337
|
x1 = 0;
|
|
338
338
|
x2 = end;
|
|
339
339
|
break;
|
|
340
|
-
case
|
|
340
|
+
case "right":
|
|
341
341
|
y1 = y2 = coordinate;
|
|
342
342
|
x1 = 0;
|
|
343
343
|
x2 = end * -1;
|
|
@@ -372,14 +372,14 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref9, type) {
|
|
|
372
372
|
fontFamily = _ref9.fontFamily,
|
|
373
373
|
letterSpacing = _ref9.letterSpacing,
|
|
374
374
|
lineHeight = _ref9.lineHeight;
|
|
375
|
-
if (type ==
|
|
375
|
+
if (type == "svg") {
|
|
376
376
|
return {
|
|
377
377
|
fontSize: fontSize,
|
|
378
378
|
fontFamily: fontFamily,
|
|
379
379
|
letterSpacing: letterSpacing,
|
|
380
380
|
fill: color,
|
|
381
|
-
fontWeight: bold ?
|
|
382
|
-
fontStyle: italic ?
|
|
381
|
+
fontWeight: bold ? "bold" : "normal",
|
|
382
|
+
fontStyle: italic ? "italic" : "normal",
|
|
383
383
|
lineHeight: lineHeight + "px"
|
|
384
384
|
};
|
|
385
385
|
}
|
|
@@ -388,8 +388,8 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref9, type) {
|
|
|
388
388
|
fontFamily: fontFamily,
|
|
389
389
|
letterSpacing: letterSpacing,
|
|
390
390
|
color: color,
|
|
391
|
-
fontWeight: bold ?
|
|
392
|
-
fontStyle: italic ?
|
|
391
|
+
fontWeight: bold ? "bold" : "normal",
|
|
392
|
+
fontStyle: italic ? "italic" : "normal",
|
|
393
393
|
lineHeight: lineHeight + "px" //不加px默认是倍数关系
|
|
394
394
|
};
|
|
395
395
|
};
|
|
@@ -399,17 +399,17 @@ var formatFont = exports.formatFont = function formatFont(_ref10, type) {
|
|
|
399
399
|
bold = _ref10.bold,
|
|
400
400
|
italic = _ref10.italic,
|
|
401
401
|
rest = (0, _objectWithoutProperties2["default"])(_ref10, _excluded);
|
|
402
|
-
if (type ==
|
|
402
|
+
if (type == "svg") {
|
|
403
403
|
return _objectSpread({
|
|
404
404
|
fill: fill || color,
|
|
405
|
-
fontWeight: typeof bold == "string" ? bold : bold ?
|
|
406
|
-
fontStyle: typeof italic == "string" ? italic : italic ?
|
|
405
|
+
fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
|
|
406
|
+
fontStyle: typeof italic == "string" ? italic : italic ? "italic" : "normal"
|
|
407
407
|
}, rest);
|
|
408
408
|
}
|
|
409
409
|
return _objectSpread({
|
|
410
410
|
color: color || fill,
|
|
411
|
-
fontWeight: typeof bold == "string" ? bold : bold ?
|
|
412
|
-
fontStyle: typeof italic == "string" ? italic : italic ?
|
|
411
|
+
fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
|
|
412
|
+
fontStyle: typeof italic == "string" ? italic : italic ? "italic" : "normal"
|
|
413
413
|
}, rest);
|
|
414
414
|
};
|
|
415
415
|
var getMargin = exports.getMargin = function getMargin(_ref11) {
|
|
@@ -417,7 +417,7 @@ var getMargin = exports.getMargin = function getMargin(_ref11) {
|
|
|
417
417
|
marginRight = _ref11.marginRight,
|
|
418
418
|
marginBottom = _ref11.marginBottom,
|
|
419
419
|
marginLeft = _ref11.marginLeft;
|
|
420
|
-
return marginTop +
|
|
420
|
+
return marginTop + "px " + marginRight + "px " + marginBottom + "px " + marginLeft + "px";
|
|
421
421
|
};
|
|
422
422
|
var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref12) {
|
|
423
423
|
var _ref12$x = _ref12.x,
|
|
@@ -426,14 +426,14 @@ var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref12) {
|
|
|
426
426
|
y = _ref12$y === void 0 ? 0 : _ref12$y,
|
|
427
427
|
_ref12$z = _ref12.z,
|
|
428
428
|
z = _ref12$z === void 0 ? 0 : _ref12$z;
|
|
429
|
-
return
|
|
429
|
+
return "translate3d(" + x + "px, " + y + "px, " + z + "px)";
|
|
430
430
|
};
|
|
431
431
|
var getTranslate2d = exports.getTranslate2d = function getTranslate2d(_ref13) {
|
|
432
432
|
var _ref13$x = _ref13.x,
|
|
433
433
|
x = _ref13$x === void 0 ? 0 : _ref13$x,
|
|
434
434
|
_ref13$y = _ref13.y,
|
|
435
435
|
y = _ref13$y === void 0 ? 0 : _ref13$y;
|
|
436
|
-
return
|
|
436
|
+
return "translate(" + x + ", " + y + ")";
|
|
437
437
|
};
|
|
438
438
|
function band() {
|
|
439
439
|
var scale = (0, _d3v.scaleOrdinal)().unknown(undefined),
|
|
@@ -540,9 +540,9 @@ var getStacks = exports.getStacks = function getStacks(series) {
|
|
|
540
540
|
yOrZ: yOrZ,
|
|
541
541
|
s: [name]
|
|
542
542
|
};
|
|
543
|
-
if (type ===
|
|
543
|
+
if (type === "band") {
|
|
544
544
|
var index = tmp.filter(function (item) {
|
|
545
|
-
return item.type ===
|
|
545
|
+
return item.type === "band";
|
|
546
546
|
}).length;
|
|
547
547
|
tmp.push(_objectSpread(_objectSpread({}, common), {}, {
|
|
548
548
|
index: index
|
|
@@ -581,7 +581,7 @@ var seriesYOrZ = exports.seriesYOrZ = function seriesYOrZ(series) {
|
|
|
581
581
|
var y = new Map();
|
|
582
582
|
var z = new Map();
|
|
583
583
|
series.forEach(function (value, key) {
|
|
584
|
-
if (value.yOrZ ===
|
|
584
|
+
if (value.yOrZ === "y") {
|
|
585
585
|
y.set(key, value);
|
|
586
586
|
} else {
|
|
587
587
|
z.set(key, value);
|
|
@@ -609,7 +609,7 @@ var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack,
|
|
|
609
609
|
};
|
|
610
610
|
var reverseGradientStops = function reverseGradientStops(gradient) {
|
|
611
611
|
var _gradient$linear;
|
|
612
|
-
if (gradient.type !==
|
|
612
|
+
if (gradient.type !== "linear" || !((_gradient$linear = gradient.linear) !== null && _gradient$linear !== void 0 && _gradient$linear.stops)) {
|
|
613
613
|
return gradient;
|
|
614
614
|
}
|
|
615
615
|
var stops = gradient.linear.stops;
|
|
@@ -641,16 +641,16 @@ var getBandBackground = exports.getBandBackground = function getBandBackground(p
|
|
|
641
641
|
}
|
|
642
642
|
try {
|
|
643
643
|
var _pattern$backgroundSi = pattern.backgroundSize,
|
|
644
|
-
backgroundSize = _pattern$backgroundSi === void 0 ?
|
|
644
|
+
backgroundSize = _pattern$backgroundSi === void 0 ? "100% 100%" : _pattern$backgroundSi,
|
|
645
645
|
_pattern = (0, _objectWithoutProperties2["default"])(pattern, _excluded2);
|
|
646
646
|
// 替换原 SVG DataURL 为 Canvas DataURL
|
|
647
647
|
var canvasDataUrl = renderCanvasBackground({
|
|
648
648
|
fill: fill,
|
|
649
649
|
pattern: _pattern
|
|
650
650
|
});
|
|
651
|
-
return
|
|
651
|
+
return "center top / " + backgroundSize + ' url("' + canvasDataUrl + '")';
|
|
652
652
|
} catch (e) {
|
|
653
|
-
console.error(
|
|
653
|
+
console.error("Canvas 绘制背景失败:", e);
|
|
654
654
|
}
|
|
655
655
|
return "";
|
|
656
656
|
};
|
|
@@ -697,14 +697,14 @@ var isValidHttpUrl = exports.isValidHttpUrl = function isValidHttpUrl(string) {
|
|
|
697
697
|
} catch (_) {
|
|
698
698
|
return false;
|
|
699
699
|
}
|
|
700
|
-
return url.protocol ===
|
|
700
|
+
return url.protocol === "http:" || url.protocol === "https:";
|
|
701
701
|
};
|
|
702
702
|
var getChildren = exports.getChildren = function getChildren(svgStr) {
|
|
703
|
-
var wrapper = document.createElement(
|
|
703
|
+
var wrapper = document.createElement("div");
|
|
704
704
|
wrapper.innerHTML = svgStr;
|
|
705
705
|
var childNodes = wrapper.childNodes;
|
|
706
706
|
var svgDom = (0, _toConsumableArray2["default"])(childNodes).find(function (item) {
|
|
707
|
-
return item.tagName ===
|
|
707
|
+
return item.tagName === "svg";
|
|
708
708
|
});
|
|
709
709
|
if (!!svgDom) {
|
|
710
710
|
return (0, _toConsumableArray2["default"])(svgDom.childNodes);
|
|
@@ -715,7 +715,7 @@ var _filterChildren = exports.filterChildren = function filterChildren(children,
|
|
|
715
715
|
return children.reduce(function (prev, node) {
|
|
716
716
|
var nodeName = node.nodeName;
|
|
717
717
|
if (tagNames.indexOf(nodeName) > -1) {
|
|
718
|
-
if (nodeName ===
|
|
718
|
+
if (nodeName === "g") {
|
|
719
719
|
return _filterChildren((0, _toConsumableArray2["default"])(node.childNodes), tagNames);
|
|
720
720
|
} else {
|
|
721
721
|
prev.push(node);
|
|
@@ -726,76 +726,76 @@ var _filterChildren = exports.filterChildren = function filterChildren(children,
|
|
|
726
726
|
};
|
|
727
727
|
var getDomPath = exports.getDomPath = function getDomPath(node) {
|
|
728
728
|
switch (node.nodeName) {
|
|
729
|
-
case
|
|
729
|
+
case "circle":
|
|
730
730
|
return (0, _svgPoints.toPath)({
|
|
731
|
-
type:
|
|
732
|
-
cx: +node.getAttribute(
|
|
733
|
-
cy: +node.getAttribute(
|
|
734
|
-
r: +node.getAttribute(
|
|
731
|
+
type: "circle",
|
|
732
|
+
cx: +node.getAttribute("cx") || 0,
|
|
733
|
+
cy: +node.getAttribute("cy") || 0,
|
|
734
|
+
r: +node.getAttribute("r") || 0
|
|
735
735
|
});
|
|
736
|
-
case
|
|
736
|
+
case "ellipse":
|
|
737
737
|
return (0, _svgPoints.toPath)({
|
|
738
|
-
type:
|
|
739
|
-
cx: +node.getAttribute(
|
|
740
|
-
cy: +node.getAttribute(
|
|
741
|
-
rx: +node.getAttribute(
|
|
742
|
-
ry: +node.getAttribute(
|
|
738
|
+
type: "ellipse",
|
|
739
|
+
cx: +node.getAttribute("cx") || 0,
|
|
740
|
+
cy: +node.getAttribute("cy") || 0,
|
|
741
|
+
rx: +node.getAttribute("rx") || 0,
|
|
742
|
+
ry: +node.getAttribute("ry") || 0
|
|
743
743
|
});
|
|
744
|
-
case
|
|
744
|
+
case "line":
|
|
745
745
|
return (0, _svgPoints.toPath)({
|
|
746
|
-
type:
|
|
747
|
-
x1: +node.getAttribute(
|
|
748
|
-
x2: +node.getAttribute(
|
|
749
|
-
y1: +node.getAttribute(
|
|
750
|
-
y2: +node.getAttribute(
|
|
746
|
+
type: "line",
|
|
747
|
+
x1: +node.getAttribute("x1") || 0,
|
|
748
|
+
x2: +node.getAttribute("x2") || 0,
|
|
749
|
+
y1: +node.getAttribute("y1") || 0,
|
|
750
|
+
y2: +node.getAttribute("y2") || 0
|
|
751
751
|
});
|
|
752
|
-
case
|
|
752
|
+
case "path":
|
|
753
753
|
return (0, _svgPoints.toPath)({
|
|
754
|
-
type:
|
|
755
|
-
d: node.getAttribute(
|
|
754
|
+
type: "path",
|
|
755
|
+
d: node.getAttribute("d") || ""
|
|
756
756
|
});
|
|
757
|
-
case
|
|
757
|
+
case "polygon":
|
|
758
758
|
return (0, _svgPoints.toPath)({
|
|
759
|
-
type:
|
|
760
|
-
points: node.getAttribute(
|
|
759
|
+
type: "polyline",
|
|
760
|
+
points: node.getAttribute("points") || ""
|
|
761
761
|
});
|
|
762
|
-
case
|
|
762
|
+
case "polyline":
|
|
763
763
|
return (0, _svgPoints.toPath)({
|
|
764
|
-
type:
|
|
765
|
-
points: node.getAttribute(
|
|
764
|
+
type: "polyline",
|
|
765
|
+
points: node.getAttribute("points") || ""
|
|
766
766
|
});
|
|
767
|
-
case
|
|
767
|
+
case "rect":
|
|
768
768
|
return (0, _svgPoints.toPath)({
|
|
769
|
-
type:
|
|
770
|
-
height: +node.getAttribute(
|
|
771
|
-
width: +node.getAttribute(
|
|
772
|
-
x: +node.getAttribute(
|
|
773
|
-
y: +node.getAttribute(
|
|
774
|
-
rx: +node.getAttribute(
|
|
775
|
-
ry: +node.getAttribute(
|
|
769
|
+
type: "rect",
|
|
770
|
+
height: +node.getAttribute("height") || 0,
|
|
771
|
+
width: +node.getAttribute("width") || 0,
|
|
772
|
+
x: +node.getAttribute("x") || 0,
|
|
773
|
+
y: +node.getAttribute("y") || 0,
|
|
774
|
+
rx: +node.getAttribute("rx") || 0,
|
|
775
|
+
ry: +node.getAttribute("ry") || 0
|
|
776
776
|
});
|
|
777
777
|
}
|
|
778
778
|
};
|
|
779
|
-
var sortPie = exports.sortPie = function sortPie(data, order) {
|
|
779
|
+
var sortPie = exports.sortPie = function sortPie(data, order, acc) {
|
|
780
780
|
var _data = data.map(function (item) {
|
|
781
781
|
return _objectSpread({}, item);
|
|
782
782
|
});
|
|
783
783
|
switch (order) {
|
|
784
|
-
case
|
|
784
|
+
case "":
|
|
785
785
|
_data.sort(function (_ref22, _ref23) {
|
|
786
786
|
var a = _ref22.index;
|
|
787
787
|
var b = _ref23.index;
|
|
788
788
|
return (0, _d3v.ascending)(a, b);
|
|
789
789
|
});
|
|
790
790
|
break;
|
|
791
|
-
case
|
|
791
|
+
case "desc":
|
|
792
792
|
_data.sort(function (_ref24, _ref25) {
|
|
793
793
|
var a = _ref24.value;
|
|
794
794
|
var b = _ref25.value;
|
|
795
795
|
return (0, _d3v.descending)(a, b);
|
|
796
796
|
});
|
|
797
797
|
break;
|
|
798
|
-
case
|
|
798
|
+
case "asc":
|
|
799
799
|
_data.sort(function (_ref26, _ref27) {
|
|
800
800
|
var a = _ref26.value;
|
|
801
801
|
var b = _ref27.value;
|
|
@@ -803,6 +803,17 @@ var sortPie = exports.sortPie = function sortPie(data, order) {
|
|
|
803
803
|
});
|
|
804
804
|
break;
|
|
805
805
|
}
|
|
806
|
+
if (acc && acc.columns) {
|
|
807
|
+
_data.forEach(function (item) {
|
|
808
|
+
item.fields = {};
|
|
809
|
+
Object.values(acc.columns).forEach(function (columnConfig) {
|
|
810
|
+
var fieldName = columnConfig.field;
|
|
811
|
+
if (fieldName) {
|
|
812
|
+
item.fields[fieldName] = columnConfig;
|
|
813
|
+
}
|
|
814
|
+
});
|
|
815
|
+
});
|
|
816
|
+
}
|
|
806
817
|
return _data;
|
|
807
818
|
};
|
|
808
819
|
var getDataWithPercent = exports.getDataWithPercent = function getDataWithPercent() {
|
|
@@ -855,7 +866,7 @@ var getDataWithPercent = exports.getDataWithPercent = function getDataWithPercen
|
|
|
855
866
|
});
|
|
856
867
|
return objData;
|
|
857
868
|
};
|
|
858
|
-
var excludeTypes = [
|
|
869
|
+
var excludeTypes = ["array", "object", "group", "modal", "colors"];
|
|
859
870
|
var _reduceConfig = exports.reduceConfig = function reduceConfig() {
|
|
860
871
|
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
861
872
|
if (!Array.isArray(config)) {
|
package/package.json
CHANGED
|
@@ -252,14 +252,20 @@ const Chart = memo(
|
|
|
252
252
|
|
|
253
253
|
const isVertical = axisX.direction === "vertical";
|
|
254
254
|
|
|
255
|
-
const
|
|
256
|
-
|
|
257
|
-
const
|
|
255
|
+
const axisStep = control ? axisX.controlStep : axisX.step;
|
|
256
|
+
const safeAxisStep = Number.isFinite(axisStep) ? axisStep : 0;
|
|
257
|
+
const indicatorWidth = (indicator.width * safeAxisStep) / 100;
|
|
258
|
+
const safeIndicatorWidth = Number.isFinite(indicatorWidth)
|
|
259
|
+
? indicatorWidth
|
|
260
|
+
: 0;
|
|
261
|
+
const tickPos = axisX.scaler(tickName);
|
|
262
|
+
const safeTickPos = Number.isFinite(tickPos) ? tickPos : 0;
|
|
263
|
+
const position = safeTickPos - safeIndicatorWidth / 2;
|
|
258
264
|
const indicatorAttr = isVertical
|
|
259
|
-
? { width: chartWidth, height:
|
|
265
|
+
? { width: chartWidth, height: safeIndicatorWidth, y: position }
|
|
260
266
|
: {
|
|
261
267
|
height: yLineRange,
|
|
262
|
-
width:
|
|
268
|
+
width: safeIndicatorWidth,
|
|
263
269
|
x: position,
|
|
264
270
|
};
|
|
265
271
|
|
|
@@ -341,18 +347,22 @@ const Chart = memo(
|
|
|
341
347
|
if (controlEl.current) {
|
|
342
348
|
controlEl.current.style.transform = `translate(${cBarX}px,0)`;
|
|
343
349
|
//计算出当前位移的百分比
|
|
344
|
-
|
|
345
|
-
percent =
|
|
346
|
-
|
|
347
|
-
|
|
350
|
+
const slideRange = cWidth - cBarWidth;
|
|
351
|
+
let percent = slideRange > 0 ? cBarX / slideRange : 0;
|
|
352
|
+
if (!Number.isFinite(percent)) percent = 0;
|
|
353
|
+
const safeCPercent =
|
|
354
|
+
cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
|
|
355
|
+
const span = controlEnd + start / safeCPercent - chartWidth;
|
|
356
|
+
const translateX = Number.isFinite(span) ? -span * percent : 0;
|
|
348
357
|
curControlPercent.current = percent;
|
|
349
|
-
setClipX(-translateX);
|
|
358
|
+
setClipX(Number.isFinite(-translateX) ? -translateX : 0);
|
|
350
359
|
const isVertical = axisX.direction === "vertical";
|
|
351
360
|
const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
|
|
352
361
|
seriesEl.current.style.transform = `translate(${
|
|
353
362
|
translateX + coreOffset
|
|
354
363
|
}px,${marginTop}px)`;
|
|
355
|
-
axisElList.current[2]
|
|
364
|
+
axisElList.current[2] &&
|
|
365
|
+
(axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`);
|
|
356
366
|
}
|
|
357
367
|
}, [controlInfo]);
|
|
358
368
|
//控制条轮播动画
|
|
@@ -465,6 +475,11 @@ const Chart = memo(
|
|
|
465
475
|
bodyHeight = isVertical
|
|
466
476
|
? yLineRange
|
|
467
477
|
: yLineRange + marginTop + marginBottom;
|
|
478
|
+
const controlTooltipSpan = (() => {
|
|
479
|
+
const p = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
|
|
480
|
+
const s = axisX.controlEnd + axisX.start / p - chartWidth;
|
|
481
|
+
return Number.isFinite(s) ? s : 0;
|
|
482
|
+
})();
|
|
468
483
|
const hasDuplicateX = (data) => {
|
|
469
484
|
const xValues = new Set();
|
|
470
485
|
for (const item of data) {
|
|
@@ -624,15 +639,17 @@ const Chart = memo(
|
|
|
624
639
|
{control &&
|
|
625
640
|
zIndex == "bottom" &&
|
|
626
641
|
ctlIndicatorList.map((item, index) => {
|
|
627
|
-
const
|
|
642
|
+
const xRaw = axisX.scaler(item.tick);
|
|
643
|
+
const x = Number.isFinite(xRaw) ? xRaw : 0;
|
|
644
|
+
const iw = safeIndicatorWidth;
|
|
628
645
|
return (
|
|
629
646
|
<Indicator
|
|
630
647
|
key={index}
|
|
631
648
|
{...indicator}
|
|
632
649
|
{...{
|
|
633
650
|
height: yLineRange,
|
|
634
|
-
width:
|
|
635
|
-
x: x -
|
|
651
|
+
width: iw,
|
|
652
|
+
x: x - iw / 2,
|
|
636
653
|
}}
|
|
637
654
|
isControlChart={!!control}
|
|
638
655
|
xName={item.tick}
|
|
@@ -695,15 +712,17 @@ const Chart = memo(
|
|
|
695
712
|
{control &&
|
|
696
713
|
zIndex != "bottom" &&
|
|
697
714
|
ctlIndicatorList.map((item, index) => {
|
|
698
|
-
const
|
|
715
|
+
const xRaw = axisX.scaler(item.tick);
|
|
716
|
+
const x = Number.isFinite(xRaw) ? xRaw : 0;
|
|
717
|
+
const iw = safeIndicatorWidth;
|
|
699
718
|
return (
|
|
700
719
|
<Indicator
|
|
701
720
|
key={index}
|
|
702
721
|
{...indicator}
|
|
703
722
|
{...{
|
|
704
723
|
height: yLineRange,
|
|
705
|
-
width:
|
|
706
|
-
x: x -
|
|
724
|
+
width: iw,
|
|
725
|
+
x: x - iw / 2,
|
|
707
726
|
}}
|
|
708
727
|
isControlChart={!!control}
|
|
709
728
|
xName={item.tick}
|
|
@@ -723,10 +742,9 @@ const Chart = memo(
|
|
|
723
742
|
{...tooltip}
|
|
724
743
|
data={controlChartTooltipData}
|
|
725
744
|
x={
|
|
726
|
-
ctlX -
|
|
745
|
+
(Number.isFinite(ctlX) ? ctlX : 0) -
|
|
727
746
|
marginLeft -
|
|
728
|
-
|
|
729
|
-
curControlPercent.current
|
|
747
|
+
controlTooltipSpan * curControlPercent.current
|
|
730
748
|
}
|
|
731
749
|
marginLeft={marginLeft}
|
|
732
750
|
marginTop={marginTop}
|