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

package/src/client/hooks.ts

@@ -0,0 +1,239 @@
+import { ArrayField } from '@formily/core';
+import { ISchema, Schema } from '@formily/react';
+import { useACLRoleContext, useCollectionManager } from '@nocobase/client';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChartConfigContext } from './block/ChartConfigure';
+import formatters from './block/formatters';
+import transformers from './block/transformers';
+import { lang } from './locale';
+import { ChartRendererProps } from './renderer';
+import { getField, getSelectedFields, parseField } from './utils';
+
+export type FieldOption = {
+  value: string;
+  label: string;
+  key: string;
+  alias?: string;
+  name?: string;
+  type?: string;
+  interface?: string;
+  uiSchema?: ISchema;
+  target?: string;
+  targetFields?: FieldOption[];
+};
+
+export const useFields = (collection?: string) => {
+  const { current } = useContext(ChartConfigContext);
+  if (!collection) {
+    collection = current?.collection || '';
+  }
+  const { getCollectionFields } = useCollectionManager();
+  const fields = (getCollectionFields(collection) || [])
+    .filter((field) => {
+      return field.interface;
+    })
+    .map((field) => ({
+      ...field,
+      key: field.name,
+      label: field.uiSchema?.title || field.name,
+      value: field.name,
+    }));
+  return fields;
+};
+
+export const useFieldsWithAssociation = (collection?: string) => {
+  const { getCollectionFields } = useCollectionManager();
+  const { t } = useTranslation();
+  const fields = useFields(collection);
+  return fields.map((field) => {
+    const label = Schema.compile(field.uiSchema?.title || field.name, { t });
+    if (!field.target) {
+      return { ...field, label };
+    }
+    const targetFields = (getCollectionFields(field.target) || [])
+      .filter((targetField) => {
+        return targetField.interface;
+      })
+      .map((targetField) => ({
+        ...targetField,
+        key: `${field.name}.${targetField.name}`,
+        label: `${label} / ${Schema.compile(targetField.uiSchema?.title || targetField.name, { t })}`,
+        value: `${field.name}.${targetField.name}`,
+      }));
+    return {
+      ...field,
+      label,
+      targetFields,
+    };
+  });
+};
+
+export const useChartFields = (fields: FieldOption[]) => (field: any) => {
+  const query = field.query('query').get('value') || {};
+  const selectedFields = getSelectedFields(fields, query);
+  field.dataSource = selectedFields;
+};
+
+export const useFormatters = (fields: FieldOption[]) => (field: any) => {
+  const selectedField = field.query('.field').get('value');
+  if (!selectedField) {
+    field.dataSource = [];
+    return;
+  }
+  let options = [];
+  const fieldInterface = getField(fields, selectedField)?.interface;
+  switch (fieldInterface) {
+    case 'datetime':
+    case 'createdAt':
+    case 'updatedAt':
+      options = formatters.datetime;
+      break;
+    case 'date':
+      options = formatters.date;
+      break;
+    case 'time':
+      options = formatters.time;
+      break;
+    default:
+      options = [];
+  }
+  field.dataSource = options;
+};
+
+export const useCollectionOptions = () => {
+  const { t } = useTranslation();
+  const { collections } = useCollectionManager();
+  const { allowAll, parseAction } = useACLRoleContext();
+  const options = collections
+    .filter((collection: { name: string }) => {
+      if (allowAll) {
+        return true;
+      }
+      const params = parseAction(`${collection.name}:list`);
+      return params;
+    })
+    .map((collection: { name: string; title: string }) => ({
+      label: collection.title,
+      value: collection.name,
+      key: collection.name,
+    }));
+  return Schema.compile(options, { t });
+};
+
+/**
+ * useFieldTypes
+ * Get field types for using transformers
+ * Only supported types will be displayed
+ * Some interfaces and types will be mapped to supported types
+ */
+export const useFieldTypes = (fields: FieldOption[]) => (field: any) => {
+  const selectedField = field.query('.field').get('value');
+  const query = field.query('query').get('value') || {};
+  const selectedFields = getSelectedFields(fields, query);
+  const fieldProps = selectedFields.find((field) => field.value === selectedField);
+  const supports = Object.keys(transformers);
+  field.dataSource = supports.map((key) => ({
+    label: lang(key),
+    value: key,
+  }));
+  const map = {
+    createdAt: 'datetime',
+    updatedAt: 'datetime',
+    double: 'number',
+    integer: 'number',
+    percent: 'number',
+  };
+  const fieldInterface = fieldProps?.interface;
+  const fieldType = fieldProps?.type;
+  const key = map[fieldInterface] || map[fieldType] || fieldType;
+  if (supports.includes(key)) {
+    field.setState({
+      value: key,
+      disabled: true,
+    });
+    return;
+  }
+  field.setState({
+    value: null,
+    disabled: false,
+  });
+};
+
+export const useTransformers = (field: any) => {
+  const selectedType = field.query('.type').get('value');
+  if (!selectedType) {
+    field.dataSource = [];
+    return;
+  }
+  const options = Object.keys(transformers[selectedType] || {}).map((key) => ({
+    label: lang(key),
+    value: key,
+  }));
+  field.dataSource = options;
+};
+
+export const useFieldTransformer = (transform: ChartRendererProps['transform'], locale = 'en-US') => {
+  return (transform || [])
+    .filter((item) => item.field && item.type && item.format)
+    .reduce((mp, item) => {
+      const transformer = transformers[item.type][item.format];
+      if (!transformer) {
+        return mp;
+      }
+      mp[item.field] = (val: any) => transformer(val, locale);
+      return mp;
+    }, {});
+};
+
+export const useOrderFieldsOptions = (defaultOptions: any[], fields: FieldOption[]) => (field: any) => {
+  const query = field.query('query').get('value') || {};
+  const { measures = [] } = query;
+  const hasAgg = measures.some((measure: { aggregation?: string }) => measure.aggregation);
+  if (!hasAgg) {
+    field.componentProps.fieldNames = {
+      label: 'title',
+      value: 'name',
+      children: 'children',
+    };
+    field.dataSource = defaultOptions;
+    return;
+  }
+  const selectedFields = getSelectedFields(fields, query);
+  field.componentProps.fieldNames = {};
+  field.dataSource = selectedFields;
+};
+
+export const useOrderReaction = (defaultOptions: any[], fields: FieldOption[]) => (field: ArrayField) => {
+  const query = field.query('query').get('value') || {};
+  const { measures = [] } = query;
+  const hasAgg = measures.some((measure: { aggregation?: string }) => measure.aggregation);
+  let dataSource = defaultOptions;
+  const allValues = [];
+  if (hasAgg) {
+    dataSource = getSelectedFields(fields, query);
+    dataSource.forEach((field) => {
+      allValues.push(field.value);
+    });
+  } else {
+    dataSource.forEach((field) => {
+      const children = field.children || [];
+      if (!children.length) {
+        allValues.push(field.value || field.name);
+      }
+      children.forEach((child: any) => {
+        allValues.push(`${field.name}.${child.name}`);
+      });
+    });
+  }
+
+  const orders = field.value || [];
+  const newOrders = orders.reduce((newOrders: any[], item: any) => {
+    const { alias } = parseField(item.field);
+    if (!item.field || allValues.includes(alias)) {
+      newOrders.push(item);
+    }
+    return newOrders;
+  }, []);
+  field.setValue(newOrders);
+};

package/src/client/index.tsx

@@ -0,0 +1,41 @@
+import { SchemaComponentOptions, SchemaInitializerContext, SchemaInitializerProvider } from '@nocobase/client';
+import React, { useContext } from 'react';
+import { ChartInitializers, ChartV2Block, ChartV2BlockDesigner, ChartV2BlockInitializer } from './block';
+import { useChartsTranslation } from './locale';
+import { ChartRenderer, ChartRendererProvider, InternalLibrary } from './renderer';
+import { ChartLibraryProvider } from './renderer/ChartLibrary';
+
+const Chart: React.FC = (props) => {
+  const { t } = useChartsTranslation();
+  const initializers = useContext<any>(SchemaInitializerContext);
+  const children = initializers.BlockInitializers.items[0].children;
+  const has = children.some((initializer) => initializer.component === 'ChartV2BlockInitializer');
+  if (!has) {
+    children.push({
+      key: 'chart-v2',
+      type: 'item',
+      title: t('Chart'),
+      component: 'ChartV2BlockInitializer',
+    });
+  }
+  return (
+    <SchemaComponentOptions
+      components={{
+        ChartV2BlockInitializer,
+        ChartRenderer,
+        ChartV2BlockDesigner,
+        ChartV2Block,
+        ChartRendererProvider,
+      }}
+    >
+      <SchemaInitializerProvider initializers={{ ...initializers, ChartInitializers }}>
+        <ChartLibraryProvider name="Built-in" charts={InternalLibrary}>
+          {props.children}
+        </ChartLibraryProvider>
+      </SchemaInitializerProvider>
+    </SchemaComponentOptions>
+  );
+};
+
+export default Chart;
+export { ChartLibraryProvider };

package/src/client/locale/en-US.ts

@@ -0,0 +1,23 @@
+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/client/locale/index.ts

@@ -0,0 +1,19 @@
+import { i18n } from '@nocobase/client';
+import { useTranslation } from 'react-i18next';
+import zhCN from './zh-CN';
+
+export const NAMESPACE = 'charts-v2';
+
+i18n.addResources('zh-CN', NAMESPACE, zhCN);
+// i18n.addResources('en-US', NAMESPACE, enUS);
+// i18n.addResources('ja-JP', NAMESPACE, jaJP);
+// i18n.addResources('ru-RU', NAMESPACE, ruRU);
+// i18n.addResources('tr-TR', NAMESPACE, trTR);
+
+export function lang(key: string) {
+  return i18n.t(key, { ns: NAMESPACE });
+}
+
+export function useChartsTranslation() {
+  return useTranslation(NAMESPACE);
+}

package/src/client/locale/ja-JP.ts

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

package/src/client/locale/pt-BR.ts

@@ -0,0 +1,23 @@
+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/client/locale/ru-RU.ts

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

package/src/client/locale/tr-TR.ts

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

package/src/client/locale/zh-CN.ts

@@ -0,0 +1,71 @@
+export default {
+  Edit: '编辑',
+  Delete: '删除',
+  Cancel: '取消',
+  Submit: '提交',
+  Actions: '操作',
+  Title: '名称',
+  Enable: '启用',
+  Chart: '图表',
+  ChartV2: '图表V2',
+  Charts: '图表',
+  Configure: '配置',
+  Duplicate: '复制',
+  'Configure chart': '配置图表',
+  Transform: '数据转换',
+  'Chart type': '图表类型',
+  'JSON config': 'JSON 配置',
+  Query: '查询',
+  Data: '数据',
+  'Run query': '执行查询',
+  Measures: '度量',
+  Dimensions: '维度',
+  Filter: '过滤',
+  Sort: '排序',
+  Limit: '结果数量',
+  'Enable cache': '启用缓存',
+  'TTL (second)': '缓存时间 (秒)',
+  Field: '字段',
+  Aggregation: '聚合',
+  Alias: '别名',
+  Format: '格式',
+  'The first 10 records of the query result:': '查询结果的前 10 条记录：',
+  'Please run query to retrive data.': '请执行查询来获取数据。',
+  Type: '类型',
+  'Add field': '添加字段',
+  'Add chart': '添加图表',
+  xField: 'x轴字段',
+  yField: 'y轴字段',
+  seriesField: '分类字段',
+  angleField: '角度字段',
+  colorField: '颜色字段',
+  'Line Chart': '折线图',
+  'Area Chart': '面积图',
+  'Column Chart': '柱状图',
+  'Bar Chart': '条形图',
+  'Pie Chart': '饼图',
+  'Dual Axes Chart': '双轴图',
+  'Scatter Chart': '散点图',
+  'Gauge Chart': '仪表盘',
+  Statistic: '统计',
+  Currency: '货币',
+  Percent: '百分比',
+  Exponential: '科学记数法',
+  Abbreviation: '缩写',
+  'Please configure and run query': '请配置并执行数据查询',
+  'Please configure chart': '请配置图表',
+  'Are you sure to cancel?': '确定要取消吗？',
+  'You changes are not saved. If you click OK, your changes will be lost.':
+    '您的更改尚未保存。如果您点击“确定”，您的更改将丢失。',
+  'Same properties set in the form above will be overwritten by this JSON config.':
+    '上面表单中设置的相同属性将被JSON配置覆盖。',
+  'Built-in': '内置图表',
+  'Config reference: ': '配置参考: ',
+  Table: '表格',
+  Sum: '求和',
+  Avg: '平均值',
+  Count: '计数',
+  Min: '最小值',
+  Max: '最大值',
+  'Please select a chart type.': '请选择图表类型',
+};

package/src/client/renderer/ChartLibrary.tsx

@@ -0,0 +1,178 @@
+import { ISchema } from '@formily/react';
+import React, { createContext, useContext } from 'react';
+import { FieldOption } from '../hooks';
+import { lang } from '../locale';
+import { parseField } from '../utils';
+import { QueryProps } from './ChartRendererProvider';
+
+/**
+ * @params {usePropsFunc} useProps - Accept the information that the chart component needs to render,
+ * process it and return the props of the chart component.
+ */
+export type usePropsFunc = (props: {
+  data: any[];
+  fieldProps: {
+    [field: string]: FieldOption & {
+      transformer: (val: any) => string;
+    };
+  };
+  general: any;
+  advanced: any;
+}) => any;
+
+export type ChartProps = {
+  name: string;
+  component: React.FC<any>;
+  schema?: ISchema;
+  useProps?: usePropsFunc;
+  // The init function is used to initialize the configuration of the chart component from the query configuration.
+  init?: (
+    fields: FieldOption[],
+    query: {
+      measures?: QueryProps['measures'];
+      dimensions?: QueryProps['dimensions'];
+    },
+  ) => {
+    general?: any;
+    advanced?: any;
+  };
+  reference?: {
+    title: string;
+    link: string;
+  };
+};
+
+export type Charts = {
+  [type: string]: ChartProps;
+};
+
+export type ChartLibraries = {
+  [library: string]: {
+    enabled: boolean;
+    charts: Charts;
+  };
+};
+
+export const ChartLibraryContext = createContext<ChartLibraries>({});
+
+export const useCharts = (): Charts => {
+  const library = useContext(ChartLibraryContext);
+  return Object.values(library)
+    .filter((l) => l.enabled)
+    .reduce((charts, l) => ({ ...charts, ...l.charts }), {});
+};
+
+export const useChartTypes = (): {
+  label: string;
+  children: (ChartProps & {
+    key: string;
+    label: string;
+    value: string;
+  })[];
+}[] => {
+  const library = useContext(ChartLibraryContext);
+  return Object.entries(library)
+    .filter(([_, l]) => l.enabled)
+    .reduce((charts, [name, l]) => {
+      const children = Object.entries(l.charts).map(([type, chart]) => ({
+        ...chart,
+        key: type,
+        label: chart.name,
+        value: type,
+      }));
+      return [
+        ...charts,
+        {
+          label: lang(name),
+          children,
+        },
+      ];
+    }, []);
+};
+
+export const useToggleChartLibrary = () => {
+  const ctx = useContext(ChartLibraryContext);
+  return {
+    toggle: (library: string) => {
+      ctx[library].enabled = !ctx[library].enabled;
+    },
+  };
+};
+
+export const ChartLibraryProvider: React.FC<{
+  name: string;
+  charts: Charts;
+}> = (props) => {
+  const { children, charts, name } = props;
+  const ctx = useContext(ChartLibraryContext);
+  const library = {
+    ...ctx,
+    [name]: {
+      charts,
+      enabled: true,
+    },
+  };
+  return <ChartLibraryContext.Provider value={library}>{children}</ChartLibraryContext.Provider>;
+};
+
+export const infer = (
+  fields: FieldOption[],
+  {
+    measures,
+    dimensions,
+  }: {
+    measures?: QueryProps['measures'];
+    dimensions?: QueryProps['dimensions'];
+  },
+) => {
+  let xField: FieldOption;
+  let yField: FieldOption;
+  let seriesField: FieldOption;
+  let yFields: FieldOption[];
+  const getField = (fields: FieldOption[], selected: { field: string | string[]; alias?: string }) => {
+    if (selected.alias) {
+      return fields.find((f) => f.value === selected.alias);
+    }
+    const { alias } = parseField(selected.field);
+    return fields.find((f) => f.value === alias);
+  };
+  if (measures?.length) {
+    yField = getField(fields, measures[0]);
+    yFields = measures.map((m) => getField(fields, m));
+  }
+  if (dimensions) {
+    if (dimensions.length === 1) {
+      xField = getField(fields, dimensions[0]);
+    } else if (dimensions.length > 1) {
+      // If there is a time field, it is used as the x-axis field by default.
+      let xIndex: number;
+      dimensions.forEach((d, i) => {
+        const field = getField(fields, d);
+        if (['date', 'time', 'datetime'].includes(field?.type)) {
+          xField = field;
+          xIndex = i;
+        }
+      });
+      if (xIndex) {
+        // If there is a time field, the other field is used as the series field by default.
+        const index = xIndex === 0 ? 1 : 0;
+        seriesField = getField(fields, dimensions[index]);
+      } else {
+        xField = getField(fields, dimensions[0]);
+        seriesField = getField(fields, dimensions[1]);
+      }
+    }
+  }
+  return { xField, yField, seriesField, yFields };
+};
+
+export const commonInit: ChartProps['init'] = (fields, { measures, dimensions }) => {
+  const { xField, yField, seriesField } = infer(fields, { measures, dimensions });
+  return {
+    general: {
+      xField: xField?.value,
+      yField: yField?.value,
+      seriesField: seriesField?.value,
+    },
+  };
+};