Merge pull request #3556 from VisActor/fix/waterfall-break

Fix/waterfall break

Author: xile611

common/changes/@visactor/vchart/develop_2024-12-12-04-07.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix break of waterfall, fix #3544\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

common/changes/@visactor/vchart/fix-waterfall-break_2024-12-13-04-02.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix(vchart-extension): series-break should keep align width axis break, related to #3560\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

common/changes/@visactor/vchart/fix-waterfall-break_2024-12-13-04-03.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: breaks should consider the `min` and `max` of axis, related to #3560",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart-extension/src/components/series-break/util.ts

@@ -53,7 +53,9 @@ export function getSeriesBreakConfig(axesSpec: ILinearAxisSpec[], axesIndex?: nu
           const parsedAxisId = axisId ?? `${axisModel.type}-${axisModel.id}`;
 
           const regionBounds = getAllRegionBounds(axisModel.getRegions());
-          array(spec.breaks).forEach((breakConfig: ILinearAxisBreakSpec) => {
+
+          // todo 这里用到了内部变量，不太安全
+          array(axisModel._break?.breaks).forEach((breakConfig: ILinearAxisBreakSpec) => {
             const { range, breakSymbol, gap = 5 } = breakConfig;
             const pos1 = axisModel.valueToPosition(range[0]);
             const pos2 = axisModel.valueToPosition(range[1]);
@@ -356,7 +358,7 @@ function isPointInPolygon(point: Point, polygon: Point[]) {
 
 export const appendSeriesBreakConfig = (rawSpec: ISpec) => {
   if (rawSpec.axes?.length) {
-    const breakedAxes = rawSpec.axes.filter((axis: any) => axis.breaks && axis.breaks.length);
+    const breakedAxes = rawSpec.axes.filter((axis: any) => axis.breaks && axis.breaks.length && axis.visible !== false);
 
     if (breakedAxes.length) {
       (rawSpec as any).customMark = array((rawSpec as any).customMark).filter(
@@ -366,7 +368,7 @@ export const appendSeriesBreakConfig = (rawSpec: ISpec) => {
         getSeriesBreakConfig(
           breakedAxes as ILinearAxisSpec[],
           breakedAxes.map(axisSpec => {
-            return rawSpec.axes.indexOf(axisSpec);
+            return rawSpec.axes.indexOf(axisSpec as any);
           })
         )
       );

packages/vchart/src/component/axis/cartesian/axis.ts

@@ -2,7 +2,7 @@ import type { ICartesianHorizontal } from './interface/spec';
 import { Bounds, last, type IBounds, type IBoundsLike, type Maybe } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
 import type { IEffect, IModelInitOption, IModelSpecInfo } from '../../../model/interface';
-import type { ICartesianSeries } from '../../../series/interface';
+import { SeriesTypeEnum, type ICartesianSeries } from '../../../series/interface';
 import type { IRegion } from '../../../region/interface';
 import type { ICartesianAxisCommonSpec, IAxisHelper, ICartesianVertical } from './interface';
 import { mergeSpec } from '@visactor/vutils-extension';
@@ -50,6 +50,7 @@ import type { IGraphic, IText } from '@visactor/vrender-core';
 // eslint-disable-next-line no-duplicate-imports
 import { createText } from '@visactor/vrender-core';
 import type { ICartesianChartSpec } from '../../../chart/cartesian/interface';
+import { STACK_FIELD_END, STACK_FIELD_START } from '../../../constant/data';
 
 const CartesianAxisPlugin = [AxisSyncPlugin];
 

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

@@ -38,6 +38,9 @@ export interface LinearAxisMixin {
   isSeriesDataEnable: any;
   computeDomain: any;
   collectData: (depth?: number) => { min: number; max: number; values: any[] }[];
+  /**
+   * 这个变量在其他break相关组件和扩展中都有使用
+   */
   _break: {
     domain: [number, number][];
     scope: [number, number][];
@@ -163,9 +166,11 @@ export class LinearAxisMixin {
       if (userSetBreaks) {
         const breakRanges = [];
         const breaks = [];
+        // 如果用户手动的手指了max，可以将break的最大值限制在用户设置的最大值范围内
+        const breakMaxLimit = isNil(this._domain.max) ? maxDomain : this._domain.max;
         for (let index = 0; index < this._spec.breaks.length; index++) {
           const { range } = this._spec.breaks[index];
-          if (range[0] <= range[1] && range[1] <= maxDomain) {
+          if (range[0] <= range[1] && range[1] <= breakMaxLimit) {
             breakRanges.push(range);
             breaks.push(this._spec.breaks[index]);
           }

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

@@ -1,3 +1,5 @@
+import { isEqual } from '@visactor/vutils';
+
 const setDomain = (min: number, max: number, breaks: number[]): [number, number][] =>
   breaks.reduce(
     (r, b, i) => {
@@ -15,6 +17,7 @@ function breakDomain(data: number[], points: number[]): [number, number][] {
   if (breaks.length === 0) {
     return [[min, max]];
   }
+
   return setDomain(min, max, breaks);
 }
 
@@ -65,8 +68,14 @@ function breakScope(data: number[], points: number[], scopeType: 'count' | 'leng
       res.push([0, i / bins.length - 1]);
     } else {
       const length = scopeType === 'count' ? bin.count : bin.max - bin.min;
-      res.push([res[i - 1] ? res[i - 1][1] : 0, i === bins.length - 1 ? 1 : Math.min((acc + length) / totalLength, 1)]);
-      acc += length;
+      const b0 = res[i - 1] ? res[i - 1][1] : 0;
+      const b1 = i === bins.length - 1 ? 1 : Math.min((acc + length) / totalLength, 1);
+
+      if (b0 === b1 && (b0 === 0 || b0 === 1)) {
+      } else {
+        res.push([b0, b1]);
+        acc += length;
+      }
     }
   });