Gantt display wrong

Very interesting, here’s what that looks like for me:

Everything seems to work fine for me. There was a bug with the display when setting the schedule to “monthly” though.

When I set the task start date to january 1st and the end date to january 15th, I did notice an issue with it:

But nothing like how you were able to reproduce it.

What browser are you using? What version?

What is the locale (and time zone) set to on your pc?

Chrome Version 96.0.4664.45 (Official Build) (64-bit)

Majaro Linux 5.15.12-1-MANJARO #1 SMP PREEMPT Wed Dec 29 18:08:07 UTC 2021 x86_64 GNU/Linux

LANG=en_US.UTF-8
LC_CTYPE=en_US.UTF-8
LC_NUMERIC=en_US.UTF-8
LC_TIME=en_US.UTF-8
LC_COLLATE=“en_US.UTF-8”
LC_MONETARY=en_US.UTF-8
LC_MESSAGES=“en_US.UTF-8”
LC_PAPER=en_US.UTF-8
LC_NAME=en_US.UTF-8
LC_ADDRESS=en_US.UTF-8
LC_TELEPHONE=en_US.UTF-8
LC_MEASUREMENT=en_US.UTF-8
LC_IDENTIFICATION=en_US.UTF-8
LC_ALL=

Local time: Wed 2022-01-12 14:46:46 EST
Universal time: Wed 2022-01-12 19:46:46 UTC
RTC time: Wed 2022-01-12 19:46:46
Time zone: America/New_York (EST, -0500)
System clock synchronized: yes
NTP service: active
RTC in local TZ: no

Oh interesting… I was collecting screens for a few browsers across OSs and I found the same issue on both:

Chrome Version 96.0.4664.45 (Official Build) (64-bit) Majaro Linux KDE
Chrome Version 97.0.4692.71 (Official Build) (x86_64) macOS Monterey Version 12.1

Then I moved to:

Firefox 95.0.2 (64-bit) Majaro Linux KDE

And the problem does not occur…

It seems like a chrome specific bug, which would explain why the standalone electron app has the same issue.

UPDATE:
Threw the vikunja frontend on one of my local servers and fronted it with caddy and set it to use my locally running backend. Confmed that the gantt chart error shows up in Chrome but not in Firefox. If you need any more data or testing, let me know, but at least this provides an option.

Further updating this… I tested this on two different Windows 10 laptops running Firefox and they have the same issue as Chrome so I only have this working in Firefox on Linux.

Just to clarify these are the steps used to reproduce:

  1. Create a new task
  2. Set the start date to 2021-12-01
  3. Set the end date to 2021-12-15
  4. Open the gantt view
  5. Set the gantt dates in the chart from 2021-12-01 to 2021-12-31

I’ve tried to reproduce this using these steps in Chrome and Firefox on browserstack but it seems to work fine (other than the white bar at the right):

I’ve been looking into replacing / refactoring the gantt chart component in general but I won’t have time in the near future to do that. I think this will be the best way to fix these problems.

This matches my experience of Firefox on Linux (nixos).

I’m also having a similar issue with this.

  • Using Windows 11
  • Firefox 97.0.1
  • Vikunja being hosted on Raspberry Pi 4 8GB, via Docker.

My months display as one month behind, from 12 months prior:

Please let me know how I can be of any assistance to fix this.

Is there any work/detail I can provide to help with identifying and correcting the behavior we’re experiencing?

Right now I’m not sure. Biggest problem for me is I can’t reproduce it. So if you can reliably reproduce it and feel comfortable with debugging it on the code level I’d appreciate if you did. But that’s a big ask…

Would it be helpful for you to have access to an instance where the issue exists? I do not mind granting access and compensating you for your efforts toward this.

I also found a new issue after testing yesterday:

If I slide the task in the gantt view, OR open it, then save it - the date is actually changed by -1 that I set. I realize that was a bit rough to understand. I’ll try to state the workflow more clearly:

  1. Create a List
  2. Create a Task “A”
  3. Go to Gantt view and Select “Show tasks which don’t have dates set”
  4. Move Task “A” to set an arbitrary date range May 31 - July 4th
  5. Reselect LIST view.
  6. Reselect Gantt view
  7. Witness Task “A” is now date ranged May 30 - July 3rd

In Microsoft Edge, I’ve noticed the dat display doesn’t appear to be wrong as it is on Firefox. BUT, the date change issue is also persistent there.

If that works for you, yes, I’d love to. At least that would help me verifying whether the problem is related to a browser / os problem or something else.

I can’t exactly reproduce what you describe but it does not really work as I intended it.

Please let me know the best method to interact with you directly/off-site so we can coordinate your efforts. I am happy that if we can resolve the problem it will have a great benefit to the community too.

Thank you!

Let me know how I should best get in-touch with you to get you credentialed for my server.

:slight_smile:

Hi sorry for the late reply, either a pm here or via email at konrad@vikunja.io should work.

I’ve sent you one or two emails. Here is the last email I’d sent regarding this issue:

Interestingly …

The Gantt chard display issue does NOT exist when using the Chromium Browser – and probably Chrome by association.

Interesting. I just checked with Chromium 103.0.5060.114 and everything worked fine, same as in Firefox.

I’ve started replacing and completely rebuilding the current gantt chart implementation in #2180 - feat: replace our home-grown gantt implementation with ganttastic - frontend - Gitea. Can you check with the preview-instance in that PR if the problem is still present?

Everything appears to be working and BETTER in the preview-instance.

A lot of the bug/artifacts that were present on the current release appear to be 100% gone in the preview.

Fantastic work!

1 Like

I am not well versed in this -

How can I build and deploy this preview onto my server? I’ve never build a Docker Image and feel a bit out of my element.

That’s kind of straightforward.

  1. Check out the repo: git clone https://kolaente.dev/vikunja/frontend.git
  2. Change into the directory you just cloned: cd frontend
  3. Check out the branch of the PR: git checkout feature/ganttastic
  4. Build the container: docker build . -t vikunja-frontend-with-new-gantt-chart
  5. The -t parameter sets the tag name which you can then use to reference the image in e.g. docker-compose configs. Just swap vikunja/frontend with vikunja-frontend-with-new-gantt-chart restart the stack and you should be good to go.

We’re off to the races!

I initially tried building on Windows but kept hitting an error - after moving over to my Mackbook Pro, I had no issue with building.

I ended up building the source for the frontend with yarn, and loading the dist/ files onto our server.

Thanks for your time and efforts!

2 Likes