diff --git a/README.md b/README.md index 4cbe309b0..a95d41048 100644 --- a/README.md +++ b/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 diff --git a/README.zh-CN.md b/README.zh-CN.md index 9fbe7e531..485780e05 100644 --- a/README.zh-CN.md +++ b/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 | | ---------------------------------------------------------------------------- | ----------------- | diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index 6c2cd886f..d1de30840 100644 --- a/common/config/rush/version-policies.json +++ b/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"}] diff --git a/docs/assets/changelog/en/important-release.md b/docs/assets/changelog/en/important-release.md index 3c7536db4..5c5ff798e 100644 --- a/docs/assets/changelog/en/important-release.md +++ b/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 diff --git a/docs/assets/changelog/en/release.md b/docs/assets/changelog/en/release.md index b66670f80..e0e8561de 100644 --- a/docs/assets/changelog/en/release.md +++ b/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 diff --git a/docs/assets/changelog/zh/important-release.md b/docs/assets/changelog/zh/important-release.md index 7e9654242..145757e96 100644 --- a/docs/assets/changelog/zh/important-release.md +++ b/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 diff --git a/docs/assets/changelog/zh/release.md b/docs/assets/changelog/zh/release.md index f281ae920..05178ac64 100644 --- a/docs/assets/changelog/zh/release.md +++ b/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 diff --git a/docs/assets/guide/en/gantt/gantt_customLayout.md b/docs/assets/guide/en/gantt/gantt_customLayout.md index 97b9bcfdc..b0277b1c4 100644 --- a/docs/assets/guide/en/gantt/gantt_customLayout.md +++ b/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): +
+ +

VRender Element Type

+
-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): +
+ +

VRender Element Type

+
+ +### 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: diff --git a/docs/assets/guide/en/gantt/introduction.md b/docs/assets/guide/en/gantt/introduction.md index dc29696b0..847f7d35b 100644 --- a/docs/assets/guide/en/gantt/introduction.md +++ b/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.** +
+ +

left table

+
-## 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. diff --git a/docs/assets/guide/en/introduction.md b/docs/assets/guide/en/introduction.md index 551373103..8eb76a7e0 100644 --- a/docs/assets/guide/en/introduction.md +++ b/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.
-
+

list table

-
+

pivot table

-
+
+
+

pivot chart

+
+ +

gantt chart

+
* 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: diff --git a/docs/assets/guide/en/table_type/List_table/tree_list.md b/docs/assets/guide/en/table_type/List_table/tree_list.md index 5ab2be20a..1fc7dac4a 100644 --- a/docs/assets/guide/en/table_type/List_table/tree_list.md +++ b/docs/assets/guide/en/table_type/List_table/tree_list.md @@ -181,3 +181,126 @@ In some scenarios, the child node data may be relatively large. In view of the e 3. Pass the obtained data back to the table component, you can call the interface `instance.setRecordChildren(childrenData, col, row)`; For specific examples, please see: https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load + +## Merge cells in the tree structure + +In some scenarios, you want to display the parent node as a merged cell in the entire row, you can configure `vtableMerge` and `vtableMergeName` in the data, where `vtableMerge` is true, indicating that the parent node is a merged cell, and `vtableMergeName` is the name displayed in the merged cell. At the same time, you need to add the `enableTreeNodeMerge` configuration to true in the option. + +```javascript livedemo template=vtable +const records = [ + { + group: 'Human Resources Department', + total_children: 30, + monthly_expense: '$45000', + new_hires_this_month: 6, + resignations_this_month: 3, + complaints_and_suggestions: 2, + vtableMerge: true, + vtableMergeName: 'Human Resources Department(merge)', + children: [ + { + group: 'Recruiting Group', + vtableMerge: true, + vtableMergeName: 'Recruiting Group(merge)', + children: [ + { + group: 'John Smith', + position: 'Recruiting Manager', + salary: '$8000' + }, + { + group: 'Emily Johnson', + position: 'Recruiting Supervisor', + salary: '$6000' + }, + { + group: 'Michael Davis', + position: 'Recruiting Specialist', + salary: '$4000' + } + ], + total_children: 15, + monthly_expense: '$25000', + new_hires_this_month: 4, + resignations_this_month: 2, + complaints_and_suggestions: 1 + }, + { + group: 'Training Group', + vtableMerge: true, + vtableMergeName: 'Training Group(merge)', + children: [ + { + group: 'Jessica Brown', + position: 'Training Manager', + salary: '$8000' + }, + { + group: 'Andrew Wilson', + position: 'Training Supervisor', + salary: '$6000' + } + ], + total_children: 15, + monthly_expense: '$20000', + new_hires_this_month: 2, + resignations_this_month: 1, + complaints_and_suggestions: 1 + } + ] + } +]; +const columns = [ + { + field: 'group', + title: 'department', + width: 'auto', + tree: true + }, + { + field: 'total_children', + title: 'memebers count', + width: 'auto', + fieldFormat(rec) { + if (rec?.['position']) { + return `position: ${rec['position']}`; + } else return rec?.['total_children']; + } + }, + { + field: 'monthly_expense', + title: 'monthly expense', + width: 'auto', + fieldFormat(rec) { + if (rec?.['salary']) { + return `salary: ${rec['salary']}`; + } else return rec?.['monthly_expense']; + } + }, + { + field: 'new_hires_this_month', + title: 'new hires this month', + width: 'auto' + }, + { + field: 'resignations_this_month', + title: 'resignations this month', + width: 'auto' + }, + { + field: 'complaints_and_suggestions', + title: 'recived complaints counts', + width: 'auto' + } +]; + +const option = { + records, + columns, + widthMode: 'standard', + enableTreeNodeMerge: true, + hierarchyExpandLevel: Infinity +}; +const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); +window['tableInstance'] = tableInstance; +``` \ No newline at end of file diff --git a/docs/assets/guide/zh/gantt/gantt_customLayout.md b/docs/assets/guide/zh/gantt/gantt_customLayout.md index e7e5680fc..50f1b785f 100644 --- a/docs/assets/guide/zh/gantt/gantt_customLayout.md +++ b/docs/assets/guide/zh/gantt/gantt_customLayout.md @@ -2,8 +2,6 @@ 在本教程中，我们将介绍如何使用 @visactor/vtable-gantt 的自定义能力绘制甘特图。 -**因为左侧是一个完整的ListTable，所以可直接参照在ListTable中[自定义渲染教程](../custom_define/custom_layout)。** - ## 准备工作 导入自定义图元内容，因为安装的@visactor/vtable已经包含了渲染引擎VRender库的图元类型，我们可以直接从中导入。 @@ -13,6 +11,9 @@ import { Group, Image, Text,Tag } from '@visactor/vtable/es/vrender'; or import * as VRender from '@visactor/vtable/es/vrender'; ``` +## 左侧任务信息表格单元格自定义渲染 + +**因为左侧是一个完整的ListTable，所以可直接参照在ListTable中[自定义渲染教程](../custom_define/custom_layout)。** ## 自定义渲染日期表头 @@ -20,9 +21,9 @@ import * as VRender from '@visactor/vtable/es/vrender'; customLayout是一个自定义函数： ``` - (args: TaskBarCustomLayoutArgumentType) => ITaskBarCustomLayoutObj; +(args: DateCustomLayoutArgumentType) => IDateCustomLayoutObj; ``` - +### 参数说明 函数参数由Gantt组件提供，包含了渲染的任务条的尺寸，以及日期信息。具体为： ``` export type DateCustomLayoutArgumentType = { @@ -38,9 +39,22 @@ export type DateCustomLayoutArgumentType = { ganttInstance: Gantt; }; ``` +### 返回值说明 +返回值需要包含一个VRender的Group容器对象，这个rootContainer中要包括你需要在日期表头显示的具体内容结构。 +``` +export type IDateCustomLayoutObj = { + rootContainer: Group; + renderDefaultText?: boolean; // 是否渲染正常非自定义的文本，默认false +}; +``` -返回值是一个VRender的Group容器。 +VRender的各个图元可以理解成一个dom树形结构，每个图元都有一个父容器，父容器可以包含多个子图元。常用的图元类型及其配置可以具体参考VRender[配置文档](https://visactor.io/vrender/option)： +
+ +

VRender Element Type

+
+### demo 具体可以参照demo： ```javascript livedemo template=vtable @@ -391,7 +405,7 @@ customLayout是一个自定义函数： ``` (args: TaskBarCustomLayoutArgumentType) => ITaskBarCustomLayoutObj; ``` - +### 参数说明 函数参数由Gantt组件提供，包含了渲染的任务条的尺寸，以及任务条的数据信息。具体为： ``` export type TaskBarCustomLayoutArgumentType = { @@ -406,10 +420,44 @@ export type TaskBarCustomLayoutArgumentType = { ganttInstance: Gantt; }; ``` +### 返回值说明 +返回值需要包含一个VRender的Group容器对象，这个rootContainer中要包括你需要在任务条中显示的具体内容结构。 +``` +export type ITaskBarCustomLayoutObj = { + rootContainer: Group; + renderDefaultBar?: boolean; // 默认false + renderDefaultResizeIcon?: boolean; // 默认false + renderDefaultText?: boolean; // 默认false +}; +``` +VRender的各个图元可以理解成一个dom树形结构，每个图元都有一个父容器，父容器可以包含多个子图元。常用的图元类型及其配置可以具体参考VRender[配置文档](https://visactor.io/vrender/option)： +
+ +

VRender Element Type

+
-返回值是一个VRender的Group容器。 +### 自定义图元事件监听 +VRender的图元支持配置事件监听，如下代码逻辑： +``` + 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 具体可以参照demo： ```javascript livedemo template=vtable diff --git a/docs/assets/guide/zh/gantt/introduction.md b/docs/assets/guide/zh/gantt/introduction.md index 9964fa731..56b36acba 100644 --- a/docs/assets/guide/zh/gantt/introduction.md +++ b/docs/assets/guide/zh/gantt/introduction.md @@ -1,5 +1,8 @@ # 甘特图 (Gantt Chart) 介绍与使用教程 甘特图是一种项目管理工具，用于展示项目计划、任务进度和时间安排。它通过条形图的形式直观地展示任务的开始和结束时间，帮助项目管理者有效地跟踪和管理项目进度。其中每个任务在图中显示为一个条形，条形的长度表示任务的持续时间，位置表示任务的开始和结束时间。 + +VTable-Gantt 是一款基于 VTable表格组件及canvas渲染器VRender 构建的强大甘特图绘制工具，能够帮助开发者轻松创建和管理甘特图 + ## 甘特图的组成部分 左侧任务列表：显示项目的任务列表，通常在图的左侧。 @@ -16,6 +19,10 @@ ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/gantt/gantt-structure.png) **注意：左侧的任务信息表在实现中对应的是一个完整的ListTable。挂在ganttInstable.listTableInstance中，所以对应ListTable的接口及事件都是可以通过listTableInstance来直接使用的，同时如果想要排查左侧表格的问题也可以直接将listTableInstance.options取出查看是否符合预期** +
+ +

left table

+
## 甘特图的主要能力 @@ -24,6 +31,8 @@ ### 自定义渲染 +自定义渲染需要了解VRender的图元属性，具体可以参考[自定义渲染教程](../../guide/gantt/gantt_customLayout) + #### 任务条的自定义渲染 通过 `taskBar.customLayout` 配置项，可以自定义任务条的渲染方式。 @@ -38,7 +47,9 @@ ### 支持不同的日期刻度粒度 -通过 `timelineHeader.scales.rowHeight` 和 `timelineHeader.scales.unit` 配置项，可以设置日期刻度的行高和时间单位（如天、周、月等）。 +通常的业务场景中，可能需要涉及多层时间刻度的展示，VTable-Gantt支持五种时间粒度：`'day' | 'week' | 'month' | 'quarter' | 'year'`。 + +通过 `timelineHeader.scales.unit` 配置项，可以设置日期刻度的行高和时间单位（如天、周、月等）。 ### 日期表头样式 @@ -48,19 +59,19 @@ ### 外边框 -通过 `frame.outerFrameStyle` 配置项，可以自定义甘特图的外边框。 +表格的边框可能与内部的网格线在样式上有一定的不同，可以通过 `frame.outerFrameStyle` 配置项，可以自定义甘特图的外边框。 ### 横纵分割线 -通过 `frame.horizontalSplitLine` 配置项，可以自定义水平分割线的样式。`frame.verticalSplitLine` 配置项，可以自定义垂直分割线的样式。 +同时支持表头和body的横向分割线，及左侧信息表和右侧任务列表的分割线。通过 `frame.horizontalSplitLine` 配置项，可以自定义水平分割线的样式。`frame.verticalSplitLine` 配置项，可以自定义垂直分割线的样式。 ### 标记线 -通过 `markLine.style` 配置项，可以自定义标记线的样式。 +在gantt甘特图中通常需要标记一些重要的日期，我们通过配置项markLine来配置该效果。通过`markLine.date`来指定重点日期，通过 `markLine.style` 配置项，可以自定义标记线的样式。如果需要将该日期在初始化时一定要展示出来可以设置`markLine.scrollToMarkLine`为`true`。 ### 容器网格线 -通过 `grid` 配置项，可以自定义右侧任务条背景网格线的样式。包括背景色、线宽、线型等。 +通过 `grid` 配置项，可以自定义右侧任务条背景网格线的样式。包括背景色、横纵方向的线宽、线型等。 ### 交互 @@ -78,11 +89,13 @@ #### 编辑任务信息 -通过ListTable的编辑能力，可以同步更新数据到任务条。 +通过`ListTable`的编辑能力，可以同步更新数据到任务条。 + +开启编辑能力需要先提前注册好编辑器到VTable中，因为这里的编辑能力实际是借助的`ListTable`的编辑能力。 #### 调整数据顺序 -通过ListTable的排序行序号能力，可以调整数据顺序，并同步到任务条。 +开启拖拽换位能力同`ListTable`的配置需要在配置中添加`rowSeriesNumber`，即有了行序号，用`rowSeriesNumber.style`和`headerStyle`中可以配置该列的样式，开启换位的话将`rowSeriesNumber.dragOrder`设置为true。`VTable-Gantt`在监听有移位事件时将顺序同步到任务条区域显示。 ## 借助表格的能力 甘特图是基于VTable的ListTable实现的，看上去相当于一个拼接形式，左侧是任务信息表格，右侧是任务条列表。 @@ -102,7 +115,7 @@ VTableGantt内部借助这个表格实例tableInstance实现的能力有： 3. 借助ListTable的排序能力，实现了甘特图数据排序能力。ListTable的[参考教程](../../guide/basic_function/sort/list_sort)。 4. 借助ListTable的树形结构能力，实现了甘特图父子关系的数据。ListTable的[参考教程](../../guide/table_type/List_table/tree_list)。 -## vtable-gantt主要配置 +## vtable-gantt主要配置 在 vtable-gantt 组件中，支持的主要配置包括： 1. 数据配置records @@ -124,10 +137,10 @@ VTableGantt内部借助这个表格实例tableInstance实现的能力有： 5. 网格线配置grid 1. 样式配置: 通过 verticalLine 和 horizontalLine 配置项，可以设置网格线的颜色、宽度、虚线样式等。 2. 背景颜色: 通过 backgroundColor 配置项，可以设置网格线的背景颜色。 -6. 任务列表表格配置 taskListTable（左侧任务信息列表ListTable的配置，需要可以参考[配置](../../option/Gantt#taskListTable) +6. 任务列表表格配置 taskListTable (左侧任务信息列表 对应ListTable的配置，需要可以参考[配置](../../option/Gantt#taskListTable)) 1. 左侧表格整体宽度：通过 tableWidth 配置项，可以设置任务列表表格的整体宽度。 2. 列信息: 通过 columns，可以定义任务信息表格的列信息和各列宽度。 - 3. 样式配置: 通过 headerStyle 和 bodyStyle 配置项，可以设置表头和表体的样式。 + 3. 样式配置: 通过 theme.headerStyle 和 theme.bodyStyle 配置项，可以设置表头和表体的样式。 4. 宽度限制: 通过 minTableWidth 和 maxTableWidth 配置项，可以设置任务列表的最小和最大宽度。 7. 分割线配置 frame 1. 外边框配置: 通过 outerFrameStyle 配置项，可以设置外边框的颜色、宽度等。 @@ -141,7 +154,6 @@ VTableGantt内部借助这个表格实例tableInstance实现的能力有： 这些能力使得 vtable-gantt 组件在任务管理和项目规划中具有高度的可定制性和灵活性，能够满足不同场景下的需求。 - ## 总结 甘特图是项目管理中非常重要的工具，通过直观的图形展示项目的进度和时间安排，帮助项目管理者更好地规划和控制项目。通过合理配置甘特图的各项参数，可以满足不同项目的需求，提高项目管理的效率。 diff --git a/docs/assets/guide/zh/introduction.md b/docs/assets/guide/zh/introduction.md index 04eea3ea9..74a878172 100644 --- a/docs/assets/guide/zh/introduction.md +++ b/docs/assets/guide/zh/introduction.md @@ -8,25 +8,32 @@ VTable采用可视化渲染引擎VRender进行封装，提供了卓越的性能 ![VTable滚动交互性能展示](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/f7c7048f8d595c464505b5f00.gif) # 多种表形态 -VTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图。可以满足不同用户的需求，帮助用户更好地展示和分析数据，并从中发现有价值的信息。 +VTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图，以及gantt甘特图。可以满足不同用户的需求，帮助用户更好地展示和分析数据，并从中发现有价值的信息。
-
+

list table

-
+

pivot table

-
+
+
+

pivot chart

+
+ +

gantt chart

+
- 基本表格是最简单的表格形态，它由行和列组成，每个单元格包含一个数据项。基本表格适用于对数据进行简单的排列和展示。 - 透视表格是一种用于多维数据分析的表格形态，它可以将数据按照多个维度进行聚合和汇总，为用户提供多角度的数据分析和探索。 - 透视组合图是一种将多维透视表格与其他图表形式（如柱状图、折线图等）结合起来的图表形态，它可以将透视表格中的数据转化为更直观、易懂的图形展示。 +- 甘特图是一种用于展示项目进度和资源分配的图表形态，它可以帮助用户更好地了解项目的进展情况和资源分配情况。 同时基本表格可以形变为转置表格，还可以用树形结构展示层次关系： diff --git a/docs/assets/guide/zh/table_type/List_table/tree_list.md b/docs/assets/guide/zh/table_type/List_table/tree_list.md index 35589bd01..ffad6e9f5 100644 --- a/docs/assets/guide/zh/table_type/List_table/tree_list.md +++ b/docs/assets/guide/zh/table_type/List_table/tree_list.md @@ -182,3 +182,126 @@ const records = [ 3. 将获取到的数据回传到表格组件中，可调用接口`instance.setRecordChildren(childrenData, col, row)`; 具体示例可以看：https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load + +## 合并父节点 + +在一些场景中，希望父节点整行作为一个合并单元格显示，可以在数据中，配置`vtableMerge`和`vtableMergeName`，其中`vtableMerge`为 true 时，表示该父节点为合并单元格，`vtableMergeName`为合并单元格中显示的名称；同时，需要在option中加入`enableTreeNodeMerge`配置为 true。 + +```javascript livedemo template=vtable +const records = [ + { + group: 'Human Resources Department', + total_children: 30, + monthly_expense: '$45000', + new_hires_this_month: 6, + resignations_this_month: 3, + complaints_and_suggestions: 2, + vtableMerge: true, + vtableMergeName: 'Human Resources Department(merge)', + children: [ + { + group: 'Recruiting Group', + vtableMerge: true, + vtableMergeName: 'Recruiting Group(merge)', + children: [ + { + group: 'John Smith', + position: 'Recruiting Manager', + salary: '$8000' + }, + { + group: 'Emily Johnson', + position: 'Recruiting Supervisor', + salary: '$6000' + }, + { + group: 'Michael Davis', + position: 'Recruiting Specialist', + salary: '$4000' + } + ], + total_children: 15, + monthly_expense: '$25000', + new_hires_this_month: 4, + resignations_this_month: 2, + complaints_and_suggestions: 1 + }, + { + group: 'Training Group', + vtableMerge: true, + vtableMergeName: 'Training Group(merge)', + children: [ + { + group: 'Jessica Brown', + position: 'Training Manager', + salary: '$8000' + }, + { + group: 'Andrew Wilson', + position: 'Training Supervisor', + salary: '$6000' + } + ], + total_children: 15, + monthly_expense: '$20000', + new_hires_this_month: 2, + resignations_this_month: 1, + complaints_and_suggestions: 1 + } + ] + } +]; +const columns = [ + { + field: 'group', + title: 'department', + width: 'auto', + tree: true + }, + { + field: 'total_children', + title: 'memebers count', + width: 'auto', + fieldFormat(rec) { + if (rec?.['position']) { + return `position: ${rec['position']}`; + } else return rec?.['total_children']; + } + }, + { + field: 'monthly_expense', + title: 'monthly expense', + width: 'auto', + fieldFormat(rec) { + if (rec?.['salary']) { + return `salary: ${rec['salary']}`; + } else return rec?.['monthly_expense']; + } + }, + { + field: 'new_hires_this_month', + title: 'new hires this month', + width: 'auto' + }, + { + field: 'resignations_this_month', + title: 'resignations this month', + width: 'auto' + }, + { + field: 'complaints_and_suggestions', + title: 'recived complaints counts', + width: 'auto' + } +]; + +const option = { + records, + columns, + widthMode: 'standard', + enableTreeNodeMerge: true, + hierarchyExpandLevel: Infinity +}; +const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); +window['tableInstance'] = tableInstance; +``` \ No newline at end of file diff --git a/packages/openinula-vtable/package.json b/packages/openinula-vtable/package.json index 9fed20925..8c89d61d0 100644 --- a/packages/openinula-vtable/package.json +++ b/packages/openinula-vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/openinula-vtable", - "version": "1.7.1", + "version": "1.7.2", "description": "The openinula version of VTable", "keywords": [ "openinula", diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json index 127e445d9..0e26590b5 100644 --- a/packages/react-vtable/package.json +++ b/packages/react-vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/react-vtable", - "version": "1.7.1", + "version": "1.7.2", "description": "The react version of VTable", "keywords": [ "react", diff --git a/packages/vtable-editors/package.json b/packages/vtable-editors/package.json index 049523c01..70c47703f 100644 --- a/packages/vtable-editors/package.json +++ b/packages/vtable-editors/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-editors", - "version": "1.7.1", + "version": "1.7.2", "description": "", "sideEffects": false, "main": "cjs/index.js", diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json index 5d29466d4..82531ba35 100644 --- a/packages/vtable-export/package.json +++ b/packages/vtable-export/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-export", - "version": "1.7.1", + "version": "1.7.2", "description": "The export util of VTable", "author": { "name": "VisActor", diff --git a/packages/vtable-gantt/README.md b/packages/vtable-gantt/README.md index 29e87b01a..a4d08e7b7 100644 --- a/packages/vtable-gantt/README.md +++ b/packages/vtable-gantt/README.md @@ -5,22 +5,22 @@
-

VTable

+

VTable-Gantt

-VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns. +VTable-Gantt create an efficient and flexible Gantt chart solution to make project management easier. Through simple configuration and custom layout, you can quickly get started and meet various complex needs. Improve team collaboration efficiency and achieve transparency of project progress.

- Introduction • - demo • - Tutorial • - API• + Introduction • + Demo • + Tutorial • + API•

-[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable) -[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable) +[![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt) +[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
@@ -39,20 +39,25 @@ English| [简体中文](./README.zh-CN.md) # Introduction -VTable is a canvas table library based on visual rendering engine [VRender](https://github.com/VisActor/VRender). +VTable-Gantt is a Gantt chart component library in the VisActor visualization system, based on the table component VTable and the visualization rendering engine VRender. It is designed specifically for project management and task tracking, providing powerful visualization and interaction features. The core capabilities are as follows: -The core capabilities are as follows: - -1. Extreme performance: Supports fast computation and rendering of millions of data points. -2. Multidimensional analysis: Automatically analyzes and presents multidimensional data. -3. Strong expressiveness: Provides flexible and powerful graphic capabilities, seamlessly integrating with charts of [VChart](https://github.com/VisActor/VChart). +1. High performance: Supports fast computation and rendering of large-scale project data, ensuring a smooth user experience. +2. Flexible layout: Supports custom timeline, task bar styles, and layouts to meet different project management needs. +3. Powerful interaction: Provides drag-and-drop, zoom, and edit functions for tasks, simplifying project management operations. +4. Rich visualization capabilities: supports custom rendering of information cells and task bars, provides tree structure display, and improves the diversity and intuitiveness of data display. # Repo Intro This repository includes the following packages: -1. vtable: VTable components -2. vtable-docs: VTable documentation +1. packages/vtable: The core code repository of VTable +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 @@ -62,66 +67,122 @@ This repository includes the following packages: ```bash // npm -npm install @visactor/vtable +npm install @visactor/vtable-gantt // yarn -yarn add @visactor/vtable +yarn add @visactor/vtable-gantt ``` ## Quick Start ```javascript -import * as VTable from '@visactor/vtable'; - -const columns =[ - { - "field": "Order ID", - "caption": "Order ID", - }, - { - "field": "Customer ID", - "caption": "Customer ID", - }, - { - "field": "Product Name", - "caption": "Product Name", - }, - { - "field": "Sales", - "caption": "Sales", - }, - { - "field": "Profit", - "caption": "Profit", - } +import {Gantt} from '@visactor/vtable-gantt'; +const records = [ + { + id: 1, + title: 'Task 1', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-24', + end: '2024-07-26', + progress: 31, + priority: 'P0', + }, + { + id: 2, + title: 'Task 2', + developer: 'liufangfang.jane@bytedance.com', + start: '07/24/2024', + end: '08/04/2024', + progress: 60, + priority: 'P0' + }, + { + id: 3, + title: 'Task 3', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-08-04', + end: '2024-08-04', + progress: 100, + priority: 'P1' + }, + { + id: 4, + title: 'Task 4', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-26', + end: '2024-07-28', + progress: 31, + priority: 'P0' + } ]; -const option = { - records:[ - { - "Order ID": "CA-2018-156720", - "Customer ID": "JM-15580", - "Product Name": "Bagged Rubber Bands", - "Sales": "3.024", - "Profit": "-0.605" +const columns = [ + { + field: 'title', + title: 'title', + width: 'auto', + sort: true, + tree: true, + editor: 'input' + }, + { + field: 'start', + title: 'start', + width: 'auto', + sort: true, + editor: 'date-input' }, { - "Order ID": "CA-2018-115427", - "Customer ID": "EB-13975", - "Product Name": "GBC Binding covers", - "Sales": "20.72", - "Profit": "6.475" + field: 'end', + title: 'end', + width: 'auto', + sort: true, + editor: 'date-input' + } +]; +const option = { + overscrollBehavior: 'none', + records, + taskListTable: { + columns, + }, + taskBar: { + startDateField: 'start', + endDateField: 'end', + progressField: 'progress' + }, + timelineHeader: { + colWidth: 100, + backgroundColor: '#EEF1F5', + horizontalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + verticalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + scales: [ + { + unit: 'day', + step: 1, + format(date) { + return date.dateIndex.toString(); + }, + style: { + fontSize: 20, + fontWeight: 'bold', + color: 'white', + strokeColor: 'black', + textAlign: 'right', + textBaseline: 'bottom', + backgroundColor: '#EEF1F5' + } + } + ] }, - ... - ], - columns, - widthMode:'standard' }; -const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); - - - - +const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option); ``` ## diff --git a/packages/vtable-gantt/README.zh-CN.md b/packages/vtable-gantt/README.zh-CN.md new file mode 100644 index 000000000..73aac7bd6 --- /dev/null +++ b/packages/vtable-gantt/README.zh-CN.md @@ -0,0 +1,214 @@ + + +
+

VTable-Gantt

+
+ +
+ +VTable-Gantt 打造高效、灵活的甘特图解决方案，让项目管理更轻松。通过简单的配置和自定义布局，快速上手并满足各种复杂需求。提升团队协作效率，实现项目进度透明化。. + +

+ Introduction • + Demo • + Tutorial • + API• +

+ +[![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt) +[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE) + +
+ +
+ +简体中文| [English](./README.md) + +
+ +
+ +（video） + +
+ +# 介绍 + +VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库，基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计，提供了强大的可视化和交互功能。核心能力如下： + +1. 高效性能：支持大规模项目数据的快速运算与渲染，确保流畅的用户体验。 +2. 灵活布局：支持自定义时间轴、任务条样式和布局，满足不同项目管理需求。 +3. 强大交互：提供任务的拖拽、缩放和编辑功能，简化项目管理操作。 +4. 丰富的可视化能力：支持信息单元格及任务条的自定义渲染，提供树形结构展示，提升数据展示的多样性和直观性。 + +# 代码仓库介绍 + +主要包含以下几个子项目: + +1. packages/vtable：表格组件代码 +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: 教程文档 + +# 用法 + +## 安装 + +[npm package](https://www.npmjs.com/package/@visactor/vtable) + +```bash +// npm +npm install @visactor/vtable-gantt + +// yarn +yarn add @visactor/vtable-gantt +``` + +## 快速上手 + +```javascript +import {Gantt} from '@visactor/vtable-gantt'; + +const records = [ + { + id: 1, + title: 'Task 1', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-24', + end: '2024-07-26', + progress: 31, + priority: 'P0', + }, + { + id: 2, + title: 'Task 2', + developer: 'liufangfang.jane@bytedance.com', + start: '07/24/2024', + end: '08/04/2024', + progress: 60, + priority: 'P0' + }, + { + id: 3, + title: 'Task 3', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-08-04', + end: '2024-08-04', + progress: 100, + priority: 'P1' + }, + { + id: 4, + title: 'Task 4', + developer: 'liufangfang.jane@bytedance.com', + start: '2024-07-26', + end: '2024-07-28', + progress: 31, + priority: 'P0' + } +]; + +const columns = [ + { + field: 'title', + title: 'title', + width: 'auto', + sort: true, + tree: true, + editor: 'input' + }, + { + field: 'start', + title: 'start', + width: 'auto', + sort: true, + editor: 'date-input' + }, + { + field: 'end', + title: 'end', + width: 'auto', + sort: true, + editor: 'date-input' + } +]; +const option = { + overscrollBehavior: 'none', + records, + taskListTable: { + columns, + }, + taskBar: { + startDateField: 'start', + endDateField: 'end', + progressField: 'progress' + }, + timelineHeader: { + colWidth: 100, + backgroundColor: '#EEF1F5', + horizontalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + verticalLine: { + lineWidth: 1, + lineColor: '#e1e4e8' + }, + scales: [ + { + unit: 'day', + step: 1, + format(date) { + return date.dateIndex.toString(); + }, + style: { + fontSize: 20, + fontWeight: 'bold', + color: 'white', + strokeColor: 'black', + textAlign: 'right', + textBaseline: 'bottom', + backgroundColor: '#EEF1F5' + } + } + ] + }, +}; +const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option); + +``` + +## + +[更多 demo 和详细教程](https://visactor.io/vtable) + +# 相关链接 + +- [官网](https://visactor.io/vtable) + +# 生态系统 + +| Project | Description | +| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| [AI-generated Components](https://visactor.io/ai-vtable) | AI-generated table component. | + +# 参与贡献 + +如想参与贡献，请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。 + +细流成河，终成大海！ + + + +# 许可证 + +[MIT 协议](./LICENSE) diff --git a/packages/vtable-gantt/package.json b/packages/vtable-gantt/package.json index 209a237ee..76e9b6ac4 100644 --- a/packages/vtable-gantt/package.json +++ b/packages/vtable-gantt/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-gantt", - "version": "1.7.1", + "version": "1.7.2", "description": "canvas table width high performance", "keywords": [ "vtable-gantt", diff --git a/packages/vtable-search/package.json b/packages/vtable-search/package.json index ff9f7805f..4247d5a56 100644 --- a/packages/vtable-search/package.json +++ b/packages/vtable-search/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable-search", - "version": "1.7.1", + "version": "1.7.2", "description": "The search util of VTable", "author": { "name": "VisActor", diff --git a/packages/vtable/CHANGELOG.json b/packages/vtable/CHANGELOG.json index 5357b358d..396d6f223 100644 --- a/packages/vtable/CHANGELOG.json +++ b/packages/vtable/CHANGELOG.json @@ -1,6 +1,18 @@ { "name": "@visactor/vtable", "entries": [ + { + "version": "1.7.2", + "tag": "@visactor/vtable_v1.7.2", + "date": "Mon, 02 Sep 2024 10:09:57 GMT", + "comments": { + "none": [ + { + "comment": "fix: when use groupBy then all merged cells set cellType text #2331\n\n" + } + ] + } + }, { "version": "1.7.1", "tag": "@visactor/vtable_v1.7.1", diff --git a/packages/vtable/CHANGELOG.md b/packages/vtable/CHANGELOG.md index 1b00e9004..4fd7c2295 100644 --- a/packages/vtable/CHANGELOG.md +++ b/packages/vtable/CHANGELOG.md @@ -1,6 +1,15 @@ # Change Log - @visactor/vtable -This log was last generated on Mon, 02 Sep 2024 03:26:48 GMT and should not be manually modified. +This log was last generated on Mon, 02 Sep 2024 10:09:57 GMT and should not be manually modified. + +## 1.7.2 +Mon, 02 Sep 2024 10:09:57 GMT + +### Updates + +- fix: when use groupBy then all merged cells set cellType text #2331 + + ## 1.7.1 Mon, 02 Sep 2024 03:26:48 GMT diff --git a/packages/vtable/examples/list/list-tree-group.ts b/packages/vtable/examples/list/list-tree-group.ts index 21abed69a..f0f2cb43b 100644 --- a/packages/vtable/examples/list/list-tree-group.ts +++ b/packages/vtable/examples/list/list-tree-group.ts @@ -10,7 +10,7 @@ export function createTable() { 销售额: '129.696', 数量: '2', 利润: '60.704', - vTableMerge: true, + vtableMerge: true, vtableMergeName: '办公用品办公用品办公用品类', children: [ { @@ -60,7 +60,7 @@ export function createTable() { 销售额: '229.696', 数量: '20', 利润: '90.704', - vTableMerge: true, + vtableMerge: true, vtableMergeName: '技术技术技术技术类', children: [ { @@ -94,7 +94,7 @@ export function createTable() { 销售额: '129.696', 数量: '2', 利润: '-60.704', - vTableMerge: true, + vtableMerge: true, vtableMergeName: '家具类', children: [ { diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 6790a443c..7baf7c403 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vtable", - "version": "1.7.1", + "version": "1.7.2", "description": "canvas table width high performance", "keywords": [ "grid", diff --git a/packages/vtable/src/core/style-helper.ts b/packages/vtable/src/core/style-helper.ts index c1f4dbf5f..5fab420ea 100644 --- a/packages/vtable/src/core/style-helper.ts +++ b/packages/vtable/src/core/style-helper.ts @@ -180,7 +180,7 @@ export function getCellStyle(col: number, row: number, table: BaseTableAPI): Ful const rawRecord = table.getCellOriginRecord(col, row); //如果是主体部分，获取相应的style - if (rawRecord?.vTableMerge) { + if (rawRecord?.vtableMerge) { cacheKey = 'merge-title'; } else if (table.isSeriesNumberInBody(col, row)) { // 如果是行序号 @@ -195,7 +195,7 @@ export function getCellStyle(col: number, row: number, table: BaseTableAPI): Ful } let cacheStyle; - if (rawRecord?.vTableMerge) { + if (rawRecord?.vtableMerge) { cacheStyle = table.bodyMergeTitleCache.get(cacheKey); } else if (layoutMap.isBottomFrozenRow(row)) { cacheStyle = table.bodyBottomStyleCache.get(cacheKey); @@ -214,7 +214,7 @@ export function getCellStyle(col: number, row: number, table: BaseTableAPI): Ful const style = column?.style; cacheStyle = columnStyleContents.of( style, - rawRecord?.vTableMerge && table.theme.groupTitleStyle + rawRecord?.vtableMerge && table.theme.groupTitleStyle ? table.theme.groupTitleStyle : layoutMap.isBottomFrozenRow(row) && table.theme.bottomFrozenStyle ? table.theme.bottomFrozenStyle diff --git a/packages/vtable/src/data/CachedDataSource.ts b/packages/vtable/src/data/CachedDataSource.ts index 2b8dfe0ab..26d441490 100644 --- a/packages/vtable/src/data/CachedDataSource.ts +++ b/packages/vtable/src/data/CachedDataSource.ts @@ -261,7 +261,7 @@ function dealWithGroup(record: any, children: any[], map: Map, grou } else { map.set(value, children.length); children.push({ - vTableMerge: true, + vtableMerge: true, vtableMergeName: value, children: [] as any, map: new Map() @@ -287,7 +287,7 @@ function syncGroupCollapseState( oldGroupMap = new Map(); for (let i = 0; i < oldSource.length; i++) { const record = oldSource[i]; - if (record.vTableMerge) { + if (record.vtableMerge) { oldGroupMap.set(record.vtableMergeName, i); } } @@ -297,7 +297,7 @@ function syncGroupCollapseState( newGroupMap = new Map(); for (let i = 0; i < newSource.length; i++) { const record = newSource[i]; - if (record.vTableMerge) { + if (record.vtableMerge) { newGroupMap.set(record.vtableMergeName, i); } } diff --git a/packages/vtable/src/layout/cell-range/simple-cell-range.ts b/packages/vtable/src/layout/cell-range/simple-cell-range.ts index 8800a5a81..7da3d7a27 100644 --- a/packages/vtable/src/layout/cell-range/simple-cell-range.ts +++ b/packages/vtable/src/layout/cell-range/simple-cell-range.ts @@ -102,8 +102,8 @@ function getTreeTitleMerge(col: number, row: number, cellRange: CellRange, layou } const cellRecord = layout._table.getCellRawRecord(col, row); - if (cellRecord?.vTableMerge) { - // const vTableMergeName = cellRecord.vtableMergeName; + if (cellRecord?.vtableMerge) { + // const vtableMergeName = cellRecord.vtableMergeName; cellRange.start.col = layout.rowHeaderLevelCount; cellRange.end.col = layout.colCount - 1; cellRange.start.row = cellRange.end.row = row; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index 5f6d18426..adb85c1df 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -452,10 +452,11 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew range = table.getCellRange(col, row); isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row; } - + let isvtableMerge = false; if (table.internalProps.enableTreeNodeMerge && isMerge) { - const { vtableMergeName, vTableMerge } = table.getCellRawRecord(range.start.col, range.start.row); - if (vTableMerge) { + const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row); + isvtableMerge = vtableMerge; + if (vtableMerge) { mayHaveIcon = true; if ((table.options as ListTableConstructorOptions).groupTitleCustomLayout) { customResult = dealWithCustom( @@ -585,7 +586,9 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew return undefined; } - const type = table.isHeader(col, row) + const type = isvtableMerge + ? 'text' + : table.isHeader(col, row) ? (table._getHeaderLayoutMap(col, row) as HeaderData).headerType : table.getBodyColumnType(col, row); diff --git a/packages/vtable/src/scenegraph/group-creater/column-helper.ts b/packages/vtable/src/scenegraph/group-creater/column-helper.ts index b36a547f2..46f224a31 100644 --- a/packages/vtable/src/scenegraph/group-creater/column-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/column-helper.ts @@ -148,10 +148,11 @@ export function createComplexColumn( cellHeight = mergeSize.cellHeight; } } - + let isvtableMerge = false; if (table.internalProps.enableTreeNodeMerge && isMerge) { - const { vtableMergeName, vTableMerge } = table.getCellRawRecord(range.start.col, range.start.row); - if (vTableMerge) { + const { vtableMergeName, vtableMerge } = table.getCellRawRecord(range.start.col, range.start.row); + isvtableMerge = vtableMerge; + if (vtableMerge) { mayHaveIcon = true; if ((table.options as ListTableConstructorOptions).groupTitleCustomLayout) { customResult = dealWithCustom( @@ -201,10 +202,11 @@ export function createComplexColumn( } // margin = getProp('margin', headerStyle, col, 0, table) - const type = - (table.isHeader(col, row) - ? (table._getHeaderLayoutMap(col, row) as HeaderData).headerType - : table.getBodyColumnType(col, row)) || 'text'; + const type = isvtableMerge + ? 'text' + : (table.isHeader(col, row) + ? (table._getHeaderLayoutMap(col, row) as HeaderData).headerType + : table.getBodyColumnType(col, row)) || 'text'; // deal with promise data if (isPromise(value)) { diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts index 966259a55..0bc24050e 100644 --- a/packages/vtable/src/scenegraph/layout/update-height.ts +++ b/packages/vtable/src/scenegraph/layout/update-height.ts @@ -127,9 +127,11 @@ export function updateCellHeight( cell.needUpdateHeight = false; cell.setAttribute('height', distHeight); - + const isvtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge; // 更新单元格布局 - const type = scene.table.isHeader(col, row) + const type = isvtableMerge + ? 'text' + : scene.table.isHeader(col, row) ? (scene.table._getHeaderLayoutMap(col, row) as HeaderData).headerType : scene.table.getBodyColumnType(col, row); if (type === 'progressbar') { @@ -234,9 +236,9 @@ export function updateCellHeight( let customRender; let customLayout; const cellLocation = scene.table.getCellLocation(col, row); - const { vTableMerge } = scene.table.getCellRawRecord(col, row); + const { vtableMerge } = scene.table.getCellRawRecord(col, row); - if (vTableMerge && (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout) { + if (vtableMerge && (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout) { customLayout = (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout; } else if (cellLocation !== 'body') { const define = scene.table.getHeaderDefine(col, row); diff --git a/packages/vtable/src/scenegraph/layout/update-width.ts b/packages/vtable/src/scenegraph/layout/update-width.ts index 4467b6a46..7bfb1e86c 100644 --- a/packages/vtable/src/scenegraph/layout/update-width.ts +++ b/packages/vtable/src/scenegraph/layout/update-width.ts @@ -266,8 +266,11 @@ function updateCellWidth( return false; } const autoRowHeight = scene.table.isAutoRowHeight(row); + const isvtableMerge = scene.table.getCellRawRecord(col, row)?.vtableMerge; // 更新单元格布局 - const type = scene.table.isHeader(col, row) + const type = isvtableMerge + ? 'text' + : scene.table.isHeader(col, row) ? (scene.table._getHeaderLayoutMap(col, row) as HeaderData).headerType : scene.table.getBodyColumnType(col, row); let isHeightChange = false; @@ -386,9 +389,9 @@ function updateCellWidth( let customRender; let customLayout; const cellType = scene.table.getCellLocation(col, row); - const { vTableMerge } = scene.table.getCellRawRecord(col, row); + const { vtableMerge } = scene.table.getCellRawRecord(col, row); - if (vTableMerge && (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout) { + if (vtableMerge && (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout) { customLayout = (scene.table.options as ListTableConstructorOptions).groupTitleCustomLayout; } else if (cellType !== 'body') { const define = scene.table.getHeaderDefine(col, row); diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 10a4e9b3f..44f02c331 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1639,7 +1639,10 @@ export class Scenegraph { } updateCellContentWhileResize(col: number, row: number) { - const type = this.table.isHeader(col, row) + const isvtableMerge = this.table.getCellRawRecord(col, row)?.vtableMerge; + const type = isvtableMerge + ? 'text' + : this.table.isHeader(col, row) ? (this.table._getHeaderLayoutMap(col, row) as HeaderData).headerType : this.table.getBodyColumnType(col, row); const cellGroup = this.getCell(col, row);