nvd3-rails 0.0.1

data/vendor/assets/javascripts/nvd3/deprecated/bar.js

@@ -0,0 +1,250 @@
+
+nv.models.bar = function() {
+  var margin = {top: 20, right: 10, bottom: 80, left: 60},
+      width = 960,
+      height = 500,
+      animate = 500,
+      label ='label',
+      rotatedLabel = true,
+      showLabels = true,
+      id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
+      color = d3.scale.category20(),
+      field ='y',
+      title = '';
+
+  var x = d3.scale.ordinal(),
+      y = d3.scale.linear(),
+      xAxis = d3.svg.axis().scale(x).orient('bottom'),
+      yAxis = d3.svg.axis().scale(y).orient('left'),
+      dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
+
+
+  function chart(selection) {
+    selection.each(function(data) {
+      x .domain(data.map(function(d,i) { return d[label]; }))
+        .rangeRoundBands([0, width - margin.left - margin.right], .1);
+
+
+      var min = d3.min(data, function(d) { return d[field] });
+      var max = d3.max(data, function(d) { return d[field] });
+      var x0 = Math.max(-min, max);
+      var x1 = -x0;
+
+      // If we have no negative values, then lets stack this with just positive bars
+      if (min >= 0) x1 = 0;
+
+      y .domain([x1, x0])
+        .range([height - margin.top - margin.bottom, 0])
+        .nice();
+
+      xAxis.ticks( width / 100 );
+      yAxis.ticks( height / 36 ).tickSize(-(width - margin.right - margin.left), 0);
+
+      var parent = d3.select(this)
+          .on("click", function(d,i) {
+            dispatch.chartClick({
+                data: d,
+                index: i,
+                pos: d3.event,
+                id: id
+            });
+          });
+
+
+      var wrap = parent.selectAll('g.wrap').data([data]);
+      var gEnter = wrap.enter();
+      gEnter.append("text")
+          .attr("class", "title")
+          .attr("dy", ".91em")
+          .attr("text-anchor", "start")
+          .text(title);
+      gEnter = gEnter.append('g').attr('class', 'nvd3 wrap').attr('id','wrap-'+id).append('g');
+
+
+
+      gEnter.append('g').attr('class', 'x axis');
+      gEnter.append('g').attr('class', 'y axis');
+      gEnter.append('g').attr('class', 'bars');
+
+
+      wrap.attr('width', width)
+          .attr('height', height);
+
+      var g = wrap.select('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+
+      var bars = wrap.select('.bars').selectAll('.bar')
+          .data(function(d) { return d; });
+
+      bars.exit().remove();
+
+
+      var barsEnter = bars.enter().append('svg:rect')
+          .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
+          .attr("fill", function(d, i) { return color(i); })
+          .attr('x', 0 )
+          .on('mouseover', function(d,i){
+            d3.select(this).classed('hover', true);
+            dispatch.tooltipShow({
+                label: d[label],
+                value: d[field],
+                data: d,
+                index: i,
+                // TODO: Calculate the center to the bar
+                pos: [d3.event.pageX, d3.event.pageY],
+                id: id
+            });
+
+          })
+          .on('mouseout', function(d,i){
+                d3.select(this).classed('hover', false);
+                dispatch.tooltipHide({
+                    label: d[label],
+                    value: d[field],
+                    data: d,
+                    index: i,
+                    id: id
+                });
+          })
+          .on('click', function(d,i) {
+                dispatch.elementClick({
+                    label: d[label],
+                    value: d[field],
+                    data: d,
+                    index: i,
+                    pos: d3.event,
+                    id: id
+                });
+              d3.event.stopPropagation();
+          })
+          .on('dblclick', function(d,i) {
+              dispatch.elementDblClick({
+                  label: d[label],
+                  value: d[field],
+                  data: d,
+                  index: i,
+                  pos: d3.event,
+                  id: id
+              });
+              d3.event.stopPropagation();
+          });
+
+
+      bars
+          .attr('class', function(d) { return d[field] < 0 ? "bar negative" : "bar positive"})
+          .attr('transform', function(d,i) { return 'translate(' + x(d[label]) + ',0)'; })
+          .attr('width', x.rangeBand )
+          .order()
+          .transition()
+          .duration(animate)
+          .attr('y', function(d) {  return y(Math.max(0, d[field])); })
+          .attr('height', function(d) { return Math.abs(y(d[field]) - y(0));  });
+
+
+      g.select('.x.axis')
+          .attr('transform', 'translate(0,' + y.range()[0] + ')')
+          .call(xAxis);
+
+
+      if (rotatedLabel) {
+        g.select('.x.axis').selectAll('text').attr('text-anchor','start').attr("transform", function(d) {
+          return "rotate(35)translate(" + this.getBBox().height/2 + "," + '0' + ")";
+        });
+      }
+      if (!showLabels) {
+        g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,0)');
+        g.select('.x.axis').selectAll('line').attr('style', 'opacity: 0');
+      }
+      /*else {
+        g.select('.x.axis').selectAll('text').attr('fill', 'rgba(0,0,0,1)');
+        g.select('.x.axis').selectAll('line').attr('style', 'opacity: 1');
+      }*/
+
+
+
+      g.select('.y.axis')
+        .call(yAxis);
+    });
+
+    return chart;
+  }
+
+  chart.margin = function(_) {
+    if (!arguments.length) return margin;
+    margin = _;
+    return chart;
+  };
+
+  chart.width = function(_) {
+    if (!arguments.length) return width;
+    if (margin.left + margin.right + 20 > _)
+      width = margin.left + margin.right + 20; // Min width
+    else
+      width = _;
+    return chart;
+  };
+
+  chart.height = function(_) {
+    if (!arguments.length) return height;
+    if (margin.top + margin.bottom + 20 > _)
+      height = margin.top + margin.bottom + 20; // Min height
+    else
+      height = _;
+    return chart;
+  };
+
+  chart.animate = function(_) {
+    if (!arguments.length) return animate;
+    animate = _;
+    return chart;
+  };
+
+  chart.labelField = function(_) {
+    if (!arguments.length) return (label);
+      label = _;
+      return chart;
+  };
+
+  chart.dataField = function(_) {
+    if (!arguments.length) return (field);
+    field = _;
+    return chart;
+  };
+
+  chart.id = function(_) {
+        if (!arguments.length) return id;
+        id = _;
+        return chart;
+  };
+
+  chart.rotatedLabel = function(_) {
+        if (!arguments.length) return rotatedLabel;
+        rotatedLabel = _;
+        return chart;
+  };
+
+  chart.showLabels = function(_) {
+        if (!arguments.length) return (showLabels);
+        showLabels = _;
+        return chart;
+  };
+
+  chart.title = function(_) {
+      if (!arguments.length) return (title);
+      title = _;
+      return chart;
+  };
+
+  chart.xaxis = {};
+  // Expose the x-axis' tickFormat method.
+  d3.rebind(chart.xaxis, xAxis, 'tickFormat');
+
+  chart.yaxis = {};
+  // Expose the y-axis' tickFormat method.
+  d3.rebind(chart.yaxis, yAxis, 'tickFormat');
+
+  chart.dispatch = dispatch;
+
+  return chart;
+}

data/vendor/assets/javascripts/nvd3/deprecated/charts/cumulativeLineChart.js

@@ -0,0 +1,174 @@
+
+// This technique works AS IS for month end data points
+//   In fact, this works for any series where each value is evenly spaced,
+//   and every series starts at the same value and is 1 to 1
+//     In other words, values at the same index, need to have the same x value
+//     for all series
+//
+// TODO: now that tooltips don't use jquery, could likely get rid of the charts 
+//       collection by simply adding some optional functionality to the model
+nv.charts.cumulativeLineChartDaily = function() {
+  var selector = null,
+      data = [],
+      duration = 500,
+      tooltip = function(key, x, y, e, graph) { 
+        return '<h3>' + key + '</h3>' +
+               '<p>' +  y + ' at ' + x + '</p>'
+      };
+
+
+  var graph = nv.models.cumulativeLine()
+                .x(function(d,i) { return i })
+                .color(d3.scale.category10().range()),
+      showTooltip = function(e) {
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
+            formatX = graph.xAxis.tickFormat(),
+            formatY = graph.yAxis.tickFormat(),
+            x = formatX(graph.x()(e, e.pointIndex)),
+            //x = formatX(graph.x()(e.point)),
+            y = formatY(graph.y()(e.point)),
+            content = tooltip(e.series.key, x, y, e, graph);
+
+        nv.tooltip.show([left, top], content);
+      };
+
+  //setting component defaults
+  //graph.xAxis.tickFormat(d3.format(',r'));
+  graph.xAxis.tickFormat(function(d) {
+    //return d3.time.format('%x')(new Date(d))
+    return d3.time.format('%x')(new Date(data[0].values[d].x))
+  });
+
+  //graph.yAxis.tickFormat(d3.format(',.2f'));
+  graph.yAxis.tickFormat(d3.format(',.2%'));
+
+
+  //TODO: consider a method more similar to how the models are built
+  function chart() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    d3.select(selector).select('svg')
+        .datum(data)
+      .transition().duration(duration).call(graph); //consider using transition chaining like in the models
+
+    return chart;
+  }
+
+
+  // This should always only be called once, then update should be used after, 
+  //     in which case should consider the 'd3 way' and merge this with update, 
+  //     but simply do this on enter... will try another example the d3 way
+  chart.build = function() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    nv.addGraph({
+      generate: function() {
+        var container = d3.select(selector),
+            width = function() { return parseInt(container.style('width')) },
+            height = function() { return parseInt(container.style('height')) },
+            svg = container.append('svg');
+
+        graph
+            .width(width)
+            .height(height);
+
+        svg
+            .attr('width', width())
+            .attr('height', height())
+            .datum(data)
+          .transition().duration(duration).call(graph);
+
+        return graph;
+      },
+      callback: function(graph) {
+        graph.dispatch.on('tooltipShow', showTooltip);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
+
+        //TODO: fix issue of multiple graphs failing on resize
+        //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
+        window.onresize =
+        function() {
+          // now that width and height are functions, should be automatic..of course you can always override them
+          d3.select(selector + ' svg')
+              .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
+              .attr('height', graph.height()())
+              .call(graph);
+        };
+      }
+    });
+
+    return chart;
+  };
+
+
+  /*
+  //  moved to chart()
+  chart.update = function() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    d3.select(selector).select('svg')
+        .datum(data)
+      .transition().duration(duration).call(graph);
+
+    return chart;
+  };
+  */
+
+  chart.data = function(_) {
+    if (!arguments.length) return data;
+    data = _;
+    return chart;
+  };
+
+  chart.selector = function(_) {
+    if (!arguments.length) return selector;
+    selector = _;
+    return chart;
+  };
+
+  chart.duration = function(_) {
+    if (!arguments.length) return duration;
+    duration = _;
+    return chart;
+  };
+
+  chart.tooltip = function(_) {
+    if (!arguments.length) return tooltip;
+    tooltip = _;
+    return chart;
+  };
+
+  chart.xTickFormat = function(_) {
+    if (!arguments.length) return graph.xAxis.tickFormat();
+    graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
+    return chart;
+  };
+
+  chart.yTickFormat = function(_) {
+    if (!arguments.length) return graph.yAxis.tickFormat();
+    graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
+    return chart;
+  };
+
+  chart.xAxisLabel = function(_) {
+    if (!arguments.length) return graph.xAxis.axisLabel();
+    graph.xAxis.axisLabel(_);
+    return chart;
+  };
+
+  chart.yAxisLabel = function(_) {
+    if (!arguments.length) return graph.yAxis.axisLabel();
+    graph.yAxis.axisLabel(_);
+    return chart;
+  };
+
+  d3.rebind(chart, graph, 'x', 'y');
+
+  chart.graph = graph; // Give direct access for getter/setters, and dispatchers
+
+  return chart;
+};
+
+

data/vendor/assets/javascripts/nvd3/deprecated/charts/discreteBarChart.js

@@ -0,0 +1,157 @@
+
+nv.charts.discreteBar = function() {
+  var selector = null,
+      data = [],
+      duration = 500,
+      tooltip = function(key, x, y, e, graph) { 
+        return '<h3>' + x + '</h3>' +
+               '<p>' +  y + '</p>'
+      };
+
+
+  var graph = nv.models.discreteBarWithAxes(),
+      showTooltip = function(e) {
+        var offsetElement = document.getElementById(selector.substr(1)),
+            left = e.pos[0] + offsetElement.offsetLeft,
+            top = e.pos[1] + offsetElement.offsetTop,
+            formatY = graph.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
+            formatX = graph.xAxis.tickFormat(),
+            x = formatX(graph.x()(e.point)),
+            y = formatY(graph.y()(e.point)),
+            content = tooltip(e.series.key, x, y, e, graph);
+
+        nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
+      };
+
+  //setting component defaults
+  graph.xAxis.tickFormat(function(d) { return d });
+  graph.yAxis.tickFormat(d3.format(',.f'));
+
+
+  //TODO: consider a method more similar to how the models are built
+  function chart() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    d3.select(selector).select('svg')
+        .datum(data)
+      .transition().duration(duration).call(graph); //consider using transition chaining like in the models
+
+    return chart;
+  }
+
+
+  // This should always only be called once, then update should be used after, 
+  //     in which case should consider the 'd3 way' and merge this with update, 
+  //     but simply do this on enter... should try anoter example that way
+  chart.build = function() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    nv.addGraph({
+      generate: function() {
+        var container = d3.select(selector),
+            width = function() { return parseInt(container.style('width')) },
+            height = function() { return parseInt(container.style('height')) },
+            svg = container.append('svg');
+
+        graph
+            .width(width)
+            .height(height);
+
+        svg
+            .attr('width', width())
+            .attr('height', height())
+            .datum(data)
+          .transition().duration(duration).call(graph);
+
+        return graph;
+      },
+      callback: function(graph) {
+        graph.dispatch.on('tooltipShow', showTooltip);
+        graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
+
+        //TODO: create resize queue and have nv core handle resize instead of binding all to window resize
+        nv.utils.windowResize(
+          function() {
+            // now that width and height are functions, should be automatic..of course you can always override them
+            d3.select(selector + ' svg')
+                .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
+                .attr('height', graph.height()())
+                .transition().duration(duration).call(graph);
+                //.call(graph);
+          }
+        );
+      }
+    });
+
+    return chart;
+  };
+
+
+  /*
+  //  moved to chart()
+  chart.update = function() {
+    if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
+
+    d3.select(selector).select('svg')
+        .datum(data)
+      .transition().duration(duration).call(graph);
+
+    return chart;
+  };
+  */
+
+  chart.data = function(_) {
+    if (!arguments.length) return data;
+    data = _;
+    return chart;
+  };
+
+  chart.selector = function(_) {
+    if (!arguments.length) return selector;
+    selector = _;
+    return chart;
+  };
+
+  chart.duration = function(_) {
+    if (!arguments.length) return duration;
+    duration = _;
+    return chart;
+  };
+
+  chart.tooltip = function(_) {
+    if (!arguments.length) return tooltip;
+    tooltip = _;
+    return chart;
+  };
+
+  chart.xTickFormat = function(_) {
+    if (!arguments.length) return graph.xAxis.tickFormat();
+    graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
+    return chart;
+  };
+
+  chart.yTickFormat = function(_) {
+    if (!arguments.length) return graph.yAxis.tickFormat();
+    graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_));
+    return chart;
+  };
+
+  chart.xAxisLabel = function(_) {
+    if (!arguments.length) return graph.xAxis.axisLabel();
+    graph.xAxis.axisLabel(_);
+    return chart;
+  };
+
+  chart.yAxisLabel = function(_) {
+    if (!arguments.length) return graph.yAxis.axisLabel();
+    graph.yAxis.axisLabel(_);
+    return chart;
+  };
+
+  d3.rebind(chart, graph, 'x', 'y', 'staggerLabels');
+
+  chart.graph = graph; // Give direct access for getter/setters, and dispatchers
+
+  return chart;
+};
+