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

package/src/client/hooks.ts

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

@@ -1,47 +0,0 @@
-import { Plugin, 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('Charts'),
-      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>
-  );
-};
-
-class DataVisualizationPlugin extends Plugin {
-  async load() {
-    this.app.addProvider(Chart);
-  }
-}
-
-export default DataVisualizationPlugin;
-export { ChartLibraryProvider };

package/src/client/locale/index.ts

@@ -1,18 +0,0 @@
-import { i18n } from '@nocobase/client';
-import { useTranslation } from 'react-i18next';
-
-export const NAMESPACE = 'data-visualization';
-
-// 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/renderer/ChartLibrary.tsx

@@ -1,183 +0,0 @@
-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: lang(chart.name),
-        value: type,
-      }));
-      return [
-        ...charts,
-        {
-          label: lang(name),
-          children,
-        },
-      ];
-    }, []);
-};
-
-export const useDefaultChartType = () => {
-  const chartTypes = useChartTypes();
-  return chartTypes[0]?.children?.[0]?.value;
-};
-
-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,
-    },
-  };
-};

package/src/client/renderer/ChartRenderer.tsx

@@ -1,129 +0,0 @@
-import { useField, useFieldSchema } from '@formily/react';
-import {
-  GeneralSchemaDesigner,
-  SchemaSettings,
-  gridRowColWrap,
-  useAPIClient,
-  useCollection,
-  useDesignable,
-} from '@nocobase/client';
-import { Empty, Result, Spin, Typography } from 'antd';
-import React, { useContext } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { ChartConfigContext } from '../block';
-import { useFieldTransformer, useFieldsWithAssociation } from '../hooks';
-import { useChartsTranslation } from '../locale';
-import { createRendererSchema, getField, processData } from '../utils';
-import { useCharts } from './ChartLibrary';
-import { ChartRendererContext } from './ChartRendererProvider';
-const { Paragraph, Text } = Typography;
-
-export const ChartRenderer: React.FC & {
-  Designer: React.FC;
-} = (props) => {
-  const { t } = useChartsTranslation();
-  const ctx = useContext(ChartRendererContext);
-  const { config, transform, collection, service, data: _data } = ctx;
-  const fields = useFieldsWithAssociation(collection);
-  const data = processData(fields, service?.data || _data || [], { t });
-  const general = config?.general || {};
-  const advanced = config?.advanced || {};
-  const api = useAPIClient();
-
-  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')} />
-    );
-
-  if (service.loading) {
-    return <Spin />;
-  }
-
-  if (!(data && data.length)) {
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure and run query')} />;
-  }
-
-  return <C />;
-};
-
-ChartRenderer.Designer = function Designer() {
-  const { t } = useChartsTranslation();
-  const { setVisible, setCurrent } = useContext(ChartConfigContext);
-  const { service } = useContext(ChartRendererContext);
-  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, service, data: service?.data });
-          setVisible(true);
-        }}
-      >
-        {t('Configure')}
-      </SchemaSettings.Item>
-      <SchemaSettings.Item
-        key="duplicate"
-        onClick={() => insertAdjacent('afterEnd', gridRowColWrap(createRendererSchema(schema?.['x-decorator-props'])))}
-      >
-        {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>
-  );
-};