O'Reilly logo

Mastering Angular Components by Gion Kunz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The visual efforts timeline

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required