Although the components that we have created so far to manage efforts provide a good way to edit and display effort and time durations, we can still improve this with some visual indication.
In this section, we will create a visual efforts timeline using SVG. This timeline should display the following information:
- The total estimated duration as a grey background bar
- The total effective duration as a green bar that overlays on the total estimated duration bar
- A yellow bar that shows any overtime (if the effective duration is greater than the estimated duration)
The following two figures illustrate the different visual states of our efforts timeline component:
The visual state if the estimated duration is greater ...
