Javascript Svelte 甘特图 按月分开

TL;DR: Svelte Gantt Year + Months example

(注意:在REPL中，苗条的甘特图行为有点挑剔，您可能需要调整渲染面板的宽度以显示默认的10行/任务).

Important Update

我注意到月份的列标题中有一个问题，1月和5月被重复，2月被跳过，最终从5月开始有一个月的偏移(导致12月也消失).这是因为svelte gantt在内部处理月份持续时间的方式:所有月份都设置为30天(！！).你可以在118行看到这个in this source file.作者甚至 comments 说这是不正确的...

知道了这一点，你可能想重新考虑使用这个模块来准确地表示年度/月度甘特图，除非你自己完成项目并正确处理可变的月持续时间！

How I got there

我以svelte-gantt large dataset demo源代码为起点，删除了GanttOptions导入和组件(与这个问题无关).留给我的是一个甘特图，用于一天、每小时的列和生成的svelte-gantt large dataset demo行&；任务(我缩短到10项).其中的关键信息显然是作为props传递给SvelteGantt构造函数的options对象:

let options = {
    dateAdapter: new MomentSvelteGanttDateAdapter(moment),
    rows: data.rows,
    tasks: data.tasks,
    timeRanges,
    columnOffset: 15,
    magnetOffset: 15,
    rowHeight: 52,
    rowPadding: 6,
    headers: [{ unit: 'day', format: 'MMMM Do' }, { unit: 'hour', format: 'H:mm' }],
    fitWidth: true,
    minWidth: 800,
    from: currentStart,
    to: currentEnd,
    tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }],
    tableWidth: 240,
    ganttTableModules: [SvelteGanttTable]
}

从包含小时列的单日图表到包含月列的单年图表所需的更改非常简单.

我删除了timeRanges选项(该选项用于在每日图表中设置午餐和晚餐时间范围，但在年度图表中不再有用——尽管您希望在银行假期或暑假期间再次使用它们)，以及相关数据.

然后我添加了columnUnit选项，将其设置为'month'，并更改了columnOffset选项，将其设置为1，以便每个月有一列.

最后，我调整了headers选项，在顶行显示年份，在第二行(列标题)显示缩写月份:headers: [{ unit: 'year', format: 'YYYY' }, { unit: 'month', format: 'MMM' }].

最后一个修改过的options对象:

let options = {
    dateAdapter: new MomentSvelteGanttDateAdapter(moment),
    rows: data.rows,
    tasks: data.tasks,
    columnUnit: 'month',
    columnOffset: 1,
    magnetOffset: 15,
    rowHeight: 52,
    rowPadding: 6,
    headers: [{ unit: 'year', format: 'YYYY' }, { unit: 'month', format: 'MMM' }],
    fitWidth: true,
    minWidth: 800,
    from: currentStart,
    to: currentEnd,
    tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }],
    tableWidth: 240,
    ganttTableModules: [SvelteGanttTable]
}

然后，我修改了currentStart和currentEnd值，将它们分别设置为当前年份的开始和结束，以反映图表的新范围(一整年):

const currentStart = moment().clone().startOf('year');
const currentEnd = moment().clone().endOf('year');

最后，我必须修改任务生成过程，以便随机生成对图表的新规模/范围足够有意义的任务:

// start of task (random day (1-20) + month (1-12))
const rand_d = (Math.random() * 20) | 0 + 1
const rand_m = (Math.random() * 12) | 0 + 1
const from = moment(`${rand_d} ${rand_m}`, 'D M')
// duration of task (random, 5 to 60 days)
const rand_l = (Math.random() * 55) | 0 + 5
const to = from.clone().add(rand_l, 'days')
tasks.push({
    type: 'task',
    id: ids[i],
    resourceId: i,
    label: 'Task #' + ids[i],
    from,
    to,
    classes: colors[(Math.random() * colors.length) | 0],
    generation
});

作为最后的清理，因为现在我不再使用time()实用程序函数，而是完全依赖moment，所以我还删除了import { time } from '../utils';语句.