Welcome to the internal Dashboard app for Fundraising! It's cool. Here's the demo slide deck - but this readme is more complete.
- Provide a private library of reports, charts, and other visualizations to move fundraising into easier, centralized data monitoring and analysis
- Move fundraising away from sifting through piles of spreadsheets, squinting at log files and laborious copy/paste exercises that suck up time
- Make real-time monitoring an automatically-updated, trustworthy part of fundraising staff workflow
- Handle all types of incoming data formats by transforming and depositing it all into one metrics database
- Allow fr-tech and fr-nontech alike to see what is happening throughout the department by perusing one another's Boards (shared collections of widgets)
To play with Dash, you will need:
- NodeJS v. 0.8.2 (I recommend using nvm to manage node versions if you already have another version on your machine.)
- npm to manage backend packages and because you need Bower.
- Bower, a package manager specifically optimized for front-end packages.
- A local database that reflects fredge (not provided here since there is sensitive data involved)
To use the live version with actual Fundraising data, you will need special permissions. Please contact ssmith@wikimedia.org.
To install and run the application in development mode, first ensure you do not have anything already listening to port 8080. If so, stop it or change the configured port in defaults.js, or in a new config file, using -c.
- Be sure you have the submodules: git submodule update -i
- nvm use 0.8.2
- node server.js -d
To test OAuth, omit the "-d" option when starting the server.
Dash is a NodeJS/Express app. The front end uses RequireJS for optimal module loading, with Knockout for MVC.
For now, Boostrap provides the main grid structure and basic styling. This is so that collaboration is easier, but may be replaced with something better and/or custom in the future.
Various charting and mapping libraries, such as d3, ChartJS, and flot, are being used with Dash. Update: This is being replaced by components provided by the Wikimedia Foundation's Analytics project Dashiki, which can be viewed on metrics.wmflabs.org.
All front-end Javascript is managed and maintained with Bower. To upgrade any front-end library (listed below), simply run bower update. Separate repos containing these libraries are submoduled in dash-node-modules and dash-bower-modules.
###All libraries Dash relies upon:
####Backend
- chalk
- commander
- deeply
- event-stream
- express
- gulp
- lodash
- mysql
- odata-parser
- passport
- rconsole
####Front end
- autotype
- bootstrap
- bootstrap-datepicker
- bootstrap-timepicker
- chartjs
- crossroads
- d3
- fontawesome
- gauge.js
- hasher
- jquery
- js-signals
- knockout
- lato
- moment
- nouislider
- requirejs
Dash is organized as follows:
- src/app/ directory contains knockout bindings.js file for common functions (coming soon), require config file, front end router, and startup file
- src/components/ directory contains all views organized into their own directory, with corresponding html templates
- routes/ directory provides querying/data for front end consumption
There is one main view: the widget Library view. (This is because there are < a lot of widgets in existence at the moment.)
There is also a "secret" admin view, for admins. But this hasn't been built out yet.
The Library view contains the subviews of all available widgets. Each subview manages its own data and events.
- "Build new board," Default Board, All Boards views introduced.
- My Boards, general sharing with Tags and Favorites introduced.
- Eternal bliss and happiness
WMF deployment involves a minification step, and requires NodeJS 0.10 (note this is more recent than the production execution requirement, 0.8.2).
- nvm use 0.10
- npm install -g gulp
- gulp
- git add dist
Don't worry about the lint errors :(
release-2
Commit the dist/ output to the deployment branch and push for review.