@easyv/charts 1.7.36 → 1.7.37

package/lib/formatter/legend.js

@@ -11,54 +11,60 @@ var _utils = require("../utils");
 var _components = require("../components");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
-  var displayName = _ref.displayName,
-    data = _ref.data,
-    percent = _ref.percent,
-    _ref$series = _ref.series,
-    seriesColor = _ref$series.color,
-    _ref$series$icon = _ref$series.icon,
-    icon = _ref$series$icon === void 0 ? "" : _ref$series$icon;
-  var _ref2$name = _ref2.name,
-    showName = _ref2$name.show,
-    nameFont = _ref2$name.font,
-    textOverflow = _ref2$name.textOverflow,
-    speed = _ref2$name.speed,
-    maxWidth = _ref2$name.maxWidth,
-    _ref2$name$translate = _ref2$name.translate,
-    nameX = _ref2$name$translate.x,
-    nameY = _ref2$name$translate.y,
-    _ref2$value = _ref2.value,
-    showValue = _ref2$value.show,
-    valueFont = _ref2$value.font,
-    valueSameColor = _ref2$value.sameColor,
-    valueGap = _ref2$value.gap,
-    valueAlign = _ref2$value.align,
-    _ref2$value$translate = _ref2$value.translate,
-    valueX = _ref2$value$translate.x,
-    valueY = _ref2$value$translate.y,
-    splitConfig = _ref2$value.splitConfig,
-    _ref2$value$suffix = _ref2$value.suffix,
-    showSuffix = _ref2$value$suffix.show,
-    text = _ref2$value$suffix.text,
-    fontSize = _ref2$value$suffix.fontSize,
-    _ref2$value$suffix$tr = _ref2$value$suffix.translate,
-    x = _ref2$value$suffix$tr.x,
-    y = _ref2$value$suffix$tr.y,
-    _ref2$percent = _ref2.percent,
-    showPercent = _ref2$percent.show,
-    percentFont = _ref2$percent.font,
-    percentSameColor = _ref2$percent.sameColor,
-    percentGap = _ref2$percent.gap,
-    percentAlign = _ref2$percent.align,
-    _ref2$percent$transla = _ref2$percent.translate,
-    percentX = _ref2$percent$transla.x,
-    percentY = _ref2$percent$transla.y;
+var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatter(series, props) {
+  var displayName = series.displayName,
+    data = series.data,
+    percent = series.percent,
+    _series$series = series.series,
+    seriesColor = _series$series.color,
+    _series$series$icon = _series$series.icon,
+    icon = _series$series$icon === void 0 ? "" : _series$series$icon,
+    _props$name = props.name,
+    showName = _props$name.show,
+    nameFont = _props$name.font,
+    textOverflow = _props$name.textOverflow,
+    speed = _props$name.speed,
+    maxWidth = _props$name.maxWidth,
+    _props$name$translate = _props$name.translate,
+    nameX = _props$name$translate.x,
+    nameY = _props$name$translate.y,
+    _props$value = props.value,
+    showValue = _props$value.show,
+    valueFont = _props$value.font,
+    valueSameColor = _props$value.sameColor,
+    valueGap = _props$value.gap,
+    valueAlign = _props$value.align,
+    _props$value$translat = _props$value.translate,
+    valueX = _props$value$translat.x,
+    valueY = _props$value$translat.y,
+    splitConfig = _props$value.splitConfig,
+    _props$value$suffix = _props$value.suffix,
+    showSuffix = _props$value$suffix.show,
+    text = _props$value$suffix.text,
+    fontSize = _props$value$suffix.fontSize,
+    _props$value$suffix$t = _props$value$suffix.translate,
+    x = _props$value$suffix$t.x,
+    y = _props$value$suffix$t.y,
+    _props$percent = props.percent,
+    showPercent = _props$percent.show,
+    percentFont = _props$percent.font,
+    percentSameColor = _props$percent.sameColor,
+    percentGap = _props$percent.gap,
+    percentAlign = _props$percent.align,
+    _props$percent$transl = _props$percent.translate,
+    percentX = _props$percent$transl.x,
+    percentY = _props$percent$transl.y;
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
   var _color = seriesColorType == 'pure' ? pure : stops[0].color;
   var textMarginLeft = 5;
+
+  // 1. 计算每列宽度（加上间距）
+  var columns = [];
+  if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
+  if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
+  if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -67,7 +73,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   }), /*#__PURE__*/React.createElement("div", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
-      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )")
+      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
+      gridTemplateColumns: columns.join(' ')
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -85,11 +92,10 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
-      display: 'flex',
-      flex: 1,
       color: valueSameColor ? _color : valueFont.color,
       alignItems: 'center',
-      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center'
+      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center',
+      textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center"
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,
@@ -106,11 +112,10 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
-      display: "flex",
-      flex: 1,
+      color: percentSameColor ? _color : percentFont.color,
       alignItems: 'center',
       justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : 'center',
-      color: percentSameColor ? _color : percentFont.color
+      textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center"
     })
   }, percent + '%')));
 };

package/lib/hooks/useAnimateData.js

@@ -11,12 +11,12 @@ var _react = require("react");
 var _popmotion = require("popmotion");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * 图表数据动画
- * @param {Array} data data列表
- * @param {boolean} dataAnimation 是否开启数据增长动画
- * @param {boolean} active 是否处于活跃状态，false为休眠
- * @returns 改变后的数据
+/**
+ * 图表数据动画
+ * @param {Array} data data列表
+ * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @param {boolean} active 是否处于活跃状态，false为休眠
+ * @returns 改变后的数据
  */
 var _default = exports["default"] = function _default(data, dataAnimation, active) {
   var _useState = (0, _react.useState)([]),

package/lib/hooks/useFilterData.js

@@ -42,11 +42,11 @@ var getSelected = function getSelected(selected, name) {
   return tmp;
 };
 
-/**
- * 图例点击状态管理
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
+/**
+ * 图例点击状态管理
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
  */
 var _default = exports["default"] = function _default(_ref) {
   var data = _ref.data,

package/lib/hooks/useStackData.js

@@ -109,11 +109,11 @@ var mergeDataAndSeries = function mergeDataAndSeries(data, _series) {
     });
   });
 };
-/**
- * 计算堆叠数据
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
+/**
+ * 计算堆叠数据
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
  */
 var _default = exports["default"] = function _default(_ref2) {
   var data = _ref2.data,

package/lib/hooks/useTooltip.js

@@ -10,17 +10,17 @@ var _react = require("react");
 var _utils = require("../utils");
 var callback = function callback() {};
 
-/**
- * 主要用于轴类图表，返回当前选中的是哪一个x
- * @param {Array} svg svg的dom实例
- * @param {Number} marginLeft 左间距
- * @param {Number} marginTop 上间距
- * @param {Number} width 宽
- * @param {Number} height 高
- * @param {Number} axisX 类目轴
- * @param {Object} config 轮播动画参数
- * @param {Boolean} active 组件是否处于活跃状态
- * @returns {Object} 返回被选中的名称，坐标，选中方法
+/**
+ * 主要用于轴类图表，返回当前选中的是哪一个x
+ * @param {Array} svg svg的dom实例
+ * @param {Number} marginLeft 左间距
+ * @param {Number} marginTop 上间距
+ * @param {Number} width 宽
+ * @param {Number} height 高
+ * @param {Number} axisX 类目轴
+ * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
+ * @returns {Object} 返回被选中的名称，坐标，选中方法
  */
 var _default = exports["default"] = function _default(_ref) {
   var svg = _ref.svg,

package/package.json

@@ -1,55 +1,55 @@
-{
-  "name": "@easyv/charts",
-  "version": "1.7.36",
-  "description": "",
-  "main": "lib/index.js",
-  "scripts": {
-    "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
-    "prepare": "husky install"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.26.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.10",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^16.2.4",
-    "@types/d3": "^7.0.0",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
-    "babel-plugin-transform-import-styles": "^0.0.11",
-    "babel-preset-env": "^1.7.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "husky": "^7.0.4",
-    "load-styles": "^2.0.0",
-    "standard-version": "^9.3.2"
-  },
-  "dependencies": {
-    "@easyv/utils": "^0.0.50",
-    "d3v7": "npm:d3@^7.0.0",
-    "gitignore": "^0.7.0",
-    "mrm": "^4.0.0",
-    "popmotion": "^9.3.6",
-    "react": "^17.0.2",
-    "svg-path-properties": "^1.0.11",
-    "svg-points": "^6.0.1",
-    "yarn": "^1.22.19"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "standard-version": {
-    "skip": {
-      "commit": true
-    }
-  }
+{
+  "name": "@easyv/charts",
+  "version": "1.7.37",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
+    "prepare": "husky install"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.10",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@types/d3": "^7.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "babel-plugin-transform-import-styles": "^0.0.11",
+    "babel-preset-env": "^1.7.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "husky": "^7.0.4",
+    "load-styles": "^2.0.0",
+    "standard-version": "^9.3.2"
+  },
+  "dependencies": {
+    "@easyv/utils": "^0.0.50",
+    "d3v7": "npm:d3@^7.0.0",
+    "gitignore": "^0.7.0",
+    "mrm": "^4.0.0",
+    "popmotion": "^9.3.6",
+    "react": "^17.0.2",
+    "svg-path-properties": "^1.0.11",
+    "svg-points": "^6.0.1",
+    "yarn": "^1.22.19"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "standard-version": {
+    "skip": {
+      "commit": true
+    }
+  }
 }

package/src/components/Background.tsx

@@ -1,61 +1,61 @@
-/**
- * 轴类图背景
- */
-import React from 'react';
-import { getSeriesInfo } from '../utils';
-
-export default ({
-  axis: { ticks, scaler, step, direction },
-  bandLength,
-  config: {
-    background,
-    seriesIntervalWidth: paddingInner,
-    paddingInner: paddingOuter,
-  },
-  length,
-}: {
-  axis: {
-    ticks: Array<string>;
-    scaler: Function;
-    step: number;
-    direction: string;
-  };
-  bandLength: number;
-  config: {
-    background: string;
-    seriesIntervalWidth: number;
-    paddingInner: number;
-  };
-  length: number;
-}) => {
-  const isVertical: boolean = direction === 'vertical';
-
-  const { width: bandwidth } = getSeriesInfo({
-    step,
-    bandLength,
-    paddingInner,
-    paddingOuter,
-  });
-
-  const size = isVertical
-    ? {
-        width: length,
-        height: bandwidth,
-      }
-    : {
-        width: bandwidth,
-        height: length,
-      };
-  return ticks.map((tick, index: number) => {
-    return (
-      <rect
-        key={index}
-        {...size}
-        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
-        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
-        fill={background}
-        stroke='none'
-      />
-    );
-  });
-};
+/**
+ * 轴类图背景
+ */
+import React from 'react';
+import { getSeriesInfo } from '../utils';
+
+export default ({
+  axis: { ticks, scaler, step, direction },
+  bandLength,
+  config: {
+    background,
+    seriesIntervalWidth: paddingInner,
+    paddingInner: paddingOuter,
+  },
+  length,
+}: {
+  axis: {
+    ticks: Array<string>;
+    scaler: Function;
+    step: number;
+    direction: string;
+  };
+  bandLength: number;
+  config: {
+    background: string;
+    seriesIntervalWidth: number;
+    paddingInner: number;
+  };
+  length: number;
+}) => {
+  const isVertical: boolean = direction === 'vertical';
+
+  const { width: bandwidth } = getSeriesInfo({
+    step,
+    bandLength,
+    paddingInner,
+    paddingOuter,
+  });
+
+  const size = isVertical
+    ? {
+        width: length,
+        height: bandwidth,
+      }
+    : {
+        width: bandwidth,
+        height: length,
+      };
+  return ticks.map((tick, index: number) => {
+    return (
+      <rect
+        key={index}
+        {...size}
+        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
+        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
+        fill={background}
+        stroke='none'
+      />
+    );
+  });
+};