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

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

@@ -0,0 +1,86 @@
+import { Context, Next } from '@nocobase/actions';
+import { Cache } from '@nocobase/cache';
+declare type MeasureProps = {
+    field: string | string[];
+    type?: string;
+    aggregation?: string;
+    alias?: string;
+};
+declare type DimensionProps = {
+    field: string | string[];
+    type?: string;
+    alias?: string;
+    format?: string;
+};
+declare type OrderProps = {
+    field: string | string[];
+    alias?: string;
+    order?: 'asc' | 'desc';
+};
+declare type QueryParams = Partial<{
+    uid: string;
+    collection: string;
+    measures: MeasureProps[];
+    dimensions: DimensionProps[];
+    orders: OrderProps[];
+    filter: any;
+    limit: number;
+    sql: {
+        fields?: string;
+        clauses?: string;
+    };
+    cache: {
+        enabled: boolean;
+        ttl: number;
+    };
+    refresh: boolean;
+}>;
+export declare const parseFieldAndAssociations: (ctx: Context, params: QueryParams) => {
+    where: any;
+    measures: {
+        field: any;
+        name: string;
+        type: any;
+        alias: string;
+    }[];
+    dimensions: {
+        field: any;
+        name: string;
+        type: any;
+        alias: string;
+    }[];
+    orders: {
+        field: any;
+        name: string;
+        type: any;
+        alias: string;
+    }[];
+    include: any[];
+};
+export declare const parseBuilder: (ctx: Context, builder: QueryParams) => {
+    queryParams: {
+        where: any;
+        attributes: any[];
+        include: any[];
+        group: any[];
+        order: any[];
+        limit: number;
+        raw: boolean;
+    };
+    fieldMap: {};
+};
+export declare const processData: (ctx: Context, data: any[], fieldMap: {
+    [source: string]: {
+        type?: string;
+    };
+}) => any[];
+export declare const queryData: (ctx: Context, builder: QueryParams) => Promise<any[]>;
+export declare const cacheWrap: (cache: Cache, options: {
+    func: () => Promise<any>;
+    key: string;
+    ttl?: number;
+    useCache?: boolean;
+    refresh?: boolean;
+}) => Promise<any>;
+export declare const query: (ctx: Context, next: Next) => Promise<void>;
+export {};

package/lib/server/actions/query.js

@@ -0,0 +1,326 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.queryData = exports.query = exports.processData = exports.parseFieldAndAssociations = exports.parseBuilder = exports.cacheWrap = void 0;
+function _database() {
+  const data = require("@nocobase/database");
+  _database = function _database() {
+    return data;
+  };
+  return data;
+}
+var _formatter = require("./formatter");
+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; }
+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); }
+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 parseFieldAndAssociations = (ctx, params) => {
+  const collectionName = params.collection,
+    measures = params.measures,
+    dimensions = params.dimensions,
+    orders = params.orders,
+    filter = params.filter;
+  const collection = ctx.db.getCollection(collectionName);
+  const fields = collection.fields;
+  const underscored = ctx.db.options.underscored;
+  const models = {};
+  const parseField = selected => {
+    var _fields$get;
+    let target;
+    let name;
+    if (!Array.isArray(selected.field)) {
+      name = selected.field;
+    } else if (selected.field.length === 1) {
+      name = selected.field[0];
+    } else if (selected.field.length > 1) {
+      var _selected$field = _slicedToArray(selected.field, 2);
+      target = _selected$field[0];
+      name = _selected$field[1];
+    }
+    let field = underscored ? (0, _database().snakeCase)(name) : name;
+    let type = (_fields$get = fields.get(name)) === null || _fields$get === void 0 ? void 0 : _fields$get.type;
+    if (target) {
+      var _fields$get2;
+      field = `${target}.${field}`;
+      name = `${target}.${name}`;
+      type = (_fields$get2 = fields.get(target)) === null || _fields$get2 === void 0 ? void 0 : _fields$get2.type;
+      if (!models[target]) {
+        models[target] = {
+          type
+        };
+      }
+    } else {
+      field = `${collectionName}.${field}`;
+    }
+    return _objectSpread(_objectSpread({}, selected), {}, {
+      field,
+      name,
+      type,
+      alias: selected.alias || name
+    });
+  };
+  const parsedMeasures = (measures === null || measures === void 0 ? void 0 : measures.map(parseField)) || [];
+  const parsedDimensions = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.map(parseField)) || [];
+  const parsedOrders = (orders === null || orders === void 0 ? void 0 : orders.map(parseField)) || [];
+  const include = Object.entries(models).map(([target, {
+    type
+  }]) => _objectSpread({
+    association: target,
+    attributes: []
+  }, type === 'belongsToMany' ? {
+    through: {
+      attributes: []
+    }
+  } : {}));
+  const filterParser = new (_database().FilterParser)(filter, {
+    collection
+  });
+  const _filterParser$toSeque = filterParser.toSequelizeParams(),
+    where = _filterParser$toSeque.where,
+    filterInclude = _filterParser$toSeque.include;
+  const parsedFilterInclude = filterInclude === null || filterInclude === void 0 ? void 0 : filterInclude.map(item => {
+    var _fields$get3;
+    if (((_fields$get3 = fields.get(item.association)) === null || _fields$get3 === void 0 ? void 0 : _fields$get3.type) === 'belongsToMany') {
+      item.through = {
+        attributes: []
+      };
+    }
+    return item;
+  });
+  return {
+    where,
+    measures: parsedMeasures,
+    dimensions: parsedDimensions,
+    orders: parsedOrders,
+    include: [...include, ...(parsedFilterInclude || [])]
+  };
+};
+exports.parseFieldAndAssociations = parseFieldAndAssociations;
+const parseBuilder = (ctx, builder) => {
+  const sequelize = ctx.db.sequelize;
+  const limit = builder.limit;
+  const _parseFieldAndAssocia = parseFieldAndAssociations(ctx, builder),
+    measures = _parseFieldAndAssocia.measures,
+    dimensions = _parseFieldAndAssocia.dimensions,
+    orders = _parseFieldAndAssocia.orders,
+    include = _parseFieldAndAssocia.include,
+    where = _parseFieldAndAssocia.where;
+  const attributes = [];
+  const group = [];
+  const order = [];
+  const fieldMap = {};
+  let hasAgg = false;
+  measures.forEach(measure => {
+    const field = measure.field,
+      aggregation = measure.aggregation,
+      alias = measure.alias;
+    const attribute = [];
+    const col = sequelize.col(field);
+    if (aggregation) {
+      hasAgg = true;
+      attribute.push(sequelize.fn(aggregation, col));
+    } else {
+      attribute.push(col);
+    }
+    if (alias) {
+      attribute.push(alias);
+    }
+    attributes.push(attribute.length > 1 ? attribute : attribute[0]);
+    fieldMap[alias || field] = measure;
+  });
+  dimensions.forEach(dimension => {
+    const field = dimension.field,
+      format = dimension.format,
+      alias = dimension.alias,
+      type = dimension.type;
+    const attribute = [];
+    const col = sequelize.col(field);
+    if (format) {
+      attribute.push((0, _formatter.formatter)(sequelize, type, field, format));
+    } else {
+      attribute.push(col);
+    }
+    if (alias) {
+      attribute.push(alias);
+    }
+    attributes.push(attribute.length > 1 ? attribute : attribute[0]);
+    if (hasAgg) {
+      group.push(attribute[0]);
+    }
+    fieldMap[alias || field] = dimension;
+  });
+  orders.forEach(item => {
+    const name = hasAgg ? sequelize.literal(`"${item.alias}"`) : sequelize.col(item.field);
+    order.push([name, item.order || 'ASC']);
+  });
+  return {
+    queryParams: {
+      where,
+      attributes,
+      include,
+      group,
+      order,
+      limit: limit > 2000 ? 2000 : limit,
+      raw: true
+    },
+    fieldMap
+  };
+};
+exports.parseBuilder = parseBuilder;
+const processData = (ctx, data, fieldMap) => {
+  const sequelize = ctx.db.sequelize;
+  const dialect = sequelize.getDialect();
+  switch (dialect) {
+    case 'postgres':
+      // https://github.com/sequelize/sequelize/issues/4550
+      return data.map(record => {
+        const result = {};
+        Object.entries(record).forEach(([key, value]) => {
+          const _ref = fieldMap[key] || {},
+            type = _ref.type;
+          switch (type) {
+            case 'bigInt':
+            case 'integer':
+            case 'float':
+            case 'double':
+              value = Number(value);
+              break;
+          }
+          result[key] = value;
+        });
+        return result;
+      });
+    default:
+      return data;
+  }
+};
+exports.processData = processData;
+const queryData = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(function* (ctx, builder) {
+    const collection = builder.collection,
+      measures = builder.measures,
+      dimensions = builder.dimensions,
+      orders = builder.orders,
+      filter = builder.filter,
+      limit = builder.limit,
+      sql = builder.sql;
+    const model = ctx.db.getModel(collection);
+    const _parseBuilder = parseBuilder(ctx, {
+        collection,
+        measures,
+        dimensions,
+        orders,
+        filter,
+        limit
+      }),
+      queryParams = _parseBuilder.queryParams,
+      fieldMap = _parseBuilder.fieldMap;
+    const data = yield model.findAll(queryParams);
+    return processData(ctx, data, fieldMap);
+    // if (!sql) {
+    //   return await repository.find(parseBuilder(ctx, { collection, measures, dimensions, orders, filter, limit }));
+    // }
+    // const statement = `SELECT ${sql.fields} FROM ${collection} ${sql.clauses}`;
+    // const [data] = await ctx.db.sequelize.query(statement);
+    // return data;
+  });
+  return function queryData(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+exports.queryData = queryData;
+const cacheWrap = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(function* (cache, options) {
+    const func = options.func,
+      key = options.key,
+      ttl = options.ttl,
+      useCache = options.useCache,
+      refresh = options.refresh;
+    if (useCache && !refresh) {
+      const data = yield cache.get(key);
+      if (data) {
+        return data;
+      }
+    }
+    const data = yield func();
+    if (useCache) {
+      yield cache.set(key, data, ttl);
+    }
+    return data;
+  });
+  return function cacheWrap(_x4, _x5) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+exports.cacheWrap = cacheWrap;
+const query = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(function* (ctx, next) {
+    const _ctx$action$params$va = ctx.action.params.values,
+      uid = _ctx$action$params$va.uid,
+      collection = _ctx$action$params$va.collection,
+      measures = _ctx$action$params$va.measures,
+      dimensions = _ctx$action$params$va.dimensions,
+      orders = _ctx$action$params$va.orders,
+      filter = _ctx$action$params$va.filter,
+      limit = _ctx$action$params$va.limit,
+      sql = _ctx$action$params$va.sql,
+      cacheConfig = _ctx$action$params$va.cache,
+      refresh = _ctx$action$params$va.refresh;
+    const roleName = ctx.state.currentRole || 'anonymous';
+    const can = ctx.app.acl.can({
+      role: roleName,
+      resource: collection,
+      action: 'list'
+    });
+    if (!can && roleName !== 'root') {
+      ctx.throw(403, 'No permissions');
+    }
+    const plugin = ctx.app.getPlugin('data-visualization');
+    const cache = plugin.cache;
+    const useCache = (cacheConfig === null || cacheConfig === void 0 ? void 0 : cacheConfig.enabled) && uid;
+    try {
+      ctx.body = yield cacheWrap(cache, {
+        func: function () {
+          var _func = _asyncToGenerator(function* () {
+            return yield queryData(ctx, {
+              collection,
+              measures,
+              dimensions,
+              orders,
+              filter,
+              limit,
+              sql
+            });
+          });
+          function func() {
+            return _func.apply(this, arguments);
+          }
+          return func;
+        }(),
+        key: uid,
+        ttl: (cacheConfig === null || cacheConfig === void 0 ? void 0 : cacheConfig.ttl) || 30,
+        useCache: useCache ? true : false,
+        refresh
+      });
+    } catch (err) {
+      ctx.app.logger.error('charts query: ', err);
+      ctx.throw(500, err);
+    }
+    yield next();
+  });
+  return function query(_x6, _x7) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+exports.query = query;

package/lib/server/index.d.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/lib/server/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/server/plugin.d.ts

@@ -0,0 +1,13 @@
+import { Cache } from '@nocobase/cache';
+import { InstallOptions, Plugin } from '@nocobase/server';
+export declare class DataVisualizationPlugin extends Plugin {
+    cache: Cache;
+    afterAdd(): void;
+    beforeLoad(): void;
+    load(): Promise<void>;
+    install(options?: InstallOptions): Promise<void>;
+    afterEnable(): Promise<void>;
+    afterDisable(): Promise<void>;
+    remove(): Promise<void>;
+}
+export default DataVisualizationPlugin;

package/lib/server/plugin.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DataVisualizationPlugin = void 0;
+function _cache() {
+  const data = require("@nocobase/cache");
+  _cache = function _cache() {
+    return data;
+  };
+  return data;
+}
+function _server() {
+  const data = require("@nocobase/server");
+  _server = function _server() {
+    return data;
+  };
+  return data;
+}
+var _query = require("./actions/query");
+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); }); }; }
+class DataVisualizationPlugin extends _server().Plugin {
+  constructor(...args) {
+    super(...args);
+    this.cache = void 0;
+  }
+  afterAdd() {}
+  beforeLoad() {
+    this.app.resource({
+      name: 'charts',
+      actions: {
+        query: _query.query
+      }
+    });
+    this.app.acl.allow('charts', 'query', 'loggedIn');
+  }
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.cache = (0, _cache().createCache)({
+        ttl: 30,
+        max: 1000,
+        store: 'memory'
+      });
+    })();
+  }
+  install(options) {
+    return _asyncToGenerator(function* () {})();
+  }
+  afterEnable() {
+    return _asyncToGenerator(function* () {})();
+  }
+  afterDisable() {
+    return _asyncToGenerator(function* () {})();
+  }
+  remove() {
+    return _asyncToGenerator(function* () {})();
+  }
+}
+exports.DataVisualizationPlugin = DataVisualizationPlugin;
+var _default = DataVisualizationPlugin;
+exports.default = _default;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "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"
+  },
+  "displayName": "Data Visualization",
+  "displayName.zh-CN": "数据可视化",
+  "description": "Provides business intelligence and data visualization features",
+  "description.zh-CN": "提供BI面板和数据可视化功能",
+  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+}

package/server.d.ts

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

package/server.js

@@ -0,0 +1,65 @@
+'use strict';
+
+function _getRequireWildcardCache(nodeInterop) {
+  if (typeof WeakMap !== 'function') return null;
+  var cacheBabelInterop = new WeakMap();
+  var cacheNodeInterop = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
+    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+
+function _interopRequireWildcard(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
+    return { default: obj };
+  }
+  var cache = _getRequireWildcardCache(nodeInterop);
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj.default = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+
+var _index = _interopRequireWildcard(require('./lib/server'));
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+var _exportNames = {};
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  },
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === 'default' || key === '__esModule') return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    },
+  });
+});

package/src/client/Settings.tsx

@@ -0,0 +1,43 @@
+import { CheckOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { Form, FormItem } from '@formily/antd';
+import { Button, Card } from 'antd';
+import cls from 'classnames';
+import React, { useContext } from 'react';
+import { useChartsTranslation } from './locale';
+import { ChartLibraryContext, useToggleChartLibrary } from './renderer';
+
+export const Settings = () => {
+  const { t } = useChartsTranslation();
+  const libraries = useContext(ChartLibraryContext);
+  const { toggle } = useToggleChartLibrary();
+  const list = Object.entries(libraries).map(([library, { enabled }]) => {
+    return (
+      <Button
+        key={library}
+        icon={enabled ? <CheckOutlined /> : ''}
+        className={cls(
+          css`
+            margin: 8px 8px 8px 0;
+          `,
+          enabled
+            ? css`
+                color: #40a9ff;
+                border-color: #40a9ff;
+              `
+            : '',
+        )}
+        onClick={() => toggle(library)}
+      >
+        {library}
+      </Button>
+    );
+  });
+  return (
+    <Card>
+      <Form layout="vertical">
+        <FormItem label={t('Enabled Chart Library')}>{list}</FormItem>
+      </Form>
+    </Card>
+  );
+};

package/src/client/__tests__/chart-configure.test.tsx

@@ -0,0 +1,14 @@
+import { vi } from 'vitest';
+
+describe('ChartConfigure', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should render correctly', () => {
+    // vi.spyOn(client, 'useDesignable').mockReturnValue({} as any);
+    // render(<ChartConfigure insert={(schema, options) => {}} />);
+    // const modal = document.querySelector('.ant-modal-content') as HTMLInputElement;
+    // expect(modal).toBeInTheDocument();
+  });
+});