@easyv/charts 1.9.29 → 1.10.1

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.29",
+  "version": "1.10.1",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

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>