2758 bug pivot table celltype chart error

common/changes/@visactor/vtable/2758-bug-pivot-table-celltype-chart-error_2024-11-05-07-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: when pivot cell type set chart not data cell render error #2758\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

docs/assets/option/en/column/chart-column-type.md

@@ -23,3 +23,7 @@ Corresponding to the injected chart library component name
 **Chart type exclusive configuration options**
 
 Set the spec of the chart, or set it to a function that returns a different spec. The data displayed in the chart is provided by records.
+
+##${prefix} noDataRenderNothing(boolean) = false
+
+Do not render the chart when there is no data. Defaults to false

docs/assets/option/en/indicator/chart-indicator-type.md

@@ -23,3 +23,7 @@ Set the spec of the chart, or set it to a function that returns a different spec
 {{ use: base-indicator-type(
     prefix = '##'+${prefix}
 ) }}
+
+##${prefix} noDataRenderNothing(boolean) = false
+
+Do not render the chart when there is no data. Defaults to false

docs/assets/option/zh/column/chart-column-type.md

@@ -22,4 +22,8 @@
 
 **chart 类型专属配置项**
 
-设置图表的 spec，或者设置成函数返回不同的spec。其中显示在图表的数据是对应在 records 中提供。
+设置图表的 spec，或者设置成函数返回不同的 spec。其中显示在图表的数据是对应在 records 中提供。
+
+##${prefix} noDataRenderNothing(boolean) = false
+
+没有数据时不渲染图表 默认为 false

docs/assets/option/zh/indicator/chart-indicator-type.md

@@ -18,8 +18,12 @@
 
 **chart 类型专属配置项**
 
-设置图表的 spec，或者设置成函数返回不同的spec。其中显示在图表的数据由 records 提供。
+设置图表的 spec，或者设置成函数返回不同的 spec。其中显示在图表的数据由 records 提供。
 
 {{ use: base-indicator-type(
     prefix = '##'+${prefix}
 ) }}
+
+##${prefix} noDataRenderNothing(boolean) = false
+
+没有数据时不渲染图表 默认为 false

packages/vtable/src/layout/chart-helper/get-chart-spec.ts

@@ -54,6 +54,20 @@ export function isShareChartSpec(col: number, row: number, layout: PivotHeaderLa
   }
   return true;
 }
+export function isNoChartDataRenderNothing(col: number, row: number, layout: PivotHeaderLayoutMap): any {
+  const paths = layout.getCellHeaderPaths(col, row);
+  let indicatorObj;
+  if (layout.indicatorsAsCol) {
+    const indicatorKey = paths.colHeaderPaths.find(colPath => colPath.indicatorKey)?.indicatorKey;
+    indicatorObj = layout.columnObjects.find(indicator => indicator.indicatorKey === indicatorKey);
+  } else {
+    const indicatorKey = paths.rowHeaderPaths.find(rowPath => rowPath.indicatorKey)?.indicatorKey;
+    indicatorObj = layout.columnObjects.find(indicator => indicator.indicatorKey === indicatorKey);
+  }
+  const noDataRenderNothing = indicatorObj?.noDataRenderNothing;
+
+  return noDataRenderNothing;
+}
 /** 检查是否有直角坐标系的图表 */
 export function checkHasCartesianChart(indicatorsDefine: (IIndicator | IChartIndicator | string)[]) {
   let isHasCartesianChart = false;

packages/vtable/src/layout/pivot-header-layout.ts

@@ -43,6 +43,7 @@ import {
   getRawChartSpec,
   isCartesianChart,
   isHasCartesianChartInline,
+  isNoChartDataRenderNothing,
   isShareChartSpec
 } from './chart-helper/get-chart-spec';
 import type { ITreeLayoutHeadNode, LayouTreeNode } from './tree-helper';
@@ -3085,7 +3086,10 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI {
   getChartDataId(col: number, row: number): any {
     return getChartDataId(col, row, this);
   }
-
+  /** 是否当chart没有数据时 图表单元格不绘制chart的任何内容 如网格线 */
+  isNoChartDataRenderNothing(col: number, row: number): boolean {
+    return isNoChartDataRenderNothing(col, row, this);
+  }
   setPagination(pagination: IPagination): void {
     this.clearCellRangeMap();
     this._table.internalProps.useOneRowHeightFillAll = false;

packages/vtable/src/layout/simple-header-layout.ts

@@ -12,7 +12,7 @@ import type {
   Aggregation,
   IRowSeriesNumber
 } from '../ts-types';
-import type { ColumnsDefine, TextColumnDefine } from '../ts-types/list-table/define';
+import type { ChartColumnDefine, ColumnsDefine } from '../ts-types/list-table/define';
 import type {
   ColumnData,
   ColumnDefine,
@@ -1354,6 +1354,12 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     }
     return true;
   }
+  /** 是否当chart没有数据时 图表单元格不绘制chart的任何内容 如网格线 */
+  isNoChartDataRenderNothing(col: number, row: number): boolean {
+    const body = this.getBody(col, row);
+    const noDataRenderNothing = ((body as ColumnData)?.define as ChartColumnDefine).noDataRenderNothing;
+    return noDataRenderNothing;
+  }
   getChartSpec(col: number, row: number) {
     return this.getRawChartSpec(col, row);
   }

packages/vtable/src/layout/tree-helper.ts

@@ -479,6 +479,7 @@ export function dealHeader(
         cellType: indicatorInfo?.cellType ?? (indicatorInfo as any)?.columnType ?? 'text',
         chartModule: 'chartModule' in indicatorInfo ? indicatorInfo.chartModule : null,
         chartSpec: 'chartSpec' in indicatorInfo ? indicatorInfo.chartSpec : null,
+        noDataRenderNothing: 'noDataRenderNothing' in indicatorInfo ? indicatorInfo.noDataRenderNothing : false,
         sparklineSpec: 'sparklineSpec' in indicatorInfo ? indicatorInfo.sparklineSpec : null,
         style: indicatorInfo?.style,
         icon: indicatorInfo?.icon,
@@ -668,6 +669,7 @@ export function dealHeaderForTreeMode(
         cellType: indicatorInfo?.cellType ?? (indicatorInfo as any)?.columnType ?? 'text',
         chartModule: 'chartModule' in indicatorInfo ? indicatorInfo.chartModule : null,
         chartSpec: 'chartSpec' in indicatorInfo ? indicatorInfo.chartSpec : null,
+        noDataRenderNothing: 'noDataRenderNothing' in indicatorInfo ? indicatorInfo.noDataRenderNothing : false,
         sparklineSpec: 'sparklineSpec' in indicatorInfo ? indicatorInfo.sparklineSpec : null,
         style: indicatorInfo?.style,
         icon: indicatorInfo?.icon,

packages/vtable/src/scenegraph/group-creater/cell-helper.ts

@@ -278,7 +278,8 @@ export function createCell(
       table,
       cellTheme,
       table.internalProps.layoutMap.isShareChartSpec(col, row),
-      isAsync
+      isAsync,
+      table.internalProps.layoutMap.isNoChartDataRenderNothing(col, row)
     );
   } else if (type === 'progressbar') {
     const style = table._getCellStyle(col, row) as ProgressBarStyle;

packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts

@@ -24,7 +24,8 @@ export function createChartCellGroup(
   table: BaseTableAPI,
   cellTheme: IThemeSpec,
   isShareChartSpec: true,
-  isAsync: boolean
+  isAsync: boolean,
+  isNoChartDataRenderNothing: boolean
 ) {
   // 获取注册的chart图表类型
   const registerCharts = registerChartTypes.get();
@@ -86,42 +87,43 @@ export function createChartCellGroup(
   }
   cellGroup.AABBBounds.width(); // TODO 需要底层VRender修改
   // chart
-  const chartGroup = new Chart(isShareChartSpec, {
-    stroke: false,
-    x: padding[3],
-    y: padding[0],
-    // canvas: table.canvas,
-    canvas: table.canvas ?? (table.scenegraph.stage.window.getContext().canvas as unknown as HTMLCanvasElement),
-    mode: table.options.mode,
-    modeParams: table.options.modeParams,
-    spec: chartSpec,
-    ClassType,
-    width: width - padding[3] - padding[1],
-    height: height - padding[2] - padding[0],
-    chartInstance,
-    dataId,
-    data: table.getCellValue(col, row),
-    cellPadding: padding,
-    dpr: table.internalProps.pixelRatio,
-    // viewBox: {
-    //   x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-    //   x2: Math.ceil(cellGroup.globalAABBBounds.x1 + width - padding[1] + table.scrollLeft),
-    //   y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-    //   y2: Math.ceil(cellGroup.globalAABBBounds.y1 + height - padding[2] + table.scrollTop)
-    // },
-    axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
-    // clipRect: {
-    //   left: cellGroup.globalAABBBounds.x1 + (table as any).tableX + padding[3],
-    //   top: cellGroup.globalAABBBounds.y1 + (table as any).tableY + padding[0],
-    //   width: width - padding[1] - padding[3], //cellGroup.globalAABBBounds.width() - padding[1] - padding[3],
-    //   height: height - padding[0] - padding[2],
-    // },
-    tableChartOption: table.options.chartOption
-  });
-  cellGroup.appendChild(chartGroup);
-  // 将生成的实例存到layoutMap中 共享
-  table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
-
+  if ((isNoChartDataRenderNothing && Array.isArray(table.getCellValue(col, row))) || !isNoChartDataRenderNothing) {
+    const chartGroup = new Chart(isShareChartSpec, {
+      stroke: false,
+      x: padding[3],
+      y: padding[0],
+      // canvas: table.canvas,
+      canvas: table.canvas ?? (table.scenegraph.stage.window.getContext().canvas as unknown as HTMLCanvasElement),
+      mode: table.options.mode,
+      modeParams: table.options.modeParams,
+      spec: chartSpec,
+      ClassType,
+      width: width - padding[3] - padding[1],
+      height: height - padding[2] - padding[0],
+      chartInstance,
+      dataId,
+      data: table.getCellValue(col, row) || [],
+      cellPadding: padding,
+      dpr: table.internalProps.pixelRatio,
+      // viewBox: {
+      //   x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+      //   x2: Math.ceil(cellGroup.globalAABBBounds.x1 + width - padding[1] + table.scrollLeft),
+      //   y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+      //   y2: Math.ceil(cellGroup.globalAABBBounds.y1 + height - padding[2] + table.scrollTop)
+      // },
+      axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : [],
+      // clipRect: {
+      //   left: cellGroup.globalAABBBounds.x1 + (table as any).tableX + padding[3],
+      //   top: cellGroup.globalAABBBounds.y1 + (table as any).tableY + padding[0],
+      //   width: width - padding[1] - padding[3], //cellGroup.globalAABBBounds.width() - padding[1] - padding[3],
+      //   height: height - padding[0] - padding[2],
+      // },
+      tableChartOption: table.options.chartOption
+    });
+    cellGroup.appendChild(chartGroup);
+    // 将生成的实例存到layoutMap中 共享
+    table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
+  }
   return cellGroup;
 }
 

packages/vtable/src/ts-types/list-table/define/chart-define.ts

@@ -10,4 +10,5 @@ export interface IChartColumnBodyDefine extends IBasicColumnBodyDefine {
   chartModule?: string;
   /** 对应图表库的spec 其中value对应在records中提供 */
   chartSpec?: any | ((arg0: CellInfo) => any);
+  noDataRenderNothing?: boolean; // 没有数据时不渲染图表 默认为false
 }

packages/vtable/src/ts-types/list-table/layout-map/api.ts

@@ -154,6 +154,7 @@ export interface IndicatorData extends WidthData {
   chartModule?: string;
   chartSpec?: any | ((arg0: CustomRenderFunctionArg) => any);
   chartInstance?: any;
+  noDataRenderNothing?: boolean;
   style?: ColumnStyleOption | null | undefined;
   define: ColumnDefine;
   // headerIcon?:

packages/vtable/src/ts-types/pivot-table/indicator/chart-indicator.ts

@@ -9,4 +9,5 @@ export interface IChartColumnIndicator extends IBasicColumnIndicator {
 
   chartModule?: string; // 如果是绘制图表库组件的图表类型 需要将注入的组件名称 写到chartType
   chartSpec?: any | ((arg0: CellInfo) => any); // 如果是绘制图表库组件的图表类型 统一图表配置chartSpec
+  noDataRenderNothing?: boolean; // 没有数据时不渲染图表 默认为false
 }