fix: 双轴图 point 颜色映射错误和参数丢失 (#1823)

* fix: 双轴图 point 颜色映射错误和参数丢失 * fix: conversation * fix: test Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Oct 30, 2020 · a1c7d52 · a1c7d52
1 parent 07ae1d0
commit a1c7d52
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 2 deletions.
diff --git a/__tests__/unit/plots/dual-axes/point-spec.ts b/__tests__/unit/plots/dual-axes/point-spec.ts
@@ -0,0 +1,89 @@
+import { DualAxes } from '../../../../src';
+import { PV_DATA_MULTI, UV_DATA_MULTI } from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+
+describe('point', () => {
+  it('point style', () => {
+    const dualAxes = new DualAxes(createDiv('test DualAxes point'), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA_MULTI, UV_DATA_MULTI],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isStack: true,
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          isStack: true,
+          point: {
+            style: () => ({ fill: 'red' }),
+          },
+        },
+      ],
+    });
+
+    dualAxes.render();
+
+    const element = dualAxes.chart.views[1].geometries[1].elements[0];
+    expect(element.getModel().shape).toBe('circle');
+    expect(element.getData().site).toBeDefined();
+    expect(element.getModel().style.fill).toBe('red');
+  });
+  it('point false', () => {
+    const dualAxes = new DualAxes(createDiv('test DualAxes point false'), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA_MULTI, UV_DATA_MULTI],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isStack: true,
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          isStack: true,
+          point: false,
+        },
+      ],
+    });
+
+    dualAxes.render();
+    const element = dualAxes.chart.views[1].geometries[1];
+    expect(element).toBeUndefined();
+  });
+
+  it('point undefined', () => {
+    const dualAxes = new DualAxes(createDiv('test DualAxes point undefined'), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA_MULTI, UV_DATA_MULTI],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      geometryOptions: [
+        {
+          geometry: 'column',
+          seriesField: 'site',
+          isStack: true,
+        },
+        {
+          geometry: 'line',
+          seriesField: 'site',
+          isStack: true,
+        },
+      ],
+    });
+
+    dualAxes.render();
+    const element = dualAxes.chart.views[1].geometries[1];
+    expect(element).toBeUndefined();
+  });
+});
diff --git a/src/plots/dual-axes/util/geometry.ts b/src/plots/dual-axes/util/geometry.ts
@@ -15,7 +15,7 @@ export function drawSingleGeometry<O extends { xField: string; yField: string; g
 ): Params<O> {
   const { options, chart } = params;
   const { geometryOption, yField } = options;
-  const { isStack } = geometryOption;
+  const { isStack, color } = geometryOption;
 
   const FIELD_KEY = ['xField', 'yField'];
   if (isLine(geometryOption)) {
@@ -37,7 +37,12 @@ export function drawSingleGeometry<O extends { xField: string; yField: string; g
       deepMix({}, params, {
         options: {
           ...pick(options, FIELD_KEY),
-          point: geometryOption.point,
+          ...geometryOption,
+          point: geometryOption?.point && {
+            color,
+            shape: 'circle',
+            ...geometryOption?.point,
+          },
         },
       })
     );