feat: add polar attribute to heatmap

docs/api/plots/heatmap.en.md

@@ -54,7 +54,11 @@ Axis mapping.
 <description>**optional** _rect | square | circle_</description>
 
 Shapes in thermal grids, density heat maps are not specified.
+#### polar
 
+<description>**optional** _true | false_ </description>
+
+Whether or not we need polar coordinates, default false.
 #### sizeRatio
 
 <description>**optional** _number_</description>

docs/api/plots/heatmap.zh.md

@@ -54,6 +54,11 @@ order: 23
 <description>**可选** _rect | square | circle_</description>
 
 热力格子中的形状，密度热力图不用指定。
+#### polar
+
+<description>**可选** _true | false_ </description>
+
+是否需要极坐标，默认 false。
 
 #### sizeRatio
 

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,61 @@
+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',
+      polar: true, // 极坐标属性
+      legend: true,
+      color: '#BAE7FF-#1890FF-#1028ff',
+      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

@@ -173,6 +173,23 @@ function label(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
   return params;
 }
 
+/**
+ * 极坐标
+ * @param params
+ */
+function coordinate(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
+  const { chart, options } = params;
+  const { polar } = options;
+
+  if (polar) {
+    chart.coordinate('polar', {
+      innerRadius: 0.2,
+    });
+  }
+
+  return params;
+}
+
 /**
  * 热力图适配器
  * @param chart
@@ -192,6 +209,7 @@ export function adaptor(params: Params<HeatmapOptions>) {
     annotation(),
     interaction,
     animation,
-    state
+    state,
+    coordinate
   )(params);
 }

src/plots/heatmap/types.ts

@@ -19,4 +19,6 @@ export interface HeatmapOptions extends Options {
   readonly heatmapStyle?: StyleAttr;
   /** 坐标轴映射 */
   readonly reflect?: 'x' | 'y';
+  /** 极坐标属性 */
+  readonly polar?: boolean;
 }