feat: improve chart component

packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx

@@ -5,6 +5,7 @@ import { Spin } from 'antd';
 import cls from 'classnames';
 import React, { forwardRef, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAPIClient } from '../../../api-client';
 import { G2PlotDesigner } from './G2PlotDesigner';
 
 export type ReactG2PlotProps<O> = {
@@ -60,28 +61,43 @@ export const G2Plot: any = observer((props: any) => {
   const { plot, config } = props;
   const field = useField<Field>();
   const { t } = useTranslation();
+  const api = useAPIClient();
   useEffect(() => {
     field.data = field.data || {};
-    if (typeof config?.data?.then === 'function') {
-      field.data.loaded = false;
-      config?.data?.then((data) => {
+    field.data.loading = true;
+    const fn = config?.data;
+    if (typeof fn === 'function') {
+      const result = fn.bind({ api })();
+      if (result?.then) {
+        result.then(data => {
+          if (Array.isArray(data)) {
             field.componentProps.config.data = data;
-        field.data.loaded = true;
+          }
+          field.data.loading = false;
         });
       } else {
-      field.data.loaded = true;
+        field.data.loading = false;
       }
-  }, []);
+    } else {
+      field.data.loading = false;
+    }
+  }, [])
   if (!plot || !config) {
     return <div style={{ opacity: 0.3 }}>{t('In configuration')}...</div>;
   }
-  if (!field?.data?.loaded) {
+  if (field?.data?.loading !== false) {
     return <Spin />;
   }
   return (
     <div>
       {field.title && <h2>{field.title}</h2>}
-      <G2PlotRenderer plot={plots[plot]} config={config} />
+      <G2PlotRenderer
+        plot={plots[plot]}
+        config={{
+          ...config,
+          data: Array.isArray(config?.data) ? config.data : [],
+        }}
+      />
     </div>
   );
 });

packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx

@@ -1,6 +1,7 @@
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAPIClient } from '../../../api-client';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useCompile, useDesignable } from '../../hooks';
 
@@ -29,9 +30,9 @@ export const G2PlotDesigner = () => {
   const fieldSchema = useFieldSchema();
   const field = useField();
   const compile = useCompile();
+  const api = useAPIClient();
   return (
     <GeneralSchemaDesigner>
-      <SchemaSettings.BlockTitleItem />
       <SchemaSettings.ModalItem
         title={t('Edit chart')}
         schema={
@@ -68,15 +69,30 @@ export const G2PlotDesigner = () => {
             },
           } as ISchema
         }
-        onSubmit={({ plot, title, config }) => {
+        // {{ fetchData(api, { url: 'chartData:get' }) }}
+        onSubmit={async ({ plot, title, config }) => {
           field.title = compile(title);
           field.componentProps.plot = plot;
-          field.componentProps.config = compile(JSON.parse(config));
+          const conf = compile(JSON.parse(config));
+          const fn = conf?.data;
+          if (typeof fn === 'function') {
+            const result = fn.bind({ api })();
+            if (result?.then) {
+              result.then(data => {
+                if (Array.isArray(data)) {
+                  field.componentProps.config.data = data;
+                }
+              });
+            }
+          } else {
+            field.componentProps.config = conf;
+          }
           fieldSchema.title = title;
           fieldSchema['x-component-props']['plot'] = plot;
           fieldSchema['x-component-props']['config'] = JSON.parse(config);
           dn.emit('patch', {
             schema: {
+              title,
               'x-uid': fieldSchema['x-uid'],
               'x-component-props': fieldSchema['x-component-props'],
             },

packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx

@@ -47,9 +47,11 @@ mock.onGet('/test').reply(200, {
   ],
 });
 
-const fetchData = async (api: APIClient, options) => {
-  const response = await api.request(options);
+const requestChartData = (options) => {
+  return async function (this: { api: APIClient }) {
+    const response = await this.api.request(options);
     return response?.data?.data;
+  };
 };
 
 const schema = {
@@ -61,7 +63,7 @@ const schema = {
   'x-component-props': {
     plot: 'Line',
     config: {
-      data: '{{ fetchData(api, { url: "/test" }) }}',
+      data: '{{ requestChartData({ url: "/test" }) }}',
       padding: 'auto',
       xField: 'Date',
       yField: 'scales',
@@ -77,7 +79,7 @@ export default () => {
   return (
     <APIClientProvider apiClient={api}>
       <SchemaComponentProvider>
-        <SchemaComponent schema={schema} components={{ G2Plot }} scope={{ api, fetchData }} />
+        <SchemaComponent schema={schema} components={{ G2Plot }} scope={{ requestChartData }} />
       </SchemaComponentProvider>
     </APIClientProvider>
   );