perf(bi): optimize performance of chart filter block (#3316)

* perf: add useMemo

* fix: bug

* fix: bug

* chore: remove memo

packages/core/client/src/schema-component/antd/cascader/Cascader.tsx

@@ -54,12 +54,12 @@ export const Cascader = connect(
         <Space split={'/'}>
           {labels.map((label, index) => {
             if (selectedOptions[index]) {
-              return <span key={label}>{label}</span>;
+              return <span key={index}>{label}</span>;
             }
             const item = toArr(value)
               .filter(Boolean)
               .find((item) => item[fieldNames.value] === label);
-            return <span key={label}>{item?.[fieldNames.label] || label}</span>;
+            return <span key={index}>{item?.[fieldNames.label] || label}</span>;
           })}
         </Space>
       );

packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/antd/table.ts

@@ -15,8 +15,7 @@ export class Table extends AntdChart {
           key: item,
         }))
       : [];
-    const rowKey = columns[0]?.dataIndex;
-    const dataSource = data.map((item: any) => {
+    const dataSource = data.map((item: any, index: number) => {
       Object.keys(item).map((key: string) => {
         const props = fieldProps[key];
         if (props?.interface === 'percent') {
@@ -30,6 +29,7 @@ export class Table extends AntdChart {
           item[key] = props.transformer(item[key]);
         }
       });
+      item._key = index;
       return item;
     });
     const pageSize = advanced?.pagination?.pageSize || 10;
@@ -47,7 +47,7 @@ export class Table extends AntdChart {
       scroll: {
         x: 'max-content',
       },
-      rowKey,
+      rowKey: '_key',
       ...general,
       ...advanced,
     };

packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/ChartConfigure.tsx

@@ -205,8 +205,10 @@ export const ChartConfigure: React.FC<{
         });
       }}
       width={'95%'}
-      bodyStyle={{
+      styles={{
+        body: {
           background: 'rgba(128, 128, 128, 0.08)',
+        },
       }}
     >
       <FormProvider form={form}>
@@ -411,7 +413,8 @@ ChartConfigure.Data = function Data() {
   const error = service?.error;
   return !error ? (
     <Table
-      dataSource={data}
+      dataSource={data.map((item, index) => ({ ...item, _key: index }))}
+      rowKey="_key"
       scroll={{ x: 'max-content' }}
       columns={Object.keys(data[0] || {}).map((col) => {
         const field = getField(fields, col.split('.'));

packages/plugins/@nocobase/plugin-data-visualization/src/client/configure/schemas/configure.ts

@@ -312,9 +312,9 @@ export const querySchema: ISchema = {
                           overflow: 'auto',
                         },
                       },
+                      enum: '{{ filterOptions }}',
                       'x-component': 'Filter',
                       'x-component-props': {
-                        options: '{{ filterOptions }}',
                         dynamicComponent: 'FilterDynamicComponent',
                       },
                     },

packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx

@@ -13,7 +13,7 @@ import {
   useGlobalTheme,
   useSchemaInitializerItem,
 } from '@nocobase/client';
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { memo, useCallback, useContext, useMemo } from 'react';
 import { lang, useChartsTranslation } from '../locale';
 import { Schema, SchemaOptionsContext, observer, useField, useFieldSchema, useForm } from '@formily/react';
 import { useMemoizedFn } from 'ahooks';
@@ -92,7 +92,7 @@ export const ChartFilterFormItem = observer(
 
 export const ChartFilterCustomItemInitializer: React.FC<{
   insert?: any;
-}> = (props) => {
+}> = memo((props) => {
   const { locale } = useContext(ConfigProvider.ConfigContext);
   const { t: lang } = useChartsTranslation();
   const t = useMemoizedFn(lang);
@@ -214,7 +214,7 @@ export const ChartFilterCustomItemInitializer: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [theme]);
   return <SchemaInitializerItem {...itemConfig} {...props} onClick={handleClick} />;
-};
+});
 
 export const chartFilterItemInitializers = new SchemaInitializer({
   name: 'ChartFilterItemInitializers',
@@ -232,6 +232,8 @@ export const chartFilterItemInitializers = new SchemaInitializer({
         const { getChartCollections } = useChartData();
         const { getChartFilterFields } = useChartFilter();
         const collections = getChartCollections();
+
+        return useMemo(() => {
           return collections.map((name: any) => {
             const collection = getCollection(name);
             const fields = getChartFilterFields(collection);
@@ -242,6 +244,7 @@ export const chartFilterItemInitializers = new SchemaInitializer({
               children: fields,
             };
           });
+        }, [collections]);
       },
     },
     {

packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts

@@ -412,6 +412,7 @@ export const useChartFilterSourceFields = () => {
   };
 
   const collections = getChartCollections();
+  return useMemo(() => {
     const options = [];
     collections.forEach((name) => {
       const collection = getCollection(name);
@@ -432,6 +433,7 @@ export const useChartFilterSourceFields = () => {
       }
     });
     return options;
+  }, [collections]);
 };
 
 export const useFieldComponents = () => {

packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/query.ts

@@ -1,7 +1,7 @@
 import { ArrayField } from '@formily/core';
 import { ISchema, Schema, useForm } from '@formily/react';
 import { CollectionFieldOptions, useACLRoleContext, useCollectionManager } from '@nocobase/client';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChartConfigContext } from '../configure';
 import formatters from '../block/formatters';
@@ -51,7 +51,9 @@ export const useFieldsWithAssociation = (collection?: string) => {
   const { getCollectionFields, getInterface } = useCollectionManager();
   const { t } = useTranslation();
   const fields = useFields(collection);
-  return fields.map((field) => {
+  return useMemo(
+    () =>
+      fields.map((field) => {
         const filterable = getInterface(field.interface)?.filterable;
         const label = Schema.compile(field.uiSchema?.title || field.name, { t });
         if (!(filterable && (filterable?.nested || filterable?.children?.length))) {
@@ -87,7 +89,9 @@ export const useFieldsWithAssociation = (collection?: string) => {
           label,
           targetFields,
         };
-  });
+      }),
+    [fields],
+  );
 };
 
 export const useChartFields = (fields: FieldOption[]) => (field: any) => {
@@ -139,7 +143,7 @@ export const useCollectionOptions = () => {
       value: collection.name,
       key: collection.name,
     }));
-  return Schema.compile(options, { t });
+  return useMemo(() => Schema.compile(options, { t }), [options]);
 };
 
 export const useOrderFieldsOptions = (defaultOptions: any[], fields: FieldOption[]) => (field: any) => {