@visactor/vgrammar-plot 0.6.0

package/dist/index.js

@@ -0,0 +1,3291 @@
+(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.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;
+      }
+    }
+
+    const defaultTheme = vgrammar.getTheme('default');
+    let semanticMarkId = -1;
+    class SemanticMark {
+        constructor(type, id) {
+            this.type = type;
+            this.uid = ++semanticMarkId;
+            this._logger = vutils.Logger.getInstance();
+            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;
+        }
+        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(Object.assign({}, 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) };
+            });
+            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: vgrammar.getPalette()
+            };
+        }
+        parseScaleOfEncodeGroup(option) {
+            return {
+                type: 'ordinal',
+                id: this.getScaleId('group'),
+                domain: {
+                    data: this.getDataIdOfMain(),
+                    field: option
+                },
+                range: vgrammar.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);
+            }
+            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) ? Object.assign(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),
+                            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) ? Object.assign({}, 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;
+            const defaultTooltipSpec = this.setDefaultTooltip();
+            const userTooltipSpec = this.spec.tooltip;
+            if (userTooltipSpec !== false && userTooltipSpec !== null && defaultTooltipSpec !== null) {
+                const res = [];
+                const tooltipSpec = Object.assign({}, defaultTooltipSpec, userTooltipSpec === true ? {} : userTooltipSpec);
+                const colorChannel = vutils.isNil(this.spec.encode.color) ? '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 && (datum === null || datum === void 0 ? void 0 : datum.length) ? vgrammarUtil.field(tooltipSpec.title)(datum[0]) : undefined;
+                            }
+                        }
+                };
+                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)];
+                                return {
+                                    symbolType: entry.symbol ? (_a = vgrammarUtil.field(entry.symbol)(datum)) !== null && _a !== void 0 ? _a : 'circle' : 'circle',
+                                    fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : vgrammar.getPalette()[0]
+                                };
+                            }
+                        };
+                    })
+                    : 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) {
+                    res.push({
+                        type: 'component',
+                        componentType: vgrammar.ComponentEnum.dimensionTooltip,
+                        tooltipType: this.getVisualChannel('x'),
+                        scale: this.getScaleId('x'),
+                        dependency,
+                        target: { data: this.getDataIdOfFiltered(), filter: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x },
+                        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 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: defaultTheme.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: defaultTheme.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: defaultTheme.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: defaultTheme.slider.railHeight,
+                                                    railWidth: params.viewBox.width()
+                                                };
+                                    const attrs = vutils.isPlainObject(option) ? Object.assign({}, 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 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: defaultTheme.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: defaultTheme.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: defaultTheme.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: defaultTheme.datazoom.size.height }
+                                                };
+                                    const attrs = vutils.isPlainObject(option) ? Object.assign({}, 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 null;
+        }
+        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)
+                                ? Object.assign({
+                                    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) ? Object.assign({}, 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);
+                    scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption), (_a = this.spec.scale) === null || _a === void 0 ? void 0 : _a[k]);
+                });
+            }
+            if (scale) {
+                Object.keys(scale).forEach(k => {
+                    const scaleId = this.getScaleId(k);
+                    if (!scales[scaleId]) {
+                        scales[scaleId] = 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) {
+                            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 : defaultTheme.datazoom.size.height
+                                            : defaultTheme.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;
+            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.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 : vgrammar.getPalette()[0];
+            }
+            if (((_e = this._coordinate) === null || _e === void 0 ? void 0 : _e.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;
+            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 : vgrammar.getPalette()[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;
+            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.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[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;
+            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 : vgrammar.getPalette()[0];
+            }
+            return res;
+        }
+    }
+    RuleX.type = PlotMakType.ruleX;
+
+    class RuleY 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;
+            const markEncoder = this.convertSimpleMarkEncode(encode);
+            const res = {
+                y: markEncoder.y,
+                y1: markEncoder.y,
+                x: (datum, el, params) => {
+                    return 0;
+                },
+                x1: (datum, el, params) => {
+                    return params.viewBox.width();
+                }
+            };
+            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 : vgrammar.getPalette()[0];
+            }
+            return res;
+        }
+    }
+    RuleY.type = PlotMakType.ruleX;
+
+    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;
+            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.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 : vgrammar.getPalette()[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();
+        }
+        _mergeScales(scales, prevScales) {
+            return scales.reduce((res, scale) => {
+                if (scale.id) {
+                    const prevScale = res.find(prev => prev.id === scale.id);
+                    if (prevScale) {
+                        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;
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        res.push(scale);
+                    }
+                }
+                return res;
+            }, prevScales);
+        }
+        parseViewSpec() {
+            const spec = {
+                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());
+                }
+                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());
+                    }
+                    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;
+            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.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 : vgrammar.getPalette()[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) {
+            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;
+            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.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 : vgrammar.getPalette()[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;
+            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.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 : vgrammar.getPalette()[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;
+            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.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 : vgrammar.getPalette()[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;
+            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.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 : vgrammar.getPalette()[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;
+            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 : vgrammar.getPalette()[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;
+        }
+        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;
+            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.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 : vgrammar.getPalette()[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;
+            const markEncoder = this.convertSimpleMarkEncode(encode);
+            const res = markEncoder;
+            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 : vgrammar.getPalette()[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: vgrammar.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.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 : vgrammar.getPalette()[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;
+                            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 : vgrammar.getPalette()[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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b;
+            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.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 : vgrammar.getPalette()[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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b;
+            const markEncoder = this.convertSimpleMarkEncode(encode);
+            const res = {
+                x: { field: 'x0' },
+                x1: { field: 'x1' },
+                y: { field: 'y0' },
+                y1: { field: 'y1' }
+            };
+            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 : vgrammar.getPalette()[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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b;
+            const markEncoder = this.convertSimpleMarkEncode(encode);
+            const res = {
+                x: { field: 'x' },
+                y: { field: 'y' },
+                radius: { field: 'radius' }
+            };
+            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 : vgrammar.getPalette()[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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b;
+            const markEncoder = this.convertSimpleMarkEncode(encode);
+            const res = {
+                x: { field: 'x' },
+                y: { field: 'y' }
+            };
+            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 : vgrammar.getPalette()[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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b, _c;
+            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.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 : vgrammar.getPalette()[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: vgrammar.getPalette(),
+                    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: vgrammar.getPalette()
+                };
+            }
+            return null;
+        }
+        convertMarkEncode(encode) {
+            var _a, _b, _c;
+            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.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 : vgrammar.getPalette()[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;
+
+}));