双周DHTMLX甘特图视图

Question

在dhtmlx甘特图中，我将我的刻度配置为显示年份和季度(每季度3个PI)。

gantt.config.scales = [
    { name: 'year', format: '%Y' },
    { name: 'quarter', template: date => `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1 )}` },
]

这给了我结果

|             2022             |
|   PI-1  |   PI-2   |  PI-3   |

我现在想在我的量表上增加2周的增量，表示每季度的冲刺(每季度6次冲刺，每年24次冲刺)

|             2022             |
|  PI-1   |   PI-2   |  PI-3   |
| S1 | S2 | S3 |  S4 | S5 | S6 |

我不知道如何构造我的模板来实现这一点。有什么想法吗？

Answer 1

应该注意的是，如果增加2周，那么一年内就会有24次以上的短跑。同样可以说是月左右，一个季度等于3个月，其中包含一个非整数的周数，所以季度和冲刺尺度的边界不能重合。要在比例中设置sprint，您需要使用Custom time units。因此，我可以提供以下解决方案：

如果增量严格为2周，则首先确定每个sprint的开始日期。也有必要设置第一次冲刺的开始，例如，我将其设置为一年中第一周的星期一开始：

// specify the start date of the first sprint
gantt.config.project_start = new Date(2022, 0, 3);

// find a sprint for a given date
function findSprint(date) {
    const firstSprint = gantt.date.week_start(new Date(gantt.config.project_start));
    let currentDate = firstSprint;
    let direction = 1;

    if (date < firstSprint) {
        direction = -1;
    }
    const increment = 2 * direction;

    let nextDate = gantt.date.add(currentDate, increment, "week");
    let num = 0;
    
    while (!(currentDate.valueOf() <= date.valueOf() && nextDate.valueOf() > date.valueOf())) {
        if (increment > 0) {
            currentDate = nextDate;
            nextDate = gantt.date.add(currentDate, increment, "week");
        } else {
            nextDate = currentDate;
            currentDate = gantt.date.add(currentDate, increment, "week");
        }
        num += 1 * direction;
    }

    return {
        sprintStart: currentDate,
        sprintEnd: nextDate,
        sprintNumber: num
    }
}

// custom scale unit definition
gantt.date.sprint_start = function (date) {
    return findSprint(date).sprintStart;
};

下一步是指定增量为两周：

gantt.date.add_sprint = function (date, inc) {
    return gantt.date.add(gantt.date.sprint_start(date), inc * 2, "week");
};

最后，在比额表中增加一个新单位：

gantt.config.scales = [
    { unit: "year", step: 1, format: "%Y" },
    {
        unit: 'quarter',
        format: date => {
            return `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1)}`
        }
    },
    { unit: 'sprint', step: 1, template: function (date) {
            const sprintInfo = findSprint(date);
            return `Sprint ${sprintInfo.sprintNumber + 1}, (${gantt.templates.date_grid(sprintInfo.sprintStart)} - ${gantt.templates.date_grid(new Date(sprintInfo.sprintEnd - 1))})`
        }
    }
];

请看一个例子：https://snippet.dhtmlx.com/15u2bd85。

有时由于某些原因，季度和年份的边界不匹配，这很可能是一个错误，如果这种情况发生在您身上，请与dhtmlx技术支持联系。

如果您希望在一年中有24个sprint，您可以为每个sprint设置特定的日期，它可能如下所示：

const sprints = [
    { name: 'S1',  start_date: new Date(2022,00,01), end_date: new Date(2022,00,15) },
    { name: 'S2',  start_date: new Date(2022,00,15), end_date: new Date(2022,01,01) },
    { name: 'S3',  start_date: new Date(2022,01,01), end_date: new Date(2022,01,15) },
    { name: 'S4',  start_date: new Date(2022,01,15), end_date: new Date(2022,02,01) },
    { name: 'S5',  start_date: new Date(2022,02,01), end_date: new Date(2022,02,15) },
    { name: 'S6',  start_date: new Date(2022,02,15), end_date: new Date(2022,03,01) },
    ...
];

您需要将给定的sprint添加到单元中：

gantt.date.sprints_start = function(date) {
    return date;
};

function getSprint(date,type) {
    const tempDate = new Date(date);

    for (let i = 0; i < sprints.length; i++) {
        if (+tempDate >= +sprints[i].start_date && +tempDate < +sprints[i].end_date) {
            if (type == 'scaleUnit') {
                return sprints[i].end_date;
            }

            if (type == 'template') {
                return "<div class='sprint'>"+sprints[i].name+"</div>";
            }
        }
    }

    if (type == 'scaleUnit') {
        const newDate = gantt.date.add(date, 1,'day');

        return newDate;
    }

    if (type == 'template') {
        return gantt.date.date_to_str("%m-%d")(date);
    }
}

gantt.date.add_sprints = function(date, inc) {
    return getSprint(date, 'scaleUnit');
};

const sprintsTemplate = function(date) {
    return getSprint(date,'template');
}

并在比额表中增加一个新单位：

gantt.config.scales = [
    { unit: "year", step: 1, format: "%Y" },
    {
        unit: 'quarter',
        format: date => {
            return `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1 )}`
        }
    },
    { unit: 'month', step: 1, format: "%M" },
    { unit: 'sprints', step: 1, template: sprintsTemplate },
];

下面是一个例子：https://snippet.dhtmlx.com/0xznw5m9