feat(ava-react/insight-card): support copy insight result & canvas size change

packages/ava-react/src/InsightCard/InsightCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 
-import { Empty, notification, Row, Spin } from 'antd';
+import { Empty, message, Row, Spin } from 'antd';
 import cx from 'classnames';
 import { isFunction } from 'lodash';
 import { getInsights } from '@antv/ava';
@@ -11,8 +11,9 @@ import { generateContentVisSpec } from './utils/specGenerator';
 import { Title } from './Title';
 import { Toolbar } from './Toolbar';
 import { insightCardPresetPlugins } from './ntvPlugins';
-import { INSIGHT_CARD_PREFIX_CLS } from './constants';
+import { EXPORT_DATA_LABEL, INSIGHT_CARD_PREFIX_CLS } from './constants';
 import { Container } from './styled/container';
+import { defaultMoreButton } from './Toolbar/defaultTools';
 
 import type { InsightInfo } from '@antv/ava';
 import type { Tool } from './Toolbar/types';
@@ -90,14 +91,16 @@ export const InsightCard: React.FC<InsightCardProps> = ({
     onChange?.(currentInsightInfo, contentSpec);
   }, [currentInsightInfo, contentSpec]);
 
+  const onCopySuccess = () => {
+    message.success(visualizationOptions?.lang === 'zh-CN' ? '复制成功' : 'Copy Success');
+  };
+
   const onClickCopy = async () => {
     if (ref?.current) {
       const textExporter = new TextExporter([...insightCardPresetPlugins, ...extraPlugins]);
       const html = await textExporter.getNarrativeHtml(ref.current);
       const plainText = contentSpec ? textExporter.getNarrativeText(contentSpec) : '';
-      copyToClipboard(html, plainText, () => {
-        notification.success({ message: '复制成功' });
-      });
+      copyToClipboard(html, plainText, onCopySuccess);
       onCopy?.(currentInsightInfo, ref.current);
     }
   };
@@ -107,9 +110,22 @@ export const InsightCard: React.FC<InsightCardProps> = ({
       type: 'copy',
       onClick: onClickCopy,
     },
-    {
-      type: 'export',
-    },
+    defaultMoreButton({
+      items: [
+        { key: 'insightInfo', label: EXPORT_DATA_LABEL[visualizationOptions?.lang || 'en-US'].insightInfo },
+        { key: 'spec', label: EXPORT_DATA_LABEL[visualizationOptions?.lang || 'en-US'].insightInfo },
+      ],
+      onClick: (menuInfo) => {
+        if (menuInfo.key === 'insightInfo') {
+          const insightInfoString = JSON.stringify(currentInsightInfo);
+          copyToClipboard(insightInfoString, insightInfoString, onCopySuccess);
+        }
+        if (menuInfo.key === 'spec') {
+          const specString = JSON.stringify(contentSpec);
+          copyToClipboard(specString, specString, onCopySuccess);
+        }
+      },
+    }),
   ];
 
   if (!footerTools) {

packages/ava-react/src/InsightCard/Toolbar/constants.ts

@@ -1 +1 @@
-export const DEFAULT_TOOLS = ['copy', 'export'] as const;
+export const DEFAULT_TOOLS = ['copy', 'others'] as const;

packages/ava-react/src/InsightCard/Toolbar/defaultTools.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import { CopyOutlined, ExportOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
+import { CopyOutlined, MoreOutlined } from '@ant-design/icons';
+import { Button, Tooltip, Dropdown } from 'antd';
 
 import { INSIGHT_CARD_PREFIX_CLS } from '../constants';
 import { IconButton } from '../styled/iconButton';
 
 import type { BaseIconButtonProps, DefaultToolType } from './types';
+import type { DropdownProps } from 'antd';
 
 export const BaseIconButton: React.FC<BaseIconButtonProps> = ({ icon, onClick, description }) => {
   return (
@@ -37,18 +38,23 @@ const defaultCopyButton = () => {
   };
 };
 
-const defaultExportButton = () => {
+export const defaultMoreButton = (props: DropdownProps['menu'] = {}) => {
+  const { items, onClick } = props;
   return {
-    type: 'export',
-    description: 'export',
-    icon: <ExportOutlined />,
+    type: 'others',
+    description: '',
+    icon: (
+      <Dropdown menu={{ items, onClick }}>
+        <MoreOutlined />
+      </Dropdown>
+    ),
   };
 };
 
 export const getDefaultTool = (type: DefaultToolType) => {
   const toolsFunctionMap = {
     copy: defaultCopyButton,
-    export: defaultExportButton,
+    others: defaultMoreButton,
   };
   return toolsFunctionMap[type]?.();
 };

packages/ava-react/src/InsightCard/constants.tsx

@@ -20,3 +20,14 @@ export const CARD_CONTENT_HEIGHT = 48;
 export const CHART_HEIGHT = 280;
 /** chart carousel plugin key  */
 export const DISPLAY_CHARTS_PLUGIN_KEY = 'charts';
+
+export const EXPORT_DATA_LABEL = {
+  'zh-CN': {
+    insightInfo: '复制洞察结果',
+    spec: '复制可视化 schema',
+  },
+  'en-US': {
+    insightInfo: 'copy insight result data',
+    spec: 'copy visualization spec',
+  },
+};

packages/ava-react/src/InsightCard/index.ts

@@ -1,3 +1,3 @@
-export type { ToolbarProps as InsightCardToolBarProps } from './Toolbar/types';
 export { InsightCard } from './InsightCard';
-export { InsightCardProps } from './types';
+export type { ToolbarProps as InsightCardToolBarProps } from './Toolbar/types';
+export type { InsightCardProps } from './types';

packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx

@@ -7,7 +7,6 @@ import { INSIGHT_CARD_PREFIX_CLS } from '../../constants';
 export const G2Chart = ({ spec, height, width }: { spec: G2Spec; height?: number; width?: number }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const chartRef = React.useRef<Chart>(null);
-
   useEffect(() => {
     if (!chartRef?.current) {
       chartRef.current = new Chart({ container: containerRef?.current, autoFit: true });
@@ -26,6 +25,20 @@ export const G2Chart = ({ spec, height, width }: { spec: G2Spec; height?: number
     chartRef.current.render();
   }, [spec]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      chartRef.current?.options({
+        width: containerRef.current?.clientWidth,
+        height: containerRef.current?.clientHeight,
+      });
+      chartRef.current?.render();
+    };
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(containerRef.current);
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
   return (
     <div className={`${INSIGHT_CARD_PREFIX_CLS}-chart-container`}>
       <div ref={containerRef} style={{ height, width }} />