85 lines
1.6 KiB
TypeScript
85 lines
1.6 KiB
TypeScript
|
import { APIClient, APIClientProvider, G2Plot, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
|
||
|
|
import MockAdapter from 'axios-mock-adapter';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
const api = new APIClient();
|
||
|
|
|
||
|
|
const mock = new MockAdapter(api.axios);
|
||
|
|
|
||
|
|
mock.onGet('/test').reply(200, {
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
Date: '2010-01',
|
||
|
|
scales: 1998,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-02',
|
||
|
|
scales: 1850,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-03',
|
||
|
|
scales: 1720,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-04',
|
||
|
|
scales: 1818,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-05',
|
||
|
|
scales: 1920,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-06',
|
||
|
|
scales: 1802,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-07',
|
||
|
|
scales: 1945,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-08',
|
||
|
|
scales: 1856,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Date: '2010-09',
|
||
|
|
scales: 2107,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
const fetchData = async (api: APIClient, options) => {
|
||
|
|
const response = await api.request(options);
|
||
|
|
return response?.data?.data;
|
||
|
|
};
|
||
|
|
|
||
|
|
const schema = {
|
||
|
|
type: 'void',
|
||
|
|
name: 'line',
|
||
|
|
'x-designer': 'G2Plot.Designer',
|
||
|
|
'x-decorator': 'CardItem',
|
||
|
|
'x-component': 'G2Plot',
|
||
|
|
'x-component-props': {
|
||
|
|
plot: 'Line',
|
||
|
|
config: {
|
||
|
|
data: '{{ fetchData(api, { url: "/test" }) }}',
|
||
|
|
padding: 'auto',
|
||
|
|
xField: 'Date',
|
||
|
|
yField: 'scales',
|
||
|
|
xAxis: {
|
||
|
|
// type: 'timeCat',
|
||
|
|
tickCount: 5,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default () => {
|
||
|
|
return (
|
||
|
|
<APIClientProvider apiClient={api}>
|
||
|
|
<SchemaComponentProvider>
|
||
|
|
<SchemaComponent schema={schema} components={{ G2Plot }} scope={{ api, fetchData }} />
|
||
|
|
</SchemaComponentProvider>
|
||
|
|
</APIClientProvider>
|
||
|
|
);
|
||
|
|
};
|