@easyv/charts 1.4.19 → 1.4.21

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,

package/lib/components/PieChart.js

@@ -37,6 +37,8 @@ var _formatter = require("../formatter");
 
 var _piechartModule = _interopRequireDefault(require("../css/piechart.module.css"));
 
+var _hooks = require("../hooks");
+
 var _excluded = ["startAngle", "endAngle", "antiClockwise"],
     _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
     _excluded3 = ["formatter"],
@@ -523,6 +525,24 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       animation = null;
     };
   }, [JSON.stringify(arcs), on, currentIndex, trigger, onEmit, triggerOnRelative]);
+  var aiData = (0, _hooks.useAiDataOfPie)(_arcs, legend);
+  (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 halfChartWidth = chartWidth / 2;
   var halfChartHeight = chartHeight / 2;
   var rotate_ = decorate2 ? -(arcs[+currentIndex].startAngle + arcs[+currentIndex].endAngle) * 90 / Math.PI + rotate : 0;

package/lib/hooks/index.js

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

package/lib/hooks/useAiData.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAiDataOfPie = exports.useAiData = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+//生成AI图表分析所需的数据
+var useAiData = function useAiData(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 [];
+}; //生成饼图的AI图表分析所需的数据
+
+
+exports.useAiData = useAiData;
+
+var useAiDataOfPie = function useAiDataOfPie(series, legend) {
+  try {
+    var _legend$config$value$ = legend.config.value.suffix,
+        show = _legend$config$value$.show,
+        text = _legend$config$value$.text;
+    return series.map(function (d) {
+      var _ref2;
+
+      return _ref2 = {}, (0, _defineProperty2["default"])(_ref2, d.displayName, d.value + (show ? text : "")), (0, _defineProperty2["default"])(_ref2, "占比值", d.percent + "%"), _ref2;
+    });
+  } catch (e) {// console.error("生成ai数据失败：",e);
+  }
+
+  return [];
+};
+
+exports.useAiDataOfPie = useAiDataOfPie;

package/package.json

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

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 (

package/src/components/PieChart.js

@@ -7,6 +7,7 @@ import React, {
   useCallback,
   useRef,
   useState,
+  useEffect,
   useContext,
   useLayoutEffect,
   Fragment,
@@ -24,6 +25,7 @@ import { animate, linear } from 'popmotion';
 import LinearGradient from './LinearGradient';
 import { pieLegendFormatter as legendFormatter } from '../formatter';
 import ringCss from '../css/piechart.module.css';
+import { useAiDataOfPie } from '../hooks';
 
 const PI = Math.PI;
 
@@ -284,7 +286,6 @@ const Component = memo(
       triggerOnRelative,
       onEmit,
     } = useContext(chartContext);
-
     const [y, setY] = useState(1);
     const radius = (Math.min(chartWidth, chartHeight) / 2) * outerRadius;
 
@@ -382,7 +383,7 @@ const Component = memo(
       if(_series.length<arcs.length) console.warn("请检查数据中是否存在相同的s");
       return arcs.map((arc, index) => getArc(radius, arc, _series, index));
     }, [series, arcs, radius]);
-
+    
     const onClick = useCallback(
       (e) =>
         onEvent({
@@ -448,6 +449,22 @@ const Component = memo(
       onEmit,
       triggerOnRelative,
     ]);
+    const aiData = useAiDataOfPie(_arcs, legend);
+    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 halfChartWidth = chartWidth / 2;
     const halfChartHeight = chartHeight / 2;

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, useAiDataOfPie } from './useAiData';
 
 export {
   useFilterData,
@@ -14,4 +15,6 @@ export {
   useAnimateData,
   useCarouselAxisX,
   useExtentData,
+  useAiData,
+  useAiDataOfPie
 };

package/src/hooks/useAiData.js

@@ -0,0 +1,58 @@
+//生成AI图表分析所需的数据
+export const useAiData = (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 [];
+}
+
+//生成饼图的AI图表分析所需的数据
+export const useAiDataOfPie = (series, legend)=>{
+    try{
+        const { show, text } = legend.config.value.suffix;
+        return series.map(d=>{
+            return {
+                [d.displayName]:d.value+(show?text:""),
+                "占比值":d.percent+"%"
+            }
+        })
+    }catch(e){
+        // console.error("生成ai数据失败：",e);
+    }
+    return [];
+}