A no database web page that renders charts to visualize data a scrum master would care about. It does this by loading 3 json files into the browser via ajax request.
This project started as a single html page with links to images that I generated in excel. At the time I was reading
Data Visualization with JavaScript by Stephen A. Thomas and dedcided to start filling out JSON file and have the javascript figure out the charts. I still use excel to generate a backlog and data that I transfer to json files in the web server's teams/ folder manually.
I am currently using this to track team stats at work, a practice project so I can stay current in javascript development, and to est best practice in Scrum, DevOps, and Continuious Delivery.
The starter release file has a teams/ folder with sample data. Use that as a model for creating you own team data.
- Use the starter release
- Download a copy
- Uncompress the tar file in a utility of your choice
- Copy the files to a folder in a web server
- Use your browser to naigate that location
The update release file doesn't have a teams/ folder with sample data.
- Use the update release
- Download a copy
- Uncompress the tar file in a utility of your choice
- Copy and overwrite the files to a folder in a web server
Remember copy the contents of the uncompressed folder. Don't copy over the folder or you will overwrite the teams/ inside and delete your data.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
You need to be comfortable a text editor so you can edit the json files and markdown. You will also need to be comfortable with path and file management. The project depends on files being located in the predictable way so the webpage knows were to look for the files. Also for the note feature in the project it will help if you know markdown but you can get by with out it.
To contribute to the project you will node.js installed. You will need to how to write unit tests and write in ES6.
A step by step series of examples that tell you have to get a development env running
Clone the project
cd my/projects
git clone https://github.com/chrismarksus/ScrumChartBoard.git
Download dependencies
npm install && bower install
To run dev
gulp serve
A browser will launch and if it is the first time you will see the no data page. This has a link to the sample data at the end. If you have set up the team folder correctly. Then you will just need to add two get parameter to the url to see your charts. the team and the project values. These will be the same as the name on the folder that storage the data.
http://localhost:9000?team=abc&project=sample
gulp serve:test
docker run -it --rm --name scrumchartboard -v $(pwd):/myproject -p 9000:9000 node bashIf you are using vagrant or docker on windows you my see a symlink error that prevents you from run the commands (Ex. gulp serve:test). This is because windows sucks! Try the fllowing when installing npm dependencies.
cd myproject
npm --no-bin-links i -g gulp bower
npm --no-bin-links iFor docker on window run the command below to find the localhost ip address
docker machine ipRight the coding style is a mess, the architecture and design are a mess, basically the project is a mess. So, yeah.
The dist command will create a folder name ./dist in the root directory. You can copy or ftp these files anywhere you want.
gulp serve:dist
If this is the first time using the project there is a folder that you will need to add to the you project folder and that is the teams folder.
dist or project root
scripts
styles
teams
template
favicon.ico
index.html
robots.txt
In the teams folder will be folders named after your scrum teams. Use web safe names like myTeamName or my_team_name. No spaces or weird characters.
Inside each of these folders will be one json file dashboard.json and a folder named /projects.
The dashboard.json contain the teams board information. This is not a file you will changing a lot.
{
"dashboardName": "Sample Dashboard",
"teamName": "Sample Team",
"updatedName": "Sample person",
"daysInInterval": 10
}
In the project folder there should be a folder with the name of your projects that that team is working or has worked on. Again use web safe names like myTeamName or my_team_name. No spaces or weird characters.
./projects
./myProject_1
./or_my_project_2
Inside each project folder will need to be at a minimum two json files. intervals.json and project.json.
The project.json contains the data for the non-team, non-interval (or sprint) data. The status, types of cards, the project timelines. The status and card types can have as many value as you want but it to have a number as a value.
The timelines are optional and you have as many as you want. Just add add more objects to array and follow the format below.
{
"project": {
"name": "Sample Project",
"cardTypeLabel": "VALUE LABEL HERE", // Optional defaults to 'points'
"cardTypes": {
// TYPE HERE
},
"cardStatusLabel": "VALUE LABEL HERE", // Optional defaults to 'points'
"cardStatus": {
// STATUS HERE
},
"timelines": [{
"title": "Timeline 1",
"timeline": [{
"label": "Theme group 1",
"status": "inprogress",
"days": 30,
"start": 0
},{
"label": "Theme group 2",
"status": "todo",
"days": 20,
"start": 30
}]
}]
}
}
The intervals.json contains the interval (or Sprint) relate data. The only values that are optional are review and notesInterval.
{
"intervals": [{
"label" : "Sprint 1",
"review" : "url/to/review",
"dateStart" : "10/12/2016",
"dateEnd" : "10/13/2016",
"teamMembersCount" : 5,
"satisfactionTeam" : [2, 5],
"satisfactionShareholders" : [9, 6],
"pointsCommited" : 10,
"pointsCompleted" : 10,
"pointsEstimated" : 50,
"cardsCommited" : 4,
"cardsCompleted" : 4,
"cardsEstimated" : 10,
"cardsUnestimated" : 4,
"cardsBlocked" : 2,
"daysTimebox" : [1],
"daysOutHolidays" : 1,
"daysOutPlanned" : [2],
"daysOutUnplanned" : [1],
"issuesPerInterval" : 1,
"notesInterval" : "url/to/md"
}]
}
(String) - The name or identifier for an interval. This can be what ever you what but it is meant to be a hunam readable value.
(String) - This is the date that the interval started. It can be in any format but mm/dd/yy or mm/dd/yyyy is that better format. Since this is used for the label on the charts.
(String) - This is the date that the interval ended. It can be in any format but mm/dd/yy or mm/dd/yyyy is that better format. Since this is used for the label on the charts.
(Number) - This is the number of people on the team during the interval. This is a repeatative value that doesn't change often but it a person is add or removed from the team you will want to track that in the capacity charts.
(Number) - This is like a happiness score but more specific. This is how satisfied the team is with the work they as a team and as individuals during the interval. This is a score from 1-10.
(Number) - This is like the team satisfaction score for the shareholders. How satisfaied are the shareholders with the work that the team did for the interval. Not are they pleased witht he results but with the teams effort. This is a score from 1-10.
(Number) - This is the total point completed during the sprint.
(Number) - This is the total point that the team commited to during the sprint.
(Number) - This is the total estimated points for the whole project at this interval. This is used for the scope line in the burnup chart.
(Number) - This is total cards completed during the sprint.
(Number) - This is the total cards that the team commited to during the sprint.
(Number) - This is the total number of cards that have an estimate.
(Number) - This is total number of cards that do not have an estimate.
(Number) - This is an open metric an can be used for the number a things that block a cards on the board. But if it stops a card for some reason then you should count it here and add a note to your interval notes.
(Number) - Like the cardsBlocked value this is open for interpretation. Any issue the team has should be counted and a note add to the iterval notes.
(Array) - This is the number of timeboxes in an interval. These will be subtracted from the capacity to give a predicted velocity.
(Number) - This is the number of holidays in an interval. These will be multipled by the team member count then subtracted from the capacity to give a predicted velocity.
(Array) - This is known days off. These will be subtracted from the capacity to give a predicted velocity. Please add notes about vacation and PTO to the interval notes.
(Number) - This are unexpected days off (sick days, etc..). These will be subtracted from the capacity to give a predicted velocity. Please add notes about sick days or to the interval notes.
(String) - This is is the url or path to the notes for this interval. These note must be in markdown format.
- Node - The build framework and back-end dependencies management
- Bower - Front-end dependencies management
- flotr2 - Chart library
- jquery - Client library
- handlebars - Template engine
- skeleton - Grid and css framework
- markdown-it - Client side markdown renderer
- mocha - Unit testing framework
- blanket - Client side code coverage tool
- gulp - Task manager
- browser-sync - Browser synchronizer
- generator-webapp - Yeoman Generator WebApp
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the ScrumChartBoard.
- Chris Marks - Initial work - chrismarksus
See also the list of contributors who participated in this project.