@easyv/charts 1.3.20 → 1.3.22

package/commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']}

package/lib/components/AnimateData.js

@@ -33,6 +33,7 @@ var _default = function _default(Component) {
         rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       config: config,
+      originData: data,
       data: (0, _hooks.useAnimateData)(data, dataAnimation)
     }));
   });

package/lib/components/Axis.js

@@ -223,7 +223,7 @@ var Label = function Label(_ref5) {
     return /*#__PURE__*/_react["default"].createElement("tspan", {
       key: index,
       x: x,
-      dy: "1em"
+      dy: index != 0 ? '1em' : '0'
     }, item);
   }) : _label);
 };

package/lib/components/CartesianChart.js

@@ -65,7 +65,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       indicator = _ref$config$tooltip$c3 === void 0 ? {} : _ref$config$tooltip$c3,
       brush = _ref$config.brush,
       style = _ref.style,
-      data = _ref.data,
+      originData = _ref.originData,
       filterData = _ref.filterData;
   var context = (0, _react.useContext)(_context.chartContext);
 
@@ -96,10 +96,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       setIndex = _useTooltip.setIndex;
 
   var tooltipData = (0, _react.useMemo)(function () {
-    return tickName !== undefined && data.filter(function (d) {
+    return tickName !== undefined && originData.filter(function (d) {
       return d.x === tickName;
     });
-  }, [tickName, data]);
+  }, [tickName, originData]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
   var isVertical = axisX.direction === 'vertical';
   var indicatorWidth = indicator.width * axisX.step / 100;

package/lib/components/Legend.js

@@ -19,6 +19,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
+var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
+
 var _excluded = ["italic", "bold"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -42,6 +44,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$order = _ref$config.order,
       order = _ref$config$order === void 0 ? '' : _ref$config$order,
       interactive = _ref$config.interactive,
+      maxWidth = _ref$config.maxWidth,
+      textOverflow = _ref$config.textOverflow,
+      speed = _ref$config.speed,
       _ref$config$layout = _ref$config.layout,
       _ref$config$layout$al = _ref$config$layout.alignment,
       alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
@@ -123,12 +128,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       }
     }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
       style: _icon
-    }), /*#__PURE__*/_react["default"].createElement("span", {
+    }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+      type: textOverflow,
+      value: displayName || name,
       style: _objectSpread(_objectSpread({}, font), {}, {
+        width: maxWidth,
         fontStyle: italic ? 'italic' : 'normal',
         fontWeight: bold ? 'bold' : 'normal'
-      })
-    }, displayName || name)));
+      }),
+      speed: speed
+    })));
   })));
 });
 

package/lib/hooks/useAxes.js

@@ -145,7 +145,7 @@ var _default = function _default(_ref) {
       if (type == 'linear' && config.on) {
         var zeroPosition = scaler(0);
 
-        if (zeroPosition !== range[0]) {
+        if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
           if (direction === 'horizontal') {
             xAxisPositions.push({
               x: zeroPosition,

package/package.json

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

package/src/components/AnimateData.tsx

@@ -14,11 +14,12 @@ export default (Component: ComponentType<any>) =>
       data: DataType[];
       config: { dataAnimation: DataAnimation; [key: string]: any };
       [key: string]: any;
-    }) => (
-      <Component
+    }) => {
+      return <Component
         {...rest}
         config={config}
+        originData={data}
         data={useAnimateData(data, dataAnimation)}
       />
-    )
+    }
   );

package/src/components/Axis.tsx

@@ -227,7 +227,7 @@ const Label: (
     >
       {!!Array.isArray(_label)
         ? _label.map((item, index) => (
-            <tspan key={index} x={x} dy='1em'>
+            <tspan key={index} x={x} dy={index!=0?'1em':'0'}>
               {item}
             </tspan>
           ))

package/src/components/CartesianChart.js

@@ -55,7 +55,8 @@ const Chart = memo(
       brush,
     },
     style,
-    data,
+    //data,
+    originData,
     filterData,
   }) => {
     const context = useContext(chartContext);
@@ -65,7 +66,6 @@ const Chart = memo(
       triggerOnRelative,
       onEmit,
     } = useContext(chartContext);
-
     const svg = createRef();
     const axes = useAxes({ axes: axesConfig, context });
     const axisX = useCarouselAxisX(axes.get('x'), animation);
@@ -84,8 +84,8 @@ const Chart = memo(
       config: tooltipConfig,
     });
     const tooltipData = useMemo(
-      () => tickName !== undefined && data.filter((d) => d.x === tickName),
-      [tickName, data]
+      () => tickName !== undefined && originData.filter((d) => d.x === tickName),
+      [tickName, originData]
     );
 
     const showTooltip = !!(

package/src/components/Legend.js

@@ -1,165 +1,166 @@
-/**
- * 图例
- */
-import React, { memo, useCallback } from 'react';
-import { getIcon, sortPie } from '../utils';
-
-const defaultFont = {
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-};
-
-export default memo(
-  ({
-    series,
-    config,
-    config: {
-      show,
-      order = '',
-      interactive,
-      layout: {
-        alignment = 'right center',
-        gridTemplateColumns,
-        gridGap: { gridColumnGap, gridRowGap },
-        translate: { x, y },
-      },
-      font: { italic, bold, ...font } = defaultFont,
-      unselect: { opacity = 1 } = {},
-    },
-    filterData,
-    formatter,
-    judge
-  }) => {
-    if (!show) return null;
-    const _series = sortPie(series, order);
-    const [_alignment, position] = alignment.split(' ');
-    const length = _series.length;
-
-    const onClick = useCallback(
-      (e) => {
-        const { dataset } = e.currentTarget;
-        const { name } = dataset;
-        filterData && interactive && filterData(name);
-      },
-      [interactive, filterData]
-    );
-
-     //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
-     
-     if (judge == 0) {
-       _series.forEach((d) => {
-         d.percent=0
-       })
-     }
-
-    return (
-      <div
-        className='__easyv-legend-wrapper'
-        style={{
-          position: 'absolute',
-          height: 'auto',
-          display: 'flex',
-          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-          ...getPosition(position, _alignment),
-        }}
-      >
-        <ul
-          style={{
-            display: 'grid',
-            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-            gridTemplateColumns:
-              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
-          }}
-        >
-          {_series.map((series, index) => {
-            const { type, name, displayName, icon, selected } = series;
-            const _icon = getIcon(type, icon, series?.config?.line?.type);
-            return (
-              <li
-                key={index}
-                onClick={onClick}
-                data-name={name}
-                style={{
-                  display: 'flex',
-                  opacity: selected === false ? opacity / 100 : 1,
-                  alignItems: 'center',
-                  gap: _icon.gap,
-                }}
-              >
-                {formatter ? (
-                  formatter(series, config)
-                ) : (
-                  <>
-                    <span style={_icon} />
-                    <span
-                      style={{
-                        ...font,
-                        fontStyle: italic ? 'italic' : 'normal',
-                        fontWeight: bold ? 'bold' : 'normal',
-                      }}
-                    >
-                      {displayName || name}
-                    </span>
-                  </>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-);
-
-const getPosition = (position, alignment) => {
-  switch (position) {
-    case 'top':
-      return {
-        left: 0,
-        right: 0,
-        top: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'right':
-      return {
-        top: 0,
-        bottom: 0,
-        right: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'left':
-      return {
-        top: 0,
-        bottom: 0,
-        left: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    default:
-      return {
-        left: 0,
-        right: 0,
-        bottom: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-  }
-};
+/**
+ * 图例
+ */
+import React, { memo, useCallback } from 'react';
+import { getIcon, sortPie } from '../utils';
+import TextOverflow from './TextOverflow';
+
+const defaultFont = {
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+};
+
+export default memo(
+  ({
+    series,
+    config,
+    config: {
+      show,
+      order = '',
+      interactive,
+      maxWidth,
+      textOverflow,
+      speed,
+      layout: {
+        alignment = 'right center',
+        gridTemplateColumns,
+        gridGap: { gridColumnGap, gridRowGap },
+        translate: { x, y },
+      },
+      font: { italic, bold, ...font } = defaultFont,
+      unselect: { opacity = 1 } = {},
+    },
+    filterData,
+    formatter,
+    judge
+  }) => {
+    if (!show) return null;
+    const _series = sortPie(series, order);
+    const [_alignment, position] = alignment.split(' ');
+    const length = _series.length;
+
+    const onClick = useCallback(
+      (e) => {
+        const { dataset } = e.currentTarget;
+        const { name } = dataset;
+        filterData && interactive && filterData(name);
+      },
+      [interactive, filterData]
+    );
+
+     //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
+     if (judge == 0) {
+       _series.forEach((d) => {
+         d.percent=0
+       })
+     }
+
+    return (
+      <div
+        className='__easyv-legend-wrapper'
+        style={{
+          position: 'absolute',
+          height: 'auto',
+          display: 'flex',
+          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+          ...getPosition(position, _alignment),
+        }}
+      >
+        <ul
+          style={{
+            display: 'grid',
+            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
+            gridTemplateColumns:
+              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
+          }}
+        >
+          {_series.map((series, index) => {
+            const { type, name, displayName, icon, selected } = series;
+            const _icon = getIcon(type, icon, series?.config?.line?.type);
+            return (
+              <li
+                key={index}
+                onClick={onClick}
+                data-name={name}
+                style={{
+                  display: 'flex',
+                  opacity: selected === false ? opacity / 100 : 1,
+                  alignItems: 'center',
+                  gap: _icon.gap,
+                }}
+              >
+                {formatter ? (
+                  formatter(series, config)
+                ) : (
+                  <>
+                    <span style={_icon} />
+                    <TextOverflow type={textOverflow} value={displayName || name} style={{
+                        ...font,
+                        width:maxWidth,
+                        fontStyle: italic ? 'italic' : 'normal',
+                        fontWeight: bold ? 'bold' : 'normal',
+                      }} speed={speed}></TextOverflow>
+                    
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+);
+
+const getPosition = (position, alignment) => {
+  switch (position) {
+    case 'top':
+      return {
+        left: 0,
+        right: 0,
+        top: 5,
+        justifyContent:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    case 'right':
+      return {
+        top: 0,
+        bottom: 0,
+        right: 10,
+        alignItems:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    case 'left':
+      return {
+        top: 0,
+        bottom: 0,
+        left: 10,
+        alignItems:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    default:
+      return {
+        left: 0,
+        right: 0,
+        bottom: 5,
+        justifyContent:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+  }
+};

package/src/components/TextOverflow.js

@@ -33,13 +33,11 @@ export default memo((props) => {
     }
   };
 
-
   const styles = {
     ...getTextOverflow(type),
     ...style
   }
 
-
   return type == 'marquee' ? (
     <Marquee
       value={value}

package/src/hooks/useAxes.js

@@ -141,7 +141,7 @@ export default ({ axes, context: { width, height } }) => {
 
       if (type == 'linear' && config.on) {
         const zeroPosition = scaler(0);
-        if (zeroPosition !== range[0]) {
+        if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
           if (direction === 'horizontal') {
             xAxisPositions.push({
               x: zeroPosition,