@easyv/charts 1.10.21 → 1.10.23

package/lib/components/StereoBar.js

@@ -109,8 +109,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStart = _getSeriesInfo.seriesStart;
   var _data = showHighlight ? getHighlightData(data, extent) : data;
   var isVertical = direction === "vertical";
-  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + name);
-  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + name);
+  var highlightColor = parseMultiColorToSVG((0, _utils.reverseGradientStops)(highlightFill), "highlight_gradient_" + id + "_" + name);
+  var color = parseMultiColorToSVG((0, _utils.reverseGradientStops)(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/utils/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SvgBackground = void 0;
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.reverseGradientStops = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _utils = require("@easyv/utils");
 var _utils2 = require("@easyv/utils/lib/common/utils");
 var _d3v = require("d3v7");
@@ -193,19 +193,43 @@ var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colo
     return result.slice(0, -1) + ")";
   }
 };
+var reverseLinearGradient = function reverseLinearGradient(background) {
+  if (!background || typeof background !== "string") {
+    return background;
+  }
+  var match = background.match(/^linear-gradient\(\s*(-?\d*\.?\d+)(deg|turn|grad|rad)\s*,\s*(.+)\)$/i);
+  if (!match) {
+    return background;
+  }
+  var _match = (0, _slicedToArray2["default"])(match, 4),
+    angleStr = _match[1],
+    unit = _match[2],
+    stops = _match[3];
+  var newAngle = (parseFloat(angleStr) + 180) % 360;
+  return "linear-gradient(".concat(newAngle).concat(unit, ", ").concat(stops, ")");
+};
+var getReversedIconBackground = function getReversedIconBackground(background) {
+  if (!background || typeof background !== "string" || !background.includes("linear-gradient")) {
+    return background;
+  }
+  return reverseLinearGradient(background);
+};
 var getIcon = exports.getIcon = function getIcon(type, icon) {
   var lineType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "solid";
   switch (type) {
     case "area":
     case "line":
-      var color = icon.background;
-      return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultLineIcon), icon), {}, {
-        minWidth: icon.width,
-        background: lineType == "solid" ? color : "linear-gradient(90deg, ".concat(color, ", ").concat(color, " 66%, transparent 66%) 0 0/33% 100% repeat")
-      }) : defaultLineIcon;
+      {
+        var color = icon.background;
+        return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultLineIcon), icon), {}, {
+          minWidth: icon.width,
+          background: lineType == "solid" ? color : "linear-gradient(90deg, ".concat(color, ", ").concat(color, " 66%, transparent 66%) 0 0/33% 100% repeat")
+        }) : defaultLineIcon;
+      }
     default:
       return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultIcon), icon), {}, {
-        minWidth: icon.width
+        minWidth: icon.width,
+        background: getReversedIconBackground(icon.background)
       }) : defaultIcon;
   }
 };
@@ -607,7 +631,7 @@ var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack,
     return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
   });
 };
-var reverseGradientStops = function reverseGradientStops(gradient) {
+var reverseGradientStops = exports.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;
@@ -637,7 +661,7 @@ var reverseGradientStops = function reverseGradientStops(gradient) {
 };
 var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill, y) {
   if (!(pattern && pattern.path)) {
-    return (0, _utils.getColor)(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
+    return (0, _utils.getColor)(y > 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
   }
   try {
     var _pattern$backgroundSi = pattern.backgroundSize,

package/package.json

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

package/src/components/Legend.js

@@ -234,7 +234,10 @@ export default memo(
     const fullWidth = componentWidth ?? chartWidth ?? 0;
     // Adaptive+上下：组件总宽；Adaptive+左右：仅 maxWidth = 总宽 − 左右 chart.margin，宽度由内容撑开
     const pieLegendFullWidth = Math.max(0, fullWidth);
-    const pieLegendInnerWidth = Math.max(0, fullWidth - marginLeft - marginRight);
+    const pieLegendInnerWidth = Math.max(
+      0,
+      fullWidth - marginLeft - marginRight,
+    );
     const sideLegendMaxWidth = isSideLegend ? pieLegendInnerWidth : 0;
     const fixedColumnsPerRow = Math.min(
       Math.max(1, Number(gridTemplateColumns) || 1),
@@ -272,8 +275,7 @@ export default memo(
         parseFloat(_icon.minWidth) ||
         parseFloat(icon?.width) ||
         0;
-      const sideItemGap =
-        Number(iconGap) || parseFloat(_icon.marginRight) || 0;
+      const sideItemGap = Number(iconGap) || parseFloat(_icon.marginRight) || 0;
       const sideTextMaxWidth =
         sideLegendMaxWidth > 0
           ? Math.max(0, sideLegendMaxWidth - sideIconWidth - sideItemGap)

package/src/components/StereoBar.tsx

@@ -3,7 +3,7 @@
  */
 import React, { memo } from "react";
 import { min, max } from "d3v7";
-import { getSeriesInfo } from "../utils";
+import { getSeriesInfo, reverseGradientStops } from "../utils";
 
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
@@ -78,8 +78,8 @@ const getBorderRadius = ({
       ? "0px " + seriesWidth + "px " + seriesWidth + "px 0"
       : seriesWidth + "px 0 0 " + seriesWidth + "px"
     : positive
-    ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
-    : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
+      ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
+      : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 
 export default memo(
@@ -115,10 +115,13 @@ export default memo(
     const isVertical = direction === "vertical";
 
     const highlightColor = parseMultiColorToSVG(
-      highlightFill,
-      "highlight_gradient_" + id + "_" + name
+      reverseGradientStops(highlightFill),
+      "highlight_gradient_" + id + "_" + name,
+    );
+    const color = parseMultiColorToSVG(
+      reverseGradientStops(fill),
+      "gradient_" + id + "_" + name,
     );
-    const color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + name);
     return (
       <g className="__easyv-band">
         <defs>
@@ -148,7 +151,7 @@ export default memo(
               data,
               data: { x, y, s },
             }: DataWithBoundType,
-            i: number
+            i: number,
           ) => {
             const y1 = yScaler(isVertical ? end : start);
             const y2 = yScaler(isVertical ? start : end);
@@ -179,11 +182,11 @@ export default memo(
                 />
               </g>
             );
-          }
+          },
         )}
       </g>
     );
-  }
+  },
 );
 
 const Column3DSkin = function (props: any) {
@@ -301,7 +304,7 @@ function parseMultiColorToSVG(config: any, id: any) {
             stopColor: e.color,
             stopOpacity: opacity,
           });
-        })
+        }),
       ),
       firstColor: getTopColor(_stops, angle),
     };

package/src/utils/index.js

@@ -158,10 +158,36 @@ const getMultiColorStr = (colors) => {
   }
 };
 
+const reverseLinearGradient = (background) => {
+  if (!background || typeof background !== "string") {
+    return background;
+  }
+  const match = background.match(
+    /^linear-gradient\(\s*(-?\d*\.?\d+)(deg|turn|grad|rad)\s*,\s*(.+)\)$/i,
+  );
+  if (!match) {
+    return background;
+  }
+  const [, angleStr, unit, stops] = match;
+  const newAngle = (parseFloat(angleStr) + 180) % 360;
+  return `linear-gradient(${newAngle}${unit}, ${stops})`;
+};
+
+const getReversedIconBackground = (background) => {
+  if (
+    !background ||
+    typeof background !== "string" ||
+    !background.includes("linear-gradient")
+  ) {
+    return background;
+  }
+  return reverseLinearGradient(background);
+};
+
 const getIcon = (type, icon, lineType = "solid") => {
   switch (type) {
     case "area":
-    case "line":
+    case "line": {
       let color = icon.background;
       return icon
         ? {
@@ -174,12 +200,14 @@ const getIcon = (type, icon, lineType = "solid") => {
                 : `linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`,
           }
         : defaultLineIcon;
+    }
     default:
       return icon
         ? {
             ...defaultIcon,
             ...icon,
             minWidth: icon.width,
+            background: getReversedIconBackground(icon.background),
           }
         : defaultIcon;
   }
@@ -621,7 +649,7 @@ const reverseGradientStops = (gradient) => {
 };
 const getBandBackground = (pattern, fill, y) => {
   if (!(pattern && pattern.path)) {
-    return getColor(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
+    return getColor(y > 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
   }
   try {
     const { backgroundSize = "100% 100%", ..._pattern } = pattern;
@@ -905,4 +933,5 @@ export {
   mathR,
   renderCanvasBackground, // 导出 Canvas 绘制方法
   SvgBackground,
+  reverseGradientStops,
 };