Gantt Chart Custom Rendering Capabilities

In this tutorial, we will introduce how to use the custom capabilities of @visactor/vtable-gantt to draw a Gantt chart.

Preparation

Import custom graphic elements. Since the installed @visactor/vtable already includes the graphic element types of the VRender library, we can import them directly.

import { Group, Image, Text, Tag } from '@visactor/vtable/es/vrender';
or;
import * as VRender from '@visactor/vtable/es/vrender';

Custom Rendering of Left Task Information Table Cells

Since the left side is a complete ListTable, you can directly refer to the custom rendering tutorial in ListTable.

Custom Rendering of Date Header

The specific configuration corresponds to the field [timelineHeader.scales.customLayout](<../../option/Gantt#timelineHeader.scales(Array).customLayout>)

customLayout is a custom function:

 (args: TaskBarCustomLayoutArgumentType) => ITaskBarCustomLayoutObj;

Parameter description

The function parameters are provided by the Gantt component and include the dimensions of the rendered task bar and date information. Specifically:

export type DateCustomLayoutArgumentType = {
  width: number;
  height: number;
  index: number;
  /** The current date belongs to the nth position of the date scale. For example, the fourth quarter in a quarterly date returns 4. */
  dateIndex: number;
  title: string;
  startDate: Date;
  endDate: Date;
  days: number;
  ganttInstance: Gantt;
};

returned value specification

The return value needs to include a VRender Group container object. This rootContainer should contain the specific content structure you want to display in the date header.

export type IDateCustomLayoutObj = {
  rootContainer: Group;
  renderDefaultText?: boolean; // 是否渲染正常非自定义的文本，默认false
};

Each VRender graphic element can be understood as a DOM tree structure, where each element has a parent container that can contain multiple child elements. Common graphic element types and their configurations can be found in the VRender configuration documentation:

demo

You can refer to the demo:

Custom Rendering of Task Bar

The specific configuration corresponds to the field taskBar.customLayout

customLayout is a custom function:

 (args: TaskBarCustomLayoutArgumentType) => ITaskBarCustomLayoutObj;

Parameter description

The function parameters are provided by the Gantt component and include the dimensions of the rendered task bar and task bar data information. Specifically:

export type TaskBarCustomLayoutArgumentType = {
  width: number;
  height: number;
  index: number;
  startDate: Date;
  endDate: Date;
  taskDays: number;
  progress: number;
  taskRecord: any;
  ganttInstance: Gantt;
};

Return Value Description

The return value needs to include a VRender Group container object. This rootContainer should contain the specific content structure you want to display in the task bar.

export type ITaskBarCustomLayoutObj = {
  rootContainer: Group;
  renderDefaultBar?: boolean; // default false
  renderDefaultResizeIcon?: boolean; // default false
  renderDefaultText?: boolean; // default false
};

Each VRender graphic element can be understood as a DOM tree structure, where each element has a parent container that can contain multiple child elements. Common graphic element types and their configurations can be found in the VRender configuration documentation:

Custom Graphic Element Event Listeners

VRender graphic elements support event listeners, as shown in the following code logic:

      const avatar = new VTableGantt.VRender.Image({
        width: 50,
        height: 50,
        image: taskRecord.avatar,
        cornerRadius: 25
      });
      // 鼠标悬浮到头像上时，显示tooltip 显示负责人名字
      avatar.addEventListener('mouseenter',event => {
        console.log('enter');
        const containerRect = document.getElementById(CONTAINER_ID).getBoundingClientRect();
        debugger;
        const targetX=event.target.globalAABBBounds.x1;
        const targetY=event.target.globalAABBBounds.y1;
        showTooltip([taskRecord.developer],ganttInstance.taskTableWidth+ targetX+containerRect.left, targetY+containerRect.top+50);
      });

demo

You can refer to the demo: