@easyv/charts 1.5.23 → 1.5.25

package/lib/components/Axis.js

@@ -163,7 +163,8 @@ var Unit = function Unit(_ref4) {
       translateY = _ref4$config$translat.y,
       _ref4$config$align = _ref4$config.align;
   _ref4$config$align = _ref4$config$align === void 0 ? defaultAlign : _ref4$config$align;
-  var textAnchor = _ref4$config$align.textAnchor;
+  var textAnchor = _ref4$config$align.textAnchor,
+      dataUnit = _ref4.dataUnit;
   if (!show) return null;
   return /*#__PURE__*/_react["default"].createElement("text", {
     className: "__easyv-unit",
@@ -175,7 +176,7 @@ var Unit = function Unit(_ref4) {
     fontStyle: italic ? "italic" : "normal",
     letterSpacing: letterSpacing,
     textAnchor: textAnchor
-  }, text);
+  }, dataUnit || text);
 };
 
 var Label = function Label(_ref5) {
@@ -279,6 +280,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       marginTop = _ref6$margin.marginTop,
       positions = _ref6.positions,
       xLineRange = _ref6.xLineRange,
+      dataUnit = _ref6.dataUnit,
       range = _ref6.range,
       axisType = _ref6.axisType,
       _ref6$isClipAxis = _ref6.isClipAxis,
@@ -451,7 +453,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     clipAxisRange: clipAxisRange,
     cPercent: cPercent
   }), isC && tickLine && drawAxisTickLine(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
-    config: unit
+    config: unit,
+    dataUnit: dataUnit
   })))));
 }));
 

package/lib/components/CartesianChart.js

@@ -275,6 +275,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       controlEl.current.style.transform = "translate(".concat(cBarX, "px,0)"); //计算出当前位移的百分比
 
       var percent = cBarX / (cWidth - cBarWidth);
+      percent = isNaN(percent) ? 1 : percent;
       var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
       curControlPercent.current = percent;
       seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
@@ -441,7 +442,17 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     config: background,
     bandLength: bandLength
   }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
-    var config = item.axisType == "x" ? axisX : item;
+    var axisType = item.axisType;
+    var dataUnit = "";
+    var config = axisType == "x" ? axisX : item;
+    var target = series.find(function (d) {
+      return d.yOrZ == axisType;
+    });
+
+    if (target && target.data[0]) {
+      dataUnit = target.data[0].data.__unit__;
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
       ref: function ref(d) {
         axisElList.current[index] = d;
@@ -453,7 +464,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       margin: {
         marginLeft: marginLeft,
         marginTop: marginTop
-      }
+      },
+      dataUnit: dataUnit
     }, config, {
       key: index
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.5.23",
+  "version": "1.5.25",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -137,6 +137,7 @@ const AxisLine: ({
 
 const Unit: ({
   config: { show, text, font, translate, align },
+  dataUnit
 }: any) => ReactComponentElement<ComponentType> | null = ({
   config: {
     show,
@@ -145,6 +146,7 @@ const Unit: ({
     translate: { x: translateX, y: translateY },
     align: { textAnchor } = defaultAlign,
   },
+  dataUnit
 }) => {
   if (!show) return null;
   return (
@@ -159,7 +161,7 @@ const Unit: ({
       letterSpacing={letterSpacing}
       textAnchor={textAnchor}
     >
-      {text}
+      {dataUnit || text}
     </text>
   );
 };
@@ -277,6 +279,7 @@ export default memo(
         margin:{ marginLeft, marginTop },
         positions,
         xLineRange,
+        dataUnit,
         range,
         axisType,
         //断轴图相关
@@ -499,7 +502,7 @@ export default memo(
                       cPercent={cPercent}
                     />}
                 {isC && tickLine && drawAxisTickLine()}
-                {unit && <Unit config={unit} />}
+                {unit && <Unit config={unit} dataUnit={dataUnit}/>}
               </g>
             </g>
           </svg>

package/src/components/CartesianChart.js

@@ -236,7 +236,8 @@ const Chart = memo(
       if(controlEl.current){
         controlEl.current.style.transform = `translate(${cBarX}px,0)`;
         //计算出当前位移的百分比
-        const percent = cBarX / (cWidth - cBarWidth);
+        let percent = cBarX / (cWidth - cBarWidth);
+        percent = isNaN(percent)?1:percent;
         const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
         curControlPercent.current = percent;
         seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
@@ -378,7 +379,13 @@ const Chart = memo(
           )}
           {/* 坐标轴 */}
           {[...axes.values()].reverse().map((item, index) => {
-            const config = item.axisType == "x" ? axisX : item;
+            const { axisType } = item;
+            let dataUnit = "";
+            const config = axisType == "x" ? axisX : item;
+            const target = series.find(d=>d.yOrZ==axisType);
+            if(target && target.data[0]){
+              dataUnit = target.data[0].data.__unit__;
+            }
             return (
               <Axis
                 ref={(d) => {
@@ -389,6 +396,7 @@ const Chart = memo(
                 yLineRange={yLineRange}
                 controlInfo={controlInfo}
                 margin={{marginLeft,marginTop}}
+                dataUnit={dataUnit}
                 {...config}
                 key={index}
               />
@@ -397,7 +405,6 @@ const Chart = memo(
           {showTooltip && !control && (
             <Indicator {...indicator} {...indicatorAttr} />
           )}
-
           <foreignObject
             style={
               {
@@ -480,7 +487,6 @@ const Chart = memo(
               })}
             </svg>
           </foreignObject>
-
           {baseLineData &&
             baseLineData.length > 0 &&
             baseLineData.map((item, index) => {
@@ -539,7 +545,6 @@ const Chart = memo(
             height={height}
           />
         )}
-
         {showCtl && !!control && (
           <Tooltip
             isVertical={isVertical}

package/src/hooks/useTooltip.ts

@@ -95,6 +95,7 @@ export default ({
     };
   }, [auto, tickLength, interval, isHover, active]);
   const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
+
   return {
     name,
     x: axisX.scaler(name),