@easyv/charts 1.5.5 → 1.5.7

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/StereoBar.js

@@ -109,7 +109,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       step = _ref3$xAxis.step,
       direction = _ref3$xAxis.direction,
       yScaler = _ref3.yAxis.scaler,
-      fieldName = _ref3.fieldName;
+      name = _ref3.name;
   if (!data.length) return null;
 
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
@@ -125,8 +125,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   var _data = showHighlight ? getHighlightData(data, extent) : data;
 
   var isVertical = direction === 'vertical';
-  var highlightColor = parseMultiColorToSVG(highlightFill, 'highlight_gradient_' + id + '_' + fieldName);
-  var color = parseMultiColorToSVG(fill, 'gradient_' + id + '_' + fieldName);
+  var highlightColor = parseMultiColorToSVG(highlightFill, 'highlight_gradient_' + id + '_' + name);
+  var color = parseMultiColorToSVG(fill, 'gradient_' + id + '_' + name);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "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/StereoBar.tsx

@@ -80,10 +80,9 @@ export default memo(
     data,
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler },
-    fieldName,
+    name
   }: any) => {
     if (!data.length) return null;
-
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
       step,
       bandLength,
@@ -96,11 +95,11 @@ export default memo(
 
     const highlightColor = parseMultiColorToSVG(
       highlightFill,
-      'highlight_gradient_' + id + '_' + fieldName
+      'highlight_gradient_' + id + '_' + name
     );
     const color = parseMultiColorToSVG(
       fill,
-      'gradient_' + id + '_' + fieldName
+      'gradient_' + id + '_' + name
     );
     return (
       <g className='__easyv-band'>

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/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;