Skip to content

Commit c5d79c1

Browse files
Violet2314Violet2314
committed
feat(gantt): add theme adaptation capability
1 parent 48d6279 commit c5d79c1

11 files changed

Lines changed: 780 additions & 0 deletions

File tree

‎packages/vtable-gantt/examples/gantt/gantt-theme-adaptation.ts‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
import type { ColumnsDefine } from '@visactor/vtable';
2+
import * as VTable from '@visactor/vtable';
3+
import type { GanttConstructorOptions, TYPES } from '../../src/index';
4+
import * as VTableGantt from '../../src/index';
5+
import { Gantt } from '../../src/index';
6+
import { bindDebugTool } from '../../../vtable/src/scenegraph/debug-tool';
7+
const CONTAINER_ID = 'vTable';
8+
9+
export function createTable() {
10+
const records = [
11+
{
12+
id: 1,
13+
title: 'Software Development',
14+
developer: 'liufangfang.jane@bytedance.com',
15+
start: '2024-07-04',
16+
end: '2024-07-14',
17+
progress: 31,
18+
priority: 'P0'
19+
},
20+
{
21+
id: 2,
22+
title: 'Scope',
23+
developer: 'liufangfang.jane@bytedance.com',
24+
start: '2024-07-05',
25+
progress: 60,
26+
priority: 'P0',
27+
type: 'milestone'
28+
},
29+
{
30+
id: 3,
31+
title: 'Determine project scope',
32+
developer: 'liufangfang.jane@bytedance.com',
33+
start: '2024/07/08',
34+
end: '2024/07/14',
35+
progress: 100,
36+
priority: 'P1'
37+
},
38+
{
39+
id: 4,
40+
title: 'Software Development',
41+
developer: 'liufangfang.jane@bytedance.com',
42+
start: '2024-07-09',
43+
end: '2024-07-14',
44+
progress: 90,
45+
priority: 'P0'
46+
},
47+
{
48+
id: 5,
49+
title: 'Scope',
50+
developer: 'liufangfang.jane@bytedance.com',
51+
start: '07/14/2024',
52+
end: '07/24/2024',
53+
progress: 60,
54+
priority: 'P0'
55+
},
56+
{
57+
id: 6,
58+
title: 'Determine project scope',
59+
developer: 'liufangfang.jane@bytedance.com',
60+
start: '2024-07-10',
61+
end: '2024-07-14',
62+
progress: 100,
63+
priority: 'P1'
64+
},
65+
{
66+
id: 7,
67+
title: 'Software Development',
68+
developer: 'liufangfang.jane@bytedance.com',
69+
start: '2024-07-24',
70+
end: '2024-08-04',
71+
progress: 31,
72+
priority: 'P0'
73+
},
74+
{
75+
id: 8,
76+
title: 'Scope',
77+
developer: 'liufangfang.jane@bytedance.com',
78+
start: '2024.07.06',
79+
end: '2024.07.08',
80+
progress: 60,
81+
priority: 'P0'
82+
},
83+
{
84+
id: 9,
85+
title: 'Determine project scope',
86+
developer: 'liufangfang.jane@bytedance.com',
87+
start: '2024/07/09',
88+
end: '2024/07/11',
89+
progress: 100,
90+
priority: 'P1'
91+
},
92+
{
93+
id: 10,
94+
title: 'Software Development',
95+
developer: 'liufangfang.jane@bytedance.com',
96+
start: '07.24.2024',
97+
end: '08.04.2024',
98+
progress: 31,
99+
priority: 'P0'
100+
},
101+
{
102+
id: 11,
103+
title: 'Scope',
104+
developer: 'liufangfang.jane@bytedance.com',
105+
start: '2024-07-06',
106+
end: '2024-07-08',
107+
progress: 60,
108+
priority: 'P0'
109+
},
110+
{
111+
id: 12,
112+
title: 'Determine project scope',
113+
developer: 'liufangfang.jane@bytedance.com',
114+
start: '2024-08-09',
115+
end: '2024-09-11',
116+
progress: 100,
117+
priority: 'P1'
118+
},
119+
{
120+
id: 13,
121+
title: 'Software Development',
122+
developer: 'liufangfang.jane@bytedance.com',
123+
start: '2024-07-24',
124+
end: '2024-08-04',
125+
progress: 31,
126+
priority: 'P0'
127+
},
128+
{
129+
id: 14,
130+
title: 'Scope',
131+
developer: 'liufangfang.jane@bytedance.com',
132+
start: '2024-07-06',
133+
end: '2024-07-08',
134+
progress: 60,
135+
priority: 'P0'
136+
},
137+
{
138+
id: 15,
139+
title: 'Determine project scope',
140+
developer: 'liufangfang.jane@bytedance.com',
141+
start: '2024-07-09',
142+
end: '2024-07-11',
143+
progress: 100,
144+
priority: 'P1'
145+
},
146+
{
147+
id: 16,
148+
title: 'Software Development',
149+
developer: 'liufangfang.jane@bytedance.com',
150+
start: '2024-07-24',
151+
end: '2024-08-04',
152+
progress: 31,
153+
priority: 'P0'
154+
},
155+
{
156+
id: 17,
157+
title: 'Scope',
158+
developer: 'liufangfang.jane@bytedance.com',
159+
start: '2024-07-06',
160+
end: '2024-07-08',
161+
progress: 60,
162+
priority: 'P0'
163+
},
164+
{
165+
id: 18,
166+
title: 'Determine project scope',
167+
developer: 'liufangfang.jane@bytedance.com',
168+
start: '2024-07-09',
169+
end: '2024-07-11',
170+
progress: 100,
171+
priority: 'P1'
172+
},
173+
{
174+
id: 19,
175+
title: 'Software Development',
176+
developer: 'liufangfang.jane@bytedance.com',
177+
start: '2024-07-24',
178+
end: '2024-08-04',
179+
progress: 31,
180+
priority: 'P0'
181+
},
182+
{
183+
id: 20,
184+
title: 'Scope',
185+
developer: 'liufangfang.jane@bytedance.com',
186+
start: '2024-07-06',
187+
end: '2024-07-08',
188+
progress: 60,
189+
priority: 'P0'
190+
}
191+
];
192+
193+
const columns = [
194+
// {
195+
// field: 'id',
196+
// title: 'ID',
197+
// width: 80,
198+
// sort: true
199+
// },
200+
{
201+
field: 'title',
202+
title: 'title',
203+
width: 200,
204+
sort: true
205+
},
206+
{
207+
field: 'start',
208+
title: 'start',
209+
width: 150,
210+
sort: true
211+
},
212+
{
213+
field: 'end',
214+
title: 'end',
215+
width: 150,
216+
sort: true
217+
},
218+
{
219+
field: 'priority',
220+
title: 'priority',
221+
width: 100,
222+
sort: true
223+
},
224+
225+
{
226+
field: 'progress',
227+
title: 'progress',
228+
width: 200,
229+
sort: true
230+
}
231+
];
232+
const option: GanttConstructorOptions = {
233+
records: [],
234+
theme: VTable.themes.SIMPLIFY,
235+
taskListTable: {
236+
columns: columns,
237+
tableWidth: 400,
238+
minTableWidth: 100,
239+
maxTableWidth: 600,
240+
theme: VTable.themes.SIMPLIFY,
241+
},
242+
dependency: {
243+
links: [
244+
{
245+
type: VTableGantt.TYPES.DependencyType.FinishToStart,
246+
linkedFromTaskKey: 1,
247+
linkedToTaskKey: 2
248+
},
249+
{
250+
type: VTableGantt.TYPES.DependencyType.StartToFinish,
251+
linkedFromTaskKey: 2,
252+
linkedToTaskKey: 3
253+
},
254+
{
255+
type: VTableGantt.TYPES.DependencyType.StartToStart,
256+
linkedFromTaskKey: 3,
257+
linkedToTaskKey: 4
258+
},
259+
{
260+
type: VTableGantt.TYPES.DependencyType.FinishToFinish,
261+
linkedFromTaskKey: 4,
262+
linkedToTaskKey: 5
263+
},
264+
{
265+
type: VTableGantt.TYPES.DependencyType.StartToFinish,
266+
linkedFromTaskKey: 5,
267+
linkedToTaskKey: 2
268+
},
269+
{
270+
type: VTableGantt.TYPES.DependencyType.StartToStart,
271+
linkedFromTaskKey: 52,
272+
linkedToTaskKey: 1
273+
},
274+
{
275+
type: VTableGantt.TYPES.DependencyType.StartToStart,
276+
linkedFromTaskKey: 53,
277+
linkedToTaskKey: 3
278+
},
279+
{
280+
type: VTableGantt.TYPES.DependencyType.FinishToFinish,
281+
linkedFromTaskKey: 4,
282+
linkedToTaskKey: 54
283+
},
284+
{
285+
type: VTableGantt.TYPES.DependencyType.FinishToStart,
286+
linkedFromTaskKey: 1,
287+
linkedToTaskKey: 5
288+
}
289+
],
290+
// linkLineSelectable: false,
291+
linkSelectedLineStyle: {
292+
shadowBlur: 5, //阴影宽度
293+
shadowColor: 'red',
294+
lineColor: 'red',
295+
lineWidth: 1
296+
},
297+
linkCreatable: true
298+
},
299+
frame: {
300+
verticalSplitLineMoveable: true,
301+
outerFrameStyle: {
302+
borderLineWidth: 2,
303+
borderColor: 'red',
304+
cornerRadius: 8
305+
},
306+
verticalSplitLine: {
307+
lineWidth: 3,
308+
lineColor: '#e1e4e8'
309+
},
310+
verticalSplitLineHighlight: {
311+
lineColor: 'green',
312+
lineWidth: 3
313+
}
314+
},
315+
headerRowHeight: 60,
316+
rowHeight: 40,
317+
timelineHeader: {
318+
scales: [
319+
{
320+
unit: 'week',
321+
step: 1,
322+
startOfWeek: 'sunday',
323+
format(date) {
324+
return `Week ${date.dateIndex}`;
325+
},
326+
style: {
327+
fontSize: 20,
328+
fontWeight: 'bold',
329+
color: 'red'
330+
}
331+
},
332+
{
333+
unit: 'day',
334+
step: 1,
335+
format(date) {
336+
return date.dateIndex.toString();
337+
},
338+
style: {
339+
fontSize: 20,
340+
fontWeight: 'bold',
341+
color: 'red'
342+
}
343+
}
344+
]
345+
},
346+
scrollStyle: {
347+
visible: 'scrolling'
348+
},
349+
overscrollBehavior: 'none'
350+
};
351+
// columns:[
352+
// {
353+
// title:'2024-07',
354+
// columns:[
355+
// {
356+
// title:'01'
357+
// },
358+
// {
359+
// title:'02'
360+
// },
361+
// ...
362+
// ]
363+
// },
364+
// ...
365+
// ]
366+
const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID)!, option);
367+
window.ganttInstance = ganttInstance;
368+
ganttInstance.setRecords(records);
369+
370+
ganttInstance.on('scroll', e => {
371+
console.log('scroll', e);
372+
});
373+
ganttInstance.on('change_date_range', e => {
374+
console.log('change_date_range', e);
375+
});
376+
ganttInstance.on('mouseenter_task_bar', e => {
377+
console.log('mouseenter_taskbar', e);
378+
});
379+
ganttInstance.on('mouseleave_task_bar', e => {
380+
console.log('mouseleave_taskbar', e);
381+
});
382+
ganttInstance.on('click_task_bar', e => {
383+
console.log('click_task_bar', e);
384+
});
385+
ganttInstance.taskListTableInstance?.on('scroll', e => {
386+
console.log('listTable scroll', e);
387+
});
388+
ganttInstance.taskListTableInstance?.on('change_header_position_start', e => {
389+
console.log('change_header_position_start ', e);
390+
});
391+
ganttInstance.taskListTableInstance?.on('changing_header_position', e => {
392+
console.log('changing_header_position ', e);
393+
});
394+
bindDebugTool(ganttInstance.scenegraph.stage as any, {
395+
customGrapicKeys: ['role', '_updateTag']
396+
});
397+
}

0 commit comments

Comments
 (0)