blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reworked library to remove jquery dependancies

Browse Source 
renamed nvtooltip.js to tooltip.js and put it into the nv namespace
Added a batch file for building on windows.
master-patched
Nathanael Anderson 12 years ago
parent 6b450b1585
commit 22225147ab
27 changed files with 957 additions and 616 deletions
Show Stats Download Patch File Download Diff File

3
Makefile
Unescape Escape View File

@ -1,7 +1,8 @@
JS_FILES = \
src/nvtooltip.js \
src/intro.js \
src/core.js \
src/tooltip.js \
src/utils.js \
src/models/legend.js \
src/models/xaxis.js \
src/models/yaxis.js \

6
build.bat
Unescape Escape View File

@ -0,0 +1,6 @@
@echo off
copy src\intro.js /B + src\core.js /B + src\tooltip.js /B temp1.js /B
copy src\models\*.js /B + src\charts\*.js /B temp2.js /B
copy temp1.js /B + temp2.js /B + src\outro.js /B nv.d3.js /B
del temp1.js
del temp2.js

19
examples/bar.html
Unescape Escape View File

@ -17,7 +17,6 @@ text {
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/bar.js"></script>
<script>
@ -48,8 +47,10 @@ text {
//Format A
nv.addGraph({
generate: function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.bar()
.width(width)
@ -64,19 +65,19 @@ nv.addGraph({
return chart;
},
callback: function(graph) {
$(window).resize(function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.call(
graph
.width($(window).width() - 40)
.height($(window).height() - 40)
.width(width)
.height(height)
)
});
};
}
});

28
examples/cumulativeLine.html
Unescape Escape View File

@ -21,9 +21,8 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>
@ -61,8 +60,8 @@ var cumulativeMonthEndTestData = [
nv.addGraph({
generate: function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.cumulativeLine()
.width(width)
@ -95,9 +94,9 @@ nv.addGraph({
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
var offset = $('#test1').offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
var offsetElement = document.getElementById("test1"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatterY = d3.format(",.2%"),
formatterX = function(d) {
return d3.time.format('%x')(new Date(d))
@ -108,20 +107,19 @@ nv.addGraph({
formatterY(graph.y()(e.point)) + ' on ' + formatterX(graph.x()(e.point)) +
'</p>';
//$('#positionTest').css({'left': left, 'top': top});
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
});
graph.dispatch.on('tooltipHide', function(e) {
nvtooltip.cleanup();
nv.tooltip.cleanup();
});
$(window).resize(function() {
var width = $(window).width() - 40,
height = $(window).height() - 40,
margin = graph.margin();
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin();
if (width < margin.left + margin.right + 20)
@ -140,7 +138,7 @@ nv.addGraph({
.attr('height', height)
.call(graph);
});
};
}
});

3
examples/legend.html
Unescape Escape View File

@ -9,7 +9,6 @@
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script>
@ -25,7 +24,7 @@ nv.addGraph({
.width(width)
.height(height);
chart.dispatch.on('legendClick', function(d,i) { log(d,i) });
chart.dispatch.on('legendClick', function(d,i) { console.log(d,i) });
//chart.xaxis.tickFormat(d3.format(".02f"))

15
examples/line.html
Unescape Escape View File

@ -13,7 +13,6 @@ body {
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/line.js"></script>
@ -24,8 +23,8 @@ body {
//Format A
nv.addGraph({
generate: function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.line()
.width(width)
@ -42,11 +41,11 @@ nv.addGraph({
return chart;
},
callback: function(graph) {
$(window).resize(function() {
var width = $(window).width() - 40,
height = $(window).height() - 40,
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin(),
animate = graph.animate();
animate = graph.animate();
if (width < margin.left + margin.right + 20)
@ -64,7 +63,7 @@ nv.addGraph({
.attr('width', width)
.attr('height', height)
.call(graph);
});
};
}
});

4
examples/lineChart.html
Unescape Escape View File

@ -32,10 +32,10 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<!-- script src="../lib/jquery.min.js"></script -->
<script src="../nv.d3.js"></script>
<!-- including all the components so I don't have to minify every time I test in development -->
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>

31
examples/lineWithFocus.html
Unescape Escape View File

@ -22,9 +22,8 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>
@ -42,10 +41,10 @@ text {
nv.addGraph({
generate: function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.lineWithFocus()
var chart = nv.models.lineWithFocus()
.width(width)
.height(height)
//.dotRadius(1) //TODO: fix this setting
@ -65,29 +64,29 @@ nv.addGraph({
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
var offset = $('#test1').offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
formatter = d3.format('.2r');
var offsetElement = document.getElementById("test1"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatter = d3.format('.2r');
var content = '<h3>' + e.series.key + '</h3>' +
'<p>' +
formatter(graph.y()(e.point)) + ', ' + formatter(graph.x()(e.point)) +
'</p>';
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
});
graph.dispatch.on('tooltipHide', function(e) {
nvtooltip.cleanup();
nv.tooltip.cleanup();
});
$(window).resize(function() {
var width = $(window).width() - 40,
height = $(window).height() - 40,
margin = graph.margin();
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin();
if (width < margin.left + margin.right + 20)
@ -106,7 +105,7 @@ nv.addGraph({
.attr('height', height)
.call(graph);
});
};
}
});

22
examples/lineWithLegend.html
Unescape Escape View File

@ -32,9 +32,8 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>
@ -86,33 +85,34 @@ nv.addGraph({
},
callback: function(chart) {
var showTooltip = function(e) {
var offset = $(selector).offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
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
// 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>';
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
};
chart.dispatch.on('tooltipShow', showTooltip);
chart.dispatch.on('tooltipHide', nvtooltip.cleanup);
chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);
$(window).resize(function() {
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);
});
};
}
});

1
examples/monthendAxis.html
Unescape Escape View File

@ -9,7 +9,6 @@
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script>

17
examples/scatter.html
Unescape Escape View File

@ -13,7 +13,6 @@ body {
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/scatter.js"></script>
@ -23,10 +22,10 @@ body {
//Format A
nv.addGraph({
generate: function() {
var width = $(window).width() - 40,
height = $(window).height() - 40;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.scatter()
var chart = nv.models.scatter()
.width(width)
.height(height)
.margin({top: 20, right: 20, bottom: 20, left: 20})
@ -42,10 +41,10 @@ nv.addGraph({
return chart;
},
callback: function(graph) {
$(window).resize(function() {
var width = $(window).width() - 40,
height = $(window).height() - 40,
margin = graph.margin();
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin();
if (width < margin.left + margin.right + 20)
@ -64,7 +63,7 @@ nv.addGraph({
.attr('height', height)
.call(graph);
});
};
}
});

37
examples/scatterWithLegend.html
Unescape Escape View File

@ -41,9 +41,8 @@ div {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../src/nvtooltip.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/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>
@ -56,10 +55,10 @@ div {
//Format A
nv.addGraph({
generate: function() {
var width = $(window).width() - 20,
height = $(window).height() - 20;
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.scatterWithLegend()
var chart = nv.models.scatterWithLegend()
.width(width)
.height(height)
//.width(width)
@ -87,10 +86,10 @@ nv.addGraph({
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
var offset = $('#test1').offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
formatter = d3.format(".2f");
var offsetElement = document.getElementById("test1"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatter = d3.format(".2f");
/*
@ -105,20 +104,22 @@ nv.addGraph({
var contentX = '<strong>' + formatter(e.point.x) + '</strong>';
var contentY = '<strong>' + formatter(e.point.y) + '</strong>';
nvtooltip.show([left, $(window).height() - 30], contentX, 'n', 1);
nvtooltip.show([5, top], contentY, 'w', 1);
var height = nv.utils.windowSize().height - 40;
nv.tooltip.show([left, height - 50], contentX, 'n', 1);
nv.tooltip.show([5, top], contentY, 'w', 1);
});
graph.dispatch.on('tooltipHide', function(e) {
nvtooltip.cleanup();
nv.tooltip.cleanup();
});
$(window).resize(function() {
var width = $(window).width() - 20,
height = $(window).height() - 20,
margin = graph.margin(),
animate = graph.animate();
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin(),
animate = graph.animate();
if (width < margin.left + margin.right + 20)
@ -137,7 +138,7 @@ nv.addGraph({
.attr('height', height)
.call(graph);
});
};
}
});

5
examples/sparkline.html
Unescape Escape View File

@ -18,7 +18,6 @@ text {
<h2>Sparkline: <span id="test1" class="sparkline"></span></h2>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/sparkline.js"></script>
<script>
@ -27,8 +26,8 @@ text {
nv.addGraph({
generate: function() {
var chart = nv.models.sparkline()
.width(200)
.height(20)
.width(400)
.height(80)
d3.select("#test1")
.datum(sine())

35
examples/stackedArea.html
Unescape Escape View File

@ -21,9 +21,8 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script>
@ -43,8 +42,8 @@ nv.addGraph({
});
var width = $(window).width() - 20,
height = $(window).height() - 20;
var width = nv.utils.windowSize().width - 20,
height = nv.utils.windowSize().height - 20;
var chart = nv.models.stackedArea()
.width(width)
@ -64,35 +63,35 @@ nv.addGraph({
},
callback: function(graph) {
/*
graph.dispatch.on('tooltipShow', function(e) {
var offset = $('#chart').offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
formatterY = d3.format(",.2%"),
var offsetElement = document.getElementById("chart"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatterY = d3.format(",.2%"),
formatterX = function(d) {
return d3.time.format('%x')(new Date(d))
return d3.time.format('%x')(new Date(d))
};
var content = '<h3>' + e.series.key + '</h3>' +
'<p>' +
formatterY(graph.y()(e.point)) + ' on ' + formatterX(graph.x()(e.point)) +
formatterY(graph.y()(e.point)) + ' at ' + formatterX(graph.x()(e.point)) +
'</p>';
//$('#positionTest').css({'left': left, 'top': top});
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
});
graph.dispatch.on('tooltipHide', function(e) {
nvtooltip.cleanup();
nv.tooltip.cleanup();
});
*/
$(window).resize(function() {
var width = $(window).width() - 20,
height = $(window).height() - 20,
window.onResize = function() {
var width = nv.utils.windowSize().width - 20,
height = nv.utils.windowSize().height - 20,
margin = graph.margin();
@ -112,7 +111,7 @@ nv.addGraph({
.attr('height', height)
.call(graph);
});
}
}
});

25
examples/stackedAreaWithLegend.html
Unescape Escape View File

@ -26,9 +26,8 @@ text {
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/nvtooltip.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/xaxis.js"></script>
<script src="../src/models/yaxis.js"></script>
<script src="../src/models/legend.js"></script>
@ -69,38 +68,32 @@ svg.transition().duration(500).call(chart);
chart.dispatch.on('tooltipShow', function(e) {
var offset = $('#chart').offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
formatterY = chart.stacked.offset() == 'expand' ? d3.format(',.2%') : d3.format(',.2f'), //TODO: stacked format should be set by caller
var offsetElement = document.getElementById("chart"),
left = e.pos[0] + offsetElement.offsetLeft,
top = e.pos[1] + offsetElement.offsetTop,
formatterY = chart.stacked.offset() == 'expand' ? d3.format(',.2%') : d3.format(',.2f'), //TODO: stacked format should be set by caller
formatterX = function(d) { return d };
/*
formatterY = d3.format(",.2%"),
formatterX = function(d) {
return d3.time.format('%x')(new Date(d))
};
*/
var content = '<h3>' + e.series.key + '</h3>' +
'<p>' +
formatterY(chart.y()(e.point)) + ' on ' + formatterX(chart.x()(e.point)) +
'</p>';
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
});
chart.dispatch.on('tooltipHide', function(e) {
nvtooltip.cleanup();
nv.tooltip.cleanup();
});
$(window).resize(function() {
window.onresize = function() {
d3.select('#chart svg')
.attr('width', width())
.attr('height', height())
.call(chart);
});
};

8
lib/d3.v2.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
lib/jquery-1.7.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
lib/jquery.min.js vendored
Unescape Escape View File

@ -1 +0,0 @@
jquery-1.7.1.min.js

1145
nv.d3.js
View File

File diff suppressed because it is too large Load Diff

15
src/charts/lineChart.js
Unescape Escape View File

@ -15,16 +15,16 @@ nv.charts.line = function() {
var graph = nv.models.lineWithLegend(),
showTooltip = function(e) {
var offset = $(selector).offset(),
left = e.pos[0] + offset.left,
top = e.pos[1] + offset.top,
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.point)),
y = formatY(graph.y()(e.point)),
content = tooltip(e.series.key, x, y, e, graph);
nvtooltip.show([left, top], content);
nv.tooltip.show([left, top], content);
};
//setting component defaults
@ -71,16 +71,17 @@ nv.charts.line = function() {
},
callback: function(graph) {
graph.dispatch.on('tooltipShow', showTooltip);
graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
graph.dispatch.on('tooltipHide', nv.tooltip.cleanup);
//TODO: create resize queue and have nv core handle resize instead of binding all to window resize
$(window).resize(function() {
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);
});
};
}
});

48
src/core.js
Unescape Escape View File

@ -1,11 +1,13 @@
var nv = {
version: '0.0.1',
version: '0.0.1a',
dev: true //set false when in production
};
window.nv = nv;
nv.tooltip = {}; // For the tooltip system
nv.utils = {}; // Utility subsystem
nv.models = {}; //stores all the possible models/components
nv.charts = {}; //stores all the ready to use charts
nv.graphs = []; //stores all the graphs currently on the page
@ -14,19 +16,6 @@ nv.log = {}; //stores some statistics and potential error messages
nv.dispatch = d3.dispatch('render_start', 'render_end');
// ********************************************
// Public Helper functions, not part of NV
window.log = function(obj) {
if ((typeof(window.console) === 'object')
&& (typeof(window.console.log) === 'function'))
console.log.apply(console, arguments);
return obj;
};
// ********************************************
// Public Core NV functions
@ -38,7 +27,7 @@ nv.dispatch.on('render_start', function(e) {
nv.dispatch.on('render_end', function(e) {
nv.log.endTime = +new Date;
nv.log.totalTime = nv.log.endTime - nv.log.startTime;
if (nv.dev) log('total', nv.log.totalTime); //used for development, to keep track of graph generation times
if (nv.dev && console.log) console.log('total', nv.log.totalTime); //used for development, to keep track of graph generation times
});
@ -82,7 +71,6 @@ nv.addGraph = function(obj) {
};
nv.identity = function(d) { return d };
@ -91,9 +79,6 @@ nv.strip = function(s) {
}
/* An ugly implementation to get month end axis dates
* Will hopefully refactor sooner than later
*/
@ -139,4 +124,29 @@ d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
);
nv.utils.windowSize = function() {
// Sane defaults
var size = {width: 640, height: 480};
// Earlier IE uses Doc.body
if (document.body && document.body.offsetWidth) {
size.width = document.body.offsetWidth;
size.height = document.body.offsetHeight;
}
// IE can use depending on mode it is in
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
size.width = document.documentElement.offsetWidth;
size.height = document.documentElement.offsetHeight;
}
// Most recent browsers use
if (window.innerWidth && window.innerHeight) {
size.width = window.innerWidth;
size.height = window.innerHeight;
}
return (size);
};

2
src/models/line.js
Unescape Escape View File

@ -21,6 +21,8 @@ nv.models.line = function() {
x0, y0;
function chart(selection) {
selection.each(function(data) {
var seriesData = data.map(function(d) { return d.values }),

20
src/models/stackedArea.js
Unescape Escape View File

@ -9,7 +9,8 @@ nv.models.stackedArea = function() {
style = 'stack',
offset = 'zero',
order = 'default',
xDomain, yDomain;
xDomain, yDomain,
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
/************************************
* offset:
@ -181,7 +182,22 @@ nv.models.stackedArea = function() {
return chart;
};
chart.dispatch = lines.dispatch;
chart.dispatch = dispatch;
lines.dispatch.on('pointMouseover.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('pointMouseout.tooltip', function(e) {
dispatch.tooltipHide(e);
});
return chart;
}

7
src/models/stackedAreaWithLegend.js
Unescape Escape View File

@ -123,17 +123,18 @@ nv.models.stackedAreaWithLegend = function() {
});
*/
stacked.dispatch.on('pointMouseover.tooltip', function(e) {
stacked.dispatch.on('tooltipShow', function(e) {
dispatch.tooltipShow({
point: e.point,
series: e.series,
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
seriesIndex: e.seriesIndex,
pointIndex: e.pointIndex
});
});
stacked.dispatch.on('pointMouseout.tooltip', function(e) {
stacked.dispatch.on('tooltipHide', function(e) {
dispatch.tooltipHide(e);
});

2
src/outro.js
Unescape Escape View File

@ -1 +1 @@
})();
})();

70
src/nvtooltip.js → src/tooltip.js
Unescape Escape View File

@ -3,27 +3,33 @@
* A no frills tooltip implementation.
*****/
(function($) {
var nvtooltip = window.nvtooltip = {};
(function() {
var nvtooltip = window.nv.tooltip = {};
nvtooltip.show = function(pos, content, gravity, dist) {
var container = $('<div class="nvtooltip">');
var container = document.createElement("div");
container.className = "nvtooltip";
gravity = gravity || 's';
dist = dist || 20;
container
.html(content)
.css({left: -1000, top: -1000, opacity: 0})
.appendTo('body'); //append the container out of view so we can get measurements
var height = container.height() + parseInt(container.css('padding-top')) + parseInt(container.css('padding-bottom')),
width = container.width() + parseInt(container.css('padding-left')) + parseInt(container.css('padding-right')),
windowWidth = $(window).width(),
windowHeight = $(window).height(),
scrollTop = $('body').scrollTop(),
scrollLeft = $('body').scrollLeft(),
var body = document.getElementsByTagName("body")[0];
container.innerHTML = content;
container.style.left = 1;
container.style.top = 1;
container.style.opacity = 0;
body.appendChild(container);
var height = parseInt(container.offsetHeight),
width = parseInt(container.offsetWidth),
windowWidth = nv.utils.windowSize().width,
windowHeight = nv.utils.windowSize().height,
scrollTop = body.scrollTop,
scrollLeft = body.scrollLeft,
left, top;
@ -59,30 +65,34 @@
}
container
.css({
left: left,
top: top,
opacity: 1
});
container.style.left = left+"px";
container.style.top = top+"px";
container.style.opacity = 1;
return container;
};
nvtooltip.cleanup = function() {
var tooltips = $('.nvtooltip');
tooltips.css({
'transition-delay': '0 !important',
'-moz-transition-delay': '0 !important',
'-webkit-transition-delay': '0 !important'
});
// Find the tooltips, mark them for removal by this class (so others cleanups won't find it)
var tooltips = document.getElementsByClassName('nvtooltip');
var purging = [];
while(tooltips.length) {
purging.push(tooltips[0]);
tooltips[0].style.transitionDelay = "0 !important";
tooltips[0].style.opacity = 0;
tooltips[0].className = "nvtooltip-pending-removal";
}
tooltips.css('opacity',0);
setTimeout(function() {
setTimeout(function() {
tooltips.remove()
while (purging.length) {
var removeMe = purging.pop();
removeMe.parentNode.removeChild(removeMe);
}
}, 500);
};
})(jQuery);
})();

0
src/utils.js
Unescape Escape View File

Write Preview
Loading…
Cancel
Save