refactor: 优化下玉珏图处理 stack 的代码 (#2687)

visiky · web-flow · commit 871b3c5f630c · 2021-07-09T11:55:30.000+08:00
* refactor: 优化下玉珏图处理 stack 的代码

* fix: 修改 lint 问题

* docs(radial-bar): 增加两个新的玉珏图 demo
diff --git a/__tests__/unit/plots/radial-bar/index-spec.ts b/__tests__/unit/plots/radial-bar/index-spec.ts
@@ -56,6 +56,56 @@ describe('radial-bar', () => {
     bar.destroy();
   });
 
+  it('stacked', () => {
+    const bar = new RadialBar(createDiv(), {
+      data: [
+        {
+          year: '1991',
+          value: 10,
+          type: 'Lon',
+        },
+        {
+          year: '1998',
+          value: 9,
+          type: 'Lon',
+        },
+        {
+          year: '1999',
+          value: 13,
+          type: 'Lon',
+        },
+        {
+          year: '1991',
+          value: 3,
+          type: 'Bor',
+        },
+        {
+          year: '1998',
+          value: 5,
+          type: 'Bor',
+        },
+        {
+          year: '1999',
+          value: 10,
+          type: 'Bor',
+        },
+      ],
+      maxAngle: 270,
+      isStack: true,
+      xField: 'year',
+      yField: 'value',
+      colorField: 'type',
+    });
+    bar.render();
+
+    // 270度 在中心位置
+    expect(bar.chart.geometries[0].elements[bar.options.data.length - 1].shape.getBBox().y).toBeCloseTo(
+      bar.chart.getCoordinate().getCenter().y
+    );
+
+    bar.destroy();
+  });
+
   it('xField*yField*type', () => {
     const bar = new RadialBar(createDiv(), {
       width: 400,
diff --git a/__tests__/unit/plots/radial-bar/utils-spec.ts b/__tests__/unit/plots/radial-bar/utils-spec.ts
@@ -1,14 +1,8 @@
-import { getScaleMax, getScaleIsStackMax } from '../../../../src/plots/radial-bar/utils';
+import { getScaleMax, getStackedData } from '../../../../src/plots/radial-bar/utils';
 import { antvStar } from '../../../data/antv-star';
-import { populationMovementData as popData } from '../../../data/chord-population';
 
 const yField = 'star';
 
-const popField = {
-  yField: 'value',
-  xField: 'source',
-};
-
 describe('utils of radial-bar', () => {
   const starArr = antvStar.map((item) => item[yField]);
   const maxValue = Math.max(...starArr);
@@ -28,36 +22,40 @@ describe('utils of radial-bar', () => {
     expect(getScaleMax(360, yField, [])).toBe(0);
   });
 
-  const popArr = popData
-    .reduce((value, item) => {
-      const valueItem = value.find((v) => v[popField.xField] === item[popField.xField]);
-      if (valueItem) {
-        valueItem[popField.yField] += item[popField.yField];
-      } else {
-        value.push({ ...item });
-      }
-      return value;
-    }, [])
-    .map((item) => item[popField.yField]);
-
-  const isStackMaxValue = Math.max(...popArr);
-
-  it('getScaleIsStackMax: normal', () => {
-    expect(getScaleIsStackMax(360, popField.yField, popField.xField, popData)).toBe(isStackMaxValue);
-    expect(getScaleIsStackMax(-300, popField.yField, popField.xField, popData)).toBe((isStackMaxValue * 360) / 300);
-    expect(getScaleIsStackMax(660, popField.yField, popField.xField, popData)).toBe((isStackMaxValue * 360) / 300);
+  const data2 = [
+    { date: '01-01', value: 10, type: 'type1' },
+    { date: '01-02', value: 9, type: 'type1' },
+    { date: '01-01', value: 5, type: 'type2' },
+    { date: '01-02', value: 7, type: 'type2' },
+  ];
+
+  it('getStackedData: normal', () => {
+    const stackedData = getStackedData(data2, 'date', 'value');
+    expect(stackedData.length).toBe(2);
+    expect(stackedData[0].date).toBe(data2[0].date);
+    expect(stackedData[1].date).toBe(data2[1].date);
+    expect(stackedData[0].value).toBe(15);
+    expect(stackedData[1].value).toBe(16);
   });
 
   it('getScaleIsStackMax: existed nil value', () => {
-    expect(
-      getScaleIsStackMax(-300, popField.yField, popField.xField, [...popData, { source: 'c', value: undefined }])
-    ).toBe((isStackMaxValue * 360) / 300);
-    expect(getScaleIsStackMax(-300, popField.yField, popField.xField, [...popData, { source: 'c', value: null }])).toBe(
-      (isStackMaxValue * 360) / 300
-    );
+    data2[2].value = null;
+    let stackedData = getStackedData(data2, 'date', 'value');
+
+    expect(stackedData.length).toBe(2);
+    expect(stackedData[0].date).toBe(data2[0].date);
+    expect(stackedData[1].date).toBe(data2[1].date);
+    expect(stackedData[0].value).toBe(10);
+    expect(stackedData[1].value).toBe(16);
+
+    data2[2].value = undefined;
+    stackedData = getStackedData(data2, 'date', 'value');
+
+    expect(stackedData.length).toBe(2);
+    expect(stackedData[0].value).toBe(10);
   });
 
   it('getScaleIsStackMax: empty array', () => {
-    expect(getScaleIsStackMax(360, popField.yField, popField.xField, [])).toBe(0);
+    expect(getStackedData([], 'date', 'value').length).toBe(0);
   });
 });
diff --git a/examples/more-plots/radial-bar/demo/grouped.ts b/examples/more-plots/radial-bar/demo/grouped.ts
@@ -0,0 +1,16 @@
+import { RadialBar } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new RadialBar('container', {
+      data,
+      xField: 'year',
+      yField: 'value',
+      colorField: 'type',
+      isGroup: true,
+      maxAngle: 270,
+    });
+
+    plot.render();
+  });
diff --git a/examples/more-plots/radial-bar/demo/meta.json b/examples/more-plots/radial-bar/demo/meta.json
@@ -28,6 +28,24 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/l6uP5%26MiT7/385e3f80-52ec-49e9-9dfe-bd447e63203f.png"
     },
+    {
+      "filename": "stacked.ts",
+      "title": {
+        "zh": "堆叠玉珏图",
+        "en": "Stacked Radial-Bar plot"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tft60hEBvN/594d5cfc-8da0-441b-89dd-81eb4f5657b6.png"
+    },
+    {
+      "filename": "grouped.ts",
+      "title": {
+        "zh": "分组玉珏图",
+        "en": "Grouped Radial-Bar plot"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/M2EJJVBmHE/8984eee5-da51-4afb-8e81-34a8aaab47c0.png"
+    },
     {
       "filename": "background.ts",
       "title": {
diff --git a/examples/more-plots/radial-bar/demo/stacked.ts b/examples/more-plots/radial-bar/demo/stacked.ts
@@ -0,0 +1,16 @@
+import { RadialBar } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new RadialBar('container', {
+      data,
+      xField: 'year',
+      yField: 'value',
+      colorField: 'type',
+      isStack: true,
+      maxAngle: 270,
+    });
+
+    plot.render();
+  });
diff --git a/src/plots/circle-packing/types.ts b/src/plots/circle-packing/types.ts
@@ -1,4 +1,4 @@
-import { ColorAttr, Options, SizeAttr, StyleAttr } from '../../types';
+import { ColorAttr, Options, StyleAttr } from '../../types';
 import { DrillDownCfg } from '../../types/drill-down';
 import { HierarchyOption } from '../../utils/hierarchy/types';
 
diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts
@@ -4,7 +4,7 @@ import { flow, deepAssign, findGeometry, transformLabel } from '../../utils';
 import { interval, point } from '../../adaptor/geometries';
 import { processIllegalData } from '../../utils';
 import { RadialBarOptions } from './types';
-import { getScaleMax, getScaleIsStackMax } from './utils';
+import { getScaleMax, getStackedData } from './utils';
 
 /**
  * geometry 处理
@@ -50,15 +50,14 @@ function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
 export function meta(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
   const { options } = params;
   const { yField, xField, data, isStack, isGroup, colorField, maxAngle } = options;
-  const processData = processIllegalData(data, yField);
+
+  const actualData = isStack && !isGroup && colorField ? getStackedData(data, xField, yField) : data;
+  const processData = processIllegalData(actualData, yField);
   return flow(
     scale({
       [yField]: {
         min: 0,
-        max:
-          isStack && !isGroup && colorField
-            ? getScaleIsStackMax(maxAngle, yField, xField, processData)
-            : getScaleMax(maxAngle, yField, processData),
+        max: getScaleMax(maxAngle, yField, processData),
       },
     })
   )(params);
diff --git a/src/plots/radial-bar/utils.ts b/src/plots/radial-bar/utils.ts
@@ -10,16 +10,18 @@ export function getScaleMax(maxAngle: number, yField: string, data: Data): numbe
   return (maxValue * 360) / formatRadian;
 }
 
-// 获取isStack 下的最大值
-export function getScaleIsStackMax(maxAngle: number, yField: string, xField: string, data: Data) {
-  const newData: Data = [];
+/**
+ * 获取堆叠之后的数据
+ */
+export function getStackedData(data: Data, xField: string, yField: string) {
+  const stackedData: Data = [];
   data.forEach((item) => {
-    const valueItem = newData.find((v) => v[xField] === item[xField]);
+    const valueItem = stackedData.find((v) => v[xField] === item[xField]);
     if (valueItem) {
-      valueItem[yField] += item[yField];
+      valueItem[yField] += item[yField] || null;
     } else {
-      newData.push({ ...item });
+      stackedData.push({ ...item });
     }
   });
-  return getScaleMax(maxAngle, yField, newData);
+  return stackedData;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ColorAttr, Options, SizeAttr, StyleAttr } from '../../types';`
	`1`	`+import { ColorAttr, Options, StyleAttr } from '../../types';`
`2`	`2`	`import { DrillDownCfg } from '../../types/drill-down';`
`3`	`3`	`import { HierarchyOption } from '../../utils/hierarchy/types';`
`4`	`4`