omf_web 0.9.1 → 0.9.3

data/share/htdocs/js/graph/histogram.js

@@ -1,229 +0,0 @@
-
-L.provide('OML.histogram', ["graph/abstract_chart", "#OML.abstract_chart", "graph/axis", "#OML.axis",
-//                              ["/resource/vendor/d3/d3.js", "/resource/vendor/d3/d3.layout.js"]], 
-                              ["/resource/vendor/d3/d3.js"]], 
-  function () {
-
-  OML['histogram'] = OML.abstract_chart.extend({
-    decl_properties: [
-      ['value', 'float', {property: 'value'}], 
-      // ['x_axis', 'key', {property: 'x'}], 
-      // ['y_axis', 'key', {property: 'y'}], 
-      // ['group_by', 'key', {property: 'id', optional: true}],             
-      ['stroke_width', 'int', 2], 
-      ['stroke_color', 'color', 'white'],
-      ['fill_color', 'color', 'blue']
-    ],
-    
-    defaults: function() {
-      //var d = OML.histogram.__super__.defaults.call(this);
-      return this.deep_defaults({
-        //bins: 5, // specify the number of bins to be used in the histogram
-        unique: false, // If true, buckets are defined by unique 'values'
-        axis: {
-          x: {
-            ticks: {
-              format: ",.2f"
-            }
-          }
-        }
-      }, OML.histogram.__super__.defaults.call(this));      
-    },    
-    
-    base_css_class: 'oml-line-chart',
-    
-    // initialize: function(opts) {
-      // var o = OML.histogram.__super__.defaults.call(this);
-      // OML.histogram.__super__.initialize.call(this, opts);
-    // },    
-
-    configure_base_layer: function(vis) {
-      var base = this.base_layer = vis.append("svg:g")
-                                      .attr("class", "histogram")
-                                      ;
-                 //.attr("transform", "translate(0, " + this.h + ")");
-
-      var ca = this.chart_area; 
-      this.legend_layer = base.append("svg:g");
-      this.chart_layer = base.append("svg:g");
-      this.axis_layer = base.append('g');
-    },
-    
-    redraw: function(data) {
-      var self = this;
-      var o = this.opts;
-      var ca = this.widget_area;
-      var m = this.mapping;
-
-      var hdata;      
-      // if (o.unique) {
-        // hdata = this.unique_histogram(data);
-      // } else {
-        var histogram = d3.layout.histogram();
-        histogram.value(m.value);
-        var bins = o.bins ? histogram.bins(o.bins) : histogram.bins();
-        if (o.density != 'undefined"') histogram.frequency(! o.density);
-        hdata = histogram(data);
-      // }
-      
-      var u = _.map(_.uniq(data, false, m.value), m.value).sort();      
-
-      var x = d3.scale.ordinal()
-          .domain(hdata.map(function(d) { 
-            return d.x; 
-          }))
-          .rangeRoundBands([0, ca.w]);
-       
-      var y = d3.scale.linear()
-          .domain([0, d3.max(hdata.map(function(d) { return d.y; }))])
-          .range([0, ca.h])
-          .nice()
-          ;
-
-      this.chart_layer.selectAll("rect")
-          .data(hdata)
-        .enter().append("rect")
-          .attr("width", x.rangeBand())
-          .attr("x", function(d) { return x(d.x) + ca.x; })
-          .attr("y", function(d) { return ca.ty + ca.h - y(d.y); })
-          .attr("height", function(d) { return y(d.y); })
-          .attr("stroke-width", m.stroke_width)
-          .attr("stroke", m.stroke_color)
-          .attr("fill", m.fill_color)
-          ;
-
-      var oAxis = o.axis || {};
-      
-      // Create an X axis with ticks at the boundaries of the bar charts
-      //
-      var ticks = hdata.map(function(d) { return d.x - 0.5 * d.dx; });
-      var xmin = ticks[0];
-      var xmax = d3.max(hdata.map(function(d) { return d.x + 0.5 * d.dx; }));
-      ticks.push(xmax);
-      var ax_f = d3.scale.linear()
-          .domain([xmin, xmax])
-          .range([0, ca.w])
-          ;           
-      if (this.xAxis) {
-        var xAxis = this.xAxis.scale(ax_f).tick_values(ticks);
-        this.axis_layer.select('g.x.axis').call(xAxis);
-      } else {
-        var xAxis = this.xAxis = OML.line_chart2_axis(oAxis.x).scale(ax_f).tick_values(ticks).orient("bottom").range([0, ca.w]);      
-        this.axis_layer
-          .append('g')
-            .attr("transform", "translate(" + ca.x + "," + (ca.ty + ca.h) + ")")
-            .attr('class', 'x axis')
-            .call(xAxis)
-            ;
-      }
-      
-      // Y axis is normal
-      //
-      var inv_y = y.range([ca.h, 0]);
-      if (this.yAxis) {
-        var yAxis = this.yAxis.scale(inv_y);
-        this.axis_layer.select('g.y.axis').call(yAxis);
-      } else {
-        var yAxis = this.yAxis = OML.line_chart2_axis(oAxis.y).scale(inv_y).orient("left").range([0, ca.h]);
-        this.axis_layer
-          .append('g')
-            .attr("transform", "translate(" + ca.x + "," + ca.ty + ")")
-            .attr('class', 'y axis')
-            .call(yAxis)
-            ;
-      }
-                 
-      
-    },
-
-    // Calculate the 'histogram' over 'data' assuming that applying the 'value' operator
-    // over 'data' provides a limited number of unique values which are treated as the bins.
-    //
-    unique_histogram: function(data) {
-      var self = this;
-      var o = this.opts;
-      var ca = this.widget_area;
-      var value_f = this.mapping.value;
-      
-      var h = {};
-      var count = 0;
-      _.map(data, function(s) {
-        var key = value_f(s);
-        count = count + 1;
-        h[key] = 1 + (h[key] || 0);
-      })
-      var buckets = _.keys(h).sort();
-      var result = _.map(buckets, function(k) { return h[k]; });
-      var i = 0;
-    },
-    
-    // redraw2: 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];
-      // // }
-// 
-      // var histogram = d3.layout.histogram();
-      // var x = d3.scale.ordinal();
-      // var y = d3.scale.linear();
-      // //xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0);
-//           
-      // histogram.value(m.value);
-      // data = histogram(data);
-// 
-      // // Update the x-scale.
-      // x.domain(data.map(function(d) { return d.x; }))
-          // .rangeRoundBands([0, ca.w], .1);
-// 
-      // // Update the y-scale.
-      // y.domain([0, d3.max(data, function(d) { return d.y; })])
-          // .range([ca.h, 0]);
-// 
-      // // Select the svg element, if it exists.
-      // var svg = this.chart_layer.selectAll(".chart").data([data]);
-// 
-      // // Otherwise, create the skeletal chart.
-      // var gEnter = svg.enter().append("svg").append("g");
-      // gEnter.append("g").attr("class", "bars");
-      // gEnter.append("g").attr("class", "x axis");
-// 
-      // // // Update the outer dimensions.
-      // // svg .attr("width", width)
-          // // .attr("height", height);
-// // 
-      // // // Update the inner dimensions.
-      // var g = svg.select("g")
-          // .attr("transform", "translate(" + ca.x + "," + ca.y + ca.h + ")");
-// 
-      // // Update the bars.
-      // var bar = svg.select(".bars").selectAll(".bar").data(data);
-      // bar.enter().append("rect");
-      // bar.exit().remove();
-      // bar .attr("width", x.rangeBand())
-          // .attr("x", function(d) { return x(d.x); })
-          // .attr("y", function(d) { return y(d.y); })
-          // .attr("height", function(d) { return y.range()[0] - y(d.y); })
-          // .order();
-//           
-// 
-      // // Update the x-axis.
-      // // g.select(".x.axis")
-          // // .attr("transform", "translate(0," + y.range()[0] + ")")
-          // // .call(xAxis);
-    // }
-
-  }) // end of histogram
-}) // end of provide

data/share/htdocs/js/graph/line_chart.js

@@ -1,342 +0,0 @@
-L.provide('OML.line_chart', ["graph/abstract_chart", "#OML.abstract_chart", "graph.css", ["/resource/vendor/d3/d3.js", "/resource/vendor/d3/d3.time.js"]], function () {
-
-var o = OML;
-
-  
-  OML['line_chart'] = 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', 'black'],
-      ['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")
-                 .attr("transform", "translate(0, " + this.h + ")");
-
-
-      var ca = this.chart_area; 
-      //var g =  this.base_layer;
-  
-      this.legend_layer = base_layer.append("svg:g");
-      var g = this.chart_layer = base_layer.append("svg:g");
-      g.append("svg:line")
-        .attr("class", "xAxis axis")      
-        .attr("x1", ca.x)
-        .attr("y1", -1 * ca.y)
-        .attr("x2", ca.x + ca.w)
-        .attr("y2", -1 * ca.y);
-  
-      g.append("svg:line")
-        .attr("class", "yAxis axis")      
-        .attr("x1", ca.x)
-        .attr("y1", -1 * ca.y)
-        .attr("x2", ca.x)
-        .attr("y2", -1 * (ca.y + ca.h));
-    },
-    
-  
-    redraw: function(data) {
-      var self = this;
-      
-      
-      var o = this.opts;
-      var ca = this.widget_area;
-      var m = this.mapping;
-
-      /* GENERALIZE THIS */
-      var stroke_color_f = d3.scale.category10();
-      m.stroke_color = function(d, i) { 
-        return stroke_color_f(i); 
-      };
-      
-      //this.color = o['color'] || d3.scale.category10();
-  
-      /* 'data' should be an an array (each line) of arryas (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 x_max = this.x_max = o.xmax != undefined ? o.xmax : d3.max(data, function(d) {
-        var last = d[d.length - 1];
-        var x = x_index(last);
-        return x;
-      });
-      var x_max_cnt = d3.max(data, function(d) {return d.length});
-      var x_min = this.x_min = o.xmin != undefined ? o.xmin : d3.min(data, function(d) {return x_index(d[0]);});
-      var x = this.x = d3.scale.linear().domain([x_min, x_max]).range([ca.x, ca.x + ca.w]);
-  
-      if (x_max_cnt > ca.w) {
-        // To much data, downsample
-        var data2 = [];
-        data.map(function(l) {
-            var xcurr = -999999;
-            var l2 = [];
-            l.map(function(t) {
-                var x = Math.round(self.x(x_index(t)));
-                if (x > xcurr) {
-                  l2.push(t);
-                  //xcurr = x + 1; // add a 'spare' pixel between consecutive points
-                  xcurr = x;
-                }
-              });
-            data2.push(l2);
-          });
-        data = data2;
-      }
-  
-  
-      //    var x_min = this.x_min = d3.min(data, function(d) {return d3.min(d, function(d) {return d.x})});
-      var y_max = this.y_max = o.ymax != undefined ? o.ymax : d3.max(data, function(s) {return d3.max(s, function(t) {return y_index(t)})});
-      var y_min = this.y_min = o.ymin != undefined ? o.ymin : d3.min(data, function(s) {return d3.min(s, function(t) {return y_index(t)})});
-      var y = this.y = d3.scale.linear().domain([y_min, y_max]).range([ca.y, ca.y + ca.h]);
-  
-  
-      //var stroke_width = o.stroke_width ? o.stroke_width : 2;
-      var line = d3.svg.line()
-        .x(function(t) { return x(x_index(t)) })
-        .y(function(t) { return -1 * y(y_index(t)); })
-        ;
-  
-      var self = this;
-      var lines = this.chart_layer.selectAll(".chart")
-                    .data(data, function(d, i) { return i; })
-                    .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_ticks();
-      this.update_selection({});
-    },
-    
-    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);
-      })
-    },
-  
-    update_ticks: function() {
-      var y = this.y;
-      var x = this.x;
-      var g = this.base_layer;
-      var ca = this.chart_area;
-  
-      var tick_length = 7;
-      var label_spacing = tick_length + 2;
-  
-      var xa_opts = this.opts['xaxis'] || {};
-      var ya_opts = this.opts['yaxis'] || {};
-  
-      var xTicksA = x.ticks(xa_opts['ticks'] || 5);
-      if (xa_opts['show_labels'] != false) {
-        // TODO: FIX ME!!!!
-        var xLabelOpts = xa_opts['label'];
-        var xFormat;
-        if (xLabelOpts) {
-          if (xLabelOpts.type == 'date') {
-            var xFormatter = d3.time.format(xLabelOpts.format || "%X");
-            xFormat = function(d) {
-              var date = new Date(1000 * d);  // TODO: Implicitly assuming that value is in seconds is most likely NOT a good idea
-              var fs = xFormatter(date); 
-              return fs;
-            }
-          } else {
-            var xFormatter = d3.format(xLabelOpts.format || "g");
-            xFormat = function(d) {
-              var fs = xFormatter(d); 
-              return fs;
-            }
-          }
-        } else {
-          xFormat = function(d) {return d};
-        }
-        
-        // xFormat = function(d) {
-          // var ds = "" + d;
-          // var date = new Date(1000 * d);
-          // var fs = tformat(date); 
-          // return fs;
-        // }
-        
-        var xLabel = g.selectAll(".xLabel")
-            .data(xTicksA)
-            .text(xFormat)
-            .attr("x", function(d) { return x(d) });
-        xLabel.enter().append("svg:text")
-            .attr("class", "xLabel")
-            .text(xFormat)
-            .attr("x", function(d) { return x(d) })
-            .attr("y", -1 * (ca.y - label_spacing))
-            .attr("text-anchor", "middle")
-            .attr("dominant-baseline", "text-before-edge");
-        xLabel.exit().remove();
-  
-        var xTicks = g.selectAll(".xTicks")
-          .data(xTicksA)
-          .attr("x1", function(d) { return x(d); })
-          .attr("x2", function(d) { return x(d); })
-        xTicks.enter().append("svg:line")
-          .attr("class", "xTicks ticks")
-          .attr("x1", function(d) { return x(d); })
-          .attr("y1", -1 * ca.y)
-          .attr("x2", function(d) { return x(d); })
-          .attr("y2", -1 * (ca.y - tick_length));
-        xTicks.exit().remove();
-      };
-  
-      if (xa_opts['show_grids'] != false) {
-        var xGrids = g.selectAll(".xGrids")
-          .data(xTicksA)
-          .attr("x1", function(d) { return x(d); })
-          .attr("x2", function(d) { return x(d); })
-        xGrids.enter().append("svg:line")
-          .attr("class", "xGrids grids")
-          .attr("x1", function(d) { return x(d); })
-          .attr("y1", -1 * ca.y)
-          .attr("x2", function(d) { return x(d); })
-          .attr("y2", -1 * (ca.h + ca.y));
-        xGrids.exit().remove();
-      };
-  
-      var yTicksCnt = ya_opts['ticks'] ? ya_opts['ticks'] : (this.h / 30);
-      var yTicksA = y.ticks(yTicksCnt);
-      if (ya_opts['show_labels'] != false) {
-        var yFormat = ya_opts['label'] || function(d) {return d};
-  
-        var yLabel = g.selectAll(".yLabel")
-            .data(yTicksA)
-            .text(yFormat)
-            .attr("y", function(d) { return -1 * y(d) })
-        yLabel.enter().append("svg:text")
-            .attr("class", "yLabel")
-            .text(yFormat)
-            .attr("x", ca.x - label_spacing)
-            .attr("y", function(d) { return -1 * y(d) })
-            .attr("text-anchor", "end")
-            .attr("dy", 4);
-        yLabel.exit().remove();
-  
-        var yTicks = g.selectAll(".yTicks")
-          .data(yTicksA)
-          .attr("y1", function(d) { return -1 * y(d); })
-          .attr("y2", function(d) { return -1 * y(d); })
-        yTicks.enter().append("svg:line")
-          .attr("class", "yTicks ticks")
-          .attr("y1", function(d) { return -1 * y(d); })
-          .attr("x1", ca.x - tick_length)
-          .attr("y2", function(d) { return -1 * y(d); })
-          .attr("x2", ca.x);
-        yTicks.exit().remove();
-      }
-  
-      if (ya_opts['show_grids'] != false) {
-        var yGrids = g.selectAll(".yGrids")
-          .data(yTicksA)
-          .attr("y1", function(d) { return -1 * y(d); })
-          .attr("y2", function(d) { return -1 * y(d); })
-        yGrids.enter().append("svg:line")
-          .attr("class", "yGrids grids")
-          .attr("stroke", "grey")
-          .attr("y1", function(d) { return -1 * y(d); })
-          .attr("x1", ca.x + ca.w)
-          .attr("y2", function(d) { return -1 * y(d); })
-          .attr("x2", ca.x);
-        yGrids.exit().remove();
-      }
-    },
-  
-  })
-})
-
-/*
-  Local Variables:
-  mode: Javascript
-  tab-width: 2
-  indent-tabs-mode: nil
-  End:
-*/