@visactor/vgrammar-plot 0.6.6 → 0.7.0-alpha.0

package/es/semantic-mark.js

@@ -1,19 +1,17 @@
-import { Logger, array, isArray, isBoolean, isNil, isPlainObject } from "@visactor/vutils";
+import { Logger, array, isArray, isBoolean, isNil, isPlainObject, merge } from "@visactor/vutils";
 
 import { isContinuous, isDiscrete } from "@visactor/vscale";
 
-import { getPalette, ComponentEnum, getTheme, SIGNAL_VIEW_BOX, BuiltInEncodeNames } from "@visactor/vgrammar";
+import { ComponentEnum, SIGNAL_VIEW_BOX, BuiltInEncodeNames, ThemeManager } 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) {
+    constructor(type, id, plot) {
         this.type = type, this.uid = ++semanticMarkId, this._logger = Logger.getInstance(), 
-        this.spec = {
+        this.plot = plot, this.spec = {
             id: null != id ? id : `${this.type}-${this.uid}`
         };
     }
@@ -96,6 +94,10 @@ export class SemanticMark {
             layout: layout
         }, this;
     }
+    getPalette() {
+        var _a;
+        return null === (_a = (this.plot ? this.plot.view.getCurrentTheme() : ThemeManager.getDefaultTheme()).palette) || void 0 === _a ? void 0 : _a.default;
+    }
     setDefaultDataTransform() {
         return [];
     }
@@ -112,7 +114,7 @@ export class SemanticMark {
                 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)), 
+                    index >= 0 ? (transforms.push(merge({}, 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));
@@ -131,7 +133,8 @@ export class SemanticMark {
         return Object.keys(encode).map((channel => {
             markEncoder[channel] = {
                 field: encode[channel],
-                scale: this.getScaleId(channel)
+                scale: this.getScaleId(channel),
+                band: .5
             };
         })), markEncoder;
     }
@@ -202,7 +205,18 @@ export class SemanticMark {
                 data: this.getDataIdOfMain(),
                 field: option
             },
-            range: getPalette()
+            range: this.getPalette()
+        };
+    }
+    parseScaleOfEncodeStroke(option) {
+        return {
+            type: "ordinal",
+            id: this.getScaleId("stroke"),
+            domain: {
+                data: this.getDataIdOfMain(),
+                field: option
+            },
+            range: this.getPalette()
         };
     }
     parseScaleOfEncodeGroup(option) {
@@ -213,11 +227,11 @@ export class SemanticMark {
                 data: this.getDataIdOfMain(),
                 field: option
             },
-            range: getPalette()
+            range: this.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;
+        return "x" === channel ? this.parseScaleOfEncodeX(option) : "y" === channel ? this.parseScaleOfEncodeY(option) : "color" === channel ? this.parseScaleOfEncodeColor(option) : "group" === channel ? this.parseScaleOfEncodeGroup(option) : "stroke" === channel ? this.parseScaleOfEncodeStroke(option) : null;
     }
     setDefaultAxis() {
         return {};
@@ -259,7 +273,7 @@ export class SemanticMark {
                                     y: -params.viewBox.height()
                                 }
                             };
-                            return isPlainObject(option) ? Object.assign(positionAttrs, option) : positionAttrs;
+                            return isPlainObject(option) ? merge(positionAttrs, option) : positionAttrs;
                         }
                     }
                 };
@@ -302,6 +316,7 @@ export class SemanticMark {
                     type: "component",
                     componentType: ComponentEnum.legend,
                     scale: this.getScaleId(channel),
+                    shapeScale: this.getScaleId("shape"),
                     dependency: [ SIGNAL_VIEW_BOX ],
                     target: {
                         data: this.getDataIdOfFiltered(),
@@ -327,7 +342,7 @@ export class SemanticMark {
                                 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;
+                            return isPlainObject(option) ? merge({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -383,16 +398,18 @@ export class SemanticMark {
         return null;
     }
     parseTooltipSpec() {
-        var _a;
+        var _a, _b;
         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 = {
+            const res = [], tooltipSpec = merge({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = isNil(this.spec.encode.color) ? isNil(this.spec.encode.group) ? "stroke" : "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
+                    field: (datum, el, params) => tooltipSpec.title ? getFieldAccessor(tooltipSpec.title)(isArray(datum) ? datum[0] : datum) : void 0
                 } : tooltipSpec.staticTitle
-            }, content = isArray(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
+            };
+            this.spec.encode.shape && dependency.push(this.getScaleId("shape"));
+            const 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,
@@ -401,14 +418,16 @@ export class SemanticMark {
                 },
                 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]
+                    const scale = params[this.getScaleId(colorChannel)], shapeScale = params[this.getScaleId("shape")];
+                    let symbolType = "circle";
+                    return shapeScale && entry.symbol ? symbolType = shapeScale.scale(getFieldAccessor(entry.symbol)(datum)) : entry.symbol && (symbolType = getFieldAccessor(entry.symbol)(datum)), 
+                    {
+                        fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : null === (_a = this.getPalette()) || void 0 === _a ? void 0 : _a[0],
+                        symbolType: symbolType
                     };
                 }
             }))) : null;
-            return !0 !== tooltipSpec.disableGraphicTooltip && res.push({
+            if (!0 !== tooltipSpec.disableGraphicTooltip && res.push({
                 type: "component",
                 componentType: ComponentEnum.tooltip,
                 target: this.getMarkId(),
@@ -416,21 +435,25 @@ export class SemanticMark {
                 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;
+            }), !0 !== tooltipSpec.disableDimensionTooltip) {
+                const channel = null !== (_a = tooltipSpec.dimensionTooltipChannel) && void 0 !== _a ? _a : "x";
+                res.push({
+                    type: "component",
+                    componentType: ComponentEnum.dimensionTooltip,
+                    tooltipType: this.getVisualChannel(channel),
+                    scale: this.getScaleId(channel),
+                    dependency: dependency,
+                    target: {
+                        data: this.getDataIdOfFiltered(),
+                        filter: null === (_b = this.spec.encode) || void 0 === _b ? void 0 : _b[channel]
+                    },
+                    title: title,
+                    content: content,
+                    avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [ this.getMarkId() ],
+                    zIndex: 1e3
+                });
+            }
+            return res;
         }
         return [];
     }
@@ -445,7 +468,7 @@ export class SemanticMark {
             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 ? {
+                const theme = this.plot ? this.plot.view.getCurrentTheme() : ThemeManager.getDefaultTheme(), 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 ? {
@@ -480,28 +503,28 @@ export class SemanticMark {
                                 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,
+                                railWidth: theme.components.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,
+                                railWidth: theme.components.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,
+                                railHeight: theme.components.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,
+                                railHeight: theme.components.slider.railHeight,
                                 railWidth: params.viewBox.width()
                             };
-                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return isPlainObject(option) ? merge({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -538,7 +561,7 @@ export class SemanticMark {
                     scale: x,
                     field: null !== (_d = null === (_c = this.spec.encode) || void 0 === _c ? void 0 : _c[channel]) && void 0 !== _d ? _d : channel
                 };
-                const markSpec = {
+                const theme = this.plot ? this.plot.view.getCurrentTheme() : ThemeManager.getDefaultTheme(), markSpec = {
                     type: "component",
                     componentType: ComponentEnum.datazoom,
                     dependency: [ SIGNAL_VIEW_BOX, dataId ],
@@ -556,7 +579,7 @@ export class SemanticMark {
                                 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
+                                    width: theme.components.datazoom.size.height
                                 }
                             } : "right" === markLayout.position ? {
                                 orient: markLayout.position,
@@ -564,7 +587,7 @@ export class SemanticMark {
                                 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
+                                    width: theme.components.datazoom.size.height
                                 }
                             } : "bottom" === markLayout.position ? {
                                 orient: markLayout.position,
@@ -572,7 +595,7 @@ export class SemanticMark {
                                 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
+                                    height: theme.components.datazoom.size.height
                                 }
                             } : {
                                 orient: markLayout.position,
@@ -580,10 +603,10 @@ export class SemanticMark {
                                 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
+                                    height: theme.components.datazoom.size.height
                                 }
                             };
-                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return isPlainObject(option) ? merge({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -599,7 +622,9 @@ export class SemanticMark {
         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;
+        return {
+            field: channel
+        };
     }
     parseLabelSpec() {
         const label = this.spec.label, res = [];
@@ -614,7 +639,7 @@ export class SemanticMark {
                         position: "content",
                         skipBeforeLayouted: !0
                     },
-                    labelStyle: isPlainObject(option) ? Object.assign({
+                    labelStyle: isPlainObject(option) ? merge({
                         position: this.getLabelPosition()
                     }, option) : {
                         position: this.getLabelPosition()
@@ -685,7 +710,7 @@ export class SemanticMark {
                                     height: 20
                                 }
                             };
-                            return isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return isPlainObject(option) ? merge({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -726,38 +751,47 @@ export class SemanticMark {
         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({
+            const encodeOption = encode[k], scaleId = this.getScaleId(k), userScale = null === (_a = this.spec.scale) || void 0 === _a ? void 0 : _a[k];
+            scales[scaleId] = userScale ? Object.assign({
                 id: scaleId
-            }, this.parseScaleByEncode(k, encodeOption), null === (_a = this.spec.scale) || void 0 === _a ? void 0 : _a[k]);
+            }, this.parseScaleByEncode(k, encodeOption), userScale, {
+                userScale: userScale
+            }) : Object.assign({
+                id: scaleId
+            }, this.parseScaleByEncode(k, encodeOption));
         })), scale && Object.keys(scale).forEach((k => {
             const scaleId = this.getScaleId(k);
-            scales[scaleId] || (scales[scaleId] = scale[k]);
+            scales[scaleId] || (scales[scaleId] = scale[k], scales[scaleId].userScale = 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 ];
+            if ("x" === k && encode[k]) {
+                if (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) {
+                    const theme = this.plot ? this.plot.view.getCurrentTheme() : ThemeManager.getDefaultTheme();
+                    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 : theme.components.datazoom.size.height ];
+                        }
+                    };
                 }
-            })) : scales[xScaleId] = {
+            } else scales[xScaleId] = {
                 type: null !== (_c = scales[scaleId].type) && void 0 !== _c ? _c : "band",
                 id: xScaleId,
                 domain: {