tachybase_todo/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx

155 lines
4.9 KiB
TypeScript

import { useField, useFieldSchema } from '@formily/react';
import {
GeneralSchemaDesigner,
SchemaSettingsBlockTitleItem,
SchemaSettingsDivider,
SchemaSettingsItem,
SchemaSettingsRemove,
gridRowColWrap,
useAPIClient,
useCollection_deprecated,
useDataSource,
useDesignable,
} from '@nocobase/client';
import { Empty, Result, Spin, Typography } from 'antd';
import React, { useContext, useEffect, useRef } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ChartConfigContext } from '../configure';
import { useData, useFieldTransformer, useFieldsWithAssociation } from '../hooks';
import { useChartsTranslation } from '../locale';
import { createRendererSchema, getField } from '../utils';
import { ChartRendererContext } from './ChartRendererProvider';
import { useChart } from '../chart/group';
import { ChartDataContext } from '../block/ChartDataProvider';
const { Paragraph, Text } = Typography;
export const ChartRenderer: React.FC & {
Designer: React.FC;
} = (props) => {
const { t } = useChartsTranslation();
const ctx = useContext(ChartRendererContext);
const { config, transform, dataSource, collection, service, data: _data } = ctx;
const fields = useFieldsWithAssociation(dataSource, collection);
const data = useData(_data, dataSource, collection);
const general = config?.general || {};
const advanced = config?.advanced || {};
const api = useAPIClient();
const chartRef = useRef(null);
const [height, setHeight] = React.useState<number>(0);
const chart = useChart(config?.chartType);
const locale = api.auth.getLocale();
const transformers = useFieldTransformer(transform, locale);
const chartProps = chart?.getProps({
data,
general,
advanced,
fieldProps: Object.keys(data[0] || {}).reduce((props, name) => {
if (!props[name]) {
const field = getField(fields, name.split('.'));
const transformer = transformers[name];
props[name] = { label: field?.label || name, transformer, interface: field?.interface };
}
return props;
}, {}),
});
const C = chart?.Component;
useEffect(() => {
const el = chartRef.current;
if (!el || service.loading === true) {
return;
}
const observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
setHeight(entry.contentRect.height);
});
});
observer.observe(el);
return () => observer.disconnect();
}, [service.loading]);
if (!chart) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />;
}
if (!(data && data.length) && !service.loading) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('No data')} />;
}
return (
<Spin spinning={service.loading}>
<ErrorBoundary
onError={(error) => {
console.error(error);
}}
FallbackComponent={ErrorFallback}
>
<div ref={chartRef} style={height ? { height: `${height}px` } : {}}>
<C {...chartProps} />
</div>
</ErrorBoundary>
</Spin>
);
};
ChartRenderer.Designer = function Designer() {
const { t } = useChartsTranslation();
const { setVisible, setCurrent } = useContext(ChartConfigContext);
const { removeChart } = useContext(ChartDataContext);
const { service } = useContext(ChartRendererContext);
const field = useField();
const schema = useFieldSchema();
const { insertAdjacent } = useDesignable();
const dataSource = useDataSource();
const { name, title } = useCollection_deprecated();
return (
<GeneralSchemaDesigner disableInitializer title={title || name}>
<SchemaSettingsItem
title="Configure"
key="configure"
onClick={async () => {
setCurrent({ schema, field, dataSource: dataSource.key, collection: name, service, data: service.data });
setVisible(true);
}}
>
{t('Configure')}
</SchemaSettingsItem>
<SchemaSettingsItem
title="Duplicate"
key="duplicate"
onClick={() => insertAdjacent('afterEnd', gridRowColWrap(createRendererSchema(schema?.['x-decorator-props'])))}
>
{t('Duplicate')}
</SchemaSettingsItem>
<SchemaSettingsBlockTitleItem />
<SchemaSettingsDivider />
<SchemaSettingsRemove
// removeParentsIfNoChildren
breakRemoveOn={{
'x-component': 'ChartV2Block',
}}
confirm={{
onOk: () => {
removeChart(schema['x-uid']);
},
}}
/>
</GeneralSchemaDesigner>
);
};
const ErrorFallback = ({ error }) => {
const { t } = useChartsTranslation();
return (
<div style={{ backgroundColor: 'white' }}>
<Result status="error" title={t('Render Failed')} subTitle={t('Please check the configuration.')}>
<Paragraph copyable>
<Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
{error.message}
</Text>
</Paragraph>
</Result>
</div>
);
};