feat(v2/column): extract common interval geometry (#1391)

* feat(v2/column): extract common interval geometry * feat(v2/column): remove unnecessary exports
antvis · Aug 4, 2020 · df2a20d · df2a20d
1 parent 14f564d
commit df2a20d
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 75 deletions.
diff --git a/__tests__/unit/plots/column/index-spec.ts b/__tests__/unit/plots/column/index-spec.ts
@@ -91,6 +91,7 @@ describe('column', () => {
       yField: 'sales',
     });
     expect(geometry.getAdjust('stack')).toBeUndefined();
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('grouped column /w groupField', () => {
@@ -112,6 +113,7 @@ describe('column', () => {
       yField: 'sales',
     });
     expect(geometry.getAdjust('stack')).toBeUndefined();
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('grouped column /w seriesField', () => {
@@ -133,6 +135,7 @@ describe('column', () => {
       yField: 'sales',
     });
     expect(geometry.getAdjust('stack')).toBeUndefined();
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('stacked column', () => {
@@ -154,6 +157,7 @@ describe('column', () => {
       xField: 'area',
       yField: 'sales',
     });
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('stacked column /w stackField', () => {
@@ -175,6 +179,7 @@ describe('column', () => {
       xField: 'area',
       yField: 'sales',
     });
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('stacked column /w seriesField', () => {
@@ -196,6 +201,7 @@ describe('column', () => {
       xField: 'area',
       yField: 'sales',
     });
+    expect(geometry.getAttribute('color')?.getFields()).toEqual(['series']);
   });
 
   it('grouped column columnWidthRatio/marginRatio', () => {

diff --git a/src/adaptor/geometries/index.ts b/src/adaptor/geometries/index.ts
@@ -1,3 +1,4 @@
 export { area, AreaGeometryOptions } from './area';
 export { line, LineGeometryOptions } from './line';
 export { point, PointGeometryOptions } from './point';
+export { interval, IntervalGeometryOptions } from './interval';
diff --git a/src/adaptor/geometries/interval.ts b/src/adaptor/geometries/interval.ts
@@ -0,0 +1,96 @@
+import { isNil, isFunction } from '@antv/util';
+import { Params } from '../../core/adaptor';
+import { Options } from '../../types';
+import { ShapeStyle } from '../../types/style';
+
+export interface IntervalGeometryOptions extends Options {
+  /** x 轴字段 */
+  readonly xField: string;
+  /** y 轴字段 */
+  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;
+  /** 柱子样式配置 */
+  readonly interval?: {
+    /** 柱状图宽度占比 [0-1] */
+    readonly widthRatio?: number;
+    /** 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用 */
+    readonly marginRatio?: number;
+    /** 柱子样式配置，可选 */
+    readonly style?: ShapeStyle | ((x: any, y: any, color?: any) => ShapeStyle);
+  };
+}
+
+function getGroupField(params: Params<IntervalGeometryOptions>): string {
+  const { options } = params;
+  const { groupField, seriesField, colorField } = options;
+
+  return groupField || seriesField || colorField;
+}
+
+function getStackField(params: Params<IntervalGeometryOptions>): string {
+  const { options } = params;
+  const { stackField, seriesField, colorField } = options;
+
+  return stackField || seriesField || colorField;
+}
+
+export function interval<O extends IntervalGeometryOptions>(params: Params<O>): Params<O> {
+  const { chart, options } = params;
+  const { xField, yField, colorField, color, isGroup, isStack, interval } = options;
+  let realColorField = colorField;
+
+  if (interval) {
+    const { marginRatio, widthRatio, style } = interval;
+    const geometry = chart.interval().position(`${xField}*${yField}`);
+
+    // field
+    if (isGroup) {
+      realColorField = getGroupField(params);
+      geometry.color(realColorField, color);
+      geometry.adjust({
+        type: 'dodge',
+        marginRatio,
+      });
+    } else if (isStack) {
+      realColorField = getStackField(params);
+      geometry.color(getStackField(params), color);
+      geometry.adjust({
+        type: 'stack',
+        marginRatio,
+      });
+    } else {
+      if (colorField) {
+        geometry.color(colorField, color);
+      }
+    }
+
+    // widthRatio
+    if (!isNil(widthRatio)) {
+      chart.theme({
+        columnWidthRatio: widthRatio,
+      });
+    }
+
+    // style
+    if (style) {
+      if (isFunction(style)) {
+        geometry.style(`${xField}*${yField}*${realColorField}`, style);
+      } else {
+        geometry.style(style);
+      }
+    }
+  }
+
+  return params;
+}
diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts
@@ -1,53 +1,33 @@
-import { deepMix, isFunction, isNil } from '@antv/util';
+import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { findGeometry } from '../../common/helper';
 import { tooltip, interaction, animation, theme } from '../../adaptor/common';
+import { interval } from '../../adaptor/geometries';
 import { flow, pick } from '../../utils';
 import { ColumnOptions } from './types';
 import { AXIS_META_CONFIG_KEYS } from '../../constant';
 
-export function getGroupField(params: Params<ColumnOptions>): string {
-  const { options } = params;
-  const { groupField, seriesField, colorField } = options;
-
-  return groupField || seriesField || colorField;
-}
-
-export 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> {
+function geometry(params: Params<ColumnOptions>): Params<ColumnOptions> {
   const { chart, options } = params;
-  const { data, xField, yField, colorField, color, isGroup, isStack, marginRatio } = options;
+  const { data, columnStyle, columnWidthRatio, marginRatio } = options;
 
   chart.data(data);
-  const geometry = chart.interval().position(`${xField}*${yField}`);
 
-  if (isGroup) {
-    geometry.color(getGroupField(params), color);
-    geometry.adjust({
-      type: 'dodge',
-      marginRatio,
-    });
-  } else if (isStack) {
-    geometry.color(getStackField(params), color);
-    geometry.adjust({
-      type: 'stack',
-      marginRatio,
-    });
-  } else {
-    if (colorField) {
-      geometry.color(colorField, color);
-    }
-  }
+  flow(interval)(
+    deepMix({}, params, {
+      options: {
+        interval: {
+          marginRatio,
+          widthRatio: columnWidthRatio,
+          style: columnStyle,
+        },
+      },
+    })
+  );
 
   return params;
 }
@@ -100,31 +80,17 @@ function axis(params: Params<ColumnOptions>): Params<ColumnOptions> {
  */
 function legend(params: Params<ColumnOptions>): Params<ColumnOptions> {
   const { chart, options } = params;
-  const { legend, colorField } = options;
-
-  if (legend && colorField) {
-    chart.legend(colorField, legend);
-  }
-
-  return params;
-}
-
-/**
- * 样式
- * @param params
- */
-function style(params: Params<ColumnOptions>): Params<ColumnOptions> {
-  const { chart, options } = params;
-  const { xField, yField, colorField, columnStyle } = options;
-
+  const { legend } = options;
   const geometry = findGeometry(chart, 'interval');
-  if (columnStyle && geometry) {
-    if (isFunction(columnStyle)) {
-      geometry.style(`${xField}*${yField}*${colorField}`, columnStyle);
-    } else {
-      geometry.style(columnStyle);
+  const colorAttribute = geometry.getAttribute('color');
+
+  if (legend && colorAttribute) {
+    const colorFields = colorAttribute.getFields();
+    if (colorFields.length > 0) {
+      chart.legend(colorFields[0], legend);
     }
   }
+
   return params;
 }
 
@@ -152,27 +118,10 @@ 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, columnTheme, style, label, interaction, animation)(params);
+  return flow(geometry, meta, axis, legend, tooltip, theme, label, interaction, animation)(params);
 }