feat(v2/column): support groupField/stackField options (#1377)

Author: lessmost

__tests__/unit/plots/column/index-spec.ts

@@ -80,6 +80,49 @@ describe('column', () => {
       xField: 'area',
       yField: 'sales',
       colorField: 'series',
+      isGroup: true,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+    });
+    expect(geometry.getAdjust('stack')).toBeUndefined();
+  });
+
+  it('grouped column /w groupField', () => {
+    const column = new Column(createDiv('grouped column /w groupField'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      groupField: 'series',
+      isGroup: true,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+    });
+    expect(geometry.getAdjust('stack')).toBeUndefined();
+  });
+
+  it('grouped column /w seriesField', () => {
+    const column = new Column(createDiv('grouped column /w seriesField'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      seriesField: 'series',
+      isGroup: true,
     });
 
     column.render();
@@ -113,13 +156,56 @@ describe('column', () => {
     });
   });
 
+  it('stacked column /w stackField', () => {
+    const column = new Column(createDiv('stacked column /w stackField'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      stackField: 'series',
+      isStack: true,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toBeUndefined();
+    expect(geometry.getAdjust('stack')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+    });
+  });
+
+  it('stacked column /w seriesField', () => {
+    const column = new Column(createDiv('stacked column /w seriesField'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      seriesField: 'series',
+      isStack: true,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toBeUndefined();
+    expect(geometry.getAdjust('stack')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+    });
+  });
+
   it('grouped column columnWidthRatio/marginRatio', () => {
     const column = new Column(createDiv('grouped column columnWidthRatio'), {
       width: 400,
       height: 300,
       data: subSalesByArea,
       xField: 'area',
       yField: 'sales',
+      isGroup: true,
       colorField: 'series',
       columnWidthRatio: 0.7,
       marginRatio: 0.1,

__tests__/unit/plots/column/label-spec.ts

@@ -96,6 +96,7 @@ describe('column label', () => {
       xField: 'area',
       yField: 'sales',
       colorField: 'series',
+      isGroup: true,
       meta: {
         sales: {
           nice: true,
@@ -131,6 +132,7 @@ describe('column label', () => {
       xField: 'area',
       yField: 'sales',
       colorField: 'series',
+      isGroup: true,
       meta: {
         sales: {
           nice: true,
@@ -166,6 +168,7 @@ describe('column label', () => {
       xField: 'area',
       yField: 'sales',
       colorField: 'series',
+      isGroup: true,
       meta: {
         sales: {
           nice: true,

src/plots/column/adaptor.ts

@@ -6,26 +6,47 @@ import { flow, pick } from '../../utils';
 import { ColumnOptions } from './types';
 import { AXIS_META_CONFIG_KEYS } from '../../constant';
 
+function getGroupField(params: Params<ColumnOptions>): string {
+  const { options } = params;
+  const { groupField, seriesField, colorField } = options;
+
+  return groupField || seriesField || colorField;
+}
+
+function getStackField(params: Params<ColumnOptions>): string {
+  const { options } = params;
+  const { stackField, seriesField, colorField } = options;
+
+  return stackField || seriesField || colorField;
+}
+
 /**
  * 字段
  * @param params
  */
 function field(params: Params<ColumnOptions>): Params<ColumnOptions> {
   const { chart, options } = params;
-  const { data, xField, yField, colorField, color, isStack, marginRatio } = options;
+  const { data, xField, yField, colorField, color, isGroup, isStack, marginRatio } = options;
 
   chart.data(data);
   const geometry = chart.interval().position(`${xField}*${yField}`);
 
-  if (colorField) {
-    geometry.color(colorField, color);
-  }
-
-  if (colorField && ![xField, yField].includes(colorField)) {
+  if (isGroup) {
+    geometry.color(getGroupField(params), color);
+    geometry.adjust({
+      type: 'dodge',
+      marginRatio,
+    });
+  } else if (isStack) {
+    geometry.color(getStackField(params), color);
     geometry.adjust({
-      type: isStack ? 'stack' : 'dodge',
+      type: 'stack',
       marginRatio,
     });
+  } else {
+    if (colorField) {
+      geometry.color(colorField, color);
+    }
   }
 
   return params;

src/plots/column/types.ts

@@ -8,8 +8,16 @@ export interface ColumnOptions extends Options {
   readonly yField: string;
   /** 颜色字段，可选 */
   readonly colorField?: string;
-  /** 是否 堆积柱状图, 默认 分组柱状图 */
+  /** 拆分字段，在分组柱状图下同 groupField、colorField，在堆积柱状图下同 stackField、colorField  */
+  readonly seriesField?: string;
+  /** 是否分组柱形图 */
+  readonly isGroup?: boolean;
+  /** 分组拆分字段 */
+  readonly groupField?: string;
+  /** 是否堆积柱状图 */
   readonly isStack?: boolean;
+  /** 堆积拆分字段 */
+  readonly stackField?: string;
   /** 柱状图宽度占比 [0-1] */
   readonly columnWidthRatio?: number;
   /** 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用 */