@visactor/vtable-gantt 1.7.1 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +124 -63
  2. package/README.zh-CN.md +214 -0
  3. package/cjs/index.d.ts +1 -1
  4. package/cjs/index.js +1 -1
  5. package/cjs/index.js.map +1 -1
  6. package/dist/vtable-gantt.js +65 -45
  7. package/dist/vtable-gantt.min.js +1 -1
  8. package/es/index.d.ts +1 -1
  9. package/es/index.js +1 -1
  10. package/es/index.js.map +1 -1
  11. package/package.json +5 -5
package/README.md CHANGED
@@ -5,22 +5,22 @@
5
5
  </div>
6
6
 
7
7
  <div align="center">
8
- <h1>VTable</h1>
8
+ <h1>VTable-Gantt</h1>
9
9
  </div>
10
10
 
11
11
  <div align="center">
12
12
 
13
- VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
13
+ 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.
14
14
 
15
15
  <p align="center">
16
- <a href="">Introduction</a> •
17
- <a href="">demo</a> •
18
- <a href="">Tutorial</a> •
19
- <a href="">API</a>•
16
+ <a href="https://visactor.io/vtable/guide/gantt/introduction">Introduction</a> •
17
+ <a href="https://visactor.io/vtable/demo/gantt/gantt-basic">Demo</a> •
18
+ <a href="https://visactor.io/vtable/guide/gantt/Getting_Started">Tutorial</a> •
19
+ <a href="https://visactor.io/vtable/option/Gantt">API</a>•
20
20
  </p>
21
21
 
22
- [![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable)
23
- [![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable)
22
+ [![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
23
+ [![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
24
24
  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
25
25
 
26
26
  </div>
@@ -39,20 +39,25 @@ English| [简体中文](./README.zh-CN.md)
39
39
 
40
40
  # Introduction
41
41
 
42
- VTable is a canvas table library based on visual rendering engine [VRender](https://github.com/VisActor/VRender).
42
+ 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:
43
43
 
44
- The core capabilities are as follows:
45
-
46
- 1. Extreme performance: Supports fast computation and rendering of millions of data points.
47
- 2. Multidimensional analysis: Automatically analyzes and presents multidimensional data.
48
- 3. Strong expressiveness: Provides flexible and powerful graphic capabilities, seamlessly integrating with charts of [VChart](https://github.com/VisActor/VChart).
44
+ 1. High performance: Supports fast computation and rendering of large-scale project data, ensuring a smooth user experience.
45
+ 2. Flexible layout: Supports custom timeline, task bar styles, and layouts to meet different project management needs.
46
+ 3. Powerful interaction: Provides drag-and-drop, zoom, and edit functions for tasks, simplifying project management operations.
47
+ 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.
49
48
 
50
49
  # Repo Intro
51
50
 
52
51
  This repository includes the following packages:
53
52
 
54
- 1. vtable: VTable components
55
- 2. vtable-docs: VTable documentation
53
+ 1. packages/vtable: The core code repository of VTable
54
+ 2. packages/vtable-gantt: Gantt chart component code
55
+ 3. packages/vtable-editors: Table editor component code
56
+ 4. packages/vtable-export: Table export tool code
57
+ 5. packages/vtable-search: Table search tool code
58
+ 6. packages/react-vtable: React version of the table component
59
+ 7. packages/vue-vtable: Vue version of the table component
60
+ 8. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
56
61
 
57
62
  # Usage
58
63
 
@@ -62,66 +67,122 @@ This repository includes the following packages:
62
67
 
63
68
  ```bash
64
69
  // npm
65
- npm install @visactor/vtable
70
+ npm install @visactor/vtable-gantt
66
71
 
67
72
  // yarn
68
- yarn add @visactor/vtable
73
+ yarn add @visactor/vtable-gantt
69
74
  ```
70
75
 
71
76
  ## Quick Start
72
77
 
73
78
  ```javascript
74
- import * as VTable from '@visactor/vtable';
75
-
76
- const columns =[
77
- {
78
- "field": "Order ID",
79
- "caption": "Order ID",
80
- },
81
- {
82
- "field": "Customer ID",
83
- "caption": "Customer ID",
84
- },
85
- {
86
- "field": "Product Name",
87
- "caption": "Product Name",
88
- },
89
- {
90
- "field": "Sales",
91
- "caption": "Sales",
92
- },
93
- {
94
- "field": "Profit",
95
- "caption": "Profit",
96
- }
79
+ import {Gantt} from '@visactor/vtable-gantt';
80
+ const records = [
81
+ {
82
+ id: 1,
83
+ title: 'Task 1',
84
+ developer: 'liufangfang.jane@bytedance.com',
85
+ start: '2024-07-24',
86
+ end: '2024-07-26',
87
+ progress: 31,
88
+ priority: 'P0',
89
+ },
90
+ {
91
+ id: 2,
92
+ title: 'Task 2',
93
+ developer: 'liufangfang.jane@bytedance.com',
94
+ start: '07/24/2024',
95
+ end: '08/04/2024',
96
+ progress: 60,
97
+ priority: 'P0'
98
+ },
99
+ {
100
+ id: 3,
101
+ title: 'Task 3',
102
+ developer: 'liufangfang.jane@bytedance.com',
103
+ start: '2024-08-04',
104
+ end: '2024-08-04',
105
+ progress: 100,
106
+ priority: 'P1'
107
+ },
108
+ {
109
+ id: 4,
110
+ title: 'Task 4',
111
+ developer: 'liufangfang.jane@bytedance.com',
112
+ start: '2024-07-26',
113
+ end: '2024-07-28',
114
+ progress: 31,
115
+ priority: 'P0'
116
+ }
97
117
  ];
98
118
 
99
- const option = {
100
- records:[
101
- {
102
- "Order ID": "CA-2018-156720",
103
- "Customer ID": "JM-15580",
104
- "Product Name": "Bagged Rubber Bands",
105
- "Sales": "3.024",
106
- "Profit": "-0.605"
119
+ const columns = [
120
+ {
121
+ field: 'title',
122
+ title: 'title',
123
+ width: 'auto',
124
+ sort: true,
125
+ tree: true,
126
+ editor: 'input'
127
+ },
128
+ {
129
+ field: 'start',
130
+ title: 'start',
131
+ width: 'auto',
132
+ sort: true,
133
+ editor: 'date-input'
107
134
  },
108
135
  {
109
- "Order ID": "CA-2018-115427",
110
- "Customer ID": "EB-13975",
111
- "Product Name": "GBC Binding covers",
112
- "Sales": "20.72",
113
- "Profit": "6.475"
136
+ field: 'end',
137
+ title: 'end',
138
+ width: 'auto',
139
+ sort: true,
140
+ editor: 'date-input'
141
+ }
142
+ ];
143
+ const option = {
144
+ overscrollBehavior: 'none',
145
+ records,
146
+ taskListTable: {
147
+ columns,
148
+ },
149
+ taskBar: {
150
+ startDateField: 'start',
151
+ endDateField: 'end',
152
+ progressField: 'progress'
153
+ },
154
+ timelineHeader: {
155
+ colWidth: 100,
156
+ backgroundColor: '#EEF1F5',
157
+ horizontalLine: {
158
+ lineWidth: 1,
159
+ lineColor: '#e1e4e8'
160
+ },
161
+ verticalLine: {
162
+ lineWidth: 1,
163
+ lineColor: '#e1e4e8'
164
+ },
165
+ scales: [
166
+ {
167
+ unit: 'day',
168
+ step: 1,
169
+ format(date) {
170
+ return date.dateIndex.toString();
171
+ },
172
+ style: {
173
+ fontSize: 20,
174
+ fontWeight: 'bold',
175
+ color: 'white',
176
+ strokeColor: 'black',
177
+ textAlign: 'right',
178
+ textBaseline: 'bottom',
179
+ backgroundColor: '#EEF1F5'
180
+ }
181
+ }
182
+ ]
114
183
  },
115
- ...
116
- ],
117
- columns,
118
- widthMode:'standard'
119
184
  };
120
- const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
121
-
122
-
123
-
124
-
185
+ const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
125
186
  ```
126
187
 
127
188
  ##
package/README.zh-CN.md ADDED
@@ -0,0 +1,214 @@
1
+ <div align="center">
2
+ <a href="" target="_blank">
3
+ <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/500_200.svg"/>
4
+ </a>
5
+ </div>
6
+
7
+ <div align="center">
8
+ <h1>VTable-Gantt</h1>
9
+ </div>
10
+
11
+ <div align="center">
12
+
13
+ VTable-Gantt 打造高效、灵活的甘特图解决方案，让项目管理更轻松。通过简单的配置和自定义布局，快速上手并满足各种复杂需求。提升团队协作效率，实现项目进度透明化。.
14
+
15
+ <p align="center">
16
+ <a href="https://visactor.io/vtable/guide/gantt/introduction">Introduction</a> •
17
+ <a href="https://visactor.io/vtable/demo/gantt/gantt-basic">Demo</a> •
18
+ <a href="https://visactor.io/vtable/guide/gantt/Getting_Started">Tutorial</a> •
19
+ <a href="https://visactor.io/vtable/option/Gantt">API</a>•
20
+ </p>
21
+
22
+ [![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
23
+ [![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
24
+ [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
25
+
26
+ </div>
27
+
28
+ <div align="center">
29
+
30
+ 简体中文| [English](./README.md)
31
+
32
+ </div>
33
+
34
+ <div align="center">
35
+
36
+ （video）
37
+
38
+ </div>
39
+
40
+ # 介绍
41
+
42
+ VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库，基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计，提供了强大的可视化和交互功能。核心能力如下：
43
+
44
+ 1. 高效性能：支持大规模项目数据的快速运算与渲染，确保流畅的用户体验。
45
+ 2. 灵活布局：支持自定义时间轴、任务条样式和布局，满足不同项目管理需求。
46
+ 3. 强大交互：提供任务的拖拽、缩放和编辑功能，简化项目管理操作。
47
+ 4. 丰富的可视化能力：支持信息单元格及任务条的自定义渲染，提供树形结构展示，提升数据展示的多样性和直观性。
48
+
49
+ # 代码仓库介绍
50
+
51
+ 主要包含以下几个子项目:
52
+
53
+ 1. packages/vtable：表格组件代码
54
+ 2. packages/vtable-gantt: 甘特图组件代码
55
+ 3. packages/vtable-editors: 表格编辑器组件代码
56
+ 4. packages/vtable-export: 表格导出工具代码
57
+ 5. packages/vtable-search: 表格搜索工具代码
58
+ 6. packages/react-vtable: React 版本的表格组件
59
+ 7. packages/vue-vtable: Vue 版本的表格组件
60
+ 8. docs: 教程文档
61
+
62
+ # 用法
63
+
64
+ ## 安装
65
+
66
+ [npm package](https://www.npmjs.com/package/@visactor/vtable)
67
+
68
+ ```bash
69
+ // npm
70
+ npm install @visactor/vtable-gantt
71
+
72
+ // yarn
73
+ yarn add @visactor/vtable-gantt
74
+ ```
75
+
76
+ ## 快速上手
77
+
78
+ ```javascript
79
+ import {Gantt} from '@visactor/vtable-gantt';
80
+
81
+ const records = [
82
+ {
83
+ id: 1,
84
+ title: 'Task 1',
85
+ developer: 'liufangfang.jane@bytedance.com',
86
+ start: '2024-07-24',
87
+ end: '2024-07-26',
88
+ progress: 31,
89
+ priority: 'P0',
90
+ },
91
+ {
92
+ id: 2,
93
+ title: 'Task 2',
94
+ developer: 'liufangfang.jane@bytedance.com',
95
+ start: '07/24/2024',
96
+ end: '08/04/2024',
97
+ progress: 60,
98
+ priority: 'P0'
99
+ },
100
+ {
101
+ id: 3,
102
+ title: 'Task 3',
103
+ developer: 'liufangfang.jane@bytedance.com',
104
+ start: '2024-08-04',
105
+ end: '2024-08-04',
106
+ progress: 100,
107
+ priority: 'P1'
108
+ },
109
+ {
110
+ id: 4,
111
+ title: 'Task 4',
112
+ developer: 'liufangfang.jane@bytedance.com',
113
+ start: '2024-07-26',
114
+ end: '2024-07-28',
115
+ progress: 31,
116
+ priority: 'P0'
117
+ }
118
+ ];
119
+
120
+ const columns = [
121
+ {
122
+ field: 'title',
123
+ title: 'title',
124
+ width: 'auto',
125
+ sort: true,
126
+ tree: true,
127
+ editor: 'input'
128
+ },
129
+ {
130
+ field: 'start',
131
+ title: 'start',
132
+ width: 'auto',
133
+ sort: true,
134
+ editor: 'date-input'
135
+ },
136
+ {
137
+ field: 'end',
138
+ title: 'end',
139
+ width: 'auto',
140
+ sort: true,
141
+ editor: 'date-input'
142
+ }
143
+ ];
144
+ const option = {
145
+ overscrollBehavior: 'none',
146
+ records,
147
+ taskListTable: {
148
+ columns,
149
+ },
150
+ taskBar: {
151
+ startDateField: 'start',
152
+ endDateField: 'end',
153
+ progressField: 'progress'
154
+ },
155
+ timelineHeader: {
156
+ colWidth: 100,
157
+ backgroundColor: '#EEF1F5',
158
+ horizontalLine: {
159
+ lineWidth: 1,
160
+ lineColor: '#e1e4e8'
161
+ },
162
+ verticalLine: {
163
+ lineWidth: 1,
164
+ lineColor: '#e1e4e8'
165
+ },
166
+ scales: [
167
+ {
168
+ unit: 'day',
169
+ step: 1,
170
+ format(date) {
171
+ return date.dateIndex.toString();
172
+ },
173
+ style: {
174
+ fontSize: 20,
175
+ fontWeight: 'bold',
176
+ color: 'white',
177
+ strokeColor: 'black',
178
+ textAlign: 'right',
179
+ textBaseline: 'bottom',
180
+ backgroundColor: '#EEF1F5'
181
+ }
182
+ }
183
+ ]
184
+ },
185
+ };
186
+ const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
187
+
188
+ ```
189
+
190
+ ##
191
+
192
+ [更多 demo 和详细教程](https://visactor.io/vtable)
193
+
194
+ # 相关链接
195
+
196
+ - [官网](https://visactor.io/vtable)
197
+
198
+ # 生态系统
199
+
200
+ | Project | Description |
201
+ | ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
202
+ | [AI-generated Components](https://visactor.io/ai-vtable) | AI-generated table component. |
203
+
204
+ # 参与贡献
205
+
206
+ 如想参与贡献，请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。
207
+
208
+ 细流成河，终成大海！
209
+
210
+ <a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
211
+
212
+ # 许可证
213
+
214
+ [MIT 协议](./LICENSE)
package/cjs/index.d.ts CHANGED
@@ -3,5 +3,5 @@ import * as TYPES from './ts-types';
3
3
  import type { ColumnDefine, ColumnsDefine, LinkColumnDefine, ChartColumnDefine, ImageColumnDefine, SparklineColumnDefine, ProgressbarColumnDefine, TextColumnDefine, GroupColumnDefine, TextAlignType, TextBaselineType } from '@visactor/vtable';
4
4
  import { Gantt } from './Gantt';
5
5
  import * as tools from './tools';
6
- export declare const version = "1.7.1";
6
+ export declare const version = "1.7.3";
7
7
  export { TYPES, GanttConstructorOptions, Gantt, ColumnsDefine, ColumnDefine, LinkColumnDefine, ChartColumnDefine, ImageColumnDefine, SparklineColumnDefine, ProgressbarColumnDefine, TextColumnDefine, GroupColumnDefine, TextAlignType, TextBaselineType, tools };
package/cjs/index.js CHANGED
@@ -44,5 +44,5 @@ Object.defineProperty(exports, "Gantt", {
44
44
 
45
45
  const tools = __importStar(require("./tools"));
46
46
 
47
- exports.tools = tools, exports.version = "1.7.1";
47
+ exports.tools = tools, exports.version = "1.7.3";
48
48
  //# sourceMappingURL=index.js.map
package/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AAqBlC,sBAAK;AAPP,mCAAgC;AAS9B,sFATO,aAAK,OASP;AARP,+CAAiC;AAoB/B,sBAAK;AAnBM,QAAA,OAAO,GAAG,OAAO,CAAC","file":"index.js","sourcesContent":["import type { GanttConstructorOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport type {\n ColumnDefine,\n ColumnsDefine,\n LinkColumnDefine,\n ChartColumnDefine,\n ImageColumnDefine,\n SparklineColumnDefine,\n ProgressbarColumnDefine,\n TextColumnDefine,\n GroupColumnDefine,\n TextAlignType,\n TextBaselineType\n} from '@visactor/vtable';\nimport { Gantt } from './Gantt';\nimport * as tools from './tools';\nexport const version = \"1.7.1\";\n/**\n * @namespace VTable\n */\nexport {\n TYPES,\n GanttConstructorOptions,\n Gantt,\n ColumnsDefine,\n ColumnDefine,\n LinkColumnDefine,\n ChartColumnDefine,\n ImageColumnDefine,\n SparklineColumnDefine,\n ProgressbarColumnDefine,\n TextColumnDefine,\n GroupColumnDefine,\n TextAlignType,\n TextBaselineType,\n tools\n};\n"]}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AAqBlC,sBAAK;AAPP,mCAAgC;AAS9B,sFATO,aAAK,OASP;AARP,+CAAiC;AAoB/B,sBAAK;AAnBM,QAAA,OAAO,GAAG,OAAO,CAAC","file":"index.js","sourcesContent":["import type { GanttConstructorOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport type {\n ColumnDefine,\n ColumnsDefine,\n LinkColumnDefine,\n ChartColumnDefine,\n ImageColumnDefine,\n SparklineColumnDefine,\n ProgressbarColumnDefine,\n TextColumnDefine,\n GroupColumnDefine,\n TextAlignType,\n TextBaselineType\n} from '@visactor/vtable';\nimport { Gantt } from './Gantt';\nimport * as tools from './tools';\nexport const version = \"1.7.3\";\n/**\n * @namespace VTable\n */\nexport {\n TYPES,\n GanttConstructorOptions,\n Gantt,\n ColumnsDefine,\n ColumnDefine,\n LinkColumnDefine,\n ChartColumnDefine,\n ImageColumnDefine,\n SparklineColumnDefine,\n ProgressbarColumnDefine,\n TextColumnDefine,\n GroupColumnDefine,\n TextAlignType,\n TextBaselineType,\n tools\n};\n"]}