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

package/src/client/__tests__/hooks.test.ts

@@ -1,261 +0,0 @@
-import * as client from '@nocobase/client';
-import { renderHook } from '@testing-library/react';
-import { vi } from 'vitest';
-import formatters from '../block/formatters';
-import transformers from '../block/transformers';
-import {
-  useChartFields,
-  useFieldsWithAssociation,
-  useFieldTransformer,
-  useFieldTypes,
-  useFormatters,
-  useOrderFieldsOptions,
-  useTransformers,
-} from '../hooks';
-
-describe('hooks', () => {
-  beforeEach(() => {
-    vi.spyOn(client, 'useCollectionManager').mockReturnValue({
-      getCollectionFields: (name: string) =>
-        ({
-          orders: [
-            {
-              interface: 'string',
-              name: 'name',
-              uiSchema: {
-                title: '{{t("Name")}}',
-              },
-              type: 'string',
-            },
-            {
-              interface: 'number',
-              name: 'price',
-              uiSchema: {
-                title: '{{t("Price")}}',
-              },
-              type: 'double',
-            },
-            {
-              interface: 'createdAt',
-              name: 'createdAt',
-              uiSchema: {
-                title: '{{t("Created At")}}',
-              },
-              type: 'date',
-            },
-            {
-              interface: 'm2o',
-              name: 'user',
-              uiSchema: {
-                title: '{{t("User")}}',
-              },
-              target: 'users',
-              type: 'belongsTo',
-            },
-          ],
-          users: [
-            {
-              interface: 'string',
-              name: 'name',
-              uiSchema: {
-                title: '{{t("Name")}}',
-              },
-              type: 'string',
-            },
-          ],
-        }[name]),
-    } as any);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  test('useFieldsWithAssociation', () => {
-    const { result } = renderHook(() => useFieldsWithAssociation('orders'));
-    expect(result.current).toMatchObject([
-      {
-        key: 'name',
-        label: 'Name',
-        value: 'name',
-      },
-      {
-        key: 'price',
-        label: 'Price',
-        value: 'price',
-      },
-      {
-        key: 'createdAt',
-        label: 'Created At',
-        value: 'createdAt',
-      },
-      {
-        key: 'user',
-        label: 'User',
-        value: 'user',
-        target: 'users',
-        targetFields: [
-          {
-            key: 'user.name',
-            label: 'User / Name',
-            value: 'user.name',
-          },
-        ],
-      },
-    ]);
-  });
-
-  test('useChartFields', () => {
-    const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
-    const { result } = renderHook(() => useChartFields(fields));
-    const func = result.current;
-    const field = {
-      query: () => ({
-        get: () => ({
-          measures: [
-            {
-              field: ['price'],
-              alias: 'Price Alias',
-            },
-          ],
-          dimensions: [
-            {
-              field: ['user', 'name'],
-            },
-          ],
-        }),
-      }),
-      dataSource: [],
-    };
-    func(field);
-    expect(field.dataSource).toMatchObject([
-      {
-        key: 'Price Alias',
-        label: 'Price Alias',
-        value: 'Price Alias',
-      },
-      {
-        key: 'user.name',
-        label: 'User / Name',
-        value: 'user.name',
-      },
-    ]);
-  });
-
-  test('useFormatters', () => {
-    const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
-    const { result } = renderHook(() => useFormatters(fields));
-    const func = result.current;
-    const field = {
-      query: () => ({
-        get: () => 'createdAt',
-      }),
-      dataSource: [],
-    };
-    func(field);
-    expect(field.dataSource).toEqual(formatters.datetime);
-  });
-
-  test('useFieldTypes', () => {
-    const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
-    const { result } = renderHook(() => useFieldTypes(fields));
-    const func = result.current;
-    let state1 = {};
-    let state2 = {};
-    const field = {
-      dataSource: [],
-      state: {},
-    };
-    const query = (path: string, val: string) => ({
-      get: () => {
-        if (path === 'query') {
-          return { measures: [{ field: ['price'] }, { field: ['name'] }] };
-        }
-        return val;
-      },
-    });
-    const field1 = {
-      query: (path: string) => query(path, 'price'),
-      setState: (state) => (state1 = state),
-      ...field,
-    };
-    const field2 = {
-      query: (path: string) => query(path, 'name'),
-      setState: (state) => (state2 = state),
-      ...field,
-    };
-    func(field1);
-    func(field2);
-    expect(field1.dataSource.map((item) => item.value)).toEqual(Object.keys(transformers));
-    expect(state1).toEqual({ value: 'number', disabled: true });
-    expect(state2).toEqual({ value: null, disabled: false });
-  });
-
-  test('useTransformers', () => {
-    const field = {
-      query: () => ({
-        get: () => 'datetime',
-      }),
-      dataSource: [],
-    };
-    renderHook(() => useTransformers(field));
-    expect(field.dataSource.map((item) => item.value)).toEqual(Object.keys(transformers['datetime']));
-  });
-
-  test('useFieldTransformers', () => {
-    const { result } = renderHook(() =>
-      useFieldTransformer([
-        {
-          field: '1',
-          type: 'datetime',
-          format: 'YYYY',
-        },
-        {
-          field: '2',
-          type: 'number',
-          format: 'YYYY',
-        },
-      ]),
-    );
-    expect(result.current['1']).toBeDefined();
-    expect(result.current['2']).toBeUndefined();
-  });
-
-  test('useOrderFieldsOptions', () => {
-    const fields = renderHook(() => useFieldsWithAssociation('orders')).result.current;
-    const { result } = renderHook(() => useOrderFieldsOptions([], fields));
-    const func = result.current;
-    const field1 = {
-      query: () => ({
-        get: () => ({
-          measures: [{ field: ['price'] }],
-        }),
-      }),
-      dataSource: [],
-      componentProps: {
-        fieldNames: {},
-      },
-    };
-    const field2 = {
-      query: () => ({
-        get: () => ({
-          measures: [{ field: ['price'], aggregation: 'sum' }],
-        }),
-      }),
-      componentProps: {
-        fieldNames: {},
-      },
-      dataSource: [],
-    };
-    func(field1);
-    func(field2);
-    expect(field1.dataSource).toEqual([]);
-    expect(field1.componentProps.fieldNames).toEqual({
-      label: 'title',
-      value: 'name',
-      children: 'children',
-    });
-    expect(field2.dataSource).toMatchObject([{ key: 'price', value: 'price', label: 'Price' }]);
-    expect(field2.componentProps.fieldNames).toEqual({});
-  });
-});

package/src/client/block/ChartBlock.tsx

@@ -1,24 +0,0 @@
-import { SchemaInitializerButtonContext, useDesignable } from '@nocobase/client';
-import React, { useState } from 'react';
-import { ChartRendererProvider } from '../renderer';
-import { ChartConfigContext, ChartConfigCurrent, ChartConfigure } from './ChartConfigure';
-
-export const ChartV2Block: React.FC = (props) => {
-  const { insertAdjacent } = useDesignable();
-  const [visible, setVisible] = useState(false);
-  const [current, setCurrent] = useState<ChartConfigCurrent>({} as any);
-  const [initialVisible, setInitialVisible] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  return (
-    <SchemaInitializerButtonContext.Provider
-      value={{ visible: initialVisible, setVisible: setInitialVisible, searchValue, setSearchValue }}
-    >
-      <ChartConfigContext.Provider value={{ visible, setVisible, current, setCurrent }}>
-        {props.children}
-        <ChartRendererProvider {...current.field?.decoratorProps}>
-          <ChartConfigure insert={(schema, options) => insertAdjacent('beforeEnd', schema, options)} />
-        </ChartRendererProvider>
-      </ChartConfigContext.Provider>
-    </SchemaInitializerButtonContext.Provider>
-  );
-};

package/src/client/block/ChartBlockDesigner.tsx

@@ -1,19 +0,0 @@
-import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
-import React from 'react';
-import { useChartsTranslation } from '../locale';
-
-export const ChartV2BlockDesigner: React.FC = () => {
-  const { t } = useChartsTranslation();
-  return (
-    <GeneralSchemaDesigner title={t('Charts')}>
-      <SchemaSettings.BlockTitleItem />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/client/block/ChartBlockInitializer.tsx

@@ -1,82 +0,0 @@
-import { LineChartOutlined } from '@ant-design/icons';
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import { SchemaInitializer, useACLRoleContext, useCollectionDataSourceItems } from '@nocobase/client';
-import React, { useContext } from 'react';
-import { useChartsTranslation } from '../locale';
-import { ChartConfigContext } from './ChartConfigure';
-
-const itemWrap = SchemaInitializer.itemWrap;
-const ConfigureButton = itemWrap((props) => {
-  const { setVisible, setCurrent } = useContext(ChartConfigContext);
-  return (
-    <SchemaInitializer.Item
-      {...props}
-      onClick={() => {
-        setCurrent({ schema: {}, field: null, collection: props.item?.name, service: null, data: undefined });
-        setVisible(true);
-      }}
-    />
-  );
-});
-
-export const ChartInitializers = () => {
-  const { t } = useChartsTranslation();
-  const collections = useCollectionDataSourceItems('Chart');
-  const { allowAll, parseAction } = useACLRoleContext();
-  const children = collections[0].children
-    .filter((item) => {
-      if (allowAll) {
-        return true;
-      }
-      const params = parseAction(`${item.name}:list`);
-      return params;
-    })
-    .map((item) => ({
-      ...item,
-      component: ConfigureButton,
-    }));
-  if (!children.length) {
-    // Leave a blank item to show the filter component
-    children.push({} as any);
-  }
-  collections[0].children = children;
-  return (
-    <SchemaInitializer.Button
-      icon={'PlusOutlined'}
-      items={collections as any}
-      dropdown={{
-        placement: 'bottomLeft',
-      }}
-    >
-      {t('Add chart')}
-    </SchemaInitializer.Button>
-  );
-};
-
-export const ChartV2BlockInitializer: React.FC<{
-  insert: (s: ISchema) => void;
-}> = (props) => {
-  const { insert } = props;
-  return (
-    <SchemaInitializer.Item
-      {...props}
-      icon={<LineChartOutlined />}
-      onClick={() => {
-        insert({
-          type: 'void',
-          'x-component': 'CardItem',
-          'x-designer': 'ChartV2BlockDesigner',
-          properties: {
-            [uid()]: {
-              type: 'void',
-              'x-component': 'Grid',
-              'x-decorator': 'ChartV2Block',
-              'x-initializer': 'ChartInitializers',
-            },
-          },
-        });
-      }}
-    />
-  );
-};