feat: add polar attribute to heatmap (#2425)

* feat: add polar attribute to heatmap

* feat: add polar attribute to heatmap add heatMap polar examples

* feat: add polar attribute to heatmap add heatMap polar examples

* feat: add polar attribute to heatmap add heatMap polar examples -2

* feat: add polar attribute add heatMap polar examples add document

* feat: add polar attribute add heatMap polar examples add document

* feat: add polar attribute add heatMap polar examples add document

Co-authored-by: wb-xcf804241 <[email protected]>

Author: ai-qing-hai

__tests__/unit/plots/heatmap/coordinate-spec.ts

@@ -0,0 +1,70 @@
+import { Heatmap } from '../../../../src';
+import { semanticBasicHeatmapData } from '../../../data/basic-heatmap';
+import { createDiv } from '../../../utils/dom';
+
+describe('heatmap', () => {
+  it('x*y*color and default coordinate', () => {
+    const heatmap = new Heatmap(createDiv('default axis'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      colorField: 'sales',
+      shape: 'circle',
+    });
+
+    heatmap.render();
+
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.type).toBe('rect');
+
+    heatmap.destroy();
+  });
+
+  it('x*y*color and custom axis', () => {
+    const heatmap = new Heatmap(createDiv('custom axis'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      colorField: 'sales',
+      shape: 'circle',
+      coordinate: {
+        type: 'polar',
+        cfg: {
+          radius: 0.85,
+          innerRadius: 0.2,
+        },
+      },
+    });
+
+    heatmap.render();
+
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.type).toBe('polar');
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.cfg.radius).toBe(0.85);
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.cfg.innerRadius).toBe(0.2);
+
+    heatmap.update({
+      ...heatmap.options,
+      coordinate: {
+        type: 'polar',
+        cfg: {
+          startAngle: 1,
+          endAngle: 2,
+        },
+      },
+    });
+
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.cfg.startAngle).toBe(1);
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.cfg.endAngle).toBe(2);
+
+    heatmap.destroy();
+  });
+});

docs/api/plots/heatmap.en.md

@@ -55,6 +55,33 @@ Axis mapping.
 
 Shapes in thermal grids, density heat maps are not specified.
 
+#### coordinate
+
+<description>**optional** </description>
+
+Coordinate system configuration property.
+
+| Properties  | Type              | Description  |
+| ------- | --------------------- | ------------------------------ |
+| type    | string                | Type of coordinate system |
+| cfg     | _CoordinateCfg_       | Coordinate system configuration term, currently commonly used in polar coordinates |
+
+_**CoordinateOption.type**_ Type of coordinate system：
+
+- cartesian / rect：Cartesian coordinate system
+- polar：Polar coordinates
+- helix：Spiral coordinate system, based on Archimedes helix
+- theta：A special polar coordinate system with fixed radius lengths that maps data only to angles, often used in pie charts
+
+_**CoordinateCfg**_ Coordinate system configuration term, currently commonly used in polar coordinates：
+
+| Properties  | Type     | Description          |
+| ----------- | -------- | ------------------------------------------ |
+| startAngle  | _number_ | For polar coordinates, configure the starting radian   |
+| endAngle    | _number_ | For polar coordinates, configure end radians       |
+| radius      | _number_ | For polar coordinates, configure polar radius, values in the 0-1 range |
+| innerRadius | _number_ | For polar coordinates, radius within polar coordinates, values in the range 0-1  |
+
 #### sizeRatio
 
 <description>**optional** _number_</description>

docs/api/plots/heatmap.zh.md

@@ -55,6 +55,33 @@ order: 23
 
 热力格子中的形状，密度热力图不用指定。
 
+#### coordinate
+
+<description>**可选**</description>
+
+坐标系配置属性。
+
+| 参数名   | 类型                  | 描述                         |
+| ------- | --------------------- | ----------------------------|
+| type    | string                | 坐标系类型                   |
+| cfg     | _CoordinateCfg_       | 坐标系配置项，目前常用于极坐标 |
+
+_**CoordinateOption.type**_ 坐标系类型：
+
+- cartesian / rect：笛卡尔坐标系
+- polar：极坐标系
+- helix：螺旋坐标系，基于阿基米德螺旋线
+- theta：一种特殊的极坐标系，半径长度固定，仅仅将数据映射到角度，常用于饼图的绘制
+
+_**CoordinateCfg**_ 坐标系配置项，目前常用于极坐标：
+
+| 参数名       | 类型     | 描述                                    |
+| ----------- | -------- | ----------------------------------------|
+| startAngle  | _number_ | 用于极坐标，配置起始弧度                  |
+| endAngle    | _number_ | 用于极坐标，配置结束弧度                  |
+| radius      | _number_ | 用于极坐标，配置极坐标半径，0-1 范围的数值 |
+| innerRadius | _number_ | 用于极坐标，极坐标内半径，0 -1 范围的数值  |
+
 #### sizeRatio
 
 <description>**可选** _number_</description>

examples/heatmap/basic/demo/meta.json

@@ -35,6 +35,14 @@
         "en": "Calendar heatmap plot"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*aLbWR5ioU2UAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "polar.ts",
+      "title": {
+        "zh": "极坐标色块图",
+        "en": "Polar heatmap plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cNrISYzITTcAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

examples/heatmap/basic/demo/polar.ts

@@ -0,0 +1,67 @@
+import { Heatmap } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/polar-heatmap.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const heatmapPlot = new Heatmap(document.getElementById('container'), {
+      data,
+      xField: 'time',
+      yField: 'week',
+      colorField: 'value',
+      legend: true,
+      color: '#BAE7FF-#1890FF-#1028ff',
+      coordinate: {
+        // 坐标轴属性配置
+        type: 'polar', // 极坐标
+        cfg: {
+          innerRadius: 0.2,
+        },
+      },
+      heatmapStyle: {
+        stroke: '#f5f5f5',
+        opacity: 0.8,
+      },
+      meta: {
+        time: {
+          type: 'cat',
+        },
+        value: {
+          min: 0,
+          max: 1,
+        },
+      },
+      xAxis: {
+        line: null,
+        grid: null,
+        tickLine: null,
+        label: {
+          offset: 12,
+          style: {
+            fill: '#666',
+            fontSize: 12,
+            textBaseline: 'top',
+          },
+        },
+      },
+      yAxis: {
+        top: true,
+        line: null,
+        grid: null,
+        tickLine: null,
+        label: {
+          offset: 0,
+          style: {
+            fill: '#fff',
+            textAlign: 'center',
+            shadowBlur: 2,
+            shadowColor: 'rgba(0, 0, 0, .45)',
+          },
+        },
+      },
+      tooltip: {
+        showMarkers: false,
+      },
+      interactions: [{ type: 'element-active' }],
+    });
+    heatmapPlot.render();
+  });

src/plots/heatmap/adaptor.ts

@@ -13,7 +13,7 @@ import { HeatmapOptions } from './types';
  */
 function field(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
   const { chart, options } = params;
-  const { data, type, reflect, xField, yField, colorField, sizeField, sizeRatio, shape, color } = options;
+  const { data, type, xField, yField, colorField, sizeField, sizeRatio, shape, color } = options;
 
   chart.data(data);
   let geometry: Geometry;
@@ -28,10 +28,6 @@ function field(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
     geometry.color(colorField, color || DEFAULT_COLORS.GRADIENT.CONTINUOUS);
   }
 
-  if (reflect) {
-    chart.coordinate().reflect(reflect);
-  }
-
   /**
    * The ratio between the actual size and the max available size, must be in range `[0,1]`.
    *
@@ -173,6 +169,28 @@ function label(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
   return params;
 }
 
+/**
+ * 极坐标
+ * @param params
+ */
+function coordinate(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
+  const { chart, options } = params;
+  const { coordinate, reflect } = options;
+
+  if (coordinate) {
+    chart.coordinate({
+      type: coordinate.type || 'rect',
+      cfg: coordinate.cfg,
+    });
+  }
+
+  if (reflect) {
+    chart.coordinate().reflect(reflect);
+  }
+
+  return params;
+}
+
 /**
  * 热力图适配器
  * @param chart
@@ -192,6 +210,7 @@ export function adaptor(params: Params<HeatmapOptions>) {
     annotation(),
     interaction,
     animation,
-    state
+    state,
+    coordinate
   )(params);
 }

src/plots/heatmap/index.ts

@@ -24,6 +24,9 @@ export class Heatmap extends Plot<HeatmapOptions> {
     return deepAssign({}, super.getDefaultOptions(), {
       type: 'polygon',
       legend: false,
+      coordinate: {
+        type: 'rect',
+      },
       xAxis: {
         tickLine: null,
         line: null,

src/plots/heatmap/types.ts

@@ -1,3 +1,4 @@
+import { Types } from '@antv/g2';
 import { Options, StyleAttr } from '../../types';
 
 export interface HeatmapOptions extends Options {
@@ -19,4 +20,6 @@ export interface HeatmapOptions extends Options {
   readonly heatmapStyle?: StyleAttr;
   /** 坐标轴映射 */
   readonly reflect?: 'x' | 'y';
+  /** 极坐标属性 */
+  readonly coordinate?: Types.CoordinateOption;
 }