💥 Problem of limiting the number of columns displayed in days - 800 days max approx.

[leCheveuCodeur]

First of all, thank you for this superb tool which introduced me to Svelte and which I've started to learn about.
I'm currently using this library in a PHP/Jquery 🙄 app and I run into a problem when I start displaying schedules in days over a period of about 800 days. I've found a maximum limit of minWidth = 32790.
Beyond 32790, everything fizzles.

Can you fix this?

[ANovokmet]

This is a memory issue when the canvas to render the columns is too large. I made columns render in a canvas to improve the performance because rendering just 1 element is faster than rendering thousands of them. Columns created using canvas can also be set to repeat, so to avoid the memory issue, with canvas you can create a small image containing eg. the first 4 columns, and then let the browser repeat them thousands of times. But this results in columns being misaligned with the headers if their width is not a rounded number. I did fix this issue a while ago but there has been a regression.

TLDR: You can try setting useCanvasColumns: false to make the columns render as DOM elements. This enables you to use CSS for styling but affects the performance.

Still, in some cases there are issues:

• Gantt currently does not work well with daylight savings, eg. when columns are 2h wide, and headers are 1d, the leap day Mar. 27, 2022 will have a header width of 23h, but the columns below will be 12x2h = 24h wide resulting in misalignment. (I have just realized this).
• User experience might be degraded when scrolling such large views. Scrolling an element over 30000 pixels wide. I suggest you limit the timeline somehow, eg. to 1 year or the start-end of the relevant data.
• The performance might be subpar, although I have not experienced this on the demo page.

The default is useCanvasColumns: true and this makes the performance better, but you need to use columnStrokeColor and columnStrokeWidth to change the appearance. But this greatly reduces the number of elements rendered. I tested with 2-hour columns with a timeline of 3 years which is over 13000 elements.

[leCheveuCodeur]

Thanks for the feedback ANovokmet!

The default is useCanvasColumns: true and this makes the performance better, but you need to use columnStrokeColor and columnStrokeWidth to change the appearance. But this greatly reduces the number of elements rendered. I tested with 2-hour columns with a timeline of 3 years which is over 13000 elements.

That's the problem I'm having, I'm obliged to use CSS which means I can't use useCanvasColumns:true 😢 The trick is that here I need to display a gantt on days only without the need for precise times over a potentially long period.