feat: support trimPadding for band type axis, which used to remove …

…the blank space at both ends of the aixs, closed #1174
VisActor · Nov 22, 2023 · 866bbd8 · 866bbd8
1 parent 88004c4
commit 866bbd8
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 30 deletions.
diff --git a/packages/vchart/src/chart/cartesian/cartesian.ts b/packages/vchart/src/chart/cartesian/cartesian.ts
@@ -1,7 +1,9 @@
-import type { IRegion } from '../../region/interface';
 import { BaseChart } from '../base-chart';
 import type { ISeries } from '../../series/interface';
 import type { ICartesianAxisSpec } from '../../component';
+import { getTrimPaddingConfig } from '../util';
+import { get } from '@visactor/vutils';
+import { mergeSpec } from '../../util/spec';
 
 export class CartesianChart extends BaseChart {
   readonly seriesType: string;
@@ -44,37 +46,38 @@ export class CartesianChart extends BaseChart {
       if (!spec.axes) {
         spec.axes = [];
       }
-      spec.region.forEach((r: IRegion) => {
-        const haxAxes = { x: false, y: false, z: false };
-        spec.axes.forEach((axis: ICartesianAxisSpec) => {
-          const { orient } = axis;
-          if (orient === 'top' || orient === 'bottom') {
-            haxAxes.x = true;
-          }
-          if (orient === 'left' || orient === 'right') {
-            haxAxes.y = true;
-          }
-          if (orient === 'z') {
-            haxAxes.z = true;
-          }
-        });
-        if (!haxAxes.x) {
-          spec.axes.push({
-            orient: 'bottom'
-          });
+      const haxAxes = { x: false, y: false, z: false };
+      spec.axes.forEach((axis: ICartesianAxisSpec) => {
+        const { orient } = axis;
+        if (orient === 'top' || orient === 'bottom') {
+          haxAxes.x = true;
+        }
+        if (orient === 'left' || orient === 'right') {
+          haxAxes.y = true;
         }
-        if (!haxAxes.y) {
-          spec.axes.push({
-            orient: 'left'
-          });
+        if (orient === 'z') {
+          haxAxes.z = true;
         }
-        // 如果有zField字段，但是没有配置z轴，那么添加一个z轴
-        if (spec.zField && !haxAxes.z) {
-          spec.axes.push({
-            orient: 'z'
-          });
+        if (get(axis, 'trimPadding')) {
+          mergeSpec(axis, getTrimPaddingConfig(this.type, spec));
         }
       });
+      if (!haxAxes.x) {
+        spec.axes.push({
+          orient: 'bottom'
+        });
+      }
+      if (!haxAxes.y) {
+        spec.axes.push({
+          orient: 'left'
+        });
+      }
+      // 如果有zField字段，但是没有配置z轴，那么添加一个z轴
+      if (spec.zField && !haxAxes.z) {
+        spec.axes.push({
+          orient: 'z'
+        });
+      }
     }
 
     const defaultSeriesSpec = this._getDefaultSeriesSpec(spec);

diff --git a/packages/vchart/src/chart/common/common.ts b/packages/vchart/src/chart/common/common.ts
@@ -1,8 +1,10 @@
-import { isArray } from '@visactor/vutils';
+import { get } from '@visactor/vutils';
 import { BaseChart } from '../base-chart';
 import { ChartTypeEnum } from '../interface/type';
 import type { ISeries } from '../../series';
 import { Factory } from '../../core/factory';
+import { mergeSpec } from '../../util/spec';
+import { getTrimPaddingConfig } from '../util';
 
 export class CommonChart extends BaseChart {
   static readonly type: string = ChartTypeEnum.common;
@@ -19,7 +21,7 @@ export class CommonChart extends BaseChart {
 
   transformSpec(spec: any): void {
     super.transformSpec(spec);
-    if (isArray(spec.series)) {
+    if (spec.series && spec.series.length) {
       const defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
       spec.series.forEach((s: ISeries) => {
         if (!this.isValidSeries(s.type)) {
@@ -32,6 +34,13 @@ export class CommonChart extends BaseChart {
         });
       });
     }
+    if (spec.axes && spec.axes.length) {
+      spec.axes.forEach((axis: any) => {
+        if (get(axis, 'trimPadding')) {
+          mergeSpec(axis, getTrimPaddingConfig(this.type, spec));
+        }
+      });
+    }
   }
 }
 

diff --git a/packages/vchart/src/chart/util.ts b/packages/vchart/src/chart/util.ts
@@ -1,5 +1,6 @@
 import { getContainerSize, isString } from '@visactor/vutils';
 import { DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH } from '../constant/base';
+import type { IChartSpec } from '../typings';
 import { Direction } from '../typings';
 import { array, isMiniAppLikeMode, isTrueBrowser, isValid, mergeSpec } from '../util';
 import type { ICartesianChartSpec } from './cartesian/interface';
@@ -83,3 +84,20 @@ export function mergeUpdateResult(resultA: IUpdateSpecResult, resultB: IUpdateSp
   resultA.reSize = resultA.reSize || resultB.reSize;
   return resultA;
 }
+
+export function getTrimPaddingConfig(chartType: string, spec: IChartSpec) {
+  if (
+    chartType === 'line' ||
+    chartType === 'area' ||
+    (chartType === 'common' && spec.series.every(item => item.type === 'area' || item.type === 'line'))
+  ) {
+    return {
+      paddingInner: 1,
+      paddingOuter: 0
+    };
+  }
+
+  return {
+    paddingOuter: 0
+  };
+}
diff --git a/packages/vchart/src/component/axis/interface/spec.ts b/packages/vchart/src/component/axis/interface/spec.ts
@@ -117,6 +117,14 @@ export interface ILinearAxisSpec {
 }
 
 export interface IBandAxisSpec {
+  /**
+   * 是否去除 band 轴两端的留白，如果为 true，则两端的 padding 为 0，
+   * **并且 bandPadding、paddingInner 和 paddingOuter 的设置将被忽略**。
+   * 如果配置了该属性，
+   * @default false
+   * @since 1.7.0
+   */
+  trimPadding?: boolean;
   /**
    * 同时设置轴的 paddingInner 和 paddingOuter
    * **因为有可能存在多层 scale( xField 设置成了数组，即分组场景），所以支持了数组类型，用于多层 scale 的 bandPadding 配置**