* refactor: plugin manager page * fix: bug * feat: addByNpm api * fix: improve the addByNpm * feat: improve applicationPlugins:list api * fix: re-download npm package when restart app * fix: plugin delete api * feat: plugin detail api * feat: zipUrl add api * fix: upload api bug * fix: plugin detail info * feat: upgrade api * fix: upload api * feat: handle plugin load error * feat: support authToken * feat: muti lang * fix: build error * fix: self review * Update plugin-manager.ts * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bugs * fix: detail click and remove isOfficial * fix: upgrade no refresh * fix: file size and type check * fix: bug * fix: upgrade error * fix: bug * fix: bug * fix: plugin card layout * fix: handling exceptional cases * fix: tgz file support * fix: macos compress file * fix: bug * fix: bug * fix: bug * fix: bug * fix: add upgrade npm type * fix: bugs * fix: bug * fix: change plugins static expose url * fix: api prefix * fix: bug * fix: add nginx `/static/plugin/` path * fix: bugs and pr docker build no dts * fix: bug * fix: build tools bug * fix: improve code * fix: build bug * feat: improve plugin info * fix: ui bug * fix: plugin document bug * feat: improve code * feat: improve code * feat: process dev deps check * feat: improve code * feat: process.env.IS_DEV_CMD * fix: do not delete the plugin package * feat: plugin symlink * fix: tsx watch --ignore=./storage/plugins/** * fix: test error * fix: improve code * fix: improve code * fix: emitStartedEvent * fix: improve code * fix: type error * fix: test error * test: console.log * fix: createStoragePluginSymLink * fix: clientStaticMiddleware rename to clientStaticUtils * feat: build tools support plugins folder * fix: 350px * fix: error * feat: client dev support plugin folder * fix: clear cli options * fix: typeError: Converting circular structure to JSON * fix: plugin name * chore: restart application after command * feat: upgrade error & docs * Update v14-changelog.md * Update v14-changelog.md * Update v14-changelog.md * fix: gateway test * refactor(plugin-workflow): add ready state for gracefully tearing down * Revert "chore: restart application after command" This reverts commit 5015274f8e4e06e506e15754b672330330e8c7f8. * chore: stop application whe restart * T 1218 change plugin folder (#2629) * feat: change folder name * feat: change `pm create` command * feat: revert plugin name change * fix: delete samples * feat: change plugins folder * fix: pm create * feat: update docs * fix: link package error * fix: docs * fix: create command * fix: pm add error * fix: create add build * fix: pm creatre + add * feat: add tar command * fix: docs * fix: bug * fix: docs --------- Co-authored-by: chenos <chenlinxh@gmail.com> * feat: docs * Update your-fisrt-plugin.md * Update your-fisrt-plugin.md * chore: application reload * chore: test * fix: pm add error * chore: preset install skip exists plugin * fix: createIfNotExists --------- Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: chareice <chareice@live.com> Co-authored-by: Zhou <zhou.working@gmail.com> Co-authored-by: mytharcher <mytharcher@gmail.com>
122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
import { useCompile, useRequest } from '@nocobase/client';
|
|
import { Empty, Spin } from 'antd';
|
|
import JSON5 from 'json5';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { ChartBlockEngineDesigner } from './ChartBlockEngineDesigner';
|
|
import chartRenderComponentsMap from './chartRenderComponents';
|
|
import { lang } from './locale';
|
|
import { templates } from './templates';
|
|
|
|
export interface IQueryConfig {
|
|
id: number;
|
|
}
|
|
export interface IChartConfig {
|
|
type: string;
|
|
template: string;
|
|
metric: string;
|
|
dimension: string;
|
|
category?: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export interface ChartBlockEngineMetaData {
|
|
query: IQueryConfig;
|
|
chart: IChartConfig;
|
|
}
|
|
|
|
const ChartRenderComponent = ({
|
|
chartBlockEngineMetaData,
|
|
}: {
|
|
chartBlockEngineMetaData: ChartBlockEngineMetaData;
|
|
}): JSX.Element => {
|
|
const compile = useCompile();
|
|
const chartType = chartBlockEngineMetaData.chart.type;
|
|
const renderComponent = templates.get(chartType)?.renderComponent;
|
|
const RenderComponent = chartRenderComponentsMap.get(renderComponent); //G2Plot | Echarts | D3 |Table
|
|
const chartConfig = chartBlockEngineMetaData.chart;
|
|
const { loading, dataSet, error } = useGetDataSet(chartBlockEngineMetaData.query.id);
|
|
|
|
const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
|
|
|
|
useEffect(() => {
|
|
setCurrentConfig(chartConfig);
|
|
}, [JSON.stringify(chartConfig)]);
|
|
|
|
if (error) {
|
|
return (
|
|
<>
|
|
<Empty description={<span>{`May be this chart block's query data has been deleted,please check!`}</span>} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (currentConfig.type !== chartConfig.type) {
|
|
return <></>;
|
|
}
|
|
|
|
switch (renderComponent) {
|
|
case 'G2Plot': {
|
|
const finalChartOptions = templates.get(chartType)?.defaultChartOptions;
|
|
let template;
|
|
try {
|
|
template = JSON5.parse(chartConfig?.template);
|
|
} catch (e) {
|
|
template = {};
|
|
}
|
|
const config = compile(
|
|
{
|
|
...finalChartOptions,
|
|
...template,
|
|
data: dataSet,
|
|
},
|
|
{ ...chartConfig, category: chartConfig?.category ?? '' },
|
|
);
|
|
if (config && chartConfig) {
|
|
const { dimension, metric, category } = chartConfig;
|
|
if (!metric || !dimension) {
|
|
return <>{lang('Please check the chart config')}</>;
|
|
}
|
|
}
|
|
return <>{loading ? <Spin /> : <RenderComponent plot={chartConfig.type} config={config} />}</>;
|
|
}
|
|
}
|
|
return <></>;
|
|
};
|
|
|
|
export const useGetDataSet = (chartQueryId: number) => {
|
|
const { data, loading, error } = useRequest<{
|
|
data: any;
|
|
}>({
|
|
url: `/chartsQueries:getData/${chartQueryId}`,
|
|
});
|
|
const dataSet = data?.data;
|
|
return {
|
|
loading,
|
|
dataSet: dataSet,
|
|
error,
|
|
};
|
|
};
|
|
|
|
const ChartBlockEngine = ({ chartBlockEngineMetaData }: { chartBlockEngineMetaData: ChartBlockEngineMetaData }) => {
|
|
let renderComponent;
|
|
const chartType = chartBlockEngineMetaData?.chart?.type;
|
|
|
|
if (chartType) {
|
|
renderComponent = templates.get(chartType)?.renderComponent;
|
|
}
|
|
|
|
if (!chartType || !renderComponent) {
|
|
return <>{lang('Please check the chart config')}</>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ChartRenderComponent chartBlockEngineMetaData={chartBlockEngineMetaData} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
ChartBlockEngine.Designer = ChartBlockEngineDesigner;
|
|
|
|
export { ChartBlockEngine };
|