[WIP]Fix/axis break by length

packages/vchart/__tests__/unit/component/cartesian/axis/axis-sync-break.test.ts

@@ -1507,12 +1507,12 @@ describe('VChart', () => {
       const range = la.getScale().range();
       expect(range[0]).toBeCloseTo(426);
       expect(range[1]).toBeCloseTo(423.8873352657334);
-      expect(range[2]).toBeCloseTo(423.58867525684406);
+      expect(range[2]).toBeCloseTo(423.88585307996357);
       expect(range[3]).toBeCloseTo(0);
 
       const rightDomain = ra.getScale().domain();
 
-      expect(rightDomain[0]).toBeCloseTo(-393970724.0726612);
+      expect(rightDomain[0]).toBeCloseTo(-394248484.9018328);
       expect(rightDomain[1]).toBeCloseTo(80000000000);
       expect(ra.getScale().range()).toEqual([426, 0]);
     });

packages/vchart/__tests__/unit/component/cartesian/axis/util/break-data.test.ts

@@ -1,7 +1,7 @@
 /**
  *  break-data 的测试用例
  */
-import { breakData } from '../../../../../../src/component/axis/mixin/util/break-data';
+import { breakData, breakScopeByLength } from '../../../../../../src/component/axis/mixin/util/break-data';
 
 describe('break data ', () => {
   it('break data by break points when scopeType is "length"', () => {
@@ -10,20 +10,21 @@ describe('break data ', () => {
       400, 80, 100
     ];
     const breakPoints = [500, 3000];
-    const { domain, scope } = breakData(data, breakPoints, 'length');
+    const { domain } = breakData(data, breakPoints, 'length');
 
     expect(domain).toStrictEqual([
       [44, 500],
       [500, 3000],
       [3000, 7715]
     ]);
+    const scope = breakScopeByLength(domain, [breakPoints as [number, number]], [44, 7715]);
 
     expect(scope.length).toEqual(3);
     expect(scope[0][0]).toBeCloseTo(0);
-    expect(scope[0][1]).toBeCloseTo(0.06136455389584174);
-    expect(scope[1][0]).toBeCloseTo(0.06136455389584174);
-    expect(scope[1][1]).toBeCloseTo(0.36549589557260126);
-    expect(scope[2][0]).toBeCloseTo(0.36549589557260126);
+    expect(scope[0][1]).toBeCloseTo(0.08818410365499903);
+    expect(scope[1][0]).toBeCloseTo(0.08818410365499903);
+    expect(scope[1][1]).toBeCloseTo(0.08818410365499903);
+    expect(scope[2][0]).toBeCloseTo(0.08818410365499903);
     expect(scope[2][1]).toBeCloseTo(1);
   });
 

packages/vchart/src/component/axis/mixin/linear-axis-mixin.ts

@@ -9,7 +9,7 @@ import { isXAxis } from '../cartesian/util/common';
 import type { IOrientType } from '../../../typings/space';
 import type { IComponentOption } from '../../interface/common';
 import type { StringOrNumber } from '../../../typings';
-import { breakData } from './util/break-data';
+import { breakData, breakScopeByLength } from './util/break-data';
 
 export const e10 = Math.sqrt(50);
 export const e5 = Math.sqrt(10);
@@ -43,9 +43,9 @@ export interface LinearAxisMixin {
    */
   _break: {
     domain: [number, number][];
-    scope: [number, number][];
     breakDomains: [number, number][];
     breaks: ILinearAxisBreakSpec[];
+    scope: [number, number][];
   };
   event: IEvent;
   _orient: IOrientType;
@@ -205,6 +205,10 @@ export class LinearAxisMixin {
     this.expandDomain(domain);
     this.includeZero(domain);
     this.setDomainMinMax(domain);
+
+    if (this._break && this._spec.breaks[0].scopeType === 'length') {
+      this._break.scope = breakScopeByLength(this._break.domain, this._break.breakDomains, domain);
+    }
     return domain;
   }
 

packages/vchart/src/component/axis/mixin/util/break-data.ts

@@ -1,4 +1,4 @@
-import { isEqual } from '@visactor/vutils';
+import { last } from '@visactor/vutils';
 
 const setDomain = (min: number, max: number, breaks: number[]): [number, number][] =>
   breaks.reduce(
@@ -82,13 +82,52 @@ function breakScope(data: number[], points: number[], scopeType: 'count' | 'leng
   return res;
 }
 
+export function breakScopeByLength(
+  domain: [number, number][],
+  breakDomains: [number, number][],
+  finalDomain: number[]
+): [number, number][] {
+  const d0 = finalDomain[0];
+  const d1 = last(finalDomain);
+  const newDomain: { isBreak?: boolean; domain: [number, number] }[] = [];
+  let sum = 0;
+
+  domain.forEach((d, index) => {
+    if (breakDomains.some(b => b[0] === d[0] && b[1] === d[1])) {
+      newDomain.push({
+        isBreak: true,
+        domain: d
+      });
+    } else {
+      const newD0 = index === 0 ? d0 : d[0];
+      const newD1 = index === domain.length - 1 ? d1 : d[1];
+      newDomain.push({ domain: [newD0, newD1] });
+      sum += newD1 - newD0;
+    }
+  });
+
+  return sum > 0
+    ? newDomain.reduce((res, d, index) => {
+        const r = d.isBreak ? 0 : (d.domain[1] - d.domain[0]) / sum;
+
+        if (index === 0) {
+          res.push([0, r]);
+        } else {
+          res.push([res[index - 1][1], res[index - 1][1] + r]);
+        }
+
+        return res;
+      }, [])
+    : [[0, 1]];
+}
+
 export function breakData(data: number[], points: number[], scopeType?: 'count' | 'length') {
   // 现将数据和断点排序
   data.sort(sorter);
   points.sort(sorter);
 
   return {
     domain: breakDomain(data, points),
-    scope: breakScope(data, points, scopeType)
+    scope: scopeType === 'count' ? breakScope(data, points, scopeType) : []
   };
 }