Attached is a JSON file of a player from this season's Premier League. Included are 4 matches (match weeks 3-6) with each match split up into 5 minute segments of stats that the player has recorded during the game.
Make a single web page to visualise the data in any format (graphs, tables etc.).
The application has been built with AngularJS, Bootstrap and Chart.js to implement the graphs. I have used NodeJS and ExpressJS to serve the application.
I decided to use AngularJS for the front end framework as I believe it helps respect SOLID principles and keeps the code clean.
I generally follow a TDD methodology to implement application features. I wrote a failing feature test in protractor, then a new matching failing unit test. I then wrote code to fix the failing unit test which would change the error for the feature test. Repeating this process allowed me to complete the feature.
It was the first time I used the ChartJS library so I decided to spike the code and then come back to test every feature implemented. I then refactored my code.
public
├── css
│ └── global.css
├── data
│ └── player.json
├── js
│ ├── app.js
│ ├── controllers
│ │ ├── globalStatsController.js
│ │ └── singleMatchStatsController.js
│ ├── directives
│ │ └── globalStatsDirective.js
│ └── factories
│ ├── elaborateDataFactory.js
│ ├── refineDataFactory.js
│ └── resourceFactory.js
├── libs
│ └── [all the app dependencies]
└── views
├── index.html
└── partials
├── global-stats.html
└── match-stats.html
Factories
- Resource is responsible for retrieving the JSON file.
- ElaborateData is responsible for handling operations on JSON objects. Also, the arithmetic logic.
- RefineData is responsible for transforming JSON objects in an "easy to handle" format for the controllers.
Controllers
- GlobalStats is responsible for displaying global statistics using the directive global-stats.
- SingleMatchStats is responsible for dynamically focusing the preferred match and displaying its statistics using the view match-stats.html.
Directives
- globalStats is responsible for attach the appropriate html to display global statistics to the DOM.
If you want to have a deep understanding of the business logic implemented, please follow this link where all tests cases are located.
The app has been deployed on heroku and you can try it here:
You will require NodeJS (with npm) to make the application function locally. To run the test suites you will also require Java.
Clone from github and move into directory
$ git@github.com:giamir/player_stats.git
$ cd player_stats
Install all dependencies for the application and start the server
$ npm install
$ npm start
You can now visit the application in the browser at http://localhost:8080/
- HTML5
- Bootstrap 3
- JavaScript
- Chart.js
- AngularJS
- Karma (unit testing framework)
- Protractor (feature testing framework)
To run the test suite you will need to have the node server running.
$ npm start
To run the full suite
$ npm test
Or to run individual components (unit and feature test)
$ grunt karma
$ grunt e2e