@visactor/vgrammar-plot 0.7.0-alpha.2 → 0.7.0

package/cjs/semantic-mark.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.SemanticMark = void 0;
 
-const vutils_1 = require("@visactor/vutils"), vscale_1 = require("@visactor/vscale"), vgrammar_1 = require("@visactor/vgrammar"), vgrammar_util_1 = require("@visactor/vgrammar-util");
+const vutils_1 = require("@visactor/vutils"), vscale_1 = require("@visactor/vscale"), vgrammar_core_1 = require("@visactor/vgrammar-core"), vgrammar_util_1 = require("@visactor/vgrammar-util");
 
 let semanticMarkId = -1;
 
@@ -44,7 +44,7 @@ class SemanticMark {
         return this.spec.transform = (0, vutils_1.array)(option), this;
     }
     state(state, option) {
-        if (![ vgrammar_1.BuiltInEncodeNames.enter, vgrammar_1.BuiltInEncodeNames.update, vgrammar_1.BuiltInEncodeNames.exit, vgrammar_1.BuiltInEncodeNames.group ].includes(state)) return this.spec.state || (this.spec.state = {}), 
+        if (![ vgrammar_core_1.BuiltInEncodeNames.enter, vgrammar_core_1.BuiltInEncodeNames.update, vgrammar_core_1.BuiltInEncodeNames.exit, vgrammar_core_1.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`);
     }
@@ -54,50 +54,75 @@ class SemanticMark {
         this);
     }
     axis(channel, option = !0, layout) {
-        return this.spec.axis || (this.spec.axis = {}), this.spec.axis[channel] = {
+        return vgrammar_core_1.Factory.hasComponent("axis") ? (this.spec.axis || (this.spec.axis = {}), 
+        this.spec.axis[channel] = {
             option: option,
             layout: layout
-        }, this;
+        }, this) : (this._logger.error('Please add this line of code: import { registerAxis } from \'@visactor/vgrammar-core\'; \n        and run "registerAxis();" or "View.useRegisters([registerAxis]);" '), 
+        this);
+    }
+    grid(channel, option = !0) {
+        return vgrammar_core_1.Factory.hasComponent("grid") ? (this.spec.grid || (this.spec.grid = {}), 
+        this.spec.grid[channel] = option, this) : (this._logger.error('Please add this line of code: import { registerGrid } from \'@visactor/vgrammar-core\'; \n        and run "registerGrid();" or "View.useRegisters([registerGrid]);" '), 
+        this);
     }
     legend(channel, option = !0, layout) {
-        return this.spec.legend || (this.spec.legend = {}), this.spec.legend[channel] = {
+        return vgrammar_core_1.Factory.hasComponent("legend") ? (this.spec.legend || (this.spec.legend = {}), 
+        this.spec.legend[channel] = {
             option: option,
             layout: layout
-        }, this;
+        }, this) : (this._logger.error('Please add this line of code: import { registerLegend } from \'@visactor/vgrammar-core\'; \n        and run "registerLegend();" or "View.useRegisters([registerLegend]);" '), 
+        this);
     }
     crosshair(channel, option) {
-        return this.spec.crosshair || (this.spec.crosshair = {}), this.spec.crosshair[channel] = option, 
-        this;
+        return vgrammar_core_1.Factory.hasComponent("crosshair") ? (this.spec.crosshair || (this.spec.crosshair = {}), 
+        this.spec.crosshair[channel] = option, this) : (this._logger.error('Please add this line of code: import { registerCrosshair } from \'@visactor/vgrammar-core\'; \n        and run "registerCrosshair();" or "View.useRegisters([registerCrosshair]);" '), 
+        this);
     }
     tooltip(option) {
-        return this.spec.tooltip = option, this;
+        return vgrammar_core_1.Factory.hasComponent("tooltip") ? (this.spec.tooltip = option, 
+        this) : (this._logger.error('Please add this line of code: import { registerTooltip } from \'@visactor/vgrammar-core\'; \n        and run "registerTooltip();" or "View.useRegisters([registerTooltip]);" '), 
+        this);
     }
     slider(channel, option, layout) {
-        return this.spec.slider || (this.spec.slider = {}), this.spec.slider[channel] = {
+        return vgrammar_core_1.Factory.hasComponent("slider") ? (this.spec.slider || (this.spec.slider = {}), 
+        this.spec.slider[channel] = {
             option: option,
             layout: layout
-        }, this;
+        }, this) : (this._logger.error('Please add this line of code: import { registerSlider } from \'@visactor/vgrammar-core\'; \n        and run "registerSlider();" or "View.useRegisters([registerSlider]);" '), 
+        this);
     }
     datazoom(channel, option, layout) {
-        return this.spec.datazoom || (this.spec.datazoom = {}), this.spec.datazoom[channel] = {
+        return vgrammar_core_1.Factory.hasComponent("datazoom") ? (this.spec.datazoom || (this.spec.datazoom = {}), 
+        this.spec.datazoom[channel] = {
             option: option,
             layout: layout
-        }, this;
+        }, this) : (this._logger.error('Please add this line of code: import { registerDataZoom } from \'@visactor/vgrammar-core\'; \n        and run "registerDataZoom();" or "View.useRegisters([registerDataZoom]);" '), 
+        this);
     }
     label(channel, option) {
-        return this.spec.label || (this.spec.label = {}), this.spec.label[channel] = option, 
-        this;
+        return vgrammar_core_1.Factory.hasComponent("label") ? (this.spec.label || (this.spec.label = {}), 
+        this.spec.label[channel] = option, this) : (this._logger.error('Please add this line of code: import { registerLabel } from \'@visactor/vgrammar-core\'; \n        and run "registerLabel();" or "View.useRegisters([registerLabel]);" '), 
+        this);
     }
     player(data, option, layout) {
-        return this.spec.player = {
+        return vgrammar_core_1.Factory.hasComponent("player") ? (this.spec.player = {
             data: data,
             option: option,
             layout: layout
-        }, this;
+        }, this) : (this._logger.error('Please add this line of code: import { registerPlayer } from \'@visactor/vgrammar-core\'; \n        and run "registerPlayer();" or "View.useRegisters([registerPlayer]);" '), 
+        this);
+    }
+    title(option, layout) {
+        return vgrammar_core_1.Factory.hasComponent("title") ? (this.spec.title = {
+            option: option,
+            layout: layout
+        }, this) : (this._logger.error('Please add this line of code: import { registerTitle } from \'@visactor/vgrammar-core\'; \n        and run "registerTitle();" or "View.useRegisters([registerTitle]);" '), 
+        this);
     }
     getPalette() {
         var _a;
-        return null === (_a = (this.plot ? this.plot.view.getCurrentTheme() : vgrammar_1.ThemeManager.getDefaultTheme()).palette) || void 0 === _a ? void 0 : _a.default;
+        return null === (_a = (this.plot ? this.plot.view.getCurrentTheme() : vgrammar_core_1.ThemeManager.getDefaultTheme()).palette) || void 0 === _a ? void 0 : _a.default;
     }
     setDefaultDataTransform() {
         return [];
@@ -172,7 +197,7 @@ class SemanticMark {
         return {
             type: "band",
             id: this.getScaleId("x"),
-            dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+            dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
             domain: {
                 data: this.getDataIdOfFiltered(),
                 field: option
@@ -186,7 +211,7 @@ class SemanticMark {
     parseScaleOfEncodeY(option) {
         return {
             type: "linear",
-            dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+            dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
             id: this.getScaleId("y"),
             domain: {
                 data: this.getDataIdOfFiltered(),
@@ -244,9 +269,9 @@ class SemanticMark {
             if (option) {
                 const axisMarkSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.axis,
+                    componentType: vgrammar_core_1.ComponentEnum.axis,
                     scale: this.getScaleId(channel),
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     tickCount: option.tickCount,
                     encode: {
                         update: (datum, elment, params) => {
@@ -285,6 +310,60 @@ class SemanticMark {
             }
         })), res;
     }
+    parseGridSpec() {
+        const grid = this.spec.grid, res = [];
+        return grid && Object.keys(grid).forEach((channel => {
+            var _a, _b, _c, _d, _e;
+            const option = grid[channel];
+            if (option) {
+                const relatedAxisOption = null === (_b = this.parseOption(null === (_a = this.spec.axis) || void 0 === _a ? void 0 : _a[channel])) || void 0 === _b ? void 0 : _b.option, visiualChannel = this.getVisualChannel(channel), isCircleGrid = "radius" === visiualChannel, tickCount = null !== (_c = option.tickCount) && void 0 !== _c ? _c : null == relatedAxisOption ? void 0 : relatedAxisOption.tickCount, otherChannel = "x" === channel ? "y" : "x", otherScaleId = this.getScaleId(otherChannel), otherAxisOption = null === (_e = this.parseOption(null === (_d = this.spec.axis) || void 0 === _d ? void 0 : _d[otherChannel])) || void 0 === _e ? void 0 : _e.option, markSpec = {
+                    type: "component",
+                    componentType: vgrammar_core_1.ComponentEnum.grid,
+                    scale: this.getScaleId(channel),
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX, otherScaleId ],
+                    tickCount: tickCount,
+                    inside: option.inside,
+                    baseValue: option.baseValue,
+                    gridType: "angle" === visiualChannel ? "circle" : "line",
+                    gridShape: isCircleGrid ? "polygon" === option.type ? "polygon" : "circle" : "line",
+                    encode: {
+                        update: (datum, elment, params) => {
+                            var _a, _b, _c;
+                            const positionAttrs = this._coordinate ? {} : "x" === channel ? {
+                                x: 0,
+                                y: params.viewBox.height(),
+                                start: {
+                                    x: 0,
+                                    y: 0
+                                },
+                                end: {
+                                    x: params.viewBox.width(),
+                                    y: 0
+                                },
+                                length: params.viewBox.height()
+                            } : {
+                                x: 0,
+                                y: params.viewBox.height(),
+                                start: {
+                                    x: 0,
+                                    y: 0
+                                },
+                                verticalFactor: -1,
+                                end: {
+                                    x: 0,
+                                    y: -params.viewBox.height()
+                                },
+                                length: params.viewBox.width()
+                            };
+                            return isCircleGrid && "polygon" === option.type && (positionAttrs.sides = null !== (_a = null == option ? void 0 : option.sides) && void 0 !== _a ? _a : null === (_c = null === (_b = params[otherScaleId]) || void 0 === _b ? void 0 : _b.ticks(null == otherAxisOption ? void 0 : otherAxisOption.tickCount)) || void 0 === _c ? void 0 : _c.length), 
+                            (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)(positionAttrs, option) : positionAttrs;
+                        }
+                    }
+                };
+                res.push(markSpec);
+            }
+        })), res;
+    }
     parseOption(spec) {
         let option, layout;
         return (0, vutils_1.isPlainObject)(spec) ? (0, vutils_1.isNil)(spec.option) ? option = spec : (option = spec.option, 
@@ -317,10 +396,10 @@ class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.legend,
+                    componentType: vgrammar_core_1.ComponentEnum.legend,
                     scale: this.getScaleId(channel),
                     shapeScale: this.getScaleId("shape"),
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     target: {
                         data: this.getDataIdOfFiltered(),
                         filter: null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]
@@ -369,9 +448,9 @@ class SemanticMark {
             if (option) {
                 const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.crosshair,
+                    componentType: vgrammar_core_1.ComponentEnum.crosshair,
                     scale: this.getScaleId(channel),
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     crosshairShape: (0, vutils_1.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)
                 };
@@ -436,7 +515,7 @@ class SemanticMark {
             }))) : null;
             if (!0 !== tooltipSpec.disableGraphicTooltip && res.push({
                 type: "component",
-                componentType: vgrammar_1.ComponentEnum.tooltip,
+                componentType: vgrammar_core_1.ComponentEnum.tooltip,
                 target: this.getMarkId(),
                 dependency: dependency,
                 title: title,
@@ -446,7 +525,7 @@ class SemanticMark {
                 const channel = null !== (_a = tooltipSpec.dimensionTooltipChannel) && void 0 !== _a ? _a : "x";
                 res.push({
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.dimensionTooltip,
+                    componentType: vgrammar_core_1.ComponentEnum.dimensionTooltip,
                     tooltipType: this.getVisualChannel(channel),
                     scale: this.getScaleId(channel),
                     dependency: dependency,
@@ -475,7 +554,7 @@ class SemanticMark {
             if (option) {
                 const scaleId = this.getScaleId(channel), scaleSpec = this.getScaleSpec(scaleId), dataId = this.getDataIdOfMain();
                 if (!scaleSpec || !(0, vscale_1.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 theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_1.ThemeManager.getDefaultTheme(), getter = (0, 
+                const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_core_1.ThemeManager.getDefaultTheme(), getter = (0, 
                 vgrammar_util_1.field)(null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]), markLayout = null != layout ? layout : (0, 
                 vutils_1.isPlainObject)(option) && !(0, vutils_1.isNil)(option.layout) ? "horizontal" === option.layout ? {
                     position: "top",
@@ -491,8 +570,8 @@ class SemanticMark {
                     align: "center"
                 }, markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.slider,
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX, dataId ],
+                    componentType: vgrammar_core_1.ComponentEnum.slider,
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX, dataId ],
                     min: (datum, elment, params) => {
                         const data = params[dataId];
                         return Math.min.apply(null, data.map(getter));
@@ -571,10 +650,10 @@ 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 theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_1.ThemeManager.getDefaultTheme(), markSpec = {
+                const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_core_1.ThemeManager.getDefaultTheme(), markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.datazoom,
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX, dataId ],
+                    componentType: vgrammar_core_1.ComponentEnum.datazoom,
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX, dataId ],
                     target: {
                         data: this.getDataIdOfFiltered(),
                         filter: null === (_e = this.spec.encode) || void 0 === _e ? void 0 : _e[channel]
@@ -643,7 +722,7 @@ class SemanticMark {
             if (option) {
                 const markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.label,
+                    componentType: vgrammar_core_1.ComponentEnum.label,
                     target: this.getMarkId(),
                     layout: {
                         position: "content",
@@ -682,8 +761,8 @@ class SemanticMark {
                     position: "bottom"
                 }, markSpec = {
                     type: "component",
-                    componentType: vgrammar_1.ComponentEnum.player,
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+                    componentType: vgrammar_core_1.ComponentEnum.player,
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     target: {
                         data: this.getDataIdOfMain(),
                         source: this.getDataIdOfPlayer()
@@ -730,6 +809,46 @@ class SemanticMark {
         }
         return res;
     }
+    parseTitleSpec() {
+        const title = this.spec.title, res = [];
+        if (title) {
+            const {option: option, layout: layout} = this.parseOption(title);
+            if (option) {
+                const markLayout = null != layout ? layout : {
+                    position: "top"
+                }, markSpec = {
+                    type: "component",
+                    componentType: vgrammar_core_1.ComponentEnum.title,
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
+                    title: option.text,
+                    subTitle: option.subtext,
+                    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
+                            } : "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
+                            } : "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(),
+                                width: params.viewBox.width()
+                            } : {
+                                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,
+                                width: params.viewBox.width()
+                            };
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({}, calculatedAttrs, option) : calculatedAttrs;
+                        }
+                    }
+                };
+                markSpec.layout = markLayout, res.push(markSpec);
+            }
+        }
+        return res;
+    }
     parseDataSpec() {
         var _a;
         const {data: data, player: player} = this.spec, res = [];
@@ -784,10 +903,10 @@ class SemanticMark {
                         data: this.getDataIdOfMain(),
                         field: encode[k]
                     },
-                    dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+                    dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
                     range: (scale, params) => [ 0, params.viewBox.width() ]
                 }, encode.y) {
-                    const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_1.ThemeManager.getDefaultTheme();
+                    const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_core_1.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,
@@ -819,7 +938,7 @@ class SemanticMark {
             type: null !== (_a = this._coordinate.type) && void 0 !== _a ? _a : "cartesian",
             transpose: this._coordinate.transpose,
             id: this._coordinate.id,
-            dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
+            dependency: [ vgrammar_core_1.SIGNAL_VIEW_BOX ],
             start: [ 0, 0 ],
             end: (coord, params) => [ params.viewBox.width(), params.viewBox.height() ]
         };
@@ -845,8 +964,9 @@ class SemanticMark {
         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 = marks.concat(this.parseGridSpec()), marks = marks.concat(this.parseCrosshairSpec()), 
+        marks = marks.concat(this.parseSliderSpec()), marks = marks.concat(this.parseDataZoomSpec()), 
+        marks = marks.concat(this.parsePlayerSpec()), marks = marks.concat(this.parseTitleSpec()), 
         marks.push(Object.assign({
             id: this.getMarkId(),
             type: this.setMarkType(),
@@ -859,7 +979,7 @@ class SemanticMark {
                 position: "content",
                 skipBeforeLayouted: !0
             },
-            dependency: this.viewSpec.scales.map((scale => scale.id)).concat(vgrammar_1.SIGNAL_VIEW_BOX),
+            dependency: this.viewSpec.scales.map((scale => scale.id)).concat(vgrammar_core_1.SIGNAL_VIEW_BOX),
             transform: this.convertMarkTransform(this.spec.transform, this.setDefaultMarkTransform()),
             animation: this.convertMarkAnimation(),
             encode: Object.assign({}, this.spec.state, {