feat: improve chart component
This commit is contained in:
parent
ecf82208eb
commit
151c3a32b8
@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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'],
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user