avh4/burndown-charts - version: 1.0.0

for more information visit the package's GitHub page

Package contains the following modules:

Build Status Latest Elm package version

This is an Elm package that makes it easy to create burndown charts. It is built on top of terezka/line-charts -- thanks, terezka!

Step by step

You'll need the following dependencies added to your Elm project (elm/time is needed to specify Month values):

elm install avh4/burndown-charts
elm install elm/time

To create your burndown chart, you'll need the following info about your project:

Code example: Today is April 9th, the project is starting with 8 points in the backlog, and there is a target release date of May 14th.

import BurndownChart
import Time exposing (Month(..))

main : Html msg
main =
    BurndownChart.view
        { name = "100 Year Starship"
        , color = Nothing
        , startDate = (2019, Apr, 9)
        , baseline =
            ( (2019, Apr, 9)
            , BurndownChart.targetDate (2019, May, 14)
            )
        , milestones = []
        , pointsRemaining = [ 8 ]
        }

image of the resulting burndown chart for the project setup code example

Updating the chart

At the start of each day, append the current number of points remaining to the pointsRemaining list.

Code example: On the second day of the project there were still 8 points remaining; during that day one point was accepted, so the following day started with 7 points remaining.

    BurndownChart.view
        { ...
        , pointsRemaining = [ 8, 8, 7 ]
        }

image of the resulting burndown chart for the "update the chart" code example

Milestones (optional)

You can have your chart show intermediate milestones by listing them in the milestones field. Each milestone is a tuple containing:

Code example: Two intermediate milestones are now being tracked. (It's also now April 24th and pointsRemaining has also been updated.) The "🐣" milestone was accepted on April 22nd, and the "🕺" milestone is not yet complete.

    BurndownChart.view
        { ...
        , milestones =
            [ ( "🐣", 6, Just ( 2019, Apr, 22 ) )
            , ( "🕺", 3, Nothing )
            ]
        }

image of the resulting burndown chart for the "milestones" code example