@easyv/charts 1.9.26 → 1.9.28

package/lib/components/Axis.js

@@ -248,7 +248,7 @@ var Label = function Label(_ref5) {
       showType: config.showType
     }
   }));
-  var _getLayout = getLayout(orientation, rotate),
+  var _getLayout = getLayout(orientation, adaptive ? 0 : rotate),
     transform = _getLayout.transform,
     directionX = _getLayout.directionX,
     directionY = _getLayout.directionY;
@@ -293,10 +293,9 @@ var Label = function Label(_ref5) {
     }
   }) : /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      width: LabelWidth,
+      display: "inline-block",
       transform: transform,
-      justifyContent: "flex-start",
-      display: "block",
+      position: "absolute",
       top: translateY,
       left: translateX
     }

package/lib/components/ChartContainer.js

@@ -43,7 +43,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     onMouseMove: onMouseMove,
     ref: ref,
     style: _objectSpread({
-      overflow: "hidden",
+      overflow: "visible",
       position: "absolute",
       width: width,
       height: height

package/lib/components/pieTooltip.js

@@ -41,7 +41,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     data = props.data,
     series = props.series;
   var tooltipRef = (0, _react.useRef)(null);
-  // 2. 存储tooltip的实际宽高
+  // 存储tooltip的实际宽高
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.26",
+  "version": "1.9.28",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Axis.tsx

@@ -226,7 +226,7 @@ type LabelType = {
   events?: Function;
   config: {
     show: boolean;
-    adaptive:boolean;
+    adaptive: boolean;
     translate: Translate;
     font: Font;
     textAlign: TextAlign;
@@ -291,7 +291,10 @@ const Label: (
     ...config,
     format: { type: config.format, showType: config.showType },
   });
-  const { transform, directionX, directionY } = getLayout(orientation, rotate);
+  const { transform, directionX, directionY } = getLayout(
+    orientation,
+    adaptive ? 0 : rotate
+  );
   const isVertical = orientation == "left" || orientation == "right";
 
   const x =
@@ -344,10 +347,9 @@ const Label: (
         ) : (
           <span
             style={{
-              width: LabelWidth,
+              display: "inline-block",
               transform,
-              justifyContent: "flex-start",
-              display: "block",
+              position: "absolute",
               top: translateY,
               left: translateX,
             }}
@@ -396,7 +398,7 @@ export default memo(
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
       let LabelWidth = 1;
-      if (!label.adaptive&&label.appearance) {
+      if (!label.adaptive && label.appearance) {
         LabelWidth = label.appearance.width;
       } else {
         if (allTicks.length && typeof allTicks[0] == "string") {
@@ -406,18 +408,17 @@ export default memo(
       const LabelNum = Math.floor(
         ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
       );
-      const ticks: any =
-        !label.adaptive
-          ? tickss
-          : getEvenlySpacedElements(
-              allTicks,
-              LabelNum < allTicks.length
-                ? LabelNum > allTicks.length / 2
-                  ? Math.ceil(allTicks.length / 2)
-                  : LabelNum
-                : allTicks.length,
-              label.showLast
-            );
+      const ticks: any = !label.adaptive
+        ? tickss
+        : getEvenlySpacedElements(
+            allTicks,
+            LabelNum < allTicks.length
+              ? LabelNum > allTicks.length / 2
+                ? Math.ceil(allTicks.length / 2)
+                : LabelNum
+              : allTicks.length,
+            label.showLast
+          );
       if (!(on && ticks.length > 0)) return null;
 
       //数据抽取逻辑

package/src/components/CartesianChart.js

@@ -348,8 +348,9 @@ const Chart = memo(
         setClipX(-translateX);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
-        seriesEl.current.style.transform = `translate(${translateX + coreOffset
-          }px,${marginTop}px)`;
+        seriesEl.current.style.transform = `translate(${
+          translateX + coreOffset
+        }px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -458,8 +459,8 @@ const Chart = memo(
     const controlChartTooltipData =
       ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical
-      ? xLineRange + 100 + marginRight + marginLeft
-      : xLineRange,
+        ? xLineRange + 100 + marginRight + marginLeft
+        : xLineRange,
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
@@ -724,7 +725,7 @@ const Chart = memo(
                   ctlX -
                   marginLeft -
                   (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                  curControlPercent.current
+                    curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/ChartContainer.tsx

@@ -54,7 +54,7 @@ export default memo(
           onMouseMove={onMouseMove}
           ref={ref}
           style={{
-            overflow: "hidden",
+            overflow: "visible",
             position: "absolute",
             width,
             height,

package/src/components/PieTooltip.jsx

@@ -1,4 +1,4 @@
-import React, { memo,useRef,useState,useEffect  } from "react";
+import React, { memo, useRef, useState, useEffect } from "react";
 import {
   getFontStyle,
   getMargin,
@@ -42,7 +42,7 @@ export const PieTooltip = memo((props) => {
     series,
   } = props;
   const tooltipRef = useRef(null);
-  // 2. 存储tooltip的实际宽高
+  // 存储tooltip的实际宽高
   const [tooltipSize, setTooltipSize] = useState({
     width: 0,
     height: 0,
@@ -56,7 +56,6 @@ export const PieTooltip = memo((props) => {
           width: rect.width,
           height: rect.height,
         });
-        
       } catch (e) {
         console.error("获取tooltip尺寸失败:", e);
       }
@@ -93,7 +92,7 @@ export const PieTooltip = memo((props) => {
           display: "flex",
           justifyContent: "space-between",
           lineHeight: lineHeight + "px",
-          alignItems:"center"
+          alignItems: "center",
         }}
       >
         <span
@@ -114,13 +113,13 @@ export const PieTooltip = memo((props) => {
           <span style={getFontStyle(name)}>{displayName || s}</span>
         </span>
         {valueIsShow && (
-          <span style={{...getFontStyle(valueFont),marginLeft:"10px"}}>
+          <span style={{ ...getFontStyle(valueFont), marginLeft: "10px" }}>
             {y}
             {valueSuffixIsShow && renderSuffix(valueSuffix)}
           </span>
         )}
         {percentageIsShow && (
-          <span style={{...getFontStyle(percentageFont),marginLeft:"10px"}}>
+          <span style={{ ...getFontStyle(percentageFont), marginLeft: "10px" }}>
             {Number(percent).toFixed(precision)}
             {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
           </span>
@@ -277,33 +276,33 @@ export const PieTooltip = memo((props) => {
 
   return (
     <div
-    ref={tooltipRef}
-  className="__easyv-tooltip"
-  style={{
-    pointerEvents: "none",
-    transform: getTipPos(mousePos, pieCenter),
-    boxSizing: "border-box",
-    padding: getMargin(margin),
-    background: image
-      ? "50% 50% / 100% 100% no-repeat url(" +
-        window.appConfig.ASSETS_URL +
-        image +
-        ")"
-      : "rgba(48, 55, 66, 0.85)",
-    overflow: "hidden",
-  }}
->
-  <dl
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      margin: 0,
-      height: "100%",
-    }}
-  >
-    {Item()}
-  </dl>
-</div>
+      ref={tooltipRef}
+      className="__easyv-tooltip"
+      style={{
+        pointerEvents: "none",
+        transform: getTipPos(mousePos, pieCenter),
+        boxSizing: "border-box",
+        padding: getMargin(margin),
+        background: image
+          ? "50% 50% / 100% 100% no-repeat url(" +
+            window.appConfig.ASSETS_URL +
+            image +
+            ")"
+          : "rgba(48, 55, 66, 0.85)",
+        overflow: "hidden",
+      }}
+    >
+      <dl
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          margin: 0,
+          height: "100%",
+        }}
+      >
+        {Item()}
+      </dl>
+    </div>
   );
 });

package/src/components/Tooltip.js

@@ -58,12 +58,15 @@ export default memo(
             x: translateTip.x + position + marginLeft,
           };
       if (!isVertical && translate3d.x + tooltipSize.width > width) {
-        const newPositon = position + marginLeft - tooltipSize.width - translateTip.x;
+        const newPositon =
+          position + marginLeft - tooltipSize.width - translateTip.x;
         translate3d.x = newPositon >= 0 ? newPositon : 0;
       }
       if (isVertical && translate3d.y + tooltipSize.height > height) {
-        const newPositon = position + marginTop - tooltipSize.height - translateTip.y;
-        translate3d.y = newPositon <= 0 ? newPositon : height - tooltipSize.height;
+        const newPositon =
+          position + marginTop - tooltipSize.height - translateTip.y;
+        translate3d.y =
+          newPositon <= 0 ? newPositon : height - tooltipSize.height;
       }
       return getTranslate3d(translate3d);
     }, [
@@ -86,51 +89,51 @@ export default memo(
     }, [manual, auto, formatter, data, series, x]);
     return manual || auto ? (
       <div
-      ref={tooltipRef}
-      className="__easyv-tooltip"
-      style={{
-        pointerEvents: "none",
-        transform: tipPosition,
-        display: "inline-block",
-        position: "absolute",
-        margin: 0,
-        boxSizing: "border-box",
-        padding: getMargin(margin),
-        background:
-          bgType == "image"
-            ? image
-              ? "50% 50% / 100% 100% no-repeat url(" +
-                window.appConfig.ASSETS_URL +
-                image +
-                ")"
-              : "transparent"
-            : bgColor,
-        ...getFontStyle(font),
-        width: "fit-content",
-        maxWidth: "none",
-        overflow: "visible",
-        zIndex: 9999,
-      }}
-    >
-      {formatter ? (
-        formatter({
-          series,
-          x: { x, config: xAxis },
-          data: { data, config: dataConfig },
-        })
-      ) : (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            gap,
-            height: "100%",
-            width: "auto",
-            maxWidth: "none",
-          }}
-        >
+        ref={tooltipRef}
+        className="__easyv-tooltip"
+        style={{
+          pointerEvents: "none",
+          transform: tipPosition,
+          display: "inline-block",
+          position: "absolute",
+          margin: 0,
+          boxSizing: "border-box",
+          padding: getMargin(margin),
+          background:
+            bgType == "image"
+              ? image
+                ? "50% 50% / 100% 100% no-repeat url(" +
+                  window.appConfig.ASSETS_URL +
+                  image +
+                  ")"
+                : "transparent"
+              : bgColor,
+          ...getFontStyle(font),
+          width: "fit-content",
+          maxWidth: "none",
+          overflow: "visible",
+          zIndex: 9999,
+        }}
+      >
+        {formatter ? (
+          formatter({
+            series,
+            x: { x, config: xAxis },
+            data: { data, config: dataConfig },
+          })
+        ) : (
           <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              gap,
+              height: "100%",
+              width: "auto",
+              maxWidth: "none",
+            }}
+          >
+            <div
               style={{
                 textAlign: align,
                 transform: getTranslate3d(translateXAxis),
@@ -213,9 +216,9 @@ export default memo(
                 );
               })}
             </div>
-        </div>
-      )}
-    </div>
+          </div>
+        )}
+      </div>
     ) : (
       ""
     );