Allow variable precision on the Gantt graph #3759

jackymancs4 · 2023-10-04T08:27:53Z

jackymancs4 commented

2023-10-04 08:27:53 +00:00

Hello,
this one may require some discussion to get ready.

When the number of days displayed is below 5 (arbitrary value), it enables the hour precision mode of the Gantt plugin. This allow precise organization of the work day.

One side effect of the PR is that it enable minute-level dragging precision on all views of the Gantt, removing the snapping effect even when viewing months long charts.

Tech notes

:chart-start and :chart-end both allow using native dates object. I'd like to use those instead of the string conversion also removing :date-format.

I would like to consolidate the Kebab related function in single file, and export what's needed from there.

Docs

https://zunnzunn.github.io/vue-ganttastic/examples.html#simple-hour-chart

Hello, this one may require some discussion to get ready. When the number of days displayed is below 5 (arbitrary value), it enables the hour precision mode of the Gantt plugin. This allow precise organization of the work day. One side effect of the PR is that it enable minute-level dragging precision on all views of the Gantt, removing the snapping effect even when viewing months long charts. ## Tech notes `:chart-start` and `:chart-end` both allow using native dates object. I'd like to use those instead of the string conversion also removing `:date-format`. I would like to consolidate the Kebab related function in single file, and export what's needed from there. ## Docs https://zunnzunn.github.io/vue-ganttastic/examples.html#simple-hour-chart

jackymancs4 added 1 commit 2023-10-04 08:27:55 +00:00

continuous-integration/drone/pr Build is failing Details

9b912af873 Initial work

jackymancs4 added 1 commit 2023-10-04 14:56:17 +00:00

continuous-integration/drone/pr Build is failing Details

c59e34f4bf Merge branch 'main' into feature/precision-gantt

konrad commented

2023-10-04 16:17:33 +00:00

When the number of days displayed is below 5 (arbitrary value), it enables the hour precision mode of the Gantt plugin. This allow precise organization of the work day.

With the old chart, we had a switch for that. I like your solution better.

> When the number of days displayed is below 5 (arbitrary value), it enables the hour precision mode of the Gantt plugin. This allow precise organization of the work day. With the old chart, we had a switch for that. I like your solution better.

konrad commented

2023-10-04 16:22:53 +00:00

I'm not entirely sure why we're using string dates instead of date objects. IIRC the library only supported strings back when we added it. I'm all for using date objects.

konrad commented

2023-10-04 16:25:20 +00:00

One side effect of the PR is that it enable minute-level dragging precision on all views of the Gantt, removing the snapping effect even when viewing months long charts.

Do you have an idea on why that might be? We should keep the current behaviour. Maybe this could be made depending on the mode?

> One side effect of the PR is that it enable minute-level dragging precision on all views of the Gantt, removing the snapping effect even when viewing months long charts. Do you have an idea on why that might be? We should keep the current behaviour. Maybe this could be made depending on the mode?

jackymancs4 commented

2023-10-04 17:34:10 +00:00

With the old chart, we had a switch for that. I like your solution better.

Great!

I'm all for using date objects.

Will do.

Do you have an idea on why that might be?

I do. The snapping behavior was not a feature of the plugin, but a by product of those two lines:
c2005c6c71/src/components/tasks/GanttChart.vue (L148-L149)

and the capping behavior of isoToKebabDate
If those two lines are restored, I cannot drag bars with sub-day precision even in hour mode.

We should keep the current behaviour.

You sure? I don't dislike the new behaviour.

Maybe this could be made depending on the mode?

Can be. The current problem in my tests:

I set the start date to 04/10/2023 00:15
I drag a bar in day mode by one day
My choosen start date is set to 05/10/2023 00:00 (loosing my time value)

I think that the snappy behaviour is inherently incompatible with a minute-level precision.

> With the old chart, we had a switch for that. I like your solution better. Great! > I'm all for using date objects. Will do. > Do you have an idea on why that might be? I do. The snapping behavior was not a feature of the plugin, but a by product of those two lines: https://kolaente.dev/vikunja/frontend/src/commit/c2005c6c71216da9922ba316d98a7336a41e5285/src/components/tasks/GanttChart.vue#L148-L149 and the capping behavior of `isoToKebabDate` If those two lines are restored, I cannot drag bars with sub-day precision even in hour mode. > We should keep the current behaviour. You sure? I don't dislike the new behaviour. > Maybe this could be made depending on the mode? Can be. The current problem in my tests: 1. I set the start date to 04/10/2023 00:15 2. I drag a bar in day mode by one day 3. My choosen start date is set to 05/10/2023 00:00 (loosing my time value) I think that the snappy behaviour is inherently incompatible with a minute-level precision.

jackymancs4 commented

2023-10-04 17:35:16 +00:00

I may have found a solution based on 24H offsets when in day mode, but le me know if we can get away without it.

jackymancs4 added 1 commit 2023-10-04 18:30:44 +00:00

continuous-integration/drone/pr Build is passing Details

ffa6ce1714 Remove date-to-string handling

Restored snappy behavior on day precision mode

jackymancs4 changed title from ~~WIP: Allow variable precision on the Gantt graph~~ to Allow variable precision on the Gantt graph

2023-10-04 18:32:35 +00:00

frederick commented

2023-10-04 18:37:07 +00:00

Hi jackymancs4!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://3759-feature-precision-gantt--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi jackymancs4! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://3759-feature-precision-gantt--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.

konrad commented

2023-10-05 07:35:28 +00:00

You sure? I don't dislike the new behaviour.

The problem is the precision: When dragging without snapping, the tasks will grow in size as they are rounded to the next day. This could be a bug in the library but it's something we need to work with.

I think we should keep the day-level precision when all you can see are days and do something like 15 minute or hourly interval precision when you can see more. It will not be detailed enough anyway to reliably set minutes by dragging the task.

> You sure? I don't dislike the new behaviour. The problem is the precision: When dragging without snapping, the tasks will grow in size as they are rounded to the next day. This could be a bug in the library but it's something we need to work with. I think we should keep the day-level precision when all you can see are days and do something like 15 minute or hourly interval precision when you can see more. It will not be detailed enough anyway to reliably set minutes by dragging the task.

jackymancs4 commented

2023-10-05 09:09:35 +00:00

My last commit restore the snappy behavior on day precision mode. I'm fairly happy with the result. It's ready for review.

jackymancs4 added 1 commit 2023-10-05 09:15:09 +00:00

continuous-integration/drone/pr Build is passing Details

16eef6ddf3 Merge branch 'main' into feature/precision-gantt

konrad commented

2023-10-05 13:08:01 +00:00

Awesome, I'll check it out next week when I'm at my computer again.

👍 1

konrad reviewed 2023-10-10 16:27:39 +00:00

src/components/tasks/GanttChart.vue

						
				@ -146,0 +154,4 @@

					const startDate: Date = new Date(e.bar.startDate)

					const endDate: Date = new Date(e.bar.endDate)

					if(task && ganttChartPrecision.value == 'day') {

konrad commented

2023-10-10 16:26:37 +00:00

Can we make 'day' a const? And please use strict comparison.

Can we make `'day'` a `const`? And please use strict comparison.

konrad commented

2023-10-10 16:28:54 +00:00

Looks like the snappiness is not present anymore.

jackymancs4 commented

2023-10-10 19:57:01 +00:00

Looks like the snappiness is not present anymore.

I just tryied it on https://3759-feature-precision-gantt--vikunja-frontend-preview.netlify.app and dragging a bar snaps it to the closest day column.

> Looks like the snappiness is not present anymore. I just tryied it on https://3759-feature-precision-gantt--vikunja-frontend-preview.netlify.app and dragging a bar snaps it to the closest day column.

konrad commented

2023-10-11 07:14:46 +00:00

Doesn't seem to work for me:

Doesn't seem to work for me: <video src="/attachments/d419e612-1654-4602-ae9c-91c7afcb8ef4" title="vikunja-gantt-snap-2023-10-11_09.13.00.webm" controls></video>

vikunja-gantt-snap-2023-10-11_09.13.00.webm

2.6 MiB

jackymancs4 commented

2023-10-11 08:59:20 +00:00

Can you describe what behavior do you expect?
What you screencasted is pretty much my definition of snapping.

Can you describe what behavior do you expect? What you screencasted is pretty much my definition of snapping.

konrad commented

2023-10-11 09:02:54 +00:00

Here's what I expected (current behaviour on try):

Here's what I expected (current behaviour on try): <video src="/attachments/398c70c3-7338-4098-b593-74610660ad8a" title="vikunja-gantt-snap-try-2023-10-11_11.02.06.webm" controls></video>

vikunja-gantt-snap-try-2023-10-11_11.02.06.webm

2.4 MiB

jackymancs4 commented

2023-10-11 09:29:28 +00:00

So snapping on drag instead of on release is a requirement for the PR?

Or are you referring to the potential enlargement of the bar when dragging it whole?

So snapping on drag instead of on release is a requirement for the PR? Or are you referring to the potential enlargement of the bar when dragging it whole?

konrad commented

2023-10-11 10:30:41 +00:00

Both actually, it should keep the same behaviour as we have currently wrt snapping and not enlarge the task.