@easyv/charts 1.0.64 → 1.0.68

package/lib/components/Axis.js

@@ -194,7 +194,7 @@ var Label = function Label(_ref5) {
     letterSpacing: letterSpacing,
     dx: "0",
     dy: "0",
-    transform: Array.isArray(_label) ? rotate !== 0 ? isVertical ? translateText + 'rotate(' + rotate + ')' : 'rotate(' + rotate + ', ' + x + ', ' + y + ')' : isVertical ? translateText : translateText : translateText + 'rotate(' + rotate + ')'
+    transform: Array.isArray(_label) ? rotate !== 0 ? isVertical ? translateText + 'rotate(' + rotate + ')' : 'rotate(' + rotate + ', ' + x + ', ' + y + ')' : isVertical ? translateText : 'translate(' + translateX + ', ' + translateY + ')' : translateText + 'rotate(' + rotate + ')'
   }, !!Array.isArray(_label) ? _label.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement("tspan", {
       key: index,

package/lib/components/Line.js

@@ -69,6 +69,7 @@ var Area = function Area(_ref2) {
       return yScaler(y);
     }).y0(height).defined(defined);
     curve && areaGen.curve(_d3v.curveCatmullRom.alpha(tension));
+    curve && areaGen.curve(_d3v.curveMonotoneX);
     return areaGen;
   }, [xScaler, yScaler, curve, tension]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("path", {
@@ -134,6 +135,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       return yScaler(y);
     })).defined(defined);
     curve && lineGen.curve(_d3v.curveCatmullRom.alpha(tension));
+    curve && lineGen.curve(_d3v.curveMonotoneX);
     return lineGen;
   }, [direction, xScaler, yScaler, tension, curve]);
   var path = lineGen(_data);

package/lib/css/index.module.css

@@ -27,7 +27,7 @@
 .showAllStyle {
   display: grid;
   width: 100%;
-  grid-template-columns: 50% 25% 25%;
+  grid-template-columns: 40% 30% 30%;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;

package/lib/formatter/legend.js

@@ -64,7 +64,9 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
       whiteSpace: "nowrap"
     })
   }, displayName), showValue && /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
+    style: _objectSpread(_objectSpread({
+      whiteSpace: "nowrap"
+    }, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,
       display: 'flex',
       color: valueSameColor ? _color : valueFont.color,
@@ -73,11 +75,14 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
     })
   }, showValue && /*#__PURE__*/React.createElement("span", null, data.y), showSuffix && /*#__PURE__*/React.createElement("span", {
     style: {
+      whiteSpace: "nowrap",
       fontSize: fontSize,
       transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
     }
   }, text)), showPercent && /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
+    style: _objectSpread(_objectSpread({
+      whiteSpace: "nowrap"
+    }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
       color: percentSameColor ? _color : percentFont.color
     })

package/package.json

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

package/src/components/Axis.tsx

@@ -180,7 +180,7 @@ const Label: (props: LabelType) => ReactComponentElement<ComponentType> | null =
       translateY * directionY;
 
     const translateText = 'translate(' + x + ', ' + y + ')';
-    
+   
     return (
       <text
         className={className}
@@ -202,7 +202,7 @@ const Label: (props: LabelType) => ReactComponentElement<ComponentType> | null =
                 : 'rotate(' + rotate + ', ' + x + ', ' + y + ')'
               : isVertical
               ? translateText
-              : translateText
+              : 'translate(' + translateX + ', ' + translateY + ')'
             : translateText + 'rotate(' + rotate + ')'
         }
       >

package/src/components/Line.js

@@ -2,7 +2,7 @@
  * 折线图
  */
 import React, { memo, useMemo } from 'react';
-import { line as d3Line, area as d3Area, curveCatmullRom } from 'd3v7';
+import { line as d3Line, area as d3Area, curveCatmullRom, curveMonotoneX } from 'd3v7';
 import { getColorList } from '../utils';
 import { Lighter, LinearGradient } from '.';
 
@@ -10,9 +10,9 @@ const defined = (d) => d.data.y != null;
 const getLineData = (data, connectNulls) =>
   connectNulls
     ? data.map(({ data, ...item }) => ({
-        ...item,
-        data: { ...data, y: +data.y },
-      }))
+      ...item,
+      data: { ...data, y: +data.y },
+    }))
     : data;
 
 const Area = ({
@@ -31,6 +31,7 @@ const Area = ({
       .y0(height)
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
+    curve && areaGen.curve(curveMonotoneX);
     return areaGen;
   }, [xScaler, yScaler, curve, tension]);
 
@@ -89,13 +90,14 @@ export default memo(
       let lineGen = (
         isVertical
           ? d3Line()
-              .y(({ data: { x } }) => xScaler(x))
-              .x(({ data: { y } }) => yScaler(y))
+            .y(({ data: { x } }) => xScaler(x))
+            .x(({ data: { y } }) => yScaler(y))
           : d3Line()
-              .x(({ data: { x } }) => xScaler(x))
-              .y(({ data: { y } }) => yScaler(y))
+            .x(({ data: { x } }) => xScaler(x))
+            .y(({ data: { y } }) => yScaler(y))
       ).defined(defined);
       curve && lineGen.curve(curveCatmullRom.alpha(tension));
+      curve && lineGen.curve(curveMonotoneX);
       return lineGen;
     }, [direction, xScaler, yScaler, tension, curve]);
 

package/src/css/index.module.css

@@ -27,7 +27,7 @@
 .showAllStyle {
   display: grid;
   width: 100%;
-  grid-template-columns: 50% 25% 25%;
+  grid-template-columns: 40% 30% 30%;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;

package/src/formatter/legend.js

@@ -49,6 +49,7 @@ export const pieLegendFormatter = (
         {showValue && (
           <span
             style={{
+              whiteSpace:"nowrap",
               ...getFontStyle(valueFont),
               marginLeft: valueGap,
               display: 'flex',
@@ -61,6 +62,7 @@ export const pieLegendFormatter = (
             {showSuffix && (
               <span
                 style={{
+                  whiteSpace:"nowrap",
                   fontSize,
                   transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
                 }}
@@ -73,6 +75,7 @@ export const pieLegendFormatter = (
         {showPercent && (
           <span
             style={{
+              whiteSpace:"nowrap",
               ...getFontStyle(percentFont),
               marginLeft: percentGap,
               color: percentSameColor ? _color : percentFont.color,