@easyv/charts 1.7.31 → 1.7.32

package/lib/components/Legend.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +34,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$order = _ref$config.order,
     order = _ref$config$order === void 0 ? '' : _ref$config$order,
     interactive = _ref$config.interactive,
+    LegendType = _ref$config.LegendType,
     maxWidth = _ref$config.maxWidth,
     textOverflow = _ref$config.textOverflow,
     speed = _ref$config.speed,
@@ -122,7 +124,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       d.percent = 0;
     });
   }
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
       position: 'absolute',
@@ -169,7 +171,66 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }),
       speed: speed
     })));
-  })));
+  }))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "__easyv-legend-wrapper",
+    style: _objectSpread(_objectSpread({
+      display: 'flex',
+      flexWrap: "wrap",
+      alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+      flexDirection: "column",
+      position: 'absolute'
+    }, getPosition(position, _alignment, x, y)), {}, {
+      height: loop.show ? height : 'auto',
+      overflowY: loop.show ? 'scroll' : 'auto',
+      width: "100%"
+    }),
+    ref: ref_container
+  }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
+    return /*#__PURE__*/_react["default"].createElement("ul", {
+      key: indexs,
+      style: (0, _defineProperty2["default"])({
+        display: 'flex',
+        width: 'fit-content',
+        justifyContent: alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+        marginBottom: "0px",
+        gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px")
+      }, "marginBottom", gridRowGap + "px")
+    }, _series.map(function (series, index) {
+      if (Math.floor(index / gridTemplateColumns) == indexs) {
+        var _series$config2;
+        var type = series.type,
+          name = series.name,
+          displayName = series.displayName,
+          icon = series.icon,
+          selected = series.selected;
+        var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config2 = series.config) === null || _series$config2 === void 0 || (_series$config2 = _series$config2.line) === null || _series$config2 === void 0 ? void 0 : _series$config2.type);
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          key: index,
+          onClick: onClick,
+          "data-name": name,
+          style: {
+            display: 'flex',
+            opacity: selected === false ? opacity / 100 : 1,
+            alignItems: 'center',
+            cursor: "pointer",
+            gap: _icon.gap
+          }
+        }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+          style: _icon
+        }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+          ShowType: LegendType,
+          type: "ellipsis",
+          value: displayName || name,
+          style: _objectSpread(_objectSpread({}, font), {}, {
+            fontStyle: italic ? 'italic' : 'normal',
+            fontWeight: bold ? 'bold' : 'normal',
+            minWidth: getCanvasTextWidth(displayName.substring(0, 5) || name.substring(0, 5), font.letterSpacing, "".concat(font.fontSize, "px ").concat(font.fontFamily))
+          }),
+          speed: speed
+        })));
+      }
+    }));
+  }));
 });
 var getPosition = function getPosition(position, alignment) {
   var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -203,4 +264,12 @@ var getPosition = function getPosition(position, alignment) {
         transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
   }
+};
+var getCanvasTextWidth = function getCanvasTextWidth(text, letterSpacing) {
+  var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '16px Arial';
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.font = font;
+  return ctx.measureText(text).width + text.length * letterSpacing + "px";
+  // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug
 };

package/lib/components/TextOverflow.js

@@ -24,7 +24,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     _props$speed = props.speed,
     speed = _props$speed === void 0 ? 5 : _props$speed,
     _props$config = props.config,
-    config = _props$config === void 0 ? {} : _props$config;
+    config = _props$config === void 0 ? {} : _props$config,
+    ShowType = props.ShowType;
   var _config$needTitle = config.needTitle,
     needTitle = _config$needTitle === void 0 ? true : _config$needTitle;
   var getTextOverflow = function getTextOverflow(type) {
@@ -59,7 +60,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     style: styles,
     ref: ref
   }) : /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles,
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace
+    }),
     ref: ref,
     title: needTitle && type == "ellipsis" ? text || undefined : undefined,
     dangerouslySetInnerHTML: {

package/package.json

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

package/src/components/Legend.js

@@ -19,6 +19,7 @@ export default memo(
       show,
       order = '',
       interactive,
+      LegendType,//类型
       maxWidth,
       textOverflow,
       speed,
@@ -100,6 +101,7 @@ export default memo(
     }
 
     return (
+      LegendType=="FixedWidth"?
       <div
         className='__easyv-legend-wrapper'
         style={{
@@ -153,6 +155,72 @@ export default memo(
             );
           })}
         </ul>
+      </div>:<div
+        className='__easyv-legend-wrapper'
+        style={{
+          display:'flex',
+          flexWrap:"wrap",
+          alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+          flexDirection: "column",
+          position: 'absolute',
+          ...getPosition(position, _alignment, x, y),
+          height: loop.show ? height : 'auto',
+          overflowY: loop.show ? 'scroll' : 'auto',
+          width:"100%"
+        }}
+        ref={ref_container}
+      >
+
+       {[...Array(Math.ceil(series.length/gridTemplateColumns))].map((_,indexs)=>(
+        <ul
+        key={indexs}
+        style={{
+          display: 'flex',
+          width: 'fit-content',
+          justifyContent:alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+          marginBottom:"0px",
+          gap:`${gridRowGap}px  ${gridColumnGap}px`,
+          marginBottom:gridRowGap+"px"
+        }}
+      >
+        {_series.map((series, index) => {
+          if(Math.floor(index/gridTemplateColumns)==indexs){
+          const { type, name, displayName, icon, selected } = series;
+          const _icon = getIcon(type, icon, series?.config?.line?.type);
+          return (
+            <li
+              key={index}
+              onClick={onClick}
+              data-name={name}
+              style={{
+                display: 'flex',
+                opacity: selected === false ? opacity / 100 : 1,
+                alignItems: 'center',
+                cursor: "pointer",
+                gap: _icon.gap,
+              }}
+            >
+              {formatter ? (
+                formatter(series, config)
+              ) : (
+                <>
+                  <span style={_icon} />
+                  <TextOverflow ShowType={LegendType} type="ellipsis" value={displayName || name} style={{
+                      ...font,
+                      fontStyle: italic ? 'italic' : 'normal',
+                      fontWeight: bold ? 'bold' : 'normal',
+                      minWidth:getCanvasTextWidth(displayName.substring(0,5) || name.substring(0,5),font.letterSpacing,`${font.fontSize}px ${font.fontFamily}` )
+                    }} speed={speed}></TextOverflow>
+                  
+                </>
+              )}
+            </li>
+          );
+          }
+        })}
+      </ul>
+       ))
+       }
       </div>
     );
   }
@@ -188,3 +256,10 @@ const getPosition = (position, alignment, x = 0, y = 0) => {
       };
   }
 };
+const getCanvasTextWidth=(text,letterSpacing, font = '16px Arial')=>{
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  return ctx.measureText(text).width+(text.length)*letterSpacing+"px";
+  // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug
+}

package/src/components/TextOverflow.tsx

@@ -10,7 +10,8 @@ interface flowText{
   value:string,
   speed:number,
   style:CSSProperties,
-  config?:any
+  config?:any,
+  ShowType:string
 }
 
 export default memo(forwardRef((props:flowText, ref:any) => {
@@ -19,7 +20,8 @@ export default memo(forwardRef((props:flowText, ref:any) => {
     value, // 文本
     style, // 样式
     speed = 5, // 动画速度
-    config = {}
+    config = {},
+    ShowType
   } = props;
   const { needTitle = true } = config;
 
@@ -60,6 +62,7 @@ export default memo(forwardRef((props:flowText, ref:any) => {
       style={styles}
       ref={ref} />
   ) : (
-    <div style={styles} ref={ref} title={needTitle && type=="ellipsis"?text || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
+    <div style={{...styles,
+      whiteSpace:ShowType=="Adaptive"?"normal":styles.whiteSpace}} ref={ref} title={needTitle && type=="ellipsis"?text || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
   );
 }));