mouth 0.8.0

data/lib/mouth/endoscope/public/keymaster.js

@@ -0,0 +1,163 @@
+// keymaster.js
+// (c) 2011 Thomas Fuchs
+// keymaster.js may be freely distributed under the MIT license.
+
+;(function(global){
+  var k,
+    _handlers = {},
+    _mods = { 16: false, 18: false, 17: false, 91: false },
+    _scope = 'all',
+    // modifier keys
+    _MODIFIERS = {
+      '⇧': 16, shift: 16,
+      '⌥': 18, alt: 18, option: 18,
+      '⌃': 17, ctrl: 17, control: 17,
+      '⌘': 91, command: 91
+    },
+    // special keys
+    _MAP = {
+      backspace: 8, tab: 9, clear: 12,
+      enter: 13, 'return': 13,
+      esc: 27, escape: 27, space: 32,
+      left: 37, up: 38,
+      right: 39, down: 40,
+      del: 46, 'delete': 46,
+      home: 36, end: 35,
+      pageup: 33, pagedown: 34,
+      ',': 188, '.': 190, '/': 191,
+      '`': 192, '-': 189, '=': 187,
+      ';': 186, '\'': 222,
+      '[': 219, ']': 221, '\\': 220
+    };
+
+  for(k=1;k<20;k++) _MODIFIERS['f'+k] = 111+k;
+
+  // IE doesn't support Array#indexOf, so have a simple replacement
+  function index(array, item){
+    var i = array.length;
+    while(i--) if(array[i]===item) return i;
+    return -1;
+  }
+
+  // handle keydown event
+  function dispatch(event){
+    var key, tagName, handler, k, i, modifiersMatch;
+    tagName = (event.target || event.srcElement).tagName;
+    key = event.keyCode;
+
+    // if a modifier key, set the key.<modifierkeyname> property to true and return
+    if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
+    if(key in _mods) {
+      _mods[key] = true;
+      // 'assignKey' from inside this closure is exported to window.key
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
+      return;
+    }
+
+    // ignore keypressed in any elements that support keyboard data input
+    if (tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA') return;
+
+    // abort if no potentially matching shortcuts found
+    if (!(key in _handlers)) return;
+
+    // for each potential shortcut
+    for (i = 0; i < _handlers[key].length; i++) {
+      handler = _handlers[key][i];
+
+      // see if it's in the current scope
+      if(handler.scope == _scope || handler.scope == 'all'){
+        // check if modifiers match if any
+        modifiersMatch = handler.mods.length > 0;
+        for(k in _mods)
+          if((!_mods[k] && index(handler.mods, +k) > -1) ||
+            (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
+        // call the handler and stop the event if neccessary
+        if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
+          if(handler.method(event, handler)===false){
+            if(event.preventDefault) event.preventDefault();
+              else event.returnValue = false;
+            if(event.stopPropagation) event.stopPropagation();
+            if(event.cancelBubble) event.cancelBubble = true;
+          }
+        }
+      }
+}
+  };
+
+  // unset modifier keys on keyup
+  function clearModifier(event){
+    var key = event.keyCode, k;
+    if(key == 93 || key == 224) key = 91;
+    if(key in _mods) {
+      _mods[key] = false;
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
+    }
+  };
+
+  function resetModifiers() {
+    for(k in _mods) _mods[k] = false;
+    for(k in _MODIFIERS) assignKey[k] = false;
+  }
+
+  // parse and assign shortcut
+  function assignKey(key, scope, method){
+    var keys, mods, i, mi;
+    if (method === undefined) {
+      method = scope;
+      scope = 'all';
+    }
+    key = key.replace(/\s/g,'');
+    keys = key.split(',');
+
+    if((keys[keys.length-1])=='')
+      keys[keys.length-2] += ',';
+    // for each shortcut
+    for (i = 0; i < keys.length; i++) {
+      // set modifier keys if any
+      mods = [];
+      key = keys[i].split('+');
+      if(key.length > 1){
+        mods = key.slice(0,key.length-1);
+        for (mi = 0; mi < mods.length; mi++)
+          mods[mi] = _MODIFIERS[mods[mi]];
+        key = [key[key.length-1]];
+      }
+      // convert to keycode and...
+      key = key[0]
+      key = _MAP[key] || key.toUpperCase().charCodeAt(0);
+      // ...store handler
+      if (!(key in _handlers)) _handlers[key] = [];
+      _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
+    }
+  };
+
+  // initialize key.<modifier> to false
+  for(k in _MODIFIERS) assignKey[k] = false;
+
+  // set current scope (default 'all')
+  function setScope(scope){ _scope = scope || 'all' };
+  function getScope(){ return _scope || 'all' };
+
+  // cross-browser events
+  function addEvent(object, event, method) {
+    if (object.addEventListener)
+      object.addEventListener(event, method, false);
+    else if(object.attachEvent)
+      object.attachEvent('on'+event, function(){ method(window.event) });
+  };
+
+  // set the handlers globally on document
+  addEvent(document, 'keydown', dispatch);
+  addEvent(document, 'keyup', clearModifier);
+
+  // reset modifiers to false whenever the window is (re)focused.
+  addEvent(window, 'focus', resetModifiers);
+
+  // set window.key and window.key.setScope
+  global.key = assignKey;
+  global.key.setScope = setScope;
+  global.key.getScope = getScope;
+
+  if(typeof module !== 'undefined') module.exports = key;
+
+})(this);

data/lib/mouth/endoscope/public/linen.js

@@ -0,0 +1,46 @@
+// Me function for linenizing the background
+$(function() {
+  // temporary substitute for parameters:
+  var el = document.getElementById('current-dashboard');
+  
+  
+  var canvas   = document.createElement('canvas');
+  var context  = canvas.getContext('2d');
+  var x = parseInt(getStyle(el, 'width')), y = parseInt(getStyle(el, 'height'));
+  var hue = 0;
+  
+  canvas.width = x;
+  canvas.height = y;
+  
+  context.lineWidth = 0.25;
+  context.strokeStyle = 'hsla(0,0%,16%,1)';
+  
+  var grad = context.createLinearGradient(0, 0, x, 0);
+  grad.addColorStop(0, 'hsla(0,0%,10%,1)');
+  grad.addColorStop(0.5, 'hsla(0,0%,13%,1)');
+  grad.addColorStop(1, 'hsla(0,0%,10%,1)');
+  context.fillStyle = grad;
+  context.fillRect(0, 0, x, y);
+  
+  for (var i = 0; i <= x; i++) {
+    for (var j = 0; j <= y; j++) {        
+      if (Math.round(Math.random() * 30) === 30) {
+        context.moveTo(i, j + 0.5);
+        context.lineTo(i + (Math.ceil(Math.random() * 200)), j + 0.5);
+      } 
+  
+      if (Math.round(Math.random() * 30) === 30) {
+        context.moveTo(i + 0.5, j + 0.5);
+        context.lineTo(i + 0.5, j + (Math.ceil(Math.random() * 200)));
+      }
+    }
+  }
+  
+  context.stroke();
+  
+  el.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
+  
+  function getStyle(el, property) {
+    return el.style[property] || getComputedStyle(el, '').getPropertyValue(property);
+  }  
+});

data/lib/mouth/endoscope/public/seven.css

@@ -0,0 +1,68 @@
+path {
+    fill: none;
+}
+
+.seven-tip {
+    position: absolute;
+    background: #2e3a4f;
+    background: -moz-linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62769b), color-stop(35%, #2e3a4f), color-stop(65%, #2e3a4f), color-stop(100%, #212a3d));
+    background: -webkit-linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+    background: -o-linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+    background: -ms-linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+    background: linear-gradient(top, #62769b 0%, #2e3a4f 35%, #2e3a4f 65%, #212a3d 100%);
+    
+    border-radius: 4px 4px 4px 4px;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+
+    min-width: 120px;
+    top: 0;
+    left: 0;
+    padding: 2px;
+    
+    font-family: sans-serif;
+    font-size: 11px;
+    line-height: 12px;
+    
+}
+
+.seven-tip-inner {
+    background-color: #FFF;
+    border-radius: 2px 2px 2px 2px;
+}
+
+.seven-tip .seven-tip-time {
+    background-color: #F3F6FA;
+    padding: 4px;
+}
+
+.seven-tip li {
+    padding: 2px 4px;   
+}
+
+.seven-tip .color {
+    display: inline-block;
+    height: 12px;
+    margin-right: 4px;
+    vertical-align: text-top;
+    width: 12px;
+}
+
+.seven-scrubber {
+    top: 7px;
+    left: 0;
+    position: absolute;
+    width: 1px;
+    background: black;
+    z-index: 9000;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
+    opacity: 0.3;
+    -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);
+    -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);
+    -o-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);
+    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);
+}
+
+.seven .novalue {
+    display: none;
+}

data/lib/mouth/endoscope/public/seven.js

@@ -0,0 +1,291 @@
+(function($, window) {
+
+// Throttles the calling of the callback function by delay milliseconds
+function throttle(callback, delay) {
+  var lasttime = 0;
+
+  return function() {
+    var elapsed = +new Date() - lasttime
+    ,   args    = arguments
+    ,   self    = this;
+
+    if (elapsed > delay) {
+      lasttime = +new Date();
+      callback.apply(self, args);
+    }
+  }
+};
+
+function dateFor(startDate, granularityInMinutes, dataPoints) {
+  return new Date(+startDate + (granularityInMinutes * 60000 * (dataPoints - 1)));
+}
+
+var colors = d3.scale.ordinal().range("#007AD1 #469623 #EDDC00 #EB6D0E #BA0211 #572382 #029186 #9EA81D #F2A500 #E04107 #911258 #2144C7".split(' '));
+
+window.Seven = function(selector, opts) {
+  this.selector = selector;
+  this.element = $(selector);
+  this.dataSets = {};
+  this.startDate = new Date(opts.start);
+  this.granularityInMinutes = opts.granularityInMinutes;
+  this.points = opts.points;
+  this.endDate = dateFor(this.startDate, this.granularityInMinutes, this.points);
+  this.kind = opts.kind || 'counter';
+  this.dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
+}
+
+Seven.prototype = {
+  
+  graph: function(opts) {
+    var self = this
+    ,   name = opts.name || "default"
+    ;
+    
+    // Save our data.  Counters are named and there can be many.  Timers take up the whole graph.
+    this.dataSets[name] = {data: opts.data};
+    if (this.kind == 'timer') {
+      this.timingData = opts.data;
+    }
+    
+    // Empty out the graph.
+    // NOTE: improvement opportunity
+    this.element.empty();
+    
+    this.graphWidth = this.element.width();
+    this.graphHeight = this.element.height();
+    
+    var elD3 = d3.select(this.selector);
+    
+    // Calculate max value in slightly different ways for counter vs timer
+    var maxValue = null;
+    if (this.kind == 'counter') {
+      var allData = [];
+      _.each(this.dataSets, function(v, k) {
+        _.each(v.data, function(d) {
+          allData.push(d);
+        })
+      });
+      maxValue = d3.max(allData);
+    } else if (this.kind == 'timer') {
+      var allData = [];
+      _.each(this.timingData, function(d) {
+        if (d.mean !== null) {
+          allData.push(d.mean + d.stddev);
+        }
+      })
+      maxValue = d3.max(allData);
+    }
+    
+    // Calculate scales
+    this.xScale = d3.time.scale().domain([this.startDate, this.endDate]).range([7, this.graphWidth - 12]);
+    this.xScaleIndex = d3.time.scale().domain([this.startDate, this.endDate]).range([0, this.points - 1]);
+    this.yScale = d3.scale.linear().domain([0, maxValue]).range([7, this.graphHeight - 7]);
+    
+    // Add in our svg element
+    var svg = elD3
+      .append('svg:svg')
+      .attr('class', 'seven ' + this.kind)
+      .attr("width", this.graphWidth)
+      .attr("height", this.graphHeight);
+    
+    // Create a translating group
+    var svgGroup = svg.append("svg:g")
+        .attr("transform", "translate(" + 0 + "," + this.graphHeight + ")");
+    
+    if (this.kind == 'counter') {
+      // Add the paths
+      var i = 0;
+      _.each(this.dataSets, function(datasetObj, datasetName) {
+        var datasetValues = datasetObj.data;
+        datasetObj.color = colors(i);
+        
+        var line = d3.svg.line()
+            //.interpolate("basis")
+            .x(function(d, i) { return self.xScale(dateFor(self.startDate, self.granularityInMinutes, i + 1)); })
+            .y(function(d) { return -1 * self.yScale(d); });
+
+        var path = svgGroup.append("svg:path").attr("d", line(datasetValues))
+            .attr('stroke', datasetObj.color)
+            .attr('stroke-width', 1);
+
+        i += 1;
+      });
+    } else if (this.kind == 'timer') {
+      this.barWidth = (this.graphWidth - 19) / this.points;
+      this.barScale = d3.scale.linear().domain([0, 1]).range([0, this.barWidth]);
+      
+      svgGroup.selectAll('rect.stddev')
+          .data(this.timingData)
+        .enter().append("rect")
+          .attr('class', function(d, i) { return d.mean !== null ? 'stddev' : 'novalue'; })
+          .attr("x", function(d, i) { return self.barScale(i) + 6.5; })
+          .attr("y", function(d) { return -self.yScale(d.mean + d.stddev) - .5; })
+          .attr("width", this.barWidth)
+          .attr("height", function(d) { return self.yScale(d.stddev * 2); })
+          .attr('fill', colors(0));
+
+       svgGroup.selectAll('rect.mean')
+           .data(this.timingData)
+         .enter().append("rect")
+           .attr('class', function(d, i) { return d.mean !== null ? 'mean' : 'novalue'; })
+           .attr("x", function(d, i) { return self.barScale(i) + 6.5; })
+           .attr("y", function(d) { return -self.yScale(d.mean) + 2; })
+           .attr("width", this.barWidth)
+           .attr("height", function(d) { return 2; })
+           .attr('fill', 'white');
+    }
+    
+    //  Draw axis
+    svgGroup.append("svg:line") // x-axis
+        .attr("x1", this.xScale(this.startDate) - 2)
+        .attr("y1", -1 * this.yScale(0) + 2.5)
+        .attr("x2", this.xScale(this.endDate))
+        .attr("y2", -1 * this.yScale(0) + 2.5)
+        .attr('stroke', '#AAA').attr('stroke-width', 1);
+    
+    svgGroup.append("svg:line") // y-axis
+        .attr("x1", this.xScale(this.startDate) - 2.5)
+        .attr("y1", -1 * this.yScale(0) + 2)
+        .attr("x2", this.xScale(this.startDate) - 2.5)
+        .attr("y2", -1 * this.graphHeight - 7)
+        .attr('stroke', '#AAA').attr('stroke-width', 1);
+    
+    // Handle the tool tip
+    this.element.bind('mousemove', throttle(function(e) {
+      var offset = self.element.offset()
+      ,   cx = e.pageX - offset.left
+      ,   cy = e.pageY - offset.top
+      ;
+      
+      self.showTip({
+        x: cx,
+        y: cy
+      });
+    }, 50));
+    
+    this.element.bind('mouseleave', function(e) {
+      self.hideTip();
+    });
+    
+    return this;
+  },
+  
+  showTip: function(opts) {
+    var self = this
+    ,   html
+    ,   date = this.xScale.invert(opts.x)
+    ,   index = Math.round(this.xScaleIndex(date))
+    ,   nearestDate = this.xScaleIndex.invert(index)
+    ,   leftAnchor = this.xScale(nearestDate)
+    ,   tipRows = self.kind == 'counter' ? _.size(this.dataSets) : 7
+    ,   tipWidth
+    ,   tipHeight
+    ,   tipLeft
+    ,   tipTop
+    ;
+    
+    if (index < 0 || index >= this.points) {
+      this.hideTip();
+      return;
+    }
+    
+    // Timers have a slightly different 'center' to align to the scrubber
+    if (this.kind == 'timer') {
+      leftAnchor = (index + 0.5) * this.barWidth + 6;
+    }
+    
+    // Build the tip if it doesn't exist
+    if (!this.tip) {
+      html = [
+        '<div class="seven-tip">',
+          '<div class="seven-tip-inner">',
+            '<div class="seven-tip-time"></div>',
+            '<ul class="seven-tip-values"></ul>',
+          '</div>',
+        '</div>'
+      ];
+      
+      this.tip = $(html.join(''));
+      this.element.append(this.tip);
+      this.tipSide = 'right';
+    }
+    
+    this.tip.find('.seven-tip-time').text(this.dateFormat(nearestDate));
+    
+    this.tip.css({display: 'block'});
+    
+    tipWidth = this.tip.width();
+    tipHeight = this.tip.height();
+    if (this.tipSide == 'right' && ((leftAnchor + 25 + tipWidth) >= this.graphWidth)) {
+      this.tipSide = 'left';
+    } else if (this.tipSide == 'left' && ((leftAnchor - 25 - tipWidth) <= 0)) {
+      this.tipSide = 'right';
+    }
+    
+    if (this.tipSide == 'right') {
+      tipLeft = leftAnchor + 20;
+    } else {
+      tipLeft = leftAnchor - 20 - tipWidth;
+    }
+    
+    tipTop = opts.y - 10;
+    if ((tipTop + tipHeight + 10) > this.graphHeight) {
+      tipTop = this.graphHeight - tipHeight - 10;
+    }
+    
+    if (tipTop < 0) {
+      tipTop = 5;
+    }
+    
+    this.tip.css({
+      top: tipTop,
+      left: tipLeft
+    });
+    
+    html = [];
+    _.each(this.dataSets, function(datasetObj, datasetName) {
+      var datasetValues = datasetObj.data
+      
+      if (self.kind == 'counter') {
+        var n = datasetValues[index];
+        if (n !== null) n = Math.round(n * 100) / 100;
+        html.push([
+          '<li>',
+            '<span class="key"><span class="color" style="background-color:' + datasetObj.color + '"></span>' + datasetName + ': </span>',
+            '<span class="value">' + n + '</span>',
+          '</li>'
+        ].join(''));
+      } else if (self.kind == 'timer') {
+        var t = datasetValues[index]
+        ,   fields = ['count', 'mean', 'median', 'stddev', 'min', 'max', 'sum']
+        ;
+        
+        _.each(fields, function(f) {
+          var n = t[f];
+          if (n !== null) n = Math.round(n * 100) / 100;
+          html.push('<li><span class="key">' + f + ': </span><span class="value">' + n + '</span></li>');
+        });
+      }
+    });
+    this.tip.find('.seven-tip-values').html(html.join(''));
+    
+    if (!this.scrubber) {
+      html = '<div class="seven-scrubber"></div>'
+      this.scrubber = $(html);
+      this.element.append(this.scrubber);
+    }
+    this.scrubber.css({display: 'block', left: leftAnchor, height: this.graphHeight - 14});
+  },
+  
+  hideTip: function() {
+    if (this.tip) {
+      this.tip.css({display: 'none'});
+    }
+    if (this.scrubber) {
+      this.scrubber.css({display: 'none'});
+    }
+  }
+  
+};
+  
+}(jQuery, this));