@nocobase/plugin-data-visualization 0.10.1-alpha.1

package/src/client/renderer/ChartRenderer.tsx

@@ -0,0 +1,201 @@
+import { useField, useFieldSchema } from '@formily/react';
+import {
+  GeneralSchemaDesigner,
+  gridRowColWrap,
+  SchemaSettings,
+  useAPIClient,
+  useCollection,
+  useDesignable,
+  useRequest,
+} from '@nocobase/client';
+import { Empty, Result, Typography } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ChartConfigContext } from '../block';
+import { useFieldsWithAssociation, useFieldTransformer } from '../hooks';
+import { useChartsTranslation } from '../locale';
+import { createRendererSchema, getField, parseField, processData } from '../utils';
+import { useCharts } from './ChartLibrary';
+import { ChartRendererContext, DimensionProps, MeasureProps, QueryProps } from './ChartRendererProvider';
+const { Paragraph, Text } = Typography;
+
+export const ChartRenderer: React.FC<{
+  configuring?: boolean;
+  runQuery?: any;
+}> & {
+  Designer: React.FC;
+} = (props) => {
+  const { t } = useChartsTranslation();
+  const { setData: setQueryData, current } = useContext(ChartConfigContext);
+  const { query, config, collection, transform } = useContext(ChartRendererContext);
+  const { configuring, runQuery } = props;
+  const general = config?.general || {};
+  const advanced = config?.advanced || {};
+  const schema = useFieldSchema();
+  const currentSchema = schema || current?.schema;
+  const fields = useFieldsWithAssociation(collection);
+  const api = useAPIClient();
+  const [data, setData] = useState<any[]>([]);
+  const { runAsync } = useRequest(
+    (query) =>
+      api
+        .request({
+          url: 'charts:query',
+          method: 'POST',
+          data: {
+            uid: currentSchema?.['x-uid'],
+            collection,
+            ...query,
+            dimensions: (query?.dimensions || []).map((item: DimensionProps) => {
+              const dimension = { ...item };
+              if (item.format && !item.alias) {
+                const { alias } = parseField(item.field);
+                dimension.alias = alias;
+              }
+              return dimension;
+            }),
+            measures: (query?.measures || []).map((item: MeasureProps) => {
+              const measure = { ...item };
+              if (item.aggregation && !item.alias) {
+                const { alias } = parseField(item.field);
+                measure.alias = alias;
+              }
+              return measure;
+            }),
+          },
+        })
+        .then((res) => {
+          const data = res?.data?.data || [];
+          return processData(fields, data, { t });
+        }),
+    {
+      manual: true,
+      onSuccess: (data) => {
+        setData(data);
+      },
+      onFinally(params, data, error: any) {
+        if (!configuring) {
+          return;
+        }
+        if (error) {
+          const message = error?.response?.data?.errors?.map?.((error: any) => error.message).join('\n');
+          setQueryData(message || error.message);
+          return;
+        }
+        setQueryData(data);
+      },
+    },
+  );
+
+  useEffect(() => {
+    setData([]);
+    const run = async (query: QueryProps) => {
+      if (
+        query?.measures?.length
+        // || (query?.sql?.fields && query?.sql?.clauses)
+      ) {
+        await runAsync(query);
+      }
+    };
+    if (runQuery) {
+      runQuery.current = run;
+    }
+    run(query);
+  }, [query, runAsync, runQuery]);
+
+  const charts = useCharts();
+  const chart = charts[config?.chartType];
+  const Component = chart?.component;
+  const locale = api.auth.getLocale();
+  const transformers = useFieldTransformer(transform, locale);
+  const info = {
+    data,
+    general,
+    advanced,
+    fieldProps: Object.keys(data[0] || {}).reduce((props, name) => {
+      if (!props[name]) {
+        const field = getField(fields, name.split('.'));
+        const transformer = transformers[name];
+        props[name] = { ...field, transformer };
+      }
+      return props;
+    }, {}),
+    locale,
+  };
+  const componentProps = chart?.useProps?.(info) || info;
+  const C = () =>
+    Component ? (
+      <ErrorBoundary
+        onError={(error) => {
+          console.error(error);
+        }}
+        FallbackComponent={ErrorFallback}
+      >
+        <Component {...componentProps} />
+      </ErrorBoundary>
+    ) : (
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />
+    );
+
+  return data && data.length ? (
+    <C />
+  ) : (
+    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure and run query')} />
+  );
+};
+
+ChartRenderer.Designer = function Designer() {
+  const { t } = useChartsTranslation();
+  const { setVisible, setCurrent } = useContext(ChartConfigContext);
+  const field = useField();
+  const schema = useFieldSchema();
+  const { insertAdjacent } = useDesignable();
+  const { name, title } = useCollection();
+  return (
+    <GeneralSchemaDesigner disableInitializer title={title || name}>
+      <SchemaSettings.Item
+        key="configure"
+        onClick={() => {
+          setCurrent({ schema, field, collection: name });
+          setVisible(true);
+        }}
+      >
+        {t('Configure')}
+      </SchemaSettings.Item>
+      <SchemaSettings.Item
+        key="duplicate"
+        onClick={() =>
+          insertAdjacent('afterEnd', createRendererSchema(schema?.['x-decorator-props']), {
+            wrap: gridRowColWrap,
+          })
+        }
+      >
+        {t('Duplicate')}
+      </SchemaSettings.Item>
+      <SchemaSettings.BlockTitleItem />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        // removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'ChartV2Block',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
+
+const ErrorFallback = ({ error }) => {
+  const { t } = useChartsTranslation();
+
+  return (
+    <div style={{ backgroundColor: 'white' }}>
+      <Result status="error" title={t('Render Failed')} subTitle={t('Please check the configuration.')}>
+        <Paragraph copyable>
+          <Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
+            {error.message}
+          </Text>
+        </Paragraph>
+      </Result>
+    </div>
+  );
+};

package/src/client/renderer/ChartRendererProvider.tsx

@@ -0,0 +1,58 @@
+import { MaybeCollectionProvider } from '@nocobase/client';
+import React, { createContext } from 'react';
+
+export type MeasureProps = {
+  field: string | string[];
+  aggregation?: string;
+  alias?: string;
+};
+
+export type DimensionProps = {
+  field: string | string[];
+  alias?: string;
+  format?: string;
+};
+
+export type TransformProps = {
+  field: string;
+  type: string;
+  format: string;
+};
+
+export type QueryProps = Partial<{
+  measures: MeasureProps[];
+  dimensions: DimensionProps[];
+  orders: {
+    field: string;
+    order: 'asc' | 'desc';
+  }[];
+  filter: any;
+  limit: number;
+  sql: {
+    fields?: string;
+    clauses?: string;
+  };
+}>;
+
+export type ChartRendererProps = {
+  collection: string;
+  query?: QueryProps;
+  config?: {
+    chartType: string;
+    general: any;
+    advanced: any;
+  };
+  transform?: TransformProps[];
+  mode?: 'builder' | 'sql';
+};
+
+export const ChartRendererContext = createContext<ChartRendererProps>({} as any);
+
+export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
+  const { collection } = props;
+  return (
+    <MaybeCollectionProvider collection={collection}>
+      <ChartRendererContext.Provider value={{ ...props }}>{props.children}</ChartRendererContext.Provider>
+    </MaybeCollectionProvider>
+  );
+};

package/src/client/renderer/index.ts

@@ -0,0 +1,4 @@
+export * from './ChartLibrary';
+export * from './ChartRenderer';
+export * from './ChartRendererProvider';
+export * from './library';

package/src/client/renderer/library/AntdLibrary.tsx

@@ -0,0 +1,94 @@
+import { Statistic, Table } from 'antd';
+import { lang } from '../../locale';
+import { Charts, infer } from '../ChartLibrary';
+
+export const AntdLibrary: Charts = {
+  statistic: {
+    name: lang('Statistic'),
+    component: Statistic,
+    schema: {
+      type: 'object',
+      properties: {
+        field: {
+          title: lang('Field'),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-reactions': '{{ useChartFields }}',
+          required: true,
+        },
+        title: {
+          title: lang('Title'),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+        },
+      },
+    },
+    init: (fields, { measures, dimensions }) => {
+      const { yField } = infer(fields, { measures, dimensions });
+      return {
+        general: {
+          field: yField?.value,
+          title: yField?.label,
+        },
+      };
+    },
+    useProps: ({ data, fieldProps, general, advanced }) => {
+      const record = data[0] || {};
+      const field = general?.field;
+      const props = fieldProps[field];
+      return {
+        value: record[field],
+        formatter: props?.transformer,
+        ...general,
+        ...advanced,
+      };
+    },
+    reference: {
+      title: lang('Statistic'),
+      link: 'https://ant.design/components/statistic/',
+    },
+  },
+  table: {
+    name: lang('Table'),
+    component: Table,
+    useProps: ({ data, fieldProps, general, advanced }) => {
+      const columns = data.length
+        ? Object.keys(data[0]).map((item) => ({
+            title: fieldProps[item]?.label || item,
+            dataIndex: item,
+            key: item,
+          }))
+        : [];
+      const dataSource = data.map((item: any) => {
+        Object.keys(item).map((key: string) => {
+          const props = fieldProps[key];
+          if (props?.transformer) {
+            item[key] = props.transformer(item[key]);
+          }
+        });
+        return item;
+      });
+      const pageSize = advanced?.pagination?.pageSize || 10;
+      return {
+        bordered: true,
+        size: 'middle',
+        pagination:
+          dataSource.length < pageSize
+            ? false
+            : {
+                pageSize,
+              },
+        dataSource,
+        columns,
+        ...general,
+        ...advanced,
+      };
+    },
+    reference: {
+      title: lang('Table'),
+      link: 'https://ant.design/components/table/',
+    },
+  },
+};

package/src/client/renderer/library/G2PlotLibrary.tsx

@@ -0,0 +1,236 @@
+import { Area, Bar, Column, DualAxes, Line, Pie, Scatter } from '@ant-design/plots';
+import { lang } from '../../locale';
+import { Charts, commonInit, infer, usePropsFunc } from '../ChartLibrary';
+const init = commonInit;
+
+const basicSchema = {
+  type: 'object',
+  properties: {
+    xField: {
+      title: lang('xField'),
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-reactions': '{{ useChartFields }}',
+      required: true,
+    },
+    yField: {
+      title: lang('yField'),
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-reactions': '{{ useChartFields }}',
+      required: true,
+    },
+    seriesField: {
+      title: lang('seriesField'),
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-reactions': '{{ useChartFields }}',
+    },
+  },
+};
+
+const useProps: usePropsFunc = ({ data, fieldProps, general, advanced }) => {
+  const meta = {};
+  Object.entries(fieldProps).forEach(([key, props]) => {
+    meta[key] = {
+      formatter: props.transformer,
+      alias: props.label,
+    };
+  });
+  return {
+    data,
+    meta,
+    ...general,
+    ...advanced,
+  };
+};
+
+export const G2PlotLibrary: Charts = {
+  line: {
+    name: lang('Line Chart'),
+    component: Line,
+    schema: basicSchema,
+    init,
+    useProps,
+    reference: {
+      title: lang('Line Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/bar',
+    },
+  },
+  area: {
+    name: lang('Area Chart'),
+    component: Area,
+    schema: basicSchema,
+    init,
+    useProps,
+    reference: {
+      title: lang('Area Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/area',
+    },
+  },
+  column: {
+    name: lang('Column Chart'),
+    component: Column,
+    schema: basicSchema,
+    init,
+    useProps,
+    reference: {
+      title: lang('Column Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/column',
+    },
+  },
+  bar: {
+    name: lang('Bar Chart'),
+    component: Bar,
+    schema: basicSchema,
+    init: (fields, { measures, dimensions }) => {
+      const { xField, yField, seriesField } = infer(fields, { measures, dimensions });
+      return {
+        general: {
+          xField: yField?.value,
+          yField: xField?.value,
+          seriesField: seriesField?.value,
+        },
+      };
+    },
+    useProps,
+    reference: {
+      title: lang('Bar Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/bar',
+    },
+  },
+  pie: {
+    name: lang('Pie Chart'),
+    component: Pie,
+    schema: {
+      type: 'object',
+      properties: {
+        angleField: {
+          title: lang('angleField'),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-reactions': '{{ useChartFields }}',
+          required: true,
+        },
+        colorField: {
+          title: lang('colorField'),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-reactions': '{{ useChartFields }}',
+          required: true,
+        },
+      },
+    },
+    init: (fields, { measures, dimensions }) => {
+      const { xField, yField } = infer(fields, { measures, dimensions });
+      return {
+        general: {
+          colorField: xField?.value,
+          angleField: yField?.value,
+        },
+      };
+    },
+    useProps,
+    reference: {
+      title: lang('Pie Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/pie',
+    },
+  },
+  dualAxes: {
+    name: lang('Dual Axes Chart'),
+    component: DualAxes,
+    useProps: ({ data, fieldProps, general, advanced }) => {
+      return {
+        ...useProps({ data, fieldProps, general, advanced }),
+        data: [data, data],
+      };
+    },
+    schema: {
+      type: 'object',
+      properties: {
+        xField: {
+          title: lang('xField'),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-reactions': '{{ useChartFields }}',
+          required: true,
+        },
+        yField: {
+          title: lang('yField'),
+          type: 'array',
+          'x-decorator': 'FormItem',
+          'x-component': 'ArrayItems',
+          items: {
+            type: 'void',
+            'x-component': 'Space',
+            properties: {
+              sort: {
+                type: 'void',
+                'x-decorator': 'FormItem',
+                'x-component': 'ArrayItems.SortHandle',
+              },
+              input: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'Select',
+                'x-reactions': '{{ useChartFields }}',
+                'x-component-props': {
+                  style: {
+                    'min-width': '200px',
+                  },
+                },
+                required: true,
+              },
+              remove: {
+                type: 'void',
+                'x-decorator': 'FormItem',
+                'x-component': 'ArrayItems.Remove',
+              },
+            },
+          },
+          properties: {
+            add: {
+              type: 'void',
+              title: lang('Add'),
+              'x-component': 'ArrayItems.Addition',
+            },
+          },
+        },
+      },
+    },
+    init: (fields, { measures, dimensions }) => {
+      const { xField, yFields } = infer(fields, { measures, dimensions });
+      return {
+        general: {
+          xField: xField?.value,
+          yField: yFields?.map((f) => f.value).slice(0, 2) || [],
+        },
+      };
+    },
+    reference: {
+      title: lang('Dual Axes Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/dual-axes',
+    },
+  },
+  // gauge: {
+  //   name: lang('Gauge Chart'),
+  //   component: Gauge,
+  // },
+  scatter: {
+    name: lang('Scatter Chart'),
+    component: Scatter,
+    schema: basicSchema,
+    init,
+    useProps,
+    reference: {
+      title: lang('Scatter Chart'),
+      link: 'https://g2plot.antv.antgroup.com/api/plots/scatter',
+    },
+  },
+};

package/src/client/renderer/library/index.tsx

@@ -0,0 +1,4 @@
+import { AntdLibrary } from './AntdLibrary';
+import { G2PlotLibrary } from './G2PlotLibrary';
+
+export const InternalLibrary = { ...G2PlotLibrary, ...AntdLibrary };

package/src/client/utils.ts

@@ -0,0 +1,102 @@
+import { Schema } from '@formily/react';
+import { uid } from '@formily/shared';
+import { SelectedField } from './block';
+import { FieldOption } from './hooks';
+import { QueryProps } from './renderer';
+
+export const createRendererSchema = (decoratorProps: any, componentProps = {}) => {
+  const { collection } = decoratorProps;
+  return {
+    type: 'void',
+    'x-decorator': 'ChartRendererProvider',
+    'x-decorator-props': decoratorProps,
+    'x-acl-action': `${collection}:list`,
+    'x-designer': 'ChartRenderer.Designer',
+    'x-component': 'CardItem',
+    'x-component-props': {
+      size: 'small',
+    },
+    'x-initializer': 'ChartInitializers',
+    properties: {
+      [uid()]: {
+        type: 'void',
+        'x-component': 'ChartRenderer',
+        'x-component-props': componentProps,
+      },
+    },
+  };
+};
+
+// For AssociationField, the format of field is [targetField, field]
+export const parseField = (field: string | string[]) => {
+  let target: string;
+  let name: string;
+  if (!Array.isArray(field)) {
+    name = field;
+  } else if (field.length === 1) {
+    name = field[0];
+  } else if (field.length > 1) {
+    [target, name] = field;
+  }
+  return { target, name, alias: target ? `${target}.${name}` : name };
+};
+
+export const getField = (fields: FieldOption[], field: string | string[]) => {
+  const { target, name } = parseField(field);
+  if (!target) {
+    return fields.find((f) => f.name === name);
+  }
+  const targetField = fields.find((f) => f.name === target)?.targetFields?.find((f) => f.name === name);
+  return targetField;
+};
+
+export const getSelectedFields = (fields: FieldOption[], query: QueryProps) => {
+  // When field alias is set, appends it to the field list
+  const process = (selectedFields: SelectedField[]) => {
+    return selectedFields.map((selectedField) => {
+      const fieldProps = getField(fields, selectedField.field);
+      return {
+        ...fieldProps,
+        key: selectedField.alias || fieldProps?.key,
+        label: selectedField.alias || fieldProps?.label,
+        value: selectedField.alias || fieldProps?.value,
+      };
+    });
+  };
+  const measures = query.measures || [];
+  const dimensions = query.dimensions || [];
+  // unique
+  const map = new Map([...process(measures), ...process(dimensions)].map((item) => [item.value, item]));
+  const selectedFields = [...map.values()];
+  return selectedFields;
+};
+
+export const processData = (fields: FieldOption[], data: any[], scope: any) => {
+  const parseEnum = (field: FieldOption, value: any) => {
+    const options = field.uiSchema?.enum as { value: string; label: string }[];
+    if (!options || !Array.isArray(options)) {
+      return value;
+    }
+    const option = options.find((option) => option.value === value);
+    return Schema.compile(option?.label || value, scope);
+  };
+  return data.map((record) => {
+    const processed = {};
+    Object.entries(record).forEach(([key, value]) => {
+      const field = getField(fields, key.split('.'));
+      if (!field) {
+        processed[key] = value;
+        return;
+      }
+      switch (field.interface) {
+        case 'select':
+        case 'radioGroup':
+          processed[key] = parseEnum(field, value);
+          break;
+        default:
+          processed[key] = value;
+      }
+    });
+    return processed;
+  });
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';