tachybase_todo/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngine.tsx
jack zhang 705b7449f0
feat: new plugin manager, supports adding plugins through UI (#2430)
* 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>
2023-09-12 22:39:23 +08:00

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 };