@easyv/charts 1.6.4 → 1.6.6

package/lib/components/Tooltip.js

@@ -28,16 +28,22 @@ 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,
+      dataBg = _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,
+      bgType = _ref$config$tip.bgType,
+      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 +80,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: bgType == "image" ? image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : "transparent" : bgColor
     }, (0, _utils.getFontStyle)(font))
   }, formatter ? formatter({
     series: series,
@@ -88,19 +94,28 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       data: data,
       config: dataConfig
     }
-  }) : /*#__PURE__*/React.createElement("dl", {
+  }) : /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
+      gap: gap,
       height: '100%'
     }
-  }, /*#__PURE__*/React.createElement("dt", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
       textAlign: align,
-      transform: (0, _utils.getTranslate3d)(translateXAxis)
+      transform: (0, _utils.getTranslate3d)(translateXAxis),
+      background: background ? "url(".concat(window.appConfig.ASSETS_URL + background, ") 0 0/100% 100%") : "transparent"
     }, font)
-  }, x), data.map(function (_ref2, index) {
+  }, x), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexFlow: "column nowrap",
+      gap: dataGap,
+      background: dataBg ? "url(".concat(window.appConfig.ASSETS_URL + dataBg, ") 0 0/100% 100%") : "transparent"
+    }
+  }, data.map(function (_ref2, index) {
     var showY = _ref2.showY,
         s = _ref2.s;
 
@@ -151,7 +166,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         transform: (0, _utils.getTranslate3d)(suffixTranslate)
       })
     }, tmp.get(s))));
-  })));
+  }))));
 });
 
 exports["default"] = _default;

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

package/src/components/Tooltip.js

@@ -16,10 +16,12 @@ 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 },
         },
+        bgType,
+        bgColor,
         image,
         margin,
         size: { width: tipWidth, height: tipHeight },
@@ -67,14 +69,14 @@ export default memo(
           pointerEvents: 'none',
           transform: tipPosition,
           width: tipWidth,
-          height: tipHeight,
+          minHeight: tipHeight,
           padding: getMargin(margin),
-          background: image
+          background: bgType=="image"?image
             ? '50% 50% / 100% 100% no-repeat url(' +
             window.appConfig.ASSETS_URL +
             image +
             ')'
-            : 'rgba(48, 55, 66, 0.85)',
+            : "transparent":bgColor,
           ...getFontStyle(font),
         }}
       >
@@ -85,82 +87,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/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;
 };