@nocobase/plugin-charts 0.9.4-alpha.2 → 0.10.0-alpha.3

package/lib/client/ChartBlockEngine.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface IQueryConfig {
     id: number;
 }
@@ -21,7 +22,7 @@ export declare const useGetDataSet: (chartQueryId: number) => {
 declare const ChartBlockEngine: {
     ({ chartBlockEngineMetaData }: {
         chartBlockEngineMetaData: ChartBlockEngineMetaData;
-    }): JSX.Element;
-    Designer: () => JSX.Element;
+    }): React.JSX.Element;
+    Designer: () => React.JSX.Element;
 };
 export { ChartBlockEngine };

package/lib/client/ChartBlockEngineDesigner.d.ts

@@ -1,3 +1,4 @@
-export declare const jsonConfigDesc: (title: string, link: string) => JSX.Element;
-export declare const ChartBlockEngineDesigner: () => JSX.Element;
-export declare const ChartBlockEngineDesignerInitializer: (props: any) => JSX.Element;
+import React from 'react';
+export declare const jsonConfigDesc: (title: string, link: string) => React.JSX.Element;
+export declare const ChartBlockEngineDesigner: () => React.JSX.Element;
+export declare const ChartBlockEngineDesignerInitializer: (props: any) => React.JSX.Element;

package/lib/client/ChartBlockInitializer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const Options: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
-export declare const ChartBlockInitializer: (props: any) => JSX.Element;
+export declare const Options: React.MemoExoticComponent<import("@formily/react").ReactFC<unknown>>;
+export declare const ChartBlockInitializer: (props: any) => React.JSX.Element;

package/lib/client/ChartBlockInitializer.js

@@ -100,6 +100,8 @@ const Options = (0, _react().observer)(props => {
   return _react2().default.createElement(_react().RecursionField, {
     schema: s
   });
+}, {
+  displayName: 'Options'
 });
 exports.Options = Options;
 const ChartBlockInitializer = props => {

package/lib/client/ChartQueryBlockInitializer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface ChartQueryMetadata {
     id: number;
     title: string;
@@ -6,4 +7,4 @@ export interface ChartQueryMetadata {
         name: string;
     }[];
 }
-export declare const ChartQueryBlockInitializer: (props: any) => JSX.Element;
+export declare const ChartQueryBlockInitializer: (props: any) => React.JSX.Element;

package/lib/client/ChartQueryBlockInitializer.js

@@ -32,6 +32,13 @@ function _client() {
   };
   return data;
 }
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
+    return data;
+  };
+  return data;
+}
 function _react2() {
   const data = _interopRequireWildcard(require("react"));
   _react2 = function _react2() {
@@ -52,20 +59,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const ChartQueryBlockInitializer = props => {
-  const defaultItems = [{
-    type: 'itemGroup',
-    title: (0, _locale.lang)('Select query data'),
-    children: []
-  }];
   const templateWrap = props.templateWrap,
     onCreateBlockSchema = props.onCreateBlockSchema,
     componentType = props.componentType,
@@ -74,14 +70,10 @@ const ChartQueryBlockInitializer = props => {
     others = _objectWithoutProperties(props, _excluded);
   const _useContext = (0, _react2().useContext)(_client().SchemaInitializerButtonContext),
     setVisible = _useContext.setVisible;
-  const _useState = (0, _react2().useState)(defaultItems),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
   const apiClient = (0, _client().useAPIClient)();
   const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
-  const onAddQuery = info => {
+  const onAddQuery = (0, _react2().useCallback)(info => {
     (0, _antd().FormDialog)({
       sql: (0, _locale.lang)('Add SQL query'),
       json: (0, _locale.lang)('Add JSON query')
@@ -112,37 +104,50 @@ const ChartQueryBlockInitializer = props => {
     }).then( /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (values) {
         try {
-          var _apiClient$resource, _apiClient$resource$c;
-          const _yield$apiClient$reso = yield (_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : (_apiClient$resource$c = _apiClient$resource.create) === null || _apiClient$resource$c === void 0 ? void 0 : _apiClient$resource$c.call(_apiClient$resource, {
-              values
-            }),
-            data = _yield$apiClient$reso.data;
-          const items = yield ctx.refresh();
-          const item = items.find(item => {
-            var _data$data;
-            return item.id === (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.id);
-          });
-          onCreateBlockSchema({
-            item
-          });
+          var _apiClient$resource;
+          if ((_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : _apiClient$resource.create) {
+            const _yield$apiClient$reso = yield apiClient.resource('chartsQueries').create({
+                values
+              }),
+              data = _yield$apiClient$reso.data;
+            const items = yield ctx.refresh();
+            const item = items.find(item => {
+              var _data$data;
+              return item.id === (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.id);
+            });
+            onCreateBlockSchema({
+              item
+            });
+          }
           setVisible(false);
-        } catch (error) {}
+        } catch (err) {
+          (0, _client2().error)(err);
+        }
       });
-      return function (_x2) {
+      return function (_x) {
         return _ref.apply(this, arguments);
       };
-    }()).catch(() => {});
-  };
-  (0, _react2().useEffect)(() => {
+    }()).catch(err => {
+      (0, _client2().error)(err);
+    });
+  }, [apiClient, ctx, onCreateBlockSchema, options.components, options.scope, setVisible]);
+  const items = (0, _react2().useMemo)(() => {
+    const defaultItems = [{
+      type: 'itemGroup',
+      title: (0, _locale.lang)('Select query data'),
+      children: []
+    }];
     const chartQueryMetadata = ctx.data;
     if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
-      setItems([chartQueryMetadata.length > 0 ? {
+      const item1 = chartQueryMetadata.length > 0 ? {
         type: 'itemGroup',
         title: '{{t("Select chart query", {ns: "charts"})}}',
         children: chartQueryMetadata
-      } : null, chartQueryMetadata.length > 0 ? {
+      } : null;
+      const item2 = chartQueryMetadata.length > 0 ? {
         type: 'divider'
-      } : null,, {
+      } : null;
+      return [item1, item2, {
         type: 'subMenu',
         title: (0, _locale.lang)('Add chart query'),
         // component: AddChartQuery,
@@ -157,9 +162,10 @@ const ChartQueryBlockInitializer = props => {
           title: 'JSON',
           onClick: onAddQuery
         }]
-      }].filter(Boolean));
+      }].filter(Boolean);
     }
-  }, []);
+    return defaultItems;
+  }, [ctx.data, onAddQuery]);
   return _react2().default.createElement(_client().SchemaInitializer.Item, _objectSpread(_objectSpread({
     icon: _react2().default.createElement(_icons().TableOutlined, null)
   }, others), {}, {
@@ -172,7 +178,7 @@ const ChartQueryBlockInitializer = props => {
         });
         setVisible(false);
       });
-      function onClick(_x3) {
+      function onClick(_x2) {
         return _onClick.apply(this, arguments);
       }
       return onClick;

package/lib/client/DataSetPreviewTable.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 declare const _default: ({ queryId, fields }: {
     queryId: number;
     fields: any;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/lib/client/hooks/index.js

@@ -28,7 +28,7 @@ const useFieldsById = queryId => {
     const chartQueryList = ctx === null || ctx === void 0 ? void 0 : ctx.data;
     if (chartQueryList && Array.isArray(chartQueryList)) {
       const currentQuery = chartQueryList.find(chartQuery => chartQuery.id === queryId);
-      setFields(currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.fields);
+      setFields((currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.fields) || []);
     }
   }, [queryId]);
   return {

package/lib/client/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import './Icons';
-declare const _default: React.NamedExoticComponent<object>;
-export default _default;
+declare const Charts: React.NamedExoticComponent<object>;
+export default Charts;

package/lib/client/index.js

@@ -65,7 +65,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     }
   }
 });
-var _default = _react().default.memo(props => {
+const Charts = _react().default.memo(props => {
   const api = (0, _client().useAPIClient)();
   const items = (0, _react().useContext)(_client().SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -125,4 +125,6 @@ var _default = _react().default.memo(props => {
     value: items
   }, props.children))));
 });
+Charts.displayName = 'Charts';
+var _default = Charts;
 exports.default = _default;

package/lib/client/select/ReadPretty.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const ReadPretty: React.MemoExoticComponent<React.FunctionComponent<Pick<any, string | number | symbol>>>;
+export declare const ReadPretty: React.MemoExoticComponent<import("@formily/react").ReactFC<Pick<any, string | number | symbol>>>;

package/lib/client/select/ReadPretty.js

@@ -71,5 +71,7 @@ const ReadPretty = (0, _react().observer)(props => {
     color: option[fieldNames.color],
     icon: option.icon
   }, compile(option[fieldNames.label]))));
+}, {
+  displayName: 'ReadPretty'
 });
 exports.ReadPretty = ReadPretty;

package/lib/client/settings/AddNewQuery.d.ts

@@ -1,2 +1,3 @@
-export declare const AddNewQuery: () => JSX.Element;
-export declare const EditQuery: () => JSX.Element;
+import React from 'react';
+export declare const AddNewQuery: () => React.JSX.Element;
+export declare const EditQuery: () => React.JSX.Element;

package/lib/client/settings/AddNewQuery.js

@@ -54,8 +54,8 @@ function _react2() {
   return data;
 }
 var _ChartQueryMetadataProvider = require("../ChartQueryMetadataProvider");
-var _queryTypes = require("./queryTypes");
 var _locale = require("../locale");
+var _queryTypes = require("./queryTypes");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -188,36 +188,44 @@ const AddNewQuery = () => {
     schema = _useState4[0],
     setSchema = _useState4[1];
   const form = (0, _react2().useMemo)(() => (0, _core().createForm)(), []);
-  const menu = _react2().default.createElement(_antd().Menu, {
-    onClick: info => {
-      setVisible(true);
-      form.setValues({
-        type: info.key
-      });
-      setSchema(getSchema({
-        type: info.key
+  const menu = (0, _react2().useMemo)(() => {
+    return {
+      onClick: info => {
+        setVisible(true);
+        form.setValues({
+          type: info.key
+        });
+        setSchema(getSchema({
+          type: info.key
+        }, {
+          form,
+          isNewRecord: true
+        }));
+      },
+      items: [{
+        key: 'json',
+        label: 'JSON'
       }, {
-        form,
-        isNewRecord: true
-      }));
-    }
-  }, _react2().default.createElement(_antd().Menu.Item, {
-    key: 'json'
-  }, "JSON"), _react2().default.createElement(_antd().Menu.Item, {
-    key: 'sql'
-  }, "SQL"), _react2().default.createElement(_antd().Menu.Item, {
-    disabled: true,
-    key: 'api'
-  }, "API"), _react2().default.createElement(_antd().Menu.Item, {
-    disabled: true
-  }, "Collection"));
-  return _react2().default.createElement(_client().ActionContext.Provider, {
+        key: 'sql',
+        label: 'SQL'
+      }, {
+        key: 'api',
+        label: 'API',
+        disabled: true
+      }, {
+        key: 'collection',
+        label: 'Collection',
+        disabled: true
+      }]
+    };
+  }, [form]);
+  return _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible,
       setVisible
     }
   }, _react2().default.createElement(_antd().Dropdown, {
-    overlay: menu
+    menu: menu
   }, _react2().default.createElement(_antd().Button, {
     icon: _react2().default.createElement(_icons().PlusOutlined, null),
     type: 'primary'
@@ -241,7 +249,7 @@ const EditQuery = () => {
     form,
     isNewRecord: false
   });
-  return _react2().default.createElement(_client().ActionContext.Provider, {
+  return _react2().default.createElement(_client().ActionContextProvider, {
     value: {
       visible,
       setVisible

package/lib/client/settings/ConfigureFields.d.ts

@@ -1 +1,2 @@
-export declare const ConfigureFields: () => JSX.Element;
+import React from 'react';
+export declare const ConfigureFields: () => React.JSX.Element;

package/lib/client/settings/QueriesTable.d.ts

@@ -1 +1,2 @@
-export declare const QueriesTable: () => JSX.Element;
+import React from 'react';
+export declare const QueriesTable: () => React.JSX.Element;

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@nocobase/plugin-charts",
-  "version": "0.9.4-alpha.2",
+  "displayName": "charts",
+  "displayName.zh-CN": "图表",
+  "description": "Out-of-the-box, feature-rich chart plugins.",
+  "description.zh-CN": "开箱即用、丰富的报表。",
+  "version": "0.10.0-alpha.3",
   "main": "lib/server/index.js",
   "devDependencies": {
-    "@nocobase/client": "0.9.4-alpha.2",
-    "@nocobase/server": "0.9.4-alpha.2",
-    "@nocobase/test": "0.9.4-alpha.2"
+    "@nocobase/client": "0.10.0-alpha.3",
+    "@nocobase/server": "0.10.0-alpha.3",
+    "@nocobase/test": "0.10.0-alpha.3"
   },
   "dependencies": {
     "json5": "^2.2.3"
   },
-  "gitHead": "2bc19a85bf9425aa220b6c467315c8087f333a7e"
+  "gitHead": "1f0b27fc9ab2398cd41c308a6b01a986e025cd20"
 }

package/src/client/ChartBlockInitializer.tsx

@@ -20,24 +20,27 @@ import DataSetPreviewTable from './DataSetPreviewTable';
 import { lang, useChartsTranslation } from './locale';
 import { templates } from './templates';
 
-export const Options = observer((props) => {
-  const form = useForm<ChartFormInterface>();
-  const field = useField<Field>();
-  const [s, setSchema] = useState(new Schema({}));
-  const [chartType, setChartType] = useState(form.values.type);
-  useEffect(() => {
-    // form.clearFormGraph('options.*');
-    setChartType(form?.values?.type);
-    if (chartType !== form?.values?.type) {
-      form.clearFormGraph('options.*');
-    }
-    if (form.values.type) {
-      const template = templates.get(form.values.type);
-      setSchema(new Schema(template.configurableProperties || {}));
-    }
-  }, [form.values.type]);
-  return <RecursionField schema={s} />;
-});
+export const Options = observer(
+  (props) => {
+    const form = useForm<ChartFormInterface>();
+    const field = useField<Field>();
+    const [s, setSchema] = useState(new Schema({}));
+    const [chartType, setChartType] = useState(form.values.type);
+    useEffect(() => {
+      // form.clearFormGraph('options.*');
+      setChartType(form?.values?.type);
+      if (chartType !== form?.values?.type) {
+        form.clearFormGraph('options.*');
+      }
+      if (form.values.type) {
+        const template = templates.get(form.values.type);
+        setSchema(new Schema(template.configurableProperties || {}));
+      }
+    }, [form.values.type]);
+    return <RecursionField schema={s} />;
+  },
+  { displayName: 'Options' },
+);
 
 interface ChartFormInterface {
   type: string;

package/src/client/ChartQueryBlockInitializer.tsx

@@ -8,7 +8,8 @@ import {
   SchemaInitializerButtonContext,
   useAPIClient,
 } from '@nocobase/client';
-import React, { useContext, useEffect, useState } from 'react';
+import { error } from '@nocobase/utils/client';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useChartQueryMetadataContext } from './ChartQueryMetadataProvider';
 import { lang } from './locale';
 import { getQueryTypeSchema } from './settings/queryTypes';
@@ -21,107 +22,121 @@ export interface ChartQueryMetadata {
 }
 
 export const ChartQueryBlockInitializer = (props) => {
-  const defaultItems: any = [
-    {
-      type: 'itemGroup',
-      title: lang('Select query data'),
-      children: [],
-    },
-  ];
   const { templateWrap, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
   const { setVisible } = useContext(SchemaInitializerButtonContext);
-  const [items, setItems] = useState(defaultItems);
   const apiClient = useAPIClient();
   const ctx = useChartQueryMetadataContext();
   const options = useContext(SchemaOptionsContext);
-  const onAddQuery = (info) => {
-    FormDialog(
-      {
-        sql: lang('Add SQL query'),
-        json: lang('Add JSON query'),
-      }[info.key],
-      () => {
-        return (
-          <div>
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-              <FormLayout layout={'vertical'}>
-                <SchemaComponent
-                  schema={{
-                    type: 'object',
-                    properties: {
-                      title: {
-                        title: lang('Title'),
-                        required: true,
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
+  const onAddQuery = useCallback(
+    (info) => {
+      FormDialog(
+        {
+          sql: lang('Add SQL query'),
+          json: lang('Add JSON query'),
+        }[info.key],
+        () => {
+          return (
+            <div>
+              <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                <FormLayout layout={'vertical'}>
+                  <SchemaComponent
+                    schema={{
+                      type: 'object',
+                      properties: {
+                        title: {
+                          title: lang('Title'),
+                          required: true,
+                          'x-component': 'Input',
+                          'x-decorator': 'FormItem',
+                        },
+                        options: getQueryTypeSchema(info.key),
                       },
-                      options: getQueryTypeSchema(info.key),
-                    },
-                  }}
-                />
-              </FormLayout>
-            </SchemaComponentOptions>
-          </div>
-        );
-      },
-    )
-      .open({
-        initialValues: {
-          type: info.key,
+                    }}
+                  />
+                </FormLayout>
+              </SchemaComponentOptions>
+            </div>
+          );
         },
-      })
-      .then(async (values) => {
-        try {
-          const { data } = await apiClient.resource('chartsQueries')?.create?.({ values });
-          const items = (await ctx.refresh()) as any;
-          const item = items.find((item) => item.id === data?.data?.id);
-          onCreateBlockSchema({ item });
-          setVisible(false);
-        } catch (error) {}
-      })
-      .catch(() => {});
-  };
-  useEffect(() => {
+      )
+        .open({
+          initialValues: {
+            type: info.key,
+          },
+        })
+        .then(async (values) => {
+          try {
+            if (apiClient.resource('chartsQueries')?.create) {
+              const { data } = await apiClient.resource('chartsQueries').create({ values });
+              const items = (await ctx.refresh()) as any;
+              const item = items.find((item) => item.id === data?.data?.id);
+              onCreateBlockSchema({ item });
+            }
+            setVisible(false);
+          } catch (err) {
+            error(err);
+          }
+        })
+        .catch((err) => {
+          error(err);
+        });
+    },
+    [apiClient, ctx, onCreateBlockSchema, options.components, options.scope, setVisible],
+  );
+
+  const items = useMemo(() => {
+    const defaultItems: any = [
+      {
+        type: 'itemGroup',
+        title: lang('Select query data'),
+        children: [],
+      },
+    ];
     const chartQueryMetadata = ctx.data;
     if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
-      setItems(
-        [
-          chartQueryMetadata.length > 0
-            ? {
-                type: 'itemGroup',
-                title: '{{t("Select chart query", {ns: "charts"})}}',
-                children: chartQueryMetadata,
-              }
-            : null,
-          chartQueryMetadata.length > 0
-            ? {
-                type: 'divider',
-              }
-            : null,
-          ,
-          {
-            type: 'subMenu',
-            title: lang('Add chart query'),
-            // component: AddChartQuery,
-            children: [
-              {
-                key: 'sql',
-                type: 'item',
-                title: 'SQL',
-                onClick: onAddQuery,
-              },
-              {
-                key: 'json',
-                type: 'item',
-                title: 'JSON',
-                onClick: onAddQuery,
-              },
-            ],
-          },
-        ].filter(Boolean),
-      );
+      const item1 =
+        chartQueryMetadata.length > 0
+          ? {
+              type: 'itemGroup',
+              title: '{{t("Select chart query", {ns: "charts"})}}',
+              children: chartQueryMetadata,
+            }
+          : null;
+      const item2 =
+        chartQueryMetadata.length > 0
+          ? {
+              type: 'divider',
+            }
+          : null;
+
+      return [
+        item1,
+        item2,
+        {
+          type: 'subMenu',
+          title: lang('Add chart query'),
+          // component: AddChartQuery,
+          children: [
+            {
+              key: 'sql',
+              type: 'item',
+              title: 'SQL',
+              onClick: onAddQuery,
+            },
+            {
+              key: 'json',
+              type: 'item',
+              title: 'JSON',
+              onClick: onAddQuery,
+            },
+          ],
+        },
+      ].filter(Boolean);
     }
-  }, []);
+
+    return defaultItems;
+  }, [ctx.data, onAddQuery]);
+
   return (
     <SchemaInitializer.Item
       icon={<TableOutlined />}

package/src/client/hooks/index.ts

@@ -8,7 +8,7 @@ const useFieldsById = (queryId: number) => {
     const chartQueryList = ctx?.data;
     if (chartQueryList && Array.isArray(chartQueryList)) {
       const currentQuery = chartQueryList.find((chartQuery) => chartQuery.id === queryId);
-      setFields(currentQuery?.fields);
+      setFields(currentQuery?.fields || []);
     }
   }, [queryId]);
   return {

package/src/client/index.tsx

@@ -39,9 +39,9 @@ registerValidateRules({
   },
 });
 
-export default React.memo((props) => {
+const Charts = React.memo((props) => {
   const api = useAPIClient();
-  const items = useContext(SchemaInitializerContext);
+  const items = useContext<any>(SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
   if (children) {
     const hasChartItem = children.some((child) => child?.component === 'ChartBlockInitializer');
@@ -99,3 +99,6 @@ export default React.memo((props) => {
     </ChartQueryMetadataProvider>
   );
 });
+Charts.displayName = 'Charts';
+
+export default Charts;

package/src/client/select/ReadPretty.tsx

@@ -11,26 +11,29 @@ type Composed = {
   Object?: React.FC<any>;
 };
 
-export const ReadPretty = observer((props: any) => {
-  const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
-  const field = useField<any>();
-  const compile = useCompile();
+export const ReadPretty = observer(
+  (props: any) => {
+    const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
+    const field = useField<any>();
+    const compile = useCompile();
 
-  if (!isValid(props.value)) {
-    return <div />;
-  }
-  if (isArrayField(field) && field?.value?.length === 0) {
-    return <div />;
-  }
-  const dataSource = field.dataSource || props.options || [];
-  const options = getCurrentOptions(field.value, dataSource, fieldNames);
-  return (
-    <div>
-      {options.map((option, key) => (
-        <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
-          {compile(option[fieldNames.label])}
-        </Tag>
-      ))}
-    </div>
-  );
-});
+    if (!isValid(props.value)) {
+      return <div />;
+    }
+    if (isArrayField(field) && field?.value?.length === 0) {
+      return <div />;
+    }
+    const dataSource = field.dataSource || props.options || [];
+    const options = getCurrentOptions(field.value, dataSource, fieldNames);
+    return (
+      <div>
+        {options.map((option, key) => (
+          <Tag key={key} color={option[fieldNames.color]} icon={option.icon}>
+            {compile(option[fieldNames.label])}
+          </Tag>
+        ))}
+      </div>
+    );
+  },
+  { displayName: 'ReadPretty' },
+);

package/src/client/select/index.md

@@ -1,25 +1,18 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
 # Select
 
 ## Examples
 
 ### 单选
 
-<code src="./demos/demo1.tsx" />
+<code src="./demos/demo1.tsx"></code>
 
 ### 多选
 
-<code src="./demos/demo2.tsx" />
+<code src="./demos/demo2.tsx"></code>
 
 ### 值为 Object 类型的 Select
 
-<code src="./demos/demo3.tsx" />
+<code src="./demos/demo3.tsx"></code>
 
 ## API
 

package/src/client/settings/AddNewQuery.tsx

@@ -3,18 +3,18 @@ import { createForm } from '@formily/core';
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import {
-  ActionContext,
+  ActionContextProvider,
   SchemaComponent,
   useActionContext,
   useRecord,
   useResourceActionContext,
   useResourceContext,
 } from '@nocobase/client';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 import React, { useMemo, useState } from 'react';
 import { useChartQueryMetadataContext } from '../ChartQueryMetadataProvider';
-import { getQueryTypeSchema } from './queryTypes';
 import { lang } from '../locale';
+import { getQueryTypeSchema } from './queryTypes';
 
 const useCreateAction = () => {
   const { setVisible } = useActionContext();
@@ -112,31 +112,46 @@ export const AddNewQuery = () => {
   const [visible, setVisible] = useState(false);
   const [schema, setSchema] = useState({});
   const form = useMemo(() => createForm(), []);
-  const menu = (
-    <Menu
-      onClick={(info) => {
+
+  const menu = useMemo<MenuProps>(() => {
+    return {
+      onClick: (info) => {
         setVisible(true);
         form.setValues({ type: info.key });
         setSchema(getSchema({ type: info.key }, { form, isNewRecord: true }));
-      }}
-    >
-      <Menu.Item key={'json'}>JSON</Menu.Item>
-      <Menu.Item key={'sql'}>SQL</Menu.Item>
-      <Menu.Item disabled key={'api'}>
-        API
-      </Menu.Item>
-      <Menu.Item disabled>Collection</Menu.Item>
-    </Menu>
-  );
+      },
+      items: [
+        {
+          key: 'json',
+          label: 'JSON',
+        },
+        {
+          key: 'sql',
+          label: 'SQL',
+        },
+        {
+          key: 'api',
+          label: 'API',
+          disabled: true,
+        },
+        {
+          key: 'collection',
+          label: 'Collection',
+          disabled: true,
+        },
+      ],
+    };
+  }, [form]);
+
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
-      <Dropdown overlay={menu}>
+    <ActionContextProvider value={{ visible, setVisible }}>
+      <Dropdown menu={menu}>
         <Button icon={<PlusOutlined />} type={'primary'}>
           {lang('Add query')} <DownOutlined />
         </Button>
       </Dropdown>
       <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useCreateAction }} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };
 
@@ -146,7 +161,7 @@ export const EditQuery = () => {
   const form = useMemo(() => createForm(), []);
   const schema = getSchema(record, { form, isNewRecord: false });
   return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
+    <ActionContextProvider value={{ visible, setVisible }}>
       <a
         onClick={() => {
           form.setValues(record);
@@ -156,6 +171,6 @@ export const EditQuery = () => {
         {lang('Edit')}
       </a>
       <SchemaComponent schema={schema} scope={{ useCloseAction, useSubmitAction: useUpdateAction }} />
-    </ActionContext.Provider>
+    </ActionContextProvider>
   );
 };