fix: fix bandSize add padding inner outer in chart size

VisActor · Sep 28, 2023 · 8401dba · 8401dba
1 parent 2740f7e
commit 8401dba
Showing 1 changed file with 47 additions and 3 deletions.
diff --git a/packages/vtable/src/layout/pivot-layout.ts b/packages/vtable/src/layout/pivot-layout.ts
@@ -20,7 +20,7 @@ import type {
 import type { PivotTable } from '../PivotTable';
 import { IndicatorDimensionKeyPlaceholder } from '../tools/global';
 import type { PivotChart } from '../PivotChart';
-import { cloneDeep } from '@visactor/vutils';
+import { cloneDeep, isArray } from '@visactor/vutils';
 import { getAxisConfigInPivotChart } from './chart-helper/get-axis-config';
 import { getChartAxes, getChartDataId, getChartSpec, getRawChartSpec } from './chart-helper/get-chart-spec';
 import type { ITableAxisOption } from '../ts-types/component/axis';
@@ -112,6 +112,8 @@ export class PivotLayoutMap implements LayoutMapAPI {
   hasTwoIndicatorAxes: boolean;
   /** 图表spec中barWidth的收集 */
   _chartItemSpanSize: number;
+  _chartPaddingInner: number;
+  _chartPaddingOuter: number;
   _chartItemBandSize: number;
   _chartPadding?: number | number[];
   constructor(table: PivotTable | PivotChart, dataset: Dataset) {
@@ -269,6 +271,10 @@ export class PivotLayoutMap implements LayoutMapAPI {
         });
         if (bandAxisConfig?.bandSize) {
           this._chartItemBandSize = bandAxisConfig?.bandSize;
+          this._chartPaddingInner =
+            (isArray(bandAxisConfig.paddingInner) ? bandAxisConfig.paddingInner[0] : bandAxisConfig.paddingInner) ?? 0;
+          this._chartPaddingOuter =
+            (isArray(bandAxisConfig.paddingOuter) ? bandAxisConfig.paddingOuter[0] : bandAxisConfig.paddingOuter) ?? 0;
         }
         if (this._chartItemSpanSize > 0) {
           return true;
@@ -1494,7 +1500,13 @@ export class PivotLayoutMap implements LayoutMapAPI {
     }
     let width;
     if (this._chartItemBandSize) {
-      width = (collectedValues?.length ?? 0) * this._chartItemBandSize;
+      // width = (collectedValues?.length ?? 0) * this._chartItemBandSize;
+      width = scaleWholeRangeSize(
+        collectedValues?.length ?? 0,
+        this._chartItemBandSize,
+        this._chartPaddingInner,
+        this._chartPaddingOuter
+      );
     } else {
       const barWidth = this._chartItemSpanSize || 25;
       width = (collectedValues?.length ?? 0) * (barWidth + barWidth / 3);
@@ -1522,7 +1534,13 @@ export class PivotLayoutMap implements LayoutMapAPI {
     }
     let height;
     if (this._chartItemBandSize) {
-      height = (collectedValues?.length ?? 0) * this._chartItemBandSize;
+      // height = (collectedValues?.length ?? 0) * this._chartItemBandSize;
+      height = scaleWholeRangeSize(
+        collectedValues?.length ?? 0,
+        this._chartItemBandSize,
+        this._chartPaddingInner,
+        this._chartPaddingOuter
+      );
     } else {
       const barWidth = this._chartItemSpanSize || 25;
       height = (collectedValues?.length ?? 0) * (barWidth + barWidth / 3);
@@ -1638,3 +1656,29 @@ export class PivotLayoutMap implements LayoutMapAPI {
     // do nothing
   }
 }
+
+// FIXME: 等 vscale 暴露这两个方法后，删掉这两个方法
+
+/** 计算 scale 的实际 range 长度 */
+function scaleWholeRangeSize(count: number, bandwidth: number, paddingInner: number, paddingOuter: number) {
+  if (paddingInner === 1) {
+    paddingInner = 0; // 保护
+    // FIXME: vscale 同样需要加保护，目前这里加了保护以后，在 paddingInner为 1 的情况还是会崩溃
+  }
+  const space = bandSpace(count, paddingInner, paddingOuter);
+  const step = bandwidth / (1 - paddingInner);
+  const wholeSize = space * step;
+  return wholeSize;
+}
+
+function bandSpace(count: number, paddingInner: number, paddingOuter: number): number {
+  let space;
+  // count 等于 1 时需要特殊处理，否则 step 会超出 range 范围
+  // 计算公式: step = paddingOuter * step * 2 + paddingInner * step + bandwidth
+  if (count === 1) {
+    space = count + paddingOuter * 2;
+  } else {
+    space = count - paddingInner + paddingOuter * 2;
+  }
+  return count ? (space > 0 ? space : 1) : 0;
+}