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

package/src/client/settings/AddNewQuery.tsx

@@ -1,176 +0,0 @@
-import { DownOutlined, PlusOutlined } from '@ant-design/icons';
-import { createForm } from '@formily/core';
-import { ISchema, useForm } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  ActionContextProvider,
-  SchemaComponent,
-  useActionContext,
-  useRecord,
-  useResourceActionContext,
-  useResourceContext,
-} from '@nocobase/client';
-import { Button, Dropdown, MenuProps } from 'antd';
-import React, { useMemo, useState } from 'react';
-import { useChartQueryMetadataContext } from '../ChartQueryMetadataProvider';
-import { lang } from '../locale';
-import { getQueryTypeSchema } from './queryTypes';
-
-const useCreateAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  const { refresh } = useResourceActionContext();
-  const { resource } = useResourceContext();
-  const ctx = useChartQueryMetadataContext();
-  return {
-    async run() {
-      await form.submit();
-      await resource.create({ values: form.values });
-      setVisible(false);
-      await form.reset();
-      refresh();
-      ctx.refresh();
-    },
-  };
-};
-
-const useUpdateAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  const { refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
-  const ctx = useChartQueryMetadataContext();
-  return {
-    async run() {
-      await form.submit();
-      await resource.update({ filterByTk, values: form.values });
-      setVisible(false);
-      await form.reset();
-      refresh();
-      ctx.refresh();
-    },
-  };
-};
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  return {
-    async run() {
-      setVisible(false);
-    },
-  };
-};
-
-const getSchema = (initialValue, { form, isNewRecord }) => {
-  const type = initialValue.type;
-  const schema: ISchema = {
-    type: 'void',
-    name: uid(),
-    'x-component': 'Action.Drawer',
-    'x-decorator': 'Form',
-    'x-decorator-props': {
-      form,
-      // initialValue: JSON.parse(JSON.stringify(initialValue)),
-    },
-    title: isNewRecord ? lang('Add query') : lang('Edit query'),
-    properties: {
-      title: {
-        title: lang('Title'),
-        required: true,
-        'x-component': 'Input',
-        'x-decorator': 'FormItem',
-      },
-      options: getQueryTypeSchema(type),
-      footer: {
-        type: 'void',
-        'x-component': 'Action.Drawer.Footer',
-        properties: {
-          cancel: {
-            'x-component': 'Action',
-            title: lang('Cancel'),
-            'x-component-props': {
-              useAction: '{{ useCloseAction }}',
-            },
-          },
-          submit: {
-            'x-component': 'Action',
-            title: lang('Submit'),
-            'x-component-props': {
-              type: 'primary',
-              useAction: '{{ useSubmitAction }}',
-            },
-          },
-        },
-      },
-    },
-  };
-  return schema;
-};
-
-export const AddNewQuery = () => {
-  const [visible, setVisible] = useState(false);
-  const [schema, setSchema] = useState({});
-  const form = useMemo(() => createForm(), []);
-
-  const menu = useMemo<MenuProps>(() => {
-    return {
-      onClick: (info) => {
-        setVisible(true);
-        form.setValues({ type: info.key });
-        setSchema(getSchema({ type: info.key }, { form, isNewRecord: true }));
-      },
-      items: [
-        {
-          key: 'json',
-          label: 'JSON',
-        },
-        {
-          key: 'sql',
-          label: 'SQL',
-        },
-        {
-          key: 'api',
-          label: 'API',
-          disabled: true,
-        },
-        {
-          key: 'collection',
-          label: 'Collection',
-          disabled: true,
-        },
-      ],
-    };
-  }, [form]);
-
-  return (
-    <ActionContextProvider value={{ visible, setVisible }}>
-      <Dropdown menu={menu}>
-        <Button icon={<PlusOutlined />} type={'primary'}>
-          {lang('Add query')} <DownOutlined />
-        </Button>
-      </Dropdown>
-      <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useCreateAction }} />
-    </ActionContextProvider>
-  );
-};
-
-export const EditQuery = () => {
-  const [visible, setVisible] = useState(false);
-  const record = useRecord();
-  const form = useMemo(() => createForm(), []);
-  const schema = getSchema(record, { form, isNewRecord: false });
-  return (
-    <ActionContextProvider value={{ visible, setVisible }}>
-      <a
-        onClick={() => {
-          form.setValues(record);
-          setVisible(true);
-        }}
-      >
-        {lang('Edit')}
-      </a>
-      <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useUpdateAction }} />
-    </ActionContextProvider>
-  );
-};

package/src/client/settings/ConfigureFields.tsx

@@ -1,18 +0,0 @@
-import { useRecord } from '@nocobase/client';
-import { Table } from 'antd';
-import React from 'react';
-
-export const ConfigureFields = () => {
-  const record = useRecord();
-  return (
-    <Table
-      columns={[
-        {
-          title: '字段标识',
-          dataIndex: 'name',
-        },
-      ]}
-      dataSource={record.fields || []}
-    />
-  );
-};

package/src/client/settings/QueriesTable.tsx

@@ -1,26 +0,0 @@
-import { SchemaComponent } from '@nocobase/client';
-import { Card } from 'antd';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AddNewQuery, EditQuery } from './AddNewQuery';
-import { ConfigureFields } from './ConfigureFields';
-import {
-  chartsQueriesSchema,
-  useDestroyAllSelectedQueriesAction,
-  useDestroyQueryItemAction,
-} from './schemas/chartsQueries';
-import JSON5 from 'json5';
-
-export const QueriesTable = () => {
-  const [visible, setVisible] = useState(false);
-  const { t } = useTranslation();
-  return (
-    <Card bordered={false}>
-      <SchemaComponent
-        scope={{ JSON5, useDestroyQueryItemAction, useDestroyAllSelectedQueriesAction }}
-        schema={chartsQueriesSchema}
-        components={{ AddNewQuery, EditQuery, ConfigureFields }}
-      />
-    </Card>
-  );
-};

package/src/client/settings/queryTypes.ts

@@ -1,65 +0,0 @@
-import { ISchema } from '@formily/react';
-import { lodash } from '@nocobase/utils/client';
-
-export const json: ISchema = {
-  type: 'object',
-  properties: {
-    data: {
-      title: 'JSON',
-      required: true,
-      'x-component': 'Input.TextArea',
-      'x-validator': { json5: true },
-      'x-component-props': {
-        autoSize: {
-          maxRows: 20,
-          minRows: 10,
-        },
-      },
-      'x-decorator': 'FormItem',
-    },
-  },
-};
-
-export const sql: ISchema = {
-  type: 'object',
-  properties: {
-    sql: {
-      title: 'SQL',
-      required: true,
-      'x-component': 'Input.TextArea',
-      'x-decorator': 'FormItem',
-      'x-validator': {
-        triggerType: 'onBlur',
-        validator: '{{validateSQL}}',
-      },
-      'x-component-props': {
-        autoSize: {
-          maxRows: 20,
-          minRows: 10,
-        },
-      },
-    },
-  },
-};
-
-export const api: ISchema = {
-  type: 'object',
-  properties: {
-    api: {
-      title: 'API',
-      required: true,
-      'x-component': 'Input',
-      'x-decorator': 'FormItem',
-    },
-  },
-};
-
-const types = {
-  json,
-  sql,
-  api,
-};
-
-export const getQueryTypeSchema = (type) => {
-  return lodash.cloneDeep(types[type]);
-};

package/src/client/settings/schemas/chartsQueries.ts

@@ -1,319 +0,0 @@
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  useActionContext,
-  useRecord,
-  useRequest,
-  useResourceActionContext,
-  useResourceContext,
-} from '@nocobase/client';
-import { useChartQueryMetadataContext } from '../../ChartQueryMetadataProvider';
-
-const collection = {
-  name: 'chartsQueries',
-  fields: [
-    {
-      type: 'integer',
-      name: 'title',
-      interface: 'input',
-      uiSchema: {
-        title: '{{t("Title",{ns:"charts"})}}',
-        type: 'string',
-        'x-component': 'Input',
-        required: true,
-      } as ISchema,
-    },
-    {
-      type: 'string',
-      name: 'type',
-      interface: 'select',
-      uiSchema: {
-        title: '{{t("Type",{ns:"charts"})}}',
-        type: 'string',
-        'x-component': 'Select',
-        required: true,
-        enum: [
-          { label: '{{t("API")}}', value: 'api' },
-          { label: '{{t("SQL")}}', value: 'sql' },
-          { label: '{{t("JSON")}}', value: 'json' },
-        ],
-      } as ISchema,
-    },
-  ],
-};
-
-export const useDestroyQueryItemAction = () => {
-  const ctx = useChartQueryMetadataContext();
-  const { refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  const { [targetKey]: filterByTk } = useRecord();
-  return {
-    async run() {
-      await resource.destroy({ filterByTk });
-      refresh();
-      ctx.refresh();
-    },
-  };
-};
-
-export const useDestroyAllSelectedQueriesAction = () => {
-  const ctx = useChartQueryMetadataContext();
-  const { state, setState, refresh } = useResourceActionContext();
-  const { resource, targetKey } = useResourceContext();
-  return {
-    async run() {
-      await resource.destroy({
-        filterByTk: state?.selectedRowKeys || [],
-      });
-      setState?.({ selectedRowKeys: [] });
-      refresh();
-      ctx.refresh();
-    },
-  };
-};
-
-export const chartsQueriesSchema: ISchema = {
-  type: 'object',
-  properties: {
-    [uid()]: {
-      type: 'void',
-      'x-decorator': 'ResourceActionProvider',
-      'x-decorator-props': {
-        collection,
-        resourceName: 'chartsQueries',
-        request: {
-          resource: 'chartsQueries',
-          action: 'list',
-          params: {
-            pageSize: 50,
-            sort: ['-id'],
-            appends: [],
-          },
-        },
-      },
-      'x-component': 'CollectionProvider',
-      'x-component-props': {
-        collection,
-      },
-      properties: {
-        actions: {
-          type: 'void',
-          'x-component': 'ActionBar',
-          'x-component-props': {
-            style: {
-              marginBottom: 16,
-            },
-          },
-          properties: {
-            delete: {
-              type: 'void',
-              title: '{{ t("Delete") }}',
-              'x-component': 'Action',
-              'x-component-props': {
-                useAction: '{{ useDestroyAllSelectedQueriesAction }}',
-                confirm: {
-                  title: '{{t("Delete queries",{ns:"charts"})}}',
-                  content: "{{t('Are you sure you want to delete it?')}}",
-                },
-              },
-            },
-            create: {
-              type: 'void',
-              title: '{{t("Add query")}}',
-              'x-component': 'AddNewQuery',
-              'x-component-props': {
-                type: 'primary',
-              },
-              properties: {
-                drawer: {
-                  type: 'void',
-                  'x-component': 'Action.Drawer',
-                  'x-decorator': 'Form',
-                  'x-decorator-props': {
-                    useValues(options) {
-                      const ctx = useActionContext();
-                      return useRequest(
-                        () =>
-                          Promise.resolve({
-                            data: {
-                              name: `s_${uid()}`,
-                            },
-                          }),
-                        { ...options, refreshDeps: [ctx.visible] },
-                      );
-                    },
-                  },
-                  title: '{{t("Add query",{ns:"charts"})}}',
-                  properties: {
-                    title: {
-                      'x-component': 'CollectionField',
-                      'x-decorator': 'FormItem',
-                    },
-                    type: {
-                      'x-component': 'CollectionField',
-                      'x-decorator': 'FormItem',
-                    },
-                    footer: {
-                      type: 'void',
-                      'x-component': 'Action.Drawer.Footer',
-                      properties: {
-                        cancel: {
-                          title: '{{t("Cancel",{ns:"charts"})}}',
-                          'x-component': 'Action',
-                          'x-component-props': {
-                            useAction: '{{ cm.useCancelAction }}',
-                          },
-                        },
-                        submit: {
-                          title: '{{t("Submit",{ns:"charts"})}}',
-                          'x-component': 'Action',
-                          'x-component-props': {
-                            type: 'primary',
-                            useAction: '{{ cm.useCreateAction }}',
-                          },
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-        table: {
-          type: 'void',
-          'x-uid': 'input',
-          'x-component': 'Table.Void',
-          'x-component-props': {
-            rowKey: 'id',
-            rowSelection: {
-              type: 'checkbox',
-            },
-            useDataSource: '{{ cm.useDataSourceFromRAC }}',
-          },
-          properties: {
-            title: {
-              type: 'void',
-              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'Table.Column',
-              properties: {
-                title: {
-                  type: 'number',
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                },
-              },
-            },
-            type: {
-              type: 'void',
-              'x-decorator': 'Table.Column.Decorator',
-              'x-component': 'Table.Column',
-              properties: {
-                type: {
-                  type: 'string',
-                  'x-component': 'CollectionField',
-                  'x-read-pretty': true,
-                },
-              },
-            },
-            actions: {
-              type: 'void',
-              title: '{{t("Actions")}}',
-              'x-component': 'Table.Column',
-              properties: {
-                actions: {
-                  type: 'void',
-                  'x-component': 'Space',
-                  'x-component-props': {
-                    split: '|',
-                  },
-                  properties: {
-                    fields: {
-                      type: 'void',
-                      title: '{{t("Configure fields")}}',
-                      'x-component': 'Action.Link',
-                      'x-component-props': {
-                        type: 'primary',
-                      },
-                      properties: {
-                        drawer: {
-                          type: 'void',
-                          'x-component': 'Action.Drawer',
-                          title: '{{t("Configure fields")}}',
-                          properties: {
-                            configure: {
-                              type: 'void',
-                              'x-component': 'ConfigureFields',
-                            },
-                          },
-                        },
-                      },
-                    },
-                    update: {
-                      type: 'void',
-                      title: '{{t("Edit")}}',
-                      'x-component': 'EditQuery',
-                      'x-component-props': {
-                        type: 'primary',
-                      },
-                      properties: {
-                        drawer: {
-                          type: 'void',
-                          'x-component': 'Action.Drawer',
-                          'x-decorator': 'Form',
-                          'x-decorator-props': {
-                            useValues: '{{ cm.useValuesFromRecord }}',
-                          },
-                          title: '{{t("Edit")}}',
-                          properties: {
-                            title: {
-                              'x-component': 'CollectionField',
-                              'x-decorator': 'FormItem',
-                            },
-                            footer: {
-                              type: 'void',
-                              'x-component': 'Action.Drawer.Footer',
-                              properties: {
-                                cancel: {
-                                  title: '{{t("Cancel",{ns:"charts"})}}',
-                                  'x-component': 'Action',
-                                  'x-component-props': {
-                                    useAction: '{{ cm.useCancelAction }}',
-                                  },
-                                },
-                                submit: {
-                                  title: '{{t("Submit",{ns:"charts"})}}',
-                                  'x-component': 'Action',
-                                  'x-component-props': {
-                                    type: 'primary',
-                                    useAction: '{{ cm.useUpdateAction }}',
-                                  },
-                                },
-                              },
-                            },
-                          },
-                        },
-                      },
-                    },
-                    delete: {
-                      type: 'void',
-                      title: '{{ t("Delete") }}',
-                      'x-component': 'Action.Link',
-                      'x-component-props': {
-                        confirm: {
-                          title: '{{t("Delete query",{ns:"charts"})}}',
-                          content: "{{t('Are you sure you want to delete it?')}}",
-                        },
-                        useAction: '{{ useDestroyQueryItemAction }}',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};

package/src/client/templates/AreaTemplate.tsx

@@ -1,64 +0,0 @@
-import JSON5 from 'json5';
-
-const chartConfig = {
-  yField: '{{metric}}',
-  xField: '{{dimension}}',
-  seriesField: '{{category}}',
-};
-
-export const areaTemplate = {
-  description: '1 「time」or 「Ordered Noun」 field,1 「Numerical」 field,1 「Unordered Noun」 field (optional)',
-  type: 'Area',
-  title: 'Area',
-  iconId: 'icon-area',
-  group: 2,
-  renderComponent: 'G2Plot',
-  defaultChartOptions: chartConfig,
-  configurableProperties: {
-    type: 'void',
-    properties: {
-      dimension: {
-        required: true,
-        type: 'string',
-        title: '{{t("Category axis / Dimension",{ns:"charts"})}}',
-        'x-decorator': 'FormItem',
-        'x-component': 'Select',
-        enum: '{{dataSource}}',
-      },
-      metric: {
-        required: true,
-        type: 'string',
-        title: '{{t("Value axis / Metrics",{ns:"charts"})}}',
-        'x-decorator': 'FormItem',
-        'x-component': 'Select',
-        enum: '{{dataSource}}',
-      },
-      category: {
-        type: 'string',
-        title: '{{t("Color legend / Dimensional",{ns:"charts"})}}',
-        'x-decorator': 'FormItem',
-        'x-component': 'Select',
-        enum: '{{dataSource}}',
-      },
-      jsonConfig: {
-        type: 'void',
-        'x-component': 'div',
-        properties: {
-          template: {
-            required: true,
-            title: '{{t("JSON config",{ns:"charts"})}}',
-            type: 'string',
-            default: JSON5.stringify(chartConfig, null, 2),
-            'x-decorator': 'FormItem',
-            'x-component': 'Input.TextArea',
-            'x-component-props': {
-              autoSize: { minRows: 8, maxRows: 16 },
-            },
-            description: '{{jsonConfigDesc("Area | G2Plot","https://g2plot.antv.antgroup.com/api/plots/area")}}',
-            'x-validator': { json5: true },
-          },
-        },
-      },
-    },
-  },
-};