@visactor/vgrammar-plot 0.6.7-alpha.1 → 0.7.0-alpha.1

package/cjs/sankey.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sankey.ts"],"names":[],"mappings":";;;AAeA,mDAA+C;AAC/C,iDAA0G;AAC1G,mCAAsC;AACtC,2DAAoE;AAGpE,MAAa,kBAAmB,SAAQ,4BAAyD;IAE/F,YAAY,EAAoB;QAC9B,KAAK,CAAC,mBAAW,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAE9B,IAAI,CAAC,IAAA,uBAAY,EAAC,mBAAW,CAAC,MAAM,CAAC,EAAE;YACrC,IAAI,CAAC,OAAO,CAAC,KAAK,CAChB;6DACqD,CACtD,CAAC;SACH;QAED,IAAI,CAAC,IAAA,mBAAQ,EAAC,UAAU,CAAC,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;;;OAGlB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,WAAW;QACT,OAAO,0BAAe,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,uBAAuB;;QACrB,OAAO;YACL;gBACE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE;gBAC9B,MAAM,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE;gBAChC,OAAO,EAAE,MAAA,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAE,IAAI;aAChC;SACF,CAAC;IACJ,CAAC;IAED,eAAe;;QACb,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,IAAI,0CAAE,EAAE,mCAAI,IAAI,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC3D,CAAC;IAED,eAAe;QACb,OAAO;YACL;gBACE,EAAE,EAAE,IAAI,CAAC,mBAAmB,EAAE;gBAC9B,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,IAAI;wBACT,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;4BACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACxB,CAAC;qBACF;iBACF;aACF;YACD;gBACE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE;gBAC9B,EAAE,EAAE,IAAI,CAAC,eAAe,EAAE;gBAC1B,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,IAAI;wBACT,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;4BAEvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACxB,CAAC;qBACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,kBAAkB,CAChB,OAA6B,EAC7B,MAAqG;QAErG,IAAI,OAAO,KAAK,OAAO,EAAE;YACvB,OAAO;gBACL,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBAC5B,MAAM,EAAE;oBACN,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE;oBAChC,KAAK,EAAE,MAAgB;iBACxB;gBACD,KAAK,EAAE,IAAA,qBAAU,GAAE;aACpB,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB,CACf,MAAsE;;QAEtE,MAAM,WAAW,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;QAEzD,MAAM,GAAG,GAA+C;YACtD,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YACnB,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;YAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;SACpB,CAAC;QAEF,IAAI,WAAW,CAAC,KAAK,EAAE;YACrB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC9C,MAAM,aAAa,GAAG,IAAA,qBAAgB,EAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAEhE,GAAG,CAAC,IAAI,GAAG,CAAC,KAAU,EAAE,EAAY,EAAE,MAAW,EAAE,EAAE;gBACnD,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;gBACnC,OAAO,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,CAAC,CAAC;YAClD,CAAC,CAAC;SACH;aAAM;YACL,GAAG,CAAC,IAAI,GAAG,MAAA,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,IAAI,mCAAI,IAAA,qBAAU,GAAE,CAAC,CAAC,CAAC,CAAC;SAChE;QAED,OAAO,GAAG,CAAC;IACb,CAAC;IAED,eAAe;QACb,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;IACxB,CAAC;IAES,kBAAkB,CAC1B,OAAe,EACf,MAAqC;QAErC,MAAM,UAAU,GAAG,IAAA,qBAAgB,EAAC,OAAO,CAAC,CAAC;QAC7C,OAAO,CAAC,KAAU,EAAE,EAAY,EAAE,MAAW,EAAE,EAAE;YAC/C,OAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC;IAED,iBAAiB;;QAEf,OAAO;YACL;gBACE,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO;gBAC9B,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,UAAU;gBACrB,IAAI,EAAE;oBACJ,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE;iBAC7B;gBACD,MAAM,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,kBAAkB,EAAE,IAAI;iBACzB;gBACD,GAAG,EAAE,OAAO;gBACZ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,0BAAe,CAAC;gBAC/E,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE;gBACtC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;oBACzC,KAAK,EAAE,MAAM,CAAC,MAAM,CAClB;wBACE,eAAe,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE;wBACxD,WAAW,EAAE,GAAG;wBAChB,KAAK,EAAE,IAAI;qBACZ,EACD,MAAA,IAAI,CAAC,IAAI,CAAC,KAAK,0CAAE,SAAS,CAC3B;oBACD,MAAM,EAAE,CAAC,KAAU,EAAE,EAAY,EAAE,MAAW,EAAE,EAAE;;wBAChD,OAAO;4BACL,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;4BACrD,EAAE,EAAE,KAAK,CAAC,EAAE;4BACZ,EAAE,EAAE,KAAK,CAAC,EAAE;4BACZ,EAAE,EAAE,KAAK,CAAC,EAAE;4BACZ,EAAE,EAAE,KAAK,CAAC,EAAE;4BACZ,SAAS,EAAE,KAAK,CAAC,SAAS;4BAC1B,IAAI,EAAE,MAAA,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,IAAI,mCAAI,IAAA,qBAAU,GAAE,CAAC,CAAC,CAAC;yBAC1D,CAAC;oBACJ,CAAC;iBACF,CAAC;aACH;SACF,CAAC;IACJ,CAAC;;AA1KH,gDA2KC;AA1KiB,uBAAI,GAAG,mBAAW,CAAC,MAAM,CAAC","file":"sankey.js","sourcesContent":["import type {\n  SankeyEncodeChannels,\n  WithDefaultEncode,\n  PlotSankeyEncoderSpec,\n  SemanticLabelOption,\n  ChannelEncodeType,\n  DataSpec,\n  GenerateBaseEncodeSpec,\n  GenerateEncoderSpec,\n  Nil,\n  ScaleSpec,\n  ValueOf,\n  TransformSpec,\n  IElement\n} from '@visactor/vgrammar';\nimport { SemanticMark } from './semantic-mark';\nimport { getPalette, GrammarMarkType, SIGNAL_VIEW_BOX, getTransform, getGlyph } from '@visactor/vgrammar';\nimport { PlotMakType } from './enums';\nimport { field as getFieldAccessor } from '@visactor/vgrammar-util';\nimport type { ITextAttribute } from '@visactor/vrender';\n\nexport class SankeySemanticMark extends SemanticMark<PlotSankeyEncoderSpec, SankeyEncodeChannels> {\n  static readonly type = PlotMakType.sankey;\n  constructor(id?: string | number) {\n    super(PlotMakType.sankey, id);\n\n    if (!getTransform(PlotMakType.sankey)) {\n      this._logger.error(\n        `Please add this line of code: import { registerSankeyTransforms } from '@visactor/vgrammar-sankey'; \n        and run registerSankeyTransforms() before use sankey`\n      );\n    }\n\n    if (!getGlyph('linkPath')) {\n      this._logger.error(`\n      Please add this line of code: import { registerLinkPathGlyph } from '@visactor/vgrammar';\n      add run registerLinkPathGlyph() before use sankey\n      `);\n    }\n  }\n\n  setMarkType() {\n    return GrammarMarkType.rect;\n  }\n\n  setDefaultDataTransform(): TransformSpec[] {\n    return [\n      {\n        type: 'sankey',\n        width: { signal: 'viewWidth' },\n        height: { signal: 'viewHeight' },\n        nodeKey: this.spec.encode?.node\n      }\n    ];\n  }\n\n  getDataIdOfLink() {\n    return `${this.spec.data?.id ?? this.spec.id}-data-link`;\n  }\n\n  setMultipleData(): DataSpec[] {\n    return [\n      {\n        id: this.getDataIdOfFiltered(),\n        transform: [\n          {\n            type: 'map',\n            all: true,\n            callback: (datum: any) => {\n              return datum[0].nodes;\n            }\n          }\n        ]\n      },\n      {\n        source: this.getDataIdOfMain(),\n        id: this.getDataIdOfLink(),\n        transform: [\n          {\n            type: 'map',\n            all: true,\n            callback: (datum: any) => {\n              // return formatLinkPath(datum[0].links);\n              return datum[0].links;\n            }\n          }\n        ]\n      }\n    ];\n  }\n\n  parseScaleByEncode(\n    channel: SankeyEncodeChannels,\n    option: ValueOf<WithDefaultEncode<PlotSankeyEncoderSpec, SankeyEncodeChannels>, SankeyEncodeChannels>\n  ): ScaleSpec | Nil {\n    if (channel === 'color') {\n      return {\n        type: 'ordinal',\n        id: this.getScaleId('color'),\n        domain: {\n          data: this.getDataIdOfFiltered(),\n          field: option as string\n        },\n        range: getPalette()\n      };\n    }\n\n    return null;\n  }\n\n  convertMarkEncode(\n    encode: WithDefaultEncode<PlotSankeyEncoderSpec, SankeyEncodeChannels>\n  ): GenerateBaseEncodeSpec<PlotSankeyEncoderSpec> {\n    const markEncoder = this.convertSimpleMarkEncode(encode);\n\n    const res: GenerateEncoderSpec<PlotSankeyEncoderSpec> = {\n      x: { field: 'x0' },\n      x1: { field: 'x1' },\n      y: { field: 'y0' },\n      y1: { field: 'y1' }\n    };\n\n    if (markEncoder.color) {\n      const scaleColorId = this.getScaleId('color');\n      const colorAccessor = getFieldAccessor(markEncoder.color.field);\n\n      res.fill = (datum: any, el: IElement, params: any) => {\n        const scale = params[scaleColorId];\n        return scale.scale(colorAccessor(datum?.datum));\n      };\n    } else {\n      res.fill = this.spec.style?.nodeStyle?.fill ?? getPalette()[0];\n    }\n\n    return res;\n  }\n\n  setMainMarkSpec() {\n    return { key: 'key' };\n  }\n\n  protected setLabelTextGetter(\n    channel: string,\n    option: SemanticLabelOption | boolean\n  ): ChannelEncodeType<ITextAttribute['text']> {\n    const textGetter = getFieldAccessor(channel);\n    return (datum: any, el: IElement, params: any) => {\n      return textGetter(datum.datum);\n    };\n  }\n\n  setMultiMarksSpec() {\n    // TODO: optimize the default style\n    return [\n      {\n        id: `${this.getMarkId()}-link`,\n        type: 'glyph',\n        glyphType: 'linkPath',\n        from: {\n          data: this.getDataIdOfLink()\n        },\n        layout: {\n          position: 'content',\n          skipBeforeLayouted: true\n        },\n        key: 'index',\n        dependency: this.viewSpec.scales.map(scale => scale.id).concat(SIGNAL_VIEW_BOX),\n        animation: this.convertMarkAnimation(),\n        encode: Object.assign({}, this.spec.state, {\n          enter: Object.assign(\n            {\n              backgroundStyle: { fillColor: '#ccc', fillOpacity: 0.2 },\n              fillOpacity: 0.8,\n              round: true\n            },\n            this.spec.style?.linkStyle\n          ),\n          update: (datum: any, el: IElement, params: any) => {\n            return {\n              direction: datum.vertical ? 'vertical' : 'horizontal',\n              x0: datum.x0,\n              x1: datum.x1,\n              y0: datum.y0,\n              y1: datum.y1,\n              thickness: datum.thickness,\n              fill: this.spec.style?.linkStyle?.fill ?? getPalette()[0]\n            };\n          }\n        })\n      }\n    ];\n  }\n}\n"]}
+{"version":3,"sources":["../src/sankey.ts"],"names":[],"mappings":"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","file":"sankey.js","sourcesContent":["import type {\n  SankeyEncodeChannels,\n  WithDefaultEncode,\n  PlotSankeyEncoderSpec,\n  SemanticLabelOption,\n  ChannelEncodeType,\n  DataSpec,\n  GenerateBaseEncodeSpec,\n  GenerateEncoderSpec,\n  Nil,\n  ScaleSpec,\n  ValueOf,\n  TransformSpec,\n  IElement\n} from '@visactor/vgrammar';\nimport { SemanticMark } from './semantic-mark';\n// eslint-disable-next-line no-duplicate-imports\nimport { GrammarMarkType, SIGNAL_VIEW_BOX, Factory } from '@visactor/vgrammar';\nimport { PlotMakType } from './enums';\nimport { field as getFieldAccessor } from '@visactor/vgrammar-util';\nimport type { ITextAttribute } from '@visactor/vrender';\n\nexport class SankeySemanticMark extends SemanticMark<PlotSankeyEncoderSpec, SankeyEncodeChannels> {\n  static readonly type = PlotMakType.sankey;\n  constructor(id?: string | number) {\n    super(PlotMakType.sankey, id);\n\n    if (!Factory.getTransform(PlotMakType.sankey)) {\n      this._logger.error(\n        `Please add this line of code: import { registerSankeyTransforms } from '@visactor/vgrammar-sankey'; \n        and run registerSankeyTransforms() before use sankey`\n      );\n    }\n\n    if (!Factory.getGlyph('linkPath')) {\n      this._logger.error(`\n      Please add this line of code: import { registerLinkPathGlyph } from '@visactor/vgrammar';\n      add run registerLinkPathGlyph() before use sankey\n      `);\n    }\n  }\n\n  setMarkType() {\n    return GrammarMarkType.rect;\n  }\n\n  setDefaultDataTransform(): TransformSpec[] {\n    return [\n      {\n        type: 'sankey',\n        width: { signal: 'viewWidth' },\n        height: { signal: 'viewHeight' },\n        nodeKey: this.spec.encode?.node\n      }\n    ];\n  }\n\n  getDataIdOfLink() {\n    return `${this.spec.data?.id ?? this.spec.id}-data-link`;\n  }\n\n  setMultipleData(): DataSpec[] {\n    return [\n      {\n        id: this.getDataIdOfFiltered(),\n        transform: [\n          {\n            type: 'map',\n            all: true,\n            callback: (datum: any) => {\n              return datum[0].nodes;\n            }\n          }\n        ]\n      },\n      {\n        source: this.getDataIdOfMain(),\n        id: this.getDataIdOfLink(),\n        transform: [\n          {\n            type: 'map',\n            all: true,\n            callback: (datum: any) => {\n              // return formatLinkPath(datum[0].links);\n              return datum[0].links;\n            }\n          }\n        ]\n      }\n    ];\n  }\n\n  parseScaleByEncode(\n    channel: SankeyEncodeChannels,\n    option: ValueOf<WithDefaultEncode<PlotSankeyEncoderSpec, SankeyEncodeChannels>, SankeyEncodeChannels>\n  ): ScaleSpec | Nil {\n    if (channel === 'color') {\n      return {\n        type: 'ordinal',\n        id: this.getScaleId('color'),\n        domain: {\n          data: this.getDataIdOfFiltered(),\n          field: option as string\n        },\n        range: this.getPalette()\n      };\n    }\n\n    return null;\n  }\n\n  convertMarkEncode(\n    encode: WithDefaultEncode<PlotSankeyEncoderSpec, SankeyEncodeChannels>\n  ): GenerateBaseEncodeSpec<PlotSankeyEncoderSpec> {\n    const markEncoder = this.convertSimpleMarkEncode(encode);\n\n    const res: GenerateEncoderSpec<PlotSankeyEncoderSpec> = {\n      x: { field: 'x0' },\n      x1: { field: 'x1' },\n      y: { field: 'y0' },\n      y1: { field: 'y1' }\n    };\n\n    if (markEncoder.stroke) {\n      res.stroke = markEncoder.stroke;\n    }\n\n    if (markEncoder.color) {\n      const scaleColorId = this.getScaleId('color');\n      const colorAccessor = getFieldAccessor(markEncoder.color.field);\n\n      res.fill = (datum: any, el: IElement, params: any) => {\n        const scale = params[scaleColorId];\n        return scale.scale(colorAccessor(datum?.datum));\n      };\n    } else {\n      res.fill = this.spec.style?.nodeStyle?.fill ?? this.getPalette()?.[0];\n    }\n\n    return res;\n  }\n\n  setMainMarkSpec() {\n    return { key: 'key' };\n  }\n\n  protected setLabelTextGetter(\n    channel: string,\n    option: SemanticLabelOption | boolean\n  ): ChannelEncodeType<ITextAttribute['text']> {\n    const textGetter = getFieldAccessor(channel);\n    return (datum: any, el: IElement, params: any) => {\n      return textGetter(datum.datum);\n    };\n  }\n\n  setMultiMarksSpec() {\n    // TODO: optimize the default style\n    return [\n      {\n        id: `${this.getMarkId()}-link`,\n        type: 'glyph',\n        glyphType: 'linkPath',\n        from: {\n          data: this.getDataIdOfLink()\n        },\n        layout: {\n          position: 'content',\n          skipBeforeLayouted: true\n        },\n        key: 'index',\n        dependency: this.viewSpec.scales.map(scale => scale.id).concat(SIGNAL_VIEW_BOX),\n        animation: this.convertMarkAnimation(),\n        encode: Object.assign({}, this.spec.state, {\n          enter: Object.assign(\n            {\n              backgroundStyle: { fillColor: '#ccc', fillOpacity: 0.2 },\n              fillOpacity: 0.8,\n              round: true\n            },\n            this.spec.style?.linkStyle\n          ),\n          update: (datum: any, el: IElement, params: any) => {\n            return {\n              direction: datum.vertical ? 'vertical' : 'horizontal',\n              x0: datum.x0,\n              x1: datum.x1,\n              y0: datum.y0,\n              y1: datum.y1,\n              thickness: datum.thickness,\n              fill: this.spec.style?.linkStyle?.fill ?? this.getPalette()?.[0]\n            };\n          }\n        })\n      }\n    ];\n  }\n}\n"]}

package/cjs/semantic-mark.d.ts

@@ -1,5 +1,5 @@
 import type { ILogger } from '@visactor/vutils';
-import type { ISemanticMark, ISemanticMarkSpec, ParsedSimpleEncode, WithDefaultEncode, SemanticTooltipOption, SemanticAxisOption, SemanticPlayerOption, SemanticLabelOption, SemanticDataZoomOption, SemanticSliderOption, SemanticLegendOption, SemanticCrosshairOption, CoordinateOption, AxisSpec, CrosshairSpec, DatazoomSpec, DimensionTooltipSpec, LabelSpec, LegendSpec, PlayerSpec, SliderSpec, TooltipSpec, CoordinateSpec, DataSpec, ChannelEncodeType, ScaleSpec, TransformSpec, MarkAnimationSpec, ViewSpec, MarkType, Nil, ValueOf, GenerateBaseEncodeSpec, IAnimationConfig, MarkSpec, MarkRelativeItemSpec } from '@visactor/vgrammar';
+import type { ISemanticMark, ISemanticMarkSpec, ParsedSimpleEncode, WithDefaultEncode, SemanticTooltipOption, SemanticAxisOption, SemanticPlayerOption, SemanticLabelOption, SemanticDataZoomOption, SemanticSliderOption, SemanticLegendOption, SemanticCrosshairOption, CoordinateOption, AxisSpec, CrosshairSpec, DatazoomSpec, DimensionTooltipSpec, LabelSpec, LegendSpec, PlayerSpec, SliderSpec, TooltipSpec, CoordinateSpec, DataSpec, ChannelEncodeType, ScaleSpec, TransformSpec, MarkAnimationSpec, ViewSpec, MarkType, Nil, ValueOf, GenerateBaseEncodeSpec, IAnimationConfig, MarkSpec, MarkRelativeItemSpec, IPlot } from '@visactor/vgrammar';
 import type { ITextAttribute } from '@visactor/vrender';
 export declare abstract class SemanticMark<EncodeSpec, K extends string> implements ISemanticMark<EncodeSpec, K> {
     spec: ISemanticMarkSpec<EncodeSpec, K>;
@@ -8,7 +8,8 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     protected _logger: ILogger;
     protected _coordinate: CoordinateOption;
     readonly type: string;
-    constructor(type: string, id?: string | number);
+    readonly plot: IPlot;
+    constructor(type: string, id?: string | number, plot?: IPlot);
     parseSpec(spec: Partial<ISemanticMarkSpec<EncodeSpec, K>>): this;
     coordinate(option: CoordinateOption): this;
     data(values: any, transform?: TransformSpec[], id?: string): this;
@@ -26,13 +27,14 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     datazoom(channel: string, option?: SemanticDataZoomOption | boolean, layout?: MarkRelativeItemSpec): this;
     label(channel: string, option?: SemanticLabelOption | boolean): this;
     player(data?: any[], option?: SemanticPlayerOption | boolean, layout?: MarkRelativeItemSpec): this;
+    protected getPalette(): import("@visactor/vrender").IColor[];
     abstract setMarkType(): MarkType;
     abstract parseScaleByEncode(channel: K, option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     abstract convertMarkEncode(encode: WithDefaultEncode<EncodeSpec, K>): GenerateBaseEncodeSpec<EncodeSpec>;
     protected setDefaultDataTransform(): TransformSpec[];
     protected setMultipleData(): DataSpec[];
     protected setDefaultMarkTransform(): TransformSpec[];
-    protected convertMarkTransform(userTransform: TransformSpec[], defaultTransform?: TransformSpec[]): TransformSpec[];
+    protected convertMarkTransform(userTransform: TransformSpec[], defaultTransform?: TransformSpec[]): any[];
     protected convertMarkAnimation(): MarkAnimationSpec;
     protected convertSimpleMarkEncode(encode: WithDefaultEncode<EncodeSpec, K>): ParsedSimpleEncode<EncodeSpec, K>;
     protected getDataIdOfFiltered(): string;
@@ -48,6 +50,7 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     protected parseScaleOfEncodeX(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfEncodeY(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfEncodeColor(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
+    protected parseScaleOfEncodeStroke(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfEncodeGroup(option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected parseScaleOfCommonEncode(channel: K, option: ValueOf<WithDefaultEncode<EncodeSpec, K>, K>): ScaleSpec | Nil;
     protected setDefaultAxis(): Record<string, Partial<AxisSpec>>;
@@ -78,7 +81,9 @@ export declare abstract class SemanticMark<EncodeSpec, K extends string> impleme
     protected setDefaultPlayer(): Record<string, Partial<PlayerSpec>>;
     protected parsePlayerSpec(): PlayerSpec[];
     protected parseDataSpec(): DataSpec[];
-    protected parseScaleSpec(): ScaleSpec[];
+    protected parseScaleSpec(): (ScaleSpec & {
+        userScale?: ScaleSpec;
+    })[];
     protected parseCoordinateSpec(): CoordinateSpec[];
     protected setMainMarkEnterEncode(): Partial<any>;
     protected setMainMarkSpec(): {};

package/cjs/semantic-mark.js

@@ -4,15 +4,14 @@ 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"), defaultTheme = (0, 
-vgrammar_1.getTheme)("default");
+const vutils_1 = require("@visactor/vutils"), vscale_1 = require("@visactor/vscale"), vgrammar_1 = require("@visactor/vgrammar"), vgrammar_util_1 = require("@visactor/vgrammar-util");
 
 let semanticMarkId = -1;
 
 class SemanticMark {
-    constructor(type, id) {
+    constructor(type, id, plot) {
         this.type = type, this.uid = ++semanticMarkId, this._logger = vutils_1.Logger.getInstance(), 
-        this.spec = {
+        this.plot = plot, this.spec = {
             id: null != id ? id : `${this.type}-${this.uid}`
         };
     }
@@ -96,6 +95,10 @@ class SemanticMark {
             layout: layout
         }, 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;
+    }
     setDefaultDataTransform() {
         return [];
     }
@@ -112,7 +115,7 @@ 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((0, vutils_1.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 +134,8 @@ 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 +206,18 @@ class SemanticMark {
                 data: this.getDataIdOfMain(),
                 field: option
             },
-            range: (0, vgrammar_1.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 +228,11 @@ class SemanticMark {
                 data: this.getDataIdOfMain(),
                 field: option
             },
-            range: (0, vgrammar_1.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 +274,7 @@ class SemanticMark {
                                     y: -params.viewBox.height()
                                 }
                             };
-                            return (0, vutils_1.isPlainObject)(option) ? Object.assign(positionAttrs, option) : positionAttrs;
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)(positionAttrs, option) : positionAttrs;
                         }
                     }
                 };
@@ -304,6 +319,7 @@ class SemanticMark {
                     type: "component",
                     componentType: vgrammar_1.ComponentEnum.legend,
                     scale: this.getScaleId(channel),
+                    shapeScale: this.getScaleId("shape"),
                     dependency: [ vgrammar_1.SIGNAL_VIEW_BOX ],
                     target: {
                         data: this.getDataIdOfFiltered(),
@@ -329,7 +345,7 @@ 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 (0, vutils_1.isPlainObject)(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -385,19 +401,21 @@ 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 = (0, 
-            vutils_1.isNil)(this.spec.encode.color) ? "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? (0, 
+            const res = [], tooltipSpec = (0, vutils_1.merge)({}, defaultTooltipSpec, !0 === userTooltipSpec ? {} : userTooltipSpec), colorChannel = (0, 
+            vutils_1.isNil)(this.spec.encode.color) ? (0, vutils_1.isNil)(this.spec.encode.group) ? "stroke" : "group" : "color", colorEncode = this.spec.encode[colorChannel], dependency = colorEncode ? [ this.getScaleId(colorChannel) ] : [], colorAccessor = colorEncode ? (0, 
             vgrammar_util_1.field)(colorEncode) : null, title = {
                 visible: !!tooltipSpec.title || !!tooltipSpec.staticTitle,
                 key: "title",
                 value: (0, vutils_1.isNil)(tooltipSpec.staticTitle) ? {
-                    field: (datum, el, params) => tooltipSpec.title && (null == datum ? void 0 : datum.length) ? (0, 
-                    vgrammar_util_1.field)(tooltipSpec.title)(datum[0]) : void 0
+                    field: (datum, el, params) => tooltipSpec.title ? (0, vgrammar_util_1.field)(tooltipSpec.title)((0, 
+                    vutils_1.isArray)(datum) ? datum[0] : datum) : void 0
                 } : tooltipSpec.staticTitle
-            }, content = (0, vutils_1.isArray)(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
+            };
+            this.spec.encode.shape && dependency.push(this.getScaleId("shape"));
+            const content = (0, vutils_1.isArray)(tooltipSpec.content) && tooltipSpec.content.length ? tooltipSpec.content.map(((entry, index) => ({
                 key: entry.key ? {
                     field: entry.key
                 } : (0, vutils_1.isNil)(tooltipSpec.staticContentKey) ? (datum, el, params) => colorAccessor ? colorAccessor(datum) : void 0 : (0, 
@@ -407,14 +425,16 @@ class SemanticMark {
                 },
                 symbol: (datum, el, params) => {
                     var _a;
-                    const scale = params[this.getScaleId(colorChannel)];
-                    return {
-                        symbolType: entry.symbol && null !== (_a = (0, vgrammar_util_1.field)(entry.symbol)(datum)) && void 0 !== _a ? _a : "circle",
-                        fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : (0, vgrammar_1.getPalette)()[0]
+                    const scale = params[this.getScaleId(colorChannel)], shapeScale = params[this.getScaleId("shape")];
+                    let symbolType = "circle";
+                    return shapeScale && entry.symbol ? symbolType = shapeScale.scale((0, vgrammar_util_1.field)(entry.symbol)(datum)) : entry.symbol && (symbolType = (0, 
+                    vgrammar_util_1.field)(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: vgrammar_1.ComponentEnum.tooltip,
                 target: this.getMarkId(),
@@ -422,21 +442,25 @@ class SemanticMark {
                 title: title,
                 content: content,
                 zIndex: 1e3
-            }), !0 !== tooltipSpec.disableDimensionTooltip && res.push({
-                type: "component",
-                componentType: vgrammar_1.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: vgrammar_1.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 [];
     }
@@ -451,7 +475,8 @@ 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 getter = (0, vgrammar_util_1.field)(null === (_a = this.spec.encode) || void 0 === _a ? void 0 : _a[channel]), markLayout = null != layout ? layout : (0, 
+                const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar_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",
                     align: "center"
@@ -487,28 +512,28 @@ 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 (0, vutils_1.isPlainObject)(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -546,7 +571,7 @@ 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() : vgrammar_1.ThemeManager.getDefaultTheme(), markSpec = {
                     type: "component",
                     componentType: vgrammar_1.ComponentEnum.datazoom,
                     dependency: [ vgrammar_1.SIGNAL_VIEW_BOX, dataId ],
@@ -564,7 +589,7 @@ 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,
@@ -572,7 +597,7 @@ 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,
@@ -580,7 +605,7 @@ 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,
@@ -588,10 +613,10 @@ 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 (0, vutils_1.isPlainObject)(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -607,7 +632,9 @@ 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 = [];
@@ -622,7 +649,7 @@ class SemanticMark {
                         position: "content",
                         skipBeforeLayouted: !0
                     },
-                    labelStyle: (0, vutils_1.isPlainObject)(option) ? Object.assign({
+                    labelStyle: (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({
                         position: this.getLabelPosition()
                     }, option) : {
                         position: this.getLabelPosition()
@@ -694,7 +721,7 @@ class SemanticMark {
                                     height: 20
                                 }
                             };
-                            return (0, vutils_1.isPlainObject)(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
+                            return (0, vutils_1.isPlainObject)(option) ? (0, vutils_1.merge)({}, calculatedAttrs, option) : calculatedAttrs;
                         }
                     }
                 };
@@ -735,38 +762,47 @@ 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: [ vgrammar_1.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, (0, vutils_1.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: [ vgrammar_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();
+                    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, (0, vutils_1.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: {