@easyv/charts 1.4.18 → 1.4.20

package/lib/components/BaseLine.js

@@ -46,10 +46,12 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       marginLeft = _ref$config$line$marg.marginLeft,
       marginRight = _ref$config$line$marg.marginRight,
       strokeDasharray = _ref$config$line.strokeDasharray,
+      yOrZ = _ref.yOrZ,
       _ref$yAxis = _ref.yAxis,
       yScaler = _ref$yAxis.scaler,
       clipValue = _ref$yAxis.clipValue,
       isClipAxis = _ref$yAxis.isClipAxis,
+      scaler = _ref.axisX.scaler,
       data = _ref.data;
 
   try {
@@ -62,7 +64,18 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         x1 = orientation == 'left' ? yScaler[1](data.value) : marginLeft, x2 = orientation == 'left' ? yScaler[1](data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler[1](data.value), y2 = orientation == 'left' ? height - marginRight : yScaler[1](data.value);
       }
     } else {
-      x1 = orientation == 'left' ? yScaler(data.value) : marginLeft, x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler(data.value), y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+      if (yOrZ == "x") {
+        x1 = orientation == 'left' ? marginLeft : scaler(data.value), x2 = orientation == 'left' ? width - marginRight : scaler(data.value), y1 = orientation == 'left' ? scaler(data.value) : marginLeft, y2 = orientation == 'left' ? scaler(data.value) : height - marginRight;
+      } else {
+        x1 = orientation == 'left' ? yScaler(data.value) : marginLeft, x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler(data.value), y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+      }
+    } //当坐标值存在undefined时，返回null
+
+
+    if ([x1, x2, y1, y2].some(function (d) {
+      return d == undefined;
+    })) {
+      return null;
     }
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {

package/lib/components/CartesianChart.js

@@ -70,7 +70,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       brush = _ref$config.brush,
       style = _ref.style,
       originData = _ref.originData,
-      filterData = _ref.filterData;
+      filterData = _ref.filterData,
+      aiFormatter = _ref.aiFormatter,
+      id = _ref.id;
   var context = (0, _react.useContext)(_context.chartContext);
 
   var _useState = (0, _react.useState)(false),
@@ -89,9 +91,27 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axes: axesConfig,
     context: context
   });
+  var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
   var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
   var xLineRange = width - marginLeft - marginRight;
   var yLineRange = height - marginTop - marginBottom;
+  (0, _react.useEffect)(function () {
+    if (aiData.length) {
+      if (!window.aiData) {
+        window.aiData = {};
+      }
+
+      window.aiData[id] = {
+        getAI: function getAI() {
+          return aiData;
+        }
+      };
+    }
+
+    return function () {
+      delete window.aiData[id];
+    };
+  }, [JSON.stringify(aiData), id]);
 
   var _useTooltip = (0, _hooks.useTooltip)({
     svg: svg,
@@ -225,7 +245,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       key: index,
       config: baseLineConfig[index],
       baseLineOri: baseLineOri,
+      yOrZ: yOrZ,
       yAxis: yAxis,
+      axisX: axisX,
       data: item
     });
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {

package/lib/hooks/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useAiData", {
+  enumerable: true,
+  get: function get() {
+    return _useAiData["default"];
+  }
+});
 Object.defineProperty(exports, "useAnimateData", {
   enumerable: true,
   get: function get() {
@@ -60,4 +66,6 @@ var _useAnimateData = _interopRequireDefault(require("./useAnimateData"));
 
 var _useCarouselAxisX = _interopRequireDefault(require("./useCarouselAxisX"));
 
-var _useExtentData = _interopRequireDefault(require("./useExtentData"));
+var _useExtentData = _interopRequireDefault(require("./useExtentData"));
+
+var _useAiData = _interopRequireDefault(require("./useAiData"));

package/lib/hooks/useAiData.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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"));
+
+//生成AI图表分析所需的数据
+var _default = function _default(data, axes, series) {
+  try {
+    var xAxis = axes.get("x");
+    var xType = xAxis.config.label.format.type == "date" ? "时间" : "类别";
+    var seriesMap = new Map(series.map(function (d) {
+      var type = d.yOrZ;
+      var yAxis = axes.get(type);
+      var _yAxis$config$unit = yAxis.config.unit,
+          show = _yAxis$config$unit.show,
+          text = _yAxis$config$unit.text;
+      var unit = show ? text : "";
+      return [d.name, d.displayName + (unit === "" ? "" : "(".concat(unit, ")"))];
+    }));
+    var res = new Map();
+    data.forEach(function (d) {
+      var x = d.x,
+          y = d.y,
+          s = d.s;
+      var arr = res.get(x);
+      var sObj = seriesMap.get(s);
+
+      if (arr) {
+        arr.push((0, _defineProperty2["default"])({}, sObj, y));
+      } else {
+        res.set(x, [(0, _defineProperty2["default"])({}, sObj, y)]);
+      }
+    });
+    return (0, _toConsumableArray2["default"])(res).map(function (d) {
+      var obj = (0, _defineProperty2["default"])({}, xType, d[0]);
+      d[1].forEach(function (v) {
+        var target = Object.entries(v)[0];
+        obj[target[0]] = target[1];
+      });
+      return obj;
+    });
+  } catch (e) {
+    console.error("生成AI数据失败：", e);
+  }
+
+  return [];
+};
+
+exports["default"] = _default;

package/package.json

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

package/src/components/Background.tsx

@@ -46,7 +46,6 @@ export default ({
         width: bandwidth,
         height: length,
       };
-
   return ticks.map((tick, index: number) => {
     return (
       <rect

package/src/components/BaseLine.js

@@ -34,11 +34,12 @@ export default memo(
         strokeDasharray,
       },
     },
-    yAxis: { scaler: yScaler,clipValue,isClipAxis },
+    yOrZ,
+    yAxis: { scaler: yScaler, clipValue, isClipAxis },
+    axisX: { scaler },
     data
   }) => {
     try{
-
       let x1,x2,y1,y2
       if (isClipAxis) {
         if (data.value > +clipValue) {
@@ -53,12 +54,22 @@ export default memo(
           y2 = orientation == 'left' ? height - marginRight : yScaler[1](data.value);
         }
       } else {
-        x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
-        x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
-        y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
-        y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+        if(yOrZ=="x"){
+          x1 = orientation == 'left' ? marginLeft:scaler(data.value),
+          x2 = orientation == 'left' ? width - marginRight:scaler(data.value),
+          y1 = orientation == 'left' ? scaler(data.value):marginLeft ,
+          y2 = orientation == 'left' ? scaler(data.value):height - marginRight;
+        }else{
+          x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
+          x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
+          y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
+          y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+        }
+      }
+      //当坐标值存在undefined时，返回null
+      if([x1,x2,y1,y2].some(d=>d==undefined)){
+        return null
       }
-     
       return (
         <>
           <g className='__easyv-baseLine' >

package/src/components/CartesianChart.js

@@ -8,8 +8,9 @@ import React, {
   useRef,
   useContext,
   useCallback,
+  useEffect
 } from 'react';
-import { useAxes, useTooltip, useCarouselAxisX } from '../hooks';
+import { useAxes, useTooltip, useCarouselAxisX, useAiData } from '../hooks';
 import { chartContext } from '../context';
 import {
   ChartContainer,
@@ -53,12 +54,13 @@ const Chart = memo(
         config: tooltipConfig = {},
         config: { auto, manual, indicator = {} } = {},
       } = {},
-      brush,
+      brush
     },
     style,
-    //data,
     originData,
     filterData,
+    aiFormatter,
+    id
   }) => {
     const context = useContext(chartContext);
     const [isHover, setIsHover] = useState(false);
@@ -70,10 +72,26 @@ const Chart = memo(
     } = useContext(chartContext);
     const svg = useRef();
     const axes = useAxes({ axes: axesConfig, context });
-
+    const aiData = aiFormatter?aiFormatter(originData, axes, series):useAiData(originData, axes, series);
     const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
     const xLineRange = width-marginLeft-marginRight;
     const yLineRange = height-marginTop-marginBottom;
+    
+    useEffect(()=>{
+      if(aiData.length){
+        if(!window.aiData){ 
+          window.aiData={};
+        }
+        window.aiData[id]={
+          getAI:()=>{
+            return aiData;
+          }
+        }
+      }
+      return ()=>{
+        delete window.aiData[id];
+      }
+    },[JSON.stringify(aiData),id]);
 
     const {
       x: tooltipX,
@@ -122,7 +140,7 @@ const Chart = memo(
       },
       [triggerOnRelative, onEmit]
     );
-
+    
     return (
       <>
         <ChartContainer
@@ -179,7 +197,7 @@ const Chart = memo(
                     />
                   )
                 );
-              })}
+              })} 
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
                 return (
@@ -218,7 +236,9 @@ const Chart = memo(
                     key={index}
                     config={baseLineConfig[index]}
                     baseLineOri={baseLineOri}
+                    yOrZ={yOrZ}
                     yAxis={yAxis}
+                    axisX={axisX}
                     data={item}
                   />
                 )

package/src/hooks/index.js

@@ -5,6 +5,7 @@ import useTooltip from './useTooltip';
 import useAnimateData from './useAnimateData';
 import useCarouselAxisX from './useCarouselAxisX';
 import useExtentData from './useExtentData';
+import useAiData from './useAiData';
 
 export {
   useFilterData,
@@ -14,4 +15,5 @@ export {
   useAnimateData,
   useCarouselAxisX,
   useExtentData,
+  useAiData
 };

package/src/hooks/useAiData.js

@@ -0,0 +1,42 @@
+//生成AI图表分析所需的数据
+export default (data, axes, series)=>{
+    try{
+        const xAxis = axes.get("x");
+        const xType = xAxis.config.label.format.type=="date"?"时间":"类别";
+        const seriesMap = new Map(series.map(d=>{
+            const type = d.yOrZ;
+            const yAxis = axes.get(type);
+            const { show, text } = yAxis.config.unit;
+            const unit = show?text:"";
+            return [d.name, d.displayName+(unit===""?"":`(${unit})`)];
+        }));
+        const res = new Map();
+        data.forEach(d=>{
+            const { x, y, s } = d;
+            const arr = res.get(x);
+            const sObj = seriesMap.get(s);
+            if(arr){
+                arr.push({
+                    [sObj]:y
+                });
+            }else{
+                res.set(x,[{
+                    [sObj]:y
+                }]);
+            }
+        });
+        return [...res].map(d=>{
+            const obj = {
+                [xType]:d[0]
+            }
+            d[1].forEach(v=>{
+                const target = Object.entries(v)[0];
+                obj[target[0]] = target[1];
+            });
+            return obj;
+        })
+    }catch(e){
+        console.error("生成AI数据失败：",e);
+    }
+    return [];
+}