fix: adjust scale range (#1317)

antvis · Dec 20, 2021 · bc04790 · bc04790
1 parent 873c8b1
commit bc04790
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 18 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -225,6 +225,10 @@ class Chart extends Component implements IChart, InteractionMixin {
     });
   }
 
+  getCoord() {
+    return this.coord;
+  }
+
   render(): JSX.Element {
     const { props, state, layout, coord } = this;
     const { children, data } = props;

diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
@@ -88,11 +88,14 @@ export default (Views) => {
       const { coord, shape = 'rect', animation, showLabel, labelCfg: customLabelCfg } = props;
       const View = Views[shape];
       const LabelView = LabelViews[shape];
-      const labelCfg = deepMix({
-        label: null,
-        offsetX: 0,
-        offsetY: 0,
-      }, customLabelCfg);
+      const labelCfg = deepMix(
+        {
+          label: null,
+          offsetX: 0,
+          offsetY: 0,
+        },
+        customLabelCfg
+      );
 
       if (!View) return null;
 

diff --git a/packages/f2/src/controller/scale.ts b/packages/f2/src/controller/scale.ts
@@ -1,5 +1,5 @@
 import { each, mix, isNil, isFunction, isNumber, valuesOfKey, getRange } from '@antv/util';
-import { registerTickMethod, Scale, getScale } from '@antv/scale';
+import { registerTickMethod, Scale, getScale, ScaleConfig } from '@antv/scale';
 import CatTick from './scale/cat-tick';
 import LinearTick from './scale/linear-tick';
 
@@ -9,6 +9,8 @@ registerTickMethod('time-cat', CatTick);
 // 覆盖linear 度量的tick算法
 registerTickMethod('wilkinson-extended', LinearTick);
 
+type ScaleOption = { type?: string } & ScaleConfig;
+
 class ScaleController {
   private data: any;
   // scale 实例的配置
@@ -22,7 +24,7 @@ class ScaleController {
     this.scales = {};
   }
 
-  private _getType(option) {
+  private _getType(option: ScaleOption) {
     const { type, values, field } = option;
     if (type) {
       return type;
@@ -36,20 +38,18 @@ class ScaleController {
     return 'cat';
   }
 
-  private _getOption(option) {
+  private _getOption(option: ScaleOption) {
     const { values, field } = option;
     const type = this._getType(option);
 
     option.type = type;
 
     // identity
     if (type === 'identity') {
-      option.value = field;
       option.field = field.toString();
       option.values = [field];
       return option;
     }
-
     // linear 类型
     if (type === 'linear') {
       // 设置默认nice
@@ -64,11 +64,10 @@ class ScaleController {
       if (isNil(option.max)) {
         option.max = max;
       }
-
       return option;
     }
-    // 分类类型
-    if (type === 'cat') {
+    // 分类类型和 timeCat 类型，调整 range
+    if (type === 'cat' || type === 'timeCat') {
       if (option.range) {
         return option;
       }
@@ -83,8 +82,8 @@ class ScaleController {
         range = [offset, 1 - offset];
       }
       option.range = range;
-      return option;
     }
+
     return option;
   }
 
@@ -98,7 +97,7 @@ class ScaleController {
   }
 
   // 更新或创建scale
-  setScale(field: string, option: any = {}) {
+  setScale(field: string, option?: ScaleOption) {
     const { options, scales } = this;
     options[field] = mix({}, options[field], option);
     // 如果scale有更新，scale 也需要重新创建
@@ -107,13 +106,13 @@ class ScaleController {
     }
   }
 
-  create(options) {
+  create(options: { [k: string]: ScaleOption }) {
     this.update(options);
   }
 
-  update(options) {
+  update(options: { [k: string]: ScaleOption }) {
     if (!options) return;
-    each(options, (option, field: string) => {
+    each(options, (option: ScaleOption, field: string) => {
       this.setScale(field, option);
     });
     // 为了让外部感知到scale有变化

diff --git a/packages/f2/test/components/interval/interval.test.tsx b/packages/f2/test/components/interval/interval.test.tsx
@@ -54,4 +54,67 @@ describe('Interval', () => {
     const canvas = new Canvas(props);
     canvas.render();
   });
+
+  it('x scale 为 timeCat', () => {
+    const data = [
+      {
+        time: '2016-08-08 00:00:00',
+        tem: 10,
+      },
+      {
+        time: '2016-08-08 00:10:00',
+        tem: 22,
+      },
+      {
+        time: '2016-08-08 00:30:00',
+        tem: 20,
+      },
+      {
+        time: '2016-08-09 00:35:00',
+        tem: 26,
+      },
+      {
+        time: '2016-08-09 01:00:00',
+        tem: 20,
+      },
+    ];
+    const context = createContext('x scale 为 timeCat');
+    const chartRef = { current: null };
+    const { offsetWidth } = document.body;
+    const height = offsetWidth * 0.75;
+    const { props } = (
+      <Canvas
+        context={context}
+        pixelRatio={window.devicePixelRatio}
+        width={offsetWidth}
+        height={height}
+      >
+        <Chart
+          ref={chartRef}
+          data={data}
+          scale={{
+            time: {
+              type: 'timeCat',
+              tickCount: 3,
+            },
+            tem: {
+              tickCount: 5,
+            },
+          }}
+        >
+          <Axis field="time" />
+          <Axis field="tem" />
+          <Interval x="time" y="tem" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    const timeScale = chartRef.current.scale.getScale('time');
+    const { range } = timeScale;
+    expect(range[0]).toBeGreaterThan(0);
+    expect(range[1]).toBeLessThan(1);
+  });
 });