How do implement gantt-elastic as vue component in Nuxt.js? about gantt-elastic

[neuronetio]

I need to make some changes, but it can be done

[neuronetio]

there are some references to document in the code,
document is referenced because of font that should be inherited
the font must be consistent with the system in which it is used
font is important because the calendar above the chart measures the width of text and on this basis calculates how many days/hours will fit in a given zoom level
it's graphically calculated by the html5 canvas
If you want the gantt rendering to be done entirely on the server side, you need to find a universal way to measure the width of the text at the given font

[neuronetio]

how we can overcome this easily?

[neuronetio]

there are some "web safe fonts" that are used everywhere
so we can make (cache) some calculations and save it for server side rendering
gantt will show up, it will be acceptable (can be rendered as image only from the server - pdf also, or just html), but when the front-end app will mount (and css with it) - gantt will behave as it behave now - it will calculate everything without big lag

[neuronetio]

in php there is a font lib that can calculate all the measurements we need (width/height) from TTF font.
I don't know if there is something similar in plain JS/WASM
maybe if we know what font will be loaded on the page - we could download it and present gantt ideally

[neuronetio]

just add js on the front end and let it happened it's not so much :)
one component could be loaded just in front-end :)