feat(heatmap): 热力图主题色默认从 theme 中获取连续色板 (#2535)

* feat(heatmap): 热力图主题色默认从 theme 中获取连续色板

* test: skip uncontrolled case

Author: visiky

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

@@ -1,7 +1,6 @@
 import { Heatmap } from '../../../../src';
 import { basicHeatmapData, semanticBasicHeatmapData } from '../../../data/basic-heatmap';
 import { createDiv } from '../../../utils/dom';
-import { DEFAULT_COLORS } from '../../../../src/constant';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/heatmap/constant';
 
 describe('heatmap', () => {
@@ -37,7 +36,7 @@ describe('heatmap', () => {
       }
     });
 
-    const colors = DEFAULT_COLORS.GRADIENT.CONTINUOUS.split('-');
+    const colors = heatmap.chart.getTheme().sequenceColors;
     expect(elements[maxElementIndex].getModel().color.toUpperCase()).toBe(colors[colors.length - 1]);
     expect(elements[minElementIndex].getModel().color.toUpperCase()).toBe(colors[0]);
 
@@ -92,7 +91,7 @@ describe('heatmap', () => {
       }
     });
 
-    const colors = DEFAULT_COLORS.GRADIENT.CONTINUOUS.split('-');
+    const colors = heatmap.chart.getTheme().sequenceColors;
     expect(elements[maxElementIndex].getModel().color.toUpperCase()).toBe(colors[colors.length - 1]);
     expect(elements[minElementIndex].getModel().color.toUpperCase()).toBe(colors[0]);
 

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

@@ -0,0 +1,47 @@
+import { Heatmap } from '../../../../src';
+import { semanticBasicHeatmapData } from '../../../data/basic-heatmap';
+import { createDiv } from '../../../utils/dom';
+
+describe('heatmap', () => {
+  it('theme', () => {
+    const sequenceColors = ['#FF0000', '#00FF00', '#0000FF'];
+    const heatmap = new Heatmap(createDiv('basic heatmap'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      colorField: 'sales',
+      theme: {
+        sequenceColors,
+      },
+    });
+
+    heatmap.render();
+
+    // @ts-ignore
+    expect(heatmap.getDefaultOptions()).toBe(Heatmap.getDefaultOptions());
+
+    const geometry = heatmap.chart.geometries[0];
+
+    const { elements } = geometry;
+
+    let maxElementIndex = 0;
+    let minElementIndex = 0;
+
+    elements.forEach((e, i) => {
+      const value = e.getData().sales;
+      if (elements[maxElementIndex].getData().sales < value) {
+        maxElementIndex = i;
+      }
+      if (elements[minElementIndex].getData().sales > value) {
+        minElementIndex = i;
+      }
+    });
+
+    expect(elements[maxElementIndex].getModel().color.toUpperCase()).toBe(sequenceColors[sequenceColors.length - 1]);
+    expect(elements[minElementIndex].getModel().color.toUpperCase()).toBe(sequenceColors[0]);
+
+    heatmap.destroy();
+  });
+});

examples/heatmap/basic/demo/calendar.ts

@@ -63,7 +63,6 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/github-commit.json')
       xField: 'week',
       yField: 'day',
       colorField: 'commits',
-      color: '#BAE7FF-#1890FF-#0050B3',
       reflect: 'y',
       shape: 'boundary-polygon',
       meta: {

src/constant.ts

@@ -23,12 +23,3 @@ export const AXIS_META_CONFIG_KEYS = [
   // 是否同步
   'sync',
 ];
-
-/**
- * 默认色彩
- */
-export const DEFAULT_COLORS = {
-  GRADIENT: {
-    CONTINUOUS: '#BAE7FF-#1890FF-#0050B3',
-  },
-};

src/plots/heatmap/adaptor.ts

@@ -3,7 +3,6 @@ import { Geometry } from '@antv/g2';
 import { Params } from '../../core/adaptor';
 import { findGeometry } from '../../utils';
 import { flow, transformLabel } from '../../utils';
-import { DEFAULT_COLORS } from '../../constant';
 import { tooltip, interaction, animation, theme, scale, annotation, state } from '../../adaptor/common';
 import { HeatmapOptions } from './types';
 
@@ -25,7 +24,7 @@ function field(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
   }
 
   if (colorField) {
-    geometry.color(colorField, color || DEFAULT_COLORS.GRADIENT.CONTINUOUS);
+    geometry.color(colorField, color || chart.getTheme().sequenceColors.join('-'));
   }
 
   /**
@@ -199,9 +198,9 @@ function coordinate(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
 export function adaptor(params: Params<HeatmapOptions>) {
   // flow 的方式处理所有的配置到 G2 API
   return flow(
+    theme,
     field,
     meta,
-    theme,
     axis,
     legend,
     tooltip,