@nocobase/plugin-charts 0.11.1-alpha.4 → 0.12.0-alpha.1

package/src/client/ChartBlockEngineDesigner.tsx

@@ -1,248 +0,0 @@
-import { FormLayout } from '@formily/antd-v5';
-import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
-import {
-  APIClientProvider,
-  FormDialog,
-  GeneralSchemaDesigner,
-  SchemaComponent,
-  SchemaComponentOptions,
-  SchemaSettings,
-  css,
-  i18n,
-  useAPIClient,
-  useCompile,
-  useDesignable,
-  useGlobalTheme,
-} from '@nocobase/client';
-import { error } from '@nocobase/utils/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" rel="noreferrer">
-        {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 { theme } = useGlobalTheme();
-
-  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: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
-          },
-          function Com(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>
-            );
-          },
-          theme,
-        )
-          .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();
-          })
-          .catch((err) => {
-            error(err);
-          });
-      }}
-    >
-      {props.children || props.title || lang('Edit chart block')}
-    </SchemaSettings.Item>
-  );
-};

package/src/client/ChartBlockInitializer.tsx

@@ -1,223 +0,0 @@
-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<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} />;
-  },
-  { 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 (
-    <ChartQueryBlockInitializer
-      {...props}
-      componentType={'Charts'}
-      onCreateBlockSchema={async ({ item: chartQueryMetadata }: { item: ChartQueryMetadata }) => {
-        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<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>
-            );
-          },
-          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,
-            },
-          });
-        }
-      }}
-    />
-  );
-};

package/src/client/ChartQueryBlockInitializer.tsx

@@ -1,156 +0,0 @@
-import { TableOutlined } from '@ant-design/icons';
-import { FormLayout } from '@formily/antd-v5';
-import { SchemaOptionsContext } from '@formily/react';
-import {
-  FormDialog,
-  SchemaComponent,
-  SchemaComponentOptions,
-  SchemaInitializer,
-  SchemaInitializerButtonContext,
-  useAPIClient,
-  useGlobalTheme,
-} from '@nocobase/client';
-import { error } from '@nocobase/utils/client';
-import React, { useCallback, useContext, useMemo } from 'react';
-import { useChartQueryMetadataContext } from './ChartQueryMetadataProvider';
-import { lang } from './locale';
-import { getQueryTypeSchema } from './settings/queryTypes';
-
-export interface ChartQueryMetadata {
-  id: number;
-  title: string;
-  type: string;
-  fields: { name: string }[];
-}
-
-export const ChartQueryBlockInitializer = (props) => {
-  const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
-  const { setVisible } = useContext(SchemaInitializerButtonContext);
-  const apiClient = useAPIClient();
-  const ctx = useChartQueryMetadataContext();
-  const options = useContext(SchemaOptionsContext);
-  const { theme } = useGlobalTheme();
-
-  const onAddQuery = useCallback(
-    (info) => {
-      FormDialog(
-        {
-          sql: lang('Add SQL query'),
-          json: lang('Add JSON query'),
-        }[info.key],
-        () => {
-          return (
-            <div>
-              <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-                <FormLayout layout={'vertical'}>
-                  <SchemaComponent
-                    schema={{
-                      type: 'object',
-                      properties: {
-                        title: {
-                          title: lang('Title'),
-                          required: true,
-                          'x-component': 'Input',
-                          'x-decorator': 'FormItem',
-                        },
-                        options: getQueryTypeSchema(info.key),
-                      },
-                    }}
-                  />
-                </FormLayout>
-              </SchemaComponentOptions>
-            </div>
-          );
-        },
-        theme,
-      )
-        .open({
-          initialValues: {
-            type: info.key,
-          },
-        })
-        .then(async (values) => {
-          try {
-            if (apiClient.resource('chartsQueries')?.create) {
-              const { data } = await apiClient.resource('chartsQueries').create({ values });
-              const items = (await ctx.refresh()) as any;
-              const item = items.find((item) => item.id === data?.data?.id);
-              onCreateBlockSchema({ item });
-            }
-            setVisible(false);
-          } catch (err) {
-            error(err);
-          }
-        })
-        .catch((err) => {
-          error(err);
-        });
-    },
-    [apiClient, ctx, onCreateBlockSchema, options.components, options.scope, setVisible],
-  );
-
-  const items = useMemo(() => {
-    const defaultItems: any = [
-      {
-        type: 'itemGroup',
-        title: lang('Select query data'),
-        children: [],
-      },
-    ];
-    const chartQueryMetadata = ctx.data;
-    if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
-      const item1 =
-        chartQueryMetadata.length > 0
-          ? {
-              type: 'itemGroup',
-              title: '{{t("Select chart query", {ns: "charts"})}}',
-              children: chartQueryMetadata,
-            }
-          : null;
-      const item2 =
-        chartQueryMetadata.length > 0
-          ? {
-              type: 'divider',
-            }
-          : null;
-
-      return [
-        item1,
-        item2,
-        {
-          type: 'subMenu',
-          title: lang('Add chart query'),
-          // component: AddChartQuery,
-          children: [
-            {
-              key: 'sql',
-              type: 'item',
-              title: 'SQL',
-              onClick: onAddQuery,
-            },
-            {
-              key: 'json',
-              type: 'item',
-              title: 'JSON',
-              onClick: onAddQuery,
-            },
-          ],
-        },
-      ].filter(Boolean);
-    }
-
-    return defaultItems;
-  }, [ctx.data, onAddQuery]);
-
-  return (
-    <SchemaInitializer.Item
-      icon={<TableOutlined />}
-      {...others}
-      onClick={async ({ item }) => {
-        onCreateBlockSchema({ item });
-        setVisible(false);
-      }}
-      items={items}
-    />
-  );
-};

package/src/client/ChartQueryMetadataProvider.tsx

@@ -1,64 +0,0 @@
-import { useAPIClient, useRequest } from '@nocobase/client';
-import { Spin } from 'antd';
-import React, { createContext, useContext, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-export const ChartQueryMetadataContext = createContext({
-  refresh: () => {},
-  data: [] as any[],
-});
-
-export const ChartQueryMetadataProvider: React.FC = (props) => {
-  const api = useAPIClient();
-
-  const options = {
-    resource: 'chartsQueries',
-    action: 'listMetadata',
-    params: {
-      paginate: false,
-      sort: ['-id'],
-    },
-  };
-
-  const location = useLocation();
-
-  const service = useRequest<{
-    data: any;
-  }>(options, {
-    manual: true,
-  });
-
-  const isAdminPage = location.pathname.startsWith('/admin');
-  const token = api.auth.getToken() || '';
-
-  useEffect(() => {
-    if (isAdminPage && token) {
-      service.run();
-    }
-  }, [isAdminPage, token]);
-
-  const refresh = async () => {
-    const { data } = await api.request(options);
-    service.mutate(data);
-    return data?.data || [];
-  };
-
-  if (service.loading) {
-    return <Spin />;
-  }
-
-  return (
-    <ChartQueryMetadataContext.Provider
-      value={{
-        refresh,
-        data: service.data?.data,
-      }}
-    >
-      {props.children}
-    </ChartQueryMetadataContext.Provider>
-  );
-};
-
-export const useChartQueryMetadataContext = () => {
-  return useContext(ChartQueryMetadataContext);
-};