omf_web 0.9.1 → 0.9.3

data/share/htdocs/js/graph/line_chart2.js

@@ -1,232 +0,0 @@
-L.provide('OML.line_chart2', ["graph/abstract_chart", "#OML.abstract_chart", "graph/axis", "#OML.axis", "graph.css", "/resource/vendor/d3/d3.js"], function () {
-
-  OML.line_chart2 = OML.abstract_chart.extend({
-    decl_properties: [
-      ['x_axis', 'key', {property: 'x'}], 
-      ['y_axis', 'key', {property: 'y'}], 
-      ['group_by', 'key', {property: 'id', optional: true}],             
-      ['stroke_width', 'int', 2], 
-      ['stroke_color', 'color', 'category10()'],
-      ['stroke_fill', 'color', 'blue']
-    ],
-    
-    base_css_class: 'oml-line-chart',
-    
-    configure_base_layer: function(vis) {
-      //OML.abstract_chart.prototype.initialize.call(this, opts);
-      var base_layer = this.base_layer = vis.append("svg:g")
-                 ;
-
-      var ca = this.widget_area; 
-      this.legend_layer = base_layer.append("svg:g");
-      this.chart_layer = base_layer.append("svg:g");
-                                    //.attr("transform", "translate(" + ca.x + ", " + (this.h - ca.y) + ")");
-      this.axis_layer = base_layer.append('svg:g').attr("class", "axis_layer");
-    },
-    
-  
-    redraw: function(data) {
-      var self = this;
-      var o = this.opts;
-      var ca = this.widget_area;
-      var m = this.mapping;
-  
-      /* 'data' should be an an array (each line) of arrays (each tuple)
-       * The following code assumes that the tuples are sorted in ascending 
-       * value associated with the x-axis. 
-       */
-      var x_index = m.x_axis;
-      var y_index = m.y_axis;
-      var group_by = m.group_by;
-      if (group_by != null) {
-        data = this.group_by(data, group_by);
-      } else {
-        data = [data];
-      };
-      
-      
-      // The following assumes that the data is sorted in ascending value for x_axis
-      var o_xaxis = o.mapping.x_axis || {}
-      var x_max = this.x_max = o_xaxis.max != undefined ? o_xaxis.max : d3.max(data, function(d) {
-        var last = d[d.length - 1];
-        var x = x_index(last);
-        return x;
-      });
-      
-      var x_min = this.x_min = o_xaxis.min != undefined ? o_xaxis.min : d3.min(data, function(d) {return x_index(d[0]);});
-      var x = this.x = d3.scale.linear().domain([x_min, x_max]).range([0, ca.w]).nice();
-      var x_max_cnt = d3.max(data, function(d) {return d.length});
-      if (x_max_cnt > ca.w) {
-        data = this.reduce_data(data, x, x_index);
-      }
-  
-  
-      var y_domain = this.extent_2d(data, y_index, o.mapping.y_axis);
-      d3.min(data, function(s) {
-        var f = y_index;
-          var t = f([1,2,3,4,5,6,7,8,9,10,11,12]);
-          var m = d3.min(s, f);
-          return m;
-      });
-      var y = this.y = d3.scale.linear()
-                        .domain(y_domain)
-                        .nice();
-        
-      this.redraw_axis(x, y);
-
-      // *** LINES ****
-      y.range([0, ca.h]);
-      var line = d3.svg.line()
-        .x(function(t) { return x(x_index(t)) })
-        .y(function(t) { return -1 * y(y_index(t)); })
-        ;
-  
-      // In case the widget got resized
-      this.chart_layer.attr("transform", "translate(" + ca.x + ", " + (this.h - ca.y) + ")");
-        
-      
-      var self = this;
-      var lines = this.chart_layer.selectAll(".chart")
-                    .data(data, function(d, i) { return i; })
-                    ;
-                    
-      lines.transition().duration(0).attr("d", function(d) { return line(d); });
-      lines.enter()
-        .append("svg:path")
-          .attr("stroke-width", m.stroke_width)
-          .attr("d", function(d) {
-              var l = line(d);
-              return l;
-            })
-          .attr("class", "chart")
-          .attr("stroke", m.stroke_color)
-          .attr("fill", "none")
-          .on("mouseover", function(data) {
-            var group_by = self.mapping.group_by;
-            if (group_by) {
-              var name = group_by(data[0]);
-              self.on_highlighted({'elements': [{'id': name}]});
-            }
-          })
-          .on("mouseout", function() {
-            self.on_dehighlighted({});
-          })         
-          ;
-      lines.exit().remove();
-      
-      this.update_selection({});
-    },
-    
-    redraw_axis: function(x, y) {
-      var ca = this.widget_area;
-      var oAxis = this.opts.axis || {};
-
-      if (!this.xAxis) {
-        this.xAxis = OML.line_chart2_axis(oAxis.x).scale(x).orient("bottom").range([0, ca.w]);      
-        this.axis_layer
-          .append('g')
-            .attr('class', 'x axis')
-            ;
-      }
-      var xAxis = this.xAxis.scale(x).range([0, ca.w]);
-      this.axis_layer.select('g.x.axis')
-            .attr("transform", "translate(" + ca.x + "," + (ca.ty + ca.h) + ")")
-            .call(xAxis);
-          
-      if (!this.yAxis) {
-        this.yAxis = OML.line_chart2_axis(oAxis.y).orient("left");
-        this.axis_layer
-          .append('g')
-            .attr('class', 'y axis')
-            ;
-      }
-      y.range([ca.h, 0]);
-      var yAxis = this.yAxis.scale(y).range([0, ca.h]);
-      this.axis_layer.select('g.y.axis')
-                .attr("transform", "translate(" + ca.x + "," + ca.ty + ")")
-                .call(yAxis);
-    },
-    
-    reduce_data: function(data, x_f, x_index_f) {
-      // To much data, downsample
-      var data2 = [];
-      var self = this;
-      data.map(function(l) {
-        var xcurr = -999999;
-        var l2 = [];
-        l.map(function(t) {
-            var x = Math.round(x_f(x_index_f(t)));
-            if (x > xcurr) {
-              l2.push(t);
-              //xcurr = x + 1; // add a 'spare' pixel between consecutive points
-              xcurr = x;
-            }
-          });
-        data2.push(l2);
-      });
-      return(data2);
-    },
-    
-    on_highlighted: function(evt) {
-      var els = evt.elements;
-      var names = _.map(els, function(el) { return el.id});
-      var vis = this.chart_layer;
-      var group_by = this.mapping.group_by;
-      if (group_by) {
-        vis.selectAll(".chart")
-         .filter(function(d) {
-           var dname = group_by(d[0]);
-           return ! _.include(names, dname);
-         })
-         .transition()
-           .style("opacity", 0.1)
-           .delay(0)
-           .duration(300);
-      }
-      if (evt.source == null) {
-        evt.source = this;
-        OHUB.trigger("graph.highlighted", evt);
-      }
-    },
-
-    on_dehighlighted: function(evt) {
-      var vis = this.chart_layer;
-      vis.selectAll(".chart")
-       .transition()
-         .style("opacity", 1.0)         
-         .delay(0)
-         .duration(300)
-      if (evt.source == null) {
-        evt.source = this;
-        OHUB.trigger("graph.dehighlighted", evt);
-      }
-    },
-    
-  
-    clear: function(data) {
-      this.data = null;
-      var lines = this.chart_layer.selectAll(".chart")
-                    .data([])
-                    .exit().remove();
-    },
-    
-    // Return a subset of the associated data set where the value mapped
-    // to the x-axis is within the <+min+, +max> range.
-    //
-    filter_x: function(min, max) {
-      var xi = this.mapping.x_axis;
-      return this.data.filter(function(t) {
-        var x = t[xi];
-        return (x > min && x <= max);
-      })
-    },
-  })
-})
-
-/*
-  Local Variables:
-  mode: Javascript
-  tab-width: 2
-  indent-tabs-mode: nil
-  End:
-*/

data/share/htdocs/js/graph/line_chart_fc.js

@@ -1,94 +0,0 @@
-L.provide('OML.line_chart_fc', ["/resource/vendor/d3/d3.js", "graph/line_chart", '#OML.line_chart'], function () {
-
-  OML['line_chart_fc'] = function(opts) {
-    this.version = "0.5";
-  
-  
-    this.init = function(opts) {
-      var opts = this.opts = opts || {};
-      var h = opts.height || 300;
-      var w = opts.width || 400;
-      var gap = opts.gap || 20;
-      var vis = this.init_svg(w, h);
-  
-      var fopts = opts.focus || {};
-      var copts = opts.context || {};
-      
-      // calculate height of two graphs.
-      var fh = fopts.height;
-      var ch = copts.height;
-      if (fh && !ch) ch = 1.0 - fh;
-      if (!fh && ch) fh = 1.0 - ch;
-      if (!fh && !ch) { ch = 0.3; fh = 1.0 - ch};
-      fopts.height = (h - gap) * fh;
-      copts.height = (h - gap) * ch;
-  
-      fopts.width = copts.width = w;
-      fopts.schema = opts.schema;
-      fopts.mapping = fopts.mapping || opts.mapping;
-      fopts.svg = fopts.base_el = vis;
-      this.focus = new OML.line_chart(fopts);
-  
-      copts.svg = copts.base_el = vis;
-      copts.schema = opts.schema;
-      copts.mapping = copts.mapping || opts.mapping;
-      copts.y = h - copts.height;
-      this.context = new OML.line_chart(copts);
-      var self = this;
-      this.context.init_selection(function(ctxt, x_min, x_max) {
-      	var min = Math.round(x_min);
-      	var max = Math.round(x_max);
-      
-      	// d3.select("#x_min span").text(min);
-      	// d3.select("#x_max span").text(max);
-      
-      	if ((max - min) == 0) {
-      	  // clear selection
-      	  self.focus.clear(null);
-      	  return;
-      	}
-      	if ((max - min) < 3) return;
-      	
-      	var d = ctxt.filter_x(min, max)
-      	self.focus.update([{name: 'default', events: d}]);
-      });
-  
-      var data = opts.data;
-      if (data) this.update(data);
-    };
-  
-    this.append = function(data) {
-      this.context.append(data);
-    };
-
-    this.update = function(data) {
-      this.context.update(data);
-    };
-    
-    this.init_svg = function(w, h) {
-      var opts = this.opts;
-
-      if (opts.svg) return opts.svg;
-      
-      var base_el = opts.base_el || "body";
-      if (typeof(base_el) == "string") base_el = d3.select(base_el);
-      var vis = opts.svg = base_el.append("svg:svg")
-        .attr("width", w)
-        .attr("height", h);
-      if (opts.x) {
-        // the next two lines do the same, but only one works 
-        // in the specific context
-        vis.attr("x", opts.x);
-        vis.style("margin-left", opts.x + "px"); 
-      }
-      if (opts.y) {
-        vis.attr("y", opts.y);
-        vis.style("margin-top", opts.y + "px"); 
-      }
-      return vis;
-    }
-  
-    this.init(opts);
-  }
-})
-

data/share/htdocs/js/graph/map.js

@@ -1,85 +0,0 @@
-
-
-//L.provide('OML.map', ["d3", "http://maps.googleapis.com/maps/api/js?sensor=true"], function () {
-L.provide('OML.googleLoader', ["http://www.google.com/jsapi"], function () {  
-  google.load("maps", "3", {"callback" : onMapLoaded, "other_params":"sensor=true"});
-});
-
-function onMapLoaded() {
-  
-  L.provide('OML.map', ["d3/d3"], function () {  
-    
-    OML['map'] = function(opts){
-      this.opts = opts;
-  
-      this.init = function(opts) {
-        var base_el = opts.base_el || '#map'
-        var node = d3.select(base_el).node();
-        node.style = "width:100%; height:100%"; 
-        var map = this.map = new google.maps.Map(node, {
-          zoom: 8,
-          center: new google.maps.LatLng(37.76487, -122.41948),
-          mapTypeId: google.maps.MapTypeId.TERRAIN
-        });
-  
-  // Load the station data. When the data comes back, create an overlay.
-  //d3.json("stations.json", function(data) {
-        
-        var data = opts.data;
-        if (data) this.update(data);
-      };
-  
-      this.update = function(data) {
-        var overlay = new google.maps.OverlayView();
-      
-        // Add the container when the overlay is added to the map.
-        overlay.onAdd = function() {
-          var layer = d3.select(this.getPanes().overlayLayer).append("div")
-              .attr("class", "stations");
-      
-          // Draw each marker as a separate SVG element.
-          // We could use a single SVG, but what size would it have?
-          overlay.draw = function() {
-            var projection = this.getProjection();
-      
-            var marker = layer.selectAll("svg")
-                .data(d3.entries(data))
-                .each(transform) // update existing markers
-              .enter().append("svg:svg")
-                .each(transform)
-                .attr("class", "marker");
-      
-            // Add a circle.
-            marker.append("svg:circle")
-                .attr("r", 4.5);
-      
-            // Add a label.
-            marker.append("svg:text")
-                .attr("x", 7)
-                .attr("dy", ".31em")
-                .text(function(d) { return d.key; });
-      
-            function transform(d) {
-              d = new google.maps.LatLng(d.value[1], d.value[0]);
-              d = projection.fromLatLngToDivPixel(d);
-              return d3.select(this)
-                  .style("left", d.x + "px")
-                  .style("top", d.y + "px");
-            }
-          };
-        };      
-      };
-      
-      this.init(opts);
-    }
-  });
-
-}
-
-/*
-  Local Variables:
-  mode: Javascript
-  tab-width: 2
-  indent-tabs-mode: nil
-  End:
-*/