feat(coordinate): 支持 coordinate 坐标转换配置 (#3172)

Author: visiky

__tests__/bugs/bar-axis-label-spec.ts

@@ -24,7 +24,7 @@ describe('bar yaxis formatter', () => {
       yField: 'type',
       xAxis: {
         label: {
-          formatter: (v) => 'hello',
+          formatter: () => 'hello',
         },
       },
     });

__tests__/unit/plots/area/change-data-spec.ts

@@ -1,5 +1,5 @@
 import { Area } from '../../../../src';
-import { getDataWhetherPecentage } from '../../../../src/utils/transform/percent';
+import { getDataWhetherPercentage } from '../../../../src/utils/transform/percent';
 import { partySupport } from '../../../data/party-support';
 import { createDiv } from '../../../utils/dom';
 
@@ -69,7 +69,7 @@ describe('area', () => {
     expect(area.chart.geometries[1].elements.length).toBe(2);
     expect(area.options.data).toEqual(partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)));
     const { data, isPercent, xField, yField } = area.options;
-    expect(area.chart.getData()).toEqual(getDataWhetherPecentage(data, yField, xField, yField, isPercent));
+    expect(area.chart.getData()).toEqual(getDataWhetherPercentage(data, yField, xField, yField, isPercent));
 
     area.destroy();
   });

__tests__/unit/plots/word-cloud/legend-spec.ts

@@ -1,4 +1,3 @@
-import { groupBy, keys } from '@antv/util';
 import { WordCloud } from '../../../../src';
 import { CountryEconomy } from '../../../data/country-economy';
 import { createDiv } from '../../../utils/dom';

docs/api/plots/area.en.md

@@ -29,6 +29,8 @@ Grouping field. For example, when we need to analyze the transaction volume tren
 
 ### Graphic Style
 
+`markdown:docs/common/coordinate.en.md`
+
 #### smooth
 
 <description>**optional** _boolean_ _default:_ `false`</description>

docs/api/plots/area.zh.md

@@ -29,6 +29,8 @@ order: 1
 
 ### 图形样式
 
+`markdown:docs/common/coordinate.zh.md`
+
 #### smooth
 
 <description>**optional** _boolean_ _default:_ `false`</description>

docs/api/plots/bar.en.md

@@ -59,6 +59,8 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true
 
 ### Graphic Style
 
+`markdown:docs/common/coordinate.en.md`
+
 `markdown:docs/common/color.en.md`
 
 #### pattern ✨

docs/api/plots/bar.zh.md

@@ -59,6 +59,8 @@ order: 3
 
 ### 图形样式
 
+`markdown:docs/common/coordinate.zh.md`
+
 `markdown:docs/common/color.zh.md`
 
 #### pattern ✨

docs/api/plots/column.en.md

@@ -59,6 +59,8 @@ Whether to percent columns, if isPercent is true, isStack also needs to be true.
 
 ### Geometry Style
 
+`markdown:docs/common/coordinate.en.md`
+
 `markdown:docs/common/color.en.md`
 
 #### pattern ✨

docs/api/plots/column.zh.md

@@ -61,6 +61,8 @@ order: 2
 
 ### 图形样式
 
+`markdown:docs/common/coordinate.zh.md`
+
 `markdown:docs/common/color.zh.md`
 
 #### pattern ✨

docs/common/coordinate.en.md

@@ -0,0 +1,20 @@
+#### coordinate
+
+<description>**optional** _Transformation[] _</description>
+
+Transformations of coordinate;
+
+Types of _Transformation_ are as follows:
+
+```ts
+type Transformation =
+  | {
+      type: 'reflectX'; // send (x, y) to (-x, y)
+    }
+  | {
+      type: 'reflectY'; // send (x, y) to (x, -y)
+    }
+  | {
+      type: 'transpose'; // send (x, y) to (y, x)
+    };
+```

docs/common/coordinate.zh.md

@@ -0,0 +1,20 @@
+#### coordinate
+
+<description>**optional** _Transformation[] _</description>
+
+坐标转换配置。
+
+__Transformation_ 类型定义如下:
+
+```ts
+type Transformation =
+  | {
+      type: 'reflectX'; // send (x, y) to (-x, y)
+    }
+  | {
+      type: 'reflectY'; // send (x, y) to (x, -y)
+    }
+  | {
+      type: 'transpose'; // send (x, y) to (y, x)
+    };
+```

examples/bar/basic/demo/coordinate.ts

@@ -0,0 +1,22 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  { year: '1951 年', value: 38 },
+  { year: '1952 年', value: 52 },
+  { year: '1956 年', value: 61 },
+  { year: '1957 年', value: 145 },
+  { year: '1958 年', value: 48 },
+];
+
+const bar = new Bar('container', {
+  data,
+  xField: 'value',
+  yField: 'year',
+  seriesField: 'year',
+  legend: {
+    position: 'top-left',
+  },
+  coordinate: [{ type: 'reflectX' }, { type: 'reflectY' }],
+});
+
+bar.render();

examples/bar/basic/demo/meta.json

@@ -12,6 +12,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rWp4Sq5ofk/10256978-7f35-4a4c-b67c-39aaad269bc2.png"
     },
+    {
+      "filename": "coordinate.ts",
+      "title": {
+        "zh": "条形图设置坐标转换",
+        "en": "Bar plot with coordinate transformations"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/l41r3at5bs/becb13e0-3dc7-41e2-9458-651f6da6cdc3.png"
+    },
     {
       "filename": "color.ts",
       "title": {

examples/column/basic/demo/coordinate.ts

@@ -0,0 +1,68 @@
+import { Column } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const columnPlot = new Column('container', {
+  data,
+  xField: 'type',
+  yField: 'sales',
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'top', 'bottom', 'middle',
+    // 配置样式
+    style: {
+      fill: '#FFFFFF',
+      opacity: 0.6,
+    },
+  },
+  xAxis: {
+    label: {
+      autoHide: true,
+      autoRotate: false,
+    },
+  },
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+  coordinate: [{ type: 'reflectY' }],
+});
+
+columnPlot.render();

examples/column/basic/demo/meta.json

@@ -12,6 +12,15 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*KAg2TY-oYRUAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "coordinate.ts",
+      "title": {
+        "zh": "倒转柱状图",
+        "en": "Column plot reflectY"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pgIqf6yZuq/510565ac-e2d6-4869-b71e-da8c5c12bd87.png"
+    },
     {
       "filename": "color.ts",
       "title": {

examples/plugin/multi-view/demo/meta.json

@@ -74,6 +74,7 @@
         "zh": "定制股票图",
         "en": "Customized stock"
       },
+      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26P96Yg5fKh/78f5836e-efde-409d-a5b6-7dfe91cd2d04.png"
     }
   ]

gatsby-config.js

@@ -320,8 +320,8 @@ module.exports = {
       indexName: 'antv_g2plot',
     },
     announcement: {
-      zh: '✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide',
-      en: '✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide',
+      zh: '1. ✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide 2. 柱状图、条形图、面积图支持配置坐标系转换',
+      en: '1. ✨欢迎订阅图表指引，不定时会更新: https://www.yuque.com/antv/g2plot/plot-guide 2. 柱状图、条形图、面积图支持配置坐标系转换',
     }
   },
 };

src/adaptor/common.ts

@@ -1,8 +1,9 @@
-import { Geometry } from '@antv/g2';
+import { Geometry, Types } from '@antv/g2';
 import { each, isNil, isObject } from '@antv/util';
 import { Params } from '../core/adaptor';
 import { Options } from '../types';
 import { Interaction } from '../types/interaction';
+import { Transformations } from '../types/coordinate';
 import { Axis } from '../types/axis';
 import { AXIS_META_CONFIG_KEYS } from '../constant';
 import { pick, deepAssign } from '../utils';
@@ -207,4 +208,30 @@ export function limitInPlot(params: Params<Options>): Params<Options> {
   return params;
 }
 
+/**
+ * 坐标系转换
+ */
+export function transformations(coordinateType: Types.CoordinateOption['type'] = 'rect') {
+  return (params: Params<Options & { coordinate: Transformations }>) => {
+    const { chart, options } = params;
+    const { coordinate } = options;
+
+    const actions: Types.CoordinateActions[] = Array.from(coordinate || [])
+      .map((cfg) => {
+        if (cfg.type === 'reflectX') return ['reflect', 'x'] as Types.CoordinateActions;
+        if (cfg.type === 'reflectY') return ['reflect', 'y'] as Types.CoordinateActions;
+        if (cfg.type === 'transpose') return ['transpose'] as Types.CoordinateActions;
+
+        return null;
+      })
+      .filter((d) => !!d);
+
+    if (actions.length !== 0) {
+      chart.coordinate({ type: coordinateType, actions });
+    }
+
+    return params;
+  };
+}
+
 export { pattern } from './pattern';

src/plots/area/adaptor.ts

@@ -1,11 +1,21 @@
 import { Geometry } from '@antv/g2';
 import { each, omit } from '@antv/util';
-import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot, pattern } from '../../adaptor/common';
+import {
+  tooltip,
+  slider,
+  interaction,
+  animation,
+  theme,
+  annotation,
+  limitInPlot,
+  pattern,
+  transformations,
+} from '../../adaptor/common';
 import { findGeometry } from '../../utils';
 import { Params } from '../../core/adaptor';
 import { area, point, line } from '../../adaptor/geometries';
 import { flow, transformLabel, deepAssign } from '../../utils';
-import { getDataWhetherPecentage } from '../../utils/transform/percent';
+import { getDataWhetherPercentage } from '../../utils/transform/percent';
 import { Datum } from '../../types';
 import { meta, legend, axis } from '../line/adaptor';
 import { AreaOptions } from './types';
@@ -33,7 +43,7 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
   } = options;
   const pointState = pointMapping?.state;
 
-  const chartData = getDataWhetherPecentage(data, yField, xField, yField, isPercent);
+  const chartData = getDataWhetherPercentage(data, yField, xField, yField, isPercent);
   chart.data(chartData);
   // 百分比堆积图，默认会给一个 % 格式化逻辑, 用户可自定义
   const tooltipOptions = isPercent
@@ -149,6 +159,7 @@ export function adaptor(params: Params<AreaOptions>) {
   return flow(
     theme,
     pattern('areaStyle'),
+    transformations('rect'),
     geometry,
     meta,
     adjust,

src/plots/area/index.ts

@@ -1,6 +1,6 @@
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
-import { getDataWhetherPecentage } from '../../utils/transform/percent';
+import { getDataWhetherPercentage } from '../../utils/transform/percent';
 import { AreaOptions } from './types';
 import { adaptor, meta } from './adaptor';
 import { DEFAULT_OPTIONS } from './constants';
@@ -35,7 +35,7 @@ export class Area extends Plot<AreaOptions> {
     const { isPercent, xField, yField } = this.options;
     const { chart, options } = this;
     meta({ chart, options });
-    this.chart.changeData(getDataWhetherPecentage(data, yField, xField, yField, isPercent));
+    this.chart.changeData(getDataWhetherPercentage(data, yField, xField, yField, isPercent));
   }
 
   /**

src/plots/area/types.ts

@@ -1,5 +1,6 @@
 import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
+import { Transformations } from '../../types/coordinate';
 
 /** 面积图的配置类型定义 */
 export interface AreaOptions extends Options, Pick<GeometryOptions, 'customInfo'> {
@@ -48,4 +49,10 @@ export interface AreaOptions extends Options, Pick<GeometryOptions, 'customInfo'
    * @default false
    */
   readonly startOnZero?: boolean;
+
+  /**
+   * @title 坐标转换
+   * @description 可以对坐标系进行转换，如: reflectX, reflectY, transpose 等
+   */
+  readonly coordinate?: Transformations;
 }

src/plots/bar/adaptor.ts

@@ -103,10 +103,10 @@ function legend(params: Params<BarOptions>): Params<BarOptions> {
  * @param params
  */
 function coordinate(params: Params<BarOptions>): Params<BarOptions> {
-  const { chart } = params;
   // transpose column to bar 对角变换 & y 方向镜像变换
-  chart.coordinate({ actions: [['transpose'], ['reflect', 'y']] });
-  return params;
+  const { options } = params;
+  const coordinateOptions = [{ type: 'transpose' }, { type: 'reflectY' }].concat(options.coordinate || []);
+  return deepAssign({}, params, { options: { coordinate: coordinateOptions } });
 }
 
 /**