@visactor/vgrammar-plot 0.6.0

package/es/semantic-mark.js

@@ -0,0 +1,833 @@
+import { Logger, array, isArray, isBoolean, isNil, isPlainObject } from "@visactor/vutils";
+
+import { isContinuous, isDiscrete } from "@visactor/vscale";
+
+import { getPalette, ComponentEnum, getTheme, SIGNAL_VIEW_BOX, BuiltInEncodeNames } from "@visactor/vgrammar";
+
+import { field as getFieldAccessor, toPercent } from "@visactor/vgrammar-util";
+
+const defaultTheme = getTheme("default");
+
+let semanticMarkId = -1;
+
+export class SemanticMark {
+    constructor(type, id) {
+        this.type = type, this.uid = ++semanticMarkId, this._logger = Logger.getInstance(), 
+        this.spec = {
+            id: null != id ? id : `${this.type}-${this.uid}`
+        };
+    }
+    parseSpec(spec) {
+        return isNil(spec.id) && (spec.id = this.spec.id), this.spec = spec, this;
+    }
+    coordinate(option) {
+        return this._coordinate = option, this;
+    }
+    data(values, transform, id) {
+        return isNil(values) || (this.spec.data = {
+            values: values,
+            transform: transform,
+            id: id
+        }), this;
+    }
+    encode(channel, option) {
+        return this.spec.encode || (this.spec.encode = {}), this.spec.encode[channel] = option, 
+        this;
+    }
+    scale(channel, option) {
+        return this.spec.scale || (this.spec.scale = {}), this.spec.scale[channel] = option, 
+        this;
+    }
+    style(style) {
+        return this.spec.style = style, this;
+    }
+    transform(option) {
+        return this.spec.transform = array(option), this;
+    }
+    state(state, option) {
+        if (![ BuiltInEncodeNames.enter, BuiltInEncodeNames.update, BuiltInEncodeNames.exit, BuiltInEncodeNames.group ].includes(state)) return this.spec.state || (this.spec.state = {}), 
+        this.spec.state[state] = option, this;
+        this._logger.warn(`[VGrammar]: ${state} is a reserved keyword to specify the encode of different data state, \n        don't use this keyword`);
+    }
+    animate(state, option) {
+        return "state" === state ? (this._logger.warn(`[VGrammar]: ${state} is a keyword use to specify state animation config, don't use this keyword`), 
+        this) : (this.spec.animation || (this.spec.animation = {}), this.spec.animation[state] = option, 
+        this);
+    }
+    axis(channel, option = !0, layout) {
+        return this.spec.axis || (this.spec.axis = {}), this.spec.axis[channel] = {
+            option: option,
+            layout: layout
+        }, this;
+    }
+    legend(channel, option = !0, layout) {
+        return this.spec.legend || (this.spec.legend = {}), this.spec.legend[channel] = {
+            option: option,
+            layout: layout
+        }, this;
+    }
+    crosshair(channel, option) {
+        return this.spec.crosshair || (this.spec.crosshair = {}), this.spec.crosshair[channel] = option, 
+        this;
+    }
+    tooltip(option) {
+        return this.spec.tooltip = option, this;
+    }
+    slider(channel, option, layout) {
+        return this.spec.slider || (this.spec.slider = {}), this.spec.slider[channel] = {
+            option: option,
+            layout: layout
+        }, this;
+    }
+    datazoom(channel, option, layout) {
+        return this.spec.datazoom || (this.spec.datazoom = {}), this.spec.datazoom[channel] = {
+            option: option,
+            layout: layout
+        }, this;
+    }
+    label(channel, option) {
+        return this.spec.label || (this.spec.label = {}), this.spec.label[channel] = option, 
+        this;
+    }
+    player(data, option, layout) {
+        return this.spec.player = {
+            data: data,
+            option: option,
+            layout: layout
+        }, 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], index = defaultTransform.findIndex((entry => entry.type === customizedSpec.type));
+                    index >= 0 ? (transforms.push(Object.assign({}, defaultTransform[index], customizedSpec)), 
+                    excludeIndex.push(index)) : transforms.push(customizedSpec);
+                }
+                for (let j = 0, dlen = defaultTransform.length; j < dlen; j++) excludeIndex.includes(j) || (transforms = [ defaultTransform[j] ].concat(transforms));
+                return transforms;
+            }
+            return defaultTransform;
+        }
+        return userTransform;
+    }
+    convertMarkAnimation() {
+        return this.spec.animation ? this.spec.animation : null;
+    }
+    convertSimpleMarkEncode(encode) {
+        if (!encode) return {};
+        const markEncoder = {};
+        return Object.keys(encode).map((channel => {
+            markEncoder[channel] = {
+                field: encode[channel],
+                scale: this.getScaleId(channel)
+            };
+        })), markEncoder;
+    }
+    getDataIdOfFiltered() {
+        var _a, _b;
+        return `${null !== (_b = null === (_a = this.spec.data) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _b : this.spec.id}-data-filtered`;
+    }
+    getDataIdOfMain() {
+        var _a, _b;
+        return `${null !== (_b = null === (_a = this.spec.data) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _b : this.spec.id}-data`;
+    }
+    getDataIdOfPlayer() {
+        var _a, _b;
+        return `${null !== (_b = null === (_a = this.spec.data) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _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 null !== (_c = null === (_b = null === (_a = this.spec.scale) || void 0 === _a ? void 0 : _a[channel]) || void 0 === _b ? void 0 : _b.id) && void 0 !== _c ? _c : `scale-${channel}`;
+    }
+    getMarkId() {
+        return `${this.spec.id}-mark`;
+    }
+    getScaleSpec(scaleId) {
+        var _a, _b, _c;
+        return null === (_c = null === (_b = null === (_a = this.viewSpec) || void 0 === _a ? void 0 : _a.scales) || void 0 === _b ? void 0 : _b.find) || void 0 === _c ? void 0 : _c.call(_b, (scale => scale.id === scaleId));
+    }
+    parseScaleOfEncodeX(option) {
+        return {
+            type: "band",
+            id: this.getScaleId("x"),
+            dependency: [ SIGNAL_VIEW_BOX ],
+            domain: {
+                data: this.getDataIdOfFiltered(),
+                field: option
+            },
+            range: this._coordinate ? {
+                coordinate: this._coordinate.id,
+                dimension: "x"
+            } : (scale, params) => [ 0, params.viewBox.width() ]
+        };
+    }
+    parseScaleOfEncodeY(option) {
+        return {
+            type: "linear",
+            dependency: [ SIGNAL_VIEW_BOX ],
+            id: this.getScaleId("y"),
+            domain: {
+                data: this.getDataIdOfFiltered(),
+                field: option
+            },
+            range: this._coordinate ? {
+                coordinate: this._coordinate.id,
+                dimension: "y"
+            } : (scale, params) => [ params.viewBox.height(), 0 ]
+        };
+    }
+    parseScaleOfEncodeColor(option) {
+        return {
+            type: "ordinal",
+            id: this.getScaleId("color"),
+            domain: {
+                data: this.getDataIdOfMain(),
+                field: option
+            },
+            range: getPalette()
+        };
+    }
+    parseScaleOfEncodeGroup(option) {
+        return {
+            type: "ordinal",
+            id: this.getScaleId("group"),
+            domain: {
+                data: this.getDataIdOfMain(),
+                field: option
+            },
+            range: getPalette()
+        };
+    }
+    parseScaleOfCommonEncode(channel, option) {
+        return "x" === channel ? this.parseScaleOfEncodeX(option) : "y" === channel ? this.parseScaleOfEncodeY(option) : "color" === channel ? this.parseScaleOfEncodeColor(option) : "group" === channel ? this.parseScaleOfEncodeGroup(option) : null;
+    }
+    setDefaultAxis() {
+        return {};
+    }
+    parseAxisSpec() {
+        const axis = this.spec.axis, res = [];
+        return axis && Object.keys(axis).forEach((channel => {
+            const {option: option, layout: layout} = this.parseOption(axis[channel]);
+            if (option) {
+                const axisMarkSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.axis,
+                    scale: this.getScaleId(channel),
+                    dependency: [ SIGNAL_VIEW_BOX ],
+                    tickCount: option.tickCount,
+                    encode: {
+                        update: (datum, elment, params) => {
+                            const positionAttrs = this._coordinate ? {} : "x" === channel ? {
+                                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 isPlainObject(option) ? Object.assign(positionAttrs, option) : positionAttrs;
+                        }
+                    }
+                };
+                axisMarkSpec.layout = null != layout ? layout : {
+                    position: this._coordinate ? "auto" : isPlainObject(layout) && !isNil(layout.orient) ? layout.orient : "x" === channel ? "bottom" : "left"
+                }, res.push(axisMarkSpec);
+            }
+        })), res;
+    }
+    parseOption(spec) {
+        let option, layout;
+        return isPlainObject(spec) ? isNil(spec.option) ? option = spec : (option = spec.option, 
+        layout = spec.layout) : option = spec, {
+            option: option,
+            layout: layout
+        };
+    }
+    setDefaultLegend() {
+        return {};
+    }
+    parseLegendSpec() {
+        const legend = this.spec.legend, res = [];
+        return legend && Object.keys(legend).forEach((channel => {
+            var _a;
+            const {option: option, layout: layout} = this.parseOption(legend[channel]);
+            if (option) {
+                const markLayout = null != layout ? layout : isPlainObject(option) && !isNil(option.layout) ? "horizontal" === option.layout ? {
+                    position: "top",
+                    align: "center"
+                } : "vertical" === option.layout ? {
+                    position: "right",
+                    align: "middle"
+                } : {
+                    position: "top",
+                    align: "center"
+                } : {
+                    position: "top",
+                    align: "center"
+                }, markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.legend,
+                    scale: this.getScaleId(channel),
+                    dependency: [ SIGNAL_VIEW_BOX ],
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_a = this.spec.encode) || void 0 === _a ? 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 = "left" === markLayout.position ? {
+                                layout: "vertical",
+                                x: null !== (_c = null === (_b = null === (_a = element.mark) || void 0 === _a ? void 0 : _a.relativePosition) || void 0 === _b ? void 0 : _b.left) && void 0 !== _c ? _c : 0,
+                                y: null !== (_f = null === (_e = null === (_d = element.mark) || void 0 === _d ? void 0 : _d.relativePosition) || void 0 === _e ? void 0 : _e.top) && void 0 !== _f ? _f : 0
+                            } : "right" === markLayout.position ? {
+                                layout: "vertical",
+                                x: null !== (_j = null === (_h = null === (_g = element.mark) || void 0 === _g ? void 0 : _g.relativePosition) || void 0 === _h ? void 0 : _h.left) && void 0 !== _j ? _j : params.viewBox.width(),
+                                y: null !== (_m = null === (_l = null === (_k = element.mark) || void 0 === _k ? void 0 : _k.relativePosition) || void 0 === _l ? void 0 : _l.top) && void 0 !== _m ? _m : 0
+                            } : "bottom" === markLayout.position ? {
+                                layout: "horizontal",
+                                x: null !== (_q = null === (_p = null === (_o = element.mark) || void 0 === _o ? void 0 : _o.relativePosition) || void 0 === _p ? void 0 : _p.left) && void 0 !== _q ? _q : 0,
+                                y: null !== (_t = null === (_s = null === (_r = element.mark) || void 0 === _r ? void 0 : _r.relativePosition) || void 0 === _s ? void 0 : _s.top) && void 0 !== _t ? _t : params.viewBox.height()
+                            } : {
+                                layout: "horizontal",
+                                x: null !== (_w = null === (_v = null === (_u = element.mark) || void 0 === _u ? void 0 : _u.relativePosition) || void 0 === _v ? void 0 : _v.left) && void 0 !== _w ? _w : 0,
+                                y: null !== (_z = null === (_y = null === (_x = element.mark) || void 0 === _x ? void 0 : _x.relativePosition) || void 0 === _y ? void 0 : _y.top) && void 0 !== _z ? _z : 0
+                            };
+                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                        }
+                    }
+                };
+                markSpec.layout = markLayout, res.push(markSpec);
+            }
+        })), res;
+    }
+    setDefaultCrosshair() {
+        return {};
+    }
+    getVisualChannel(channel) {
+        var _a, _b;
+        return "polar" === (null === (_a = this._coordinate) || void 0 === _a ? void 0 : _a.type) ? this._coordinate.transpose ? "x" === channel ? "radius" : "angle" : "x" === channel ? "angle" : "radius" : (null === (_b = this._coordinate) || void 0 === _b ? void 0 : _b.transpose) ? "x" === channel ? "y" : "x" : channel;
+    }
+    parseCrosshairSpec() {
+        const defaultCrosshair = this.setDefaultCrosshair(), defaultKeys = Object.keys(defaultCrosshair), crosshairKeys = this.spec.crosshair ? Object.keys(this.spec.crosshair).reduce(((res, key) => (res.includes(key) || res.push(key), 
+        res)), defaultKeys) : defaultKeys, res = [];
+        return crosshairKeys.length && crosshairKeys.forEach((channel => {
+            var _a, _b;
+            const userOption = null === (_a = this.spec.crosshair) || void 0 === _a ? void 0 : _a[channel], option = null != userOption ? userOption : defaultCrosshair[channel];
+            if (option) {
+                const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.crosshair,
+                    scale: this.getScaleId(channel),
+                    dependency: [ SIGNAL_VIEW_BOX ],
+                    crosshairShape: isBoolean(option) ? "band" === (null == scaleSpec ? void 0 : scaleSpec.type) ? "rect" : "line" : null !== (_b = option.crosshairShape) && void 0 !== _b ? _b : "band" === (null == scaleSpec ? void 0 : scaleSpec.type) ? "rect" : "line",
+                    crosshairType: this.getVisualChannel(channel)
+                };
+                if (isPlainObject(userOption) && (markSpec.encode = {
+                    update: userOption
+                }, "polygon" === userOption.type)) {
+                    markSpec.crosshairType = "radius-polygon";
+                    const anotherDimScaleId = this.getScaleId("x" === channel ? "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 : void 0;
+                    }, markSpec.encode.update.startAngle = (datum, el, params) => {
+                        var _a, _b;
+                        const scale = params[anotherDimScaleId];
+                        return scale && isDiscrete(scale.type) ? scale.range()[0] + (null !== (_b = null === (_a = null == scale ? void 0 : scale.bandwidth) || void 0 === _a ? void 0 : _a.call(scale)) && void 0 !== _b ? _b : 0) / 2 : void 0;
+                    }, markSpec.encode.update.endAngle = (datum, el, params) => {
+                        var _a, _b;
+                        const scale = params[anotherDimScaleId];
+                        return scale && isDiscrete(scale.type) ? scale.range()[1] + (null !== (_b = null === (_a = null == scale ? void 0 : scale.bandwidth) || void 0 === _a ? void 0 : _a.call(scale)) && void 0 !== _b ? _b : 0) / 2 : void 0;
+                    };
+                }
+                res.push(markSpec);
+            }
+        })), res;
+    }
+    setDefaultTooltip() {
+        return null;
+    }
+    parseTooltipSpec() {
+        var _a;
+        const defaultTooltipSpec = this.setDefaultTooltip(), userTooltipSpec = this.spec.tooltip;
+        if (!1 !== userTooltipSpec && null !== userTooltipSpec && null !== defaultTooltipSpec) {
+            const res = [], tooltipSpec = Object.assign({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = isNil(this.spec.encode.color) ? "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? getFieldAccessor(colorEncode) : null, title = {
+                visible: !!tooltipSpec.title || !!tooltipSpec.staticTitle,
+                key: "title",
+                value: isNil(tooltipSpec.staticTitle) ? {
+                    field: (datum, el, params) => tooltipSpec.title && (null == datum ? void 0 : datum.length) ? getFieldAccessor(tooltipSpec.title)(datum[0]) : void 0
+                } : tooltipSpec.staticTitle
+            }, content = isArray(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
+                key: entry.key ? {
+                    field: entry.key
+                } : isNil(tooltipSpec.staticContentKey) ? (datum, el, params) => colorAccessor ? colorAccessor(datum) : void 0 : isArray(tooltipSpec.staticContentKey) ? tooltipSpec.staticContentKey[index] : tooltipSpec.staticContentKey,
+                value: {
+                    field: entry.value
+                },
+                symbol: (datum, el, params) => {
+                    var _a;
+                    const scale = params[this.getScaleId(colorChannel)];
+                    return {
+                        symbolType: entry.symbol && null !== (_a = getFieldAccessor(entry.symbol)(datum)) && void 0 !== _a ? _a : "circle",
+                        fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : getPalette()[0]
+                    };
+                }
+            }))) : null;
+            return !0 !== tooltipSpec.disableGraphicTooltip && res.push({
+                type: "component",
+                componentType: ComponentEnum.tooltip,
+                target: this.getMarkId(),
+                dependency: dependency,
+                title: title,
+                content: content,
+                zIndex: 1e3
+            }), !0 !== tooltipSpec.disableDimensionTooltip && res.push({
+                type: "component",
+                componentType: ComponentEnum.dimensionTooltip,
+                tooltipType: this.getVisualChannel("x"),
+                scale: this.getScaleId("x"),
+                dependency: dependency,
+                target: {
+                    data: this.getDataIdOfFiltered(),
+                    filter: null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a.x
+                },
+                title: title,
+                content: content,
+                avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [ this.getMarkId() ],
+                zIndex: 1e3
+            }), res;
+        }
+        return [];
+    }
+    setDefaultSlider() {
+        return {};
+    }
+    parseSliderSpec() {
+        const slider = this.spec.slider, res = [];
+        return slider && Object.keys(slider).forEach((channel => {
+            var _a, _b;
+            const {option: option, layout: layout} = this.parseOption(slider[channel]);
+            if (option) {
+                const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), dataId = this.getDataIdOfMain();
+                if (!scaleSpec || !isContinuous(scaleSpec.type)) return void this._logger.warn(`[VGrammar]: Don't use slider in a channel which has scale type = ${null == scaleSpec ? void 0 : scaleSpec.type}`);
+                const getter = getFieldAccessor(null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]), markLayout = null != layout ? layout : isPlainObject(option) && !isNil(option.layout) ? "horizontal" === option.layout ? {
+                    position: "top",
+                    align: "center"
+                } : "vertical" === option.layout ? {
+                    position: "right",
+                    align: "middle"
+                } : {
+                    position: "top",
+                    align: "center"
+                } : {
+                    position: "top",
+                    align: "center"
+                }, markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.slider,
+                    dependency: [ 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: null === (_b = this.spec.encode) || void 0 === _b ? 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 = "left" === markLayout.position ? {
+                                layout: "vertical",
+                                x: null !== (_c = null === (_b = null === (_a = elment.mark) || void 0 === _a ? void 0 : _a.relativePosition) || void 0 === _b ? void 0 : _b.left) && void 0 !== _c ? _c : 0,
+                                y: null !== (_f = null === (_e = null === (_d = elment.mark) || void 0 === _d ? void 0 : _d.relativePosition) || void 0 === _e ? void 0 : _e.top) && void 0 !== _f ? _f : 0,
+                                railWidth: defaultTheme.slider.railHeight,
+                                railHeight: params.viewBox.height()
+                            } : "right" === markLayout.position ? {
+                                layout: "vertical",
+                                x: null !== (_j = null === (_h = null === (_g = elment.mark) || void 0 === _g ? void 0 : _g.relativePosition) || void 0 === _h ? void 0 : _h.left) && void 0 !== _j ? _j : params.viewBox.width(),
+                                y: null !== (_m = null === (_l = null === (_k = elment.mark) || void 0 === _k ? void 0 : _k.relativePosition) || void 0 === _l ? void 0 : _l.top) && void 0 !== _m ? _m : 0,
+                                railWidth: defaultTheme.slider.railHeight,
+                                railHeight: params.viewBox.height()
+                            } : "bottom" === markLayout.position ? {
+                                layout: "horizontal",
+                                x: null !== (_q = null === (_p = null === (_o = elment.mark) || void 0 === _o ? void 0 : _o.relativePosition) || void 0 === _p ? void 0 : _p.left) && void 0 !== _q ? _q : 0,
+                                y: null !== (_t = null === (_s = null === (_r = elment.mark) || void 0 === _r ? void 0 : _r.relativePosition) || void 0 === _s ? void 0 : _s.top) && void 0 !== _t ? _t : params.viewBox.height(),
+                                railHeight: defaultTheme.slider.railHeight,
+                                railWidth: params.viewBox.width()
+                            } : {
+                                layout: "horizontal",
+                                x: null !== (_w = null === (_v = null === (_u = elment.mark) || void 0 === _u ? void 0 : _u.relativePosition) || void 0 === _v ? void 0 : _v.left) && void 0 !== _w ? _w : 0,
+                                y: null !== (_z = null === (_y = null === (_x = elment.mark) || void 0 === _x ? void 0 : _x.relativePosition) || void 0 === _y ? void 0 : _y.top) && void 0 !== _z ? _z : 0,
+                                railHeight: defaultTheme.slider.railHeight,
+                                railWidth: params.viewBox.width()
+                            };
+                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                        }
+                    }
+                };
+                markSpec.layout = markLayout, res.push(markSpec);
+            }
+        })), res;
+    }
+    setDefaultDataZoom() {
+        return {};
+    }
+    getVisiualPositionByDimension(channel) {
+        return "y" === channel ? "left" : "bottom";
+    }
+    parseDataZoomSpec() {
+        const datazoom = this.spec.datazoom, res = [];
+        return datazoom && Object.keys(datazoom).forEach((channel => {
+            var _a, _b, _c, _d, _e;
+            const {option: option, layout: layout} = this.parseOption(datazoom[channel]);
+            if (option) {
+                const dataId = this.getDataIdOfMain(), markLayout = null != layout ? layout : isPlainObject(option) && !isNil(option.orient) ? {
+                    position: option.orient
+                } : {
+                    position: this.getVisiualPositionByDimension(channel)
+                }, preview = {
+                    data: dataId
+                }, {x: x, y: y} = this.getDataZoomScaleId(channel);
+                "x" === channel ? (preview.x = {
+                    scale: x,
+                    field: null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]
+                }, preview.y = {
+                    scale: y,
+                    field: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b.y
+                }) : preview["top" === markLayout.position || "bottom" === markLayout.position ? "x" : "y"] = {
+                    scale: x,
+                    field: null !== (_d = null === (_c = this.spec.encode) || void 0 === _c ? void 0 : _c[channel]) && void 0 !== _d ? _d : channel
+                };
+                const markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.datazoom,
+                    dependency: [ SIGNAL_VIEW_BOX, dataId ],
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_e = this.spec.encode) || void 0 === _e ? void 0 : _e[channel]
+                    },
+                    preview: 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 = "left" === markLayout.position ? {
+                                orient: markLayout.position,
+                                x: null !== (_c = null === (_b = null === (_a = elment.mark) || void 0 === _a ? void 0 : _a.relativePosition) || void 0 === _b ? void 0 : _b.left) && void 0 !== _c ? _c : 0,
+                                y: null !== (_f = null === (_e = null === (_d = elment.mark) || void 0 === _d ? void 0 : _d.relativePosition) || void 0 === _e ? void 0 : _e.top) && void 0 !== _f ? _f : 0,
+                                size: {
+                                    height: params.viewBox.height(),
+                                    width: defaultTheme.datazoom.size.height
+                                }
+                            } : "right" === markLayout.position ? {
+                                orient: markLayout.position,
+                                x: null !== (_j = null === (_h = null === (_g = elment.mark) || void 0 === _g ? void 0 : _g.relativePosition) || void 0 === _h ? void 0 : _h.left) && void 0 !== _j ? _j : params.viewBox.width(),
+                                y: null !== (_m = null === (_l = null === (_k = elment.mark) || void 0 === _k ? void 0 : _k.relativePosition) || void 0 === _l ? void 0 : _l.top) && void 0 !== _m ? _m : 0,
+                                size: {
+                                    height: params.viewBox.height(),
+                                    width: defaultTheme.datazoom.size.height
+                                }
+                            } : "bottom" === markLayout.position ? {
+                                orient: markLayout.position,
+                                x: null !== (_q = null === (_p = null === (_o = elment.mark) || void 0 === _o ? void 0 : _o.relativePosition) || void 0 === _p ? void 0 : _p.left) && void 0 !== _q ? _q : 0,
+                                y: null !== (_t = null === (_s = null === (_r = elment.mark) || void 0 === _r ? void 0 : _r.relativePosition) || void 0 === _s ? void 0 : _s.top) && void 0 !== _t ? _t : params.viewBox.height(),
+                                size: {
+                                    width: params.viewBox.width(),
+                                    height: defaultTheme.datazoom.size.height
+                                }
+                            } : {
+                                orient: markLayout.position,
+                                x: null !== (_w = null === (_v = null === (_u = elment.mark) || void 0 === _u ? void 0 : _u.relativePosition) || void 0 === _v ? void 0 : _v.left) && void 0 !== _w ? _w : 0,
+                                y: null !== (_z = null === (_y = null === (_x = elment.mark) || void 0 === _x ? void 0 : _x.relativePosition) || void 0 === _y ? void 0 : _y.top) && void 0 !== _z ? _z : 0,
+                                size: {
+                                    width: params.viewBox.width(),
+                                    height: defaultTheme.datazoom.size.height
+                                }
+                            };
+                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                        }
+                    }
+                };
+                markSpec.layout = markLayout, res.push(markSpec);
+            }
+        })), res;
+    }
+    setDefaultLabel() {
+        return {};
+    }
+    getLabelPosition() {
+        var _a, _b;
+        return "polar" === (null === (_a = this._coordinate) || void 0 === _a ? void 0 : _a.type) ? this._coordinate.transpose ? "endAngle" : "outer" : (null === (_b = this._coordinate) || void 0 === _b ? void 0 : _b.transpose) ? "right" : "top";
+    }
+    setLabelTextGetter(channel, option) {
+        return null;
+    }
+    parseLabelSpec() {
+        const label = this.spec.label, res = [];
+        return label && Object.keys(label).forEach((channel => {
+            const option = label[channel];
+            if (option) {
+                const markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.label,
+                    target: this.getMarkId(),
+                    layout: {
+                        position: "content",
+                        skipBeforeLayouted: !0
+                    },
+                    labelStyle: 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);
+            }
+        })), res;
+    }
+    setDefaultPlayer() {
+        return {};
+    }
+    parsePlayerSpec() {
+        var _a;
+        const player = this.spec.player, res = [];
+        if (player) {
+            const option = null == player ? void 0 : player.option, layout = null == player ? void 0 : player.layout;
+            if (option) {
+                const markLayout = null != layout ? layout : isPlainObject(option) && !isNil(option.orient) ? {
+                    position: option.orient
+                } : {
+                    position: "bottom"
+                }, markSpec = {
+                    type: "component",
+                    componentType: ComponentEnum.player,
+                    dependency: [ SIGNAL_VIEW_BOX ],
+                    target: {
+                        data: this.getDataIdOfMain(),
+                        source: this.getDataIdOfPlayer()
+                    },
+                    playerType: isPlainObject(option) && null !== (_a = option.type) && void 0 !== _a ? _a : "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 = "left" === markLayout.position ? {
+                                x: null !== (_c = null === (_b = null === (_a = elment.mark) || void 0 === _a ? void 0 : _a.relativePosition) || void 0 === _b ? void 0 : _b.left) && void 0 !== _c ? _c : 0,
+                                y: null !== (_f = null === (_e = null === (_d = elment.mark) || void 0 === _d ? void 0 : _d.relativePosition) || void 0 === _e ? void 0 : _e.top) && void 0 !== _f ? _f : 0,
+                                size: {
+                                    height: params.viewBox.height(),
+                                    width: 20
+                                }
+                            } : "right" === markLayout.position ? {
+                                x: null !== (_j = null === (_h = null === (_g = elment.mark) || void 0 === _g ? void 0 : _g.relativePosition) || void 0 === _h ? void 0 : _h.left) && void 0 !== _j ? _j : params.viewBox.width(),
+                                y: null !== (_m = null === (_l = null === (_k = elment.mark) || void 0 === _k ? void 0 : _k.relativePosition) || void 0 === _l ? void 0 : _l.top) && void 0 !== _m ? _m : 0,
+                                size: {
+                                    height: params.viewBox.height(),
+                                    width: 20
+                                }
+                            } : "bottom" === markLayout.position ? {
+                                x: null !== (_q = null === (_p = null === (_o = elment.mark) || void 0 === _o ? void 0 : _o.relativePosition) || void 0 === _p ? void 0 : _p.left) && void 0 !== _q ? _q : 0,
+                                y: null !== (_t = null === (_s = null === (_r = elment.mark) || void 0 === _r ? void 0 : _r.relativePosition) || void 0 === _s ? void 0 : _s.top) && void 0 !== _t ? _t : params.viewBox.height(),
+                                size: {
+                                    width: params.viewBox.width(),
+                                    height: 20
+                                }
+                            } : {
+                                x: null !== (_w = null === (_v = null === (_u = elment.mark) || void 0 === _u ? void 0 : _u.relativePosition) || void 0 === _v ? void 0 : _v.left) && void 0 !== _w ? _w : 0,
+                                y: null !== (_z = null === (_y = null === (_x = elment.mark) || void 0 === _x ? void 0 : _x.relativePosition) || void 0 === _y ? void 0 : _y.top) && void 0 !== _z ? _z : 0,
+                                size: {
+                                    width: params.viewBox.width(),
+                                    height: 20
+                                }
+                            };
+                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                        }
+                    }
+                };
+                markSpec.layout = markLayout, res.push(markSpec);
+            }
+        }
+        return res;
+    }
+    parseDataSpec() {
+        var _a;
+        const {data: data, player: player} = this.spec, res = [];
+        if (null == player ? void 0 : player.data) res.push({
+            id: this.getDataIdOfPlayer(),
+            values: player.data
+        }), res.push({
+            id: this.getDataIdOfMain(),
+            values: null === (_a = player.data) || void 0 === _a ? void 0 : _a[0]
+        }), res.push({
+            id: this.getDataIdOfFiltered(),
+            source: this.getDataIdOfMain()
+        }); else if (data) {
+            const dataId = this.getDataIdOfMain(), userTransforms = data.transform, transform = this.convertMarkTransform(userTransforms, this.setDefaultDataTransform());
+            res.push({
+                id: dataId,
+                values: data.values,
+                transform: transform
+            }), res.push({
+                id: this.getDataIdOfFiltered(),
+                source: dataId
+            });
+        }
+        const multiDatas = this.setMultipleData();
+        return multiDatas && multiDatas.forEach((entry => {
+            entry.id && (entry.id === this.getDataIdOfFiltered() && res.length ? res[res.length - 1].transform = entry.transform : res.push(entry));
+        })), res;
+    }
+    parseScaleSpec() {
+        const {encode: encode, scale: scale, datazoom: datazoom} = this.spec, scales = {};
+        return encode && Object.keys(encode).forEach((k => {
+            var _a;
+            const encodeOption = encode[k], scaleId = this.getScaleId(k);
+            scales[scaleId] = Object.assign({
+                id: scaleId
+            }, this.parseScaleByEncode(k, encodeOption), null === (_a = this.spec.scale) || void 0 === _a ? void 0 : _a[k]);
+        })), scale && Object.keys(scale).forEach((k => {
+            const scaleId = this.getScaleId(k);
+            scales[scaleId] || (scales[scaleId] = scale[k]);
+        })), datazoom && Object.keys(datazoom).forEach((k => {
+            var _a, _b, _c, _d;
+            const scaleId = this.getScaleId(k), {x: xScaleId, y: yScaleId} = this.getDataZoomScaleId(k);
+            "x" === k && encode[k] ? (scales[xScaleId] = {
+                type: scales[scaleId].type,
+                id: xScaleId,
+                domain: {
+                    data: this.getDataIdOfMain(),
+                    field: encode[k]
+                },
+                dependency: [ SIGNAL_VIEW_BOX ],
+                range: (scale, params) => [ 0, params.viewBox.width() ]
+            }, encode.y && (scales[yScaleId] = {
+                type: null !== (_b = null === (_a = scales[this.getScaleId("y")]) || void 0 === _a ? void 0 : _a.type) && void 0 !== _b ? _b : "linear",
+                id: yScaleId,
+                domain: {
+                    data: this.getDataIdOfMain(),
+                    field: null == encode ? void 0 : encode.y
+                },
+                range: (scale, params) => {
+                    var _a, _b;
+                    const option = this.parseOption(datazoom[k]).option;
+                    return [ 0, isPlainObject(option) && null !== (_b = null === (_a = option.size) || void 0 === _a ? void 0 : _a.height) && void 0 !== _b ? _b : defaultTheme.datazoom.size.height ];
+                }
+            })) : scales[xScaleId] = {
+                type: null !== (_c = scales[scaleId].type) && void 0 !== _c ? _c : "band",
+                id: xScaleId,
+                domain: {
+                    data: this.getDataIdOfMain(),
+                    field: null !== (_d = null == encode ? void 0 : encode[k]) && void 0 !== _d ? _d : k
+                }
+            };
+        })), Array.from(Object.values(scales));
+    }
+    parseCoordinateSpec() {
+        var _a;
+        if (!this._coordinate) return [];
+        const coordinate = {
+            type: null !== (_a = this._coordinate.type) && void 0 !== _a ? _a : "cartesian",
+            transpose: this._coordinate.transpose,
+            id: this._coordinate.id,
+            dependency: [ SIGNAL_VIEW_BOX ],
+            start: [ 0, 0 ],
+            end: (coord, params) => [ params.viewBox.width(), params.viewBox.height() ]
+        };
+        return "polar" === this._coordinate.type && this._coordinate.origin && (coordinate.origin = (coord, params) => [ toPercent(this._coordinate.origin[0], params.viewBox.width()), toPercent(this._coordinate.origin[1], params.viewBox.height()) ]), 
+        [ 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: null === (_a = this._coordinate) || void 0 === _a ? void 0 : _a.id,
+            from: {
+                data: filteredDataId
+            },
+            groupBy: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b.group,
+            layout: {
+                position: "content",
+                skipBeforeLayouted: !0
+            },
+            dependency: this.viewSpec.scales.map((scale => scale.id)).concat(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();
+        return otherMarks && (marks = marks.concat(otherMarks)), marks = marks.concat(this.parseLabelSpec()), 
+        marks = marks.concat(this.parseTooltipSpec()), this.viewSpec.marks = marks, this.viewSpec;
+    }
+    clear() {
+        this.spec = {
+            id: this.spec.id
+        };
+    }
+}
+//# sourceMappingURL=semantic-mark.js.map