Added nvd3 class to the parent wrap of all graphs, fixed some colors and css

examples/bullet.html

@@ -40,6 +40,7 @@ var chart = nv.models.bullet()
   */
 ];
 
+  //TODO: to be consistent with other models, shouild be appending a g to an already made svg, not creating the svg element
   var vis = d3.select("#chart").selectAll("svg")
       .data(data)
     .enter().append("svg")

examples/cumulativeLine.html

@@ -65,6 +65,7 @@ nv.addGraph({
     var chart = nv.models.cumulativeLine()
                 .width(width)
                 .height(height)
+                .color(d3.scale.category10().range())
                 //.margin({top: 20, right: 10, bottom: 50, left: 80})
 
         //chart.yAxis.axisLabel('Cumulative');

examples/linePlusBar.html

@@ -83,7 +83,8 @@ nv.addGraph({
     chart
         .x(function(d,i) { return i })
         .width(width)
-        .height(height);
+        .height(height)
+        .color(d3.scale.category10().range());
 
     chart.xAxis.tickFormat(function(d) {
       var dx = data[0].values[d] && data[0].values[d].x || 0;

src/charts/cumulativeLineChartDaily.js

@@ -4,6 +4,9 @@
 //   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 = [],
@@ -56,7 +59,7 @@ nv.charts.cumulativeLineChartDaily = function() {
 
   // 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
+  //     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
 
@@ -83,6 +86,7 @@ nv.charts.cumulativeLineChartDaily = function() {
         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() {
@@ -167,3 +171,4 @@ nv.charts.cumulativeLineChartDaily = function() {
   return chart;
 };
 
+

src/d3.css

@@ -75,7 +75,7 @@ svg {
 }
 
 
-text {
+svg text {
   font: 12px sans-serif;
 }
 
@@ -99,11 +99,11 @@ svg .title {
 *  Legend
 */
 
-.legend .series {
+.nvd3 .legend .series {
   cursor: pointer;
 }
 
-.legend .disabled circle {
+.nvd3 .legend .disabled circle {
   fill-opacity: 0;
 }
 
@@ -113,25 +113,25 @@ svg .title {
 *  Axes
 */
 
-.axis path {
+.nvd3 .axis path {
   fill: none;
   stroke: #000;
   stroke-opacity: .75;
   shape-rendering: crispEdges;
 }
 
-.axis path.domain {
+.nvd3 .axis path.domain {
   stroke-opacity: .75;
 }
 
-.axis line {
+.nvd3 .axis line {
   fill: none;
   stroke: #000;
   stroke-opacity: .25;
   shape-rendering: crispEdges;
 }
 
-.axis line.zero {
+.nvd3 .axis line.zero {
   stroke-opacity: .75;
 }
 
@@ -141,34 +141,34 @@ svg .title {
 *  Bars
 */
 
-.bars .negative rect {
+.nvd3 .bars .negative rect {
     zfill: brown;
     cursor: pointer;
 }
 
-.bars rect {
+.nvd3 .bars rect {
   zfill: steelblue;
   cursor: pointer;
   fill-opacity: .75;
 }
 
-.bars rect:hover {
+.nvd3 .bars rect:hover {
   fill-opacity: 1;
 }
 
-.bars .hover rect {
+.nvd3 .bars .hover rect {
   fill: lightblue;
 }
 
-.bars text {
+.nvd3 .bars text {
   fill: rgba(0,0,0,0);
 }
 
-.bars .hover text {
+.nvd3 .bars .hover text {
   fill: rgba(0,0,0,1);
 }
 
-.x.axis text {
+.nvd3 .x.axis text {
   transform: rotate(90);
 }
 
@@ -177,11 +177,11 @@ svg .title {
 *  Bars
 */
 
-.d3multibar .groups rect {
+.nvd3 .multibar .groups rect {
   stroke-opacity: 0;
 }
 
-.d3multibar .groups rect:hover {
+.nvd3 .multibar .groups rect:hover {
   fill-opacity: 1;
 }
 
@@ -189,7 +189,7 @@ svg .title {
 *  Pie Chart
 */
 
-.pie .hover path {
+.nvd3 .pie .hover path {
     fill: lightblue;
 }
 
@@ -197,9 +197,9 @@ svg .title {
 * Lines 
 */
 
-.groups path {
+.nvd3 .groups path {
   fill: none;
-  stroke-width: 1.5px;
+  stroke-width: 2.5px;
   stroke-linecap: round;
   shape-rendering: geometricPrecision;
 
@@ -212,23 +212,23 @@ svg .title {
   -webkit-transition-delay: 250ms;
 }
 
-.line.hover path {
+.nvd3 .line.hover path {
   stroke-width: 6px;
 }
 
-.groups .point {
+.nvd3 .groups .point {
   transition: all 250ms linear;
   -moz-transition: all 250ms linear;
   -webkit-transition: all 250ms linear;
 }
 
-.groups .point.hover {
+.nvd3 .groups .point.hover {
   stroke-width: 20px;
   stroke-opacity: .5;
 }
 
 
-.point-paths path {
+.nvd3 .point-paths path {
   stroke: #aaa;
   stroke-opacity: 0;
   fill: #eee;
@@ -237,7 +237,7 @@ svg .title {
 
 
 
-.indexLine {
+.nvd3 .indexLine {
   cursor: ew-resize;
 }
 
@@ -247,18 +247,18 @@ svg .title {
 *  Scatter 
 */
 
-.groups .point {
+.nvd3 .groups .point {
   transition: all 250ms linear;
   -moz-transition: all 250ms linear;
   -webkit-transition: all 250ms linear;
 }
 
-.groups .point.hover {
+.nvd3 .groups .point.hover {
   stroke-width: 20px;
   stroke-opacity: .5;
 }
 
-.d3scatter .point.hover {
+.nvd3 .scatter .point.hover {
   fill-opacity: 1;
 }
 
@@ -273,7 +273,7 @@ svg .title {
 *  Stacked Area
 */
 
-.d3stackedarea path.area {
+.nvd3 .stackedarea path.area {
   fill-opacity: .65;
   stroke-opacity: .65;
   stroke-width: 0.1px;
@@ -290,7 +290,7 @@ svg .title {
 
 }
 
-.d3stackedarea path.area.hover {
+.nvd3 .stackedarea path.area.hover {
   fill-opacity: .85;
   stroke-opacity: .85;
 }
@@ -302,7 +302,7 @@ svg .title {
 
 
 
-.d3stackedarea .groups .point {
+.nvd3 .stackedarea .groups .point {
   stroke-opacity: 0;
   fill-opacity: 0;
   transition: all 250ms linear;
@@ -310,7 +310,7 @@ svg .title {
   -webkit-transition: all 250ms linear;
 }
 
-.d3stackedarea .groups .point.hover {
+.nvd3 .stackedarea .groups .point.hover {
   stroke-width: 20px;
   stroke-opacity: .75;
   fill-opacity: 1;
@@ -322,11 +322,11 @@ svg .title {
 *  Line Plus Bar
 */
 
-.d3linePlusBar .bar rect {
+.nvd3 .linePlusBar .bar rect {
   fill-opacity: .75;
 }
 
-.d3linePlusBar .bar rect:hover {
+.nvd3 .linePlusBar .bar rect:hover {
   fill-opacity: 1;
 }
 
@@ -335,19 +335,19 @@ svg .title {
 *  Bullet
 */
 
-.bullet { font: 10px sans-serif; cursor: pointer; }
-.bullet rect { fill-opacity: .6; }
-.bullet rect:hover { fill-opacity: 1; }
-.bullet .marker { stroke: #000; stroke-width: 2px; }
-.bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
-.bullet .tick line { stroke: #666; stroke-width: .5px; }
-.bullet .range.s0 { fill: #eee; }
-.bullet .range.s1 { fill: #ddd; }
-.bullet .range.s2 { fill: #ccc; }
-.bullet .measure.s0 { fill: steelblue; }
-.bullet .measure.s1 { fill: darkblue; }
-.bullet .title { font-size: 14px; font-weight: bold; }
-.bullet .subtitle { fill: #999; }
+.nvd3 .bullet { font: 10px sans-serif; cursor: pointer; }
+.nvd3 .bullet rect { fill-opacity: .6; }
+.nvd3 .bullet rect:hover { fill-opacity: 1; }
+.nvd3 .bullet .marker { stroke: #000; stroke-width: 2px; }
+.nvd3 .bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
+.nvd3 .bullet .tick line { stroke: #666; stroke-width: .5px; }
+.nvd3 .bullet .range.s0 { fill: #eee; }
+.nvd3 .bullet .range.s1 { fill: #ddd; }
+.nvd3 .bullet .range.s2 { fill: #ccc; }
+.nvd3 .bullet .measure.s0 { fill: steelblue; }
+.nvd3 .bullet .measure.s1 { fill: darkblue; }
+.nvd3 .bullet .title { font-size: 14px; font-weight: bold; }
+.nvd3 .bullet .subtitle { fill: #999; }
 
 
 
@@ -356,28 +356,28 @@ svg .title {
 * Sparkline plus 
 */
 
-.sparklineplus .hoverValue line {
+.nvd3 .sparklineplus .hoverValue line {
   stroke: #f44;
   stroke-width: 1.5px;
  }
 
-.sparklineplus,
-.sparklineplus g {
+.nvd3 .sparklineplus,
+.nvd3 .sparklineplus g {
   pointer-events: all;
 }
 
-.sparklineplus .hoverArea {
+.nvd3 .sparklineplus .hoverArea {
   fill-opacity: 0;
   stroke-opacity: 0;
 }
 
-.sparklineplus .xValue,
-.sparklineplus .yValue {
+.nvd3 .sparklineplus .xValue,
+.nvd3 .sparklineplus .yValue {
   stroke: #666;
   font-size: .5em;
   font-weight: normal;
 }
 
-.sparklineplus .yValue {
+.nvd3 .sparklineplus .yValue {
   stroke: #f66;
 }

src/models/bar.js

@@ -58,7 +58,7 @@ nv.models.bar = function() {
           .attr("dy", ".91em")
           .attr("text-anchor", "start")
           .text(title);
-      gEnter = gEnter.append('g').attr('class', 'wrap').attr('id','wrap-'+id).append('g');
+      gEnter = gEnter.append('g').attr('class', 'nvd3 wrap').attr('id','wrap-'+id).append('g');
 
 
 

src/models/cumulativeLine.js

@@ -81,7 +81,7 @@ nv.models.cumulativeLine = function() {
 
 
       var wrap = d3.select(this).classed('chart-' + id, true).selectAll('g.wrap').data([series]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3cumulativeLine').append('g');
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 cumulativeLine').append('g');
 
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');

src/models/historicalBar.js

@@ -48,19 +48,9 @@ nv.models.historicalBar = function() {
             });
           });
 
-/*
-      var wrap = parent.selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter();
-      gEnter = gEnter.append('g').attr('class', 'wrap').attr('id','wrap-'+id).append('g');
 
-      var wrap = parent.selectAll('g.wrap').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'bar');
-      var gEnter = wrapEnter.append('g');
-      gEnter = gEnter.append('g').attr('class', 'wrap').attr('id','wrap-'+id).append('g');
-     */
-
-      var wrap = d3.select(this).selectAll('g.d3bar').data([data[0].values]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'd3bar');
+      var wrap = d3.select(this).selectAll('g.wrap.bar').data([data[0].values]);
+      var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 bar');
       var gEnter = wrapEnter.append('g');
 
       gEnter.append('g').attr('class', 'bars');

src/models/legend.js

@@ -11,7 +11,7 @@ nv.models.legend = function() {
     selection.each(function(data) {
 
       var wrap = d3.select(this).selectAll('g.legend').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'legend').append('g');
+      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 legend').append('g');
 
 
       var g = wrap.select('g')

src/models/line.js

@@ -27,8 +27,8 @@ nv.models.line = function() {
       y0 = y0 || scatter.yScale();
 
 
-      var wrap = d3.select(this).selectAll('g.d3line').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'd3line');
+      var wrap = d3.select(this).selectAll('g.wrap.line').data([data]);
+      var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 line');
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
       var g = wrap.select('g')

src/models/linePlusBar.js

@@ -65,8 +65,8 @@ nv.models.linePlusBar = function() {
         }).filter(function(d,i) { return !data[i].disabled && data[i].bar }))
 
 
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3linePlusBar').append('g');
+      var wrap = d3.select(this).selectAll('g.wrap.linePlusBar').data([data]);
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 linePlusBar').append('g');
 
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y1 axis');
@@ -239,6 +239,12 @@ nv.models.linePlusBar = function() {
     return chart;
   };
 
+  chart.color = function(_) {
+    if (!arguments.length) return color;
+    color = _;
+    legend.color(_);
+    return chart;
+  };
 
   return chart;
 }

src/models/lineWithFocus.js

@@ -70,7 +70,7 @@ nv.models.lineWithFocus = function() {
 
 
       var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithFocus').append('g');
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap .nvd3 .lineWithFocus').append('g');
 
       gEnter.append('g').attr('class', 'focus');
       gEnter.append('g').attr('class', 'context');

src/models/lineWithFourAxes.js

@@ -48,7 +48,7 @@ nv.models.lineWithLegend = function() {
 
 
       var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithLegend').append('g');
+      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');

src/models/lineWithLegend.js

@@ -43,8 +43,8 @@ nv.models.lineWithLegend = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithLegend').append('g');
+      var wrap = d3.select(this).selectAll('g.wrap.lineWithLegend').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');

src/models/multiBar.js

@@ -64,8 +64,8 @@ nv.models.multiBar = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.d3multibar').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'd3multibar');
+      var wrap = d3.select(this).selectAll('g.wrap.multibar').data([data]);
+      var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibar');
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
 

src/models/multiBarHorizontal.js

@@ -72,7 +72,7 @@ nv.models.multiBarHorizontal = function() {
 
 
       var wrap = d3.select(this).selectAll('g.d3multibar').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'd3multibar');
+      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 multibar');
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
 

src/models/multiBarHorizontalWithLegend.js

@@ -68,7 +68,7 @@ nv.models.multiBarHorizontalWithLegend = function() {
 
 
       var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithLegend').append('g');
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiBarHorizontalWithLegend').append('g');
 
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');

src/models/multiBarWithLegend.js

@@ -67,8 +67,8 @@ nv.models.multiBarWithLegend = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3lineWithLegend').append('g');
+      var wrap = d3.select(this).selectAll('g.wrap.multiBarWithLegend').data([data]);
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiBarWithLegend').append('g');
 
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');

src/models/scatter.js

@@ -67,8 +67,8 @@ nv.models.scatter = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.d3scatter').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'd3scatter');
+      var wrap = d3.select(this).selectAll('g.wrap.scatter').data([data]);
+      var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatter');
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
       var g = wrap.select('g')

src/models/scatterWithLegend.js

@@ -27,8 +27,8 @@ nv.models.scatterWithLegend = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3scatterWithLegend').append('g');
+      var wrap = d3.select(this).selectAll('g.wrap.scatterWithLegend').data([data]);
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterWithLegend').append('g');
 
       gEnter.append('g').attr('class', 'legendWrap');
       gEnter.append('g').attr('class', 'x axis');

src/models/sparkline.js

@@ -27,7 +27,7 @@ nv.models.sparkline = function() {
 
       var wrap = d3.select(this).selectAll('g.sparkline').data([data]);
 
-      var gEnter = wrap.enter().append('g').attr('class', 'sparkline');
+      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 sparkline');
       //var gEnter = svg.enter().append('svg').append('g');
       //gEnter.append('g').attr('class', 'sparkline')
       gEnter

src/models/sparklinePlus.js

@@ -32,7 +32,7 @@ nv.models.sparklinePlus = function() {
 
       var gEnter = wrap.enter().append('g')
       //var gEnter = svg.enter().append('svg').append('g');
-      var sparklineWrap = gEnter.append('g').attr('class', 'sparklineplus')
+      var sparklineWrap = gEnter.append('g').attr('class', 'nvd3 sparklineplus')
           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
           //.style('fill', function(d, i){ return d.color || color[i % 10] })
           .style('stroke', function(d, i){ return d.color || color[i % 10] });

src/models/stackedArea.js

@@ -50,8 +50,8 @@ nv.models.stackedArea = function() {
 
 
 
-        var wrap = d3.select(this).selectAll('g.d3stackedarea').data([dataCopy]);
-        var wrapEnter = wrap.enter().append('g').attr('class', 'd3stackedarea');
+        var wrap = d3.select(this).selectAll('g.wrap.stackedarea').data([dataCopy]);
+        var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedarea');
         var defsEnter = wrapEnter.append('defs');
         var gEnter = wrapEnter.append('g');
         var g = wrap.select('g');

src/models/stackedAreaWithLegend.js

@@ -57,8 +57,8 @@ nv.models.stackedAreaWithLegend = function() {
         .color(color)
 
 
-      var wrap = d3.select(this).selectAll('g.wrap').data([data]);
-      var gEnter = wrap.enter().append('g').attr('class', 'wrap d3stackedWithLegend').append('g');
+      var wrap = d3.select(this).selectAll('g.wrap.stackedAreaWithLegend').data([data]);
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedWithLegend').append('g');
 
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');

src/utils.js

@@ -25,3 +25,15 @@ nv.utils.windowSize = function() {
     return (size);
 };
 
+
+
+// Easy way to bind multiple functions to window.onresize
+// TODO: give a way to remove a function after its bound, other than removing alkl of them
+nv.utils.windowResize = function(fun){
+  var oldresize = window.onresize;
+
+  window.onresize = function(e) {
+    oldresize(e);
+    fun(e);
+  }
+}