@nocobase/plugin-data-visualization 0.11.1-alpha.5 → 0.12.0-alpha.2

package/src/client/renderer/ChartRendererProvider.tsx

@@ -1,123 +0,0 @@
-import { css } from '@emotion/css';
-import { useFieldSchema } from '@formily/react';
-import { MaybeCollectionProvider, useAPIClient, useRequest } from '@nocobase/client';
-import React, { createContext } from 'react';
-import { parseField } from '../utils';
-
-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<{
-  collection: string;
-  config?: {
-    chartType: string;
-    general: any;
-    advanced: any;
-  };
-  transform?: TransformProps[];
-  service: any;
-  data?: any[];
-}>({} as any);
-
-export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
-  const { query, config, collection, transform } = props;
-  const schema = useFieldSchema();
-  const api = useAPIClient();
-  const service = useRequest(
-    (collection, query) =>
-      new Promise((resolve, reject) => {
-        if (!(collection && query?.measures?.length)) return resolve(undefined);
-        api
-          .request({
-            url: 'charts:query',
-            method: 'POST',
-            data: {
-              uid: schema?.['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) => {
-            resolve(res?.data?.data);
-          })
-          .catch(reject);
-      }),
-    {
-      defaultParams: [collection, query],
-    },
-  );
-
-  return (
-    <MaybeCollectionProvider collection={collection}>
-      <div
-        className={css`
-          .ant-card {
-            box-shadow: none;
-          }
-        `}
-      >
-        <ChartRendererContext.Provider value={{ collection, config, transform, service }}>
-          {props.children}
-        </ChartRendererContext.Provider>
-      </div>
-    </MaybeCollectionProvider>
-  );
-};

package/src/client/renderer/index.ts

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

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

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

@@ -1,236 +0,0 @@
-import { Area, Bar, Column, DualAxes, Line, Pie, Scatter } from '@ant-design/plots';
-import { Charts, commonInit, infer, usePropsFunc } from '../ChartLibrary';
-const init = commonInit;
-
-const basicSchema = {
-  type: 'object',
-  properties: {
-    xField: {
-      title: '{{t("xField")}}',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-reactions': '{{ useChartFields }}',
-      required: true,
-    },
-    yField: {
-      title: '{{t("yField")}}',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-reactions': '{{ useChartFields }}',
-      required: true,
-    },
-    seriesField: {
-      title: '{{t("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,
-    animation: false,
-    ...general,
-    ...advanced,
-  };
-};
-
-export const G2PlotLibrary: Charts = {
-  line: {
-    name: 'Line Chart',
-    component: Line,
-    schema: basicSchema,
-    init,
-    useProps,
-    reference: {
-      title: 'Line Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/line',
-    },
-  },
-  area: {
-    name: 'Area Chart',
-    component: Area,
-    schema: basicSchema,
-    init,
-    useProps,
-    reference: {
-      title: 'Area Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/area',
-    },
-  },
-  column: {
-    name: 'Column Chart',
-    component: Column,
-    schema: basicSchema,
-    init,
-    useProps,
-    reference: {
-      title: 'Column Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/column',
-    },
-  },
-  bar: {
-    name: '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: 'Bar Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/bar',
-    },
-  },
-  pie: {
-    name: 'Pie Chart',
-    component: Pie,
-    schema: {
-      type: 'object',
-      properties: {
-        angleField: {
-          title: '{{t("angleField")}}',
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-reactions': '{{ useChartFields }}',
-          required: true,
-        },
-        colorField: {
-          title: '{{t("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: 'Pie Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/pie',
-    },
-  },
-  dualAxes: {
-    name: '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: '{{t("xField")}}',
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-reactions': '{{ useChartFields }}',
-          required: true,
-        },
-        yField: {
-          title: '{{t("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: {
-                    minWidth: '200px',
-                  },
-                },
-                required: true,
-              },
-              remove: {
-                type: 'void',
-                'x-decorator': 'FormItem',
-                'x-component': 'ArrayItems.Remove',
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              title: '{{t("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: 'Dual Axes Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/dual-axes',
-    },
-  },
-  // gauge: {
-  //   name: 'Gauge Chart',
-  //   component: Gauge,
-  // },
-  scatter: {
-    name: 'Scatter Chart',
-    component: Scatter,
-    schema: basicSchema,
-    init,
-    useProps,
-    reference: {
-      title: 'Scatter Chart',
-      link: 'https://g2plot.antv.antgroup.com/api/plots/scatter',
-    },
-  },
-};

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

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

package/src/client/utils.ts

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

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

package/src/locale/en-US.ts

@@ -1,23 +0,0 @@
-export default {
-  Edit: 'Edit',
-  Delete: 'Delete',
-  Cancel: 'Cancel',
-  Submit: 'Submit',
-  Actions: 'Actions',
-  Title: 'Title',
-  Enable: 'Enable',
-  'SAML manager': 'SAML manager',
-  'SAML Providers': 'SAML Providers',
-  'Redirect url': 'Redirect url',
-  'SP entity id': 'SP entity id',
-  'Add provider': 'Add',
-  'Edit provider': 'Edit',
-  'Client id': 'Client id',
-  'Entity id or issuer': 'Entity id or issuer',
-  'Login Url': 'Login Url',
-  'Public cert': 'Public cert',
-  'Delete provider': 'Delete',
-  'Are you sure you want to delete it?': 'Are you sure you want to delete it?',
-  'Sign in button name, which will be displayed on the sign in page':
-    'Sign in button name, which will be displayed on the sign in page',
-};

package/src/locale/fr-FR.ts

@@ -1 +0,0 @@
-export default {};

package/src/locale/ja-JP.ts

@@ -1 +0,0 @@
-export default {};

package/src/locale/pt-BR.ts

@@ -1,23 +0,0 @@
-export default {
-  Edit: 'Editar',
-  Delete: 'Delete',
-  Cancel: 'Cancelar',
-  Submit: 'Enviar',
-  Actions: 'Ações',
-  Title: 'Titulo',
-  Enable: 'Ativo',
-  'SAML manager': 'Gerenciador SAML',
-  'SAML Providers': 'Provedores SAML',
-  'Redirect url': 'URL de redirecionamento',
-  'SP entity id': 'ID de entidade do provedor de serviço (SP)',
-  'Add provider': 'Adicionar',
-  'Edit provider': 'Editar',
-  'Client id': 'ID do cliente',
-  'Entity id or issuer': 'ID de entidade ou emissor',
-  'Login Url': 'URL de login',
-  'Public cert': 'Certificado público',
-  'Delete provider': 'Excluir',
-  'Are you sure you want to delete it?': 'Tem certeza de que deseja excluí-lo?',
-  'Sign in button name, which will be displayed on the sign in page':
-    'Nome do botão de login, que será exibido na página de login',
-};

package/src/locale/ru-RU.ts

@@ -1 +0,0 @@
-export default {};

package/src/locale/tr-TR.ts

@@ -1 +0,0 @@
-export default {};