import { FormLayout } from '@formily/antd-v5'; import { Field } from '@formily/core'; import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useForm } from '@formily/react'; import { APIClientProvider, FormDialog, FormProvider, SchemaComponent, SchemaComponentOptions, css, useAPIClient, useCompile, useGlobalTheme, } from '@nocobase/client'; import { Card } from 'antd'; import JSON5 from 'json5'; import React, { useContext, useEffect, useState } from 'react'; import { ChartBlockEngineMetaData } from './ChartBlockEngine'; import { jsonConfigDesc } from './ChartBlockEngineDesigner'; import { ChartQueryBlockInitializer, ChartQueryMetadata } from './ChartQueryBlockInitializer'; import DataSetPreviewTable from './DataSetPreviewTable'; import { lang } from './locale'; import { templates } from './templates'; export const Options = observer( (props) => { const form = useForm(); const field = useField(); const [s, setSchema] = useState(new Schema({})); const [chartType, setChartType] = useState(form.values.type); useEffect(() => { // form.clearFormGraph('options.*'); setChartType(form?.values?.type); if (chartType !== form?.values?.type) { form.clearFormGraph('options.*'); } if (form.values.type) { const template = templates.get(form.values.type); setSchema(new Schema(template.configurableProperties || {})); } }, [form.values.type]); return ; }, { displayName: 'Options' }, ); interface ChartFormInterface { type: string; template: string; metric: string; dimension: string; category?: string; [key: string]: string; } export const ChartBlockInitializer = (props) => { const { insert } = props; const options = useContext(SchemaOptionsContext); const api = useAPIClient(); const compile = useCompile(); const { theme } = useGlobalTheme(); return ( { const dataSource = chartQueryMetadata?.fields.map((field) => { return { label: field.name, value: field.name, }; }); const values = await FormDialog( { okText: compile('{{t("Submit")}}'), title: lang('Create chart block'), width: 1200, bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' }, }, function Com() { const form = useForm(); const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState(null); useEffect(() => { const chartBlockEngineMetaData = { query: { id: chartQueryMetadata?.id, }, chart: form.values, //TODO }; setChartBlockEngineMetaData(chartBlockEngineMetaData); }, [form.values.type]); return (
{/* left*/} { return { title: template.title, key: template.type, description: template.description, group: template.group, iconId: template.iconId, }; }), }, options: { type: 'void', 'x-component': 'Options', }, }, }} /> {/* right*/}
{/* Chart Preview*/} {chartBlockEngineMetaData && ( <> )} {/*Data preview*/} {chartBlockEngineMetaData?.query?.id && ( )}
); }, theme, ).open({ initialValues: {}, }); if (values) { const chartBlockEngineMetaData: ChartBlockEngineMetaData = { query: { id: chartQueryMetadata.id, }, chart: values, }; insert({ type: 'void', title: values?.title, 'x-designer': 'ChartBlockEngine.Designer', 'x-decorator': 'CardItem', 'x-component': 'ChartBlockEngine', 'x-component-props': { chartBlockEngineMetaData, }, }); } }} /> ); };