@nocobase/plugin-data-visualization 0.10.1-alpha.1 → 0.11.0-alpha.1

package/lib/client/Settings.js

@@ -11,23 +11,23 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
 }
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _client() {
+  const data = require("@nocobase/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _antd2() {
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -60,21 +60,21 @@ const Settings = () => {
   const list = Object.entries(libraries).map(([library, {
     enabled
   }]) => {
-    return _react().default.createElement(_antd2().Button, {
+    return _react().default.createElement(_antd().Button, {
       key: library,
       icon: enabled ? _react().default.createElement(_icons().CheckOutlined, null) : '',
-      className: (0, _classnames().default)((0, _css().css)`
+      className: (0, _classnames().default)((0, _client().css)`
             margin: 8px 8px 8px 0;
-          `, enabled ? (0, _css().css)`
+          `, enabled ? (0, _client().css)`
                 color: #40a9ff;
                 border-color: #40a9ff;
               ` : ''),
       onClick: () => toggle(library)
     }, library);
   });
-  return _react().default.createElement(_antd2().Card, null, _react().default.createElement(_antd().Form, {
+  return _react().default.createElement(_antd().Card, null, _react().default.createElement(_antdV().Form, {
     layout: "vertical"
-  }, _react().default.createElement(_antd().FormItem, {
+  }, _react().default.createElement(_antdV().FormItem, {
     label: t('Enabled Chart Library')
   }, list)));
 };

package/lib/client/block/ChartConfigure.d.ts

@@ -1,11 +1,11 @@
 import { ISchema } from '@formily/react';
 import React from 'react';
-export declare type ChartConfigCurrent = {
+export type ChartConfigCurrent = {
     schema: ISchema;
     field: any;
     collection: string;
 };
-export declare type SelectedField = {
+export type SelectedField = {
     field: string | string[];
     alias?: string;
 };

package/lib/client/block/ChartConfigure.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;
@@ -39,9 +39,9 @@ function _client() {
   };
   return data;
 }
-function _antd2() {
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -87,8 +87,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-const Paragraph = _antd2().Typography.Paragraph,
-  Text = _antd2().Typography.Text;
+const Paragraph = _antd().Typography.Paragraph,
+  Text = _antd().Typography.Text;
 const ChartConfigContext = (0, _react2().createContext)({
   visible: true
 });
@@ -186,7 +186,7 @@ const ChartConfigure = props => {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       loading = _React$useState6[0],
       setLoading = _React$useState6[1];
-    return _react2().default.createElement(_antd2().Button, {
+    return _react2().default.createElement(_antd().Button, {
       type: "link",
       loading: loading,
       icon: _react2().default.createElement(_icons().RightSquareOutlined, null),
@@ -216,7 +216,7 @@ const ChartConfigure = props => {
   };
   const queryRef = (0, _react2().useRef)(null);
   const configRef = (0, _react2().useRef)(null);
-  return _react2().default.createElement(_antd2().Modal, {
+  return _react2().default.createElement(_antd().Modal, {
     title: t('Configure chart'),
     open: visible,
     onOk: () => {
@@ -250,7 +250,7 @@ const ChartConfigure = props => {
       });
     },
     onCancel: () => {
-      _antd2().Modal.confirm({
+      _antd().Modal.confirm({
         title: t('Are you sure to cancel?'),
         content: t('You changes are not saved. If you click OK, your changes will be lost.'),
         okButtonProps: {
@@ -267,20 +267,20 @@ const ChartConfigure = props => {
     bodyStyle: {
       background: 'rgba(128, 128, 128, 0.08)'
     }
-  }, _react2().default.createElement(_antd().Form, {
+  }, _react2().default.createElement(_antdV().Form, {
     layout: "vertical",
     form: form
-  }, _react2().default.createElement(_antd2().Row, {
+  }, _react2().default.createElement(_antd().Row, {
     gutter: 8
-  }, _react2().default.createElement(_antd2().Col, {
+  }, _react2().default.createElement(_antd().Col, {
     span: 7
-  }, _react2().default.createElement(_antd2().Card, {
+  }, _react2().default.createElement(_antd().Card, {
     style: {
       height: 'calc(100vh - 300px)',
       overflow: 'scroll'
     },
     ref: queryRef
-  }, _react2().default.createElement(_antd2().Tabs, {
+  }, _react2().default.createElement(_antd().Tabs, {
     tabBarExtraContent: _react2().default.createElement(RunButton, null),
     items: [{
       label: t('Query'),
@@ -291,15 +291,15 @@ const ChartConfigure = props => {
       key: 'data',
       children: _react2().default.createElement(ChartConfigure.Data, null)
     }]
-  }))), _react2().default.createElement(_antd2().Col, {
+  }))), _react2().default.createElement(_antd().Col, {
     span: 6
-  }, _react2().default.createElement(_antd2().Card, {
+  }, _react2().default.createElement(_antd().Card, {
     style: {
       height: 'calc(100vh - 300px)',
       overflow: 'scroll'
     },
     ref: configRef
-  }, _react2().default.createElement(_antd2().Tabs, {
+  }, _react2().default.createElement(_antd().Tabs, {
     items: [{
       label: t('Chart'),
       key: 'chart',
@@ -309,9 +309,9 @@ const ChartConfigure = props => {
       key: 'transform',
       children: _react2().default.createElement(ChartConfigure.Transform, null)
     }]
-  }))), _react2().default.createElement(_antd2().Col, {
+  }))), _react2().default.createElement(_antd().Col, {
     span: 11
-  }, _react2().default.createElement(_antd2().Card, null, _react2().default.createElement(ChartConfigure.Renderer, {
+  }, _react2().default.createElement(_antd().Card, null, _react2().default.createElement(ChartConfigure.Renderer, {
     runQuery: runQuery
   }))))));
 };
@@ -355,7 +355,7 @@ ChartConfigure.Query = function Query() {
     t: lang
   });
   const filterOptions = (0, _client().useCollectionFilterOptions)(collection);
-  const formCollapse = _antd().FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
+  const formCollapse = _antdV().FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
   const onCollectionChange = value => {
     const schema = current.schema,
       field = current.field;
@@ -392,17 +392,17 @@ ChartConfigure.Query = function Query() {
       useOrderReaction: (0, _hooks.useOrderReaction)(compiledFieldOptions, fields)
     },
     components: {
-      ArrayItems: _antd().ArrayItems,
-      Editable: _antd().Editable,
-      FormCollapse: _antd().FormCollapse,
-      Card: _antd2().Card,
-      Switch: _antd().Switch,
+      ArrayItems: _antdV().ArrayItems,
+      Editable: _antdV().Editable,
+      FormCollapse: _antdV().FormCollapse,
+      Card: _antd().Card,
+      Switch: _antdV().Switch,
       Select: _client().Select,
       Input: _client().Input,
       InputNumber: _client().InputNumber,
-      FormItem: _antd().FormItem,
+      FormItem: _antdV().FormItem,
       Radio: _client().Radio,
-      Space: _antd2().Space,
+      Space: _antd().Space,
       Filter: _client().Filter,
       DatePicker: _client().DatePicker,
       Text,
@@ -444,12 +444,12 @@ ChartConfigure.Config = function Config() {
         getReference
       },
       components: {
-        Card: _antd2().Card,
+        Card: _antd().Card,
         Select: _client().Select,
         Input: _client().Input,
-        FormItem: _antd().FormItem,
-        ArrayItems: _antd().ArrayItems,
-        Space: _antd2().Space,
+        FormItem: _antdV().FormItem,
+        ArrayItems: _antdV().ArrayItems,
+        Space: _antd().Space,
         AutoComplete: _client().AutoComplete
       }
     });
@@ -465,9 +465,9 @@ ChartConfigure.Transform = function Transform() {
     schema: _configure.transformSchema,
     components: {
       Select: _client().Select,
-      FormItem: _antd().FormItem,
-      ArrayItems: _antd().ArrayItems,
-      Space: _antd2().Space
+      FormItem: _antdV().FormItem,
+      ArrayItems: _antdV().ArrayItems,
+      Space: _antd().Space
     },
     scope: {
       useChartFields: getChartFields,
@@ -481,7 +481,7 @@ ChartConfigure.Data = function Data() {
   const _useContext4 = (0, _react2().useContext)(ChartConfigContext),
     data = _useContext4.data;
   const fields = (0, _hooks.useFieldsWithAssociation)();
-  return Array.isArray(data) ? _react2().default.createElement(_antd2().Table, {
+  return Array.isArray(data) ? _react2().default.createElement(_antd().Table, {
     dataSource: data,
     columns: Object.keys(data[0] || {}).map(col => {
       const field = (0, _utils.getField)(fields, col.split('.'));
@@ -492,7 +492,7 @@ ChartConfigure.Data = function Data() {
       };
     }),
     size: "small"
-  }) : _react2().default.createElement(_antd2().Alert, {
+  }) : _react2().default.createElement(_antd().Alert, {
     message: "Error",
     type: "error",
     description: data,

package/lib/client/block/transformers.js

@@ -4,35 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _dayjs() {
-  const data = _interopRequireDefault(require("dayjs"));
-  _dayjs = function _dayjs() {
+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 transformers = {
   datetime: {
-    YYYY: val => (0, _dayjs().default)(val).format('YYYY'),
-    MM: val => (0, _dayjs().default)(val).format('MM'),
-    DD: val => (0, _dayjs().default)(val).format('DD'),
-    'YYYY-MM': val => (0, _dayjs().default)(val).format('YYYY-MM'),
-    'YYYY-MM-DD': val => (0, _dayjs().default)(val).format('YYYY-MM-DD'),
-    'YYYY-MM-DD hh:mm': val => (0, _dayjs().default)(val).format('YYYY-MM-DD hh:mm'),
-    'YYYY-MM-DD hh:mm:ss': val => (0, _dayjs().default)(val).format('YYYY-MM-DD hh:mm:ss')
+    YYYY: val => (0, _client().dayjs)(val).format('YYYY'),
+    MM: val => (0, _client().dayjs)(val).format('MM'),
+    DD: val => (0, _client().dayjs)(val).format('DD'),
+    'YYYY-MM': val => (0, _client().dayjs)(val).format('YYYY-MM'),
+    'YYYY-MM-DD': val => (0, _client().dayjs)(val).format('YYYY-MM-DD'),
+    'YYYY-MM-DD hh:mm': val => (0, _client().dayjs)(val).format('YYYY-MM-DD hh:mm'),
+    'YYYY-MM-DD hh:mm:ss': val => (0, _client().dayjs)(val).format('YYYY-MM-DD hh:mm:ss')
   },
   date: {
-    YYYY: val => (0, _dayjs().default)(val).format('YYYY'),
-    MM: val => (0, _dayjs().default)(val).format('MM'),
-    DD: val => (0, _dayjs().default)(val).format('DD'),
-    'YYYY-MM': val => (0, _dayjs().default)(val).format('YYYY-MM'),
-    'YYYY-MM-DD': val => (0, _dayjs().default)(val).format('YYYY-MM-DD')
+    YYYY: val => (0, _client().dayjs)(val).format('YYYY'),
+    MM: val => (0, _client().dayjs)(val).format('MM'),
+    DD: val => (0, _client().dayjs)(val).format('DD'),
+    'YYYY-MM': val => (0, _client().dayjs)(val).format('YYYY-MM'),
+    'YYYY-MM-DD': val => (0, _client().dayjs)(val).format('YYYY-MM-DD')
   },
   time: {
-    'hh:mm:ss': val => (0, _dayjs().default)(val).format('hh:mm:ss'),
-    'hh:mm': val => (0, _dayjs().default)(val).format('hh:mm'),
-    hh: val => (0, _dayjs().default)(val).format('hh')
+    'hh:mm:ss': val => (0, _client().dayjs)(val).format('hh:mm:ss'),
+    'hh:mm': val => (0, _client().dayjs)(val).format('hh:mm'),
+    hh: val => (0, _client().dayjs)(val).format('hh')
   },
   number: {
     Percent: val => new Intl.NumberFormat('en-US', {

package/lib/client/hooks.d.ts

@@ -1,7 +1,7 @@
 import { ArrayField } from '@formily/core';
 import { ISchema } from '@formily/react';
 import { ChartRendererProps } from './renderer';
-export declare type FieldOption = {
+export type FieldOption = {
     value: string;
     label: string;
     key: string;

package/lib/client/index.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
+import { Plugin } from '@nocobase/client';
 import { ChartLibraryProvider } from './renderer/ChartLibrary';
-declare const Chart: React.FC;
-export default Chart;
+declare class DataVisualizationPlugin extends Plugin {
+    load(): Promise<void>;
+}
+export default DataVisualizationPlugin;
 export { ChartLibraryProvider };

package/lib/client/index.js

@@ -30,6 +30,8 @@ var _renderer = require("./renderer");
 var _ChartLibrary = require("./renderer/ChartLibrary");
 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 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); }); }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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; }
@@ -66,5 +68,13 @@ const Chart = props => {
     charts: _renderer.InternalLibrary
   }, props.children)));
 };
-var _default = Chart;
+class DataVisualizationPlugin extends _client().Plugin {
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.app.addProvider(Chart);
+    })();
+  }
+}
+var _default = DataVisualizationPlugin;
 exports.default = _default;

package/lib/client/renderer/ChartLibrary.d.ts

@@ -6,7 +6,7 @@ import { QueryProps } from './ChartRendererProvider';
  * @params {usePropsFunc} useProps - Accept the information that the chart component needs to render,
  * process it and return the props of the chart component.
  */
-export declare type usePropsFunc = (props: {
+export type usePropsFunc = (props: {
     data: any[];
     fieldProps: {
         [field: string]: FieldOption & {
@@ -16,7 +16,7 @@ export declare type usePropsFunc = (props: {
     general: any;
     advanced: any;
 }) => any;
-export declare type ChartProps = {
+export type ChartProps = {
     name: string;
     component: React.FC<any>;
     schema?: ISchema;
@@ -33,10 +33,10 @@ export declare type ChartProps = {
         link: string;
     };
 };
-export declare type Charts = {
+export type Charts = {
     [type: string]: ChartProps;
 };
-export declare type ChartLibraries = {
+export type ChartLibraries = {
     [library: string]: {
         enabled: boolean;
         charts: Charts;

package/lib/client/renderer/ChartLibrary.js

@@ -83,7 +83,7 @@ const infer = (fields, {
       alias = _parseField.alias;
     return fields.find(f => f.value === alias);
   };
-  if (measures === null || measures === void 0 ? void 0 : measures.length) {
+  if (measures !== null && measures !== void 0 && measures.length) {
     yField = getField(fields, measures[0]);
     yFields = measures.map(m => getField(fields, m));
   }

package/lib/client/renderer/ChartRenderer.js

@@ -142,7 +142,7 @@ const ChartRenderer = props => {
     const run = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (query) {
         var _query$measures;
-        if (query === null || query === void 0 ? void 0 : (_query$measures = query.measures) === null || _query$measures === void 0 ? void 0 : _query$measures.length // || (query?.sql?.fields && query?.sql?.clauses)
+        if (query !== null && query !== void 0 && (_query$measures = query.measures) !== null && _query$measures !== void 0 && _query$measures.length // || (query?.sql?.fields && query?.sql?.clauses)
         ) {
           yield runAsync(query);
         }

package/lib/client/renderer/ChartRendererProvider.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
-export declare type MeasureProps = {
+export type MeasureProps = {
     field: string | string[];
     aggregation?: string;
     alias?: string;
 };
-export declare type DimensionProps = {
+export type DimensionProps = {
     field: string | string[];
     alias?: string;
     format?: string;
 };
-export declare type TransformProps = {
+export type TransformProps = {
     field: string;
     type: string;
     format: string;
 };
-export declare type QueryProps = Partial<{
+export type QueryProps = Partial<{
     measures: MeasureProps[];
     dimensions: DimensionProps[];
     orders: {
@@ -28,7 +28,7 @@ export declare type QueryProps = Partial<{
         clauses?: string;
     };
 }>;
-export declare type ChartRendererProps = {
+export type ChartRendererProps = {
     collection: string;
     query?: QueryProps;
     config?: {

package/lib/client/renderer/ChartRendererProvider.js

@@ -4,6 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartRendererProvider = exports.ChartRendererContext = void 0;
+function _css() {
+  const data = require("@emotion/css");
+  _css = function _css() {
+    return data;
+  };
+  return data;
+}
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -31,8 +38,17 @@ const ChartRendererProvider = props => {
   const collection = props.collection;
   return _react().default.createElement(_client().MaybeCollectionProvider, {
     collection: collection
+  }, _react().default.createElement("div", {
+    className: (0, _css().css)`
+          .ant-card {
+            box-shadow: none;
+          }
+          .ant-card-body {
+            padding: 0;
+          }
+        `
   }, _react().default.createElement(ChartRendererContext.Provider, {
     value: _objectSpread({}, props)
-  }, props.children));
+  }, props.children)));
 };
 exports.ChartRendererProvider = ChartRendererProvider;

package/lib/client/renderer/library/AntdLibrary.js

@@ -97,7 +97,7 @@ const AntdLibrary = {
       const dataSource = data.map(item => {
         Object.keys(item).map(key => {
           const props = fieldProps[key];
-          if (props === null || props === void 0 ? void 0 : props.transformer) {
+          if (props !== null && props !== void 0 && props.transformer) {
             item[key] = props.transformer(item[key]);
           }
         });

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

@@ -1,23 +1,23 @@
 import { Context, Next } from '@nocobase/actions';
 import { Cache } from '@nocobase/cache';
-declare type MeasureProps = {
+type MeasureProps = {
     field: string | string[];
     type?: string;
     aggregation?: string;
     alias?: string;
 };
-declare type DimensionProps = {
+type DimensionProps = {
     field: string | string[];
     type?: string;
     alias?: string;
     format?: string;
 };
-declare type OrderProps = {
+type OrderProps = {
     field: string | string[];
     alias?: string;
     order?: 'asc' | 'desc';
 };
-declare type QueryParams = Partial<{
+type QueryParams = Partial<{
     uid: string;
     collection: string;
     measures: MeasureProps[];

package/package.json

@@ -1,23 +1,35 @@
 {
   "name": "@nocobase/plugin-data-visualization",
-  "version": "0.10.1-alpha.1",
-  "main": "lib/server/index.js",
-  "devDependencies": {
-    "@nocobase/actions": "0.10.1-alpha.1",
-    "@nocobase/cache": "0.10.1-alpha.1",
-    "@nocobase/server": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1",
-    "@testing-library/react": "^14.0.0",
-    "lodash": "^4.17.21"
-  },
-  "dependencies": {
-    "@ant-design/plots": "^1.2.5",
-    "dayjs": "^1.11.7",
-    "react-error-boundary": "^4.0.4"
-  },
+  "version": "0.11.0-alpha.1",
   "displayName": "Data Visualization",
   "displayName.zh-CN": "数据可视化",
   "description": "Provides business intelligence and data visualization features",
   "description.zh-CN": "提供BI面板和数据可视化功能",
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "main": "lib/server/index.js",
+  "dependencies": {
+    "@ant-design/plots": "^1.2.5",
+    "classnames": "^2.3.1",
+    "react-error-boundary": "^4.0.10"
+  },
+  "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/actions": "0.11.0-alpha.1",
+    "@nocobase/cache": "0.11.0-alpha.1",
+    "@nocobase/client": "0.11.0-alpha.1",
+    "@nocobase/database": "0.11.0-alpha.1",
+    "@nocobase/server": "0.11.0-alpha.1",
+    "@nocobase/test": "0.11.0-alpha.1",
+    "@nocobase/utils": "0.11.0-alpha.1",
+    "@testing-library/react": "^12.1.5",
+    "antd": "^5.6.4",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-i18next": "^11.15.1",
+    "vitest": "^0.33.0"
+  },
+  "gitHead": "7581b6d3a3a54f09f06a9effb7e3e65328281b2b"
 }

package/src/client/Settings.tsx

@@ -1,6 +1,6 @@
 import { CheckOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
-import { Form, FormItem } from '@formily/antd';
+import { Form, FormItem } from '@formily/antd-v5';
+import { css } from '@nocobase/client';
 import { Button, Card } from 'antd';
 import cls from 'classnames';
 import React, { useContext } from 'react';

package/src/client/__tests__/hooks.test.ts

@@ -1,5 +1,5 @@
 import * as client from '@nocobase/client';
-import { renderHook } from '@testing-library/react';
+// import { renderHook } from '@testing-library/react';
 import { vi } from 'vitest';
 import formatters from '../block/formatters';
 import transformers from '../block/transformers';
@@ -13,7 +13,8 @@ import {
   useTransformers,
 } from '../hooks';
 
-describe('hooks', () => {
+// TODO: 为了暂时解决很多 Warning 的问题把 `@testing-library/react` 降级到了 12.x 所以不支持 `renderHook`，等到再次升级到 14.x 时再把 skip 去掉
+describe.skip('hooks', () => {
   beforeEach(() => {
     vi.spyOn(client, 'useCollectionManager').mockReturnValue({
       getCollectionFields: (name: string) =>

package/src/client/block/ChartConfigure.tsx

@@ -1,18 +1,18 @@
 import { RightSquareOutlined } from '@ant-design/icons';
-import { ArrayItems, Editable, Form, FormCollapse, FormItem, Switch } from '@formily/antd';
-import { createForm, Form as FormType, ObjectField, onFieldChange, onFormInit } from '@formily/core';
+import { ArrayItems, Editable, Form, FormCollapse, FormItem, Switch } from '@formily/antd-v5';
+import { Form as FormType, ObjectField, createForm, onFieldChange, onFormInit } from '@formily/core';
 import { FormConsumer, ISchema, Schema } from '@formily/react';
 import {
   AutoComplete,
   Cascader,
   DatePicker,
   Filter,
-  gridRowColWrap,
   Input,
   InputNumber,
   Radio,
   SchemaComponent,
   Select,
+  gridRowColWrap,
   useCollectionFieldsOptions,
   useCollectionFilterOptions,
   useDesignable,
@@ -24,15 +24,15 @@ import { useTranslation } from 'react-i18next';
 import {
   useChartFields,
   useCollectionOptions,
-  useFieldsWithAssociation,
   useFieldTypes,
+  useFieldsWithAssociation,
   useFormatters,
   useOrderFieldsOptions,
   useOrderReaction,
   useTransformers,
 } from '../hooks';
 import { useChartsTranslation } from '../locale';
-import { ChartRenderer, ChartRendererProvider, useCharts, useChartTypes } from '../renderer';
+import { ChartRenderer, ChartRendererProvider, useChartTypes, useCharts } from '../renderer';
 import { createRendererSchema, getField, getSelectedFields } from '../utils';
 import { getConfigSchema, querySchema, transformSchema } from './schemas/configure';
 const { Paragraph, Text } = Typography;

package/src/client/block/transformers.ts

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import { dayjs } from '@nocobase/utils/client';
 
 const transformers: {
   [key: string]: {

package/src/client/index.tsx

@@ -1,4 +1,4 @@
-import { SchemaComponentOptions, SchemaInitializerContext, SchemaInitializerProvider } from '@nocobase/client';
+import { Plugin, SchemaComponentOptions, SchemaInitializerContext, SchemaInitializerProvider } from '@nocobase/client';
 import React, { useContext } from 'react';
 import { ChartInitializers, ChartV2Block, ChartV2BlockDesigner, ChartV2BlockInitializer } from './block';
 import { useChartsTranslation } from './locale';
@@ -37,5 +37,11 @@ const Chart: React.FC = (props) => {
   );
 };
 
-export default Chart;
+class DataVisualizationPlugin extends Plugin {
+  async load() {
+    this.app.addProvider(Chart);
+  }
+}
+
+export default DataVisualizationPlugin;
 export { ChartLibraryProvider };

package/src/client/renderer/ChartRendererProvider.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { MaybeCollectionProvider } from '@nocobase/client';
 import React, { createContext } from 'react';
 
@@ -52,7 +53,18 @@ export const ChartRendererProvider: React.FC<ChartRendererProps> = (props) => {
   const { collection } = props;
   return (
     <MaybeCollectionProvider collection={collection}>
-      <ChartRendererContext.Provider value={{ ...props }}>{props.children}</ChartRendererContext.Provider>
+      <div
+        className={css`
+          .ant-card {
+            box-shadow: none;
+          }
+          .ant-card-body {
+            padding: 0;
+          }
+        `}
+      >
+        <ChartRendererContext.Provider value={{ ...props }}>{props.children}</ChartRendererContext.Provider>
+      </div>
     </MaybeCollectionProvider>
   );
 };