@easyv/charts 1.9.28 → 1.10.1

package/lib/components/Axis.js

@@ -34,8 +34,8 @@ var getCanvasContext = function getCanvasContext() {
   return canvasContext;
 };
 
-//计算文本宽度的函数
-var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidth(text, fontConfig) {
+//计算文本宽度/高度的函数
+var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidth(text, fontConfig, isVertical) {
   if (!text) return 0;
   var ctx = getCanvasContext();
   ctx.save();
@@ -47,16 +47,19 @@ var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidt
   var letterSpacingWithUnit = "".concat(letterSpacing, "px");
   ctx.font = "".concat(fontWeight, " ").concat(fontStyle, " ").concat(fontSize, " ").concat(fontFamily);
   ctx.letterSpacing = letterSpacingWithUnit;
-  var totalWidth;
+  var totalWidth = 0;
+  var totalHeight = 0;
+  var textMetrics = ctx.measureText(text);
   if (typeof ctx.letterSpacing !== "undefined") {
-    totalWidth = ctx.measureText(text).width;
+    totalWidth = textMetrics.width;
   } else {
-    var baseWidth = ctx.measureText(text).width;
-    var spacingWidth = text.length * letterSpacing;
+    var baseWidth = textMetrics.width;
+    var spacingWidth = (text.length - 1) * letterSpacing;
     totalWidth = baseWidth + spacingWidth;
   }
+  totalHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
   ctx.restore();
-  return totalWidth;
+  return isVertical ? totalHeight : totalWidth;
 };
 var defaultEvent = function defaultEvent() {};
 var defaultAppearance = {
@@ -190,7 +193,7 @@ var Unit = function Unit(_ref4) {
     textAnchor: textAnchor
   }, dataUnit || text);
 };
-function maxLabelFT(data, config, formatter, font) {
+function maxLabelFT(data, config, formatter, font, isVertical) {
   var max = 0;
   data.length ? data.forEach(function (item) {
     if (calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
@@ -198,12 +201,12 @@ function maxLabelFT(data, config, formatter, font) {
         type: config.format,
         showType: config.showType
       }
-    })), font) > max) max = calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
+    })), font, isVertical) > max) max = calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
       format: {
         type: config.format,
         showType: config.showType
       }
-    })), font);
+    })), font, isVertical);
   }) : "";
   return max;
 }
@@ -341,6 +344,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   var cHeight = controlInfo.cHeight,
     isC = controlInfo.isC,
     cPercent = controlInfo.cPercent;
+  var isVertical = orientation == "left" || orientation == "right";
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
@@ -348,10 +352,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     LabelWidth = label.appearance.width;
   } else {
     if (allTicks.length && typeof allTicks[0] == "string") {
-      LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+      LabelWidth = maxLabelFT(allTicks, label, formatter, label.font, isVertical);
     }
   }
-  var LabelNum = Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth);
+  var LabelNum = !isVertical ? Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth) : Math.floor(height / LabelWidth);
   var ticks = !label.adaptive ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
   if (!(on && ticks.length > 0)) return null;
 

package/lib/components/Tooltip.js

@@ -33,6 +33,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$tip$data$2 = _ref$config$tip$data.data,
     lineHeight = _ref$config$tip$data$2.lineHeight,
     dataGap = _ref$config$tip$data$2.gap,
+    iconGapName = _ref$config$tip$data$2.iconGapName,
+    nameGapData = _ref$config$tip$data$2.nameGapData,
     iconSize = _ref$config$tip$data$2.iconSize,
     dataBg = _ref$config$tip$data$2.background,
     name = _ref$config$tip$data$2.name,
@@ -168,10 +170,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }, /*#__PURE__*/React.createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
         width: iconSize + "px",
-        height: iconSize + "px"
+        height: iconSize + "px",
+        marginRight: iconGapName
       })
     }), /*#__PURE__*/React.createElement("span", {
-      style: (0, _utils.getFontStyle)(name)
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(name)), {}, {
+        marginRight: nameGapData
+      })
     }, displayName || s)), /*#__PURE__*/React.createElement("span", {
       style: (0, _utils.getFontStyle)(value)
     }, showY, showSuffix && /*#__PURE__*/React.createElement("span", {

package/lib/components/pieTooltip.js

@@ -23,6 +23,8 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     _props$config$tip$dat = _props$config$tip.data,
     lineHeight = _props$config$tip$dat.lineHeight,
     iconSize = _props$config$tip$dat.iconSize,
+    iconGapName = _props$config$tip$dat.iconGapName,
+    nameGapData = _props$config$tip$dat.nameGapData,
     name = _props$config$tip$dat.name,
     _props$config$tip$dat2 = _props$config$tip$dat.value,
     valueIsShow = _props$config$tip$dat2.show,
@@ -102,15 +104,16 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
+        marginRight: iconGapName,
         width: iconSize + "px",
         height: iconSize + "px"
       })
     }), /*#__PURE__*/_react["default"].createElement("span", {
-      style: (0, _utils.getFontStyle)(name)
-    }, displayName || s)), valueIsShow && /*#__PURE__*/_react["default"].createElement("span", {
-      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
-        marginLeft: "10px"
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(name)), {}, {
+        marginRight: nameGapData
       })
+    }, displayName || s)), valueIsShow && /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread({}, (0, _utils.getFontStyle)(valueFont))
     }, y, valueSuffixIsShow && renderSuffix(valueSuffix)), percentageIsShow && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentageFont)), {}, {
         marginLeft: "10px"

package/lib/formatter/legend.js

@@ -57,7 +57,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
-  var _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  var _color = seriesColorType == "pure" ? pure : stops[0].color;
   var textMarginLeft = 5;
 
   // 1. 计算每列宽度（加上间距）
@@ -74,7 +74,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
       width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
-      gridTemplateColumns: columns.join(' ')
+      gridTemplateColumns: columns.join(" ")
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -94,8 +94,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       marginLeft: valueGap,
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
       color: valueSameColor ? _color : valueFont.color,
-      alignItems: 'center',
-      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center',
+      alignItems: "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, {
@@ -105,7 +105,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     style: {
       whiteSpace: "nowrap",
       fontSize: fontSize,
-      transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
+      transform: "translate3d(" + x + "px, " + y + "px, 0px)"
     }
   }, text)), showPercent && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
@@ -114,9 +114,9 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       marginLeft: percentGap,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
       color: percentSameColor ? _color : percentFont.color,
-      alignItems: 'center',
-      justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : 'center',
+      alignItems: "center",
+      justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : "center",
       textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center"
     })
-  }, percent + '%')));
+  }, percent + "%")));
 };

package/package.json

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

package/src/components/Axis.tsx

@@ -28,8 +28,12 @@ const getCanvasContext = (): CanvasRenderingContext2D => {
   return canvasContext;
 };
 
-//计算文本宽度的函数
-export const calculateTextWidth = (text: string, fontConfig: any): number => {
+//计算文本宽度/高度的函数
+export const calculateTextWidth = (
+  text: string,
+  fontConfig: any,
+  isVertical: any
+): number => {
   if (!text) return 0;
   const ctx = getCanvasContext();
   ctx.save();
@@ -45,16 +49,22 @@ export const calculateTextWidth = (text: string, fontConfig: any): number => {
   const letterSpacingWithUnit = `${letterSpacing}px`;
   ctx.font = `${fontWeight} ${fontStyle} ${fontSize} ${fontFamily}`;
   ctx.letterSpacing = letterSpacingWithUnit;
-  let totalWidth;
+
+  let totalWidth = 0;
+  let totalHeight = 0;
+  const textMetrics = ctx.measureText(text);
+
   if (typeof ctx.letterSpacing !== "undefined") {
-    totalWidth = ctx.measureText(text).width;
+    totalWidth = textMetrics.width;
   } else {
-    const baseWidth = ctx.measureText(text).width;
-    const spacingWidth = text.length * letterSpacing;
+    const baseWidth = textMetrics.width;
+    const spacingWidth = (text.length - 1) * letterSpacing;
     totalWidth = baseWidth + spacingWidth;
   }
+  totalHeight =
+    textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
   ctx.restore();
-  return totalWidth;
+  return isVertical ? totalHeight : totalWidth;
 };
 const defaultEvent = () => {};
 const defaultAppearance = {
@@ -238,7 +248,13 @@ type LabelType = {
   LabelWidth: any;
 };
 
-function maxLabelFT(data: any, config: any, formatter: any, font: any) {
+function maxLabelFT(
+  data: any,
+  config: any,
+  formatter: any,
+  font: any,
+  isVertical: any
+) {
   let max = 0;
   data.length
     ? data.forEach((item: any) => {
@@ -248,7 +264,8 @@ function maxLabelFT(data: any, config: any, formatter: any, font: any) {
               ...config,
               format: { type: config.format, showType: config.showType },
             }),
-            font
+            font,
+            isVertical
           ) > max
         )
           max = calculateTextWidth(
@@ -256,7 +273,8 @@ function maxLabelFT(data: any, config: any, formatter: any, font: any) {
               ...config,
               format: { type: config.format, showType: config.showType },
             }),
-            font
+            font,
+            isVertical
           );
       })
     : "";
@@ -395,6 +413,7 @@ export default memo(
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent } = controlInfo;
+      const isVertical = orientation == "left" || orientation == "right";
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
       let LabelWidth = 1;
@@ -402,12 +421,21 @@ export default memo(
         LabelWidth = label.appearance.width;
       } else {
         if (allTicks.length && typeof allTicks[0] == "string") {
-          LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+          LabelWidth = maxLabelFT(
+            allTicks,
+            label,
+            formatter,
+            label.font,
+            isVertical
+          );
         }
       }
-      const LabelNum = Math.floor(
-        ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
-      );
+      const LabelNum = !isVertical
+        ? Math.floor(
+            ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
+          )
+        : Math.floor(height / LabelWidth);
+
       const ticks: any = !label.adaptive
         ? tickss
         : getEvenlySpacedElements(

package/src/components/PieTooltip.jsx

@@ -17,6 +17,8 @@ export const PieTooltip = memo((props) => {
         data: {
           lineHeight,
           iconSize,
+          iconGapName,
+          nameGapData,
           name,
           value: {
             show: valueIsShow,
@@ -106,14 +108,17 @@ export const PieTooltip = memo((props) => {
           <span
             style={{
               ..._icon,
+              marginRight: iconGapName,
               width: iconSize + "px",
               height: iconSize + "px",
             }}
           />
-          <span style={getFontStyle(name)}>{displayName || s}</span>
+          <span style={{ ...getFontStyle(name), marginRight: nameGapData }}>
+            {displayName || s}
+          </span>
         </span>
         {valueIsShow && (
-          <span style={{ ...getFontStyle(valueFont), marginLeft: "10px" }}>
+          <span style={{ ...getFontStyle(valueFont) }}>
             {y}
             {valueSuffixIsShow && renderSuffix(valueSuffix)}
           </span>

package/src/components/Tooltip.js

@@ -21,6 +21,8 @@ export default memo(
           data: {
             lineHeight,
             gap: dataGap,
+            iconGapName,
+            nameGapData,
             iconSize,
             background: dataBg,
             name,
@@ -194,9 +196,17 @@ export default memo(
                           ..._icon,
                           width: iconSize + "px",
                           height: iconSize + "px",
+                          marginRight: iconGapName,
                         }}
                       />
-                      <span style={getFontStyle(name)}>{displayName || s}</span>
+                      <span
+                        style={{
+                          ...getFontStyle(name),
+                          marginRight: nameGapData,
+                        }}
+                      >
+                        {displayName || s}
+                      </span>
                     </span>
                     <span style={getFontStyle(value)}>
                       {showY}

package/src/formatter/legend.js

@@ -1,51 +1,54 @@
-import css from '../css/index.module.css';
-import { getFontStyle } from '../utils';
-import { TextOverflow, SplitText } from '../components';
+import css from "../css/index.module.css";
+import { getFontStyle } from "../utils";
+import { TextOverflow, SplitText } from "../components";
 
-export const pieLegendFormatter = (
-  series,
-  props
-) => {
-  const { displayName, data, percent, series: { color: seriesColor, icon="" } } = series,
-  {
-    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth, translate: { x:nameX, y:nameY } },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      gap: valueGap,
-      align: valueAlign,
-      translate: {
-        x:valueX,
-        y:valueY
+export const pieLegendFormatter = (series, props) => {
+  const {
+      displayName,
+      data,
+      percent,
+      series: { color: seriesColor, icon = "" },
+    } = series,
+    {
+      name: {
+        show: showName,
+        font: nameFont,
+        textOverflow,
+        speed,
+        maxWidth,
+        translate: { x: nameX, y: nameY },
+      },
+      value: {
+        show: showValue,
+        font: valueFont,
+        sameColor: valueSameColor,
+        gap: valueGap,
+        align: valueAlign,
+        translate: { x: valueX, y: valueY },
+        splitConfig,
+        suffix: {
+          show: showSuffix,
+          text,
+          fontSize,
+          translate: { x, y },
+        },
       },
-      splitConfig,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize,
-        translate: { x, y },
+      percent: {
+        show: showPercent,
+        font: percentFont,
+        sameColor: percentSameColor,
+        gap: percentGap,
+        align: percentAlign,
+        translate: { x: percentX, y: percentY },
       },
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      sameColor: percentSameColor,
-      gap: percentGap,
-      align: percentAlign,
-      translate: {
-        x:percentX,
-        y:percentY
-      }
-    },
-  } = props;
+    } = props;
   const {
     type: seriesColorType,
     pure,
     linear: { stops },
   } = seriesColor;
 
-  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  const _color = seriesColorType == "pure" ? pure : stops[0].color;
   const textMarginLeft = 5;
 
   // 1. 计算每列宽度（加上间距）
@@ -55,7 +58,15 @@ export const pieLegendFormatter = (
   if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
   return (
     <>
-      {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
+      {icon && (
+        <span
+          style={{
+            ...icon,
+            marginRight: icon.marginRight,
+            transform: `translate(${nameX}px, ${nameY}px)`,
+          }}
+        />
+      )}
       <div
         className={
           showName && showValue && showPercent
@@ -63,36 +74,56 @@ export const pieLegendFormatter = (
             : css.notShowAllStyle
         }
         style={{
-          width:`calc( 100% + ${textMarginLeft+valueGap+percentGap}px )`,
-          gridTemplateColumns: columns.join(' ')
+          width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
+          gridTemplateColumns: columns.join(" "),
         }}
       >
         {showName && (
-          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
-            width:maxWidth, marginLeft: textMarginLeft, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
-          }}></TextOverflow>
+          <TextOverflow
+            value={displayName}
+            type={textOverflow}
+            speed={speed}
+            style={{
+              width: maxWidth,
+              marginLeft: textMarginLeft,
+              ...getFontStyle(nameFont),
+              transform: `translate(${nameX}px, ${nameY}px)`,
+            }}
+          ></TextOverflow>
         )}
         {showValue && (
           <span
             style={{
-              display:"flex",
-              whiteSpace:"nowrap",
+              display: "flex",
+              whiteSpace: "nowrap",
               ...getFontStyle(valueFont),
               marginLeft: valueGap,
-              transform:`translate(${valueX}px,${valueY}px)`,
+              transform: `translate(${valueX}px,${valueY}px)`,
               color: valueSameColor ? _color : valueFont.color,
-              alignItems: 'center',
-              justifyContent: valueAlign=="left"?"flex-start":valueAlign=="right"?"flex-end":'center',
-              textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center",
+              alignItems: "center",
+              justifyContent:
+                valueAlign == "left"
+                  ? "flex-start"
+                  : valueAlign == "right"
+                  ? "flex-end"
+                  : "center",
+              textAlign:
+                valueAlign === "left"
+                  ? "left"
+                  : valueAlign === "right"
+                  ? "right"
+                  : "center",
             }}
           >
-            <span><SplitText value={data.y} config={splitConfig} /></span>
+            <span>
+              <SplitText value={data.y} config={splitConfig} />
+            </span>
             {showSuffix && (
               <span
                 style={{
-                  whiteSpace:"nowrap",
+                  whiteSpace: "nowrap",
                   fontSize,
-                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+                  transform: "translate3d(" + x + "px, " + y + "px, 0px)",
                 }}
               >
                 {text}
@@ -103,17 +134,27 @@ export const pieLegendFormatter = (
         {showPercent && (
           <span
             style={{
-              whiteSpace:"nowrap",
+              whiteSpace: "nowrap",
               ...getFontStyle(percentFont),
               marginLeft: percentGap,
-              transform:`translate(${percentX}px,${percentY}px)`,
+              transform: `translate(${percentX}px,${percentY}px)`,
               color: percentSameColor ? _color : percentFont.color,
-              alignItems: 'center',
-              justifyContent: percentAlign=="left"?"flex-start":percentAlign=="right"?"flex-end":'center',
-              textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center",
+              alignItems: "center",
+              justifyContent:
+                percentAlign == "left"
+                  ? "flex-start"
+                  : percentAlign == "right"
+                  ? "flex-end"
+                  : "center",
+              textAlign:
+                percentAlign === "left"
+                  ? "left"
+                  : percentAlign === "right"
+                  ? "right"
+                  : "center",
             }}
           >
-            {percent + '%'}
+            {percent + "%"}
           </span>
         )}
       </div>