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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/cjs/area.js +3 -3
  2. package/cjs/area.js.map +1 -1
  3. package/cjs/cell.js +3 -3
  4. package/cjs/cell.js.map +1 -1
  5. package/cjs/circle-packing.js +4 -5
  6. package/cjs/circle-packing.js.map +1 -1
  7. package/cjs/image.js +3 -3
  8. package/cjs/image.js.map +1 -1
  9. package/cjs/interval.js +3 -3
  10. package/cjs/interval.js.map +1 -1
  11. package/cjs/line.js +3 -3
  12. package/cjs/line.js.map +1 -1
  13. package/cjs/path.js +4 -1
  14. package/cjs/path.js.map +1 -1
  15. package/cjs/plot.d.ts +6 -4
  16. package/cjs/plot.js +24 -16
  17. package/cjs/plot.js.map +1 -1
  18. package/cjs/polygon.js +3 -3
  19. package/cjs/polygon.js.map +1 -1
  20. package/cjs/rect-x.js +3 -3
  21. package/cjs/rect-x.js.map +1 -1
  22. package/cjs/rect-y.js +3 -3
  23. package/cjs/rect-y.js.map +1 -1
  24. package/cjs/rect.js +3 -3
  25. package/cjs/rect.js.map +1 -1
  26. package/cjs/rule-x.js +3 -3
  27. package/cjs/rule-x.js.map +1 -1
  28. package/cjs/rule-y.d.ts +1 -1
  29. package/cjs/rule-y.js +14 -8
  30. package/cjs/rule-y.js.map +1 -1
  31. package/cjs/rule.js +3 -3
  32. package/cjs/rule.js.map +1 -1
  33. package/cjs/sankey.js +6 -8
  34. package/cjs/sankey.js.map +1 -1
  35. package/cjs/semantic-mark.d.ts +9 -4
  36. package/cjs/semantic-mark.js +113 -77
  37. package/cjs/semantic-mark.js.map +1 -1
  38. package/cjs/sunburst.js +4 -5
  39. package/cjs/sunburst.js.map +1 -1
  40. package/cjs/symbol.d.ts +3 -1
  41. package/cjs/symbol.js +25 -3
  42. package/cjs/symbol.js.map +1 -1
  43. package/cjs/text.js +5 -3
  44. package/cjs/text.js.map +1 -1
  45. package/cjs/tree.js +4 -5
  46. package/cjs/tree.js.map +1 -1
  47. package/cjs/treemap.js +4 -5
  48. package/cjs/treemap.js.map +1 -1
  49. package/cjs/wordcloud-shape.d.ts +1 -0
  50. package/cjs/wordcloud-shape.js +12 -7
  51. package/cjs/wordcloud-shape.js.map +1 -1
  52. package/cjs/wordcloud.js +4 -5
  53. package/cjs/wordcloud.js.map +1 -1
  54. package/dist/index.js +274 -117
  55. package/dist/index.min.js +1 -1
  56. package/es/area.js +3 -3
  57. package/es/area.js.map +1 -1
  58. package/es/cell.js +3 -3
  59. package/es/cell.js.map +1 -1
  60. package/es/circle-packing.js +5 -5
  61. package/es/circle-packing.js.map +1 -1
  62. package/es/image.js +3 -3
  63. package/es/image.js.map +1 -1
  64. package/es/interval.js +4 -4
  65. package/es/interval.js.map +1 -1
  66. package/es/line.js +3 -3
  67. package/es/line.js.map +1 -1
  68. package/es/path.js +4 -1
  69. package/es/path.js.map +1 -1
  70. package/es/plot.d.ts +6 -4
  71. package/es/plot.js +25 -17
  72. package/es/plot.js.map +1 -1
  73. package/es/polygon.js +3 -3
  74. package/es/polygon.js.map +1 -1
  75. package/es/rect-x.js +3 -3
  76. package/es/rect-x.js.map +1 -1
  77. package/es/rect-y.js +3 -3
  78. package/es/rect-y.js.map +1 -1
  79. package/es/rect.js +3 -3
  80. package/es/rect.js.map +1 -1
  81. package/es/rule-x.js +3 -3
  82. package/es/rule-x.js.map +1 -1
  83. package/es/rule-y.d.ts +1 -1
  84. package/es/rule-y.js +15 -7
  85. package/es/rule-y.js.map +1 -1
  86. package/es/rule.js +3 -3
  87. package/es/rule.js.map +1 -1
  88. package/es/sankey.js +7 -7
  89. package/es/sankey.js.map +1 -1
  90. package/es/semantic-mark.d.ts +9 -4
  91. package/es/semantic-mark.js +111 -77
  92. package/es/semantic-mark.js.map +1 -1
  93. package/es/sunburst.js +5 -5
  94. package/es/sunburst.js.map +1 -1
  95. package/es/symbol.d.ts +3 -1
  96. package/es/symbol.js +25 -3
  97. package/es/symbol.js.map +1 -1
  98. package/es/text.js +5 -3
  99. package/es/text.js.map +1 -1
  100. package/es/tree.js +5 -5
  101. package/es/tree.js.map +1 -1
  102. package/es/treemap.js +5 -5
  103. package/es/treemap.js.map +1 -1
  104. package/es/wordcloud-shape.d.ts +1 -0
  105. package/es/wordcloud-shape.js +14 -6
  106. package/es/wordcloud-shape.js.map +1 -1
  107. package/es/wordcloud.js +5 -5
  108. package/es/wordcloud.js.map +1 -1
  109. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -32,13 +32,13 @@
32
32
  }
33
33
  }
34
34
 
35
- const defaultTheme = vgrammar.getTheme('default');
36
35
  let semanticMarkId = -1;
37
36
  class SemanticMark {
38
- constructor(type, id) {
37
+ constructor(type, id, plot) {
39
38
  this.type = type;
40
39
  this.uid = ++semanticMarkId;
41
40
  this._logger = vutils.Logger.getInstance();
41
+ this.plot = plot;
42
42
  this.spec = { id: id !== null && id !== void 0 ? id : `${this.type}-${this.uid}` };
43
43
  }
44
44
  parseSpec(spec) {
@@ -159,6 +159,10 @@
159
159
  this.spec.player = { data, option, layout };
160
160
  return this;
161
161
  }
162
+ getPalette() {
163
+ var _a;
164
+ return (_a = (this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme()).palette) === null || _a === void 0 ? void 0 : _a.default;
165
+ }
162
166
  setDefaultDataTransform() {
163
167
  return [];
164
168
  }
@@ -177,7 +181,7 @@
177
181
  const customizedSpec = userTransform[i];
178
182
  const index = defaultTransform.findIndex(entry => entry.type === customizedSpec.type);
179
183
  if (index >= 0) {
180
- transforms.push(Object.assign({}, defaultTransform[index], customizedSpec));
184
+ transforms.push(vutils.merge({}, defaultTransform[index], customizedSpec));
181
185
  excludeIndex.push(index);
182
186
  }
183
187
  else {
@@ -207,7 +211,7 @@
207
211
  }
208
212
  const markEncoder = {};
209
213
  Object.keys(encode).map(channel => {
210
- markEncoder[channel] = { field: encode[channel], scale: this.getScaleId(channel) };
214
+ markEncoder[channel] = { field: encode[channel], scale: this.getScaleId(channel), band: 0.5 };
211
215
  });
212
216
  return markEncoder;
213
217
  }
@@ -280,7 +284,18 @@
280
284
  data: this.getDataIdOfMain(),
281
285
  field: option
282
286
  },
283
- range: vgrammar.getPalette()
287
+ range: this.getPalette()
288
+ };
289
+ }
290
+ parseScaleOfEncodeStroke(option) {
291
+ return {
292
+ type: 'ordinal',
293
+ id: this.getScaleId('stroke'),
294
+ domain: {
295
+ data: this.getDataIdOfMain(),
296
+ field: option
297
+ },
298
+ range: this.getPalette()
284
299
  };
285
300
  }
286
301
  parseScaleOfEncodeGroup(option) {
@@ -291,7 +306,7 @@
291
306
  data: this.getDataIdOfMain(),
292
307
  field: option
293
308
  },
294
- range: vgrammar.getPalette()
309
+ range: this.getPalette()
295
310
  };
296
311
  }
297
312
  parseScaleOfCommonEncode(channel, option) {
@@ -307,6 +322,9 @@
307
322
  if (channel === 'group') {
308
323
  return this.parseScaleOfEncodeGroup(option);
309
324
  }
325
+ if (channel === 'stroke') {
326
+ return this.parseScaleOfEncodeStroke(option);
327
+ }
310
328
  return null;
311
329
  }
312
330
  setDefaultAxis() {
@@ -343,7 +361,7 @@
343
361
  verticalFactor: -1,
344
362
  end: { x: 0, y: -params.viewBox.height() }
345
363
  };
346
- return vutils.isPlainObject(option) ? Object.assign(positionAttrs, option) : positionAttrs;
364
+ return vutils.isPlainObject(option) ? vutils.merge(positionAttrs, option) : positionAttrs;
347
365
  }
348
366
  }
349
367
  };
@@ -401,6 +419,7 @@
401
419
  type: 'component',
402
420
  componentType: vgrammar.ComponentEnum.legend,
403
421
  scale: this.getScaleId(channel),
422
+ shapeScale: this.getScaleId('shape'),
404
423
  dependency: [vgrammar.SIGNAL_VIEW_BOX],
405
424
  target: {
406
425
  data: this.getDataIdOfFiltered(),
@@ -432,7 +451,7 @@
432
451
  x: (_w = (_v = (_u = element.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
433
452
  y: (_z = (_y = (_x = element.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0
434
453
  };
435
- const attrs = vutils.isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
454
+ const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
436
455
  return attrs;
437
456
  }
438
457
  }
@@ -520,13 +539,17 @@
520
539
  return null;
521
540
  }
522
541
  parseTooltipSpec() {
523
- var _a;
542
+ var _a, _b;
524
543
  const defaultTooltipSpec = this.setDefaultTooltip();
525
544
  const userTooltipSpec = this.spec.tooltip;
526
545
  if (userTooltipSpec !== false && userTooltipSpec !== null && defaultTooltipSpec !== null) {
527
546
  const res = [];
528
- const tooltipSpec = Object.assign({}, defaultTooltipSpec, userTooltipSpec === true ? {} : userTooltipSpec);
529
- const colorChannel = vutils.isNil(this.spec.encode.color) ? 'group' : 'color';
547
+ const tooltipSpec = vutils.merge({}, defaultTooltipSpec, userTooltipSpec === true ? {} : userTooltipSpec);
548
+ const colorChannel = vutils.isNil(this.spec.encode.color)
549
+ ? vutils.isNil(this.spec.encode.group)
550
+ ? 'stroke'
551
+ : 'group'
552
+ : 'color';
530
553
  const colorEncode = this.spec.encode[colorChannel];
531
554
  const dependency = colorEncode ? [this.getScaleId(colorChannel)] : [];
532
555
  const colorAccessor = colorEncode ? vgrammarUtil.field(colorEncode) : null;
@@ -537,10 +560,15 @@
537
560
  ? tooltipSpec.staticTitle
538
561
  : {
539
562
  field: (datum, el, params) => {
540
- return tooltipSpec.title && (datum === null || datum === void 0 ? void 0 : datum.length) ? vgrammarUtil.field(tooltipSpec.title)(datum[0]) : undefined;
563
+ return tooltipSpec.title
564
+ ? vgrammarUtil.field(tooltipSpec.title)(vutils.isArray(datum) ? datum[0] : datum)
565
+ : undefined;
541
566
  }
542
567
  }
543
568
  };
569
+ if (this.spec.encode.shape) {
570
+ dependency.push(this.getScaleId('shape'));
571
+ }
544
572
  const content = vutils.isArray(tooltipSpec.content) && tooltipSpec.content.length
545
573
  ? tooltipSpec.content.map((entry, index) => {
546
574
  return {
@@ -557,9 +585,17 @@
557
585
  symbol: (datum, el, params) => {
558
586
  var _a;
559
587
  const scale = params[this.getScaleId(colorChannel)];
588
+ const shapeScale = params[this.getScaleId('shape')];
589
+ let symbolType = 'circle';
590
+ if (shapeScale && entry.symbol) {
591
+ symbolType = shapeScale.scale(vgrammarUtil.field(entry.symbol)(datum));
592
+ }
593
+ else if (entry.symbol) {
594
+ symbolType = vgrammarUtil.field(entry.symbol)(datum);
595
+ }
560
596
  return {
561
- symbolType: entry.symbol ? (_a = vgrammarUtil.field(entry.symbol)(datum)) !== null && _a !== void 0 ? _a : 'circle' : 'circle',
562
- fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : vgrammar.getPalette()[0]
597
+ fill: scale && colorAccessor ? scale.scale(colorAccessor(datum)) : (_a = this.getPalette()) === null || _a === void 0 ? void 0 : _a[0],
598
+ symbolType
563
599
  };
564
600
  }
565
601
  };
@@ -577,13 +613,14 @@
577
613
  });
578
614
  }
579
615
  if (tooltipSpec.disableDimensionTooltip !== true) {
616
+ const channel = (_a = tooltipSpec.dimensionTooltipChannel) !== null && _a !== void 0 ? _a : 'x';
580
617
  res.push({
581
618
  type: 'component',
582
619
  componentType: vgrammar.ComponentEnum.dimensionTooltip,
583
- tooltipType: this.getVisualChannel('x'),
584
- scale: this.getScaleId('x'),
620
+ tooltipType: this.getVisualChannel(channel),
621
+ scale: this.getScaleId(channel),
585
622
  dependency,
586
- target: { data: this.getDataIdOfFiltered(), filter: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.x },
623
+ target: { data: this.getDataIdOfFiltered(), filter: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b[channel] },
587
624
  title,
588
625
  content,
589
626
  avoidMark: tooltipSpec.disableGraphicTooltip ? [] : [this.getMarkId()],
@@ -612,6 +649,7 @@
612
649
  this._logger.warn(`[VGrammar]: Don't use slider in a channel which has scale type = ${scaleSpec === null || scaleSpec === void 0 ? void 0 : scaleSpec.type}`);
613
650
  return;
614
651
  }
652
+ const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
615
653
  const getter = vgrammarUtil.field((_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a[channel]);
616
654
  const markLayout = layout !== null && layout !== void 0 ? layout : (vutils.isPlainObject(option) && !vutils.isNil(option.layout)
617
655
  ? option.layout === 'horizontal'
@@ -644,7 +682,7 @@
644
682
  layout: 'vertical',
645
683
  x: (_c = (_b = (_a = elment.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
646
684
  y: (_f = (_e = (_d = elment.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0,
647
- railWidth: defaultTheme.slider.railHeight,
685
+ railWidth: theme.components.slider.railHeight,
648
686
  railHeight: params.viewBox.height()
649
687
  }
650
688
  : markLayout.position === 'right'
@@ -652,7 +690,7 @@
652
690
  layout: 'vertical',
653
691
  x: (_j = (_h = (_g = elment.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
654
692
  y: (_m = (_l = (_k = elment.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0,
655
- railWidth: defaultTheme.slider.railHeight,
693
+ railWidth: theme.components.slider.railHeight,
656
694
  railHeight: params.viewBox.height()
657
695
  }
658
696
  : markLayout.position === 'bottom'
@@ -660,17 +698,17 @@
660
698
  layout: 'horizontal',
661
699
  x: (_q = (_p = (_o = elment.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
662
700
  y: (_t = (_s = (_r = elment.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height(),
663
- railHeight: defaultTheme.slider.railHeight,
701
+ railHeight: theme.components.slider.railHeight,
664
702
  railWidth: params.viewBox.width()
665
703
  }
666
704
  : {
667
705
  layout: 'horizontal',
668
706
  x: (_w = (_v = (_u = elment.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
669
707
  y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
670
- railHeight: defaultTheme.slider.railHeight,
708
+ railHeight: theme.components.slider.railHeight,
671
709
  railWidth: params.viewBox.width()
672
710
  };
673
- const attrs = vutils.isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
711
+ const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
674
712
  return attrs;
675
713
  }
676
714
  }
@@ -714,6 +752,7 @@
714
752
  field: (_d = (_c = this.spec.encode) === null || _c === void 0 ? void 0 : _c[channel]) !== null && _d !== void 0 ? _d : channel
715
753
  };
716
754
  }
755
+ const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
717
756
  const markSpec = {
718
757
  type: 'component',
719
758
  componentType: vgrammar.ComponentEnum.datazoom,
@@ -731,29 +770,29 @@
731
770
  orient: markLayout.position,
732
771
  x: (_c = (_b = (_a = elment.mark) === null || _a === void 0 ? void 0 : _a.relativePosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
733
772
  y: (_f = (_e = (_d = elment.mark) === null || _d === void 0 ? void 0 : _d.relativePosition) === null || _e === void 0 ? void 0 : _e.top) !== null && _f !== void 0 ? _f : 0,
734
- size: { height: params.viewBox.height(), width: defaultTheme.datazoom.size.height }
773
+ size: { height: params.viewBox.height(), width: theme.components.datazoom.size.height }
735
774
  }
736
775
  : markLayout.position === 'right'
737
776
  ? {
738
777
  orient: markLayout.position,
739
778
  x: (_j = (_h = (_g = elment.mark) === null || _g === void 0 ? void 0 : _g.relativePosition) === null || _h === void 0 ? void 0 : _h.left) !== null && _j !== void 0 ? _j : params.viewBox.width(),
740
779
  y: (_m = (_l = (_k = elment.mark) === null || _k === void 0 ? void 0 : _k.relativePosition) === null || _l === void 0 ? void 0 : _l.top) !== null && _m !== void 0 ? _m : 0,
741
- size: { height: params.viewBox.height(), width: defaultTheme.datazoom.size.height }
780
+ size: { height: params.viewBox.height(), width: theme.components.datazoom.size.height }
742
781
  }
743
782
  : markLayout.position === 'bottom'
744
783
  ? {
745
784
  orient: markLayout.position,
746
785
  x: (_q = (_p = (_o = elment.mark) === null || _o === void 0 ? void 0 : _o.relativePosition) === null || _p === void 0 ? void 0 : _p.left) !== null && _q !== void 0 ? _q : 0,
747
786
  y: (_t = (_s = (_r = elment.mark) === null || _r === void 0 ? void 0 : _r.relativePosition) === null || _s === void 0 ? void 0 : _s.top) !== null && _t !== void 0 ? _t : params.viewBox.height(),
748
- size: { width: params.viewBox.width(), height: defaultTheme.datazoom.size.height }
787
+ size: { width: params.viewBox.width(), height: theme.components.datazoom.size.height }
749
788
  }
750
789
  : {
751
790
  orient: markLayout.position,
752
791
  x: (_w = (_v = (_u = elment.mark) === null || _u === void 0 ? void 0 : _u.relativePosition) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : 0,
753
792
  y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
754
- size: { width: params.viewBox.width(), height: defaultTheme.datazoom.size.height }
793
+ size: { width: params.viewBox.width(), height: theme.components.datazoom.size.height }
755
794
  };
756
- const attrs = vutils.isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
795
+ const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
757
796
  return attrs;
758
797
  }
759
798
  }
@@ -776,7 +815,7 @@
776
815
  return ((_b = this._coordinate) === null || _b === void 0 ? void 0 : _b.transpose) ? 'right' : 'top';
777
816
  }
778
817
  setLabelTextGetter(channel, option) {
779
- return null;
818
+ return { field: channel };
780
819
  }
781
820
  parseLabelSpec() {
782
821
  const label = this.spec.label;
@@ -794,7 +833,7 @@
794
833
  skipBeforeLayouted: true
795
834
  },
796
835
  labelStyle: vutils.isPlainObject(option)
797
- ? Object.assign({
836
+ ? vutils.merge({
798
837
  position: this.getLabelPosition()
799
838
  }, option)
800
839
  : { position: this.getLabelPosition() },
@@ -861,7 +900,7 @@
861
900
  y: (_z = (_y = (_x = elment.mark) === null || _x === void 0 ? void 0 : _x.relativePosition) === null || _y === void 0 ? void 0 : _y.top) !== null && _z !== void 0 ? _z : 0,
862
901
  size: { width: params.viewBox.width(), height: 20 }
863
902
  };
864
- const attrs = vutils.isPlainObject(option) ? Object.assign({}, calculatedAttrs, option) : calculatedAttrs;
903
+ const attrs = vutils.isPlainObject(option) ? vutils.merge({}, calculatedAttrs, option) : calculatedAttrs;
865
904
  return attrs;
866
905
  }
867
906
  }
@@ -927,7 +966,15 @@
927
966
  var _a;
928
967
  const encodeOption = encode[k];
929
968
  const scaleId = this.getScaleId(k);
930
- scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption), (_a = this.spec.scale) === null || _a === void 0 ? void 0 : _a[k]);
969
+ const userScale = (_a = this.spec.scale) === null || _a === void 0 ? void 0 : _a[k];
970
+ if (userScale) {
971
+ scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption), userScale, {
972
+ userScale
973
+ });
974
+ }
975
+ else {
976
+ scales[scaleId] = Object.assign({ id: scaleId }, this.parseScaleByEncode(k, encodeOption));
977
+ }
931
978
  });
932
979
  }
933
980
  if (scale) {
@@ -935,6 +982,7 @@
935
982
  const scaleId = this.getScaleId(k);
936
983
  if (!scales[scaleId]) {
937
984
  scales[scaleId] = scale[k];
985
+ scales[scaleId].userScale = scale[k];
938
986
  }
939
987
  });
940
988
  }
@@ -957,6 +1005,7 @@
957
1005
  }
958
1006
  };
959
1007
  if (encode.y) {
1008
+ const theme = this.plot ? this.plot.view.getCurrentTheme() : vgrammar.ThemeManager.getDefaultTheme();
960
1009
  scales[yScaleId] = {
961
1010
  type: (_b = (_a = scales[this.getScaleId('y')]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'linear',
962
1011
  id: yScaleId,
@@ -970,8 +1019,8 @@
970
1019
  return [
971
1020
  0,
972
1021
  vutils.isPlainObject(option)
973
- ? (_b = (_a = option.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : defaultTheme.datazoom.size.height
974
- : defaultTheme.datazoom.size.height
1022
+ ? (_b = (_a = option.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : theme.components.datazoom.size.height
1023
+ : theme.components.datazoom.size.height
975
1024
  ];
976
1025
  }
977
1026
  };
@@ -1174,7 +1223,7 @@
1174
1223
  : {};
1175
1224
  }
1176
1225
  convertMarkEncode(encode) {
1177
- var _a, _b, _c, _d, _e;
1226
+ var _a, _b, _c, _d, _e, _f;
1178
1227
  const markEncoder = this.convertSimpleMarkEncode(encode);
1179
1228
  const scaleXId = this.getScaleId('x');
1180
1229
  const scaleYId = this.getScaleId('y');
@@ -1215,13 +1264,16 @@
1215
1264
  return scale.scale(baseValue);
1216
1265
  };
1217
1266
  }
1267
+ if (markEncoder.stroke) {
1268
+ res.stroke = markEncoder.stroke;
1269
+ }
1218
1270
  if (markEncoder.color || markEncoder.group) {
1219
1271
  res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
1220
1272
  }
1221
1273
  else {
1222
- res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : vgrammar.getPalette()[0];
1274
+ res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
1223
1275
  }
1224
- if (((_e = this._coordinate) === null || _e === void 0 ? void 0 : _e.type) === 'polar') {
1276
+ if (((_f = this._coordinate) === null || _f === void 0 ? void 0 : _f.type) === 'polar') {
1225
1277
  res.cx = (datum, el, params) => {
1226
1278
  const coord = params[this._coordinate.id];
1227
1279
  const origin = coord.origin();
@@ -1271,7 +1323,7 @@
1271
1323
  };
1272
1324
  }
1273
1325
  convertMarkEncode(encode) {
1274
- var _a, _b, _c;
1326
+ var _a, _b, _c, _d;
1275
1327
  const markEncoder = this.convertSimpleMarkEncode(encode);
1276
1328
  const res = {
1277
1329
  y: markEncoder.y,
@@ -1281,7 +1333,7 @@
1281
1333
  res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
1282
1334
  }
1283
1335
  else {
1284
- res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
1336
+ res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
1285
1337
  }
1286
1338
  return res;
1287
1339
  }
@@ -1320,17 +1372,20 @@
1320
1372
  };
1321
1373
  }
1322
1374
  convertMarkEncode(encode) {
1323
- var _a, _b, _c;
1375
+ var _a, _b, _c, _d;
1324
1376
  const markEncoder = this.convertSimpleMarkEncode(encode);
1325
1377
  const res = {
1326
1378
  y: markEncoder.y,
1327
1379
  x: markEncoder.x
1328
1380
  };
1381
+ if (markEncoder.stroke) {
1382
+ res.stroke = markEncoder.stroke;
1383
+ }
1329
1384
  if (markEncoder.color || markEncoder.group) {
1330
- res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
1385
+ res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
1331
1386
  }
1332
1387
  else {
1333
- res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
1388
+ res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
1334
1389
  }
1335
1390
  return res;
1336
1391
  }
@@ -1353,7 +1408,7 @@
1353
1408
  return this.parseScaleOfCommonEncode(channel, option);
1354
1409
  }
1355
1410
  convertMarkEncode(encode) {
1356
- var _a, _b, _c;
1411
+ var _a, _b, _c, _d;
1357
1412
  const markEncoder = this.convertSimpleMarkEncode(encode);
1358
1413
  const res = {
1359
1414
  x: markEncoder.x,
@@ -1369,7 +1424,7 @@
1369
1424
  res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
1370
1425
  }
1371
1426
  else {
1372
- res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
1427
+ res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
1373
1428
  }
1374
1429
  return res;
1375
1430
  }
@@ -1378,7 +1433,7 @@
1378
1433
 
1379
1434
  class RuleY extends SemanticMark {
1380
1435
  constructor(id) {
1381
- super(PlotMakType.ruleX, id);
1436
+ super(PlotMakType.ruleY, id);
1382
1437
  }
1383
1438
  setMarkType() {
1384
1439
  return vgrammar.GrammarMarkType.rule;
@@ -1392,28 +1447,32 @@
1392
1447
  return this.parseScaleOfCommonEncode(channel, option);
1393
1448
  }
1394
1449
  convertMarkEncode(encode) {
1395
- var _a, _b, _c;
1450
+ var _a, _b, _c, _d, _e, _f;
1396
1451
  const markEncoder = this.convertSimpleMarkEncode(encode);
1397
1452
  const res = {
1398
1453
  y: markEncoder.y,
1399
1454
  y1: markEncoder.y,
1400
- x: (datum, el, params) => {
1401
- return 0;
1402
- },
1403
- x1: (datum, el, params) => {
1404
- return params.viewBox.width();
1405
- }
1455
+ x: vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)
1456
+ ? { field: markEncoder.x.field[0], scale: markEncoder.x.scale }
1457
+ : (datum, el, params) => {
1458
+ return 0;
1459
+ },
1460
+ x1: vutils.isArray((_b = markEncoder.x) === null || _b === void 0 ? void 0 : _b.field)
1461
+ ? { field: markEncoder.x.field[1], scale: markEncoder.x.scale }
1462
+ : (datum, el, params) => {
1463
+ return params.viewBox.width();
1464
+ }
1406
1465
  };
1407
1466
  if (markEncoder.color || markEncoder.group) {
1408
- res.stroke = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
1467
+ res.stroke = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
1409
1468
  }
1410
1469
  else {
1411
- res.stroke = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.stroke) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
1470
+ res.stroke = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
1412
1471
  }
1413
1472
  return res;
1414
1473
  }
1415
1474
  }
1416
- RuleY.type = PlotMakType.ruleX;
1475
+ RuleY.type = PlotMakType.ruleY;
1417
1476
 
1418
1477
  class Area extends SemanticMark {
1419
1478
  constructor(id) {
@@ -1456,7 +1515,7 @@
1456
1515
  };
1457
1516
  }
1458
1517
  convertMarkEncode(encode) {
1459
- var _a, _b, _c, _d, _e;
1518
+ var _a, _b, _c, _d, _e, _f;
1460
1519
  const markEncoder = this.convertSimpleMarkEncode(encode);
1461
1520
  let res;
1462
1521
  if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
@@ -1488,11 +1547,14 @@
1488
1547
  }
1489
1548
  };
1490
1549
  }
1550
+ if (markEncoder.stroke) {
1551
+ res.stroke = markEncoder.stroke;
1552
+ }
1491
1553
  if (markEncoder.color || markEncoder.group) {
1492
1554
  res.fill = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
1493
1555
  }
1494
1556
  else {
1495
- res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : vgrammar.getPalette()[0];
1557
+ res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
1496
1558
  }
1497
1559
  return res;
1498
1560
  }
@@ -1561,15 +1623,21 @@
1561
1623
  });
1562
1624
  }
1563
1625
  constructor(option) {
1564
- this._view = new vgrammar.View(option);
1626
+ this.view = new vgrammar.View(option);
1565
1627
  this._semanticMarks = [];
1566
1628
  this._logger = vutils.Logger.getInstance();
1567
1629
  }
1630
+ theme(theme) {
1631
+ this._theme = theme;
1632
+ this.view.parseSpec({ theme });
1633
+ return this;
1634
+ }
1568
1635
  _mergeScales(scales, prevScales) {
1569
1636
  return scales.reduce((res, scale) => {
1570
1637
  if (scale.id) {
1571
- const prevScale = res.find(prev => prev.id === scale.id);
1572
- if (prevScale) {
1638
+ const prevIndex = res.findIndex(prev => prev.id === scale.id);
1639
+ if (prevIndex >= 0) {
1640
+ const prevScale = res[prevIndex];
1573
1641
  if (scale.domain.data && scale.domain.field) {
1574
1642
  if (prevScale.domain.data && prevScale.domain.field) {
1575
1643
  if (scale.domain.data === prevScale.domain.data &&
@@ -1592,7 +1660,7 @@
1592
1660
  }
1593
1661
  }
1594
1662
  else if (prevScale.domain.datas) {
1595
- const prevData = prevScale.domain.datas.find(entry => entry.data !== scale.domain.data);
1663
+ const prevData = prevScale.domain.datas.find(entry => entry.data === scale.domain.data);
1596
1664
  if (prevData && scale.domain.field !== prevData.field) {
1597
1665
  prevData.field = [].concat(prevData.field).concat(scale.domain.field);
1598
1666
  }
@@ -1607,8 +1675,12 @@
1607
1675
  }
1608
1676
  }
1609
1677
  }
1678
+ if (scale.userScale) {
1679
+ res[prevIndex] = vutils.merge(prevScale, scale.userScale);
1680
+ }
1610
1681
  }
1611
1682
  else {
1683
+ scale.userScale = null;
1612
1684
  res.push(scale);
1613
1685
  }
1614
1686
  }
@@ -1617,6 +1689,7 @@
1617
1689
  }
1618
1690
  parseViewSpec() {
1619
1691
  const spec = {
1692
+ theme: this._theme,
1620
1693
  data: [],
1621
1694
  marks: [],
1622
1695
  scales: [],
@@ -1675,31 +1748,37 @@
1675
1748
  ];
1676
1749
  return spec;
1677
1750
  }
1678
- run(runningConfig) {
1679
- if (this._view) {
1751
+ run(morphConfig) {
1752
+ if (this.view) {
1680
1753
  if (!this._hasInited) {
1681
- this._view.parseSpec(this.parseViewSpec());
1754
+ this.view.parseSpec(this.parseViewSpec());
1755
+ }
1756
+ else {
1757
+ this.view.updateSpec(this.parseViewSpec());
1682
1758
  }
1683
1759
  this._hasInited = true;
1684
- this._view.runSync(runningConfig);
1760
+ this.view.runSync(morphConfig);
1685
1761
  }
1686
1762
  return this;
1687
1763
  }
1688
- runAsync(runningConfig) {
1764
+ runAsync(morphConfig) {
1689
1765
  return __awaiter(this, void 0, void 0, function* () {
1690
- if (this._view) {
1766
+ if (this.view) {
1691
1767
  if (!this._hasInited) {
1692
- this._view.parseSpec(this.parseViewSpec());
1768
+ this.view.parseSpec(this.parseViewSpec());
1769
+ }
1770
+ else {
1771
+ this.view.updateSpec(this.parseViewSpec());
1693
1772
  }
1694
1773
  this._hasInited = true;
1695
- yield this._view.runAsync(runningConfig);
1774
+ yield this.view.runAsync(morphConfig);
1696
1775
  }
1697
1776
  return this;
1698
1777
  });
1699
1778
  }
1700
1779
  release() {
1701
- if (this._view) {
1702
- this._view.release();
1780
+ if (this.view) {
1781
+ this.view.release();
1703
1782
  }
1704
1783
  return this;
1705
1784
  }
@@ -1725,27 +1804,27 @@
1725
1804
  viewSpec.background = spec.background;
1726
1805
  viewSpec.padding = spec.padding;
1727
1806
  if (isUpdate) {
1728
- this._view.updateSpec(viewSpec);
1807
+ this.view.updateSpec(viewSpec);
1729
1808
  }
1730
1809
  else {
1731
- this._view.parseSpec(viewSpec);
1810
+ this.view.parseSpec(viewSpec);
1732
1811
  }
1733
1812
  this._hasInited = true;
1734
1813
  return this;
1735
1814
  }
1736
1815
  getImageBuffer() {
1737
1816
  var _a, _b;
1738
- return (_b = (_a = this._view) === null || _a === void 0 ? void 0 : _a.getImageBuffer) === null || _b === void 0 ? void 0 : _b.call(_a);
1817
+ return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.getImageBuffer) === null || _b === void 0 ? void 0 : _b.call(_a);
1739
1818
  }
1740
1819
  on(type, handler) {
1741
- if (this._view) {
1742
- this._view.addEventListener(type, handler);
1820
+ if (this.view) {
1821
+ this.view.addEventListener(type, handler);
1743
1822
  }
1744
1823
  return this;
1745
1824
  }
1746
1825
  off(type, handler) {
1747
- if (this._view) {
1748
- this._view.removeEventListener(type, handler);
1826
+ if (this.view) {
1827
+ this.view.removeEventListener(type, handler);
1749
1828
  }
1750
1829
  return this;
1751
1830
  }
@@ -2004,7 +2083,7 @@
2004
2083
  return this.parseScaleOfCommonEncode(channel, option);
2005
2084
  }
2006
2085
  convertMarkEncode(encode) {
2007
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2086
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2008
2087
  const markEncoder = this.convertSimpleMarkEncode(encode);
2009
2088
  const scaleXId = this.getScaleId('x');
2010
2089
  const scaleYId = this.getScaleId('y');
@@ -2056,11 +2135,14 @@
2056
2135
  };
2057
2136
  res.height = height;
2058
2137
  }
2138
+ if (markEncoder.stroke) {
2139
+ res.stroke = markEncoder.stroke;
2140
+ }
2059
2141
  if (markEncoder.color || markEncoder.group) {
2060
2142
  res.fill = (_g = markEncoder.color) !== null && _g !== void 0 ? _g : markEncoder.group;
2061
2143
  }
2062
2144
  else {
2063
- res.fill = (_j = (_h = this.spec.style) === null || _h === void 0 ? void 0 : _h.fill) !== null && _j !== void 0 ? _j : vgrammar.getPalette()[0];
2145
+ res.fill = (_j = (_h = this.spec.style) === null || _h === void 0 ? void 0 : _h.fill) !== null && _j !== void 0 ? _j : (_k = this.getPalette()) === null || _k === void 0 ? void 0 : _k[0];
2064
2146
  }
2065
2147
  return res;
2066
2148
  }
@@ -2079,6 +2161,12 @@
2079
2161
  return null;
2080
2162
  }
2081
2163
  convertMarkEncode(encode) {
2164
+ var _a, _b, _c, _d;
2165
+ const markEncoder = this.convertSimpleMarkEncode(encode);
2166
+ if (markEncoder.stroke) {
2167
+ markEncoder.stroke;
2168
+ }
2169
+ (_c = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
2082
2170
  return null;
2083
2171
  }
2084
2172
  }
@@ -2100,7 +2188,7 @@
2100
2188
  return this.parseScaleOfCommonEncode(channel, option);
2101
2189
  }
2102
2190
  convertMarkEncode(encode) {
2103
- var _a, _b, _c, _d, _e, _f, _g;
2191
+ var _a, _b, _c, _d, _e, _f, _g, _h;
2104
2192
  const markEncoder = this.convertSimpleMarkEncode(encode);
2105
2193
  const scaleXId = this.getScaleId('x');
2106
2194
  const scaleYId = this.getScaleId('y');
@@ -2122,11 +2210,14 @@
2122
2210
  return points;
2123
2211
  };
2124
2212
  }
2213
+ if (markEncoder.stroke) {
2214
+ res.stroke = markEncoder.stroke;
2215
+ }
2125
2216
  if (markEncoder.color || markEncoder.group) {
2126
2217
  res.fill = (_e = markEncoder.color) !== null && _e !== void 0 ? _e : markEncoder.group;
2127
2218
  }
2128
2219
  else {
2129
- res.fill = (_g = (_f = this.spec.style) === null || _f === void 0 ? void 0 : _f.fill) !== null && _g !== void 0 ? _g : vgrammar.getPalette()[0];
2220
+ res.fill = (_g = (_f = this.spec.style) === null || _f === void 0 ? void 0 : _f.fill) !== null && _g !== void 0 ? _g : (_h = this.getPalette()) === null || _h === void 0 ? void 0 : _h[0];
2130
2221
  }
2131
2222
  return res;
2132
2223
  }
@@ -2166,7 +2257,7 @@
2166
2257
  };
2167
2258
  }
2168
2259
  convertMarkEncode(encode) {
2169
- var _a, _b, _c, _d;
2260
+ var _a, _b, _c, _d, _e;
2170
2261
  const markEncoder = this.convertSimpleMarkEncode(encode);
2171
2262
  const scaleXId = this.getScaleId('x');
2172
2263
  const res = {
@@ -2201,11 +2292,14 @@
2201
2292
  return scale.scale(baseValue);
2202
2293
  };
2203
2294
  }
2295
+ if (markEncoder.stroke) {
2296
+ res.stroke = markEncoder.stroke;
2297
+ }
2204
2298
  if (markEncoder.color || markEncoder.group) {
2205
2299
  res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
2206
2300
  }
2207
2301
  else {
2208
- res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : vgrammar.getPalette()[0];
2302
+ res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
2209
2303
  }
2210
2304
  return res;
2211
2305
  }
@@ -2245,7 +2339,7 @@
2245
2339
  };
2246
2340
  }
2247
2341
  convertMarkEncode(encode) {
2248
- var _a, _b, _c, _d;
2342
+ var _a, _b, _c, _d, _e;
2249
2343
  const markEncoder = this.convertSimpleMarkEncode(encode);
2250
2344
  const scaleYId = this.getScaleId('y');
2251
2345
  const res = {
@@ -2280,11 +2374,14 @@
2280
2374
  return scale.scale(baseValue);
2281
2375
  };
2282
2376
  }
2377
+ if (markEncoder.stroke) {
2378
+ res.stroke = markEncoder.stroke;
2379
+ }
2283
2380
  if (markEncoder.color || markEncoder.group) {
2284
2381
  res.fill = (_b = markEncoder.color) !== null && _b !== void 0 ? _b : markEncoder.group;
2285
2382
  }
2286
2383
  else {
2287
- res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : vgrammar.getPalette()[0];
2384
+ res.fill = (_d = (_c = this.spec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : (_e = this.getPalette()) === null || _e === void 0 ? void 0 : _e[0];
2288
2385
  }
2289
2386
  return res;
2290
2387
  }
@@ -2324,7 +2421,7 @@
2324
2421
  };
2325
2422
  }
2326
2423
  convertMarkEncode(encode) {
2327
- var _a, _b, _c, _d, _e;
2424
+ var _a, _b, _c, _d, _e, _f;
2328
2425
  const markEncoder = this.convertSimpleMarkEncode(encode);
2329
2426
  const scaleXId = this.getScaleId('x');
2330
2427
  const scaleYId = this.getScaleId('y');
@@ -2377,11 +2474,14 @@
2377
2474
  return scale.scale(baseValue);
2378
2475
  };
2379
2476
  }
2477
+ if (markEncoder.stroke) {
2478
+ res.stroke = markEncoder.stroke;
2479
+ }
2380
2480
  if (markEncoder.color || markEncoder.group) {
2381
2481
  res.fill = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
2382
2482
  }
2383
2483
  else {
2384
- res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : vgrammar.getPalette()[0];
2484
+ res.fill = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.fill) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
2385
2485
  }
2386
2486
  return res;
2387
2487
  }
@@ -2404,7 +2504,7 @@
2404
2504
  return this.parseScaleOfCommonEncode(channel, option);
2405
2505
  }
2406
2506
  convertMarkEncode(encode) {
2407
- var _a, _b, _c, _d, _e;
2507
+ var _a, _b, _c, _d, _e, _f;
2408
2508
  const markEncoder = this.convertSimpleMarkEncode(encode);
2409
2509
  let res;
2410
2510
  if (vutils.isArray((_a = markEncoder.x) === null || _a === void 0 ? void 0 : _a.field)) {
@@ -2425,7 +2525,7 @@
2425
2525
  res.stroke = (_c = markEncoder.color) !== null && _c !== void 0 ? _c : markEncoder.group;
2426
2526
  }
2427
2527
  else {
2428
- res.stroke = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : vgrammar.getPalette()[0];
2528
+ res.stroke = (_e = (_d = this.spec.style) === null || _d === void 0 ? void 0 : _d.stroke) !== null && _e !== void 0 ? _e : (_f = this.getPalette()) === null || _f === void 0 ? void 0 : _f[0];
2429
2529
  }
2430
2530
  return res;
2431
2531
  }
@@ -2444,6 +2544,27 @@
2444
2544
  res.type = 'point';
2445
2545
  return res;
2446
2546
  }
2547
+ setDefaultCrosshair() {
2548
+ return {
2549
+ x: { crosshairShape: 'line' },
2550
+ y: { crosshairShape: 'line' }
2551
+ };
2552
+ }
2553
+ setDefaultTooltip() {
2554
+ var _a, _b, _c;
2555
+ return {
2556
+ disableDimensionTooltip: true,
2557
+ title: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.group,
2558
+ content: [
2559
+ {
2560
+ value: (_b = this.spec.encode) === null || _b === void 0 ? void 0 : _b.x
2561
+ },
2562
+ {
2563
+ value: (_c = this.spec.encode) === null || _c === void 0 ? void 0 : _c.y
2564
+ }
2565
+ ]
2566
+ };
2567
+ }
2447
2568
  parseScaleByEncode(channel, option) {
2448
2569
  if (channel === 'size') {
2449
2570
  return {
@@ -2469,7 +2590,7 @@
2469
2590
  return this.parseScaleOfCommonEncode(channel, option);
2470
2591
  }
2471
2592
  convertMarkEncode(encode) {
2472
- var _a, _b, _c;
2593
+ var _a, _b, _c, _d;
2473
2594
  const markEncoder = this.convertSimpleMarkEncode(encode);
2474
2595
  const res = {
2475
2596
  x: markEncoder.x,
@@ -2481,11 +2602,14 @@
2481
2602
  if (markEncoder.size) {
2482
2603
  res.size = markEncoder.size;
2483
2604
  }
2605
+ if (markEncoder.stroke) {
2606
+ res.stroke = markEncoder.stroke;
2607
+ }
2484
2608
  if (markEncoder.color || markEncoder.group) {
2485
2609
  res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
2486
2610
  }
2487
2611
  else {
2488
- res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
2612
+ res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
2489
2613
  }
2490
2614
  return res;
2491
2615
  }
@@ -2511,14 +2635,20 @@
2511
2635
  return this.parseScaleOfCommonEncode(channel, option);
2512
2636
  }
2513
2637
  convertMarkEncode(encode) {
2514
- var _a, _b, _c;
2638
+ var _a, _b, _c, _d;
2515
2639
  const markEncoder = this.convertSimpleMarkEncode(encode);
2516
2640
  const res = markEncoder;
2641
+ if (res.text) {
2642
+ res.text = { field: res.text.field };
2643
+ }
2644
+ if (markEncoder.stroke) {
2645
+ res.stroke = markEncoder.stroke;
2646
+ }
2517
2647
  if (markEncoder.color || markEncoder.group) {
2518
2648
  res.fill = (_a = markEncoder.color) !== null && _a !== void 0 ? _a : markEncoder.group;
2519
2649
  }
2520
2650
  else {
2521
- res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
2651
+ res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
2522
2652
  }
2523
2653
  return res;
2524
2654
  }
@@ -2595,13 +2725,13 @@
2595
2725
  data: this.getDataIdOfFiltered(),
2596
2726
  field: option
2597
2727
  },
2598
- range: vgrammar.getPalette()
2728
+ range: this.getPalette()
2599
2729
  };
2600
2730
  }
2601
2731
  return null;
2602
2732
  }
2603
2733
  convertMarkEncode(encode) {
2604
- var _a, _b, _c;
2734
+ var _a, _b, _c, _d;
2605
2735
  const markEncoder = this.convertSimpleMarkEncode(encode);
2606
2736
  const res = {
2607
2737
  x: { field: 'x0' },
@@ -2609,6 +2739,9 @@
2609
2739
  y: { field: 'y0' },
2610
2740
  y1: { field: 'y1' }
2611
2741
  };
2742
+ if (markEncoder.stroke) {
2743
+ res.stroke = markEncoder.stroke;
2744
+ }
2612
2745
  if (markEncoder.color) {
2613
2746
  const scaleColorId = this.getScaleId('color');
2614
2747
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -2618,7 +2751,7 @@
2618
2751
  };
2619
2752
  }
2620
2753
  else {
2621
- res.fill = (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.nodeStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
2754
+ res.fill = (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.nodeStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
2622
2755
  }
2623
2756
  return res;
2624
2757
  }
@@ -2655,7 +2788,7 @@
2655
2788
  round: true
2656
2789
  }, (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.linkStyle),
2657
2790
  update: (datum, el, params) => {
2658
- var _a, _b, _c;
2791
+ var _a, _b, _c, _d;
2659
2792
  return {
2660
2793
  direction: datum.vertical ? 'vertical' : 'horizontal',
2661
2794
  x0: datum.x0,
@@ -2663,7 +2796,7 @@
2663
2796
  y0: datum.y0,
2664
2797
  y1: datum.y1,
2665
2798
  thickness: datum.thickness,
2666
- fill: (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.linkStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0]
2799
+ fill: (_c = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.linkStyle) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0]
2667
2800
  };
2668
2801
  }
2669
2802
  })
@@ -2728,13 +2861,13 @@
2728
2861
  data: this.getDataIdOfFiltered(),
2729
2862
  field: option
2730
2863
  },
2731
- range: vgrammar.getPalette()
2864
+ range: this.getPalette()
2732
2865
  };
2733
2866
  }
2734
2867
  return null;
2735
2868
  }
2736
2869
  convertMarkEncode(encode) {
2737
- var _a, _b;
2870
+ var _a, _b, _c;
2738
2871
  const markEncoder = this.convertSimpleMarkEncode(encode);
2739
2872
  const res = {
2740
2873
  x: { field: 'x' },
@@ -2744,6 +2877,9 @@
2744
2877
  startAngle: { field: 'startAngle' },
2745
2878
  endAngle: { field: 'endAngle' }
2746
2879
  };
2880
+ if (markEncoder.stroke) {
2881
+ res.stroke = markEncoder.stroke;
2882
+ }
2747
2883
  if (markEncoder.color) {
2748
2884
  const scaleColorId = this.getScaleId('color');
2749
2885
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -2753,7 +2889,7 @@
2753
2889
  };
2754
2890
  }
2755
2891
  else {
2756
- res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : vgrammar.getPalette()[0];
2892
+ res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
2757
2893
  }
2758
2894
  return res;
2759
2895
  }
@@ -2839,13 +2975,13 @@
2839
2975
  data: this.getDataIdOfFiltered(),
2840
2976
  field: option
2841
2977
  },
2842
- range: vgrammar.getPalette()
2978
+ range: this.getPalette()
2843
2979
  };
2844
2980
  }
2845
2981
  return null;
2846
2982
  }
2847
2983
  convertMarkEncode(encode) {
2848
- var _a, _b;
2984
+ var _a, _b, _c;
2849
2985
  const markEncoder = this.convertSimpleMarkEncode(encode);
2850
2986
  const res = {
2851
2987
  x: { field: 'x0' },
@@ -2853,6 +2989,9 @@
2853
2989
  y: { field: 'y0' },
2854
2990
  y1: { field: 'y1' }
2855
2991
  };
2992
+ if (markEncoder.stroke) {
2993
+ res.stroke = markEncoder.stroke;
2994
+ }
2856
2995
  if (markEncoder.color) {
2857
2996
  const scaleColorId = this.getScaleId('color');
2858
2997
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -2862,7 +3001,7 @@
2862
3001
  };
2863
3002
  }
2864
3003
  else {
2865
- res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : vgrammar.getPalette()[0];
3004
+ res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
2866
3005
  }
2867
3006
  return res;
2868
3007
  }
@@ -2943,19 +3082,22 @@
2943
3082
  data: this.getDataIdOfFiltered(),
2944
3083
  field: option
2945
3084
  },
2946
- range: vgrammar.getPalette()
3085
+ range: this.getPalette()
2947
3086
  };
2948
3087
  }
2949
3088
  return null;
2950
3089
  }
2951
3090
  convertMarkEncode(encode) {
2952
- var _a, _b;
3091
+ var _a, _b, _c;
2953
3092
  const markEncoder = this.convertSimpleMarkEncode(encode);
2954
3093
  const res = {
2955
3094
  x: { field: 'x' },
2956
3095
  y: { field: 'y' },
2957
3096
  radius: { field: 'radius' }
2958
3097
  };
3098
+ if (markEncoder.stroke) {
3099
+ res.stroke = markEncoder.stroke;
3100
+ }
2959
3101
  if (markEncoder.color) {
2960
3102
  const scaleColorId = this.getScaleId('color');
2961
3103
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -2965,7 +3107,7 @@
2965
3107
  };
2966
3108
  }
2967
3109
  else {
2968
- res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : vgrammar.getPalette()[0];
3110
+ res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
2969
3111
  }
2970
3112
  return res;
2971
3113
  }
@@ -3050,18 +3192,21 @@
3050
3192
  data: this.getDataIdOfFiltered(),
3051
3193
  field: option
3052
3194
  },
3053
- range: vgrammar.getPalette()
3195
+ range: this.getPalette()
3054
3196
  };
3055
3197
  }
3056
3198
  return null;
3057
3199
  }
3058
3200
  convertMarkEncode(encode) {
3059
- var _a, _b;
3201
+ var _a, _b, _c;
3060
3202
  const markEncoder = this.convertSimpleMarkEncode(encode);
3061
3203
  const res = {
3062
3204
  x: { field: 'x' },
3063
3205
  y: { field: 'y' }
3064
3206
  };
3207
+ if (markEncoder.stroke) {
3208
+ res.stroke = markEncoder.stroke;
3209
+ }
3065
3210
  if (markEncoder.color) {
3066
3211
  const scaleColorId = this.getScaleId('color');
3067
3212
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -3071,7 +3216,7 @@
3071
3216
  };
3072
3217
  }
3073
3218
  else {
3074
- res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : vgrammar.getPalette()[0];
3219
+ res.fill = (_b = (_a = this.spec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : (_c = this.getPalette()) === null || _c === void 0 ? void 0 : _c[0];
3075
3220
  }
3076
3221
  return res;
3077
3222
  }
@@ -3149,13 +3294,13 @@
3149
3294
  data: this.getDataIdOfFiltered(),
3150
3295
  field: option
3151
3296
  },
3152
- range: vgrammar.getPalette()
3297
+ range: this.getPalette()
3153
3298
  };
3154
3299
  }
3155
3300
  return null;
3156
3301
  }
3157
3302
  convertMarkEncode(encode) {
3158
- var _a, _b, _c;
3303
+ var _a, _b, _c, _d;
3159
3304
  const markEncoder = this.convertSimpleMarkEncode(encode);
3160
3305
  const res = {
3161
3306
  x: { field: 'x' },
@@ -3167,6 +3312,9 @@
3167
3312
  fontWeight: { field: 'fontWeight' },
3168
3313
  text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
3169
3314
  };
3315
+ if (markEncoder.stroke) {
3316
+ res.stroke = markEncoder.stroke;
3317
+ }
3170
3318
  if (markEncoder.color) {
3171
3319
  const scaleColorId = this.getScaleId('color');
3172
3320
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -3176,7 +3324,7 @@
3176
3324
  };
3177
3325
  }
3178
3326
  else {
3179
- res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
3327
+ res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
3180
3328
  }
3181
3329
  return res;
3182
3330
  }
@@ -3209,11 +3357,17 @@
3209
3357
  },
3210
3358
  dependency: ['viewBox']
3211
3359
  },
3212
- colorList: vgrammar.getPalette(),
3360
+ colorList: this.getPalette(),
3213
3361
  text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
3214
3362
  }
3215
3363
  ];
3216
3364
  }
3365
+ setMainMarkEnterEncode() {
3366
+ return vutils.merge({
3367
+ textAlign: 'center',
3368
+ textBaseline: 'middle'
3369
+ }, this.spec.style);
3370
+ }
3217
3371
  parseScaleByEncode(channel, option) {
3218
3372
  if (channel === 'color') {
3219
3373
  return {
@@ -3223,13 +3377,13 @@
3223
3377
  data: this.getDataIdOfFiltered(),
3224
3378
  field: option
3225
3379
  },
3226
- range: vgrammar.getPalette()
3380
+ range: this.getPalette()
3227
3381
  };
3228
3382
  }
3229
3383
  return null;
3230
3384
  }
3231
3385
  convertMarkEncode(encode) {
3232
- var _a, _b, _c;
3386
+ var _a, _b, _c, _d;
3233
3387
  const markEncoder = this.convertSimpleMarkEncode(encode);
3234
3388
  const res = {
3235
3389
  x: { field: 'x' },
@@ -3242,6 +3396,9 @@
3242
3396
  fillOpacity: { field: 'opacity' },
3243
3397
  text: { field: (_a = this.spec.encode) === null || _a === void 0 ? void 0 : _a.text }
3244
3398
  };
3399
+ if (markEncoder.stroke) {
3400
+ res.stroke = markEncoder.stroke;
3401
+ }
3245
3402
  if (markEncoder.color) {
3246
3403
  const scaleColorId = this.getScaleId('color');
3247
3404
  const colorAccessor = vgrammarUtil.field(markEncoder.color.field);
@@ -3251,7 +3408,7 @@
3251
3408
  };
3252
3409
  }
3253
3410
  else {
3254
- res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : vgrammar.getPalette()[0];
3411
+ res.fill = (_c = (_b = this.spec.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this.getPalette()) === null || _d === void 0 ? void 0 : _d[0];
3255
3412
  }
3256
3413
  return res;
3257
3414
  }