@visactor/vchart 1.6.0-alpha.0 → 1.6.0

package/cjs/core/index.d.ts

@@ -1,9 +1,12 @@
 import { VChart } from './vchart';
 import { Factory } from './factory';
 export { VChart, Factory };
-export declare const version = "1.6.0-alpha.0";
+export declare const version = "1.6.0";
 export type { IVChart } from './interface';
-export * from '../event/interface';
+export type { IStateSpec, StateValueType } from '../compile/mark';
 export * from '../typings/spec/common';
+export * from '../event/interface';
 export * from '../theme/interface';
-export type { IStateSpec, StateValueType } from '../compile/mark';
+export * from '../typings/spec/index';
+export * from '../theme/index';
+export { vglobal } from '@visactor/vrender-core';

package/cjs/core/index.js

@@ -17,7 +17,7 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.version = exports.Factory = exports.VChart = void 0;
+}), exports.vglobal = exports.version = exports.Factory = exports.VChart = void 0;
 
 const vchart_1 = require("./vchart");
 
@@ -35,6 +35,16 @@ Object.defineProperty(exports, "Factory", {
     get: function() {
         return factory_1.Factory;
     }
-}), exports.version = "1.6.0-alpha.0", __exportStar(require("../event/interface"), exports), 
-__exportStar(require("../typings/spec/common"), exports), __exportStar(require("../theme/interface"), exports);
+}), exports.version = "1.6.0", __exportStar(require("../typings/spec/common"), exports), 
+__exportStar(require("../event/interface"), exports), __exportStar(require("../theme/interface"), exports), 
+__exportStar(require("../typings/spec/index"), exports), __exportStar(require("../theme/index"), exports);
+
+var vrender_core_1 = require("@visactor/vrender-core");
+
+Object.defineProperty(exports, "vglobal", {
+    enumerable: !0,
+    get: function() {
+        return vrender_core_1.vglobal;
+    }
+});
 //# sourceMappingURL=index.js.map

package/cjs/core/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,qCAAkC;AAGzB,uFAHA,eAAM,OAGA;AAFf,uCAAoC;AAEnB,wFAFR,iBAAO,OAEQ;AAGX,QAAA,OAAO,GAAG,eAAe,CAAC;AAMvC,qDAAmC;AACnC,yDAAuC;AACvC,qDAAmC","file":"index.js","sourcesContent":["/**\n * @description The core module of VChart, containing the necessary interfaces for using VChart.\n */\n\nimport { VChart } from './vchart';\nimport { Factory } from './factory';\n\nexport { VChart, Factory };\n\n// export the version\nexport const version = \"1.6.0-alpha.0\";\n\n// export necessary types\nexport type { IVChart } from './interface';\n\n// the event types\nexport * from '../event/interface';\nexport * from '../typings/spec/common';\nexport * from '../theme/interface';\nexport type { IStateSpec, StateValueType } from '../compile/mark';\n"]}
+{"version":3,"sources":["../src/core/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,qCAAkC;AAGzB,uFAHA,eAAM,OAGA;AAFf,uCAAoC;AAEnB,wFAFR,iBAAO,OAEQ;AAGX,QAAA,OAAO,GAAG,OAAO,CAAC;AAM/B,yDAAuC;AACvC,qDAAmC;AACnC,qDAAmC;AAKnC,wDAAsC;AAGtC,iDAA+B;AAG/B,uDAAiD;AAAxC,uGAAA,OAAO,OAAA","file":"index.js","sourcesContent":["/**\n * @description The core module of VChart, containing the necessary interfaces for using VChart.\n */\n\nimport { VChart } from './vchart';\nimport { Factory } from './factory';\n\nexport { VChart, Factory };\n\n// export the version\nexport const version = \"1.6.0\";\n\n// export necessary types\nexport type { IVChart } from './interface';\nexport type { IStateSpec, StateValueType } from '../compile/mark';\n\nexport * from '../typings/spec/common';\nexport * from '../event/interface';\nexport * from '../theme/interface';\n\n/**\n * spec\n */\nexport * from '../typings/spec/index';\n\n// theme\nexport * from '../theme/index';\n\n// vrender\nexport { vglobal } from '@visactor/vrender-core';\n"]}

package/cjs/core/vchart.d.ts

@@ -8,7 +8,7 @@ import type { EventCallback, EventParams, EventQuery, EventType } from '../event
 import type { IParserOptions } from '@visactor/vdataset/es/parser';
 import type { Transform } from '@visactor/vdataset';
 import { DataSet, DataView } from '@visactor/vdataset';
-import { type Stage } from '@visactor/vrender-core';
+import type { Stage } from '@visactor/vrender-core';
 import type { GeoSourceType } from '../typings/geo';
 import type { GeoSourceOption } from '../series/map/geo-source';
 import type { IMark, MarkConstructor } from '../mark/interface';
@@ -70,6 +70,7 @@ export declare class VChart implements IVChart {
     private _bindResizeEvent;
     private _unBindResizeEvent;
     private _getCurSize;
+    private _doResize;
     private _onResize;
     private _initDataSet;
     updateCustomConfigAndRerender(modifyConfig: () => IUpdateSpecResult | undefined, morphConfig?: IMorphConfig): Promise<IVChart>;
@@ -107,7 +108,7 @@ export declare class VChart implements IVChart {
     setSelected(datum: MaybeArray<any> | null, filter?: (series: ISeries, mark: IMark) => boolean, region?: IRegionQuerier): void;
     setHovered(datum: MaybeArray<Datum> | null, filter?: (series: ISeries, mark: IMark) => boolean, region?: IRegionQuerier): void;
     private _updateCurrentTheme;
-    private _updateChartConfiguration;
+    private _shouldChartResize;
     private _getBackground;
     getCurrentTheme(): ITheme;
     getCurrentThemeName(): string;

package/cjs/core/vchart.js

@@ -38,7 +38,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerVChartCore = exports.VChart = void 0;
 
-const array_1 = require("../data/parser/array"), common_1 = require("../typings/spec/common"), interface_1 = require("../component/interface"), vdataset_1 = require("@visactor/vdataset"), util_1 = require("../util"), factory_1 = require("./factory"), event_1 = require("../event/event"), event_dispatcher_1 = require("../event/event-dispatcher"), geo_source_1 = require("../series/map/geo-source"), register_1 = require("../data/register"), initialize_1 = require("../data/initialize"), stack_split_1 = require("../data/transforms/stack-split"), copy_data_view_1 = require("../data/transforms/copy-data-view"), interface_2 = require("../animation/interface"), theme_manager_1 = require("../theme/theme-manager"), compiler_1 = require("../compile/compiler"), image_1 = require("../util/image"), constant_1 = require("../constant"), vutils_1 = require("@visactor/vutils"), instance_manager_1 = require("./instance-manager"), vrender_components_1 = require("@visactor/vrender-components"), util_2 = require("../chart/util"), region_1 = require("../region/region"), layout_1 = require("../layout"), mark_1 = require("../mark"), config_1 = require("../animation/config"), vgrammar_core_1 = require("@visactor/vgrammar-core"), util_3 = require("./util"), util_4 = require("../theme/util");
+const array_1 = require("../data/parser/array"), common_1 = require("../typings/spec/common"), type_1 = require("../component/interface/type"), vdataset_1 = require("@visactor/vdataset"), id_1 = require("../util/id"), space_1 = require("../util/space"), env_1 = require("../util/env"), debug_1 = require("../util/debug"), merge_spec_1 = require("../util/spec/merge-spec"), transform_1 = require("../util/spec/transform"), preprocess_1 = require("../util/spec/preprocess"), common_2 = require("../util/spec/common"), factory_1 = require("./factory"), event_1 = require("../event/event"), event_dispatcher_1 = require("../event/event-dispatcher"), geo_source_1 = require("../series/map/geo-source"), register_1 = require("../data/register"), initialize_1 = require("../data/initialize"), stack_split_1 = require("../data/transforms/stack-split"), copy_data_view_1 = require("../data/transforms/copy-data-view"), interface_1 = require("../animation/interface"), theme_manager_1 = require("../theme/theme-manager"), compiler_1 = require("../compile/compiler"), image_1 = require("../util/image"), constant_1 = require("../constant"), vutils_1 = require("@visactor/vutils"), instance_manager_1 = require("./instance-manager"), vrender_components_1 = require("@visactor/vrender-components"), util_1 = require("../chart/util"), region_1 = require("../region/region"), base_layout_1 = require("../layout/base-layout"), group_1 = require("../mark/group"), config_1 = require("../animation/config"), vgrammar_core_1 = require("@visactor/vgrammar-core"), util_2 = require("./util"), util_3 = require("../theme/util"), env_2 = require("../env");
 
 class VChart {
     static useRegisters(comps) {
@@ -92,25 +92,23 @@ class VChart {
     }
     constructor(spec, options) {
         var _a, _b, _c, _d, _e, _f;
-        this.id = (0, util_1.createID)(), this._userEvents = [], this._autoSize = !0, this._option = {
+        this.id = (0, id_1.createID)(), this._userEvents = [], this._autoSize = !0, this._option = {
             mode: common_1.RenderModeEnum["desktop-browser"],
-            animation: !0,
             onError: msg => {
                 throw new Error(msg);
             }
         }, this._observer = null, this._currentChartLevelTheme = {}, this._context = {}, 
-        this._onResize = (0, util_1.debounce)(((...args) => {
-            const {width: width, height: height} = this._getCurSize();
-            this._curSize.width === width && this._curSize.height === height || (this._curSize = {
-                width: width,
-                height: height
-            }, this.resize(width, height));
-        }), 100), this._option = (0, vutils_1.merge)(this._option, options), this._onError = null === (_a = this._option) || void 0 === _a ? void 0 : _a.onError;
+        this._onResize = (0, vutils_1.debounce)(((...args) => {
+            this._doResize();
+        }), 100), this._option = (0, vutils_1.merge)(this._option, {
+            animation: !1 !== spec.animation
+        }, options), this._onError = null === (_a = this._option) || void 0 === _a ? void 0 : _a.onError;
         const _g = this._option, {dom: dom, renderCanvas: renderCanvas, mode: mode, stage: stage, poptip: poptip} = _g, restOptions = __rest(_g, [ "dom", "renderCanvas", "mode", "stage", "poptip" ]);
-        dom && (this._container = (0, util_1.isString)(dom) ? null === document || void 0 === document ? void 0 : document.getElementById(dom) : dom), 
-        renderCanvas && (this._canvas = renderCanvas), stage && (this._stage = stage), "node" === mode || this._container || this._canvas || this._stage ? (this._viewBox = this._option.viewBox, 
-        this._currentThemeName = theme_manager_1.ThemeManager.getCurrentThemeName(), this._setSpec(spec), 
-        this._updateCurrentTheme(), this._curSize = (0, util_2.calculateChartSize)(this._spec, {
+        dom && (this._container = (0, vutils_1.isString)(dom) ? null === document || void 0 === document ? void 0 : document.getElementById(dom) : dom), 
+        renderCanvas && (this._canvas = renderCanvas), stage && (this._stage = stage), "node" === mode || this._container || this._canvas || this._stage ? ((0, 
+        env_1.isTrueBrowser)(mode) ? (0, env_2.registerBrowserEnv)() : "node" === mode && (0, 
+        env_2.registerNodeEnv)(), this._viewBox = this._option.viewBox, this._currentThemeName = theme_manager_1.ThemeManager.getCurrentThemeName(), 
+        this._setSpec(spec), this._updateCurrentTheme(), this._curSize = (0, util_1.calculateChartSize)(this._spec, {
             container: this._container,
             canvas: this._canvas,
             mode: this._option.mode || common_1.RenderModeEnum["desktop-browser"],
@@ -131,12 +129,12 @@ class VChart {
             text: {
                 fontFamily: this._currentChartLevelTheme.fontFamily
             }
-        }), this._initDataSet(this._option.dataSet), this._autoSize = !!(0, util_1.isTrueBrowser)(mode) && (null === (_f = null !== (_e = spec.autoFit) && void 0 !== _e ? _e : this._option.autoFit) || void 0 === _f || _f), 
+        }), this._initDataSet(this._option.dataSet), this._autoSize = !!(0, env_1.isTrueBrowser)(mode) && (null === (_f = null !== (_e = spec.autoFit) && void 0 !== _e ? _e : this._option.autoFit) || void 0 === _f || _f), 
         this._bindResizeEvent(), this._bindVGrammarViewEvent(), this._event.emit(constant_1.ChartEvent.initialized, {}), 
         instance_manager_1.InstanceManager.registerInstance(this)) : null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!");
     }
     _setSpec(spec) {
-        spec && (this._spec = (0, util_1.specTransform)((0, util_1.isString)(spec) ? JSON.parse(spec) : spec));
+        spec && (this._spec = (0, transform_1.specTransform)((0, vutils_1.isString)(spec) ? JSON.parse(spec) : spec));
     }
     _initChart(spec) {
         var _a, _b;
@@ -201,6 +199,13 @@ class VChart {
             height: null !== (_b = this._spec.height) && void 0 !== _b ? _b : containerHeight
         };
     }
+    _doResize() {
+        const {width: width, height: height} = this._getCurSize();
+        this._curSize.width === width && this._curSize.height === height || (this._curSize = {
+            width: width,
+            height: height
+        }, this.resize(width, height));
+    }
     _initDataSet(dataSet) {
         dataSet instanceof vdataset_1.DataSet ? this._dataSet = dataSet : this._dataSet = new vdataset_1.DataSet, 
         (0, register_1.registerDataSetInstanceParser)(this._dataSet, "dataview", vdataset_1.dataViewParser), 
@@ -213,13 +218,13 @@ class VChart {
     updateCustomConfigAndRerender(modifyConfig, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
             const result = modifyConfig();
-            return (0, util_1.isValid)(result) ? (this._reCompile(result), yield this.renderAsync(morphConfig), 
+            return (0, vutils_1.isValid)(result) ? (this._reCompile(result), yield this.renderAsync(morphConfig), 
             this) : this;
         }));
     }
     updateCustomConfigAndRerenderSync(modifyConfig, morphConfig) {
         const result = modifyConfig();
-        return (0, util_1.isValid)(result) ? (this._reCompile(result), this.renderSync(morphConfig), 
+        return (0, vutils_1.isValid)(result) ? (this._reCompile(result), this.renderSync(morphConfig), 
         this) : this;
     }
     _reCompile(updateResult) {
@@ -229,7 +234,7 @@ class VChart {
         this._userEvents.forEach((e => {
             var _a;
             return null === (_a = this._event) || void 0 === _a ? void 0 : _a.on(e.eType, e.query, e.handler);
-        })), updateResult.reSize && this._onResize(); else if (updateResult.reCompile && (null === (_b = this._compiler) || void 0 === _b || _b.clear({
+        })), updateResult.reSize && this._doResize(); else if (updateResult.reCompile && (null === (_b = this._compiler) || void 0 === _b || _b.clear({
             chart: this._chart,
             vChart: this
         }), null === (_c = this._compiler) || void 0 === _c || _c.compile({
@@ -257,10 +262,10 @@ class VChart {
         return null === (_j = this._compiler) || void 0 === _j || _j.renderSync(morphConfig), 
         this._option.animation && (null === (_k = this._chart) || void 0 === _k || _k.getAllRegions().forEach((region => {
             var _a;
-            null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_2.AnimationStateEnum.update, !0);
+            null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
         })), null === (_l = this._chart) || void 0 === _l || _l.getAllComponents().forEach((component => {
             var _a;
-            null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_2.AnimationStateEnum.update, !0);
+            null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
         }))), this._event.emit(constant_1.ChartEvent.rendered, {}), this;
     }
     renderAsync(morphConfig) {
@@ -281,10 +286,10 @@ class VChart {
             return yield null === (_j = this._compiler) || void 0 === _j ? void 0 : _j.renderAsync(morphConfig), 
             this._option.animation && (null === (_k = this._chart) || void 0 === _k || _k.getAllRegions().forEach((region => {
                 var _a;
-                null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_2.AnimationStateEnum.update, !0);
+                null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
             })), null === (_l = this._chart) || void 0 === _l || _l.getAllComponents().forEach((component => {
                 var _a;
-                null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_2.AnimationStateEnum.update, !0);
+                null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
             }))), this._event.emit(constant_1.ChartEvent.rendered, {}), this;
         }));
     }
@@ -298,10 +303,10 @@ class VChart {
     }
     updateData(id, data, options) {
         return __awaiter(this, void 0, void 0, (function*() {
-            if ((0, util_1.isNil)(this._dataSet)) return this;
+            if ((0, vutils_1.isNil)(this._dataSet)) return this;
             if (this._chart) return this._chart.updateData(id, data, !0, options), yield this._compiler.renderAsync(), 
             this;
-            this._spec.data = (0, util_1.array)(this._spec.data);
+            this._spec.data = (0, vutils_1.array)(this._spec.data);
             const preDV = this._spec.data.find((dv => dv.name === id || dv.id === id));
             return preDV ? preDV.id === id ? preDV.values = data : preDV.name === id && preDV.parse(data, options) : (0, 
             vutils_1.isArray)(data) ? this._spec.data.push({
@@ -329,7 +334,7 @@ class VChart {
         }));
     }
     updateDataSync(id, data, options) {
-        if ((0, util_1.isNil)(this._dataSet)) return this;
+        if ((0, vutils_1.isNil)(this._dataSet)) return this;
         if (this._chart) return this._chart.updateData(id, data, !0, options), this._compiler.renderSync(), 
         this;
         const preDV = this._spec.data.find((dv => dv.name === id));
@@ -344,7 +349,7 @@ class VChart {
     updateFullDataSync(data, reRender = !0) {
         if (this._chart) return this._chart.updateFullData(data), reRender && this._compiler.renderSync(), 
         this;
-        return (0, util_1.array)(data).forEach((d => {
+        return (0, vutils_1.array)(data).forEach((d => {
             var _a;
             const {id: id, values: values, parser: parser, fields: fields} = d, preDV = this._spec.data.find((dv => dv.name === id));
             if (preDV) preDV.setFields(fields), preDV.parse(values, parser); else {
@@ -359,7 +364,7 @@ class VChart {
         return __awaiter(this, void 0, void 0, (function*() {
             if (this._chart) return this._chart.updateFullData(data), reRender && (yield this._compiler.renderAsync()), 
             this;
-            return (0, util_1.array)(data).forEach((d => {
+            return (0, vutils_1.array)(data).forEach((d => {
                 var _a;
                 const {id: id, values: values, parser: parser, fields: fields} = d, preDV = this._spec.data.find((dv => dv.name === id));
                 if (preDV) preDV.setFields(fields), preDV.parse(values, parser); else {
@@ -373,16 +378,16 @@ class VChart {
     }
     updateSpec(spec, forceMerge = !1, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
-            return spec ? ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
-            util_1.mergeSpec)({}, this._spec, spec)), yield this.updateCustomConfigAndRerender((() => {
+            return spec ? ((0, vutils_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
+            merge_spec_1.mergeSpec)({}, this._spec, spec)), yield this.updateCustomConfigAndRerender((() => {
                 var _a, _b, _c;
-                spec = (0, util_1.specTransform)(spec);
+                spec = (0, transform_1.specTransform)(spec);
                 const lastSpec = this._spec;
                 this._spec = spec, (0, vutils_1.isEqual)(lastSpec.theme, spec.theme) || (this._updateCurrentTheme(), 
                 null === (_a = this._chart) || void 0 === _a || _a.setCurrentTheme());
-                const reSize = this._updateChartConfiguration(lastSpec);
+                const reSize = this._shouldChartResize(lastSpec);
                 return null === (_c = null === (_b = this._compiler) || void 0 === _b ? void 0 : _b.getVGrammarView()) || void 0 === _c || _c.updateLayoutTag(), 
-                (0, util_2.mergeUpdateResult)(this._chart.updateSpec(spec, morphConfig), {
+                (0, util_1.mergeUpdateResult)(this._chart.updateSpec(spec, morphConfig), {
                     change: reSize,
                     reMake: !1,
                     reCompile: !1,
@@ -392,15 +397,16 @@ class VChart {
         }));
     }
     updateSpecSync(spec, forceMerge = !1, morphConfig) {
-        return spec ? ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
-        util_1.mergeSpec)({}, this._spec, spec)), this.updateCustomConfigAndRerenderSync((() => {
-            var _a, _b, _c;
-            (spec = (0, util_1.specTransform)(spec)).data = null !== (_a = spec.data) && void 0 !== _a ? _a : [];
+        return spec ? ((0, vutils_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
+        merge_spec_1.mergeSpec)({}, this._spec, spec)), this.updateCustomConfigAndRerenderSync((() => {
+            var _a, _b, _c, _d;
+            (spec = (0, transform_1.specTransform)(spec)).data = null !== (_a = spec.data) && void 0 !== _a ? _a : [];
             const lastSpec = this._spec;
-            this._spec = spec;
-            const reSize = this._updateChartConfiguration(lastSpec);
-            return null === (_c = null === (_b = this._compiler) || void 0 === _b ? void 0 : _b.getVGrammarView()) || void 0 === _c || _c.updateLayoutTag(), 
-            (0, util_2.mergeUpdateResult)(this._chart.updateSpec(spec, morphConfig), {
+            this._spec = spec, (0, vutils_1.isEqual)(lastSpec.theme, spec.theme) || (this._updateCurrentTheme(), 
+            null === (_b = this._chart) || void 0 === _b || _b.setCurrentTheme());
+            const reSize = this._shouldChartResize(lastSpec);
+            return null === (_d = null === (_c = this._compiler) || void 0 === _c ? void 0 : _c.getVGrammarView()) || void 0 === _d || _d.updateLayoutTag(), 
+            (0, util_1.mergeUpdateResult)(this._chart.updateSpec(spec, morphConfig), {
                 change: reSize,
                 reMake: !1,
                 reCompile: !1,
@@ -411,8 +417,8 @@ class VChart {
     updateModelSpec(filter, spec, forceMerge = !1, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
             if (!spec || !this._spec) return this;
-            if ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), (0, vutils_1.isFunction)(filter) || (0, 
-            util_1.mergeSpecWithFilter)(this._spec, filter, spec, forceMerge), this._chart) {
+            if ((0, vutils_1.isString)(spec) && (spec = JSON.parse(spec)), (0, vutils_1.isFunction)(filter) || (0, 
+            merge_spec_1.mergeSpecWithFilter)(this._spec, filter, spec, forceMerge), this._chart) {
                 const model = this._chart.getModelInFilter(filter);
                 if (model) return this._updateModelSpec(model, spec, !1, forceMerge, morphConfig);
             }
@@ -421,15 +427,15 @@ class VChart {
     }
     updateModelSpecSync(filter, spec, forceMerge = !1, morphConfig) {
         if (!spec || !this._spec) return this;
-        if ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), (0, vutils_1.isFunction)(filter) || (0, 
-        util_1.mergeSpecWithFilter)(this._spec, filter, spec, forceMerge), this._chart) {
+        if ((0, vutils_1.isString)(spec) && (spec = JSON.parse(spec)), (0, vutils_1.isFunction)(filter) || (0, 
+        merge_spec_1.mergeSpecWithFilter)(this._spec, filter, spec, forceMerge), this._chart) {
             const model = this._chart.getModelInFilter(filter);
             if (model) return this._updateModelSpec(model, spec, !0, forceMerge, morphConfig);
         }
         return this;
     }
     _updateModelSpec(model, spec, sync = !1, forceMerge = !1, morphConfig) {
-        forceMerge && (spec = (0, util_1.mergeSpec)({}, model.getSpec(), spec));
+        forceMerge && (spec = (0, merge_spec_1.mergeSpec)({}, model.getSpec(), spec));
         const modifyConfig = () => {
             const result = model.updateSpec(spec);
             return model.reInit(), (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) && this._chart.reDataFlow(), 
@@ -458,11 +464,11 @@ class VChart {
     }
     on(eType, query, handler) {
         var _a;
-        this._userEvents.push({
+        this._userEvents && (this._userEvents.push({
             eType: eType,
             query: "function" == typeof query ? null : query,
             handler: "function" == typeof query ? query : handler
-        }), null === (_a = this._event) || void 0 === _a || _a.on(eType, query, handler);
+        }), null === (_a = this._event) || void 0 === _a || _a.on(eType, query, handler));
     }
     off(eType, handler) {
         var _a;
@@ -487,28 +493,29 @@ class VChart {
         var _a, _b;
         const optionTheme = this._option.theme, specTheme = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.theme;
         nextThemeName && (this._currentThemeName = nextThemeName);
-        const colorScheme = (0, util_4.mergeThemeAndGet)("colorScheme", this._currentThemeName, optionTheme, specTheme);
+        const colorScheme = (0, util_3.mergeThemeAndGet)("colorScheme", this._currentThemeName, optionTheme, specTheme);
         this._currentChartLevelTheme = {
             colorScheme: colorScheme,
-            background: (0, util_4.mergeThemeAndGet)("background", this._currentThemeName, optionTheme, specTheme, colorScheme),
-            fontFamily: (0, util_4.mergeThemeAndGet)("fontFamily", this._currentThemeName, optionTheme, specTheme, colorScheme)
-        }, (0, vrender_components_1.setPoptipTheme)((0, util_1.preprocessSpecOrTheme)("mark-theme", (0, 
-        util_4.mergeThemeAndGet)("component.poptip", this._currentThemeName, optionTheme, specTheme, colorScheme), colorScheme)), 
+            background: (0, util_3.mergeThemeAndGet)("background", this._currentThemeName, optionTheme, specTheme, colorScheme),
+            fontFamily: (0, util_3.mergeThemeAndGet)("fontFamily", this._currentThemeName, optionTheme, specTheme, colorScheme)
+        }, (0, vrender_components_1.setPoptipTheme)((0, preprocess_1.preprocessSpecOrTheme)("mark-theme", (0, 
+        util_3.mergeThemeAndGet)("component.poptip", this._currentThemeName, optionTheme, specTheme, colorScheme), colorScheme)), 
         null === (_b = this._compiler) || void 0 === _b || _b.setBackground(this._getBackground());
     }
-    _updateChartConfiguration(oldSpec) {
+    _shouldChartResize(oldSpec) {
         var _a, _b;
         let resize = !1;
-        this._spec.width === oldSpec.width && this._spec.height === oldSpec.height || (resize = !0);
+        (0, vutils_1.isNil)(this._spec.width) ? this._spec.width = oldSpec.width : this._spec.width !== oldSpec.width && (resize = !0), 
+        (0, vutils_1.isNil)(this._spec.height) ? this._spec.height = oldSpec.height : this._spec.height !== oldSpec.height && (resize = !0);
         const lasAutoSize = this._autoSize;
-        return this._autoSize = !!(0, util_1.isTrueBrowser)(this._option.mode) && (null === (_b = null !== (_a = this._spec.autoFit) && void 0 !== _a ? _a : this._option.autoFit) || void 0 === _b || _b), 
-        this._autoSize !== lasAutoSize && (resize = !0), this._updateCurrentTheme(), resize;
+        return this._autoSize = !!(0, env_1.isTrueBrowser)(this._option.mode) && (null === (_b = null !== (_a = this._spec.autoFit) && void 0 !== _a ? _a : this._option.autoFit) || void 0 === _b || _b), 
+        this._autoSize !== lasAutoSize && (resize = !0), resize;
     }
     _getBackground() {
         return ("string" == typeof this._spec.background ? this._spec.background : null) || this._currentChartLevelTheme.background || this._option.background;
     }
     getCurrentTheme() {
-        return (0, util_1.getThemeObject)(this._currentThemeName);
+        return (0, common_2.getThemeObject)(this._currentThemeName);
     }
     getCurrentThemeName() {
         return this._currentThemeName;
@@ -537,7 +544,7 @@ class VChart {
     }
     _getTooltipComponent() {
         var _a;
-        return null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().find((c => c.type === interface_1.ComponentTypeEnum.tooltip));
+        return null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().find((c => c.type === type_1.ComponentTypeEnum.tooltip));
     }
     setTooltipHandler(tooltipHandler) {
         var _a, _b;
@@ -557,7 +564,7 @@ class VChart {
     showTooltip(datum, options) {
         var _a;
         const tooltip = this._getTooltipComponent();
-        return null !== (_a = (0, util_1.isValid)(datum) && "none" !== (null == tooltip ? void 0 : tooltip.showTooltip(datum, options))) && void 0 !== _a && _a;
+        return null !== (_a = (0, vutils_1.isValid)(datum) && "none" !== (null == tooltip ? void 0 : tooltip.showTooltip(datum, options))) && void 0 !== _a && _a;
     }
     hideTooltip() {
         var _a;
@@ -571,7 +578,7 @@ class VChart {
     }
     getLegendDataByIndex(index = 0) {
         var _a;
-        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === interface_1.ComponentTypeEnum.discreteLegend));
+        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === type_1.ComponentTypeEnum.discreteLegend));
         return legends[index] ? legends[index].getLegendData() : [];
     }
     getLegendSelectedDataById(id) {
@@ -581,7 +588,7 @@ class VChart {
     }
     getLegendSelectedDataByIndex(index = 0) {
         var _a;
-        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === interface_1.ComponentTypeEnum.discreteLegend));
+        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === type_1.ComponentTypeEnum.discreteLegend));
         return legends[index] ? legends[index].getSelectedData() : [];
     }
     setLegendSelectedDataById(id, selectedData) {
@@ -591,7 +598,7 @@ class VChart {
     }
     setLegendSelectedDataByIndex(index = 0, selectedData) {
         var _a;
-        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === interface_1.ComponentTypeEnum.discreteLegend));
+        const legends = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getAllComponents().filter((c => c.type === type_1.ComponentTypeEnum.discreteLegend));
         legends[index] && legends[index].setSelectedData(selectedData);
     }
     getDataURL() {
@@ -612,7 +619,7 @@ class VChart {
     exportImg(name) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, (function*() {
-            if (!(0, util_1.isTrueBrowser)(this._option.mode)) return void (null === (_a = this._option) || void 0 === _a || _a.onError(new TypeError("non-browser environment can not export img")));
+            if (!(0, env_1.isTrueBrowser)(this._option.mode)) return void (null === (_a = this._option) || void 0 === _a || _a.onError(new TypeError("non-browser environment can not export img")));
             const dataURL = yield this.getDataURL();
             dataURL ? (0, image_1.URLToImage)(name, dataURL) : null === (_b = this._option) || void 0 === _b || _b.onError(new ReferenceError("render is not defined"));
         }));
@@ -657,10 +664,10 @@ class VChart {
     }
     getContainer() {
         var _a;
-        if ((0, util_1.isValid)(this._container)) return this._container;
+        if ((0, vutils_1.isValid)(this._container)) return this._container;
         let canvasNode;
-        return canvasNode = (0, util_1.isString)(this._canvas) ? null === document || void 0 === document ? void 0 : document.getElementById(this._canvas) : this._canvas, 
-        (0, util_1.isValid)(canvasNode) ? canvasNode.parentElement : null === (_a = this.getCanvas()) || void 0 === _a ? void 0 : _a.parentElement;
+        return canvasNode = (0, vutils_1.isString)(this._canvas) ? null === document || void 0 === document ? void 0 : document.getElementById(this._canvas) : this._canvas, 
+        (0, vutils_1.isValid)(canvasNode) ? canvasNode.parentElement : null === (_a = this.getCanvas()) || void 0 === _a ? void 0 : _a.parentElement;
     }
     getComponents() {
         return this._chart.getAllComponents();
@@ -687,25 +694,25 @@ class VChart {
         if ((0, vutils_1.isEmpty)(datum)) return null;
         const {seriesId: seriesId, seriesIndex: seriesIndex = 0} = dataLinkInfo;
         let series;
-        if ((0, util_1.isValid)(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : (0, 
-        util_1.isValid)(seriesIndex) && (series = null === (_a = this._chart.getSeriesInIndex([ seriesIndex ])) || void 0 === _a ? void 0 : _a[0]), 
+        if ((0, vutils_1.isValid)(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : (0, 
+        vutils_1.isValid)(seriesIndex) && (series = null === (_a = this._chart.getSeriesInIndex([ seriesIndex ])) || void 0 === _a ? void 0 : _a[0]), 
         series) {
             const keys = Object.keys(datum), handledDatum = series.getViewData().latestData.find((viewDatum => keys.every((k => viewDatum[k] == datum[k])))), seriesLayoutStartPoint = series.getLayoutStartPoint();
             let point;
             return point = handledDatum ? series.dataToPosition(handledDatum) : series.dataToPosition(datum), 
-            (0, util_1.convertPoint)(point, seriesLayoutStartPoint, isRelativeToCanvas);
+            (0, space_1.convertPoint)(point, seriesLayoutStartPoint, isRelativeToCanvas);
         }
         return null;
     }
     convertValueToPosition(value, dataLinkInfo, isRelativeToCanvas = !1) {
         var _a, _b;
-        if (!this._chart || (0, util_1.isNil)(value) || (0, vutils_1.isEmpty)(dataLinkInfo)) return null;
+        if (!this._chart || (0, vutils_1.isNil)(value) || (0, vutils_1.isEmpty)(dataLinkInfo)) return null;
         if (!(0, vutils_1.isArray)(value)) {
             const {axisId: axisId, axisIndex: axisIndex} = dataLinkInfo;
             let axis;
-            if ((0, util_1.isValid)(axisId) ? axis = this._chart.getComponentsByKey("axes").find((s => s.userId === axisId)) : (0, 
-            util_1.isValid)(axisIndex) && (axis = null === (_a = this._chart.getComponentsByKey("axes")) || void 0 === _a ? void 0 : _a[axisIndex]), 
-            !axis) return (0, util_1.warn)("Please check whether the `axisId` or `axisIndex` is set!"), 
+            if ((0, vutils_1.isValid)(axisId) ? axis = this._chart.getComponentsByKey("axes").find((s => s.userId === axisId)) : (0, 
+            vutils_1.isValid)(axisIndex) && (axis = null === (_a = this._chart.getComponentsByKey("axes")) || void 0 === _a ? void 0 : _a[axisIndex]), 
+            !axis) return (0, debug_1.warn)("Please check whether the `axisId` or `axisIndex` is set!"), 
             null;
             const pointValue = null == axis ? void 0 : axis.valueToPosition(value);
             if (isRelativeToCanvas) {
@@ -716,21 +723,21 @@ class VChart {
         }
         const {seriesId: seriesId, seriesIndex: seriesIndex} = dataLinkInfo;
         let series;
-        return (0, util_1.isValid)(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : (0, 
-        util_1.isValid)(seriesIndex) && (series = null === (_b = this._chart.getSeriesInIndex([ seriesIndex ])) || void 0 === _b ? void 0 : _b[0]), 
-        series ? (0, util_1.convertPoint)(series.valueToPosition(value[0], value[1]), series.getLayoutStartPoint(), isRelativeToCanvas) : ((0, 
-        util_1.warn)("Please check whether the `seriesId` or `seriesIndex` is set!"), null);
+        return (0, vutils_1.isValid)(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : (0, 
+        vutils_1.isValid)(seriesIndex) && (series = null === (_b = this._chart.getSeriesInIndex([ seriesIndex ])) || void 0 === _b ? void 0 : _b[0]), 
+        series ? (0, space_1.convertPoint)(series.valueToPosition(value[0], value[1]), series.getLayoutStartPoint(), isRelativeToCanvas) : ((0, 
+        debug_1.warn)("Please check whether the `seriesId` or `seriesIndex` is set!"), null);
     }
 }
 
 exports.VChart = VChart, VChart.InstanceManager = instance_manager_1.InstanceManager, 
 VChart.ThemeManager = theme_manager_1.ThemeManager, VChart.globalConfig = {
     uniqueTooltip: !0
-}, VChart.Utils = util_3.VCHART_UTILS;
+}, VChart.Utils = util_2.VCHART_UTILS;
 
 const registerVChartCore = () => {
-    factory_1.Factory.registerRegion("region", region_1.Region), factory_1.Factory.registerLayout("base", layout_1.Layout), 
-    factory_1.Factory.registerMark(mark_1.GroupMark.type, mark_1.GroupMark), vgrammar_core_1.View.useRegisters([ vgrammar_core_1.registerFilterTransform, vgrammar_core_1.registerMapTransform ]), 
+    factory_1.Factory.registerRegion("region", region_1.Region), factory_1.Factory.registerLayout("base", base_layout_1.Layout), 
+    factory_1.Factory.registerMark(group_1.GroupMark.type, group_1.GroupMark), vgrammar_core_1.View.useRegisters([ vgrammar_core_1.registerFilterTransform, vgrammar_core_1.registerMapTransform ]), 
     (0, config_1.registerVGrammarAnimation)(), vutils_1.Logger.getInstance(vutils_1.LoggerLevel.Error);
 };