fix: 升级 adjust。Closed: #1494 (#1496)

packages/f2/package.json

@@ -22,7 +22,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@antv/adjust": "~0.1.1",
+    "@antv/adjust": "~0.2.5",
     "@antv/event-emitter": "^0.1.2",
     "@antv/f2-graphic": "^0.0.4",
     "@antv/scale": "~0.3.3",
@@ -31,8 +31,7 @@
     "d3-cloud": "~1.2.5",
     "d3-color": "~2.0.0",
     "d3-hierarchy": "~2.0.0",
-    "d3-interpolate": "~2.0.1",
-    "fecha": "^2.3.3"
+    "d3-interpolate": "~2.0.1"
   },
   "homepage": "https://f2.antv.vision/",
   "author": "https://github.com/orgs/antvis/people",

packages/f2/src/components/geometry/index.tsx

@@ -1,16 +1,21 @@
 import { isFunction, each, upperFirst, mix, groupToMap, isObject, flatten } from '@antv/util';
 import Selection, { SelectionState } from './selection';
-import * as Adjust from '../../adjust';
+import { Adjust, getAdjust } from '@antv/adjust';
 import { toTimeStamp } from '../../util/index';
 import { GeomType, GeometryProps } from './interface';
 import AttrController from '../../controller/attr';
 import equal from '../../base/equal';
 import { AnimationCycle } from '../../canvas/animation/interface';
-import type { Scale } from '@antv/scale';
+import { Scale } from '@antv/scale';
 
 // 保留原始数据的字段
 const FIELD_ORIGIN = 'origin';
 
+export interface AdjustProp {
+  type: string;
+  adjust: Adjust;
+}
+
 class Geometry<
   P extends GeometryProps = GeometryProps,
   S extends SelectionState = SelectionState
@@ -19,7 +24,7 @@ class Geometry<
   geomType: GeomType;
 
   attrs: any;
-  adjust: any;
+  adjust: AdjustProp;
 
   // 预处理后的数据
   dataArray: any;
@@ -189,7 +194,7 @@ class Geometry<
     const scales = [attrs.x.scale, attrs.y.scale];
     for (let j = 0, len = data.length; j < len; j++) {
       const obj = data[j];
-      const count = Math.min(2, scales.length);
+      const count = scales.length;
       for (let i = 0; i < count; i++) {
         const scale = scales[i];
         if (scale.isCategory) {
@@ -200,9 +205,13 @@ class Geometry<
     }
   }
 
-  _adjustData(groupedArray) {
+  _adjustData(records) {
     const { attrs, props } = this;
     const { adjust } = props;
+
+    // groupedArray 是二维数组
+    const groupedArray = records.map((record) => record.children);
+
     if (!adjust) {
       return groupedArray;
     }
@@ -213,29 +222,37 @@ class Geometry<
           }
         : adjust;
     const adjustType = upperFirst(adjustCfg.type);
-    if (!Adjust[adjustType]) {
+    const AdjustConstructor = getAdjust(adjustType);
+    if (!AdjustConstructor) {
       throw new Error('not support such adjust : ' + adjust);
     }
-    const { x, y } = attrs;
-    const xField = x.field;
-    const yField = y.field;
-    const adjustInstance = new Adjust[adjustType]({
-      xField,
-      yField,
-      ...adjustCfg,
-    });
 
     if (adjustType === 'Dodge') {
       for (let i = 0, len = groupedArray.length; i < len; i++) {
         // 如果是dodge, 需要处理数字再处理
         this._numberic(groupedArray[i]);
       }
+      adjustCfg.adjustNames = ['x'];
     }
-    adjustInstance.processAdjust(groupedArray);
 
-    this.adjust = adjustInstance;
+    const { x, y } = attrs;
+    adjustCfg.xField = x.field;
+    adjustCfg.yField = y.field;
+
+    const adjustInstance = new AdjustConstructor(adjustCfg);
+    const adjustData = adjustInstance.process(groupedArray);
+
+    this.adjust = {
+      type: adjustCfg.type,
+      adjust: adjustInstance,
+    };
 
-    return groupedArray;
+    // process 返回的是新数组，所以要修改 records
+    records.forEach((record, index: number) => {
+      record.children = adjustData[index];
+    });
+
+    return adjustData;
   }
 
   _updateStackRange(field, scale, dataArray) {
@@ -268,10 +285,8 @@ class Geometry<
     const data = this._saveOrigin(originData);
     // 根据分类度量进行数据分组
     const records = this._groupData(data);
-    // groupedArray 是二维数组
-    const groupedArray = records.map((record) => record.children);
     // 根据adjust分组
-    const dataArray = this._adjustData(groupedArray);
+    const dataArray = this._adjustData(records);
 
     this.dataArray = dataArray;
 

packages/f2/src/components/interval/withInterval.tsx

@@ -89,7 +89,7 @@ export default (Views) => {
       const { props } = this;
       const { coord } = props;
       const y0 = this.getY0Value();
-      const y0Point =  coord.convertPoint({ y: y0, x: 0 })
+      const y0Point = coord.convertPoint({ y: y0, x: 0 });
       return y0Point?.y;
     }
 

packages/f2/test/components/interval/example/funnel.test.tsx

@@ -2,14 +2,11 @@ import { jsx } from '../../../../src';
 import { Polar, Rect } from '../../../../src/coord';
 import { Canvas, Chart } from '../../../../src';
 import { Interval, Axis, Legend, Tooltip } from '../../../../src/components';
-import { createContext } from '../../../util';
+import { createContext, delay } from '../../../util';
 
 describe('漏斗图', () => {
-  it('基础漏斗图', () => {
-    const context = createContext('基础漏斗图', {
-      height: '300px',
-      width: '400px',
-    });
+  it('基础漏斗图', async () => {
+    const context = createContext('基础漏斗图');
     const data = [
       { action: '浏览网站', pv: 50000, percent: 1 },
       { action: '放入购物车', pv: 35000, percent: 0.7 },
@@ -18,7 +15,7 @@ describe('漏斗图', () => {
       { action: '完成交易', pv: 8000, percent: 0.16 },
     ];
     const { type, props } = (
-      <Canvas context={context}>
+      <Canvas context={context} animate={false} pixelRatio={1}>
         <Chart
           data={data}
           coord={{
@@ -60,13 +57,13 @@ describe('漏斗图', () => {
     );
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 
-  it('倒置漏斗图', () => {
-    const context = createContext('倒置漏斗图', {
-      height: '300px',
-      width: '400px',
-    });
+  it('倒置漏斗图', async () => {
+    const context = createContext('倒置漏斗图');
     const data = [
       { action: '浏览网站', pv: 50000, percent: 1 },
       { action: '放入购物车', pv: 35000, percent: 0.7 },
@@ -75,7 +72,7 @@ describe('漏斗图', () => {
       { action: '完成交易', pv: 8000, percent: 0.16 },
     ];
     const { type, props } = (
-      <Canvas context={context}>
+      <Canvas context={context} animate={false} pixelRatio={1}>
         <Chart
           data={data}
           coord={{
@@ -105,5 +102,8 @@ describe('漏斗图', () => {
     );
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 });

packages/f2/test/components/interval/example/pyramid.test.tsx

@@ -2,14 +2,11 @@ import { jsx } from '../../../../src';
 import { Polar, Rect } from '../../../../src/coord';
 import { Canvas, Chart } from '../../../../src';
 import { Interval, Axis, Legend, Tooltip } from '../../../../src/components';
-import { createContext } from '../../../util';
+import { createContext, delay } from '../../../util';
 
 describe('金字塔图', () => {
-  it('基础金字塔图', () => {
-    const context = createContext('基础金字塔图', {
-      height: '300px',
-      width: '400px',
-    });
+  it('基础金字塔图', async () => {
+    const context = createContext('基础金字塔图');
     const data = [
       { action: '浏览网站', pv: 50000, percent: 1 },
       { action: '放入购物车', pv: 35000, percent: 0.7 },
@@ -18,7 +15,7 @@ describe('金字塔图', () => {
       { action: '完成交易', pv: 8000, percent: 0.16 },
     ];
     const { type, props } = (
-      <Canvas context={context}>
+      <Canvas context={context} animate={false} pixelRatio={1}>
         <Chart
           data={data}
           coord={{
@@ -64,13 +61,13 @@ describe('金字塔图', () => {
     );
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 
-  it('倒置金字塔', () => {
-    const context = createContext('倒置金字塔', {
-      height: '300px',
-      width: '400px',
-    });
+  it('倒置金字塔', async () => {
+    const context = createContext('倒置金字塔');
     const data = [
       { action: '浏览网站', pv: 50000, percent: 1 },
       { action: '放入购物车', pv: 35000, percent: 0.7 },
@@ -79,7 +76,7 @@ describe('金字塔图', () => {
       { action: '完成交易', pv: 8000, percent: 0.16 },
     ];
     const { type, props } = (
-      <Canvas context={context}>
+      <Canvas context={context} animate={false} pixelRatio={1}>
         <Chart
           data={data}
           coord={{
@@ -125,5 +122,8 @@ describe('金字塔图', () => {
     );
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 });