@easyv/charts 1.8.9 → 1.8.11

package/lib/components/Band.js

@@ -13,8 +13,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _d3v = require("d3v7");
 var _utils = require("../utils");
-var _excluded = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
-  _excluded2 = ["bgAttr"];
+var _excluded = ["show", "extent"],
+  _excluded2 = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
+  _excluded3 = ["bgAttr"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -103,8 +104,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref3$config$highligh = _ref3$config.highlight,
     showHighlight = _ref3$config$highligh.show,
     extent = _ref3$config$highligh.extent,
-    highlightFill = _ref3$config$highligh.fill,
-    other = (0, _objectWithoutProperties2["default"])(_ref3$config, _excluded),
+    highlightStyle = (0, _objectWithoutProperties2["default"])(_ref3$config$highligh, _excluded),
+    other = (0, _objectWithoutProperties2["default"])(_ref3$config, _excluded2),
     curXLabel = _ref3.curXLabel,
     selectStyle = _ref3.selectStyle,
     _ref3$bandLength = _ref3.bandLength,
@@ -136,6 +137,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       });
     }
   }
+  var highlightConfig = other;
+  if (highlightStyle) {
+    highlightConfig = _objectSpread(_objectSpread({}, other), highlightStyle);
+  }
   var step = isControlChart ? controlStep : normalStep;
   var xScaler = isControlChart ? controlDragScaler : normalScaler;
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
@@ -176,7 +181,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       y1 = yScaler(isVertical ? end : start);
       y2 = yScaler(isVertical ? start : end);
     }
-    var _ref5 = x == curXLabel ? selectConfig : other,
+    var _ref5 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
       style = _ref5.style,
       fillType = _ref5.fillType,
       _ref5$fillMode = _ref5.fillMode,
@@ -227,7 +232,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         seriesWidth: seriesWidth
       }),
       bgAttr = _getAttr.bgAttr,
-      attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded2);
+      attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded3);
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: i
     }, /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
@@ -295,8 +300,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
         width: headWidth,
         height: headHeight,
-        left: isVertical ? "100%" : "50%",
-        top: isVertical ? "50%" : "0",
+        left: isVertical ? y < 0 ? "0%" : "100%" : "50%",
+        top: isVertical ? "50%" : y < 0 ? "100%" : "0%",
         zIndex: 1,
         transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
       }
@@ -328,7 +333,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         opacity: fillType == "pattern" ? opacity : 1,
         background: fillType == "pattern" ? "".concat(isVertical ? y < 0 ? "100%" : "0%" : "50%", " ").concat(isVertical ? "50%" : y < 0 ? "0%" : "100%", " / ").concat(fillMode == "tile" ? size.width + "px " + size.height + "px" : "100% 100%", " repeat ") + "url(" +
         //@ts-ignore
-        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
+        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, fill, y //是否小于0
+        ),
         borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
           isVertical: isVertical,
           positive: y > 0,

package/lib/utils/index.js

@@ -531,8 +531,38 @@ var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack,
     return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
   });
 };
-var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill) {
-  if (!(pattern && pattern.path)) return (0, _utils.getColor)(fill);
+var reverseGradientStops = function reverseGradientStops(gradient) {
+  var _gradient$linear;
+  if (gradient.type !== 'linear' || !((_gradient$linear = gradient.linear) !== null && _gradient$linear !== void 0 && _gradient$linear.stops)) {
+    return gradient;
+  }
+  var stops = gradient.linear.stops;
+  //先按 offset 排序（升序），确保输入是规范的
+  var sortedStops = (0, _toConsumableArray2["default"])(stops).sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+
+  // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
+  // 颜色保持不变，只是位置镜像翻转
+  var reversedStops = sortedStops.map(function (stop) {
+    return _objectSpread(_objectSpread({}, stop), {}, {
+      offset: 100 - stop.offset
+    });
+  });
+  //再按新的 offset 升序排序，确保输出结构正确
+  var finalStops = reversedStops.sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+  return _objectSpread(_objectSpread({}, gradient), {}, {
+    linear: _objectSpread(_objectSpread({}, gradient.linear), {}, {
+      stops: finalStops
+    })
+  });
+};
+var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill, y) {
+  if (!(pattern && pattern.path)) {
+    return (0, _utils.getColor)(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
+  }
   try {
     var _pattern$backgroundSi = pattern.backgroundSize,
       backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,

package/package.json

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

package/src/components/Band.tsx

@@ -92,7 +92,7 @@ export default memo(
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
-      highlight: { show: showHighlight, extent, fill: highlightFill },
+      highlight: { show: showHighlight, extent, ...highlightStyle },
       ...other
     },
     curXLabel,
@@ -111,6 +111,10 @@ export default memo(
         selectConfig = { ...barStyle, headDecorate };
       }
     }
+    let highlightConfig = other;
+    if(highlightStyle){
+      highlightConfig = { ...other, ...highlightStyle };
+    }
     const step = isControlChart?controlStep:normalStep;
     const xScaler = isControlChart?controlDragScaler:normalScaler;
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
@@ -159,7 +163,7 @@ export default memo(
               border,
               opacity,
               headDecorate
-            } = x==curXLabel?selectConfig:other;
+            } = x==curXLabel?selectConfig:flag?highlightConfig:other;
             const { borderColor:{
               type="pure", pure="transparent", linear
             }, borderWidth=0 } = border || {};
@@ -254,8 +258,8 @@ export default memo(
                         }) 0 0/100% 100%`,
                         width: headWidth,
                         height: headHeight,
-                        left: isVertical ? "100%" : "50%",
-                        top: isVertical ? "50%" : "0",
+                        left: isVertical ? (y<0?"0%":"100%") : "50%",
+                        top: isVertical ? "50%" :(y<0?"100%":"0%"),
                         zIndex: 1,
                         transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
                       }}
@@ -293,7 +297,8 @@ export default memo(
                             ")"
                           : getBandBackground(
                               pattern,
-                              extent === flag ? highlightFill : fill
+                              fill,
+                              y//是否小于0
                             ),
                       borderRadius:
                         style == "square"

package/src/utils/index.js

@@ -513,9 +513,35 @@ const getCurrentStack = (stack, stackMap) =>
       _yOrZ == stack.yOrZ &&
       _s.includes(stack.name)
   );
-
-const getBandBackground = (pattern, fill) => {
-  if (!(pattern && pattern.path)) return getColor(fill);
+  const reverseGradientStops=(gradient)=>{
+    if (gradient.type !== 'linear' || !gradient.linear?.stops) {
+      return gradient;
+    }
+    const stops = gradient.linear.stops;
+    //先按 offset 排序（升序），确保输入是规范的
+    const sortedStops = [...stops].sort((a, b) => a.offset - b.offset);
+  
+    // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
+    // 颜色保持不变，只是位置镜像翻转
+    const reversedStops = sortedStops.map(stop => ({
+      ...stop,
+      offset: 100 - stop.offset
+    }));
+    //再按新的 offset 升序排序，确保输出结构正确
+    const finalStops = reversedStops.sort((a, b) => a.offset - b.offset);
+  
+    return {
+      ...gradient,
+      linear: {
+        ...gradient.linear,
+        stops: finalStops
+      }
+    };
+  }
+const getBandBackground = (pattern, fill,y) => {
+  if (!(pattern && pattern.path)){
+    return getColor(y<0?reverseGradientStops(fill):fill);//小于0颜色翻转
+  }
   try{
     const { backgroundSize = '100% 100%', ..._pattern } = pattern;
     return (