Elm example for rendering a small gantt chart
2020-04-02
I wrote an answer on stackoverflow about rendering a gantt chart in elm, which positions tasks inside a calendar-like grid, so one can easily see if a task can only be started if all tasks that it depends on were done.
I started with this simple data structure:
type alias Task =
{ id : TaskId
, dependsOn : List TaskId
, color : Color
}
In order to render it, it will be transformed into a list of DrawableTask
. Each drawable task contains the information, where in the grid it will be rendered.
For simplicity, I decided that each task has a length of one, but adding a length field will not be hard.
type alias DrawableTask =
{ id : TaskId, col : Int, row : Int, color : Color }
In the end, it looks like this:
In case the iframe does not load open it directly.
read more