Inspiration
When browsing through the Inspiration tab, I noticed that someone really wanted a burndown chart, so I set out to create one for them. After looking at the existing apps on monday.com, I did not see anything that was able to visualize a chart of a board's items and their statuses through time. So, that made me think that this would be a worthwhile app to make.
What it does
This app takes the board's user created items and graphs them on a line chart. When an item is created, the number of remaining items to complete increases. When an item's status transitions to the "Done" status, the number of remaining items to complete decreases. The graph supports a variety of customizations including line color, stroke width, start and end dates of the items, status column, item weight column, and completion statuses. When your mouse hovers over the chart, it displays a helpful tooltip on which item caused the change in the remaining items and the item's status at that moment in time. Additionally, the burndown chart respects the user and item filters at the top of the board view.
How I built it
I used React in order to build this. I utilized the recharts library in order to handle graphing the data and I used the monday.com v2 api in order to fetch the necessary information about the board and its items.
Challenges I ran into
Originally, I wanted to make a burndown chart for an individual group of items. However, the api did not make it easy to get all the items in a group and the group specific activity logs. So, I had to settle for the chart of the whole board. Also, I had to learn more about the monday.com api and understand how people use the website, since I do not normally use monday.com. Also, I don't think that there is a built in idea of a "sprint" so I had to improvise. Usually a burndown chart starts at a particular time and ends at a particular time, but I did not find anything that fit my needs and did not require the user to add a custom field on their items.
After I made the app public, I asked some people for feedback and they were able to point me in the path to make the chart more usable for users. Previously, the only customizable options were the line color and stroke width. But after the feedback and more thought, I realized that one of the best parts about monday.com is how customizable it can be. This led me to make sure that the user could select different columns and options for the burndown chart.
Accomplishments that I'm proud of
I'm proud that I was able to build a burndown chart with React and learn more about how GraphQL works.
Log in or sign up for Devpost to join the conversation.