fix: dodge 平移 scale 不更新 (#1897)

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

@@ -330,7 +330,7 @@ class Geometry<
         if (scale.isCategory) {
           const field = scale.field;
           const value = scale.translate(obj.origin[field]);
-          obj[field] = isNaN(value) ? 0 : value;
+          obj[field] = value;
         }
       }
     }

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

@@ -13,13 +13,15 @@ function lerp(min, max, fraction) {
 }
 
 function isNumberEqualRange(aRange: number[], bRange: number[]) {
+  if (!bRange) return false;
   for (let i = 0, len = aRange.length; i < len; i++) {
     if (!isNumberEqual(aRange[i], bRange[i])) return false;
   }
   return true;
 }
 
 function isEqualRange(aRange, bRange) {
+  if (!bRange) return false;
   if (isArray(aRange)) {
     return isNumberEqualRange(aRange, bRange);
   }
@@ -174,9 +176,8 @@ export default (View) => {
 
       // 图表上最少显示 MIN_COUNT 个数据
       this.minScale = minCount / valueLength;
-      this.state = {
-        range: cacheRange,
-      } as S;
+
+      this.renderRange(cacheRange);
     }
 
     willUpdate(): void {

packages/f2/src/components/zoom/zoomUtil.ts

@@ -21,8 +21,10 @@ function updateCategoryRange(scale: Scale, originScale: Scale, range: ZoomRange)
   const valueEnd = end * len;
 
   // 保持滑动时个数的稳定
-  const count = Math.ceil(valueEnd - valueStart);
-  const sliceSatrt = Math.round(valueStart);
+  const diff = valueEnd - valueStart;
+  const precision = parseFloat(diff.toFixed(3)); // js 计算精度问题
+  const count = Math.round(precision);
+  const sliceSatrt = Math.min(Math.round(valueStart), len - count);
 
   // 从原始数据里截取需要显示的数据
   const newValues = originValues.slice(sliceSatrt, sliceSatrt + count);

packages/f2/src/controller/scale.ts

@@ -164,6 +164,14 @@ class ScaleController {
 
     const scale = scales[field];
     if (scale) {
+      // for adjust=dodge, 需要更新 range
+      const option = this._getOption({
+        ...options[field],
+        values: scale.values,
+      });
+      if (option.range) {
+        scale.range = option.range;
+      }
       return scale;
     }
     const option = options[field];

packages/f2/src/deps/f2-adjust/src/adjusts/adjust.ts

@@ -174,7 +174,9 @@ export default abstract class Adjust {
         return;
       }
       // 在每个维度上，所有的值
-      dimValuesMap[dim] = valuesOfKey(mergedData, dim).sort((v1, v2) => v1 - v2) as number[];
+      dimValuesMap[dim] = valuesOfKey(mergedData, dim)
+        .sort((v1, v2) => v1 - v2)
+        .filter((v) => !isNaN(v)) as number[];
     });
 
     // 只有一维的情况下，同时调整 y，赋予默认值

packages/f2/test/components/interaction/dodge-pan.test.tsx

@@ -0,0 +1,188 @@
+import { jsx } from '../../../src';
+import { Canvas, Chart, Axis, ScrollBar, Legend, Interval, Tooltip } from '../../../src';
+import { createContext, delay, gestureSimulator } from '../../util';
+const context = createContext();
+
+const data = [
+  {
+    name: '今日数据',
+    time: '0:00',
+    value: 18900,
+  },
+  {
+    name: '昨日数据',
+    time: '0:00',
+    value: 2890,
+  },
+  {
+    name: '今日数据',
+    time: '01:00',
+    value: 18900,
+  },
+  {
+    name: '昨日数据',
+    time: '01:00',
+    value: 2890,
+  },
+  {
+    name: '今日数据',
+    time: '02:00',
+    value: 18900,
+  },
+  {
+    name: '昨日数据',
+    time: '02:00',
+    value: 2890,
+  },
+  {
+    name: '今日数据',
+    time: '03:00',
+    value: 18900,
+  },
+  {
+    name: '昨日数据',
+    time: '03:00',
+    value: 2890,
+  },
+  {
+    name: '今日数据',
+    time: '04:00',
+    value: 18900,
+  },
+
+  {
+    name: '昨日数据',
+    time: '04:00',
+    value: 28910,
+  },
+  {
+    name: '昨日数据',
+    time: '05:00',
+    value: 28910,
+  },
+  {
+    name: '今日数据',
+    time: '05:00',
+    value: 18900,
+  },
+  {
+    name: '今日数据',
+    time: '06:00',
+    value: 1900,
+  },
+
+  {
+    name: '昨日数据',
+    time: '06:00',
+    value: 280,
+  },
+  {
+    name: '昨日数据',
+    time: '07:00',
+    value: 280,
+  },
+  {
+    name: '今日数据',
+    time: '07:00',
+    value: 1900,
+  },
+  {
+    name: '今日数据',
+    time: '08:00',
+    value: 10900,
+  },
+  {
+    name: '昨日数据',
+    time: '08:00',
+    value: 22890,
+  },
+  {
+    name: '今日数据',
+    time: '09:00',
+    value: 10900,
+  },
+  {
+    name: '昨日数据',
+    time: '09:00',
+    value: 22890,
+  },
+  {
+    name: '今日数据',
+    time: '10:00',
+    value: 10900,
+  },
+  {
+    name: '昨日数据',
+    time: '10:00',
+    value: 22890,
+  },
+];
+
+describe('dodge pan', () => {
+  it('init', async () => {
+    const { props } = (
+      <Canvas pixelRatio={1} context={context}>
+        <Chart
+          data={data}
+          coord={{
+            type: 'rect',
+            transposed: false,
+          }}
+        >
+          <Axis
+            field="time"
+            style={{
+              grid: { lineWidth: 0 },
+            }}
+          />
+          <Axis
+            field="value"
+            style={{
+              grid: { lineWidth: 0 },
+            }}
+          />
+          <Legend
+            position="bottom"
+            style={{
+              justifyContent: 'center',
+              flexDirection: 'row',
+            }}
+          />
+          <Interval
+            x="time"
+            y="value"
+            adjust={{
+              type: 'dodge',
+              // marginRatio: 0, // 设置分组间柱子的间距
+            }}
+            color={['name', ['#FFE60F', '#726600']]}
+          />
+          <Tooltip
+            background={{
+              width: '220px',
+            }}
+            showCrosshairs
+            crosshairsType="x"
+          />
+          <ScrollBar pan pinch={false} mode="x" range={[0.5, 1]} visible />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('pan', async () => {
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchstart', { x: 10, y: 169 });
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchmove', { x: 100, y: 169 });
+    await delay(20);
+    await gestureSimulator(context.canvas, 'touchend', { x: 100, y: 169 });
+    await delay(300);
+    expect(context).toMatchImageSnapshot();
+  });
+});