@nocobase/plugin-data-visualization 0.12.0-alpha.2 → 0.12.0-alpha.4

package/dist/client/chart/antd/statistic.d.ts

@@ -1,10 +1,8 @@
-import { ISchema } from '@formily/react';
 import { AntdChart } from './antd';
 import { FieldOption } from '../../hooks';
 import { QueryProps } from '../../renderer';
 import { RenderProps } from '../chart';
 export declare class Statistic extends AntdChart {
-    schema: ISchema;
     constructor();
     init(fields: FieldOption[], { measures, dimensions, }: {
         measures?: QueryProps['measures'];

package/dist/client/chart/chart.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { FieldOption } from '../hooks';
 import { QueryProps } from '../renderer';
 import { ISchema } from '@formily/react';
+import { AnySchemaProperties, ConfigProps } from './configs';
 export type RenderProps = {
     data: any[];
     general: any;
@@ -45,12 +46,32 @@ export interface ChartType {
     };
     render: (props: RenderProps) => React.FC<any>;
 }
+type Config = ((ConfigProps & {
+    property?: string;
+}) | string)[];
+export type ChartProps = {
+    name: string;
+    title: string;
+    component: React.FC<any>;
+    config?: Config;
+};
 export declare class Chart implements ChartType {
     name: string;
     title: string;
     component: React.FC<any>;
-    schema: {};
-    constructor(name: string, title: string, component: React.FC<any>);
+    config: Config;
+    configs: Map<string, Function>;
+    constructor({ name, title, component, config }: ChartProps);
+    get schema(): {
+        type?: undefined;
+        properties?: undefined;
+    } | {
+        type: string;
+        properties: AnySchemaProperties;
+    };
+    addConfigs(configs: {
+        [key: string]: Function;
+    }): void;
     infer(fields: FieldOption[], { measures, dimensions, }: {
         measures?: QueryProps['measures'];
         dimensions?: QueryProps['dimensions'];
@@ -63,3 +84,4 @@ export declare class Chart implements ChartType {
     getProps(props: RenderProps): RenderProps;
     render({ data, general, advanced, fieldProps }: RenderProps): () => React.FunctionComponentElement<any>;
 }
+export {};

package/dist/client/chart/configs.d.ts

@@ -0,0 +1,42 @@
+import { SchemaProperties } from '@formily/react';
+export type FieldConfigProps = Partial<{
+    name: string;
+    title: string;
+    required: boolean;
+    defaultValue: any;
+}>;
+export type AnySchemaProperties = SchemaProperties<any, any, any, any, any, any, any, any>;
+export type ConfigProps = FieldConfigProps | AnySchemaProperties | (() => AnySchemaProperties);
+declare const _default: {
+    field: ({ name, title, required, defaultValue }: Partial<{
+        name: string;
+        title: string;
+        required: boolean;
+        defaultValue: any;
+    }>) => {
+        [x: string]: {
+            title: string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-reactions': string;
+            required: boolean;
+            default: any;
+        };
+    };
+    booleanField: ({ name, title, defaultValue }: Partial<{
+        name: string;
+        title: string;
+        required: boolean;
+        defaultValue: any;
+    }>) => {
+        [x: string]: {
+            'x-content': string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            default: any;
+        };
+    };
+};
+export default _default;

package/dist/client/chart/g2plot/configs.d.ts

@@ -0,0 +1,73 @@
+import { FieldConfigProps } from '../configs';
+declare const _default: {
+    xField: (props: FieldConfigProps) => {
+        [x: string]: {
+            title: string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-reactions': string;
+            required: boolean;
+            default: any;
+        };
+    };
+    yField: (props: FieldConfigProps) => {
+        [x: string]: {
+            title: string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-reactions': string;
+            required: boolean;
+            default: any;
+        };
+    };
+    seriesField: (props: FieldConfigProps) => {
+        [x: string]: {
+            title: string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            'x-reactions': string;
+            required: boolean;
+            default: any;
+        };
+    };
+    isStack: (props: FieldConfigProps) => {
+        [x: string]: {
+            'x-content': string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            default: any;
+        };
+    };
+    smooth: (props: FieldConfigProps) => {
+        [x: string]: {
+            'x-content': string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            default: any;
+        };
+    };
+    isPercent: (props: FieldConfigProps) => {
+        [x: string]: {
+            'x-content': string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            default: any;
+        };
+    };
+    isGroup: (props: FieldConfigProps) => {
+        [x: string]: {
+            'x-content': string;
+            type: string;
+            'x-decorator': string;
+            'x-component': string;
+            default: any;
+        };
+    };
+};
+export default _default;

package/dist/client/chart/g2plot/dualAxes.d.ts

@@ -1,11 +1,9 @@
-import { ISchema } from '@formily/react';
 import { G2PlotChart } from './g2plot';
 import { RenderProps } from '../chart';
 import React from 'react';
 import { FieldOption } from '../../hooks';
 import { QueryProps } from '../../renderer';
 export declare class DualAxes extends G2PlotChart {
-    schema: ISchema;
     constructor();
     init(fields: FieldOption[], { measures, dimensions, }: {
         measures?: QueryProps['measures'];

package/dist/client/chart/g2plot/g2plot.d.ts

@@ -1,9 +1,8 @@
-import { Chart, RenderProps } from '../chart';
+import { Chart, ChartProps, RenderProps } from '../chart';
 import { FieldOption } from '../../hooks';
 import { QueryProps } from '../../renderer';
-import { ISchema } from '@formily/react';
 export declare class G2PlotChart extends Chart {
-    schema: ISchema;
+    constructor({ name, title, component, config }: ChartProps);
     init(fields: FieldOption[], { measures, dimensions, }: {
         measures?: QueryProps['measures'];
         dimensions?: QueryProps['dimensions'];

package/dist/client/chart/g2plot/pie.d.ts

@@ -1,9 +1,7 @@
-import { ISchema } from '@formily/react';
 import { G2PlotChart } from './g2plot';
 import { FieldOption } from '../../hooks';
 import { QueryProps } from '../../renderer';
 export declare class Pie extends G2PlotChart {
-    schema: ISchema;
     constructor();
     init(fields: FieldOption[], { measures, dimensions, }: {
         measures?: QueryProps['measures'];

package/dist/client/index.js

@@ -975,7 +975,7 @@ var __publicField = (obj, key, value) => {
         title: t("Configure chart"),
         open: visible,
         onOk: () => {
-          const { query, config, transform: transform2, mode } = form.values;
+          const { query, config: config2, transform: transform2, mode } = form.values;
           const afterSave = () => {
             var _a2;
             setVisible(false);
@@ -986,7 +986,7 @@ var __publicField = (obj, key, value) => {
           };
           const rendererProps = {
             query,
-            config,
+            config: config2,
             collection,
             transform: transform2,
             mode: mode || "builder"
@@ -1100,9 +1100,9 @@ var __publicField = (obj, key, value) => {
     const { collection, data: data2 } = current || {};
     const { service } = React.useContext(ChartRendererContext);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(react.FormConsumer, { children: (form) => {
-      const config = lodash.cloneDeep(form.values.config);
+      const config2 = lodash.cloneDeep(form.values.config);
       const transform2 = lodash.cloneDeep(form.values.transform);
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRendererContext.Provider, { value: { collection, config, transform: transform2, service, data: data2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRenderer, { ...props }) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRendererContext.Provider, { value: { collection, config: config2, transform: transform2, service, data: data2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRenderer, { ...props }) });
     } });
   };
   ChartConfigure.Query = function Query() {
@@ -1579,7 +1579,7 @@ var __publicField = (obj, key, value) => {
   };
   const ChartRendererContext = React.createContext({});
   const ChartRendererProvider = (props) => {
-    const { query, config, collection, transform: transform2 } = props;
+    const { query, config: config2, collection, transform: transform2 } = props;
     const schema2 = react.useFieldSchema();
     const api = client.useAPIClient();
     const service = client.useRequest(
@@ -1628,7 +1628,7 @@ var __publicField = (obj, key, value) => {
             box-shadow: none;
           }
         `,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRendererContext.Provider, { value: { collection, config, transform: transform2, service, query }, children: props.children })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChartRendererContext.Provider, { value: { collection, config: config2, transform: transform2, service, query }, children: props.children })
       }
     ) });
   };
@@ -1636,14 +1636,14 @@ var __publicField = (obj, key, value) => {
   const ChartRenderer = (props) => {
     const { t } = useChartsTranslation();
     const ctx2 = React.useContext(ChartRendererContext);
-    const { config, transform: transform2, collection, service, data: _data } = ctx2;
+    const { config: config2, transform: transform2, collection, service, data: _data } = ctx2;
     const fields = useFieldsWithAssociation(collection);
     const data2 = useData(_data, collection);
-    const general = (config == null ? void 0 : config.general) || {};
-    const advanced = (config == null ? void 0 : config.advanced) || {};
+    const general = (config2 == null ? void 0 : config2.general) || {};
+    const advanced = (config2 == null ? void 0 : config2.advanced) || {};
     const api = client.useAPIClient();
     const charts = useCharts();
-    const chart = charts[config == null ? void 0 : config.chartType];
+    const chart = charts[config2 == null ? void 0 : config2.chartType];
     const locale = api.auth.getLocale();
     const transformers2 = useFieldTransformer(transform2, locale);
     const Component2 = chart == null ? void 0 : chart.render({
@@ -32388,9 +32388,9 @@ var __publicField = (obj, key, value) => {
           return false;
         }
         var flag = true;
-        var config = this.cfg;
-        each$1(Object.keys(config), function(attr) {
-          if (config[attr] !== cfg[attr]) {
+        var config2 = this.cfg;
+        each$1(Object.keys(config2), function(attr) {
+          if (config2[attr] !== cfg[attr]) {
             flag = false;
             return false;
           }
@@ -32398,13 +32398,13 @@ var __publicField = (obj, key, value) => {
         return flag;
       };
       Shadow2.prototype.update = function(name, value2) {
-        var config = this.cfg;
-        config[ATTR_MAP[name]] = value2;
-        this._parseShadow(config, this.el);
+        var config2 = this.cfg;
+        config2[ATTR_MAP[name]] = value2;
+        this._parseShadow(config2, this.el);
         return this;
       };
-      Shadow2.prototype._parseShadow = function(config, el2) {
-        var child = '<feDropShadow\n      dx="' + (config.dx || 0) + '"\n      dy="' + (config.dy || 0) + '"\n      stdDeviation="' + (config.blur ? config.blur / 10 : 0) + '"\n      flood-color="' + (config.color ? config.color : "#000") + '"\n      flood-opacity="' + (config.opacity ? config.opacity : 1) + '"\n      />';
+      Shadow2.prototype._parseShadow = function(config2, el2) {
+        var child = '<feDropShadow\n      dx="' + (config2.dx || 0) + '"\n      dy="' + (config2.dy || 0) + '"\n      stdDeviation="' + (config2.blur ? config2.blur / 10 : 0) + '"\n      flood-color="' + (config2.color ? config2.color : "#000") + '"\n      flood-opacity="' + (config2.opacity ? config2.opacity : 1) + '"\n      />';
         el2.innerHTML = child;
       };
       return Shadow2;
@@ -37289,11 +37289,11 @@ var __publicField = (obj, key, value) => {
         each$1(this.facets, function(facet) {
           var columnValue = facet.columnValue, view = facet.view;
           var formatter = get(_this.cfg.title, "formatter");
-          var config = deepMix({
+          var config2 = deepMix({
             position: ["50%", "0%"],
             content: formatter ? formatter(columnValue) : columnValue
           }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.title);
-          view.annotation().text(config);
+          view.annotation().text(config2);
         });
       };
       return Circle2;
@@ -37377,11 +37377,11 @@ var __publicField = (obj, key, value) => {
         each$1(this.facets, function(facet) {
           var columnValue = facet.columnValue, view = facet.view;
           var formatter = get(_this.cfg.title, "formatter");
-          var config = deepMix({
+          var config2 = deepMix({
             position: ["50%", "0%"],
             content: formatter ? formatter(columnValue) : columnValue
           }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.title);
-          view.annotation().text(config);
+          view.annotation().text(config2);
         });
       };
       List2.prototype.getPageCount = function(total, pageSize) {
@@ -37468,19 +37468,19 @@ var __publicField = (obj, key, value) => {
           var columnValue = facet.columnValue, rowValue = facet.rowValue, view = facet.view;
           if (rowIndex === 0) {
             var formatter = get(_this.cfg.columnTitle, "formatter");
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["50%", "0%"],
               content: formatter ? formatter(columnValue) : columnValue
             }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.columnTitle);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           }
           if (columnIndex === columnValuesLength - 1) {
             var formatter = get(_this.cfg.rowTitle, "formatter");
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["100%", "50%"],
               content: formatter ? formatter(rowValue) : rowValue
             }, getFactTitleConfig(DIRECTION.RIGHT), _this.cfg.rowTitle);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           }
         });
       };
@@ -37583,17 +37583,17 @@ var __publicField = (obj, key, value) => {
           var columnValue = facet.columnValue, rowValue = facet.rowValue, view = facet.view;
           var formatter = get(_this.cfg.title, "formatter");
           if (_this.cfg.transpose) {
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["50%", "0%"],
               content: formatter ? formatter(columnValue) : columnValue
             }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.title);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           } else {
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["100%", "50%"],
               content: formatter ? formatter(rowValue) : rowValue
             }, getFactTitleConfig(DIRECTION.RIGHT), _this.cfg.title);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           }
         });
       };
@@ -37672,19 +37672,19 @@ var __publicField = (obj, key, value) => {
           var columnIndex = facet.columnIndex, rowIndex = facet.rowIndex, columnValuesLength = facet.columnValuesLength, columnValue = facet.columnValue, rowValue = facet.rowValue, view = facet.view;
           if (rowIndex === 0) {
             var formatter = get(_this.cfg.columnTitle, "formatter");
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["50%", "0%"],
               content: formatter ? formatter(columnValue) : columnValue
             }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.columnTitle);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           }
           if (columnIndex === columnValuesLength - 1) {
             var formatter = get(_this.cfg.rowTitle, "formatter");
-            var config = deepMix({
+            var config2 = deepMix({
               position: ["100%", "50%"],
               content: formatter ? formatter(rowValue) : rowValue
             }, getFactTitleConfig(DIRECTION.RIGHT), _this.cfg.rowTitle);
-            view.annotation().text(config);
+            view.annotation().text(config2);
           }
         });
       };
@@ -37897,11 +37897,11 @@ var __publicField = (obj, key, value) => {
         each$1(this.facets, function(facet) {
           var columnValue = facet.columnValue, view = facet.view;
           var formatter = get(_this.cfg.title, "formatter");
-          var config = deepMix({
+          var config2 = deepMix({
             position: ["50%", "0%"],
             content: formatter ? formatter(columnValue) : columnValue
           }, getFactTitleConfig(DIRECTION.TOP), _this.cfg.title);
-          view.annotation().text(config);
+          view.annotation().text(config2);
         });
       };
       Tree2.prototype.drawLines = function(facets) {
@@ -39781,8 +39781,8 @@ var __publicField = (obj, key, value) => {
         };
       };
       Scrollbar2.prototype.updateScrollbar = function() {
-        var config = this.getScrollbarComponentCfg();
-        var realConfig = this.trackLen ? __assign$4(__assign$4({}, config), { trackLen: this.trackLen, thumbLen: this.thumbLen, thumbOffset: (this.trackLen - this.thumbLen) * this.ratio }) : __assign$4({}, config);
+        var config2 = this.getScrollbarComponentCfg();
+        var realConfig = this.trackLen ? __assign$4(__assign$4({}, config2), { trackLen: this.trackLen, thumbLen: this.thumbLen, thumbOffset: (this.trackLen - this.thumbLen) * this.ratio }) : __assign$4({}, config2);
         this.scrollbar.component.update(realConfig);
         return this.scrollbar;
       };
@@ -42472,28 +42472,28 @@ var __publicField = (obj, key, value) => {
         return deepMix(this.buttonCfg, this.cfg);
       };
       ButtonAction2.prototype.drawButton = function() {
-        var config = this.getButtonCfg();
+        var config2 = this.getButtonCfg();
         var group2 = this.context.view.foregroundGroup.addGroup({
-          name: config.name
+          name: config2.name
         });
         var textShape = group2.addShape({
           type: "text",
           name: "button-text",
-          attrs: __assign$4({ text: config.text }, config.textStyle)
+          attrs: __assign$4({ text: config2.text }, config2.textStyle)
         });
         var textBBox = textShape.getBBox();
-        var padding2 = parsePadding(config.padding);
+        var padding2 = parsePadding(config2.padding);
         var buttonShape = group2.addShape({
           type: "rect",
           name: "button-rect",
-          attrs: __assign$4({ x: textBBox.x - padding2[3], y: textBBox.y - padding2[0], width: textBBox.width + padding2[1] + padding2[3], height: textBBox.height + padding2[0] + padding2[2] }, config.style)
+          attrs: __assign$4({ x: textBBox.x - padding2[3], y: textBBox.y - padding2[0], width: textBBox.width + padding2[1] + padding2[3], height: textBBox.height + padding2[0] + padding2[2] }, config2.style)
         });
         buttonShape.toBack();
         group2.on("mouseenter", function() {
-          buttonShape.attr(config.activeStyle);
+          buttonShape.attr(config2.activeStyle);
         });
         group2.on("mouseleave", function() {
-          buttonShape.attr(config.style);
+          buttonShape.attr(config2.style);
         });
         this.buttonGroup = group2;
       };
@@ -45529,9 +45529,9 @@ var __publicField = (obj, key, value) => {
         return deepAssign(this.buttonCfg, buttonCfg, this.cfg);
       };
       ButtonAction2.prototype.drawButton = function() {
-        var config = this.getButtonCfg();
+        var config2 = this.getButtonCfg();
         var group2 = this.context.view.foregroundGroup.addGroup({
-          name: config.name
+          name: config2.name
         });
         var textShape = this.drawText(group2);
         this.drawBackground(group2, textShape.getBBox());
@@ -45539,30 +45539,30 @@ var __publicField = (obj, key, value) => {
       };
       ButtonAction2.prototype.drawText = function(group2) {
         var _a2;
-        var config = this.getButtonCfg();
+        var config2 = this.getButtonCfg();
         return group2.addShape({
           type: "text",
           name: "button-text",
-          attrs: __assign$4({ text: config.text }, (_a2 = config.textStyle) === null || _a2 === void 0 ? void 0 : _a2.default)
+          attrs: __assign$4({ text: config2.text }, (_a2 = config2.textStyle) === null || _a2 === void 0 ? void 0 : _a2.default)
         });
       };
       ButtonAction2.prototype.drawBackground = function(group2, bbox) {
         var _a2;
-        var config = this.getButtonCfg();
-        var padding2 = normalPadding(config.padding);
+        var config2 = this.getButtonCfg();
+        var padding2 = normalPadding(config2.padding);
         var buttonShape = group2.addShape({
           type: "rect",
           name: "button-rect",
-          attrs: __assign$4({ x: bbox.x - padding2[3], y: bbox.y - padding2[0], width: bbox.width + padding2[1] + padding2[3], height: bbox.height + padding2[0] + padding2[2] }, (_a2 = config.buttonStyle) === null || _a2 === void 0 ? void 0 : _a2.default)
+          attrs: __assign$4({ x: bbox.x - padding2[3], y: bbox.y - padding2[0], width: bbox.width + padding2[1] + padding2[3], height: bbox.height + padding2[0] + padding2[2] }, (_a2 = config2.buttonStyle) === null || _a2 === void 0 ? void 0 : _a2.default)
         });
         buttonShape.toBack();
         group2.on("mouseenter", function() {
           var _a3;
-          buttonShape.attr((_a3 = config.buttonStyle) === null || _a3 === void 0 ? void 0 : _a3.active);
+          buttonShape.attr((_a3 = config2.buttonStyle) === null || _a3 === void 0 ? void 0 : _a3.active);
         });
         group2.on("mouseleave", function() {
           var _a3;
-          buttonShape.attr((_a3 = config.buttonStyle) === null || _a3 === void 0 ? void 0 : _a3.default);
+          buttonShape.attr((_a3 = config2.buttonStyle) === null || _a3 === void 0 ? void 0 : _a3.default);
         });
         return buttonShape;
       };
@@ -46051,8 +46051,8 @@ var __publicField = (obj, key, value) => {
       return coordinate2.convertPoint(point2);
     });
   }
-  function renderArrowTag(config, elemPrev, elemNext) {
-    var view = config.view, geometry2 = config.geometry, group2 = config.group, options = config.options, horizontal = config.horizontal;
+  function renderArrowTag(config2, elemPrev, elemNext) {
+    var view = config2.view, geometry2 = config2.geometry, group2 = config2.group, options = config2.options, horizontal = config2.horizontal;
     var offset = options.offset, size2 = options.size, arrow = options.arrow;
     var coordinate2 = view.getCoordinate();
     var pointPrev = parsePoints(coordinate2, elemPrev)[3];
@@ -46110,9 +46110,9 @@ var __publicField = (obj, key, value) => {
       attrs: __assign$4(__assign$4({}, arrow.style || {}), { points: points2 })
     });
   }
-  function renderTextTag(config, elemPrev, elemNext) {
+  function renderTextTag(config2, elemPrev, elemNext) {
     var _a2, _b, _c;
-    var view = config.view, geometry2 = config.geometry, group2 = config.group, options = config.options, field2 = config.field, horizontal = config.horizontal;
+    var view = config2.view, geometry2 = config2.geometry, group2 = config2.group, options = config2.options, field2 = config2.field, horizontal = config2.horizontal;
     var offset = options.offset, size2 = options.size;
     if (typeof options.text === "boolean") {
       return;
@@ -46168,7 +46168,7 @@ var __publicField = (obj, key, value) => {
             var interval2 = find$1(chart.geometries, function(geom) {
               return geom.type === "interval";
             });
-            var config = {
+            var config2 = {
               view,
               geometry: interval2,
               group: group2,
@@ -46179,7 +46179,7 @@ var __publicField = (obj, key, value) => {
             var elements = interval2.elements;
             each$1(elements, function(elem, idx) {
               if (idx > 0) {
-                renderTag(config, elements[idx - 1], elem);
+                renderTag(config2, elements[idx - 1], elem);
               }
             });
           }
@@ -46604,7 +46604,7 @@ var __publicField = (obj, key, value) => {
       return params;
     };
   }
-  function field$4(params) {
+  function field$5(params) {
     var chart = params.chart, options = params.options;
     var _a2 = options.data, data2 = _a2 === void 0 ? [] : _a2, yField = options.yField, maxSize = options.maxSize, minSize = options.minSize;
     var formatData = transformData$8(data2, data2, {
@@ -46666,9 +46666,9 @@ var __publicField = (obj, key, value) => {
     return params;
   }
   function basicFunnel(params) {
-    return flow(field$4, geometry$s, transpose$1, conversionTag$2)(params);
+    return flow(field$5, geometry$s, transpose$1, conversionTag$2)(params);
   }
-  function field$3(params) {
+  function field$4(params) {
     var _a2;
     var chart = params.chart, options = params.options;
     var _b = options.data, data2 = _b === void 0 ? [] : _b, yField = options.yField;
@@ -46775,9 +46775,9 @@ var __publicField = (obj, key, value) => {
     return params;
   }
   function compareFunnel(params) {
-    return flow(field$3, geometry$r, conversionTag$1)(params);
+    return flow(field$4, geometry$r, conversionTag$1)(params);
   }
-  function field$2(params) {
+  function field$3(params) {
     var chart = params.chart, options = params.options;
     var _a2 = options.data, data2 = _a2 === void 0 ? [] : _a2, yField = options.yField;
     var sum = reduce(data2, function(total, item) {
@@ -46854,9 +46854,9 @@ var __publicField = (obj, key, value) => {
     return params;
   }
   function dynamicHeightFunnel(params) {
-    return flow(field$2, geometry$q, transpose, conversionTag)(params);
+    return flow(field$3, geometry$q, transpose, conversionTag)(params);
   }
-  function field$1(params) {
+  function field$2(params) {
     var _a2;
     var chart = params.chart, options = params.options;
     var _b = options.data, data2 = _b === void 0 ? [] : _b, yField = options.yField;
@@ -46885,7 +46885,7 @@ var __publicField = (obj, key, value) => {
     return params;
   }
   function facetFunnel(params) {
-    return flow(field$1, geometry$p)(params);
+    return flow(field$2, geometry$p)(params);
   }
   var ConversionTagAction = (
     /** @class */
@@ -48986,8 +48986,8 @@ var __publicField = (obj, key, value) => {
     };
     return defaultConfig;
   }
-  var splinePath = function(data2, config) {
-    var view = config.view, _a2 = config.options, xField = _a2.xField, yField = _a2.yField;
+  var splinePath = function(data2, config2) {
+    var view = config2.view, _a2 = config2.options, xField = _a2.xField, yField = _a2.yField;
     var xScaleView = view.getScaleByField(xField);
     var yScaleView = view.getScaleByField(yField);
     var pathData = data2.map(function(d) {
@@ -48995,8 +48995,8 @@ var __publicField = (obj, key, value) => {
     });
     return getSplinePath(pathData, false);
   };
-  var getPath = function(config) {
-    var options = config.options;
+  var getPath = function(config2) {
+    var options = config2.options;
     var xField = options.xField, yField = options.yField, data2 = options.data, regressionLine2 = options.regressionLine;
     var _a2 = regressionLine2.type, type = _a2 === void 0 ? "linear" : _a2, algorithm = regressionLine2.algorithm, customEquation = regressionLine2.equation;
     var pathData;
@@ -49013,7 +49013,7 @@ var __publicField = (obj, key, value) => {
       pathData = reg(data2);
       equation = getRegressionEquation(type, pathData);
     }
-    return [splinePath(pathData, config), equation];
+    return [splinePath(pathData, config2), equation];
   };
   var getMeta = function(options) {
     var _a2;
@@ -50409,7 +50409,7 @@ var __publicField = (obj, key, value) => {
     }
     return newData;
   };
-  function field(params) {
+  function field$1(params) {
     var chart = params.chart, options = params.options;
     var xField = options.xField, yField = options.yField, groupField = options.groupField, color2 = options.color, tooltip2 = options.tooltip, boxStyle = options.boxStyle;
     chart.data(transformData$6(options.data, yField));
@@ -50512,7 +50512,7 @@ var __publicField = (obj, key, value) => {
     return params;
   }
   function adaptor$h(params) {
-    return flow(field, outliersPoint, meta$b, axis$d, legend$9, tooltip$9, annotation$2(), interaction$8, animation$5, theme$2)(params);
+    return flow(field$1, outliersPoint, meta$b, axis$d, legend$9, tooltip$9, annotation$2(), interaction$8, animation$5, theme$2)(params);
   }
   (function(_super) {
     __extends$2(Box, _super);
@@ -51239,7 +51239,7 @@ var __publicField = (obj, key, value) => {
       };
       DrillDownAction2.prototype.drawBreadCrumbGroup = function() {
         var _this = this;
-        var config = this.getButtonCfg();
+        var config2 = this.getButtonCfg();
         var cache2 = this.historyCache;
         if (!this.breadCrumbGroup) {
           this.breadCrumbGroup = this.context.view.foregroundGroup.addGroup({
@@ -51254,7 +51254,7 @@ var __publicField = (obj, key, value) => {
             type: "text",
             id: record.id,
             name: "".concat(BREAD_CRUMB_NAME, "_").concat(record.name, "_text"),
-            attrs: __assign$4(__assign$4({ text: index2 === 0 && !isNil(config.rootText) ? config.rootText : record.name }, config.textStyle), { x: left2, y: 0 })
+            attrs: __assign$4(__assign$4({ text: index2 === 0 && !isNil(config2.rootText) ? config2.rootText : record.name }, config2.textStyle), { x: left2, y: 0 })
           });
           var textShapeBox = textShape.getBBox();
           left2 += textShapeBox.width + PADDING;
@@ -51272,19 +51272,19 @@ var __publicField = (obj, key, value) => {
             var _a2;
             var targetId = event.target.get("id");
             if (targetId !== ((_a2 = last(cache2)) === null || _a2 === void 0 ? void 0 : _a2.id)) {
-              textShape.attr(config.activeTextStyle);
+              textShape.attr(config2.activeTextStyle);
             } else {
               textShape.attr({ cursor: "default" });
             }
           });
           textShape.on("mouseleave", function() {
-            textShape.attr(config.textStyle);
+            textShape.attr(config2.textStyle);
           });
           if (index2 < cache2.length - 1) {
             var dividerShape = _this.breadCrumbGroup.addShape({
               type: "text",
-              name: "".concat(config.name, "_").concat(record.name, "_divider"),
-              attrs: __assign$4(__assign$4({ text: config.dividerText }, config.textStyle), { x: left2, y: 0 })
+              name: "".concat(config2.name, "_").concat(record.name, "_divider"),
+              attrs: __assign$4(__assign$4({ text: config2.dividerText }, config2.textStyle), { x: left2, y: 0 })
             });
             var dividerBox = dividerShape.getBBox();
             left2 += dividerBox.width + PADDING;
@@ -66430,11 +66430,11 @@ var __publicField = (obj, key, value) => {
       }
     return t;
   };
-  function useInit(ChartClass, config) {
+  function useInit(ChartClass, config2) {
     var chart = React.useRef();
     var chartOptions = React.useRef();
     var container = React.useRef(null);
-    var onReady = config.onReady, onEvent = config.onEvent;
+    var onReady = config2.onReady, onEvent = config2.onEvent;
     var toDataURL = function(type, encoderOptions) {
       var _a2;
       if (type === void 0) {
@@ -66480,23 +66480,23 @@ var __publicField = (obj, key, value) => {
     };
     var processConfig = function() {
       var _uuid = uuid();
-      if (hasPath(config, ["statistic", "content", "customHtml"])) {
-        reactDomToString(config, ["statistic", "content", "customHtml"]);
+      if (hasPath(config2, ["statistic", "content", "customHtml"])) {
+        reactDomToString(config2, ["statistic", "content", "customHtml"]);
       }
-      if (hasPath(config, ["statistic", "title", "customHtml"])) {
-        reactDomToString(config, ["statistic", "title", "customHtml"]);
+      if (hasPath(config2, ["statistic", "title", "customHtml"])) {
+        reactDomToString(config2, ["statistic", "title", "customHtml"]);
       }
-      if (typeof config.tooltip === "object") {
-        if (hasPath(config, ["tooltip", "container"])) {
-          reactDomToString(config, ["tooltip", "container"], "tooltip", _uuid);
+      if (typeof config2.tooltip === "object") {
+        if (hasPath(config2, ["tooltip", "container"])) {
+          reactDomToString(config2, ["tooltip", "container"], "tooltip", _uuid);
         }
-        if (hasPath(config, ["tooltip", "customContent"])) {
-          reactDomToString(config, ["tooltip", "customContent"], "tooltip", _uuid);
+        if (hasPath(config2, ["tooltip", "customContent"])) {
+          reactDomToString(config2, ["tooltip", "customContent"], "tooltip", _uuid);
         }
       }
     };
     React.useEffect(function() {
-      if (chart.current && !isEqual$1(chartOptions.current, config)) {
+      if (chart.current && !isEqual$1(chartOptions.current, config2)) {
         var changeData = false;
         if (chartOptions.current) {
           var _a2 = chartOptions.current;
@@ -66504,30 +66504,30 @@ var __publicField = (obj, key, value) => {
           _a2.value;
           _a2.percent;
           var currentConfig = __rest$8(_a2, ["data", "value", "percent"]);
-          config.data;
-          config.value;
-          config.percent;
-          var inputConfig = __rest$8(config, ["data", "value", "percent"]);
+          config2.data;
+          config2.value;
+          config2.percent;
+          var inputConfig = __rest$8(config2, ["data", "value", "percent"]);
           changeData = isEqual$1(currentConfig, inputConfig);
         }
-        chartOptions.current = deepClone(config);
-        if (changeData && get(config, "chartType") !== "Mix") {
+        chartOptions.current = deepClone(config2);
+        if (changeData && get(config2, "chartType") !== "Mix") {
           var changeType_1 = "data";
           var typeMaps = ["percent"];
-          var currentKeys_1 = Object.keys(config);
+          var currentKeys_1 = Object.keys(config2);
           typeMaps.forEach(function(type) {
             if (currentKeys_1.includes(type)) {
               changeType_1 = type;
             }
           });
-          chart.current.changeData((config === null || config === void 0 ? void 0 : config[changeType_1]) || []);
+          chart.current.changeData((config2 === null || config2 === void 0 ? void 0 : config2[changeType_1]) || []);
           chart.current.render();
         } else {
           processConfig();
-          chart.current.update(config);
+          chart.current.update(config2);
         }
       }
-    }, [config]);
+    }, [config2]);
     React.useEffect(function() {
       if (!container.current) {
         return function() {
@@ -66535,10 +66535,10 @@ var __publicField = (obj, key, value) => {
         };
       }
       if (!chartOptions.current) {
-        chartOptions.current = deepClone(config);
+        chartOptions.current = deepClone(config2);
       }
       processConfig();
-      var chartInstance = new ChartClass(container.current, __assign$1({}, config));
+      var chartInstance = new ChartClass(container.current, __assign$1({}, config2));
       chartInstance.toDataURL = function(type, encoderOptions) {
         return toDataURL(type, encoderOptions);
       };
@@ -67019,15 +67019,89 @@ var __publicField = (obj, key, value) => {
     );
   });
   const G2DualAxes = DualAxesChart;
+  const selectField = ({ name, title, required: required2, defaultValue }) => {
+    return {
+      [name]: {
+        title: lang(title),
+        type: "string",
+        "x-decorator": "FormItem",
+        "x-component": "Select",
+        "x-reactions": "{{ useChartFields }}",
+        required: required2,
+        default: defaultValue
+      }
+    };
+  };
+  const booleanField$1 = ({ name, title, defaultValue = false }) => {
+    return {
+      [name]: {
+        "x-content": lang(title),
+        type: "boolean",
+        "x-decorator": "FormItem",
+        "x-component": "Checkbox",
+        default: defaultValue
+      }
+    };
+  };
+  const config = {
+    field: selectField,
+    booleanField: booleanField$1
+  };
   class Chart {
-    constructor(name, title, component2) {
+    constructor({ name, title, component: component2, config: config$1 }) {
       __publicField(this, "name");
       __publicField(this, "title");
       __publicField(this, "component");
-      __publicField(this, "schema", {});
+      __publicField(this, "config");
+      __publicField(this, "configs", /* @__PURE__ */ new Map());
       this.name = name;
       this.title = title;
       this.component = component2;
+      this.config = config$1;
+      this.addConfigs(config);
+    }
+    /*
+     * Generate config schema according to this.config
+     * How to set up this.config:
+     * 1. string - the config function name in config.ts
+     * 2. object - { property: string, ...props }
+     *    - property is the config function name in config.ts, and the other props are the arguments of the function
+     * 3. object - use the object directly as the properties of the schema
+     * 4. function - use the custom function to return the properties of the schema
+     */
+    get schema() {
+      if (!this.config) {
+        return {};
+      }
+      const properties = this.config.reduce((properties2, conf) => {
+        let schema2 = {};
+        if (typeof conf === "string") {
+          const func = this.configs.get(conf);
+          schema2 = (func == null ? void 0 : func()) || {};
+        } else if (typeof conf === "function") {
+          schema2 = conf();
+        } else {
+          if (conf.property) {
+            const func = this.configs.get(conf.property);
+            schema2 = (func == null ? void 0 : func(conf)) || {};
+          } else {
+            schema2 = conf;
+          }
+        }
+        return {
+          ...properties2,
+          ...schema2
+        };
+      }, {});
+      return {
+        type: "object",
+        properties
+      };
+    }
+    addConfigs(configs2) {
+      Object.entries(configs2).forEach(([key, func]) => {
+        this.configs.set(key, func);
+      });
     }
     infer(fields, {
       measures,
@@ -67080,37 +67154,25 @@ var __publicField = (obj, key, value) => {
       });
     }
   }
+  const { field, booleanField } = config;
+  const configs = {
+    xField: (props) => field({ name: "xField", title: "xField", required: true, ...props }),
+    yField: (props) => field({ name: "yField", title: "yField", required: true, ...props }),
+    seriesField: (props) => field({ name: "seriesField", title: "seriesField", ...props }),
+    isStack: (props) => booleanField({ name: "isStack", title: "isStack", ...props }),
+    smooth: (props) => booleanField({ name: "smooth", title: "smooth", ...props }),
+    isPercent: (props) => booleanField({ name: "isPercent", title: "isPercent", ...props }),
+    isGroup: (props) => booleanField({ name: "isGroup", title: "isGroup", ...props })
+  };
   class G2PlotChart extends Chart {
-    constructor() {
-      super(...arguments);
-      __publicField(this, "schema", {
-        type: "object",
-        properties: {
-          xField: {
-            title: '{{t("xField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
-            required: true
-          },
-          yField: {
-            title: '{{t("yField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
-            required: true
-          },
-          seriesField: {
-            title: '{{t("seriesField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}"
-          }
-        }
+    constructor({ name, title, component: component2, config: config2 }) {
+      super({
+        name,
+        title,
+        component: component2,
+        config: ["xField", "yField", "seriesField", ...config2 || []]
       });
+      this.addConfigs(configs);
     }
     init(fields, {
       measures,
@@ -67141,7 +67203,7 @@ var __publicField = (obj, key, value) => {
         obj[key] = value2;
         if (key.includes("Field")) {
           if (Array.isArray(value2)) {
-            obj[key] = value2.map((v2) => v2.includes(".") ? replace(v2) : v2);
+            obj[key] = value2.map((v2) => (v2 == null ? void 0 : v2.includes(".")) ? replace(v2) : v2);
           } else if (typeof value2 === "string" && value2.includes(".")) {
             obj[key] = replace(value2);
           }
@@ -67168,13 +67230,13 @@ var __publicField = (obj, key, value) => {
     getReference() {
       return {
         title: this.title,
-        link: `https://g2plot.antv.antgroup.com/api/plots/${this.name}`
+        link: `https://charts.ant.design/api/plots/${this.name}`
       };
     }
   }
   class Bar extends G2PlotChart {
     constructor() {
-      super("bar", "Bar Chart", G2PlotBar);
+      super({ name: "bar", title: "Bar Chart", component: G2PlotBar, config: ["isGroup", "isStack", "isPercent"] });
     }
     init(fields, {
       measures,
@@ -67192,28 +67254,21 @@ var __publicField = (obj, key, value) => {
   }
   class Pie extends G2PlotChart {
     constructor() {
-      super("pie", "Pie Chart", G2Pie);
-      __publicField(this, "schema", {
-        type: "object",
-        properties: {
-          angleField: {
-            title: '{{t("angleField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
-            required: true
-          },
-          colorField: {
-            title: '{{t("colorField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
-            required: true
-          }
+      super({ name: "pie", title: "Pie Chart", component: G2Pie });
+      this.config = [
+        {
+          property: "field",
+          name: "angleField",
+          title: "angleField",
+          required: true
+        },
+        {
+          property: "field",
+          name: "colorField",
+          title: "colorField",
+          required: true
         }
-      });
+      ];
     }
     init(fields, {
       measures,
@@ -67230,18 +67285,10 @@ var __publicField = (obj, key, value) => {
   }
   class DualAxes extends G2PlotChart {
     constructor() {
-      super("dualAxes", "Dual Axes Chart", G2DualAxes);
-      __publicField(this, "schema", {
-        type: "object",
-        properties: {
-          xField: {
-            title: '{{t("xField")}}',
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
-            required: true
-          },
+      super({ name: "dualAxes", title: "Dual Axes Chart", component: G2DualAxes });
+      this.config = [
+        "xField",
+        {
           yField: {
             title: '{{t("yField")}}',
             type: "array",
@@ -67284,7 +67331,7 @@ var __publicField = (obj, key, value) => {
             }
           }
         }
-      });
+      ];
     }
     init(fields, {
       measures,
@@ -67308,13 +67355,35 @@ var __publicField = (obj, key, value) => {
     }
   }
   const g2plot = [
-    new G2PlotChart("line", "Line Chart", Line),
-    new G2PlotChart("area", "Area Chart", Area),
-    new G2PlotChart("column", "Column Chart", Column),
+    new G2PlotChart({
+      name: "line",
+      title: "Line Chart",
+      component: Line,
+      config: ["smooth", "isStack"]
+    }),
+    new G2PlotChart({
+      name: "area",
+      title: "Area Chart",
+      component: Area,
+      config: [
+        "smooth",
+        {
+          property: "isStack",
+          defaultValue: true
+        },
+        "isPercent"
+      ]
+    }),
+    new G2PlotChart({
+      name: "column",
+      title: "Column Chart",
+      component: Column,
+      config: ["isGroup", "isStack", "isPercent"]
+    }),
     new Bar(),
     new Pie(),
     new DualAxes(),
-    new G2PlotChart("scatter", "Scatter Chart", Scatter)
+    new G2PlotChart({ name: "scatter", title: "Scatter Chart", component: Scatter })
   ];
   class AntdChart extends Chart {
     getReference() {
@@ -67326,25 +67395,26 @@ var __publicField = (obj, key, value) => {
   }
   class Statistic extends AntdChart {
     constructor() {
-      super("statistic", "Statistic", antd$1.Statistic);
-      __publicField(this, "schema", {
-        type: "object",
-        properties: {
-          field: {
-            title: lang("Field"),
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Select",
-            "x-reactions": "{{ useChartFields }}",
+      super({
+        name: "statistic",
+        title: "Statistic",
+        component: antd$1.Statistic,
+        config: [
+          {
+            property: "field",
+            name: "field",
+            title: "Field",
             required: true
           },
-          title: {
-            title: lang("Title"),
-            type: "string",
-            "x-decorator": "FormItem",
-            "x-component": "Input"
+          {
+            title: {
+              title: lang("Title"),
+              type: "string",
+              "x-decorator": "FormItem",
+              "x-component": "Input"
+            }
           }
-        }
+        ]
       });
     }
     init(fields, {
@@ -67373,7 +67443,7 @@ var __publicField = (obj, key, value) => {
   }
   class Table extends AntdChart {
     constructor() {
-      super("table", "Table", antd$1.Table);
+      super({ name: "table", title: "Table", component: antd$1.Table });
     }
     getProps({ data: data2, fieldProps, general, advanced }) {
       var _a2;

package/dist/locale/zh-CN.d.ts

@@ -67,5 +67,9 @@ declare const _default: {
     Max: string;
     'Please select a chart type.': string;
     Collection: string;
+    isStack: string;
+    isPercent: string;
+    isGroup: string;
+    smooth: string;
 };
 export default _default;

package/dist/locale/zh-CN.js

@@ -68,7 +68,11 @@ var zh_CN_default = {
   Min: "\u6700\u5C0F\u503C",
   Max: "\u6700\u5927\u503C",
   "Please select a chart type.": "\u8BF7\u9009\u62E9\u56FE\u8868\u7C7B\u578B",
-  Collection: "\u6570\u636E\u8868"
+  Collection: "\u6570\u636E\u8868",
+  isStack: "\u5806\u53E0",
+  isPercent: "\u663E\u793A\u4E3A\u767E\u5206\u6BD4",
+  isGroup: "\u5206\u7EC4",
+  smooth: "\u5E73\u6ED1\u66F2\u7EBF"
 };
 
 module.exports = zh_CN_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/plugin-data-visualization",
-  "version": "0.12.0-alpha.2",
+  "version": "0.12.0-alpha.4",
   "displayName": "Data Visualization",
   "displayName.zh-CN": "数据可视化",
   "description": "Provides business intelligence and data visualization features",
@@ -32,5 +32,5 @@
     "@nocobase/test": "0.x",
     "@nocobase/utils": "0.x"
   },
-  "gitHead": "a95e9e2666f0318c955113a4735bc005a2c9a767"
+  "gitHead": "215dc3b2437c501ca903b56cc378ab5e81c8a11c"
 }