@nocobase/plugin-data-visualization 0.10.1-alpha.1 → 0.11.1-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/ChartBlock.js

@@ -18,9 +18,15 @@ function _react() {
   };
   return data;
 }
+var _renderer = require("../renderer");
 var _ChartConfigure = require("./ChartConfigure");
 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 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; }
+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); }
@@ -28,6 +34,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 ChartV2Block = props => {
+  var _current$field;
   const _useDesignable = (0, _client().useDesignable)(),
     insertAdjacent = _useDesignable.insertAdjacent;
   const _useState = (0, _react().useState)(false),
@@ -38,18 +45,14 @@ const ChartV2Block = props => {
     _useState4 = _slicedToArray(_useState3, 2),
     current = _useState4[0],
     setCurrent = _useState4[1];
-  const _useState5 = (0, _react().useState)([]),
+  const _useState5 = (0, _react().useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    data = _useState6[0],
-    setData = _useState6[1];
-  const _useState7 = (0, _react().useState)(false),
+    initialVisible = _useState6[0],
+    setInitialVisible = _useState6[1];
+  const _useState7 = (0, _react().useState)(''),
     _useState8 = _slicedToArray(_useState7, 2),
-    initialVisible = _useState8[0],
-    setInitialVisible = _useState8[1];
-  const _useState9 = (0, _react().useState)(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchValue = _useState10[0],
-    setSearchValue = _useState10[1];
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1];
   return _react().default.createElement(_client().SchemaInitializerButtonContext.Provider, {
     value: {
       visible: initialVisible,
@@ -62,12 +65,10 @@ const ChartV2Block = props => {
       visible,
       setVisible,
       current,
-      setCurrent,
-      data,
-      setData
+      setCurrent
     }
-  }, props.children, _react().default.createElement(_ChartConfigure.ChartConfigure, {
+  }, props.children, _react().default.createElement(_renderer.ChartRendererProvider, _objectSpread({}, (_current$field = current.field) === null || _current$field === void 0 ? void 0 : _current$field.decoratorProps), _react().default.createElement(_ChartConfigure.ChartConfigure, {
     insert: (schema, options) => insertAdjacent('beforeEnd', schema, options)
-  })));
+  }))));
 };
 exports.ChartV2Block = ChartV2Block;

package/lib/client/block/ChartBlockInitializer.js

@@ -45,17 +45,17 @@ const itemWrap = _client().SchemaInitializer.itemWrap;
 const ConfigureButton = itemWrap(props => {
   const _useContext = (0, _react().useContext)(_ChartConfigure.ChartConfigContext),
     setVisible = _useContext.setVisible,
-    setCurrent = _useContext.setCurrent,
-    setData = _useContext.setData;
+    setCurrent = _useContext.setCurrent;
   return _react().default.createElement(_client().SchemaInitializer.Item, _objectSpread(_objectSpread({}, props), {}, {
     onClick: () => {
       var _props$item;
       setCurrent({
         schema: {},
         field: null,
-        collection: (_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.name
+        collection: (_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.name,
+        service: null,
+        data: undefined
       });
-      setData([]);
       setVisible(true);
     }
   }));

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

@@ -1,11 +1,14 @@
 import { ISchema } from '@formily/react';
 import React from 'react';
-export declare type ChartConfigCurrent = {
+export type ChartConfigCurrent = {
     schema: ISchema;
     field: any;
     collection: string;
+    service: any;
+    initialValues?: any;
+    data: any[];
 };
-export declare type SelectedField = {
+export type SelectedField = {
     field: string | string[];
     alias?: string;
 };
@@ -14,8 +17,6 @@ export declare const ChartConfigContext: React.Context<{
     setVisible?: (visible: boolean) => void;
     current?: ChartConfigCurrent;
     setCurrent?: (current: ChartConfigCurrent) => void;
-    data?: any[] | string;
-    setData?: (data: any[] | string) => void;
 }>;
 export declare const ChartConfigure: React.FC<{
     insert: (s: ISchema, options: {
@@ -23,9 +24,7 @@ export declare const ChartConfigure: React.FC<{
         wrap?: (schema: ISchema) => ISchema;
     }) => void;
 }> & {
-    Renderer: React.FC<{
-        runQuery?: any;
-    }>;
+    Renderer: React.FC;
     Config: React.FC;
     Query: React.FC;
     Transform: React.FC;

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;
@@ -60,13 +60,6 @@ function _react2() {
   };
   return data;
 }
-function _reactI18next() {
-  const data = require("react-i18next");
-  _reactI18next = function _reactI18next() {
-    return data;
-  };
-  return data;
-}
 var _hooks = require("../hooks");
 var _locale = require("../locale");
 var _renderer = require("../renderer");
@@ -87,8 +80,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
 });
@@ -96,16 +89,21 @@ exports.ChartConfigContext = ChartConfigContext;
 const ChartConfigure = props => {
   const _useChartsTranslation = (0, _locale.useChartsTranslation)(),
     t = _useChartsTranslation.t;
-  const _useContext = (0, _react2().useContext)(ChartConfigContext),
-    visible = _useContext.visible,
-    setVisible = _useContext.setVisible,
-    current = _useContext.current;
+  const _useContext = (0, _react2().useContext)(_renderer.ChartRendererContext),
+    service = _useContext.service;
+  const _useContext2 = (0, _react2().useContext)(ChartConfigContext),
+    visible = _useContext2.visible,
+    setVisible = _useContext2.setVisible,
+    current = _useContext2.current;
   const _ref = current || {},
     schema = _ref.schema,
     field = _ref.field,
-    collection = _ref.collection;
+    collection = _ref.collection,
+    initialValues = _ref.initialValues;
   const _useDesignable = (0, _client().useDesignable)(),
     dn = _useDesignable.dn;
+  const _App$useApp = _antd().App.useApp(),
+    modal = _App$useApp.modal;
   const insert = props.insert;
   const charts = (0, _renderer.useCharts)();
   const fields = (0, _hooks.useFieldsWithAssociation)(collection);
@@ -158,65 +156,55 @@ const ChartConfigure = props => {
     setMeasures((0, _lodash().cloneDeep)(currentMeasures));
     setDimensions((0, _lodash().cloneDeep)(currentDimensions));
   };
-  const chartTypes = (0, _renderer.useChartTypes)();
+  const chartType = (0, _renderer.useDefaultChartType)();
   const form = (0, _react2().useMemo)(() => {
-    var _chartTypes$, _chartTypes$$children, _chartTypes$$children2;
-    const chartType = (_chartTypes$ = chartTypes[0]) === null || _chartTypes$ === void 0 ? void 0 : (_chartTypes$$children = _chartTypes$.children) === null || _chartTypes$$children === void 0 ? void 0 : (_chartTypes$$children2 = _chartTypes$$children[0]) === null || _chartTypes$$children2 === void 0 ? void 0 : _chartTypes$$children2.value;
     return (0, _core().createForm)({
       values: _objectSpread(_objectSpread({
         config: {
           chartType
         }
-      }, schema === null || schema === void 0 ? void 0 : schema['x-decorator-props']), {}, {
-        collection,
-        data: ''
+      }, initialValues || (field === null || field === void 0 ? void 0 : field.decoratorProps)), {}, {
+        collection
       }),
       effects: form => {
         (0, _core().onFieldChange)('config.chartType', () => initChart(true));
-        (0, _core().onFormInit)(() => queryReact(form));
+        (0, _core().onFormInit)(() => {
+          queryReact(form);
+        });
       }
     });
   },
   // visible, collection added here to re-initialize form when visible, collection change
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [schema, visible, collection]);
-  const runQuery = (0, _react2().useRef)(null);
-  const RunButton = () => {
-    const _React$useState5 = _react2().default.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      loading = _React$useState6[0],
-      setLoading = _React$useState6[1];
-    return _react2().default.createElement(_antd2().Button, {
-      type: "link",
-      loading: loading,
-      icon: _react2().default.createElement(_icons().RightSquareOutlined, null),
-      onClick: function () {
-        var _onClick = _asyncToGenerator(function* () {
-          const queryField = form.query('query').take();
-          try {
-            yield queryField === null || queryField === void 0 ? void 0 : queryField.validate();
-          } catch (e) {
-            return;
-          }
-          setLoading(true);
-          try {
-            yield runQuery === null || runQuery === void 0 ? void 0 : runQuery.current(form.values.query);
-          } catch (e) {
-            console.log(e);
-          }
-          queryReact(form, initChart);
-          setLoading(false);
-        });
-        function onClick() {
-          return _onClick.apply(this, arguments);
+  [field, visible, collection]);
+  const RunButton = () => _react2().default.createElement(_antd().Button, {
+    type: "link",
+    loading: service === null || service === void 0 ? void 0 : service.loading,
+    icon: _react2().default.createElement(_icons().RightSquareOutlined, null),
+    onClick: function () {
+      var _onClick = _asyncToGenerator(function* () {
+        const queryField = form.query('query').take();
+        try {
+          yield queryField === null || queryField === void 0 ? void 0 : queryField.validate();
+        } catch (e) {
+          return;
         }
-        return onClick;
-      }()
-    }, t('Run query'));
-  };
+        try {
+          yield service.runAsync(collection, form.values.query);
+        } catch (e) {
+          console.log(e);
+        }
+        queryReact(form, initChart);
+      });
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+      return onClick;
+    }()
+  }, t('Run query'));
   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: () => {
@@ -225,6 +213,14 @@ const ChartConfigure = props => {
         config = _form$values.config,
         transform = _form$values.transform,
         mode = _form$values.mode;
+      const afterSave = () => {
+        var _current$service;
+        setVisible(false);
+        (_current$service = current.service) === null || _current$service === void 0 ? void 0 : _current$service.run(collection, query);
+        queryRef.current.scrollTop = 0;
+        configRef.current.scrollTop = 0;
+        service.mutate(undefined);
+      };
       const rendererProps = {
         query,
         config,
@@ -239,18 +235,16 @@ const ChartConfigure = props => {
         dn.emit('patch', {
           schema
         });
-        setVisible(false);
-        queryRef.current.scrollTop = 0;
-        configRef.current.scrollTop = 0;
+        afterSave();
         return;
       }
       insert((0, _utils.createRendererSchema)(rendererProps), {
-        onSuccess: () => setVisible(false),
+        onSuccess: afterSave,
         wrap: _client().gridRowColWrap
       });
     },
     onCancel: () => {
-      _antd2().Modal.confirm({
+      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: {
@@ -260,6 +254,7 @@ const ChartConfigure = props => {
           setVisible(false);
           queryRef.current.scrollTop = 0;
           configRef.current.scrollTop = 0;
+          service.mutate(undefined);
         }
       });
     },
@@ -267,20 +262,21 @@ 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'
+      overflow: 'auto',
+      margin: '12px 0 12px 12px'
     },
     ref: queryRef
-  }, _react2().default.createElement(_antd2().Tabs, {
+  }, _react2().default.createElement(_antd().Tabs, {
     tabBarExtraContent: _react2().default.createElement(RunButton, null),
     items: [{
       label: t('Query'),
@@ -291,15 +287,16 @@ 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'
+      overflow: 'auto',
+      margin: '12px 3px 12px 3px'
     },
     ref: configRef
-  }, _react2().default.createElement(_antd2().Tabs, {
+  }, _react2().default.createElement(_antd().Tabs, {
     items: [{
       label: t('Chart'),
       key: 'chart',
@@ -309,67 +306,71 @@ 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, {
-    runQuery: runQuery
-  }))))));
+  }, _react2().default.createElement(_antd().Card, {
+    style: {
+      margin: '12px 12px 12px 0'
+    }
+  }, _react2().default.createElement(ChartConfigure.Renderer, null))))));
 };
 exports.ChartConfigure = ChartConfigure;
 ChartConfigure.Renderer = function Renderer(props) {
-  const _useContext2 = (0, _react2().useContext)(ChartConfigContext),
-    current = _useContext2.current;
+  const _useContext3 = (0, _react2().useContext)(ChartConfigContext),
+    current = _useContext3.current;
   const _ref2 = current || {},
-    collection = _ref2.collection;
+    collection = _ref2.collection,
+    data = _ref2.data;
+  const _useContext4 = (0, _react2().useContext)(_renderer.ChartRendererContext),
+    service = _useContext4.service;
   return _react2().default.createElement(_react().FormConsumer, null, form => {
     // Any change of config and transform will trigger rerender
     // Change of query only trigger rerender when "Run query" button is clicked
     const config = (0, _lodash().cloneDeep)(form.values.config);
     const transform = (0, _lodash().cloneDeep)(form.values.transform);
-    return _react2().default.createElement(_renderer.ChartRendererProvider, {
-      collection: collection,
-      query: form.values.query,
-      config: config,
-      transform: transform,
-      mode: form.values.mode
-    }, _react2().default.createElement(_renderer.ChartRenderer, _objectSpread({
-      configuring: true
-    }, props)));
+    return _react2().default.createElement(_renderer.ChartRendererContext.Provider, {
+      value: {
+        collection,
+        config,
+        transform,
+        service,
+        data
+      }
+    }, _react2().default.createElement(_renderer.ChartRenderer, _objectSpread({}, props)));
   });
 };
 ChartConfigure.Query = function Query() {
   const _useChartsTranslation2 = (0, _locale.useChartsTranslation)(),
     t = _useChartsTranslation2.t;
-  const _useTranslation = (0, _reactI18next().useTranslation)(),
-    lang = _useTranslation.t;
   const fields = (0, _hooks.useFieldsWithAssociation)();
   const useFormatterOptions = (0, _hooks.useFormatters)(fields);
   const collectionOptions = (0, _hooks.useCollectionOptions)();
-  const _useContext3 = (0, _react2().useContext)(ChartConfigContext),
-    current = _useContext3.current,
-    setCurrent = _useContext3.setCurrent;
+  const _useContext5 = (0, _react2().useContext)(ChartConfigContext),
+    current = _useContext5.current,
+    setCurrent = _useContext5.setCurrent;
   const _ref3 = current || {},
     collection = _ref3.collection;
   const fieldOptions = (0, _client().useCollectionFieldsOptions)(collection, 1);
   const compiledFieldOptions = _react().Schema.compile(fieldOptions, {
-    t: lang
+    t
   });
   const filterOptions = (0, _client().useCollectionFilterOptions)(collection);
-  const formCollapse = _antd().FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
+  const _useContext6 = (0, _react2().useContext)(_renderer.ChartRendererContext),
+    service = _useContext6.service;
   const onCollectionChange = value => {
     const schema = current.schema,
       field = current.field;
-    const newSchema = _objectSpread({}, schema);
-    newSchema['x-decorator-props'] = {
-      collection: value
-    };
-    newSchema['x-acl-action'] = `${value}:list`;
     setCurrent({
-      schema: newSchema,
+      schema,
       field,
-      collection: value
+      collection: value,
+      service: current.service,
+      initialValues: {},
+      data: undefined
     });
+    service.mutate(undefined);
   };
+  const formCollapse = _antdV().FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
   const FromSql = () => _react2().default.createElement(Text, {
     code: true
   }, "From ", _react2().default.createElement("span", {
@@ -392,17 +393,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 +445,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 +466,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,
@@ -478,10 +479,24 @@ ChartConfigure.Transform = function Transform() {
   });
 };
 ChartConfigure.Data = function Data() {
-  const _useContext4 = (0, _react2().useContext)(ChartConfigContext),
-    data = _useContext4.data;
+  var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+  const _useChartsTranslation5 = (0, _locale.useChartsTranslation)(),
+    t = _useChartsTranslation5.t;
+  const _useContext7 = (0, _react2().useContext)(ChartConfigContext),
+    current = _useContext7.current;
+  const _useContext8 = (0, _react2().useContext)(_renderer.ChartRendererContext),
+    service = _useContext8.service;
   const fields = (0, _hooks.useFieldsWithAssociation)();
-  return Array.isArray(data) ? _react2().default.createElement(_antd2().Table, {
+  const data = (0, _utils.processData)(fields, (service === null || service === void 0 ? void 0 : service.data) || (current === null || current === void 0 ? void 0 : current.data) || [], {
+    t
+  });
+  const error = service === null || service === void 0 ? void 0 : service.error;
+  return !error ? _react2().default.createElement("div", {
+    style: {
+      overflowX: 'auto',
+      overflowY: 'hidden'
+    }
+  }, _react2().default.createElement(_antd().Table, {
     dataSource: data,
     columns: Object.keys(data[0] || {}).map(col => {
       const field = (0, _utils.getField)(fields, col.split('.'));
@@ -492,10 +507,10 @@ ChartConfigure.Data = function Data() {
       };
     }),
     size: "small"
-  }) : _react2().default.createElement(_antd2().Alert, {
+  })) : _react2().default.createElement(_antd().Alert, {
     message: "Error",
     type: "error",
-    description: data,
+    description: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$.map) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.call(_error$response$data$, error => error.message).join('\n')) || error.message,
     showIcon: true
   });
 };