docs: horizontalBackgroundColor verticalBackgroundColor

VisActor · Dec 23, 2024 · df000d5 · df000d5
1 parent 72288a8
commit df000d5
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 14 deletions.
diff --git a/docs/assets/option/en/common/gantt/grid.md b/docs/assets/option/en/common/gantt/grid.md
@@ -5,7 +5,15 @@ The IGrid definition is as follows:
 ```
 export interface IGrid {
   backgroundColor?: string;
+  /** 需要按数据行设置不同背景色 */
+  horizontalBackgroundColor?: string[] | ((args: GridHorizontalLineStyleArgumentType) => string);
+  /** 需要按日期列设置不同背景色 */
+  verticalBackgroundColor?: string[] | ((args: GridVerticalLineStyleArgumentType) => string);
+  /** 周末背景色 */
+  weekendBackgroundColor?: string;
+  /** 垂直间隔线样式 */
   verticalLine?: ILineStyle | ((args: GridVerticalLineStyleArgumentType) => ILineStyle);
+  /** 水平间隔线样式 */
   horizontalLine?: ILineStyle | ((args: GridHorizontalLineStyleArgumentType) => ILineStyle);
 }
 
@@ -19,6 +27,13 @@ export type GridVerticalLineStyleArgumentType = {
   ganttInstance: Gantt;
 };
 
+
+export type GridHorizontalLineStyleArgumentType = {
+  /** 横线是第几条线 也代表了左侧表格的body行号 */
+  index: number;
+  ganttInstance: Gantt;
+};
+
 ```
 
 ${prefix} backgroundColor(string)
@@ -27,6 +42,22 @@ Background color of the grid line area
 
 Optional
 
+${prefix} weekendBackgroundColor(string)
+
+Optional
+
+${prefix} horizontalBackgroundColor(string)
+
+Requires setting different background colors horizontally by data rows.
+
+Optional
+
+${prefix} verticalBackgroundColor(string)
+
+Requires setting different background colors vertically by date columns.
+
+Optional
+
 ${prefix} verticalLine(ILineStyle | Function)
 
 Vertical interval line style

diff --git a/docs/assets/option/zh/common/gantt/grid.md b/docs/assets/option/zh/common/gantt/grid.md
@@ -5,7 +5,15 @@ IGrid 定义如下：
 ```
 export interface IGrid {
   backgroundColor?: string;
+  /** 需要按数据行设置不同背景色 */
+  horizontalBackgroundColor?: string[] | ((args: GridHorizontalLineStyleArgumentType) => string);
+  /** 需要按日期列设置不同背景色 */
+  verticalBackgroundColor?: string[] | ((args: GridVerticalLineStyleArgumentType) => string);
+  /** 周末背景色 */
+  weekendBackgroundColor?: string;
+  /** 垂直间隔线样式 */
   verticalLine?: ILineStyle | ((args: GridVerticalLineStyleArgumentType) => ILineStyle);
+  /** 水平间隔线样式 */
   horizontalLine?: ILineStyle | ((args: GridHorizontalLineStyleArgumentType) => ILineStyle);
 }
 
@@ -18,6 +26,14 @@ export type GridVerticalLineStyleArgumentType = {
   date?: Date;
   ganttInstance: Gantt;
 };
+
+export type GridHorizontalLineStyleArgumentType = {
+  /** 横线是第几条线 也代表了左侧表格的body行号 */
+  index: number;
+  ganttInstance: Gantt;
+};
+
+
 ```
 
 ${prefix} backgroundColor(string)
@@ -26,6 +42,24 @@ ${prefix} backgroundColor(string)
 
 非必填
 
+${prefix} weekendBackgroundColor(string)
+
+周末背景颜色。仅当 scale 为 `day` 时生效。
+
+非必填
+
+${prefix} horizontalBackgroundColor(string)
+
+需要横向按数据行设置不同背景色
+
+非必填
+
+${prefix} verticalBackgroundColor(string)
+
+需要纵向按日期列设置不同背景色
+
+非必填
+
 ${prefix} verticalLine(ILineStyle | Function)
 
 垂直间隔线样式

diff --git a/packages/vtable-gantt/examples/gantt/gantt.ts b/packages/vtable-gantt/examples/gantt/gantt.ts
@@ -896,7 +896,7 @@ export function createTable() {
         lineColor: '#e1e4e8'
       },
       weekendBackgroundColor: 'rgba(0,100,0,0.3)',
-      columnBackgroundColor: ['#fbfbfc', '#fbfbf0', '#fbfbe0'] // args => (args.index % 2 === 0 ? '#fbfbfc' : '#fbfbf0')
+      verticalBackgroundColor: ['#fbfbfc', '#fbfbf0', '#fbfbe0'] // args => (args.index % 2 === 0 ? '#fbfbfc' : '#fbfbf0')
       // rowBackgroundColor: ['rgba(33,44,255,0.2)', '#fbfbf0', '#fbfbe0'] //args => (args.index % 2 === 0 ? '#fbfbfc' : '#fbfbf0')
     },
     headerRowHeight: 60,

diff --git a/packages/vtable-gantt/src/scenegraph/grid.ts b/packages/vtable-gantt/src/scenegraph/grid.ts
@@ -181,9 +181,9 @@ export class Grid {
   }
 
   createVerticalBackgroundRects() {
-    const columnBackgroundColor = this._scene._gantt.parsedOptions.grid.columnBackgroundColor;
+    const verticalBackgroundColor = this._scene._gantt.parsedOptions.grid.verticalBackgroundColor;
     const weekendBackgroundColor = this._scene._gantt.parsedOptions.grid.weekendBackgroundColor;
-    if (columnBackgroundColor || weekendBackgroundColor) {
+    if (verticalBackgroundColor || weekendBackgroundColor) {
       this.verticalBackgroundRectsGroup = new Group({
         x: 0,
         y: 0,
@@ -196,7 +196,7 @@ export class Grid {
       const { timelineDates, unit, step } = this._scene._gantt.parsedOptions.reverseSortedTimelineScales[0];
       const timelineColWidth = this._scene._gantt.parsedOptions.timelineColWidth;
 
-      if (columnBackgroundColor) {
+      if (verticalBackgroundColor) {
         for (let i = 0; i <= timelineDates?.length - 1; i++) {
           let backgroundColor;
           if (
@@ -206,15 +206,15 @@ export class Grid {
             (timelineDates[i].startDate.getDay() === 0 || timelineDates[i].startDate.getDay() === 6)
           ) {
             backgroundColor = weekendBackgroundColor;
-          } else if (typeof columnBackgroundColor === 'function') {
-            backgroundColor = columnBackgroundColor({
+          } else if (typeof verticalBackgroundColor === 'function') {
+            backgroundColor = verticalBackgroundColor({
               index: i,
               dateIndex: timelineDates[i].dateIndex,
               date: timelineDates[i].endDate,
               ganttInstance: this._scene._gantt
             });
           } else {
-            backgroundColor = columnBackgroundColor[i % columnBackgroundColor.length];
+            backgroundColor = verticalBackgroundColor[i % verticalBackgroundColor.length];
           }
           const x = Math.ceil(timelineColWidth * i);
           const rect = createRect({
@@ -231,8 +231,8 @@ export class Grid {
     }
   }
   createHorizontalBackgroundRects() {
-    const rowBackgroundColor = this._scene._gantt.parsedOptions.grid.rowBackgroundColor;
-    if (rowBackgroundColor) {
+    const horizontalBackgroundColor = this._scene._gantt.parsedOptions.grid.horizontalBackgroundColor;
+    if (horizontalBackgroundColor) {
       this.horizontalBackgroundRectsGroup = new Group({
         x: 0,
         y: 0,
@@ -245,13 +245,13 @@ export class Grid {
       let y = 0;
       for (let i = 0; i <= this.rowCount - 1; i++) {
         let backgroundColor;
-        if (typeof rowBackgroundColor === 'function') {
-          backgroundColor = rowBackgroundColor({
+        if (typeof horizontalBackgroundColor === 'function') {
+          backgroundColor = horizontalBackgroundColor({
             index: i,
             ganttInstance: this._scene._gantt
           });
         } else {
-          backgroundColor = rowBackgroundColor[i % rowBackgroundColor.length];
+          backgroundColor = horizontalBackgroundColor[i % horizontalBackgroundColor.length];
         }
 
         const rect = createRect({

diff --git a/packages/vtable-gantt/src/ts-types/gantt-engine.ts b/packages/vtable-gantt/src/ts-types/gantt-engine.ts
@@ -30,9 +30,9 @@ export interface ITimelineHeaderStyle {
 export interface IGrid {
   backgroundColor?: string;
   /** 需要按数据行设置不同背景色 */
-  rowBackgroundColor?: string[] | ((args: GridHorizontalLineStyleArgumentType) => string);
+  horizontalBackgroundColor?: string[] | ((args: GridHorizontalLineStyleArgumentType) => string);
   /** 需要按日期列设置不同背景色 */
-  columnBackgroundColor?: string[] | ((args: GridVerticalLineStyleArgumentType) => string);
+  verticalBackgroundColor?: string[] | ((args: GridVerticalLineStyleArgumentType) => string);
   /** 周末背景色 */
   weekendBackgroundColor?: string;