');
-
- 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(),
- left, top;
-
-
- switch (gravity) {
- case 'e':
- left = pos[0] - width - dist;
- top = pos[1] - (height / 2);
- if (left < scrollLeft) left = pos[0] + dist;
- if (top < scrollTop) top = scrollTop + 5;
- if (top + height > scrollTop + windowHeight) top = scrollTop - height - 5;
- break;
- case 'w':
- left = pos[0] + dist;
- top = pos[1] - (height / 2);
- if (left + width > windowWidth) left = pos[0] - width - dist;
- if (top < scrollTop) top = scrollTop + 5;
- if (top + height > scrollTop + windowHeight) top = scrollTop - height - 5;
- break;
- case 'n':
- left = pos[0] - (width / 2);
- top = pos[1] + dist;
- if (left < scrollLeft) left = scrollLeft + 5;
- if (left + width > windowWidth) left = windowWidth - width - 5;
- if (top + height > scrollTop + windowHeight) top = pos[1] - height - dist;
- break;
- case 's':
- left = pos[0] - (width / 2);
- top = pos[1] - height - dist;
- if (left < scrollLeft) left = scrollLeft + 5;
- if (left + width > windowWidth) left = windowWidth - width - 5;
- if (scrollTop > top) top = pos[1] + 20;
- break;
- }
-
-
- container
- .css({
- left: left,
- top: top,
- 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'
- });
-
- tooltips.css('opacity',0);
-
- setTimeout(function() {
- tooltips.remove()
- }, 500);
- };
-
-})(jQuery);
(function(){
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
@@ -103,19 +17,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
@@ -127,7 +28,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
});
@@ -171,7 +72,6 @@ nv.addGraph = function(obj) {
};
-
nv.identity = function(d) { return d };
@@ -180,9 +80,6 @@ nv.strip = function(s) {
}
-
-
-
/* An ugly implementation to get month end axis dates
* Will hopefully refactor sooner than later
*/
@@ -228,227 +125,434 @@ 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;
+ }
-nv.models.legend = function() {
- var margin = {top: 5, right: 0, bottom: 5, left: 10},
- width = 400,
- height = 20,
- color = d3.scale.category10().range(),
- dispatch = d3.dispatch('legendClick', 'legendMouseover', 'legendMouseout');
-
- function chart(selection) {
- selection.each(function(data) {
+ // 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;
+ }
- var wrap = d3.select(this).selectAll('g.legend').data([data]);
- var gEnter = wrap.enter().append('g').attr('class', 'legend').append('g');
+ // Most recent browsers use
+ if (window.innerWidth && window.innerHeight) {
+ size.width = window.innerWidth;
+ size.height = window.innerHeight;
+ }
+ return (size);
+};
- var g = wrap.select('g')
- .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+/*****
+ * A no frills tooltip implementation.
+ *****/
- var series = g.selectAll('.series')
- .data(function(d) { return d });
- var seriesEnter = series.enter().append('g').attr('class', 'series')
- .on('mouseover', function(d,i) {
- dispatch.legendMouseover(d,i);
- })
- .on('mouseout', function(d,i) {
- dispatch.legendMouseout(d,i);
- })
- .on('click', function(d,i) {
- dispatch.legendClick(d,i);
- });
- seriesEnter.append('circle')
- .style('fill', function(d,i) { return d.color || color[i % 20] })
- .style('stroke', function(d,i) { return d.color || color[i % 20] })
- .style('stroke-width', 2)
- .attr('r', 5);
- seriesEnter.append('text')
- .text(function(d) { return d.key })
- .attr('text-anchor', 'start')
- .attr('dy', '.32em')
- .attr('dx', '8');
- series.classed('disabled', function(d) { return d.disabled });
- series.exit().remove();
+(function() {
+ var nvtooltip = window.nv.tooltip = {};
- var ypos = 5,
- newxpos = 5,
- maxwidth = 0,
- xpos;
- series
- .attr('transform', function(d, i) {
- var length = d3.select(this).select('text').node().getComputedTextLength() + 28;
- xpos = newxpos;
+ nvtooltip.show = function(pos, content, gravity, dist) {
- if (width < margin.left + margin.right + xpos + length) {
- newxpos = xpos = 5;
- ypos += 20;
- }
+ var container = document.createElement("div");
+ container.className = "nvtooltip";
- newxpos += length;
- if (newxpos > maxwidth) maxwidth = newxpos;
+ gravity = gravity || 's';
+ dist = dist || 20;
- return 'translate(' + xpos + ',' + ypos + ')';
- });
+ var body = document.getElementsByTagName("body")[0];
- //position legend as far right as possible within the total width
- g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
+ container.innerHTML = content;
+ container.style.left = 1;
+ container.style.top = 1;
+ container.style.opacity = 0;
+ body.appendChild(container);
- //update height value if calculated larger than current
- //Asuming legend is always horizontal for now, removing if clause because this does not let legend shrink after expanding
- //TODO: allow legend to be horizontal or vertical, instead of definign height/width define one, and maybe call it maxHeight/maxWidth
- //if (height < margin.top + margin.bottom + ypos + 15)
- height = margin.top + margin.bottom + ypos + 15;
+ 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;
- });
- return chart;
- }
+ switch (gravity) {
+ case 'e':
+ left = pos[0] - width - dist;
+ top = pos[1] - (height / 2);
+ if (left < scrollLeft) left = pos[0] + dist;
+ if (top < scrollTop) top = scrollTop + 5;
+ if (top + height > scrollTop + windowHeight) top = scrollTop - height - 5;
+ break;
+ case 'w':
+ left = pos[0] + dist;
+ top = pos[1] - (height / 2);
+ if (left + width > windowWidth) left = pos[0] - width - dist;
+ if (top < scrollTop) top = scrollTop + 5;
+ if (top + height > scrollTop + windowHeight) top = scrollTop - height - 5;
+ break;
+ case 'n':
+ left = pos[0] - (width / 2);
+ top = pos[1] + dist;
+ if (left < scrollLeft) left = scrollLeft + 5;
+ if (left + width > windowWidth) left = windowWidth - width - 5;
+ if (top + height > scrollTop + windowHeight) top = pos[1] - height - dist;
+ break;
+ case 's':
+ left = pos[0] - (width / 2);
+ top = pos[1] - height - dist;
+ if (left < scrollLeft) left = scrollLeft + 5;
+ if (left + width > windowWidth) left = windowWidth - width - 5;
+ if (scrollTop > top) top = pos[1] + 20;
+ break;
+ }
- chart.dispatch = dispatch;
+ container.style.left = left+"px";
+ container.style.top = top+"px";
+ container.style.opacity = 1;
- chart.margin = function(_) {
- if (!arguments.length) return margin;
- margin = _;
- return chart;
+ return container;
};
- chart.width = function(_) {
- if (!arguments.length) return width;
- width = _;
- return chart;
- };
+ nvtooltip.cleanup = function() {
- chart.height = function(_) {
- if (!arguments.length) return height;
- height = _;
- return chart;
- };
+ // 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";
+ }
- chart.color = function(_) {
- if (!arguments.length) return color;
- color = _;
- return chart;
+
+ setTimeout(function() {
+
+ while (purging.length) {
+ var removeMe = purging.pop();
+ removeMe.parentNode.removeChild(removeMe);
+ }
+ }, 500);
};
- return chart;
-}
-nv.models.xaxis = function() {
- var domain = [0,1], //just to have something to start with, maybe I dont need this
- range = [0,1],
- axisLabelText = false;
+})();
- var scale = d3.scale.linear(),
- axis = d3.svg.axis().scale(scale).orient('bottom');
+nv.models.bar = function() {
+ var margin = {top: 20, right: 10, bottom: 20, left: 60},
+ width = 960,
+ height = 500,
+ animate = 500;
+
+ var x = d3.scale.ordinal(),
+ y = d3.scale.linear(),
+ xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(5),
+ yAxis = d3.svg.axis().scale(y).orient('left');
function chart(selection) {
selection.each(function(data) {
- scale.domain(domain)
- .range(range);
+ //x .domain(data.map(function(d,i) { return d.label }))
+ x .domain(["One", "Two", "Three", "Four", "Five"])
+ .rangeRoundBands([0, width - margin.left - margin.right], .1);
- //TODO: consider calculating height based on whether or not label is added, for reference in charts using this component
+ y .domain([0, d3.max(data, function(d) { return d.y; })])
+ .range([height - margin.top - margin.bottom, 0]);
- var axisLabel = d3.select(this).selectAll('text.axislabel')
- .data([axisLabelText || null]);
- axisLabel.enter().append('text').attr('class', 'axislabel')
- .attr('text-anchor', 'middle')
- .attr('x', range[1] / 2)
- .attr('y', 25);
- axisLabel.exit().remove();
- axisLabel.text(function(d) { return d });
+ xAxis.ticks( width / 100 );
+ yAxis.ticks( height / 36 ).tickSize(-(width - margin.right - margin.left), 0);
+ yAxis.tickSize(-(width - margin.right - margin.left), 0);
- //d3.select(this)
- d3.transition(d3.select(this))
- .call(axis);
+ var wrap = d3.select(this).selectAll('g.wrap').data([data]);
+ var gEnter = wrap.enter().append('g').attr('class', 'wrap').append('g');
- d3.select(this)
- .selectAll('line.tick')
- //.filter(function(d) { return !parseFloat(d) })
- .filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) })
- .classed('zero', true);
+ gEnter.append('g').attr('class', 'x axis');
+ gEnter.append('g').attr('class', 'y axis');
+ gEnter.append('g').attr('class', 'bars');
- });
- return chart;
- }
+ wrap.attr('width', width)
+ .attr('height', height);
+ var g = wrap.select('g')
+ .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
- chart.domain = function(_) {
- if (!arguments.length) return domain;
- domain = _;
+
+ var bars = wrap.select('.bars').selectAll('.bar')
+ .data(function(d) { return d });
+ bars.exit().remove();
+
+
+ var barsEnter = bars.enter().append('g')
+ .attr('class', 'bar')
+ .on('mouseover', function(d,i){ d3.select(this).classed('hover', true) })
+ .on('mouseout', function(d,i){ d3.select(this).classed('hover', false) });
+ barsEnter.append('rect')
+ .attr('y', function(d) { return y(0) });
+ barsEnter.append('text')
+ .attr('text-anchor', 'middle')
+ .attr('dy', '-4px');
+
+
+ bars
+ .attr('transform', function(d,i) { return 'translate(' + x(d.label) + ',0)' })
+ bars.selectAll('rect')
+ .order()
+ .attr('width', x.rangeBand )
+ .transition()
+ .duration(animate)
+ .attr('x', 0 )
+ .attr('y', function(d) { return y(d.y) })
+ .attr('height', function(d) { return y.range()[0] - y(d.y) });
+ bars.selectAll('text')
+ .attr('x', 0 )
+ .attr('y', function(d) { return y(d.y) })
+ .attr('dx', x.rangeBand() / 2)
+ .text(function(d) { return d.y });
+
+
+ g.select('.x.axis')
+ .attr('transform', 'translate(0,' + y.range()[0] + ')')
+ .call(xAxis);
+
+ g.select('.y.axis')
+ .call(yAxis);
+ });
+
+ return chart;
+ }
+
+ chart.margin = function(_) {
+ if (!arguments.length) return margin;
+ margin = _;
return chart;
};
- chart.range = function(_) {
- if (!arguments.length) return range;
- range = _;
+ 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.scale = function(_) {
- if (!arguments.length) return scale;
- scale = _;
- axis.scale(scale);
+ 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.axisLabel = function(_) {
- if (!arguments.length) return axisLabelText;
- axisLabelText = _;
+ chart.animate = function(_) {
+ if (!arguments.length) return animate;
+ animate = _;
return chart;
- }
+ };
+ chart.xaxis = {};
+ // Expose the x-axis' tickFormat method.
+ d3.rebind(chart.xaxis, xAxis, 'tickFormat');
- d3.rebind(chart, axis, 'orient', 'ticks', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat');
+ chart.yaxis = {};
+ // Expose the y-axis' tickFormat method.
+ d3.rebind(chart.yaxis, yAxis, 'tickFormat');
return chart;
}
-nv.models.yaxis = function() {
- var domain = [0,1], //just to have something to start with
- range = [0,1],
- axisLabelText = false;
+nv.models.cumulativeLine = function() {
+ var margin = {top: 30, right: 20, bottom: 30, left: 60},
+ width = 960,
+ height = 500,
+ color = d3.scale.category10().range(),
+ dotRadius = function() { return 2.5 },
+ getX = function(d) { return d.x },
+ getY = function(d) { return d.y },
+ id = Math.floor(Math.random() * 10000); //Create semi-unique ID incase user doesn't select one
+
+ var x = d3.scale.linear(),
+ dx = d3.scale.linear(),
+ y = d3.scale.linear(),
+ xAxis = nv.models.xaxis().scale(x),
+ yAxis = nv.models.yaxis().scale(y),
+ legend = nv.models.legend().height(30),
+ lines = nv.models.line(),
+ dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
+ index = {i: 0, x: 0};
+
+
+ var indexDrag = d3.behavior.drag()
+ .on('dragstart', dragStart)
+ .on('drag', dragMove)
+ .on('dragend', dragEnd);
+
+ function dragStart(d,i) {}
+
+ function dragMove(d,i) {
+ d.x += d3.event.dx;
+ d.i = Math.round(dx.invert(d.x));
+
+ //d3.transition(d3.select('.chart-' + id)).call(chart);
+ d3.select(this).attr("transform", "translate(" + dx(d.i) + ",0)");
+ }
+
+ function dragEnd(d,i) {
+ d3.transition(d3.select('.chart-' + id)).call(chart);
+ }
- var y = d3.scale.linear(),
- axis = d3.svg.axis().scale(y).orient('left');
function chart(selection) {
selection.each(function(data) {
+ var series = indexify(index.i, data);
- y .domain(domain)
- .range(range);
+ var seriesData = series
+ .filter(function(d) { return !d.disabled })
+ .map(function(d) { return d.values });
+ x .domain(d3.extent(d3.merge(seriesData), getX ))
+ .range([0, width - margin.left - margin.right]);
- //TODO: consider calculating width based on whether or not label is added, for reference in charts using this component
+ dx .domain([0, data[0].values.length - 1]) //Assumes all series have same length
+ .range([0, width - margin.left - margin.right])
+ .clamp(true);
- var axisLabel = d3.select(this).selectAll('text.axislabel')
- .data([axisLabelText || null]);
- axisLabel.enter().append('text').attr('class', 'axislabel')
- .attr('transform', 'rotate(-90)')
- .attr('text-anchor', 'middle')
- .attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
- axisLabel.exit().remove();
- axisLabel
- .attr('x', -range[0] / 2)
- .text(function(d) { return d });
+ y .domain(d3.extent(d3.merge(seriesData), getY ))
+ .range([height - margin.top - margin.bottom, 0]);
+ lines
+ .width(width - margin.left - margin.right)
+ .height(height - margin.top - margin.bottom)
+ .color(data.map(function(d,i) {
+ return d.color || color[i % 10];
+ }).filter(function(d,i) { return !data[i].disabled }))
- //d3.select(this)
- d3.transition(d3.select(this))
- .call(axis);
- d3.select(this)
- .selectAll('line.tick')
- //.filter(function(d) { return !parseFloat(d) })
- .filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) })
- .classed('zero', true);
+ 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');
+
+ gEnter.append('g').attr('class', 'x axis');
+ gEnter.append('g').attr('class', 'y axis');
+ gEnter.append('g').attr('class', 'linesWrap');
+ gEnter.append('g').attr('class', 'legendWrap');
+
+
+
+ //TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
+ margin.top = legend.height();
+
+ 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(series.filter(function(d) { return !d.disabled }))
+
+
+ d3.transition(linesWrap).call(lines);
+
+
+ var indexLine = linesWrap.selectAll('.indexLine')
+ .data([index]);
+ indexLine.enter().append('rect').attr('class', 'indexLine')
+ .attr('width', 3)
+ .attr('x', -2)
+ .attr('fill', 'red')
+ .attr('fill-opacity', .5)
+ .call(indexDrag)
+
+ indexLine
+ .attr("transform", function(d) { return "translate(" + dx(d.i) + ",0)" })
+ .attr('height', height - margin.top - margin.bottom)
+
+
+ xAxis
+ .domain(x.domain())
+ .range(x.range())
+ //.ticks( width / 100 )
+ .tickSize(-(height - margin.top - margin.bottom), 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(-(width - margin.right - margin.left), 0);
+
+ d3.transition(g.select('.y.axis'))
+ .call(yAxis);
+
+
+
+
+
+ // ********** EVENT LISTENERS **********
+
+ 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('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);
+ });
+
});
@@ -456,115 +560,172 @@ nv.models.yaxis = function() {
}
- chart.domain = function(_) {
- if (!arguments.length) return domain;
- domain = _;
- return chart;
+
+ // ********** FUNCTIONS **********
+
+ /* Normalize the data according to an index point. */
+ function indexify(idx, data) {
+ return data.map(function(line, i) {
+ var v = getY(line.values[idx]);
+
+ return {
+ key: line.key,
+ values: line.values.map(function(point) {
+ return {'x': getX(point), 'y': (getY(point) - v) / (1 + v) };
+ }),
+ disabled: line.disabled,
+ hover: line.hover
+ /*
+ if (v < -.9) {
+ //if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically currect till it hits 100)
+ }
+ */
+ };
+ });
};
- chart.range = function(_) {
- if (!arguments.length) return range;
- range = _;
+
+
+
+ // ********** PUBLIC ACCESSORS **********
+
+ chart.dispatch = dispatch;
+
+ chart.x = function(_) {
+ if (!arguments.length) return getX;
+ getX = _;
+ lines.x(_);
return chart;
};
- chart.axisLabel = function(_) {
- if (!arguments.length) return axisLabelText;
- axisLabelText = _;
+ chart.y = function(_) {
+ if (!arguments.length) return getY;
+ getY = _;
+ lines.y(_);
return chart;
- }
-
+ };
- d3.rebind(chart, axis, 'scale', 'orient', 'ticks', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat');
+ chart.margin = function(_) {
+ if (!arguments.length) return margin;
+ margin = _;
+ return chart;
+ };
- return chart;
-}
+ chart.width = function(_) {
+ if (!arguments.length) return width;
+ width = _;
+ return chart;
+ };
-nv.models.bar = function() {
- var margin = {top: 20, right: 10, bottom: 20, left: 60},
- width = 960,
- height = 500,
- animate = 500;
+ chart.height = function(_) {
+ if (!arguments.length) return height;
+ height = _;
+ return chart;
+ };
- var x = d3.scale.ordinal(),
- y = d3.scale.linear(),
- xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(5),
- yAxis = d3.svg.axis().scale(y).orient('left');
+ chart.dotRadius = function(_) {
+ if (!arguments.length) return dotRadius;
+ dotRadius = d3.functor(_);
+ lines.dotRadius = _;
+ return chart;
+ };
- function chart(selection) {
- selection.each(function(data) {
- //x .domain(data.map(function(d,i) { return d.label }))
- x .domain(["One", "Two", "Three", "Four", "Five"])
- .rangeRoundBands([0, width - margin.left - margin.right], .1);
+ // Expose the x-axis' tickFormat method.
+ //chart.xAxis = {};
+ //d3.rebind(chart.xAxis, xAxis, 'tickFormat');
+ chart.xAxis = xAxis;
- y .domain([0, d3.max(data, function(d) { return d.y; })])
- .range([height - margin.top - margin.bottom, 0]);
+ // Expose the y-axis' tickFormat method.
+ //chart.yAxis = {};
+ //d3.rebind(chart.yAxis, yAxis, 'tickFormat');
+ chart.yAxis = yAxis;
- xAxis.ticks( width / 100 );
- yAxis.ticks( height / 36 ).tickSize(-(width - margin.right - margin.left), 0);
- yAxis.tickSize(-(width - margin.right - margin.left), 0);
+ return chart;
+}
- var wrap = d3.select(this).selectAll('g.wrap').data([data]);
- var gEnter = wrap.enter().append('g').attr('class', 'wrap').append('g');
+nv.models.legend = function() {
+ var margin = {top: 5, right: 0, bottom: 5, left: 10},
+ width = 400,
+ height = 20,
+ color = d3.scale.category10().range(),
+ dispatch = d3.dispatch('legendClick', 'legendMouseover', 'legendMouseout');
- gEnter.append('g').attr('class', 'x axis');
- gEnter.append('g').attr('class', 'y axis');
- gEnter.append('g').attr('class', 'bars');
+ function chart(selection) {
+ 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');
- 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')
+ var series = g.selectAll('.series')
.data(function(d) { return d });
- bars.exit().remove();
+ var seriesEnter = series.enter().append('g').attr('class', 'series')
+ .on('mouseover', function(d,i) {
+ dispatch.legendMouseover(d,i);
+ })
+ .on('mouseout', function(d,i) {
+ dispatch.legendMouseout(d,i);
+ })
+ .on('click', function(d,i) {
+ dispatch.legendClick(d,i);
+ });
+ seriesEnter.append('circle')
+ .style('fill', function(d,i) { return d.color || color[i % 20] })
+ .style('stroke', function(d,i) { return d.color || color[i % 20] })
+ .style('stroke-width', 2)
+ .attr('r', 5);
+ seriesEnter.append('text')
+ .text(function(d) { return d.key })
+ .attr('text-anchor', 'start')
+ .attr('dy', '.32em')
+ .attr('dx', '8');
+ series.classed('disabled', function(d) { return d.disabled });
+ series.exit().remove();
- var barsEnter = bars.enter().append('g')
- .attr('class', 'bar')
- .on('mouseover', function(d,i){ d3.select(this).classed('hover', true) })
- .on('mouseout', function(d,i){ d3.select(this).classed('hover', false) });
- barsEnter.append('rect')
- .attr('y', function(d) { return y(0) });
- barsEnter.append('text')
- .attr('text-anchor', 'middle')
- .attr('dy', '-4px');
+ var ypos = 5,
+ newxpos = 5,
+ maxwidth = 0,
+ xpos;
+ series
+ .attr('transform', function(d, i) {
+ var length = d3.select(this).select('text').node().getComputedTextLength() + 28;
+ xpos = newxpos;
+ if (width < margin.left + margin.right + xpos + length) {
+ newxpos = xpos = 5;
+ ypos += 20;
+ }
- bars
- .attr('transform', function(d,i) { return 'translate(' + x(d.label) + ',0)' })
- bars.selectAll('rect')
- .order()
- .attr('width', x.rangeBand )
- .transition()
- .duration(animate)
- .attr('x', 0 )
- .attr('y', function(d) { return y(d.y) })
- .attr('height', function(d) { return y.range()[0] - y(d.y) });
- bars.selectAll('text')
- .attr('x', 0 )
- .attr('y', function(d) { return y(d.y) })
- .attr('dx', x.rangeBand() / 2)
- .text(function(d) { return d.y });
+ newxpos += length;
+ if (newxpos > maxwidth) maxwidth = newxpos;
+ return 'translate(' + xpos + ',' + ypos + ')';
+ });
- g.select('.x.axis')
- .attr('transform', 'translate(0,' + y.range()[0] + ')')
- .call(xAxis);
+ //position legend as far right as possible within the total width
+ g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
+
+ //update height value if calculated larger than current
+ //Asuming legend is always horizontal for now, removing if clause because this does not let legend shrink after expanding
+ //TODO: allow legend to be horizontal or vertical, instead of definign height/width define one, and maybe call it maxHeight/maxWidth
+ //if (height < margin.top + margin.bottom + ypos + 15)
+ height = margin.top + margin.bottom + ypos + 15;
- g.select('.y.axis')
- .call(yAxis);
});
return chart;
}
+
+ chart.dispatch = dispatch;
+
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
@@ -573,36 +734,22 @@ nv.models.bar = function() {
chart.width = function(_) {
if (!arguments.length) return width;
- if (margin.left + margin.right + 20 > _)
- width = margin.left + margin.right + 20 // Min width
- else
- width = _;
+ 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 = _;
+ height = _;
return chart;
};
- chart.animate = function(_) {
- if (!arguments.length) return animate;
- animate = _;
+ chart.color = function(_) {
+ if (!arguments.length) return color;
+ color = _;
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');
-
return chart;
}
//TODO: consider adding axes
@@ -628,6 +775,8 @@ nv.models.line = function() {
x0, y0;
+
+
function chart(selection) {
selection.each(function(data) {
var seriesData = data.map(function(d) { return d.values }),
@@ -2054,7 +2203,8 @@ nv.models.stackedArea = function() {
style = 'stack',
offset = 'zero',
order = 'default',
- xDomain, yDomain;
+ xDomain, yDomain,
+ dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
/************************************
* offset:
@@ -2082,17 +2232,25 @@ nv.models.stackedArea = function() {
//compute the data based on offset and order (calc's y0 for every point)
- dataCopy = d3.layout.stack().offset(offset).order(order).values(function(d){ return d.values })(dataCopy);
+ dataCopy = d3.layout.stack()
+ .offset(offset)
+ .order(order)
+ .values(function(d){ return d.values })
+ .y(getY)
+ (dataCopy);
+
x .domain(xDomain || d3.extent(d3.merge(seriesData), getX))
.range([0, availableWidth]);
- y .domain(yDomain || [0, d3.max(dataCopy, function(d) { return d3.max(d.values, function(d) { return d.y0 + d.y }) }) ])
+ y .domain(yDomain || [0, d3.max(dataCopy, function(d) {
+ return d3.max(d.values, function(d) { return d.y0 + d.y })
+ }) ])
.range([availableHeight, 0]);
lines
- //.interactive(false)
+ //.interactive(false) //if we were to turn off interactive, the whole line chart should be removed
.width(availableWidth)
.height(availableHeight)
.xDomain(x.domain())
@@ -2102,10 +2260,7 @@ nv.models.stackedArea = function() {
return d.color || color[i % 10];
}).filter(function(d,i) { return !data[i].disabled }));
- // Select the wrapper g, if it exists.
var wrap = d3.select(this).selectAll('g.d3stackedarea').data([dataCopy]);
-
- // Create the skeletal chart on first load.
var gEnter = wrap.enter().append('g').attr('class', 'd3stackedarea').append('g');
gEnter.append('g').attr('class', 'areaWrap');
@@ -2115,11 +2270,13 @@ nv.models.stackedArea = function() {
var g = wrap.select('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
var linesWrap = g.select('.linesWrap')
.datum(dataCopy.filter(function(d) { return !d.disabled }))
d3.transition(linesWrap).call(lines);
+
var area = d3.svg.area()
.x(function(d) { return x(getX(d)) })
.y0(function(d) { return y(d.y0) })
@@ -2148,6 +2305,17 @@ nv.models.stackedArea = function() {
return chart;
}
+ chart.x = function(_) {
+ if (!arguments.length) return getX;
+ getX = d3.functor(_);
+ return chart;
+ };
+
+ chart.y = function(_) {
+ if (!arguments.length) return getY;
+ getY = d3.functor(_);
+ return chart;
+ }
chart.margin = function(_) {
if (!arguments.length) return margin;
@@ -2208,15 +2376,30 @@ 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;
}
nv.models.stackedAreaWithLegend = function() {
var margin = {top: 30, right: 20, bottom: 50, left: 60},
- width = 960,
- height = 500,
+ getWidth = function() { return 960 },
+ getHeight = function() { return 500 },
dotRadius = function() { return 2.5 },
color = d3.scale.category10().range(),
dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
@@ -2231,6 +2414,7 @@ nv.models.stackedAreaWithLegend = function() {
controls = nv.models.legend().height(30),
stacked = nv.models.stackedArea();
+ //TODO: let user select default
var controlsData = [
{ key: 'Stacked' },
{ key: 'Stream', disabled: true },
@@ -2238,9 +2422,13 @@ nv.models.stackedAreaWithLegend = function() {
];
-
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 });
.reduce(function(prev, curr, index) { //sum up all the y's
@@ -2252,18 +2440,18 @@ nv.models.stackedAreaWithLegend = function() {
}, []);
- x .domain(d3.extent(d3.merge(series), getX ))
- .range([0, width - margin.left - margin.right]);
+ x .domain(d3.extent(d3.merge(series), function(d) { return d.x } ))
+ .range([0, availableWidth]);
y .domain(stacked.offset() == 'zero' ?
- [0, d3.max(d3.merge(series), getY )] :
+ [0, d3.max(series, function(d) { return d.y } )] :
[0, 1] // 0 - 100%
)
- .range([height - margin.top - margin.bottom, 0]);
+ .range([availableHeight, 0]);
stacked
- .width(width - margin.left - margin.right)
- .height(height - margin.top - margin.bottom)
+ .width(availableWidth)
+ .height(availableHeight)
var wrap = d3.select(this).selectAll('g.wrap').data([data]);
@@ -2280,15 +2468,14 @@ nv.models.stackedAreaWithLegend = function() {
d.disabled = !d.disabled;
if (d.disabled)
- d.values.map(function(p) { p._y = p.y; p.y = 0; return p });
+ d.values.map(function(p) { p._y = p.y; p.y = 0; return p }); //TODO: need to use value from getY, not always d.y
else
- d.values.map(function(p) { p.y = p._y; return p });
+ d.values.map(function(p) { p.y = p._y; return p }); // ....
if (!data.filter(function(d) { return !d.disabled }).length) {
data.map(function(d) {
d.disabled = false;
- d.values.map(function(p) { p.y = p._y; return p });
- //wrap.selectAll('.series').classed('disabled', false);
+ d.values.map(function(p) { p.y = p._y; return p }); // ....
return d;
});
}
@@ -2321,7 +2508,7 @@ nv.models.stackedAreaWithLegend = function() {
});
-/*
+ /*
legend.dispatch.on('legendMouseover', function(d, i) {
d.hover = true;
selection.transition().call(chart)
@@ -2331,19 +2518,20 @@ nv.models.stackedAreaWithLegend = function() {
d.hover = false;
selection.transition().call(chart)
});
- */
+ */
- 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);
});
@@ -2357,28 +2545,20 @@ nv.models.stackedAreaWithLegend = function() {
legend.width(width/2 - margin.right);
- controls
- .width(280)
- .color(['#666', '#666', '#666']);
-
g.select('.legendWrap')
.datum(data)
.attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
.call(legend);
-
+ controls.width(280).color(['#444', '#444', '#444']);
g.select('.controlsWrap')
.datum(controlsData)
.attr('transform', 'translate(0,' + (-margin.top) +')')
.call(controls);
-
var stackedWrap = g.select('.stackedWrap')
.datum(data);
- //.datum(data.filter(function(d) { return !d.disabled }))
-
-
d3.transition(stackedWrap).call(stacked);
@@ -2386,23 +2566,22 @@ nv.models.stackedAreaWithLegend = function() {
.domain(x.domain())
.range(x.range())
.ticks( width / 100 )
- .tickSize(-(height - margin.top - margin.bottom), 0);
+ .tickSize(-availableHeight, 0);
g.select('.x.axis')
- .attr('transform', 'translate(0,' + y.range()[0] + ')');
+ .attr('transform', 'translate(0,' + availableHeight + ')');
d3.transition(g.select('.x.axis'))
.call(xAxis);
yAxis
.domain(y.domain())
.range(y.range())
- .ticks( stacked.offset() == 'wiggle' ? 0 : height / 36 )
- .tickSize(-(width - margin.right - margin.left), 0)
+ .ticks(stacked.offset() == 'wiggle' ? 0 : height / 36)
+ .tickSize(-availableWidth, 0)
.tickFormat(stacked.offset() == 'zero' ? d3.format(',.2f') : d3.format('%')); //TODO: stacked format should be set by caller
d3.transition(g.select('.y.axis'))
.call(yAxis);
-
});
return chart;
@@ -2412,15 +2591,15 @@ nv.models.stackedAreaWithLegend = function() {
chart.x = function(_) {
if (!arguments.length) return getX;
- getX = _;
- stacked.x(_);
+ getX = d3.functor(_);
+ stacked.x(getX);
return chart;
};
chart.y = function(_) {
if (!arguments.length) return getY;
- getY = _;
- stacked.y(_);
+ getY = d3.functor(_);
+ stacked.y(getY);
return chart;
};
@@ -2431,14 +2610,14 @@ nv.models.stackedAreaWithLegend = function() {
};
chart.width = function(_) {
- if (!arguments.length) return width;
- width = _;
+ if (!arguments.length) return getWidth;
+ getWidth = d3.functor(_);
return chart;
};
chart.height = function(_) {
- if (!arguments.length) return height;
- height = _;
+ if (!arguments.length) return getHeight;
+ getHeight = d3.functor(_);
return chart;
};
@@ -2450,17 +2629,150 @@ nv.models.stackedAreaWithLegend = function() {
};
chart.stacked = stacked;
-
- // Expose the x-axis' tickFormat method.
- //chart.xAxis = {};
- //d3.rebind(chart.xAxis, xAxis, 'tickFormat');
chart.xAxis = xAxis;
-
- // Expose the y-axis' tickFormat method.
- //chart.yAxis = {};
- //d3.rebind(chart.yAxis, yAxis, 'tickFormat');
chart.yAxis = yAxis;
+ return chart;
+}
+
+nv.models.xaxis = function() {
+ var domain = [0,1], //just to have something to start with, maybe I dont need this
+ range = [0,1],
+ axisLabelText = false;
+
+ var scale = d3.scale.linear(),
+ axis = d3.svg.axis().scale(scale).orient('bottom');
+
+ function chart(selection) {
+ selection.each(function(data) {
+
+ scale.domain(domain)
+ .range(range);
+
+ //TODO: consider calculating height based on whether or not label is added, for reference in charts using this component
+
+ var axisLabel = d3.select(this).selectAll('text.axislabel')
+ .data([axisLabelText || null]);
+ axisLabel.enter().append('text').attr('class', 'axislabel')
+ .attr('text-anchor', 'middle')
+ .attr('x', range[1] / 2)
+ .attr('y', 25);
+ axisLabel.exit().remove();
+ axisLabel.text(function(d) { return d });
+
+
+ //d3.select(this)
+ d3.transition(d3.select(this))
+ .call(axis);
+
+ d3.select(this)
+ .selectAll('line.tick')
+ //.filter(function(d) { return !parseFloat(d) })
+ .filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) })
+ .classed('zero', true);
+
+ });
+
+ return chart;
+ }
+
+
+ chart.domain = function(_) {
+ if (!arguments.length) return domain;
+ domain = _;
+ return chart;
+ };
+
+ chart.range = function(_) {
+ if (!arguments.length) return range;
+ range = _;
+ return chart;
+ };
+
+ chart.scale = function(_) {
+ if (!arguments.length) return scale;
+ scale = _;
+ axis.scale(scale);
+ return chart;
+ };
+
+ chart.axisLabel = function(_) {
+ if (!arguments.length) return axisLabelText;
+ axisLabelText = _;
+ return chart;
+ }
+
+
+ d3.rebind(chart, axis, 'orient', 'ticks', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat');
+
+ return chart;
+}
+
+nv.models.yaxis = function() {
+ var domain = [0,1], //just to have something to start with
+ range = [0,1],
+ axisLabelText = false;
+
+ var y = d3.scale.linear(),
+ axis = d3.svg.axis().scale(y).orient('left');
+
+ function chart(selection) {
+ selection.each(function(data) {
+
+ y .domain(domain)
+ .range(range);
+
+
+ //TODO: consider calculating width based on whether or not label is added, for reference in charts using this component
+
+ var axisLabel = d3.select(this).selectAll('text.axislabel')
+ .data([axisLabelText || null]);
+ axisLabel.enter().append('text').attr('class', 'axislabel')
+ .attr('transform', 'rotate(-90)')
+ .attr('text-anchor', 'middle')
+ .attr('y', -40); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
+ axisLabel.exit().remove();
+ axisLabel
+ .attr('x', -range[0] / 2)
+ .text(function(d) { return d });
+
+
+ //d3.select(this)
+ d3.transition(d3.select(this))
+ .call(axis);
+
+ d3.select(this)
+ .selectAll('line.tick')
+ //.filter(function(d) { return !parseFloat(d) })
+ .filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) })
+ .classed('zero', true);
+
+ });
+
+ return chart;
+ }
+
+
+ chart.domain = function(_) {
+ if (!arguments.length) return domain;
+ domain = _;
+ return chart;
+ };
+
+ chart.range = function(_) {
+ if (!arguments.length) return range;
+ range = _;
+ return chart;
+ };
+
+ chart.axisLabel = function(_) {
+ if (!arguments.length) return axisLabelText;
+ axisLabelText = _;
+ return chart;
+ }
+
+
+ d3.rebind(chart, axis, 'scale', 'orient', 'ticks', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat');
return chart;
}
@@ -2481,16 +2793,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
@@ -2537,16 +2849,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);
- });
+ };
}
});
@@ -2622,4 +2935,4 @@ nv.charts.line = function() {
return chart;
};
-})();
+})();
\ No newline at end of file
diff --git a/src/charts/lineChart.js b/src/charts/lineChart.js
index 573f03d..08ec199 100644
--- a/src/charts/lineChart.js
+++ b/src/charts/lineChart.js
@@ -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);
- });
+ };
}
});
diff --git a/src/core.js b/src/core.js
index 8fcb5eb..affe731 100644
--- a/src/core.js
+++ b/src/core.js
@@ -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);
+};
diff --git a/src/models/line.js b/src/models/line.js
index 1702b1e..6125a62 100644
--- a/src/models/line.js
+++ b/src/models/line.js
@@ -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 }),
diff --git a/src/models/stackedArea.js b/src/models/stackedArea.js
index 7edd400..a0ff7de 100644
--- a/src/models/stackedArea.js
+++ b/src/models/stackedArea.js
@@ -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;
}
diff --git a/src/models/stackedAreaWithLegend.js b/src/models/stackedAreaWithLegend.js
index 2f96623..3422383 100644
--- a/src/models/stackedAreaWithLegend.js
+++ b/src/models/stackedAreaWithLegend.js
@@ -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);
});
diff --git a/src/outro.js b/src/outro.js
index 0319a0f..158693a 100644
--- a/src/outro.js
+++ b/src/outro.js
@@ -1 +1 @@
-})();
+})();
\ No newline at end of file
diff --git a/src/nvtooltip.js b/src/tooltip.js
similarity index 52%
rename from src/nvtooltip.js
rename to src/tooltip.js
index 376e720..9da0062 100644
--- a/src/nvtooltip.js
+++ b/src/tooltip.js
@@ -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 = $('
');
+
+ 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);
+
+})();
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..e69de29