tachybase_todo/packages/plugins/charts/src/client/index.tsx
chenos e6a2a292b3
feat: upgrade formily (#1880)
* feat: upgrade formily

* fix: upgrade @formily/json-schema

* fix: optimizing performance

* fix: performance code

* refactor: `React.memo` and `observer` component add `displayName` property

* fix: add cache to Schema.compile

* feat: 优化代码

* fix: 修复卡顿最终的问题

* Update SchemaComponentProvider.tsx

* feat: 再次优化代码

* feat: optimized code

---------

Co-authored-by: dream2023 <1098626505@qq.com>
2023-06-06 19:33:04 +08:00

105 lines
2.8 KiB
TypeScript

import { registerValidateRules } from '@formily/core';
import {
SchemaComponentOptions,
SchemaInitializerContext,
SettingsCenterProvider,
useAPIClient,
} from '@nocobase/client';
import JSON5 from 'json5';
import React, { useContext } from 'react';
import { ChartBlockEngine } from './ChartBlockEngine';
import { ChartBlockInitializer } from './ChartBlockInitializer';
import { ChartQueryMetadataProvider } from './ChartQueryMetadataProvider';
import './Icons';
import { lang } from './locale';
import { CustomSelect } from './select';
import { QueriesTable } from './settings/QueriesTable';
registerValidateRules({
json5: (value, rule) => {
if (!value) {
return '';
}
try {
const val = JSON5.parse(value);
if (!isNaN(val)) {
return {
type: 'error',
message: lang('Invalid JSON format'),
};
}
return '';
} catch (error) {
console.error(error);
return {
type: 'error',
message: lang('Invalid JSON format'),
};
}
},
});
const Charts = React.memo((props) => {
const api = useAPIClient();
const items = useContext(SchemaInitializerContext);
const children = items.BlockInitializers.items[0].children;
if (children) {
const hasChartItem = children.some((child) => child?.component === 'ChartBlockInitializer');
if (!hasChartItem) {
children.push({
key: 'chart',
type: 'item',
icon: 'PieChartOutlined',
title: '{{t("Chart",{ns:"charts"})}}',
component: 'ChartBlockInitializer',
});
}
}
const validateSQL = (sql) => {
return new Promise((resolve) => {
api
.request({
url: 'chartsQueries:validate',
method: 'post',
data: {
sql,
},
})
.then(({ data }) => {
resolve(data?.data?.errorMessage);
})
.catch(() => {
resolve('Invalid SQL');
});
});
};
return (
<ChartQueryMetadataProvider>
<SettingsCenterProvider
settings={{
charts: {
title: '{{t("Charts", {ns:"charts"})}}',
icon: 'PieChartOutlined',
tabs: {
queries: {
title: '{{t("Queries", {ns:"charts"})}}',
component: QueriesTable,
},
},
},
}}
>
<SchemaComponentOptions
scope={{ validateSQL }}
components={{ CustomSelect, ChartBlockInitializer, ChartBlockEngine }}
>
<SchemaInitializerContext.Provider value={items}>{props.children}</SchemaInitializerContext.Provider>
</SchemaComponentOptions>
</SettingsCenterProvider>
</ChartQueryMetadataProvider>
);
});
Charts.displayName = 'Charts';
export default Charts;