Merge pull request #214 from VisActor/fix/fix-axis-fs

Fix/fix axis fs
VisActor · Aug 11, 2023 · dccb744 · dccb744
2 parents 636426f + 3c2a5f7
commit dccb744
Show file tree

Hide file tree

Showing 15 changed files with 5,023 additions and 18 deletions.
diff --git a/packages/vtable/examples/fs/update-option.ts b/packages/vtable/examples/fs/update-option.ts
diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts
@@ -441,5 +441,14 @@ export const menus = [
         name: 'unitTestPivotChart'
       }
     ]
+  },
+  {
+    menu: 'fs',
+    children: [
+      {
+        path: 'fs',
+        name: 'update-option'
+      }
+    ]
   }
 ];
diff --git a/packages/vtable/examples/pivot-chart/pivotChart-axis.ts b/packages/vtable/examples/pivot-chart/pivotChart-axis.ts
@@ -225,7 +225,17 @@ export function createTable() {
           }
         ],
         axes: [
-          { orient: 'left', visible: true, label: { visible: true } },
+          {
+            orient: 'left',
+            visible: true,
+            label: {
+              visible: true,
+              formatMethod(text, datum) {
+                return text + 'aaaaaaaaa';
+              }
+            }
+          },
+          { orient: 'right', visible: true, label: { visible: true }, title: { visible: true, text: 'aaaa' } },
           { orient: 'bottom', visible: true }
         ]
       },
@@ -9279,7 +9289,7 @@ export function createTable() {
     defaultRowHeight: 200,
     defaultHeaderRowHeight: 50,
     defaultColWidth: 280,
-    defaultHeaderColWidth: 100,
+    defaultHeaderColWidth: [100, 'auto'],
     indicatorTitle: '指标',
     corner: {
       titleOnDimension: 'row',
@@ -9370,7 +9380,11 @@ export function createTable() {
     // }
     axes: [
       {
-        orient: 'bottom'
+        orient: 'bottom',
+        title: {
+          visible: true,
+          text: 'bbbbb'
+        }
         // visible: false
       },
       {

diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts
@@ -148,6 +148,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
     this.setCustomStateNameToSpec();
     // 更新protectedSpace
     internalProps.dataConfig = {};
+
+    this._axes = isArray(options.axes) ? options.axes : [];
+
     //TODO 这里需要加上判断 dataConfig是否有配置变化
     if (options.rows || options.columns) {
       const rowKeys = options.rows.reduce((keys, rowObj) => {

diff --git a/packages/vtable/src/components/axis/get-axis-attributes.ts b/packages/vtable/src/components/axis/get-axis-attributes.ts
@@ -76,7 +76,7 @@ export const commonAxis = {
   },
   label: {
     visible: true,
-    space: 0,
+    space: 1, // hack: VChart中为0，为了方便fs调试暂时改为1
     style: {
       fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE,
       fill: '#89909D',

diff --git a/packages/vtable/src/components/axis/get-axis-component-size.ts b/packages/vtable/src/components/axis/get-axis-component-size.ts
@@ -8,7 +8,7 @@ import { commonAxis } from './get-axis-attributes';
  * @param {ICellAxisOption} config
  * @return {*}
  */
-export function computeAxisConpomentWidth(config: ICellAxisOption, table: BaseTableAPI) {
+export function computeAxisComponentWidth(config: ICellAxisOption, table: BaseTableAPI) {
   const attribute = merge({}, commonAxis, config);
   // tick
   const tickWidth = attribute.tick.width ?? 4;
@@ -19,6 +19,9 @@ export function computeAxisConpomentWidth(config: ICellAxisOption, table: BaseTa
     if (attribute.type === 'band') {
       const domain = attribute.domain;
       domain.forEach((text: string) => {
+        if (attribute.label.formatMethod) {
+          text = attribute.label.formatMethod(text);
+        }
         labelWidth = Math.max(
           labelWidth,
           table.measureText(text, {
@@ -36,6 +39,9 @@ export function computeAxisConpomentWidth(config: ICellAxisOption, table: BaseTa
       const maxString = formatDecimal(maxNumber);
       // 这里测量的是预估的最大最小range，与实际现实的label可能不同
       [minString, maxString].forEach(text => {
+        if (attribute.label.formatMethod) {
+          text = attribute.label.formatMethod(text);
+        }
         labelWidth = Math.max(
           labelWidth,
           table.measureText(text, {
@@ -51,7 +57,7 @@ export function computeAxisConpomentWidth(config: ICellAxisOption, table: BaseTa
   // title
   let titleWidth = 0;
   if (attribute.title.visible && attribute.title.text) {
-    if (attribute.title.autoRotate) {
+    if ((config.orient === 'left' || config.orient === 'right') && attribute.title.autoRotate) {
       titleWidth =
         table.measureText(attribute.title.text as string, {
           fontSize: attribute.title?.style?.fontSize,
@@ -70,6 +76,79 @@ export function computeAxisConpomentWidth(config: ICellAxisOption, table: BaseTa
   return tickWidth + labelWidth + titleWidth;
 }
 
+/**
+ * @description: compuational horizontal axis height
+ * @param {ICellAxisOption} config
+ * @return {*}
+ */
+export function computeAxisComponentHeight(config: ICellAxisOption, table: BaseTableAPI) {
+  const attribute = merge({}, commonAxis, config);
+  // tick
+  const tickHeight = attribute.tick.width ?? 4;
+
+  // text
+  let labelHeight = 0;
+  if (attribute.label.visible) {
+    if (attribute.type === 'band') {
+      const domain = attribute.domain;
+      domain.forEach((text: string) => {
+        if (attribute.label.formatMethod) {
+          text = attribute.label.formatMethod(text);
+        }
+        labelHeight = Math.max(
+          labelHeight,
+          table.measureText(text, {
+            fontSize: attribute.label?.style?.fontSize,
+            fontFamily: attribute.label?.style?.fontFamily
+          }).height
+        );
+      });
+    } else {
+      const range = attribute.range;
+      const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
+      const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
+      // abs>1取整保留两位有效数字，abs<1保留一位有效数字
+      const minString = formatDecimal(minNumber);
+      const maxString = formatDecimal(maxNumber);
+      // 这里测量的是预估的最大最小range，与实际现实的label可能不同
+      [minString, maxString].forEach(text => {
+        if (attribute.label.formatMethod) {
+          text = attribute.label.formatMethod(text);
+        }
+        labelHeight = Math.max(
+          labelHeight,
+          table.measureText(text, {
+            fontSize: attribute.label?.style?.fontSize,
+            fontFamily: attribute.label?.style?.fontFamily
+          }).height + 2
+        );
+      });
+    }
+    labelHeight += attribute.label.space ?? 4;
+  }
+
+  // title
+  let titleHeight = 0;
+  if (attribute.title.visible && attribute.title.text) {
+    if ((config.orient === 'bottom' || config.orient === 'top') && attribute.title.autoRotate) {
+      titleHeight =
+        table.measureText(attribute.title.text as string, {
+          fontSize: attribute.title?.style?.fontSize,
+          fontFamily: attribute.title?.style?.fontFamily
+        }).width + 2;
+    } else {
+      titleHeight =
+        table.measureText(attribute.title.text as string, {
+          fontSize: attribute.title?.style?.fontSize,
+          fontFamily: attribute.title?.style?.fontFamily
+        }).height + 2;
+    }
+    titleHeight += attribute.title.space ?? 4;
+  }
+
+  return tickHeight + labelHeight + titleHeight;
+}
+
 // 保留一位有效数字
 function formatDecimal(number: number) {
   if (typeof number !== 'number') {

diff --git a/packages/vtable/src/components/legend/legend.ts b/packages/vtable/src/components/legend/legend.ts
@@ -42,6 +42,23 @@ export class TableLegend {
     this.legendComponent = legend;
     this.table.scenegraph.stage.defaultLayer.appendChild(legend);
 
+    this.adjustTableSize(attrs);
+  }
+
+  resize() {
+    if (!this.legendComponent) {
+      return;
+    }
+
+    this.legendComponent.setAttributes({
+      width: this.table.tableNoFrameWidth,
+      height: this.table.tableNoFrameHeight
+    });
+
+    this.adjustTableSize(this.legendComponent.attribute);
+  }
+
+  adjustTableSize(attrs: any) {
     // 调整位置
     let width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;
     let height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;
@@ -162,7 +179,7 @@ export class TableLegend {
     };
   }
   release() {
-    this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
+    this.legendComponent && this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);
     this.legendComponent = null;
   }
 }
diff --git a/packages/vtable/src/components/title/title.ts b/packages/vtable/src/components/title/title.ts
@@ -30,7 +30,39 @@ export class Title {
       // title.on('*', (event: any, type: string) => this._delegateEvent(title as unknown as INode, event, type));
     }
     // update table size
+    this._adjustTableSize(this._titleComponent.attribute);
+    return this._titleComponent;
+  }
 
+  resize() {
+    if (!this._titleComponent) {
+      return;
+    }
+    const padding = getQuadProps(this._titleOption.padding ?? 10);
+    const realWidth = this._titleOption.width ?? this.table.tableNoFrameWidth - padding[1] - padding[3];
+    this._titleComponent.setAttributes({
+      x:
+        this._titleOption.x ?? this._titleOption.orient === 'right'
+          ? this.table.tableX + this.table.tableNoFrameWidth
+          : this.table.tableX,
+      y:
+        this._titleOption.y ?? this._titleOption.orient === 'bottom'
+          ? this.table.tableY + this.table.tableNoFrameHeight
+          : this.table.tableY,
+      width: realWidth,
+      textStyle: {
+        width: realWidth,
+        ...this._titleOption.textStyle
+      },
+      subtextStyle: {
+        width: realWidth,
+        ...this._titleOption.subtextStyle
+      }
+    });
+    this._adjustTableSize(this._titleComponent.attribute);
+  }
+
+  _adjustTableSize(attrs: TitleAttrs) {
     // 调整位置
     let width = isFinite(this._titleComponent.AABBBounds.width()) ? this._titleComponent.AABBBounds.width() : 0;
     const height = isFinite(this._titleComponent.AABBBounds.height()) ? this._titleComponent.AABBBounds.height() : 0;
@@ -81,7 +113,6 @@ export class Title {
             : this.table.tableY
       });
     }
-    return this._titleComponent;
   }
 
   release(): void {

diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts
@@ -356,6 +356,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
 
   resize() {
     this._updateSize();
+    if (this.internalProps.legends) {
+      this.internalProps.legends.resize();
+    }
+    if (this.internalProps.title) {
+      this.internalProps.title.resize();
+    }
     this.scenegraph.resize();
   }
 

diff --git a/packages/vtable/src/layout/chart-helper/get-axis-config.ts b/packages/vtable/src/layout/chart-helper/get-axis-config.ts
@@ -89,8 +89,8 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
         {
           title: {
             visible: true,
-            text: (indicatorInfo as any)?.caption,
-            autoRotate: true
+            text: (indicatorInfo as any)?.caption
+            // autoRotate: true
           },
           range: range
         },
@@ -125,7 +125,10 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
       // 左侧维度轴
       return merge(
         {
-          domain: Array.from(domain).reverse()
+          domain: Array.from(domain).reverse(),
+          title: {
+            autoRotate: true
+          }
         },
         axisOption,
         {
@@ -218,7 +221,10 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
       // 右侧副指标轴
       return merge(
         {
-          range: range
+          range: range,
+          title: {
+            autoRotate: true
+          }
         },
         axisOption,
         {

diff --git a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts
@@ -6,6 +6,8 @@ import type { PivotHeaderLayoutMap } from '../pivot-header-layout';
 import type { SimpleHeaderLayoutMap } from '../simple-header-layout';
 import { checkZeroAlign, getAxisOption } from './get-axis-config';
 
+const NO_AXISID_FRO_VTABLE = 'NO_AXISID_FRO_VTABLE';
+
 export function getRawChartSpec(col: number, row: number, layout: PivotLayoutMap | PivotHeaderLayoutMap): any {
   const paths = layout.getCellHeaderPaths(col, row);
   let indicatorObj;
@@ -70,7 +72,9 @@ export function getChartAxes(col: number, row: number, layout: PivotLayoutMap):
             label: { visible: false },
             title: { visible: false },
             seriesIndex: index,
-            height: -1
+            height: -1,
+
+            sync: { axisId: NO_AXISID_FRO_VTABLE } // hack for fs
           }
         )
       );
@@ -143,8 +147,10 @@ export function getChartAxes(col: number, row: number, layout: PivotLayoutMap):
             label: { visible: false },
             title: { visible: false },
             seriesIndex: index,
-            width: -1
+            width: -1,
             // grid: index === 0 ? undefined : { visible: false }
+
+            sync: { axisId: NO_AXISID_FRO_VTABLE } // hack for fs
           }
         )
       );

diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts
@@ -9,7 +9,7 @@ import { getProp } from '../utils/get-prop';
 import type { BaseTableAPI } from '../../ts-types/base-table';
 import type { PivotLayoutMap } from '../../layout/pivot-layout';
 import { getAxisConfigInPivotChart } from '../../layout/chart-helper/get-axis-config';
-import { computeAxisConpomentWidth } from '../../components/axis/get-axis-component-size';
+import { computeAxisComponentWidth } from '../../components/axis/get-axis-component-size';
 
 export function computeColsWidth(table: BaseTableAPI, colStart?: number, colEnd?: number, update?: boolean): void {
   colStart = colStart ?? 0;
@@ -241,7 +241,7 @@ function computeAutoColWidth(
       const layout = table.internalProps.layoutMap as PivotLayoutMap;
       const axisConfig = getAxisConfigInPivotChart(col, row, layout);
       if (axisConfig) {
-        const axisWidth = computeAxisConpomentWidth(axisConfig, table);
+        const axisWidth = computeAxisComponentWidth(axisConfig, table);
         if (typeof axisWidth === 'number') {
           maxWidth = Math.max(axisWidth, maxWidth);
           continue;