@nocobase/plugin-charts 0.9.1-alpha.2

package/lib/client/ChartBlockInitializer.js

@@ -0,0 +1,324 @@
+"use strict";
+
+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() {
+    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;
+}
+
+var _ChartBlockEngineDesigner = require("./ChartBlockEngineDesigner");
+
+var _ChartQueryBlockInitializer = require("./ChartQueryBlockInitializer");
+
+var _DataSetPreviewTable = _interopRequireDefault(require("./DataSetPreviewTable"));
+
+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 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) { 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 Options = (0, _react().observer)(props => {
+  const form = (0, _react().useForm)();
+  const field = (0, _react().useField)();
+
+  const _useState = (0, _react2().useState)(new (_react().Schema)({})),
+        _useState2 = _slicedToArray(_useState, 2),
+        s = _useState2[0],
+        setSchema = _useState2[1];
+
+  const _useState3 = (0, _react2().useState)(form.values.type),
+        _useState4 = _slicedToArray(_useState3, 2),
+        chartType = _useState4[0],
+        setChartType = _useState4[1];
+
+  (0, _react2().useEffect)(() => {
+    var _form$values, _form$values2;
+
+    // form.clearFormGraph('options.*');
+    setChartType(form === null || form === void 0 ? void 0 : (_form$values = form.values) === null || _form$values === void 0 ? void 0 : _form$values.type);
+
+    if (chartType !== (form === null || form === void 0 ? void 0 : (_form$values2 = form.values) === null || _form$values2 === void 0 ? void 0 : _form$values2.type)) {
+      form.clearFormGraph('options.*');
+    }
+
+    if (form.values.type) {
+      const template = _templates.templates.get(form.values.type);
+
+      setSchema(new (_react().Schema)(template.configurableProperties || {}));
+    }
+  }, [form.values.type]);
+  return _react2().default.createElement(_react().RecursionField, {
+    schema: s
+  });
+});
+exports.Options = Options;
+
+const ChartBlockInitializer = props => {
+  const insert = props.insert;
+  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;
+
+  return _react2().default.createElement(_ChartQueryBlockInitializer.ChartQueryBlockInitializer, _objectSpread(_objectSpread({}, props), {}, {
+    componentType: 'Charts',
+    onCreateBlockSchema: function () {
+      var _onCreateBlockSchema = _asyncToGenerator(function* ({
+        item: chartQueryMetadata
+      }) {
+        const dataSource = chartQueryMetadata === null || chartQueryMetadata === void 0 ? void 0 : chartQueryMetadata.fields.map(field => {
+          return {
+            label: field.name,
+            value: field.name
+          };
+        });
+        let values = yield (0, _antd().FormDialog)({
+          okText: compile('{{t("Submit")}}'),
+          title: (0, _locale.lang)('Create chart block'),
+          width: 1200,
+          bodyStyle: {
+            background: '#f0f2f5',
+            maxHeight: '65vh',
+            overflow: 'auto'
+          }
+        }, () => {
+          var _chartBlockEngineMeta, _chartBlockEngineMeta2;
+
+          const form = (0, _react().useForm)();
+
+          const _useState5 = (0, _react2().useState)(null),
+                _useState6 = _slicedToArray(_useState5, 2),
+                chartBlockEngineMetaData = _useState6[0],
+                setChartBlockEngineMetaData = _useState6[1];
+
+          (0, _react2().useEffect)(() => {
+            const chartBlockEngineMetaData = {
+              query: {
+                id: chartQueryMetadata === null || chartQueryMetadata === void 0 ? void 0 : chartQueryMetadata.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, {
+            title: (0, _locale.lang)('Chart config'),
+            size: 'default',
+            className: (0, _css().css)`
+                        flex: 1;
+                      `
+          }, _react2().default.createElement(_client().FormProvider, {
+            form: form
+          }, _react2().default.createElement(_antd().FormLayout, {
+            layout: 'vertical'
+          }, _react2().default.createElement(_client().SchemaComponent, {
+            scope: {
+              dataSource,
+              JSON5: _json().default,
+              jsonConfigDesc: _ChartBlockEngineDesigner.jsonConfigDesc
+            },
+            components: {
+              Options
+            },
+            schema: {
+              properties: {
+                // title: {
+                //   title: lang('Chart title'),
+                //   'x-component': 'Input',
+                //   'x-decorator': 'FormItem',
+                // },
+                type: {
+                  title: (0, _locale.lang)('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
+                  }
+                }
+              }
+            }
+          }))), _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: chartQueryMetadata === null || chartQueryMetadata === void 0 ? void 0 : chartQueryMetadata.fields
+          }))))));
+        }).open({
+          initialValues: {}
+        });
+
+        if (values) {
+          const chartBlockEngineMetaData = {
+            query: {
+              id: chartQueryMetadata.id
+            },
+            chart: values
+          };
+          insert({
+            type: 'void',
+            title: values === null || values === void 0 ? void 0 : values.title,
+            'x-designer': 'ChartBlockEngine.Designer',
+            'x-decorator': 'CardItem',
+            'x-component': 'ChartBlockEngine',
+            'x-component-props': {
+              chartBlockEngineMetaData
+            }
+          });
+        }
+      });
+
+      function onCreateBlockSchema(_x) {
+        return _onCreateBlockSchema.apply(this, arguments);
+      }
+
+      return onCreateBlockSchema;
+    }()
+  }));
+};
+
+exports.ChartBlockInitializer = ChartBlockInitializer;

package/lib/client/ChartQueryBlockInitializer.d.ts

@@ -0,0 +1,9 @@
+export interface ChartQueryMetadata {
+    id: number;
+    title: string;
+    type: string;
+    fields: {
+        name: string;
+    }[];
+}
+export declare const ChartQueryBlockInitializer: (props: any) => JSX.Element;

package/lib/client/ChartQueryBlockInitializer.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartQueryBlockInitializer = void 0;
+
+function _icons() {
+  const data = require("@ant-design/icons");
+
+  _icons = function _icons() {
+    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 _react2() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react2 = function _react2() {
+    return data;
+  };
+
+  return data;
+}
+
+var _ChartQueryMetadataProvider = require("./ChartQueryMetadataProvider");
+
+var _locale = require("./locale");
+
+var _queryTypes = require("./settings/queryTypes");
+
+const _excluded = ["templateWrap", "onCreateBlockSchema", "componentType", "createBlockSchema", "insert"];
+
+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) { 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const ChartQueryBlockInitializer = props => {
+  const defaultItems = [{
+    type: 'itemGroup',
+    title: (0, _locale.lang)('Select query data'),
+    children: []
+  }];
+
+  const templateWrap = props.templateWrap,
+        onCreateBlockSchema = props.onCreateBlockSchema,
+        componentType = props.componentType,
+        createBlockSchema = props.createBlockSchema,
+        insert = props.insert,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const _useContext = (0, _react2().useContext)(_client().SchemaInitializerButtonContext),
+        setVisible = _useContext.setVisible;
+
+  const _useState = (0, _react2().useState)(defaultItems),
+        _useState2 = _slicedToArray(_useState, 2),
+        items = _useState2[0],
+        setItems = _useState2[1];
+
+  const apiClient = (0, _client().useAPIClient)();
+  const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
+  const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
+
+  const onAddQuery = info => {
+    (0, _antd().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, {
+        layout: 'vertical'
+      }, _react2().default.createElement(_client().SchemaComponent, {
+        schema: {
+          type: 'object',
+          properties: {
+            title: {
+              title: (0, _locale.lang)('Title'),
+              required: true,
+              'x-component': 'Input',
+              'x-decorator': 'FormItem'
+            },
+            options: (0, _queryTypes.getQueryTypeSchema)(info.key)
+          }
+        }
+      }))));
+    }).open({
+      initialValues: {
+        type: info.key
+      }
+    }).then( /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* (values) {
+        try {
+          var _apiClient$resource, _apiClient$resource$c;
+
+          const _yield$apiClient$reso = yield (_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : (_apiClient$resource$c = _apiClient$resource.create) === null || _apiClient$resource$c === void 0 ? void 0 : _apiClient$resource$c.call(_apiClient$resource, {
+            values
+          }),
+                data = _yield$apiClient$reso.data;
+
+          const items = yield ctx.refresh();
+          const item = items.find(item => {
+            var _data$data;
+
+            return item.id === (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.id);
+          });
+          onCreateBlockSchema({
+            item
+          });
+          setVisible(false);
+        } catch (error) {}
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }()).catch(() => {});
+  };
+
+  (0, _react2().useEffect)(() => {
+    const chartQueryMetadata = ctx.data;
+
+    if (chartQueryMetadata && Array.isArray(chartQueryMetadata)) {
+      setItems([chartQueryMetadata.length > 0 ? {
+        type: 'itemGroup',
+        title: '{{t("Select chart query", {ns: "charts"})}}',
+        children: chartQueryMetadata
+      } : null, chartQueryMetadata.length > 0 ? {
+        type: 'divider'
+      } : null,, {
+        type: 'subMenu',
+        title: (0, _locale.lang)('Add chart query'),
+        // component: AddChartQuery,
+        children: [{
+          key: 'sql',
+          type: 'item',
+          title: 'SQL',
+          onClick: onAddQuery
+        }, {
+          key: 'json',
+          type: 'item',
+          title: 'JSON',
+          onClick: onAddQuery
+        }]
+      }].filter(Boolean));
+    }
+  }, []);
+  return _react2().default.createElement(_client().SchemaInitializer.Item, _objectSpread(_objectSpread({
+    icon: _react2().default.createElement(_icons().TableOutlined, null)
+  }, others), {}, {
+    onClick: function () {
+      var _onClick = _asyncToGenerator(function* ({
+        item
+      }) {
+        onCreateBlockSchema({
+          item
+        });
+        setVisible(false);
+      });
+
+      function onClick(_x2) {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }(),
+    items: items
+  }));
+};
+
+exports.ChartQueryBlockInitializer = ChartQueryBlockInitializer;

package/lib/client/ChartQueryMetadataProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const ChartQueryMetadataContext: React.Context<{
+    refresh: () => void;
+    data: any[];
+}>;
+export declare const ChartQueryMetadataProvider: React.FC;
+export declare const useChartQueryMetadataContext: () => {
+    refresh: () => void;
+    data: any[];
+};