twigg-app 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0c91cf12c7556b35c7d83003c68f8cdda885bf24
-  data.tar.gz: b05d038bf66594e083ccf7937b5bcb05d3de767b
+  metadata.gz: 312409c6268f21629cf59727c1d75cf51c398e6b
+  data.tar.gz: d990e730d0e7c1683274619a1d83e9b58864a46f
 SHA512:
-  metadata.gz: c2a19d6e1be2de3056b4d1884b5f2da4052447d4dc57d68a8a478d82f0f85c7c942ba2fa0d0ea38cbc3b540be344a9af331351c883cadd9165dcf939c55e02c7
-  data.tar.gz: 0d4bf0966d6c8e6490bf97b8dbfa14418f3b4dcb967d91eefec177ec48df35bcb4512433f3cd3fc26cca6fc83f70f52d2726081da03712ece354a73abf88bbcb
+  metadata.gz: 21ff88bc95fa1b9041f0223c37661ff1d3b25ff384966560ccd3644629841e18343c0318650f37d13b6283619846d5d8b80705ab71916525313ea58bd17af5dc
+  data.tar.gz: 79e35a54350b5713c05929569905507426a9fae1da567d34f199c8ef12b3fea82a833aa4b43fb856a1c279d879fa6aac020e5fb09fa7f078557717cfdad64a17

data/assets/javascripts/_bootstrap.js

@@ -0,0 +1,7 @@
+$(document).initializeEach('[data-toggle=tooltip]', function() {
+  $(this).tooltip();
+});
+
+$(document).initializeEach('[data-toggle=popover]', function() {
+  $(this).popover({ html: true });
+});

data/assets/javascripts/_jquery.js

@@ -0,0 +1,19 @@
+// jQuery functions
+
+// Displays an alert inside the currently selected element, by emptying it and
+// inserting a Bootstrap alert with the specified `text`.
+//
+// If `text` is omitted, a reasonable default it used, based on the motivatiing
+// use case of providing feedback for failed Ajax requests.
+//
+// So-named in order to avoid a clash with Boostrap's `alert()` method.
+$.fn.displayAlert = function(text) {
+  if (!text) {
+    text = 'There was a problem retrieving the data. ' +
+      '<a class="alert-link" href="' + window.location.href + '">Reload</a>.';
+  }
+
+  return this
+    .empty()
+    .append('<div class="alert alert-danger">' + text + '</div>');
+};

data/assets/javascripts/_tables.js

@@ -0,0 +1,3 @@
+$(document).initializeEach('table.sortable', function() {
+  $(this).stupidtable();
+});

data/assets/javascripts/_views.js

@@ -0,0 +1,10 @@
+//= require_tree ./views
+//= require_self
+
+$(document).initializeEach('[data-view]', function() {
+  var $el      = $(this),
+      viewName = $el.data('view'),
+      data     = _.extend({ el: this }, $el.data());
+
+  new Twigg.Views[viewName](_.omit(data, 'view'));
+});

data/assets/javascripts/application.js

@@ -0,0 +1,9 @@
+//= require_self
+
+//= require _bootstrap
+//= require _jquery
+//= require _tables
+//= require _views
+
+var Twigg   = window.Twigg || {};
+Twigg.Views = Twigg.Views || {};

data/{public/application.js → assets/javascripts/views/_commit_set_bar_chart.js}

@@ -1,21 +1,24 @@
-Twigg = {};
-Twigg.Profile = (function() {
-  var loadCommitsPerDay = function(selector, data) {
+Twigg.Views.CommitSetBarChart = Backbone.View.extend({
+  initialize: function() {
+    this.loadCommitsPerDay();
+  },
+
+  render: function() {
     var height = 200,
-        width = $('#bar-chart').width(),
+        width = this.$el.width(),
         padding = 45,
         barSpacing = 1,
-        barWidth = (width - padding) / data.length - barSpacing,
+        barWidth = (width - padding) / this.data.length - barSpacing,
         x = d3.scale.linear()
-          .domain([0, data.length])
+          .domain([0, this.data.length])
           .range([0, width]),
         y = d3.scale.linear()
-          .domain([0, d3.max(data, function(d) { return d.count; })])
+          .domain([0, d3.max(this.data, function(d) { return d.count; })])
           .range([height, 0]),
         xTimeScale = d3.time.scale()
           .domain([
-            new Date(data[0].date),
-            d3.time.day.offset(new Date(data[data.length - 1].date), 1)
+            new Date(this.data[0].date),
+            d3.time.day.offset(new Date(this.data[this.data.length - 1].date), 1)
           ])
           .range([0, width]),
         xAxis = d3.svg.axis()
@@ -27,29 +30,29 @@ Twigg.Profile = (function() {
           .scale(y)
           .orient('left')
           .tickFormat(d3.format(',d')),
-        svg = d3.select(selector).append('svg')
+        svg = d3.select(this.el).append('svg')
           .attr('height', height + padding)
           .attr('width', width);
 
     // bars
-    svg.selectAll('rect').data(data)
+    svg.selectAll('rect').data(this.data)
       .enter()
         .append('rect')
         .attr({
           'class': 'bar',
-          'x': function(d, i) { return x(i) + padding },
-          'y': function(d) { return y(d.count) },
+          'x': function(d, i) { return x(i) + padding; },
+          'y': function(d) { return y(d.count); },
           'width': barWidth,
           'height': function(d) { return height - y(d.count); },
           'title': function(d) { return d.count + ' (' + d.date + ')'; },
           'data-toggle': 'tooltip'
         });
 
-    $('#bar-chart [data-toggle=tooltip]').tooltip({ container: 'body' });
+    $('[data-toggle=tooltip]').tooltip({ container: 'body' });
 
     // show count inside bars if wide/high enough
     if (barWidth > 20) {
-      svg.selectAll('text').data(data)
+      svg.selectAll('text').data(this.data)
         .enter()
           .append('text')
           .attr('x', function(d, i) { return x(i) + barWidth + padding; })
@@ -58,7 +61,7 @@ Twigg.Profile = (function() {
           .attr('dy', '1.2em')
           .attr('text-anchor', 'middle')
           .attr('class', 'value')
-          .text(function(d) { return height - y(d.count) > 15 ? d.count : '' });
+          .text(function(d) { return height - y(d.count) > 15 ? d.count : ''; });
     }
 
     // x-axis
@@ -83,24 +86,19 @@ Twigg.Profile = (function() {
     svg.selectAll('.xaxis text')
       .attr('transform', function(d) {
         var h = this.getBBox().height;
-        return 'translate(' + h * -1 + ', ' + h + ') rotate(-30)';
-      });
-  };
-
-  return {
-    loadCommitsPerDay: loadCommitsPerDay
-  };
-})();
+      return 'translate(' + h * -1 + ', ' + h + ') rotate(-30)';
+    });
 
-$(document).initializeEach('table.sortable', function() {
-  $(this).stupidtable();
-});
-
-// for bootstrap:
-$(document).initializeEach('[data-toggle=tooltip]', function() {
-  $(this).tooltip();
-});
+    return this;
+  },
 
-$(document).initializeEach('[data-toggle=popover]', function() {
-  $(this).popover({ html: true });
+  loadCommitsPerDay: function() {
+    d3.json(window.location.href)
+      .on('error', this.$el.displayAlert)
+      .on('load', function(data) {
+        this.$el.empty();
+        this.data = data;
+        this.render();
+      }.bind(this)).get();
+  }
 });

data/assets/javascripts/views/_russia.js

@@ -0,0 +1,61 @@
+Twigg.Views.Russia = Backbone.View.extend({
+  events: {
+    'click svg g': 'handleAuthorClick'
+  },
+
+  initialize: function() {
+    this.showNovelStats();
+  },
+
+  render: function() {
+    var format = d3.format(',d'),
+        color = d3.scale.category20c(),
+        diameter = Math.min(this.$el.width(), window.innerHeight * 1.2),
+        bubble = d3.layout.pack()
+          .size([diameter, diameter])
+          .sort(function(a, b) { return a.russianness - b.russianness; } )
+          .value(function(d) { return d.russianness; })
+          .padding(1.5),
+        svg = d3.select(this.el).append('svg')
+          .attr('height', diameter)
+          .attr('width', diameter),
+        node = svg.selectAll('.node')
+          .data(bubble.nodes(this.data).filter(function(d) { return !d.children; }))
+          .enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', function(d) { return "translate(" + d.x + ',' + d.y + ')'; });
+
+    node.append('title')
+      .text(function(d) {
+        return 'Author: ' + d.author + ' (' + d.team + ')\n' +
+               'Russianness: ' + format(d.russianness) + '\n' +
+               'Flesch Reading Ease: ' + d3.round(d.flesch_reading_ease, 2);
+      });
+
+    node.append('circle')
+      .attr('r', function(d) { return d.r; })
+      .style('fill', function(d) { return color(d.team); });
+
+    node.append('text')
+      .attr('dy', '.3em')
+      .style('text-anchor', 'middle')
+      .text(function(d) { return d.author.substring(0, d.r / 4); });
+
+    return this;
+  },
+
+  showNovelStats: function() {
+    d3.json(this.options.url)
+      .on('error', this.$el.displayAlert)
+      .on('load', function(data) {
+        this.$('.progress').remove();
+        this.data = data;
+        this.render();
+      }.bind(this)).get();
+  },
+
+  handleAuthorClick: function(event) {
+    window.location = this.options.authorsPath + '/' +
+      $(event.currentTarget).find('text').text().replace(/ /, '.');
+  }
+});

data/assets/javascripts/views/_tags.js

@@ -0,0 +1,56 @@
+// View for /gerrit/tags.
+//
+// Manages a set of TagsWordCloud subviews, one per word cloud.
+Twigg.Views.Tags = Backbone.View.extend({
+  initialize: function() {
+    this.$globalUsed = $('#global-used');
+    this.width = this.$globalUsed.width();
+    this.fetch();
+  },
+
+  fetch: function() {
+    $.getJSON(window.location.href)
+      .fail(function() { this.$globalUsed.displayAlert(); }.bind(this))
+      .done(function(data) {
+        this.$globalUsed.empty();
+        this.data = data;
+        this.render();
+      }.bind(this));
+  },
+
+  render: function() {
+    // first render global stats
+    new Twigg.Views.TagsWordCloud({
+      el:    this.$globalUsed[0],
+      data:  this.data.global,
+      width: this.width
+    });
+
+    // then render per-author stats
+    var authors = JSON.parse(_.unescape(this.$el.data('authors')));
+    _.each(authors, function(author, idx, list) {
+      var id = this.nameToId(author);
+
+      // tags used
+      new Twigg.Views.TagsWordCloud({
+        el:    this.$('#' + id + '-used')[0],
+        data:  this.data.from[author],
+        width: this.width
+      });
+
+      // tags received
+      new Twigg.Views.TagsWordCloud({
+        el:    this.$('#' + id + '-received')[0],
+        data:  this.data.to[author],
+        width: this.width
+      });
+    }, this);
+
+    return this;
+  },
+
+  // Duplicative of `#name_to_id` Ruby method in Twigg::App::Server.
+  nameToId: function(name) {
+    return name.replace(/[ .@]/g, '-').toLowerCase();
+  }
+});

data/assets/javascripts/views/_tags_word_cloud.js

@@ -0,0 +1,51 @@
+// Draws a tag word cloud for the given data.
+Twigg.Views.TagsWordCloud = Backbone.View.extend({
+  initialize: function() {
+    this.render();
+  },
+
+  render: function() {
+    if (!this.options.data) {
+      return this; // nothing to do
+    }
+
+    var entries = d3.map(this.options.data).entries(),
+        fill = d3.scale.category20(),
+        height = window.innerHeight * 0.8,
+        domain = d3.extent(entries, function(d) { return d.value; }),
+        scale = d3.scale.log().range([24, height * 0.33]).domain(domain),
+        width = this.options.width,
+        words = entries.map(function(d) { return { text: d.key, size: d.value }; });
+
+    d3.layout.cloud()
+      .size([width, height])
+      .words(words)
+      .padding(5)
+      .rotate(function() { return ~~(Math.random() * 2) * 90; })
+      .font('Impact')
+      .fontSize(function(d) { return scale(d.size); })
+      .on('end', function(words) {
+        d3.select(this.el)
+          .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+          .append('g')
+            .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')')
+          .selectAll('text')
+            .data(words)
+          .enter().append('text')
+            .style('font-size', function(d) { return d.size + 'px'; })
+            .style('font-family', 'Impact')
+            .style('fill', function(d, i) { return fill(i); })
+            .attr('text-anchor', 'middle')
+            .attr('transform', function(d) {
+              return 'translate(' + [d.x, d.y] + ') rotate(' + d.rotate + ')';
+            })
+            .text(function(d) { return d.text; });
+      }.bind(this))
+      .timeInterval(10)
+      .start();
+
+    return this;
+  }
+});

data/assets/stylesheets/_bootstrap_overrides.scss

@@ -0,0 +1,15 @@
+body .modal-dialog {
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+}
+
+h1 .popover {
+  // popover text in headings is way too big, even inside <small><small>
+  font-size: 0.75em;
+}
+
+.footer .navbar-text {
+  float: none;
+}

data/assets/stylesheets/_footer.scss

@@ -0,0 +1,28 @@
+// "sticky" footer
+
+body,
+html {
+  height: 100%;
+}
+
+.wrap {
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -50px;
+  min-height: 100%;
+}
+
+.push {
+  height: 50px;
+}
+
+.footer {
+  height: 50px;
+  margin-top: -50px;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

data/assets/stylesheets/_global.scss

@@ -0,0 +1,14 @@
+.day-links {
+  cursor: pointer;
+}
+
+.replace-active:after {
+  color: #aaa;
+  content: 'loading...';
+  font-style: italic;
+}
+
+.pairs a {
+  color: inherit;
+  text-decoration: none;
+}

data/assets/stylesheets/_tables.scss

@@ -0,0 +1,20 @@
+th[data-sort] {
+  cursor: pointer;
+
+  &:after {
+    color: #ccc;
+    content: '\25b2'; // upward facing triangle
+    font-size: 10px;
+    margin-left: 2px;
+    visibility: hidden;
+  }
+
+  &.sorting-asc:after {
+    visibility: visible;
+  }
+
+  &.sorting-desc:after {
+    content: '\25bc'; // downward facing triangle
+    visibility: visible;
+  }
+}

data/assets/stylesheets/application.scss

@@ -0,0 +1,10 @@
+// third-party
+@import 'compass/css3/user-interface';
+
+// internal
+@import 'bootstrap_overrides';
+@import 'd3/bar_chart';
+@import 'd3/bubble_chart';
+@import 'footer';
+@import 'global';
+@import 'tables';

data/assets/stylesheets/d3/_bar_chart.scss

@@ -0,0 +1,25 @@
+.bar-chart svg {
+  .axis {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+
+    text {
+      fill: #000;
+      font-family: sans-serif;
+      font-size: 11px;
+    }
+  }
+
+  .bar {
+    fill: steelblue;
+
+    &:hover {
+      fill: lightsteelblue;
+    }
+  }
+
+  .value {
+    fill: #fff;
+  }
+}

data/assets/stylesheets/d3/_bubble_chart.scss

@@ -0,0 +1,22 @@
+.bubble-chart svg {
+  display: block;
+  margin: 0 auto;
+
+  .node {
+    cursor: pointer;
+
+    &:hover {
+      circle {
+        -webkit-svg-shadow: 0 0 7px #666;
+      }
+
+      text {
+        fill: #fff;
+      }
+    }
+
+    text {
+      @include user-select(none);
+    }
+  }
+}

data/lib/twigg-app/app/routes.rb

@@ -17,6 +17,10 @@ module Twigg
         '/gerrit'
       end
 
+      def gerrit_tags_path
+        '/gerrit/tags'
+      end
+
       def pairs_path(options = {})
         '/pairs' + query_string_from_options(options)
       end

data/lib/twigg-app/app/server.rb

@@ -5,6 +5,7 @@ require 'sass'
 require 'sinatra'
 require 'sinatra/content_for'
 require 'sinatra/respond_with'
+require 'sprockets'
 require 'yaml'
 
 module Twigg
@@ -14,12 +15,15 @@ module Twigg
 
       set :bind,       Config.app.bind
       set :public_dir, App.root + 'public'
-      set :views,      App.root + 'views'
+      set :views,      [App.root + 'views', App.root + 'assets']
+      set :assets,     (Sprockets::Environment.new(App.root) do |env|
+        env.append_path 'assets/javascripts'
+      end)
 
       configure do
         Compass.configuration do |config|
           config.project_path = __dir__
-          config.sass_dir     = 'views/stylesheets'
+          config.sass_dir     = 'assets/stylesheets'
         end
 
         set :sass, Compass.sass_engine_options
@@ -41,10 +45,28 @@ module Twigg
       helpers Twigg::Util
 
       helpers do
-        # Returns true if the current request corresponds to any path in
-        # `paths`.
-        def active?(*paths)
-          'active' if Array(paths).include?(request.path_info)
+        # Support multiple view directories.
+        #
+        # See: https://github.com/sinatra/sinatra/commit/441b17ead90d3e3a90a3a4
+        def find_template(views, name, engine, &block)
+          Array(views).each { |v| super(v, name, engine, &block) }
+        end
+
+        def h(str)
+          Rack::Utils.escape_html(str)
+        end
+
+        # Returns a truthy value (the "active" class) if the current request
+        # corresponds to any path in `paths_or_regex`; otherwise, returns `nil`.
+        #
+        # @param paths_or_regex May be a String, Array of Strings, or a Regexp.
+        def active?(*paths_or_regex)
+          case paths_or_regex
+          when Array, String
+            Array(paths_or_regex).include?(request.path_info)
+          when Regexp
+            paths_or_regex.match(request.path_info)
+          end && 'active'
         end
 
         def day_links
@@ -83,16 +105,24 @@ module Twigg
       end
 
       get '/authors' do
-        @commit_set = Gatherer.gather(Config.repositories_directory, @days)
+        @commit_set = Cacher.get('authors', @days) do
+          Gatherer.gather(Config.repositories_directory, @days)
+        end
+
         haml :'authors/index', layout: !request.xhr?
       end
 
-      get '/authors/:slug' do
+      get '/authors/:slug', provides: %i[html json] do
         @author = slug_to_name(params[:slug])
-        @commit_set = Gatherer.gather(Config.repositories_directory, @days).
-          select_author(@author)
-        @nvd3_data = @commit_set.count_by_day(@days)
-        haml :'authors/show'
+        @commit_set = Cacher.get('authors', @author, @days) do
+          Gatherer.gather(Config.repositories_directory, @days).
+            select_author(@author)
+        end
+
+        respond_to do |f|
+          f.html { haml :'authors/show' }
+          f.json { @commit_set.count_by_day(@days).to_json }
+        end
       end
 
       if Config.app.gerrit.enabled
@@ -106,11 +136,28 @@ module Twigg
             @authors = Gerrit::Author.stats(days: @days)
             haml :'gerrit/authors'
           end
+
+          get '/gerrit/tags', provides: %i[html json] do
+            @stats   = Gerrit::Tag.stats(days: @days)
+            @authors = (@stats[:from].keys + @stats[:to].keys).uniq.sort
+            respond_to do |f|
+              f.html { haml :'gerrit/tags' }
+              f.json { @stats.to_json }
+            end
+          end
         end
       end
 
+      get '/javascripts/:name.js' do
+        content_type 'application/javascript'
+        settings.assets["#{params[:name]}.js"]
+      end
+
       get '/pairs' do
-        @pairs = Gatherer.gather(Config.repositories_directory, @days).pairs
+        @pairs = Cacher.get('pairs', @days) do
+          Gatherer.gather(Config.repositories_directory, @days).pairs
+        end
+
         haml :'pairs/index', layout: !request.xhr?
       end
 
@@ -118,8 +165,10 @@ module Twigg
         respond_to do |f|
           f.html { haml :'russian-novels/index' }
           f.json {
-            commit_set = Gatherer.gather(Config.repositories_directory, @days)
-            RussianNovel.new(commit_set).data.to_json
+            Cacher.get('russian-novels', @days) do
+              commit_set = Gatherer.gather(Config.repositories_directory, @days)
+              RussianNovel.new(commit_set).data.to_json
+            end
           }
         end
       end
@@ -130,16 +179,24 @@ module Twigg
       end
 
       get '/teams' do
-        @commit_set = Gatherer.gather(Config.repositories_directory, @days)
+        @commit_set = Cacher.get('teams', @days) do
+          Gatherer.gather(Config.repositories_directory, @days)
+        end
+
         haml :'teams/index', layout: !request.xhr?
       end
 
-      get '/teams/:slug' do
+      get '/teams/:slug', provides: %i[html json] do
         @team = slug_to_name(params[:slug])
-        @commit_set = Gatherer.gather(Config.repositories_directory, @days).
-          select_team(@team)
-        @nvd3_data = @commit_set.count_by_day(@days)
-        haml :'teams/show'
+        @commit_set = Cacher.get('teams', @team, @days) do
+          Gatherer.gather(Config.repositories_directory, @days).
+            select_team(@team)
+        end
+
+        respond_to do |f|
+          f.html { haml :'teams/show' }
+          f.json { @commit_set.count_by_day(@days).to_json }
+        end
       end
     end
   end

data/lib/twigg-app/app/version.rb

@@ -1,5 +1,5 @@
 module Twigg
   module App
-    VERSION = '0.0.1'
+    VERSION = '0.0.2'
   end
 end