@nocobase/plugin-charts 0.9.1-alpha.2

package/src/client/ChartBlockEngine.tsx

@@ -0,0 +1,120 @@
+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);
+
+  if (error) {
+    return (
+      <>
+        <Empty description={<span>May be this chart block's query data has been deleted,please check!</span>} />
+      </>
+    );
+  }
+
+  const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
+
+  useEffect(() => {
+    setCurrentConfig(chartConfig);
+  }, [JSON.stringify(chartConfig)]);
+
+  if (currentConfig.type !== chartConfig.type) {
+    return <></>;
+  }
+
+  switch (renderComponent) {
+    case 'G2Plot': {
+      let finalChartOptions;
+      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({
+    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 };

package/src/client/ChartBlockEngineDesigner.tsx

@@ -0,0 +1,238 @@
+import { css } from '@emotion/css';
+import { FormDialog, FormLayout } from '@formily/antd';
+import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
+import {
+  APIClientProvider,
+  GeneralSchemaDesigner,
+  i18n,
+  SchemaComponent,
+  SchemaComponentOptions,
+  SchemaSettings,
+  useAPIClient,
+  useCompile,
+  useDesignable,
+} from '@nocobase/client';
+import { Card } from 'antd';
+import JSON5 from 'json5';
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChartBlockEngineMetaData } from './ChartBlockEngine';
+import { Options } from './ChartBlockInitializer';
+import DataSetPreviewTable from './DataSetPreviewTable';
+import { useFieldsById } from './hooks';
+import { lang } from './locale';
+import { templates } from './templates';
+
+export const jsonConfigDesc = (title: string, link: string) => {
+  return (
+    <span>
+      {lang('Json config references: ')}
+      <a href={link} target="_blank">
+        {lang(title)}
+      </a>
+    </span>
+  );
+};
+
+const validateJSON = {
+  validator: `{{(value, rule)=> {
+    if (!value) {
+      return '';
+    }
+    try {
+      const val = JSON.parse(value);
+      if(!isNaN(val)) {
+        return false;
+      }
+      return true;
+    } catch(error) {
+      console.error(error);
+      return false;
+    }
+  }}}`,
+  message: '{{t("Invalid JSON format",{ ns: "charts" })}}',
+};
+
+export const ChartBlockEngineDesigner = () => {
+  const fieldSchema = useFieldSchema();
+  const { chartBlockEngineMetaData } = fieldSchema?.['x-component-props'];
+  return (
+    <GeneralSchemaDesigner>
+      <ChartBlockEngineDesignerInitializer chartBlockEngineMetaData={chartBlockEngineMetaData} />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
+
+export const ChartBlockEngineDesignerInitializer = (props) => {
+  const { chartBlockEngineMetaData }: { chartBlockEngineMetaData: ChartBlockEngineMetaData } = props;
+  const { t } = useTranslation();
+  const options = useContext(SchemaOptionsContext);
+  const { dn } = useDesignable();
+  const fieldSchema = useFieldSchema();
+  const api = useAPIClient();
+  const field = useField();
+  const compile = useCompile();
+  const { chart, query } = chartBlockEngineMetaData;
+  const { fields } = useFieldsById(query.id);
+  const dataSource = fields.map((field) => {
+    return {
+      label: field.name,
+      value: field.name,
+    };
+  });
+  return (
+    <SchemaSettings.Item
+      onClick={async () => {
+        FormDialog(
+          {
+            okText: compile('{{t("Submit")}}'),
+            title: lang('Edit chart block'),
+            width: 1200,
+            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+          },
+          (form) => {
+            const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
+            useEffect(() => {
+              const chartBlockEngineMetaData = {
+                query: {
+                  id: query?.id,
+                },
+                chart: form.values, //TODO
+              };
+              setChartBlockEngineMetaData(chartBlockEngineMetaData);
+            }, [form.values.type]);
+            return (
+              <APIClientProvider apiClient={api}>
+                <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                  <section
+                    className={css`
+                      display: flex;
+                      gap: 24px;
+                    `}
+                  >
+                    {/*  left*/}
+                    <Card
+                      bordered={false}
+                      title={i18n.t('Chart config')}
+                      size={'default'}
+                      className={css`
+                        flex: 1;
+                      `}
+                    >
+                      <FormLayout layout={'vertical'}>
+                        <SchemaComponent
+                          scope={{ dataSource, JSON5, jsonConfigDesc }}
+                          components={{ Options }}
+                          schema={{
+                            properties: {
+                              // title: {
+                              //   title: lang('Chart title'),
+                              //   'x-component': 'Input',
+                              //   'x-decorator': 'FormItem',
+                              // },
+                              type: {
+                                title: t('Chart type'),
+                                required: true,
+                                'x-component': 'CustomSelect',
+                                'x-decorator': 'FormItem',
+                                enum: [...templates.values()].map((template) => {
+                                  return {
+                                    title: template.title,
+                                    key: template.type,
+                                    description: template.description,
+                                    group: template.group,
+                                    iconId: template.iconId,
+                                  };
+                                }),
+                              },
+                              options: {
+                                type: 'void',
+                                'x-component': 'Options',
+                              },
+                            },
+                          }}
+                        />
+                      </FormLayout>
+                    </Card>
+                    {/*  right*/}
+                    <div
+                      className={css`
+                        flex: 1;
+                        min-width: 600px;
+                      `}
+                    >
+                      <Card size={'default'} title={lang('Chart preview')}>
+                        {/*  Chart Preview*/}
+                        {chartBlockEngineMetaData && (
+                          <>
+                            <SchemaComponent
+                              schema={{
+                                properties: {
+                                  chartPreview: {
+                                    type: 'void',
+                                    'x-decorator': 'CardItem',
+                                    'x-component': 'ChartBlockEngine',
+                                    'x-component-props': {
+                                      chartBlockEngineMetaData: chartBlockEngineMetaData,
+                                    },
+                                  },
+                                },
+                              }}
+                            />
+                          </>
+                        )}
+                      </Card>
+                      <Card
+                        size={'default'}
+                        title={lang('Data preview')}
+                        className={css`
+                          margin-top: 24px;
+                          overflow: scroll;
+                        `}
+                      >
+                        {/*Data preview*/}
+                        {chartBlockEngineMetaData?.query?.id && (
+                          <DataSetPreviewTable queryId={chartBlockEngineMetaData?.query?.id} fields={fields} />
+                        )}
+                      </Card>
+                    </div>
+                  </section>
+                </SchemaComponentOptions>
+              </APIClientProvider>
+            );
+          },
+        )
+          .open({
+            initialValues: { ...chart }, //reset before chartBlockMetaData
+          })
+          .then((values) => {
+            //patch updates
+            values = {
+              query,
+              chart: values,
+            };
+            field.title = values.chart.title;
+            fieldSchema['title'] = values.chart.title;
+            field.componentProps.chartBlockEngineMetaData = values;
+            fieldSchema['x-component-props'].chartBlockEngineMetaData = values;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-component-props': fieldSchema['x-component-props'],
+              },
+            });
+            dn.refresh();
+          });
+      }}
+    >
+      {props.children || props.title || lang('Edit chart block')}
+    </SchemaSettings.Item>
+  );
+};

package/src/client/ChartBlockInitializer.tsx

@@ -0,0 +1,216 @@
+import { css } from '@emotion/css';
+import { FormDialog, FormLayout } from '@formily/antd';
+import { Field } from '@formily/core';
+import { observer, RecursionField, Schema, SchemaOptionsContext, useField, useForm } from '@formily/react';
+import {
+  APIClientProvider,
+  FormProvider,
+  SchemaComponent,
+  SchemaComponentOptions,
+  useAPIClient,
+  useCompile,
+} 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, useChartsTranslation } from './locale';
+import { templates } from './templates';
+
+export const Options = observer((props) => {
+  const form = useForm<ChartFormInterface>();
+  const field = useField<Field>();
+  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 <RecursionField schema={s} />;
+});
+
+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 { t } = useChartsTranslation();
+  return (
+    <ChartQueryBlockInitializer
+      {...props}
+      componentType={'Charts'}
+      onCreateBlockSchema={async ({ item: chartQueryMetadata }: { item: ChartQueryMetadata }) => {
+        const dataSource = chartQueryMetadata?.fields.map((field) => {
+          return {
+            label: field.name,
+            value: field.name,
+          };
+        });
+        let values = await FormDialog(
+          {
+            okText: compile('{{t("Submit")}}'),
+            title: lang('Create chart block'),
+            width: 1200,
+            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+          },
+          () => {
+            const form = useForm<ChartFormInterface>();
+            const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
+            useEffect(() => {
+              const chartBlockEngineMetaData = {
+                query: {
+                  id: chartQueryMetadata?.id,
+                },
+                chart: form.values, //TODO
+              };
+              setChartBlockEngineMetaData(chartBlockEngineMetaData);
+            }, [form.values.type]);
+            return (
+              <APIClientProvider apiClient={api}>
+                <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                  <section
+                    className={css`
+                      display: flex;
+                      gap: 24px;
+                    `}
+                  >
+                    {/*  left*/}
+                    <Card
+                      title={lang('Chart config')}
+                      size={'default'}
+                      className={css`
+                        flex: 1;
+                      `}
+                    >
+                      <FormProvider form={form}>
+                        <FormLayout layout={'vertical'}>
+                          <SchemaComponent
+                            scope={{ dataSource, JSON5, jsonConfigDesc }}
+                            components={{ Options }}
+                            schema={{
+                              properties: {
+                                // title: {
+                                //   title: lang('Chart title'),
+                                //   'x-component': 'Input',
+                                //   'x-decorator': 'FormItem',
+                                // },
+                                type: {
+                                  title: lang('Chart type'),
+                                  required: true,
+                                  'x-component': 'CustomSelect',
+                                  'x-decorator': 'FormItem',
+                                  enum: [...templates.values()].map((template) => {
+                                    return {
+                                      title: template.title,
+                                      key: template.type,
+                                      description: template.description,
+                                      group: template.group,
+                                      iconId: template.iconId,
+                                    };
+                                  }),
+                                },
+                                options: {
+                                  type: 'void',
+                                  'x-component': 'Options',
+                                },
+                              },
+                            }}
+                          />
+                        </FormLayout>
+                      </FormProvider>
+                    </Card>
+                    {/*  right*/}
+                    <div
+                      className={css`
+                        flex: 1;
+                        min-width: 600px;
+                      `}
+                    >
+                      <Card size={'default'} title={lang('Chart preview')}>
+                        {/*  Chart Preview*/}
+                        {chartBlockEngineMetaData && (
+                          <>
+                            <SchemaComponent
+                              schema={{
+                                properties: {
+                                  chartPreview: {
+                                    type: 'void',
+                                    'x-decorator': 'CardItem',
+                                    'x-component': 'ChartBlockEngine',
+                                    'x-component-props': {
+                                      chartBlockEngineMetaData,
+                                    },
+                                  },
+                                },
+                              }}
+                            />
+                          </>
+                        )}
+                      </Card>
+                      <Card
+                        size={'default'}
+                        title={lang('Data preview')}
+                        className={css`
+                          margin-top: 24px;
+                          overflow: scroll;
+                        `}
+                      >
+                        {/*Data preview*/}
+                        {chartBlockEngineMetaData?.query?.id && (
+                          <DataSetPreviewTable
+                            queryId={chartBlockEngineMetaData?.query?.id}
+                            fields={chartQueryMetadata?.fields}
+                          />
+                        )}
+                      </Card>
+                    </div>
+                  </section>
+                </SchemaComponentOptions>
+              </APIClientProvider>
+            );
+          },
+        ).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,
+            },
+          });
+        }
+      }}
+    />
+  );
+};