@visactor/vchart 1.6.7 → 1.7.0-alpha.1

package/esm/core/vchart.js

@@ -40,6 +40,8 @@ import { ComponentTypeEnum } from "../component/interface/type";
 
 import { DataSet, dataViewParser, DataView } from "@visactor/vdataset";
 
+import { isString, isValid, isNil, array, debounce, functionTransform } from "../util";
+
 import { createID } from "../util/id";
 
 import { convertPoint } from "../util/space";
@@ -52,8 +54,6 @@ import { mergeSpec, mergeSpecWithFilter } from "../util/spec/merge-spec";
 
 import { specTransform } from "../util/spec/transform";
 
-import { preprocessSpecOrTheme } from "../util/spec/preprocess";
-
 import { getThemeObject } from "../util/spec/common";
 
 import { Factory } from "./factory";
@@ -82,7 +82,7 @@ import { getCanvasDataURL, URLToImage } from "../util/image";
 
 import { ChartEvent, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, VGRAMMAR_HOOK_EVENT } from "../constant";
 
-import { getContainerSize, isArray, isEmpty, Logger, merge as mergeOrigin, isFunction, LoggerLevel, isEqual, isString, isValid, isNil, array, debounce } from "@visactor/vutils";
+import { getContainerSize, isArray, isEmpty, Logger, merge as mergeOrigin, isFunction, LoggerLevel, isEqual, get, cloneDeep } from "@visactor/vutils";
 
 import { InstanceManager } from "./instance-manager";
 
@@ -102,14 +102,18 @@ import { View, registerFilterTransform, registerMapTransform } from "@visactor/v
 
 import { VCHART_UTILS } from "./util";
 
-import { mergeThemeAndGet } from "../theme/util";
+import { ExpressionFunction } from "./expression-function";
 
 import { registerBrowserEnv, registerNodeEnv } from "../env";
 
+import { mergeTheme, preprocessTheme } from "../util/spec";
+
+import { darkTheme, registerTheme } from "../theme/builtin";
+
 export class VChart {
     static useRegisters(comps) {
         comps.forEach((fn => {
-            fn();
+            "function" == typeof fn ? fn() : console.error("Invalid function:", fn);
         }));
     }
     static useChart(charts) {
@@ -133,6 +137,18 @@ export class VChart {
     static registerDataSetTransform(name, transform) {
         Factory.registerTransform(name, transform);
     }
+    static registerFunction(key, fun) {
+        key && fun && ExpressionFunction.instance().registerFunction(key, fun);
+    }
+    static unregisterFunction(key) {
+        key && ExpressionFunction.instance().unregisterFunction(key);
+    }
+    static getFunction(key) {
+        return key ? ExpressionFunction.instance().getFunction(key) : null;
+    }
+    static getFunctionList() {
+        return ExpressionFunction.instance().getFunctionNameList();
+    }
     static registerMap(key, source, option) {
         const impl = Factory.getImplementInKey("registerMap");
         impl && impl(key, source, option);
@@ -157,21 +173,20 @@ export class VChart {
         return this._dataSet;
     }
     constructor(spec, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.id = createID(), this._userEvents = [], this._autoSize = !0, this._option = {
             mode: RenderModeEnum["desktop-browser"],
             onError: msg => {
                 throw new Error(msg);
             }
-        }, this._observer = null, this._currentChartLevelTheme = {}, this._context = {}, 
-        this._onResize = debounce(((...args) => {
+        }, this._observer = null, this._context = {}, this._onResize = debounce(((...args) => {
             this._doResize();
         }), 100), this._option = mergeOrigin(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 = 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 ? (isTrueBrowser(mode) ? registerBrowserEnv() : "node" === mode && registerNodeEnv(), 
+        const _h = this._option, {dom: dom, renderCanvas: renderCanvas, mode: mode, stage: stage, poptip: poptip} = _h, restOptions = __rest(_h, [ "dom", "renderCanvas", "mode", "stage", "poptip" ]), isTrueBrowseEnv = isTrueBrowser(mode);
+        isTrueBrowseEnv && dom && (this._container = 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 ? (isTrueBrowseEnv ? registerBrowserEnv() : "node" === mode && registerNodeEnv(), 
         this._viewBox = this._option.viewBox, this._currentThemeName = ThemeManager.getCurrentThemeName(), 
         this._setSpec(spec), this._updateCurrentTheme(), this._curSize = calculateChartSize(this._spec, {
             container: this._container,
@@ -192,11 +207,10 @@ export class VChart {
         this._event = new Event(this._eventDispatcher, mode), this._compiler.initView(), 
         null === (_d = this.getStage()) || void 0 === _d || _d.setTheme({
             text: {
-                fontFamily: this._currentChartLevelTheme.fontFamily
+                fontFamily: null === (_e = this._currentTheme) || void 0 === _e ? void 0 : _e.fontFamily
             }
-        }), this._initDataSet(this._option.dataSet), this._autoSize = !!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(ChartEvent.initialized, {}), 
-        InstanceManager.registerInstance(this)) : null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!");
+        }), this._initDataSet(this._option.dataSet), this._autoSize = !!isTrueBrowseEnv && (null === (_g = null !== (_f = spec.autoFit) && void 0 !== _f ? _f : this._option.autoFit) || void 0 === _g || _g), 
+        this._bindResizeEvent(), this._bindVGrammarViewEvent(), InstanceManager.registerInstance(this)) : null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!");
     }
     _setSpec(spec) {
         spec && (this._spec = specTransform(isString(spec) ? JSON.parse(spec) : spec));
@@ -204,6 +218,7 @@ export class VChart {
     _initChart(spec) {
         var _a, _b;
         if (!this._compiler) return void (null === (_a = this._option) || void 0 === _a || _a.onError("compiler is not initialized"));
+        VChart.getFunctionList() && VChart.getFunctionList().length && (spec = functionTransform(spec, VChart));
         const chart = Factory.createChart(spec.type, spec, {
             globalInstance: this,
             eventDispatcher: this._eventDispatcher,
@@ -217,20 +232,15 @@ export class VChart {
             performanceHook: this._option.performanceHook,
             viewBox: this._viewBox,
             animation: this._option.animation,
-            getThemeConfig: () => {
+            getTheme: () => {
                 var _a;
-                return {
-                    globalTheme: this._currentThemeName,
-                    optionTheme: this._option.theme,
-                    specTheme: null === (_a = this._spec) || void 0 === _a ? void 0 : _a.theme,
-                    chartLevelTheme: this._currentChartLevelTheme
-                };
+                return null !== (_a = this._currentTheme) && void 0 !== _a ? _a : {};
             },
             layout: this._option.layout,
             onError: this._onError
         });
         chart ? (this._chart = chart, this._chart.setCanvasRect(this._curSize.width, this._curSize.height), 
-        this._chart.created(), this._chart.init({})) : null === (_b = this._option) || void 0 === _b || _b.onError("init chart fail");
+        this._chart.created(), this._chart.init(), this._event.emit(ChartEvent.initialized, {})) : null === (_b = this._option) || void 0 === _b || _b.onError("init chart fail");
     }
     _releaseData() {
         this._dataSet && (this._dataSet.dataViewMap = {}, this._dataSet = null);
@@ -417,7 +427,7 @@ export class VChart {
         return 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 {
+            if (preDV) preDV.setFields(cloneDeep(fields)), preDV.parse(values, cloneDeep(parser)); else {
                 const dataView = dataToDataView(d, this._dataSet, this._spec.data, {
                     onError: null === (_a = this._option) || void 0 === _a ? void 0 : _a.onError
                 });
@@ -432,7 +442,7 @@ export class VChart {
             return 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 {
+                if (preDV) preDV.setFields(cloneDeep(fields)), preDV.parse(values, cloneDeep(parser)); else {
                     const dataView = dataToDataView(d, this._dataSet, this._spec.data, {
                         onError: null === (_a = this._option) || void 0 === _a ? void 0 : _a.onError
                     });
@@ -522,10 +532,9 @@ export class VChart {
         }));
     }
     updateViewBox(viewBox, reRender = !0, reLayout = !0) {
-        var _a;
         return this._chart && this._compiler ? (this._viewBox = viewBox, this._chart.updateViewBox(viewBox, reLayout), 
-        reLayout && (this._compiler.renderSync(), null === (_a = this._chart) || void 0 === _a || _a.onEvaluateEnd()), 
-        this._compiler.updateViewBox(viewBox, reRender), this) : this;
+        reLayout && (this._compiler.renderSync(), this._chart.onEvaluateEnd()), this._compiler.updateViewBox(viewBox, reRender), 
+        this) : this;
     }
     on(eType, query, handler) {
         var _a;
@@ -557,14 +566,14 @@ export class VChart {
     _updateCurrentTheme(nextThemeName) {
         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 = mergeThemeAndGet("colorScheme", this._currentThemeName, optionTheme, specTheme);
-        this._currentChartLevelTheme = {
-            colorScheme: colorScheme,
-            background: mergeThemeAndGet("background", this._currentThemeName, optionTheme, specTheme, colorScheme),
-            fontFamily: mergeThemeAndGet("fontFamily", this._currentThemeName, optionTheme, specTheme, colorScheme)
-        }, setPoptipTheme(preprocessSpecOrTheme("mark-theme", mergeThemeAndGet("component.poptip", this._currentThemeName, optionTheme, specTheme, colorScheme), colorScheme)), 
-        null === (_b = this._compiler) || void 0 === _b || _b.setBackground(this._getBackground());
+        if (nextThemeName && (this._currentThemeName = nextThemeName), isEmpty(optionTheme) && isEmpty(specTheme)) this._currentTheme = getThemeObject(this._currentThemeName, !0); else if (isString(optionTheme) && (!specTheme || isString(specTheme)) || isString(specTheme) && (!optionTheme || isString(optionTheme))) {
+            const finalTheme = mergeTheme({}, getThemeObject(this._currentThemeName, !0), getThemeObject(optionTheme, !0), getThemeObject(specTheme, !0));
+            this._currentTheme = finalTheme;
+        } else {
+            const finalTheme = mergeTheme({}, getThemeObject(this._currentThemeName), getThemeObject(optionTheme), getThemeObject(specTheme));
+            this._currentTheme = preprocessTheme(finalTheme, finalTheme.colorScheme);
+        }
+        setPoptipTheme(get(this._currentTheme, "component.poptip")), null === (_b = this._compiler) || void 0 === _b || _b.setBackground(this._getBackground());
     }
     _shouldChartResize(oldSpec) {
         var _a, _b;
@@ -576,7 +585,7 @@ export class VChart {
         this._autoSize !== lasAutoSize && (resize = !0), resize;
     }
     _getBackground() {
-        return ("string" == typeof this._spec.background ? this._spec.background : null) || this._currentChartLevelTheme.background || this._option.background;
+        return ("string" == typeof this._spec.background ? this._spec.background : null) || this._currentTheme.background || this._option.background;
     }
     getCurrentTheme() {
         return getThemeObject(this._currentThemeName);
@@ -760,7 +769,7 @@ export class VChart {
         let series;
         if (isValid(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : 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();
+            const keys = Object.keys(datum), handledDatum = series.getViewData().latestData.find((viewDatum => keys.every((k => viewDatum[k] == datum[k])))), seriesLayoutStartPoint = series.getRegion().getLayoutStartPoint();
             let point;
             return point = handledDatum ? series.dataToPosition(handledDatum) : series.dataToPosition(datum), 
             convertPoint(point, seriesLayoutStartPoint, isRelativeToCanvas);
@@ -786,9 +795,21 @@ export class VChart {
         const {seriesId: seriesId, seriesIndex: seriesIndex} = dataLinkInfo;
         let series;
         return isValid(seriesId) ? series = this._chart.getSeriesInUserId(seriesId) : isValid(seriesIndex) && (series = null === (_b = this._chart.getSeriesInIndex([ seriesIndex ])) || void 0 === _b ? void 0 : _b[0]), 
-        series ? convertPoint(series.valueToPosition(value[0], value[1]), series.getLayoutStartPoint(), isRelativeToCanvas) : (warn("Please check whether the `seriesId` or `seriesIndex` is set!"), 
+        series ? convertPoint(series.valueToPosition(value[0], value[1]), series.getRegion().getLayoutStartPoint(), isRelativeToCanvas) : (warn("Please check whether the `seriesId` or `seriesIndex` is set!"), 
         null);
     }
+    getFunction(key) {
+        return ExpressionFunction.instance().getFunction(key);
+    }
+    registerFunction(key, fun) {
+        key && fun && ExpressionFunction.instance().registerFunction(key, fun);
+    }
+    unregisterFunction(key) {
+        key && ExpressionFunction.instance().unregisterFunction(key);
+    }
+    getFunctionList() {
+        return ExpressionFunction.instance().getFunctionNameList();
+    }
 }
 
 VChart.InstanceManager = InstanceManager, VChart.ThemeManager = ThemeManager, VChart.globalConfig = {
@@ -798,10 +819,10 @@ VChart.InstanceManager = InstanceManager, VChart.ThemeManager = ThemeManager, VC
 export const registerVChartCore = () => {
     Factory.registerRegion("region", Region), Factory.registerLayout("base", Layout), 
     Factory.registerMark(GroupMark.type, GroupMark), View.useRegisters([ registerFilterTransform, registerMapTransform ]), 
-    registerVGrammarAnimation(), Logger.getInstance(LoggerLevel.Error);
+    registerVGrammarAnimation(), registerTheme(darkTheme.name, darkTheme), Logger.getInstance(LoggerLevel.Error);
 };
 
 Factory.registerRegion("region", Region), Factory.registerLayout("base", Layout), 
 Factory.registerMark(GroupMark.type, GroupMark), View.useRegisters([ registerFilterTransform, registerMapTransform ]), 
-registerVGrammarAnimation(), Logger.getInstance(LoggerLevel.Error);
+registerVGrammarAnimation(), registerTheme(darkTheme.name, darkTheme), Logger.getInstance(LoggerLevel.Error);
 //# sourceMappingURL=vchart.js.map