Ws-timeline : timeline widget

Hello.

Here is a new timeline widget.
https://docs.getgrist.com/5XpkniZsFLpj/Securite-2024?utm_id=share-doc
You’ll need to make a copy to fully test it (with editing rights).

Features :

  • fast and smooth scroll and zoom
  • can manage and show thousands of tasks
  • multi-selection editing (on configured columns)
  • french language only but I will translate it soon. Sorry :slight_smile:
  • No buttons. You need to learn a few shortcuts to use it.

Manual :
Selection

  • Shift + Click on existing tasks: multi-selection
  • Click & drag: multi-selection lasso
  • Shift + click & drag: add to current multi-selection
  • Click on line name: select entire line

Scrolling and zooming

  • Wheel (mouse) | 2 fingers horizontal (Trackpad): vertical scrolling
  • Shift + Wheel (mouse) | 2 fingers vertical (Trackpad): horizontal scrolling
  • Alt + Wheel | Alt + 2 fingers: horizontal zoom
  • Alt + Wheel | Alt + 2 fingers - in left column: vertical zoom
  • z (without selection): horizontal zoom to display all tasks
  • z (with selection): horizontal zoom on selected tasks
  • n: scroll to current date and time

Creation / modification

  • Alt + Click & drag: task creation
  • Alt + Click & drag on an existing task: duplicate a task at another date
  • d: duplicate selected tasks
  • t: cut selected tasks at blue cursor position
14 Likes

This is amazing. Well done and thanks for sharing! :smiley:

1 Like

Frigging awesome!

Except for being in French. Why not in Latin, just to piss off Asterix? :wink:

(j/k, it’s just that I can´t forget 1998 and 2006)

1 Like

Ah ah don’t worry, the Shakespeare language version is coming! :soccer:

You can keep it in Romance Languages, no problem. :slight_smile:

do you plan on extending this for a Gantt?

as a suggestion… when selecting a row, the elements of the row get darker indicating the row is selected… but the row itself… the background and the leftmost column, don´t change in color. If the row has few elements, its difficult to see which row was selected.

It is already possible to get a Gantt view by sorting data by start date and grouping by a column with unique values. To do this, you can use a formula column that concatenates a title column with the row id: $title + str($id).

I created a new page on the demo with a Gantt view.

Thank you, I like this idea !

Thanks for the response! I appreciate the suggestion about sorting data by start date and grouping by a unique column to create a makeshift Gantt view. However, I think a true Gantt tool would require a bit more to capture its full potential.

Using the timeline for a Gantt feels like a workaround rather than a complete solution. Here are some core features in a Gantt tool that I don’t think a timeline tool can fully replicate without significant customization:

  1. Tasks and Subtasks:
  • In a Gantt chart, you can group tasks hierarchically. For example, a “main task” or project might encompass several subtasks. The duration of the main task automatically adjusts to match the earliest start date and the latest end date of its subtasks.
  1. Dependencies:
  • One of the most critical aspects of a Gantt chart is the ability to define dependencies between tasks. For instance:
    • Task B can’t start until Task A finishes (finish-to-start dependency).
    • If you adjust the start date or duration of Task A, Task B automatically shifts to maintain the dependency.
  1. Dynamic Updates:
  • A Gantt tool allows dynamic rescheduling. Changes to one task ripple through dependent tasks, making project adjustments more efficient.
  1. Critical Path Visualization:
  • Gantt tools often highlight the critical path — the sequence of tasks that determine the shortest completion time for the project. This helps prioritize tasks that must be completed on time to avoid delays.
  1. Resource Allocation:
  • Some Gantt tools integrate resource management, showing which resources (e.g., people, equipment) are assigned to each task and helping to avoid overbooking.
  1. Progress Tracking:
  • Gantt charts typically include a way to track task progress (e.g., percent complete). This allows you to visually monitor what’s done, what’s in progress, and what’s behind schedule.

Some popular JavaScript libraries for Gantt functionality include DHTMLX Gantt or AnyChart Gantt.

I agree that my solution is a workaround but we are not so far from the truth. Some of the features needed can be already implemented at the database level : dependencies, dynamic updates and resources allocation and progress tracking. However the widget needs an small update to show graphically dependencies and progress (you can already have text content in the bar). I’ll work on it.

Tasks and subtasks need a deeper update.

I don’t need real Gantt charts so it’s not a priority for me but I’m open to discussion and contributions. I use this widget to organise a music festival where everything happens at the same time. Gantt representation is not good for that. I have many databases for security, HR, logistics…

I know. I was interested in pursuing making a Gantt Chart based on a library. Maybe I will give a try.

CAn I analyze your Timeline code to understand some of it?

Yes you can ! My code is open source (but the timeline code is written in Elm, a functional language compiled to js).

Here is an sample base with a sort of Gantt chart with resource allocation and resource view, progress and dynamic updates.
https://docs.getgrist.com/nJVHvc2Ysobf/Untitled-document?utm_id=share-doc

This is so great ! Thanks for making this :slight_smile: you are going to make a lot of grist users very happy in the french administration !

3 Likes