diff --git a/examples/bullet.html b/examples/bullet.html index 206b644..0c0c052 100644 --- a/examples/bullet.html +++ b/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") diff --git a/examples/cumulativeLine.html b/examples/cumulativeLine.html index dafc49f..0a7bab8 100644 --- a/examples/cumulativeLine.html +++ b/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'); diff --git a/examples/linePlusBar.html b/examples/linePlusBar.html index 1c19019..a64ec4b 100644 --- a/examples/linePlusBar.html +++ b/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; diff --git a/src/charts/cumulativeLineChartDaily.js b/src/charts/cumulativeLineChartDaily.js index b67d64a..43022cc 100644 --- a/src/charts/cumulativeLineChartDaily.js +++ b/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; }; + diff --git a/src/d3.css b/src/d3.css index 04148c9..f7706af 100644 --- a/src/d3.css +++ b/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; } diff --git a/src/models/bar.js b/src/models/bar.js index 0a9b863..3aa38e7 100644 --- a/src/models/bar.js +++ b/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'); diff --git a/src/models/cumulativeLine.js b/src/models/cumulativeLine.js index c284627..d235973 100644 --- a/src/models/cumulativeLine.js +++ b/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'); diff --git a/src/models/historicalBar.js b/src/models/historicalBar.js index edd444b..fb8c528 100644 --- a/src/models/historicalBar.js +++ b/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'); diff --git a/src/models/legend.js b/src/models/legend.js index 32314f1..f92bbf0 100644 --- a/src/models/legend.js +++ b/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') diff --git a/src/models/line.js b/src/models/line.js index ec4b0ea..a4cbf84 100644 --- a/src/models/line.js +++ b/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') diff --git a/src/models/linePlusBar.js b/src/models/linePlusBar.js index e1914c9..c5c690a 100644 --- a/src/models/linePlusBar.js +++ b/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; } diff --git a/src/models/lineWithFocus.js b/src/models/lineWithFocus.js index 663213c..4e9ea51 100644 --- a/src/models/lineWithFocus.js +++ b/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'); diff --git a/src/models/lineWithFourAxes.js b/src/models/lineWithFourAxes.js index 69b0bdb..f42c773 100644 --- a/src/models/lineWithFourAxes.js +++ b/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'); diff --git a/src/models/lineWithLegend.js b/src/models/lineWithLegend.js index 1383a0b..1451512 100644 --- a/src/models/lineWithLegend.js +++ b/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'); diff --git a/src/models/multiBar.js b/src/models/multiBar.js index 3c44a92..a272a60 100644 --- a/src/models/multiBar.js +++ b/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'); diff --git a/src/models/multiBarHorizontal.js b/src/models/multiBarHorizontal.js index a59ad85..1d91236 100644 --- a/src/models/multiBarHorizontal.js +++ b/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'); diff --git a/src/models/multiBarHorizontalWithLegend.js b/src/models/multiBarHorizontalWithLegend.js index ceb116a..61e83e1 100644 --- a/src/models/multiBarHorizontalWithLegend.js +++ b/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'); diff --git a/src/models/multiBarWithLegend.js b/src/models/multiBarWithLegend.js index c548812..c256408 100644 --- a/src/models/multiBarWithLegend.js +++ b/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'); diff --git a/src/models/scatter.js b/src/models/scatter.js index 0b61af2..16ad81a 100644 --- a/src/models/scatter.js +++ b/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') diff --git a/src/models/scatterWithLegend.js b/src/models/scatterWithLegend.js index acda999..8434523 100644 --- a/src/models/scatterWithLegend.js +++ b/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'); diff --git a/src/models/sparkline.js b/src/models/sparkline.js index 0016c1f..21fbc9a 100644 --- a/src/models/sparkline.js +++ b/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 diff --git a/src/models/sparklinePlus.js b/src/models/sparklinePlus.js index 01ee8c8..e1d9242 100644 --- a/src/models/sparklinePlus.js +++ b/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] }); diff --git a/src/models/stackedArea.js b/src/models/stackedArea.js index 45101aa..5abcdba 100644 --- a/src/models/stackedArea.js +++ b/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'); diff --git a/src/models/stackedAreaWithLegend.js b/src/models/stackedAreaWithLegend.js index 6c6837e..6248a4a 100644 --- a/src/models/stackedAreaWithLegend.js +++ b/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'); diff --git a/src/utils.js b/src/utils.js index cb2c63a..f70dd97 100644 --- a/src/utils.js +++ b/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); + } +}