@easyv/charts 1.6.11 → 1.6.13

package/lib/components/Label.js

@@ -53,7 +53,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesWidth = _getSeriesInfo.seriesWidth,
     seriesStart = _getSeriesInfo.seriesStart;
   var isVertical = direction === "vertical";
-  var _position = label.position;
+  var _position = label.position,
+    reverse = label.reverse;
   return /*#__PURE__*/React.createElement("g", {
     className: "__easyv-label"
   }, data.map(function (_ref2, i) {
@@ -91,13 +92,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       y: y,
       y1: y1,
       y2: y2,
-      width: width
+      width: width,
+      reverse: reverse
     }) : getHorizontalLabel({
       position: _position,
       y: y,
       y1: y1,
       y2: y2,
-      height: height
+      height: height,
+      reverse: reverse
     });
     var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
       y: position,
@@ -210,12 +213,15 @@ var getVerticalLabel = function getVerticalLabel(_ref6) {
     width = _ref6.width,
     y = _ref6.y,
     y1 = _ref6.y1,
-    y2 = _ref6.y2;
+    y2 = _ref6.y2,
+    _ref6$reverse = _ref6.reverse,
+    reverse = _ref6$reverse === void 0 ? true : _ref6$reverse;
+  var needReverse = reverse && y < 0;
   switch (position) {
     case "start":
       return {
-        x: y > 0 ? y2 : y1,
-        textAnchor: "start"
+        x: y2,
+        textAnchor: needReverse ? "end" : "start"
       };
     case "middle":
       return {
@@ -224,18 +230,18 @@ var getVerticalLabel = function getVerticalLabel(_ref6) {
       };
     case "end":
       return {
-        x: y > 0 ? y1 : y2,
-        textAnchor: "end"
+        x: y1,
+        textAnchor: needReverse ? "start" : "end"
       };
     case "outerStart":
       return {
         x: y1,
-        textAnchor: y > 0 ? "start" : "end"
+        textAnchor: needReverse ? "end" : "start"
       };
     case "chartStart":
       return {
         x: y > 0 ? width : 0,
-        textAnchor: y > 0 ? "start" : "end"
+        textAnchor: y >= 0 ? "start" : "end"
       };
   }
 };
@@ -245,12 +251,15 @@ var getHorizontalLabel = function getHorizontalLabel(_ref7) {
     height = _ref7.height,
     y = _ref7.y,
     y1 = _ref7.y1,
-    y2 = _ref7.y2;
+    y2 = _ref7.y2,
+    _ref7$reverse = _ref7.reverse,
+    reverse = _ref7$reverse === void 0 ? true : _ref7$reverse;
+  var needReverse = reverse && y < 0;
   switch (position) {
     case "start":
       return {
-        y: y > 0 ? y1 : y2,
-        dominantBaseline: "text-after-edge"
+        y: y1,
+        dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
       };
     case "middle":
       return {
@@ -259,13 +268,13 @@ var getHorizontalLabel = function getHorizontalLabel(_ref7) {
       };
     case "end":
       return {
-        y: y > 0 ? y2 : y1,
-        dominantBaseline: "text-before-edge"
+        y: y2,
+        dominantBaseline: needReverse ? "text-after-edge" : "text-before-edge"
       };
     case "outerStart":
       return {
         y: y2,
-        dominantBaseline: y >= 0 ? "text-after-edge" : "text-before-edge"
+        dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
       };
     case "chartStart":
       return {

package/lib/components/Tooltip.js

@@ -55,12 +55,12 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }) : _objectSpread(_objectSpread({}, translateTip), {}, {
       x: translateTip.x + position + marginLeft
     });
-    if (translate3d.x + tipWidth > width) {
-      var newPositon = position + marginLeft - tipWidth + translateTip.x;
+    if (!isVertical && translate3d.x + tipWidth > width) {
+      var newPositon = position + marginLeft - tipWidth - translateTip.x;
       translate3d.x = newPositon >= 0 ? newPositon : 0;
     }
-    if (translate3d.y + tipHeight > height) {
-      var _newPositon = position + marginTop - tipHeight + translateTip.y;
+    if (isVertical && translate3d.y + tipHeight > height) {
+      var _newPositon = position + marginTop - tipHeight - translateTip.y;
       translate3d.y = _newPositon <= 0 ? _newPositon : height - tipHeight;
     }
     return (0, _utils.getTranslate3d)(translate3d);

package/lib/formatter/legend.js

@@ -25,12 +25,18 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     textOverflow = _ref2$name.textOverflow,
     speed = _ref2$name.speed,
     maxWidth = _ref2$name.maxWidth,
+    _ref2$name$translate = _ref2$name.translate,
+    nameX = _ref2$name$translate.x,
+    nameY = _ref2$name$translate.y,
     _ref2$value = _ref2.value,
     showValue = _ref2$value.show,
     valueFont = _ref2$value.font,
     valueSameColor = _ref2$value.sameColor,
     valueGap = _ref2$value.gap,
     valueAlign = _ref2$value.align,
+    _ref2$value$translate = _ref2$value.translate,
+    valueX = _ref2$value$translate.x,
+    valueY = _ref2$value$translate.y,
     _ref2$value$suffix = _ref2$value.suffix,
     showSuffix = _ref2$value$suffix.show,
     text = _ref2$value$suffix.text,
@@ -43,14 +49,18 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     percentFont = _ref2$percent.font,
     percentSameColor = _ref2$percent.sameColor,
     percentGap = _ref2$percent.gap,
-    percentAlign = _ref2$percent.align;
+    percentAlign = _ref2$percent.align,
+    _ref2$percent$transla = _ref2$percent.translate,
+    percentX = _ref2$percent$transla.x,
+    percentY = _ref2$percent$transla.y;
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
   var _color = seriesColorType == 'pure' ? pure : stops[0].color;
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
-      marginRight: icon.marginRight
+      marginRight: icon.marginRight,
+      transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
     })
   }), /*#__PURE__*/React.createElement("div", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
@@ -61,16 +71,18 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     value: displayName,
     type: textOverflow,
     speed: speed,
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       width: maxWidth,
       marginLeft: 5
-    }, (0, _utils.getFontStyle)(nameFont))
+    }, (0, _utils.getFontStyle)(nameFont)), {}, {
+      transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
+    })
   }), showValue && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,
-      // transform:`translateX(${valueGap}px)`,
+      transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
       display: 'flex',
       flex: 1,
       color: valueSameColor ? _color : valueFont.color,
@@ -88,7 +100,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
-      // transform:`translateX(${percentGap}px)`,
+      transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
       display: "flex",
       flex: 1,
       alignItems: 'center',

package/package.json

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

package/src/components/Label.js

@@ -34,7 +34,7 @@ export default memo(
       paddingOuter,
     });
     const isVertical = direction === "vertical";
-    const _position = label.position;
+    const { position:_position, reverse } = label;
     return (
       <g className="__easyv-label">
         {data.map(
@@ -74,6 +74,7 @@ export default memo(
                   y1,
                   y2,
                   width,
+                  reverse
                 })
               : getHorizontalLabel({
                   position: _position,
@@ -81,6 +82,7 @@ export default memo(
                   y1,
                   y2,
                   height,
+                  reverse
                 });
             const attr = isVertical
               ? {
@@ -182,12 +184,13 @@ const Circle = ({ cx, cy, color, radius }) => (
   <circle cx={cx} cy={cy} fill={color} r={radius} stroke="none" />
 );
 
-const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2 }) => {
+const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2, reverse = true }) => {
+  const needReverse = reverse && y<0;
   switch (position) {
     case "start":
       return {
-        x: y > 0 ? y2 : y1,
-        textAnchor: "start",
+        x: y2,
+        textAnchor: needReverse?"end":"start",
       };
     case "middle":
       return {
@@ -196,27 +199,28 @@ const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2 }) => {
       };
     case "end":
       return {
-        x: y > 0 ? y1 : y2,
-        textAnchor: "end",
+        x: y1,
+        textAnchor: needReverse?"start":"end",
       };
     case "outerStart":
       return {
         x: y1,
-        textAnchor: y > 0 ? "start" : "end",
+        textAnchor: needReverse?"end":"start",
       };
     case "chartStart":
       return {
         x: y > 0 ? width : 0,
-        textAnchor: y > 0 ? "start" : "end",
+        textAnchor: y >= 0 ? "start" : "end",
       };
   }
 };
-const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2 }) => {
+const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2, reverse = true }) => {
+  const needReverse = reverse && y<0;
   switch (position) {
     case "start":
       return {
-        y: y > 0 ? y1 : y2,
-        dominantBaseline: "text-after-edge",
+        y: y1,
+        dominantBaseline: needReverse?"text-before-edge":"text-after-edge",
       };
     case "middle":
       return {
@@ -225,13 +229,13 @@ const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2 }) => {
       };
     case "end":
       return {
-        y: y > 0 ? y2 : y1,
-        dominantBaseline: "text-before-edge",
+        y: y2,
+        dominantBaseline: needReverse?"text-after-edge":"text-before-edge",
       };
     case "outerStart":
       return {
         y: y2,
-        dominantBaseline: y >= 0 ? "text-after-edge" : "text-before-edge",
+        dominantBaseline: needReverse?"text-before-edge":"text-after-edge",
       };
     case "chartStart":
       return {

package/src/components/Tooltip.js

@@ -43,12 +43,12 @@ export default memo(
           ...translateTip,
           x: translateTip.x + position + marginLeft,
         };
-      if (translate3d.x + tipWidth > width) {
-        const newPositon = position + marginLeft - tipWidth + translateTip.x;
+      if (!isVertical && 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;
+      if (isVertical && translate3d.y + tipHeight > height) {
+        const newPositon = position + marginTop - tipHeight - translateTip.y;
         translate3d.y = newPositon <= 0 ? newPositon : height - tipHeight;
       }
       return getTranslate3d(translate3d);

package/src/formatter/legend.js

@@ -5,13 +5,17 @@ import { TextOverflow } from '../components';
 export const pieLegendFormatter = (
   { displayName, data, percent, series: { color: seriesColor, icon="" } },
   {
-    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth },
+    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth, translate: { x:nameX, y:nameY } },
     value: {
       show: showValue,
       font: valueFont,
       sameColor: valueSameColor,
       gap: valueGap,
       align: valueAlign,
+      translate: {
+        x:valueX,
+        y:valueY
+      },
       suffix: {
         show: showSuffix,
         text,
@@ -24,7 +28,11 @@ export const pieLegendFormatter = (
       font: percentFont,
       sameColor: percentSameColor,
       gap: percentGap,
-      align: percentAlign
+      align: percentAlign,
+      translate: {
+        x:percentX,
+        y:percentY
+      }
     },
   }
 ) => {
@@ -37,7 +45,7 @@ export const pieLegendFormatter = (
   const _color = seriesColorType == 'pure' ? pure : stops[0].color;
   return (
     <>
-      {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
+      {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
       <div
         className={
           showName && showValue && showPercent
@@ -50,7 +58,7 @@ export const pieLegendFormatter = (
       >
         {showName && (
           <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
-            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont)
+            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
           }}></TextOverflow>
         )}
         {showValue && (
@@ -59,7 +67,7 @@ export const pieLegendFormatter = (
               whiteSpace:"nowrap",
               ...getFontStyle(valueFont),
               marginLeft: valueGap,
-              // transform:`translateX(${valueGap}px)`,
+              transform:`translate(${valueX}px,${valueY}px)`,
               display: 'flex',
               flex:1,
               color: valueSameColor ? _color : valueFont.color,
@@ -87,7 +95,7 @@ export const pieLegendFormatter = (
               whiteSpace:"nowrap",
               ...getFontStyle(percentFont),
               marginLeft: percentGap,
-              // transform:`translateX(${percentGap}px)`,
+              transform:`translate(${percentX}px,${percentY}px)`,
               display:"flex",
               flex:1,
               alignItems: 'center',