@nocobase/plugin-charts 0.9.1-alpha.2

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

@@ -0,0 +1,319 @@
+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

@@ -0,0 +1,64 @@
+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 },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/BarTemplate.tsx

@@ -0,0 +1,80 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  appendPadding: 10,
+  isGroup: true,
+  yField: '{{dimension}}',
+  xField: '{{metric}}',
+  seriesField: '{{category}}',
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'top', 'bottom', 'middle',
+    // 配置样式
+    style: {
+      fill: '#FFFFFF',
+      opacity: 0.6,
+    },
+  },
+  xAxis: {
+    label: {
+      autoHide: true,
+      autoRotate: false,
+    },
+  },
+};
+export const barTemplate = {
+  description: '1 「time」 or 「ordered noun」 field, 1 「value」 field, 0~ 1 「unordered noun」',
+  type: 'Bar',
+  title: 'Bar',
+  iconId: 'icon-bar',
+  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("Bar | G2Plot","https://g2plot.antv.antgroup.com/api/plots/bar")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/ColumnTemplate.tsx

@@ -0,0 +1,81 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  appendPadding: 10,
+  isGroup: true,
+  yField: '{{metric}}',
+  xField: '{{dimension}}',
+  seriesField: '{{category}}',
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'top', 'bottom', 'middle',
+    // 配置样式
+    style: {
+      fill: '#FFFFFF',
+      opacity: 0.6,
+    },
+  },
+  xAxis: {
+    label: {
+      autoHide: true,
+      autoRotate: false,
+    },
+  },
+};
+
+export const columnTemplate = {
+  description: '1 「time」 or 「ordered noun」 field, 1 「value」 field, 0 to 1 「unordered noun」',
+  type: 'Column',
+  title: 'Column',
+  iconId: 'icon-column',
+  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("Column | G2Plot","https://g2plot.antv.antgroup.com/api/plots/column")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/FunnelTemplate.tsx

@@ -0,0 +1,65 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  xField: '{{dimension}}',
+  yField: '{{metric}}',
+  seriesField: '{{category}}',
+  legend: false,
+};
+
+export const funnelTemplate = {
+  description: '1 「Unordered Noun」 field, 1 「Numeric」 field',
+  type: 'Funnel',
+  title: 'Funnel',
+  iconId: 'icon-funnel',
+  group: 1,
+  renderComponent: 'G2Plot',
+  defaultChartOptions: chartConfig,
+  configurableProperties: {
+    type: 'void',
+    properties: {
+      dimension: {
+        required: true,
+        type: 'string',
+        title: '{{t("Sector label / Dimensional",{ns:"charts"})}}',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: '{{dataSource}}',
+      },
+      metric: {
+        required: true,
+        type: 'string',
+        title: '{{t("Funnel Layer Width/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("Funnel | G2Plot","https://g2plot.antv.antgroup.com/api/plots/funnel")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};

package/src/client/templates/LineTemplate.tsx

@@ -0,0 +1,72 @@
+import JSON5 from 'json5';
+
+const chartConfig = {
+  yField: '{{metric}}',
+  xField: '{{dimension}}',
+  seriesField: '{{category}}',
+  xAxis: {
+    //type: 'time',
+  },
+  yAxis: {
+    // label: {
+    //   formatter: '{{(v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)}}',
+    // },
+  },
+};
+
+export const lineTemplate = {
+  description: '1 「Time」 or 「Order Noun」 field, 1 「Value」 field',
+  type: 'Line',
+  title: 'Line',
+  iconId: 'icon-line',
+  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("Line | G2Plot","https://g2plot.antv.antgroup.com/api/plots/line")}}',
+            'x-validator': { json5: true },
+          },
+        },
+      },
+    },
+  },
+};