pragprog_sales_chart 0.0.1 → 0.0.2

data/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2012 Dave Thomas
+Copyright (c) 2012 Jim Wilson
 
 MIT License
 

data/lib/pragprog_sales_chart/version.rb

@@ -1,3 +1,3 @@
 module PragprogSalesChart
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/pragprog_sales_chart.gemspec

@@ -9,8 +9,6 @@ Gem::Specification.new do |gem|
   gem.homepage      = ""
 
   gem.files         = `git ls-files`.split($\)
-  gem.executables   = []
-  gem.test_files    = []
   gem.name          = "pragprog_sales_chart"
   gem.require_paths = ["lib"]
   gem.version       = PragprogSalesChart::VERSION

data/vendor/assets/javascripts/pragprog_sales_chart.js

@@ -0,0 +1,731 @@
+/**
+ * This is Jim Wilson's script that creates charts of sales data
+ * from the json api
+ */
+pragprog_sales_chart = function(window, document){
+
+var
+  
+  // jQuery - loaded dynamically
+  $, 
+    
+  /**
+   * set a user-visible status message.
+   */
+  $status,
+  status = window.s = function(message, type) {
+    console.log(message);
+    if ($status) {
+      if (type === 'error' && $status.writeError) {
+        $status.writeError(message);
+      } else if ($status.writeAlert) {
+        $status.writeAlert(message);
+      } else {
+        $status.text(message);
+      }
+    }
+    return message;
+  },
+  
+  /**
+   * convenience methods for interacting with localStorage.
+   */
+  storage = window.localStorage,
+  prefix = 'pragcharts-',
+  get = function(key) {
+    return JSON.parse(storage.getItem(prefix + key));
+  },
+  set = function(key, value) {
+    storage.setItem(prefix + key, JSON.stringify(value));
+    return value;
+  },
+  
+  // page content element
+  $content,
+  
+  /**
+   * mapping of prag book codes (lower case) to book data objects
+   */
+  codes = {},
+  
+  /**
+   * mapping of prag book titles (lower case) to book data objects
+   */
+  titles = {},
+  
+  /**
+   * mapping of prag SKU mid-letters to binding semantics.
+   */
+  bindings = {
+    'p': 'ebook',
+    'b': 'paperback',
+    's': 'pod',
+    'v': 'screencast'
+  },
+  
+  /**
+   * mapping of modes.
+   */
+  modes = {
+    'direct': 'direct',
+    'channel': 'channel'
+  },
+  
+  /**
+   * products to graph.
+   */
+  products = get("products") || set("products", []),
+  
+  /**
+   * jQuery result object pointing to the input for book code.
+   */
+  $code,
+  
+  /**
+   * jQuery result objects pointing to various important fields.
+   */
+  $chart,
+  $from,
+  $until,
+  $groupby,
+  
+  /**
+   * initial page setup, called after dependencies have been resolved.
+   */
+  setup = function(err){
+    
+    if (err) {
+      return status("Unable to proceed due to error: " + err.message, 'error');
+    }
+    
+    $ = window.jQuery;
+    
+    uiAlertsAndErrors($);
+    
+    // setup page content
+    $content = $('#content')
+      .empty()
+      .css({
+        'margin-top': '2em'
+      })
+      .append('<h3><span>Sales Dashboard</span></h3>')
+      .append('<p>Add products on the left to update the chart on the right.</p>')
+      //.append('<div class="status"></div>')
+      .append(
+        $('<div class="settings-section"></div>')
+          .css({
+            'float': 'left',
+            'width': '40%'
+          })
+          .append(
+            $('<h4><span>Settings</span></h4>')
+              .css({
+                'margin-top': 0
+              })
+          )
+          .append('<h5><span>Timeframe</span></h5>')
+          .append(
+            $('<p></p>')
+              .append('<label><span>From</span> <input type="text" class="date from"/></label> ')
+              .append('<label><span>to</span> <input type="text" class="date until"/></label> ')
+              .find('.date')
+                .css({
+                  width: '6em'
+                })
+                .end()
+              .append('by <select class="groupby"></select>')
+                .find('select')
+                  .append('<option value="day">day</option>')
+                  .append('<option value="week">week</option>')
+                  .append('<option value="month">month</option>')
+                  .end()
+          )
+          .append(
+            $('<div class="products-section"></div>')
+              .css({
+                'padding-right': '1em'
+              })
+              .append('<h5><span>Products</span></h5>')
+              .append('<p><button class="addproduct">add</button></p>')
+              .append('<div class="products"></div>')
+          )
+      )
+      .append(
+        $('<div class="chart-section"></div>')
+          .css({
+            'float': 'right',
+            height: '300px',
+            width: '60%'
+          })
+          .append(
+            $('<h4><span>Chart</span></h4>')
+              .css({
+                'margin-top': 0
+              })
+          )
+          .append(
+            $('<div class="chart"></div>')
+              .css({
+                height: '100%',
+                width: '100%'
+              })
+          )
+      );
+    
+    $status = $content.find('.status');
+    $code = $content.find('input.code');
+    $chart = $content.find('.chart');
+    
+    var
+      today = new Date,
+      fortnight = new Date;
+    fortnight.setDate(fortnight.getDate() - 14);
+    
+    $from = $content.find('.from')
+      .datepicker()
+      .datepicker('setDate', fortnight)
+      .change(makeChart);
+    $until = $content.find('.until')
+      .datepicker()
+      .datepicker('setDate', today)
+      .change(makeChart);
+    $groupby = $content.find('.groupby')
+      .change(makeChart);
+    
+    var
+      $products = $content.find('.products');
+    
+    // setup addproduct button
+    $content.find('.addproduct')
+      .button({
+        icons: { primary:"ui-icon-plus" },
+        text: false
+      })
+      .click(function(){
+        
+        $products.accordion('destroy');
+        
+        addProduct($products);
+        
+        $products
+          .accordion({ active: -1 })
+          .accordion('option', 'autoHeight', false)
+          .accordion('option', 'clearStyle', true)
+          .accordion('option', 'collapsible', true);
+        
+      });
+    
+    // get info on titles
+    status('Retrieving title data...');
+    $.get(
+      '/api/author/titles.json',
+      function(raw) {
+        status('Ready.');
+        codes = {};
+        titles = {};
+        $.each(raw, function(_, book) {
+          codes[book.code.toLowerCase()] = book;
+          titles[book.title.toLowerCase()] = book;
+        });
+        
+        // fill in products
+        $.each(products, function(_, product){
+          addProduct($products, product);
+        });
+        $products
+          .css({
+            'font-size': '14px'
+          })
+          .accordion({ active: -1 })
+          .accordion('option', 'autoHeight', false)
+          .accordion('option', 'clearStyle', true)
+          .accordion('option', 'collapsible', true);
+        
+        makeChart();
+      }
+    );
+    
+    // setup the book code autocompleter
+    $content.find('input.code').autocomplete({
+      source: codeAutocomplete
+    });
+    
+    // setup the date pickers
+    $content.find('.date').datepicker();
+    
+  },
+  
+  /**
+   * get list of products by inspecting a collection element.
+   */
+  getProducts = function($elem) {
+    var
+      p = [];
+    $elem
+      .find('h6')
+        .each(function(_, h){
+          var
+            $h = $(h),
+            $opts = $h.next(),
+            product = {
+              code: $opts.find('.code').val(),
+              binding: $opts.find('.binding input:[checked]').val(),
+              mode: $opts.find('.mode input:[checked]').val()
+            };
+          p[p.length] = product;
+          $h.find('a').html(productHeading(product));
+        });
+    return p;
+  },
+  
+  /**
+   * get a product heading for a given product.
+   */
+  productHeading = function(product) {
+    product = product || {};
+    var
+      code = product.code,
+      book = codes[code],
+      heading = '--unspecifed product--';
+    if (book && product.binding && product.mode) {
+      heading = book.title + '<br />' + bindings[product.binding] + ' - ' + modes[product.mode] + ' sales';
+    }
+    return heading;
+  },
+  
+  /**
+   * add a product to a set.
+   * @param {jQuery} $elem Collection of one element to which to add a product.
+   * @param {object} product Optional product to use for settings.
+   */
+  addProduct = function($elem, product) {
+    product = product || {};
+    var
+      code = product.code,
+      title = productHeading(product),
+      $binding = makeButtonSet(bindings, product.binding)
+        .addClass('buttonset')
+        .addClass('binding'),
+      $mode = makeButtonSet(modes, product.mode)
+        .addClass('buttonset')
+        .addClass('mode'),
+      $heading = $('<h6><a href="#">' + title + '</a></h6>');
+    
+    // pick the first code in the codes hash
+    if (!code) {
+      for (code in codes) {
+        break;
+      }
+    }
+    
+    $elem
+      .append($heading)
+      .append(
+        $('<div><table><tbody></tbody></table></div>')
+          .find('tbody')
+            .append(
+              $('<tr></tr>')
+                .append(
+                  $('<th><span>book code</span></th>')
+                    .css('text-align', 'right')
+                )
+                .append(
+                  $('<td><input type="text" class="code" /></td>')
+                    .find('.code')
+                      .val(code)
+                      .autocomplete({ source: codeAutocomplete })
+                      .end()
+                )
+            )
+            .append(
+              $('<tr></tr>')
+                .append(
+                  $('<th><span>binding</span></th>')
+                    .css('text-align', 'right')
+                )
+                .append(
+                  $('<td></td>').append($binding)
+                )
+            )
+            .append(
+              $('<tr></tr>')
+                .append(
+                  $('<th><span>sales mode</span></th>')
+                    .css('text-align', 'right')
+                )
+                .append(
+                  $('<td></td>').append($mode)
+                )
+            )
+            .end() // end tbody
+          .append(
+            $('<div></div>')
+              .append(
+                $('<button class="save">Save</button>')
+                  .button()
+                  .click(function(){
+                    saveProducts($elem);
+                  })
+              )
+              .append(
+                $('<button class="remove">Remove</button>')
+                  .button()
+                  .click(function(){
+                    var
+                      $confirm = $('<div></div>')
+                        .appendTo('body')
+                        .text('Remove this product from the list?')
+                        .dialog({
+                          resizable: false,
+                          height:140,
+                          modal: true,
+                          buttons: {
+                            'Remove': function() {
+                              $heading
+                                .next()
+                                  .remove()
+                                  .end()
+                                .remove();
+                              saveProducts($elem);
+                              cleanup()
+                            },
+                            'Cancel': function() {
+                              cleanup()
+                            }
+                          }
+                        }),
+                      cleanup = function(){
+                        $confirm
+                          .dialog('close')
+                          .dialog('destroy')
+                          .remove();
+                      };
+                  })
+              )
+          )
+      );
+  },
+  
+  /**
+   * save product choices specified in a container element.
+   */
+  saveProducts = function($elem){
+    products = getProducts($elem);
+    set("products", products);
+    $elem.accordion({ active: -1 });
+    makeChart();
+  },
+  
+  /**
+   * autocompleter function for book codes.
+   */
+  codeAutocomplete = function(obj, callback){
+    var
+      term = obj.term.toLowerCase(),
+      options = [];
+    $.each(codes, function(code, book) {
+      if (code.indexOf(term) !== -1) {
+        options[options.length] = book.code;
+      }
+    });
+    $.each(titles, function(title, book) {
+      if (title.indexOf(term) !== -1) {
+        options[options.length] = {
+          label: book.title + " (" + book.code + ")",
+          value: book.code
+        };
+      }
+    });
+    callback(options);
+  },
+  
+  /**
+   * produce a raido button set.
+   * @param {map} choices Map of value/label choices to turn into a set.
+   * @param {string} selected Which choice to make selected.
+   */
+  makeButtonSet = function(choices, selected){
+    
+    var
+      suffix = makeButtonSet.suffix || 0,
+      name = 'buttonset-' + suffix,
+      $set = $('<span></span>'),
+      index = 0;
+    
+    $.each(choices, function(value, label){
+      
+      var
+        id = name + '-' + index,
+        $input = $('<input type="radio"/>')
+          .attr({
+            name: name,
+            id: id,
+            value: value
+          });
+      
+      if (value === selected) {
+        $input.attr('checked', 'checked');
+      }
+      
+      $set
+        .append($input)
+        .append('<label for="' + id + '"><span>' + label + '</span></label>')
+      
+      index++;
+      
+    });
+    
+    makeButtonSet.suffix = suffix + 1;
+    
+    return $set;
+  },
+  
+  /**
+   * make the chart
+   */
+  makeChart = function() {
+    
+    var
+    
+      from = $from.datepicker('getDate'),
+      until = $until.datepicker('getDate'),
+      by = $groupby.val(),
+      url,
+      
+      keys = {},
+      key,
+      
+      ticks = {
+        day: [1, 'day'],
+        week: [7, 'day'],
+        month: [1, 'month']
+      };
+    
+    // increment until date to account for sku_sales being exclusive at the end of the range.
+    until.setDate(until.getDate() + 1);
+    
+    $.each(products, function(index, product){
+      key = product.code + '-' + product.binding + '-' + product.mode;
+      keys[key] = index;
+    });
+    
+    if (isNaN(+from) || isNaN(+until)) {
+      return status("Unable to draw, please enter valid date boundaries", 'error');
+    }
+    
+    if (from >= until) {
+      return status("Unable to draw, please make sure start date is before end date", 'error');
+    }
+    
+    status('Retrieving sales data...');
+    $.get(
+      '/api/author/sku_sales.json', {
+        start_date: dateformat(from),
+        end_date: dateformat(until)
+      }, function(raw){
+        
+        status('Drawing...');
+        var datasets = [];
+        
+        $.each(raw, function(sku, tuples){
+          status(sku);
+          var
+            
+            m = sku.match(/(.+)-([VPBS])-\d+/),
+            code = m[1].toLowerCase(),
+            binding = m[2].toLowerCase(),
+            book = codes[code],
+            
+            map = {},
+            direct = [],
+            channel = [],
+            d = new Date(from),
+            v;
+          
+          if ((code + '-' + binding + '-direct') in keys) {
+            datasets[datasets.length] = {
+              data: direct,
+              label: book.title + ' (direct - ' + bindings[binding] + ')',
+              lines: { show: true },
+              points: { show: true },
+              color: keys[code + '-' + binding + '-direct']
+            };
+          }
+          if ((code + '-' + binding + '-channel') in keys) {
+            datasets[datasets.length] = {
+              data: channel,
+              label: book.title + ' (channel - ' + bindings[binding] + ')',
+              lines: { show: true },
+              points: { show: true },
+              color: keys[code + '-' + binding + '-channel']
+            };
+          }
+          
+          $.each(tuples, function(_, tuple){
+            map[tuple[0]] = [tuple[1] || 0, tuple[2] || 0];
+          });
+          
+          while (d < until) {
+            v = map[dateformat(d)] || [0, 0];
+            direct[direct.length] = [+d].concat(v[0]);
+            channel[channel.length] = [+d].concat(v[1]);
+            d.setDate(d.getDate() + 1);
+          }
+          
+          aggregate(direct, by);
+          aggregate(channel, by);
+          
+        });
+        
+        datasets.sort(function(a,b){ return a.color > b.color; });
+        
+        $.plot($chart, datasets, {
+          grid: { hoverable: true },
+          xaxis: {
+            minTickSize: ticks[by],
+            mode: "time"
+          } 
+        });
+        
+        var $tooltip = $('<div id="tooltip"></div>')
+          .css( {
+              color: 'black',
+              position: 'absolute',
+              display: 'none',
+              border: '1px solid #fdd',
+              padding: '2px',
+              'background-color': '#fee',
+              opacity: 0.80
+          })
+          .appendTo("body")
+          .hide();
+        
+        function showTooltip(x, y, contents) {
+            $tooltip
+              .empty()
+              .append(contents)
+              .css( {
+                top: y + 5,
+                left: x + 5
+              })
+              .fadeIn(200);
+        }
+        
+        var previousPoint = null;
+        $chart.bind("plothover", function (event, pos, item) {
+          if (item) {
+              if (previousPoint != item.dataIndex) {
+                  previousPoint = item.dataIndex;
+                  
+                  $tooltip.hide();
+                  var
+                    x = item.datapoint[0],
+                    y = item.datapoint[1],
+                    
+                    d = (new Date(x)).toLocaleDateString();
+                 
+                  showTooltip(item.pageX, item.pageY,
+                              item.series.label + "<br />" + d + ": " + y);
+              }
+          }
+          else {
+              $tooltip.hide();
+              previousPoint = null;
+          }
+        });
+        
+        status('Done.');
+      }
+    );
+    
+  },
+  
+  /**
+   * aggregate date-based data by week or month by walking backwards and summing.
+   */
+  aggregate = function(data, by) {
+    
+    if (by !== 'week' && by !== 'month') {
+      return;
+    }
+    
+    var
+      
+      byWeek = function(date){
+        return (new Date(date)).getDay() % 7 === 0;
+      },
+      byMonth = function(date) {
+        return (new Date(date)).getDate() === 1;
+      },
+      test = (by === 'week' ? byWeek : byMonth),
+      
+      i = data.length,
+      sum = 0,
+      tuple;
+      
+    while (i--) {
+      tuple = data[i];
+      sum += tuple[1];
+      if (test(tuple[0])) {
+        tuple[1] = sum;
+        sum = 0;
+      } else {
+        data.splice(i, 1);
+      }
+    }
+    
+    if (sum) {
+      data[0][1] = sum;
+    }
+    
+  }
+  
+  /**
+   * format a date obj as yyyy-mm-dd
+   */
+  dateformat = function(date) {
+    var
+      y = '' + date.getFullYear(),
+      m = '0' + (date.getMonth() + 1),
+      d = '0' + date.getDate();
+    return y + '-' + m.substr(-2) + '-' + d.substr(-2);
+  },
+  
+  /**
+   * jQuery UI helper for alerts and errors.
+   * @see http://www.brian-driscoll.com/2010/11/jqueryui-plugin-highlight-and-error.html
+   */
+  uiAlertsAndErrors = function($){
+    $.fn.writeError = function(message){
+      return this.each(function(){
+         var $this = $(this);
+         var errorHtml = "<div class=\"ui-widget\">";
+         errorHtml+= "<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em;\">";
+         errorHtml+= "<p>";
+         errorHtml+= "<span class=\"ui-icon ui-icon-alert\" style=\"float:left; margin-right: .3em;\"></span>";
+         errorHtml+= message;
+         errorHtml+= "</p>";
+         errorHtml+= "</div>";
+         errorHtml+= "</div>";
+         $this.html(errorHtml);
+      });
+    };
+    $.fn.writeAlert = function(message){
+      return this.each(function(){
+         var $this = $(this);
+         var alertHtml = "<div class=\"ui-widget\">";
+         alertHtml+= "<div class=\"ui-state-highlight ui-corner-all\" style=\"padding: 0 .7em;\">";
+         alertHtml+= "<p>";
+         alertHtml+= "<span class=\"ui-icon ui-icon-info\" style=\"float:left; margin-right: .3em;\"></span>";
+         alertHtml+= message;
+         alertHtml+= "</p>";
+         alertHtml+= "</div>";
+         alertHtml+= "</div>";
+         $this.html(alertHtml); 
+      });
+    };
+  },
+  
+setup(false);
+
+};

metadata

@@ -1,23 +1,33 @@
---- !ruby/object:Gem::Specification
+--- !ruby/object:Gem::Specification 
 name: pragprog_sales_chart
-version: !ruby/object:Gem::Version
-  version: 0.0.1
+version: !ruby/object:Gem::Version 
+  hash: 27
   prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 2
+  version: 0.0.2
 platform: ruby
-authors:
+authors: 
 - Dave Thomas
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-19 00:00:00.000000000 Z
+
+date: 2012-06-19 00:00:00 Z
 dependencies: []
+
 description: Asset gem for the author sales chart
-email:
+email: 
 - dave@pragprog.com
 executables: []
+
 extensions: []
+
 extra_rdoc_files: []
-files:
+
+files: 
 - .gitignore
 - Gemfile
 - LICENSE
@@ -26,28 +36,39 @@ files:
 - lib/pragprog_sales_chart.rb
 - lib/pragprog_sales_chart/version.rb
 - pragprog_sales_chart.gemspec
-homepage: ''
+- vendor/assets/javascripts/pragprog_sales_chart.js
+homepage: ""
 licenses: []
+
 post_install_message: 
 rdoc_options: []
-require_paths:
+
+require_paths: 
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement
+required_ruby_version: !ruby/object:Gem::Requirement 
   none: false
-  requirements:
-  - - ! '>='
-    - !ruby/object:Gem::Version
-      version: '0'
-required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
   none: false
-  requirements:
-  - - ! '>='
-    - !ruby/object:Gem::Version
-      version: '0'
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
 requirements: []
+
 rubyforge_project: 
-rubygems_version: 1.8.21
+rubygems_version: 1.8.10
 signing_key: 
 specification_version: 3
 summary: Asset gem for the author sales chart
 test_files: []
+