feat(v2/column): support columnWidthRatio and marginRatio (#1354)

Author: lessmost

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

@@ -112,4 +112,49 @@ describe('column', () => {
       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',
+      colorField: 'series',
+      columnWidthRatio: 0.7,
+      marginRatio: 0.1,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('dodge')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+      marginRatio: 0.1,
+      dodgeRatio: 0.7,
+    });
+  });
+
+  it('stacked column columnWidthRatio/marginRatio', () => {
+    const column = new Column(createDiv('stacked column columnWidthRatio'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      colorField: 'series',
+      isStack: true,
+      columnWidthRatio: 0.7,
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+    expect(geometry.getAdjust('stack')).toMatchObject({
+      xField: 'area',
+      yField: 'sales',
+    });
+    expect(geometry.theme.columnWidthRatio).toBe(0.7);
+  });
 });

src/plots/column/adaptor.ts

@@ -1,5 +1,5 @@
 import { Geometry, Chart } from '@antv/g2';
-import { deepMix, isFunction } from '@antv/util';
+import { deepMix, isFunction, isNil } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { findGeometry } from '../../common/helper';
 import { tooltip, interaction, animation, theme } from '../../common/adaptor';
@@ -13,7 +13,7 @@ import { AXIS_META_CONFIG_KEYS } from '../../constant';
  */
 function field(params: Params<ColumnOptions>): Params<ColumnOptions> {
   const { chart, options } = params;
-  const { data, xField, yField, colorField, color, isStack } = options;
+  const { data, xField, yField, colorField, color, isStack, marginRatio } = options;
 
   chart.data(data);
   const geometry = chart.interval().position(`${xField}*${yField}`);
@@ -23,7 +23,10 @@ function field(params: Params<ColumnOptions>): Params<ColumnOptions> {
   }
 
   if (colorField && ![xField, yField].includes(colorField)) {
-    geometry.adjust(isStack ? 'stack' : 'dodge');
+    geometry.adjust({
+      type: isStack ? 'stack' : 'dodge',
+      marginRatio,
+    });
   }
 
   return params;
@@ -129,10 +132,27 @@ function label(params: Params<ColumnOptions>): Params<ColumnOptions> {
   return params;
 }
 
+/**
+ * 柱形图额外的主题设置
+ * @param params
+ */
+function columnTheme(params: Params<ColumnOptions>): Params<ColumnOptions> {
+  const { chart, options } = params;
+  const { columnWidthRatio } = options;
+
+  if (!isNil(columnWidthRatio)) {
+    chart.theme({
+      columnWidthRatio,
+    });
+  }
+
+  return params;
+}
+
 /**
  * 柱形图适配器
  * @param params
  */
 export function adaptor(params: Params<ColumnOptions>) {
-  return flow(field, meta, axis, legend, tooltip, theme, style, label, interaction, animation)(params);
+  return flow(field, meta, axis, legend, tooltip, theme, columnTheme, style, label, interaction, animation)(params);
 }

src/plots/column/types.ts

@@ -10,10 +10,10 @@ export interface ColumnOptions extends Options {
   readonly colorField?: string;
   /** 是否 堆积柱状图, 默认 分组柱状图 */
   readonly isStack?: boolean;
-  /** 柱子宽度占比 [0-1] */
+  /** 柱状图宽度占比 [0-1] */
+  readonly columnWidthRatio?: number;
+  /** 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用 */
   readonly marginRatio?: number;
-  /** 分组或堆叠内部的间距，像素值 */
-  readonly innerPadding?: number;
   /** 柱子样式配置，可选 */
   readonly columnStyle?: ShapeStyle | ((x: any, y: any, color?: any) => ShapeStyle);
 }