fix: 修复热力图颜色映射错误 (#1979)

* fix: 修复热力图颜色映射错误 * fix: 添加test
antvis · Nov 21, 2020 · e3824c9 · e3824c9
1 parent 78a2feb
commit e3824c9
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 5 deletions.
diff --git a/__tests__/unit/plots/heatmap/shape-spec.ts b/__tests__/unit/plots/heatmap/shape-spec.ts
@@ -96,4 +96,91 @@ describe('heatmap', () => {
 
     heatmap.destroy();
   });
+  it('x*y*color and shape*circle', () => {
+    const heatmap = new Heatmap(createDiv('shape*fill'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      shape: 'circle',
+      label: {
+        offset: -2,
+        style: {
+          fill: '#fff',
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)',
+        },
+      },
+    });
+
+    heatmap.render();
+
+    const geometry = heatmap.chart.geometries[0];
+    const { elements } = geometry;
+    expect(elements[0].shape.cfg.type).toEqual('circle');
+    // default fill
+    expect(elements[0].getModel().color).toBeUndefined();
+    expect(elements[0].getModel().defaultStyle.fill).toBe('#5B8FF9');
+    expect(heatmap.chart.geometries[0].labelOption).toBeUndefined();
+    heatmap.update({
+      colorField: 'sales',
+    });
+    expect(heatmap.chart.geometries[0].elements[0].getModel().color).toBeDefined();
+    // @ts-ignore
+    expect(heatmap.chart.geometries[0].labelOption.fields).toEqual(['sales']);
+    heatmap.update({
+      heatmapStyle: {
+        fill: 'red',
+      },
+    });
+    expect(heatmap.chart.geometries[0].elements[0].getModel().style.fill).toBe('red');
+    // @ts-ignore
+    expect(heatmap.chart.geometries[0].styleOption.cfg.fill).toBe('red');
+    heatmap.destroy();
+  });
+  it.only('x*y*color and shape*square', () => {
+    const heatmap = new Heatmap(createDiv('shape*fill'), {
+      width: 400,
+      height: 300,
+      data: semanticBasicHeatmapData,
+      xField: 'name',
+      yField: 'day',
+      shape: 'square',
+      label: {
+        offset: -2,
+        style: {
+          fill: '#fff',
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)',
+        },
+      },
+    });
+
+    heatmap.render();
+
+    const geometry = heatmap.chart.geometries[0];
+    const { elements } = geometry;
+    expect(elements[0].shape.cfg.type).toEqual('rect');
+    // default fill
+    expect(elements[0].getModel().color).toBeUndefined();
+    expect(elements[0].getModel().defaultStyle.fill).toBe('#5B8FF9');
+    expect(heatmap.chart.geometries[0].labelOption).toBeUndefined();
+
+    heatmap.update({
+      colorField: 'sales',
+    });
+    expect(heatmap.chart.geometries[0].elements[0].getModel().color).toBeDefined();
+    // @ts-ignore
+    expect(heatmap.chart.geometries[0].labelOption.fields).toEqual(['sales']);
+    heatmap.update({
+      heatmapStyle: {
+        fill: 'red',
+      },
+    });
+    expect(heatmap.chart.geometries[0].elements[0].getModel().style.fill).toBe('red');
+    // @ts-ignore
+    expect(heatmap.chart.geometries[0].styleOption.cfg.fill).toBe('red');
+    heatmap.destroy();
+  });
 });
diff --git a/src/plots/heatmap/adaptor.ts b/src/plots/heatmap/adaptor.ts
@@ -161,7 +161,7 @@ function label(params: Params<HeatmapOptions>): Params<HeatmapOptions> {
 
   if (!label) {
     geometry.label(false);
-  } else {
+  } else if (colorField) {
     const { callback, ...cfg } = label;
     geometry.label({
       fields: [colorField],

diff --git a/src/plots/heatmap/shapes/circle.ts b/src/plots/heatmap/shapes/circle.ts
@@ -16,14 +16,15 @@ registerShape('polygon', 'circle', {
     const sizeRatio = Number(cfg.shape[2]);
     const radiusRatio = Math.sqrt(sizeRatio);
     const radius = maxRadius * radiusRatio * Math.sqrt(value);
-
+    const fill = cfg.style?.fill || cfg.color || cfg.defaultStyle?.fill;
     const polygon = group.addShape('circle', {
       attrs: {
         x: cx,
         y: cy,
         r: radius,
-        fill: cfg.color,
         ...cfg.defaultStyle,
+        ...cfg.style,
+        fill,
       },
     });
     return polygon;

diff --git a/src/plots/heatmap/shapes/square.ts b/src/plots/heatmap/shapes/square.ts
@@ -16,16 +16,16 @@ registerShape('polygon', 'square', {
     const sizeRatio = Number(cfg.shape[2]);
     const lenRatio = Math.sqrt(sizeRatio);
     const sideLength = maxSideLength * lenRatio * Math.sqrt(value);
-
+    const fill = cfg.style?.fill || cfg.color || cfg.defaultStyle?.fill;
     const polygon = group.addShape('rect', {
       attrs: {
         x: cx - sideLength / 2,
         y: cy - sideLength / 2,
         width: sideLength,
         height: sideLength,
-        fill: cfg.color,
         ...cfg.defaultStyle,
         ...cfg.style,
+        fill,
       },
     });
     return polygon;