@nocobase/plugin-charts 0.10.1-alpha.1 → 0.11.1-alpha.1

package/client.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/client';
-export { default } from './lib/client';
+export * from './src/client';
+export { default } from './src/client';
 

package/client.js

@@ -1,30 +1 @@
-"use strict";
-
-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; }
-
-var _index = _interopRequireWildcard(require("./lib/client"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/client/index.js');

package/lib/client/ChartBlockEngine.d.ts

@@ -15,9 +15,9 @@ export interface ChartBlockEngineMetaData {
     chart: IChartConfig;
 }
 export declare const useGetDataSet: (chartQueryId: number) => {
-    loading: any;
+    loading: boolean;
     dataSet: any;
-    error: any;
+    error: Error;
 };
 declare const ChartBlockEngine: {
     ({ chartBlockEngineMetaData }: {

package/lib/client/ChartBlockEngine.js

@@ -63,11 +63,6 @@ const ChartRenderComponent = ({
     loading = _useGetDataSet.loading,
     dataSet = _useGetDataSet.dataSet,
     error = _useGetDataSet.error;
-  if (error) {
-    return _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(_antd().Empty, {
-      description: _react().default.createElement("span", null, "May be this chart block's query data has been deleted,please check!")
-    }));
-  }
   const _useState = (0, _react().useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     currentConfig = _useState2[0],
@@ -75,6 +70,11 @@ const ChartRenderComponent = ({
   (0, _react().useEffect)(() => {
     setCurrentConfig(chartConfig);
   }, [JSON.stringify(chartConfig)]);
+  if (error) {
+    return _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(_antd().Empty, {
+      description: _react().default.createElement("span", null, `May be this chart block's query data has been deleted,please check!`)
+    }));
+  }
   if (currentConfig.type !== chartConfig.type) {
     return _react().default.createElement(_react().default.Fragment, null);
   }
@@ -82,8 +82,7 @@ const ChartRenderComponent = ({
     case 'G2Plot':
       {
         var _templates$get2, _chartConfig$category;
-        let finalChartOptions;
-        finalChartOptions = (_templates$get2 = _templates.templates.get(chartType)) === null || _templates$get2 === void 0 ? void 0 : _templates$get2.defaultChartOptions;
+        const finalChartOptions = (_templates$get2 = _templates.templates.get(chartType)) === null || _templates$get2 === void 0 ? void 0 : _templates$get2.defaultChartOptions;
         let template;
         try {
           template = _json().default.parse(chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.template);

package/lib/client/ChartBlockEngineDesigner.js

@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.jsonConfigDesc = exports.ChartBlockEngineDesignerInitializer = exports.ChartBlockEngineDesigner = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -32,9 +25,16 @@ function _client() {
   };
   return data;
 }
-function _antd2() {
+function _client2() {
+  const data = require("@nocobase/utils/client");
+  _client2 = function _client2() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -136,6 +136,8 @@ const ChartBlockEngineDesignerInitializer = props => {
     query = chartBlockEngineMetaData.query;
   const _useFieldsById = (0, _hooks.useFieldsById)(query.id),
     fields = _useFieldsById.fields;
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   const dataSource = fields.map(field => {
     return {
       label: field.name,
@@ -145,16 +147,16 @@ const ChartBlockEngineDesignerInitializer = props => {
   return _react2().default.createElement(_client().SchemaSettings.Item, {
     onClick: function () {
       var _onClick = _asyncToGenerator(function* () {
-        (0, _antd().FormDialog)({
+        (0, _client().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Edit chart block'),
           width: 1200,
           bodyStyle: {
-            background: '#f0f2f5',
+            background: 'var(--nb-box-bg)',
             maxHeight: '65vh',
             overflow: 'auto'
           }
-        }, form => {
+        }, function Com(form) {
           var _chartBlockEngineMeta, _chartBlockEngineMeta2;
           const _useState = (0, _react2().useState)(null),
             _useState2 = _slicedToArray(_useState, 2),
@@ -176,18 +178,18 @@ const ChartBlockEngineDesignerInitializer = props => {
             scope: options.scope,
             components: _objectSpread({}, options.components)
           }, _react2().default.createElement("section", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                       display: flex;
                       gap: 24px;
                     `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             bordered: false,
             title: _client().i18n.t('Chart config'),
             size: 'default',
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                       `
-          }, _react2().default.createElement(_antd().FormLayout, {
+          }, _react2().default.createElement(_antdV().FormLayout, {
             layout: 'vertical'
           }, _react2().default.createElement(_client().SchemaComponent, {
             scope: {
@@ -227,11 +229,11 @@ const ChartBlockEngineDesignerInitializer = props => {
               }
             }
           }))), _react2().default.createElement("div", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                         min-width: 600px;
                       `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Chart preview')
           }, chartBlockEngineMetaData && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement(_client().SchemaComponent, {
@@ -247,10 +249,10 @@ const ChartBlockEngineDesignerInitializer = props => {
                 }
               }
             }
-          }))), _react2().default.createElement(_antd2().Card, {
+          }))), _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Data preview'),
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                           margin-top: 24px;
                           overflow: scroll;
                         `
@@ -258,7 +260,7 @@ const ChartBlockEngineDesignerInitializer = props => {
             queryId: chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta2 = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta2 === void 0 ? void 0 : _chartBlockEngineMeta2.id,
             fields: fields
           }))))));
-        }).open({
+        }, theme).open({
           initialValues: _objectSpread({}, chart) //reset before chartBlockMetaData
         }).then(values => {
           //patch updates
@@ -277,6 +279,8 @@ const ChartBlockEngineDesignerInitializer = props => {
             }
           });
           dn.refresh();
+        }).catch(err => {
+          (0, _client2().error)(err);
         });
       });
       function onClick() {

package/lib/client/ChartBlockInitializer.js

@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Options = exports.ChartBlockInitializer = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -32,9 +25,9 @@ function _client() {
   };
   return data;
 }
-function _antd2() {
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -109,8 +102,8 @@ const ChartBlockInitializer = props => {
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
   const api = (0, _client().useAPIClient)();
   const compile = (0, _client().useCompile)();
-  const _useChartsTranslation = (0, _locale.useChartsTranslation)(),
-    t = _useChartsTranslation.t;
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   return _react2().default.createElement(_ChartQueryBlockInitializer.ChartQueryBlockInitializer, _objectSpread(_objectSpread({}, props), {}, {
     componentType: 'Charts',
     onCreateBlockSchema: function () {
@@ -123,16 +116,16 @@ const ChartBlockInitializer = props => {
             value: field.name
           };
         });
-        const values = yield (0, _antd().FormDialog)({
+        const values = yield (0, _client().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Create chart block'),
           width: 1200,
           bodyStyle: {
-            background: '#f0f2f5',
+            background: 'var(--nb-box-bg)',
             maxHeight: '65vh',
             overflow: 'auto'
           }
-        }, () => {
+        }, function Com() {
           var _chartBlockEngineMeta, _chartBlockEngineMeta2;
           const form = (0, _react().useForm)();
           const _useState5 = (0, _react2().useState)(null),
@@ -155,19 +148,19 @@ const ChartBlockInitializer = props => {
             scope: options.scope,
             components: _objectSpread({}, options.components)
           }, _react2().default.createElement("section", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                       display: flex;
                       gap: 24px;
                     `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             title: (0, _locale.lang)('Chart config'),
             size: 'default',
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                       `
           }, _react2().default.createElement(_client().FormProvider, {
             form: form
-          }, _react2().default.createElement(_antd().FormLayout, {
+          }, _react2().default.createElement(_antdV().FormLayout, {
             layout: 'vertical'
           }, _react2().default.createElement(_client().SchemaComponent, {
             scope: {
@@ -207,11 +200,11 @@ const ChartBlockInitializer = props => {
               }
             }
           })))), _react2().default.createElement("div", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                         min-width: 600px;
                       `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Chart preview')
           }, chartBlockEngineMetaData && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement(_client().SchemaComponent, {
@@ -227,10 +220,10 @@ const ChartBlockInitializer = props => {
                 }
               }
             }
-          }))), _react2().default.createElement(_antd2().Card, {
+          }))), _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Data preview'),
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                           margin-top: 24px;
                           overflow: scroll;
                         `
@@ -238,7 +231,7 @@ const ChartBlockInitializer = props => {
             queryId: chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta2 = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta2 === void 0 ? void 0 : _chartBlockEngineMeta2.id,
             fields: chartQueryMetadata === null || chartQueryMetadata === void 0 ? void 0 : chartQueryMetadata.fields
           }))))));
-        }).open({
+        }, theme).open({
           initialValues: {}
         });
         if (values) {

package/lib/client/ChartQueryBlockInitializer.js

@@ -11,9 +11,9 @@ function _icons() {
   };
   return data;
 }
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -73,15 +73,17 @@ const ChartQueryBlockInitializer = props => {
   const apiClient = (0, _client().useAPIClient)();
   const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
+  const _useGlobalTheme = (0, _client().useGlobalTheme)(),
+    theme = _useGlobalTheme.theme;
   const onAddQuery = (0, _react2().useCallback)(info => {
-    (0, _antd().FormDialog)({
+    (0, _client().FormDialog)({
       sql: (0, _locale.lang)('Add SQL query'),
       json: (0, _locale.lang)('Add JSON query')
     }[info.key], () => {
       return _react2().default.createElement("div", null, _react2().default.createElement(_client().SchemaComponentOptions, {
         scope: options.scope,
         components: _objectSpread({}, options.components)
-      }, _react2().default.createElement(_antd().FormLayout, {
+      }, _react2().default.createElement(_antdV().FormLayout, {
         layout: 'vertical'
       }, _react2().default.createElement(_client().SchemaComponent, {
         schema: {
@@ -97,7 +99,7 @@ const ChartQueryBlockInitializer = props => {
           }
         }
       }))));
-    }).open({
+    }, theme).open({
       initialValues: {
         type: info.key
       }
@@ -105,7 +107,7 @@ const ChartQueryBlockInitializer = props => {
       var _ref = _asyncToGenerator(function* (values) {
         try {
           var _apiClient$resource;
-          if ((_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : _apiClient$resource.create) {
+          if ((_apiClient$resource = apiClient.resource('chartsQueries')) !== null && _apiClient$resource !== void 0 && _apiClient$resource.create) {
             const _yield$apiClient$reso = yield apiClient.resource('chartsQueries').create({
                 values
               }),

package/lib/client/DataSetPreviewTable.js

@@ -106,8 +106,8 @@ var _default = ({
       Input: _client().Input,
       FormItem: _client().FormItem
     }
-  }, _react().default.createElement(_client().BlockSchemaComponentProvider, null, _react().default.createElement(_client().SchemaComponent, {
+  }, _react().default.createElement(_client().SchemaComponent, {
     schema: schema
-  })));
+  }));
 };
 exports.default = _default;

package/lib/client/index.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
+import { Plugin } from '@nocobase/client';
 import './Icons';
-declare const Charts: React.NamedExoticComponent<object>;
-export default Charts;
+export declare class ChartsPlugin extends Plugin {
+    load(): Promise<void>;
+}
+export default ChartsPlugin;

package/lib/client/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ChartsPlugin = void 0;
 function _core() {
   const data = require("@formily/core");
   _core = function _core() {
@@ -42,6 +42,8 @@ var _QueriesTable = require("./settings/QueriesTable");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 (0, _core().registerValidateRules)({
   json5: (value, rule) => {
     if (!value) {
@@ -65,7 +67,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     }
   }
 });
-const Charts = _react().default.memo(props => {
+const ChartsProvider = _react().default.memo(props => {
   const api = (0, _client().useAPIClient)();
   const items = (0, _react().useContext)(_client().SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -125,6 +127,17 @@ const Charts = _react().default.memo(props => {
     value: items
   }, props.children))));
 });
-Charts.displayName = 'Charts';
-var _default = Charts;
+ChartsProvider.displayName = 'ChartsProvider';
+class ChartsPlugin extends _client().Plugin {
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.app.use(ChartsProvider);
+      // TODO: 主应用应该会有这个插件，按道理不需要再注册
+      _this.app.pm.add(_client().BlockSchemaComponentPlugin);
+    })();
+  }
+}
+exports.ChartsPlugin = ChartsPlugin;
+var _default = ChartsPlugin;
 exports.default = _default;

package/lib/client/select/CustomSelect.js

@@ -11,13 +11,6 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -105,7 +98,7 @@ const InternalSelect = (0, _react().connect)(props => {
     },
     trigger: "hover"
   }, _react2().default.createElement("div", {
-    className: (0, _css().css)`
+    className: (0, _client().css)`
                     display: flex;
                     gap: 4px;
                     align-items: center;
@@ -129,7 +122,7 @@ const InternalSelect = (0, _react().connect)(props => {
     },
     trigger: "hover"
   }, _react2().default.createElement("div", {
-    className: (0, _css().css)`
+    className: (0, _client().css)`
                     display: flex;
                     gap: 4px;
                     align-items: center;
@@ -145,7 +138,7 @@ const InternalSelect = (0, _react().connect)(props => {
   loading: true
 }, (props, field) => {
   return _objectSpread(_objectSpread({}, props), {}, {
-    suffixIcon: (field === null || field === void 0 ? void 0 : field['loading']) || (field === null || field === void 0 ? void 0 : field['validating']) ? _react2().default.createElement(_icons().LoadingOutlined, null) : props === null || props === void 0 ? void 0 : props.suffixIcon
+    suffixIcon: field !== null && field !== void 0 && field['loading'] || field !== null && field !== void 0 && field['validating'] ? _react2().default.createElement(_icons().LoadingOutlined, null) : props === null || props === void 0 ? void 0 : props.suffixIcon
   });
 }), (0, _react().mapReadPretty)(_ReadPretty.ReadPretty));
 const CustomSelect = InternalSelect;

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

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

package/lib/client/select/shared.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCurrentOptions = exports.defaultFieldNames = void 0;
-function _lodash() {
-  const data = require("lodash");
-  _lodash = function _lodash() {
+function _client() {
+  const data = require("@nocobase/utils/client");
+  _client = function _client() {
     return data;
   };
   return data;
@@ -39,7 +39,7 @@ const getCurrentOptions = (values, dataSource, fieldNames) => {
     return newArr;
   }
   const result = flatData(dataSource);
-  values = (0, _lodash().castArray)(values).filter(item => item != null).map(val => typeof val === 'object' ? val[fieldNames.value] : val);
+  values = _client().lodash.castArray(values).filter(item => item != null).map(val => typeof val === 'object' ? val[fieldNames.value] : val);
   const findOptions = options => {
     if (!options) return [];
     const current = [];

package/lib/client/settings/queryTypes.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sql = exports.json = exports.getQueryTypeSchema = exports.api = void 0;
-function _cloneDeep() {
-  const data = _interopRequireDefault(require("lodash/cloneDeep"));
-  _cloneDeep = function _cloneDeep() {
+function _client() {
+  const data = require("@nocobase/utils/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const json = {
   type: 'object',
   properties: {
@@ -73,6 +72,6 @@ const types = {
   api
 };
 const getQueryTypeSchema = type => {
-  return (0, _cloneDeep().default)(types[type]);
+  return _client().lodash.cloneDeep(types[type]);
 };
 exports.getQueryTypeSchema = getQueryTypeSchema;

package/lib/client/utils.js

@@ -39,7 +39,7 @@ const parseDataSetString = str => {
     if (dataSetDataArray.every(item => {
       return typeof item === 'object' && Object.keys(item).length > 1;
     })) dataSetDataArray.map(item => {
-      if (!(item === null || item === void 0 ? void 0 : item.id)) {
+      if (!(item !== null && item !== void 0 && item.id)) {
         item.id = (0, _shared().uid)();
       }
       return item;

package/lib/server/actions/index.d.ts

@@ -1 +0,0 @@
-

package/package.json

@@ -4,15 +4,37 @@
   "displayName.zh-CN": "图表",
   "description": "Out-of-the-box, feature-rich chart plugins.",
   "description.zh-CN": "开箱即用、丰富的报表。",
-  "version": "0.10.1-alpha.1",
-  "main": "lib/server/index.js",
-  "devDependencies": {
-    "@nocobase/client": "0.10.1-alpha.1",
-    "@nocobase/server": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1"
-  },
+  "version": "0.11.1-alpha.1",
+  "main": "./lib/server/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh-CN.md",
+    "CHANGELOG.md",
+    "server.js",
+    "server.d.ts",
+    "client.js",
+    "client.d.ts"
+  ],
   "dependencies": {
     "json5": "^2.2.3"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "devDependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@formily/antd-v5": "1.1.0-beta.4",
+    "@formily/core": "2.2.26",
+    "@formily/react": "2.2.26",
+    "@formily/shared": "2.2.26",
+    "@nocobase/client": "0.11.1-alpha.1",
+    "@nocobase/database": "0.11.1-alpha.1",
+    "@nocobase/server": "0.11.1-alpha.1",
+    "@nocobase/test": "0.11.1-alpha.1",
+    "@nocobase/utils": "0.11.1-alpha.1",
+    "antd": "^5.6.4",
+    "react": "^18.2.0",
+    "react-i18next": "^11.15.1",
+    "react-router-dom": "^6.11.2"
+  },
+  "gitHead": "9ed1dba520bc5f3a7cb1255ea8d92ccbefc11bc8"
 }

package/server.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/server';
-export { default } from './lib/server';
+export * from './src/server';
+export { default } from './src/server';
 

package/server.js

@@ -1,30 +1 @@
-"use strict";
-
-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; }
-
-var _index = _interopRequireWildcard(require("./lib/server"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/server/index.js');

package/src/client/ChartBlockEngine.tsx

@@ -36,28 +36,27 @@ const ChartRenderComponent = ({
   const chartConfig = chartBlockEngineMetaData.chart;
   const { loading, dataSet, error } = useGetDataSet(chartBlockEngineMetaData.query.id);
 
+  const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
+
+  useEffect(() => {
+    setCurrentConfig(chartConfig);
+  }, [JSON.stringify(chartConfig)]);
+
   if (error) {
     return (
       <>
-        <Empty description={<span>May be this chart block's query data has been deleted,please check!</span>} />
+        <Empty description={<span>{`May be this chart block's query data has been deleted,please check!`}</span>} />
       </>
     );
   }
 
-  const [currentConfig, setCurrentConfig] = useState<IChartConfig>({} as any);
-
-  useEffect(() => {
-    setCurrentConfig(chartConfig);
-  }, [JSON.stringify(chartConfig)]);
-
   if (currentConfig.type !== chartConfig.type) {
     return <></>;
   }
 
   switch (renderComponent) {
     case 'G2Plot': {
-      let finalChartOptions;
-      finalChartOptions = templates.get(chartType)?.defaultChartOptions;
+      const finalChartOptions = templates.get(chartType)?.defaultChartOptions;
       let template;
       try {
         template = JSON5.parse(chartConfig?.template);
@@ -85,7 +84,9 @@ const ChartRenderComponent = ({
 };
 
 export const useGetDataSet = (chartQueryId: number) => {
-  const { data, loading, error } = useRequest({
+  const { data, loading, error } = useRequest<{
+    data: any;
+  }>({
     url: `/chartsQueries:getData/${chartQueryId}`,
   });
   const dataSet = data?.data;

package/src/client/ChartBlockEngineDesigner.tsx

@@ -1,17 +1,20 @@
-import { css } from '@emotion/css';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
 import {
   APIClientProvider,
+  FormDialog,
   GeneralSchemaDesigner,
-  i18n,
   SchemaComponent,
   SchemaComponentOptions,
   SchemaSettings,
+  css,
+  i18n,
   useAPIClient,
   useCompile,
   useDesignable,
+  useGlobalTheme,
 } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
 import { Card } from 'antd';
 import JSON5 from 'json5';
 import React, { useContext, useEffect, useState } from 'react';
@@ -81,12 +84,15 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
   const compile = useCompile();
   const { chart, query } = chartBlockEngineMetaData;
   const { fields } = useFieldsById(query.id);
+  const { theme } = useGlobalTheme();
+
   const dataSource = fields.map((field) => {
     return {
       label: field.name,
       value: field.name,
     };
   });
+
   return (
     <SchemaSettings.Item
       onClick={async () => {
@@ -95,9 +101,9 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
             okText: compile('{{t("Submit")}}'),
             title: lang('Edit chart block'),
             width: 1200,
-            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+            bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
-          (form) => {
+          function Com(form) {
             const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
             useEffect(() => {
               const chartBlockEngineMetaData = {
@@ -208,6 +214,7 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
               </APIClientProvider>
             );
           },
+          theme,
         )
           .open({
             initialValues: { ...chart }, //reset before chartBlockMetaData
@@ -229,6 +236,9 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
               },
             });
             dn.refresh();
+          })
+          .catch((err) => {
+            error(err);
           });
       }}
     >

package/src/client/ChartBlockInitializer.tsx

@@ -1,14 +1,16 @@
-import { css } from '@emotion/css';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormLayout } from '@formily/antd-v5';
 import { Field } from '@formily/core';
-import { observer, RecursionField, Schema, SchemaOptionsContext, useField, useForm } from '@formily/react';
+import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useForm } from '@formily/react';
 import {
   APIClientProvider,
+  FormDialog,
   FormProvider,
   SchemaComponent,
   SchemaComponentOptions,
+  css,
   useAPIClient,
   useCompile,
+  useGlobalTheme,
 } from '@nocobase/client';
 import { Card } from 'antd';
 import JSON5 from 'json5';
@@ -17,7 +19,7 @@ import { ChartBlockEngineMetaData } from './ChartBlockEngine';
 import { jsonConfigDesc } from './ChartBlockEngineDesigner';
 import { ChartQueryBlockInitializer, ChartQueryMetadata } from './ChartQueryBlockInitializer';
 import DataSetPreviewTable from './DataSetPreviewTable';
-import { lang, useChartsTranslation } from './locale';
+import { lang } from './locale';
 import { templates } from './templates';
 
 export const Options = observer(
@@ -57,7 +59,8 @@ export const ChartBlockInitializer = (props) => {
   const options = useContext(SchemaOptionsContext);
   const api = useAPIClient();
   const compile = useCompile();
-  const { t } = useChartsTranslation();
+  const { theme } = useGlobalTheme();
+
   return (
     <ChartQueryBlockInitializer
       {...props}
@@ -74,9 +77,9 @@ export const ChartBlockInitializer = (props) => {
             okText: compile('{{t("Submit")}}'),
             title: lang('Create chart block'),
             width: 1200,
-            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+            bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
-          () => {
+          function Com() {
             const form = useForm<ChartFormInterface>();
             const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
             useEffect(() => {
@@ -192,6 +195,7 @@ export const ChartBlockInitializer = (props) => {
               </APIClientProvider>
             );
           },
+          theme,
         ).open({
           initialValues: {},
         });

package/src/client/ChartQueryBlockInitializer.tsx

@@ -1,12 +1,14 @@
 import { TableOutlined } from '@ant-design/icons';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext } from '@formily/react';
 import {
+  FormDialog,
   SchemaComponent,
   SchemaComponentOptions,
   SchemaInitializer,
   SchemaInitializerButtonContext,
   useAPIClient,
+  useGlobalTheme,
 } from '@nocobase/client';
 import { error } from '@nocobase/utils/client';
 import React, { useCallback, useContext, useMemo } from 'react';
@@ -27,6 +29,8 @@ export const ChartQueryBlockInitializer = (props) => {
   const apiClient = useAPIClient();
   const ctx = useChartQueryMetadataContext();
   const options = useContext(SchemaOptionsContext);
+  const { theme } = useGlobalTheme();
+
   const onAddQuery = useCallback(
     (info) => {
       FormDialog(
@@ -58,6 +62,7 @@ export const ChartQueryBlockInitializer = (props) => {
             </div>
           );
         },
+        theme,
       )
         .open({
           initialValues: {

package/src/client/ChartQueryMetadataProvider.tsx

@@ -22,7 +22,9 @@ export const ChartQueryMetadataProvider: React.FC = (props) => {
 
   const location = useLocation();
 
-  const service = useRequest(options, {
+  const service = useRequest<{
+    data: any;
+  }>(options, {
     manual: true,
   });
 

package/src/client/DataSetPreviewTable.tsx

@@ -1,12 +1,5 @@
 import { ISchema } from '@formily/react';
-import {
-  BlockSchemaComponentProvider,
-  FormItem,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  TableV2,
-} from '@nocobase/client';
+import { FormItem, Input, SchemaComponent, SchemaComponentProvider, TableV2 } from '@nocobase/client';
 import { Empty, Spin } from 'antd';
 import React from 'react';
 import { useGetDataSet } from './ChartBlockEngine';
@@ -72,9 +65,7 @@ export default ({ queryId, fields }: { queryId: number; fields }) => {
   });
   return (
     <SchemaComponentProvider scope={{ dataSet }} components={{ TableV2, Input, FormItem }}>
-      <BlockSchemaComponentProvider>
-        <SchemaComponent schema={schema} />
-      </BlockSchemaComponentProvider>
+      <SchemaComponent schema={schema} />
     </SchemaComponentProvider>
   );
 };

package/src/client/index.tsx

@@ -1,5 +1,7 @@
 import { registerValidateRules } from '@formily/core';
 import {
+  BlockSchemaComponentPlugin,
+  Plugin,
   SchemaComponentOptions,
   SchemaInitializerContext,
   SettingsCenterProvider,
@@ -39,7 +41,7 @@ registerValidateRules({
   },
 });
 
-const Charts = React.memo((props) => {
+const ChartsProvider = React.memo((props) => {
   const api = useAPIClient();
   const items = useContext<any>(SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -99,6 +101,15 @@ const Charts = React.memo((props) => {
     </ChartQueryMetadataProvider>
   );
 });
-Charts.displayName = 'Charts';
+ChartsProvider.displayName = 'ChartsProvider';
 
-export default Charts;
+export class ChartsPlugin extends Plugin {
+  async load() {
+    this.app.use(ChartsProvider);
+
+    // TODO: 主应用应该会有这个插件，按道理不需要再注册
+    this.app.pm.add(BlockSchemaComponentPlugin);
+  }
+}
+
+export default ChartsPlugin;

package/src/client/select/CustomSelect.tsx

@@ -1,8 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { isValid } from '@formily/shared';
-import { Icon } from '@nocobase/client';
+import { css, Icon } from '@nocobase/client';
 import type { SelectProps } from 'antd';
 import { Popover, Select as AntdSelect } from 'antd';
 import React from 'react';

package/src/client/select/shared.ts

@@ -1,4 +1,4 @@
-import { castArray } from 'lodash';
+import { lodash } from '@nocobase/utils/client';
 
 export const defaultFieldNames = {
   label: 'label',
@@ -20,7 +20,8 @@ export const getCurrentOptions = (values, dataSource, fieldNames) => {
     return newArr;
   }
   const result = flatData(dataSource);
-  values = castArray(values)
+  values = lodash
+    .castArray(values)
     .filter((item) => item != null)
     .map((val) => (typeof val === 'object' ? val[fieldNames.value] : val));
   const findOptions = (options: any[]) => {

package/src/client/settings/queryTypes.ts

@@ -1,5 +1,6 @@
 import { ISchema } from '@formily/react';
-import cloneDeep from 'lodash/cloneDeep';
+import { lodash } from '@nocobase/utils/client';
+
 export const json: ISchema = {
   type: 'object',
   properties: {
@@ -60,5 +61,5 @@ const types = {
 };
 
 export const getQueryTypeSchema = (type) => {
-  return cloneDeep(types[type]);
+  return lodash.cloneDeep(types[type]);
 };