@easyv/charts 1.0.73 → 1.1.0

package/src/components/Tooltip.js

@@ -1,17 +1,17 @@
 /**
  * 提示框
  */
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { getFontStyle, getMargin, getTranslate3d } from '../utils';
 import { getIcon } from '../utils';
-
 export default memo(
   ({
     x: position,
     tickName: x,
+    marginLeft,
+    marginTop,
     data,
     series,
-    config,
     config: {
       tip: {
         data: {
@@ -22,39 +22,61 @@ export default memo(
         },
         image,
         margin,
-        size: { width, height },
+        size: { width: tipWidth, height: tipHeight },
         translate: translateTip,
       },
     },
     formatter,
     isVertical,
+    width,
+    height,
   }) => {
-    const translate3d = isVertical
-      ? {
-        ...translateTip,
-        y: translateTip.y + position,
+    const tipPosition = useMemo(() => {
+      const translate3d = isVertical
+        ? {
+            ...translateTip,
+            y: translateTip.y + position + marginTop,
+          }
+        : {
+            ...translateTip,
+            x: translateTip.x + position + marginLeft,
+          };
+      if (translate3d.x + tipWidth > width) {
+        const newPositon = position + marginLeft - tipWidth - translateTip.x;
+        translate3d.x = newPositon >= 0 ? newPositon : 0;
+      }
+      if (translate3d.y + tipHeight > height) {
+        const newPositon = position + marginTop - tipHeight - translateTip.y;
+        translate3d.y = newPositon >= 0 ? newPositon : height - tipHeight;
       }
-      : {
-        ...translateTip,
-        x: translateTip.x + position,
-      };
+      return getTranslate3d(translate3d);
+    }, [
+      width,
+      height,
+      marginLeft,
+      marginTop,
+      position,
+      tipWidth,
+      tipHeight,
+      translateTip,
+    ]);
 
     return (
       <div
         className='__easyv-tooltip'
         style={{
           pointerEvents: 'none',
-          transform: getTranslate3d(translate3d),
-          width,
-          height,
+          transform: tipPosition,
+          width: tipWidth,
+          height: tipHeight,
           padding: getMargin(margin),
           background: image
             ? '50% 50% / 100% 100% no-repeat url(' +
-            window.appConfig.ASSETS_URL +
-            image +
-            ')'
+              window.appConfig.ASSETS_URL +
+              image +
+              ')'
             : 'rgba(48, 55, 66, 0.85)',
-          ...getFontStyle(font)
+          ...getFontStyle(font),
         }}
       >
         {formatter ? (
@@ -80,21 +102,21 @@ export default memo(
               }}
             >
               {x}
-
             </dt>
             {data.map(({ showY, s }, index) => {
               const { type, icon, displayName } = series.find(
                 (series) => series.name == s
               );
-              const { show: showSuffix, content, font: suffiixFont, translate: suffixTranslate } = suffix
+              const {
+                show: showSuffix,
+                content,
+                font: suffiixFont,
+                translate: suffixTranslate,
+              } = suffix;
               const tmp = new Map();
-              Object.values(content).forEach(
-                (item) => {
-                  tmp.set(item['suffix'].name,
-                    item['suffix'].suffix
-                  );
-                }
-              );
+              Object.values(content).forEach((item) => {
+                tmp.set(item['suffix'].name, item['suffix'].suffix);
+              });
               const _icon = getIcon(type, icon);
               return (
                 <dd
@@ -113,14 +135,27 @@ export default memo(
                       gap: icon.iconGap,
                     }}
                   >
-                    <span style={{ ..._icon, width: iconSize + 'px', height: iconSize + 'px' }} />
+                    <span
+                      style={{
+                        ..._icon,
+                        width: iconSize + 'px',
+                        height: iconSize + 'px',
+                      }}
+                    />
                     <span style={getFontStyle(name)}>{displayName || s}</span>
                   </span>
-                  <span style={getFontStyle(value)}>{showY}
-                    {showSuffix && <span style={{ ...getFontStyle(suffiixFont), transform: getTranslate3d(suffixTranslate) }}>
-                      {tmp.get(s)}
-                    </span>
-                    }
+                  <span style={getFontStyle(value)}>
+                    {showY}
+                    {showSuffix && (
+                      <span
+                        style={{
+                          ...getFontStyle(suffiixFont),
+                          transform: getTranslate3d(suffixTranslate),
+                        }}
+                      >
+                        {tmp.get(s)}
+                      </span>
+                    )}
                   </span>
                 </dd>
               );

package/src/components/index.js

@@ -9,6 +9,7 @@ import Axis from './Axis';
 import Tooltip from './Tooltip';
 import Indicator from './Indicator';
 import Band from './Band';
+import Lighter from './Lighter';
 import Line from './Line';
 import Background from './Background';
 import LinearGradient from './LinearGradient';
@@ -34,6 +35,7 @@ export {
   Axis,
   Indicator,
   Band,
+  Lighter,
   Line,
   Area,
   Background,

package/src/types/index.d.ts

@@ -36,7 +36,10 @@ type Translate = {
   x: number;
   y: number;
 };
-
+type Size = {
+  width: number;
+  height: number;
+};
 type Font = {
   bold: boolean;
   color: string;

package/src/utils/index.js

@@ -632,7 +632,7 @@ const sortPie = (data, order) => {
 
 const getDataWithPercent = (data = [], precision = 0) => {
   const digits = Math.pow(10, precision);
-  //const targetSeats = digits * 100;
+  const targetSeats = digits * 100;
 
   const total = sum(data, (d) => d.value);
 
@@ -643,7 +643,7 @@ const getDataWithPercent = (data = [], precision = 0) => {
   }));
   const currentSum = sum(votesPerQuota, (d) => d.vote);
 
-  let remainder = 100 - currentSum;
+  let remainder = targetSeats - currentSum;
   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
 
   const tmp = votesPerQuota.map(({ vote, value, ...data }, index) => {