feat(data-vi): support for adding chart blocks in popups/drawers/sub-pages (#5248)

packages/core/client/src/index.ts

@@ -73,5 +73,7 @@ export * from './modules/blocks/useParentRecordCommon';
 export { OpenModeProvider, useOpenModeContext } from './modules/popup/OpenModeProvider';
 export { PopupContextProvider } from './modules/popup/PopupContextProvider';
 export { usePopupUtils } from './modules/popup/usePopupUtils';
-
-export { VariablePopupRecordProvider } from './modules/variable/variablesProvider/VariablePopupRecordProvider';
+export {
+  VariablePopupRecordProvider,
+  useCurrentPopupRecord,
+} from './modules/variable/variablesProvider/VariablePopupRecordProvider';

packages/core/client/src/schema-settings/VariableInput/hooks/index.ts

@@ -14,3 +14,4 @@ export * from './useRoleVariable';
 export * from './useURLSearchParamsVariable';
 export * from './useUserVariable';
 export * from './useVariableOptions';
+export * from './usePopupVariable';

packages/core/client/src/variables/index.ts

@@ -16,3 +16,4 @@ export * from './utils/isVariable';
 export * from './utils/transformVariableValue';
 
 export * from './constants';
+export type { VariablesContextType } from './types';

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

@@ -10,15 +10,22 @@
 import React, { memo, useContext, useEffect, useMemo, useRef } from 'react';
 import { createForm, onFieldInit, onFieldMount, onFieldUnmount } from '@formily/core';
 import { ChartFilterContext } from './FilterProvider';
-import { DEFAULT_DATA_SOURCE_KEY, FormV2, VariablesContext } from '@nocobase/client';
+import {
+  DEFAULT_DATA_SOURCE_KEY,
+  FormV2,
+  VariablesContext,
+  VariablesContextType,
+  useLocalVariables,
+} from '@nocobase/client';
 import { setDefaultValue } from './utils';
 import { useChartFilter } from '../hooks';
 
 export const ChartFilterForm: React.FC = memo((props) => {
   const { setField, removeField, setForm } = useContext(ChartFilterContext);
   const { getTranslatedTitle } = useChartFilter();
-  const variables = useRef<any>(null);
+  const variables = useRef<VariablesContextType>(null);
   variables.current = useContext(VariablesContext);
+  const localVariables = useLocalVariables();
   const form = useMemo(
     () =>
       createForm({
@@ -53,7 +60,7 @@ export const ChartFilterForm: React.FC = memo((props) => {
             }
 
             // parse default value
-            setDefaultValue(field, variables.current);
+            setDefaultValue(field, variables.current, localVariables);
           });
           onFieldUnmount('*', (field: any) => {
             const name = getField(field);
@@ -64,7 +71,7 @@ export const ChartFilterForm: React.FC = memo((props) => {
           });
         },
       }),
-    [setField, getTranslatedTitle, removeField, variables],
+    [setField, getTranslatedTitle, removeField, variables, localVariables],
   );
 
   useEffect(() => setForm(form), [form, setForm]);

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

@@ -27,6 +27,7 @@ import {
   SchemaSettingsDataScope,
   removeNullCondition,
   useFormBlockContext,
+  useLocalVariables,
 } from '@nocobase/client';
 import { useChartsTranslation } from '../locale';
 import { Schema, useField, useFieldSchema } from '@formily/react';
@@ -222,6 +223,7 @@ const EditDefaultValue = () => {
   const { t } = useChartsTranslation();
   const { dn } = useDesignable();
   const variables = useContext(VariablesContext);
+  const localVariables = useLocalVariables();
   const field = useField<Field>();
   const fieldSchema = useFieldSchema();
   const { getTranslatedTitle } = useChartFilter();
@@ -257,7 +259,7 @@ const EditDefaultValue = () => {
           },
         });
         dn.refresh();
-        setDefaultValue(field, variables);
+        setDefaultValue(field, variables, localVariables);
       }}
     />
   );

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DEFAULT_DATA_SOURCE_KEY } from '@nocobase/client';
+import { DEFAULT_DATA_SOURCE_KEY, VariablesContextType } from '@nocobase/client';
 import { moment2str } from '@nocobase/utils/client';
 import dayjs from 'dayjs';
 import { Schema } from '@formily/react';
@@ -170,16 +170,16 @@ export const transformValue = (value: any, props: any) => {
   return value;
 };
 
-export const setDefaultValue = async (field: any, variables: any) => {
+export const setDefaultValue = async (field: any, variablesCtx: VariablesContextType, localVariables?: any) => {
   const defaultValue = field.initialValue;
   const isVariable =
     typeof defaultValue === 'string' && defaultValue?.startsWith('{{$') && defaultValue?.endsWith('}}');
-  if (!isVariable || !variables) {
+  if (!isVariable || !variablesCtx) {
     field.setValue(defaultValue);
     field.setInitialValue(defaultValue);
   } else {
     field.loading = true;
-    const { value } = await variables.parseVariable(defaultValue);
+    const { value } = await variablesCtx.parseVariable(defaultValue, localVariables);
     const transformedValue = transformValue(value, field.componentProps);
     field.setValue(transformedValue);
     field.setInitialValue(transformedValue);

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

@@ -18,6 +18,7 @@ import {
   useCollectionManager_deprecated,
   useDataSourceManager,
   useVariables,
+  useLocalVariables,
 } from '@nocobase/client';
 import { flatten, parse, unflatten } from '@nocobase/utils/client';
 import { useMemoizedFn } from 'ahooks';
@@ -103,6 +104,7 @@ export const useChartFilter = () => {
   const action = fieldSchema?.['x-action'];
   const { fields: fieldProps, form } = useContext(ChartFilterContext);
   const variables = useVariables();
+  const localVariables = useLocalVariables();
 
   const getChartFilterFields = ({
     dataSource,
@@ -418,7 +420,7 @@ export const useChartFilter = () => {
           if (['$user', '$date', '$nDate', '$nRole', '$nFilter'].some((n) => value.includes(n))) {
             return value;
           }
-          const result = variables?.parseVariable(value).then(({ value }) => value);
+          const result = variables?.parseVariable(value, localVariables).then(({ value }) => value);
           return result;
         },
       });

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

@@ -13,6 +13,7 @@ import {
   useCurrentRoleVariable,
   useCurrentUserVariable,
   useDatetimeVariable,
+  usePopupVariable,
   useURLSearchParamsVariable,
 } from '@nocobase/client';
 import { useMemo } from 'react';
@@ -32,13 +33,29 @@ export const useGeneralVariableOptions = (
   const { apiTokenSettings } = useAPITokenVariable({ noDisabled: true });
   const { datetimeSettings } = useDatetimeVariable({ operator, schema, noDisabled: true });
   const { urlSearchParamsSettings } = useURLSearchParamsVariable();
+  const { settings: popupRecordSettings, shouldDisplayPopupRecord } = usePopupVariable({
+    schema,
+  });
 
   const result = useMemo(
     () =>
-      [currentUserSettings, currentRoleSettings, apiTokenSettings, datetimeSettings, urlSearchParamsSettings].filter(
-        Boolean,
-      ),
-    [datetimeSettings, currentUserSettings, currentRoleSettings, urlSearchParamsSettings, apiTokenSettings],
+      [
+        currentUserSettings,
+        currentRoleSettings,
+        apiTokenSettings,
+        datetimeSettings,
+        urlSearchParamsSettings,
+        shouldDisplayPopupRecord && popupRecordSettings,
+      ].filter(Boolean),
+    [
+      datetimeSettings,
+      currentUserSettings,
+      currentRoleSettings,
+      urlSearchParamsSettings,
+      apiTokenSettings,
+      shouldDisplayPopupRecord,
+      popupRecordSettings,
+    ],
   );
 
   if (!schema) return [];

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

@@ -69,6 +69,10 @@ class PluginDataVisualiztionClient extends Plugin {
       title: lang('Charts'),
       Component: 'ChartV2BlockInitializer',
     });
+    this.app.schemaInitializerManager.addItem('popup:common:addBlock', 'dataBlocks.charts', {
+      title: '{{t("Charts")}}',
+      Component: 'ChartV2BlockInitializer',
+    });
   }
 }