@easyv/charts 1.6.3 → 1.6.5

package/lib/components/Tooltip.js

@@ -28,16 +28,21 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$tip$data = _ref$config$tip.data,
       xAxis = _ref$config$tip$data.xAxis,
       _ref$config$tip$data$ = _ref$config$tip$data.xAxis,
+      background = _ref$config$tip$data$.background,
+      gap = _ref$config$tip$data$.gap,
       align = _ref$config$tip$data$.align,
       font = _ref$config$tip$data$.font,
       translateXAxis = _ref$config$tip$data$.translate,
       dataConfig = _ref$config$tip$data.data,
       _ref$config$tip$data$2 = _ref$config$tip$data.data,
       lineHeight = _ref$config$tip$data$2.lineHeight,
+      dataGap = _ref$config$tip$data$2.gap,
       iconSize = _ref$config$tip$data$2.iconSize,
+      dataBackground = _ref$config$tip$data$2.background,
       name = _ref$config$tip$data$2.name,
       value = _ref$config$tip$data$2.value,
       suffix = _ref$config$tip$data$2.suffix,
+      bgColor = _ref$config$tip.bgColor,
       image = _ref$config$tip.image,
       margin = _ref$config$tip.margin,
       _ref$config$tip$size = _ref$config$tip.size,
@@ -74,9 +79,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       pointerEvents: 'none',
       transform: tipPosition,
       width: tipWidth,
-      height: tipHeight,
+      minHeight: tipHeight,
       padding: (0, _utils.getMargin)(margin),
-      background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : 'rgba(48, 55, 66, 0.85)'
+      background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : bgColor
     }, (0, _utils.getFontStyle)(font))
   }, formatter ? formatter({
     series: series,

package/lib/hooks/useAxes.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _react = require("react");
@@ -134,7 +136,8 @@ var _default = function _default(_ref) {
 
   var _axes = (0, _react.useMemo)(function () {
     var tmp = new Map();
-    var xAxisPositions = [];
+    var xAxisPositions = new Set(); //用Set去重，去掉重复的x轴
+
     axes.forEach(function (item) {
       var _item$config$label = item.config.label,
           extent = _item$config$label.extent,
@@ -396,17 +399,17 @@ var _default = function _default(_ref) {
         if (type == "linear" && config.on) {
           var zeroPosition = scaler(0);
 
-          if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
+          if (!isNaN(zeroPosition)) {
             if (_direction === "horizontal") {
-              xAxisPositions.push({
+              xAxisPositions.add(JSON.stringify({
                 x: zeroPosition,
                 y: 0
-              });
+              }));
             } else if (_direction === "vertical") {
-              xAxisPositions.push({
+              xAxisPositions.add(JSON.stringify({
                 x: 0,
                 y: zeroPosition
-              });
+              }));
             }
           }
         }
@@ -456,7 +459,9 @@ var _default = function _default(_ref) {
         }));
       }
     });
-    tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
+    tmp.get("x") && (tmp.get("x").positions = (0, _toConsumableArray2["default"])(xAxisPositions).map(function (d) {
+      return JSON.parse(d);
+    }));
     return tmp;
   }, [axes, controlInfo]);
 

package/lib/utils/index.js

@@ -184,17 +184,42 @@ var getTicksOfAxis = function getTicksOfAxis(domain, ticksCount, showLast) {
   var len = domain.length;
   if (ticksCount < 2 || ticksCount > len) return domain;
   var step = Math.floor((len - ticksCount) / (ticksCount - 1));
-  var ticksArr = domain.filter(function (d, i) {
-    return i % (step + 1) === 0;
-  });
-  var Tlen = ticksArr.length;
-  var lastIndex = domain.findIndex(function (d) {
-    return d == ticksArr[Tlen - 1];
-  });
+  var ticksArr = [];
 
   if (showLast) {
-    len % ticksCount == 0 || len - 1 - lastIndex >= Math.round(len / Tlen / 2) ? null : ticksArr.pop();
-    ticksArr.push(domain[len - 1]);
+    var count = ticksCount,
+        gap = 0;
+    step = (len - 1) / (count - 1);
+    var maxGap = Math.max(count - 2, len - count); //循环计算出最接近count值且能让step为整数的值
+
+    if (!Number.isInteger(step)) {
+      while (gap <= maxGap) {
+        gap++;
+        var left = (len - 1) / (count - gap - 1),
+            right = (len - 1) / (count + gap - 1);
+
+        if (Number.isInteger(left)) {
+          step = left;
+          break;
+        }
+
+        if (Number.isInteger(right)) {
+          step = right;
+          break;
+        }
+      }
+    }
+
+    if (!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
+
+    ticksArr = domain.filter(function (d, i) {
+      return i % step === 0;
+    });
+  } else {
+    console.log("noLast");
+    ticksArr = domain.filter(function (d, i) {
+      return i % (step + 1) === 0;
+    });
   }
 
   return ticksArr;

package/package.json

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

package/src/components/Tooltip.js

@@ -16,10 +16,11 @@ export default memo(
       tip: {
         data: {
           xAxis,
-          xAxis: { align, font, translate: translateXAxis },
+          xAxis: { background, gap, align, font, translate: translateXAxis },
           data: dataConfig,
-          data: { lineHeight, iconSize, name, value, suffix },
+          data: { lineHeight, gap:dataGap, iconSize, background:dataBg, name, value, suffix },
         },
+        bgColor,
         image,
         margin,
         size: { width: tipWidth, height: tipHeight },
@@ -67,14 +68,14 @@ export default memo(
           pointerEvents: 'none',
           transform: tipPosition,
           width: tipWidth,
-          height: tipHeight,
+          minHeight: tipHeight,
           padding: getMargin(margin),
           background: image
             ? '50% 50% / 100% 100% no-repeat url(' +
             window.appConfig.ASSETS_URL +
             image +
             ')'
-            : 'rgba(48, 55, 66, 0.85)',
+            : bgColor,
           ...getFontStyle(font),
         }}
       >
@@ -85,82 +86,92 @@ export default memo(
             data: { data, config: dataConfig },
           })
         ) : (
-          <dl
+          <div
             style={{
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
+              gap,
               height: '100%',
             }}
           >
-            <dt
+            <div
               style={{
                 textAlign: align,
                 transform: getTranslate3d(translateXAxis),
+                background:background?`url(${window.appConfig.ASSETS_URL+background}) 0 0/100% 100%`:"transparent",
                 ...font,
               }}
             >
               {x}
-            </dt>
-            {data.map(({ showY, s }, index) => {
-              const { type, icon, displayName } = series.find(
-                (series) => series.name == s
-              );
-              const {
-                show: showSuffix,
-                content,
-                font: suffiixFont,
-                translate: suffixTranslate,
-              } = suffix;
-              const tmp = new Map();
-              Object.values(content).forEach((item) => {
-                tmp.set(item['suffix'].name, item['suffix'].suffix);
-              });
-              const _icon = getIcon(type, icon);
-              return (
-                <dd
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    lineHeight: lineHeight + 'px',
-                  }}
-                  key={index}
-                >
-                  <span
+            </div>
+            <div style={{
+              display:"flex", 
+              flexFlow:"column nowrap",
+              gap:dataGap, 
+              background:dataBg?`url(${window.appConfig.ASSETS_URL+dataBg}) 0 0/100% 100%`:"transparent"
+            }}>
+              {data.map(({ showY, s }, index) => {
+                const { type, icon, displayName } = series.find(
+                  (series) => series.name == s
+                );
+                const {
+                  show: showSuffix,
+                  content,
+                  font: suffiixFont,
+                  translate: suffixTranslate,
+                } = suffix;
+                const tmp = new Map();
+                Object.values(content).forEach((item) => {
+                  tmp.set(item['suffix'].name, item['suffix'].suffix);
+                });
+                const _icon = getIcon(type, icon);
+                return (
+                  <dd
                     style={{
-                      border: '1px solid red',
                       display: 'flex',
-                      alignItems: 'center',
-                      gap: icon.iconGap,
+                      justifyContent: 'space-between',
+                      lineHeight: lineHeight + 'px',
                     }}
+                    key={index}
                   >
                     <span
                       style={{
-                        ..._icon,
-                        width: iconSize + 'px',
-                        height: iconSize + 'px',
+                        border: '1px solid red',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: icon.iconGap,
                       }}
-                    />
-                    <span style={getFontStyle(name)}>{displayName || s}</span>
-                  </span>
-                  <span style={getFontStyle(value)}>
-                    {showY}
-                    {showSuffix && (
+                    >
                       <span
                         style={{
-                          ...getFontStyle(suffiixFont),
-                          display:"inline-block",
-                          transform: getTranslate3d(suffixTranslate),
+                          ..._icon,
+                          width: iconSize + 'px',
+                          height: iconSize + 'px',
                         }}
-                      >
-                        {tmp.get(s)}
-                      </span>
-                    )}
-                  </span>
-                </dd>
-              );
-            })}
-          </dl>
+                      />
+                      <span style={getFontStyle(name)}>{displayName || s}</span>
+                    </span>
+                    <span style={getFontStyle(value)}>
+                      {showY}
+                      {showSuffix && (
+                        <span
+                          style={{
+                            ...getFontStyle(suffiixFont),
+                            display:"inline-block",
+                            transform: getTranslate3d(suffixTranslate),
+                          }}
+                        >
+                          {tmp.get(s)}
+                        </span>
+                      )}
+                    </span>
+                  </dd>
+                );
+              })}
+            </div>
+            
+          </div>
         )}
       </div>
     );

package/src/hooks/useAxes.js

@@ -102,7 +102,7 @@ export default ({
 
   const _axes = useMemo(() => {
     const tmp = new Map();
-    const xAxisPositions = [];
+    const xAxisPositions = new Set();   //用Set去重，去掉重复的x轴
     axes.forEach((item) => {
       const {
         config: {
@@ -390,7 +390,6 @@ export default ({
           );
         }
         let scaler = scales[type]().domain(newDomain).range(range);
-
         scaler.type = type;
         if (type !== "ordinal") scaler.clamp(true);
 
@@ -425,17 +424,17 @@ export default ({
         const lengthWithoutPaddingOuter = length - _paddingOuter;
         if (type == "linear" && config.on) {
           const zeroPosition = scaler(0);
-          if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
+          if (!isNaN(zeroPosition)) {
             if (direction === "horizontal") {
-              xAxisPositions.push({
+              xAxisPositions.add(JSON.stringify({
                 x: zeroPosition,
                 y: 0,
-              });
+              }));
             } else if (direction === "vertical") {
-              xAxisPositions.push({
+              xAxisPositions.add(JSON.stringify({
                 x: 0,
                 y: zeroPosition,
-              });
+              }));
             }
           }
         }
@@ -487,7 +486,7 @@ export default ({
         });
       }
     });
-    tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
+    tmp.get("x") && (tmp.get("x").positions = [...xAxisPositions].map(d=>JSON.parse(d)));
     return tmp;
   }, [axes, controlInfo]);
   return _axes;

package/src/utils/index.js

@@ -143,21 +143,39 @@ const getBreakWord = (str, breakNumber) => {
 };
 
 //x轴标签逻辑
-
 const getTicksOfAxis = (domain, ticksCount, showLast) => {
   let len = domain.length;
   if (ticksCount < 2 || ticksCount > len) return domain;
   let step = Math.floor((len - ticksCount) / (ticksCount - 1));
-  const ticksArr = domain.filter(function (d, i) {
-    return i % (step + 1) === 0;
-  });
-  let Tlen = ticksArr.length;
-  let lastIndex = domain.findIndex((d) => d == ticksArr[Tlen - 1]);
+  let ticksArr = [];
   if (showLast) {
-    len % ticksCount == 0 || len - 1 - lastIndex >= Math.round(len / Tlen / 2)
-      ? null
-      : ticksArr.pop();
-    ticksArr.push(domain[len - 1]);
+    let count = ticksCount, gap = 0;
+    step = (len - 1) / (count - 1);
+    const maxGap = Math.max(count-2,len-count);
+    //循环计算出最接近count值且能让step为整数的值
+    if(!Number.isInteger(step)){
+      while(gap<=maxGap){
+        gap++;
+        const left = (len-1)/(count-gap-1), right = (len-1)/(count+gap-1);
+        if(Number.isInteger(left)){
+          step = left;
+          break;
+        }
+        if(Number.isInteger(right)){
+          step = right;
+          break;
+        }
+      }
+    }
+    if(!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
+    ticksArr = domain.filter(function (d, i) {
+      return i % step === 0;
+    });
+  }else{
+    console.log("noLast")
+    ticksArr = domain.filter(function (d, i) {
+      return i % (step + 1) === 0;
+    });
   }
   return ticksArr;
 };