feat: improve chart component

This commit is contained in:
chenos 2022-06-21 11:30:37 +08:00
parent ecf82208eb
commit 151c3a32b8
3 changed files with 52 additions and 18 deletions

View File

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

View File

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

View File

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