Presentation of Devops Metrix, a smart visualization of a projects' wallet's agility with AngularJS and D3.
AdlenJean-RémiDavidAfaneBeaudoinNowinskyThe agile glimpse
View Slide
DevOps
VCSCIAnalyticsCoverage
D3.js
D3.js1. Representation2. Easy integration with Angular.js3. Directives + global process(init/update/watcher)
Initializationsvg = d3.select $element[0].select 'svg'node = svg.selectAll '.node'.data projectsData.enter().append 'g'circlesContainer = node.append 'g'
One projectProjectcirclesContainer.append 'circle'
A small projectProjectA large projectProjectcircle.attr 'r', bubbleSize
Latest release6 months agoLatest releaseyesterdayProject Projectcircle.style 'opacity', bubbleOpacity
Build failed Build passedProjectProjectcircle.style 'fill', bubbleColor
Only a few tests Large test coverageProjectProjectcircle.style 'fill', (d) -> 'url(#gradient-' + bubbleId(d) + ')'
Production down Production upProjectProjectcircle.classed 'offline', (d) -> !d.online(+ css animation)
Not agile :-( Really agile :-)10Project2ProjectcirclesContainer .append 'text'.text bubbleScore
Angular / D3.js integrationsvg = d3.select $element[0].select 'svg'node = svg.selectAll '.node'.data projectsData.enter().append 'g'circlesContainer = node.append 'g'
Angular / D3.js integrationsvg = d3.select $element[0].select 'svg'node = svg.selectAll '.node'.data $scope.projects.enter().append 'g'circlesContainer = node.append 'g'
Angular / D3.js integrationangular.module 'metrix.dashboard'.directive 'metrixProjectsBubbles',->template: ''link: ($scope, $element) ->...
Gathering data
Gathering data1. Data generation2. Getting real data: Github / Travis CI3. CORS
Using APIs.factory ‘DataProvider’, ($q, $http) ->getContributors = (url) ->deferred = $q.defer()$http { method: 'GET', url: url }.success (data) ->deferred.resolve data.length.error -> deferred.resolve 0deferred.promisegetContributors ‘URL_TO_API’.then contributors -> project.contributors = contributors
Bootstrapping the project
Bootstrapping the projectBower -> easy package managerGulp -> stream building system
Gulpfile structure# Set upgulp = require 'gulp'# Pluginscoffee = require 'gulp-coffee' # and so on# Parametersparameters = require '../config/parameters.coffee'# Tasksgulp.task 'build', ['copy', 'compile']# Definition of task’s dependenciesgulp.task 'copy', ['assets', 'vendors'] # A dependency’s dependenciesgulp.task 'assets', [], -> … # Down to each elementary taskgulp.task 'compile', ['copy', 'coffee', 'jade', 'less']
Gulpfile tasksgulp.task 'coffee', [], ->gulp.src parameters.app_path + '/**/*.coffee'.pipe coffee bare: true.pipe concat parameters.app_main_file.pipe gulp.dest parameters.web_path + '/js'.pipe filesize().on 'error', gutil.log
Contribute!github.com/jrbeaudoin/devops-metrix
The agile glimpsejrbeaudoin.github.io/devops-metrixgithub.com/jrbeaudoin/devops-metrixdavid.nowinsky.net/gulp-book/AdlenJean-RémiDavidAfaneBeaudoinNowinsky