@nocobase/plugin-charts 0.9.1-alpha.2

package/client.d.ts

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

package/client.js

@@ -0,0 +1,30 @@
+"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];
+    }
+  });
+});

package/lib/client/ChartBlockEngine.d.ts

@@ -0,0 +1,27 @@
+export interface IQueryConfig {
+    id: number;
+}
+export interface IChartConfig {
+    type: string;
+    template: string;
+    metric: string;
+    dimension: string;
+    category?: string;
+    [key: string]: any;
+}
+export interface ChartBlockEngineMetaData {
+    query: IQueryConfig;
+    chart: IChartConfig;
+}
+export declare const useGetDataSet: (chartQueryId: number) => {
+    loading: boolean;
+    dataSet: any;
+    error: Error;
+};
+declare const ChartBlockEngine: {
+    ({ chartBlockEngineMetaData }: {
+        chartBlockEngineMetaData: ChartBlockEngineMetaData;
+    }): JSX.Element;
+    Designer: () => JSX.Element;
+};
+export { ChartBlockEngine };

package/lib/client/ChartBlockEngine.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetDataSet = exports.ChartBlockEngine = void 0;
+
+function _client() {
+  const data = require("@nocobase/client");
+
+  _client = function _client() {
+    return data;
+  };
+
+  return data;
+}
+
+function _antd() {
+  const data = require("antd");
+
+  _antd = function _antd() {
+    return data;
+  };
+
+  return data;
+}
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function _react() {
+    return data;
+  };
+
+  return data;
+}
+
+var _ChartBlockEngineDesigner = require("./ChartBlockEngineDesigner");
+
+var _chartRenderComponents = _interopRequireDefault(require("./chartRenderComponents"));
+
+var _locale = require("./locale");
+
+var _templates = require("./templates");
+
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const ChartRenderComponent = ({
+  chartBlockEngineMetaData
+}) => {
+  var _templates$get;
+
+  const compile = (0, _client().useCompile)();
+  const chartType = chartBlockEngineMetaData.chart.type;
+  const renderComponent = (_templates$get = _templates.templates.get(chartType)) === null || _templates$get === void 0 ? void 0 : _templates$get.renderComponent;
+
+  const RenderComponent = _chartRenderComponents.default.get(renderComponent); //G2Plot | Echarts | D3 |Table
+
+
+  const chartConfig = chartBlockEngineMetaData.chart;
+
+  const _useGetDataSet = useGetDataSet(chartBlockEngineMetaData.query.id),
+        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],
+        setCurrentConfig = _useState2[1];
+
+  (0, _react().useEffect)(() => {
+    setCurrentConfig(chartConfig);
+  }, [JSON.stringify(chartConfig)]);
+
+  if (currentConfig.type !== chartConfig.type) {
+    return _react().default.createElement(_react().default.Fragment, null);
+  }
+
+  switch (renderComponent) {
+    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;
+        let template;
+
+        try {
+          template = _json().default.parse(chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.template);
+        } catch (e) {
+          template = {};
+        }
+
+        const config = compile(_objectSpread(_objectSpread(_objectSpread({}, finalChartOptions), template), {}, {
+          data: dataSet
+        }), _objectSpread(_objectSpread({}, chartConfig), {}, {
+          category: (_chartConfig$category = chartConfig === null || chartConfig === void 0 ? void 0 : chartConfig.category) !== null && _chartConfig$category !== void 0 ? _chartConfig$category : ''
+        }));
+
+        if (config && chartConfig) {
+          const dimension = chartConfig.dimension,
+                metric = chartConfig.metric,
+                category = chartConfig.category;
+
+          if (!metric || !dimension) {
+            return _react().default.createElement(_react().default.Fragment, null, (0, _locale.lang)('Please check the chart config'));
+          }
+        }
+
+        return _react().default.createElement(_react().default.Fragment, null, loading ? _react().default.createElement(_antd().Spin, null) : _react().default.createElement(RenderComponent, {
+          plot: chartConfig.type,
+          config: config
+        }));
+      }
+  }
+
+  return _react().default.createElement(_react().default.Fragment, null);
+};
+
+const useGetDataSet = chartQueryId => {
+  const _useRequest = (0, _client().useRequest)({
+    url: `/chartsQueries:getData/${chartQueryId}`
+  }),
+        data = _useRequest.data,
+        loading = _useRequest.loading,
+        error = _useRequest.error;
+
+  const dataSet = data === null || data === void 0 ? void 0 : data.data;
+  return {
+    loading,
+    dataSet: dataSet,
+    error
+  };
+};
+
+exports.useGetDataSet = useGetDataSet;
+
+const ChartBlockEngine = ({
+  chartBlockEngineMetaData
+}) => {
+  var _chartBlockEngineMeta;
+
+  let renderComponent;
+  const chartType = chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta = chartBlockEngineMetaData.chart) === null || _chartBlockEngineMeta === void 0 ? void 0 : _chartBlockEngineMeta.type;
+
+  if (chartType) {
+    var _templates$get3;
+
+    renderComponent = (_templates$get3 = _templates.templates.get(chartType)) === null || _templates$get3 === void 0 ? void 0 : _templates$get3.renderComponent;
+  }
+
+  if (!chartType || !renderComponent) {
+    return _react().default.createElement(_react().default.Fragment, null, (0, _locale.lang)('Please check the chart config'));
+  }
+
+  return _react().default.createElement(_react().default.Fragment, null, _react().default.createElement(ChartRenderComponent, {
+    chartBlockEngineMetaData: chartBlockEngineMetaData
+  }));
+};
+
+exports.ChartBlockEngine = ChartBlockEngine;
+ChartBlockEngine.Designer = _ChartBlockEngineDesigner.ChartBlockEngineDesigner;

package/lib/client/ChartBlockEngineDesigner.d.ts

@@ -0,0 +1,3 @@
+export declare const jsonConfigDesc: (title: string, link: string) => JSX.Element;
+export declare const ChartBlockEngineDesigner: () => JSX.Element;
+export declare const ChartBlockEngineDesignerInitializer: (props: any) => JSX.Element;

package/lib/client/ChartBlockEngineDesigner.js

@@ -0,0 +1,348 @@
+"use strict";
+
+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() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = require("@formily/react");
+
+  _react = function _react() {
+    return data;
+  };
+
+  return data;
+}
+
+function _client() {
+  const data = require("@nocobase/client");
+
+  _client = function _client() {
+    return data;
+  };
+
+  return data;
+}
+
+function _antd2() {
+  const data = require("antd");
+
+  _antd2 = function _antd2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _json() {
+  const data = _interopRequireDefault(require("json5"));
+
+  _json = function _json() {
+    return data;
+  };
+
+  return data;
+}
+
+function _react2() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react2 = function _react2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactI18next() {
+  const data = require("react-i18next");
+
+  _reactI18next = function _reactI18next() {
+    return data;
+  };
+
+  return data;
+}
+
+var _ChartBlockInitializer = require("./ChartBlockInitializer");
+
+var _DataSetPreviewTable = _interopRequireDefault(require("./DataSetPreviewTable"));
+
+var _hooks = require("./hooks");
+
+var _locale = require("./locale");
+
+var _templates = require("./templates");
+
+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 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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); }); }; }
+
+const jsonConfigDesc = (title, link) => {
+  return _react2().default.createElement("span", null, (0, _locale.lang)('Json config references: '), _react2().default.createElement("a", {
+    href: link,
+    target: "_blank"
+  }, (0, _locale.lang)(title)));
+};
+
+exports.jsonConfigDesc = jsonConfigDesc;
+const validateJSON = {
+  validator: `{{(value, rule)=> {
+    if (!value) {
+      return '';
+    }
+    try {
+      const val = JSON.parse(value);
+      if(!isNaN(val)) {
+        return false;
+      }
+      return true;
+    } catch(error) {
+      console.error(error);
+      return false;
+    }
+  }}}`,
+  message: '{{t("Invalid JSON format",{ ns: "charts" })}}'
+};
+
+const ChartBlockEngineDesigner = () => {
+  const fieldSchema = (0, _react().useFieldSchema)();
+
+  const _fieldSchema$xCompon = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component-props'],
+        chartBlockEngineMetaData = _fieldSchema$xCompon.chartBlockEngineMetaData;
+
+  return _react2().default.createElement(_client().GeneralSchemaDesigner, null, _react2().default.createElement(ChartBlockEngineDesignerInitializer, {
+    chartBlockEngineMetaData: chartBlockEngineMetaData
+  }), _react2().default.createElement(_client().SchemaSettings.Divider, null), _react2().default.createElement(_client().SchemaSettings.Remove, {
+    removeParentsIfNoChildren: true,
+    breakRemoveOn: {
+      'x-component': 'Grid'
+    }
+  }));
+};
+
+exports.ChartBlockEngineDesigner = ChartBlockEngineDesigner;
+
+const ChartBlockEngineDesignerInitializer = props => {
+  const chartBlockEngineMetaData = props.chartBlockEngineMetaData;
+
+  const _useTranslation = (0, _reactI18next().useTranslation)(),
+        t = _useTranslation.t;
+
+  const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
+
+  const _useDesignable = (0, _client().useDesignable)(),
+        dn = _useDesignable.dn;
+
+  const fieldSchema = (0, _react().useFieldSchema)();
+  const api = (0, _client().useAPIClient)();
+  const field = (0, _react().useField)();
+  const compile = (0, _client().useCompile)();
+  const chart = chartBlockEngineMetaData.chart,
+        query = chartBlockEngineMetaData.query;
+
+  const _useFieldsById = (0, _hooks.useFieldsById)(query.id),
+        fields = _useFieldsById.fields;
+
+  const dataSource = fields.map(field => {
+    return {
+      label: field.name,
+      value: field.name
+    };
+  });
+  return _react2().default.createElement(_client().SchemaSettings.Item, {
+    onClick: function () {
+      var _onClick = _asyncToGenerator(function* () {
+        (0, _antd().FormDialog)({
+          okText: compile('{{t("Submit")}}'),
+          title: (0, _locale.lang)('Edit chart block'),
+          width: 1200,
+          bodyStyle: {
+            background: '#f0f2f5',
+            maxHeight: '65vh',
+            overflow: 'auto'
+          }
+        }, form => {
+          var _chartBlockEngineMeta, _chartBlockEngineMeta2;
+
+          const _useState = (0, _react2().useState)(null),
+                _useState2 = _slicedToArray(_useState, 2),
+                chartBlockEngineMetaData = _useState2[0],
+                setChartBlockEngineMetaData = _useState2[1];
+
+          (0, _react2().useEffect)(() => {
+            const chartBlockEngineMetaData = {
+              query: {
+                id: query === null || query === void 0 ? void 0 : query.id
+              },
+              chart: form.values //TODO
+
+            };
+            setChartBlockEngineMetaData(chartBlockEngineMetaData);
+          }, [form.values.type]);
+          return _react2().default.createElement(_client().APIClientProvider, {
+            apiClient: api
+          }, _react2().default.createElement(_client().SchemaComponentOptions, {
+            scope: options.scope,
+            components: _objectSpread({}, options.components)
+          }, _react2().default.createElement("section", {
+            className: (0, _css().css)`
+                      display: flex;
+                      gap: 24px;
+                    `
+          }, _react2().default.createElement(_antd2().Card, {
+            bordered: false,
+            title: _client().i18n.t('Chart config'),
+            size: 'default',
+            className: (0, _css().css)`
+                        flex: 1;
+                      `
+          }, _react2().default.createElement(_antd().FormLayout, {
+            layout: 'vertical'
+          }, _react2().default.createElement(_client().SchemaComponent, {
+            scope: {
+              dataSource,
+              JSON5: _json().default,
+              jsonConfigDesc
+            },
+            components: {
+              Options: _ChartBlockInitializer.Options
+            },
+            schema: {
+              properties: {
+                // title: {
+                //   title: lang('Chart title'),
+                //   'x-component': 'Input',
+                //   'x-decorator': 'FormItem',
+                // },
+                type: {
+                  title: t('Chart type'),
+                  required: true,
+                  'x-component': 'CustomSelect',
+                  'x-decorator': 'FormItem',
+                  enum: [..._templates.templates.values()].map(template => {
+                    return {
+                      title: template.title,
+                      key: template.type,
+                      description: template.description,
+                      group: template.group,
+                      iconId: template.iconId
+                    };
+                  })
+                },
+                options: {
+                  type: 'void',
+                  'x-component': 'Options'
+                }
+              }
+            }
+          }))), _react2().default.createElement("div", {
+            className: (0, _css().css)`
+                        flex: 1;
+                        min-width: 600px;
+                      `
+          }, _react2().default.createElement(_antd2().Card, {
+            size: 'default',
+            title: (0, _locale.lang)('Chart preview')
+          }, chartBlockEngineMetaData && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement(_client().SchemaComponent, {
+            schema: {
+              properties: {
+                chartPreview: {
+                  type: 'void',
+                  'x-decorator': 'CardItem',
+                  'x-component': 'ChartBlockEngine',
+                  'x-component-props': {
+                    chartBlockEngineMetaData: chartBlockEngineMetaData
+                  }
+                }
+              }
+            }
+          }))), _react2().default.createElement(_antd2().Card, {
+            size: 'default',
+            title: (0, _locale.lang)('Data preview'),
+            className: (0, _css().css)`
+                          margin-top: 24px;
+                          overflow: scroll;
+                        `
+          }, (chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta === void 0 ? void 0 : _chartBlockEngineMeta.id) && _react2().default.createElement(_DataSetPreviewTable.default, {
+            queryId: chartBlockEngineMetaData === null || chartBlockEngineMetaData === void 0 ? void 0 : (_chartBlockEngineMeta2 = chartBlockEngineMetaData.query) === null || _chartBlockEngineMeta2 === void 0 ? void 0 : _chartBlockEngineMeta2.id,
+            fields: fields
+          }))))));
+        }).open({
+          initialValues: _objectSpread({}, chart) //reset before chartBlockMetaData
+
+        }).then(values => {
+          //patch updates
+          values = {
+            query,
+            chart: values
+          };
+          field.title = values.chart.title;
+          fieldSchema['title'] = values.chart.title;
+          field.componentProps.chartBlockEngineMetaData = values;
+          fieldSchema['x-component-props'].chartBlockEngineMetaData = values;
+          dn.emit('patch', {
+            schema: {
+              'x-uid': fieldSchema['x-uid'],
+              'x-component-props': fieldSchema['x-component-props']
+            }
+          });
+          dn.refresh();
+        });
+      });
+
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }()
+  }, props.children || props.title || (0, _locale.lang)('Edit chart block'));
+};
+
+exports.ChartBlockEngineDesignerInitializer = ChartBlockEngineDesignerInitializer;

package/lib/client/ChartBlockInitializer.d.ts

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