@easyv/charts 1.4.28 → 1.4.30

package/src/components/PieTooltip.jsx

@@ -1,134 +1,161 @@
-import React, { memo } from 'react'
-import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
-
-
-export const PieTooltip = memo((props) => {
-  const { mousePos,
-    pieCenter,
-    config: {
-      tip: {
-        data: { lineHeight, iconSize, name,
-          value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix,suffix:{show:valueSuffixIsShow} },
-          percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix,suffix:{show:percentageSuffixIsShow},precision },
-        },
-        image,
-        margin,
-        size: { width: tipWidth, height: tipHeight },
-        translate: translateTip,
-      },
-    },
-    data,
-    series } = props
-
-  const Item = () => {
-    const { data: { s, y }, percent } = data
-    const { type, icon, displayName } = [...series.values()].find(
-      (series) => series.name == s
-    );
-
-    const renderSuffix = (suffix) =>{
-      const {
-        content,
-        font: suffiixFont,
-        translate: suffixTranslate,
-      } = suffix;
-     return (
-        <span
-          style={{
-            ...getFontStyle(suffiixFont),
-            display: "inline-block",
-            transform: getTranslate3d(suffixTranslate),
-          }}
-        >
-          {content}
-        </span>
-      )
-    }
-
-    const _icon = getIcon(type, icon);
-    return (
-      <dd
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          lineHeight: lineHeight + 'px',
-        }}
-
-      >
-        <span
-          style={{
-            // border: '1px solid red',
-            display: 'flex',
-            alignItems: 'center',
-            gap: icon.iconGap,
-          }}
-        >
-          <span
-            style={{
-              ..._icon,
-              width: iconSize + 'px',
-              height: iconSize + 'px',
-            }}
-          />
-          <span style={getFontStyle(name)}>{displayName || s}</span>
-        </span>
-        {valueIsShow && <span style={getFontStyle(valueFont)}>
-          {y}
-          {valueSuffixIsShow && renderSuffix(valueSuffix)}
-        </span>}
-        {percentageIsShow && <span style={getFontStyle(percentageFont)}>
-          {Number(percent).toFixed(precision)}
-          {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
-        </span>}
-      </dd>
-    );
-  }
-  const { x: mouseX, y: mouseY } = mousePos
-  const { x: centerX, y: centerY } = pieCenter
-  const getTipPos = () => {
-    const tipPosMap = {
-      rightTop: `translate(${mouseX + translateTip.x}px,${mouseY - tipHeight - translateTip.y}px)`,
-      leftTop: `translate(${mouseX - tipWidth - translateTip.x}px,${mouseY - tipHeight - translateTip.y}px)`,
-      leftBottom: `translate(${mouseX - tipWidth - translateTip.x}px,${mouseY + translateTip.y}px)`,
-      rightBottom: `translate(${mouseX + translateTip.x}px,${mouseY + translateTip.y}px)`,
-    }
-    if (mouseX < centerX && mouseY < centerY) {
-      return tipPosMap.leftTop
-    } else if (mouseX > centerX && mouseY < centerY) {
-      return tipPosMap.rightTop
-    } else if (mouseX >= centerX && mouseY >= centerY) {
-      return tipPosMap.rightBottom
-    } else {
-      return tipPosMap.leftBottom
-    }
-  }
-
-  return <div
-    className='__easyv-tooltip'
-    style={{
-      pointerEvents: 'none',
-      transform: getTipPos(mousePos, pieCenter),
-      width: tipWidth,
-      height: tipHeight,
-      padding: getMargin(margin),
-      background: image
-        ? '50% 50% / 100% 100% no-repeat url(' +
-        window.appConfig.ASSETS_URL +
-        image +
-        ')'
-        : 'rgba(48, 55, 66, 0.85)',
-    }}
-  >
-    <dl
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        height: '100%',
-      }}
-    >
-      {Item()}
-    </dl>
-
-  </div>
+import React, { memo } from 'react'
+import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
+
+
+export const PieTooltip = memo((props) => {
+	const { mousePos,
+		pieCenter,
+		config: {
+			tip: {
+				data: { lineHeight, iconSize, name,
+					value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
+					percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
+				},
+				image,
+				margin,
+				size: { width: tipWidth, height: tipHeight },
+				translate: translateTip,
+			},
+		},
+		data,
+		series } = props
+
+	const Item = () => {
+		const { data: { s, y }, percent } = data
+		const { type, icon, displayName } = [...series.values()].find(
+			(series) => series.name == s
+		);
+
+		const renderSuffix = (suffix) => {
+			const {
+				content,
+				font: suffiixFont,
+				translate: suffixTranslate,
+			} = suffix;
+			return (
+				<span
+					style={{
+						...getFontStyle(suffiixFont),
+						display: "inline-block",
+						transform: getTranslate3d(suffixTranslate),
+					}}
+				>
+					{content}
+				</span>
+			)
+		}
+
+		const _icon = getIcon(type, icon);
+		return (
+			<dd
+				style={{
+					display: 'flex',
+					justifyContent: 'space-between',
+					lineHeight: lineHeight + 'px',
+				}}
+
+			>
+				<span
+					style={{
+						// border: '1px solid red',
+						display: 'flex',
+						alignItems: 'center',
+						gap: icon.iconGap,
+					}}
+				>
+					<span
+						style={{
+							..._icon,
+							width: iconSize + 'px',
+							height: iconSize + 'px',
+						}}
+					/>
+					<span style={getFontStyle(name)}>{displayName || s}</span>
+				</span>
+				{valueIsShow && <span style={getFontStyle(valueFont)}>
+					{y}
+					{valueSuffixIsShow && renderSuffix(valueSuffix)}
+				</span>}
+				{percentageIsShow && <span style={getFontStyle(percentageFont)}>
+					{Number(percent).toFixed(precision)}
+					{percentageSuffixIsShow && renderSuffix(percentageSuffix)}
+				</span>}
+			</dd>
+		);
+	}
+	const { x: mouseX, y: mouseY } = mousePos
+	const { x: centerX, y: centerY } = pieCenter
+	const getTipPos = () => {
+
+		const getBigscreenScale = () => {
+			if (window.getScreenScale) {
+				return window.getScreenScale()
+			} else {
+				const bigscreenDom = document.getElementById('bigscreen-container')
+				if (!bigscreenDom) return [1, 1]
+				const transform = bigscreenDom.style.transform
+				if (!transform) return [1, 1]
+				let match = transform.match(/scale\(([^)]+)\)/)
+				if (match) {
+					const scaleMatch = match[1].split(',')
+					let scaleX = scaleMatch[0];
+					let scaleY = scaleMatch[1];
+					if (scaleY) {
+						return [Number(scaleX), Number(scaleY)]
+					} else {
+						return [Number(scaleX), Number(scaleX)]
+					}
+				} else {
+					return [1, 1]
+				}
+			}
+		}
+		const [scaleX, scaleY] = getBigscreenScale()
+		const _mouseX = mouseX / scaleX
+		const _mouseY = mouseY / scaleY
+		const tipPosMap = {
+			rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
+			rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
+		}
+		if (_mouseX < centerX && _mouseY < centerY) {
+			return tipPosMap.leftTop
+		} else if (_mouseX > centerX && _mouseY < centerY) {
+			return tipPosMap.rightTop
+		} else if (_mouseX >= centerX && _mouseY >= centerY) {
+			return tipPosMap.rightBottom
+		} else {
+			return tipPosMap.leftBottom
+		}
+	}
+
+	return <div
+		className='__easyv-tooltip'
+		style={{
+			pointerEvents: 'none',
+			transform: getTipPos(mousePos, pieCenter),
+			width: tipWidth,
+			height: tipHeight,
+			padding: getMargin(margin),
+			background: image
+				? '50% 50% / 100% 100% no-repeat url(' +
+				window.appConfig.ASSETS_URL +
+				image +
+				')'
+				: 'rgba(48, 55, 66, 0.85)',
+		}}
+	>
+		<dl
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				justifyContent: 'space-between',
+				height: '100%',
+			}}
+		>
+			{Item()}
+		</dl>
+
+	</div>
 })