Merge pull request #2357 from VisActor/release/1.7.2

[Auto release] release 1.7.2

README.md

@@ -57,7 +57,13 @@ The core capabilities are as follows:
 This repository includes the following packages:
 
 1. packages/vtable: The core code repository of VTable
-2. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
+2. packages/vtable-gantt: Gantt chart component code
+3. packages/vtable-editors: Table editor component code
+4. packages/vtable-export: Table export tool code
+5. packages/vtable-search: Table search tool code
+6. packages/react-vtable: React version of the table component
+7. packages/vue-vtable: Vue version of the table component
+8. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
 
 # Usage
 

README.zh-CN.md

@@ -56,7 +56,13 @@ VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染
 本仓库包含如下 package
 
 1. packages/vtable：表格组件代码
-2. docs: 教程文档
+2. packages/vtable-gantt: 甘特图组件代码
+3. packages/vtable-editors: 表格编辑器组件代码
+4. packages/vtable-export: 表格导出工具代码
+5. packages/vtable-search: 表格搜索工具代码
+6. packages/react-vtable: React 版本的表格组件
+7. packages/vue-vtable: Vue 版本的表格组件
+8. docs: 教程文档
 
 # Usage 使用
 
@@ -169,7 +175,7 @@ $ rush docs
 - [官网](https://visactor.io/vtable)
 - [使用趋势](https://npm-compare.com/@visactor/vtable)
 
-# 💫 Ecosystem
+# 💫 生态系统
 
 | Project                                                                      | Description       |
 | ---------------------------------------------------------------------------- | ----------------- |

common/config/rush/version-policies.json

@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"1.7.1","mainProject":"@visactor/vtable","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vtableMain","version":"1.7.2","mainProject":"@visactor/vtable","nextBump":"patch"}]

docs/assets/changelog/en/important-release.md

@@ -1,3 +1,12 @@
+
+# v1.7.0
+
+2024-08-30
+
+**🆕 New feature**
+
+- **@visactor/vtable-gantt**: add gantt chart
+
 # v1.0.0
 
 2024-05-21

docs/assets/changelog/en/release.md

@@ -1,3 +1,23 @@
+# v1.7.1
+
+2024-09-02
+
+
+**🐛 Bug fix**
+
+- **@visactor/react-vtable**: fix envs type in react-vtable
+
+[more detail about v1.7.1](https://github.com/VisActor/VTable/releases/tag/v1.7.1)
+
+
+# v1.7.0
+
+2024-08-30
+
+**🆕 New feature**
+
+- **@visactor/vtable-gantt**: add gantt chart
+
 # v1.6.3
 
 2024-08-29

docs/assets/changelog/zh/important-release.md

@@ -1,4 +1,13 @@
 
+# v1.7.0
+
+2024-08-30
+
+**🆕 新增功能**
+
+- **@visactor/vtable-gantt**: 新增甘特图 gantt chart
+
+
 # v1.0.0
 
 2024-05-21

docs/assets/changelog/zh/release.md

@@ -1,3 +1,23 @@
+# v1.7.1
+
+2024-09-02
+
+
+**🐛 功能修复**
+
+- **@visactor/react-vtable**: 修复在 react-vtable 项目中的 evns 变量问题
+
+[更多详情请查看 v1.7.1](https://github.com/VisActor/VTable/releases/tag/v1.7.1)
+
+
+# v1.7.0
+
+2024-08-30
+
+**🆕 New feature**
+
+- **@visactor/vtable-gantt**: 新增甘特图 gantt chart
+
 # v1.6.3
 
 2024-08-29

docs/assets/guide/en/gantt/gantt_customLayout.md

@@ -2,7 +2,6 @@
 
 In this tutorial, we will introduce how to use the custom capabilities of @visactor/vtable-gantt to draw a Gantt chart.
 
-**Since the left side is a complete ListTable, you can directly refer to the [custom rendering tutorial](../custom_define/custom_layout) in ListTable.**
 
 ## Preparation
 
@@ -13,6 +12,8 @@ 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](../custom_define/custom_layout) in ListTable.**
 
 ## Custom Rendering of Date Header
 
@@ -22,7 +23,7 @@ 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 = {
@@ -38,8 +39,21 @@ export type DateCustomLayoutArgumentType = {
   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](https://visactor.io/vrender/option):
+ <div style="width: 40%; text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-guide-vrender-graphic-overview.png" />
+  <p>VRender Element Type</p>
+</div>
 
-The return value is a VRender Group container.
+### demo
 
 You can refer to the demo:
 
@@ -390,7 +404,7 @@ 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 = {
@@ -405,9 +419,44 @@ export type TaskBarCustomLayoutArgumentType = {
   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](https://visactor.io/vrender/option):
+ <div style="width: 40%; text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-guide-vrender-graphic-overview.png" />
+  <p>VRender Element Type</p>
+</div>
+
+### Custom Graphic Element Event Listeners
 
-The return value is a VRender Group container.
+VRender graphic elements support event listeners, as shown in the following code logic:
 
+```
+      const avatar = new 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:
 
 

docs/assets/guide/en/gantt/introduction.md

@@ -1,5 +1,8 @@
 # Gantt Chart Introduction and Usage Guide
 A Gantt chart is a project management tool used to display project plans, task progress, and schedules. It visually represents the start and end times of tasks using bar charts, helping project managers effectively track and manage project progress. Each task is displayed as a bar in the chart, with the length of the bar representing the duration of the task and the position representing the start and end times of the task.
+
+VTable-Gantt is a powerful Gantt chart drawing tool built on the VTable table component and the canvas renderer VRender, enabling developers to easily create and manage Gantt charts.
+
 ## Components of a Gantt Chart
 Task List on the Left: Displays the list of project tasks, usually on the left side of the chart.
 
@@ -16,59 +19,82 @@ Divider Lines: Separate the task list and timeline, making the chart clearer.
 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-structure.png)
 
 **Note: The task information table on the left corresponds to a complete ListTable in the implementation. It is attached to ganttInstable.listTableInstance, so the interfaces and events corresponding to ListTable can be directly used through listTableInstance. If you want to troubleshoot issues with the table on the left, you can also directly extract listTableInstance.options to check if they meet expectations.**
+ <div style="width: 40%; text-align: center;">
+     <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-guide-leftListTable-en.png" />
+    <p>left table</p>
+  </div>
 
-## Main Capabilities of the Gantt Chart
+## Main Capabilities of Gantt Chart
 
-### Multi-Column Information Display
-The left side of the entire structure of the Gantt chart is a complete table container, so it supports rich column information display. For specific configuration, refer to [Configuration](../../option/Gantt#taskListTable).
+### Multi-column Information Display
+The left side of the entire structure of the Gantt chart is a complete table container, so it supports rich column information display. For specific configuration, please refer to [Configuration](../../option/Gantt#taskListTable).
 
 ### Custom Rendering
 
+Custom rendering requires understanding the graphic element properties of VRender. For details, please refer to [Custom Rendering Tutorial](../../guide/gantt/gantt_customLayout).
+
 #### Custom Rendering of Task Bars
 You can customize the rendering of task bars through the `taskBar.customLayout` configuration item.
 
 #### Custom Rendering of Date Headers
+
 You can customize the rendering of date headers through the `timelineHeader.scales.customLayout` configuration item.
 
-#### Custom Rendering of the Task Information Table on the Left
+#### Custom Rendering of Task Information Table on the Left
+
 You can define the custom rendering of each cell in each column through `taskListTable.columns.customLayout` or globally define the custom rendering of each cell through `taskListTable.customLayout`.
 
-### Support for Different Date Scale Granularities
-You can set the row height and time unit (such as day, week, month, etc.) of the date scale through the `timelineHeader.scales.rowHeight` and `timelineHeader.scales.unit` configuration items.
+### Support for Different Date Scale Granularity
+
+In common business scenarios, multi-level time scale display may be required. VTable-Gantt supports five time granularities: `'day' | 'week' | 'month' | 'quarter' | 'year'`.
+
+You can set the row height and time unit (such as day, week, month, etc.) of the date scale through the `timelineHeader.scales.unit` configuration item.
 
 ### Date Header Style
+
 You can customize the style of the date header through the `timelineHeader.scales.style` configuration item.
 
 You can set the row height of the date scale through the `timelineHeader.scales.rowHeight` configuration item.
 
 ### Outer Frame
-You can customize the outer frame of the Gantt chart through the `frame.outerFrameStyle` configuration item.
+
+The border of the table may have a different style from the internal grid lines. You can customize the outer frame of the Gantt chart through the `frame.outerFrameStyle` configuration item.
 
 ### Horizontal and Vertical Divider Lines
-You can customize the style of horizontal divider lines through the `frame.horizontalSplitLine` configuration item. You can customize the style of vertical divider lines through the `frame.verticalSplitLine` configuration item.
+
+Supports horizontal divider lines for both the header and body, as well as divider lines between the left information table and the right task list. You can customize the style of horizontal divider lines through the `frame.horizontalSplitLine` configuration item. You can customize the style of vertical divider lines through the `frame.verticalSplitLine` configuration item.
 
 ### Marker Lines
-You can customize the style of marker lines through the `markLine.style` configuration item.
+
+In the Gantt chart, it is often necessary to mark some important dates. We configure this effect through the `markLine` configuration item. You can specify key dates through `markLine.date` and customize the style of marker lines through the `markLine.style` configuration item. If you need to ensure that the date is displayed at initialization, you can set `markLine.scrollToMarkLine` to `true`.
 
 ### Container Grid Lines
-You can customize the style of the background grid lines of the task bars on the right through the `grid` configuration item, including background color, line width, line type, etc.
+
+You can customize the style of the background grid lines of the right task bars through the `grid` configuration item, including background color, line width, line type, etc.
 
 ### Interaction
 
 #### Dragging Task Bars
+
 You can set whether task bars are draggable through the `taskBar.moveable` configuration item.
 
 #### Resizing Task Bars
+
 You can set whether task bars are resizable through the `taskBar.resizable` configuration item.
 
-#### Adjusting the Width of the Table on the Left
+#### Adjusting the Width of the Left Table
+
 You can set the divider line to be draggable by configuring `frame.verticalSplitLineMoveable` to true.
 
 #### Editing Task Information
-You can synchronize data updates to task bars through the editing capabilities of ListTable.
+
+You can synchronize data updates to the task bars through the editing capabilities of `ListTable`.
+
+To enable editing capabilities, you need to register the editor to VTable in advance, as the editing capabilities here actually rely on the editing capabilities of `ListTable`.
 
 #### Adjusting Data Order
-You can adjust the data order and synchronize it to task bars through the sorting row number capability of ListTable.
+
+To enable drag-and-drop reordering capabilities, you need to add `rowSeriesNumber` to the configuration of `ListTable`, which provides a row number. You can configure the style of this column using `rowSeriesNumber.style` and `headerStyle`. To enable reordering, set `rowSeriesNumber.dragOrder` to true. `VTable-Gantt` will synchronize the order to the task bar area display when a reordering event is detected.
 
 ## Leveraging the Capabilities of the Table
 The Gantt chart is implemented based on the ListTable of VTable. It looks like a spliced form, with the task information table on the left and the task bar list on the right.
@@ -113,7 +139,7 @@ In the vtable-gantt component, the main supported configurations include:
 6. Task List Table Configuration `taskListTable` (Configuration of the task information list ListTable on the left, refer to [Configuration](../../option/Gantt#taskListTable))
     1. Overall Width of the Table on the Left: You can set the overall width of the task list table through the `tableWidth` configuration item.
     2. Column Information: You can define the column information and width of each column of the task information table through `columns`.
-    3. Style Configuration: You can set the style of the header and body through the `headerStyle` and `bodyStyle` configuration items.
+    3. Style Configuration: You can set the style of the header and body through the `theme.headerStyle` and `theme.bodyStyle` configuration items.
     4. Width Limit: You can set the minimum and maximum width of the task list through the `minTableWidth` and `maxTableWidth` configuration items.
 7. Divider Line Configuration `frame`
     1. Outer Frame Configuration: You can set the color, width, etc., of the outer frame through the `outerFrameStyle` configuration item.

docs/assets/guide/en/introduction.md

@@ -14,23 +14,30 @@ VTable is packaged with the visual rendering engine VRender, which provides exce
 VTable provides three main table forms, including basic table, multi-dimensional perspective table and perspective combination diagram. It can meet the needs of different users, help users better display and analyze data, and find valuable information from it.
 
 <div style="display: flex;">
- <div style="width: 33%; text-align: center;">
+ <div style="width: 43%; text-align: center;">
      <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/5717b050ef81c8b03549af800.png" />
     <p>list table</p>
   </div>
-  <div style="width: 33%; text-align: center;">
+  <div style="width: 43%; text-align: center;">
      <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/5717b050ef81c8b03549af801.png" />
     <p>pivot table</p>
   </div>
-  <div style="width: 33%; text-align: center;">
+  </div>
+  <div style="display: flex;">
+  <div style="width: 43%; text-align: center;">
  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/5717b050ef81c8b03549af802.png" />
     <p>pivot chart</p>
   </div>
+  <div style="width: 43%; text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-basic-preview.png" />
+    <p>gantt chart</p>
+  </div>
 </div>
 
 *   The basic table is the simplest form of table, it consists of rows and columns, and each cell contains a data item. Basic tables are suitable for simple arrangement and presentation of data.
 *   Pivot table is a table form for multidimensional data analytics, which can aggregate and summarize data according to multiple Dimensions, providing users with multi-angle data analytics and exploration.
-*   A perspective combination chart is a chart form that combines a multi-dimensional perspective table with other chart forms (such as histograms, line charts, etc.), which can transform the data in the perspective table into a more intuitive and understandable graphical display.
+*   Pivot chart is a chart form that combines a multi-dimensional perspective table with other chart forms (such as histograms, line charts, etc.), which can transform the data in the perspective table into a more intuitive and understandable graphical display.
+*   Gantt chart is a chart used to display project progress and resource allocation. It can help users better understand the progress of the project and resource allocation.
 
 At the same time, the basic table can be transformed into a transposed table, and the hierarchical relationship can also be displayed with a tree structure: