feat: add polar attribute to heatmap

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

@@ -0,0 +1,71 @@
+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',
+      coordinate: {
+        type: 'rect',
+      },
+    });
+
+    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,
+        },
+        actions: [['rotate', 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: 'rect',
+        actions: [['transpose']],
+      },
+    });
+
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.actions[0][0]).toBe('transpose');
+    // @ts-ignore
+    expect(heatmap.chart.options.coordinate.type).toBe('rect');
+
+    heatmap.destroy();
+  });
+});

docs/api/plots/heatmap.en.md

@@ -55,6 +55,12 @@ Axis mapping.
 
 Shapes in thermal grids, density heat maps are not specified.
 
+#### coordinate
+
+<description>**optional** </description>
+
+Coordinate system configuration property.
+
 #### sizeRatio
 
 <description>**optional** _number_</description>

docs/api/plots/heatmap.zh.md

@@ -55,6 +55,12 @@ order: 23
 
 热力格子中的形状，密度热力图不用指定。
 
+#### coordinate
+
+<description>**可选**</description>
+
+坐标系配置属性。
+
 #### 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,25 @@ 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 (reflect) {
+    chart.coordinate().reflect(reflect);
+  }
+
+  if (coordinate) {
+    chart.coordinate(coordinate);
+  }
+
+  return params;
+}
+
 /**
  * 热力图适配器
  * @param chart
@@ -192,6 +207,7 @@ export function adaptor(params: Params<HeatmapOptions>) {
     annotation(),
     interaction,
     animation,
-    state
+    state,
+    coordinate
   )(params);
 }

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;
 }