Merge branch 'main' into next

packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx

@@ -0,0 +1,31 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { CardItem, useToken, withDynamicSchemaProps } from '@nocobase/client';
+
+export const ChartCardItem = withDynamicSchemaProps(
+  (props) => {
+    const { token } = useToken();
+    return (
+      <CardItem
+        name="charts"
+        bodyStyle={{
+          padding: `${token.paddingLG}px ${token.paddingLG}px 0`,
+        }}
+        {...props}
+      >
+        {props.children}
+      </CardItem>
+    );
+  },
+  {
+    displayName: 'ChartCardItem',
+  },
+);

packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlock.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { SchemaComponentOptions, SchemaInitializerContext, useSchemaInitializer } from '@nocobase/client';
+import { SchemaComponentOptions, SchemaInitializerContext, useSchemaInitializer, useToken } from '@nocobase/client';
 import React, { useState } from 'react';
 import { ChartConfigProvider } from '../configure';
 import { ChartDataProvider } from './ChartDataProvider';
@@ -17,6 +17,18 @@ import { ChartFilterProvider } from '../filter/FilterProvider';
 import { RefreshButton } from '../initializers/RefreshAction';
 import { css } from '@emotion/css';
 
+export const useChartBlockCardProps = (props: any) => {
+  const { token } = useToken();
+  const background = props.style?.background;
+  return {
+    ...props,
+    style: {
+      ...props.style,
+      background: background !== 'none' ? token.colorBgContainer : 'none',
+    },
+  };
+};
+
 export const ChartV2Block: React.FC = (props) => {
   const [initialVisible, setInitialVisible] = useState(false);
   const schemaInitializerContextData = useSchemaInitializer();

packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlockInitializer.tsx

@@ -17,7 +17,6 @@ import {
   useACLRoleContext,
   useSchemaInitializer,
   useSchemaInitializerItem,
-  useToken,
 } from '@nocobase/client';
 import React, { useCallback, useContext } from 'react';
 import { ChartConfigContext } from '../configure';
@@ -104,7 +103,6 @@ export const chartInitializers = new CompatibleSchemaInitializer(
 export const ChartV2BlockInitializer: React.FC = () => {
   const itemConfig = useSchemaInitializerItem();
   const { insert } = useSchemaInitializer();
-  const { token } = useToken();
   return (
     <SchemaInitializerItem
       {...itemConfig}
@@ -112,13 +110,8 @@ export const ChartV2BlockInitializer: React.FC = () => {
       onClick={() => {
         insert({
           type: 'void',
-          'x-component': 'CardItem',
-          'x-component-props': {
-            name: 'charts',
-            bodyStyle: {
-              padding: `${token.paddingLG}px ${token.paddingLG}px 0`,
-            },
-          },
+          'x-component': 'ChartCardItem',
+          'x-use-component-props': 'useChartBlockCardProps',
           'x-designer': 'ChartV2BlockDesigner',
           'x-decorator': 'ChartBlockProvider',
           properties: {

packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx

@@ -9,8 +9,10 @@
 
 import React, { useContext, useEffect, useRef } from 'react';
 import { ChartRendererContext } from '../../renderer';
+import { useGlobalTheme } from '@nocobase/client';
 
 export const getAntChart = (Component: React.FC<any>) => (props: any) => {
+  const { isDarkTheme } = useGlobalTheme();
   const { size = {} } = props;
   let { height: fixedHeight } = props;
   if (!fixedHeight && size.type === 'fixed') {
@@ -44,7 +46,11 @@ export const getAntChart = (Component: React.FC<any>) => (props: any) => {
 
   return (
     <div ref={chartRef} style={chartHeight ? { height: `${chartHeight}px` } : {}}>
-      <Component {...props} {...(chartHeight ? { height: chartHeight } : {})} />
+      <Component
+        theme={isDarkTheme ? 'classicDark' : 'classic'}
+        {...props}
+        {...(chartHeight ? { height: chartHeight } : {})}
+      />
     </div>
   );
 };

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

@@ -82,7 +82,6 @@ export class G2PlotChart extends Chart {
         },
       },
       data,
-      theme: 'classic',
       animate: {
         enter: {
           type: false,

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

@@ -32,6 +32,8 @@ import { useChartRefreshActionProps } from './initializers/RefreshAction';
 import { chartBlockActionsInitializer } from './initializers/chartBlockActions';
 import { useChartBlockRefreshActionProps } from './initializers/BlockRefreshAction';
 import { chartBlockActionRefreshSettings } from './settings/chartBlockActionRefresh';
+import { useChartBlockCardProps } from './block/ChartBlock';
+import { ChartCardItem } from './block/CardItem';
 
 class PluginDataVisualiztionClient extends Plugin {
   public charts: ChartGroup = new ChartGroup();
@@ -43,12 +45,15 @@ class PluginDataVisualiztionClient extends Plugin {
       ChartV2BlockInitializer,
       ChartV2BlockDesigner,
       ChartV2Block,
+      ChartCardItem,
       ChartBlockProvider,
     });
     this.app.addScopes({
+      useChartBlockCardProps,
       useChartRefreshActionProps,
       useChartBlockRefreshActionProps,
     });
+
     this.app.schemaInitializerManager.add(chartInitializers_deprecated);
     this.app.schemaInitializerManager.add(chartInitializers);
     this.app.schemaInitializerManager.add(chartFilterItemInitializers_deprecated);