@easyv/charts 1.10.13 → 1.10.15
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/change.md +26 -0
- package/config.json +119 -0
- package/lib/components/Chart.js +5 -5
- package/lib/components/Legend.js +272 -38
- package/lib/components/Marquee.js +1 -1
- package/lib/components/PieChart.js +193 -102
- package/lib/components/TextOverflow.js +2 -5
- package/lib/formatter/legend.js +78 -26
- package/lib/utils/legendPlacement.js +37 -0
- package/package.json +2 -2
- package/src/components/Chart.js +11 -3
- package/src/components/Legend.js +374 -99
- package/src/components/Marquee.tsx +4 -4
- package/src/components/PieChart.js +161 -102
- package/src/components/TextOverflow.tsx +2 -3
- package/src/formatter/legend.js +151 -68
- package/src/utils/legendPlacement.js +28 -0
|
@@ -22,7 +22,7 @@ var _formatter = require("../formatter");
|
|
|
22
22
|
var _piechartModule = _interopRequireDefault(require("../css/piechart.module.css"));
|
|
23
23
|
var _hooks = require("../hooks");
|
|
24
24
|
var _PieTooltip = require("./PieTooltip");
|
|
25
|
-
var
|
|
25
|
+
var _legendPlacement = require("../utils/legendPlacement");
|
|
26
26
|
var _excluded = ["startAngle", "endAngle", "antiClockwise"],
|
|
27
27
|
_excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
|
|
28
28
|
_excluded3 = ["formatter"],
|
|
@@ -35,6 +35,41 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
35
35
|
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; }
|
|
36
36
|
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; }
|
|
37
37
|
var PI = Math.PI;
|
|
38
|
+
var PIE_ADAPTIVE_MARGINS = {
|
|
39
|
+
right: {
|
|
40
|
+
marginTop: 24,
|
|
41
|
+
marginBottom: 24,
|
|
42
|
+
marginLeft: 0,
|
|
43
|
+
marginRight: 200
|
|
44
|
+
},
|
|
45
|
+
left: {
|
|
46
|
+
marginTop: 24,
|
|
47
|
+
marginBottom: 24,
|
|
48
|
+
marginLeft: 200,
|
|
49
|
+
marginRight: 0
|
|
50
|
+
},
|
|
51
|
+
top: {
|
|
52
|
+
marginTop: 150,
|
|
53
|
+
marginBottom: 24,
|
|
54
|
+
marginLeft: 24,
|
|
55
|
+
marginRight: 24
|
|
56
|
+
},
|
|
57
|
+
bottom: {
|
|
58
|
+
marginTop: 24,
|
|
59
|
+
marginBottom: 150,
|
|
60
|
+
marginLeft: 24,
|
|
61
|
+
marginRight: 24
|
|
62
|
+
},
|
|
63
|
+
hidden: {
|
|
64
|
+
marginTop: 24,
|
|
65
|
+
marginBottom: 24,
|
|
66
|
+
marginLeft: 24,
|
|
67
|
+
marginRight: 24
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
var getPieAdaptiveMargin = function getPieAdaptiveMargin(show, alignment) {
|
|
71
|
+
return (0, _legendPlacement.getPieAdaptiveMarginPreset)(show, alignment, PIE_ADAPTIVE_MARGINS);
|
|
72
|
+
};
|
|
38
73
|
var defaultChart = {
|
|
39
74
|
outerRadius: 1,
|
|
40
75
|
innerRadius: 0,
|
|
@@ -49,106 +84,113 @@ var defaultAngle = {
|
|
|
49
84
|
endAngle: 360,
|
|
50
85
|
antiClockwise: false
|
|
51
86
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
87
|
+
|
|
88
|
+
// const nameDy = (showValue, showPercent, mode, dir) => {
|
|
89
|
+
// if (showValue || showPercent) {
|
|
90
|
+
// if (mode == "vertical") {
|
|
91
|
+
// return dir == 1 ? "1.1em" : "-2.6em";
|
|
92
|
+
// } else {
|
|
93
|
+
// return 0;
|
|
94
|
+
// }
|
|
95
|
+
// } else {
|
|
96
|
+
// if (mode == "vertical") {
|
|
97
|
+
// return dir * 1.1 + "em";
|
|
98
|
+
// } else {
|
|
99
|
+
// return 0;
|
|
100
|
+
// }
|
|
101
|
+
// }
|
|
102
|
+
// };
|
|
103
|
+
// const valueDy = (value1, mode, dir) => {
|
|
104
|
+
// if (value1) {
|
|
105
|
+
// if (mode == "vertical") {
|
|
106
|
+
// return "1.5em";
|
|
107
|
+
// } else {
|
|
108
|
+
// return 0;
|
|
109
|
+
// }
|
|
110
|
+
// } else {
|
|
111
|
+
// if (mode == "vertical") {
|
|
112
|
+
// return dir == 1 ? "1.1em" : "-1.1em";
|
|
113
|
+
// } else {
|
|
114
|
+
// return 0;
|
|
115
|
+
// }
|
|
116
|
+
// }
|
|
117
|
+
// };
|
|
118
|
+
|
|
119
|
+
// const percentDy_ = (showName, showValue, mode, dir) => {
|
|
120
|
+
// if (showValue) {
|
|
121
|
+
// return 0;
|
|
122
|
+
// }
|
|
123
|
+
// if (showName) {
|
|
124
|
+
// if (mode == "vertical") {
|
|
125
|
+
// return "1.5em";
|
|
126
|
+
// } else {
|
|
127
|
+
// return 0;
|
|
128
|
+
// }
|
|
129
|
+
// } else {
|
|
130
|
+
// if (mode == "vertical") {
|
|
131
|
+
// return dir * 1.1 + "em";
|
|
132
|
+
// } else {
|
|
133
|
+
// return 0;
|
|
134
|
+
// }
|
|
135
|
+
// }
|
|
136
|
+
// };
|
|
137
|
+
|
|
138
|
+
// const percentX = (showName, showValue, mode, x) => {
|
|
139
|
+
// if (showValue) {
|
|
140
|
+
// return "";
|
|
141
|
+
// }
|
|
142
|
+
// if (showName) {
|
|
143
|
+
// if (mode == "vertical") {
|
|
144
|
+
// return x;
|
|
145
|
+
// } else {
|
|
146
|
+
// return "";
|
|
147
|
+
// }
|
|
148
|
+
// } else {
|
|
149
|
+
// return x;
|
|
150
|
+
// }
|
|
151
|
+
// };
|
|
152
|
+
|
|
153
|
+
// const percentDx = (showName, showValue, mode) => {
|
|
154
|
+
// if (showValue) {
|
|
155
|
+
// return "0.5em";
|
|
156
|
+
// }
|
|
157
|
+
// if (showName) {
|
|
158
|
+
// if (mode == "vertical") {
|
|
159
|
+
// return 0;
|
|
160
|
+
// } else {
|
|
161
|
+
// return "0.5em";
|
|
162
|
+
// }
|
|
163
|
+
// } else {
|
|
164
|
+
// return 0;
|
|
165
|
+
// }
|
|
166
|
+
// };
|
|
167
|
+
|
|
168
|
+
// const percentDy = (showName, showValue, mode) => {
|
|
169
|
+
// if (showValue) {
|
|
170
|
+
// return 0;
|
|
171
|
+
// }
|
|
172
|
+
// if (showName) {
|
|
173
|
+
// if (mode == "vertical") {
|
|
174
|
+
// return "1.5em";
|
|
175
|
+
// } else {
|
|
176
|
+
// return 0;
|
|
177
|
+
// }
|
|
178
|
+
// } else {
|
|
179
|
+
// return 0;
|
|
180
|
+
// }
|
|
181
|
+
// };
|
|
182
|
+
|
|
183
|
+
// const valueDx = (showName, mode) => {
|
|
184
|
+
// if (!showName) {
|
|
185
|
+
// return "";
|
|
186
|
+
// }
|
|
187
|
+
// if (mode == "vertical") {
|
|
188
|
+
// return "";
|
|
189
|
+
// } else {
|
|
190
|
+
// return "0.5em";
|
|
191
|
+
// }
|
|
192
|
+
// };
|
|
193
|
+
|
|
152
194
|
var getCoord = function getCoord(deg, radius) {
|
|
153
195
|
var x = Math.cos(deg) * radius,
|
|
154
196
|
y = Math.sin(deg) * radius;
|
|
@@ -232,6 +274,7 @@ var getCircleScale = function getCircleScale() {
|
|
|
232
274
|
}));
|
|
233
275
|
};
|
|
234
276
|
var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
277
|
+
var _legend$config2;
|
|
235
278
|
var width = _ref5.width,
|
|
236
279
|
height = _ref5.height,
|
|
237
280
|
_ref5$config = _ref5.config,
|
|
@@ -248,6 +291,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
248
291
|
_ref5$config$chart$ma = _ref5$config$chart.margin,
|
|
249
292
|
marginLeft = _ref5$config$chart$ma.marginLeft,
|
|
250
293
|
marginTop = _ref5$config$chart$ma.marginTop,
|
|
294
|
+
marginRight = _ref5$config$chart$ma.marginRight,
|
|
295
|
+
marginBottom = _ref5$config$chart$ma.marginBottom,
|
|
251
296
|
_ref5$config$fan = _ref5$config.fan,
|
|
252
297
|
_ref5$config$fan2 = _ref5$config$fan === void 0 ? {} : _ref5$config$fan,
|
|
253
298
|
_ref5$config$fan2$cha = _ref5$config$fan2.chart,
|
|
@@ -313,7 +358,43 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
313
358
|
chartWidth = _useContext.width,
|
|
314
359
|
chartHeight = _useContext.height,
|
|
315
360
|
triggerOnRelative = _useContext.triggerOnRelative,
|
|
316
|
-
onEmit = _useContext.onEmit
|
|
361
|
+
onEmit = _useContext.onEmit,
|
|
362
|
+
updateConfig = _useContext.updateConfig;
|
|
363
|
+
var _legend$config = legend.config,
|
|
364
|
+
legendShow = _legend$config.show,
|
|
365
|
+
_legend$config$name = _legend$config.name,
|
|
366
|
+
_legend$config$name2 = _legend$config$name === void 0 ? {} : _legend$config$name,
|
|
367
|
+
legendLayoutMode = _legend$config$name2.layoutMode;
|
|
368
|
+
var legendAlignment = (_legend$config2 = legend.config) === null || _legend$config2 === void 0 || (_legend$config2 = _legend$config2.layout) === null || _legend$config2 === void 0 ? void 0 : _legend$config2.alignment;
|
|
369
|
+
var adaptiveMarginPresetKey = (0, _react.useRef)("");
|
|
370
|
+
(0, _react.useEffect)(function () {
|
|
371
|
+
if (legendLayoutMode !== "Adaptive" || !updateConfig) return;
|
|
372
|
+
var presetKey = "".concat(legendLayoutMode, "-").concat(legendShow, "-").concat(legendAlignment);
|
|
373
|
+
if (adaptiveMarginPresetKey.current === presetKey) return;
|
|
374
|
+
adaptiveMarginPresetKey.current = presetKey;
|
|
375
|
+
var target = getPieAdaptiveMargin(legendShow, legendAlignment);
|
|
376
|
+
updateConfig({
|
|
377
|
+
id: id,
|
|
378
|
+
type: "config",
|
|
379
|
+
payload: [{
|
|
380
|
+
path: ["chart", "margin", "marginTop"],
|
|
381
|
+
field: "value",
|
|
382
|
+
value: target.marginTop
|
|
383
|
+
}, {
|
|
384
|
+
path: ["chart", "margin", "marginBottom"],
|
|
385
|
+
field: "value",
|
|
386
|
+
value: target.marginBottom
|
|
387
|
+
}, {
|
|
388
|
+
path: ["chart", "margin", "marginLeft"],
|
|
389
|
+
field: "value",
|
|
390
|
+
value: target.marginLeft
|
|
391
|
+
}, {
|
|
392
|
+
path: ["chart", "margin", "marginRight"],
|
|
393
|
+
field: "value",
|
|
394
|
+
value: target.marginRight
|
|
395
|
+
}]
|
|
396
|
+
});
|
|
397
|
+
}, [id, updateConfig, legendLayoutMode, legendShow, legendAlignment]);
|
|
317
398
|
var _useState = (0, _react.useState)(1),
|
|
318
399
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
319
400
|
y = _useState2[0],
|
|
@@ -607,6 +688,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
607
688
|
judge: judgeData
|
|
608
689
|
}))), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
609
690
|
height: chartHeight,
|
|
691
|
+
componentWidth: width,
|
|
692
|
+
marginLeft: marginLeft,
|
|
693
|
+
marginRight: marginRight,
|
|
694
|
+
isPieChart: true,
|
|
610
695
|
columnsSeries: columnsSeries,
|
|
611
696
|
data: data,
|
|
612
697
|
series: _arcs.map(function (arc) {
|
|
@@ -777,6 +862,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
777
862
|
radius: radius
|
|
778
863
|
}), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
779
864
|
height: chartHeight,
|
|
865
|
+
componentWidth: width,
|
|
866
|
+
marginLeft: marginLeft,
|
|
867
|
+
marginRight: marginRight,
|
|
868
|
+
isPieChart: true,
|
|
780
869
|
data: data,
|
|
781
870
|
columnsSeries: columnsSeries,
|
|
782
871
|
series: _arcs.map(function (arc) {
|
|
@@ -900,7 +989,9 @@ var Current = function Current(_ref9) {
|
|
|
900
989
|
value: nameTemp,
|
|
901
990
|
speed: speed,
|
|
902
991
|
style: _objectSpread(_objectSpread({
|
|
992
|
+
width: "100%",
|
|
903
993
|
maxWidth: maxWidth,
|
|
994
|
+
textAlign: "center",
|
|
904
995
|
display: textOverflow == "marquee" ? "flex" : "bolck",
|
|
905
996
|
justifyContent: "center"
|
|
906
997
|
}, (0, _utils.getFontStyle)(nameFont)), {}, {
|
|
@@ -24,8 +24,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
|
|
|
24
24
|
_props$speed = props.speed,
|
|
25
25
|
speed = _props$speed === void 0 ? 5 : _props$speed,
|
|
26
26
|
_props$config = props.config,
|
|
27
|
-
config = _props$config === void 0 ? {} : _props$config
|
|
28
|
-
ShowType = props.ShowType;
|
|
27
|
+
config = _props$config === void 0 ? {} : _props$config;
|
|
29
28
|
var _config$needTitle = config.needTitle,
|
|
30
29
|
needTitle = _config$needTitle === void 0 ? true : _config$needTitle;
|
|
31
30
|
var getTextOverflow = function getTextOverflow(type) {
|
|
@@ -62,9 +61,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
|
|
|
62
61
|
style: styles,
|
|
63
62
|
ref: ref
|
|
64
63
|
}) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
65
|
-
style: _objectSpread(
|
|
66
|
-
whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace
|
|
67
|
-
}),
|
|
64
|
+
style: _objectSpread({}, styles),
|
|
68
65
|
ref: ref,
|
|
69
66
|
title: needTitle && type == "ellipsis" ? text || undefined : undefined,
|
|
70
67
|
dangerouslySetInnerHTML: {
|
package/lib/formatter/legend.js
CHANGED
|
@@ -103,13 +103,21 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
|
|
|
103
103
|
stops = seriesColor.linear.stops;
|
|
104
104
|
var _color = seriesColorType == "pure" ? pure : stops[0].color;
|
|
105
105
|
var textMarginLeft = 5;
|
|
106
|
+
var adaptiveMaxWidth = props.adaptiveMaxWidth,
|
|
107
|
+
isPieAdaptive = props.isPieAdaptive,
|
|
108
|
+
chartWidth = props.chartWidth;
|
|
109
|
+
var isSideAdaptive = !!adaptiveMaxWidth;
|
|
110
|
+
var isTopBottomAdaptive = isPieAdaptive && !isSideAdaptive;
|
|
111
|
+
var nameOverflowType = isSideAdaptive || isTopBottomAdaptive ? "ellipsis" : textOverflow;
|
|
106
112
|
|
|
107
|
-
// 1.
|
|
113
|
+
// 1. 计算每列宽度(加上间距);正上/正下自适应不按全局列宽对齐
|
|
108
114
|
var columns = [];
|
|
109
|
-
if (
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
if (!isTopBottomAdaptive) {
|
|
116
|
+
if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
|
|
117
|
+
if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
|
|
118
|
+
if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
|
|
119
|
+
}
|
|
120
|
+
if (!isTopBottomAdaptive && series.fieldsData.length > 0) {
|
|
113
121
|
//网格布局新增的各列宽度
|
|
114
122
|
series.fieldsData.forEach(function (item) {
|
|
115
123
|
var _item$fieldsColumnInd, _suf$fontSize, _item$font, _item$translate, _suf$translate;
|
|
@@ -130,25 +138,66 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
|
|
|
130
138
|
columns.push("".concat(colW, "px"));
|
|
131
139
|
});
|
|
132
140
|
}
|
|
141
|
+
var scaleColumnsToMax = function scaleColumnsToMax(cols, maxTotal) {
|
|
142
|
+
var widths = cols.map(function (c) {
|
|
143
|
+
return parseFloat(c) || 0;
|
|
144
|
+
});
|
|
145
|
+
var total = widths.reduce(function (a, b) {
|
|
146
|
+
return a + b;
|
|
147
|
+
}, 0);
|
|
148
|
+
if (!total || total <= maxTotal) return cols.join(" ");
|
|
149
|
+
var scale = maxTotal / total;
|
|
150
|
+
return widths.map(function (w) {
|
|
151
|
+
return "".concat(Math.max(1, Math.floor(w * scale)), "px");
|
|
152
|
+
}).join(" ");
|
|
153
|
+
};
|
|
154
|
+
var sideGridMaxWidth = isSideAdaptive ? Math.max(0, adaptiveMaxWidth - (icon ? (parseFloat(icon.width) || 0) + (parseFloat(icon.marginRight) || 0) : 0)) : adaptiveMaxWidth;
|
|
155
|
+
var contentStyle = isSideAdaptive ? {
|
|
156
|
+
display: "grid",
|
|
157
|
+
gridTemplateColumns: scaleColumnsToMax(columns, sideGridMaxWidth),
|
|
158
|
+
width: "max-content",
|
|
159
|
+
maxWidth: "100%",
|
|
160
|
+
minWidth: 0,
|
|
161
|
+
overflow: "hidden",
|
|
162
|
+
boxSizing: "border-box"
|
|
163
|
+
} : isTopBottomAdaptive ? {
|
|
164
|
+
display: "flex",
|
|
165
|
+
flexDirection: "row",
|
|
166
|
+
alignItems: "center",
|
|
167
|
+
flexWrap: "nowrap",
|
|
168
|
+
width: "max-content",
|
|
169
|
+
maxWidth: chartWidth ? "".concat(chartWidth, "px") : "100%",
|
|
170
|
+
minWidth: 0,
|
|
171
|
+
overflow: "hidden",
|
|
172
|
+
boxSizing: "border-box",
|
|
173
|
+
gap: "".concat(valueGap, "px ").concat(percentGap, "px")
|
|
174
|
+
} : {
|
|
175
|
+
width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
|
|
176
|
+
gridTemplateColumns: columns.join(" "),
|
|
177
|
+
overflowX: "visible"
|
|
178
|
+
};
|
|
179
|
+
var contentClassName = isTopBottomAdaptive ? undefined : isSideAdaptive ? showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle : showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle;
|
|
133
180
|
return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
|
|
134
181
|
style: _objectSpread(_objectSpread({}, icon), {}, {
|
|
135
182
|
marginRight: icon.marginRight,
|
|
183
|
+
flexShrink: 0,
|
|
136
184
|
transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
|
|
137
185
|
})
|
|
138
186
|
}), /*#__PURE__*/React.createElement("div", {
|
|
139
|
-
className:
|
|
140
|
-
style:
|
|
141
|
-
width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
|
|
142
|
-
gridTemplateColumns: columns.join(" "),
|
|
143
|
-
overflowX: "visible"
|
|
144
|
-
}
|
|
187
|
+
className: contentClassName,
|
|
188
|
+
style: contentStyle
|
|
145
189
|
}, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
|
|
146
190
|
value: displayName,
|
|
147
|
-
type:
|
|
191
|
+
type: nameOverflowType,
|
|
148
192
|
speed: speed,
|
|
149
193
|
style: _objectSpread(_objectSpread({
|
|
150
|
-
width: maxWidth,
|
|
151
|
-
|
|
194
|
+
width: isSideAdaptive ? "100%" : isTopBottomAdaptive ? "auto" : maxWidth,
|
|
195
|
+
maxWidth: isSideAdaptive ? "100%" : isTopBottomAdaptive ? "none" : maxWidth,
|
|
196
|
+
minWidth: isSideAdaptive ? 0 : undefined,
|
|
197
|
+
flexShrink: isTopBottomAdaptive ? 1 : undefined,
|
|
198
|
+
marginLeft: textMarginLeft,
|
|
199
|
+
// whiteSpace: "nowrap",
|
|
200
|
+
overflow: "hidden"
|
|
152
201
|
}, (0, _utils.getFontStyle)(nameFont)), {}, {
|
|
153
202
|
transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
|
|
154
203
|
})
|
|
@@ -157,12 +206,13 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
|
|
|
157
206
|
display: "flex",
|
|
158
207
|
whiteSpace: "nowrap"
|
|
159
208
|
}, (0, _utils.getFontStyle)(valueFont)), {}, {
|
|
160
|
-
marginLeft: valueGap,
|
|
209
|
+
marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : valueGap,
|
|
210
|
+
flexShrink: isTopBottomAdaptive ? 0 : undefined,
|
|
161
211
|
transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
|
|
162
212
|
color: valueSameColor ? _color : valueFont.color,
|
|
163
213
|
alignItems: "center",
|
|
164
|
-
justifyContent: alignToJustify(valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
|
|
165
|
-
textAlign: alignToTextAlign(valueAlign)
|
|
214
|
+
justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
|
|
215
|
+
textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : valueAlign)
|
|
166
216
|
})
|
|
167
217
|
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
|
|
168
218
|
value: data.y,
|
|
@@ -178,27 +228,29 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
|
|
|
178
228
|
display: "flex",
|
|
179
229
|
whiteSpace: "nowrap"
|
|
180
230
|
}, (0, _utils.getFontStyle)(percentFont)), {}, {
|
|
181
|
-
marginLeft: percentGap,
|
|
231
|
+
marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : percentGap,
|
|
232
|
+
flexShrink: isTopBottomAdaptive ? 0 : undefined,
|
|
182
233
|
transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
|
|
183
234
|
color: percentSameColor ? _color : percentFont.color,
|
|
184
235
|
alignItems: "center",
|
|
185
|
-
justifyContent: alignToJustify(percentAlign),
|
|
186
|
-
textAlign: alignToTextAlign(percentAlign)
|
|
236
|
+
justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : percentAlign),
|
|
237
|
+
textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : percentAlign)
|
|
187
238
|
})
|
|
188
|
-
}, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index
|
|
189
|
-
) {
|
|
239
|
+
}, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index) {
|
|
190
240
|
var _fieldColumnKeys, _item$fieldsColumnInd2, _item$align, _item$align2, _item$translate$x, _item$translate2, _item$translate$y, _item$translate3, _item$suffix, _item$suffix2, _item$suffix$translat, _item$suffix$translat2, _item$suffix$translat3, _item$suffix$translat4;
|
|
191
241
|
return /*#__PURE__*/React.createElement("span", {
|
|
192
242
|
key: (_fieldColumnKeys = fieldColumnKeys[(_item$fieldsColumnInd2 = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd2 !== void 0 ? _item$fieldsColumnInd2 : index]) !== null && _fieldColumnKeys !== void 0 ? _fieldColumnKeys : index,
|
|
193
243
|
style: _objectSpread(_objectSpread({
|
|
194
244
|
display: "flex",
|
|
195
245
|
boxSizing: "border-box",
|
|
196
|
-
width: "100%",
|
|
246
|
+
width: isTopBottomAdaptive ? "auto" : "100%",
|
|
197
247
|
minWidth: 0,
|
|
248
|
+
flexShrink: isTopBottomAdaptive ? 0 : undefined,
|
|
198
249
|
alignItems: "center",
|
|
199
|
-
justifyContent: alignToJustify((_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
|
|
200
|
-
textAlign: alignToTextAlign((_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
|
|
201
|
-
overflow: "visible"
|
|
250
|
+
justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : (_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
|
|
251
|
+
textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : (_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
|
|
252
|
+
overflow: isSideAdaptive || isTopBottomAdaptive ? "hidden" : "visible",
|
|
253
|
+
whiteSpace: "nowrap"
|
|
202
254
|
}, (0, _utils.getFontStyle)(item.font)), {}, {
|
|
203
255
|
color: item.sameColor ? _color : item.font.color
|
|
204
256
|
})
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.parseLegendAlignment = exports.getPieAdaptiveMarginPreset = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
/**
|
|
10
|
+
* 解析图例 layout.alignment(如 "center top"、"right top")
|
|
11
|
+
* 格式:{水平对齐} {位置},位置为 top | right | left | bottom
|
|
12
|
+
*/
|
|
13
|
+
var parseLegendAlignment = exports.parseLegendAlignment = function parseLegendAlignment() {
|
|
14
|
+
var alignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "right center";
|
|
15
|
+
var _alignment$split = alignment.split(" "),
|
|
16
|
+
_alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
|
|
17
|
+
_alignment = _alignment$split2[0],
|
|
18
|
+
position = _alignment$split2[1];
|
|
19
|
+
var isCenterTopOrBottom = (position === "top" || position === "bottom") && _alignment === "center";
|
|
20
|
+
var isSidePlacement = position === "left" || position === "right" || (position === "top" || position === "bottom") && _alignment !== "center";
|
|
21
|
+
return {
|
|
22
|
+
alignment: _alignment,
|
|
23
|
+
position: position,
|
|
24
|
+
isCenterTopOrBottom: isCenterTopOrBottom,
|
|
25
|
+
isSidePlacement: isSidePlacement
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
var getPieAdaptiveMarginPreset = exports.getPieAdaptiveMarginPreset = function getPieAdaptiveMarginPreset(show, alignment, presets) {
|
|
29
|
+
if (!show) return presets.hidden;
|
|
30
|
+
var _parseLegendAlignment = parseLegendAlignment(alignment),
|
|
31
|
+
mainAlign = _parseLegendAlignment.alignment,
|
|
32
|
+
position = _parseLegendAlignment.position,
|
|
33
|
+
isCenterTopOrBottom = _parseLegendAlignment.isCenterTopOrBottom;
|
|
34
|
+
if (isCenterTopOrBottom) return presets[position];
|
|
35
|
+
if (position === "left" || mainAlign === "left") return presets.left;
|
|
36
|
+
return presets.right;
|
|
37
|
+
};
|
package/package.json
CHANGED
package/src/components/Chart.js
CHANGED
|
@@ -12,7 +12,6 @@ import React, {
|
|
|
12
12
|
} from "react";
|
|
13
13
|
import { chartContext } from "../context";
|
|
14
14
|
import { PieChart, CartesianChart } from ".";
|
|
15
|
-
import { group } from "d3v7";
|
|
16
15
|
|
|
17
16
|
const getCallbackData = (action, callbacks, data) => {
|
|
18
17
|
const callbackData = {};
|
|
@@ -32,7 +31,6 @@ const Chart = memo(
|
|
|
32
31
|
type,
|
|
33
32
|
config,
|
|
34
33
|
config: {
|
|
35
|
-
axes,
|
|
36
34
|
chart: {
|
|
37
35
|
margin: { marginRight, marginLeft, marginBottom, marginTop },
|
|
38
36
|
},
|
|
@@ -42,6 +40,7 @@ const Chart = memo(
|
|
|
42
40
|
onRelative,
|
|
43
41
|
emit,
|
|
44
42
|
emitEvent,
|
|
43
|
+
updateConfig,
|
|
45
44
|
...props
|
|
46
45
|
}) => {
|
|
47
46
|
const { width, height } = props;
|
|
@@ -100,8 +99,17 @@ const Chart = memo(
|
|
|
100
99
|
triggerOnRelative,
|
|
101
100
|
svg,
|
|
102
101
|
onEmit,
|
|
102
|
+
updateConfig,
|
|
103
103
|
}),
|
|
104
|
-
[
|
|
104
|
+
[
|
|
105
|
+
id,
|
|
106
|
+
chartWidth,
|
|
107
|
+
chartHeight,
|
|
108
|
+
triggerOnRelative,
|
|
109
|
+
svg,
|
|
110
|
+
onEmit,
|
|
111
|
+
updateConfig,
|
|
112
|
+
],
|
|
105
113
|
);
|
|
106
114
|
|
|
107
115
|
useEffect(() => {
|