fix(api): update mark-level plot and apply viewStyle (#5102)

__tests__/plots/static/alphabet-interval-view-style.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalViewStyle(): G2Spec {
+  return {
+    type: 'view',
+    style: {
+      plotFill: 'red',
+    },
+    children: [
+      {
+        type: 'interval',
+        transform: [{ type: 'sortX', by: 'y', reverse: true }],
+        data: {
+          type: 'fetch',
+          value: 'data/alphabet.csv',
+        },
+        axis: {
+          y: { labelFormatter: '.0%' },
+        },
+        encode: {
+          x: 'letter',
+          y: 'frequency',
+          color: 'steelblue',
+        },
+        viewStyle: {
+          viewFill: '#4e79a7',
+          plotFill: '#f28e2c',
+          mainFill: '#e15759',
+          contentFill: '#76b7b2',
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/index.ts

@@ -231,3 +231,4 @@ export { athletesRectBinLegendStyle } from './athletes-rect-bin-legend-style';
 export { HeatmapHeatmapBasic } from './heatmap-heatmap-basic';
 export { DiamondHeatmapDensity } from './diamond-heatmap-density';
 export { basicLineNullLabel } from './basic-line-null-label';
+export { alphabetIntervalViewStyle } from './alphabet-interval-view-style';

__tests__/unit/api/options.spec.ts

@@ -103,6 +103,45 @@ describe('chart api and options', () => {
     expect(chart.getNodeByType('point')).toBeInstanceOf(Point);
   });
 
+  it('chart.options({...} should update mark.', () => {
+    const chart = new Chart({});
+
+    chart.options({
+      type: 'interval',
+    });
+
+    chart.options({
+      data: [1, 2, 3],
+    });
+
+    expect(chart.options()).toEqual({
+      type: 'view',
+      children: [
+        {
+          type: 'interval',
+          data: [1, 2, 3],
+        },
+      ],
+    });
+  });
+
+  it('chart.options({...}) should update view.', () => {
+    const chart = new Chart({});
+
+    chart.options({
+      type: 'view',
+    });
+
+    chart.options({
+      data: [1, 2, 3],
+    });
+
+    expect(chart.options()).toEqual({
+      type: 'view',
+      data: [1, 2, 3],
+    });
+  });
+
   it('chart.options({...}) should update node with same height and index.', () => {
     const chart = new Chart({});
 

src/api/chart.ts

@@ -96,6 +96,7 @@ export class Chart extends View<ChartOptions> {
   private _trailing = false;
   private _trailingResolve = null;
   private _trailingReject = null;
+  private _previousDefinedType = null;
 
   constructor(options: ChartOptions) {
     const { container, canvas, renderer, plugins, ...rest } = options || {};
@@ -146,7 +147,9 @@ export class Chart extends View<ChartOptions> {
    */
   options(options?: G2ViewTree): Chart | G2ViewTree {
     if (arguments.length === 0) return optionsOf(this);
-    updateRoot(this, options);
+    const { type } = options;
+    if (type) this._previousDefinedType = type;
+    updateRoot(this, options, this._previousDefinedType);
     return this;
   }
 

src/api/utils.ts

@@ -93,9 +93,13 @@ function isMark(type: string): boolean {
   return new Set(Object.keys(mark)).has(type);
 }
 
-function normalizeRootOptions(node: Node, options: G2ViewTree) {
+function normalizeRootOptions(
+  node: Node,
+  options: G2ViewTree,
+  previousType: string,
+) {
   const { type: oldType } = node;
-  const { type = oldType } = options;
+  const { type = previousType || oldType } = options;
   if (type === 'view') return options;
   if (typeof type !== 'string') return options;
   if (!isMark(type)) return options;
@@ -158,8 +162,12 @@ function appendNode(parent: Node, newOptions: G2ViewTree) {
 }
 
 // Update node tree from options.
-export function updateRoot(node: Node, options: G2ViewTree) {
-  const rootOptions = normalizeRootOptions(node, options);
+export function updateRoot(
+  node: Node,
+  options: G2ViewTree,
+  definedType: string,
+) {
+  const rootOptions = normalizeRootOptions(node, options, definedType);
   const discovered: [Node, Node, G2ViewTree][] = [[null, node, rootOptions]];
   while (discovered.length) {
     const [parent, oldNode, newNode] = discovered.shift();

src/runtime/plot.ts

@@ -392,11 +392,13 @@ function bubbleOptions(options: G2View): G2View {
   const {
     coordinate: viewCoordinate = {},
     interaction: viewInteraction = {},
+    style: viewStyle = {},
     marks,
     ...rest
   } = options;
   const markCoordinates = marks.map((d) => d.coordinate || {});
   const markInteractions = marks.map((d) => d.interaction || {});
+  const markViewStyles = marks.map((d) => d.viewStyle || {});
   const newCoordinate = [...markCoordinates, viewCoordinate].reduceRight(
     (prev, cur) => deepMix(prev, cur),
     {},
@@ -405,11 +407,16 @@ function bubbleOptions(options: G2View): G2View {
     (prev, cur) => deepMix(prev, cur),
     {},
   );
+  const newStyle = [...markViewStyles, viewStyle].reduce(
+    (prev, cur) => deepMix(prev, cur),
+    {},
+  );
   return {
     ...rest,
     marks,
     coordinate: newCoordinate,
     interaction: newInteraction,
+    style: newStyle,
   };
 }
 

src/runtime/types/options.ts

@@ -131,6 +131,7 @@ export type G2Mark = {
   labels?: Record<string, any>[];
   interaction?: Record<string, any>;
   coordinate?: Record<string, any>;
+  viewStyle?: Record<string, any>;
 };
 
 export type G2MarkChildrenCallback = (