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

package/src/client/__tests__/chart-library.test.ts

@@ -0,0 +1,78 @@
+import { FieldOption } from '../hooks';
+import { infer } from '../renderer';
+
+describe('library', () => {
+  describe('auto infer', () => {
+    const fields = [
+      {
+        name: 'price',
+        value: 'price',
+        type: 'number',
+        label: 'Price',
+      },
+      {
+        name: 'count',
+        value: 'count',
+        type: 'number',
+        label: 'Count',
+      },
+      {
+        name: 'title',
+        value: 'title',
+        type: 'string',
+        label: 'Title',
+      },
+      {
+        name: 'name',
+        value: 'name',
+        type: 'string',
+        label: 'Name',
+      },
+      {
+        name: 'createdAt',
+        value: 'createdAt',
+        type: 'date',
+        label: 'Created At',
+      },
+    ] as FieldOption[];
+
+    test('1 measure, 1 dimension', () => {
+      const { xField, yField } = infer(fields, {
+        measures: [{ field: ['price'] }],
+        dimensions: [{ field: ['title'] }],
+      });
+      expect(yField.value).toEqual('price');
+      expect(xField.value).toEqual('title');
+    });
+
+    test('1 measure, 2 dimensions with date', () => {
+      const { xField, yField, seriesField } = infer(fields, {
+        measures: [{ field: ['price'] }],
+        dimensions: [{ field: ['title'] }, { field: ['createdAt'] }],
+      });
+      expect(yField.value).toEqual('price');
+      expect(xField.value).toEqual('createdAt');
+      expect(seriesField.value).toEqual('title');
+    });
+
+    test('1 measure, 2 dimensions without date', () => {
+      const { xField, yField, seriesField } = infer(fields, {
+        measures: [{ field: ['price'] }],
+        dimensions: [{ field: ['title'] }, { field: ['name'] }],
+      });
+      expect(yField.value).toEqual('price');
+      expect(xField.value).toEqual('title');
+      expect(seriesField.value).toEqual('name');
+    });
+
+    test('2 measures, 1 dimension', () => {
+      const { xField, yField, yFields } = infer(fields, {
+        measures: [{ field: ['price'] }, { field: ['count'] }],
+        dimensions: [{ field: ['title'] }],
+      });
+      expect(yField.value).toEqual('price');
+      expect(xField.value).toEqual('title');
+      expect(yFields.length).toEqual(2);
+    });
+  });
+});

package/src/client/__tests__/chart-renderer.test.tsx

@@ -0,0 +1,30 @@
+describe('ChartRenderer', () => {
+  it('should render correctly', () => {
+    // render(
+    //   <ChartLibraryProvider
+    //     name="Test"
+    //     charts={{
+    //       chart: {
+    //         name: 'Chart',
+    //         component: () => <div role="chart">Chart</div>,
+    //         useProps: (info) => info,
+    //       },
+    //     }}
+    //   >
+    //     <ChartRendererProvider
+    //       query={{}}
+    //       config={{
+    //         chartType: 'chart',
+    //         general: {},
+    //         advanced: {},
+    //       }}
+    //       collection=""
+    //       transform={[]}
+    //     >
+    //       <ChartRenderer />
+    //     </ChartRendererProvider>
+    //   </ChartLibraryProvider>,
+    // );
+    // expect(screen.getByText('Please configure and run query')).toBeInTheDocument();
+  });
+});

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

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

@@ -0,0 +1,22 @@
+import { SchemaInitializerButtonContext, useDesignable } from '@nocobase/client';
+import React, { useState } from 'react';
+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 [data, setData] = useState<string | 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, data, setData }}>
+        {props.children}
+        <ChartConfigure insert={(schema, options) => insertAdjacent('beforeEnd', schema, options)} />
+      </ChartConfigContext.Provider>
+    </SchemaInitializerButtonContext.Provider>
+  );
+};

package/src/client/block/ChartBlockDesigner.tsx

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

@@ -0,0 +1,83 @@
+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, setData } = useContext(ChartConfigContext);
+  return (
+    <SchemaInitializer.Item
+      {...props}
+      onClick={() => {
+        setCurrent({ schema: {}, field: null, collection: props.item?.name });
+        setData([]);
+        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',
+            },
+          },
+        });
+      }}
+    />
+  );
+};