@easyv/charts 1.5.4 → 1.5.6

package/lib/components/Axis.js

@@ -199,6 +199,8 @@ var Label = function Label(_ref5) {
       translateX = _ref5$config$translat.x,
       translateY = _ref5$config$translat.y,
       font = _ref5$config.font,
+      _ref5$config$textAlig = _ref5$config.textAlign,
+      textAlign = _ref5$config$textAlig === void 0 ? "center" : _ref5$config$textAlig,
       _ref5$config$appearan = _ref5$config.appearance;
   _ref5$config$appearan = _ref5$config$appearan === void 0 ? defaultAppearance : _ref5$config$appearan;
   var width = _ref5$config$appearan.width,
@@ -241,8 +243,8 @@ var Label = function Label(_ref5) {
     style: {
       width: width,
       transform: transform,
-      textAlign: "center",
-      justifyContent: "center"
+      textAlign: textAlign,
+      justifyContent: textAlign == "left" ? "flex-start" : textAlign == "right" ? "flex-end" : "center"
     }
   })));
 };

package/lib/components/Band.js

@@ -120,7 +120,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       _ref3$yAxis = _ref3.yAxis,
       yScaler = _ref3$yAxis.scaler,
       isClipAxis = _ref3$yAxis.isClipAxis,
-      clipValue = _ref3$yAxis.clipValue;
+      clipValue = _ref3$yAxis.clipValue,
+      reverse = _ref3$yAxis.reverse;
   if (!data.length) return null;
   var step = isControlChart ? controlStep : normalStep;
   var xScaler = isControlChart ? controlDragScaler : normalScaler;
@@ -192,7 +193,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
     };
 
     if (isNaN(positionX)) return null;
-    var positionY = y < 0 ? y1 : y2;
+    var positionY = reverse ? y > 0 ? y1 : y2 : y < 0 ? y1 : y2;
     var attr = getAttr({
       isVertical: isVertical,
       x: positionX,

package/lib/components/Line.js

@@ -15,8 +15,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _d3v = require("d3v7");
@@ -25,8 +23,6 @@ var _utils = require("../utils");
 
 var _ = require(".");
 
-var _excluded = ["data"];
-
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,33 +36,32 @@ var defined = function defined(d) {
 };
 
 var getLineData = function getLineData(data, connectNulls) {
-  return connectNulls ? data.map(function (_ref) {
-    var data = _ref.data,
-        item = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-    return _objectSpread(_objectSpread({}, item), {}, {
-      data: _objectSpread(_objectSpread({}, data), {}, {
-        y: +data.y
+  return data.flatMap(function (d) {
+    var y = d.data.y;
+    return isNaN(y) ? connectNulls ? [] : _objectSpread(_objectSpread({}, d), {}, {
+      data: _objectSpread(_objectSpread({}, d.data), {}, {
+        y: null
       })
-    });
-  }) : data;
+    }) : d;
+  });
 };
 
-var Area = function Area(_ref2) {
-  var data = _ref2.data,
-      config = _ref2.config,
-      _ref2$config = _ref2.config,
-      id = _ref2$config.id,
-      fill = _ref2$config.fill,
-      type = _ref2$config.type,
-      url = _ref2$config.url,
-      opacity = _ref2$config.opacity,
-      _ref2$config$size = _ref2$config.size,
-      patternW = _ref2$config$size.width,
-      patternH = _ref2$config$size.height,
-      curve = _ref2$config.curve,
-      tension = _ref2$config.tension,
-      xScaler = _ref2.xScaler,
-      yScaler = _ref2.yScaler;
+var Area = function Area(_ref) {
+  var data = _ref.data,
+      config = _ref.config,
+      _ref$config = _ref.config,
+      id = _ref$config.id,
+      fill = _ref$config.fill,
+      type = _ref$config.type,
+      url = _ref$config.url,
+      opacity = _ref$config.opacity,
+      _ref$config$size = _ref$config.size,
+      patternW = _ref$config$size.width,
+      patternH = _ref$config$size.height,
+      curve = _ref$config.curve,
+      tension = _ref$config.tension,
+      xScaler = _ref.xScaler,
+      yScaler = _ref.yScaler;
 
   var _yScaler$range = yScaler.range(),
       _yScaler$range2 = (0, _slicedToArray2["default"])(_yScaler$range, 1),
@@ -76,15 +71,14 @@ var Area = function Area(_ref2) {
     return (0, _utils.getColorList)(fill);
   }, [fill]);
   var areaGen = (0, _react.useMemo)(function () {
-    var areaGen = (0, _d3v.area)().x(function (_ref3) {
-      var x = _ref3.data.x;
+    var areaGen = (0, _d3v.area)().x(function (_ref2) {
+      var x = _ref2.data.x;
       return xScaler(x);
-    }).y1(function (_ref4) {
-      var y = _ref4.data.y;
+    }).y1(function (_ref3) {
+      var y = _ref3.data.y;
       return yScaler(y);
-    }) // .y0(height)
-    .y0(function (_ref5) {
-      (0, _objectDestructuringEmpty2["default"])(_ref5);
+    }).y0(function (_ref4) {
+      (0, _objectDestructuringEmpty2["default"])(_ref4);
       return yScaler(0);
     }).defined(defined);
     curve && areaGen.curve(_d3v.curveCatmullRom.alpha(tension));
@@ -115,35 +109,35 @@ var Area = function Area(_ref2) {
   })));
 };
 
-var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
-  var type = _ref6.type,
-      _ref6$config$line = _ref6.config.line,
-      lineType = _ref6$config$line.type,
-      lineWidth = _ref6$config$line.lineWidth,
-      curve = _ref6$config$line.curve,
-      tension = _ref6$config$line.tension,
-      connectNulls = _ref6$config$line.connectNulls,
-      lineShadow = _ref6$config$line.lineShadow,
-      lighter = _ref6$config$line.lighter,
-      _ref6$line = _ref6.line,
-      lineId = _ref6$line.id,
-      stroke = _ref6$line.stroke,
-      area = _ref6.area,
-      data = _ref6.data,
-      _ref6$xAxis = _ref6.xAxis,
-      xScaler = _ref6$xAxis.scaler,
-      direction = _ref6$xAxis.direction,
-      yScaler = _ref6.yAxis.scaler;
+var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var type = _ref5.type,
+      _ref5$config$line = _ref5.config.line,
+      lineType = _ref5$config$line.type,
+      lineWidth = _ref5$config$line.lineWidth,
+      curve = _ref5$config$line.curve,
+      tension = _ref5$config$line.tension,
+      connectNulls = _ref5$config$line.connectNulls,
+      lineShadow = _ref5$config$line.lineShadow,
+      lighter = _ref5$config$line.lighter,
+      _ref5$line = _ref5.line,
+      lineId = _ref5$line.id,
+      stroke = _ref5$line.stroke,
+      area = _ref5.area,
+      data = _ref5.data,
+      _ref5$xAxis = _ref5.xAxis,
+      xScaler = _ref5$xAxis.scaler,
+      direction = _ref5$xAxis.direction,
+      yScaler = _ref5.yAxis.scaler;
   if (!data.length) return null;
   var ticks = xScaler.domain();
   var sortData = (0, _react.useMemo)(function () {
-    var usefulData = data.filter(function (_ref7) {
-      var x = _ref7.data.x;
+    var usefulData = data.filter(function (_ref6) {
+      var x = _ref6.data.x;
       return ticks.indexOf(x) > -1;
     });
-    return usefulData.sort(function (_ref8, _ref9) {
-      var a = _ref8.data.x;
-      var b = _ref9.data.x;
+    return usefulData.sort(function (_ref7, _ref8) {
+      var a = _ref7.data.x;
+      var b = _ref8.data.x;
       return ticks.indexOf(a) - ticks.indexOf(b);
     });
   }, [data, ticks]);
@@ -154,17 +148,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
   var lineGen = (0, _react.useMemo)(function () {
     var isVertical = direction === 'vertical';
-    var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref10) {
-      var x = _ref10.data.x;
+    var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref9) {
+      var x = _ref9.data.x;
       return xScaler(x);
-    }).x(function (_ref11) {
-      var y = _ref11.data.y;
+    }).x(function (_ref10) {
+      var y = _ref10.data.y;
       return yScaler(y);
-    }) : (0, _d3v.line)().x(function (_ref12) {
-      var x = _ref12.data.x;
+    }) : (0, _d3v.line)().x(function (_ref11) {
+      var x = _ref11.data.x;
       return xScaler(x);
-    }).y(function (_ref13) {
-      var y = _ref13.data.y;
+    }).y(function (_ref12) {
+      var y = _ref12.data.y;
       return yScaler(y);
     })).defined(defined);
     curve && lineGen.curve(_d3v.curveCatmullRom.alpha(tension));

package/lib/hooks/useAxes.js

@@ -125,6 +125,7 @@ var _default = function _default(_ref) {
           type = item.type,
           orientation = item.orientation,
           ticks = item.ticks,
+          reverse = item.reverse,
           _item$tickCount = item.tickCount,
           count = _item$tickCount === void 0 ? 1 : _item$tickCount,
           _item$step = item.step,
@@ -331,6 +332,7 @@ var _default = function _default(_ref) {
             _length = _getChartsConfig2.length;
 
         var range = _direction === "horizontal" ? [_start, _end] : _direction === "vertical" ? [_end, _start] : [0, 0];
+        if (reverse) range = [range[1], range[0]];
         var newDomain = domain;
         var fixedDomain = extent && extent.min != "" && extent.max != ""; //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
 

package/lib/hooks/useStackData.js

@@ -55,31 +55,34 @@ var setStackData = function setStackData(data, series, stacks) {
       var d = value[i];
       var currentSeries = series.get(d.s);
 
-      if (d && d.y !== undefined && !isNaN(d.y)) {
+      if (currentSeries) {
+        var type = currentSeries.type;
         var currentStack = (0, _utils.getCurrentStack)(currentSeries, stacks);
 
-        if (currentSeries && currentStack) {
-          if (d.y >= 0) {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.positive, currentStack.positive + d.y]
-            });
-            currentStack.positive += d.y;
+        if (d && d.y !== undefined && (type != "band" || type == "band" && !isNaN(d.y))) {
+          if (currentStack) {
+            if (d.y >= 0) {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.positive, currentStack.positive + d.y]
+              });
+              currentStack.positive += d.y;
+            } else {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.negative, currentStack.negative + d.y]
+              });
+              currentStack.negative += d.y;
+            }
           } else {
             currentSeries.data.push({
               data: d,
-              index: currentStack.index,
-              bound: [currentStack.negative, currentStack.negative + d.y]
+              bound: [0, d.y],
+              index: 0
             });
-            currentStack.negative += d.y;
           }
-        } else {
-          currentSeries.data.push({
-            data: d,
-            bound: [0, d.y],
-            index: 0
-          });
         }
       }
     }

package/package.json

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

package/src/components/Axis.tsx

@@ -184,6 +184,7 @@ type LabelType = {
     show: boolean;
     translate: Translate;
     font: Font;
+    textAlign: TextAlign;
     style: CSSProperties | Function;
     appearance?: appearance;
   };
@@ -206,6 +207,7 @@ const Label: (
     style,
     translate: { x: translateX, y: translateY },
     font,
+    textAlign = "center",
     appearance: { width, speed, textOverflow } = defaultAppearance,
   },
 }) => {
@@ -245,8 +247,8 @@ const Label: (
           style={{
             width,
             transform,
-            textAlign: "center",
-            justifyContent: "center",
+            textAlign,
+            justifyContent: textAlign=="left"?"flex-start":textAlign=="right"?"flex-end":"center",
           }}
         ></TextOverflow>
       </div>

package/src/components/Band.tsx

@@ -88,7 +88,7 @@ export default memo(
     bandLength = 0,
     data,
     xAxis: { scaler: normalScaler, step:normalStep, controlStep, direction, controlDragScaler },
-    yAxis: { scaler: yScaler, isClipAxis, clipValue },
+    yAxis: { scaler: yScaler, isClipAxis, clipValue, reverse },
   }: any) => {
     if (!data.length) return null;
     const step = isControlChart?controlStep:normalStep;
@@ -99,7 +99,6 @@ export default memo(
       paddingInner,
       paddingOuter,
     });
-
     const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
     const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
@@ -155,7 +154,9 @@ export default memo(
               }
             };
             if (isNaN(positionX)) return null;
-            const positionY = y < 0 ? y1 : y2;
+            const positionY = reverse? 
+              y > 0 ? y1 : y2:
+              y < 0 ? y1 : y2;
             const attr = getAttr({
               isVertical,
               x: positionX,

package/src/components/Chart.js

@@ -90,8 +90,6 @@ const Chart = memo(
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
 
-    
-
     useEffect(()=>{
       const activeHandler=(e)=>{
         const { dynamicData = true } = e;
@@ -104,7 +102,6 @@ const Chart = memo(
       }
     },[]);
     
-
     //对轴类图表进行
     let data = originData;
     if(axes){

package/src/components/Line.js

@@ -7,13 +7,17 @@ import { getColorList } from '../utils';
 import { Lighter, LinearGradient } from '.';
 
 const defined = (d) => d.data.y != null;
-const getLineData = (data, connectNulls) =>
-  connectNulls
-    ? data.map(({ data, ...item }) => ({
-      ...item,
-      data: { ...data, y: +data.y },
-    }))
-    : data;
+const getLineData = (data, connectNulls) =>{
+  return data.flatMap(d=>{
+    const y = d.data.y;
+    return isNaN(y)?
+      connectNulls?
+        []:
+        {...d,data:{...d.data,y:null}}:
+      d
+  });
+}
+  
 
 const Area = ({
   data,
@@ -38,7 +42,6 @@ const Area = ({
     const areaGen = d3Area()
       .x(({ data: { x } }) => xScaler(x))
       .y1(({ data: { y } }) => yScaler(y))
-      // .y0(height)
       .y0(({})=>yScaler(0))
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
@@ -86,7 +89,7 @@ export default memo(
   }) => {
     if (!data.length) return null;
     const ticks = xScaler.domain();
-
+    
     const sortData = useMemo(() => {
       const usefulData = data.filter(
         ({ data: { x } }) => ticks.indexOf(x) > -1
@@ -96,12 +99,11 @@ export default memo(
           ticks.indexOf(a) - ticks.indexOf(b)
       );
     }, [data, ticks]);
-
+    
     const _data = useMemo(
       () => getLineData(sortData, connectNulls),
       [sortData, connectNulls]
     );
-
     const lineGen = useMemo(() => {
       const isVertical = direction === 'vertical';
 

package/src/components/TextOverflow.tsx

@@ -10,7 +10,7 @@ interface flowText{
   value:string,
   speed:number,
   style:CSSProperties,
-  config:any
+  config?:any
 }
 
 export default memo(forwardRef((props:flowText, ref:any) => {

package/src/hooks/useAxes.js

@@ -87,6 +87,7 @@ export default ({
         type,
         orientation,
         ticks,
+        reverse,
         tickCount: count = 1,
         step = 1,
         domain,
@@ -332,13 +333,13 @@ export default ({
         //计算真正需要的tickCount，如果domain区间太小，不能完全按照count来，需要减少count数
         const tickCount = type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
         const { start, end, direction, _paddingOuter, length } = getChartsConfig(orientation, width, height, paddingOuter);
-
         let range =
           direction === "horizontal"
             ? [start, end]
             : direction === "vertical"
             ? [end, start]
             : [0, 0];
+        if(reverse)range = [range[1],range[0]];
         let newDomain = domain;
         const fixedDomain = extent && extent.min!="" && extent.max!="";   //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
         if (type !== "ordinal" && !isNaN(domain[1]) && !auto && !fixedDomain) {

package/src/hooks/useStackData.js

@@ -27,38 +27,41 @@ const resetStackData = (series) => {
 
 const setStackData = (data, series, stacks) => {
   const dataMap = group(data, (d) => d.x);
-
   dataMap.forEach((value) => {
     resetStacks(stacks);
     for (let i = 0, j = value.length; i < j; i++) {
       const d = value[i];
       const currentSeries = series.get(d.s);
-      if (d && d.y !== undefined && !isNaN(d.y)) {
+      if(currentSeries){
+        const type = currentSeries.type;
         const currentStack = getCurrentStack(currentSeries, stacks);
-        if (currentSeries && currentStack) {
-          if (d.y >= 0) {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.positive, currentStack.positive + d.y],
-            });
-            currentStack.positive += d.y;
+        if (d && d.y !== undefined && (type!="band" || type=="band" && !isNaN(d.y))) {
+          if (currentStack) {
+            if (d.y >= 0) {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.positive, currentStack.positive + d.y],
+              });
+              currentStack.positive += d.y;
+            } else {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.negative, currentStack.negative + d.y],
+              });
+              currentStack.negative += d.y;
+            }
           } else {
             currentSeries.data.push({
               data: d,
-              index: currentStack.index,
-              bound: [currentStack.negative, currentStack.negative + d.y],
+              bound: [0, d.y],
+              index: 0,
             });
-            currentStack.negative += d.y;
           }
-        } else {
-          currentSeries.data.push({
-            data: d,
-            bound: [0, d.y],
-            index: 0,
-          });
         }
       }
+      
     }
   });
   dataMap.clear();
@@ -80,7 +83,6 @@ export default ({ data, series }) => {
   }, [series]);
 
   const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
-
   const tmp = useMemo(() => {
     const { y: dataY, z: dataZ } = _data;
     const {
@@ -91,7 +93,6 @@ export default ({ data, series }) => {
     resetStackData(seriesZ);
     setStackData(dataY, seriesY, stacks);
     setStackData(dataZ, seriesZ, stacks);
-
     return {
       bandLength: stacks.filter((item) => item.type == 'band').length,
       series: [...seriesY.values(), ...seriesZ.values()],

package/src/types/index.d.ts

@@ -36,6 +36,7 @@ type ChartLine = {
 };
 
 type Orientation = 'top' | 'bottom' | 'left' | 'right';
+type TextAlign = "left" | "center" | "right" | "justify";
 
 type Translate = {
   x: number;