@easyv/charts 1.8.4 → 1.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/components/PieChart.js +11 -1
  2. package/lib/components/pieTooltip.js +69 -29
  3. package/package.json +1 -1
  4. package/src/components/PieChart.js +5 -0
  5. package/src/components/PieTooltip.jsx +84 -35
package/lib/components/PieChart.js CHANGED
@@ -234,6 +234,8 @@ 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,
237
239
  _ref5$config = _ref5.config,
238
240
  _ref5$config$chart = _ref5$config.chart,
239
241
  label = _ref5$config$chart.label,
@@ -299,6 +301,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
299
301
  hoverEvent = _ref5.hoverEvent,
300
302
  _ref5$data = _ref5.data,
301
303
  originData = _ref5$data === void 0 ? [] : _ref5$data;
304
+ var attribute = {
305
+ width: width,
306
+ height: height,
307
+ top: top,
308
+ left: left
309
+ };
302
310
  var data = originData.map(function (d) {
303
311
  return _objectSpread(_objectSpread({}, d), {}, {
304
312
  y: d.y < 0 ? 0 : d.y
@@ -614,6 +622,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
614
622
  x: halfChartWidth,
615
623
  y: maxRadius + marginTop
616
624
  },
625
+ attribute: attribute,
617
626
  mousePos: mousePos
618
627
  })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
619
628
  height: chartHeight,
@@ -778,7 +787,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
778
787
  x: halfChartWidth,
779
788
  y: maxRadius + marginTop
780
789
  },
781
- mousePos: mousePos
790
+ mousePos: mousePos,
791
+ attribute: attribute
782
792
  })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
783
793
  height: chartHeight,
784
794
  series: _arcs.map(function (arc) {
package/lib/components/pieTooltip.js CHANGED
@@ -17,6 +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
+ attribute = props.attribute,
20
21
  pieCenter = props.pieCenter,
21
22
  _props$config$tip = props.config.tip,
22
23
  _props$config$tip$dat = _props$config$tip.data,
@@ -97,45 +98,84 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
97
98
  centerY = pieCenter.y;
98
99
  var getTipPos = function getTipPos() {
99
100
  var getBigscreenScale = function getBigscreenScale() {
100
- if (window.getScreenScale) {
101
- return window.getScreenScale();
102
- } else {
103
- var bigscreenDom = document.getElementById('bigscreen-container');
104
- if (!bigscreenDom) return [1, 1];
105
- var transform = bigscreenDom.style.transform;
106
- if (!transform) return [1, 1];
107
- var match = transform.match(/scale\(([^)]+)\)/);
108
- if (match) {
109
- var scaleMatch = match[1].split(',');
110
- var _scaleX = scaleMatch[0];
111
- var _scaleY = scaleMatch[1];
112
- if (_scaleY) {
113
- return [Number(_scaleX), Number(_scaleY)];
114
- } else {
115
- return [Number(_scaleX), Number(_scaleX)];
101
+ // 优先使用全局提供的方法
102
+ if (typeof window.getScreenScale === 'function') {
103
+ try {
104
+ var _result = window.getScreenScale();
105
+ if (Array.isArray(_result) && _result.length >= 6) {
106
+ return _result;
116
107
  }
117
- } else {
118
- return [1, 1];
108
+ } catch (e) {
109
+ console.error('调用全局 getScreenScale 出错:', e);
119
110
  }
120
111
  }
112
+
113
+ // 获取容器元素
114
+ var bigscreenDom = document.getElementById('bigscreen-container');
115
+
116
+ // 元素不存在时的处理
117
+ if (!bigscreenDom) {
118
+ console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
119
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
120
+ }
121
+
122
+ // 确保元素可见（未被隐藏）
123
+ var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
124
+ if (!isVisible) {
125
+ console.warn('bigscreen-container 元素不可见，使用视口尺寸');
126
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
127
+ }
128
+
129
+ // 获取元素的布局矩形（最可靠的尺寸获取方式）
130
+ var rect = bigscreenDom.getBoundingClientRect();
131
+
132
+ // 提取基础尺寸（从布局矩形获取，不受样式影响）
133
+ var screenWidth = rect.width || window.innerWidth;
134
+ var screenHeight = rect.height || window.innerHeight;
135
+ var screenLeft = rect.left || 0;
136
+ var screenTop = rect.top || 0;
137
+
138
+ // 处理缩放
139
+ var scaleX = 1;
140
+ var scaleY = 1;
141
+ try {
142
+ var computedStyle = window.getComputedStyle(bigscreenDom);
143
+ var transform = computedStyle.transform;
144
+ if (transform && transform !== 'none') {
145
+ // 解析 transform matrix
146
+ var matrix = new DOMMatrix(transform);
147
+ scaleX = matrix.a; // 缩放X因子
148
+ scaleY = matrix.d; // 缩放Y因子
149
+ }
150
+ } catch (e) {
151
+ console.error('解析缩放样式出错:', e);
152
+ }
153
+
154
+ // 最终返回值（确保不会有undefined）
155
+ var result = [isNaN(scaleX) ? 1 : scaleX, isNaN(scaleY) ? 1 : scaleY, isNaN(screenWidth) ? window.innerWidth : screenWidth, isNaN(screenHeight) ? window.innerHeight : screenHeight, isNaN(screenLeft) ? 0 : screenLeft, isNaN(screenTop) ? 0 : screenTop];
156
+ return result;
121
157
  };
122
158
  var _getBigscreenScale = getBigscreenScale(),
123
- _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
159
+ _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 6),
124
160
  scaleX = _getBigscreenScale2[0],
125
- scaleY = _getBigscreenScale2[1];
126
- var _mouseX = mouseX / scaleX;
127
- var _mouseY = mouseY / scaleY;
161
+ scaleY = _getBigscreenScale2[1],
162
+ screenWidth = _getBigscreenScale2[2],
163
+ screenHeight = _getBigscreenScale2[3],
164
+ screenLeft = _getBigscreenScale2[4],
165
+ screenTop = _getBigscreenScale2[5];
166
+ // const _mouseX = mouseX / scaleX
167
+ // const _mouseY = mouseY / scaleY
128
168
  var tipPosMap = {
129
- rightTop: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
130
- leftTop: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
131
- leftBottom: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)"),
132
- rightBottom: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)")
169
+ rightTop: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
170
+ leftTop: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
171
+ leftBottom: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
172
+ rightBottom: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
133
173
  };
134
- if (_mouseX < centerX && _mouseY < centerY) {
174
+ if (mouseX < centerX && mouseY < centerY) {
135
175
  return tipPosMap.leftTop;
136
- } else if (_mouseX > centerX && _mouseY < centerY) {
176
+ } else if (mouseX > centerX && mouseY < centerY) {
137
177
  return tipPosMap.rightTop;
138
- } else if (_mouseX >= centerX && _mouseY >= centerY) {
178
+ } else if (mouseX >= centerX && mouseY >= centerY) {
139
179
  return tipPosMap.rightBottom;
140
180
  } else {
141
181
  return tipPosMap.leftBottom;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/charts",
3
- "version": "1.8.4",
3
+ "version": "1.8.5",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/PieChart.js CHANGED
@@ -249,6 +249,8 @@ const Component = memo(
249
249
  ({
250
250
  width,
251
251
  height,
252
+ left,
253
+ top,
252
254
  config: {
253
255
  chart: {
254
256
  label,
@@ -290,6 +292,7 @@ const Component = memo(
290
292
  hoverEvent,
291
293
  data: originData = [],
292
294
  }) => {
295
+ const attribute={width,height,top,left}
293
296
  const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
294
297
  const prevIndex = useRef(null);
295
298
  const { precision: legendPrecision } = legend.config.percent;
@@ -634,6 +637,7 @@ const Component = memo(
634
637
  x: halfChartWidth,
635
638
  y: maxRadius + marginTop,
636
639
  }}
640
+ attribute={attribute}
637
641
  mousePos={mousePos}
638
642
  />
639
643
  </div>
@@ -896,6 +900,7 @@ const Component = memo(
896
900
  y: maxRadius + marginTop,
897
901
  }}
898
902
  mousePos={mousePos}
903
+ attribute={attribute}
899
904
  />
900
905
  </div>
901
906
  )}
package/src/components/PieTooltip.jsx CHANGED
@@ -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,attribute,
7
7
  pieCenter,
8
8
  config: {
9
9
  tip: {
@@ -87,43 +87,92 @@ export const PieTooltip = memo((props) => {
87
87
  const { x: centerX, y: centerY } = pieCenter
88
88
  const getTipPos = () => {
89
89
 
90
- const getBigscreenScale = () => {
91
- if (window.getScreenScale) {
92
- return window.getScreenScale()
93
- } else {
94
- const bigscreenDom = document.getElementById('bigscreen-container')
95
- if (!bigscreenDom) return [1, 1]
96
- const transform = bigscreenDom.style.transform
97
- if (!transform) return [1, 1]
98
- let match = transform.match(/scale\(([^)]+)\)/)
99
- if (match) {
100
- const scaleMatch = match[1].split(',')
101
- let scaleX = scaleMatch[0];
102
- let scaleY = scaleMatch[1];
103
- if (scaleY) {
104
- return [Number(scaleX), Number(scaleY)]
105
- } else {
106
- return [Number(scaleX), Number(scaleX)]
107
- }
108
- } else {
109
- return [1, 1]
110
- }
111
- }
112
- }
113
- const [scaleX, scaleY] = getBigscreenScale()
114
- const _mouseX = mouseX / scaleX
115
- const _mouseY = mouseY / scaleY
90
+ const getBigscreenScale = () => {
91
+ // 优先使用全局提供的方法
92
+ if (typeof window.getScreenScale === 'function') {
93
+ try {
94
+ const result = window.getScreenScale();
95
+ if (Array.isArray(result) && result.length >= 6) {
96
+ return result;
97
+ }
98
+ } catch (e) {
99
+ console.error('调用全局 getScreenScale 出错:', e);
100
+ }
101
+ }
102
+
103
+ // 获取容器元素
104
+ const bigscreenDom = document.getElementById('bigscreen-container');
105
+
106
+ // 元素不存在时的处理
107
+ if (!bigscreenDom) {
108
+ console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
109
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
110
+ }
111
+
112
+ // 确保元素可见（未被隐藏）
113
+ const isVisible = window.getComputedStyle(bigscreenDom).display !== 'none'
114
+ && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
115
+ if (!isVisible) {
116
+ console.warn('bigscreen-container 元素不可见，使用视口尺寸');
117
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
118
+ }
119
+
120
+ // 获取元素的布局矩形（最可靠的尺寸获取方式）
121
+ const rect = bigscreenDom.getBoundingClientRect();
122
+
123
+ // 提取基础尺寸（从布局矩形获取，不受样式影响）
124
+ const screenWidth = rect.width || window.innerWidth;
125
+ const screenHeight = rect.height || window.innerHeight;
126
+ const screenLeft = rect.left || 0;
127
+ const screenTop = rect.top || 0;
128
+
129
+ // 处理缩放
130
+ let scaleX = 1;
131
+ let scaleY = 1;
132
+
133
+ try {
134
+ const computedStyle = window.getComputedStyle(bigscreenDom);
135
+ const transform = computedStyle.transform;
136
+
137
+ if (transform && transform !== 'none') {
138
+ // 解析 transform matrix
139
+ const matrix = new DOMMatrix(transform);
140
+ scaleX = matrix.a; // 缩放X因子
141
+ scaleY = matrix.d; // 缩放Y因子
142
+ }
143
+ } catch (e) {
144
+ console.error('解析缩放样式出错:', e);
145
+ }
146
+
147
+ // 最终返回值（确保不会有undefined）
148
+ const result = [
149
+ isNaN(scaleX) ? 1 : scaleX,
150
+ isNaN(scaleY) ? 1 : scaleY,
151
+ isNaN(screenWidth) ? window.innerWidth : screenWidth,
152
+ isNaN(screenHeight) ? window.innerHeight : screenHeight,
153
+ isNaN(screenLeft) ? 0 : screenLeft,
154
+ isNaN(screenTop) ? 0 : screenTop
155
+ ];
156
+ return result;
157
+ };
158
+ const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigscreenScale()
159
+ // const _mouseX = mouseX / scaleX
160
+ // const _mouseY = mouseY / scaleY
116
161
  const tipPosMap = {
117
- rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
118
- leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
119
- leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
120
- rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
121
- }
122
- if (_mouseX < centerX && _mouseY < centerY) {
162
+ rightTop: `translate(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x: mouseX + translateTip.x}px,
163
+ ${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
164
+ leftTop: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
165
+ ${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
166
+ leftBottom: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
167
+ ${(attribute.top+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
168
+ rightBottom: `translate(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
169
+ ${(attribute.top+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
170
+ }
171
+ if (mouseX < centerX && mouseY < centerY) {
123
172
  return tipPosMap.leftTop
124
- } else if (_mouseX > centerX && _mouseY < centerY) {
173
+ } else if (mouseX > centerX && mouseY < centerY) {
125
174
  return tipPosMap.rightTop
126
- } else if (_mouseX >= centerX && _mouseY >= centerY) {
175
+ } else if (mouseX >= centerX && mouseY >= centerY) {
127
176
  return tipPosMap.rightBottom
128
177
  } else {
129
178
  return tipPosMap.leftBottom