@easyv/charts 1.4.25 → 1.4.28

package/src/components/PieTooltip.jsx

@@ -0,0 +1,134 @@
+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>
+})