feat(chat-sdk/chatitem): 消息支持导出图表图片 (#1937)

webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx

@@ -8,12 +8,14 @@ import {
 } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';
 import classNames from 'classnames';
 import { isArray } from 'lodash';
+import { useExportByEcharts } from '../../../hooks';
+import { ChartItemContext } from '../../ChatItem';
 
 type Props = {
   model?: string;
@@ -37,15 +39,15 @@ const MetricTrendChart: React.FC<Props> = ({
   chartType,
 }) => {
   const chartRef = useRef<any>();
-  const [instance, setInstance] = useState<ECharts>();
+  const instanceRef = useRef<ECharts>();
 
   const renderChart = () => {
     let instanceObj: any;
-    if (!instance) {
+    if (!instanceRef.current) {
       instanceObj = echarts.init(chartRef.current);
-      setInstance(instanceObj);
+      instanceRef.current = instanceObj;
     } else {
-      instanceObj = instance;
+      instanceObj = instanceRef.current;
       instanceObj.clear();
     }
 
@@ -195,6 +197,15 @@ const MetricTrendChart: React.FC<Props> = ({
     instanceObj.resize();
   };
 
+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question: metricField.name,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
   useEffect(() => {
     if (metricField.authorized) {
       renderChart();
@@ -202,8 +213,8 @@ const MetricTrendChart: React.FC<Props> = ({
   }, [resultList, metricField, chartType]);
 
   useEffect(() => {
-    if (triggerResize && instance) {
-      instance.resize();
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
     }
   }, [triggerResize]);
 

webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx

@@ -2,10 +2,12 @@ import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../co
 import { getFormattedValue } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import { isArray } from 'lodash';
+import { ChartItemContext } from '../../ChatItem';
+import { useExportByEcharts } from '../../../hooks';
 
 type Props = {
   dateColumnName: string;
@@ -13,6 +15,7 @@ type Props = {
   resultList: any[];
   triggerResize?: boolean;
   chartType?: string;
+  question: string;
 };
 
 const MultiMetricsTrendChart: React.FC<Props> = ({
@@ -21,17 +24,17 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
   resultList,
   triggerResize,
   chartType,
+  question,
 }) => {
   const chartRef = useRef<any>();
-  const [instance, setInstance] = useState<ECharts>();
-
+  const instanceRef = useRef<ECharts>();
   const renderChart = () => {
     let instanceObj: any;
-    if (!instance) {
+    if (!instanceRef.current) {
       instanceObj = echarts.init(chartRef.current);
-      setInstance(instanceObj);
+      instanceRef.current = instanceObj;
     } else {
-      instanceObj = instance;
+      instanceObj = instanceRef.current;
       instanceObj.clear();
     }
 
@@ -132,13 +135,22 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
     instanceObj.resize();
   };
 
+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
   useEffect(() => {
     renderChart();
   }, [resultList, chartType]);
 
   useEffect(() => {
-    if (triggerResize && instance) {
-      instance.resize();
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
     }
   }, [triggerResize]);
 

webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx

@@ -100,6 +100,7 @@ const MetricTrend: React.FC<Props> = ({
               <MultiMetricsTrendChart
                 dateColumnName={dateColumnName}
                 metricFields={metricFields}
+                question={question}
                 resultList={queryResults}
                 triggerResize={triggerResize}
                 chartType={chartType}