@easyv/charts 1.7.30 → 1.7.32

package/lib/components/CartesianChart.js

@@ -26,6 +26,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var width = _ref.width,
     height = _ref.height,
+    seriesData = _ref.seriesData,
     _ref$config = _ref.config,
     axesConfig = _ref$config.axes,
     background = _ref$config.background,
@@ -639,7 +640,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }
   }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     filterData: filterData,
-    series: series
+    series: seriesData
   })), showTooltip && !control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {

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/Mapping.js

@@ -65,8 +65,18 @@ var _default = exports["default"] = function _default(Component) {
           var fieldName = _ref2.fieldName;
           return !fieldName;
         });
-        var tmp = new Map();
+        var lastSeries = series[seriesLength - 1];
+        var tmp = new Map(series.filter(function (d) {
+          return d.fieldName;
+        }).map(function (d) {
+          return [d.fieldName, {}];
+        })); //确定的系列样式
+        var i = 0;
+        var emptyArray = series.filter(function (d) {
+          return !d.fieldName;
+        }); //没有fieldsName的系列样式
         if (!!noName) {
+          //都没名
           data.forEach(function (_ref3, index) {
             var key = _ref3.key;
             var current = series[index % seriesLength];
@@ -77,14 +87,15 @@ var _default = exports["default"] = function _default(Component) {
           });
           return tmp;
         }
-        var lastSeries = series[seriesLength - 1];
         data.forEach(function (_ref4) {
           var key = _ref4.key;
+          //先把有系列的渲染了，无系列的排后面
           var current = series.find(function (_ref5) {
             var fieldName = _ref5.fieldName;
             return fieldName == key;
           });
-          var result = current || lastSeries;
+          var result = current || emptyArray[i] || lastSeries;
+          if (!current) i = (i + 1) % emptyArray.length;
           var name = (current ? current.fieldName || current.displayName : key) || '';
           tmp.set(name, _objectSpread(_objectSpread({}, result), {}, {
             name: name,

package/lib/components/StackData.js

@@ -30,7 +30,8 @@ var _default = exports["default"] = function _default(Component) {
     });
     return /*#__PURE__*/React.createElement(Component, (0, _extends2["default"])({}, props, {
       config: _objectSpread(_objectSpread({}, config), _config),
-      data: data
+      data: data,
+      seriesData: _config.seriesdata
     }));
   });
 };

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/lib/hooks/useStackData.js

@@ -74,7 +74,41 @@ var setStackData = function setStackData(data, series, stacks) {
   dataMap.clear();
   return series;
 };
+var mergeDataAndSeries = function mergeDataAndSeries(data, _series) {
+  // 创建一个映射，键为系列名称，值为数据点数组
+  var dataMap = new Map();
 
+  // 遍历 data 数组，按系列名称分组数据点
+  data.forEach(function (item) {
+    var seriesName = item.s;
+    if (!dataMap.has(seriesName)) {
+      dataMap.set(seriesName, []);
+    }
+    // 构建符合目标格式的数据点对象
+    var dataPoint = {
+      data: {
+        s: item.s,
+        x: item.x,
+        y: item.y,
+        showY: item.showY
+      },
+      index: 0,
+      bound: [0, item.y]
+    };
+    dataMap.get(seriesName).push(dataPoint);
+  });
+
+  // 遍历 _series 数组，为每个系列添加对应的数据
+  return _series.map(function (series) {
+    var seriesName = series.name || series.fieldName;
+    // 查找对应系列的数据
+    var seriesData = dataMap.get(seriesName) || [];
+    // 返回合并后完整的系列对象，包含原始配置和新添加的数据
+    return _objectSpread(_objectSpread({}, series), {}, {
+      data: seriesData
+    });
+  });
+};
 /**
  * 计算堆叠数据
  * @param {Array} data 数据
@@ -96,12 +130,13 @@ var _default = exports["default"] = function _default(_ref2) {
     return (0, _utils.dataYOrZ)(data, _series.series);
   }, [data, _series]);
   var tmp = (0, _react.useMemo)(function () {
+    var seriesdata = mergeDataAndSeries(data, Array.from(series.values()));
     var dataY = _data.y,
       dataZ = _data.z;
     var stacks = _series.stacks,
       _series$series = _series.series,
-      seriesY = _series$series.y,
-      seriesZ = _series$series.z;
+      seriesZ = _series$series.z,
+      seriesY = _series$series.y;
     resetStackData(seriesY);
     resetStackData(seriesZ);
     setStackData(dataY, seriesY, stacks);
@@ -110,7 +145,9 @@ var _default = exports["default"] = function _default(_ref2) {
       bandLength: stacks.filter(function (item) {
         return item.type == 'band';
       }).length,
-      series: [].concat((0, _toConsumableArray2["default"])(seriesY.values()), (0, _toConsumableArray2["default"])(seriesZ.values()))
+      // series: mergeDataAndSeries(data,Array.from(series.values())),
+      series: [].concat((0, _toConsumableArray2["default"])(seriesY.values()), (0, _toConsumableArray2["default"])(seriesZ.values())),
+      seriesdata: seriesdata
     };
   }, [_data, _series]);
   return tmp;

package/package.json

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

package/src/components/CartesianChart.js

@@ -34,6 +34,7 @@ import {
 const Chart = memo(
   ({
     width, height,
+    seriesData,
     config: {
       axes: axesConfig,
       background,
@@ -659,7 +660,7 @@ const Chart = memo(
             }}
           ></Control>
         )}
-        <Legend {...legend} filterData={filterData} series={series} />
+        <Legend {...legend} filterData={filterData} series={seriesData} />
         {/* 非控制图下的提示框 */}
         {showTooltip && !control && (
           <Tooltip

package/src/components/Chart.js

@@ -89,7 +89,7 @@ const Chart = memo(
       }),
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
-
+    
     useEffect(()=>{
       let isAnimation = window.screenConfig?window.screenConfig.isAnimation:true; //大屏的全局设置是否允许开启动画，false为不允许
       if(!isAnimation) setActive(false);
@@ -107,14 +107,14 @@ const Chart = memo(
     },[]);
     
     let data = checkData(originData);
-
+    
     return (
       <chartContext.Provider value={context}>
         {type == 'pie' ? (
           <PieChart id={id} config={config} data={data} active={active} {...props} />
         ) : (
           <CartesianChart id={id} config={config} data={data} active={active} {...props} />
-        )}
+         )}
       </chartContext.Provider>
       
     );

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/Mapping.js

@@ -31,8 +31,11 @@ export default (Component) =>
       if (!!data.length) {
         const seriesLength = series.length;
         const noName = series.every(({ fieldName }) => !fieldName);
-        const tmp = new Map();
-        if (!!noName) {
+        const lastSeries = series[seriesLength - 1];
+        const tmp = new Map(series.filter(d=>d.fieldName).map(d=>[d.fieldName,{}]));    //确定的系列样式
+        let i = 0;
+        const emptyArray = series.filter(d=>!d.fieldName);    //没有fieldsName的系列样式
+        if (!!noName) {//都没名
           data.forEach(({ key }, index) => {
             const current = series[index % seriesLength];
             const name = key || '';
@@ -43,10 +46,10 @@ export default (Component) =>
           });
           return tmp;
         }
-        const lastSeries = series[seriesLength - 1];
-        data.forEach(({ key }) => {
+        data.forEach(({ key }) => {//先把有系列的渲染了，无系列的排后面
           const current = series.find(({ fieldName }) => fieldName == key);
-          const result = current || lastSeries;
+          const result = current || emptyArray[i]|| lastSeries;
+          if(!current) i=(i+1)%emptyArray.length;
           const name = (current ? current.fieldName || current.displayName : key) || '';
           tmp.set(name, {
             ...result,

package/src/components/StackData.js

@@ -7,10 +7,10 @@ export default (Component) => {
   return memo(({ config: { series, ...config }, data, ...props }) => {
     const _config = useStackData({
       series,
-      data,
+      data
     });
     return (
-      <Component {...props} config={{ ...config, ..._config }} data={data} />
+      <Component {...props} config={{ ...config, ..._config }} data={data} seriesData={_config.seriesdata} />
     );
   });
 };

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>
   );
 }));

package/src/hooks/useStackData.js

@@ -67,7 +67,42 @@ const setStackData = (data, series, stacks) => {
   dataMap.clear();
   return series;
 };
-
+const mergeDataAndSeries=(data, _series) =>{
+  // 创建一个映射，键为系列名称，值为数据点数组
+  const dataMap = new Map();
+  
+  // 遍历 data 数组，按系列名称分组数据点
+  data.forEach(item => {
+      const seriesName = item.s;
+      if (!dataMap.has(seriesName)) {
+          dataMap.set(seriesName, []);
+      }
+      // 构建符合目标格式的数据点对象
+      const dataPoint = {
+          data: {
+              s: item.s,
+              x: item.x,
+              y: item.y,
+              showY: item.showY
+          },
+          index: 0,
+          bound: [0, item.y]
+      };
+      dataMap.get(seriesName).push(dataPoint);
+  });
+  
+  // 遍历 _series 数组，为每个系列添加对应的数据
+  return _series.map(series => {
+      const seriesName = series.name || series.fieldName;
+      // 查找对应系列的数据
+      const seriesData = dataMap.get(seriesName) || [];
+      // 返回合并后完整的系列对象，包含原始配置和新添加的数据
+      return {
+          ...series,
+          data: seriesData
+      };
+  });
+}
 /**
  * 计算堆叠数据
  * @param {Array} data 数据
@@ -81,13 +116,14 @@ export default ({ data, series }) => {
     const _series = getSeriesMap(series);
     return { stacks, series: seriesYOrZ(_series) };
   }, [series]);
-
+  
   const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
   const tmp = useMemo(() => {
+    const seriesdata=mergeDataAndSeries(data,Array.from(series.values()))
     const { y: dataY, z: dataZ } = _data;
     const {
       stacks,
-      series: { y: seriesY, z: seriesZ },
+      series: { z: seriesZ,y: seriesY  },
     } = _series;
     resetStackData(seriesY);
     resetStackData(seriesZ);
@@ -95,7 +131,9 @@ export default ({ data, series }) => {
     setStackData(dataZ, seriesZ, stacks);
     return {
       bandLength: stacks.filter((item) => item.type == 'band').length,
+      // series: mergeDataAndSeries(data,Array.from(series.values())),
       series: [...seriesY.values(), ...seriesZ.values()],
+      seriesdata:seriesdata
     };
   }, [_data, _series]);
   return tmp;