Skip to content

fix: Resolved the issue of missing default values for gannt/minDate maxDate #3799 #3810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fangsmile merged 3 commits into from
Apr 27, 2025
Merged

fix: Resolved the issue of missing default values for gannt/minDate maxDate #3799 #3810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
93a2c5c
fix: Resolved the issue of missing default values for gannt/minDate a…
Apr 27, 2025
cf2abb7
fix: Resolved the issue of missing default values for gannt/minDate a…
Apr 27, 2025
a3fdc58
fix: Resolved the issue of missing default values for gannt/minDate a…
Apr 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
335 changes: 335 additions & 0 deletions packages/vtable-gantt/examples/gantt/gantt-default-minDate-maxDate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,335 @@
import type { ColumnsDefine } from '@visactor/vtable';
import type { GanttConstructorOptions, TYPES } from '../../src/index';
import { Gantt, VRender } from '../../src/index';
import { bindDebugTool } from '../../../vtable/src/scenegraph/debug-tool';
const CONTAINER_ID = 'vTable';
export function createTable() {
const records = [
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
progress: 31,
priority: 'P0'
},
{
id: 2,
title: 'Scope',
developer: 'liufangfang.jane@bytedance.com',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Determine project scope',
developer: 'liufangfang.jane@bytedance.com',
progress: 100,
priority: 'P1'
},
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
progress: 90,
priority: 'P0'
},
{
id: 2,
title: 'Scope',
developer: 'liufangfang.jane@bytedance.com',
start: '07/14/2024',
end: '07/24/2024',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Determine project scope',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-10',
end: '2024-07-14',
progress: 100,
priority: 'P1'
},
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-24',
end: '2024-08-04',
progress: 31,
priority: 'P0'
},
{
id: 2,
title: 'Scope',
developer: 'liufangfang.jane@bytedance.com',
start: '2024.07.06',
end: '2024.07.08',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Determine project scope',
developer: 'liufangfang.jane@bytedance.com',
start: '2024/07/09',
end: '2024/07/11',
progress: 100,
priority: 'P1'
},
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '07.24.2024',
end: '08.04.2024',
progress: 31,
priority: 'P0'
}
];

const columns = [
// {
// field: 'id',
// title: 'ID',
// width: 80,
// sort: true
// },
{
field: 'title',
title: 'title',
width: 200,
sort: true
},
{
field: 'start',
title: 'start',
width: 150,
sort: true
},
{
field: 'end',
title: 'end',
width: 150,
sort: true
},
{
field: 'priority',
title: 'priority',
width: 100,
sort: true
},

{
field: 'progress',
title: 'progress',
width: 200,
sort: true
}
];
const option: GanttConstructorOptions = {
records,
taskListTable: {
columns: columns,
tableWidth: 400,
minTableWidth: 100,
maxTableWidth: 600
},
resizeLineStyle: {
lineColor: 'green',
lineWidth: 3
},

frame: {
verticalSplitLineMoveable: true,
outerFrameStyle: {
borderLineWidth: 2,
borderColor: 'red',
cornerRadius: 8
},
verticalSplitLine: {
lineWidth: 3,
lineColor: '#e1e4e8'
},
verticalSplitLineHighlight: {
lineColor: 'green',
lineWidth: 3
}
},
grid: {
// backgroundColor: 'gray',
verticalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
horizontalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
}
},
defaultHeaderRowHeight: 60,
defaultRowHeight: 40,
timelineHeader: {
verticalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
horizontalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
backgroundColor: '#EEF1F5',
colWidth: 60,
scales: [
{
unit: 'week',
step: 1,
startOfWeek: 'sunday',
format(date) {
return `Week ${date.dateIndex}`;
},
style: {
fontSize: 20,
fontWeight: 'bold',
color: 'red',
backgroundColor: '#EEF1F5'
}
},
{
unit: 'day',
step: 1,
format(date) {
return date.dateIndex.toString();
},
style: {
fontSize: 20,
fontWeight: 'bold',
color: 'red',
backgroundColor: '#EEF1F5'
}
}
]
},
// maxDate: '2024-06-01',
// minDate: '2024-06-01',
maxDate: '2024-10-15',

taskBar: {
startDateField: 'start',
endDateField: 'end'
},
markLine: [
{
date: '2024-10-06',
content: '我的啊啊得的',
contentStyle: {
color: '#fff'
// fontSize: 40
},
style: {
lineWidth: 1,
lineColor: 'red'
}
}
],
scrollStyle: {
visible: 'scrolling'
},
overscrollBehavior: 'none',
markLineCreateOptions: {
markLineCreatable: true,
markLineCreationHoverToolTip: {
position: 'top',
tipContent: '创建里程碑',
style: {
contentStyle: {
fill: '#fff'
},
panelStyle: {
background: '#14161c',
cornerRadius: 4
}
}
},
markLineCreationStyle: {
fill: '#ccc',
size: 30,
iconSize: 12,
svg: '<svg t="1741145302032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2861" width="200" height="200"><path d="M967.68 558.08v-89.6H542.72V43.52h-87.04v424.96H30.72v89.6h424.96v422.4h87.04V558.08z" fill="" p-id="2862"></path></svg>'
}
}
};

const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID)!, option);
window.ganttInstance = ganttInstance;
ganttInstance.on('click_markline_create', ({ data, position }) => {
createPopup({ date: data.startDate, content: '' }, position, value => {
ganttInstance.addMarkLine({
date: formatDate(data.startDate),
content: value,
contentStyle: {
color: '#fff'
},
style: {
lineWidth: 1,
lineColor: 'red'
}
});
});
});
ganttInstance.on('click_markline_content', ({ data, position }) => {
createPopup({ date: data.date, content: data.content }, position, value => {
ganttInstance.updateCurrentMarkLine({ date: data.date, content: value });
});
});
// bindDebugTool(ganttInstance.scenegraph.stage as any, {
// customGrapicKeys: ['role', '_updateTag']
// });
}

function formatDate(date) {
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2); // 补零技巧
const day = ('0' + date.getDate()).slice(-2);
return year + '-' + month + '-' + day;
}

function createPopup({ date, content }, position, callback) {
const container = document.getElementById('article');

// 创建弹窗元素
const popup = document.createElement('div');
popup.className = 'popup';

// 设置定位参数
popup.style.top = `${position.top}px`;
popup.style.left = `${position.left}px`;
popup.style.position = 'absolute';
popup.style.background = '#ccc';
popup.style.padding = '10px';
popup.style.zIndex = '10000';

// 日期显示格式化
const dateString = typeof date === 'string' ? date : formatDate(date);

// 弹窗内容
popup.innerHTML = `
<span class="close-btn" onclick="this.parentElement.remove()">×</span>
<div>日期：${dateString}</div>
<input type="text" placeholder="输入内容" class="popup-input" value="${content}" />
<button class="confirm-btn">确定</button>
`;

const confirmBtn = popup.querySelector('.confirm-btn')!;
confirmBtn.addEventListener('click', () => {
const inputValue = popup.querySelector('.popup-input')!.value;
popup.remove();
if (typeof callback === 'function') {
callback(inputValue);
}
});

// 添加弹窗到容器
container!.appendChild(popup);
}
4 changes: 4 additions & 0 deletions packages/vtable-gantt/examples/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export const menus = [
path: 'gantt',
name: 'gantt-month'
},
{
path: 'gantt',
name: 'gantt-default-minDate-maxDate'
},
{
path: 'gantt',
name: 'gantt-createButton'
Expand Down
12 changes: 12 additions & 0 deletions packages/vtable-gantt/src/data/DataSource.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,18 @@ export class DataSource {
this._gantt.parsedOptions.minDate = getStartDateByTimeUnit(new Date(minDate), minTimeUnit, startOfWeek);
this._gantt.parsedOptions._minDateTime = this._gantt.parsedOptions.minDate.getTime();
}

// 提供了最大值，没有提供最小值，因为最大值依赖最小值，所以应该重新计算
if (needMinDate && !needMaxDate) {
this._gantt.parsedOptions.maxDate = getEndDateByTimeUnit(
this._gantt.parsedOptions.minDate,
new Date(this._gantt.options.maxDate),
minTimeUnit,
step
);
this._gantt.parsedOptions._maxDateTime = this._gantt.parsedOptions.maxDate.getTime();
}

if (needMaxDate) {
this._gantt.parsedOptions.maxDate = getEndDateByTimeUnit(
this._gantt.parsedOptions.minDate,
Expand Down
10 changes: 7 additions & 3 deletions packages/vtable-gantt/src/gantt-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,13 @@ export function initOptions(gantt: Gantt) {
gantt.parsedOptions.minDate = options?.minDate
? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek)
: undefined;
gantt.parsedOptions.maxDate = options?.maxDate
? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step)
: undefined;

// processRecords函数中，重新计算了是否缺失minDate，maxDate 的情况
gantt.parsedOptions.maxDate =
options?.maxDate && gantt.parsedOptions?.minDate
? getEndDateByTimeUnit(gantt.parsedOptions?.minDate, new Date(options.maxDate), minTimeUnit, step)
: undefined;

gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
gantt.parsedOptions.overscrollBehavior = options?.overscrollBehavior ?? 'auto';
Expand Down
Loading