RubyGems - nvd3-rails - Versions diffs - 0.0.1 → 0.0.1.1 - Mend

nvd3-rails 0.0.1 → 0.0.1.1

Files changed (107) hide show

data/vendor/assets/javascripts/nvd3/deprecated/lineWithFourAxes.html DELETED Viewed

@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<link href="../src/d3.css" rel="stylesheet" type="text/css">
-<style>
-body {
-  overflow-y:scroll;
-}
-text {
-  font: 12px sans-serif;
-}
-#chart1 {
-  height: 500px;
-  margin: 10px;
-  min-width: 100px;
-  min-height: 100px;
-/*
-  Minimum height and width is a good idea to prevent negative SVG dimensions...
-  For example width should be =< margin.left + margin.right + 1,
-  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
-*/
-}
-</style>
-<body>
-  <div id="chart1">
-  </div>
-<script src="../lib/d3.v2.js"></script>
-<script src="../nv.d3.js"></script>
-<script src="../src/tooltip.js"></script>
-<script src="../src/models/legend.js"></script>
-<script src="../src/models/axis.js"></script>
-<script src="../src/models/line.js"></script>
-<script src="../src/models/lineWithFourAxes.js"></script>
-<script>
-/************
- * Considering making an nv.charts object which will contain abstractions similar to the one below,
- *     but with the usual d3 reusable style.
- * I could make this abstraction inside the layer above, but this layer incorporates some jQuery, so
- *     thinking nv.charts can be the glue that's not 100% d3
- ************/
-var selector = '#chart1',
-    chart = nv.models.lineWithLegend(),
-    data = sinAndCos(),
-    xTickFormat = d3.format(',r'),
-    yTickFormat = d3.format(',.2f'),
-    xAxisLabel = null,
-    yAxisLabel = 'Voltage (v)',
-    duration = 500;
-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');
-    chart
-        .width(width)
-        .height(height)
-    chart.xAxis
-        .tickFormat(xTickFormat);
-    chart.yAxis
-        .tickFormat(yTickFormat)
-        .axisLabel(yAxisLabel);
-    svg
-        .attr('width', width())
-        .attr('height', height())
-        .datum(data)
-      .transition().duration(duration).call(chart);
-    return chart;
-  },
-  callback: function(chart) {
-    var showTooltip = function(e) {
-          var offsetElement = document.getElementById(selector.substr(1)),
-              left = e.pos[0] + offsetElement.offsetLeft,
-              top = e.pos[1] + offsetElement.offsetTop,
-              formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
-              formatX = chart.xAxis.tickFormat();
-          // uses the chart's getX and getY, you may customize if x position is not the same as the value you want
-          //   ex. daily data without weekends, x is the index, while you want the date
-          var content = '<h3>' + e.series.key + '</h3>' +
-                        '<p>' +
-                        formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
-                        '</p>';
-          nv.tooltip.show([left, top], content);
-        };
-    chart.dispatch.on('tooltipShow', showTooltip);
-    chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
-    window.onresize =
-    function() {
-      // now that width and height are functions, should be automatic..of course you can always override them
-      d3.select('#chart1 svg')
-          .attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
-          .attr('height', chart.height()())
-          .call(chart);
-    };
-  }
-});
-function sinAndCos() {
-  var sin = [],
-      cos = [];
-  for (var i = 0; i < 100; i++) {
-    sin.push({x: i, y: Math.sin(i/10)});
-    cos.push({x: i, y: .5 * Math.cos(i/10)});
-  }
-  return [
-    {
-      values: sin,
-      key: "Sine Wave",
-      color: "#ff7f0e"
-    },
-    {
-      values: cos,
-      key: "Cosine Wave",
-      color: "#2ca02c"
-    }
-  ];
-}
-</script>

data/vendor/assets/javascripts/nvd3/deprecated/lineWithFourAxes.js DELETED Viewed

@@ -1,218 +0,0 @@
-nv.models.lineWithLegend = function() {
-  var margin = {top: 60, right: 60, bottom: 40, left: 60},
-      getWidth = function() { return 960 },
-      getHeight = function() { return 500 },
-      dotRadius = function() { return 2.5 },
-      getX = function(d) { return d.x },
-      getY = function(d) { return d.y },
-      color = d3.scale.category20().range(),
-      dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
-  var x = d3.scale.linear(),
-      y = d3.scale.linear(),
-      xAxis = nv.models.axis().scale(x).orient('bottom'),
-      yAxis = nv.models.axis().scale(y).orient('left'),
-      x2Axis = nv.models.axis().scale(x).orient('top'),
-      y2Axis = nv.models.axis().scale(y).orient('right'),
-      legend = nv.models.legend().height(30),
-      lines = nv.models.line();
-  function chart(selection) {
-    selection.each(function(data) {
-      var width = getWidth(),
-          height = getHeight(),
-          availableWidth = width - margin.left - margin.right,
-          availableHeight = height - margin.top - margin.bottom;
-      var series = data.filter(function(d) { return !d.disabled })
-            .map(function(d) {
-              return d.values.map(function(d,i) {
-                return { x: getX(d,i), y: getY(d,i) }
-              })
-            });
-      x   .domain(d3.extent(d3.merge(series), function(d) { return d.x } ))
-          .range([0, availableWidth]);
-      y   .domain(d3.extent(d3.merge(series), function(d) { return d.y } ))
-          .range([availableHeight, 0]);
-      lines
-        .width(availableWidth)
-        .height(availableHeight)
-        .color(data.map(function(d,i) {
-          return d.color || color[i % 10];
-        }).filter(function(d,i) { return !data[i].disabled }))
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 lineWithLegend').append('g');
-      gEnter.append('g').attr('class', 'x axis');
-      gEnter.append('g').attr('class', 'y axis');
-      gEnter.append('g').attr('class', 'x2 axis');
-      gEnter.append('g').attr('class', 'y2 axis');
-      gEnter.append('g').attr('class', 'linesWrap');
-      gEnter.append('g').attr('class', 'legendWrap');
-      legend.dispatch.on('legendClick', function(d,i) {
-        d.disabled = !d.disabled;
-        if (!data.filter(function(d) { return !d.disabled }).length) {
-          data.map(function(d) {
-            d.disabled = false;
-            wrap.selectAll('.series').classed('disabled', false);
-            return d;
-          });
-        }
-        selection.transition().call(chart);
-      });
-/*
-      //
-      legend.dispatch.on('legendMouseover', function(d, i) {
-        d.hover = true;
-        selection.transition().call(chart)
-      });
-      legend.dispatch.on('legendMouseout', function(d, i) {
-        d.hover = false;
-        selection.transition().call(chart)
-      });
-*/
-      lines.dispatch.on('elementMouseover.tooltip', function(e) {
-        dispatch.tooltipShow({
-          point: e.point,
-          series: e.series,
-          pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
-          seriesIndex: e.seriesIndex,
-          pointIndex: e.pointIndex
-        });
-      });
-      lines.dispatch.on('elementMouseout.tooltip', function(e) {
-        dispatch.tooltipHide(e);
-      });
-      //TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
-      margin.top = legend.height() + 20; // 20 is for the x2 axis...  this should be done in a better place, but just doing this to show the 4 axes in an example
-      var g = wrap.select('g')
-          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
-      legend.width(width/2 - margin.right);
-      g.select('.legendWrap')
-          .datum(data)
-          .attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
-          .call(legend);
-      var linesWrap = g.select('.linesWrap')
-          .datum(data.filter(function(d) { return !d.disabled }))
-      d3.transition(linesWrap).call(lines);
-      xAxis
-        .domain(x.domain())
-        .range(x.range())
-        .ticks( width / 100 )
-        .tickSize(-availableHeight, 0);
-      g.select('.x.axis')
-          .attr('transform', 'translate(0,' + y.range()[0] + ')');
-      d3.transition(g.select('.x.axis'))
-          .call(xAxis);
-      yAxis
-        .domain(y.domain())
-        .range(y.range())
-        .ticks( height / 36 )
-        .tickSize(-availableWidth, 0);
-      d3.transition(g.select('.y.axis'))
-          .call(yAxis);
-      x2Axis
-        .domain(x.domain())
-        .range(x.range())
-        .ticks( width / 100 )
-        .tickSize(-availableHeight, 0);
-      d3.transition(g.select('.x2.axis'))
-          .call(x2Axis);
-      y2Axis
-        .domain(y.domain())
-        .range(y.range())
-        .ticks( height / 36 )
-        .tickSize(-availableWidth, 0);
-      g.select('.y2.axis')
-          .attr('transform', 'translate('+ x.range()[1] + ',0)');
-      d3.transition(g.select('.y2.axis'))
-          .call(y2Axis);
-    });
-    return chart;
-  }
-  chart.dispatch = dispatch;
-  chart.legend = legend;
-  chart.xAxis = xAxis;
-  chart.yAxis = yAxis;
-  d3.rebind(chart, lines, 'interactive');
-  //consider rebinding x and y as well
-  chart.x = function(_) {
-    if (!arguments.length) return getX;
-    getX = _;
-    lines.x(_);
-    return chart;
-  };
-  chart.y = function(_) {
-    if (!arguments.length) return getY;
-    getY = _;
-    lines.y(_);
-    return chart;
-  };
-  chart.margin = function(_) {
-    if (!arguments.length) return margin;
-    margin = _;
-    return chart;
-  };
-  chart.width = function(_) {
-    if (!arguments.length) return getWidth;
-    getWidth = d3.functor(_);
-    return chart;
-  };
-  chart.height = function(_) {
-    if (!arguments.length) return getHeight;
-    getHeight = d3.functor(_);
-    return chart;
-  };
-  chart.dotRadius = function(_) {
-    if (!arguments.length) return dotRadius;
-    dotRadius = d3.functor(_);
-    lines.dotRadius = _;
-    return chart;
-  };
-  return chart;
-}

data/vendor/assets/javascripts/nvd3/deprecated/lineWithLegend.html DELETED Viewed

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<link href="../src/d3.css" rel="stylesheet" type="text/css">
-<style>
-body {
-  overflow-y:scroll;
-}
-text {
-  font: 12px sans-serif;
-}
-svg {
-  display: block;
-}
-#chart1 {
-  height: 500px;
-  margin: 10px;
-  min-width: 100px;
-  min-height: 100px;
-/*
-  Minimum height and width is a good idea to prevent negative SVG dimensions...
-  For example width should be =< margin.left + margin.right + 1,
-  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
-*/
-}
-</style>
-<body>
-  <div id="chart1">
-  </div>
-<script src="../lib/d3.v2.js"></script>
-<script src="../nv.d3.js"></script>
-<script src="../src/tooltip.js"></script>
-<script src="../src/models/legend.js"></script>
-<script src="../src/models/axis.js"></script>
-<script src="../src/models/scatter.js"></script>
-<script src="../src/models/line.js"></script>
-<script src="../src/models/lineWithLegend.js"></script>
-<script>
-var selector = '#chart1',
-    chart = nv.models.lineWithLegend(),
-    data = sinAndCos(),
-    xTickFormat = d3.format(',r'),
-    yTickFormat = d3.format(',.2f'),
-    xAxisLabel = null,
-    yAxisLabel = 'Voltage (v)',
-    duration = 500;
-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').style('height', '500px');
-    chart
-        //.width(width)
-        //.height(height);
-    chart.xAxis
-        .tickFormat(xTickFormat);
-    chart.yAxis
-        .tickFormat(yTickFormat)
-        .axisLabel(yAxisLabel);
-    svg
-        //.attr('width', width())
-        //.attr('height', height())
-        .datum(data)
-      .transition().duration(duration).call(chart);
-    return chart;
-  },
-  callback: function(chart) {
-    var showTooltip = function(e) {
-      var offsetElement = document.getElementById(selector.substr(1)),
-          left = e.pos[0] + offsetElement.offsetLeft,
-          top = e.pos[1] + offsetElement.offsetTop,
-          formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
-          formatX = chart.xAxis.tickFormat();
-      // uses the chart's getX and getY, you may customize if x position is not the same as the value you want
-      //   ex. daily data without weekends, x is the index, while you want the date
-      var content = '<h3>' + e.series.key + '</h3>' +
-                    '<p>' +
-                    formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
-                    '</p>';
-      nv.tooltip.show([left, top], content);
-    };
-    chart.dispatch.on('tooltipShow', showTooltip);
-    chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
-    window.onresize= function() {
-      // now that width and height are functions, should be automatic..of course you can always override them
-      d3.select('#chart1 svg')
-          //.attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
-          //.attr('height', chart.height()())
-          .call(chart);
-    };
-  }
-});
-function sinAndCos() {
-  var sin = [],
-      cos = [];
-  for (var i = 0; i < 100; i++) {
-    sin.push({x: i, y: Math.sin(i/10)});
-    cos.push({x: i, y: .5 * Math.cos(i/10)});
-  }
-  return [
-    {
-      values: sin,
-      key: "Sine Wave",
-      color: "#ff7f0e"
-    },
-    {
-      values: cos,
-      key: "Cosine Wave",
-      color: "#2ca02c"
-    }
-  ];
-}
-</script>