Gantt render issue

Extarlife

Can anyone advise why when I follow your basic guide the frontend render looks like the attached image please? I have tried altering the CSS but it makes no difference. Everything renders to the left. ![https://ibb.co/RB9YQrn]
Component code below:

import { Gantt } from "wx-react-gantt";
import React from "react";
import { Willow } from "wx-react-gantt"; //import theme

const GanttChart = () => {
    const tasks = [
        {
            id: 20,
            text: "New Task",
            start: new Date(2024, 5, 11),
            end: new Date(2024, 6, 12),
            duration: 1,
            progress: 2,
            type: "task",
            lazy: false,
        },
        {
            id: 47,
            text: "[1] Master project",
            start: new Date(2024, 5, 12),
            end: new Date(2024, 7, 12),
            duration: 8,
            progress: 0,
            parent: 0,
            type: "summary",
        },
        {
            id: 22,
            text: "Task",
            start: new Date(2024, 7, 11),
            end: new Date(2024, 8, 12),
            duration: 8,
            progress: 0,
            parent: 47,
            type: "task",
        },
        {
            id: 21,
            text: "New Task 2",
            start: new Date(2024, 7, 10),
            end: new Date(2024, 8, 12),
            duration: 3,
            progress: 0,
            type: "task",
            lazy: false,
        },
    ];

    const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d" },
    ];

    return (
        <Willow>
            <Gantt
                tasks={tasks}
                scales={scales}
            />
        </Willow>
    );
};

export default GanttChart;

ohzak

got the very same issue here

Extarlife

The only way I've found of getting it to display correctly is adding this to my component import 'wx-react-gantt/dist/gantt.css'; but this isn't mentioned in the guide it also results in missing icons ![https://ibb.co/6bQHD0R]

ohzak

yes, i already got to that conclusion but that doesn't seem to resolve all the problems, it just visualizes the dates better but the scales and the "ctrl" zoom are not working, and all the component is working in an odd way, i am afraid that this is not the solution but just an incomplete workaround

Extarlife

I agree none of the demo functionality is there.

ohzak

what i suppose is that in demo they talk about a 1.2.0 version, the only npm package which is available is 1.3.0, which at this point i suppose its bugged , but no chance to understand that if nobody from the development team joins this thread

OlivierStephan

I had to add the import 'wx-react-gantt/dist/gantt.css';
And I managed to fix the icon issue by using the font : https://cdn.svar.dev/fonts/wxi/wx-icons.woff?fc1b2d7508950924525ef10fc6e3c327

@font-face { font-family: 'wx-icons'; src: url('./fonts/wx-icons.woff') format('woff'); }

ohzak

we noticed that you can fix fonts and icons Olivier, but there are a lot of "functionalities" that seems to not work correctly

Extarlife

Even if we have the icons as ohzak mentioned, there is missing functionalities, right clicking does nothing. Doesn't appear to do anything on the Demo on the website either, even though it's in their usage guide.

Also the actual setup guide only advises that you need this import { Gantt } from "wx-svelte-gantt"; and nothing else to be able to 'visually' use the gantt.

ohzak

it seems that dev team is not available

mirik999

The same thing. Documentation written in parallel world where it works =) Not in our world. Team ignores this thread because they focused on svelt only. And the repo is not open sourced at least someone can contribute. Sad.

Extarlife

For a newly released product I would have expected a response from the dev team. Especially since nothing works.

Extarlife

I've posted an issue on the github see if we can get a reply there: https://github.com/svar-widgets/gantt

OlgaT

Hi, guys, our development team is currently very busy with migration of SVAR Svelte components to Svelte 5. Once this process is completed (hopefully by the end of this month), we're planning to get back to the React version. We truly apologize for this inconvenience, and we are committed to fix the docs and all the issues with SVAR React components as soon as possible.

Marta

Here is the working sandbox for the React + Gantt

https://codesandbox.io/p/sandbox/react-18-svar-gant-1-3-0-r3h9r2

Important notice: sandbox uses React 18, changes in react-dom@19 are not backward compatible, so previously published version will not work with it

The initialization requires to include both js and css files

import { Willow, Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

as for icons, it was expected that they would be part of the above css, but due to code post-processing it was broken in current version and requires a separate css link/import ( it will be fixed in the next update )

<link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />

Marta

The related guide in the documentation was updated, I need to say that first version of documentation was ported from Svelte version ( while each version has its own implementation, they share the same API/property/events ) and as result some important moments were omitted.
It was fast but dirty solution, and we are in the process of replacing it with one written for react from scratch.