@easyv/charts 1.8.5 → 1.8.6
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.
|
@@ -234,8 +234,6 @@ var getCircleScale = function getCircleScale() {
|
|
|
234
234
|
var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
235
235
|
var width = _ref5.width,
|
|
236
236
|
height = _ref5.height,
|
|
237
|
-
left = _ref5.left,
|
|
238
|
-
top = _ref5.top,
|
|
239
237
|
_ref5$config = _ref5.config,
|
|
240
238
|
_ref5$config$chart = _ref5$config.chart,
|
|
241
239
|
label = _ref5$config$chart.label,
|
|
@@ -301,18 +299,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
301
299
|
hoverEvent = _ref5.hoverEvent,
|
|
302
300
|
_ref5$data = _ref5.data,
|
|
303
301
|
originData = _ref5$data === void 0 ? [] : _ref5$data;
|
|
304
|
-
var attribute = {
|
|
305
|
-
width: width,
|
|
306
|
-
height: height,
|
|
307
|
-
top: top,
|
|
308
|
-
left: left
|
|
309
|
-
};
|
|
310
302
|
var data = originData.map(function (d) {
|
|
311
303
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
312
304
|
y: d.y < 0 ? 0 : d.y
|
|
313
305
|
});
|
|
314
306
|
});
|
|
315
307
|
var prevIndex = (0, _react.useRef)(null);
|
|
308
|
+
var domRef = (0, _react.useRef)();
|
|
316
309
|
var legendPrecision = legend.config.percent.precision;
|
|
317
310
|
var _useContext = (0, _react.useContext)(_context.chartContext),
|
|
318
311
|
id = _useContext.id,
|
|
@@ -526,7 +519,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
526
519
|
hoverData = _useState6[0],
|
|
527
520
|
setHoverData = _useState6[1];
|
|
528
521
|
var pieWarpEl = (0, _react.useRef)(null);
|
|
529
|
-
return outerDecorate ? /*#__PURE__*/_react["default"].createElement(
|
|
522
|
+
return outerDecorate ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
523
|
+
ref: domRef
|
|
524
|
+
}, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
|
|
530
525
|
, {
|
|
531
526
|
width: width,
|
|
532
527
|
height: height,
|
|
@@ -622,8 +617,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
622
617
|
x: halfChartWidth,
|
|
623
618
|
y: maxRadius + marginTop
|
|
624
619
|
},
|
|
625
|
-
|
|
626
|
-
|
|
620
|
+
mousePos: mousePos,
|
|
621
|
+
domRef: domRef.current ? domRef : null
|
|
627
622
|
})), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
628
623
|
height: chartHeight,
|
|
629
624
|
series: _arcs.map(function (arc) {
|
|
@@ -633,7 +628,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
633
628
|
}),
|
|
634
629
|
formatter: formatter,
|
|
635
630
|
judge: judgeData
|
|
636
|
-
}))) : /*#__PURE__*/_react["default"].createElement(
|
|
631
|
+
}))) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
632
|
+
ref: domRef
|
|
633
|
+
}, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
|
|
637
634
|
width: width,
|
|
638
635
|
height: height,
|
|
639
636
|
marginLeft: marginLeft,
|
|
@@ -788,7 +785,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
788
785
|
y: maxRadius + marginTop
|
|
789
786
|
},
|
|
790
787
|
mousePos: mousePos,
|
|
791
|
-
|
|
788
|
+
domRef: domRef.current ? domRef : null
|
|
792
789
|
})), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
793
790
|
height: chartHeight,
|
|
794
791
|
series: _arcs.map(function (arc) {
|
|
@@ -17,7 +17,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
17
17
|
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; }
|
|
18
18
|
var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
19
19
|
var mousePos = props.mousePos,
|
|
20
|
-
|
|
20
|
+
domRef = props.domRef,
|
|
21
21
|
pieCenter = props.pieCenter,
|
|
22
22
|
_props$config$tip = props.config.tip,
|
|
23
23
|
_props$config$tip$dat = _props$config$tip.data,
|
|
@@ -43,6 +43,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
|
|
|
43
43
|
translateTip = _props$config$tip.translate,
|
|
44
44
|
data = props.data,
|
|
45
45
|
series = props.series;
|
|
46
|
+
var screenRef = domRef.current.getBoundingClientRect();
|
|
46
47
|
var Item = function Item() {
|
|
47
48
|
var _data$data = data.data,
|
|
48
49
|
s = _data$data.s,
|
|
@@ -166,10 +167,10 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
|
|
|
166
167
|
// const _mouseX = mouseX / scaleX
|
|
167
168
|
// const _mouseY = mouseY / scaleY
|
|
168
169
|
var tipPosMap = {
|
|
169
|
-
rightTop: "translate(".concat((
|
|
170
|
-
leftTop: "translate(".concat((
|
|
171
|
-
leftBottom: "translate(".concat((
|
|
172
|
-
rightBottom: "translate(".concat((
|
|
170
|
+
rightTop: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
|
|
171
|
+
leftTop: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
|
|
172
|
+
leftBottom: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
|
|
173
|
+
rightBottom: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
|
|
173
174
|
};
|
|
174
175
|
if (mouseX < centerX && mouseY < centerY) {
|
|
175
176
|
return tipPosMap.leftTop;
|
package/package.json
CHANGED
|
@@ -249,8 +249,6 @@ const Component = memo(
|
|
|
249
249
|
({
|
|
250
250
|
width,
|
|
251
251
|
height,
|
|
252
|
-
left,
|
|
253
|
-
top,
|
|
254
252
|
config: {
|
|
255
253
|
chart: {
|
|
256
254
|
label,
|
|
@@ -292,9 +290,9 @@ const Component = memo(
|
|
|
292
290
|
hoverEvent,
|
|
293
291
|
data: originData = [],
|
|
294
292
|
}) => {
|
|
295
|
-
const attribute={width,height,top,left}
|
|
296
293
|
const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
|
|
297
294
|
const prevIndex = useRef(null);
|
|
295
|
+
const domRef=useRef()
|
|
298
296
|
const { precision: legendPrecision } = legend.config.percent;
|
|
299
297
|
const {
|
|
300
298
|
id,
|
|
@@ -516,7 +514,7 @@ const Component = memo(
|
|
|
516
514
|
const [hoverData, setHoverData] = useState(null);
|
|
517
515
|
const pieWarpEl = useRef(null);
|
|
518
516
|
return outerDecorate ? (
|
|
519
|
-
|
|
517
|
+
<div ref={domRef}>
|
|
520
518
|
<ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
|
|
521
519
|
width={width}
|
|
522
520
|
height={height}
|
|
@@ -637,8 +635,8 @@ const Component = memo(
|
|
|
637
635
|
x: halfChartWidth,
|
|
638
636
|
y: maxRadius + marginTop,
|
|
639
637
|
}}
|
|
640
|
-
attribute={attribute}
|
|
641
638
|
mousePos={mousePos}
|
|
639
|
+
domRef={domRef.current ? domRef : null}
|
|
642
640
|
/>
|
|
643
641
|
</div>
|
|
644
642
|
)}
|
|
@@ -652,9 +650,9 @@ const Component = memo(
|
|
|
652
650
|
formatter={formatter}
|
|
653
651
|
judge={judgeData}
|
|
654
652
|
/>
|
|
655
|
-
|
|
653
|
+
</div>
|
|
656
654
|
) : (
|
|
657
|
-
|
|
655
|
+
<div ref={domRef}>
|
|
658
656
|
<ChartContainer
|
|
659
657
|
width={width}
|
|
660
658
|
height={height}
|
|
@@ -900,7 +898,7 @@ const Component = memo(
|
|
|
900
898
|
y: maxRadius + marginTop,
|
|
901
899
|
}}
|
|
902
900
|
mousePos={mousePos}
|
|
903
|
-
|
|
901
|
+
domRef={domRef.current ? domRef : null}
|
|
904
902
|
/>
|
|
905
903
|
</div>
|
|
906
904
|
)}
|
|
@@ -914,7 +912,7 @@ const Component = memo(
|
|
|
914
912
|
formatter={formatter}
|
|
915
913
|
judge={judgeData}
|
|
916
914
|
/>
|
|
917
|
-
|
|
915
|
+
</div>
|
|
918
916
|
);
|
|
919
917
|
}
|
|
920
918
|
);
|
|
@@ -3,7 +3,7 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
export const PieTooltip = memo((props) => {
|
|
6
|
-
const { mousePos,
|
|
6
|
+
const { mousePos,domRef,
|
|
7
7
|
pieCenter,
|
|
8
8
|
config: {
|
|
9
9
|
tip: {
|
|
@@ -19,7 +19,7 @@ export const PieTooltip = memo((props) => {
|
|
|
19
19
|
},
|
|
20
20
|
data,
|
|
21
21
|
series } = props
|
|
22
|
-
|
|
22
|
+
const screenRef = domRef.current.getBoundingClientRect();
|
|
23
23
|
const Item = () => {
|
|
24
24
|
const { data: { s, y }, percent } = data
|
|
25
25
|
const { type, icon, displayName } = [...series.values()].find(
|
|
@@ -155,18 +155,19 @@ const getBigscreenScale = () => {
|
|
|
155
155
|
];
|
|
156
156
|
return result;
|
|
157
157
|
};
|
|
158
|
+
|
|
158
159
|
const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigscreenScale()
|
|
159
160
|
// const _mouseX = mouseX / scaleX
|
|
160
161
|
// const _mouseY = mouseY / scaleY
|
|
161
162
|
const tipPosMap = {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
163
|
+
rightTop: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x: mouseX + translateTip.x}px,
|
|
164
|
+
${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
|
|
165
|
+
leftTop: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
|
|
166
|
+
${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
|
|
167
|
+
leftBottom: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
|
|
168
|
+
${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
|
|
169
|
+
rightBottom: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
|
|
170
|
+
${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
|
|
170
171
|
}
|
|
171
172
|
if (mouseX < centerX && mouseY < centerY) {
|
|
172
173
|
return tipPosMap.leftTop
|