@visactor/vgrammar-plot 0.7.5-alpha.0 → 0.7.5

package/dist/index.js

@@ -1,3448 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vgrammar-util'), require('@visactor/vutils'), require('@visactor/vgrammar')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@visactor/vgrammar-util', '@visactor/vutils', '@visactor/vgrammar'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VGrammar = global.VGrammar || {}, global.VGrammar.Projection = {}), global.VGrammar.Util, global.VUtils, global.VGrammar));
-})(this, (function (exports, vgrammarUtil, vutils, vgrammar) { 'use strict';
-
-    var ScaleEnum;
-    !function (ScaleEnum) {
-      ScaleEnum.Identity = "identity", ScaleEnum.Linear = "linear", ScaleEnum.Log = "log", ScaleEnum.Pow = "pow", ScaleEnum.Sqrt = "sqrt", ScaleEnum.Symlog = "symlog", ScaleEnum.Time = "time", ScaleEnum.Quantile = "quantile", ScaleEnum.Quantize = "quantize", ScaleEnum.Threshold = "threshold", ScaleEnum.Ordinal = "ordinal", ScaleEnum.Point = "point", ScaleEnum.Band = "band";
-    }(ScaleEnum || (ScaleEnum = {}));
-    function isContinuous(type) {
-      switch (type) {
-        case ScaleEnum.Linear:
-        case ScaleEnum.Log:
-        case ScaleEnum.Pow:
-        case ScaleEnum.Sqrt:
-        case ScaleEnum.Symlog:
-        case ScaleEnum.Time:
-          return !0;
-        default:
-          return !1;
-      }
-    }
-    function isDiscrete(type) {
-      switch (type) {
-        case ScaleEnum.Ordinal:
-        case ScaleEnum.Point:
-        case ScaleEnum.Band:
-          return !0;
-        default:
-          return !1;
-      }
-    }
-
-    let semanticMarkId = -1;
-    class SemanticMark {
-        constructor(type, id, plot) {
-            this.type = type;
-            this.uid = ++semanticMarkId;
-            this._logger = vutils.Logger.getInstance();
-            this.plot = plot;
-            this.spec = { id: id !== null && id !== void 0 ? id : `${this.type}-${this.uid}` };
-        }
-        parseSpec(spec) {
-            if (vutils.isNil(spec.id)) {
-                spec.id = this.spec.id;
-            }
-            this.spec = spec;
-            return this;
-        }
-        coordinate(option) {
-            this._coordinate = option;
-            return this;
-        }
-        data(values, transform, id) {
-            if (vutils.isNil(values)) {
-                return this;
-            }
-            this.spec.data = { values, transform, id };
-            return this;
-        }
-        encode(channel, option) {
-            if (!this.spec.encode) {
-                this.spec.encode = {};
-            }
-            this.spec.encode[channel] = option;
-            return this;
-        }
-        scale(channel, option) {
-            if (!this.spec.scale) {
-                this.spec.scale = {};
-            }
-            this.spec.scale[channel] = option;
-            return this;
-        }
-        style(style) {
-            this.spec.style = style;
-            return this;
-        }
-        transform(option) {
-            this.spec.transform = vutils.array(option);
-            return this;
-        }
-        state(state, option) {
-            if ([
-                vgrammar.BuiltInEncodeNames.enter,
-                vgrammar.BuiltInEncodeNames.update,
-                vgrammar.BuiltInEncodeNames.exit,
-                vgrammar.BuiltInEncodeNames.group
-            ].includes(state)) {
-                this._logger.warn(`[VGrammar]: ${state} is a reserved keyword to specify the encode of different data state, 
-        don't use this keyword`);
-                return;
-            }
-            if (!this.spec.state) {
-                this.spec.state = {};
-            }
-            this.spec.state[state] = option;
-            return this;
-        }
-        animate(state, option) {
-            if (state === 'state') {
-                this._logger.warn(`[VGrammar]: ${state} is a keyword use to specify state animation config, don't use this keyword`);
-                return this;
-            }
-            if (!this.spec.animation) {
-                this.spec.animation = {};
-            }
-            this.spec.animation[state] = option;
-            return this;
-        }
-        axis(channel, option = true, layout) {
-            if (!this.spec.axis) {
-                this.spec.axis = {};
-            }
-            this.spec.axis[channel] = { option, layout };
-            return this;
-        }
-        legend(channel, option = true, layout) {
-            if (!this.spec.legend) {
-                this.spec.legend = {};
-            }
-            this.spec.legend[channel] = { option, layout };
-            return this;
-        }
-        crosshair(channel, option) {
-            if (!this.spec.crosshair) {
-                this.spec.crosshair = {};
-            }
-            this.spec.crosshair[channel] = option;
-            return this;
-        }
-        tooltip(option) {
-            this.spec.tooltip = option;
-            return this;
-        }
-        slider(channel, option, layout) {
-            if (!this.spec.slider) {
-                this.spec.slider = {};
-            }
-            this.spec.slider[channel] = { option, layout };
-            return this;
-        }
-        datazoom(channel, option, layout) {
-            if (!this.spec.datazoom) {
-                this.spec.datazoom = {};
-            }
-            this.spec.datazoom[channel] = { option, layout };
-            return this;
-        }
-        label(channel, option) {
-            if (!this.spec.label) {
-                this.spec.label = {};
-            }
-            this.spec.label[channel] = option;
-            return this;
-        }
-        player(data, option, layout) {
-            this.spec.player = { data, option, layout };
-            return this;
-        }
-        getPalette() {
-            var _a;
-            return (_a = (this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme()).palette) === null || _a === void 0 ? void 0 : _a.default;
-        }
-        setDefaultDataTransform() {
-            return [];
-        }
-        setMultipleData() {
-            return null;
-        }
-        setDefaultMarkTransform() {
-            return [];
-        }
-        convertMarkTransform(userTransform, defaultTransform = []) {
-            if (defaultTransform && defaultTransform.length) {
-                if (userTransform && userTransform.length) {
-                    let transforms = [];
-                    const excludeIndex = [];
-                    for (let i = 0, len = userTransform.length; i < len; i++) {
-                        const customizedSpec = userTransform[i];
-                        const index = defaultTransform.findIndex(entry => entry.type === customizedSpec.type);
-                        if (index >= 0) {
-                            transforms.push(vutils.merge({}, defaultTransform[index], customizedSpec));
-                            excludeIndex.push(index);
-                        }
-                        else {
-                            transforms.push(customizedSpec);
-                        }
-                    }
-                    for (let j = 0, dlen = defaultTransform.length; j < dlen; j++) {
-                        if (!excludeIndex.includes(j)) {
-                            transforms = [defaultTransform[j]].concat(transforms);
-                        }
-                    }
-                    return transforms;
-                }
-                return defaultTransform;
-            }
-            return userTransform;
-        }
-        convertMarkAnimation() {
-            if (!this.spec.animation) {
-                return null;
-            }
-            return this.spec.animation;
-        }
-        convertSimpleMarkEncode(encode) {
-            if (!encode) {
-                return {};
-            }
-            const markEncoder = {};
-            Object.keys(encode).map(channel => {
-                markEncoder[channel] = { field: encode[channel], scale: this.getScaleId(channel), band: 0.5 };
-            });
-            return markEncoder;
-        }
-        getDataIdOfFiltered() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-data-filtered`;
-        }
-        getDataIdOfMain() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-data`;
-        }
-        getDataIdOfPlayer() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-player`;
-        }
-        getDataZoomScaleId(channel) {
-            return {
-                x: `datazoom-scale-${channel}-x`,
-                y: `datazoom-scale-${channel}-y`
-            };
-        }
-        getScaleId(channel) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.spec.scale) === null || _a === void 0 ? void 0 : _a[channel]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `scale-${channel}`;
-        }
-        getMarkId() {
-            return `${this.spec.id}-mark`;
-        }
-        getScaleSpec(scaleId) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.viewSpec) === null || _a === void 0 ? void 0 : _a.scales) === null || _b === void 0 ? void 0 : _b.find) === null || _c === void 0 ? void 0 : _c.call(_b, scale => scale.id === scaleId);
-        }
-        parseScaleOfEncodeX(option) {
-            return {
-                type: 'band',
-                id: this.getScaleId('x'),
-                dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                domain: {
-                    data: this.getDataIdOfFiltered(),
-                    field: option
-                },
-                range: this._coordinate
-                    ? { coordinate: this._coordinate.id, dimension: 'x' }
-                    : (scale, params) => {
-                        return [0, params.viewBox.width()];
-                    }
-            };
-        }
-        parseScaleOfEncodeY(option) {
-            return {
-                type: 'linear',
-                dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                id: this.getScaleId('y'),
-                domain: {
-                    data: this.getDataIdOfFiltered(),
-                    field: option
-                },
-                range: this._coordinate
-                    ? { coordinate: this._coordinate.id, dimension: 'y' }
-                    : (scale, params) => {
-                        return [params.viewBox.height(), 0];
-                    }
-            };
-        }
-        parseScaleOfEncodeColor(option) {
-            return {
-                type: 'ordinal',
-                id: this.getScaleId('color'),
-                domain: {
-                    data: this.getDataIdOfMain(),
-                    field: option
-                },
-                range: this.getPalette()
-            };
-        }
-        parseScaleOfEncodeStroke(option) {
-            return {
-                type: 'ordinal',
-                id: this.getScaleId('stroke'),
-                domain: {
-                    data: this.getDataIdOfMain(),
-                    field: option
-                },
-                range: this.getPalette()
-            };
-        }
-        parseScaleOfEncodeGroup(option) {
-            return {
-                type: 'ordinal',
-                id: this.getScaleId('group'),
-                domain: {
-                    data: this.getDataIdOfMain(),
-                    field: option
-                },
-                range: this.getPalette()
-            };
-        }
-        parseScaleOfCommonEncode(channel, option) {
-            if (channel === 'x') {
-                return this.parseScaleOfEncodeX(option);
-            }
-            if (channel === 'y') {
-                return this.parseScaleOfEncodeY(option);
-            }
-            if (channel === 'color') {
-                return this.parseScaleOfEncodeColor(option);
-            }
-            if (channel === 'group') {
-                return this.parseScaleOfEncodeGroup(option);
-            }
-            if (channel === 'stroke') {
-                return this.parseScaleOfEncodeStroke(option);
-            }
-            return null;
-        }
-        setDefaultAxis() {
-            return {};
-        }
-        parseAxisSpec() {
-            const axis = this.spec.axis;
-            const res = [];
-            if (axis) {
-                Object.keys(axis).forEach(channel => {
-                    const { option, layout } = this.parseOption(axis[channel]);
-                    if (option) {
-                        const axisMarkSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.axis,
-                            scale: this.getScaleId(channel),
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                            tickCount: option.tickCount,
-                            encode: {
-                                update: (datum, elment, params) => {
-                                    const positionAttrs = this._coordinate
-                                        ? {}
-                                        : channel === 'x'
-                                            ? {
-                                                x: 0,
-                                                y: params.viewBox.height(),
-                                                start: { x: 0, y: 0 },
-                                                end: { x: params.viewBox.width(), y: 0 }
-                                            }
-                                            : {
-                                                x: 0,
-                                                y: params.viewBox.height(),
-                                                start: { x: 0, y: 0 },
-                                                verticalFactor: -1,
-                                                end: { x: 0, y: -params.viewBox.height() }
-                                            };
-                                    return vutils.isPlainObject(option) ? vutils.merge(positionAttrs, option) : positionAttrs;
-                                }
-                            }
-                        };
-                        axisMarkSpec.layout = layout !== null && layout !== void 0 ? layout : {
-                            position: this._coordinate
-                                ? 'auto'
-                                : vutils.isPlainObject(layout) && !vutils.isNil(layout.orient)
-                                    ? layout.orient
-                                    : channel === 'x'
-                                        ? 'bottom'
-                                        : 'left'
-                        };
-                        res.push(axisMarkSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        parseOption(spec) {
-            let option;
-            let layout;
-            if (vutils.isPlainObject(spec)) {
-                if (vutils.isNil(spec.option)) {
-                    option = spec;
-                }
-                else {
-                    option = spec.option;
-                    layout = spec.layout;
-                }
-            }
-            else {
-                option = spec;
-            }
-            return { option, layout };
-        }
-        setDefaultLegend() {
-            return {};
-        }
-        parseLegendSpec() {
-            const legend = this.spec.legend;
-            const res = [];
-            if (legend) {
-                Object.keys(legend).forEach(channel => {
-                    var _a;
-                    const { option, layout } = this.parseOption(legend[channel]);
-                    if (option) {
-                        const markLayout = layout !== null && layout !== void 0 ? layout : (vutils.isPlainObject(option) && !vutils.isNil(option.layout)
-                            ? option.layout === 'horizontal'
-                                ? { position: 'top', align: 'center' }
-                                : option.layout === 'vertical'
-                                    ? { position: 'right', align: 'middle' }
-                                    : { position: 'top', align: 'center' }
-                            : { position: 'top', align: 'center' });
-                        const markSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.legend,
-                            scale: this.getScaleId(channel),
-                            shapeScale: this.getScaleId('shape'),
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                            target: {
-                                data: this.getDataIdOfFiltered(),
-                                filter: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a[channel]
-                            },
-                            encode: {
-                                update: (datum, element, params) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-                                    const calculatedAttrs = markLayout.position === 'left'
-                                        ? {
-                                            layout: 'vertical',
-                                            x: (_c = (_b = (_a = element.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
-                                            y: (_f = (_e = (_d = element.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0
-                                        }
-                                        : markLayout.position === 'right'
-                                            ? {
-                                                layout: 'vertical',
-                                                x: (_j = (_h = (_g = element.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
-                                                y: (_m = (_l = (_k = element.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0
-                                            }
-                                            : markLayout.position === 'bottom'
-                                                ? {
-                                                    layout: 'horizontal',
-                                                    x: (_q = (_p = (_o = element.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
-                                                    y: (_t = (_s = (_r = element.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height()
-                                                }
-                                                : {
-                                                    layout: 'horizontal',
-                                                    x: (_w = (_v = (_u = element.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
-                                                    y: (_z = (_y = (_x = element.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0
-                                                };
-                                    const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
-                                    return attrs;
-                                }
-                            }
-                        };
-                        markSpec.layout = markLayout;
-                        res.push(markSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        setDefaultCrosshair() {
-            return {};
-        }
-        getVisualChannel(channel) {
-            var _a, _b;
-            if (((_a = this._coordinate) === null || _a === void 0 ? void 0 : _a.type) === 'polar') {
-                return this._coordinate.transpose ? (channel === 'x' ? 'radius' : 'angle') : channel === 'x' ? 'angle' : 'radius';
-            }
-            return (((_b = this._coordinate) === null || _b === void 0 ? void 0 : _b.transpose) ? (channel === 'x' ? 'y' : 'x') : channel);
-        }
-        parseCrosshairSpec() {
-            const defaultCrosshair = this.setDefaultCrosshair();
-            const defaultKeys = Object.keys(defaultCrosshair);
-            const crosshairKeys = this.spec.crosshair
-                ? Object.keys(this.spec.crosshair).reduce((res, key) => {
-                    if (!res.includes(key)) {
-                        res.push(key);
-                    }
-                    return res;
-                }, defaultKeys)
-                : defaultKeys;
-            const res = [];
-            if (crosshairKeys.length) {
-                crosshairKeys.forEach(channel => {
-                    var _a, _b;
-                    const userOption = (_a = this.spec.crosshair) === null || _a === void 0 ? void 0 : _a[channel];
-                    const option = userOption !== null && userOption !== void 0 ? userOption : defaultCrosshair[channel];
-                    if (option) {
-                        const scaleId = this.getScaleId(channel);
-                        const scaleSpec = this.getScaleSpec(scaleId);
-                        const markSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.crosshair,
-                            scale: this.getScaleId(channel),
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                            crosshairShape: vutils.isBoolean(option)
-                                ? (scaleSpec === null || scaleSpec === void 0 ? void 0 : scaleSpec.type) === 'band'
-                                    ? 'rect'
-                                    : 'line'
-                                : (_b = option.crosshairShape) !== null && _b !== void 0 ? _b : ((scaleSpec === null || scaleSpec === void 0 ? void 0 : scaleSpec.type) === 'band' ? 'rect' : 'line'),
-                            crosshairType: this.getVisualChannel(channel)
-                        };
-                        if (vutils.isPlainObject(userOption)) {
-                            markSpec.encode = {
-                                update: userOption
-                            };
-                            if (userOption.type === 'polygon') {
-                                markSpec.crosshairType = 'radius-polygon';
-                                const anotherDimScaleId = this.getScaleId(channel === 'x' ? 'y' : 'x');
-                                markSpec.dependency.push(anotherDimScaleId);
-                                markSpec.encode.update.sides = (datum, el, params) => {
-                                    const scale = params[anotherDimScaleId];
-                                    return scale && isDiscrete(scale.type) ? scale.domain().length : undefined;
-                                };
-                                markSpec.encode.update.startAngle = (datum, el, params) => {
-                                    var _a, _b;
-                                    const scale = params[anotherDimScaleId];
-                                    return scale && isDiscrete(scale.type) ? scale.range()[0] + ((_b = (_a = scale === null || scale === void 0 ? void 0 : scale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(scale)) !== null && _b !== void 0 ? _b : 0) / 2 : undefined;
-                                };
-                                markSpec.encode.update.endAngle = (datum, el, params) => {
-                                    var _a, _b;
-                                    const scale = params[anotherDimScaleId];
-                                    return scale && isDiscrete(scale.type) ? scale.range()[1] + ((_b = (_a = scale === null || scale === void 0 ? void 0 : scale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(scale)) !== null && _b !== void 0 ? _b : 0) / 2 : undefined;
-                                };
-                            }
-                        }
-                        res.push(markSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        setDefaultTooltip() {
-            return null;
-        }
-        parseTooltipSpec() {
-            var _a, _b;
-            const defaultTooltipSpec = this.setDefaultTooltip();
-            const userTooltipSpec = this.spec.tooltip;
-            if (userTooltipSpec !== false && userTooltipSpec !== null && defaultTooltipSpec !== null) {
-                const res = [];
-                const tooltipSpec = vutils.merge({}, defaultTooltipSpec, userTooltipSpec === true ? {} : userTooltipSpec);
-                const colorChannel = vutils.isNil(this.spec.encode.color)
-                    ? vutils.isNil(this.spec.encode.group)
-                        ? 'stroke'
-                        : 'group'
-                    : 'color';
-                const colorEncode = this.spec.encode[colorChannel];
-                const dependency = colorEncode ? [this.getScaleId(colorChannel)] : [];
-                const colorAccessor = colorEncode ? vgrammarUtil.field(colorEncode) : null;
-                const title = {
-                    visible: !!tooltipSpec.title || !!tooltipSpec.staticTitle,
-                    key: 'title',
-                    value: !vutils.isNil(tooltipSpec.staticTitle)
-                        ? tooltipSpec.staticTitle
-                        : {
-                            field: (datum, el, params) => {
-                                return tooltipSpec.title
-                                    ? vgrammarUtil.field(tooltipSpec.title)(vutils.isArray(datum) ? datum[0] : datum)
-                                    : undefined;
-                            }
-                        }
-                };
-                if (this.spec.encode.shape) {
-                    dependency.push(this.getScaleId('shape'));
-                }
-                const content = vutils.isArray(tooltipSpec.content) && tooltipSpec.content.length
-                    ? tooltipSpec.content.map((entry, index) => {
-                        return {
-                            key: entry.key
-                                ? { field: entry.key }
-                                : !vutils.isNil(tooltipSpec.staticContentKey)
-                                    ? vutils.isArray(tooltipSpec.staticContentKey)
-                                        ? tooltipSpec.staticContentKey[index]
-                                        : tooltipSpec.staticContentKey
-                                    : (datum, el, params) => {
-                                        return colorAccessor ? colorAccessor(datum) : undefined;
-                                    },
-                            value: { field: entry.value },
-                            symbol: (datum, el, params) => {
-                                var _a;
-                                const scale = params[this.getScaleId(colorChannel)];
-                                const shapeScale = params[this.getScaleId('shape')];
-                                let symbolType = 'circle';
-                                if (shapeScale && entry.symbol) {
-                                    symbolType = shapeScale.scale(vgrammarUtil.field(entry.symbol)(datum));
-                                }
-                                else if (entry.symbol) {
-                                    symbolType = vgrammarUtil.field(entry.symbol)(datum);
-                                }
-                                return {
-                                    fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : (_a = this.getPalette()) === null || _a === void 0 ? void 0 : _a[0],
-                                    symbolType
-                                };
-                            }
-                        };
-                    })
-                    : null;
-                if (tooltipSpec.disableGraphicTooltip !== true) {
-                    res.push({
-                        type: 'component',
-                        componentType: vgrammar.ComponentEnum.tooltip,
-                        target: this.getMarkId(),
-                        dependency,
-                        title,
-                        content,
-                        zIndex: 1000
-                    });
-                }
-                if (tooltipSpec.disableDimensionTooltip !== true) {
-                    const channel = (_a = tooltipSpec.dimensionTooltipChannel) !== null && _a !== void 0 ? _a : 'x';
-                    res.push({
-                        type: 'component',
-                        componentType: vgrammar.ComponentEnum.dimensionTooltip,
-                        tooltipType: this.getVisualChannel(channel),
-                        scale: this.getScaleId(channel),
-                        dependency,
-                        target: { data: this.getDataIdOfFiltered(), filter: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b[channel] },
-                        title,
-                        content,
-                        avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [this.getMarkId()],
-                        zIndex: 1000
-                    });
-                }
-                return res;
-            }
-            return [];
-        }
-        setDefaultSlider() {
-            return {};
-        }
-        parseSliderSpec() {
-            const slider = this.spec.slider;
-            const res = [];
-            if (slider) {
-                Object.keys(slider).forEach(channel => {
-                    var _a, _b;
-                    const { option, layout } = this.parseOption(slider[channel]);
-                    if (option) {
-                        const scaleId = this.getScaleId(channel);
-                        const scaleSpec = this.getScaleSpec(scaleId);
-                        const dataId = this.getDataIdOfMain();
-                        if (!scaleSpec || !isContinuous(scaleSpec.type)) {
-                            this._logger.warn(`[VGrammar]: Don't use slider in a channel which has scale type = ${scaleSpec === null || scaleSpec === void 0 ? void 0 : scaleSpec.type}`);
-                            return;
-                        }
-                        const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
-                        const getter = vgrammarUtil.field((_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a[channel]);
-                        const markLayout = layout !== null && layout !== void 0 ? layout : (vutils.isPlainObject(option) && !vutils.isNil(option.layout)
-                            ? option.layout === 'horizontal'
-                                ? { position: 'top', align: 'center' }
-                                : option.layout === 'vertical'
-                                    ? { position: 'right', align: 'middle' }
-                                    : { position: 'top', align: 'center' }
-                            : { position: 'top', align: 'center' });
-                        const markSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.slider,
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX, dataId],
-                            min: (datum, elment, params) => {
-                                const data = params[dataId];
-                                return Math.min.apply(null, data.map(getter));
-                            },
-                            max: (datum, elment, params) => {
-                                const data = params[dataId];
-                                return Math.max.apply(null, data.map(getter));
-                            },
-                            target: {
-                                data: this.getDataIdOfFiltered(),
-                                filter: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b[channel]
-                            },
-                            encode: {
-                                update: (datum, elment, params) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-                                    const calculatedAttrs = markLayout.position === 'left'
-                                        ? {
-                                            layout: 'vertical',
-                                            x: (_c = (_b = (_a = elment.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
-                                            y: (_f = (_e = (_d = elment.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0,
-                                            railWidth: theme.components.slider.railHeight,
-                                            railHeight: params.viewBox.height()
-                                        }
-                                        : markLayout.position === 'right'
-                                            ? {
-                                                layout: 'vertical',
-                                                x: (_j = (_h = (_g = elment.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
-                                                y: (_m = (_l = (_k = elment.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0,
-                                                railWidth: theme.components.slider.railHeight,
-                                                railHeight: params.viewBox.height()
-                                            }
-                                            : markLayout.position === 'bottom'
-                                                ? {
-                                                    layout: 'horizontal',
-                                                    x: (_q = (_p = (_o = elment.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
-                                                    y: (_t = (_s = (_r = elment.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height(),
-                                                    railHeight: theme.components.slider.railHeight,
-                                                    railWidth: params.viewBox.width()
-                                                }
-                                                : {
-                                                    layout: 'horizontal',
-                                                    x: (_w = (_v = (_u = elment.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
-                                                    y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
-                                                    railHeight: theme.components.slider.railHeight,
-                                                    railWidth: params.viewBox.width()
-                                                };
-                                    const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
-                                    return attrs;
-                                }
-                            }
-                        };
-                        markSpec.layout = markLayout;
-                        res.push(markSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        setDefaultDataZoom() {
-            return {};
-        }
-        getVisiualPositionByDimension(channel) {
-            return channel === 'y' ? 'left' : 'bottom';
-        }
-        parseDataZoomSpec() {
-            const datazoom = this.spec.datazoom;
-            const res = [];
-            if (datazoom) {
-                Object.keys(datazoom).forEach(channel => {
-                    var _a, _b, _c, _d, _e;
-                    const { option, layout } = this.parseOption(datazoom[channel]);
-                    if (option) {
-                        const dataId = this.getDataIdOfMain();
-                        const markLayout = layout !== null && layout !== void 0 ? layout : (vutils.isPlainObject(option) && !vutils.isNil(option.orient)
-                            ? { position: option.orient }
-                            : { position: this.getVisiualPositionByDimension(channel) });
-                        const preview = {
-                            data: dataId
-                        };
-                        const { x, y } = this.getDataZoomScaleId(channel);
-                        if (channel === 'x') {
-                            preview.x = { scale: x, field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a[channel] };
-                            preview.y = { scale: y, field: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.y };
-                        }
-                        else {
-                            preview[markLayout.position === 'top' || markLayout.position === 'bottom' ? 'x' : 'y'] = {
-                                scale: x,
-                                field: (_d = (_c = this.spec.encode) === null || _c === void 0 ? void 0 : _c[channel]) !== null && _d !== void 0 ? _d : channel
-                            };
-                        }
-                        const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
-                        const markSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.datazoom,
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX, dataId],
-                            target: {
-                                data: this.getDataIdOfFiltered(),
-                                filter: (_e = this.spec.encode) === null || _e === void 0 ? void 0 : _e[channel]
-                            },
-                            preview,
-                            encode: {
-                                update: (datum, elment, params) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-                                    const calculatedAttrs = markLayout.position === 'left'
-                                        ? {
-                                            orient: markLayout.position,
-                                            x: (_c = (_b = (_a = elment.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
-                                            y: (_f = (_e = (_d = elment.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0,
-                                            size: { height: params.viewBox.height(), width: theme.components.datazoom.size.height }
-                                        }
-                                        : markLayout.position === 'right'
-                                            ? {
-                                                orient: markLayout.position,
-                                                x: (_j = (_h = (_g = elment.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
-                                                y: (_m = (_l = (_k = elment.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0,
-                                                size: { height: params.viewBox.height(), width: theme.components.datazoom.size.height }
-                                            }
-                                            : markLayout.position === 'bottom'
-                                                ? {
-                                                    orient: markLayout.position,
-                                                    x: (_q = (_p = (_o = elment.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
-                                                    y: (_t = (_s = (_r = elment.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height(),
-                                                    size: { width: params.viewBox.width(), height: theme.components.datazoom.size.height }
-                                                }
-                                                : {
-                                                    orient: markLayout.position,
-                                                    x: (_w = (_v = (_u = elment.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
-                                                    y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
-                                                    size: { width: params.viewBox.width(), height: theme.components.datazoom.size.height }
-                                                };
-                                    const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
-                                    return attrs;
-                                }
-                            }
-                        };
-                        markSpec.layout = markLayout;
-                        res.push(markSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        setDefaultLabel() {
-            return {};
-        }
-        getLabelPosition() {
-            var _a, _b;
-            if (((_a = this._coordinate) === null || _a === void 0 ? void 0 : _a.type) === 'polar') {
-                return this._coordinate.transpose ? 'endAngle' : 'outer';
-            }
-            return ((_b = this._coordinate) === null || _b === void 0 ? void 0 : _b.transpose) ? 'right' : 'top';
-        }
-        setLabelTextGetter(channel, option) {
-            return { field: channel };
-        }
-        parseLabelSpec() {
-            const label = this.spec.label;
-            const res = [];
-            if (label) {
-                Object.keys(label).forEach(channel => {
-                    const option = label[channel];
-                    if (option) {
-                        const markSpec = {
-                            type: 'component',
-                            componentType: vgrammar.ComponentEnum.label,
-                            target: this.getMarkId(),
-                            layout: {
-                                position: 'content',
-                                skipBeforeLayouted: true
-                            },
-                            labelStyle: vutils.isPlainObject(option)
-                                ? vutils.merge({
-                                    position: this.getLabelPosition()
-                                }, option)
-                                : { position: this.getLabelPosition() },
-                            encode: {
-                                update: {
-                                    text: this.spec.encode[channel]
-                                        ? { field: this.spec.encode[channel] }
-                                        : this.setLabelTextGetter(channel, option)
-                                }
-                            }
-                        };
-                        res.push(markSpec);
-                    }
-                });
-            }
-            return res;
-        }
-        setDefaultPlayer() {
-            return {};
-        }
-        parsePlayerSpec() {
-            var _a;
-            const player = this.spec.player;
-            const res = [];
-            if (player) {
-                const option = player === null || player === void 0 ? void 0 : player.option;
-                const layout = player === null || player === void 0 ? void 0 : player.layout;
-                if (option) {
-                    const markLayout = layout !== null && layout !== void 0 ? layout : (vutils.isPlainObject(option) && !vutils.isNil(option.orient)
-                        ? { position: option.orient }
-                        : { position: 'bottom' });
-                    const markSpec = {
-                        type: 'component',
-                        componentType: vgrammar.ComponentEnum.player,
-                        dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                        target: {
-                            data: this.getDataIdOfMain(),
-                            source: this.getDataIdOfPlayer()
-                        },
-                        playerType: vutils.isPlainObject(option) ? (_a = option.type) !== null && _a !== void 0 ? _a : 'auto' : 'auto',
-                        encode: {
-                            update: (datum, elment, params) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-                                const calculatedAttrs = markLayout.position === 'left'
-                                    ? {
-                                        x: (_c = (_b = (_a = elment.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
-                                        y: (_f = (_e = (_d = elment.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0,
-                                        size: { height: params.viewBox.height(), width: 20 }
-                                    }
-                                    : markLayout.position === 'right'
-                                        ? {
-                                            x: (_j = (_h = (_g = elment.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
-                                            y: (_m = (_l = (_k = elment.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0,
-                                            size: { height: params.viewBox.height(), width: 20 }
-                                        }
-                                        : markLayout.position === 'bottom'
-                                            ? {
-                                                x: (_q = (_p = (_o = elment.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
-                                                y: (_t = (_s = (_r = elment.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height(),
-                                                size: { width: params.viewBox.width(), height: 20 }
-                                            }
-                                            : {
-                                                x: (_w = (_v = (_u = elment.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
-                                                y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
-                                                size: { width: params.viewBox.width(), height: 20 }
-                                            };
-                                const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
-                                return attrs;
-                            }
-                        }
-                    };
-                    markSpec.layout = markLayout;
-                    res.push(markSpec);
-                }
-            }
-            return res;
-        }
-        parseDataSpec() {
-            var _a;
-            const { data, player } = this.spec;
-            const res = [];
-            if (player === null || player === void 0 ? void 0 : player.data) {
-                res.push({
-                    id: this.getDataIdOfPlayer(),
-                    values: player.data
-                });
-                res.push({
-                    id: this.getDataIdOfMain(),
-                    values: (_a = player.data) === null || _a === void 0 ? void 0 : _a[0]
-                });
-                res.push({
-                    id: this.getDataIdOfFiltered(),
-                    source: this.getDataIdOfMain()
-                });
-            }
-            else if (data) {
-                const dataId = this.getDataIdOfMain();
-                const userTransforms = data.transform;
-                const transform = this.convertMarkTransform(userTransforms, this.setDefaultDataTransform());
-                res.push({
-                    id: dataId,
-                    values: data.values,
-                    transform
-                });
-                res.push({
-                    id: this.getDataIdOfFiltered(),
-                    source: dataId
-                });
-            }
-            const multiDatas = this.setMultipleData();
-            if (multiDatas) {
-                multiDatas.forEach(entry => {
-                    if (entry.id) {
-                        if (entry.id === this.getDataIdOfFiltered() && res.length) {
-                            res[res.length - 1].transform = entry.transform;
-                        }
-                        else {
-                            res.push(entry);
-                        }
-                    }
-                });
-            }
-            return res;
-        }
-        parseScaleSpec() {
-            const { encode, scale, datazoom } = this.spec;
-            const scales = {};
-            if (encode) {
-                Object.keys(encode).forEach(k => {
-                    var _a;
-                    const encodeOption = encode[k];
-                    const scaleId = this.getScaleId(k);
-                    const userScale = (_a = this.spec.scale) === null || _a === void 0 ? void 0 : _a[k];
-                    if (userScale) {
-                        scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption), userScale, {
-                            userScale
-                        });
-                    }
-                    else {
-                        scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption));
-                    }
-                });
-            }
-            if (scale) {
-                Object.keys(scale).forEach(k => {
-                    const scaleId = this.getScaleId(k);
-                    if (!scales[scaleId]) {
-                        scales[scaleId] = scale[k];
-                        scales[scaleId].userScale = scale[k];
-                    }
-                });
-            }
-            if (datazoom) {
-                Object.keys(datazoom).forEach(k => {
-                    var _a, _b, _c, _d;
-                    const scaleId = this.getScaleId(k);
-                    const { x: xScaleId, y: yScaleId } = this.getDataZoomScaleId(k);
-                    if (k === 'x' && encode[k]) {
-                        scales[xScaleId] = {
-                            type: scales[scaleId].type,
-                            id: xScaleId,
-                            domain: {
-                                data: this.getDataIdOfMain(),
-                                field: encode[k]
-                            },
-                            dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                            range: (scale, params) => {
-                                return [0, params.viewBox.width()];
-                            }
-                        };
-                        if (encode.y) {
-                            const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
-                            scales[yScaleId] = {
-                                type: (_b = (_a = scales[this.getScaleId('y')]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'linear',
-                                id: yScaleId,
-                                domain: {
-                                    data: this.getDataIdOfMain(),
-                                    field: encode === null || encode === void 0 ? void 0 : encode.y
-                                },
-                                range: (scale, params) => {
-                                    var _a, _b;
-                                    const option = this.parseOption(datazoom[k]).option;
-                                    return [
-                                        0,
-                                        vutils.isPlainObject(option)
-                                            ? (_b = (_a = option.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : theme.components.datazoom.size.height
-                                            : theme.components.datazoom.size.height
-                                    ];
-                                }
-                            };
-                        }
-                    }
-                    else {
-                        scales[xScaleId] = {
-                            type: (_c = scales[scaleId].type) !== null && _c !== void 0 ? _c : 'band',
-                            id: xScaleId,
-                            domain: {
-                                data: this.getDataIdOfMain(),
-                                field: (_d = encode === null || encode === void 0 ? void 0 : encode[k]) !== null && _d !== void 0 ? _d : k
-                            }
-                        };
-                    }
-                });
-            }
-            return Array.from(Object.values(scales));
-        }
-        parseCoordinateSpec() {
-            var _a;
-            if (!this._coordinate) {
-                return [];
-            }
-            const coordinate = {
-                type: (_a = this._coordinate.type) !== null && _a !== void 0 ? _a : 'cartesian',
-                transpose: this._coordinate.transpose,
-                id: this._coordinate.id,
-                dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                start: [0, 0],
-                end: (coord, params) => {
-                    return [params.viewBox.width(), params.viewBox.height()];
-                }
-            };
-            if (this._coordinate.type === 'polar' && this._coordinate.origin) {
-                coordinate.origin = (coord, params) => {
-                    return [
-                        vgrammarUtil.toPercent(this._coordinate.origin[0], params.viewBox.width()),
-                        vgrammarUtil.toPercent(this._coordinate.origin[1], params.viewBox.height())
-                    ];
-                };
-            }
-            return [coordinate];
-        }
-        setMainMarkEnterEncode() {
-            return this.spec.style;
-        }
-        setMainMarkSpec() {
-            return {};
-        }
-        setMultiMarksSpec() {
-            return null;
-        }
-        toViewSpec() {
-            var _a, _b;
-            this.viewSpec = {};
-            const filteredDataId = this.getDataIdOfFiltered();
-            this.viewSpec.data = this.parseDataSpec();
-            this.viewSpec.scales = this.parseScaleSpec();
-            this.viewSpec.coordinates = this.parseCoordinateSpec();
-            let marks = [];
-            marks = marks.concat(this.parseLegendSpec());
-            marks = marks.concat(this.parseAxisSpec());
-            marks = marks.concat(this.parseCrosshairSpec());
-            marks = marks.concat(this.parseSliderSpec());
-            marks = marks.concat(this.parseDataZoomSpec());
-            marks = marks.concat(this.parsePlayerSpec());
-            marks.push(Object.assign({
-                id: this.getMarkId(),
-                type: this.setMarkType(),
-                coordinate: (_a = this._coordinate) === null || _a === void 0 ? void 0 : _a.id,
-                from: {
-                    data: filteredDataId
-                },
-                groupBy: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.group,
-                layout: {
-                    position: 'content',
-                    skipBeforeLayouted: true
-                },
-                dependency: this.viewSpec.scales.map(scale => scale.id).concat(vgrammar.SIGNAL_VIEW_BOX),
-                transform: this.convertMarkTransform(this.spec.transform, this.setDefaultMarkTransform()),
-                animation: this.convertMarkAnimation(),
-                encode: Object.assign({}, this.spec.state, {
-                    enter: this.setMainMarkEnterEncode(),
-                    update: this.convertMarkEncode(this.spec.encode)
-                })
-            }, this.setMainMarkSpec()));
-            const otherMarks = this.setMultiMarksSpec();
-            if (otherMarks) {
-                marks = marks.concat(otherMarks);
-            }
-            marks = marks.concat(this.parseLabelSpec());
-            marks = marks.concat(this.parseTooltipSpec());
-            this.viewSpec.marks = marks;
-            return this.viewSpec;
-        }
-        clear() {
-            this.spec = { id: this.spec.id };
-        }
-    }
-
-    var PlotMakType;
-    (function (PlotMakType) {
-        PlotMakType["area"] = "area";
-        PlotMakType["cell"] = "cell";
-        PlotMakType["image"] = "image";
-        PlotMakType["interval"] = "interval";
-        PlotMakType["line"] = "line";
-        PlotMakType["path"] = "path";
-        PlotMakType["polygon"] = "polygon";
-        PlotMakType["rectX"] = "rectX";
-        PlotMakType["rectY"] = "rectY";
-        PlotMakType["rect"] = "rect";
-        PlotMakType["ruleX"] = "ruleX";
-        PlotMakType["ruleY"] = "ruleY";
-        PlotMakType["rule"] = "rule";
-        PlotMakType["symbol"] = "symbol";
-        PlotMakType["text"] = "text";
-        PlotMakType["tree"] = "tree";
-        PlotMakType["circlePacking"] = "circlePacking";
-        PlotMakType["sunburst"] = "sunburst";
-        PlotMakType["treemap"] = "treemap";
-        PlotMakType["sankey"] = "sankey";
-        PlotMakType["wordcloud"] = "wordcloud";
-        PlotMakType["wordcloudShape"] = "wordcloudShape";
-    })(PlotMakType || (PlotMakType = {}));
-
-    class Interval extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.interval, id);
-        }
-        setMarkType() {
-            var _a;
-            return ((_a = this._coordinate) === null || _a === void 0 ? void 0 : _a.type) === 'polar' ? vgrammar.GrammarMarkType.arc : vgrammar.GrammarMarkType.rect;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultMarkTransform() {
-            var _a, _b, _c, _d;
-            return [
-                {
-                    type: 'dodge',
-                    minWidth: (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.minWidth,
-                    maxWidth: (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.maxWidth,
-                    innerGap: (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.innerGap,
-                    categoryGap: (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.categoryGap
-                }
-            ];
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'rect' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a;
-            const encodeY = (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.y;
-            return {
-                content: vutils.isArray(encodeY)
-                    ? encodeY.map(entry => {
-                        return {
-                            value: entry
-                        };
-                    })
-                    : [
-                        {
-                            value: encodeY
-                        }
-                    ]
-            };
-        }
-        setMainMarkSpec() {
-            var _a;
-            return ((_a = this._coordinate) === null || _a === void 0 ? void 0 : _a.type) === 'polar'
-                ? {
-                    attributeTransforms: [
-                        {
-                            channels: ['x', 'y', 'x1', 'y1', 'cx', 'cy'],
-                            transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-                                graphicAttributes.x = storedAttrs.cx;
-                                graphicAttributes.y = storedAttrs.cy;
-                                if (this._coordinate.transpose) {
-                                    graphicAttributes.startAngle = storedAttrs.y;
-                                    graphicAttributes.endAngle = storedAttrs.y1;
-                                    graphicAttributes.innerRadius = storedAttrs.x;
-                                    graphicAttributes.outerRadius = storedAttrs.x1;
-                                }
-                                else {
-                                    graphicAttributes.startAngle = storedAttrs.x;
-                                    graphicAttributes.endAngle = storedAttrs.x1;
-                                    graphicAttributes.innerRadius = storedAttrs.y;
-                                    graphicAttributes.outerRadius = storedAttrs.y1;
-                                }
-                            },
-                            storedAttrs: 'sizeAttrs'
-                        }
-                    ]
-                }
-                : {};
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleXId = this.getScaleId('x');
-            const scaleYId = this.getScaleId('y');
-            const xAccessor = vgrammarUtil.field(markEncoder.x.field);
-            const res = {
-                x: (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    const bandWidth = scale.bandwidth();
-                    return scale.scale(xAccessor(datum)) + bandWidth / 4;
-                },
-                x1: (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    const bandWidth = scale.bandwidth();
-                    return scale.scale(xAccessor(datum)) + (3 * bandWidth) / 4;
-                }
-            };
-            if (vutils.isArray((_a = markEncoder.y) === null || _a === void 0 ? void 0 : _a.field)) {
-                res.y = { field: markEncoder.y.field[0], scale: markEncoder.y.scale };
-                res.y1 = { field: markEncoder.y.field[1], scale: markEncoder.y.scale };
-            }
-            else {
-                const yAccessor = vgrammarUtil.field(markEncoder.y.field);
-                res.y = (datum, el, params) => {
-                    const yVals = yAccessor(datum);
-                    const scale = params[scaleYId];
-                    return vutils.isArray(yVals) ? scale.scale(yVals[0]) : scale.scale(yVals);
-                };
-                res.y1 = (datum, el, params) => {
-                    const scale = params[scaleYId];
-                    const yVals = yAccessor(datum);
-                    if (vutils.isArray(yVals) && yVals.length > 1) {
-                        return scale.scale(yVals[1]);
-                    }
-                    const domain = scale.domain();
-                    const min = Math.min.apply(null, domain);
-                    const max = Math.max.apply(null, domain);
-                    const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                    return scale.scale(baseValue);
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
-            }
-            else {
-                res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
-            }
-            if (((_f = this._coordinate) === null || _f === void 0 ? void 0 : _f.type) === 'polar') {
-                res.cx = (datum, el, params) => {
-                    const coord = params[this._coordinate.id];
-                    const origin = coord.origin();
-                    return origin.x;
-                };
-                res.cy = (datum, el, params) => {
-                    const coord = params[this._coordinate.id];
-                    const origin = coord.origin();
-                    return origin.y;
-                };
-            }
-            return res;
-        }
-    }
-    Interval.type = PlotMakType.interval;
-
-    class Line extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.line, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.line;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'line' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a, _b;
-            return {
-                disableGraphicTooltip: true,
-                title: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x,
-                content: [
-                    {
-                        value: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.y
-                    }
-                ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                y: markEncoder.y,
-                x: markEncoder.x
-            };
-            if (markEncoder.color || markEncoder.group) {
-                res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
-            }
-            else {
-                res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-    }
-    Line.type = PlotMakType.line;
-
-    class Cell extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.cell, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.cell;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'line' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a, _b;
-            return {
-                title: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x,
-                content: [
-                    {
-                        value: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.y
-                    }
-                ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                y: markEncoder.y,
-                x: markEncoder.x
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
-            }
-            else {
-                res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-    }
-    Cell.type = PlotMakType.cell;
-
-    class RuleX extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.ruleX, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rule;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: markEncoder.x,
-                x1: markEncoder.x,
-                y: (datum, el, params) => {
-                    return 0;
-                },
-                y1: (datum, el, params) => {
-                    return params.viewBox.height();
-                }
-            };
-            if (markEncoder.color || markEncoder.group) {
-                res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
-            }
-            else {
-                res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-    }
-    RuleX.type = PlotMakType.ruleX;
-
-    class RuleY extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.ruleY, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rule;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                y: markEncoder.y,
-                y1: markEncoder.y,
-                x: vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)
-                    ? { field: markEncoder.x.field[0], scale: markEncoder.x.scale }
-                    : (datum, el, params) => {
-                        return 0;
-                    },
-                x1: vutils.isArray((_b = markEncoder.x) === null || _b === void 0 ? void 0 : _b.field)
-                    ? { field: markEncoder.x.field[1], scale: markEncoder.x.scale }
-                    : (datum, el, params) => {
-                        return params.viewBox.width();
-                    }
-            };
-            if (markEncoder.color || markEncoder.group) {
-                res.stroke = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
-            }
-            else {
-                res.stroke = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
-            }
-            return res;
-        }
-    }
-    RuleY.type = PlotMakType.ruleY;
-
-    class Area extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.area, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.area;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'line' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a, _b;
-            const encodeX = (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x;
-            const encodeY = (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.y;
-            return {
-                disableGraphicTooltip: true,
-                title: vutils.isArray(encodeX) ? encodeX[0] : encodeX,
-                content: vutils.isArray(encodeY)
-                    ? encodeY.map(entry => {
-                        return {
-                            value: entry
-                        };
-                    })
-                    : [
-                        {
-                            value: encodeY
-                        }
-                    ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            let res;
-            if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
-                res = {
-                    y: markEncoder.y,
-                    x: { field: markEncoder.x.field[0], scale: markEncoder.x.scale },
-                    x1: { field: markEncoder.x.field[1], scale: markEncoder.x.scale }
-                };
-            }
-            else if (vutils.isArray((_b = markEncoder.y) === null || _b === void 0 ? void 0 : _b.field)) {
-                res = {
-                    y: { field: markEncoder.y.field[0], scale: markEncoder.y.scale },
-                    y1: { field: markEncoder.y.field[1], scale: markEncoder.y.scale },
-                    x: markEncoder.x
-                };
-            }
-            else {
-                const scaleYId = this.getScaleId('y');
-                res = {
-                    x: markEncoder.x,
-                    y: markEncoder.y,
-                    y1: (datum, el, params) => {
-                        const scale = params[scaleYId];
-                        const domain = scale.domain();
-                        const min = Math.min.apply(null, domain);
-                        const max = Math.max.apply(null, domain);
-                        const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                        return scale.scale(baseValue);
-                    }
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
-            }
-            else {
-                res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
-            }
-            return res;
-        }
-    }
-    Area.type = PlotMakType.area;
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    function __awaiter(thisArg, _arguments, P, generator) {
-      function adopt(value) {
-        return value instanceof P ? value : new P(function (resolve) {
-          resolve(value);
-        });
-      }
-      return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) {
-          try {
-            step(generator.next(value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function rejected(value) {
-          try {
-            step(generator["throw"](value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function step(result) {
-          result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-      });
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    const mergeGrammarSpecs = (newSpecs, prevSpecs) => {
-        return newSpecs.reduce((res, entry) => {
-            if (entry.id && !res.some(prev => prev.id === entry.id)) {
-                res.push(entry);
-            }
-            return res;
-        }, prevSpecs);
-    };
-
-    class Plot {
-        static useMarks(marks) {
-            marks.forEach(mark => {
-                vgrammar.Factory.registerPlotMarks(mark.type, mark);
-            });
-        }
-        constructor(option) {
-            this.view = new vgrammar.View(option);
-            this._semanticMarks = [];
-            this._logger = vutils.Logger.getInstance();
-        }
-        theme(theme) {
-            this._theme = theme;
-            this.view.parseSpec({ theme });
-            return this;
-        }
-        _mergeScales(scales, prevScales) {
-            return scales.reduce((res, scale) => {
-                if (scale.id) {
-                    const prevIndex = res.findIndex(prev => prev.id === scale.id);
-                    if (prevIndex >= 0) {
-                        const prevScale = res[prevIndex];
-                        if (scale.domain.data && scale.domain.field) {
-                            if (prevScale.domain.data && prevScale.domain.field) {
-                                if (scale.domain.data === prevScale.domain.data &&
-                                    scale.domain.field !== prevScale.domain.field) {
-                                    prevScale.domain.field = []
-                                        .concat(prevScale.domain.field)
-                                        .concat(scale.domain.field);
-                                }
-                                else if (scale.domain.data !== prevScale.domain.data) {
-                                    prevScale.domain = {
-                                        datas: [
-                                            { data: prevScale.domain.data, field: prevScale.domain.field },
-                                            { data: scale.domain.data, field: scale.domain.field }
-                                        ],
-                                        sort: prevScale.domain.sort
-                                    };
-                                }
-                                if (!vutils.isNil(scale.domain.sort)) {
-                                    prevScale.domain.sort = scale.domain.sort;
-                                }
-                            }
-                            else if (prevScale.domain.datas) {
-                                const prevData = prevScale.domain.datas.find(entry => entry.data === scale.domain.data);
-                                if (prevData && scale.domain.field !== prevData.field) {
-                                    prevData.field = [].concat(prevData.field).concat(scale.domain.field);
-                                }
-                                else if (!prevData) {
-                                    prevScale.domain.datas.push({
-                                        data: scale.domain.data,
-                                        field: scale.domain.field
-                                    });
-                                }
-                                if (!vutils.isNil(scale.domain.sort)) {
-                                    prevScale.domain.sort = scale.domain.sort;
-                                }
-                            }
-                        }
-                        if (scale.userScale) {
-                            res[prevIndex] = vutils.merge(prevScale, scale.userScale);
-                        }
-                    }
-                    else {
-                        scale.userScale = null;
-                        res.push(scale);
-                    }
-                }
-                return res;
-            }, prevScales);
-        }
-        parseViewSpec() {
-            const spec = {
-                theme: this._theme,
-                data: [],
-                marks: [],
-                scales: [],
-                coordinates: [],
-                signals: [],
-                projections: [],
-                events: []
-            };
-            this._semanticMarks.forEach(mark => {
-                if (this._coordinate) {
-                    mark.coordinate(this._coordinate);
-                }
-                const { data, marks, scales, coordinates, signals, projections, events } = mark.toViewSpec();
-                if (data && data.length) {
-                    spec.data = mergeGrammarSpecs(data, spec.data);
-                }
-                if (marks && marks.length) {
-                    spec.marks = spec.marks.concat(marks);
-                }
-                if (scales && scales.length) {
-                    spec.scales = this._mergeScales(scales, spec.scales);
-                }
-                if (coordinates && coordinates.length) {
-                    spec.coordinates = mergeGrammarSpecs(coordinates, spec.coordinates);
-                }
-                if (signals && signals.length) {
-                    spec.signals = spec.signals.concat(signals);
-                }
-                if (projections && projections.length) {
-                    spec.projections = spec.projections.concat(projections);
-                }
-                if (events && events.length) {
-                    spec.events = spec.events.concat(events);
-                }
-            });
-            spec.marks = [
-                {
-                    type: 'group',
-                    layout: {
-                        display: 'relative',
-                        updateViewSignals: true
-                    },
-                    dependency: [vgrammar.SIGNAL_VIEW_BOX],
-                    encode: {
-                        update: (datum, elment, params) => {
-                            return {
-                                x: params.viewBox.x1,
-                                y: params.viewBox.y1,
-                                width: params.viewBox.width(),
-                                height: params.viewBox.height()
-                            };
-                        }
-                    },
-                    marks: spec.marks
-                }
-            ];
-            return spec;
-        }
-        run(morphConfig) {
-            if (this.view) {
-                if (!this._hasInited) {
-                    this.view.parseSpec(this.parseViewSpec());
-                }
-                else {
-                    this.view.updateSpec(this.parseViewSpec());
-                }
-                this._hasInited = true;
-                this.view.runSync(morphConfig);
-            }
-            return this;
-        }
-        runAsync(morphConfig) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (this.view) {
-                    if (!this._hasInited) {
-                        this.view.parseSpec(this.parseViewSpec());
-                    }
-                    else {
-                        this.view.updateSpec(this.parseViewSpec());
-                    }
-                    this._hasInited = true;
-                    yield this.view.runAsync(morphConfig);
-                }
-                return this;
-            });
-        }
-        release() {
-            if (this.view) {
-                this.view.release();
-            }
-            return this;
-        }
-        updateSpec(spec) {
-            this.parseSpec(spec, true);
-            return this;
-        }
-        parseSpec(spec, isUpdate) {
-            var _a;
-            if (spec.coordinate) {
-                this.coordinate(spec.coordinate.type, spec.coordinate);
-            }
-            if ((_a = spec === null || spec === void 0 ? void 0 : spec.marks) === null || _a === void 0 ? void 0 : _a.length) {
-                spec.marks.forEach(mark => {
-                    const plotMark = vgrammar.Factory.createPlotMark(mark.type);
-                    plotMark.parseSpec(mark);
-                    this._semanticMarks.push(plotMark);
-                });
-            }
-            const viewSpec = this.parseViewSpec();
-            viewSpec.width = spec.width;
-            viewSpec.height = spec.height;
-            viewSpec.background = spec.background;
-            viewSpec.padding = spec.padding;
-            if (isUpdate) {
-                this.view.updateSpec(viewSpec);
-            }
-            else {
-                this.view.parseSpec(viewSpec);
-            }
-            this._hasInited = true;
-            return this;
-        }
-        getImageBuffer() {
-            var _a, _b;
-            return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.getImageBuffer) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        on(type, handler) {
-            if (this.view) {
-                this.view.addEventListener(type, handler);
-            }
-            return this;
-        }
-        off(type, handler) {
-            if (this.view) {
-                this.view.removeEventListener(type, handler);
-            }
-            return this;
-        }
-        getCoordinateId(viewId = '0') {
-            return `coordinate-${viewId}`;
-        }
-        coordinate(type, spec) {
-            this._coordinate = Object.assign({ type, id: this.getCoordinateId() }, spec);
-            return this;
-        }
-        interval() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.interval);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.interval} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        line() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.line);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.line} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        area() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.area);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.area} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        cell() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.cell);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.cell} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        ruleX() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.ruleX);
-            if (!mark) {
-                this._logger.error(`Please register ${this.ruleX} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        ruleY() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.ruleY);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.ruleY} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        image() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.image);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.image} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        path() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.path);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.path} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        polygon() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.polygon);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.polygon} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        rectX() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.rectX);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.rectX} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        rectY() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.rectY);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.rectY} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        rect() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.rect);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.rect} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        rule() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.rule);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.rule} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        symbol() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.symbol);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.symbol} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        text() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.text);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.text} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        sankey() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.sankey);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.sankey} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        sunburst() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.sunburst);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.sunburst} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        tree() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.tree);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.tree} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        treemap() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.treemap);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.treemap} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        circlePacking() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.circlePacking);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.circlePacking} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        wordcloud() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.wordcloud);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.wordcloud} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-        wordcloudShape() {
-            const mark = vgrammar.Factory.createPlotMark(PlotMakType.wordcloudShape);
-            if (!mark) {
-                this._logger.error(`Please register ${PlotMakType.wordcloudShape} before use it`);
-            }
-            else {
-                this._semanticMarks.push(mark);
-            }
-            return mark;
-        }
-    }
-
-    class ImageSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.image, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.image;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'src') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('src'),
-                    domain: {
-                        data: this.getDataIdOfMain(),
-                        field: option
-                    }
-                };
-            }
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleXId = this.getScaleId('x');
-            const scaleYId = this.getScaleId('y');
-            const res = {
-                image: markEncoder.src
-            };
-            if (markEncoder.src) {
-                res.image = markEncoder.src;
-            }
-            if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
-                const xAccessor = vgrammarUtil.field(markEncoder.x.field[0]);
-                const x1Accessor = vgrammarUtil.field(markEncoder.x.field[1]);
-                res.x = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    return Math.min(scale.scale(xAccessor(datum)), scale.scale(x1Accessor(datum)));
-                };
-                res.width = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    return Math.abs(scale.scale(xAccessor(datum)) - scale.scale(x1Accessor(datum)));
-                };
-            }
-            else {
-                const width = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : ImageSemanticMark.defaultSpec.width;
-                const xAccessor = vgrammarUtil.field(markEncoder.x.field);
-                res.x = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    return scale.scale(xAccessor(datum)) - width / 2;
-                };
-                res.width = width;
-            }
-            if (vutils.isArray((_d = markEncoder.y) === null || _d === void 0 ? void 0 : _d.field)) {
-                const yAccessor = vgrammarUtil.field(markEncoder.y.field[0]);
-                const y1Accessor = vgrammarUtil.field(markEncoder.y.field[1]);
-                res.y = (datum, el, params) => {
-                    const scale = params[scaleYId];
-                    return Math.min(scale.scale(yAccessor(datum)), scale.scale(y1Accessor(datum)));
-                };
-                res.height = (datum, el, params) => {
-                    const scale = params[scaleYId];
-                    return Math.abs(scale.scale(yAccessor(datum)) - scale.scale(y1Accessor(datum)));
-                };
-            }
-            else {
-                const height = (_f = (_e = this.spec.style) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : ImageSemanticMark.defaultSpec.height;
-                const yAccessor = vgrammarUtil.field(markEncoder.y.field);
-                res.y = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    return scale.scale(yAccessor(datum)) - height / 2;
-                };
-                res.height = height;
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_g = markEncoder.color) !== null && _g !== void 0 ? _g : markEncoder.group;
-            }
-            else {
-                res.fill = (_j = (_h = this.spec.style) === null || _h === void 0 ? void 0 : _h.fill) !== null && _j !== void 0 ? _j : (_k = this.getPalette()) === null || _k === void 0 ? void 0 : _k[0];
-            }
-            return res;
-        }
-    }
-    ImageSemanticMark.type = PlotMakType.image;
-    ImageSemanticMark.defaultSpec = { width: 10, height: 10 };
-
-    class PathSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.path, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.path;
-        }
-        parseScaleByEncode(channel, option) {
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            if (markEncoder.stroke) {
-                markEncoder.stroke;
-            }
-            (_c = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            return null;
-        }
-    }
-    PathSemanticMark.type = PlotMakType.path;
-
-    class PolygonSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.polygon, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.polygon;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleXId = this.getScaleId('x');
-            const scaleYId = this.getScaleId('y');
-            const res = {};
-            if (((_b = (_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field) === null || _b === void 0 ? void 0 : _b.length) && ((_d = (_c = markEncoder.y) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.length)) {
-                const xAccessors = markEncoder.x.field.map((f) => vgrammarUtil.field(f));
-                const yAccessors = markEncoder.y.field.map((f) => vgrammarUtil.field(f));
-                res.points = (datum, el, params) => {
-                    const scaleX = params[scaleXId];
-                    const scaleY = params[scaleYId];
-                    const minLen = Math.min(xAccessors.length, yAccessors.length);
-                    const points = [];
-                    for (let i = 0; i < minLen; i++) {
-                        points.push({
-                            x: scaleX.scale(xAccessors[i](datum)),
-                            y: scaleY.scale(yAccessors[i](datum))
-                        });
-                    }
-                    return points;
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_e = markEncoder.color) !== null && _e !== void 0 ? _e : markEncoder.group;
-            }
-            else {
-                res.fill = (_g = (_f = this.spec.style) === null || _f === void 0 ? void 0 : _f.fill) !== null && _g !== void 0 ? _g : (_h = this.getPalette()) === null || _h === void 0 ? void 0 : _h[0];
-            }
-            return res;
-        }
-    }
-    PolygonSemanticMark.type = PlotMakType.polygon;
-
-    class RectXSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.rectX, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rect;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'rect' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a;
-            const encodeX = (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x;
-            return {
-                content: vutils.isArray(encodeX)
-                    ? encodeX.map(entry => {
-                        return {
-                            value: entry
-                        };
-                    })
-                    : [
-                        {
-                            value: encodeX
-                        }
-                    ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleXId = this.getScaleId('x');
-            const res = {
-                y: (datum, el, params) => {
-                    return 0;
-                },
-                y1: (datum, el, params) => {
-                    return params.viewBox.height();
-                }
-            };
-            if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
-                res.x = { field: markEncoder.x.field[0], scale: markEncoder.x.scale };
-                res.x1 = { field: markEncoder.x.field[1], scale: markEncoder.x.scale };
-            }
-            else {
-                const xAccessor = vgrammarUtil.field(markEncoder.x.field);
-                res.x = (datum, el, params) => {
-                    const xVals = xAccessor(datum);
-                    const scale = params[scaleXId];
-                    return vutils.isArray(xVals) ? scale.scale(xVals[0]) : scale.scale(xVals);
-                };
-                res.x1 = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    const xVals = xAccessor(datum);
-                    if (vutils.isArray(xVals) && xVals.length > 1) {
-                        return scale.scale(xVals[1]);
-                    }
-                    const domain = scale.domain();
-                    const min = Math.min.apply(null, domain);
-                    const max = Math.max.apply(null, domain);
-                    const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                    return scale.scale(baseValue);
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
-            }
-            else {
-                res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
-            }
-            return res;
-        }
-    }
-    RectXSemanticMark.type = PlotMakType.rectX;
-
-    class RectYSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.rectY, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rect;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'rect' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a;
-            const encodeY = (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.y;
-            return {
-                content: vutils.isArray(encodeY)
-                    ? encodeY.map(entry => {
-                        return {
-                            value: entry
-                        };
-                    })
-                    : [
-                        {
-                            value: encodeY
-                        }
-                    ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleYId = this.getScaleId('y');
-            const res = {
-                x: (datum, el, params) => {
-                    return 0;
-                },
-                x1: (datum, el, params) => {
-                    return params.viewBox.width();
-                }
-            };
-            if (vutils.isArray((_a = markEncoder.y) === null || _a === void 0 ? void 0 : _a.field)) {
-                res.y = { field: markEncoder.y.field[0], scale: markEncoder.y.scale };
-                res.y1 = { field: markEncoder.y.field[1], scale: markEncoder.y.scale };
-            }
-            else {
-                const yAccessor = vgrammarUtil.field(markEncoder.y.field);
-                res.y = (datum, el, params) => {
-                    const yVals = yAccessor(datum);
-                    const scale = params[scaleYId];
-                    return vutils.isArray(yVals) ? scale.scale(yVals[0]) : scale.scale(yVals);
-                };
-                res.y1 = (datum, el, params) => {
-                    const scale = params[scaleYId];
-                    const yVals = yAccessor(datum);
-                    if (vutils.isArray(yVals) && yVals.length > 1) {
-                        return scale.scale(yVals[1]);
-                    }
-                    const domain = scale.domain();
-                    const min = Math.min.apply(null, domain);
-                    const max = Math.max.apply(null, domain);
-                    const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                    return scale.scale(baseValue);
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
-            }
-            else {
-                res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
-            }
-            return res;
-        }
-    }
-    RectYSemanticMark.type = PlotMakType.rectY;
-
-    class RectSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.rect, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rect;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'rect' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a;
-            const encodeY = (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.y;
-            return {
-                content: vutils.isArray(encodeY)
-                    ? encodeY.map(entry => {
-                        return {
-                            value: entry
-                        };
-                    })
-                    : [
-                        {
-                            value: encodeY
-                        }
-                    ]
-            };
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const scaleXId = this.getScaleId('x');
-            const scaleYId = this.getScaleId('y');
-            const res = {};
-            if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
-                res.x = { field: markEncoder.x.field[0], scale: markEncoder.x.scale };
-                res.x1 = { field: markEncoder.x.field[1], scale: markEncoder.x.scale };
-            }
-            else {
-                const xAccessor = vgrammarUtil.field(markEncoder.x.field);
-                res.x = (datum, el, params) => {
-                    const xVals = xAccessor(datum);
-                    const scale = params[scaleXId];
-                    return vutils.isArray(xVals) ? scale.scale(xVals[0]) : scale.scale(xVals);
-                };
-                res.x1 = (datum, el, params) => {
-                    const scale = params[scaleXId];
-                    const xVals = xAccessor(datum);
-                    if (vutils.isArray(xVals) && xVals.length > 1) {
-                        return scale.scale(xVals[1]);
-                    }
-                    const domain = scale.domain();
-                    const min = Math.min.apply(null, domain);
-                    const max = Math.max.apply(null, domain);
-                    const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                    return scale.scale(baseValue);
-                };
-            }
-            if (vutils.isArray((_b = markEncoder.y) === null || _b === void 0 ? void 0 : _b.field)) {
-                res.y = { field: markEncoder.y.field[0], scale: markEncoder.y.scale };
-                res.y1 = { field: markEncoder.y.field[1], scale: markEncoder.y.scale };
-            }
-            else {
-                const yAccessor = vgrammarUtil.field(markEncoder.y.field);
-                res.y = (datum, el, params) => {
-                    const yVals = yAccessor(datum);
-                    const scale = params[scaleYId];
-                    return vutils.isArray(yVals) ? scale.scale(yVals[0]) : scale.scale(yVals);
-                };
-                res.y1 = (datum, el, params) => {
-                    const scale = params[scaleYId];
-                    const yVals = yAccessor(datum);
-                    if (vutils.isArray(yVals) && yVals.length > 1) {
-                        return scale.scale(yVals[1]);
-                    }
-                    const domain = scale.domain();
-                    const min = Math.min.apply(null, domain);
-                    const max = Math.max.apply(null, domain);
-                    const baseValue = min > 0 ? min : max < 0 ? max : 0;
-                    return scale.scale(baseValue);
-                };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
-            }
-            else {
-                res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
-            }
-            return res;
-        }
-    }
-    RectSemanticMark.type = PlotMakType.rect;
-
-    class Rule extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.rule, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rule;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d, _e, _f;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            let res;
-            if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
-                res.x = { field: markEncoder.x.field[0], scale: markEncoder.x.scale };
-                res.x1 = { field: markEncoder.x.field[1], scale: markEncoder.x.scale };
-            }
-            else {
-                res.x = res.x1 = markEncoder.x;
-            }
-            if (vutils.isArray((_b = markEncoder.y) === null || _b === void 0 ? void 0 : _b.field)) {
-                res.y = { field: markEncoder.y.field[0], scale: markEncoder.y.scale };
-                res.y1 = { field: markEncoder.y.field[1], scale: markEncoder.y.scale };
-            }
-            else {
-                res.y = res.y1 = markEncoder.y;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.stroke = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
-            }
-            else {
-                res.stroke = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
-            }
-            return res;
-        }
-    }
-    Rule.type = PlotMakType.rule;
-
-    class SymbolSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.symbol, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.symbol;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        setDefaultCrosshair() {
-            return {
-                x: { crosshairShape: 'line' },
-                y: { crosshairShape: 'line' }
-            };
-        }
-        setDefaultTooltip() {
-            var _a, _b, _c;
-            return {
-                disableDimensionTooltip: true,
-                title: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.group,
-                content: [
-                    {
-                        value: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.x
-                    },
-                    {
-                        value: (_c = this.spec.encode) === null || _c === void 0 ? void 0 : _c.y
-                    }
-                ]
-            };
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'size') {
-                return {
-                    type: 'linear',
-                    id: this.getScaleId('size'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: [SymbolSemanticMark.defaultSpec.size, SymbolSemanticMark.defaultSpec.size]
-                };
-            }
-            if (channel === 'shape') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('shape'),
-                    domain: {
-                        data: this.getDataIdOfMain(),
-                        field: option
-                    }
-                };
-            }
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: markEncoder.x,
-                y: markEncoder.y
-            };
-            if (markEncoder.shape) {
-                res.symbolType = markEncoder.shape;
-            }
-            if (markEncoder.size) {
-                res.size = markEncoder.size;
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
-            }
-            else {
-                res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-    }
-    SymbolSemanticMark.defaultSpec = {
-        size: 10
-    };
-    SymbolSemanticMark.type = PlotMakType.symbol;
-
-    class TextSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.text, id);
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.text;
-        }
-        parseScaleOfEncodeX(option) {
-            const res = super.parseScaleOfEncodeX(option);
-            res.type = 'point';
-            return res;
-        }
-        parseScaleByEncode(channel, option) {
-            return this.parseScaleOfCommonEncode(channel, option);
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = markEncoder;
-            if (res.text) {
-                res.text = { field: res.text.field };
-            }
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color || markEncoder.group) {
-                res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
-            }
-            else {
-                res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-    }
-    TextSemanticMark.type = PlotMakType.text;
-
-    class SankeySemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.sankey, id);
-            if (!vgrammar.getTransform(PlotMakType.sankey)) {
-                this._logger.error(`Please add this line of code: import { registerSankeyTransforms } from '@visactor/vgrammar-sankey'; 
-        and run registerSankeyTransforms() before use sankey`);
-            }
-            if (!vgrammar.getGlyph('linkPath')) {
-                this._logger.error(`
-      Please add this line of code: import { registerLinkPathGlyph } from '@visactor/vgrammar';
-      add run registerLinkPathGlyph() before use sankey
-      `);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rect;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: 'sankey',
-                    width: { signal: 'viewWidth' },
-                    height: { signal: 'viewHeight' },
-                    nodeKey: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.node
-                }
-            ];
-        }
-        getDataIdOfLink() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-data-link`;
-        }
-        setMultipleData() {
-            return [
-                {
-                    id: this.getDataIdOfFiltered(),
-                    transform: [
-                        {
-                            type: 'map',
-                            all: true,
-                            callback: (datum) => {
-                                return datum[0].nodes;
-                            }
-                        }
-                    ]
-                },
-                {
-                    source: this.getDataIdOfMain(),
-                    id: this.getDataIdOfLink(),
-                    transform: [
-                        {
-                            type: 'map',
-                            all: true,
-                            callback: (datum) => {
-                                return datum[0].links;
-                            }
-                        }
-                    ]
-                }
-            ];
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x0' },
-                x1: { field: 'x1' },
-                y: { field: 'y0' },
-                y1: { field: 'y1' }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return scale.scale(colorAccessor(datum === null || datum === void 0 ? void 0 : datum.datum));
-                };
-            }
-            else {
-                res.fill = (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.nodeStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-        setMainMarkSpec() {
-            return { key: 'key' };
-        }
-        setLabelTextGetter(channel, option) {
-            const textGetter = vgrammarUtil.field(channel);
-            return (datum, el, params) => {
-                return textGetter(datum.datum);
-            };
-        }
-        setMultiMarksSpec() {
-            var _a;
-            return [
-                {
-                    id: `${this.getMarkId()}-link`,
-                    type: 'glyph',
-                    glyphType: 'linkPath',
-                    from: {
-                        data: this.getDataIdOfLink()
-                    },
-                    layout: {
-                        position: 'content',
-                        skipBeforeLayouted: true
-                    },
-                    key: 'index',
-                    dependency: this.viewSpec.scales.map(scale => scale.id).concat(vgrammar.SIGNAL_VIEW_BOX),
-                    animation: this.convertMarkAnimation(),
-                    encode: Object.assign({}, this.spec.state, {
-                        enter: Object.assign({
-                            backgroundStyle: { fillColor: '#ccc', fillOpacity: 0.2 },
-                            fillOpacity: 0.8,
-                            round: true
-                        }, (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.linkStyle),
-                        update: (datum, el, params) => {
-                            var _a, _b, _c, _d;
-                            return {
-                                direction: datum.vertical ? 'vertical' : 'horizontal',
-                                x0: datum.x0,
-                                x1: datum.x1,
-                                y0: datum.y0,
-                                y1: datum.y1,
-                                thickness: datum.thickness,
-                                fill: (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.linkStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0]
-                            };
-                        }
-                    })
-                }
-            ];
-        }
-    }
-    SankeySemanticMark.type = PlotMakType.sankey;
-
-    class SunburstSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.sunburst, id);
-            if (!vgrammar.getTransform('sunburst')) {
-                this._logger.error(`Please add this line of code: import { registerSunburstTransforms } from 'vgrammar-hierarchy': 
-        and run registerSunburstTransforms() before use sunburst chart`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.arc;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: 'sunburst',
-                    width: { signal: 'viewWidth' },
-                    height: { signal: 'viewHeight' },
-                    nodeKey: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.node,
-                    flatten: true
-                }
-            ];
-        }
-        getDataIdOfLabel() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-data-link`;
-        }
-        setMultipleData() {
-            if (this.spec.label) {
-                return [
-                    {
-                        source: this.getDataIdOfFiltered(),
-                        id: this.getDataIdOfLabel(),
-                        transform: [
-                            {
-                                type: 'filter',
-                                callback: (datum) => {
-                                    return !!datum.label;
-                                }
-                            }
-                        ]
-                    }
-                ];
-            }
-            return null;
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x' },
-                y: { field: 'y' },
-                innerRadius: { field: 'innerRadius' },
-                outerRadius: { field: 'outerRadius' },
-                startAngle: { field: 'startAngle' },
-                endAngle: { field: 'endAngle' }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return (datum === null || datum === void 0 ? void 0 : datum.datum) ? scale.scale(colorAccessor(datum.datum[datum.datum.length - 1])) : undefined;
-                };
-            }
-            else {
-                res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
-            }
-            return res;
-        }
-        setMainMarkEnterEncode() {
-            var _a;
-            return (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.nodeStyle;
-        }
-        setMainMarkSpec() {
-            return { key: 'key' };
-        }
-        parseLabelSpec() {
-            return [];
-        }
-        setMultiMarksSpec() {
-            const label = this.spec.label;
-            if (!label) {
-                return null;
-            }
-            return Object.keys(label).map(key => {
-                const textGetter = vgrammarUtil.field(key);
-                return {
-                    id: `${this.getMarkId()}-text-${key}`,
-                    type: 'text',
-                    from: {
-                        data: this.getDataIdOfLabel()
-                    },
-                    layout: {
-                        position: 'content',
-                        skipBeforeLayouted: true
-                    },
-                    key: 'flattenIndex',
-                    dependency: this.viewSpec.scales.map(scale => scale.id).concat(vgrammar.SIGNAL_VIEW_BOX),
-                    animation: this.convertMarkAnimation(),
-                    encode: {
-                        enter: label[key].textStyle,
-                        update: (datum, el, params) => {
-                            return {
-                                x: datum.label.x,
-                                y: datum.label.y,
-                                textAlign: datum.label.textAlign,
-                                textBaseline: datum.label.textBaseline,
-                                text: textGetter(datum.datum[datum.datum.length - 1]),
-                                angle: datum.label.angle,
-                                maxLineWidth: datum.label.maxLineWidth
-                            };
-                        }
-                    }
-                };
-            });
-        }
-    }
-    SunburstSemanticMark.type = PlotMakType.sunburst;
-
-    class TreemapSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.treemap, id);
-            if (!vgrammar.getTransform('treemap')) {
-                this._logger.error(`Please add this line of code: import { registerTreemapTransforms } from 'vgrammar-hierarchy'; 
-        and run registerTreemapTransforms() before use treemap`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.rect;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: 'treemap',
-                    width: { signal: 'viewWidth' },
-                    height: { signal: 'viewHeight' },
-                    nodeKey: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.node,
-                    flatten: true
-                }
-            ];
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x0' },
-                x1: { field: 'x1' },
-                y: { field: 'y0' },
-                y1: { field: 'y1' }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return (datum === null || datum === void 0 ? void 0 : datum.datum) ? scale.scale(colorAccessor(datum.datum[datum.datum.length - 1])) : undefined;
-                };
-            }
-            else {
-                res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
-            }
-            return res;
-        }
-        setMainMarkSpec() {
-            return { key: 'key' };
-        }
-        parseLabelSpec() {
-            return [];
-        }
-        setMultiMarksSpec() {
-            const label = this.spec.label;
-            if (!label) {
-                return null;
-            }
-            return Object.keys(label).map(key => {
-                const textGetter = vgrammarUtil.field(key);
-                return {
-                    id: `${this.getMarkId()}-text-${key}`,
-                    type: 'text',
-                    from: {
-                        data: this.getDataIdOfFiltered()
-                    },
-                    layout: {
-                        position: 'content',
-                        skipBeforeLayouted: true
-                    },
-                    key: 'flattenIndex',
-                    dependency: this.viewSpec.scales.map(scale => scale.id).concat(vgrammar.SIGNAL_VIEW_BOX),
-                    animation: this.convertMarkAnimation(),
-                    encode: {
-                        enter: Object.assign({
-                            textAlign: 'center',
-                            textBaseline: 'middle'
-                        }, label[key].textStyle),
-                        update: (datum, el, params) => {
-                            return {
-                                x: datum.labelRect ? (datum.labelRect.x0 + datum.labelRect.x1) / 2 : (datum.x0 + datum.x1) / 2,
-                                y: datum.labelRect ? (datum.labelRect.y0 + datum.labelRect.y1) / 2 : (datum.y0 + datum.y1) / 2,
-                                text: textGetter(datum.datum[datum.datum.length - 1])
-                            };
-                        }
-                    }
-                };
-            });
-        }
-    }
-    TreemapSemanticMark.type = PlotMakType.treemap;
-
-    class CirclePackingSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.circlePacking, id);
-            if (!vgrammar.getTransform(PlotMakType.circlePacking)) {
-                this._logger.error(`Please add this line of code: import { registerCirclePackingTransforms } from '@visactor/vgrammar-hierarchy'; 
-        and run registerCirclePackingTransforms() before use treemap chart`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.circle;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: PlotMakType.circlePacking,
-                    width: { signal: 'viewWidth' },
-                    height: { signal: 'viewHeight' },
-                    nodeKey: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.node,
-                    flatten: true
-                }
-            ];
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x' },
-                y: { field: 'y' },
-                radius: { field: 'radius' }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return (datum === null || datum === void 0 ? void 0 : datum.datum) ? scale.scale(colorAccessor(datum.datum[datum.datum.length - 1])) : undefined;
-                };
-            }
-            else {
-                res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
-            }
-            return res;
-        }
-        setMainMarkSpec() {
-            return { key: 'key' };
-        }
-        setLabelTextGetter(channel, option) {
-            const textGetter = vgrammarUtil.field(channel);
-            return (datum, el, params) => {
-                return textGetter(datum.datum[datum.datum.length - 1]);
-            };
-        }
-    }
-    CirclePackingSemanticMark.type = PlotMakType.circlePacking;
-
-    class TreeSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.tree, id);
-            if (!vgrammar.getTransform(PlotMakType.tree)) {
-                this._logger.error(`Please add this line of code: import { registerTreeTransforms } from 'vgrammar-hierarchy', 
-        and run registerTreeTransforms() before use tree`);
-            }
-            if (!vgrammar.getGlyph('treePath')) {
-                this._logger.error(`Please add this line of code: import { registerTreePathGlyph } from '@visactor/vgrammar';
-        and run registerTreePathGlyph() before use tree`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.symbol;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: 'tree',
-                    width: { signal: 'viewWidth' },
-                    height: { signal: 'viewHeight' },
-                    nodeKey: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.node,
-                    flatten: true
-                }
-            ];
-        }
-        getDataIdOfLink() {
-            var _a, _b;
-            return `${(_b = (_a = this.spec.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.spec.id}-data-link`;
-        }
-        setMultipleData() {
-            return [
-                {
-                    id: this.getDataIdOfFiltered(),
-                    transform: [
-                        {
-                            type: 'map',
-                            all: true,
-                            callback: (datum) => {
-                                return datum[0].nodes;
-                            }
-                        }
-                    ]
-                },
-                {
-                    source: this.getDataIdOfMain(),
-                    id: this.getDataIdOfLink(),
-                    transform: [
-                        {
-                            type: 'map',
-                            all: true,
-                            callback: (datum) => {
-                                return datum[0].links;
-                            }
-                        }
-                    ]
-                }
-            ];
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x' },
-                y: { field: 'y' }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return (datum === null || datum === void 0 ? void 0 : datum.datum) ? scale.scale(colorAccessor(datum.datum[datum.datum.length - 1])) : undefined;
-                };
-            }
-            else {
-                res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
-            }
-            return res;
-        }
-        setLabelTextGetter(channel, option) {
-            const textGetter = vgrammarUtil.field(channel);
-            return (datum, el, params) => {
-                return textGetter(datum.datum[datum.datum.length - 1]);
-            };
-        }
-        setMainMarkSpec() {
-            return { key: 'key' };
-        }
-        setMultiMarksSpec() {
-            const label = this.spec.label;
-            if (!label) {
-                return null;
-            }
-            const marks = [];
-            marks.push({
-                type: 'glyph',
-                glyphType: 'treePath',
-                from: { data: this.getDataIdOfLink() },
-                key: 'key',
-                zIndex: -1,
-                encode: {
-                    update: {
-                        x0: { field: 'x0' },
-                        x1: { field: 'x1' },
-                        y0: { field: 'y0' },
-                        y1: { field: 'y1' },
-                        thickness: 1,
-                        round: true,
-                        stroke: '#333'
-                    }
-                }
-            });
-            return marks;
-        }
-    }
-    TreeSemanticMark.type = PlotMakType.tree;
-
-    class WordcloudSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.wordcloud, id);
-            if (!vgrammar.getTransform(PlotMakType.wordcloud)) {
-                this._logger.error(`Please add this line of code:
-         'import { registerWordCloudTransforms } from '@visactor/vgrammar-wordcloud'; 
-        and run registerWordCloudTransforms() before use wordcloud`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.text;
-        }
-        setDefaultMarkTransform() {
-            var _a;
-            return [
-                {
-                    type: 'wordcloud',
-                    size: {
-                        callback: (params) => {
-                            return [params.viewBox.width(), params.viewBox.height()];
-                        },
-                        dependency: ['viewBox']
-                    },
-                    text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
-                }
-            ];
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x' },
-                y: { field: 'y' },
-                angle: { field: 'angle' },
-                fontSize: { field: 'fontSize' },
-                fontStyle: { field: 'fontStyle' },
-                fontFamily: { field: 'fontFamily' },
-                fontWeight: { field: 'fontWeight' },
-                text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return scale.scale(colorAccessor(datum));
-                };
-            }
-            else {
-                res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-        parseLabelSpec() {
-            return [];
-        }
-    }
-    WordcloudSemanticMark.type = PlotMakType.wordcloud;
-
-    class WordcloudShapeSemanticMark extends SemanticMark {
-        constructor(id) {
-            super(PlotMakType.wordcloudShape, id);
-            if (!vgrammar.getTransform(PlotMakType.wordcloudShape)) {
-                this._logger.error(`Please add this line of code:
-          import { registerWordCloudShapeTransforms } from '@visactor/vgrammar-wordcloud-shape'; 
-        and run registerWordCloudShapeTransforms() before use wordcloud-shape`);
-            }
-        }
-        setMarkType() {
-            return vgrammar.GrammarMarkType.text;
-        }
-        setDefaultDataTransform() {
-            var _a;
-            return [
-                {
-                    type: 'wordcloudShape',
-                    size: {
-                        callback: (params) => {
-                            return [params.viewBox.width(), params.viewBox.height()];
-                        },
-                        dependency: ['viewBox']
-                    },
-                    colorList: this.getPalette(),
-                    text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
-                }
-            ];
-        }
-        setMainMarkEnterEncode() {
-            return vutils.merge({
-                textAlign: 'center',
-                textBaseline: 'middle'
-            }, this.spec.style);
-        }
-        parseScaleByEncode(channel, option) {
-            if (channel === 'color') {
-                return {
-                    type: 'ordinal',
-                    id: this.getScaleId('color'),
-                    domain: {
-                        data: this.getDataIdOfFiltered(),
-                        field: option
-                    },
-                    range: this.getPalette()
-                };
-            }
-            return null;
-        }
-        convertMarkEncode(encode) {
-            var _a, _b, _c, _d;
-            const markEncoder = this.convertSimpleMarkEncode(encode);
-            const res = {
-                x: { field: 'x' },
-                y: { field: 'y' },
-                angle: { field: 'angle' },
-                fontSize: { field: 'fontSize' },
-                fontStyle: { field: 'fontStyle' },
-                fontFamily: { field: 'fontFamily' },
-                fontWeight: { field: 'fontWeight' },
-                fillOpacity: { field: 'opacity' },
-                text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
-            };
-            if (markEncoder.stroke) {
-                res.stroke = markEncoder.stroke;
-            }
-            if (markEncoder.color) {
-                const scaleColorId = this.getScaleId('color');
-                const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
-                res.fill = (datum, el, params) => {
-                    const scale = params[scaleColorId];
-                    return scale.scale(colorAccessor(datum));
-                };
-            }
-            else {
-                res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
-            }
-            return res;
-        }
-        parseLabelSpec() {
-            return [];
-        }
-    }
-    WordcloudShapeSemanticMark.type = PlotMakType.wordcloudShape;
-
-    Plot.useMarks([
-        Interval,
-        Line,
-        Cell,
-        RuleX,
-        RuleY,
-        Area,
-        ImageSemanticMark,
-        PathSemanticMark,
-        PolygonSemanticMark,
-        RectSemanticMark,
-        RectXSemanticMark,
-        RectYSemanticMark,
-        Rule,
-        SymbolSemanticMark,
-        TextSemanticMark,
-        SankeySemanticMark,
-        SunburstSemanticMark,
-        TreemapSemanticMark,
-        CirclePackingSemanticMark,
-        TreeSemanticMark,
-        WordcloudSemanticMark,
-        WordcloudShapeSemanticMark
-    ]);
-
-    exports.Plot = Plot;
-
-}));