| rev |
line source |
|
paulo@89
|
1 /* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-15 */
|
|
paulo@89
|
2 (function(){
|
|
paulo@89
|
3
|
|
paulo@89
|
4 // set up main nv object
|
|
paulo@89
|
5 var nv = {};
|
|
paulo@89
|
6
|
|
paulo@89
|
7 // the major global objects under the nv namespace
|
|
paulo@89
|
8 nv.dev = false; //set false when in production
|
|
paulo@89
|
9 nv.tooltip = nv.tooltip || {}; // For the tooltip system
|
|
paulo@89
|
10 nv.utils = nv.utils || {}; // Utility subsystem
|
|
paulo@89
|
11 nv.models = nv.models || {}; //stores all the possible models/components
|
|
paulo@89
|
12 nv.charts = {}; //stores all the ready to use charts
|
|
paulo@89
|
13 nv.logs = {}; //stores some statistics and potential error messages
|
|
paulo@89
|
14 nv.dom = {}; //DOM manipulation functions
|
|
paulo@89
|
15
|
|
paulo@89
|
16 nv.dispatch = d3.dispatch('render_start', 'render_end');
|
|
paulo@89
|
17
|
|
paulo@89
|
18 // Function bind polyfill
|
|
paulo@89
|
19 // Needed ONLY for phantomJS as it's missing until version 2.0 which is unreleased as of this comment
|
|
paulo@89
|
20 // https://github.com/ariya/phantomjs/issues/10522
|
|
paulo@89
|
21 // http://kangax.github.io/compat-table/es5/#Function.prototype.bind
|
|
paulo@89
|
22 // phantomJS is used for running the test suite
|
|
paulo@89
|
23 if (!Function.prototype.bind) {
|
|
paulo@89
|
24 Function.prototype.bind = function (oThis) {
|
|
paulo@89
|
25 if (typeof this !== "function") {
|
|
paulo@89
|
26 // closest thing possible to the ECMAScript 5 internal IsCallable function
|
|
paulo@89
|
27 throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
|
paulo@89
|
28 }
|
|
paulo@89
|
29
|
|
paulo@89
|
30 var aArgs = Array.prototype.slice.call(arguments, 1),
|
|
paulo@89
|
31 fToBind = this,
|
|
paulo@89
|
32 fNOP = function () {},
|
|
paulo@89
|
33 fBound = function () {
|
|
paulo@89
|
34 return fToBind.apply(this instanceof fNOP && oThis
|
|
paulo@89
|
35 ? this
|
|
paulo@89
|
36 : oThis,
|
|
paulo@89
|
37 aArgs.concat(Array.prototype.slice.call(arguments)));
|
|
paulo@89
|
38 };
|
|
paulo@89
|
39
|
|
paulo@89
|
40 fNOP.prototype = this.prototype;
|
|
paulo@89
|
41 fBound.prototype = new fNOP();
|
|
paulo@89
|
42 return fBound;
|
|
paulo@89
|
43 };
|
|
paulo@89
|
44 }
|
|
paulo@89
|
45
|
|
paulo@89
|
46 // Development render timers - disabled if dev = false
|
|
paulo@89
|
47 if (nv.dev) {
|
|
paulo@89
|
48 nv.dispatch.on('render_start', function(e) {
|
|
paulo@89
|
49 nv.logs.startTime = +new Date();
|
|
paulo@89
|
50 });
|
|
paulo@89
|
51
|
|
paulo@89
|
52 nv.dispatch.on('render_end', function(e) {
|
|
paulo@89
|
53 nv.logs.endTime = +new Date();
|
|
paulo@89
|
54 nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
|
|
paulo@89
|
55 nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
|
|
paulo@89
|
56 });
|
|
paulo@89
|
57 }
|
|
paulo@89
|
58
|
|
paulo@89
|
59 // Logs all arguments, and returns the last so you can test things in place
|
|
paulo@89
|
60 // Note: in IE8 console.log is an object not a function, and if modernizr is used
|
|
paulo@89
|
61 // then calling Function.prototype.bind with with anything other than a function
|
|
paulo@89
|
62 // causes a TypeError to be thrown.
|
|
paulo@89
|
63 nv.log = function() {
|
|
paulo@89
|
64 if (nv.dev && window.console && console.log && console.log.apply)
|
|
paulo@89
|
65 console.log.apply(console, arguments);
|
|
paulo@89
|
66 else if (nv.dev && window.console && typeof console.log == "function" && Function.prototype.bind) {
|
|
paulo@89
|
67 var log = Function.prototype.bind.call(console.log, console);
|
|
paulo@89
|
68 log.apply(console, arguments);
|
|
paulo@89
|
69 }
|
|
paulo@89
|
70 return arguments[arguments.length - 1];
|
|
paulo@89
|
71 };
|
|
paulo@89
|
72
|
|
paulo@89
|
73 // print console warning, should be used by deprecated functions
|
|
paulo@89
|
74 nv.deprecated = function(name, info) {
|
|
paulo@89
|
75 if (console && console.warn) {
|
|
paulo@89
|
76 console.warn('nvd3 warning: `' + name + '` has been deprecated. ', info || '');
|
|
paulo@89
|
77 }
|
|
paulo@89
|
78 };
|
|
paulo@89
|
79
|
|
paulo@89
|
80 // The nv.render function is used to queue up chart rendering
|
|
paulo@89
|
81 // in non-blocking async functions.
|
|
paulo@89
|
82 // When all queued charts are done rendering, nv.dispatch.render_end is invoked.
|
|
paulo@89
|
83 nv.render = function render(step) {
|
|
paulo@89
|
84 // number of graphs to generate in each timeout loop
|
|
paulo@89
|
85 step = step || 1;
|
|
paulo@89
|
86
|
|
paulo@89
|
87 nv.render.active = true;
|
|
paulo@89
|
88 nv.dispatch.render_start();
|
|
paulo@89
|
89
|
|
paulo@89
|
90 var renderLoop = function() {
|
|
paulo@89
|
91 var chart, graph;
|
|
paulo@89
|
92
|
|
paulo@89
|
93 for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
|
|
paulo@89
|
94 chart = graph.generate();
|
|
paulo@89
|
95 if (typeof graph.callback == typeof(Function)) graph.callback(chart);
|
|
paulo@89
|
96 }
|
|
paulo@89
|
97
|
|
paulo@89
|
98 nv.render.queue.splice(0, i);
|
|
paulo@89
|
99
|
|
paulo@89
|
100 if (nv.render.queue.length) {
|
|
paulo@89
|
101 setTimeout(renderLoop);
|
|
paulo@89
|
102 }
|
|
paulo@89
|
103 else {
|
|
paulo@89
|
104 nv.dispatch.render_end();
|
|
paulo@89
|
105 nv.render.active = false;
|
|
paulo@89
|
106 }
|
|
paulo@89
|
107 };
|
|
paulo@89
|
108
|
|
paulo@89
|
109 setTimeout(renderLoop);
|
|
paulo@89
|
110 };
|
|
paulo@89
|
111
|
|
paulo@89
|
112 nv.render.active = false;
|
|
paulo@89
|
113 nv.render.queue = [];
|
|
paulo@89
|
114
|
|
paulo@89
|
115 /*
|
|
paulo@89
|
116 Adds a chart to the async rendering queue. This method can take arguments in two forms:
|
|
paulo@89
|
117 nv.addGraph({
|
|
paulo@89
|
118 generate: <Function>
|
|
paulo@89
|
119 callback: <Function>
|
|
paulo@89
|
120 })
|
|
paulo@89
|
121
|
|
paulo@89
|
122 or
|
|
paulo@89
|
123
|
|
paulo@89
|
124 nv.addGraph(<generate Function>, <callback Function>)
|
|
paulo@89
|
125
|
|
paulo@89
|
126 The generate function should contain code that creates the NVD3 model, sets options
|
|
paulo@89
|
127 on it, adds data to an SVG element, and invokes the chart model. The generate function
|
|
paulo@89
|
128 should return the chart model. See examples/lineChart.html for a usage example.
|
|
paulo@89
|
129
|
|
paulo@89
|
130 The callback function is optional, and it is called when the generate function completes.
|
|
paulo@89
|
131 */
|
|
paulo@89
|
132 nv.addGraph = function(obj) {
|
|
paulo@89
|
133 if (typeof arguments[0] === typeof(Function)) {
|
|
paulo@89
|
134 obj = {generate: arguments[0], callback: arguments[1]};
|
|
paulo@89
|
135 }
|
|
paulo@89
|
136
|
|
paulo@89
|
137 nv.render.queue.push(obj);
|
|
paulo@89
|
138
|
|
paulo@89
|
139 if (!nv.render.active) {
|
|
paulo@89
|
140 nv.render();
|
|
paulo@89
|
141 }
|
|
paulo@89
|
142 };
|
|
paulo@89
|
143
|
|
paulo@89
|
144 // Node/CommonJS exports
|
|
paulo@89
|
145 if (typeof(module) !== 'undefined' && typeof(exports) !== 'undefined') {
|
|
paulo@89
|
146 module.exports = nv;
|
|
paulo@89
|
147 }
|
|
paulo@89
|
148
|
|
paulo@89
|
149 if (typeof(window) !== 'undefined') {
|
|
paulo@89
|
150 window.nv = nv;
|
|
paulo@89
|
151 }
|
|
paulo@89
|
152 /* Facade for queueing DOM write operations
|
|
paulo@89
|
153 * with Fastdom (https://github.com/wilsonpage/fastdom)
|
|
paulo@89
|
154 * if available.
|
|
paulo@89
|
155 * This could easily be extended to support alternate
|
|
paulo@89
|
156 * implementations in the future.
|
|
paulo@89
|
157 */
|
|
paulo@89
|
158 nv.dom.write = function(callback) {
|
|
paulo@89
|
159 if (window.fastdom !== undefined) {
|
|
paulo@89
|
160 return fastdom.write(callback);
|
|
paulo@89
|
161 }
|
|
paulo@89
|
162 return callback();
|
|
paulo@89
|
163 };
|
|
paulo@89
|
164
|
|
paulo@89
|
165 /* Facade for queueing DOM read operations
|
|
paulo@89
|
166 * with Fastdom (https://github.com/wilsonpage/fastdom)
|
|
paulo@89
|
167 * if available.
|
|
paulo@89
|
168 * This could easily be extended to support alternate
|
|
paulo@89
|
169 * implementations in the future.
|
|
paulo@89
|
170 */
|
|
paulo@89
|
171 nv.dom.read = function(callback) {
|
|
paulo@89
|
172 if (window.fastdom !== undefined) {
|
|
paulo@89
|
173 return fastdom.read(callback);
|
|
paulo@89
|
174 }
|
|
paulo@89
|
175 return callback();
|
|
paulo@89
|
176 };/* Utility class to handle creation of an interactive layer.
|
|
paulo@89
|
177 This places a rectangle on top of the chart. When you mouse move over it, it sends a dispatch
|
|
paulo@89
|
178 containing the X-coordinate. It can also render a vertical line where the mouse is located.
|
|
paulo@89
|
179
|
|
paulo@89
|
180 dispatch.elementMousemove is the important event to latch onto. It is fired whenever the mouse moves over
|
|
paulo@89
|
181 the rectangle. The dispatch is given one object which contains the mouseX/Y location.
|
|
paulo@89
|
182 It also has 'pointXValue', which is the conversion of mouseX to the x-axis scale.
|
|
paulo@89
|
183 */
|
|
paulo@89
|
184 nv.interactiveGuideline = function() {
|
|
paulo@89
|
185 "use strict";
|
|
paulo@89
|
186
|
|
paulo@89
|
187 var tooltip = nv.models.tooltip();
|
|
paulo@89
|
188 tooltip.duration(0).hideDelay(0)._isInteractiveLayer(true).hidden(false);
|
|
paulo@89
|
189
|
|
paulo@89
|
190 //Public settings
|
|
paulo@89
|
191 var width = null;
|
|
paulo@89
|
192 var height = null;
|
|
paulo@89
|
193
|
|
paulo@89
|
194 //Please pass in the bounding chart's top and left margins
|
|
paulo@89
|
195 //This is important for calculating the correct mouseX/Y positions.
|
|
paulo@89
|
196 var margin = {left: 0, top: 0}
|
|
paulo@89
|
197 , xScale = d3.scale.linear()
|
|
paulo@89
|
198 , dispatch = d3.dispatch('elementMousemove', 'elementMouseout', 'elementClick', 'elementDblclick')
|
|
paulo@89
|
199 , showGuideLine = true;
|
|
paulo@89
|
200 //Must pass in the bounding chart's <svg> container.
|
|
paulo@89
|
201 //The mousemove event is attached to this container.
|
|
paulo@89
|
202 var svgContainer = null;
|
|
paulo@89
|
203
|
|
paulo@89
|
204 // check if IE by looking for activeX
|
|
paulo@89
|
205 var isMSIE = "ActiveXObject" in window;
|
|
paulo@89
|
206
|
|
paulo@89
|
207
|
|
paulo@89
|
208 function layer(selection) {
|
|
paulo@89
|
209 selection.each(function(data) {
|
|
paulo@89
|
210 var container = d3.select(this);
|
|
paulo@89
|
211 var availableWidth = (width || 960), availableHeight = (height || 400);
|
|
paulo@89
|
212 var wrap = container.selectAll("g.nv-wrap.nv-interactiveLineLayer")
|
|
paulo@89
|
213 .data([data]);
|
|
paulo@89
|
214 var wrapEnter = wrap.enter()
|
|
paulo@89
|
215 .append("g").attr("class", " nv-wrap nv-interactiveLineLayer");
|
|
paulo@89
|
216 wrapEnter.append("g").attr("class","nv-interactiveGuideLine");
|
|
paulo@89
|
217
|
|
paulo@89
|
218 if (!svgContainer) {
|
|
paulo@89
|
219 return;
|
|
paulo@89
|
220 }
|
|
paulo@89
|
221
|
|
paulo@89
|
222 function mouseHandler() {
|
|
paulo@89
|
223 var d3mouse = d3.mouse(this);
|
|
paulo@89
|
224 var mouseX = d3mouse[0];
|
|
paulo@89
|
225 var mouseY = d3mouse[1];
|
|
paulo@89
|
226 var subtractMargin = true;
|
|
paulo@89
|
227 var mouseOutAnyReason = false;
|
|
paulo@89
|
228 if (isMSIE) {
|
|
paulo@89
|
229 /*
|
|
paulo@89
|
230 D3.js (or maybe SVG.getScreenCTM) has a nasty bug in Internet Explorer 10.
|
|
paulo@89
|
231 d3.mouse() returns incorrect X,Y mouse coordinates when mouse moving
|
|
paulo@89
|
232 over a rect in IE 10.
|
|
paulo@89
|
233 However, d3.event.offsetX/Y also returns the mouse coordinates
|
|
paulo@89
|
234 relative to the triggering <rect>. So we use offsetX/Y on IE.
|
|
paulo@89
|
235 */
|
|
paulo@89
|
236 mouseX = d3.event.offsetX;
|
|
paulo@89
|
237 mouseY = d3.event.offsetY;
|
|
paulo@89
|
238
|
|
paulo@89
|
239 /*
|
|
paulo@89
|
240 On IE, if you attach a mouse event listener to the <svg> container,
|
|
paulo@89
|
241 it will actually trigger it for all the child elements (like <path>, <circle>, etc).
|
|
paulo@89
|
242 When this happens on IE, the offsetX/Y is set to where ever the child element
|
|
paulo@89
|
243 is located.
|
|
paulo@89
|
244 As a result, we do NOT need to subtract margins to figure out the mouse X/Y
|
|
paulo@89
|
245 position under this scenario. Removing the line below *will* cause
|
|
paulo@89
|
246 the interactive layer to not work right on IE.
|
|
paulo@89
|
247 */
|
|
paulo@89
|
248 if(d3.event.target.tagName !== "svg") {
|
|
paulo@89
|
249 subtractMargin = false;
|
|
paulo@89
|
250 }
|
|
paulo@89
|
251
|
|
paulo@89
|
252 if (d3.event.target.className.baseVal.match("nv-legend")) {
|
|
paulo@89
|
253 mouseOutAnyReason = true;
|
|
paulo@89
|
254 }
|
|
paulo@89
|
255
|
|
paulo@89
|
256 }
|
|
paulo@89
|
257
|
|
paulo@89
|
258 if(subtractMargin) {
|
|
paulo@89
|
259 mouseX -= margin.left;
|
|
paulo@89
|
260 mouseY -= margin.top;
|
|
paulo@89
|
261 }
|
|
paulo@89
|
262
|
|
paulo@89
|
263 /* If mouseX/Y is outside of the chart's bounds,
|
|
paulo@89
|
264 trigger a mouseOut event.
|
|
paulo@89
|
265 */
|
|
paulo@89
|
266 if (mouseX < 0 || mouseY < 0
|
|
paulo@89
|
267 || mouseX > availableWidth || mouseY > availableHeight
|
|
paulo@89
|
268 || (d3.event.relatedTarget && d3.event.relatedTarget.ownerSVGElement === undefined)
|
|
paulo@89
|
269 || mouseOutAnyReason
|
|
paulo@89
|
270 ) {
|
|
paulo@89
|
271
|
|
paulo@89
|
272 if (isMSIE) {
|
|
paulo@89
|
273 if (d3.event.relatedTarget
|
|
paulo@89
|
274 && d3.event.relatedTarget.ownerSVGElement === undefined
|
|
paulo@89
|
275 && (d3.event.relatedTarget.className === undefined
|
|
paulo@89
|
276 || d3.event.relatedTarget.className.match(tooltip.nvPointerEventsClass))) {
|
|
paulo@89
|
277
|
|
paulo@89
|
278 return;
|
|
paulo@89
|
279 }
|
|
paulo@89
|
280 }
|
|
paulo@89
|
281 dispatch.elementMouseout({
|
|
paulo@89
|
282 mouseX: mouseX,
|
|
paulo@89
|
283 mouseY: mouseY
|
|
paulo@89
|
284 });
|
|
paulo@89
|
285 layer.renderGuideLine(null); //hide the guideline
|
|
paulo@89
|
286 tooltip.hidden(true);
|
|
paulo@89
|
287 return;
|
|
paulo@89
|
288 } else {
|
|
paulo@89
|
289 tooltip.hidden(false);
|
|
paulo@89
|
290 }
|
|
paulo@89
|
291
|
|
paulo@89
|
292 var pointXValue = xScale.invert(mouseX);
|
|
paulo@89
|
293 dispatch.elementMousemove({
|
|
paulo@89
|
294 mouseX: mouseX,
|
|
paulo@89
|
295 mouseY: mouseY,
|
|
paulo@89
|
296 pointXValue: pointXValue
|
|
paulo@89
|
297 });
|
|
paulo@89
|
298
|
|
paulo@89
|
299 //If user double clicks the layer, fire a elementDblclick
|
|
paulo@89
|
300 if (d3.event.type === "dblclick") {
|
|
paulo@89
|
301 dispatch.elementDblclick({
|
|
paulo@89
|
302 mouseX: mouseX,
|
|
paulo@89
|
303 mouseY: mouseY,
|
|
paulo@89
|
304 pointXValue: pointXValue
|
|
paulo@89
|
305 });
|
|
paulo@89
|
306 }
|
|
paulo@89
|
307
|
|
paulo@89
|
308 // if user single clicks the layer, fire elementClick
|
|
paulo@89
|
309 if (d3.event.type === 'click') {
|
|
paulo@89
|
310 dispatch.elementClick({
|
|
paulo@89
|
311 mouseX: mouseX,
|
|
paulo@89
|
312 mouseY: mouseY,
|
|
paulo@89
|
313 pointXValue: pointXValue
|
|
paulo@89
|
314 });
|
|
paulo@89
|
315 }
|
|
paulo@89
|
316 }
|
|
paulo@89
|
317
|
|
paulo@89
|
318 svgContainer
|
|
paulo@89
|
319 .on("touchmove",mouseHandler)
|
|
paulo@89
|
320 .on("mousemove",mouseHandler, true)
|
|
paulo@89
|
321 .on("mouseout" ,mouseHandler,true)
|
|
paulo@89
|
322 .on("dblclick" ,mouseHandler)
|
|
paulo@89
|
323 .on("click", mouseHandler)
|
|
paulo@89
|
324 ;
|
|
paulo@89
|
325
|
|
paulo@89
|
326 layer.guideLine = null;
|
|
paulo@89
|
327 //Draws a vertical guideline at the given X postion.
|
|
paulo@89
|
328 layer.renderGuideLine = function(x) {
|
|
paulo@89
|
329 if (!showGuideLine) return;
|
|
paulo@89
|
330 if (layer.guideLine && layer.guideLine.attr("x1") === x) return;
|
|
paulo@89
|
331 nv.dom.write(function() {
|
|
paulo@89
|
332 var line = wrap.select(".nv-interactiveGuideLine")
|
|
paulo@89
|
333 .selectAll("line")
|
|
paulo@89
|
334 .data((x != null) ? [nv.utils.NaNtoZero(x)] : [], String);
|
|
paulo@89
|
335 line.enter()
|
|
paulo@89
|
336 .append("line")
|
|
paulo@89
|
337 .attr("class", "nv-guideline")
|
|
paulo@89
|
338 .attr("x1", function(d) { return d;})
|
|
paulo@89
|
339 .attr("x2", function(d) { return d;})
|
|
paulo@89
|
340 .attr("y1", availableHeight)
|
|
paulo@89
|
341 .attr("y2",0);
|
|
paulo@89
|
342 line.exit().remove();
|
|
paulo@89
|
343 });
|
|
paulo@89
|
344 }
|
|
paulo@89
|
345 });
|
|
paulo@89
|
346 }
|
|
paulo@89
|
347
|
|
paulo@89
|
348 layer.dispatch = dispatch;
|
|
paulo@89
|
349 layer.tooltip = tooltip;
|
|
paulo@89
|
350
|
|
paulo@89
|
351 layer.margin = function(_) {
|
|
paulo@89
|
352 if (!arguments.length) return margin;
|
|
paulo@89
|
353 margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
|
paulo@89
|
354 margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
|
paulo@89
|
355 return layer;
|
|
paulo@89
|
356 };
|
|
paulo@89
|
357
|
|
paulo@89
|
358 layer.width = function(_) {
|
|
paulo@89
|
359 if (!arguments.length) return width;
|
|
paulo@89
|
360 width = _;
|
|
paulo@89
|
361 return layer;
|
|
paulo@89
|
362 };
|
|
paulo@89
|
363
|
|
paulo@89
|
364 layer.height = function(_) {
|
|
paulo@89
|
365 if (!arguments.length) return height;
|
|
paulo@89
|
366 height = _;
|
|
paulo@89
|
367 return layer;
|
|
paulo@89
|
368 };
|
|
paulo@89
|
369
|
|
paulo@89
|
370 layer.xScale = function(_) {
|
|
paulo@89
|
371 if (!arguments.length) return xScale;
|
|
paulo@89
|
372 xScale = _;
|
|
paulo@89
|
373 return layer;
|
|
paulo@89
|
374 };
|
|
paulo@89
|
375
|
|
paulo@89
|
376 layer.showGuideLine = function(_) {
|
|
paulo@89
|
377 if (!arguments.length) return showGuideLine;
|
|
paulo@89
|
378 showGuideLine = _;
|
|
paulo@89
|
379 return layer;
|
|
paulo@89
|
380 };
|
|
paulo@89
|
381
|
|
paulo@89
|
382 layer.svgContainer = function(_) {
|
|
paulo@89
|
383 if (!arguments.length) return svgContainer;
|
|
paulo@89
|
384 svgContainer = _;
|
|
paulo@89
|
385 return layer;
|
|
paulo@89
|
386 };
|
|
paulo@89
|
387
|
|
paulo@89
|
388 return layer;
|
|
paulo@89
|
389 };
|
|
paulo@89
|
390
|
|
paulo@89
|
391 /* Utility class that uses d3.bisect to find the index in a given array, where a search value can be inserted.
|
|
paulo@89
|
392 This is different from normal bisectLeft; this function finds the nearest index to insert the search value.
|
|
paulo@89
|
393
|
|
paulo@89
|
394 For instance, lets say your array is [1,2,3,5,10,30], and you search for 28.
|
|
paulo@89
|
395 Normal d3.bisectLeft will return 4, because 28 is inserted after the number 10. But interactiveBisect will return 5
|
|
paulo@89
|
396 because 28 is closer to 30 than 10.
|
|
paulo@89
|
397
|
|
paulo@89
|
398 Unit tests can be found in: interactiveBisectTest.html
|
|
paulo@89
|
399
|
|
paulo@89
|
400 Has the following known issues:
|
|
paulo@89
|
401 * Will not work if the data points move backwards (ie, 10,9,8,7, etc) or if the data points are in random order.
|
|
paulo@89
|
402 * Won't work if there are duplicate x coordinate values.
|
|
paulo@89
|
403 */
|
|
paulo@89
|
404 nv.interactiveBisect = function (values, searchVal, xAccessor) {
|
|
paulo@89
|
405 "use strict";
|
|
paulo@89
|
406 if (! (values instanceof Array)) {
|
|
paulo@89
|
407 return null;
|
|
paulo@89
|
408 }
|
|
paulo@89
|
409 var _xAccessor;
|
|
paulo@89
|
410 if (typeof xAccessor !== 'function') {
|
|
paulo@89
|
411 _xAccessor = function(d) {
|
|
paulo@89
|
412 return d.x;
|
|
paulo@89
|
413 }
|
|
paulo@89
|
414 } else {
|
|
paulo@89
|
415 _xAccessor = xAccessor;
|
|
paulo@89
|
416 }
|
|
paulo@89
|
417 var _cmp = function(d, v) {
|
|
paulo@89
|
418 // Accessors are no longer passed the index of the element along with
|
|
paulo@89
|
419 // the element itself when invoked by d3.bisector.
|
|
paulo@89
|
420 //
|
|
paulo@89
|
421 // Starting at D3 v3.4.4, d3.bisector() started inspecting the
|
|
paulo@89
|
422 // function passed to determine if it should consider it an accessor
|
|
paulo@89
|
423 // or a comparator. This meant that accessors that take two arguments
|
|
paulo@89
|
424 // (expecting an index as the second parameter) are treated as
|
|
paulo@89
|
425 // comparators where the second argument is the search value against
|
|
paulo@89
|
426 // which the first argument is compared.
|
|
paulo@89
|
427 return _xAccessor(d) - v;
|
|
paulo@89
|
428 };
|
|
paulo@89
|
429
|
|
paulo@89
|
430 var bisect = d3.bisector(_cmp).left;
|
|
paulo@89
|
431 var index = d3.max([0, bisect(values,searchVal) - 1]);
|
|
paulo@89
|
432 var currentValue = _xAccessor(values[index]);
|
|
paulo@89
|
433
|
|
paulo@89
|
434 if (typeof currentValue === 'undefined') {
|
|
paulo@89
|
435 currentValue = index;
|
|
paulo@89
|
436 }
|
|
paulo@89
|
437
|
|
paulo@89
|
438 if (currentValue === searchVal) {
|
|
paulo@89
|
439 return index; //found exact match
|
|
paulo@89
|
440 }
|
|
paulo@89
|
441
|
|
paulo@89
|
442 var nextIndex = d3.min([index+1, values.length - 1]);
|
|
paulo@89
|
443 var nextValue = _xAccessor(values[nextIndex]);
|
|
paulo@89
|
444
|
|
paulo@89
|
445 if (typeof nextValue === 'undefined') {
|
|
paulo@89
|
446 nextValue = nextIndex;
|
|
paulo@89
|
447 }
|
|
paulo@89
|
448
|
|
paulo@89
|
449 if (Math.abs(nextValue - searchVal) >= Math.abs(currentValue - searchVal)) {
|
|
paulo@89
|
450 return index;
|
|
paulo@89
|
451 } else {
|
|
paulo@89
|
452 return nextIndex
|
|
paulo@89
|
453 }
|
|
paulo@89
|
454 };
|
|
paulo@89
|
455
|
|
paulo@89
|
456 /*
|
|
paulo@89
|
457 Returns the index in the array "values" that is closest to searchVal.
|
|
paulo@89
|
458 Only returns an index if searchVal is within some "threshold".
|
|
paulo@89
|
459 Otherwise, returns null.
|
|
paulo@89
|
460 */
|
|
paulo@89
|
461 nv.nearestValueIndex = function (values, searchVal, threshold) {
|
|
paulo@89
|
462 "use strict";
|
|
paulo@89
|
463 var yDistMax = Infinity, indexToHighlight = null;
|
|
paulo@89
|
464 values.forEach(function(d,i) {
|
|
paulo@89
|
465 var delta = Math.abs(searchVal - d);
|
|
paulo@89
|
466 if ( d != null && delta <= yDistMax && delta < threshold) {
|
|
paulo@89
|
467 yDistMax = delta;
|
|
paulo@89
|
468 indexToHighlight = i;
|
|
paulo@89
|
469 }
|
|
paulo@89
|
470 });
|
|
paulo@89
|
471 return indexToHighlight;
|
|
paulo@89
|
472 };
|
|
paulo@89
|
473 /* Tooltip rendering model for nvd3 charts.
|
|
paulo@89
|
474 window.nv.models.tooltip is the updated,new way to render tooltips.
|
|
paulo@89
|
475
|
|
paulo@89
|
476 window.nv.tooltip.show is the old tooltip code.
|
|
paulo@89
|
477 window.nv.tooltip.* also has various helper methods.
|
|
paulo@89
|
478 */
|
|
paulo@89
|
479 (function() {
|
|
paulo@89
|
480 "use strict";
|
|
paulo@89
|
481
|
|
paulo@89
|
482 /* Model which can be instantiated to handle tooltip rendering.
|
|
paulo@89
|
483 Example usage:
|
|
paulo@89
|
484 var tip = nv.models.tooltip().gravity('w').distance(23)
|
|
paulo@89
|
485 .data(myDataObject);
|
|
paulo@89
|
486
|
|
paulo@89
|
487 tip(); //just invoke the returned function to render tooltip.
|
|
paulo@89
|
488 */
|
|
paulo@89
|
489 nv.models.tooltip = function() {
|
|
paulo@89
|
490
|
|
paulo@89
|
491 /*
|
|
paulo@89
|
492 Tooltip data. If data is given in the proper format, a consistent tooltip is generated.
|
|
paulo@89
|
493 Example Format of data:
|
|
paulo@89
|
494 {
|
|
paulo@89
|
495 key: "Date",
|
|
paulo@89
|
496 value: "August 2009",
|
|
paulo@89
|
497 series: [
|
|
paulo@89
|
498 {key: "Series 1", value: "Value 1", color: "#000"},
|
|
paulo@89
|
499 {key: "Series 2", value: "Value 2", color: "#00f"}
|
|
paulo@89
|
500 ]
|
|
paulo@89
|
501 }
|
|
paulo@89
|
502 */
|
|
paulo@89
|
503 var data = null;
|
|
paulo@89
|
504 var gravity = 'w' //Can be 'n','s','e','w'. Determines how tooltip is positioned.
|
|
paulo@89
|
505 , distance = 25 //Distance to offset tooltip from the mouse location.
|
|
paulo@89
|
506 , snapDistance = 0 //Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)
|
|
paulo@89
|
507 , fixedTop = null //If not null, this fixes the top position of the tooltip.
|
|
paulo@89
|
508 , classes = null //Attaches additional CSS classes to the tooltip DIV that is created.
|
|
paulo@89
|
509 , chartContainer = null //Parent dom element of the SVG that holds the chart.
|
|
paulo@89
|
510 , hidden = true // start off hidden, toggle with hide/show functions below
|
|
paulo@89
|
511 , hideDelay = 400 // delay before the tooltip hides after calling hide()
|
|
paulo@89
|
512 , tooltip = null // d3 select of tooltipElem below
|
|
paulo@89
|
513 , tooltipElem = null //actual DOM element representing the tooltip.
|
|
paulo@89
|
514 , position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
|
|
paulo@89
|
515 , offset = {left: 0, top: 0} //Offset of tooltip against the pointer
|
|
paulo@89
|
516 , enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
|
|
paulo@89
|
517 , duration = 100 // duration for tooltip movement
|
|
paulo@89
|
518 , headerEnabled = true
|
|
paulo@89
|
519 ;
|
|
paulo@89
|
520
|
|
paulo@89
|
521 // set to true by interactive layer to adjust tooltip positions
|
|
paulo@89
|
522 // eventually we should probably fix interactive layer to get the position better.
|
|
paulo@89
|
523 // for now this is needed if you want to set chartContainer for normal tooltips, else it "fixes" it to broken
|
|
paulo@89
|
524 var isInteractiveLayer = false;
|
|
paulo@89
|
525
|
|
paulo@89
|
526 //Generates a unique id when you create a new tooltip() object
|
|
paulo@89
|
527 var id = "nvtooltip-" + Math.floor(Math.random() * 100000);
|
|
paulo@89
|
528
|
|
paulo@89
|
529 //CSS class to specify whether element should not have mouse events.
|
|
paulo@89
|
530 var nvPointerEventsClass = "nv-pointer-events-none";
|
|
paulo@89
|
531
|
|
paulo@89
|
532 //Format function for the tooltip values column
|
|
paulo@89
|
533 var valueFormatter = function(d,i) {
|
|
paulo@89
|
534 return d;
|
|
paulo@89
|
535 };
|
|
paulo@89
|
536
|
|
paulo@89
|
537 //Format function for the tooltip header value.
|
|
paulo@89
|
538 var headerFormatter = function(d) {
|
|
paulo@89
|
539 return d;
|
|
paulo@89
|
540 };
|
|
paulo@89
|
541
|
|
paulo@89
|
542 var keyFormatter = function(d, i) {
|
|
paulo@89
|
543 return d;
|
|
paulo@89
|
544 };
|
|
paulo@89
|
545
|
|
paulo@89
|
546 //By default, the tooltip model renders a beautiful table inside a DIV.
|
|
paulo@89
|
547 //You can override this function if a custom tooltip is desired.
|
|
paulo@89
|
548 var contentGenerator = function(d) {
|
|
paulo@89
|
549 if (d === null) {
|
|
paulo@89
|
550 return '';
|
|
paulo@89
|
551 }
|
|
paulo@89
|
552
|
|
paulo@89
|
553 var table = d3.select(document.createElement("table"));
|
|
paulo@89
|
554 if (headerEnabled) {
|
|
paulo@89
|
555 var theadEnter = table.selectAll("thead")
|
|
paulo@89
|
556 .data([d])
|
|
paulo@89
|
557 .enter().append("thead");
|
|
paulo@89
|
558
|
|
paulo@89
|
559 theadEnter.append("tr")
|
|
paulo@89
|
560 .append("td")
|
|
paulo@89
|
561 .attr("colspan", 3)
|
|
paulo@89
|
562 .append("strong")
|
|
paulo@89
|
563 .classed("x-value", true)
|
|
paulo@89
|
564 .html(headerFormatter(d.value));
|
|
paulo@89
|
565 }
|
|
paulo@89
|
566
|
|
paulo@89
|
567 var tbodyEnter = table.selectAll("tbody")
|
|
paulo@89
|
568 .data([d])
|
|
paulo@89
|
569 .enter().append("tbody");
|
|
paulo@89
|
570
|
|
paulo@89
|
571 var trowEnter = tbodyEnter.selectAll("tr")
|
|
paulo@89
|
572 .data(function(p) { return p.series})
|
|
paulo@89
|
573 .enter()
|
|
paulo@89
|
574 .append("tr")
|
|
paulo@89
|
575 .classed("highlight", function(p) { return p.highlight});
|
|
paulo@89
|
576
|
|
paulo@89
|
577 trowEnter.append("td")
|
|
paulo@89
|
578 .classed("legend-color-guide",true)
|
|
paulo@89
|
579 .append("div")
|
|
paulo@89
|
580 .style("background-color", function(p) { return p.color});
|
|
paulo@89
|
581
|
|
paulo@89
|
582 trowEnter.append("td")
|
|
paulo@89
|
583 .classed("key",true)
|
|
paulo@89
|
584 .html(function(p, i) {return keyFormatter(p.key, i)});
|
|
paulo@89
|
585
|
|
paulo@89
|
586 trowEnter.append("td")
|
|
paulo@89
|
587 .classed("value",true)
|
|
paulo@89
|
588 .html(function(p, i) { return valueFormatter(p.value, i) });
|
|
paulo@89
|
589
|
|
paulo@89
|
590
|
|
paulo@89
|
591 trowEnter.selectAll("td").each(function(p) {
|
|
paulo@89
|
592 if (p.highlight) {
|
|
paulo@89
|
593 var opacityScale = d3.scale.linear().domain([0,1]).range(["#fff",p.color]);
|
|
paulo@89
|
594 var opacity = 0.6;
|
|
paulo@89
|
595 d3.select(this)
|
|
paulo@89
|
596 .style("border-bottom-color", opacityScale(opacity))
|
|
paulo@89
|
597 .style("border-top-color", opacityScale(opacity))
|
|
paulo@89
|
598 ;
|
|
paulo@89
|
599 }
|
|
paulo@89
|
600 });
|
|
paulo@89
|
601
|
|
paulo@89
|
602 var html = table.node().outerHTML;
|
|
paulo@89
|
603 if (d.footer !== undefined)
|
|
paulo@89
|
604 html += "<div class='footer'>" + d.footer + "</div>";
|
|
paulo@89
|
605 return html;
|
|
paulo@89
|
606
|
|
paulo@89
|
607 };
|
|
paulo@89
|
608
|
|
paulo@89
|
609 var dataSeriesExists = function(d) {
|
|
paulo@89
|
610 if (d && d.series) {
|
|
paulo@89
|
611 if (d.series instanceof Array) {
|
|
paulo@89
|
612 return !!d.series.length;
|
|
paulo@89
|
613 }
|
|
paulo@89
|
614 // if object, it's okay just convert to array of the object
|
|
paulo@89
|
615 if (d.series instanceof Object) {
|
|
paulo@89
|
616 d.series = [d.series];
|
|
paulo@89
|
617 return true;
|
|
paulo@89
|
618 }
|
|
paulo@89
|
619 }
|
|
paulo@89
|
620 return false;
|
|
paulo@89
|
621 };
|
|
paulo@89
|
622
|
|
paulo@89
|
623 var calcTooltipPosition = function(pos) {
|
|
paulo@89
|
624 if (!tooltipElem) return;
|
|
paulo@89
|
625
|
|
paulo@89
|
626 nv.dom.read(function() {
|
|
paulo@89
|
627 var height = parseInt(tooltipElem.offsetHeight, 10),
|
|
paulo@89
|
628 width = parseInt(tooltipElem.offsetWidth, 10),
|
|
paulo@89
|
629 windowWidth = nv.utils.windowSize().width,
|
|
paulo@89
|
630 windowHeight = nv.utils.windowSize().height,
|
|
paulo@89
|
631 scrollTop = window.pageYOffset,
|
|
paulo@89
|
632 scrollLeft = window.pageXOffset,
|
|
paulo@89
|
633 left, top;
|
|
paulo@89
|
634
|
|
paulo@89
|
635 windowHeight = window.innerWidth >= document.body.scrollWidth ? windowHeight : windowHeight - 16;
|
|
paulo@89
|
636 windowWidth = window.innerHeight >= document.body.scrollHeight ? windowWidth : windowWidth - 16;
|
|
paulo@89
|
637
|
|
paulo@89
|
638
|
|
paulo@89
|
639 //Helper functions to find the total offsets of a given DOM element.
|
|
paulo@89
|
640 //Looks up the entire ancestry of an element, up to the first relatively positioned element.
|
|
paulo@89
|
641 var tooltipTop = function ( Elem ) {
|
|
paulo@89
|
642 var offsetTop = top;
|
|
paulo@89
|
643 do {
|
|
paulo@89
|
644 if( !isNaN( Elem.offsetTop ) ) {
|
|
paulo@89
|
645 offsetTop += (Elem.offsetTop);
|
|
paulo@89
|
646 }
|
|
paulo@89
|
647 Elem = Elem.offsetParent;
|
|
paulo@89
|
648 } while( Elem );
|
|
paulo@89
|
649 return offsetTop;
|
|
paulo@89
|
650 };
|
|
paulo@89
|
651 var tooltipLeft = function ( Elem ) {
|
|
paulo@89
|
652 var offsetLeft = left;
|
|
paulo@89
|
653 do {
|
|
paulo@89
|
654 if( !isNaN( Elem.offsetLeft ) ) {
|
|
paulo@89
|
655 offsetLeft += (Elem.offsetLeft);
|
|
paulo@89
|
656 }
|
|
paulo@89
|
657 Elem = Elem.offsetParent;
|
|
paulo@89
|
658 } while( Elem );
|
|
paulo@89
|
659 return offsetLeft;
|
|
paulo@89
|
660 };
|
|
paulo@89
|
661
|
|
paulo@89
|
662 // calculate position based on gravity
|
|
paulo@89
|
663 var tLeft, tTop;
|
|
paulo@89
|
664 switch (gravity) {
|
|
paulo@89
|
665 case 'e':
|
|
paulo@89
|
666 left = pos[0] - width - distance;
|
|
paulo@89
|
667 top = pos[1] - (height / 2);
|
|
paulo@89
|
668 tLeft = tooltipLeft(tooltipElem);
|
|
paulo@89
|
669 tTop = tooltipTop(tooltipElem);
|
|
paulo@89
|
670 if (tLeft < scrollLeft) left = pos[0] + distance > scrollLeft ? pos[0] + distance : scrollLeft - tLeft + left;
|
|
paulo@89
|
671 if (tTop < scrollTop) top = scrollTop - tTop + top;
|
|
paulo@89
|
672 if (tTop + height > scrollTop + windowHeight) top = scrollTop + windowHeight - tTop + top - height;
|
|
paulo@89
|
673 break;
|
|
paulo@89
|
674 case 'w':
|
|
paulo@89
|
675 left = pos[0] + distance;
|
|
paulo@89
|
676 top = pos[1] - (height / 2);
|
|
paulo@89
|
677 tLeft = tooltipLeft(tooltipElem);
|
|
paulo@89
|
678 tTop = tooltipTop(tooltipElem);
|
|
paulo@89
|
679 if (tLeft + width > windowWidth) left = pos[0] - width - distance;
|
|
paulo@89
|
680 if (tTop < scrollTop) top = scrollTop + 5;
|
|
paulo@89
|
681 if (tTop + height > scrollTop + windowHeight) top = scrollTop + windowHeight - tTop + top - height;
|
|
paulo@89
|
682 break;
|
|
paulo@89
|
683 case 'n':
|
|
paulo@89
|
684 left = pos[0] - (width / 2) - 5;
|
|
paulo@89
|
685 top = pos[1] + distance;
|
|
paulo@89
|
686 tLeft = tooltipLeft(tooltipElem);
|
|
paulo@89
|
687 tTop = tooltipTop(tooltipElem);
|
|
paulo@89
|
688 if (tLeft < scrollLeft) left = scrollLeft + 5;
|
|
paulo@89
|
689 if (tLeft + width > windowWidth) left = left - width/2 + 5;
|
|
paulo@89
|
690 if (tTop + height > scrollTop + windowHeight) top = scrollTop + windowHeight - tTop + top - height;
|
|
paulo@89
|
691 break;
|
|
paulo@89
|
692 case 's':
|
|
paulo@89
|
693 left = pos[0] - (width / 2);
|
|
paulo@89
|
694 top = pos[1] - height - distance;
|
|
paulo@89
|
695 tLeft = tooltipLeft(tooltipElem);
|
|
paulo@89
|
696 tTop = tooltipTop(tooltipElem);
|
|
paulo@89
|
697 if (tLeft < scrollLeft) left = scrollLeft + 5;
|
|
paulo@89
|
698 if (tLeft + width > windowWidth) left = left - width/2 + 5;
|
|
paulo@89
|
699 if (scrollTop > tTop) top = scrollTop;
|
|
paulo@89
|
700 break;
|
|
paulo@89
|
701 case 'none':
|
|
paulo@89
|
702 left = pos[0];
|
|
paulo@89
|
703 top = pos[1] - distance;
|
|
paulo@89
|
704 tLeft = tooltipLeft(tooltipElem);
|
|
paulo@89
|
705 tTop = tooltipTop(tooltipElem);
|
|
paulo@89
|
706 break;
|
|
paulo@89
|
707 }
|
|
paulo@89
|
708
|
|
paulo@89
|
709 // adjust tooltip offsets
|
|
paulo@89
|
710 left -= offset.left;
|
|
paulo@89
|
711 top -= offset.top;
|
|
paulo@89
|
712
|
|
paulo@89
|
713 // using tooltip.style('transform') returns values un-usable for tween
|
|
paulo@89
|
714 var box = tooltipElem.getBoundingClientRect();
|
|
paulo@89
|
715 var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
paulo@89
|
716 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
paulo@89
|
717 var old_translate = 'translate(' + (box.left + scrollLeft) + 'px, ' + (box.top + scrollTop) + 'px)';
|
|
paulo@89
|
718 var new_translate = 'translate(' + left + 'px, ' + top + 'px)';
|
|
paulo@89
|
719 var translateInterpolator = d3.interpolateString(old_translate, new_translate);
|
|
paulo@89
|
720
|
|
paulo@89
|
721 var is_hidden = tooltip.style('opacity') < 0.1;
|
|
paulo@89
|
722
|
|
paulo@89
|
723 // delay hiding a bit to avoid flickering
|
|
paulo@89
|
724 if (hidden) {
|
|
paulo@89
|
725 tooltip
|
|
paulo@89
|
726 .transition()
|
|
paulo@89
|
727 .delay(hideDelay)
|
|
paulo@89
|
728 .duration(0)
|
|
paulo@89
|
729 .style('opacity', 0);
|
|
paulo@89
|
730 } else {
|
|
paulo@89
|
731 tooltip
|
|
paulo@89
|
732 .interrupt() // cancel running transitions
|
|
paulo@89
|
733 .transition()
|
|
paulo@89
|
734 .duration(is_hidden ? 0 : duration)
|
|
paulo@89
|
735 // using tween since some versions of d3 can't auto-tween a translate on a div
|
|
paulo@89
|
736 .styleTween('transform', function (d) {
|
|
paulo@89
|
737 return translateInterpolator;
|
|
paulo@89
|
738 }, 'important')
|
|
paulo@89
|
739 // Safari has its own `-webkit-transform` and does not support `transform`
|
|
paulo@89
|
740 // transform tooltip without transition only in Safari
|
|
paulo@89
|
741 .style('-webkit-transform', new_translate)
|
|
paulo@89
|
742 .style('opacity', 1);
|
|
paulo@89
|
743 }
|
|
paulo@89
|
744
|
|
paulo@89
|
745
|
|
paulo@89
|
746
|
|
paulo@89
|
747 });
|
|
paulo@89
|
748 };
|
|
paulo@89
|
749
|
|
paulo@89
|
750 //In situations where the chart is in a 'viewBox', re-position the tooltip based on how far chart is zoomed.
|
|
paulo@89
|
751 function convertViewBoxRatio() {
|
|
paulo@89
|
752 if (chartContainer) {
|
|
paulo@89
|
753 var svg = d3.select(chartContainer);
|
|
paulo@89
|
754 if (svg.node().tagName !== "svg") {
|
|
paulo@89
|
755 svg = svg.select("svg");
|
|
paulo@89
|
756 }
|
|
paulo@89
|
757 var viewBox = (svg.node()) ? svg.attr('viewBox') : null;
|
|
paulo@89
|
758 if (viewBox) {
|
|
paulo@89
|
759 viewBox = viewBox.split(' ');
|
|
paulo@89
|
760 var ratio = parseInt(svg.style('width'), 10) / viewBox[2];
|
|
paulo@89
|
761
|
|
paulo@89
|
762 position.left = position.left * ratio;
|
|
paulo@89
|
763 position.top = position.top * ratio;
|
|
paulo@89
|
764 }
|
|
paulo@89
|
765 }
|
|
paulo@89
|
766 }
|
|
paulo@89
|
767
|
|
paulo@89
|
768 //Creates new tooltip container, or uses existing one on DOM.
|
|
paulo@89
|
769 function initTooltip() {
|
|
paulo@89
|
770 if (!tooltip) {
|
|
paulo@89
|
771 var body;
|
|
paulo@89
|
772 if (chartContainer) {
|
|
paulo@89
|
773 body = chartContainer;
|
|
paulo@89
|
774 } else {
|
|
paulo@89
|
775 body = document.body;
|
|
paulo@89
|
776 }
|
|
paulo@89
|
777 //Create new tooltip div if it doesn't exist on DOM.
|
|
paulo@89
|
778 tooltip = d3.select(body).append("div")
|
|
paulo@89
|
779 .attr("class", "nvtooltip " + (classes ? classes : "xy-tooltip"))
|
|
paulo@89
|
780 .attr("id", id);
|
|
paulo@89
|
781 tooltip.style("top", 0).style("left", 0);
|
|
paulo@89
|
782 tooltip.style('opacity', 0);
|
|
paulo@89
|
783 tooltip.selectAll("div, table, td, tr").classed(nvPointerEventsClass, true);
|
|
paulo@89
|
784 tooltip.classed(nvPointerEventsClass, true);
|
|
paulo@89
|
785 tooltipElem = tooltip.node();
|
|
paulo@89
|
786 }
|
|
paulo@89
|
787 }
|
|
paulo@89
|
788
|
|
paulo@89
|
789 //Draw the tooltip onto the DOM.
|
|
paulo@89
|
790 function nvtooltip() {
|
|
paulo@89
|
791 if (!enabled) return;
|
|
paulo@89
|
792 if (!dataSeriesExists(data)) return;
|
|
paulo@89
|
793
|
|
paulo@89
|
794 convertViewBoxRatio();
|
|
paulo@89
|
795
|
|
paulo@89
|
796 var left = position.left;
|
|
paulo@89
|
797 var top = (fixedTop !== null) ? fixedTop : position.top;
|
|
paulo@89
|
798
|
|
paulo@89
|
799 nv.dom.write(function () {
|
|
paulo@89
|
800 initTooltip();
|
|
paulo@89
|
801 // generate data and set it into tooltip
|
|
paulo@89
|
802 // Bonus - If you override contentGenerator and return falsey you can use something like
|
|
paulo@89
|
803 // React or Knockout to bind the data for your tooltip
|
|
paulo@89
|
804 var newContent = contentGenerator(data);
|
|
paulo@89
|
805 if (newContent) {
|
|
paulo@89
|
806 tooltipElem.innerHTML = newContent;
|
|
paulo@89
|
807 }
|
|
paulo@89
|
808
|
|
paulo@89
|
809 if (chartContainer && isInteractiveLayer) {
|
|
paulo@89
|
810 nv.dom.read(function() {
|
|
paulo@89
|
811 var svgComp = chartContainer.getElementsByTagName("svg")[0];
|
|
paulo@89
|
812 var svgOffset = {left:0,top:0};
|
|
paulo@89
|
813 if (svgComp) {
|
|
paulo@89
|
814 var svgBound = svgComp.getBoundingClientRect();
|
|
paulo@89
|
815 var chartBound = chartContainer.getBoundingClientRect();
|
|
paulo@89
|
816 var svgBoundTop = svgBound.top;
|
|
paulo@89
|
817
|
|
paulo@89
|
818 //Defensive code. Sometimes, svgBoundTop can be a really negative
|
|
paulo@89
|
819 // number, like -134254. That's a bug.
|
|
paulo@89
|
820 // If such a number is found, use zero instead. FireFox bug only
|
|
paulo@89
|
821 if (svgBoundTop < 0) {
|
|
paulo@89
|
822 var containerBound = chartContainer.getBoundingClientRect();
|
|
paulo@89
|
823 svgBoundTop = (Math.abs(svgBoundTop) > containerBound.height) ? 0 : svgBoundTop;
|
|
paulo@89
|
824 }
|
|
paulo@89
|
825 svgOffset.top = Math.abs(svgBoundTop - chartBound.top);
|
|
paulo@89
|
826 svgOffset.left = Math.abs(svgBound.left - chartBound.left);
|
|
paulo@89
|
827 }
|
|
paulo@89
|
828 //If the parent container is an overflow <div> with scrollbars, subtract the scroll offsets.
|
|
paulo@89
|
829 //You need to also add any offset between the <svg> element and its containing <div>
|
|
paulo@89
|
830 //Finally, add any offset of the containing <div> on the whole page.
|
|
paulo@89
|
831 left += chartContainer.offsetLeft + svgOffset.left - 2*chartContainer.scrollLeft;
|
|
paulo@89
|
832 top += chartContainer.offsetTop + svgOffset.top - 2*chartContainer.scrollTop;
|
|
paulo@89
|
833
|
|
paulo@89
|
834 if (snapDistance && snapDistance > 0) {
|
|
paulo@89
|
835 top = Math.floor(top/snapDistance) * snapDistance;
|
|
paulo@89
|
836 }
|
|
paulo@89
|
837 calcTooltipPosition([left,top]);
|
|
paulo@89
|
838 });
|
|
paulo@89
|
839 } else {
|
|
paulo@89
|
840 calcTooltipPosition([left,top]);
|
|
paulo@89
|
841 }
|
|
paulo@89
|
842 });
|
|
paulo@89
|
843
|
|
paulo@89
|
844 return nvtooltip;
|
|
paulo@89
|
845 }
|
|
paulo@89
|
846
|
|
paulo@89
|
847 nvtooltip.nvPointerEventsClass = nvPointerEventsClass;
|
|
paulo@89
|
848 nvtooltip.options = nv.utils.optionsFunc.bind(nvtooltip);
|
|
paulo@89
|
849
|
|
paulo@89
|
850 nvtooltip._options = Object.create({}, {
|
|
paulo@89
|
851 // simple read/write options
|
|
paulo@89
|
852 duration: {get: function(){return duration;}, set: function(_){duration=_;}},
|
|
paulo@89
|
853 gravity: {get: function(){return gravity;}, set: function(_){gravity=_;}},
|
|
paulo@89
|
854 distance: {get: function(){return distance;}, set: function(_){distance=_;}},
|
|
paulo@89
|
855 snapDistance: {get: function(){return snapDistance;}, set: function(_){snapDistance=_;}},
|
|
paulo@89
|
856 classes: {get: function(){return classes;}, set: function(_){classes=_;}},
|
|
paulo@89
|
857 chartContainer: {get: function(){return chartContainer;}, set: function(_){chartContainer=_;}},
|
|
paulo@89
|
858 fixedTop: {get: function(){return fixedTop;}, set: function(_){fixedTop=_;}},
|
|
paulo@89
|
859 enabled: {get: function(){return enabled;}, set: function(_){enabled=_;}},
|
|
paulo@89
|
860 hideDelay: {get: function(){return hideDelay;}, set: function(_){hideDelay=_;}},
|
|
paulo@89
|
861 contentGenerator: {get: function(){return contentGenerator;}, set: function(_){contentGenerator=_;}},
|
|
paulo@89
|
862 valueFormatter: {get: function(){return valueFormatter;}, set: function(_){valueFormatter=_;}},
|
|
paulo@89
|
863 headerFormatter: {get: function(){return headerFormatter;}, set: function(_){headerFormatter=_;}},
|
|
paulo@89
|
864 keyFormatter: {get: function(){return keyFormatter;}, set: function(_){keyFormatter=_;}},
|
|
paulo@89
|
865 headerEnabled: {get: function(){return headerEnabled;}, set: function(_){headerEnabled=_;}},
|
|
paulo@89
|
866
|
|
paulo@89
|
867 // internal use only, set by interactive layer to adjust position.
|
|
paulo@89
|
868 _isInteractiveLayer: {get: function(){return isInteractiveLayer;}, set: function(_){isInteractiveLayer=!!_;}},
|
|
paulo@89
|
869
|
|
paulo@89
|
870 // options with extra logic
|
|
paulo@89
|
871 position: {get: function(){return position;}, set: function(_){
|
|
paulo@89
|
872 position.left = _.left !== undefined ? _.left : position.left;
|
|
paulo@89
|
873 position.top = _.top !== undefined ? _.top : position.top;
|
|
paulo@89
|
874 }},
|
|
paulo@89
|
875 offset: {get: function(){return offset;}, set: function(_){
|
|
paulo@89
|
876 offset.left = _.left !== undefined ? _.left : offset.left;
|
|
paulo@89
|
877 offset.top = _.top !== undefined ? _.top : offset.top;
|
|
paulo@89
|
878 }},
|
|
paulo@89
|
879 hidden: {get: function(){return hidden;}, set: function(_){
|
|
paulo@89
|
880 if (hidden != _) {
|
|
paulo@89
|
881 hidden = !!_;
|
|
paulo@89
|
882 nvtooltip();
|
|
paulo@89
|
883 }
|
|
paulo@89
|
884 }},
|
|
paulo@89
|
885 data: {get: function(){return data;}, set: function(_){
|
|
paulo@89
|
886 // if showing a single data point, adjust data format with that
|
|
paulo@89
|
887 if (_.point) {
|
|
paulo@89
|
888 _.value = _.point.x;
|
|
paulo@89
|
889 _.series = _.series || {};
|
|
paulo@89
|
890 _.series.value = _.point.y;
|
|
paulo@89
|
891 _.series.color = _.point.color || _.series.color;
|
|
paulo@89
|
892 }
|
|
paulo@89
|
893 data = _;
|
|
paulo@89
|
894 }},
|
|
paulo@89
|
895
|
|
paulo@89
|
896 // read only properties
|
|
paulo@89
|
897 tooltipElem: {get: function(){return tooltipElem;}, set: function(_){}},
|
|
paulo@89
|
898 id: {get: function(){return id;}, set: function(_){}}
|
|
paulo@89
|
899 });
|
|
paulo@89
|
900
|
|
paulo@89
|
901 nv.utils.initOptions(nvtooltip);
|
|
paulo@89
|
902 return nvtooltip;
|
|
paulo@89
|
903 };
|
|
paulo@89
|
904
|
|
paulo@89
|
905 })();
|
|
paulo@89
|
906
|
|
paulo@89
|
907
|
|
paulo@89
|
908 /*
|
|
paulo@89
|
909 Gets the browser window size
|
|
paulo@89
|
910
|
|
paulo@89
|
911 Returns object with height and width properties
|
|
paulo@89
|
912 */
|
|
paulo@89
|
913 nv.utils.windowSize = function() {
|
|
paulo@89
|
914 // Sane defaults
|
|
paulo@89
|
915 var size = {width: 640, height: 480};
|
|
paulo@89
|
916
|
|
paulo@89
|
917 // Most recent browsers use
|
|
paulo@89
|
918 if (window.innerWidth && window.innerHeight) {
|
|
paulo@89
|
919 size.width = window.innerWidth;
|
|
paulo@89
|
920 size.height = window.innerHeight;
|
|
paulo@89
|
921 return (size);
|
|
paulo@89
|
922 }
|
|
paulo@89
|
923
|
|
paulo@89
|
924 // IE can use depending on mode it is in
|
|
paulo@89
|
925 if (document.compatMode=='CSS1Compat' &&
|
|
paulo@89
|
926 document.documentElement &&
|
|
paulo@89
|
927 document.documentElement.offsetWidth ) {
|
|
paulo@89
|
928
|
|
paulo@89
|
929 size.width = document.documentElement.offsetWidth;
|
|
paulo@89
|
930 size.height = document.documentElement.offsetHeight;
|
|
paulo@89
|
931 return (size);
|
|
paulo@89
|
932 }
|
|
paulo@89
|
933
|
|
paulo@89
|
934 // Earlier IE uses Doc.body
|
|
paulo@89
|
935 if (document.body && document.body.offsetWidth) {
|
|
paulo@89
|
936 size.width = document.body.offsetWidth;
|
|
paulo@89
|
937 size.height = document.body.offsetHeight;
|
|
paulo@89
|
938 return (size);
|
|
paulo@89
|
939 }
|
|
paulo@89
|
940
|
|
paulo@89
|
941 return (size);
|
|
paulo@89
|
942 };
|
|
paulo@89
|
943
|
|
paulo@89
|
944 /*
|
|
paulo@89
|
945 Binds callback function to run when window is resized
|
|
paulo@89
|
946 */
|
|
paulo@89
|
947 nv.utils.windowResize = function(handler) {
|
|
paulo@89
|
948 if (window.addEventListener) {
|
|
paulo@89
|
949 window.addEventListener('resize', handler);
|
|
paulo@89
|
950 } else {
|
|
paulo@89
|
951 nv.log("ERROR: Failed to bind to window.resize with: ", handler);
|
|
paulo@89
|
952 }
|
|
paulo@89
|
953 // return object with clear function to remove the single added callback.
|
|
paulo@89
|
954 return {
|
|
paulo@89
|
955 callback: handler,
|
|
paulo@89
|
956 clear: function() {
|
|
paulo@89
|
957 window.removeEventListener('resize', handler);
|
|
paulo@89
|
958 }
|
|
paulo@89
|
959 }
|
|
paulo@89
|
960 };
|
|
paulo@89
|
961
|
|
paulo@89
|
962
|
|
paulo@89
|
963 /*
|
|
paulo@89
|
964 Backwards compatible way to implement more d3-like coloring of graphs.
|
|
paulo@89
|
965 Can take in nothing, an array, or a function/scale
|
|
paulo@89
|
966 To use a normal scale, get the range and pass that because we must be able
|
|
paulo@89
|
967 to take two arguments and use the index to keep backward compatibility
|
|
paulo@89
|
968 */
|
|
paulo@89
|
969 nv.utils.getColor = function(color) {
|
|
paulo@89
|
970 //if you pass in nothing, get default colors back
|
|
paulo@89
|
971 if (color === undefined) {
|
|
paulo@89
|
972 return nv.utils.defaultColor();
|
|
paulo@89
|
973
|
|
paulo@89
|
974 //if passed an array, turn it into a color scale
|
|
paulo@89
|
975 // use isArray, instanceof fails if d3 range is created in an iframe
|
|
paulo@89
|
976 } else if(Array.isArray(color)) {
|
|
paulo@89
|
977 var color_scale = d3.scale.ordinal().range(color);
|
|
paulo@89
|
978 return function(d, i) {
|
|
paulo@89
|
979 var key = i === undefined ? d : i;
|
|
paulo@89
|
980 return d.color || color_scale(key);
|
|
paulo@89
|
981 };
|
|
paulo@89
|
982
|
|
paulo@89
|
983 //if passed a function or scale, return it, or whatever it may be
|
|
paulo@89
|
984 //external libs, such as angularjs-nvd3-directives use this
|
|
paulo@89
|
985 } else {
|
|
paulo@89
|
986 //can't really help it if someone passes rubbish as color
|
|
paulo@89
|
987 return color;
|
|
paulo@89
|
988 }
|
|
paulo@89
|
989 };
|
|
paulo@89
|
990
|
|
paulo@89
|
991
|
|
paulo@89
|
992 /*
|
|
paulo@89
|
993 Default color chooser uses a color scale of 20 colors from D3
|
|
paulo@89
|
994 https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
|
|
paulo@89
|
995 */
|
|
paulo@89
|
996 nv.utils.defaultColor = function() {
|
|
paulo@89
|
997 // get range of the scale so we'll turn it into our own function.
|
|
paulo@89
|
998 return nv.utils.getColor(d3.scale.category20().range());
|
|
paulo@89
|
999 };
|
|
paulo@89
|
1000
|
|
paulo@89
|
1001
|
|
paulo@89
|
1002 /*
|
|
paulo@89
|
1003 Returns a color function that takes the result of 'getKey' for each series and
|
|
paulo@89
|
1004 looks for a corresponding color from the dictionary
|
|
paulo@89
|
1005 */
|
|
paulo@89
|
1006 nv.utils.customTheme = function(dictionary, getKey, defaultColors) {
|
|
paulo@89
|
1007 // use default series.key if getKey is undefined
|
|
paulo@89
|
1008 getKey = getKey || function(series) { return series.key };
|
|
paulo@89
|
1009 defaultColors = defaultColors || d3.scale.category20().range();
|
|
paulo@89
|
1010
|
|
paulo@89
|
1011 // start at end of default color list and walk back to index 0
|
|
paulo@89
|
1012 var defIndex = defaultColors.length;
|
|
paulo@89
|
1013
|
|
paulo@89
|
1014 return function(series, index) {
|
|
paulo@89
|
1015 var key = getKey(series);
|
|
paulo@89
|
1016 if (typeof dictionary[key] === 'function') {
|
|
paulo@89
|
1017 return dictionary[key]();
|
|
paulo@89
|
1018 } else if (dictionary[key] !== undefined) {
|
|
paulo@89
|
1019 return dictionary[key];
|
|
paulo@89
|
1020 } else {
|
|
paulo@89
|
1021 // no match in dictionary, use a default color
|
|
paulo@89
|
1022 if (!defIndex) {
|
|
paulo@89
|
1023 // used all the default colors, start over
|
|
paulo@89
|
1024 defIndex = defaultColors.length;
|
|
paulo@89
|
1025 }
|
|
paulo@89
|
1026 defIndex = defIndex - 1;
|
|
paulo@89
|
1027 return defaultColors[defIndex];
|
|
paulo@89
|
1028 }
|
|
paulo@89
|
1029 };
|
|
paulo@89
|
1030 };
|
|
paulo@89
|
1031
|
|
paulo@89
|
1032
|
|
paulo@89
|
1033 /*
|
|
paulo@89
|
1034 From the PJAX example on d3js.org, while this is not really directly needed
|
|
paulo@89
|
1035 it's a very cool method for doing pjax, I may expand upon it a little bit,
|
|
paulo@89
|
1036 open to suggestions on anything that may be useful
|
|
paulo@89
|
1037 */
|
|
paulo@89
|
1038 nv.utils.pjax = function(links, content) {
|
|
paulo@89
|
1039
|
|
paulo@89
|
1040 var load = function(href) {
|
|
paulo@89
|
1041 d3.html(href, function(fragment) {
|
|
paulo@89
|
1042 var target = d3.select(content).node();
|
|
paulo@89
|
1043 target.parentNode.replaceChild(
|
|
paulo@89
|
1044 d3.select(fragment).select(content).node(),
|
|
paulo@89
|
1045 target);
|
|
paulo@89
|
1046 nv.utils.pjax(links, content);
|
|
paulo@89
|
1047 });
|
|
paulo@89
|
1048 };
|
|
paulo@89
|
1049
|
|
paulo@89
|
1050 d3.selectAll(links).on("click", function() {
|
|
paulo@89
|
1051 history.pushState(this.href, this.textContent, this.href);
|
|
paulo@89
|
1052 load(this.href);
|
|
paulo@89
|
1053 d3.event.preventDefault();
|
|
paulo@89
|
1054 });
|
|
paulo@89
|
1055
|
|
paulo@89
|
1056 d3.select(window).on("popstate", function() {
|
|
paulo@89
|
1057 if (d3.event.state) {
|
|
paulo@89
|
1058 load(d3.event.state);
|
|
paulo@89
|
1059 }
|
|
paulo@89
|
1060 });
|
|
paulo@89
|
1061 };
|
|
paulo@89
|
1062
|
|
paulo@89
|
1063
|
|
paulo@89
|
1064 /*
|
|
paulo@89
|
1065 For when we want to approximate the width in pixels for an SVG:text element.
|
|
paulo@89
|
1066 Most common instance is when the element is in a display:none; container.
|
|
paulo@89
|
1067 Forumla is : text.length * font-size * constant_factor
|
|
paulo@89
|
1068 */
|
|
paulo@89
|
1069 nv.utils.calcApproxTextWidth = function (svgTextElem) {
|
|
paulo@89
|
1070 if (typeof svgTextElem.style === 'function'
|
|
paulo@89
|
1071 && typeof svgTextElem.text === 'function') {
|
|
paulo@89
|
1072
|
|
paulo@89
|
1073 var fontSize = parseInt(svgTextElem.style("font-size").replace("px",""), 10);
|
|
paulo@89
|
1074 var textLength = svgTextElem.text().length;
|
|
paulo@89
|
1075 return textLength * fontSize * 0.5;
|
|
paulo@89
|
1076 }
|
|
paulo@89
|
1077 return 0;
|
|
paulo@89
|
1078 };
|
|
paulo@89
|
1079
|
|
paulo@89
|
1080
|
|
paulo@89
|
1081 /*
|
|
paulo@89
|
1082 Numbers that are undefined, null or NaN, convert them to zeros.
|
|
paulo@89
|
1083 */
|
|
paulo@89
|
1084 nv.utils.NaNtoZero = function(n) {
|
|
paulo@89
|
1085 if (typeof n !== 'number'
|
|
paulo@89
|
1086 || isNaN(n)
|
|
paulo@89
|
1087 || n === null
|
|
paulo@89
|
1088 || n === Infinity
|
|
paulo@89
|
1089 || n === -Infinity) {
|
|
paulo@89
|
1090
|
|
paulo@89
|
1091 return 0;
|
|
paulo@89
|
1092 }
|
|
paulo@89
|
1093 return n;
|
|
paulo@89
|
1094 };
|
|
paulo@89
|
1095
|
|
paulo@89
|
1096 /*
|
|
paulo@89
|
1097 Add a way to watch for d3 transition ends to d3
|
|
paulo@89
|
1098 */
|
|
paulo@89
|
1099 d3.selection.prototype.watchTransition = function(renderWatch){
|
|
paulo@89
|
1100 var args = [this].concat([].slice.call(arguments, 1));
|
|
paulo@89
|
1101 return renderWatch.transition.apply(renderWatch, args);
|
|
paulo@89
|
1102 };
|
|
paulo@89
|
1103
|
|
paulo@89
|
1104
|
|
paulo@89
|
1105 /*
|
|
paulo@89
|
1106 Helper object to watch when d3 has rendered something
|
|
paulo@89
|
1107 */
|
|
paulo@89
|
1108 nv.utils.renderWatch = function(dispatch, duration) {
|
|
paulo@89
|
1109 if (!(this instanceof nv.utils.renderWatch)) {
|
|
paulo@89
|
1110 return new nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
1111 }
|
|
paulo@89
|
1112
|
|
paulo@89
|
1113 var _duration = duration !== undefined ? duration : 250;
|
|
paulo@89
|
1114 var renderStack = [];
|
|
paulo@89
|
1115 var self = this;
|
|
paulo@89
|
1116
|
|
paulo@89
|
1117 this.models = function(models) {
|
|
paulo@89
|
1118 models = [].slice.call(arguments, 0);
|
|
paulo@89
|
1119 models.forEach(function(model){
|
|
paulo@89
|
1120 model.__rendered = false;
|
|
paulo@89
|
1121 (function(m){
|
|
paulo@89
|
1122 m.dispatch.on('renderEnd', function(arg){
|
|
paulo@89
|
1123 m.__rendered = true;
|
|
paulo@89
|
1124 self.renderEnd('model');
|
|
paulo@89
|
1125 });
|
|
paulo@89
|
1126 })(model);
|
|
paulo@89
|
1127
|
|
paulo@89
|
1128 if (renderStack.indexOf(model) < 0) {
|
|
paulo@89
|
1129 renderStack.push(model);
|
|
paulo@89
|
1130 }
|
|
paulo@89
|
1131 });
|
|
paulo@89
|
1132 return this;
|
|
paulo@89
|
1133 };
|
|
paulo@89
|
1134
|
|
paulo@89
|
1135 this.reset = function(duration) {
|
|
paulo@89
|
1136 if (duration !== undefined) {
|
|
paulo@89
|
1137 _duration = duration;
|
|
paulo@89
|
1138 }
|
|
paulo@89
|
1139 renderStack = [];
|
|
paulo@89
|
1140 };
|
|
paulo@89
|
1141
|
|
paulo@89
|
1142 this.transition = function(selection, args, duration) {
|
|
paulo@89
|
1143 args = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
|
|
paulo@89
|
1144
|
|
paulo@89
|
1145 if (args.length > 1) {
|
|
paulo@89
|
1146 duration = args.pop();
|
|
paulo@89
|
1147 } else {
|
|
paulo@89
|
1148 duration = _duration !== undefined ? _duration : 250;
|
|
paulo@89
|
1149 }
|
|
paulo@89
|
1150 selection.__rendered = false;
|
|
paulo@89
|
1151
|
|
paulo@89
|
1152 if (renderStack.indexOf(selection) < 0) {
|
|
paulo@89
|
1153 renderStack.push(selection);
|
|
paulo@89
|
1154 }
|
|
paulo@89
|
1155
|
|
paulo@89
|
1156 if (duration === 0) {
|
|
paulo@89
|
1157 selection.__rendered = true;
|
|
paulo@89
|
1158 selection.delay = function() { return this; };
|
|
paulo@89
|
1159 selection.duration = function() { return this; };
|
|
paulo@89
|
1160 return selection;
|
|
paulo@89
|
1161 } else {
|
|
paulo@89
|
1162 if (selection.length === 0) {
|
|
paulo@89
|
1163 selection.__rendered = true;
|
|
paulo@89
|
1164 } else if (selection.every( function(d){ return !d.length; } )) {
|
|
paulo@89
|
1165 selection.__rendered = true;
|
|
paulo@89
|
1166 } else {
|
|
paulo@89
|
1167 selection.__rendered = false;
|
|
paulo@89
|
1168 }
|
|
paulo@89
|
1169
|
|
paulo@89
|
1170 var n = 0;
|
|
paulo@89
|
1171 return selection
|
|
paulo@89
|
1172 .transition()
|
|
paulo@89
|
1173 .duration(duration)
|
|
paulo@89
|
1174 .each(function(){ ++n; })
|
|
paulo@89
|
1175 .each('end', function(d, i) {
|
|
paulo@89
|
1176 if (--n === 0) {
|
|
paulo@89
|
1177 selection.__rendered = true;
|
|
paulo@89
|
1178 self.renderEnd.apply(this, args);
|
|
paulo@89
|
1179 }
|
|
paulo@89
|
1180 });
|
|
paulo@89
|
1181 }
|
|
paulo@89
|
1182 };
|
|
paulo@89
|
1183
|
|
paulo@89
|
1184 this.renderEnd = function() {
|
|
paulo@89
|
1185 if (renderStack.every( function(d){ return d.__rendered; } )) {
|
|
paulo@89
|
1186 renderStack.forEach( function(d){ d.__rendered = false; });
|
|
paulo@89
|
1187 dispatch.renderEnd.apply(this, arguments);
|
|
paulo@89
|
1188 }
|
|
paulo@89
|
1189 }
|
|
paulo@89
|
1190
|
|
paulo@89
|
1191 };
|
|
paulo@89
|
1192
|
|
paulo@89
|
1193
|
|
paulo@89
|
1194 /*
|
|
paulo@89
|
1195 Takes multiple objects and combines them into the first one (dst)
|
|
paulo@89
|
1196 example: nv.utils.deepExtend({a: 1}, {a: 2, b: 3}, {c: 4});
|
|
paulo@89
|
1197 gives: {a: 2, b: 3, c: 4}
|
|
paulo@89
|
1198 */
|
|
paulo@89
|
1199 nv.utils.deepExtend = function(dst){
|
|
paulo@89
|
1200 var sources = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
|
|
paulo@89
|
1201 sources.forEach(function(source) {
|
|
paulo@89
|
1202 for (var key in source) {
|
|
paulo@89
|
1203 var isArray = dst[key] instanceof Array;
|
|
paulo@89
|
1204 var isObject = typeof dst[key] === 'object';
|
|
paulo@89
|
1205 var srcObj = typeof source[key] === 'object';
|
|
paulo@89
|
1206
|
|
paulo@89
|
1207 if (isObject && !isArray && srcObj) {
|
|
paulo@89
|
1208 nv.utils.deepExtend(dst[key], source[key]);
|
|
paulo@89
|
1209 } else {
|
|
paulo@89
|
1210 dst[key] = source[key];
|
|
paulo@89
|
1211 }
|
|
paulo@89
|
1212 }
|
|
paulo@89
|
1213 });
|
|
paulo@89
|
1214 };
|
|
paulo@89
|
1215
|
|
paulo@89
|
1216
|
|
paulo@89
|
1217 /*
|
|
paulo@89
|
1218 state utility object, used to track d3 states in the models
|
|
paulo@89
|
1219 */
|
|
paulo@89
|
1220 nv.utils.state = function(){
|
|
paulo@89
|
1221 if (!(this instanceof nv.utils.state)) {
|
|
paulo@89
|
1222 return new nv.utils.state();
|
|
paulo@89
|
1223 }
|
|
paulo@89
|
1224 var state = {};
|
|
paulo@89
|
1225 var _self = this;
|
|
paulo@89
|
1226 var _setState = function(){};
|
|
paulo@89
|
1227 var _getState = function(){ return {}; };
|
|
paulo@89
|
1228 var init = null;
|
|
paulo@89
|
1229 var changed = null;
|
|
paulo@89
|
1230
|
|
paulo@89
|
1231 this.dispatch = d3.dispatch('change', 'set');
|
|
paulo@89
|
1232
|
|
paulo@89
|
1233 this.dispatch.on('set', function(state){
|
|
paulo@89
|
1234 _setState(state, true);
|
|
paulo@89
|
1235 });
|
|
paulo@89
|
1236
|
|
paulo@89
|
1237 this.getter = function(fn){
|
|
paulo@89
|
1238 _getState = fn;
|
|
paulo@89
|
1239 return this;
|
|
paulo@89
|
1240 };
|
|
paulo@89
|
1241
|
|
paulo@89
|
1242 this.setter = function(fn, callback) {
|
|
paulo@89
|
1243 if (!callback) {
|
|
paulo@89
|
1244 callback = function(){};
|
|
paulo@89
|
1245 }
|
|
paulo@89
|
1246 _setState = function(state, update){
|
|
paulo@89
|
1247 fn(state);
|
|
paulo@89
|
1248 if (update) {
|
|
paulo@89
|
1249 callback();
|
|
paulo@89
|
1250 }
|
|
paulo@89
|
1251 };
|
|
paulo@89
|
1252 return this;
|
|
paulo@89
|
1253 };
|
|
paulo@89
|
1254
|
|
paulo@89
|
1255 this.init = function(state){
|
|
paulo@89
|
1256 init = init || {};
|
|
paulo@89
|
1257 nv.utils.deepExtend(init, state);
|
|
paulo@89
|
1258 };
|
|
paulo@89
|
1259
|
|
paulo@89
|
1260 var _set = function(){
|
|
paulo@89
|
1261 var settings = _getState();
|
|
paulo@89
|
1262
|
|
paulo@89
|
1263 if (JSON.stringify(settings) === JSON.stringify(state)) {
|
|
paulo@89
|
1264 return false;
|
|
paulo@89
|
1265 }
|
|
paulo@89
|
1266
|
|
paulo@89
|
1267 for (var key in settings) {
|
|
paulo@89
|
1268 if (state[key] === undefined) {
|
|
paulo@89
|
1269 state[key] = {};
|
|
paulo@89
|
1270 }
|
|
paulo@89
|
1271 state[key] = settings[key];
|
|
paulo@89
|
1272 changed = true;
|
|
paulo@89
|
1273 }
|
|
paulo@89
|
1274 return true;
|
|
paulo@89
|
1275 };
|
|
paulo@89
|
1276
|
|
paulo@89
|
1277 this.update = function(){
|
|
paulo@89
|
1278 if (init) {
|
|
paulo@89
|
1279 _setState(init, false);
|
|
paulo@89
|
1280 init = null;
|
|
paulo@89
|
1281 }
|
|
paulo@89
|
1282 if (_set.call(this)) {
|
|
paulo@89
|
1283 this.dispatch.change(state);
|
|
paulo@89
|
1284 }
|
|
paulo@89
|
1285 };
|
|
paulo@89
|
1286
|
|
paulo@89
|
1287 };
|
|
paulo@89
|
1288
|
|
paulo@89
|
1289
|
|
paulo@89
|
1290 /*
|
|
paulo@89
|
1291 Snippet of code you can insert into each nv.models.* to give you the ability to
|
|
paulo@89
|
1292 do things like:
|
|
paulo@89
|
1293 chart.options({
|
|
paulo@89
|
1294 showXAxis: true,
|
|
paulo@89
|
1295 tooltips: true
|
|
paulo@89
|
1296 });
|
|
paulo@89
|
1297
|
|
paulo@89
|
1298 To enable in the chart:
|
|
paulo@89
|
1299 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
1300 */
|
|
paulo@89
|
1301 nv.utils.optionsFunc = function(args) {
|
|
paulo@89
|
1302 if (args) {
|
|
paulo@89
|
1303 d3.map(args).forEach((function(key,value) {
|
|
paulo@89
|
1304 if (typeof this[key] === "function") {
|
|
paulo@89
|
1305 this[key](value);
|
|
paulo@89
|
1306 }
|
|
paulo@89
|
1307 }).bind(this));
|
|
paulo@89
|
1308 }
|
|
paulo@89
|
1309 return this;
|
|
paulo@89
|
1310 };
|
|
paulo@89
|
1311
|
|
paulo@89
|
1312
|
|
paulo@89
|
1313 /*
|
|
paulo@89
|
1314 numTicks: requested number of ticks
|
|
paulo@89
|
1315 data: the chart data
|
|
paulo@89
|
1316
|
|
paulo@89
|
1317 returns the number of ticks to actually use on X axis, based on chart data
|
|
paulo@89
|
1318 to avoid duplicate ticks with the same value
|
|
paulo@89
|
1319 */
|
|
paulo@89
|
1320 nv.utils.calcTicksX = function(numTicks, data) {
|
|
paulo@89
|
1321 // find max number of values from all data streams
|
|
paulo@89
|
1322 var numValues = 1;
|
|
paulo@89
|
1323 var i = 0;
|
|
paulo@89
|
1324 for (i; i < data.length; i += 1) {
|
|
paulo@89
|
1325 var stream_len = data[i] && data[i].values ? data[i].values.length : 0;
|
|
paulo@89
|
1326 numValues = stream_len > numValues ? stream_len : numValues;
|
|
paulo@89
|
1327 }
|
|
paulo@89
|
1328 nv.log("Requested number of ticks: ", numTicks);
|
|
paulo@89
|
1329 nv.log("Calculated max values to be: ", numValues);
|
|
paulo@89
|
1330 // make sure we don't have more ticks than values to avoid duplicates
|
|
paulo@89
|
1331 numTicks = numTicks > numValues ? numTicks = numValues - 1 : numTicks;
|
|
paulo@89
|
1332 // make sure we have at least one tick
|
|
paulo@89
|
1333 numTicks = numTicks < 1 ? 1 : numTicks;
|
|
paulo@89
|
1334 // make sure it's an integer
|
|
paulo@89
|
1335 numTicks = Math.floor(numTicks);
|
|
paulo@89
|
1336 nv.log("Calculating tick count as: ", numTicks);
|
|
paulo@89
|
1337 return numTicks;
|
|
paulo@89
|
1338 };
|
|
paulo@89
|
1339
|
|
paulo@89
|
1340
|
|
paulo@89
|
1341 /*
|
|
paulo@89
|
1342 returns number of ticks to actually use on Y axis, based on chart data
|
|
paulo@89
|
1343 */
|
|
paulo@89
|
1344 nv.utils.calcTicksY = function(numTicks, data) {
|
|
paulo@89
|
1345 // currently uses the same logic but we can adjust here if needed later
|
|
paulo@89
|
1346 return nv.utils.calcTicksX(numTicks, data);
|
|
paulo@89
|
1347 };
|
|
paulo@89
|
1348
|
|
paulo@89
|
1349
|
|
paulo@89
|
1350 /*
|
|
paulo@89
|
1351 Add a particular option from an options object onto chart
|
|
paulo@89
|
1352 Options exposed on a chart are a getter/setter function that returns chart
|
|
paulo@89
|
1353 on set to mimic typical d3 option chaining, e.g. svg.option1('a').option2('b');
|
|
paulo@89
|
1354
|
|
paulo@89
|
1355 option objects should be generated via Object.create() to provide
|
|
paulo@89
|
1356 the option of manipulating data via get/set functions.
|
|
paulo@89
|
1357 */
|
|
paulo@89
|
1358 nv.utils.initOption = function(chart, name) {
|
|
paulo@89
|
1359 // if it's a call option, just call it directly, otherwise do get/set
|
|
paulo@89
|
1360 if (chart._calls && chart._calls[name]) {
|
|
paulo@89
|
1361 chart[name] = chart._calls[name];
|
|
paulo@89
|
1362 } else {
|
|
paulo@89
|
1363 chart[name] = function (_) {
|
|
paulo@89
|
1364 if (!arguments.length) return chart._options[name];
|
|
paulo@89
|
1365 chart._overrides[name] = true;
|
|
paulo@89
|
1366 chart._options[name] = _;
|
|
paulo@89
|
1367 return chart;
|
|
paulo@89
|
1368 };
|
|
paulo@89
|
1369 // calling the option as _option will ignore if set by option already
|
|
paulo@89
|
1370 // so nvd3 can set options internally but the stop if set manually
|
|
paulo@89
|
1371 chart['_' + name] = function(_) {
|
|
paulo@89
|
1372 if (!arguments.length) return chart._options[name];
|
|
paulo@89
|
1373 if (!chart._overrides[name]) {
|
|
paulo@89
|
1374 chart._options[name] = _;
|
|
paulo@89
|
1375 }
|
|
paulo@89
|
1376 return chart;
|
|
paulo@89
|
1377 }
|
|
paulo@89
|
1378 }
|
|
paulo@89
|
1379 };
|
|
paulo@89
|
1380
|
|
paulo@89
|
1381
|
|
paulo@89
|
1382 /*
|
|
paulo@89
|
1383 Add all options in an options object to the chart
|
|
paulo@89
|
1384 */
|
|
paulo@89
|
1385 nv.utils.initOptions = function(chart) {
|
|
paulo@89
|
1386 chart._overrides = chart._overrides || {};
|
|
paulo@89
|
1387 var ops = Object.getOwnPropertyNames(chart._options || {});
|
|
paulo@89
|
1388 var calls = Object.getOwnPropertyNames(chart._calls || {});
|
|
paulo@89
|
1389 ops = ops.concat(calls);
|
|
paulo@89
|
1390 for (var i in ops) {
|
|
paulo@89
|
1391 nv.utils.initOption(chart, ops[i]);
|
|
paulo@89
|
1392 }
|
|
paulo@89
|
1393 };
|
|
paulo@89
|
1394
|
|
paulo@89
|
1395
|
|
paulo@89
|
1396 /*
|
|
paulo@89
|
1397 Inherit options from a D3 object
|
|
paulo@89
|
1398 d3.rebind makes calling the function on target actually call it on source
|
|
paulo@89
|
1399 Also use _d3options so we can track what we inherit for documentation and chained inheritance
|
|
paulo@89
|
1400 */
|
|
paulo@89
|
1401 nv.utils.inheritOptionsD3 = function(target, d3_source, oplist) {
|
|
paulo@89
|
1402 target._d3options = oplist.concat(target._d3options || []);
|
|
paulo@89
|
1403 oplist.unshift(d3_source);
|
|
paulo@89
|
1404 oplist.unshift(target);
|
|
paulo@89
|
1405 d3.rebind.apply(this, oplist);
|
|
paulo@89
|
1406 };
|
|
paulo@89
|
1407
|
|
paulo@89
|
1408
|
|
paulo@89
|
1409 /*
|
|
paulo@89
|
1410 Remove duplicates from an array
|
|
paulo@89
|
1411 */
|
|
paulo@89
|
1412 nv.utils.arrayUnique = function(a) {
|
|
paulo@89
|
1413 return a.sort().filter(function(item, pos) {
|
|
paulo@89
|
1414 return !pos || item != a[pos - 1];
|
|
paulo@89
|
1415 });
|
|
paulo@89
|
1416 };
|
|
paulo@89
|
1417
|
|
paulo@89
|
1418
|
|
paulo@89
|
1419 /*
|
|
paulo@89
|
1420 Keeps a list of custom symbols to draw from in addition to d3.svg.symbol
|
|
paulo@89
|
1421 Necessary since d3 doesn't let you extend its list -_-
|
|
paulo@89
|
1422 Add new symbols by doing nv.utils.symbols.set('name', function(size){...});
|
|
paulo@89
|
1423 */
|
|
paulo@89
|
1424 nv.utils.symbolMap = d3.map();
|
|
paulo@89
|
1425
|
|
paulo@89
|
1426
|
|
paulo@89
|
1427 /*
|
|
paulo@89
|
1428 Replaces d3.svg.symbol so that we can look both there and our own map
|
|
paulo@89
|
1429 */
|
|
paulo@89
|
1430 nv.utils.symbol = function() {
|
|
paulo@89
|
1431 var type,
|
|
paulo@89
|
1432 size = 64;
|
|
paulo@89
|
1433 function symbol(d,i) {
|
|
paulo@89
|
1434 var t = type.call(this,d,i);
|
|
paulo@89
|
1435 var s = size.call(this,d,i);
|
|
paulo@89
|
1436 if (d3.svg.symbolTypes.indexOf(t) !== -1) {
|
|
paulo@89
|
1437 return d3.svg.symbol().type(t).size(s)();
|
|
paulo@89
|
1438 } else {
|
|
paulo@89
|
1439 return nv.utils.symbolMap.get(t)(s);
|
|
paulo@89
|
1440 }
|
|
paulo@89
|
1441 }
|
|
paulo@89
|
1442 symbol.type = function(_) {
|
|
paulo@89
|
1443 if (!arguments.length) return type;
|
|
paulo@89
|
1444 type = d3.functor(_);
|
|
paulo@89
|
1445 return symbol;
|
|
paulo@89
|
1446 };
|
|
paulo@89
|
1447 symbol.size = function(_) {
|
|
paulo@89
|
1448 if (!arguments.length) return size;
|
|
paulo@89
|
1449 size = d3.functor(_);
|
|
paulo@89
|
1450 return symbol;
|
|
paulo@89
|
1451 };
|
|
paulo@89
|
1452 return symbol;
|
|
paulo@89
|
1453 };
|
|
paulo@89
|
1454
|
|
paulo@89
|
1455
|
|
paulo@89
|
1456 /*
|
|
paulo@89
|
1457 Inherit option getter/setter functions from source to target
|
|
paulo@89
|
1458 d3.rebind makes calling the function on target actually call it on source
|
|
paulo@89
|
1459 Also track via _inherited and _d3options so we can track what we inherit
|
|
paulo@89
|
1460 for documentation generation purposes and chained inheritance
|
|
paulo@89
|
1461 */
|
|
paulo@89
|
1462 nv.utils.inheritOptions = function(target, source) {
|
|
paulo@89
|
1463 // inherit all the things
|
|
paulo@89
|
1464 var ops = Object.getOwnPropertyNames(source._options || {});
|
|
paulo@89
|
1465 var calls = Object.getOwnPropertyNames(source._calls || {});
|
|
paulo@89
|
1466 var inherited = source._inherited || [];
|
|
paulo@89
|
1467 var d3ops = source._d3options || [];
|
|
paulo@89
|
1468 var args = ops.concat(calls).concat(inherited).concat(d3ops);
|
|
paulo@89
|
1469 args.unshift(source);
|
|
paulo@89
|
1470 args.unshift(target);
|
|
paulo@89
|
1471 d3.rebind.apply(this, args);
|
|
paulo@89
|
1472 // pass along the lists to keep track of them, don't allow duplicates
|
|
paulo@89
|
1473 target._inherited = nv.utils.arrayUnique(ops.concat(calls).concat(inherited).concat(ops).concat(target._inherited || []));
|
|
paulo@89
|
1474 target._d3options = nv.utils.arrayUnique(d3ops.concat(target._d3options || []));
|
|
paulo@89
|
1475 };
|
|
paulo@89
|
1476
|
|
paulo@89
|
1477
|
|
paulo@89
|
1478 /*
|
|
paulo@89
|
1479 Runs common initialize code on the svg before the chart builds
|
|
paulo@89
|
1480 */
|
|
paulo@89
|
1481 nv.utils.initSVG = function(svg) {
|
|
paulo@89
|
1482 svg.classed({'nvd3-svg':true});
|
|
paulo@89
|
1483 };
|
|
paulo@89
|
1484
|
|
paulo@89
|
1485
|
|
paulo@89
|
1486 /*
|
|
paulo@89
|
1487 Sanitize and provide default for the container height.
|
|
paulo@89
|
1488 */
|
|
paulo@89
|
1489 nv.utils.sanitizeHeight = function(height, container) {
|
|
paulo@89
|
1490 return (height || parseInt(container.style('height'), 10) || 400);
|
|
paulo@89
|
1491 };
|
|
paulo@89
|
1492
|
|
paulo@89
|
1493
|
|
paulo@89
|
1494 /*
|
|
paulo@89
|
1495 Sanitize and provide default for the container width.
|
|
paulo@89
|
1496 */
|
|
paulo@89
|
1497 nv.utils.sanitizeWidth = function(width, container) {
|
|
paulo@89
|
1498 return (width || parseInt(container.style('width'), 10) || 960);
|
|
paulo@89
|
1499 };
|
|
paulo@89
|
1500
|
|
paulo@89
|
1501
|
|
paulo@89
|
1502 /*
|
|
paulo@89
|
1503 Calculate the available height for a chart.
|
|
paulo@89
|
1504 */
|
|
paulo@89
|
1505 nv.utils.availableHeight = function(height, container, margin) {
|
|
paulo@89
|
1506 return nv.utils.sanitizeHeight(height, container) - margin.top - margin.bottom;
|
|
paulo@89
|
1507 };
|
|
paulo@89
|
1508
|
|
paulo@89
|
1509 /*
|
|
paulo@89
|
1510 Calculate the available width for a chart.
|
|
paulo@89
|
1511 */
|
|
paulo@89
|
1512 nv.utils.availableWidth = function(width, container, margin) {
|
|
paulo@89
|
1513 return nv.utils.sanitizeWidth(width, container) - margin.left - margin.right;
|
|
paulo@89
|
1514 };
|
|
paulo@89
|
1515
|
|
paulo@89
|
1516 /*
|
|
paulo@89
|
1517 Clear any rendered chart components and display a chart's 'noData' message
|
|
paulo@89
|
1518 */
|
|
paulo@89
|
1519 nv.utils.noData = function(chart, container) {
|
|
paulo@89
|
1520 var opt = chart.options(),
|
|
paulo@89
|
1521 margin = opt.margin(),
|
|
paulo@89
|
1522 noData = opt.noData(),
|
|
paulo@89
|
1523 data = (noData == null) ? ["No Data Available."] : [noData],
|
|
paulo@89
|
1524 height = nv.utils.availableHeight(opt.height(), container, margin),
|
|
paulo@89
|
1525 width = nv.utils.availableWidth(opt.width(), container, margin),
|
|
paulo@89
|
1526 x = margin.left + width/2,
|
|
paulo@89
|
1527 y = margin.top + height/2;
|
|
paulo@89
|
1528
|
|
paulo@89
|
1529 //Remove any previously created chart components
|
|
paulo@89
|
1530 container.selectAll('g').remove();
|
|
paulo@89
|
1531
|
|
paulo@89
|
1532 var noDataText = container.selectAll('.nv-noData').data(data);
|
|
paulo@89
|
1533
|
|
paulo@89
|
1534 noDataText.enter().append('text')
|
|
paulo@89
|
1535 .attr('class', 'nvd3 nv-noData')
|
|
paulo@89
|
1536 .attr('dy', '-.7em')
|
|
paulo@89
|
1537 .style('text-anchor', 'middle');
|
|
paulo@89
|
1538
|
|
paulo@89
|
1539 noDataText
|
|
paulo@89
|
1540 .attr('x', x)
|
|
paulo@89
|
1541 .attr('y', y)
|
|
paulo@89
|
1542 .text(function(t){ return t; });
|
|
paulo@89
|
1543 };
|
|
paulo@89
|
1544
|
|
paulo@89
|
1545 nv.models.axis = function() {
|
|
paulo@89
|
1546 "use strict";
|
|
paulo@89
|
1547
|
|
paulo@89
|
1548 //============================================================
|
|
paulo@89
|
1549 // Public Variables with Default Settings
|
|
paulo@89
|
1550 //------------------------------------------------------------
|
|
paulo@89
|
1551
|
|
paulo@89
|
1552 var axis = d3.svg.axis();
|
|
paulo@89
|
1553 var scale = d3.scale.linear();
|
|
paulo@89
|
1554
|
|
paulo@89
|
1555 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
1556 , width = 75 //only used for tickLabel currently
|
|
paulo@89
|
1557 , height = 60 //only used for tickLabel currently
|
|
paulo@89
|
1558 , axisLabelText = null
|
|
paulo@89
|
1559 , showMaxMin = true //TODO: showMaxMin should be disabled on all ordinal scaled axes
|
|
paulo@89
|
1560 , rotateLabels = 0
|
|
paulo@89
|
1561 , rotateYLabel = true
|
|
paulo@89
|
1562 , staggerLabels = false
|
|
paulo@89
|
1563 , isOrdinal = false
|
|
paulo@89
|
1564 , ticks = null
|
|
paulo@89
|
1565 , axisLabelDistance = 0
|
|
paulo@89
|
1566 , duration = 250
|
|
paulo@89
|
1567 , dispatch = d3.dispatch('renderEnd')
|
|
paulo@89
|
1568 ;
|
|
paulo@89
|
1569 axis
|
|
paulo@89
|
1570 .scale(scale)
|
|
paulo@89
|
1571 .orient('bottom')
|
|
paulo@89
|
1572 .tickFormat(function(d) { return d })
|
|
paulo@89
|
1573 ;
|
|
paulo@89
|
1574
|
|
paulo@89
|
1575 //============================================================
|
|
paulo@89
|
1576 // Private Variables
|
|
paulo@89
|
1577 //------------------------------------------------------------
|
|
paulo@89
|
1578
|
|
paulo@89
|
1579 var scale0;
|
|
paulo@89
|
1580 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
1581
|
|
paulo@89
|
1582 function chart(selection) {
|
|
paulo@89
|
1583 renderWatch.reset();
|
|
paulo@89
|
1584 selection.each(function(data) {
|
|
paulo@89
|
1585 var container = d3.select(this);
|
|
paulo@89
|
1586 nv.utils.initSVG(container);
|
|
paulo@89
|
1587
|
|
paulo@89
|
1588 // Setup containers and skeleton of chart
|
|
paulo@89
|
1589 var wrap = container.selectAll('g.nv-wrap.nv-axis').data([data]);
|
|
paulo@89
|
1590 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-axis');
|
|
paulo@89
|
1591 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
1592 var g = wrap.select('g');
|
|
paulo@89
|
1593
|
|
paulo@89
|
1594 if (ticks !== null)
|
|
paulo@89
|
1595 axis.ticks(ticks);
|
|
paulo@89
|
1596 else if (axis.orient() == 'top' || axis.orient() == 'bottom')
|
|
paulo@89
|
1597 axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);
|
|
paulo@89
|
1598
|
|
paulo@89
|
1599 //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component
|
|
paulo@89
|
1600 g.watchTransition(renderWatch, 'axis').call(axis);
|
|
paulo@89
|
1601
|
|
paulo@89
|
1602 scale0 = scale0 || axis.scale();
|
|
paulo@89
|
1603
|
|
paulo@89
|
1604 var fmt = axis.tickFormat();
|
|
paulo@89
|
1605 if (fmt == null) {
|
|
paulo@89
|
1606 fmt = scale0.tickFormat();
|
|
paulo@89
|
1607 }
|
|
paulo@89
|
1608
|
|
paulo@89
|
1609 var axisLabel = g.selectAll('text.nv-axislabel')
|
|
paulo@89
|
1610 .data([axisLabelText || null]);
|
|
paulo@89
|
1611 axisLabel.exit().remove();
|
|
paulo@89
|
1612
|
|
paulo@89
|
1613 var xLabelMargin;
|
|
paulo@89
|
1614 var axisMaxMin;
|
|
paulo@89
|
1615 var w;
|
|
paulo@89
|
1616 switch (axis.orient()) {
|
|
paulo@89
|
1617 case 'top':
|
|
paulo@89
|
1618 axisLabel.enter().append('text').attr('class', 'nv-axislabel');
|
|
paulo@89
|
1619 if (scale.range().length < 2) {
|
|
paulo@89
|
1620 w = 0;
|
|
paulo@89
|
1621 } else if (scale.range().length === 2) {
|
|
paulo@89
|
1622 w = scale.range()[1];
|
|
paulo@89
|
1623 } else {
|
|
paulo@89
|
1624 w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);
|
|
paulo@89
|
1625 }
|
|
paulo@89
|
1626 axisLabel
|
|
paulo@89
|
1627 .attr('text-anchor', 'middle')
|
|
paulo@89
|
1628 .attr('y', 0)
|
|
paulo@89
|
1629 .attr('x', w/2);
|
|
paulo@89
|
1630 if (showMaxMin) {
|
|
paulo@89
|
1631 axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
|
|
paulo@89
|
1632 .data(scale.domain());
|
|
paulo@89
|
1633 axisMaxMin.enter().append('g').attr('class',function(d,i){
|
|
paulo@89
|
1634 return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')
|
|
paulo@89
|
1635 }).append('text');
|
|
paulo@89
|
1636 axisMaxMin.exit().remove();
|
|
paulo@89
|
1637 axisMaxMin
|
|
paulo@89
|
1638 .attr('transform', function(d,i) {
|
|
paulo@89
|
1639 return 'translate(' + nv.utils.NaNtoZero(scale(d)) + ',0)'
|
|
paulo@89
|
1640 })
|
|
paulo@89
|
1641 .select('text')
|
|
paulo@89
|
1642 .attr('dy', '-0.5em')
|
|
paulo@89
|
1643 .attr('y', -axis.tickPadding())
|
|
paulo@89
|
1644 .attr('text-anchor', 'middle')
|
|
paulo@89
|
1645 .text(function(d,i) {
|
|
paulo@89
|
1646 var v = fmt(d);
|
|
paulo@89
|
1647 return ('' + v).match('NaN') ? '' : v;
|
|
paulo@89
|
1648 });
|
|
paulo@89
|
1649 axisMaxMin.watchTransition(renderWatch, 'min-max top')
|
|
paulo@89
|
1650 .attr('transform', function(d,i) {
|
|
paulo@89
|
1651 return 'translate(' + nv.utils.NaNtoZero(scale.range()[i]) + ',0)'
|
|
paulo@89
|
1652 });
|
|
paulo@89
|
1653 }
|
|
paulo@89
|
1654 break;
|
|
paulo@89
|
1655 case 'bottom':
|
|
paulo@89
|
1656 xLabelMargin = axisLabelDistance + 36;
|
|
paulo@89
|
1657 var maxTextWidth = 30;
|
|
paulo@89
|
1658 var textHeight = 0;
|
|
paulo@89
|
1659 var xTicks = g.selectAll('g').select("text");
|
|
paulo@89
|
1660 var rotateLabelsRule = '';
|
|
paulo@89
|
1661 if (rotateLabels%360) {
|
|
paulo@89
|
1662 //Calculate the longest xTick width
|
|
paulo@89
|
1663 xTicks.each(function(d,i){
|
|
paulo@89
|
1664 var box = this.getBoundingClientRect();
|
|
paulo@89
|
1665 var width = box.width;
|
|
paulo@89
|
1666 textHeight = box.height;
|
|
paulo@89
|
1667 if(width > maxTextWidth) maxTextWidth = width;
|
|
paulo@89
|
1668 });
|
|
paulo@89
|
1669 rotateLabelsRule = 'rotate(' + rotateLabels + ' 0,' + (textHeight/2 + axis.tickPadding()) + ')';
|
|
paulo@89
|
1670 //Convert to radians before calculating sin. Add 30 to margin for healthy padding.
|
|
paulo@89
|
1671 var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));
|
|
paulo@89
|
1672 xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;
|
|
paulo@89
|
1673 //Rotate all xTicks
|
|
paulo@89
|
1674 xTicks
|
|
paulo@89
|
1675 .attr('transform', rotateLabelsRule)
|
|
paulo@89
|
1676 .style('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
|
|
paulo@89
|
1677 }
|
|
paulo@89
|
1678 axisLabel.enter().append('text').attr('class', 'nv-axislabel');
|
|
paulo@89
|
1679 if (scale.range().length < 2) {
|
|
paulo@89
|
1680 w = 0;
|
|
paulo@89
|
1681 } else if (scale.range().length === 2) {
|
|
paulo@89
|
1682 w = scale.range()[1];
|
|
paulo@89
|
1683 } else {
|
|
paulo@89
|
1684 w = scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]);
|
|
paulo@89
|
1685 }
|
|
paulo@89
|
1686 axisLabel
|
|
paulo@89
|
1687 .attr('text-anchor', 'middle')
|
|
paulo@89
|
1688 .attr('y', xLabelMargin)
|
|
paulo@89
|
1689 .attr('x', w/2);
|
|
paulo@89
|
1690 if (showMaxMin) {
|
|
paulo@89
|
1691 //if (showMaxMin && !isOrdinal) {
|
|
paulo@89
|
1692 axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
|
|
paulo@89
|
1693 //.data(scale.domain())
|
|
paulo@89
|
1694 .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
|
|
paulo@89
|
1695 axisMaxMin.enter().append('g').attr('class',function(d,i){
|
|
paulo@89
|
1696 return ['nv-axisMaxMin','nv-axisMaxMin-x',(i == 0 ? 'nv-axisMin-x':'nv-axisMax-x')].join(' ')
|
|
paulo@89
|
1697 }).append('text');
|
|
paulo@89
|
1698 axisMaxMin.exit().remove();
|
|
paulo@89
|
1699 axisMaxMin
|
|
paulo@89
|
1700 .attr('transform', function(d,i) {
|
|
paulo@89
|
1701 return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'
|
|
paulo@89
|
1702 })
|
|
paulo@89
|
1703 .select('text')
|
|
paulo@89
|
1704 .attr('dy', '.71em')
|
|
paulo@89
|
1705 .attr('y', axis.tickPadding())
|
|
paulo@89
|
1706 .attr('transform', rotateLabelsRule)
|
|
paulo@89
|
1707 .style('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ? 'start' : 'end') : 'middle')
|
|
paulo@89
|
1708 .text(function(d,i) {
|
|
paulo@89
|
1709 var v = fmt(d);
|
|
paulo@89
|
1710 return ('' + v).match('NaN') ? '' : v;
|
|
paulo@89
|
1711 });
|
|
paulo@89
|
1712 axisMaxMin.watchTransition(renderWatch, 'min-max bottom')
|
|
paulo@89
|
1713 .attr('transform', function(d,i) {
|
|
paulo@89
|
1714 return 'translate(' + nv.utils.NaNtoZero((scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0))) + ',0)'
|
|
paulo@89
|
1715 });
|
|
paulo@89
|
1716 }
|
|
paulo@89
|
1717 if (staggerLabels)
|
|
paulo@89
|
1718 xTicks
|
|
paulo@89
|
1719 .attr('transform', function(d,i) {
|
|
paulo@89
|
1720 return 'translate(0,' + (i % 2 == 0 ? '0' : '12') + ')'
|
|
paulo@89
|
1721 });
|
|
paulo@89
|
1722
|
|
paulo@89
|
1723 break;
|
|
paulo@89
|
1724 case 'right':
|
|
paulo@89
|
1725 axisLabel.enter().append('text').attr('class', 'nv-axislabel');
|
|
paulo@89
|
1726 axisLabel
|
|
paulo@89
|
1727 .style('text-anchor', rotateYLabel ? 'middle' : 'begin')
|
|
paulo@89
|
1728 .attr('transform', rotateYLabel ? 'rotate(90)' : '')
|
|
paulo@89
|
1729 .attr('y', rotateYLabel ? (-Math.max(margin.right, width) + 12) : -10) //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
|
|
paulo@89
|
1730 .attr('x', rotateYLabel ? (d3.max(scale.range()) / 2) : axis.tickPadding());
|
|
paulo@89
|
1731 if (showMaxMin) {
|
|
paulo@89
|
1732 axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
|
|
paulo@89
|
1733 .data(scale.domain());
|
|
paulo@89
|
1734 axisMaxMin.enter().append('g').attr('class',function(d,i){
|
|
paulo@89
|
1735 return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')
|
|
paulo@89
|
1736 }).append('text')
|
|
paulo@89
|
1737 .style('opacity', 0);
|
|
paulo@89
|
1738 axisMaxMin.exit().remove();
|
|
paulo@89
|
1739 axisMaxMin
|
|
paulo@89
|
1740 .attr('transform', function(d,i) {
|
|
paulo@89
|
1741 return 'translate(0,' + nv.utils.NaNtoZero(scale(d)) + ')'
|
|
paulo@89
|
1742 })
|
|
paulo@89
|
1743 .select('text')
|
|
paulo@89
|
1744 .attr('dy', '.32em')
|
|
paulo@89
|
1745 .attr('y', 0)
|
|
paulo@89
|
1746 .attr('x', axis.tickPadding())
|
|
paulo@89
|
1747 .style('text-anchor', 'start')
|
|
paulo@89
|
1748 .text(function(d, i) {
|
|
paulo@89
|
1749 var v = fmt(d);
|
|
paulo@89
|
1750 return ('' + v).match('NaN') ? '' : v;
|
|
paulo@89
|
1751 });
|
|
paulo@89
|
1752 axisMaxMin.watchTransition(renderWatch, 'min-max right')
|
|
paulo@89
|
1753 .attr('transform', function(d,i) {
|
|
paulo@89
|
1754 return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'
|
|
paulo@89
|
1755 })
|
|
paulo@89
|
1756 .select('text')
|
|
paulo@89
|
1757 .style('opacity', 1);
|
|
paulo@89
|
1758 }
|
|
paulo@89
|
1759 break;
|
|
paulo@89
|
1760 case 'left':
|
|
paulo@89
|
1761 /*
|
|
paulo@89
|
1762 //For dynamically placing the label. Can be used with dynamically-sized chart axis margins
|
|
paulo@89
|
1763 var yTicks = g.selectAll('g').select("text");
|
|
paulo@89
|
1764 yTicks.each(function(d,i){
|
|
paulo@89
|
1765 var labelPadding = this.getBoundingClientRect().width + axis.tickPadding() + 16;
|
|
paulo@89
|
1766 if(labelPadding > width) width = labelPadding;
|
|
paulo@89
|
1767 });
|
|
paulo@89
|
1768 */
|
|
paulo@89
|
1769 axisLabel.enter().append('text').attr('class', 'nv-axislabel');
|
|
paulo@89
|
1770 axisLabel
|
|
paulo@89
|
1771 .style('text-anchor', rotateYLabel ? 'middle' : 'end')
|
|
paulo@89
|
1772 .attr('transform', rotateYLabel ? 'rotate(-90)' : '')
|
|
paulo@89
|
1773 .attr('y', rotateYLabel ? (-Math.max(margin.left, width) + 25 - (axisLabelDistance || 0)) : -10)
|
|
paulo@89
|
1774 .attr('x', rotateYLabel ? (-d3.max(scale.range()) / 2) : -axis.tickPadding());
|
|
paulo@89
|
1775 if (showMaxMin) {
|
|
paulo@89
|
1776 axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
|
|
paulo@89
|
1777 .data(scale.domain());
|
|
paulo@89
|
1778 axisMaxMin.enter().append('g').attr('class',function(d,i){
|
|
paulo@89
|
1779 return ['nv-axisMaxMin','nv-axisMaxMin-y',(i == 0 ? 'nv-axisMin-y':'nv-axisMax-y')].join(' ')
|
|
paulo@89
|
1780 }).append('text')
|
|
paulo@89
|
1781 .style('opacity', 0);
|
|
paulo@89
|
1782 axisMaxMin.exit().remove();
|
|
paulo@89
|
1783 axisMaxMin
|
|
paulo@89
|
1784 .attr('transform', function(d,i) {
|
|
paulo@89
|
1785 return 'translate(0,' + nv.utils.NaNtoZero(scale0(d)) + ')'
|
|
paulo@89
|
1786 })
|
|
paulo@89
|
1787 .select('text')
|
|
paulo@89
|
1788 .attr('dy', '.32em')
|
|
paulo@89
|
1789 .attr('y', 0)
|
|
paulo@89
|
1790 .attr('x', -axis.tickPadding())
|
|
paulo@89
|
1791 .attr('text-anchor', 'end')
|
|
paulo@89
|
1792 .text(function(d,i) {
|
|
paulo@89
|
1793 var v = fmt(d);
|
|
paulo@89
|
1794 return ('' + v).match('NaN') ? '' : v;
|
|
paulo@89
|
1795 });
|
|
paulo@89
|
1796 axisMaxMin.watchTransition(renderWatch, 'min-max right')
|
|
paulo@89
|
1797 .attr('transform', function(d,i) {
|
|
paulo@89
|
1798 return 'translate(0,' + nv.utils.NaNtoZero(scale.range()[i]) + ')'
|
|
paulo@89
|
1799 })
|
|
paulo@89
|
1800 .select('text')
|
|
paulo@89
|
1801 .style('opacity', 1);
|
|
paulo@89
|
1802 }
|
|
paulo@89
|
1803 break;
|
|
paulo@89
|
1804 }
|
|
paulo@89
|
1805 axisLabel.text(function(d) { return d });
|
|
paulo@89
|
1806
|
|
paulo@89
|
1807 if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
|
|
paulo@89
|
1808 //check if max and min overlap other values, if so, hide the values that overlap
|
|
paulo@89
|
1809 g.selectAll('g') // the g's wrapping each tick
|
|
paulo@89
|
1810 .each(function(d,i) {
|
|
paulo@89
|
1811 d3.select(this).select('text').attr('opacity', 1);
|
|
paulo@89
|
1812 if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!
|
|
paulo@89
|
1813 if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
|
|
paulo@89
|
1814 d3.select(this).attr('opacity', 0);
|
|
paulo@89
|
1815
|
|
paulo@89
|
1816 d3.select(this).select('text').attr('opacity', 0); // Don't remove the ZERO line!!
|
|
paulo@89
|
1817 }
|
|
paulo@89
|
1818 });
|
|
paulo@89
|
1819
|
|
paulo@89
|
1820 //if Max and Min = 0 only show min, Issue #281
|
|
paulo@89
|
1821 if (scale.domain()[0] == scale.domain()[1] && scale.domain()[0] == 0) {
|
|
paulo@89
|
1822 wrap.selectAll('g.nv-axisMaxMin').style('opacity', function (d, i) {
|
|
paulo@89
|
1823 return !i ? 1 : 0
|
|
paulo@89
|
1824 });
|
|
paulo@89
|
1825 }
|
|
paulo@89
|
1826 }
|
|
paulo@89
|
1827
|
|
paulo@89
|
1828 if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
|
|
paulo@89
|
1829 var maxMinRange = [];
|
|
paulo@89
|
1830 wrap.selectAll('g.nv-axisMaxMin')
|
|
paulo@89
|
1831 .each(function(d,i) {
|
|
paulo@89
|
1832 try {
|
|
paulo@89
|
1833 if (i) // i== 1, max position
|
|
paulo@89
|
1834 maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
|
|
paulo@89
|
1835 else // i==0, min position
|
|
paulo@89
|
1836 maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4)
|
|
paulo@89
|
1837 }catch (err) {
|
|
paulo@89
|
1838 if (i) // i== 1, max position
|
|
paulo@89
|
1839 maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
|
|
paulo@89
|
1840 else // i==0, min position
|
|
paulo@89
|
1841 maxMinRange.push(scale(d) + 4);
|
|
paulo@89
|
1842 }
|
|
paulo@89
|
1843 });
|
|
paulo@89
|
1844 // the g's wrapping each tick
|
|
paulo@89
|
1845 g.selectAll('g').each(function(d, i) {
|
|
paulo@89
|
1846 if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) {
|
|
paulo@89
|
1847 if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
|
|
paulo@89
|
1848 d3.select(this).remove();
|
|
paulo@89
|
1849 else
|
|
paulo@89
|
1850 d3.select(this).select('text').remove(); // Don't remove the ZERO line!!
|
|
paulo@89
|
1851 }
|
|
paulo@89
|
1852 });
|
|
paulo@89
|
1853 }
|
|
paulo@89
|
1854
|
|
paulo@89
|
1855 //Highlight zero tick line
|
|
paulo@89
|
1856 g.selectAll('.tick')
|
|
paulo@89
|
1857 .filter(function (d) {
|
|
paulo@89
|
1858 /*
|
|
paulo@89
|
1859 The filter needs to return only ticks at or near zero.
|
|
paulo@89
|
1860 Numbers like 0.00001 need to count as zero as well,
|
|
paulo@89
|
1861 and the arithmetic trick below solves that.
|
|
paulo@89
|
1862 */
|
|
paulo@89
|
1863 return !parseFloat(Math.round(d * 100000) / 1000000) && (d !== undefined)
|
|
paulo@89
|
1864 })
|
|
paulo@89
|
1865 .classed('zero', true);
|
|
paulo@89
|
1866
|
|
paulo@89
|
1867 //store old scales for use in transitions on update
|
|
paulo@89
|
1868 scale0 = scale.copy();
|
|
paulo@89
|
1869
|
|
paulo@89
|
1870 });
|
|
paulo@89
|
1871
|
|
paulo@89
|
1872 renderWatch.renderEnd('axis immediate');
|
|
paulo@89
|
1873 return chart;
|
|
paulo@89
|
1874 }
|
|
paulo@89
|
1875
|
|
paulo@89
|
1876 //============================================================
|
|
paulo@89
|
1877 // Expose Public Variables
|
|
paulo@89
|
1878 //------------------------------------------------------------
|
|
paulo@89
|
1879
|
|
paulo@89
|
1880 // expose chart's sub-components
|
|
paulo@89
|
1881 chart.axis = axis;
|
|
paulo@89
|
1882 chart.dispatch = dispatch;
|
|
paulo@89
|
1883
|
|
paulo@89
|
1884 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
1885 chart._options = Object.create({}, {
|
|
paulo@89
|
1886 // simple options, just get/set the necessary values
|
|
paulo@89
|
1887 axisLabelDistance: {get: function(){return axisLabelDistance;}, set: function(_){axisLabelDistance=_;}},
|
|
paulo@89
|
1888 staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
|
|
paulo@89
|
1889 rotateLabels: {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},
|
|
paulo@89
|
1890 rotateYLabel: {get: function(){return rotateYLabel;}, set: function(_){rotateYLabel=_;}},
|
|
paulo@89
|
1891 showMaxMin: {get: function(){return showMaxMin;}, set: function(_){showMaxMin=_;}},
|
|
paulo@89
|
1892 axisLabel: {get: function(){return axisLabelText;}, set: function(_){axisLabelText=_;}},
|
|
paulo@89
|
1893 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
1894 ticks: {get: function(){return ticks;}, set: function(_){ticks=_;}},
|
|
paulo@89
|
1895 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
1896
|
|
paulo@89
|
1897 // options that require extra logic in the setter
|
|
paulo@89
|
1898 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
1899 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
1900 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
1901 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
1902 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
1903 }},
|
|
paulo@89
|
1904 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
1905 duration=_;
|
|
paulo@89
|
1906 renderWatch.reset(duration);
|
|
paulo@89
|
1907 }},
|
|
paulo@89
|
1908 scale: {get: function(){return scale;}, set: function(_){
|
|
paulo@89
|
1909 scale = _;
|
|
paulo@89
|
1910 axis.scale(scale);
|
|
paulo@89
|
1911 isOrdinal = typeof scale.rangeBands === 'function';
|
|
paulo@89
|
1912 nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);
|
|
paulo@89
|
1913 }}
|
|
paulo@89
|
1914 });
|
|
paulo@89
|
1915
|
|
paulo@89
|
1916 nv.utils.initOptions(chart);
|
|
paulo@89
|
1917 nv.utils.inheritOptionsD3(chart, axis, ['orient', 'tickValues', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat']);
|
|
paulo@89
|
1918 nv.utils.inheritOptionsD3(chart, scale, ['domain', 'range', 'rangeBand', 'rangeBands']);
|
|
paulo@89
|
1919
|
|
paulo@89
|
1920 return chart;
|
|
paulo@89
|
1921 };
|
|
paulo@89
|
1922 nv.models.boxPlot = function() {
|
|
paulo@89
|
1923 "use strict";
|
|
paulo@89
|
1924
|
|
paulo@89
|
1925 //============================================================
|
|
paulo@89
|
1926 // Public Variables with Default Settings
|
|
paulo@89
|
1927 //------------------------------------------------------------
|
|
paulo@89
|
1928
|
|
paulo@89
|
1929 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
1930 , width = 960
|
|
paulo@89
|
1931 , height = 500
|
|
paulo@89
|
1932 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
1933 , x = d3.scale.ordinal()
|
|
paulo@89
|
1934 , y = d3.scale.linear()
|
|
paulo@89
|
1935 , getX = function(d) { return d.x }
|
|
paulo@89
|
1936 , getY = function(d) { return d.y }
|
|
paulo@89
|
1937 , color = nv.utils.defaultColor()
|
|
paulo@89
|
1938 , container = null
|
|
paulo@89
|
1939 , xDomain
|
|
paulo@89
|
1940 , yDomain
|
|
paulo@89
|
1941 , xRange
|
|
paulo@89
|
1942 , yRange
|
|
paulo@89
|
1943 , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
1944 , duration = 250
|
|
paulo@89
|
1945 , maxBoxWidth = null
|
|
paulo@89
|
1946 ;
|
|
paulo@89
|
1947
|
|
paulo@89
|
1948 //============================================================
|
|
paulo@89
|
1949 // Private Variables
|
|
paulo@89
|
1950 //------------------------------------------------------------
|
|
paulo@89
|
1951
|
|
paulo@89
|
1952 var x0, y0;
|
|
paulo@89
|
1953 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
1954
|
|
paulo@89
|
1955 function chart(selection) {
|
|
paulo@89
|
1956 renderWatch.reset();
|
|
paulo@89
|
1957 selection.each(function(data) {
|
|
paulo@89
|
1958 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
1959 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
1960
|
|
paulo@89
|
1961 container = d3.select(this);
|
|
paulo@89
|
1962 nv.utils.initSVG(container);
|
|
paulo@89
|
1963
|
|
paulo@89
|
1964 // Setup Scales
|
|
paulo@89
|
1965 x .domain(xDomain || data.map(function(d,i) { return getX(d,i); }))
|
|
paulo@89
|
1966 .rangeBands(xRange || [0, availableWidth], .1);
|
|
paulo@89
|
1967
|
|
paulo@89
|
1968 // if we know yDomain, no need to calculate
|
|
paulo@89
|
1969 var yData = []
|
|
paulo@89
|
1970 if (!yDomain) {
|
|
paulo@89
|
1971 // (y-range is based on quartiles, whiskers and outliers)
|
|
paulo@89
|
1972
|
|
paulo@89
|
1973 // lower values
|
|
paulo@89
|
1974 var yMin = d3.min(data.map(function(d) {
|
|
paulo@89
|
1975 var min_arr = [];
|
|
paulo@89
|
1976
|
|
paulo@89
|
1977 min_arr.push(d.values.Q1);
|
|
paulo@89
|
1978 if (d.values.hasOwnProperty('whisker_low') && d.values.whisker_low !== null) { min_arr.push(d.values.whisker_low); }
|
|
paulo@89
|
1979 if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { min_arr = min_arr.concat(d.values.outliers); }
|
|
paulo@89
|
1980
|
|
paulo@89
|
1981 return d3.min(min_arr);
|
|
paulo@89
|
1982 }));
|
|
paulo@89
|
1983
|
|
paulo@89
|
1984 // upper values
|
|
paulo@89
|
1985 var yMax = d3.max(data.map(function(d) {
|
|
paulo@89
|
1986 var max_arr = [];
|
|
paulo@89
|
1987
|
|
paulo@89
|
1988 max_arr.push(d.values.Q3);
|
|
paulo@89
|
1989 if (d.values.hasOwnProperty('whisker_high') && d.values.whisker_high !== null) { max_arr.push(d.values.whisker_high); }
|
|
paulo@89
|
1990 if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { max_arr = max_arr.concat(d.values.outliers); }
|
|
paulo@89
|
1991
|
|
paulo@89
|
1992 return d3.max(max_arr);
|
|
paulo@89
|
1993 }));
|
|
paulo@89
|
1994
|
|
paulo@89
|
1995 yData = [ yMin, yMax ] ;
|
|
paulo@89
|
1996 }
|
|
paulo@89
|
1997
|
|
paulo@89
|
1998 y.domain(yDomain || yData);
|
|
paulo@89
|
1999 y.range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
2000
|
|
paulo@89
|
2001 //store old scales if they exist
|
|
paulo@89
|
2002 x0 = x0 || x;
|
|
paulo@89
|
2003 y0 = y0 || y.copy().range([y(0),y(0)]);
|
|
paulo@89
|
2004
|
|
paulo@89
|
2005 // Setup containers and skeleton of chart
|
|
paulo@89
|
2006 var wrap = container.selectAll('g.nv-wrap').data([data]);
|
|
paulo@89
|
2007 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap');
|
|
paulo@89
|
2008 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
2009
|
|
paulo@89
|
2010 var boxplots = wrap.selectAll('.nv-boxplot').data(function(d) { return d });
|
|
paulo@89
|
2011 var boxEnter = boxplots.enter().append('g').style('stroke-opacity', 1e-6).style('fill-opacity', 1e-6);
|
|
paulo@89
|
2012 boxplots
|
|
paulo@89
|
2013 .attr('class', 'nv-boxplot')
|
|
paulo@89
|
2014 .attr('transform', function(d,i,j) { return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)'; })
|
|
paulo@89
|
2015 .classed('hover', function(d) { return d.hover });
|
|
paulo@89
|
2016 boxplots
|
|
paulo@89
|
2017 .watchTransition(renderWatch, 'nv-boxplot: boxplots')
|
|
paulo@89
|
2018 .style('stroke-opacity', 1)
|
|
paulo@89
|
2019 .style('fill-opacity', .75)
|
|
paulo@89
|
2020 .delay(function(d,i) { return i * duration / data.length })
|
|
paulo@89
|
2021 .attr('transform', function(d,i) {
|
|
paulo@89
|
2022 return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05) + ', 0)';
|
|
paulo@89
|
2023 });
|
|
paulo@89
|
2024 boxplots.exit().remove();
|
|
paulo@89
|
2025
|
|
paulo@89
|
2026 // ----- add the SVG elements for each boxPlot -----
|
|
paulo@89
|
2027
|
|
paulo@89
|
2028 // conditionally append whisker lines
|
|
paulo@89
|
2029 boxEnter.each(function(d,i) {
|
|
paulo@89
|
2030 var box = d3.select(this);
|
|
paulo@89
|
2031
|
|
paulo@89
|
2032 ['low', 'high'].forEach(function(key) {
|
|
paulo@89
|
2033 if (d.values.hasOwnProperty('whisker_' + key) && d.values['whisker_' + key] !== null) {
|
|
paulo@89
|
2034 box.append('line')
|
|
paulo@89
|
2035 .style('stroke', (d.color) ? d.color : color(d,i))
|
|
paulo@89
|
2036 .attr('class', 'nv-boxplot-whisker nv-boxplot-' + key);
|
|
paulo@89
|
2037
|
|
paulo@89
|
2038 box.append('line')
|
|
paulo@89
|
2039 .style('stroke', (d.color) ? d.color : color(d,i))
|
|
paulo@89
|
2040 .attr('class', 'nv-boxplot-tick nv-boxplot-' + key);
|
|
paulo@89
|
2041 }
|
|
paulo@89
|
2042 });
|
|
paulo@89
|
2043 });
|
|
paulo@89
|
2044
|
|
paulo@89
|
2045 // outliers
|
|
paulo@89
|
2046 // TODO: support custom colors here
|
|
paulo@89
|
2047 var outliers = boxplots.selectAll('.nv-boxplot-outlier').data(function(d) {
|
|
paulo@89
|
2048 if (d.values.hasOwnProperty('outliers') && d.values.outliers !== null) { return d.values.outliers; }
|
|
paulo@89
|
2049 else { return []; }
|
|
paulo@89
|
2050 });
|
|
paulo@89
|
2051 outliers.enter().append('circle')
|
|
paulo@89
|
2052 .style('fill', function(d,i,j) { return color(d,j) }).style('stroke', function(d,i,j) { return color(d,j) })
|
|
paulo@89
|
2053 .on('mouseover', function(d,i,j) {
|
|
paulo@89
|
2054 d3.select(this).classed('hover', true);
|
|
paulo@89
|
2055 dispatch.elementMouseover({
|
|
paulo@89
|
2056 series: { key: d, color: color(d,j) },
|
|
paulo@89
|
2057 e: d3.event
|
|
paulo@89
|
2058 });
|
|
paulo@89
|
2059 })
|
|
paulo@89
|
2060 .on('mouseout', function(d,i,j) {
|
|
paulo@89
|
2061 d3.select(this).classed('hover', false);
|
|
paulo@89
|
2062 dispatch.elementMouseout({
|
|
paulo@89
|
2063 series: { key: d, color: color(d,j) },
|
|
paulo@89
|
2064 e: d3.event
|
|
paulo@89
|
2065 });
|
|
paulo@89
|
2066 })
|
|
paulo@89
|
2067 .on('mousemove', function(d,i) {
|
|
paulo@89
|
2068 dispatch.elementMousemove({e: d3.event});
|
|
paulo@89
|
2069 });
|
|
paulo@89
|
2070
|
|
paulo@89
|
2071 outliers.attr('class', 'nv-boxplot-outlier');
|
|
paulo@89
|
2072 outliers
|
|
paulo@89
|
2073 .watchTransition(renderWatch, 'nv-boxplot: nv-boxplot-outlier')
|
|
paulo@89
|
2074 .attr('cx', x.rangeBand() * .45)
|
|
paulo@89
|
2075 .attr('cy', function(d,i,j) { return y(d); })
|
|
paulo@89
|
2076 .attr('r', '3');
|
|
paulo@89
|
2077 outliers.exit().remove();
|
|
paulo@89
|
2078
|
|
paulo@89
|
2079 var box_width = function() { return (maxBoxWidth === null ? x.rangeBand() * .9 : Math.min(75, x.rangeBand() * .9)); };
|
|
paulo@89
|
2080 var box_left = function() { return x.rangeBand() * .45 - box_width()/2; };
|
|
paulo@89
|
2081 var box_right = function() { return x.rangeBand() * .45 + box_width()/2; };
|
|
paulo@89
|
2082
|
|
paulo@89
|
2083 // update whisker lines and ticks
|
|
paulo@89
|
2084 ['low', 'high'].forEach(function(key) {
|
|
paulo@89
|
2085 var endpoint = (key === 'low') ? 'Q1' : 'Q3';
|
|
paulo@89
|
2086
|
|
paulo@89
|
2087 boxplots.select('line.nv-boxplot-whisker.nv-boxplot-' + key)
|
|
paulo@89
|
2088 .watchTransition(renderWatch, 'nv-boxplot: boxplots')
|
|
paulo@89
|
2089 .attr('x1', x.rangeBand() * .45 )
|
|
paulo@89
|
2090 .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })
|
|
paulo@89
|
2091 .attr('x2', x.rangeBand() * .45 )
|
|
paulo@89
|
2092 .attr('y2', function(d,i) { return y(d.values[endpoint]); });
|
|
paulo@89
|
2093
|
|
paulo@89
|
2094 boxplots.select('line.nv-boxplot-tick.nv-boxplot-' + key)
|
|
paulo@89
|
2095 .watchTransition(renderWatch, 'nv-boxplot: boxplots')
|
|
paulo@89
|
2096 .attr('x1', box_left )
|
|
paulo@89
|
2097 .attr('y1', function(d,i) { return y(d.values['whisker_' + key]); })
|
|
paulo@89
|
2098 .attr('x2', box_right )
|
|
paulo@89
|
2099 .attr('y2', function(d,i) { return y(d.values['whisker_' + key]); });
|
|
paulo@89
|
2100 });
|
|
paulo@89
|
2101
|
|
paulo@89
|
2102 ['low', 'high'].forEach(function(key) {
|
|
paulo@89
|
2103 boxEnter.selectAll('.nv-boxplot-' + key)
|
|
paulo@89
|
2104 .on('mouseover', function(d,i,j) {
|
|
paulo@89
|
2105 d3.select(this).classed('hover', true);
|
|
paulo@89
|
2106 dispatch.elementMouseover({
|
|
paulo@89
|
2107 series: { key: d.values['whisker_' + key], color: color(d,j) },
|
|
paulo@89
|
2108 e: d3.event
|
|
paulo@89
|
2109 });
|
|
paulo@89
|
2110 })
|
|
paulo@89
|
2111 .on('mouseout', function(d,i,j) {
|
|
paulo@89
|
2112 d3.select(this).classed('hover', false);
|
|
paulo@89
|
2113 dispatch.elementMouseout({
|
|
paulo@89
|
2114 series: { key: d.values['whisker_' + key], color: color(d,j) },
|
|
paulo@89
|
2115 e: d3.event
|
|
paulo@89
|
2116 });
|
|
paulo@89
|
2117 })
|
|
paulo@89
|
2118 .on('mousemove', function(d,i) {
|
|
paulo@89
|
2119 dispatch.elementMousemove({e: d3.event});
|
|
paulo@89
|
2120 });
|
|
paulo@89
|
2121 });
|
|
paulo@89
|
2122
|
|
paulo@89
|
2123 // boxes
|
|
paulo@89
|
2124 boxEnter.append('rect')
|
|
paulo@89
|
2125 .attr('class', 'nv-boxplot-box')
|
|
paulo@89
|
2126 // tooltip events
|
|
paulo@89
|
2127 .on('mouseover', function(d,i) {
|
|
paulo@89
|
2128 d3.select(this).classed('hover', true);
|
|
paulo@89
|
2129 dispatch.elementMouseover({
|
|
paulo@89
|
2130 key: d.label,
|
|
paulo@89
|
2131 value: d.label,
|
|
paulo@89
|
2132 series: [
|
|
paulo@89
|
2133 { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },
|
|
paulo@89
|
2134 { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },
|
|
paulo@89
|
2135 { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }
|
|
paulo@89
|
2136 ],
|
|
paulo@89
|
2137 data: d,
|
|
paulo@89
|
2138 index: i,
|
|
paulo@89
|
2139 e: d3.event
|
|
paulo@89
|
2140 });
|
|
paulo@89
|
2141 })
|
|
paulo@89
|
2142 .on('mouseout', function(d,i) {
|
|
paulo@89
|
2143 d3.select(this).classed('hover', false);
|
|
paulo@89
|
2144 dispatch.elementMouseout({
|
|
paulo@89
|
2145 key: d.label,
|
|
paulo@89
|
2146 value: d.label,
|
|
paulo@89
|
2147 series: [
|
|
paulo@89
|
2148 { key: 'Q3', value: d.values.Q3, color: d.color || color(d,i) },
|
|
paulo@89
|
2149 { key: 'Q2', value: d.values.Q2, color: d.color || color(d,i) },
|
|
paulo@89
|
2150 { key: 'Q1', value: d.values.Q1, color: d.color || color(d,i) }
|
|
paulo@89
|
2151 ],
|
|
paulo@89
|
2152 data: d,
|
|
paulo@89
|
2153 index: i,
|
|
paulo@89
|
2154 e: d3.event
|
|
paulo@89
|
2155 });
|
|
paulo@89
|
2156 })
|
|
paulo@89
|
2157 .on('mousemove', function(d,i) {
|
|
paulo@89
|
2158 dispatch.elementMousemove({e: d3.event});
|
|
paulo@89
|
2159 });
|
|
paulo@89
|
2160
|
|
paulo@89
|
2161 // box transitions
|
|
paulo@89
|
2162 boxplots.select('rect.nv-boxplot-box')
|
|
paulo@89
|
2163 .watchTransition(renderWatch, 'nv-boxplot: boxes')
|
|
paulo@89
|
2164 .attr('y', function(d,i) { return y(d.values.Q3); })
|
|
paulo@89
|
2165 .attr('width', box_width)
|
|
paulo@89
|
2166 .attr('x', box_left )
|
|
paulo@89
|
2167
|
|
paulo@89
|
2168 .attr('height', function(d,i) { return Math.abs(y(d.values.Q3) - y(d.values.Q1)) || 1 })
|
|
paulo@89
|
2169 .style('fill', function(d,i) { return d.color || color(d,i) })
|
|
paulo@89
|
2170 .style('stroke', function(d,i) { return d.color || color(d,i) });
|
|
paulo@89
|
2171
|
|
paulo@89
|
2172 // median line
|
|
paulo@89
|
2173 boxEnter.append('line').attr('class', 'nv-boxplot-median');
|
|
paulo@89
|
2174
|
|
paulo@89
|
2175 boxplots.select('line.nv-boxplot-median')
|
|
paulo@89
|
2176 .watchTransition(renderWatch, 'nv-boxplot: boxplots line')
|
|
paulo@89
|
2177 .attr('x1', box_left)
|
|
paulo@89
|
2178 .attr('y1', function(d,i) { return y(d.values.Q2); })
|
|
paulo@89
|
2179 .attr('x2', box_right)
|
|
paulo@89
|
2180 .attr('y2', function(d,i) { return y(d.values.Q2); });
|
|
paulo@89
|
2181
|
|
paulo@89
|
2182 //store old scales for use in transitions on update
|
|
paulo@89
|
2183 x0 = x.copy();
|
|
paulo@89
|
2184 y0 = y.copy();
|
|
paulo@89
|
2185 });
|
|
paulo@89
|
2186
|
|
paulo@89
|
2187 renderWatch.renderEnd('nv-boxplot immediate');
|
|
paulo@89
|
2188 return chart;
|
|
paulo@89
|
2189 }
|
|
paulo@89
|
2190
|
|
paulo@89
|
2191 //============================================================
|
|
paulo@89
|
2192 // Expose Public Variables
|
|
paulo@89
|
2193 //------------------------------------------------------------
|
|
paulo@89
|
2194
|
|
paulo@89
|
2195 chart.dispatch = dispatch;
|
|
paulo@89
|
2196 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
2197
|
|
paulo@89
|
2198 chart._options = Object.create({}, {
|
|
paulo@89
|
2199 // simple options, just get/set the necessary values
|
|
paulo@89
|
2200 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
2201 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
2202 maxBoxWidth: {get: function(){return maxBoxWidth;}, set: function(_){maxBoxWidth=_;}},
|
|
paulo@89
|
2203 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
2204 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
2205 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
2206 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
2207 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
2208 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
2209 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
2210 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
2211 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
2212 // rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},
|
|
paulo@89
|
2213
|
|
paulo@89
|
2214 // options that require extra logic in the setter
|
|
paulo@89
|
2215 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
2216 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
2217 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
2218 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
2219 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
2220 }},
|
|
paulo@89
|
2221 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
2222 color = nv.utils.getColor(_);
|
|
paulo@89
|
2223 }},
|
|
paulo@89
|
2224 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
2225 duration = _;
|
|
paulo@89
|
2226 renderWatch.reset(duration);
|
|
paulo@89
|
2227 }}
|
|
paulo@89
|
2228 });
|
|
paulo@89
|
2229
|
|
paulo@89
|
2230 nv.utils.initOptions(chart);
|
|
paulo@89
|
2231
|
|
paulo@89
|
2232 return chart;
|
|
paulo@89
|
2233 };
|
|
paulo@89
|
2234 nv.models.boxPlotChart = function() {
|
|
paulo@89
|
2235 "use strict";
|
|
paulo@89
|
2236
|
|
paulo@89
|
2237 //============================================================
|
|
paulo@89
|
2238 // Public Variables with Default Settings
|
|
paulo@89
|
2239 //------------------------------------------------------------
|
|
paulo@89
|
2240
|
|
paulo@89
|
2241 var boxplot = nv.models.boxPlot()
|
|
paulo@89
|
2242 , xAxis = nv.models.axis()
|
|
paulo@89
|
2243 , yAxis = nv.models.axis()
|
|
paulo@89
|
2244 ;
|
|
paulo@89
|
2245
|
|
paulo@89
|
2246 var margin = {top: 15, right: 10, bottom: 50, left: 60}
|
|
paulo@89
|
2247 , width = null
|
|
paulo@89
|
2248 , height = null
|
|
paulo@89
|
2249 , color = nv.utils.getColor()
|
|
paulo@89
|
2250 , showXAxis = true
|
|
paulo@89
|
2251 , showYAxis = true
|
|
paulo@89
|
2252 , rightAlignYAxis = false
|
|
paulo@89
|
2253 , staggerLabels = false
|
|
paulo@89
|
2254 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
2255 , x
|
|
paulo@89
|
2256 , y
|
|
paulo@89
|
2257 , noData = "No Data Available."
|
|
paulo@89
|
2258 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'beforeUpdate', 'renderEnd')
|
|
paulo@89
|
2259 , duration = 250
|
|
paulo@89
|
2260 ;
|
|
paulo@89
|
2261
|
|
paulo@89
|
2262 xAxis
|
|
paulo@89
|
2263 .orient('bottom')
|
|
paulo@89
|
2264 .showMaxMin(false)
|
|
paulo@89
|
2265 .tickFormat(function(d) { return d })
|
|
paulo@89
|
2266 ;
|
|
paulo@89
|
2267 yAxis
|
|
paulo@89
|
2268 .orient((rightAlignYAxis) ? 'right' : 'left')
|
|
paulo@89
|
2269 .tickFormat(d3.format(',.1f'))
|
|
paulo@89
|
2270 ;
|
|
paulo@89
|
2271
|
|
paulo@89
|
2272 tooltip.duration(0);
|
|
paulo@89
|
2273
|
|
paulo@89
|
2274 //============================================================
|
|
paulo@89
|
2275 // Private Variables
|
|
paulo@89
|
2276 //------------------------------------------------------------
|
|
paulo@89
|
2277
|
|
paulo@89
|
2278 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
2279
|
|
paulo@89
|
2280 function chart(selection) {
|
|
paulo@89
|
2281 renderWatch.reset();
|
|
paulo@89
|
2282 renderWatch.models(boxplot);
|
|
paulo@89
|
2283 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
2284 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
2285
|
|
paulo@89
|
2286 selection.each(function(data) {
|
|
paulo@89
|
2287 var container = d3.select(this),
|
|
paulo@89
|
2288 that = this;
|
|
paulo@89
|
2289 nv.utils.initSVG(container);
|
|
paulo@89
|
2290 var availableWidth = (width || parseInt(container.style('width')) || 960)
|
|
paulo@89
|
2291 - margin.left - margin.right,
|
|
paulo@89
|
2292 availableHeight = (height || parseInt(container.style('height')) || 400)
|
|
paulo@89
|
2293 - margin.top - margin.bottom;
|
|
paulo@89
|
2294
|
|
paulo@89
|
2295 chart.update = function() {
|
|
paulo@89
|
2296 dispatch.beforeUpdate();
|
|
paulo@89
|
2297 container.transition().duration(duration).call(chart);
|
|
paulo@89
|
2298 };
|
|
paulo@89
|
2299 chart.container = this;
|
|
paulo@89
|
2300
|
|
paulo@89
|
2301 // Display No Data message if there's nothing to show. (quartiles required at minimum)
|
|
paulo@89
|
2302 if (!data || !data.length ||
|
|
paulo@89
|
2303 !data.filter(function(d) { return d.values.hasOwnProperty("Q1") && d.values.hasOwnProperty("Q2") && d.values.hasOwnProperty("Q3"); }).length) {
|
|
paulo@89
|
2304 var noDataText = container.selectAll('.nv-noData').data([noData]);
|
|
paulo@89
|
2305
|
|
paulo@89
|
2306 noDataText.enter().append('text')
|
|
paulo@89
|
2307 .attr('class', 'nvd3 nv-noData')
|
|
paulo@89
|
2308 .attr('dy', '-.7em')
|
|
paulo@89
|
2309 .style('text-anchor', 'middle');
|
|
paulo@89
|
2310
|
|
paulo@89
|
2311 noDataText
|
|
paulo@89
|
2312 .attr('x', margin.left + availableWidth / 2)
|
|
paulo@89
|
2313 .attr('y', margin.top + availableHeight / 2)
|
|
paulo@89
|
2314 .text(function(d) { return d });
|
|
paulo@89
|
2315
|
|
paulo@89
|
2316 return chart;
|
|
paulo@89
|
2317 } else {
|
|
paulo@89
|
2318 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
2319 }
|
|
paulo@89
|
2320
|
|
paulo@89
|
2321 // Setup Scales
|
|
paulo@89
|
2322 x = boxplot.xScale();
|
|
paulo@89
|
2323 y = boxplot.yScale().clamp(true);
|
|
paulo@89
|
2324
|
|
paulo@89
|
2325 // Setup containers and skeleton of chart
|
|
paulo@89
|
2326 var wrap = container.selectAll('g.nv-wrap.nv-boxPlotWithAxes').data([data]);
|
|
paulo@89
|
2327 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-boxPlotWithAxes').append('g');
|
|
paulo@89
|
2328 var defsEnter = gEnter.append('defs');
|
|
paulo@89
|
2329 var g = wrap.select('g');
|
|
paulo@89
|
2330
|
|
paulo@89
|
2331 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
2332 gEnter.append('g').attr('class', 'nv-y nv-axis')
|
|
paulo@89
|
2333 .append('g').attr('class', 'nv-zeroLine')
|
|
paulo@89
|
2334 .append('line');
|
|
paulo@89
|
2335
|
|
paulo@89
|
2336 gEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
2337
|
|
paulo@89
|
2338 g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
2339
|
|
paulo@89
|
2340 if (rightAlignYAxis) {
|
|
paulo@89
|
2341 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
2342 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
2343 }
|
|
paulo@89
|
2344
|
|
paulo@89
|
2345 // Main Chart Component(s)
|
|
paulo@89
|
2346 boxplot
|
|
paulo@89
|
2347 .width(availableWidth)
|
|
paulo@89
|
2348 .height(availableHeight);
|
|
paulo@89
|
2349
|
|
paulo@89
|
2350 var barsWrap = g.select('.nv-barsWrap')
|
|
paulo@89
|
2351 .datum(data.filter(function(d) { return !d.disabled }))
|
|
paulo@89
|
2352
|
|
paulo@89
|
2353 barsWrap.transition().call(boxplot);
|
|
paulo@89
|
2354
|
|
paulo@89
|
2355
|
|
paulo@89
|
2356 defsEnter.append('clipPath')
|
|
paulo@89
|
2357 .attr('id', 'nv-x-label-clip-' + boxplot.id())
|
|
paulo@89
|
2358 .append('rect');
|
|
paulo@89
|
2359
|
|
paulo@89
|
2360 g.select('#nv-x-label-clip-' + boxplot.id() + ' rect')
|
|
paulo@89
|
2361 .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
|
|
paulo@89
|
2362 .attr('height', 16)
|
|
paulo@89
|
2363 .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
|
|
paulo@89
|
2364
|
|
paulo@89
|
2365 // Setup Axes
|
|
paulo@89
|
2366 if (showXAxis) {
|
|
paulo@89
|
2367 xAxis
|
|
paulo@89
|
2368 .scale(x)
|
|
paulo@89
|
2369 .ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
2370 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
2371
|
|
paulo@89
|
2372 g.select('.nv-x.nv-axis').attr('transform', 'translate(0,' + y.range()[0] + ')');
|
|
paulo@89
|
2373 g.select('.nv-x.nv-axis').call(xAxis);
|
|
paulo@89
|
2374
|
|
paulo@89
|
2375 var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
|
|
paulo@89
|
2376 if (staggerLabels) {
|
|
paulo@89
|
2377 xTicks
|
|
paulo@89
|
2378 .selectAll('text')
|
|
paulo@89
|
2379 .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
|
|
paulo@89
|
2380 }
|
|
paulo@89
|
2381 }
|
|
paulo@89
|
2382
|
|
paulo@89
|
2383 if (showYAxis) {
|
|
paulo@89
|
2384 yAxis
|
|
paulo@89
|
2385 .scale(y)
|
|
paulo@89
|
2386 .ticks( Math.floor(availableHeight/36) ) // can't use nv.utils.calcTicksY with Object data
|
|
paulo@89
|
2387 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
2388
|
|
paulo@89
|
2389 g.select('.nv-y.nv-axis').call(yAxis);
|
|
paulo@89
|
2390 }
|
|
paulo@89
|
2391
|
|
paulo@89
|
2392 // Zero line
|
|
paulo@89
|
2393 g.select(".nv-zeroLine line")
|
|
paulo@89
|
2394 .attr("x1",0)
|
|
paulo@89
|
2395 .attr("x2",availableWidth)
|
|
paulo@89
|
2396 .attr("y1", y(0))
|
|
paulo@89
|
2397 .attr("y2", y(0))
|
|
paulo@89
|
2398 ;
|
|
paulo@89
|
2399
|
|
paulo@89
|
2400 //============================================================
|
|
paulo@89
|
2401 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
2402 //------------------------------------------------------------
|
|
paulo@89
|
2403 });
|
|
paulo@89
|
2404
|
|
paulo@89
|
2405 renderWatch.renderEnd('nv-boxplot chart immediate');
|
|
paulo@89
|
2406 return chart;
|
|
paulo@89
|
2407 }
|
|
paulo@89
|
2408
|
|
paulo@89
|
2409 //============================================================
|
|
paulo@89
|
2410 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
2411 //------------------------------------------------------------
|
|
paulo@89
|
2412
|
|
paulo@89
|
2413 boxplot.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
2414 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
2415 });
|
|
paulo@89
|
2416
|
|
paulo@89
|
2417 boxplot.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
2418 tooltip.data(evt).hidden(true);
|
|
paulo@89
|
2419 });
|
|
paulo@89
|
2420
|
|
paulo@89
|
2421 boxplot.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
2422 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
2423 });
|
|
paulo@89
|
2424
|
|
paulo@89
|
2425 //============================================================
|
|
paulo@89
|
2426 // Expose Public Variables
|
|
paulo@89
|
2427 //------------------------------------------------------------
|
|
paulo@89
|
2428
|
|
paulo@89
|
2429 chart.dispatch = dispatch;
|
|
paulo@89
|
2430 chart.boxplot = boxplot;
|
|
paulo@89
|
2431 chart.xAxis = xAxis;
|
|
paulo@89
|
2432 chart.yAxis = yAxis;
|
|
paulo@89
|
2433 chart.tooltip = tooltip;
|
|
paulo@89
|
2434
|
|
paulo@89
|
2435 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
2436
|
|
paulo@89
|
2437 chart._options = Object.create({}, {
|
|
paulo@89
|
2438 // simple options, just get/set the necessary values
|
|
paulo@89
|
2439 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
2440 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
2441 staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
|
|
paulo@89
|
2442 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
2443 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
2444 tooltips: {get: function(){return tooltips;}, set: function(_){tooltips=_;}},
|
|
paulo@89
|
2445 tooltipContent: {get: function(){return tooltip;}, set: function(_){tooltip=_;}},
|
|
paulo@89
|
2446 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
2447
|
|
paulo@89
|
2448 // options that require extra logic in the setter
|
|
paulo@89
|
2449 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
2450 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
2451 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
2452 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
2453 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
2454 }},
|
|
paulo@89
|
2455 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
2456 duration = _;
|
|
paulo@89
|
2457 renderWatch.reset(duration);
|
|
paulo@89
|
2458 boxplot.duration(duration);
|
|
paulo@89
|
2459 xAxis.duration(duration);
|
|
paulo@89
|
2460 yAxis.duration(duration);
|
|
paulo@89
|
2461 }},
|
|
paulo@89
|
2462 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
2463 color = nv.utils.getColor(_);
|
|
paulo@89
|
2464 boxplot.color(color);
|
|
paulo@89
|
2465 }},
|
|
paulo@89
|
2466 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
2467 rightAlignYAxis = _;
|
|
paulo@89
|
2468 yAxis.orient( (_) ? 'right' : 'left');
|
|
paulo@89
|
2469 }}
|
|
paulo@89
|
2470 });
|
|
paulo@89
|
2471
|
|
paulo@89
|
2472 nv.utils.inheritOptions(chart, boxplot);
|
|
paulo@89
|
2473 nv.utils.initOptions(chart);
|
|
paulo@89
|
2474
|
|
paulo@89
|
2475 return chart;
|
|
paulo@89
|
2476 }
|
|
paulo@89
|
2477 // Chart design based on the recommendations of Stephen Few. Implementation
|
|
paulo@89
|
2478 // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
|
|
paulo@89
|
2479 // http://projects.instantcognition.com/protovis/bulletchart/
|
|
paulo@89
|
2480
|
|
paulo@89
|
2481 nv.models.bullet = function() {
|
|
paulo@89
|
2482 "use strict";
|
|
paulo@89
|
2483
|
|
paulo@89
|
2484 //============================================================
|
|
paulo@89
|
2485 // Public Variables with Default Settings
|
|
paulo@89
|
2486 //------------------------------------------------------------
|
|
paulo@89
|
2487
|
|
paulo@89
|
2488 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
2489 , orient = 'left' // TODO top & bottom
|
|
paulo@89
|
2490 , reverse = false
|
|
paulo@89
|
2491 , ranges = function(d) { return d.ranges }
|
|
paulo@89
|
2492 , markers = function(d) { return d.markers ? d.markers : [0] }
|
|
paulo@89
|
2493 , measures = function(d) { return d.measures }
|
|
paulo@89
|
2494 , rangeLabels = function(d) { return d.rangeLabels ? d.rangeLabels : [] }
|
|
paulo@89
|
2495 , markerLabels = function(d) { return d.markerLabels ? d.markerLabels : [] }
|
|
paulo@89
|
2496 , measureLabels = function(d) { return d.measureLabels ? d.measureLabels : [] }
|
|
paulo@89
|
2497 , forceX = [0] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
|
|
paulo@89
|
2498 , width = 380
|
|
paulo@89
|
2499 , height = 30
|
|
paulo@89
|
2500 , container = null
|
|
paulo@89
|
2501 , tickFormat = null
|
|
paulo@89
|
2502 , color = nv.utils.getColor(['#1f77b4'])
|
|
paulo@89
|
2503 , dispatch = d3.dispatch('elementMouseover', 'elementMouseout', 'elementMousemove')
|
|
paulo@89
|
2504 ;
|
|
paulo@89
|
2505
|
|
paulo@89
|
2506 function chart(selection) {
|
|
paulo@89
|
2507 selection.each(function(d, i) {
|
|
paulo@89
|
2508 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
2509 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
2510
|
|
paulo@89
|
2511 container = d3.select(this);
|
|
paulo@89
|
2512 nv.utils.initSVG(container);
|
|
paulo@89
|
2513
|
|
paulo@89
|
2514 var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
|
|
paulo@89
|
2515 markerz = markers.call(this, d, i).slice().sort(d3.descending),
|
|
paulo@89
|
2516 measurez = measures.call(this, d, i).slice().sort(d3.descending),
|
|
paulo@89
|
2517 rangeLabelz = rangeLabels.call(this, d, i).slice(),
|
|
paulo@89
|
2518 markerLabelz = markerLabels.call(this, d, i).slice(),
|
|
paulo@89
|
2519 measureLabelz = measureLabels.call(this, d, i).slice();
|
|
paulo@89
|
2520
|
|
paulo@89
|
2521 // Setup Scales
|
|
paulo@89
|
2522 // Compute the new x-scale.
|
|
paulo@89
|
2523 var x1 = d3.scale.linear()
|
|
paulo@89
|
2524 .domain( d3.extent(d3.merge([forceX, rangez])) )
|
|
paulo@89
|
2525 .range(reverse ? [availableWidth, 0] : [0, availableWidth]);
|
|
paulo@89
|
2526
|
|
paulo@89
|
2527 // Retrieve the old x-scale, if this is an update.
|
|
paulo@89
|
2528 var x0 = this.__chart__ || d3.scale.linear()
|
|
paulo@89
|
2529 .domain([0, Infinity])
|
|
paulo@89
|
2530 .range(x1.range());
|
|
paulo@89
|
2531
|
|
paulo@89
|
2532 // Stash the new scale.
|
|
paulo@89
|
2533 this.__chart__ = x1;
|
|
paulo@89
|
2534
|
|
paulo@89
|
2535 var rangeMin = d3.min(rangez), //rangez[2]
|
|
paulo@89
|
2536 rangeMax = d3.max(rangez), //rangez[0]
|
|
paulo@89
|
2537 rangeAvg = rangez[1];
|
|
paulo@89
|
2538
|
|
paulo@89
|
2539 // Setup containers and skeleton of chart
|
|
paulo@89
|
2540 var wrap = container.selectAll('g.nv-wrap.nv-bullet').data([d]);
|
|
paulo@89
|
2541 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bullet');
|
|
paulo@89
|
2542 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
2543 var g = wrap.select('g');
|
|
paulo@89
|
2544
|
|
paulo@89
|
2545 gEnter.append('rect').attr('class', 'nv-range nv-rangeMax');
|
|
paulo@89
|
2546 gEnter.append('rect').attr('class', 'nv-range nv-rangeAvg');
|
|
paulo@89
|
2547 gEnter.append('rect').attr('class', 'nv-range nv-rangeMin');
|
|
paulo@89
|
2548 gEnter.append('rect').attr('class', 'nv-measure');
|
|
paulo@89
|
2549
|
|
paulo@89
|
2550 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
2551
|
|
paulo@89
|
2552 var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
|
|
paulo@89
|
2553 w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
|
|
paulo@89
|
2554 var xp0 = function(d) { return d < 0 ? x0(d) : x0(0) },
|
|
paulo@89
|
2555 xp1 = function(d) { return d < 0 ? x1(d) : x1(0) };
|
|
paulo@89
|
2556
|
|
paulo@89
|
2557 g.select('rect.nv-rangeMax')
|
|
paulo@89
|
2558 .attr('height', availableHeight)
|
|
paulo@89
|
2559 .attr('width', w1(rangeMax > 0 ? rangeMax : rangeMin))
|
|
paulo@89
|
2560 .attr('x', xp1(rangeMax > 0 ? rangeMax : rangeMin))
|
|
paulo@89
|
2561 .datum(rangeMax > 0 ? rangeMax : rangeMin)
|
|
paulo@89
|
2562
|
|
paulo@89
|
2563 g.select('rect.nv-rangeAvg')
|
|
paulo@89
|
2564 .attr('height', availableHeight)
|
|
paulo@89
|
2565 .attr('width', w1(rangeAvg))
|
|
paulo@89
|
2566 .attr('x', xp1(rangeAvg))
|
|
paulo@89
|
2567 .datum(rangeAvg)
|
|
paulo@89
|
2568
|
|
paulo@89
|
2569 g.select('rect.nv-rangeMin')
|
|
paulo@89
|
2570 .attr('height', availableHeight)
|
|
paulo@89
|
2571 .attr('width', w1(rangeMax))
|
|
paulo@89
|
2572 .attr('x', xp1(rangeMax))
|
|
paulo@89
|
2573 .attr('width', w1(rangeMax > 0 ? rangeMin : rangeMax))
|
|
paulo@89
|
2574 .attr('x', xp1(rangeMax > 0 ? rangeMin : rangeMax))
|
|
paulo@89
|
2575 .datum(rangeMax > 0 ? rangeMin : rangeMax)
|
|
paulo@89
|
2576
|
|
paulo@89
|
2577 g.select('rect.nv-measure')
|
|
paulo@89
|
2578 .style('fill', color)
|
|
paulo@89
|
2579 .attr('height', availableHeight / 3)
|
|
paulo@89
|
2580 .attr('y', availableHeight / 3)
|
|
paulo@89
|
2581 .attr('width', measurez < 0 ?
|
|
paulo@89
|
2582 x1(0) - x1(measurez[0])
|
|
paulo@89
|
2583 : x1(measurez[0]) - x1(0))
|
|
paulo@89
|
2584 .attr('x', xp1(measurez))
|
|
paulo@89
|
2585 .on('mouseover', function() {
|
|
paulo@89
|
2586 dispatch.elementMouseover({
|
|
paulo@89
|
2587 value: measurez[0],
|
|
paulo@89
|
2588 label: measureLabelz[0] || 'Current',
|
|
paulo@89
|
2589 color: d3.select(this).style("fill")
|
|
paulo@89
|
2590 })
|
|
paulo@89
|
2591 })
|
|
paulo@89
|
2592 .on('mousemove', function() {
|
|
paulo@89
|
2593 dispatch.elementMousemove({
|
|
paulo@89
|
2594 value: measurez[0],
|
|
paulo@89
|
2595 label: measureLabelz[0] || 'Current',
|
|
paulo@89
|
2596 color: d3.select(this).style("fill")
|
|
paulo@89
|
2597 })
|
|
paulo@89
|
2598 })
|
|
paulo@89
|
2599 .on('mouseout', function() {
|
|
paulo@89
|
2600 dispatch.elementMouseout({
|
|
paulo@89
|
2601 value: measurez[0],
|
|
paulo@89
|
2602 label: measureLabelz[0] || 'Current',
|
|
paulo@89
|
2603 color: d3.select(this).style("fill")
|
|
paulo@89
|
2604 })
|
|
paulo@89
|
2605 });
|
|
paulo@89
|
2606
|
|
paulo@89
|
2607 var h3 = availableHeight / 6;
|
|
paulo@89
|
2608
|
|
paulo@89
|
2609 var markerData = markerz.map( function(marker, index) {
|
|
paulo@89
|
2610 return {value: marker, label: markerLabelz[index]}
|
|
paulo@89
|
2611 });
|
|
paulo@89
|
2612 gEnter
|
|
paulo@89
|
2613 .selectAll("path.nv-markerTriangle")
|
|
paulo@89
|
2614 .data(markerData)
|
|
paulo@89
|
2615 .enter()
|
|
paulo@89
|
2616 .append('path')
|
|
paulo@89
|
2617 .attr('class', 'nv-markerTriangle')
|
|
paulo@89
|
2618 .attr('transform', function(d) { return 'translate(' + x1(d.value) + ',' + (availableHeight / 2) + ')' })
|
|
paulo@89
|
2619 .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z')
|
|
paulo@89
|
2620 .on('mouseover', function(d) {
|
|
paulo@89
|
2621 dispatch.elementMouseover({
|
|
paulo@89
|
2622 value: d.value,
|
|
paulo@89
|
2623 label: d.label || 'Previous',
|
|
paulo@89
|
2624 color: d3.select(this).style("fill"),
|
|
paulo@89
|
2625 pos: [x1(d.value), availableHeight/2]
|
|
paulo@89
|
2626 })
|
|
paulo@89
|
2627
|
|
paulo@89
|
2628 })
|
|
paulo@89
|
2629 .on('mousemove', function(d) {
|
|
paulo@89
|
2630 dispatch.elementMousemove({
|
|
paulo@89
|
2631 value: d.value,
|
|
paulo@89
|
2632 label: d.label || 'Previous',
|
|
paulo@89
|
2633 color: d3.select(this).style("fill")
|
|
paulo@89
|
2634 })
|
|
paulo@89
|
2635 })
|
|
paulo@89
|
2636 .on('mouseout', function(d, i) {
|
|
paulo@89
|
2637 dispatch.elementMouseout({
|
|
paulo@89
|
2638 value: d.value,
|
|
paulo@89
|
2639 label: d.label || 'Previous',
|
|
paulo@89
|
2640 color: d3.select(this).style("fill")
|
|
paulo@89
|
2641 })
|
|
paulo@89
|
2642 });
|
|
paulo@89
|
2643
|
|
paulo@89
|
2644 wrap.selectAll('.nv-range')
|
|
paulo@89
|
2645 .on('mouseover', function(d,i) {
|
|
paulo@89
|
2646 var label = rangeLabelz[i] || (!i ? "Maximum" : i == 1 ? "Mean" : "Minimum");
|
|
paulo@89
|
2647 dispatch.elementMouseover({
|
|
paulo@89
|
2648 value: d,
|
|
paulo@89
|
2649 label: label,
|
|
paulo@89
|
2650 color: d3.select(this).style("fill")
|
|
paulo@89
|
2651 })
|
|
paulo@89
|
2652 })
|
|
paulo@89
|
2653 .on('mousemove', function() {
|
|
paulo@89
|
2654 dispatch.elementMousemove({
|
|
paulo@89
|
2655 value: measurez[0],
|
|
paulo@89
|
2656 label: measureLabelz[0] || 'Previous',
|
|
paulo@89
|
2657 color: d3.select(this).style("fill")
|
|
paulo@89
|
2658 })
|
|
paulo@89
|
2659 })
|
|
paulo@89
|
2660 .on('mouseout', function(d,i) {
|
|
paulo@89
|
2661 var label = rangeLabelz[i] || (!i ? "Maximum" : i == 1 ? "Mean" : "Minimum");
|
|
paulo@89
|
2662 dispatch.elementMouseout({
|
|
paulo@89
|
2663 value: d,
|
|
paulo@89
|
2664 label: label,
|
|
paulo@89
|
2665 color: d3.select(this).style("fill")
|
|
paulo@89
|
2666 })
|
|
paulo@89
|
2667 });
|
|
paulo@89
|
2668 });
|
|
paulo@89
|
2669
|
|
paulo@89
|
2670 return chart;
|
|
paulo@89
|
2671 }
|
|
paulo@89
|
2672
|
|
paulo@89
|
2673 //============================================================
|
|
paulo@89
|
2674 // Expose Public Variables
|
|
paulo@89
|
2675 //------------------------------------------------------------
|
|
paulo@89
|
2676
|
|
paulo@89
|
2677 chart.dispatch = dispatch;
|
|
paulo@89
|
2678 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
2679
|
|
paulo@89
|
2680 chart._options = Object.create({}, {
|
|
paulo@89
|
2681 // simple options, just get/set the necessary values
|
|
paulo@89
|
2682 ranges: {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)
|
|
paulo@89
|
2683 markers: {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)
|
|
paulo@89
|
2684 measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)
|
|
paulo@89
|
2685 forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},
|
|
paulo@89
|
2686 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
2687 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
2688 tickFormat: {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},
|
|
paulo@89
|
2689
|
|
paulo@89
|
2690 // options that require extra logic in the setter
|
|
paulo@89
|
2691 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
2692 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
2693 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
2694 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
2695 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
2696 }},
|
|
paulo@89
|
2697 orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom
|
|
paulo@89
|
2698 orient = _;
|
|
paulo@89
|
2699 reverse = orient == 'right' || orient == 'bottom';
|
|
paulo@89
|
2700 }},
|
|
paulo@89
|
2701 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
2702 color = nv.utils.getColor(_);
|
|
paulo@89
|
2703 }}
|
|
paulo@89
|
2704 });
|
|
paulo@89
|
2705
|
|
paulo@89
|
2706 nv.utils.initOptions(chart);
|
|
paulo@89
|
2707 return chart;
|
|
paulo@89
|
2708 };
|
|
paulo@89
|
2709
|
|
paulo@89
|
2710
|
|
paulo@89
|
2711
|
|
paulo@89
|
2712 // Chart design based on the recommendations of Stephen Few. Implementation
|
|
paulo@89
|
2713 // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
|
|
paulo@89
|
2714 // http://projects.instantcognition.com/protovis/bulletchart/
|
|
paulo@89
|
2715 nv.models.bulletChart = function() {
|
|
paulo@89
|
2716 "use strict";
|
|
paulo@89
|
2717
|
|
paulo@89
|
2718 //============================================================
|
|
paulo@89
|
2719 // Public Variables with Default Settings
|
|
paulo@89
|
2720 //------------------------------------------------------------
|
|
paulo@89
|
2721
|
|
paulo@89
|
2722 var bullet = nv.models.bullet();
|
|
paulo@89
|
2723 var tooltip = nv.models.tooltip();
|
|
paulo@89
|
2724
|
|
paulo@89
|
2725 var orient = 'left' // TODO top & bottom
|
|
paulo@89
|
2726 , reverse = false
|
|
paulo@89
|
2727 , margin = {top: 5, right: 40, bottom: 20, left: 120}
|
|
paulo@89
|
2728 , ranges = function(d) { return d.ranges }
|
|
paulo@89
|
2729 , markers = function(d) { return d.markers ? d.markers : [0] }
|
|
paulo@89
|
2730 , measures = function(d) { return d.measures }
|
|
paulo@89
|
2731 , width = null
|
|
paulo@89
|
2732 , height = 55
|
|
paulo@89
|
2733 , tickFormat = null
|
|
paulo@89
|
2734 , ticks = null
|
|
paulo@89
|
2735 , noData = null
|
|
paulo@89
|
2736 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
|
|
paulo@89
|
2737 ;
|
|
paulo@89
|
2738
|
|
paulo@89
|
2739 tooltip.duration(0).headerEnabled(false);
|
|
paulo@89
|
2740
|
|
paulo@89
|
2741 function chart(selection) {
|
|
paulo@89
|
2742 selection.each(function(d, i) {
|
|
paulo@89
|
2743 var container = d3.select(this);
|
|
paulo@89
|
2744 nv.utils.initSVG(container);
|
|
paulo@89
|
2745
|
|
paulo@89
|
2746 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
2747 availableHeight = height - margin.top - margin.bottom,
|
|
paulo@89
|
2748 that = this;
|
|
paulo@89
|
2749
|
|
paulo@89
|
2750 chart.update = function() { chart(selection) };
|
|
paulo@89
|
2751 chart.container = this;
|
|
paulo@89
|
2752
|
|
paulo@89
|
2753 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
2754 if (!d || !ranges.call(this, d, i)) {
|
|
paulo@89
|
2755 nv.utils.noData(chart, container)
|
|
paulo@89
|
2756 return chart;
|
|
paulo@89
|
2757 } else {
|
|
paulo@89
|
2758 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
2759 }
|
|
paulo@89
|
2760
|
|
paulo@89
|
2761 var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
|
|
paulo@89
|
2762 markerz = markers.call(this, d, i).slice().sort(d3.descending),
|
|
paulo@89
|
2763 measurez = measures.call(this, d, i).slice().sort(d3.descending);
|
|
paulo@89
|
2764
|
|
paulo@89
|
2765 // Setup containers and skeleton of chart
|
|
paulo@89
|
2766 var wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d]);
|
|
paulo@89
|
2767 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart');
|
|
paulo@89
|
2768 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
2769 var g = wrap.select('g');
|
|
paulo@89
|
2770
|
|
paulo@89
|
2771 gEnter.append('g').attr('class', 'nv-bulletWrap');
|
|
paulo@89
|
2772 gEnter.append('g').attr('class', 'nv-titles');
|
|
paulo@89
|
2773
|
|
paulo@89
|
2774 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
2775
|
|
paulo@89
|
2776 // Compute the new x-scale.
|
|
paulo@89
|
2777 var x1 = d3.scale.linear()
|
|
paulo@89
|
2778 .domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) // TODO: need to allow forceX and forceY, and xDomain, yDomain
|
|
paulo@89
|
2779 .range(reverse ? [availableWidth, 0] : [0, availableWidth]);
|
|
paulo@89
|
2780
|
|
paulo@89
|
2781 // Retrieve the old x-scale, if this is an update.
|
|
paulo@89
|
2782 var x0 = this.__chart__ || d3.scale.linear()
|
|
paulo@89
|
2783 .domain([0, Infinity])
|
|
paulo@89
|
2784 .range(x1.range());
|
|
paulo@89
|
2785
|
|
paulo@89
|
2786 // Stash the new scale.
|
|
paulo@89
|
2787 this.__chart__ = x1;
|
|
paulo@89
|
2788
|
|
paulo@89
|
2789 var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
|
|
paulo@89
|
2790 w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
|
|
paulo@89
|
2791
|
|
paulo@89
|
2792 var title = gEnter.select('.nv-titles').append('g')
|
|
paulo@89
|
2793 .attr('text-anchor', 'end')
|
|
paulo@89
|
2794 .attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')');
|
|
paulo@89
|
2795 title.append('text')
|
|
paulo@89
|
2796 .attr('class', 'nv-title')
|
|
paulo@89
|
2797 .text(function(d) { return d.title; });
|
|
paulo@89
|
2798
|
|
paulo@89
|
2799 title.append('text')
|
|
paulo@89
|
2800 .attr('class', 'nv-subtitle')
|
|
paulo@89
|
2801 .attr('dy', '1em')
|
|
paulo@89
|
2802 .text(function(d) { return d.subtitle; });
|
|
paulo@89
|
2803
|
|
paulo@89
|
2804 bullet
|
|
paulo@89
|
2805 .width(availableWidth)
|
|
paulo@89
|
2806 .height(availableHeight)
|
|
paulo@89
|
2807
|
|
paulo@89
|
2808 var bulletWrap = g.select('.nv-bulletWrap');
|
|
paulo@89
|
2809 d3.transition(bulletWrap).call(bullet);
|
|
paulo@89
|
2810
|
|
paulo@89
|
2811 // Compute the tick format.
|
|
paulo@89
|
2812 var format = tickFormat || x1.tickFormat( availableWidth / 100 );
|
|
paulo@89
|
2813
|
|
paulo@89
|
2814 // Update the tick groups.
|
|
paulo@89
|
2815 var tick = g.selectAll('g.nv-tick')
|
|
paulo@89
|
2816 .data(x1.ticks( ticks ? ticks : (availableWidth / 50) ), function(d) {
|
|
paulo@89
|
2817 return this.textContent || format(d);
|
|
paulo@89
|
2818 });
|
|
paulo@89
|
2819
|
|
paulo@89
|
2820 // Initialize the ticks with the old scale, x0.
|
|
paulo@89
|
2821 var tickEnter = tick.enter().append('g')
|
|
paulo@89
|
2822 .attr('class', 'nv-tick')
|
|
paulo@89
|
2823 .attr('transform', function(d) { return 'translate(' + x0(d) + ',0)' })
|
|
paulo@89
|
2824 .style('opacity', 1e-6);
|
|
paulo@89
|
2825
|
|
paulo@89
|
2826 tickEnter.append('line')
|
|
paulo@89
|
2827 .attr('y1', availableHeight)
|
|
paulo@89
|
2828 .attr('y2', availableHeight * 7 / 6);
|
|
paulo@89
|
2829
|
|
paulo@89
|
2830 tickEnter.append('text')
|
|
paulo@89
|
2831 .attr('text-anchor', 'middle')
|
|
paulo@89
|
2832 .attr('dy', '1em')
|
|
paulo@89
|
2833 .attr('y', availableHeight * 7 / 6)
|
|
paulo@89
|
2834 .text(format);
|
|
paulo@89
|
2835
|
|
paulo@89
|
2836 // Transition the updating ticks to the new scale, x1.
|
|
paulo@89
|
2837 var tickUpdate = d3.transition(tick)
|
|
paulo@89
|
2838 .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
|
|
paulo@89
|
2839 .style('opacity', 1);
|
|
paulo@89
|
2840
|
|
paulo@89
|
2841 tickUpdate.select('line')
|
|
paulo@89
|
2842 .attr('y1', availableHeight)
|
|
paulo@89
|
2843 .attr('y2', availableHeight * 7 / 6);
|
|
paulo@89
|
2844
|
|
paulo@89
|
2845 tickUpdate.select('text')
|
|
paulo@89
|
2846 .attr('y', availableHeight * 7 / 6);
|
|
paulo@89
|
2847
|
|
paulo@89
|
2848 // Transition the exiting ticks to the new scale, x1.
|
|
paulo@89
|
2849 d3.transition(tick.exit())
|
|
paulo@89
|
2850 .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
|
|
paulo@89
|
2851 .style('opacity', 1e-6)
|
|
paulo@89
|
2852 .remove();
|
|
paulo@89
|
2853 });
|
|
paulo@89
|
2854
|
|
paulo@89
|
2855 d3.timer.flush();
|
|
paulo@89
|
2856 return chart;
|
|
paulo@89
|
2857 }
|
|
paulo@89
|
2858
|
|
paulo@89
|
2859 //============================================================
|
|
paulo@89
|
2860 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
2861 //------------------------------------------------------------
|
|
paulo@89
|
2862
|
|
paulo@89
|
2863 bullet.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
2864 evt['series'] = {
|
|
paulo@89
|
2865 key: evt.label,
|
|
paulo@89
|
2866 value: evt.value,
|
|
paulo@89
|
2867 color: evt.color
|
|
paulo@89
|
2868 };
|
|
paulo@89
|
2869 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
2870 });
|
|
paulo@89
|
2871
|
|
paulo@89
|
2872 bullet.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
2873 tooltip.hidden(true);
|
|
paulo@89
|
2874 });
|
|
paulo@89
|
2875
|
|
paulo@89
|
2876 bullet.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
2877 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
2878 });
|
|
paulo@89
|
2879
|
|
paulo@89
|
2880 //============================================================
|
|
paulo@89
|
2881 // Expose Public Variables
|
|
paulo@89
|
2882 //------------------------------------------------------------
|
|
paulo@89
|
2883
|
|
paulo@89
|
2884 chart.bullet = bullet;
|
|
paulo@89
|
2885 chart.dispatch = dispatch;
|
|
paulo@89
|
2886 chart.tooltip = tooltip;
|
|
paulo@89
|
2887
|
|
paulo@89
|
2888 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
2889
|
|
paulo@89
|
2890 chart._options = Object.create({}, {
|
|
paulo@89
|
2891 // simple options, just get/set the necessary values
|
|
paulo@89
|
2892 ranges: {get: function(){return ranges;}, set: function(_){ranges=_;}}, // ranges (bad, satisfactory, good)
|
|
paulo@89
|
2893 markers: {get: function(){return markers;}, set: function(_){markers=_;}}, // markers (previous, goal)
|
|
paulo@89
|
2894 measures: {get: function(){return measures;}, set: function(_){measures=_;}}, // measures (actual, forecast)
|
|
paulo@89
|
2895 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
2896 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
2897 tickFormat: {get: function(){return tickFormat;}, set: function(_){tickFormat=_;}},
|
|
paulo@89
|
2898 ticks: {get: function(){return ticks;}, set: function(_){ticks=_;}},
|
|
paulo@89
|
2899 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
2900
|
|
paulo@89
|
2901 // deprecated options
|
|
paulo@89
|
2902 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
2903 // deprecated after 1.7.1
|
|
paulo@89
|
2904 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
2905 tooltip.enabled(!!_);
|
|
paulo@89
|
2906 }},
|
|
paulo@89
|
2907 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
2908 // deprecated after 1.7.1
|
|
paulo@89
|
2909 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
2910 tooltip.contentGenerator(_);
|
|
paulo@89
|
2911 }},
|
|
paulo@89
|
2912
|
|
paulo@89
|
2913 // options that require extra logic in the setter
|
|
paulo@89
|
2914 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
2915 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
2916 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
2917 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
2918 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
2919 }},
|
|
paulo@89
|
2920 orient: {get: function(){return orient;}, set: function(_){ // left, right, top, bottom
|
|
paulo@89
|
2921 orient = _;
|
|
paulo@89
|
2922 reverse = orient == 'right' || orient == 'bottom';
|
|
paulo@89
|
2923 }}
|
|
paulo@89
|
2924 });
|
|
paulo@89
|
2925
|
|
paulo@89
|
2926 nv.utils.inheritOptions(chart, bullet);
|
|
paulo@89
|
2927 nv.utils.initOptions(chart);
|
|
paulo@89
|
2928
|
|
paulo@89
|
2929 return chart;
|
|
paulo@89
|
2930 };
|
|
paulo@89
|
2931
|
|
paulo@89
|
2932
|
|
paulo@89
|
2933
|
|
paulo@89
|
2934 nv.models.candlestickBar = function() {
|
|
paulo@89
|
2935 "use strict";
|
|
paulo@89
|
2936
|
|
paulo@89
|
2937 //============================================================
|
|
paulo@89
|
2938 // Public Variables with Default Settings
|
|
paulo@89
|
2939 //------------------------------------------------------------
|
|
paulo@89
|
2940
|
|
paulo@89
|
2941 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
2942 , width = null
|
|
paulo@89
|
2943 , height = null
|
|
paulo@89
|
2944 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
2945 , container
|
|
paulo@89
|
2946 , x = d3.scale.linear()
|
|
paulo@89
|
2947 , y = d3.scale.linear()
|
|
paulo@89
|
2948 , getX = function(d) { return d.x }
|
|
paulo@89
|
2949 , getY = function(d) { return d.y }
|
|
paulo@89
|
2950 , getOpen = function(d) { return d.open }
|
|
paulo@89
|
2951 , getClose = function(d) { return d.close }
|
|
paulo@89
|
2952 , getHigh = function(d) { return d.high }
|
|
paulo@89
|
2953 , getLow = function(d) { return d.low }
|
|
paulo@89
|
2954 , forceX = []
|
|
paulo@89
|
2955 , forceY = []
|
|
paulo@89
|
2956 , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
|
|
paulo@89
|
2957 , clipEdge = true
|
|
paulo@89
|
2958 , color = nv.utils.defaultColor()
|
|
paulo@89
|
2959 , interactive = false
|
|
paulo@89
|
2960 , xDomain
|
|
paulo@89
|
2961 , yDomain
|
|
paulo@89
|
2962 , xRange
|
|
paulo@89
|
2963 , yRange
|
|
paulo@89
|
2964 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')
|
|
paulo@89
|
2965 ;
|
|
paulo@89
|
2966
|
|
paulo@89
|
2967 //============================================================
|
|
paulo@89
|
2968 // Private Variables
|
|
paulo@89
|
2969 //------------------------------------------------------------
|
|
paulo@89
|
2970
|
|
paulo@89
|
2971 function chart(selection) {
|
|
paulo@89
|
2972 selection.each(function(data) {
|
|
paulo@89
|
2973 container = d3.select(this);
|
|
paulo@89
|
2974 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
2975 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
2976
|
|
paulo@89
|
2977 nv.utils.initSVG(container);
|
|
paulo@89
|
2978
|
|
paulo@89
|
2979 // Width of the candlestick bars.
|
|
paulo@89
|
2980 var barWidth = (availableWidth / data[0].values.length) * .45;
|
|
paulo@89
|
2981
|
|
paulo@89
|
2982 // Setup Scales
|
|
paulo@89
|
2983 x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
|
|
paulo@89
|
2984
|
|
paulo@89
|
2985 if (padData)
|
|
paulo@89
|
2986 x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
|
paulo@89
|
2987 else
|
|
paulo@89
|
2988 x.range(xRange || [5 + barWidth / 2, availableWidth - barWidth / 2 - 5]);
|
|
paulo@89
|
2989
|
|
paulo@89
|
2990 y.domain(yDomain || [
|
|
paulo@89
|
2991 d3.min(data[0].values.map(getLow).concat(forceY)),
|
|
paulo@89
|
2992 d3.max(data[0].values.map(getHigh).concat(forceY))
|
|
paulo@89
|
2993 ]
|
|
paulo@89
|
2994 ).range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
2995
|
|
paulo@89
|
2996 // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
|
paulo@89
|
2997 if (x.domain()[0] === x.domain()[1])
|
|
paulo@89
|
2998 x.domain()[0] ?
|
|
paulo@89
|
2999 x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
|
paulo@89
|
3000 : x.domain([-1,1]);
|
|
paulo@89
|
3001
|
|
paulo@89
|
3002 if (y.domain()[0] === y.domain()[1])
|
|
paulo@89
|
3003 y.domain()[0] ?
|
|
paulo@89
|
3004 y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
|
|
paulo@89
|
3005 : y.domain([-1,1]);
|
|
paulo@89
|
3006
|
|
paulo@89
|
3007 // Setup containers and skeleton of chart
|
|
paulo@89
|
3008 var wrap = d3.select(this).selectAll('g.nv-wrap.nv-candlestickBar').data([data[0].values]);
|
|
paulo@89
|
3009 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-candlestickBar');
|
|
paulo@89
|
3010 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
3011 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
3012 var g = wrap.select('g');
|
|
paulo@89
|
3013
|
|
paulo@89
|
3014 gEnter.append('g').attr('class', 'nv-ticks');
|
|
paulo@89
|
3015
|
|
paulo@89
|
3016 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
3017
|
|
paulo@89
|
3018 container
|
|
paulo@89
|
3019 .on('click', function(d,i) {
|
|
paulo@89
|
3020 dispatch.chartClick({
|
|
paulo@89
|
3021 data: d,
|
|
paulo@89
|
3022 index: i,
|
|
paulo@89
|
3023 pos: d3.event,
|
|
paulo@89
|
3024 id: id
|
|
paulo@89
|
3025 });
|
|
paulo@89
|
3026 });
|
|
paulo@89
|
3027
|
|
paulo@89
|
3028 defsEnter.append('clipPath')
|
|
paulo@89
|
3029 .attr('id', 'nv-chart-clip-path-' + id)
|
|
paulo@89
|
3030 .append('rect');
|
|
paulo@89
|
3031
|
|
paulo@89
|
3032 wrap.select('#nv-chart-clip-path-' + id + ' rect')
|
|
paulo@89
|
3033 .attr('width', availableWidth)
|
|
paulo@89
|
3034 .attr('height', availableHeight);
|
|
paulo@89
|
3035
|
|
paulo@89
|
3036 g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
|
|
paulo@89
|
3037
|
|
paulo@89
|
3038 var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')
|
|
paulo@89
|
3039 .data(function(d) { return d });
|
|
paulo@89
|
3040 ticks.exit().remove();
|
|
paulo@89
|
3041
|
|
paulo@89
|
3042 // The colors are currently controlled by CSS.
|
|
paulo@89
|
3043 var tickGroups = ticks.enter().append('g')
|
|
paulo@89
|
3044 .attr('class', function(d, i, j) { return (getOpen(d, i) > getClose(d, i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i});
|
|
paulo@89
|
3045
|
|
paulo@89
|
3046 var lines = tickGroups.append('line')
|
|
paulo@89
|
3047 .attr('class', 'nv-candlestick-lines')
|
|
paulo@89
|
3048 .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })
|
|
paulo@89
|
3049 .attr('x1', 0)
|
|
paulo@89
|
3050 .attr('y1', function(d, i) { return y(getHigh(d, i)); })
|
|
paulo@89
|
3051 .attr('x2', 0)
|
|
paulo@89
|
3052 .attr('y2', function(d, i) { return y(getLow(d, i)); });
|
|
paulo@89
|
3053
|
|
paulo@89
|
3054 var rects = tickGroups.append('rect')
|
|
paulo@89
|
3055 .attr('class', 'nv-candlestick-rects nv-bars')
|
|
paulo@89
|
3056 .attr('transform', function(d, i) {
|
|
paulo@89
|
3057 return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','
|
|
paulo@89
|
3058 + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))
|
|
paulo@89
|
3059 + ')';
|
|
paulo@89
|
3060 })
|
|
paulo@89
|
3061 .attr('x', 0)
|
|
paulo@89
|
3062 .attr('y', 0)
|
|
paulo@89
|
3063 .attr('width', barWidth)
|
|
paulo@89
|
3064 .attr('height', function(d, i) {
|
|
paulo@89
|
3065 var open = getOpen(d, i);
|
|
paulo@89
|
3066 var close = getClose(d, i);
|
|
paulo@89
|
3067 return open > close ? y(close) - y(open) : y(open) - y(close);
|
|
paulo@89
|
3068 });
|
|
paulo@89
|
3069
|
|
paulo@89
|
3070 container.selectAll('.nv-candlestick-lines').transition()
|
|
paulo@89
|
3071 .attr('transform', function(d, i) { return 'translate(' + x(getX(d, i)) + ',0)'; })
|
|
paulo@89
|
3072 .attr('x1', 0)
|
|
paulo@89
|
3073 .attr('y1', function(d, i) { return y(getHigh(d, i)); })
|
|
paulo@89
|
3074 .attr('x2', 0)
|
|
paulo@89
|
3075 .attr('y2', function(d, i) { return y(getLow(d, i)); });
|
|
paulo@89
|
3076
|
|
paulo@89
|
3077 container.selectAll('.nv-candlestick-rects').transition()
|
|
paulo@89
|
3078 .attr('transform', function(d, i) {
|
|
paulo@89
|
3079 return 'translate(' + (x(getX(d, i)) - barWidth/2) + ','
|
|
paulo@89
|
3080 + (y(getY(d, i)) - (getOpen(d, i) > getClose(d, i) ? (y(getClose(d, i)) - y(getOpen(d, i))) : 0))
|
|
paulo@89
|
3081 + ')';
|
|
paulo@89
|
3082 })
|
|
paulo@89
|
3083 .attr('x', 0)
|
|
paulo@89
|
3084 .attr('y', 0)
|
|
paulo@89
|
3085 .attr('width', barWidth)
|
|
paulo@89
|
3086 .attr('height', function(d, i) {
|
|
paulo@89
|
3087 var open = getOpen(d, i);
|
|
paulo@89
|
3088 var close = getClose(d, i);
|
|
paulo@89
|
3089 return open > close ? y(close) - y(open) : y(open) - y(close);
|
|
paulo@89
|
3090 });
|
|
paulo@89
|
3091 });
|
|
paulo@89
|
3092
|
|
paulo@89
|
3093 return chart;
|
|
paulo@89
|
3094 }
|
|
paulo@89
|
3095
|
|
paulo@89
|
3096
|
|
paulo@89
|
3097 //Create methods to allow outside functions to highlight a specific bar.
|
|
paulo@89
|
3098 chart.highlightPoint = function(pointIndex, isHoverOver) {
|
|
paulo@89
|
3099 chart.clearHighlights();
|
|
paulo@89
|
3100 container.select(".nv-candlestickBar .nv-tick-0-" + pointIndex)
|
|
paulo@89
|
3101 .classed("hover", isHoverOver)
|
|
paulo@89
|
3102 ;
|
|
paulo@89
|
3103 };
|
|
paulo@89
|
3104
|
|
paulo@89
|
3105 chart.clearHighlights = function() {
|
|
paulo@89
|
3106 container.select(".nv-candlestickBar .nv-tick.hover")
|
|
paulo@89
|
3107 .classed("hover", false)
|
|
paulo@89
|
3108 ;
|
|
paulo@89
|
3109 };
|
|
paulo@89
|
3110
|
|
paulo@89
|
3111 //============================================================
|
|
paulo@89
|
3112 // Expose Public Variables
|
|
paulo@89
|
3113 //------------------------------------------------------------
|
|
paulo@89
|
3114
|
|
paulo@89
|
3115 chart.dispatch = dispatch;
|
|
paulo@89
|
3116 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
3117
|
|
paulo@89
|
3118 chart._options = Object.create({}, {
|
|
paulo@89
|
3119 // simple options, just get/set the necessary values
|
|
paulo@89
|
3120 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
3121 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
3122 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
3123 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
3124 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
3125 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
3126 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
3127 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
3128 forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},
|
|
paulo@89
|
3129 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
3130 padData: {get: function(){return padData;}, set: function(_){padData=_;}},
|
|
paulo@89
|
3131 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
3132 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
3133 interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
|
|
paulo@89
|
3134
|
|
paulo@89
|
3135 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
3136 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
3137 open: {get: function(){return getOpen();}, set: function(_){getOpen=_;}},
|
|
paulo@89
|
3138 close: {get: function(){return getClose();}, set: function(_){getClose=_;}},
|
|
paulo@89
|
3139 high: {get: function(){return getHigh;}, set: function(_){getHigh=_;}},
|
|
paulo@89
|
3140 low: {get: function(){return getLow;}, set: function(_){getLow=_;}},
|
|
paulo@89
|
3141
|
|
paulo@89
|
3142 // options that require extra logic in the setter
|
|
paulo@89
|
3143 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
3144 margin.top = _.top != undefined ? _.top : margin.top;
|
|
paulo@89
|
3145 margin.right = _.right != undefined ? _.right : margin.right;
|
|
paulo@89
|
3146 margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
3147 margin.left = _.left != undefined ? _.left : margin.left;
|
|
paulo@89
|
3148 }},
|
|
paulo@89
|
3149 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
3150 color = nv.utils.getColor(_);
|
|
paulo@89
|
3151 }}
|
|
paulo@89
|
3152 });
|
|
paulo@89
|
3153
|
|
paulo@89
|
3154 nv.utils.initOptions(chart);
|
|
paulo@89
|
3155 return chart;
|
|
paulo@89
|
3156 };
|
|
paulo@89
|
3157
|
|
paulo@89
|
3158 nv.models.cumulativeLineChart = function() {
|
|
paulo@89
|
3159 "use strict";
|
|
paulo@89
|
3160
|
|
paulo@89
|
3161 //============================================================
|
|
paulo@89
|
3162 // Public Variables with Default Settings
|
|
paulo@89
|
3163 //------------------------------------------------------------
|
|
paulo@89
|
3164
|
|
paulo@89
|
3165 var lines = nv.models.line()
|
|
paulo@89
|
3166 , xAxis = nv.models.axis()
|
|
paulo@89
|
3167 , yAxis = nv.models.axis()
|
|
paulo@89
|
3168 , legend = nv.models.legend()
|
|
paulo@89
|
3169 , controls = nv.models.legend()
|
|
paulo@89
|
3170 , interactiveLayer = nv.interactiveGuideline()
|
|
paulo@89
|
3171 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
3172 ;
|
|
paulo@89
|
3173
|
|
paulo@89
|
3174 var margin = {top: 30, right: 30, bottom: 50, left: 60}
|
|
paulo@89
|
3175 , color = nv.utils.defaultColor()
|
|
paulo@89
|
3176 , width = null
|
|
paulo@89
|
3177 , height = null
|
|
paulo@89
|
3178 , showLegend = true
|
|
paulo@89
|
3179 , showXAxis = true
|
|
paulo@89
|
3180 , showYAxis = true
|
|
paulo@89
|
3181 , rightAlignYAxis = false
|
|
paulo@89
|
3182 , showControls = true
|
|
paulo@89
|
3183 , useInteractiveGuideline = false
|
|
paulo@89
|
3184 , rescaleY = true
|
|
paulo@89
|
3185 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
3186 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
3187 , id = lines.id()
|
|
paulo@89
|
3188 , state = nv.utils.state()
|
|
paulo@89
|
3189 , defaultState = null
|
|
paulo@89
|
3190 , noData = null
|
|
paulo@89
|
3191 , average = function(d) { return d.average }
|
|
paulo@89
|
3192 , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
|
|
paulo@89
|
3193 , transitionDuration = 250
|
|
paulo@89
|
3194 , duration = 250
|
|
paulo@89
|
3195 , noErrorCheck = false //if set to TRUE, will bypass an error check in the indexify function.
|
|
paulo@89
|
3196 ;
|
|
paulo@89
|
3197
|
|
paulo@89
|
3198 state.index = 0;
|
|
paulo@89
|
3199 state.rescaleY = rescaleY;
|
|
paulo@89
|
3200
|
|
paulo@89
|
3201 xAxis.orient('bottom').tickPadding(7);
|
|
paulo@89
|
3202 yAxis.orient((rightAlignYAxis) ? 'right' : 'left');
|
|
paulo@89
|
3203
|
|
paulo@89
|
3204 tooltip.valueFormatter(function(d, i) {
|
|
paulo@89
|
3205 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
3206 }).headerFormatter(function(d, i) {
|
|
paulo@89
|
3207 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
3208 });
|
|
paulo@89
|
3209
|
|
paulo@89
|
3210 controls.updateState(false);
|
|
paulo@89
|
3211
|
|
paulo@89
|
3212 //============================================================
|
|
paulo@89
|
3213 // Private Variables
|
|
paulo@89
|
3214 //------------------------------------------------------------
|
|
paulo@89
|
3215
|
|
paulo@89
|
3216 var dx = d3.scale.linear()
|
|
paulo@89
|
3217 , index = {i: 0, x: 0}
|
|
paulo@89
|
3218 , renderWatch = nv.utils.renderWatch(dispatch, duration)
|
|
paulo@89
|
3219 ;
|
|
paulo@89
|
3220
|
|
paulo@89
|
3221 var stateGetter = function(data) {
|
|
paulo@89
|
3222 return function(){
|
|
paulo@89
|
3223 return {
|
|
paulo@89
|
3224 active: data.map(function(d) { return !d.disabled }),
|
|
paulo@89
|
3225 index: index.i,
|
|
paulo@89
|
3226 rescaleY: rescaleY
|
|
paulo@89
|
3227 };
|
|
paulo@89
|
3228 }
|
|
paulo@89
|
3229 };
|
|
paulo@89
|
3230
|
|
paulo@89
|
3231 var stateSetter = function(data) {
|
|
paulo@89
|
3232 return function(state) {
|
|
paulo@89
|
3233 if (state.index !== undefined)
|
|
paulo@89
|
3234 index.i = state.index;
|
|
paulo@89
|
3235 if (state.rescaleY !== undefined)
|
|
paulo@89
|
3236 rescaleY = state.rescaleY;
|
|
paulo@89
|
3237 if (state.active !== undefined)
|
|
paulo@89
|
3238 data.forEach(function(series,i) {
|
|
paulo@89
|
3239 series.disabled = !state.active[i];
|
|
paulo@89
|
3240 });
|
|
paulo@89
|
3241 }
|
|
paulo@89
|
3242 };
|
|
paulo@89
|
3243
|
|
paulo@89
|
3244 function chart(selection) {
|
|
paulo@89
|
3245 renderWatch.reset();
|
|
paulo@89
|
3246 renderWatch.models(lines);
|
|
paulo@89
|
3247 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
3248 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
3249 selection.each(function(data) {
|
|
paulo@89
|
3250 var container = d3.select(this);
|
|
paulo@89
|
3251 nv.utils.initSVG(container);
|
|
paulo@89
|
3252 container.classed('nv-chart-' + id, true);
|
|
paulo@89
|
3253 var that = this;
|
|
paulo@89
|
3254
|
|
paulo@89
|
3255 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
3256 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
3257
|
|
paulo@89
|
3258 chart.update = function() {
|
|
paulo@89
|
3259 if (duration === 0)
|
|
paulo@89
|
3260 container.call(chart);
|
|
paulo@89
|
3261 else
|
|
paulo@89
|
3262 container.transition().duration(duration).call(chart)
|
|
paulo@89
|
3263 };
|
|
paulo@89
|
3264 chart.container = this;
|
|
paulo@89
|
3265
|
|
paulo@89
|
3266 state
|
|
paulo@89
|
3267 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
3268 .getter(stateGetter(data))
|
|
paulo@89
|
3269 .update();
|
|
paulo@89
|
3270
|
|
paulo@89
|
3271 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
3272 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
3273
|
|
paulo@89
|
3274 if (!defaultState) {
|
|
paulo@89
|
3275 var key;
|
|
paulo@89
|
3276 defaultState = {};
|
|
paulo@89
|
3277 for (key in state) {
|
|
paulo@89
|
3278 if (state[key] instanceof Array)
|
|
paulo@89
|
3279 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
3280 else
|
|
paulo@89
|
3281 defaultState[key] = state[key];
|
|
paulo@89
|
3282 }
|
|
paulo@89
|
3283 }
|
|
paulo@89
|
3284
|
|
paulo@89
|
3285 var indexDrag = d3.behavior.drag()
|
|
paulo@89
|
3286 .on('dragstart', dragStart)
|
|
paulo@89
|
3287 .on('drag', dragMove)
|
|
paulo@89
|
3288 .on('dragend', dragEnd);
|
|
paulo@89
|
3289
|
|
paulo@89
|
3290
|
|
paulo@89
|
3291 function dragStart(d,i) {
|
|
paulo@89
|
3292 d3.select(chart.container)
|
|
paulo@89
|
3293 .style('cursor', 'ew-resize');
|
|
paulo@89
|
3294 }
|
|
paulo@89
|
3295
|
|
paulo@89
|
3296 function dragMove(d,i) {
|
|
paulo@89
|
3297 index.x = d3.event.x;
|
|
paulo@89
|
3298 index.i = Math.round(dx.invert(index.x));
|
|
paulo@89
|
3299 updateZero();
|
|
paulo@89
|
3300 }
|
|
paulo@89
|
3301
|
|
paulo@89
|
3302 function dragEnd(d,i) {
|
|
paulo@89
|
3303 d3.select(chart.container)
|
|
paulo@89
|
3304 .style('cursor', 'auto');
|
|
paulo@89
|
3305
|
|
paulo@89
|
3306 // update state and send stateChange with new index
|
|
paulo@89
|
3307 state.index = index.i;
|
|
paulo@89
|
3308 dispatch.stateChange(state);
|
|
paulo@89
|
3309 }
|
|
paulo@89
|
3310
|
|
paulo@89
|
3311 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
3312 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
3313 nv.utils.noData(chart, container)
|
|
paulo@89
|
3314 return chart;
|
|
paulo@89
|
3315 } else {
|
|
paulo@89
|
3316 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
3317 }
|
|
paulo@89
|
3318
|
|
paulo@89
|
3319 // Setup Scales
|
|
paulo@89
|
3320 x = lines.xScale();
|
|
paulo@89
|
3321 y = lines.yScale();
|
|
paulo@89
|
3322
|
|
paulo@89
|
3323 if (!rescaleY) {
|
|
paulo@89
|
3324 var seriesDomains = data
|
|
paulo@89
|
3325 .filter(function(series) { return !series.disabled })
|
|
paulo@89
|
3326 .map(function(series,i) {
|
|
paulo@89
|
3327 var initialDomain = d3.extent(series.values, lines.y());
|
|
paulo@89
|
3328
|
|
paulo@89
|
3329 //account for series being disabled when losing 95% or more
|
|
paulo@89
|
3330 if (initialDomain[0] < -.95) initialDomain[0] = -.95;
|
|
paulo@89
|
3331
|
|
paulo@89
|
3332 return [
|
|
paulo@89
|
3333 (initialDomain[0] - initialDomain[1]) / (1 + initialDomain[1]),
|
|
paulo@89
|
3334 (initialDomain[1] - initialDomain[0]) / (1 + initialDomain[0])
|
|
paulo@89
|
3335 ];
|
|
paulo@89
|
3336 });
|
|
paulo@89
|
3337
|
|
paulo@89
|
3338 var completeDomain = [
|
|
paulo@89
|
3339 d3.min(seriesDomains, function(d) { return d[0] }),
|
|
paulo@89
|
3340 d3.max(seriesDomains, function(d) { return d[1] })
|
|
paulo@89
|
3341 ];
|
|
paulo@89
|
3342
|
|
paulo@89
|
3343 lines.yDomain(completeDomain);
|
|
paulo@89
|
3344 } else {
|
|
paulo@89
|
3345 lines.yDomain(null);
|
|
paulo@89
|
3346 }
|
|
paulo@89
|
3347
|
|
paulo@89
|
3348 dx.domain([0, data[0].values.length - 1]) //Assumes all series have same length
|
|
paulo@89
|
3349 .range([0, availableWidth])
|
|
paulo@89
|
3350 .clamp(true);
|
|
paulo@89
|
3351
|
|
paulo@89
|
3352 var data = indexify(index.i, data);
|
|
paulo@89
|
3353
|
|
paulo@89
|
3354 // Setup containers and skeleton of chart
|
|
paulo@89
|
3355 var interactivePointerEvents = (useInteractiveGuideline) ? "none" : "all";
|
|
paulo@89
|
3356 var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
|
|
paulo@89
|
3357 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').append('g');
|
|
paulo@89
|
3358 var g = wrap.select('g');
|
|
paulo@89
|
3359
|
|
paulo@89
|
3360 gEnter.append('g').attr('class', 'nv-interactive');
|
|
paulo@89
|
3361 gEnter.append('g').attr('class', 'nv-x nv-axis').style("pointer-events","none");
|
|
paulo@89
|
3362 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
3363 gEnter.append('g').attr('class', 'nv-background');
|
|
paulo@89
|
3364 gEnter.append('g').attr('class', 'nv-linesWrap').style("pointer-events",interactivePointerEvents);
|
|
paulo@89
|
3365 gEnter.append('g').attr('class', 'nv-avgLinesWrap').style("pointer-events","none");
|
|
paulo@89
|
3366 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
3367 gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
paulo@89
|
3368
|
|
paulo@89
|
3369 // Legend
|
|
paulo@89
|
3370 if (showLegend) {
|
|
paulo@89
|
3371 legend.width(availableWidth);
|
|
paulo@89
|
3372
|
|
paulo@89
|
3373 g.select('.nv-legendWrap')
|
|
paulo@89
|
3374 .datum(data)
|
|
paulo@89
|
3375 .call(legend);
|
|
paulo@89
|
3376
|
|
paulo@89
|
3377 if ( margin.top != legend.height()) {
|
|
paulo@89
|
3378 margin.top = legend.height();
|
|
paulo@89
|
3379 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
3380 }
|
|
paulo@89
|
3381
|
|
paulo@89
|
3382 g.select('.nv-legendWrap')
|
|
paulo@89
|
3383 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
3384 }
|
|
paulo@89
|
3385
|
|
paulo@89
|
3386 // Controls
|
|
paulo@89
|
3387 if (showControls) {
|
|
paulo@89
|
3388 var controlsData = [
|
|
paulo@89
|
3389 { key: 'Re-scale y-axis', disabled: !rescaleY }
|
|
paulo@89
|
3390 ];
|
|
paulo@89
|
3391
|
|
paulo@89
|
3392 controls
|
|
paulo@89
|
3393 .width(140)
|
|
paulo@89
|
3394 .color(['#444', '#444', '#444'])
|
|
paulo@89
|
3395 .rightAlign(false)
|
|
paulo@89
|
3396 .margin({top: 5, right: 0, bottom: 5, left: 20})
|
|
paulo@89
|
3397 ;
|
|
paulo@89
|
3398
|
|
paulo@89
|
3399 g.select('.nv-controlsWrap')
|
|
paulo@89
|
3400 .datum(controlsData)
|
|
paulo@89
|
3401 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
3402 .call(controls);
|
|
paulo@89
|
3403 }
|
|
paulo@89
|
3404
|
|
paulo@89
|
3405 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
3406
|
|
paulo@89
|
3407 if (rightAlignYAxis) {
|
|
paulo@89
|
3408 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
3409 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
3410 }
|
|
paulo@89
|
3411
|
|
paulo@89
|
3412 // Show error if series goes below 100%
|
|
paulo@89
|
3413 var tempDisabled = data.filter(function(d) { return d.tempDisabled });
|
|
paulo@89
|
3414
|
|
paulo@89
|
3415 wrap.select('.tempDisabled').remove(); //clean-up and prevent duplicates
|
|
paulo@89
|
3416 if (tempDisabled.length) {
|
|
paulo@89
|
3417 wrap.append('text').attr('class', 'tempDisabled')
|
|
paulo@89
|
3418 .attr('x', availableWidth / 2)
|
|
paulo@89
|
3419 .attr('y', '-.71em')
|
|
paulo@89
|
3420 .style('text-anchor', 'end')
|
|
paulo@89
|
3421 .text(tempDisabled.map(function(d) { return d.key }).join(', ') + ' values cannot be calculated for this time period.');
|
|
paulo@89
|
3422 }
|
|
paulo@89
|
3423
|
|
paulo@89
|
3424 //Set up interactive layer
|
|
paulo@89
|
3425 if (useInteractiveGuideline) {
|
|
paulo@89
|
3426 interactiveLayer
|
|
paulo@89
|
3427 .width(availableWidth)
|
|
paulo@89
|
3428 .height(availableHeight)
|
|
paulo@89
|
3429 .margin({left:margin.left,top:margin.top})
|
|
paulo@89
|
3430 .svgContainer(container)
|
|
paulo@89
|
3431 .xScale(x);
|
|
paulo@89
|
3432 wrap.select(".nv-interactive").call(interactiveLayer);
|
|
paulo@89
|
3433 }
|
|
paulo@89
|
3434
|
|
paulo@89
|
3435 gEnter.select('.nv-background')
|
|
paulo@89
|
3436 .append('rect');
|
|
paulo@89
|
3437
|
|
paulo@89
|
3438 g.select('.nv-background rect')
|
|
paulo@89
|
3439 .attr('width', availableWidth)
|
|
paulo@89
|
3440 .attr('height', availableHeight);
|
|
paulo@89
|
3441
|
|
paulo@89
|
3442 lines
|
|
paulo@89
|
3443 //.x(function(d) { return d.x })
|
|
paulo@89
|
3444 .y(function(d) { return d.display.y })
|
|
paulo@89
|
3445 .width(availableWidth)
|
|
paulo@89
|
3446 .height(availableHeight)
|
|
paulo@89
|
3447 .color(data.map(function(d,i) {
|
|
paulo@89
|
3448 return d.color || color(d, i);
|
|
paulo@89
|
3449 }).filter(function(d,i) { return !data[i].disabled && !data[i].tempDisabled; }));
|
|
paulo@89
|
3450
|
|
paulo@89
|
3451 var linesWrap = g.select('.nv-linesWrap')
|
|
paulo@89
|
3452 .datum(data.filter(function(d) { return !d.disabled && !d.tempDisabled }));
|
|
paulo@89
|
3453
|
|
paulo@89
|
3454 linesWrap.call(lines);
|
|
paulo@89
|
3455
|
|
paulo@89
|
3456 //Store a series index number in the data array.
|
|
paulo@89
|
3457 data.forEach(function(d,i) {
|
|
paulo@89
|
3458 d.seriesIndex = i;
|
|
paulo@89
|
3459 });
|
|
paulo@89
|
3460
|
|
paulo@89
|
3461 var avgLineData = data.filter(function(d) {
|
|
paulo@89
|
3462 return !d.disabled && !!average(d);
|
|
paulo@89
|
3463 });
|
|
paulo@89
|
3464
|
|
paulo@89
|
3465 var avgLines = g.select(".nv-avgLinesWrap").selectAll("line")
|
|
paulo@89
|
3466 .data(avgLineData, function(d) { return d.key; });
|
|
paulo@89
|
3467
|
|
paulo@89
|
3468 var getAvgLineY = function(d) {
|
|
paulo@89
|
3469 //If average lines go off the svg element, clamp them to the svg bounds.
|
|
paulo@89
|
3470 var yVal = y(average(d));
|
|
paulo@89
|
3471 if (yVal < 0) return 0;
|
|
paulo@89
|
3472 if (yVal > availableHeight) return availableHeight;
|
|
paulo@89
|
3473 return yVal;
|
|
paulo@89
|
3474 };
|
|
paulo@89
|
3475
|
|
paulo@89
|
3476 avgLines.enter()
|
|
paulo@89
|
3477 .append('line')
|
|
paulo@89
|
3478 .style('stroke-width',2)
|
|
paulo@89
|
3479 .style('stroke-dasharray','10,10')
|
|
paulo@89
|
3480 .style('stroke',function (d,i) {
|
|
paulo@89
|
3481 return lines.color()(d,d.seriesIndex);
|
|
paulo@89
|
3482 })
|
|
paulo@89
|
3483 .attr('x1',0)
|
|
paulo@89
|
3484 .attr('x2',availableWidth)
|
|
paulo@89
|
3485 .attr('y1', getAvgLineY)
|
|
paulo@89
|
3486 .attr('y2', getAvgLineY);
|
|
paulo@89
|
3487
|
|
paulo@89
|
3488 avgLines
|
|
paulo@89
|
3489 .style('stroke-opacity',function(d){
|
|
paulo@89
|
3490 //If average lines go offscreen, make them transparent
|
|
paulo@89
|
3491 var yVal = y(average(d));
|
|
paulo@89
|
3492 if (yVal < 0 || yVal > availableHeight) return 0;
|
|
paulo@89
|
3493 return 1;
|
|
paulo@89
|
3494 })
|
|
paulo@89
|
3495 .attr('x1',0)
|
|
paulo@89
|
3496 .attr('x2',availableWidth)
|
|
paulo@89
|
3497 .attr('y1', getAvgLineY)
|
|
paulo@89
|
3498 .attr('y2', getAvgLineY);
|
|
paulo@89
|
3499
|
|
paulo@89
|
3500 avgLines.exit().remove();
|
|
paulo@89
|
3501
|
|
paulo@89
|
3502 //Create index line
|
|
paulo@89
|
3503 var indexLine = linesWrap.selectAll('.nv-indexLine')
|
|
paulo@89
|
3504 .data([index]);
|
|
paulo@89
|
3505 indexLine.enter().append('rect').attr('class', 'nv-indexLine')
|
|
paulo@89
|
3506 .attr('width', 3)
|
|
paulo@89
|
3507 .attr('x', -2)
|
|
paulo@89
|
3508 .attr('fill', 'red')
|
|
paulo@89
|
3509 .attr('fill-opacity', .5)
|
|
paulo@89
|
3510 .style("pointer-events","all")
|
|
paulo@89
|
3511 .call(indexDrag);
|
|
paulo@89
|
3512
|
|
paulo@89
|
3513 indexLine
|
|
paulo@89
|
3514 .attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })
|
|
paulo@89
|
3515 .attr('height', availableHeight);
|
|
paulo@89
|
3516
|
|
paulo@89
|
3517 // Setup Axes
|
|
paulo@89
|
3518 if (showXAxis) {
|
|
paulo@89
|
3519 xAxis
|
|
paulo@89
|
3520 .scale(x)
|
|
paulo@89
|
3521 ._ticks( nv.utils.calcTicksX(availableWidth/70, data) )
|
|
paulo@89
|
3522 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
3523
|
|
paulo@89
|
3524 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
3525 .attr('transform', 'translate(0,' + y.range()[0] + ')');
|
|
paulo@89
|
3526 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
3527 .call(xAxis);
|
|
paulo@89
|
3528 }
|
|
paulo@89
|
3529
|
|
paulo@89
|
3530 if (showYAxis) {
|
|
paulo@89
|
3531 yAxis
|
|
paulo@89
|
3532 .scale(y)
|
|
paulo@89
|
3533 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
3534 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
3535
|
|
paulo@89
|
3536 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
3537 .call(yAxis);
|
|
paulo@89
|
3538 }
|
|
paulo@89
|
3539
|
|
paulo@89
|
3540 //============================================================
|
|
paulo@89
|
3541 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
3542 //------------------------------------------------------------
|
|
paulo@89
|
3543
|
|
paulo@89
|
3544 function updateZero() {
|
|
paulo@89
|
3545 indexLine
|
|
paulo@89
|
3546 .data([index]);
|
|
paulo@89
|
3547
|
|
paulo@89
|
3548 //When dragging the index line, turn off line transitions.
|
|
paulo@89
|
3549 // Then turn them back on when done dragging.
|
|
paulo@89
|
3550 var oldDuration = chart.duration();
|
|
paulo@89
|
3551 chart.duration(0);
|
|
paulo@89
|
3552 chart.update();
|
|
paulo@89
|
3553 chart.duration(oldDuration);
|
|
paulo@89
|
3554 }
|
|
paulo@89
|
3555
|
|
paulo@89
|
3556 g.select('.nv-background rect')
|
|
paulo@89
|
3557 .on('click', function() {
|
|
paulo@89
|
3558 index.x = d3.mouse(this)[0];
|
|
paulo@89
|
3559 index.i = Math.round(dx.invert(index.x));
|
|
paulo@89
|
3560
|
|
paulo@89
|
3561 // update state and send stateChange with new index
|
|
paulo@89
|
3562 state.index = index.i;
|
|
paulo@89
|
3563 dispatch.stateChange(state);
|
|
paulo@89
|
3564
|
|
paulo@89
|
3565 updateZero();
|
|
paulo@89
|
3566 });
|
|
paulo@89
|
3567
|
|
paulo@89
|
3568 lines.dispatch.on('elementClick', function(e) {
|
|
paulo@89
|
3569 index.i = e.pointIndex;
|
|
paulo@89
|
3570 index.x = dx(index.i);
|
|
paulo@89
|
3571
|
|
paulo@89
|
3572 // update state and send stateChange with new index
|
|
paulo@89
|
3573 state.index = index.i;
|
|
paulo@89
|
3574 dispatch.stateChange(state);
|
|
paulo@89
|
3575
|
|
paulo@89
|
3576 updateZero();
|
|
paulo@89
|
3577 });
|
|
paulo@89
|
3578
|
|
paulo@89
|
3579 controls.dispatch.on('legendClick', function(d,i) {
|
|
paulo@89
|
3580 d.disabled = !d.disabled;
|
|
paulo@89
|
3581 rescaleY = !d.disabled;
|
|
paulo@89
|
3582
|
|
paulo@89
|
3583 state.rescaleY = rescaleY;
|
|
paulo@89
|
3584 dispatch.stateChange(state);
|
|
paulo@89
|
3585 chart.update();
|
|
paulo@89
|
3586 });
|
|
paulo@89
|
3587
|
|
paulo@89
|
3588 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
3589 for (var key in newState)
|
|
paulo@89
|
3590 state[key] = newState[key];
|
|
paulo@89
|
3591 dispatch.stateChange(state);
|
|
paulo@89
|
3592 chart.update();
|
|
paulo@89
|
3593 });
|
|
paulo@89
|
3594
|
|
paulo@89
|
3595 interactiveLayer.dispatch.on('elementMousemove', function(e) {
|
|
paulo@89
|
3596 lines.clearHighlights();
|
|
paulo@89
|
3597 var singlePoint, pointIndex, pointXLocation, allData = [];
|
|
paulo@89
|
3598
|
|
paulo@89
|
3599 data
|
|
paulo@89
|
3600 .filter(function(series, i) {
|
|
paulo@89
|
3601 series.seriesIndex = i;
|
|
paulo@89
|
3602 return !series.disabled;
|
|
paulo@89
|
3603 })
|
|
paulo@89
|
3604 .forEach(function(series,i) {
|
|
paulo@89
|
3605 pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
|
|
paulo@89
|
3606 lines.highlightPoint(i, pointIndex, true);
|
|
paulo@89
|
3607 var point = series.values[pointIndex];
|
|
paulo@89
|
3608 if (typeof point === 'undefined') return;
|
|
paulo@89
|
3609 if (typeof singlePoint === 'undefined') singlePoint = point;
|
|
paulo@89
|
3610 if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
3611 allData.push({
|
|
paulo@89
|
3612 key: series.key,
|
|
paulo@89
|
3613 value: chart.y()(point, pointIndex),
|
|
paulo@89
|
3614 color: color(series,series.seriesIndex)
|
|
paulo@89
|
3615 });
|
|
paulo@89
|
3616 });
|
|
paulo@89
|
3617
|
|
paulo@89
|
3618 //Highlight the tooltip entry based on which point the mouse is closest to.
|
|
paulo@89
|
3619 if (allData.length > 2) {
|
|
paulo@89
|
3620 var yValue = chart.yScale().invert(e.mouseY);
|
|
paulo@89
|
3621 var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
|
|
paulo@89
|
3622 var threshold = 0.03 * domainExtent;
|
|
paulo@89
|
3623 var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
|
|
paulo@89
|
3624 if (indexToHighlight !== null)
|
|
paulo@89
|
3625 allData[indexToHighlight].highlight = true;
|
|
paulo@89
|
3626 }
|
|
paulo@89
|
3627
|
|
paulo@89
|
3628 var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex), pointIndex);
|
|
paulo@89
|
3629 interactiveLayer.tooltip
|
|
paulo@89
|
3630 .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
|
|
paulo@89
|
3631 .chartContainer(that.parentNode)
|
|
paulo@89
|
3632 .valueFormatter(function(d,i) {
|
|
paulo@89
|
3633 return yAxis.tickFormat()(d);
|
|
paulo@89
|
3634 })
|
|
paulo@89
|
3635 .data(
|
|
paulo@89
|
3636 {
|
|
paulo@89
|
3637 value: xValue,
|
|
paulo@89
|
3638 series: allData
|
|
paulo@89
|
3639 }
|
|
paulo@89
|
3640 )();
|
|
paulo@89
|
3641
|
|
paulo@89
|
3642 interactiveLayer.renderGuideLine(pointXLocation);
|
|
paulo@89
|
3643 });
|
|
paulo@89
|
3644
|
|
paulo@89
|
3645 interactiveLayer.dispatch.on("elementMouseout",function(e) {
|
|
paulo@89
|
3646 lines.clearHighlights();
|
|
paulo@89
|
3647 });
|
|
paulo@89
|
3648
|
|
paulo@89
|
3649 // Update chart from a state object passed to event handler
|
|
paulo@89
|
3650 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
3651 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
3652 data.forEach(function(series,i) {
|
|
paulo@89
|
3653 series.disabled = e.disabled[i];
|
|
paulo@89
|
3654 });
|
|
paulo@89
|
3655
|
|
paulo@89
|
3656 state.disabled = e.disabled;
|
|
paulo@89
|
3657 }
|
|
paulo@89
|
3658
|
|
paulo@89
|
3659 if (typeof e.index !== 'undefined') {
|
|
paulo@89
|
3660 index.i = e.index;
|
|
paulo@89
|
3661 index.x = dx(index.i);
|
|
paulo@89
|
3662
|
|
paulo@89
|
3663 state.index = e.index;
|
|
paulo@89
|
3664
|
|
paulo@89
|
3665 indexLine
|
|
paulo@89
|
3666 .data([index]);
|
|
paulo@89
|
3667 }
|
|
paulo@89
|
3668
|
|
paulo@89
|
3669 if (typeof e.rescaleY !== 'undefined') {
|
|
paulo@89
|
3670 rescaleY = e.rescaleY;
|
|
paulo@89
|
3671 }
|
|
paulo@89
|
3672
|
|
paulo@89
|
3673 chart.update();
|
|
paulo@89
|
3674 });
|
|
paulo@89
|
3675
|
|
paulo@89
|
3676 });
|
|
paulo@89
|
3677
|
|
paulo@89
|
3678 renderWatch.renderEnd('cumulativeLineChart immediate');
|
|
paulo@89
|
3679
|
|
paulo@89
|
3680 return chart;
|
|
paulo@89
|
3681 }
|
|
paulo@89
|
3682
|
|
paulo@89
|
3683 //============================================================
|
|
paulo@89
|
3684 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
3685 //------------------------------------------------------------
|
|
paulo@89
|
3686
|
|
paulo@89
|
3687 lines.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
3688 var point = {
|
|
paulo@89
|
3689 x: chart.x()(evt.point),
|
|
paulo@89
|
3690 y: chart.y()(evt.point),
|
|
paulo@89
|
3691 color: evt.point.color
|
|
paulo@89
|
3692 };
|
|
paulo@89
|
3693 evt.point = point;
|
|
paulo@89
|
3694 tooltip.data(evt).position(evt.pos).hidden(false);
|
|
paulo@89
|
3695 });
|
|
paulo@89
|
3696
|
|
paulo@89
|
3697 lines.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
3698 tooltip.hidden(true)
|
|
paulo@89
|
3699 });
|
|
paulo@89
|
3700
|
|
paulo@89
|
3701 //============================================================
|
|
paulo@89
|
3702 // Functions
|
|
paulo@89
|
3703 //------------------------------------------------------------
|
|
paulo@89
|
3704
|
|
paulo@89
|
3705 var indexifyYGetter = null;
|
|
paulo@89
|
3706 /* Normalize the data according to an index point. */
|
|
paulo@89
|
3707 function indexify(idx, data) {
|
|
paulo@89
|
3708 if (!indexifyYGetter) indexifyYGetter = lines.y();
|
|
paulo@89
|
3709 return data.map(function(line, i) {
|
|
paulo@89
|
3710 if (!line.values) {
|
|
paulo@89
|
3711 return line;
|
|
paulo@89
|
3712 }
|
|
paulo@89
|
3713 var indexValue = line.values[idx];
|
|
paulo@89
|
3714 if (indexValue == null) {
|
|
paulo@89
|
3715 return line;
|
|
paulo@89
|
3716 }
|
|
paulo@89
|
3717 var v = indexifyYGetter(indexValue, idx);
|
|
paulo@89
|
3718
|
|
paulo@89
|
3719 //TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue
|
|
paulo@89
|
3720 if (v < -.95 && !noErrorCheck) {
|
|
paulo@89
|
3721 //if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically correct till it hits 100)
|
|
paulo@89
|
3722
|
|
paulo@89
|
3723 line.tempDisabled = true;
|
|
paulo@89
|
3724 return line;
|
|
paulo@89
|
3725 }
|
|
paulo@89
|
3726
|
|
paulo@89
|
3727 line.tempDisabled = false;
|
|
paulo@89
|
3728
|
|
paulo@89
|
3729 line.values = line.values.map(function(point, pointIndex) {
|
|
paulo@89
|
3730 point.display = {'y': (indexifyYGetter(point, pointIndex) - v) / (1 + v) };
|
|
paulo@89
|
3731 return point;
|
|
paulo@89
|
3732 });
|
|
paulo@89
|
3733
|
|
paulo@89
|
3734 return line;
|
|
paulo@89
|
3735 })
|
|
paulo@89
|
3736 }
|
|
paulo@89
|
3737
|
|
paulo@89
|
3738 //============================================================
|
|
paulo@89
|
3739 // Expose Public Variables
|
|
paulo@89
|
3740 //------------------------------------------------------------
|
|
paulo@89
|
3741
|
|
paulo@89
|
3742 // expose chart's sub-components
|
|
paulo@89
|
3743 chart.dispatch = dispatch;
|
|
paulo@89
|
3744 chart.lines = lines;
|
|
paulo@89
|
3745 chart.legend = legend;
|
|
paulo@89
|
3746 chart.controls = controls;
|
|
paulo@89
|
3747 chart.xAxis = xAxis;
|
|
paulo@89
|
3748 chart.yAxis = yAxis;
|
|
paulo@89
|
3749 chart.interactiveLayer = interactiveLayer;
|
|
paulo@89
|
3750 chart.state = state;
|
|
paulo@89
|
3751 chart.tooltip = tooltip;
|
|
paulo@89
|
3752
|
|
paulo@89
|
3753 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
3754
|
|
paulo@89
|
3755 chart._options = Object.create({}, {
|
|
paulo@89
|
3756 // simple options, just get/set the necessary values
|
|
paulo@89
|
3757 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
3758 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
3759 rescaleY: {get: function(){return rescaleY;}, set: function(_){rescaleY=_;}},
|
|
paulo@89
|
3760 showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
|
|
paulo@89
|
3761 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
3762 average: {get: function(){return average;}, set: function(_){average=_;}},
|
|
paulo@89
|
3763 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
3764 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
3765 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
3766 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
3767 noErrorCheck: {get: function(){return noErrorCheck;}, set: function(_){noErrorCheck=_;}},
|
|
paulo@89
|
3768
|
|
paulo@89
|
3769 // deprecated options
|
|
paulo@89
|
3770 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
3771 // deprecated after 1.7.1
|
|
paulo@89
|
3772 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
3773 tooltip.enabled(!!_);
|
|
paulo@89
|
3774 }},
|
|
paulo@89
|
3775 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
3776 // deprecated after 1.7.1
|
|
paulo@89
|
3777 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
3778 tooltip.contentGenerator(_);
|
|
paulo@89
|
3779 }},
|
|
paulo@89
|
3780
|
|
paulo@89
|
3781 // options that require extra logic in the setter
|
|
paulo@89
|
3782 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
3783 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
3784 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
3785 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
3786 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
3787 }},
|
|
paulo@89
|
3788 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
3789 color = nv.utils.getColor(_);
|
|
paulo@89
|
3790 legend.color(color);
|
|
paulo@89
|
3791 }},
|
|
paulo@89
|
3792 useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
|
|
paulo@89
|
3793 useInteractiveGuideline = _;
|
|
paulo@89
|
3794 if (_ === true) {
|
|
paulo@89
|
3795 chart.interactive(false);
|
|
paulo@89
|
3796 chart.useVoronoi(false);
|
|
paulo@89
|
3797 }
|
|
paulo@89
|
3798 }},
|
|
paulo@89
|
3799 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
3800 rightAlignYAxis = _;
|
|
paulo@89
|
3801 yAxis.orient( (_) ? 'right' : 'left');
|
|
paulo@89
|
3802 }},
|
|
paulo@89
|
3803 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
3804 duration = _;
|
|
paulo@89
|
3805 lines.duration(duration);
|
|
paulo@89
|
3806 xAxis.duration(duration);
|
|
paulo@89
|
3807 yAxis.duration(duration);
|
|
paulo@89
|
3808 renderWatch.reset(duration);
|
|
paulo@89
|
3809 }}
|
|
paulo@89
|
3810 });
|
|
paulo@89
|
3811
|
|
paulo@89
|
3812 nv.utils.inheritOptions(chart, lines);
|
|
paulo@89
|
3813 nv.utils.initOptions(chart);
|
|
paulo@89
|
3814
|
|
paulo@89
|
3815 return chart;
|
|
paulo@89
|
3816 };
|
|
paulo@89
|
3817 //TODO: consider deprecating by adding necessary features to multiBar model
|
|
paulo@89
|
3818 nv.models.discreteBar = function() {
|
|
paulo@89
|
3819 "use strict";
|
|
paulo@89
|
3820
|
|
paulo@89
|
3821 //============================================================
|
|
paulo@89
|
3822 // Public Variables with Default Settings
|
|
paulo@89
|
3823 //------------------------------------------------------------
|
|
paulo@89
|
3824
|
|
paulo@89
|
3825 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
3826 , width = 960
|
|
paulo@89
|
3827 , height = 500
|
|
paulo@89
|
3828 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
3829 , container
|
|
paulo@89
|
3830 , x = d3.scale.ordinal()
|
|
paulo@89
|
3831 , y = d3.scale.linear()
|
|
paulo@89
|
3832 , getX = function(d) { return d.x }
|
|
paulo@89
|
3833 , getY = function(d) { return d.y }
|
|
paulo@89
|
3834 , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
|
|
paulo@89
|
3835 , color = nv.utils.defaultColor()
|
|
paulo@89
|
3836 , showValues = false
|
|
paulo@89
|
3837 , valueFormat = d3.format(',.2f')
|
|
paulo@89
|
3838 , xDomain
|
|
paulo@89
|
3839 , yDomain
|
|
paulo@89
|
3840 , xRange
|
|
paulo@89
|
3841 , yRange
|
|
paulo@89
|
3842 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
3843 , rectClass = 'discreteBar'
|
|
paulo@89
|
3844 , duration = 250
|
|
paulo@89
|
3845 ;
|
|
paulo@89
|
3846
|
|
paulo@89
|
3847 //============================================================
|
|
paulo@89
|
3848 // Private Variables
|
|
paulo@89
|
3849 //------------------------------------------------------------
|
|
paulo@89
|
3850
|
|
paulo@89
|
3851 var x0, y0;
|
|
paulo@89
|
3852 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
3853
|
|
paulo@89
|
3854 function chart(selection) {
|
|
paulo@89
|
3855 renderWatch.reset();
|
|
paulo@89
|
3856 selection.each(function(data) {
|
|
paulo@89
|
3857 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
3858 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
3859
|
|
paulo@89
|
3860 container = d3.select(this);
|
|
paulo@89
|
3861 nv.utils.initSVG(container);
|
|
paulo@89
|
3862
|
|
paulo@89
|
3863 //add series index to each data point for reference
|
|
paulo@89
|
3864 data.forEach(function(series, i) {
|
|
paulo@89
|
3865 series.values.forEach(function(point) {
|
|
paulo@89
|
3866 point.series = i;
|
|
paulo@89
|
3867 });
|
|
paulo@89
|
3868 });
|
|
paulo@89
|
3869
|
|
paulo@89
|
3870 // Setup Scales
|
|
paulo@89
|
3871 // remap and flatten the data for use in calculating the scales' domains
|
|
paulo@89
|
3872 var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
|
|
paulo@89
|
3873 data.map(function(d) {
|
|
paulo@89
|
3874 return d.values.map(function(d,i) {
|
|
paulo@89
|
3875 return { x: getX(d,i), y: getY(d,i), y0: d.y0 }
|
|
paulo@89
|
3876 })
|
|
paulo@89
|
3877 });
|
|
paulo@89
|
3878
|
|
paulo@89
|
3879 x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
|
|
paulo@89
|
3880 .rangeBands(xRange || [0, availableWidth], .1);
|
|
paulo@89
|
3881 y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)));
|
|
paulo@89
|
3882
|
|
paulo@89
|
3883 // If showValues, pad the Y axis range to account for label height
|
|
paulo@89
|
3884 if (showValues) y.range(yRange || [availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
|
|
paulo@89
|
3885 else y.range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
3886
|
|
paulo@89
|
3887 //store old scales if they exist
|
|
paulo@89
|
3888 x0 = x0 || x;
|
|
paulo@89
|
3889 y0 = y0 || y.copy().range([y(0),y(0)]);
|
|
paulo@89
|
3890
|
|
paulo@89
|
3891 // Setup containers and skeleton of chart
|
|
paulo@89
|
3892 var wrap = container.selectAll('g.nv-wrap.nv-discretebar').data([data]);
|
|
paulo@89
|
3893 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discretebar');
|
|
paulo@89
|
3894 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
3895 var g = wrap.select('g');
|
|
paulo@89
|
3896
|
|
paulo@89
|
3897 gEnter.append('g').attr('class', 'nv-groups');
|
|
paulo@89
|
3898 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
3899
|
|
paulo@89
|
3900 //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later
|
|
paulo@89
|
3901 var groups = wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
3902 .data(function(d) { return d }, function(d) { return d.key });
|
|
paulo@89
|
3903 groups.enter().append('g')
|
|
paulo@89
|
3904 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
3905 .style('fill-opacity', 1e-6);
|
|
paulo@89
|
3906 groups.exit()
|
|
paulo@89
|
3907 .watchTransition(renderWatch, 'discreteBar: exit groups')
|
|
paulo@89
|
3908 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
3909 .style('fill-opacity', 1e-6)
|
|
paulo@89
|
3910 .remove();
|
|
paulo@89
|
3911 groups
|
|
paulo@89
|
3912 .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
|
|
paulo@89
|
3913 .classed('hover', function(d) { return d.hover });
|
|
paulo@89
|
3914 groups
|
|
paulo@89
|
3915 .watchTransition(renderWatch, 'discreteBar: groups')
|
|
paulo@89
|
3916 .style('stroke-opacity', 1)
|
|
paulo@89
|
3917 .style('fill-opacity', .75);
|
|
paulo@89
|
3918
|
|
paulo@89
|
3919 var bars = groups.selectAll('g.nv-bar')
|
|
paulo@89
|
3920 .data(function(d) { return d.values });
|
|
paulo@89
|
3921 bars.exit().remove();
|
|
paulo@89
|
3922
|
|
paulo@89
|
3923 var barsEnter = bars.enter().append('g')
|
|
paulo@89
|
3924 .attr('transform', function(d,i,j) {
|
|
paulo@89
|
3925 return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')'
|
|
paulo@89
|
3926 })
|
|
paulo@89
|
3927 .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
|
|
paulo@89
|
3928 d3.select(this).classed('hover', true);
|
|
paulo@89
|
3929 dispatch.elementMouseover({
|
|
paulo@89
|
3930 data: d,
|
|
paulo@89
|
3931 index: i,
|
|
paulo@89
|
3932 color: d3.select(this).style("fill")
|
|
paulo@89
|
3933 });
|
|
paulo@89
|
3934 })
|
|
paulo@89
|
3935 .on('mouseout', function(d,i) {
|
|
paulo@89
|
3936 d3.select(this).classed('hover', false);
|
|
paulo@89
|
3937 dispatch.elementMouseout({
|
|
paulo@89
|
3938 data: d,
|
|
paulo@89
|
3939 index: i,
|
|
paulo@89
|
3940 color: d3.select(this).style("fill")
|
|
paulo@89
|
3941 });
|
|
paulo@89
|
3942 })
|
|
paulo@89
|
3943 .on('mousemove', function(d,i) {
|
|
paulo@89
|
3944 dispatch.elementMousemove({
|
|
paulo@89
|
3945 data: d,
|
|
paulo@89
|
3946 index: i,
|
|
paulo@89
|
3947 color: d3.select(this).style("fill")
|
|
paulo@89
|
3948 });
|
|
paulo@89
|
3949 })
|
|
paulo@89
|
3950 .on('click', function(d,i) {
|
|
paulo@89
|
3951 dispatch.elementClick({
|
|
paulo@89
|
3952 data: d,
|
|
paulo@89
|
3953 index: i,
|
|
paulo@89
|
3954 color: d3.select(this).style("fill")
|
|
paulo@89
|
3955 });
|
|
paulo@89
|
3956 d3.event.stopPropagation();
|
|
paulo@89
|
3957 })
|
|
paulo@89
|
3958 .on('dblclick', function(d,i) {
|
|
paulo@89
|
3959 dispatch.elementDblClick({
|
|
paulo@89
|
3960 data: d,
|
|
paulo@89
|
3961 index: i,
|
|
paulo@89
|
3962 color: d3.select(this).style("fill")
|
|
paulo@89
|
3963 });
|
|
paulo@89
|
3964 d3.event.stopPropagation();
|
|
paulo@89
|
3965 });
|
|
paulo@89
|
3966
|
|
paulo@89
|
3967 barsEnter.append('rect')
|
|
paulo@89
|
3968 .attr('height', 0)
|
|
paulo@89
|
3969 .attr('width', x.rangeBand() * .9 / data.length )
|
|
paulo@89
|
3970
|
|
paulo@89
|
3971 if (showValues) {
|
|
paulo@89
|
3972 barsEnter.append('text')
|
|
paulo@89
|
3973 .attr('text-anchor', 'middle')
|
|
paulo@89
|
3974 ;
|
|
paulo@89
|
3975
|
|
paulo@89
|
3976 bars.select('text')
|
|
paulo@89
|
3977 .text(function(d,i) { return valueFormat(getY(d,i)) })
|
|
paulo@89
|
3978 .watchTransition(renderWatch, 'discreteBar: bars text')
|
|
paulo@89
|
3979 .attr('x', x.rangeBand() * .9 / 2)
|
|
paulo@89
|
3980 .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })
|
|
paulo@89
|
3981
|
|
paulo@89
|
3982 ;
|
|
paulo@89
|
3983 } else {
|
|
paulo@89
|
3984 bars.selectAll('text').remove();
|
|
paulo@89
|
3985 }
|
|
paulo@89
|
3986
|
|
paulo@89
|
3987 bars
|
|
paulo@89
|
3988 .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' })
|
|
paulo@89
|
3989 .style('fill', function(d,i) { return d.color || color(d,i) })
|
|
paulo@89
|
3990 .style('stroke', function(d,i) { return d.color || color(d,i) })
|
|
paulo@89
|
3991 .select('rect')
|
|
paulo@89
|
3992 .attr('class', rectClass)
|
|
paulo@89
|
3993 .watchTransition(renderWatch, 'discreteBar: bars rect')
|
|
paulo@89
|
3994 .attr('width', x.rangeBand() * .9 / data.length);
|
|
paulo@89
|
3995 bars.watchTransition(renderWatch, 'discreteBar: bars')
|
|
paulo@89
|
3996 //.delay(function(d,i) { return i * 1200 / data[0].values.length })
|
|
paulo@89
|
3997 .attr('transform', function(d,i) {
|
|
paulo@89
|
3998 var left = x(getX(d,i)) + x.rangeBand() * .05,
|
|
paulo@89
|
3999 top = getY(d,i) < 0 ?
|
|
paulo@89
|
4000 y(0) :
|
|
paulo@89
|
4001 y(0) - y(getY(d,i)) < 1 ?
|
|
paulo@89
|
4002 y(0) - 1 : //make 1 px positive bars show up above y=0
|
|
paulo@89
|
4003 y(getY(d,i));
|
|
paulo@89
|
4004
|
|
paulo@89
|
4005 return 'translate(' + left + ', ' + top + ')'
|
|
paulo@89
|
4006 })
|
|
paulo@89
|
4007 .select('rect')
|
|
paulo@89
|
4008 .attr('height', function(d,i) {
|
|
paulo@89
|
4009 return Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1)
|
|
paulo@89
|
4010 });
|
|
paulo@89
|
4011
|
|
paulo@89
|
4012
|
|
paulo@89
|
4013 //store old scales for use in transitions on update
|
|
paulo@89
|
4014 x0 = x.copy();
|
|
paulo@89
|
4015 y0 = y.copy();
|
|
paulo@89
|
4016
|
|
paulo@89
|
4017 });
|
|
paulo@89
|
4018
|
|
paulo@89
|
4019 renderWatch.renderEnd('discreteBar immediate');
|
|
paulo@89
|
4020 return chart;
|
|
paulo@89
|
4021 }
|
|
paulo@89
|
4022
|
|
paulo@89
|
4023 //============================================================
|
|
paulo@89
|
4024 // Expose Public Variables
|
|
paulo@89
|
4025 //------------------------------------------------------------
|
|
paulo@89
|
4026
|
|
paulo@89
|
4027 chart.dispatch = dispatch;
|
|
paulo@89
|
4028 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
4029
|
|
paulo@89
|
4030 chart._options = Object.create({}, {
|
|
paulo@89
|
4031 // simple options, just get/set the necessary values
|
|
paulo@89
|
4032 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
4033 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
4034 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
4035 showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},
|
|
paulo@89
|
4036 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
4037 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
4038 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
4039 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
4040 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
4041 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
4042 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
4043 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
4044 valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
|
|
paulo@89
|
4045 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
4046 rectClass: {get: function(){return rectClass;}, set: function(_){rectClass=_;}},
|
|
paulo@89
|
4047
|
|
paulo@89
|
4048 // options that require extra logic in the setter
|
|
paulo@89
|
4049 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
4050 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
4051 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
4052 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
4053 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
4054 }},
|
|
paulo@89
|
4055 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
4056 color = nv.utils.getColor(_);
|
|
paulo@89
|
4057 }},
|
|
paulo@89
|
4058 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
4059 duration = _;
|
|
paulo@89
|
4060 renderWatch.reset(duration);
|
|
paulo@89
|
4061 }}
|
|
paulo@89
|
4062 });
|
|
paulo@89
|
4063
|
|
paulo@89
|
4064 nv.utils.initOptions(chart);
|
|
paulo@89
|
4065
|
|
paulo@89
|
4066 return chart;
|
|
paulo@89
|
4067 };
|
|
paulo@89
|
4068
|
|
paulo@89
|
4069 nv.models.discreteBarChart = function() {
|
|
paulo@89
|
4070 "use strict";
|
|
paulo@89
|
4071
|
|
paulo@89
|
4072 //============================================================
|
|
paulo@89
|
4073 // Public Variables with Default Settings
|
|
paulo@89
|
4074 //------------------------------------------------------------
|
|
paulo@89
|
4075
|
|
paulo@89
|
4076 var discretebar = nv.models.discreteBar()
|
|
paulo@89
|
4077 , xAxis = nv.models.axis()
|
|
paulo@89
|
4078 , yAxis = nv.models.axis()
|
|
paulo@89
|
4079 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
4080 ;
|
|
paulo@89
|
4081
|
|
paulo@89
|
4082 var margin = {top: 15, right: 10, bottom: 50, left: 60}
|
|
paulo@89
|
4083 , width = null
|
|
paulo@89
|
4084 , height = null
|
|
paulo@89
|
4085 , color = nv.utils.getColor()
|
|
paulo@89
|
4086 , showXAxis = true
|
|
paulo@89
|
4087 , showYAxis = true
|
|
paulo@89
|
4088 , rightAlignYAxis = false
|
|
paulo@89
|
4089 , staggerLabels = false
|
|
paulo@89
|
4090 , x
|
|
paulo@89
|
4091 , y
|
|
paulo@89
|
4092 , noData = null
|
|
paulo@89
|
4093 , dispatch = d3.dispatch('beforeUpdate','renderEnd')
|
|
paulo@89
|
4094 , duration = 250
|
|
paulo@89
|
4095 ;
|
|
paulo@89
|
4096
|
|
paulo@89
|
4097 xAxis
|
|
paulo@89
|
4098 .orient('bottom')
|
|
paulo@89
|
4099 .showMaxMin(false)
|
|
paulo@89
|
4100 .tickFormat(function(d) { return d })
|
|
paulo@89
|
4101 ;
|
|
paulo@89
|
4102 yAxis
|
|
paulo@89
|
4103 .orient((rightAlignYAxis) ? 'right' : 'left')
|
|
paulo@89
|
4104 .tickFormat(d3.format(',.1f'))
|
|
paulo@89
|
4105 ;
|
|
paulo@89
|
4106
|
|
paulo@89
|
4107 tooltip
|
|
paulo@89
|
4108 .duration(0)
|
|
paulo@89
|
4109 .headerEnabled(false)
|
|
paulo@89
|
4110 .valueFormatter(function(d, i) {
|
|
paulo@89
|
4111 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
4112 })
|
|
paulo@89
|
4113 .keyFormatter(function(d, i) {
|
|
paulo@89
|
4114 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
4115 });
|
|
paulo@89
|
4116
|
|
paulo@89
|
4117 //============================================================
|
|
paulo@89
|
4118 // Private Variables
|
|
paulo@89
|
4119 //------------------------------------------------------------
|
|
paulo@89
|
4120
|
|
paulo@89
|
4121 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
4122
|
|
paulo@89
|
4123 function chart(selection) {
|
|
paulo@89
|
4124 renderWatch.reset();
|
|
paulo@89
|
4125 renderWatch.models(discretebar);
|
|
paulo@89
|
4126 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
4127 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
4128
|
|
paulo@89
|
4129 selection.each(function(data) {
|
|
paulo@89
|
4130 var container = d3.select(this),
|
|
paulo@89
|
4131 that = this;
|
|
paulo@89
|
4132 nv.utils.initSVG(container);
|
|
paulo@89
|
4133 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
4134 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
4135
|
|
paulo@89
|
4136 chart.update = function() {
|
|
paulo@89
|
4137 dispatch.beforeUpdate();
|
|
paulo@89
|
4138 container.transition().duration(duration).call(chart);
|
|
paulo@89
|
4139 };
|
|
paulo@89
|
4140 chart.container = this;
|
|
paulo@89
|
4141
|
|
paulo@89
|
4142 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
4143 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
4144 nv.utils.noData(chart, container);
|
|
paulo@89
|
4145 return chart;
|
|
paulo@89
|
4146 } else {
|
|
paulo@89
|
4147 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
4148 }
|
|
paulo@89
|
4149
|
|
paulo@89
|
4150 // Setup Scales
|
|
paulo@89
|
4151 x = discretebar.xScale();
|
|
paulo@89
|
4152 y = discretebar.yScale().clamp(true);
|
|
paulo@89
|
4153
|
|
paulo@89
|
4154 // Setup containers and skeleton of chart
|
|
paulo@89
|
4155 var wrap = container.selectAll('g.nv-wrap.nv-discreteBarWithAxes').data([data]);
|
|
paulo@89
|
4156 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discreteBarWithAxes').append('g');
|
|
paulo@89
|
4157 var defsEnter = gEnter.append('defs');
|
|
paulo@89
|
4158 var g = wrap.select('g');
|
|
paulo@89
|
4159
|
|
paulo@89
|
4160 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
4161 gEnter.append('g').attr('class', 'nv-y nv-axis')
|
|
paulo@89
|
4162 .append('g').attr('class', 'nv-zeroLine')
|
|
paulo@89
|
4163 .append('line');
|
|
paulo@89
|
4164
|
|
paulo@89
|
4165 gEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
4166
|
|
paulo@89
|
4167 g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
4168
|
|
paulo@89
|
4169 if (rightAlignYAxis) {
|
|
paulo@89
|
4170 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
4171 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
4172 }
|
|
paulo@89
|
4173
|
|
paulo@89
|
4174 // Main Chart Component(s)
|
|
paulo@89
|
4175 discretebar
|
|
paulo@89
|
4176 .width(availableWidth)
|
|
paulo@89
|
4177 .height(availableHeight);
|
|
paulo@89
|
4178
|
|
paulo@89
|
4179 var barsWrap = g.select('.nv-barsWrap')
|
|
paulo@89
|
4180 .datum(data.filter(function(d) { return !d.disabled }));
|
|
paulo@89
|
4181
|
|
paulo@89
|
4182 barsWrap.transition().call(discretebar);
|
|
paulo@89
|
4183
|
|
paulo@89
|
4184
|
|
paulo@89
|
4185 defsEnter.append('clipPath')
|
|
paulo@89
|
4186 .attr('id', 'nv-x-label-clip-' + discretebar.id())
|
|
paulo@89
|
4187 .append('rect');
|
|
paulo@89
|
4188
|
|
paulo@89
|
4189 g.select('#nv-x-label-clip-' + discretebar.id() + ' rect')
|
|
paulo@89
|
4190 .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
|
|
paulo@89
|
4191 .attr('height', 16)
|
|
paulo@89
|
4192 .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));
|
|
paulo@89
|
4193
|
|
paulo@89
|
4194 // Setup Axes
|
|
paulo@89
|
4195 if (showXAxis) {
|
|
paulo@89
|
4196 xAxis
|
|
paulo@89
|
4197 .scale(x)
|
|
paulo@89
|
4198 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
4199 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
4200
|
|
paulo@89
|
4201 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
4202 .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')');
|
|
paulo@89
|
4203 g.select('.nv-x.nv-axis').call(xAxis);
|
|
paulo@89
|
4204
|
|
paulo@89
|
4205 var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
|
|
paulo@89
|
4206 if (staggerLabels) {
|
|
paulo@89
|
4207 xTicks
|
|
paulo@89
|
4208 .selectAll('text')
|
|
paulo@89
|
4209 .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
|
|
paulo@89
|
4210 }
|
|
paulo@89
|
4211 }
|
|
paulo@89
|
4212
|
|
paulo@89
|
4213 if (showYAxis) {
|
|
paulo@89
|
4214 yAxis
|
|
paulo@89
|
4215 .scale(y)
|
|
paulo@89
|
4216 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
4217 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
4218
|
|
paulo@89
|
4219 g.select('.nv-y.nv-axis').call(yAxis);
|
|
paulo@89
|
4220 }
|
|
paulo@89
|
4221
|
|
paulo@89
|
4222 // Zero line
|
|
paulo@89
|
4223 g.select(".nv-zeroLine line")
|
|
paulo@89
|
4224 .attr("x1",0)
|
|
paulo@89
|
4225 .attr("x2",availableWidth)
|
|
paulo@89
|
4226 .attr("y1", y(0))
|
|
paulo@89
|
4227 .attr("y2", y(0))
|
|
paulo@89
|
4228 ;
|
|
paulo@89
|
4229 });
|
|
paulo@89
|
4230
|
|
paulo@89
|
4231 renderWatch.renderEnd('discreteBar chart immediate');
|
|
paulo@89
|
4232 return chart;
|
|
paulo@89
|
4233 }
|
|
paulo@89
|
4234
|
|
paulo@89
|
4235 //============================================================
|
|
paulo@89
|
4236 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
4237 //------------------------------------------------------------
|
|
paulo@89
|
4238
|
|
paulo@89
|
4239 discretebar.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
4240 evt['series'] = {
|
|
paulo@89
|
4241 key: chart.x()(evt.data),
|
|
paulo@89
|
4242 value: chart.y()(evt.data),
|
|
paulo@89
|
4243 color: evt.color
|
|
paulo@89
|
4244 };
|
|
paulo@89
|
4245 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
4246 });
|
|
paulo@89
|
4247
|
|
paulo@89
|
4248 discretebar.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
4249 tooltip.hidden(true);
|
|
paulo@89
|
4250 });
|
|
paulo@89
|
4251
|
|
paulo@89
|
4252 discretebar.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
4253 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
4254 });
|
|
paulo@89
|
4255
|
|
paulo@89
|
4256 //============================================================
|
|
paulo@89
|
4257 // Expose Public Variables
|
|
paulo@89
|
4258 //------------------------------------------------------------
|
|
paulo@89
|
4259
|
|
paulo@89
|
4260 chart.dispatch = dispatch;
|
|
paulo@89
|
4261 chart.discretebar = discretebar;
|
|
paulo@89
|
4262 chart.xAxis = xAxis;
|
|
paulo@89
|
4263 chart.yAxis = yAxis;
|
|
paulo@89
|
4264 chart.tooltip = tooltip;
|
|
paulo@89
|
4265
|
|
paulo@89
|
4266 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
4267
|
|
paulo@89
|
4268 chart._options = Object.create({}, {
|
|
paulo@89
|
4269 // simple options, just get/set the necessary values
|
|
paulo@89
|
4270 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
4271 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
4272 staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
|
|
paulo@89
|
4273 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
4274 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
4275 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
4276
|
|
paulo@89
|
4277 // deprecated options
|
|
paulo@89
|
4278 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
4279 // deprecated after 1.7.1
|
|
paulo@89
|
4280 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
4281 tooltip.enabled(!!_);
|
|
paulo@89
|
4282 }},
|
|
paulo@89
|
4283 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
4284 // deprecated after 1.7.1
|
|
paulo@89
|
4285 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
4286 tooltip.contentGenerator(_);
|
|
paulo@89
|
4287 }},
|
|
paulo@89
|
4288
|
|
paulo@89
|
4289 // options that require extra logic in the setter
|
|
paulo@89
|
4290 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
4291 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
4292 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
4293 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
4294 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
4295 }},
|
|
paulo@89
|
4296 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
4297 duration = _;
|
|
paulo@89
|
4298 renderWatch.reset(duration);
|
|
paulo@89
|
4299 discretebar.duration(duration);
|
|
paulo@89
|
4300 xAxis.duration(duration);
|
|
paulo@89
|
4301 yAxis.duration(duration);
|
|
paulo@89
|
4302 }},
|
|
paulo@89
|
4303 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
4304 color = nv.utils.getColor(_);
|
|
paulo@89
|
4305 discretebar.color(color);
|
|
paulo@89
|
4306 }},
|
|
paulo@89
|
4307 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
4308 rightAlignYAxis = _;
|
|
paulo@89
|
4309 yAxis.orient( (_) ? 'right' : 'left');
|
|
paulo@89
|
4310 }}
|
|
paulo@89
|
4311 });
|
|
paulo@89
|
4312
|
|
paulo@89
|
4313 nv.utils.inheritOptions(chart, discretebar);
|
|
paulo@89
|
4314 nv.utils.initOptions(chart);
|
|
paulo@89
|
4315
|
|
paulo@89
|
4316 return chart;
|
|
paulo@89
|
4317 }
|
|
paulo@89
|
4318
|
|
paulo@89
|
4319 nv.models.distribution = function() {
|
|
paulo@89
|
4320 "use strict";
|
|
paulo@89
|
4321 //============================================================
|
|
paulo@89
|
4322 // Public Variables with Default Settings
|
|
paulo@89
|
4323 //------------------------------------------------------------
|
|
paulo@89
|
4324
|
|
paulo@89
|
4325 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
4326 , width = 400 //technically width or height depending on x or y....
|
|
paulo@89
|
4327 , size = 8
|
|
paulo@89
|
4328 , axis = 'x' // 'x' or 'y'... horizontal or vertical
|
|
paulo@89
|
4329 , getData = function(d) { return d[axis] } // defaults d.x or d.y
|
|
paulo@89
|
4330 , color = nv.utils.defaultColor()
|
|
paulo@89
|
4331 , scale = d3.scale.linear()
|
|
paulo@89
|
4332 , domain
|
|
paulo@89
|
4333 , duration = 250
|
|
paulo@89
|
4334 , dispatch = d3.dispatch('renderEnd')
|
|
paulo@89
|
4335 ;
|
|
paulo@89
|
4336
|
|
paulo@89
|
4337 //============================================================
|
|
paulo@89
|
4338
|
|
paulo@89
|
4339
|
|
paulo@89
|
4340 //============================================================
|
|
paulo@89
|
4341 // Private Variables
|
|
paulo@89
|
4342 //------------------------------------------------------------
|
|
paulo@89
|
4343
|
|
paulo@89
|
4344 var scale0;
|
|
paulo@89
|
4345 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
4346
|
|
paulo@89
|
4347 //============================================================
|
|
paulo@89
|
4348
|
|
paulo@89
|
4349
|
|
paulo@89
|
4350 function chart(selection) {
|
|
paulo@89
|
4351 renderWatch.reset();
|
|
paulo@89
|
4352 selection.each(function(data) {
|
|
paulo@89
|
4353 var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),
|
|
paulo@89
|
4354 naxis = axis == 'x' ? 'y' : 'x',
|
|
paulo@89
|
4355 container = d3.select(this);
|
|
paulo@89
|
4356 nv.utils.initSVG(container);
|
|
paulo@89
|
4357
|
|
paulo@89
|
4358 //------------------------------------------------------------
|
|
paulo@89
|
4359 // Setup Scales
|
|
paulo@89
|
4360
|
|
paulo@89
|
4361 scale0 = scale0 || scale;
|
|
paulo@89
|
4362
|
|
paulo@89
|
4363 //------------------------------------------------------------
|
|
paulo@89
|
4364
|
|
paulo@89
|
4365
|
|
paulo@89
|
4366 //------------------------------------------------------------
|
|
paulo@89
|
4367 // Setup containers and skeleton of chart
|
|
paulo@89
|
4368
|
|
paulo@89
|
4369 var wrap = container.selectAll('g.nv-distribution').data([data]);
|
|
paulo@89
|
4370 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-distribution');
|
|
paulo@89
|
4371 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
4372 var g = wrap.select('g');
|
|
paulo@89
|
4373
|
|
paulo@89
|
4374 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
|
paulo@89
|
4375
|
|
paulo@89
|
4376 //------------------------------------------------------------
|
|
paulo@89
|
4377
|
|
paulo@89
|
4378
|
|
paulo@89
|
4379 var distWrap = g.selectAll('g.nv-dist')
|
|
paulo@89
|
4380 .data(function(d) { return d }, function(d) { return d.key });
|
|
paulo@89
|
4381
|
|
paulo@89
|
4382 distWrap.enter().append('g');
|
|
paulo@89
|
4383 distWrap
|
|
paulo@89
|
4384 .attr('class', function(d,i) { return 'nv-dist nv-series-' + i })
|
|
paulo@89
|
4385 .style('stroke', function(d,i) { return color(d, i) });
|
|
paulo@89
|
4386
|
|
paulo@89
|
4387 var dist = distWrap.selectAll('line.nv-dist' + axis)
|
|
paulo@89
|
4388 .data(function(d) { return d.values })
|
|
paulo@89
|
4389 dist.enter().append('line')
|
|
paulo@89
|
4390 .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
|
|
paulo@89
|
4391 .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
|
|
paulo@89
|
4392 renderWatch.transition(distWrap.exit().selectAll('line.nv-dist' + axis), 'dist exit')
|
|
paulo@89
|
4393 // .transition()
|
|
paulo@89
|
4394 .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
|
|
paulo@89
|
4395 .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
|
|
paulo@89
|
4396 .style('stroke-opacity', 0)
|
|
paulo@89
|
4397 .remove();
|
|
paulo@89
|
4398 dist
|
|
paulo@89
|
4399 .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
|
|
paulo@89
|
4400 .attr(naxis + '1', 0)
|
|
paulo@89
|
4401 .attr(naxis + '2', size);
|
|
paulo@89
|
4402 renderWatch.transition(dist, 'dist')
|
|
paulo@89
|
4403 // .transition()
|
|
paulo@89
|
4404 .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
|
|
paulo@89
|
4405 .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
|
|
paulo@89
|
4406
|
|
paulo@89
|
4407
|
|
paulo@89
|
4408 scale0 = scale.copy();
|
|
paulo@89
|
4409
|
|
paulo@89
|
4410 });
|
|
paulo@89
|
4411 renderWatch.renderEnd('distribution immediate');
|
|
paulo@89
|
4412 return chart;
|
|
paulo@89
|
4413 }
|
|
paulo@89
|
4414
|
|
paulo@89
|
4415
|
|
paulo@89
|
4416 //============================================================
|
|
paulo@89
|
4417 // Expose Public Variables
|
|
paulo@89
|
4418 //------------------------------------------------------------
|
|
paulo@89
|
4419 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
4420 chart.dispatch = dispatch;
|
|
paulo@89
|
4421
|
|
paulo@89
|
4422 chart.margin = function(_) {
|
|
paulo@89
|
4423 if (!arguments.length) return margin;
|
|
paulo@89
|
4424 margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
|
paulo@89
|
4425 margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
|
paulo@89
|
4426 margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
|
paulo@89
|
4427 margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
|
paulo@89
|
4428 return chart;
|
|
paulo@89
|
4429 };
|
|
paulo@89
|
4430
|
|
paulo@89
|
4431 chart.width = function(_) {
|
|
paulo@89
|
4432 if (!arguments.length) return width;
|
|
paulo@89
|
4433 width = _;
|
|
paulo@89
|
4434 return chart;
|
|
paulo@89
|
4435 };
|
|
paulo@89
|
4436
|
|
paulo@89
|
4437 chart.axis = function(_) {
|
|
paulo@89
|
4438 if (!arguments.length) return axis;
|
|
paulo@89
|
4439 axis = _;
|
|
paulo@89
|
4440 return chart;
|
|
paulo@89
|
4441 };
|
|
paulo@89
|
4442
|
|
paulo@89
|
4443 chart.size = function(_) {
|
|
paulo@89
|
4444 if (!arguments.length) return size;
|
|
paulo@89
|
4445 size = _;
|
|
paulo@89
|
4446 return chart;
|
|
paulo@89
|
4447 };
|
|
paulo@89
|
4448
|
|
paulo@89
|
4449 chart.getData = function(_) {
|
|
paulo@89
|
4450 if (!arguments.length) return getData;
|
|
paulo@89
|
4451 getData = d3.functor(_);
|
|
paulo@89
|
4452 return chart;
|
|
paulo@89
|
4453 };
|
|
paulo@89
|
4454
|
|
paulo@89
|
4455 chart.scale = function(_) {
|
|
paulo@89
|
4456 if (!arguments.length) return scale;
|
|
paulo@89
|
4457 scale = _;
|
|
paulo@89
|
4458 return chart;
|
|
paulo@89
|
4459 };
|
|
paulo@89
|
4460
|
|
paulo@89
|
4461 chart.color = function(_) {
|
|
paulo@89
|
4462 if (!arguments.length) return color;
|
|
paulo@89
|
4463 color = nv.utils.getColor(_);
|
|
paulo@89
|
4464 return chart;
|
|
paulo@89
|
4465 };
|
|
paulo@89
|
4466
|
|
paulo@89
|
4467 chart.duration = function(_) {
|
|
paulo@89
|
4468 if (!arguments.length) return duration;
|
|
paulo@89
|
4469 duration = _;
|
|
paulo@89
|
4470 renderWatch.reset(duration);
|
|
paulo@89
|
4471 return chart;
|
|
paulo@89
|
4472 };
|
|
paulo@89
|
4473 //============================================================
|
|
paulo@89
|
4474
|
|
paulo@89
|
4475
|
|
paulo@89
|
4476 return chart;
|
|
paulo@89
|
4477 }
|
|
paulo@89
|
4478 nv.models.furiousLegend = function() {
|
|
paulo@89
|
4479 "use strict";
|
|
paulo@89
|
4480
|
|
paulo@89
|
4481 //============================================================
|
|
paulo@89
|
4482 // Public Variables with Default Settings
|
|
paulo@89
|
4483 //------------------------------------------------------------
|
|
paulo@89
|
4484
|
|
paulo@89
|
4485 var margin = {top: 5, right: 0, bottom: 5, left: 0}
|
|
paulo@89
|
4486 , width = 400
|
|
paulo@89
|
4487 , height = 20
|
|
paulo@89
|
4488 , getKey = function(d) { return d.key }
|
|
paulo@89
|
4489 , color = nv.utils.getColor()
|
|
paulo@89
|
4490 , align = true
|
|
paulo@89
|
4491 , padding = 28 //define how much space between legend items. - recommend 32 for furious version
|
|
paulo@89
|
4492 , rightAlign = true
|
|
paulo@89
|
4493 , updateState = true //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.
|
|
paulo@89
|
4494 , radioButtonMode = false //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)
|
|
paulo@89
|
4495 , expanded = false
|
|
paulo@89
|
4496 , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')
|
|
paulo@89
|
4497 , vers = 'classic' //Options are "classic" and "furious"
|
|
paulo@89
|
4498 ;
|
|
paulo@89
|
4499
|
|
paulo@89
|
4500 function chart(selection) {
|
|
paulo@89
|
4501 selection.each(function(data) {
|
|
paulo@89
|
4502 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
4503 container = d3.select(this);
|
|
paulo@89
|
4504 nv.utils.initSVG(container);
|
|
paulo@89
|
4505
|
|
paulo@89
|
4506 // Setup containers and skeleton of chart
|
|
paulo@89
|
4507 var wrap = container.selectAll('g.nv-legend').data([data]);
|
|
paulo@89
|
4508 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');
|
|
paulo@89
|
4509 var g = wrap.select('g');
|
|
paulo@89
|
4510
|
|
paulo@89
|
4511 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
4512
|
|
paulo@89
|
4513 var series = g.selectAll('.nv-series')
|
|
paulo@89
|
4514 .data(function(d) {
|
|
paulo@89
|
4515 if(vers != 'furious') return d;
|
|
paulo@89
|
4516
|
|
paulo@89
|
4517 return d.filter(function(n) {
|
|
paulo@89
|
4518 return expanded ? true : !n.disengaged;
|
|
paulo@89
|
4519 });
|
|
paulo@89
|
4520 });
|
|
paulo@89
|
4521 var seriesEnter = series.enter().append('g').attr('class', 'nv-series')
|
|
paulo@89
|
4522
|
|
paulo@89
|
4523 var seriesShape;
|
|
paulo@89
|
4524
|
|
paulo@89
|
4525 if(vers == 'classic') {
|
|
paulo@89
|
4526 seriesEnter.append('circle')
|
|
paulo@89
|
4527 .style('stroke-width', 2)
|
|
paulo@89
|
4528 .attr('class','nv-legend-symbol')
|
|
paulo@89
|
4529 .attr('r', 5);
|
|
paulo@89
|
4530
|
|
paulo@89
|
4531 seriesShape = series.select('circle');
|
|
paulo@89
|
4532 } else if (vers == 'furious') {
|
|
paulo@89
|
4533 seriesEnter.append('rect')
|
|
paulo@89
|
4534 .style('stroke-width', 2)
|
|
paulo@89
|
4535 .attr('class','nv-legend-symbol')
|
|
paulo@89
|
4536 .attr('rx', 3)
|
|
paulo@89
|
4537 .attr('ry', 3);
|
|
paulo@89
|
4538
|
|
paulo@89
|
4539 seriesShape = series.select('rect');
|
|
paulo@89
|
4540
|
|
paulo@89
|
4541 seriesEnter.append('g')
|
|
paulo@89
|
4542 .attr('class', 'nv-check-box')
|
|
paulo@89
|
4543 .property('innerHTML','<path d="M0.5,5 L22.5,5 L22.5,26.5 L0.5,26.5 L0.5,5 Z" class="nv-box"></path><path d="M5.5,12.8618467 L11.9185089,19.2803556 L31,0.198864511" class="nv-check"></path>')
|
|
paulo@89
|
4544 .attr('transform', 'translate(-10,-8)scale(0.5)');
|
|
paulo@89
|
4545
|
|
paulo@89
|
4546 var seriesCheckbox = series.select('.nv-check-box');
|
|
paulo@89
|
4547
|
|
paulo@89
|
4548 seriesCheckbox.each(function(d,i) {
|
|
paulo@89
|
4549 d3.select(this).selectAll('path')
|
|
paulo@89
|
4550 .attr('stroke', setTextColor(d,i));
|
|
paulo@89
|
4551 });
|
|
paulo@89
|
4552 }
|
|
paulo@89
|
4553
|
|
paulo@89
|
4554 seriesEnter.append('text')
|
|
paulo@89
|
4555 .attr('text-anchor', 'start')
|
|
paulo@89
|
4556 .attr('class','nv-legend-text')
|
|
paulo@89
|
4557 .attr('dy', '.32em')
|
|
paulo@89
|
4558 .attr('dx', '8');
|
|
paulo@89
|
4559
|
|
paulo@89
|
4560 var seriesText = series.select('text.nv-legend-text');
|
|
paulo@89
|
4561
|
|
paulo@89
|
4562 series
|
|
paulo@89
|
4563 .on('mouseover', function(d,i) {
|
|
paulo@89
|
4564 dispatch.legendMouseover(d,i); //TODO: Make consistent with other event objects
|
|
paulo@89
|
4565 })
|
|
paulo@89
|
4566 .on('mouseout', function(d,i) {
|
|
paulo@89
|
4567 dispatch.legendMouseout(d,i);
|
|
paulo@89
|
4568 })
|
|
paulo@89
|
4569 .on('click', function(d,i) {
|
|
paulo@89
|
4570 dispatch.legendClick(d,i);
|
|
paulo@89
|
4571 // make sure we re-get data in case it was modified
|
|
paulo@89
|
4572 var data = series.data();
|
|
paulo@89
|
4573 if (updateState) {
|
|
paulo@89
|
4574 if(vers =='classic') {
|
|
paulo@89
|
4575 if (radioButtonMode) {
|
|
paulo@89
|
4576 //Radio button mode: set every series to disabled,
|
|
paulo@89
|
4577 // and enable the clicked series.
|
|
paulo@89
|
4578 data.forEach(function(series) { series.disabled = true});
|
|
paulo@89
|
4579 d.disabled = false;
|
|
paulo@89
|
4580 }
|
|
paulo@89
|
4581 else {
|
|
paulo@89
|
4582 d.disabled = !d.disabled;
|
|
paulo@89
|
4583 if (data.every(function(series) { return series.disabled})) {
|
|
paulo@89
|
4584 //the default behavior of NVD3 legends is, if every single series
|
|
paulo@89
|
4585 // is disabled, turn all series' back on.
|
|
paulo@89
|
4586 data.forEach(function(series) { series.disabled = false});
|
|
paulo@89
|
4587 }
|
|
paulo@89
|
4588 }
|
|
paulo@89
|
4589 } else if(vers == 'furious') {
|
|
paulo@89
|
4590 if(expanded) {
|
|
paulo@89
|
4591 d.disengaged = !d.disengaged;
|
|
paulo@89
|
4592 d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;
|
|
paulo@89
|
4593 d.disabled = d.disengaged || d.userDisabled;
|
|
paulo@89
|
4594 } else if (!expanded) {
|
|
paulo@89
|
4595 d.disabled = !d.disabled;
|
|
paulo@89
|
4596 d.userDisabled = d.disabled;
|
|
paulo@89
|
4597 var engaged = data.filter(function(d) { return !d.disengaged; });
|
|
paulo@89
|
4598 if (engaged.every(function(series) { return series.userDisabled })) {
|
|
paulo@89
|
4599 //the default behavior of NVD3 legends is, if every single series
|
|
paulo@89
|
4600 // is disabled, turn all series' back on.
|
|
paulo@89
|
4601 data.forEach(function(series) {
|
|
paulo@89
|
4602 series.disabled = series.userDisabled = false;
|
|
paulo@89
|
4603 });
|
|
paulo@89
|
4604 }
|
|
paulo@89
|
4605 }
|
|
paulo@89
|
4606 }
|
|
paulo@89
|
4607 dispatch.stateChange({
|
|
paulo@89
|
4608 disabled: data.map(function(d) { return !!d.disabled }),
|
|
paulo@89
|
4609 disengaged: data.map(function(d) { return !!d.disengaged })
|
|
paulo@89
|
4610 });
|
|
paulo@89
|
4611
|
|
paulo@89
|
4612 }
|
|
paulo@89
|
4613 })
|
|
paulo@89
|
4614 .on('dblclick', function(d,i) {
|
|
paulo@89
|
4615 if(vers == 'furious' && expanded) return;
|
|
paulo@89
|
4616 dispatch.legendDblclick(d,i);
|
|
paulo@89
|
4617 if (updateState) {
|
|
paulo@89
|
4618 // make sure we re-get data in case it was modified
|
|
paulo@89
|
4619 var data = series.data();
|
|
paulo@89
|
4620 //the default behavior of NVD3 legends, when double clicking one,
|
|
paulo@89
|
4621 // is to set all other series' to false, and make the double clicked series enabled.
|
|
paulo@89
|
4622 data.forEach(function(series) {
|
|
paulo@89
|
4623 series.disabled = true;
|
|
paulo@89
|
4624 if(vers == 'furious') series.userDisabled = series.disabled;
|
|
paulo@89
|
4625 });
|
|
paulo@89
|
4626 d.disabled = false;
|
|
paulo@89
|
4627 if(vers == 'furious') d.userDisabled = d.disabled;
|
|
paulo@89
|
4628 dispatch.stateChange({
|
|
paulo@89
|
4629 disabled: data.map(function(d) { return !!d.disabled })
|
|
paulo@89
|
4630 });
|
|
paulo@89
|
4631 }
|
|
paulo@89
|
4632 });
|
|
paulo@89
|
4633
|
|
paulo@89
|
4634 series.classed('nv-disabled', function(d) { return d.userDisabled });
|
|
paulo@89
|
4635 series.exit().remove();
|
|
paulo@89
|
4636
|
|
paulo@89
|
4637 seriesText
|
|
paulo@89
|
4638 .attr('fill', setTextColor)
|
|
paulo@89
|
4639 .text(getKey);
|
|
paulo@89
|
4640
|
|
paulo@89
|
4641 //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)
|
|
paulo@89
|
4642 // NEW ALIGNING CODE, TODO: clean up
|
|
paulo@89
|
4643
|
|
paulo@89
|
4644 var versPadding;
|
|
paulo@89
|
4645 switch(vers) {
|
|
paulo@89
|
4646 case 'furious' :
|
|
paulo@89
|
4647 versPadding = 23;
|
|
paulo@89
|
4648 break;
|
|
paulo@89
|
4649 case 'classic' :
|
|
paulo@89
|
4650 versPadding = 20;
|
|
paulo@89
|
4651 }
|
|
paulo@89
|
4652
|
|
paulo@89
|
4653 if (align) {
|
|
paulo@89
|
4654
|
|
paulo@89
|
4655 var seriesWidths = [];
|
|
paulo@89
|
4656 series.each(function(d,i) {
|
|
paulo@89
|
4657 var legendText = d3.select(this).select('text');
|
|
paulo@89
|
4658 var nodeTextLength;
|
|
paulo@89
|
4659 try {
|
|
paulo@89
|
4660 nodeTextLength = legendText.node().getComputedTextLength();
|
|
paulo@89
|
4661 // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead
|
|
paulo@89
|
4662 if(nodeTextLength <= 0) throw Error();
|
|
paulo@89
|
4663 }
|
|
paulo@89
|
4664 catch(e) {
|
|
paulo@89
|
4665 nodeTextLength = nv.utils.calcApproxTextWidth(legendText);
|
|
paulo@89
|
4666 }
|
|
paulo@89
|
4667
|
|
paulo@89
|
4668 seriesWidths.push(nodeTextLength + padding);
|
|
paulo@89
|
4669 });
|
|
paulo@89
|
4670
|
|
paulo@89
|
4671 var seriesPerRow = 0;
|
|
paulo@89
|
4672 var legendWidth = 0;
|
|
paulo@89
|
4673 var columnWidths = [];
|
|
paulo@89
|
4674
|
|
paulo@89
|
4675 while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
|
|
paulo@89
|
4676 columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
|
|
paulo@89
|
4677 legendWidth += seriesWidths[seriesPerRow++];
|
|
paulo@89
|
4678 }
|
|
paulo@89
|
4679 if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row
|
|
paulo@89
|
4680
|
|
paulo@89
|
4681 while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
|
|
paulo@89
|
4682 columnWidths = [];
|
|
paulo@89
|
4683 seriesPerRow--;
|
|
paulo@89
|
4684
|
|
paulo@89
|
4685 for (var k = 0; k < seriesWidths.length; k++) {
|
|
paulo@89
|
4686 if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
|
|
paulo@89
|
4687 columnWidths[k % seriesPerRow] = seriesWidths[k];
|
|
paulo@89
|
4688 }
|
|
paulo@89
|
4689
|
|
paulo@89
|
4690 legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
|
|
paulo@89
|
4691 return prev + cur;
|
|
paulo@89
|
4692 });
|
|
paulo@89
|
4693 }
|
|
paulo@89
|
4694
|
|
paulo@89
|
4695 var xPositions = [];
|
|
paulo@89
|
4696 for (var i = 0, curX = 0; i < seriesPerRow; i++) {
|
|
paulo@89
|
4697 xPositions[i] = curX;
|
|
paulo@89
|
4698 curX += columnWidths[i];
|
|
paulo@89
|
4699 }
|
|
paulo@89
|
4700
|
|
paulo@89
|
4701 series
|
|
paulo@89
|
4702 .attr('transform', function(d, i) {
|
|
paulo@89
|
4703 return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';
|
|
paulo@89
|
4704 });
|
|
paulo@89
|
4705
|
|
paulo@89
|
4706 //position legend as far right as possible within the total width
|
|
paulo@89
|
4707 if (rightAlign) {
|
|
paulo@89
|
4708 g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
|
|
paulo@89
|
4709 }
|
|
paulo@89
|
4710 else {
|
|
paulo@89
|
4711 g.attr('transform', 'translate(0' + ',' + margin.top + ')');
|
|
paulo@89
|
4712 }
|
|
paulo@89
|
4713
|
|
paulo@89
|
4714 height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);
|
|
paulo@89
|
4715
|
|
paulo@89
|
4716 } else {
|
|
paulo@89
|
4717
|
|
paulo@89
|
4718 var ypos = 5,
|
|
paulo@89
|
4719 newxpos = 5,
|
|
paulo@89
|
4720 maxwidth = 0,
|
|
paulo@89
|
4721 xpos;
|
|
paulo@89
|
4722 series
|
|
paulo@89
|
4723 .attr('transform', function(d, i) {
|
|
paulo@89
|
4724 var length = d3.select(this).select('text').node().getComputedTextLength() + padding;
|
|
paulo@89
|
4725 xpos = newxpos;
|
|
paulo@89
|
4726
|
|
paulo@89
|
4727 if (width < margin.left + margin.right + xpos + length) {
|
|
paulo@89
|
4728 newxpos = xpos = 5;
|
|
paulo@89
|
4729 ypos += versPadding;
|
|
paulo@89
|
4730 }
|
|
paulo@89
|
4731
|
|
paulo@89
|
4732 newxpos += length;
|
|
paulo@89
|
4733 if (newxpos > maxwidth) maxwidth = newxpos;
|
|
paulo@89
|
4734
|
|
paulo@89
|
4735 return 'translate(' + xpos + ',' + ypos + ')';
|
|
paulo@89
|
4736 });
|
|
paulo@89
|
4737
|
|
paulo@89
|
4738 //position legend as far right as possible within the total width
|
|
paulo@89
|
4739 g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
|
|
paulo@89
|
4740
|
|
paulo@89
|
4741 height = margin.top + margin.bottom + ypos + 15;
|
|
paulo@89
|
4742 }
|
|
paulo@89
|
4743
|
|
paulo@89
|
4744 if(vers == 'furious') {
|
|
paulo@89
|
4745 // Size rectangles after text is placed
|
|
paulo@89
|
4746 seriesShape
|
|
paulo@89
|
4747 .attr('width', function(d,i) {
|
|
paulo@89
|
4748 return seriesText[0][i].getComputedTextLength() + 27;
|
|
paulo@89
|
4749 })
|
|
paulo@89
|
4750 .attr('height', 18)
|
|
paulo@89
|
4751 .attr('y', -9)
|
|
paulo@89
|
4752 .attr('x', -15)
|
|
paulo@89
|
4753 }
|
|
paulo@89
|
4754
|
|
paulo@89
|
4755 seriesShape
|
|
paulo@89
|
4756 .style('fill', setBGColor)
|
|
paulo@89
|
4757 .style('stroke', function(d,i) { return d.color || color(d, i) });
|
|
paulo@89
|
4758 });
|
|
paulo@89
|
4759
|
|
paulo@89
|
4760 function setTextColor(d,i) {
|
|
paulo@89
|
4761 if(vers != 'furious') return '#000';
|
|
paulo@89
|
4762 if(expanded) {
|
|
paulo@89
|
4763 return d.disengaged ? color(d,i) : '#fff';
|
|
paulo@89
|
4764 } else if (!expanded) {
|
|
paulo@89
|
4765 return !!d.disabled ? color(d,i) : '#fff';
|
|
paulo@89
|
4766 }
|
|
paulo@89
|
4767 }
|
|
paulo@89
|
4768
|
|
paulo@89
|
4769 function setBGColor(d,i) {
|
|
paulo@89
|
4770 if(expanded && vers == 'furious') {
|
|
paulo@89
|
4771 return d.disengaged ? '#fff' : color(d,i);
|
|
paulo@89
|
4772 } else {
|
|
paulo@89
|
4773 return !!d.disabled ? '#fff' : color(d,i);
|
|
paulo@89
|
4774 }
|
|
paulo@89
|
4775 }
|
|
paulo@89
|
4776
|
|
paulo@89
|
4777 return chart;
|
|
paulo@89
|
4778 }
|
|
paulo@89
|
4779
|
|
paulo@89
|
4780 //============================================================
|
|
paulo@89
|
4781 // Expose Public Variables
|
|
paulo@89
|
4782 //------------------------------------------------------------
|
|
paulo@89
|
4783
|
|
paulo@89
|
4784 chart.dispatch = dispatch;
|
|
paulo@89
|
4785 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
4786
|
|
paulo@89
|
4787 chart._options = Object.create({}, {
|
|
paulo@89
|
4788 // simple options, just get/set the necessary values
|
|
paulo@89
|
4789 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
4790 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
4791 key: {get: function(){return getKey;}, set: function(_){getKey=_;}},
|
|
paulo@89
|
4792 align: {get: function(){return align;}, set: function(_){align=_;}},
|
|
paulo@89
|
4793 rightAlign: {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},
|
|
paulo@89
|
4794 padding: {get: function(){return padding;}, set: function(_){padding=_;}},
|
|
paulo@89
|
4795 updateState: {get: function(){return updateState;}, set: function(_){updateState=_;}},
|
|
paulo@89
|
4796 radioButtonMode: {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},
|
|
paulo@89
|
4797 expanded: {get: function(){return expanded;}, set: function(_){expanded=_;}},
|
|
paulo@89
|
4798 vers: {get: function(){return vers;}, set: function(_){vers=_;}},
|
|
paulo@89
|
4799
|
|
paulo@89
|
4800 // options that require extra logic in the setter
|
|
paulo@89
|
4801 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
4802 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
4803 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
4804 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
4805 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
4806 }},
|
|
paulo@89
|
4807 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
4808 color = nv.utils.getColor(_);
|
|
paulo@89
|
4809 }}
|
|
paulo@89
|
4810 });
|
|
paulo@89
|
4811
|
|
paulo@89
|
4812 nv.utils.initOptions(chart);
|
|
paulo@89
|
4813
|
|
paulo@89
|
4814 return chart;
|
|
paulo@89
|
4815 };
|
|
paulo@89
|
4816 //TODO: consider deprecating and using multibar with single series for this
|
|
paulo@89
|
4817 nv.models.historicalBar = function() {
|
|
paulo@89
|
4818 "use strict";
|
|
paulo@89
|
4819
|
|
paulo@89
|
4820 //============================================================
|
|
paulo@89
|
4821 // Public Variables with Default Settings
|
|
paulo@89
|
4822 //------------------------------------------------------------
|
|
paulo@89
|
4823
|
|
paulo@89
|
4824 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
4825 , width = null
|
|
paulo@89
|
4826 , height = null
|
|
paulo@89
|
4827 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
4828 , container = null
|
|
paulo@89
|
4829 , x = d3.scale.linear()
|
|
paulo@89
|
4830 , y = d3.scale.linear()
|
|
paulo@89
|
4831 , getX = function(d) { return d.x }
|
|
paulo@89
|
4832 , getY = function(d) { return d.y }
|
|
paulo@89
|
4833 , forceX = []
|
|
paulo@89
|
4834 , forceY = [0]
|
|
paulo@89
|
4835 , padData = false
|
|
paulo@89
|
4836 , clipEdge = true
|
|
paulo@89
|
4837 , color = nv.utils.defaultColor()
|
|
paulo@89
|
4838 , xDomain
|
|
paulo@89
|
4839 , yDomain
|
|
paulo@89
|
4840 , xRange
|
|
paulo@89
|
4841 , yRange
|
|
paulo@89
|
4842 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
4843 , interactive = true
|
|
paulo@89
|
4844 ;
|
|
paulo@89
|
4845
|
|
paulo@89
|
4846 var renderWatch = nv.utils.renderWatch(dispatch, 0);
|
|
paulo@89
|
4847
|
|
paulo@89
|
4848 function chart(selection) {
|
|
paulo@89
|
4849 selection.each(function(data) {
|
|
paulo@89
|
4850 renderWatch.reset();
|
|
paulo@89
|
4851
|
|
paulo@89
|
4852 container = d3.select(this);
|
|
paulo@89
|
4853 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
4854 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
4855
|
|
paulo@89
|
4856 nv.utils.initSVG(container);
|
|
paulo@89
|
4857
|
|
paulo@89
|
4858 // Setup Scales
|
|
paulo@89
|
4859 x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
|
|
paulo@89
|
4860
|
|
paulo@89
|
4861 if (padData)
|
|
paulo@89
|
4862 x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
|
paulo@89
|
4863 else
|
|
paulo@89
|
4864 x.range(xRange || [0, availableWidth]);
|
|
paulo@89
|
4865
|
|
paulo@89
|
4866 y.domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
|
|
paulo@89
|
4867 .range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
4868
|
|
paulo@89
|
4869 // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
|
paulo@89
|
4870 if (x.domain()[0] === x.domain()[1])
|
|
paulo@89
|
4871 x.domain()[0] ?
|
|
paulo@89
|
4872 x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
|
paulo@89
|
4873 : x.domain([-1,1]);
|
|
paulo@89
|
4874
|
|
paulo@89
|
4875 if (y.domain()[0] === y.domain()[1])
|
|
paulo@89
|
4876 y.domain()[0] ?
|
|
paulo@89
|
4877 y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
|
|
paulo@89
|
4878 : y.domain([-1,1]);
|
|
paulo@89
|
4879
|
|
paulo@89
|
4880 // Setup containers and skeleton of chart
|
|
paulo@89
|
4881 var wrap = container.selectAll('g.nv-wrap.nv-historicalBar-' + id).data([data[0].values]);
|
|
paulo@89
|
4882 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBar-' + id);
|
|
paulo@89
|
4883 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
4884 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
4885 var g = wrap.select('g');
|
|
paulo@89
|
4886
|
|
paulo@89
|
4887 gEnter.append('g').attr('class', 'nv-bars');
|
|
paulo@89
|
4888 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
4889
|
|
paulo@89
|
4890 container
|
|
paulo@89
|
4891 .on('click', function(d,i) {
|
|
paulo@89
|
4892 dispatch.chartClick({
|
|
paulo@89
|
4893 data: d,
|
|
paulo@89
|
4894 index: i,
|
|
paulo@89
|
4895 pos: d3.event,
|
|
paulo@89
|
4896 id: id
|
|
paulo@89
|
4897 });
|
|
paulo@89
|
4898 });
|
|
paulo@89
|
4899
|
|
paulo@89
|
4900 defsEnter.append('clipPath')
|
|
paulo@89
|
4901 .attr('id', 'nv-chart-clip-path-' + id)
|
|
paulo@89
|
4902 .append('rect');
|
|
paulo@89
|
4903
|
|
paulo@89
|
4904 wrap.select('#nv-chart-clip-path-' + id + ' rect')
|
|
paulo@89
|
4905 .attr('width', availableWidth)
|
|
paulo@89
|
4906 .attr('height', availableHeight);
|
|
paulo@89
|
4907
|
|
paulo@89
|
4908 g.attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
|
|
paulo@89
|
4909
|
|
paulo@89
|
4910 var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
|
|
paulo@89
|
4911 .data(function(d) { return d }, function(d,i) {return getX(d,i)});
|
|
paulo@89
|
4912 bars.exit().remove();
|
|
paulo@89
|
4913
|
|
paulo@89
|
4914 bars.enter().append('rect')
|
|
paulo@89
|
4915 .attr('x', 0 )
|
|
paulo@89
|
4916 .attr('y', function(d,i) { return nv.utils.NaNtoZero(y(Math.max(0, getY(d,i)))) })
|
|
paulo@89
|
4917 .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.abs(y(getY(d,i)) - y(0))) })
|
|
paulo@89
|
4918 .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
|
paulo@89
|
4919 .on('mouseover', function(d,i) {
|
|
paulo@89
|
4920 if (!interactive) return;
|
|
paulo@89
|
4921 d3.select(this).classed('hover', true);
|
|
paulo@89
|
4922 dispatch.elementMouseover({
|
|
paulo@89
|
4923 data: d,
|
|
paulo@89
|
4924 index: i,
|
|
paulo@89
|
4925 color: d3.select(this).style("fill")
|
|
paulo@89
|
4926 });
|
|
paulo@89
|
4927
|
|
paulo@89
|
4928 })
|
|
paulo@89
|
4929 .on('mouseout', function(d,i) {
|
|
paulo@89
|
4930 if (!interactive) return;
|
|
paulo@89
|
4931 d3.select(this).classed('hover', false);
|
|
paulo@89
|
4932 dispatch.elementMouseout({
|
|
paulo@89
|
4933 data: d,
|
|
paulo@89
|
4934 index: i,
|
|
paulo@89
|
4935 color: d3.select(this).style("fill")
|
|
paulo@89
|
4936 });
|
|
paulo@89
|
4937 })
|
|
paulo@89
|
4938 .on('mousemove', function(d,i) {
|
|
paulo@89
|
4939 if (!interactive) return;
|
|
paulo@89
|
4940 dispatch.elementMousemove({
|
|
paulo@89
|
4941 data: d,
|
|
paulo@89
|
4942 index: i,
|
|
paulo@89
|
4943 color: d3.select(this).style("fill")
|
|
paulo@89
|
4944 });
|
|
paulo@89
|
4945 })
|
|
paulo@89
|
4946 .on('click', function(d,i) {
|
|
paulo@89
|
4947 if (!interactive) return;
|
|
paulo@89
|
4948 dispatch.elementClick({
|
|
paulo@89
|
4949 data: d,
|
|
paulo@89
|
4950 index: i,
|
|
paulo@89
|
4951 color: d3.select(this).style("fill")
|
|
paulo@89
|
4952 });
|
|
paulo@89
|
4953 d3.event.stopPropagation();
|
|
paulo@89
|
4954 })
|
|
paulo@89
|
4955 .on('dblclick', function(d,i) {
|
|
paulo@89
|
4956 if (!interactive) return;
|
|
paulo@89
|
4957 dispatch.elementDblClick({
|
|
paulo@89
|
4958 data: d,
|
|
paulo@89
|
4959 index: i,
|
|
paulo@89
|
4960 color: d3.select(this).style("fill")
|
|
paulo@89
|
4961 });
|
|
paulo@89
|
4962 d3.event.stopPropagation();
|
|
paulo@89
|
4963 });
|
|
paulo@89
|
4964
|
|
paulo@89
|
4965 bars
|
|
paulo@89
|
4966 .attr('fill', function(d,i) { return color(d, i); })
|
|
paulo@89
|
4967 .attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
|
|
paulo@89
|
4968 .watchTransition(renderWatch, 'bars')
|
|
paulo@89
|
4969 .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })
|
|
paulo@89
|
4970 //TODO: better width calculations that don't assume always uniform data spacing;w
|
|
paulo@89
|
4971 .attr('width', (availableWidth / data[0].values.length) * .9 );
|
|
paulo@89
|
4972
|
|
paulo@89
|
4973 bars.watchTransition(renderWatch, 'bars')
|
|
paulo@89
|
4974 .attr('y', function(d,i) {
|
|
paulo@89
|
4975 var rval = getY(d,i) < 0 ?
|
|
paulo@89
|
4976 y(0) :
|
|
paulo@89
|
4977 y(0) - y(getY(d,i)) < 1 ?
|
|
paulo@89
|
4978 y(0) - 1 :
|
|
paulo@89
|
4979 y(getY(d,i));
|
|
paulo@89
|
4980 return nv.utils.NaNtoZero(rval);
|
|
paulo@89
|
4981 })
|
|
paulo@89
|
4982 .attr('height', function(d,i) { return nv.utils.NaNtoZero(Math.max(Math.abs(y(getY(d,i)) - y(0)),1)) });
|
|
paulo@89
|
4983
|
|
paulo@89
|
4984 });
|
|
paulo@89
|
4985
|
|
paulo@89
|
4986 renderWatch.renderEnd('historicalBar immediate');
|
|
paulo@89
|
4987 return chart;
|
|
paulo@89
|
4988 }
|
|
paulo@89
|
4989
|
|
paulo@89
|
4990 //Create methods to allow outside functions to highlight a specific bar.
|
|
paulo@89
|
4991 chart.highlightPoint = function(pointIndex, isHoverOver) {
|
|
paulo@89
|
4992 container
|
|
paulo@89
|
4993 .select(".nv-bars .nv-bar-0-" + pointIndex)
|
|
paulo@89
|
4994 .classed("hover", isHoverOver)
|
|
paulo@89
|
4995 ;
|
|
paulo@89
|
4996 };
|
|
paulo@89
|
4997
|
|
paulo@89
|
4998 chart.clearHighlights = function() {
|
|
paulo@89
|
4999 container
|
|
paulo@89
|
5000 .select(".nv-bars .nv-bar.hover")
|
|
paulo@89
|
5001 .classed("hover", false)
|
|
paulo@89
|
5002 ;
|
|
paulo@89
|
5003 };
|
|
paulo@89
|
5004
|
|
paulo@89
|
5005 //============================================================
|
|
paulo@89
|
5006 // Expose Public Variables
|
|
paulo@89
|
5007 //------------------------------------------------------------
|
|
paulo@89
|
5008
|
|
paulo@89
|
5009 chart.dispatch = dispatch;
|
|
paulo@89
|
5010 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
5011
|
|
paulo@89
|
5012 chart._options = Object.create({}, {
|
|
paulo@89
|
5013 // simple options, just get/set the necessary values
|
|
paulo@89
|
5014 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
5015 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
5016 forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},
|
|
paulo@89
|
5017 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
5018 padData: {get: function(){return padData;}, set: function(_){padData=_;}},
|
|
paulo@89
|
5019 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
5020 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
5021 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
5022 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
5023 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
5024 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
5025 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
5026 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
5027 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
5028 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
5029 interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
|
|
paulo@89
|
5030
|
|
paulo@89
|
5031 // options that require extra logic in the setter
|
|
paulo@89
|
5032 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
5033 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
5034 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
5035 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
5036 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
5037 }},
|
|
paulo@89
|
5038 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
5039 color = nv.utils.getColor(_);
|
|
paulo@89
|
5040 }}
|
|
paulo@89
|
5041 });
|
|
paulo@89
|
5042
|
|
paulo@89
|
5043 nv.utils.initOptions(chart);
|
|
paulo@89
|
5044
|
|
paulo@89
|
5045 return chart;
|
|
paulo@89
|
5046 };
|
|
paulo@89
|
5047
|
|
paulo@89
|
5048 nv.models.historicalBarChart = function(bar_model) {
|
|
paulo@89
|
5049 "use strict";
|
|
paulo@89
|
5050
|
|
paulo@89
|
5051 //============================================================
|
|
paulo@89
|
5052 // Public Variables with Default Settings
|
|
paulo@89
|
5053 //------------------------------------------------------------
|
|
paulo@89
|
5054
|
|
paulo@89
|
5055 var bars = bar_model || nv.models.historicalBar()
|
|
paulo@89
|
5056 , xAxis = nv.models.axis()
|
|
paulo@89
|
5057 , yAxis = nv.models.axis()
|
|
paulo@89
|
5058 , legend = nv.models.legend()
|
|
paulo@89
|
5059 , interactiveLayer = nv.interactiveGuideline()
|
|
paulo@89
|
5060 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
5061 ;
|
|
paulo@89
|
5062
|
|
paulo@89
|
5063
|
|
paulo@89
|
5064 var margin = {top: 30, right: 90, bottom: 50, left: 90}
|
|
paulo@89
|
5065 , color = nv.utils.defaultColor()
|
|
paulo@89
|
5066 , width = null
|
|
paulo@89
|
5067 , height = null
|
|
paulo@89
|
5068 , showLegend = false
|
|
paulo@89
|
5069 , showXAxis = true
|
|
paulo@89
|
5070 , showYAxis = true
|
|
paulo@89
|
5071 , rightAlignYAxis = false
|
|
paulo@89
|
5072 , useInteractiveGuideline = false
|
|
paulo@89
|
5073 , x
|
|
paulo@89
|
5074 , y
|
|
paulo@89
|
5075 , state = {}
|
|
paulo@89
|
5076 , defaultState = null
|
|
paulo@89
|
5077 , noData = null
|
|
paulo@89
|
5078 , dispatch = d3.dispatch('tooltipHide', 'stateChange', 'changeState', 'renderEnd')
|
|
paulo@89
|
5079 , transitionDuration = 250
|
|
paulo@89
|
5080 ;
|
|
paulo@89
|
5081
|
|
paulo@89
|
5082 xAxis.orient('bottom').tickPadding(7);
|
|
paulo@89
|
5083 yAxis.orient( (rightAlignYAxis) ? 'right' : 'left');
|
|
paulo@89
|
5084 tooltip
|
|
paulo@89
|
5085 .duration(0)
|
|
paulo@89
|
5086 .headerEnabled(false)
|
|
paulo@89
|
5087 .valueFormatter(function(d, i) {
|
|
paulo@89
|
5088 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
5089 })
|
|
paulo@89
|
5090 .headerFormatter(function(d, i) {
|
|
paulo@89
|
5091 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
5092 });
|
|
paulo@89
|
5093
|
|
paulo@89
|
5094
|
|
paulo@89
|
5095 //============================================================
|
|
paulo@89
|
5096 // Private Variables
|
|
paulo@89
|
5097 //------------------------------------------------------------
|
|
paulo@89
|
5098
|
|
paulo@89
|
5099 var renderWatch = nv.utils.renderWatch(dispatch, 0);
|
|
paulo@89
|
5100
|
|
paulo@89
|
5101 function chart(selection) {
|
|
paulo@89
|
5102 selection.each(function(data) {
|
|
paulo@89
|
5103 renderWatch.reset();
|
|
paulo@89
|
5104 renderWatch.models(bars);
|
|
paulo@89
|
5105 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
5106 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
5107
|
|
paulo@89
|
5108 var container = d3.select(this),
|
|
paulo@89
|
5109 that = this;
|
|
paulo@89
|
5110 nv.utils.initSVG(container);
|
|
paulo@89
|
5111 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
5112 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
5113
|
|
paulo@89
|
5114 chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
|
|
paulo@89
|
5115 chart.container = this;
|
|
paulo@89
|
5116
|
|
paulo@89
|
5117 //set state.disabled
|
|
paulo@89
|
5118 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
5119
|
|
paulo@89
|
5120 if (!defaultState) {
|
|
paulo@89
|
5121 var key;
|
|
paulo@89
|
5122 defaultState = {};
|
|
paulo@89
|
5123 for (key in state) {
|
|
paulo@89
|
5124 if (state[key] instanceof Array)
|
|
paulo@89
|
5125 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
5126 else
|
|
paulo@89
|
5127 defaultState[key] = state[key];
|
|
paulo@89
|
5128 }
|
|
paulo@89
|
5129 }
|
|
paulo@89
|
5130
|
|
paulo@89
|
5131 // Display noData message if there's nothing to show.
|
|
paulo@89
|
5132 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
5133 nv.utils.noData(chart, container)
|
|
paulo@89
|
5134 return chart;
|
|
paulo@89
|
5135 } else {
|
|
paulo@89
|
5136 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
5137 }
|
|
paulo@89
|
5138
|
|
paulo@89
|
5139 // Setup Scales
|
|
paulo@89
|
5140 x = bars.xScale();
|
|
paulo@89
|
5141 y = bars.yScale();
|
|
paulo@89
|
5142
|
|
paulo@89
|
5143 // Setup containers and skeleton of chart
|
|
paulo@89
|
5144 var wrap = container.selectAll('g.nv-wrap.nv-historicalBarChart').data([data]);
|
|
paulo@89
|
5145 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBarChart').append('g');
|
|
paulo@89
|
5146 var g = wrap.select('g');
|
|
paulo@89
|
5147
|
|
paulo@89
|
5148 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
5149 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
5150 gEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
5151 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
5152 gEnter.append('g').attr('class', 'nv-interactive');
|
|
paulo@89
|
5153
|
|
paulo@89
|
5154 // Legend
|
|
paulo@89
|
5155 if (showLegend) {
|
|
paulo@89
|
5156 legend.width(availableWidth);
|
|
paulo@89
|
5157
|
|
paulo@89
|
5158 g.select('.nv-legendWrap')
|
|
paulo@89
|
5159 .datum(data)
|
|
paulo@89
|
5160 .call(legend);
|
|
paulo@89
|
5161
|
|
paulo@89
|
5162 if ( margin.top != legend.height()) {
|
|
paulo@89
|
5163 margin.top = legend.height();
|
|
paulo@89
|
5164 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
5165 }
|
|
paulo@89
|
5166
|
|
paulo@89
|
5167 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
5168 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
5169 }
|
|
paulo@89
|
5170 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
5171
|
|
paulo@89
|
5172 if (rightAlignYAxis) {
|
|
paulo@89
|
5173 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
5174 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
5175 }
|
|
paulo@89
|
5176
|
|
paulo@89
|
5177 //Set up interactive layer
|
|
paulo@89
|
5178 if (useInteractiveGuideline) {
|
|
paulo@89
|
5179 interactiveLayer
|
|
paulo@89
|
5180 .width(availableWidth)
|
|
paulo@89
|
5181 .height(availableHeight)
|
|
paulo@89
|
5182 .margin({left:margin.left, top:margin.top})
|
|
paulo@89
|
5183 .svgContainer(container)
|
|
paulo@89
|
5184 .xScale(x);
|
|
paulo@89
|
5185 wrap.select(".nv-interactive").call(interactiveLayer);
|
|
paulo@89
|
5186 }
|
|
paulo@89
|
5187 bars
|
|
paulo@89
|
5188 .width(availableWidth)
|
|
paulo@89
|
5189 .height(availableHeight)
|
|
paulo@89
|
5190 .color(data.map(function(d,i) {
|
|
paulo@89
|
5191 return d.color || color(d, i);
|
|
paulo@89
|
5192 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
5193
|
|
paulo@89
|
5194 var barsWrap = g.select('.nv-barsWrap')
|
|
paulo@89
|
5195 .datum(data.filter(function(d) { return !d.disabled }));
|
|
paulo@89
|
5196 barsWrap.transition().call(bars);
|
|
paulo@89
|
5197
|
|
paulo@89
|
5198 // Setup Axes
|
|
paulo@89
|
5199 if (showXAxis) {
|
|
paulo@89
|
5200 xAxis
|
|
paulo@89
|
5201 .scale(x)
|
|
paulo@89
|
5202 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
5203 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
5204
|
|
paulo@89
|
5205 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
5206 .attr('transform', 'translate(0,' + y.range()[0] + ')');
|
|
paulo@89
|
5207 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
5208 .transition()
|
|
paulo@89
|
5209 .call(xAxis);
|
|
paulo@89
|
5210 }
|
|
paulo@89
|
5211
|
|
paulo@89
|
5212 if (showYAxis) {
|
|
paulo@89
|
5213 yAxis
|
|
paulo@89
|
5214 .scale(y)
|
|
paulo@89
|
5215 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
5216 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
5217
|
|
paulo@89
|
5218 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
5219 .transition()
|
|
paulo@89
|
5220 .call(yAxis);
|
|
paulo@89
|
5221 }
|
|
paulo@89
|
5222
|
|
paulo@89
|
5223 //============================================================
|
|
paulo@89
|
5224 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
5225 //------------------------------------------------------------
|
|
paulo@89
|
5226
|
|
paulo@89
|
5227 interactiveLayer.dispatch.on('elementMousemove', function(e) {
|
|
paulo@89
|
5228 bars.clearHighlights();
|
|
paulo@89
|
5229
|
|
paulo@89
|
5230 var singlePoint, pointIndex, pointXLocation, allData = [];
|
|
paulo@89
|
5231 data
|
|
paulo@89
|
5232 .filter(function(series, i) {
|
|
paulo@89
|
5233 series.seriesIndex = i;
|
|
paulo@89
|
5234 return !series.disabled;
|
|
paulo@89
|
5235 })
|
|
paulo@89
|
5236 .forEach(function(series,i) {
|
|
paulo@89
|
5237 pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
|
|
paulo@89
|
5238 bars.highlightPoint(pointIndex,true);
|
|
paulo@89
|
5239 var point = series.values[pointIndex];
|
|
paulo@89
|
5240 if (point === undefined) return;
|
|
paulo@89
|
5241 if (singlePoint === undefined) singlePoint = point;
|
|
paulo@89
|
5242 if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
5243 allData.push({
|
|
paulo@89
|
5244 key: series.key,
|
|
paulo@89
|
5245 value: chart.y()(point, pointIndex),
|
|
paulo@89
|
5246 color: color(series,series.seriesIndex),
|
|
paulo@89
|
5247 data: series.values[pointIndex]
|
|
paulo@89
|
5248 });
|
|
paulo@89
|
5249 });
|
|
paulo@89
|
5250
|
|
paulo@89
|
5251 var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
|
|
paulo@89
|
5252 interactiveLayer.tooltip
|
|
paulo@89
|
5253 .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
|
|
paulo@89
|
5254 .chartContainer(that.parentNode)
|
|
paulo@89
|
5255 .valueFormatter(function(d,i) {
|
|
paulo@89
|
5256 return yAxis.tickFormat()(d);
|
|
paulo@89
|
5257 })
|
|
paulo@89
|
5258 .data({
|
|
paulo@89
|
5259 value: xValue,
|
|
paulo@89
|
5260 index: pointIndex,
|
|
paulo@89
|
5261 series: allData
|
|
paulo@89
|
5262 })();
|
|
paulo@89
|
5263
|
|
paulo@89
|
5264 interactiveLayer.renderGuideLine(pointXLocation);
|
|
paulo@89
|
5265
|
|
paulo@89
|
5266 });
|
|
paulo@89
|
5267
|
|
paulo@89
|
5268 interactiveLayer.dispatch.on("elementMouseout",function(e) {
|
|
paulo@89
|
5269 dispatch.tooltipHide();
|
|
paulo@89
|
5270 bars.clearHighlights();
|
|
paulo@89
|
5271 });
|
|
paulo@89
|
5272
|
|
paulo@89
|
5273 legend.dispatch.on('legendClick', function(d,i) {
|
|
paulo@89
|
5274 d.disabled = !d.disabled;
|
|
paulo@89
|
5275
|
|
paulo@89
|
5276 if (!data.filter(function(d) { return !d.disabled }).length) {
|
|
paulo@89
|
5277 data.map(function(d) {
|
|
paulo@89
|
5278 d.disabled = false;
|
|
paulo@89
|
5279 wrap.selectAll('.nv-series').classed('disabled', false);
|
|
paulo@89
|
5280 return d;
|
|
paulo@89
|
5281 });
|
|
paulo@89
|
5282 }
|
|
paulo@89
|
5283
|
|
paulo@89
|
5284 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
5285 dispatch.stateChange(state);
|
|
paulo@89
|
5286
|
|
paulo@89
|
5287 selection.transition().call(chart);
|
|
paulo@89
|
5288 });
|
|
paulo@89
|
5289
|
|
paulo@89
|
5290 legend.dispatch.on('legendDblclick', function(d) {
|
|
paulo@89
|
5291 //Double clicking should always enable current series, and disabled all others.
|
|
paulo@89
|
5292 data.forEach(function(d) {
|
|
paulo@89
|
5293 d.disabled = true;
|
|
paulo@89
|
5294 });
|
|
paulo@89
|
5295 d.disabled = false;
|
|
paulo@89
|
5296
|
|
paulo@89
|
5297 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
5298 dispatch.stateChange(state);
|
|
paulo@89
|
5299 chart.update();
|
|
paulo@89
|
5300 });
|
|
paulo@89
|
5301
|
|
paulo@89
|
5302 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
5303 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
5304 data.forEach(function(series,i) {
|
|
paulo@89
|
5305 series.disabled = e.disabled[i];
|
|
paulo@89
|
5306 });
|
|
paulo@89
|
5307
|
|
paulo@89
|
5308 state.disabled = e.disabled;
|
|
paulo@89
|
5309 }
|
|
paulo@89
|
5310
|
|
paulo@89
|
5311 chart.update();
|
|
paulo@89
|
5312 });
|
|
paulo@89
|
5313 });
|
|
paulo@89
|
5314
|
|
paulo@89
|
5315 renderWatch.renderEnd('historicalBarChart immediate');
|
|
paulo@89
|
5316 return chart;
|
|
paulo@89
|
5317 }
|
|
paulo@89
|
5318
|
|
paulo@89
|
5319 //============================================================
|
|
paulo@89
|
5320 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
5321 //------------------------------------------------------------
|
|
paulo@89
|
5322
|
|
paulo@89
|
5323 bars.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
5324 evt['series'] = {
|
|
paulo@89
|
5325 key: chart.x()(evt.data),
|
|
paulo@89
|
5326 value: chart.y()(evt.data),
|
|
paulo@89
|
5327 color: evt.color
|
|
paulo@89
|
5328 };
|
|
paulo@89
|
5329 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
5330 });
|
|
paulo@89
|
5331
|
|
paulo@89
|
5332 bars.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
5333 tooltip.hidden(true);
|
|
paulo@89
|
5334 });
|
|
paulo@89
|
5335
|
|
paulo@89
|
5336 bars.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
5337 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
5338 });
|
|
paulo@89
|
5339
|
|
paulo@89
|
5340 //============================================================
|
|
paulo@89
|
5341 // Expose Public Variables
|
|
paulo@89
|
5342 //------------------------------------------------------------
|
|
paulo@89
|
5343
|
|
paulo@89
|
5344 // expose chart's sub-components
|
|
paulo@89
|
5345 chart.dispatch = dispatch;
|
|
paulo@89
|
5346 chart.bars = bars;
|
|
paulo@89
|
5347 chart.legend = legend;
|
|
paulo@89
|
5348 chart.xAxis = xAxis;
|
|
paulo@89
|
5349 chart.yAxis = yAxis;
|
|
paulo@89
|
5350 chart.interactiveLayer = interactiveLayer;
|
|
paulo@89
|
5351 chart.tooltip = tooltip;
|
|
paulo@89
|
5352
|
|
paulo@89
|
5353 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
5354
|
|
paulo@89
|
5355 chart._options = Object.create({}, {
|
|
paulo@89
|
5356 // simple options, just get/set the necessary values
|
|
paulo@89
|
5357 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
5358 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
5359 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
5360 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
5361 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
5362 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
5363 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
5364
|
|
paulo@89
|
5365 // deprecated options
|
|
paulo@89
|
5366 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
5367 // deprecated after 1.7.1
|
|
paulo@89
|
5368 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
5369 tooltip.enabled(!!_);
|
|
paulo@89
|
5370 }},
|
|
paulo@89
|
5371 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
5372 // deprecated after 1.7.1
|
|
paulo@89
|
5373 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
5374 tooltip.contentGenerator(_);
|
|
paulo@89
|
5375 }},
|
|
paulo@89
|
5376
|
|
paulo@89
|
5377 // options that require extra logic in the setter
|
|
paulo@89
|
5378 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
5379 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
5380 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
5381 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
5382 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
5383 }},
|
|
paulo@89
|
5384 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
5385 color = nv.utils.getColor(_);
|
|
paulo@89
|
5386 legend.color(color);
|
|
paulo@89
|
5387 bars.color(color);
|
|
paulo@89
|
5388 }},
|
|
paulo@89
|
5389 duration: {get: function(){return transitionDuration;}, set: function(_){
|
|
paulo@89
|
5390 transitionDuration=_;
|
|
paulo@89
|
5391 renderWatch.reset(transitionDuration);
|
|
paulo@89
|
5392 yAxis.duration(transitionDuration);
|
|
paulo@89
|
5393 xAxis.duration(transitionDuration);
|
|
paulo@89
|
5394 }},
|
|
paulo@89
|
5395 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
5396 rightAlignYAxis = _;
|
|
paulo@89
|
5397 yAxis.orient( (_) ? 'right' : 'left');
|
|
paulo@89
|
5398 }},
|
|
paulo@89
|
5399 useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
|
|
paulo@89
|
5400 useInteractiveGuideline = _;
|
|
paulo@89
|
5401 if (_ === true) {
|
|
paulo@89
|
5402 chart.interactive(false);
|
|
paulo@89
|
5403 }
|
|
paulo@89
|
5404 }}
|
|
paulo@89
|
5405 });
|
|
paulo@89
|
5406
|
|
paulo@89
|
5407 nv.utils.inheritOptions(chart, bars);
|
|
paulo@89
|
5408 nv.utils.initOptions(chart);
|
|
paulo@89
|
5409
|
|
paulo@89
|
5410 return chart;
|
|
paulo@89
|
5411 };
|
|
paulo@89
|
5412
|
|
paulo@89
|
5413
|
|
paulo@89
|
5414 // ohlcChart is just a historical chart with ohlc bars and some tweaks
|
|
paulo@89
|
5415 nv.models.ohlcBarChart = function() {
|
|
paulo@89
|
5416 var chart = nv.models.historicalBarChart(nv.models.ohlcBar());
|
|
paulo@89
|
5417
|
|
paulo@89
|
5418 // special default tooltip since we show multiple values per x
|
|
paulo@89
|
5419 chart.useInteractiveGuideline(true);
|
|
paulo@89
|
5420 chart.interactiveLayer.tooltip.contentGenerator(function(data) {
|
|
paulo@89
|
5421 // we assume only one series exists for this chart
|
|
paulo@89
|
5422 var d = data.series[0].data;
|
|
paulo@89
|
5423 // match line colors as defined in nv.d3.css
|
|
paulo@89
|
5424 var color = d.open < d.close ? "2ca02c" : "d62728";
|
|
paulo@89
|
5425 return '' +
|
|
paulo@89
|
5426 '<h3 style="color: #' + color + '">' + data.value + '</h3>' +
|
|
paulo@89
|
5427 '<table>' +
|
|
paulo@89
|
5428 '<tr><td>open:</td><td>' + chart.yAxis.tickFormat()(d.open) + '</td></tr>' +
|
|
paulo@89
|
5429 '<tr><td>close:</td><td>' + chart.yAxis.tickFormat()(d.close) + '</td></tr>' +
|
|
paulo@89
|
5430 '<tr><td>high</td><td>' + chart.yAxis.tickFormat()(d.high) + '</td></tr>' +
|
|
paulo@89
|
5431 '<tr><td>low:</td><td>' + chart.yAxis.tickFormat()(d.low) + '</td></tr>' +
|
|
paulo@89
|
5432 '</table>';
|
|
paulo@89
|
5433 });
|
|
paulo@89
|
5434 return chart;
|
|
paulo@89
|
5435 };
|
|
paulo@89
|
5436
|
|
paulo@89
|
5437 // candlestickChart is just a historical chart with candlestick bars and some tweaks
|
|
paulo@89
|
5438 nv.models.candlestickBarChart = function() {
|
|
paulo@89
|
5439 var chart = nv.models.historicalBarChart(nv.models.candlestickBar());
|
|
paulo@89
|
5440
|
|
paulo@89
|
5441 // special default tooltip since we show multiple values per x
|
|
paulo@89
|
5442 chart.useInteractiveGuideline(true);
|
|
paulo@89
|
5443 chart.interactiveLayer.tooltip.contentGenerator(function(data) {
|
|
paulo@89
|
5444 // we assume only one series exists for this chart
|
|
paulo@89
|
5445 var d = data.series[0].data;
|
|
paulo@89
|
5446 // match line colors as defined in nv.d3.css
|
|
paulo@89
|
5447 var color = d.open < d.close ? "2ca02c" : "d62728";
|
|
paulo@89
|
5448 return '' +
|
|
paulo@89
|
5449 '<h3 style="color: #' + color + '">' + data.value + '</h3>' +
|
|
paulo@89
|
5450 '<table>' +
|
|
paulo@89
|
5451 '<tr><td>open:</td><td>' + chart.yAxis.tickFormat()(d.open) + '</td></tr>' +
|
|
paulo@89
|
5452 '<tr><td>close:</td><td>' + chart.yAxis.tickFormat()(d.close) + '</td></tr>' +
|
|
paulo@89
|
5453 '<tr><td>high</td><td>' + chart.yAxis.tickFormat()(d.high) + '</td></tr>' +
|
|
paulo@89
|
5454 '<tr><td>low:</td><td>' + chart.yAxis.tickFormat()(d.low) + '</td></tr>' +
|
|
paulo@89
|
5455 '</table>';
|
|
paulo@89
|
5456 });
|
|
paulo@89
|
5457 return chart;
|
|
paulo@89
|
5458 };
|
|
paulo@89
|
5459 nv.models.legend = function() {
|
|
paulo@89
|
5460 "use strict";
|
|
paulo@89
|
5461
|
|
paulo@89
|
5462 //============================================================
|
|
paulo@89
|
5463 // Public Variables with Default Settings
|
|
paulo@89
|
5464 //------------------------------------------------------------
|
|
paulo@89
|
5465
|
|
paulo@89
|
5466 var margin = {top: 5, right: 0, bottom: 5, left: 0}
|
|
paulo@89
|
5467 , width = 400
|
|
paulo@89
|
5468 , height = 20
|
|
paulo@89
|
5469 , getKey = function(d) { return d.key }
|
|
paulo@89
|
5470 , color = nv.utils.getColor()
|
|
paulo@89
|
5471 , align = true
|
|
paulo@89
|
5472 , padding = 32 //define how much space between legend items. - recommend 32 for furious version
|
|
paulo@89
|
5473 , rightAlign = true
|
|
paulo@89
|
5474 , updateState = true //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.
|
|
paulo@89
|
5475 , radioButtonMode = false //If true, clicking legend items will cause it to behave like a radio button. (only one can be selected at a time)
|
|
paulo@89
|
5476 , expanded = false
|
|
paulo@89
|
5477 , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')
|
|
paulo@89
|
5478 , vers = 'classic' //Options are "classic" and "furious"
|
|
paulo@89
|
5479 ;
|
|
paulo@89
|
5480
|
|
paulo@89
|
5481 function chart(selection) {
|
|
paulo@89
|
5482 selection.each(function(data) {
|
|
paulo@89
|
5483 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
5484 container = d3.select(this);
|
|
paulo@89
|
5485 nv.utils.initSVG(container);
|
|
paulo@89
|
5486
|
|
paulo@89
|
5487 // Setup containers and skeleton of chart
|
|
paulo@89
|
5488 var wrap = container.selectAll('g.nv-legend').data([data]);
|
|
paulo@89
|
5489 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');
|
|
paulo@89
|
5490 var g = wrap.select('g');
|
|
paulo@89
|
5491
|
|
paulo@89
|
5492 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
5493
|
|
paulo@89
|
5494 var series = g.selectAll('.nv-series')
|
|
paulo@89
|
5495 .data(function(d) {
|
|
paulo@89
|
5496 if(vers != 'furious') return d;
|
|
paulo@89
|
5497
|
|
paulo@89
|
5498 return d.filter(function(n) {
|
|
paulo@89
|
5499 return expanded ? true : !n.disengaged;
|
|
paulo@89
|
5500 });
|
|
paulo@89
|
5501 });
|
|
paulo@89
|
5502
|
|
paulo@89
|
5503 var seriesEnter = series.enter().append('g').attr('class', 'nv-series');
|
|
paulo@89
|
5504 var seriesShape;
|
|
paulo@89
|
5505
|
|
paulo@89
|
5506 var versPadding;
|
|
paulo@89
|
5507 switch(vers) {
|
|
paulo@89
|
5508 case 'furious' :
|
|
paulo@89
|
5509 versPadding = 23;
|
|
paulo@89
|
5510 break;
|
|
paulo@89
|
5511 case 'classic' :
|
|
paulo@89
|
5512 versPadding = 20;
|
|
paulo@89
|
5513 }
|
|
paulo@89
|
5514
|
|
paulo@89
|
5515 if(vers == 'classic') {
|
|
paulo@89
|
5516 seriesEnter.append('circle')
|
|
paulo@89
|
5517 .style('stroke-width', 2)
|
|
paulo@89
|
5518 .attr('class','nv-legend-symbol')
|
|
paulo@89
|
5519 .attr('r', 5);
|
|
paulo@89
|
5520
|
|
paulo@89
|
5521 seriesShape = series.select('circle');
|
|
paulo@89
|
5522 } else if (vers == 'furious') {
|
|
paulo@89
|
5523 seriesEnter.append('rect')
|
|
paulo@89
|
5524 .style('stroke-width', 2)
|
|
paulo@89
|
5525 .attr('class','nv-legend-symbol')
|
|
paulo@89
|
5526 .attr('rx', 3)
|
|
paulo@89
|
5527 .attr('ry', 3);
|
|
paulo@89
|
5528
|
|
paulo@89
|
5529 seriesShape = series.select('.nv-legend-symbol');
|
|
paulo@89
|
5530
|
|
paulo@89
|
5531 seriesEnter.append('g')
|
|
paulo@89
|
5532 .attr('class', 'nv-check-box')
|
|
paulo@89
|
5533 .property('innerHTML','<path d="M0.5,5 L22.5,5 L22.5,26.5 L0.5,26.5 L0.5,5 Z" class="nv-box"></path><path d="M5.5,12.8618467 L11.9185089,19.2803556 L31,0.198864511" class="nv-check"></path>')
|
|
paulo@89
|
5534 .attr('transform', 'translate(-10,-8)scale(0.5)');
|
|
paulo@89
|
5535
|
|
paulo@89
|
5536 var seriesCheckbox = series.select('.nv-check-box');
|
|
paulo@89
|
5537
|
|
paulo@89
|
5538 seriesCheckbox.each(function(d,i) {
|
|
paulo@89
|
5539 d3.select(this).selectAll('path')
|
|
paulo@89
|
5540 .attr('stroke', setTextColor(d,i));
|
|
paulo@89
|
5541 });
|
|
paulo@89
|
5542 }
|
|
paulo@89
|
5543
|
|
paulo@89
|
5544 seriesEnter.append('text')
|
|
paulo@89
|
5545 .attr('text-anchor', 'start')
|
|
paulo@89
|
5546 .attr('class','nv-legend-text')
|
|
paulo@89
|
5547 .attr('dy', '.32em')
|
|
paulo@89
|
5548 .attr('dx', '8');
|
|
paulo@89
|
5549
|
|
paulo@89
|
5550 var seriesText = series.select('text.nv-legend-text');
|
|
paulo@89
|
5551
|
|
paulo@89
|
5552 series
|
|
paulo@89
|
5553 .on('mouseover', function(d,i) {
|
|
paulo@89
|
5554 dispatch.legendMouseover(d,i); //TODO: Make consistent with other event objects
|
|
paulo@89
|
5555 })
|
|
paulo@89
|
5556 .on('mouseout', function(d,i) {
|
|
paulo@89
|
5557 dispatch.legendMouseout(d,i);
|
|
paulo@89
|
5558 })
|
|
paulo@89
|
5559 .on('click', function(d,i) {
|
|
paulo@89
|
5560 dispatch.legendClick(d,i);
|
|
paulo@89
|
5561 // make sure we re-get data in case it was modified
|
|
paulo@89
|
5562 var data = series.data();
|
|
paulo@89
|
5563 if (updateState) {
|
|
paulo@89
|
5564 if(vers =='classic') {
|
|
paulo@89
|
5565 if (radioButtonMode) {
|
|
paulo@89
|
5566 //Radio button mode: set every series to disabled,
|
|
paulo@89
|
5567 // and enable the clicked series.
|
|
paulo@89
|
5568 data.forEach(function(series) { series.disabled = true});
|
|
paulo@89
|
5569 d.disabled = false;
|
|
paulo@89
|
5570 }
|
|
paulo@89
|
5571 else {
|
|
paulo@89
|
5572 d.disabled = !d.disabled;
|
|
paulo@89
|
5573 if (data.every(function(series) { return series.disabled})) {
|
|
paulo@89
|
5574 //the default behavior of NVD3 legends is, if every single series
|
|
paulo@89
|
5575 // is disabled, turn all series' back on.
|
|
paulo@89
|
5576 data.forEach(function(series) { series.disabled = false});
|
|
paulo@89
|
5577 }
|
|
paulo@89
|
5578 }
|
|
paulo@89
|
5579 } else if(vers == 'furious') {
|
|
paulo@89
|
5580 if(expanded) {
|
|
paulo@89
|
5581 d.disengaged = !d.disengaged;
|
|
paulo@89
|
5582 d.userDisabled = d.userDisabled == undefined ? !!d.disabled : d.userDisabled;
|
|
paulo@89
|
5583 d.disabled = d.disengaged || d.userDisabled;
|
|
paulo@89
|
5584 } else if (!expanded) {
|
|
paulo@89
|
5585 d.disabled = !d.disabled;
|
|
paulo@89
|
5586 d.userDisabled = d.disabled;
|
|
paulo@89
|
5587 var engaged = data.filter(function(d) { return !d.disengaged; });
|
|
paulo@89
|
5588 if (engaged.every(function(series) { return series.userDisabled })) {
|
|
paulo@89
|
5589 //the default behavior of NVD3 legends is, if every single series
|
|
paulo@89
|
5590 // is disabled, turn all series' back on.
|
|
paulo@89
|
5591 data.forEach(function(series) {
|
|
paulo@89
|
5592 series.disabled = series.userDisabled = false;
|
|
paulo@89
|
5593 });
|
|
paulo@89
|
5594 }
|
|
paulo@89
|
5595 }
|
|
paulo@89
|
5596 }
|
|
paulo@89
|
5597 dispatch.stateChange({
|
|
paulo@89
|
5598 disabled: data.map(function(d) { return !!d.disabled }),
|
|
paulo@89
|
5599 disengaged: data.map(function(d) { return !!d.disengaged })
|
|
paulo@89
|
5600 });
|
|
paulo@89
|
5601
|
|
paulo@89
|
5602 }
|
|
paulo@89
|
5603 })
|
|
paulo@89
|
5604 .on('dblclick', function(d,i) {
|
|
paulo@89
|
5605 if(vers == 'furious' && expanded) return;
|
|
paulo@89
|
5606 dispatch.legendDblclick(d,i);
|
|
paulo@89
|
5607 if (updateState) {
|
|
paulo@89
|
5608 // make sure we re-get data in case it was modified
|
|
paulo@89
|
5609 var data = series.data();
|
|
paulo@89
|
5610 //the default behavior of NVD3 legends, when double clicking one,
|
|
paulo@89
|
5611 // is to set all other series' to false, and make the double clicked series enabled.
|
|
paulo@89
|
5612 data.forEach(function(series) {
|
|
paulo@89
|
5613 series.disabled = true;
|
|
paulo@89
|
5614 if(vers == 'furious') series.userDisabled = series.disabled;
|
|
paulo@89
|
5615 });
|
|
paulo@89
|
5616 d.disabled = false;
|
|
paulo@89
|
5617 if(vers == 'furious') d.userDisabled = d.disabled;
|
|
paulo@89
|
5618 dispatch.stateChange({
|
|
paulo@89
|
5619 disabled: data.map(function(d) { return !!d.disabled })
|
|
paulo@89
|
5620 });
|
|
paulo@89
|
5621 }
|
|
paulo@89
|
5622 });
|
|
paulo@89
|
5623
|
|
paulo@89
|
5624 series.classed('nv-disabled', function(d) { return d.userDisabled });
|
|
paulo@89
|
5625 series.exit().remove();
|
|
paulo@89
|
5626
|
|
paulo@89
|
5627 seriesText
|
|
paulo@89
|
5628 .attr('fill', setTextColor)
|
|
paulo@89
|
5629 .text(getKey);
|
|
paulo@89
|
5630
|
|
paulo@89
|
5631 //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)
|
|
paulo@89
|
5632 // NEW ALIGNING CODE, TODO: clean up
|
|
paulo@89
|
5633 var legendWidth = 0;
|
|
paulo@89
|
5634 if (align) {
|
|
paulo@89
|
5635
|
|
paulo@89
|
5636 var seriesWidths = [];
|
|
paulo@89
|
5637 series.each(function(d,i) {
|
|
paulo@89
|
5638 var legendText = d3.select(this).select('text');
|
|
paulo@89
|
5639 var nodeTextLength;
|
|
paulo@89
|
5640 try {
|
|
paulo@89
|
5641 nodeTextLength = legendText.node().getComputedTextLength();
|
|
paulo@89
|
5642 // If the legendText is display:none'd (nodeTextLength == 0), simulate an error so we approximate, instead
|
|
paulo@89
|
5643 if(nodeTextLength <= 0) throw Error();
|
|
paulo@89
|
5644 }
|
|
paulo@89
|
5645 catch(e) {
|
|
paulo@89
|
5646 nodeTextLength = nv.utils.calcApproxTextWidth(legendText);
|
|
paulo@89
|
5647 }
|
|
paulo@89
|
5648
|
|
paulo@89
|
5649 seriesWidths.push(nodeTextLength + padding);
|
|
paulo@89
|
5650 });
|
|
paulo@89
|
5651
|
|
paulo@89
|
5652 var seriesPerRow = 0;
|
|
paulo@89
|
5653 var columnWidths = [];
|
|
paulo@89
|
5654 legendWidth = 0;
|
|
paulo@89
|
5655
|
|
paulo@89
|
5656 while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
|
|
paulo@89
|
5657 columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
|
|
paulo@89
|
5658 legendWidth += seriesWidths[seriesPerRow++];
|
|
paulo@89
|
5659 }
|
|
paulo@89
|
5660 if (seriesPerRow === 0) seriesPerRow = 1; //minimum of one series per row
|
|
paulo@89
|
5661
|
|
paulo@89
|
5662 while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
|
|
paulo@89
|
5663 columnWidths = [];
|
|
paulo@89
|
5664 seriesPerRow--;
|
|
paulo@89
|
5665
|
|
paulo@89
|
5666 for (var k = 0; k < seriesWidths.length; k++) {
|
|
paulo@89
|
5667 if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
|
|
paulo@89
|
5668 columnWidths[k % seriesPerRow] = seriesWidths[k];
|
|
paulo@89
|
5669 }
|
|
paulo@89
|
5670
|
|
paulo@89
|
5671 legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
|
|
paulo@89
|
5672 return prev + cur;
|
|
paulo@89
|
5673 });
|
|
paulo@89
|
5674 }
|
|
paulo@89
|
5675
|
|
paulo@89
|
5676 var xPositions = [];
|
|
paulo@89
|
5677 for (var i = 0, curX = 0; i < seriesPerRow; i++) {
|
|
paulo@89
|
5678 xPositions[i] = curX;
|
|
paulo@89
|
5679 curX += columnWidths[i];
|
|
paulo@89
|
5680 }
|
|
paulo@89
|
5681
|
|
paulo@89
|
5682 series
|
|
paulo@89
|
5683 .attr('transform', function(d, i) {
|
|
paulo@89
|
5684 return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * versPadding) + ')';
|
|
paulo@89
|
5685 });
|
|
paulo@89
|
5686
|
|
paulo@89
|
5687 //position legend as far right as possible within the total width
|
|
paulo@89
|
5688 if (rightAlign) {
|
|
paulo@89
|
5689 g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
|
|
paulo@89
|
5690 }
|
|
paulo@89
|
5691 else {
|
|
paulo@89
|
5692 g.attr('transform', 'translate(0' + ',' + margin.top + ')');
|
|
paulo@89
|
5693 }
|
|
paulo@89
|
5694
|
|
paulo@89
|
5695 height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * versPadding);
|
|
paulo@89
|
5696
|
|
paulo@89
|
5697 } else {
|
|
paulo@89
|
5698
|
|
paulo@89
|
5699 var ypos = 5,
|
|
paulo@89
|
5700 newxpos = 5,
|
|
paulo@89
|
5701 maxwidth = 0,
|
|
paulo@89
|
5702 xpos;
|
|
paulo@89
|
5703 series
|
|
paulo@89
|
5704 .attr('transform', function(d, i) {
|
|
paulo@89
|
5705 var length = d3.select(this).select('text').node().getComputedTextLength() + padding;
|
|
paulo@89
|
5706 xpos = newxpos;
|
|
paulo@89
|
5707
|
|
paulo@89
|
5708 if (width < margin.left + margin.right + xpos + length) {
|
|
paulo@89
|
5709 newxpos = xpos = 5;
|
|
paulo@89
|
5710 ypos += versPadding;
|
|
paulo@89
|
5711 }
|
|
paulo@89
|
5712
|
|
paulo@89
|
5713 newxpos += length;
|
|
paulo@89
|
5714 if (newxpos > maxwidth) maxwidth = newxpos;
|
|
paulo@89
|
5715
|
|
paulo@89
|
5716 if(legendWidth < xpos + maxwidth) {
|
|
paulo@89
|
5717 legendWidth = xpos + maxwidth;
|
|
paulo@89
|
5718 }
|
|
paulo@89
|
5719 return 'translate(' + xpos + ',' + ypos + ')';
|
|
paulo@89
|
5720 });
|
|
paulo@89
|
5721
|
|
paulo@89
|
5722 //position legend as far right as possible within the total width
|
|
paulo@89
|
5723 g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');
|
|
paulo@89
|
5724
|
|
paulo@89
|
5725 height = margin.top + margin.bottom + ypos + 15;
|
|
paulo@89
|
5726 }
|
|
paulo@89
|
5727
|
|
paulo@89
|
5728 if(vers == 'furious') {
|
|
paulo@89
|
5729 // Size rectangles after text is placed
|
|
paulo@89
|
5730 seriesShape
|
|
paulo@89
|
5731 .attr('width', function(d,i) {
|
|
paulo@89
|
5732 return seriesText[0][i].getComputedTextLength() + 27;
|
|
paulo@89
|
5733 })
|
|
paulo@89
|
5734 .attr('height', 18)
|
|
paulo@89
|
5735 .attr('y', -9)
|
|
paulo@89
|
5736 .attr('x', -15);
|
|
paulo@89
|
5737
|
|
paulo@89
|
5738 // The background for the expanded legend (UI)
|
|
paulo@89
|
5739 gEnter.insert('rect',':first-child')
|
|
paulo@89
|
5740 .attr('class', 'nv-legend-bg')
|
|
paulo@89
|
5741 .attr('fill', '#eee')
|
|
paulo@89
|
5742 // .attr('stroke', '#444')
|
|
paulo@89
|
5743 .attr('opacity',0);
|
|
paulo@89
|
5744
|
|
paulo@89
|
5745 var seriesBG = g.select('.nv-legend-bg');
|
|
paulo@89
|
5746
|
|
paulo@89
|
5747 seriesBG
|
|
paulo@89
|
5748 .transition().duration(300)
|
|
paulo@89
|
5749 .attr('x', -versPadding )
|
|
paulo@89
|
5750 .attr('width', legendWidth + versPadding - 12)
|
|
paulo@89
|
5751 .attr('height', height + 10)
|
|
paulo@89
|
5752 .attr('y', -margin.top - 10)
|
|
paulo@89
|
5753 .attr('opacity', expanded ? 1 : 0);
|
|
paulo@89
|
5754
|
|
paulo@89
|
5755
|
|
paulo@89
|
5756 }
|
|
paulo@89
|
5757
|
|
paulo@89
|
5758 seriesShape
|
|
paulo@89
|
5759 .style('fill', setBGColor)
|
|
paulo@89
|
5760 .style('fill-opacity', setBGOpacity)
|
|
paulo@89
|
5761 .style('stroke', setBGColor);
|
|
paulo@89
|
5762 });
|
|
paulo@89
|
5763
|
|
paulo@89
|
5764 function setTextColor(d,i) {
|
|
paulo@89
|
5765 if(vers != 'furious') return '#000';
|
|
paulo@89
|
5766 if(expanded) {
|
|
paulo@89
|
5767 return d.disengaged ? '#000' : '#fff';
|
|
paulo@89
|
5768 } else if (!expanded) {
|
|
paulo@89
|
5769 if(!d.color) d.color = color(d,i);
|
|
paulo@89
|
5770 return !!d.disabled ? d.color : '#fff';
|
|
paulo@89
|
5771 }
|
|
paulo@89
|
5772 }
|
|
paulo@89
|
5773
|
|
paulo@89
|
5774 function setBGColor(d,i) {
|
|
paulo@89
|
5775 if(expanded && vers == 'furious') {
|
|
paulo@89
|
5776 return d.disengaged ? '#eee' : d.color || color(d,i);
|
|
paulo@89
|
5777 } else {
|
|
paulo@89
|
5778 return d.color || color(d,i);
|
|
paulo@89
|
5779 }
|
|
paulo@89
|
5780 }
|
|
paulo@89
|
5781
|
|
paulo@89
|
5782
|
|
paulo@89
|
5783 function setBGOpacity(d,i) {
|
|
paulo@89
|
5784 if(expanded && vers == 'furious') {
|
|
paulo@89
|
5785 return 1;
|
|
paulo@89
|
5786 } else {
|
|
paulo@89
|
5787 return !!d.disabled ? 0 : 1;
|
|
paulo@89
|
5788 }
|
|
paulo@89
|
5789 }
|
|
paulo@89
|
5790
|
|
paulo@89
|
5791 return chart;
|
|
paulo@89
|
5792 }
|
|
paulo@89
|
5793
|
|
paulo@89
|
5794 //============================================================
|
|
paulo@89
|
5795 // Expose Public Variables
|
|
paulo@89
|
5796 //------------------------------------------------------------
|
|
paulo@89
|
5797
|
|
paulo@89
|
5798 chart.dispatch = dispatch;
|
|
paulo@89
|
5799 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
5800
|
|
paulo@89
|
5801 chart._options = Object.create({}, {
|
|
paulo@89
|
5802 // simple options, just get/set the necessary values
|
|
paulo@89
|
5803 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
5804 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
5805 key: {get: function(){return getKey;}, set: function(_){getKey=_;}},
|
|
paulo@89
|
5806 align: {get: function(){return align;}, set: function(_){align=_;}},
|
|
paulo@89
|
5807 rightAlign: {get: function(){return rightAlign;}, set: function(_){rightAlign=_;}},
|
|
paulo@89
|
5808 padding: {get: function(){return padding;}, set: function(_){padding=_;}},
|
|
paulo@89
|
5809 updateState: {get: function(){return updateState;}, set: function(_){updateState=_;}},
|
|
paulo@89
|
5810 radioButtonMode: {get: function(){return radioButtonMode;}, set: function(_){radioButtonMode=_;}},
|
|
paulo@89
|
5811 expanded: {get: function(){return expanded;}, set: function(_){expanded=_;}},
|
|
paulo@89
|
5812 vers: {get: function(){return vers;}, set: function(_){vers=_;}},
|
|
paulo@89
|
5813
|
|
paulo@89
|
5814 // options that require extra logic in the setter
|
|
paulo@89
|
5815 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
5816 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
5817 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
5818 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
5819 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
5820 }},
|
|
paulo@89
|
5821 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
5822 color = nv.utils.getColor(_);
|
|
paulo@89
|
5823 }}
|
|
paulo@89
|
5824 });
|
|
paulo@89
|
5825
|
|
paulo@89
|
5826 nv.utils.initOptions(chart);
|
|
paulo@89
|
5827
|
|
paulo@89
|
5828 return chart;
|
|
paulo@89
|
5829 };
|
|
paulo@89
|
5830
|
|
paulo@89
|
5831 nv.models.line = function() {
|
|
paulo@89
|
5832 "use strict";
|
|
paulo@89
|
5833 //============================================================
|
|
paulo@89
|
5834 // Public Variables with Default Settings
|
|
paulo@89
|
5835 //------------------------------------------------------------
|
|
paulo@89
|
5836
|
|
paulo@89
|
5837 var scatter = nv.models.scatter()
|
|
paulo@89
|
5838 ;
|
|
paulo@89
|
5839
|
|
paulo@89
|
5840 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
5841 , width = 960
|
|
paulo@89
|
5842 , height = 500
|
|
paulo@89
|
5843 , container = null
|
|
paulo@89
|
5844 , strokeWidth = 1.5
|
|
paulo@89
|
5845 , color = nv.utils.defaultColor() // a function that returns a color
|
|
paulo@89
|
5846 , getX = function(d) { return d.x } // accessor to get the x value from a data point
|
|
paulo@89
|
5847 , getY = function(d) { return d.y } // accessor to get the y value from a data point
|
|
paulo@89
|
5848 , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined
|
|
paulo@89
|
5849 , isArea = function(d) { return d.area } // decides if a line is an area or just a line
|
|
paulo@89
|
5850 , clipEdge = false // if true, masks lines within x and y scale
|
|
paulo@89
|
5851 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
5852 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
5853 , interpolate = "linear" // controls the line interpolation
|
|
paulo@89
|
5854 , duration = 250
|
|
paulo@89
|
5855 , dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
|
|
paulo@89
|
5856 ;
|
|
paulo@89
|
5857
|
|
paulo@89
|
5858 scatter
|
|
paulo@89
|
5859 .pointSize(16) // default size
|
|
paulo@89
|
5860 .pointDomain([16,256]) //set to speed up calculation, needs to be unset if there is a custom size accessor
|
|
paulo@89
|
5861 ;
|
|
paulo@89
|
5862
|
|
paulo@89
|
5863 //============================================================
|
|
paulo@89
|
5864
|
|
paulo@89
|
5865
|
|
paulo@89
|
5866 //============================================================
|
|
paulo@89
|
5867 // Private Variables
|
|
paulo@89
|
5868 //------------------------------------------------------------
|
|
paulo@89
|
5869
|
|
paulo@89
|
5870 var x0, y0 //used to store previous scales
|
|
paulo@89
|
5871 , renderWatch = nv.utils.renderWatch(dispatch, duration)
|
|
paulo@89
|
5872 ;
|
|
paulo@89
|
5873
|
|
paulo@89
|
5874 //============================================================
|
|
paulo@89
|
5875
|
|
paulo@89
|
5876
|
|
paulo@89
|
5877 function chart(selection) {
|
|
paulo@89
|
5878 renderWatch.reset();
|
|
paulo@89
|
5879 renderWatch.models(scatter);
|
|
paulo@89
|
5880 selection.each(function(data) {
|
|
paulo@89
|
5881 container = d3.select(this);
|
|
paulo@89
|
5882 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
5883 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
5884 nv.utils.initSVG(container);
|
|
paulo@89
|
5885
|
|
paulo@89
|
5886 // Setup Scales
|
|
paulo@89
|
5887 x = scatter.xScale();
|
|
paulo@89
|
5888 y = scatter.yScale();
|
|
paulo@89
|
5889
|
|
paulo@89
|
5890 x0 = x0 || x;
|
|
paulo@89
|
5891 y0 = y0 || y;
|
|
paulo@89
|
5892
|
|
paulo@89
|
5893 // Setup containers and skeleton of chart
|
|
paulo@89
|
5894 var wrap = container.selectAll('g.nv-wrap.nv-line').data([data]);
|
|
paulo@89
|
5895 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line');
|
|
paulo@89
|
5896 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
5897 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
5898 var g = wrap.select('g');
|
|
paulo@89
|
5899
|
|
paulo@89
|
5900 gEnter.append('g').attr('class', 'nv-groups');
|
|
paulo@89
|
5901 gEnter.append('g').attr('class', 'nv-scatterWrap');
|
|
paulo@89
|
5902
|
|
paulo@89
|
5903 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
5904
|
|
paulo@89
|
5905 scatter
|
|
paulo@89
|
5906 .width(availableWidth)
|
|
paulo@89
|
5907 .height(availableHeight);
|
|
paulo@89
|
5908
|
|
paulo@89
|
5909 var scatterWrap = wrap.select('.nv-scatterWrap');
|
|
paulo@89
|
5910 scatterWrap.call(scatter);
|
|
paulo@89
|
5911
|
|
paulo@89
|
5912 defsEnter.append('clipPath')
|
|
paulo@89
|
5913 .attr('id', 'nv-edge-clip-' + scatter.id())
|
|
paulo@89
|
5914 .append('rect');
|
|
paulo@89
|
5915
|
|
paulo@89
|
5916 wrap.select('#nv-edge-clip-' + scatter.id() + ' rect')
|
|
paulo@89
|
5917 .attr('width', availableWidth)
|
|
paulo@89
|
5918 .attr('height', (availableHeight > 0) ? availableHeight : 0);
|
|
paulo@89
|
5919
|
|
paulo@89
|
5920 g .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
|
|
paulo@89
|
5921 scatterWrap
|
|
paulo@89
|
5922 .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
|
|
paulo@89
|
5923
|
|
paulo@89
|
5924 var groups = wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
5925 .data(function(d) { return d }, function(d) { return d.key });
|
|
paulo@89
|
5926 groups.enter().append('g')
|
|
paulo@89
|
5927 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
5928 .style('stroke-width', function(d) { return d.strokeWidth || strokeWidth })
|
|
paulo@89
|
5929 .style('fill-opacity', 1e-6);
|
|
paulo@89
|
5930
|
|
paulo@89
|
5931 groups.exit().remove();
|
|
paulo@89
|
5932
|
|
paulo@89
|
5933 groups
|
|
paulo@89
|
5934 .attr('class', function(d,i) {
|
|
paulo@89
|
5935 return (d.classed || '') + ' nv-group nv-series-' + i;
|
|
paulo@89
|
5936 })
|
|
paulo@89
|
5937 .classed('hover', function(d) { return d.hover })
|
|
paulo@89
|
5938 .style('fill', function(d,i){ return color(d, i) })
|
|
paulo@89
|
5939 .style('stroke', function(d,i){ return color(d, i)});
|
|
paulo@89
|
5940 groups.watchTransition(renderWatch, 'line: groups')
|
|
paulo@89
|
5941 .style('stroke-opacity', 1)
|
|
paulo@89
|
5942 .style('fill-opacity', function(d) { return d.fillOpacity || .5});
|
|
paulo@89
|
5943
|
|
paulo@89
|
5944 var areaPaths = groups.selectAll('path.nv-area')
|
|
paulo@89
|
5945 .data(function(d) { return isArea(d) ? [d] : [] }); // this is done differently than lines because I need to check if series is an area
|
|
paulo@89
|
5946 areaPaths.enter().append('path')
|
|
paulo@89
|
5947 .attr('class', 'nv-area')
|
|
paulo@89
|
5948 .attr('d', function(d) {
|
|
paulo@89
|
5949 return d3.svg.area()
|
|
paulo@89
|
5950 .interpolate(interpolate)
|
|
paulo@89
|
5951 .defined(defined)
|
|
paulo@89
|
5952 .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
|
|
paulo@89
|
5953 .y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
|
|
paulo@89
|
5954 .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
|
|
paulo@89
|
5955 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
|
|
paulo@89
|
5956 .apply(this, [d.values])
|
|
paulo@89
|
5957 });
|
|
paulo@89
|
5958 groups.exit().selectAll('path.nv-area')
|
|
paulo@89
|
5959 .remove();
|
|
paulo@89
|
5960
|
|
paulo@89
|
5961 areaPaths.watchTransition(renderWatch, 'line: areaPaths')
|
|
paulo@89
|
5962 .attr('d', function(d) {
|
|
paulo@89
|
5963 return d3.svg.area()
|
|
paulo@89
|
5964 .interpolate(interpolate)
|
|
paulo@89
|
5965 .defined(defined)
|
|
paulo@89
|
5966 .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
|
|
paulo@89
|
5967 .y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
|
|
paulo@89
|
5968 .y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
|
|
paulo@89
|
5969 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
|
|
paulo@89
|
5970 .apply(this, [d.values])
|
|
paulo@89
|
5971 });
|
|
paulo@89
|
5972
|
|
paulo@89
|
5973 var linePaths = groups.selectAll('path.nv-line')
|
|
paulo@89
|
5974 .data(function(d) { return [d.values] });
|
|
paulo@89
|
5975
|
|
paulo@89
|
5976 linePaths.enter().append('path')
|
|
paulo@89
|
5977 .attr('class', 'nv-line')
|
|
paulo@89
|
5978 .attr('d',
|
|
paulo@89
|
5979 d3.svg.line()
|
|
paulo@89
|
5980 .interpolate(interpolate)
|
|
paulo@89
|
5981 .defined(defined)
|
|
paulo@89
|
5982 .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
|
|
paulo@89
|
5983 .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
|
|
paulo@89
|
5984 );
|
|
paulo@89
|
5985
|
|
paulo@89
|
5986 linePaths.watchTransition(renderWatch, 'line: linePaths')
|
|
paulo@89
|
5987 .attr('d',
|
|
paulo@89
|
5988 d3.svg.line()
|
|
paulo@89
|
5989 .interpolate(interpolate)
|
|
paulo@89
|
5990 .defined(defined)
|
|
paulo@89
|
5991 .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
|
|
paulo@89
|
5992 .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
|
|
paulo@89
|
5993 );
|
|
paulo@89
|
5994
|
|
paulo@89
|
5995 //store old scales for use in transitions on update
|
|
paulo@89
|
5996 x0 = x.copy();
|
|
paulo@89
|
5997 y0 = y.copy();
|
|
paulo@89
|
5998 });
|
|
paulo@89
|
5999 renderWatch.renderEnd('line immediate');
|
|
paulo@89
|
6000 return chart;
|
|
paulo@89
|
6001 }
|
|
paulo@89
|
6002
|
|
paulo@89
|
6003
|
|
paulo@89
|
6004 //============================================================
|
|
paulo@89
|
6005 // Expose Public Variables
|
|
paulo@89
|
6006 //------------------------------------------------------------
|
|
paulo@89
|
6007
|
|
paulo@89
|
6008 chart.dispatch = dispatch;
|
|
paulo@89
|
6009 chart.scatter = scatter;
|
|
paulo@89
|
6010 // Pass through events
|
|
paulo@89
|
6011 scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });
|
|
paulo@89
|
6012 scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });
|
|
paulo@89
|
6013 scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });
|
|
paulo@89
|
6014
|
|
paulo@89
|
6015 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
6016
|
|
paulo@89
|
6017 chart._options = Object.create({}, {
|
|
paulo@89
|
6018 // simple options, just get/set the necessary values
|
|
paulo@89
|
6019 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
6020 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
6021 defined: {get: function(){return defined;}, set: function(_){defined=_;}},
|
|
paulo@89
|
6022 interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
|
|
paulo@89
|
6023 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
6024
|
|
paulo@89
|
6025 // options that require extra logic in the setter
|
|
paulo@89
|
6026 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
6027 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
6028 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
6029 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
6030 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
6031 }},
|
|
paulo@89
|
6032 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
6033 duration = _;
|
|
paulo@89
|
6034 renderWatch.reset(duration);
|
|
paulo@89
|
6035 scatter.duration(duration);
|
|
paulo@89
|
6036 }},
|
|
paulo@89
|
6037 isArea: {get: function(){return isArea;}, set: function(_){
|
|
paulo@89
|
6038 isArea = d3.functor(_);
|
|
paulo@89
|
6039 }},
|
|
paulo@89
|
6040 x: {get: function(){return getX;}, set: function(_){
|
|
paulo@89
|
6041 getX = _;
|
|
paulo@89
|
6042 scatter.x(_);
|
|
paulo@89
|
6043 }},
|
|
paulo@89
|
6044 y: {get: function(){return getY;}, set: function(_){
|
|
paulo@89
|
6045 getY = _;
|
|
paulo@89
|
6046 scatter.y(_);
|
|
paulo@89
|
6047 }},
|
|
paulo@89
|
6048 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
6049 color = nv.utils.getColor(_);
|
|
paulo@89
|
6050 scatter.color(color);
|
|
paulo@89
|
6051 }}
|
|
paulo@89
|
6052 });
|
|
paulo@89
|
6053
|
|
paulo@89
|
6054 nv.utils.inheritOptions(chart, scatter);
|
|
paulo@89
|
6055 nv.utils.initOptions(chart);
|
|
paulo@89
|
6056
|
|
paulo@89
|
6057 return chart;
|
|
paulo@89
|
6058 };
|
|
paulo@89
|
6059 nv.models.lineChart = function() {
|
|
paulo@89
|
6060 "use strict";
|
|
paulo@89
|
6061
|
|
paulo@89
|
6062 //============================================================
|
|
paulo@89
|
6063 // Public Variables with Default Settings
|
|
paulo@89
|
6064 //------------------------------------------------------------
|
|
paulo@89
|
6065
|
|
paulo@89
|
6066 var lines = nv.models.line()
|
|
paulo@89
|
6067 , xAxis = nv.models.axis()
|
|
paulo@89
|
6068 , yAxis = nv.models.axis()
|
|
paulo@89
|
6069 , legend = nv.models.legend()
|
|
paulo@89
|
6070 , interactiveLayer = nv.interactiveGuideline()
|
|
paulo@89
|
6071 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
6072 ;
|
|
paulo@89
|
6073
|
|
paulo@89
|
6074 var margin = {top: 30, right: 20, bottom: 50, left: 60}
|
|
paulo@89
|
6075 , color = nv.utils.defaultColor()
|
|
paulo@89
|
6076 , width = null
|
|
paulo@89
|
6077 , height = null
|
|
paulo@89
|
6078 , showLegend = true
|
|
paulo@89
|
6079 , showXAxis = true
|
|
paulo@89
|
6080 , showYAxis = true
|
|
paulo@89
|
6081 , rightAlignYAxis = false
|
|
paulo@89
|
6082 , useInteractiveGuideline = false
|
|
paulo@89
|
6083 , x
|
|
paulo@89
|
6084 , y
|
|
paulo@89
|
6085 , state = nv.utils.state()
|
|
paulo@89
|
6086 , defaultState = null
|
|
paulo@89
|
6087 , noData = null
|
|
paulo@89
|
6088 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd')
|
|
paulo@89
|
6089 , duration = 250
|
|
paulo@89
|
6090 ;
|
|
paulo@89
|
6091
|
|
paulo@89
|
6092 // set options on sub-objects for this chart
|
|
paulo@89
|
6093 xAxis.orient('bottom').tickPadding(7);
|
|
paulo@89
|
6094 yAxis.orient(rightAlignYAxis ? 'right' : 'left');
|
|
paulo@89
|
6095 tooltip.valueFormatter(function(d, i) {
|
|
paulo@89
|
6096 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
6097 }).headerFormatter(function(d, i) {
|
|
paulo@89
|
6098 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
6099 });
|
|
paulo@89
|
6100
|
|
paulo@89
|
6101
|
|
paulo@89
|
6102 //============================================================
|
|
paulo@89
|
6103 // Private Variables
|
|
paulo@89
|
6104 //------------------------------------------------------------
|
|
paulo@89
|
6105
|
|
paulo@89
|
6106 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
6107
|
|
paulo@89
|
6108 var stateGetter = function(data) {
|
|
paulo@89
|
6109 return function(){
|
|
paulo@89
|
6110 return {
|
|
paulo@89
|
6111 active: data.map(function(d) { return !d.disabled })
|
|
paulo@89
|
6112 };
|
|
paulo@89
|
6113 }
|
|
paulo@89
|
6114 };
|
|
paulo@89
|
6115
|
|
paulo@89
|
6116 var stateSetter = function(data) {
|
|
paulo@89
|
6117 return function(state) {
|
|
paulo@89
|
6118 if (state.active !== undefined)
|
|
paulo@89
|
6119 data.forEach(function(series,i) {
|
|
paulo@89
|
6120 series.disabled = !state.active[i];
|
|
paulo@89
|
6121 });
|
|
paulo@89
|
6122 }
|
|
paulo@89
|
6123 };
|
|
paulo@89
|
6124
|
|
paulo@89
|
6125 function chart(selection) {
|
|
paulo@89
|
6126 renderWatch.reset();
|
|
paulo@89
|
6127 renderWatch.models(lines);
|
|
paulo@89
|
6128 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
6129 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
6130
|
|
paulo@89
|
6131 selection.each(function(data) {
|
|
paulo@89
|
6132 var container = d3.select(this),
|
|
paulo@89
|
6133 that = this;
|
|
paulo@89
|
6134 nv.utils.initSVG(container);
|
|
paulo@89
|
6135 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
6136 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
6137
|
|
paulo@89
|
6138 chart.update = function() {
|
|
paulo@89
|
6139 if (duration === 0)
|
|
paulo@89
|
6140 container.call(chart);
|
|
paulo@89
|
6141 else
|
|
paulo@89
|
6142 container.transition().duration(duration).call(chart)
|
|
paulo@89
|
6143 };
|
|
paulo@89
|
6144 chart.container = this;
|
|
paulo@89
|
6145
|
|
paulo@89
|
6146 state
|
|
paulo@89
|
6147 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
6148 .getter(stateGetter(data))
|
|
paulo@89
|
6149 .update();
|
|
paulo@89
|
6150
|
|
paulo@89
|
6151 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
6152 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
6153
|
|
paulo@89
|
6154 if (!defaultState) {
|
|
paulo@89
|
6155 var key;
|
|
paulo@89
|
6156 defaultState = {};
|
|
paulo@89
|
6157 for (key in state) {
|
|
paulo@89
|
6158 if (state[key] instanceof Array)
|
|
paulo@89
|
6159 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
6160 else
|
|
paulo@89
|
6161 defaultState[key] = state[key];
|
|
paulo@89
|
6162 }
|
|
paulo@89
|
6163 }
|
|
paulo@89
|
6164
|
|
paulo@89
|
6165 // Display noData message if there's nothing to show.
|
|
paulo@89
|
6166 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
6167 nv.utils.noData(chart, container)
|
|
paulo@89
|
6168 return chart;
|
|
paulo@89
|
6169 } else {
|
|
paulo@89
|
6170 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
6171 }
|
|
paulo@89
|
6172
|
|
paulo@89
|
6173
|
|
paulo@89
|
6174 // Setup Scales
|
|
paulo@89
|
6175 x = lines.xScale();
|
|
paulo@89
|
6176 y = lines.yScale();
|
|
paulo@89
|
6177
|
|
paulo@89
|
6178 // Setup containers and skeleton of chart
|
|
paulo@89
|
6179 var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
|
|
paulo@89
|
6180 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
|
|
paulo@89
|
6181 var g = wrap.select('g');
|
|
paulo@89
|
6182
|
|
paulo@89
|
6183 gEnter.append("rect").style("opacity",0);
|
|
paulo@89
|
6184 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
6185 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
6186 gEnter.append('g').attr('class', 'nv-linesWrap');
|
|
paulo@89
|
6187 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
6188 gEnter.append('g').attr('class', 'nv-interactive');
|
|
paulo@89
|
6189
|
|
paulo@89
|
6190 g.select("rect")
|
|
paulo@89
|
6191 .attr("width",availableWidth)
|
|
paulo@89
|
6192 .attr("height",(availableHeight > 0) ? availableHeight : 0);
|
|
paulo@89
|
6193
|
|
paulo@89
|
6194 // Legend
|
|
paulo@89
|
6195 if (showLegend) {
|
|
paulo@89
|
6196 legend.width(availableWidth);
|
|
paulo@89
|
6197
|
|
paulo@89
|
6198 g.select('.nv-legendWrap')
|
|
paulo@89
|
6199 .datum(data)
|
|
paulo@89
|
6200 .call(legend);
|
|
paulo@89
|
6201
|
|
paulo@89
|
6202 if ( margin.top != legend.height()) {
|
|
paulo@89
|
6203 margin.top = legend.height();
|
|
paulo@89
|
6204 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
6205 }
|
|
paulo@89
|
6206
|
|
paulo@89
|
6207 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
6208 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
6209 }
|
|
paulo@89
|
6210
|
|
paulo@89
|
6211 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
6212
|
|
paulo@89
|
6213 if (rightAlignYAxis) {
|
|
paulo@89
|
6214 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
6215 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
6216 }
|
|
paulo@89
|
6217
|
|
paulo@89
|
6218 //Set up interactive layer
|
|
paulo@89
|
6219 if (useInteractiveGuideline) {
|
|
paulo@89
|
6220 interactiveLayer
|
|
paulo@89
|
6221 .width(availableWidth)
|
|
paulo@89
|
6222 .height(availableHeight)
|
|
paulo@89
|
6223 .margin({left:margin.left, top:margin.top})
|
|
paulo@89
|
6224 .svgContainer(container)
|
|
paulo@89
|
6225 .xScale(x);
|
|
paulo@89
|
6226 wrap.select(".nv-interactive").call(interactiveLayer);
|
|
paulo@89
|
6227 }
|
|
paulo@89
|
6228
|
|
paulo@89
|
6229 lines
|
|
paulo@89
|
6230 .width(availableWidth)
|
|
paulo@89
|
6231 .height(availableHeight)
|
|
paulo@89
|
6232 .color(data.map(function(d,i) {
|
|
paulo@89
|
6233 return d.color || color(d, i);
|
|
paulo@89
|
6234 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
6235
|
|
paulo@89
|
6236
|
|
paulo@89
|
6237 var linesWrap = g.select('.nv-linesWrap')
|
|
paulo@89
|
6238 .datum(data.filter(function(d) { return !d.disabled }));
|
|
paulo@89
|
6239
|
|
paulo@89
|
6240 linesWrap.call(lines);
|
|
paulo@89
|
6241
|
|
paulo@89
|
6242 // Setup Axes
|
|
paulo@89
|
6243 if (showXAxis) {
|
|
paulo@89
|
6244 xAxis
|
|
paulo@89
|
6245 .scale(x)
|
|
paulo@89
|
6246 ._ticks(nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
6247 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
6248
|
|
paulo@89
|
6249 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
6250 .attr('transform', 'translate(0,' + y.range()[0] + ')');
|
|
paulo@89
|
6251 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
6252 .call(xAxis);
|
|
paulo@89
|
6253 }
|
|
paulo@89
|
6254
|
|
paulo@89
|
6255 if (showYAxis) {
|
|
paulo@89
|
6256 yAxis
|
|
paulo@89
|
6257 .scale(y)
|
|
paulo@89
|
6258 ._ticks(nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
6259 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
6260
|
|
paulo@89
|
6261 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
6262 .call(yAxis);
|
|
paulo@89
|
6263 }
|
|
paulo@89
|
6264
|
|
paulo@89
|
6265 //============================================================
|
|
paulo@89
|
6266 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
6267 //------------------------------------------------------------
|
|
paulo@89
|
6268
|
|
paulo@89
|
6269 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
6270 for (var key in newState)
|
|
paulo@89
|
6271 state[key] = newState[key];
|
|
paulo@89
|
6272 dispatch.stateChange(state);
|
|
paulo@89
|
6273 chart.update();
|
|
paulo@89
|
6274 });
|
|
paulo@89
|
6275
|
|
paulo@89
|
6276 interactiveLayer.dispatch.on('elementMousemove', function(e) {
|
|
paulo@89
|
6277 lines.clearHighlights();
|
|
paulo@89
|
6278 var singlePoint, pointIndex, pointXLocation, allData = [];
|
|
paulo@89
|
6279 data
|
|
paulo@89
|
6280 .filter(function(series, i) {
|
|
paulo@89
|
6281 series.seriesIndex = i;
|
|
paulo@89
|
6282 return !series.disabled;
|
|
paulo@89
|
6283 })
|
|
paulo@89
|
6284 .forEach(function(series,i) {
|
|
paulo@89
|
6285 pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
|
|
paulo@89
|
6286 var point = series.values[pointIndex];
|
|
paulo@89
|
6287 var pointYValue = chart.y()(point, pointIndex);
|
|
paulo@89
|
6288 if (pointYValue != null) {
|
|
paulo@89
|
6289 lines.highlightPoint(i, pointIndex, true);
|
|
paulo@89
|
6290 }
|
|
paulo@89
|
6291 if (point === undefined) return;
|
|
paulo@89
|
6292 if (singlePoint === undefined) singlePoint = point;
|
|
paulo@89
|
6293 if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
6294 allData.push({
|
|
paulo@89
|
6295 key: series.key,
|
|
paulo@89
|
6296 value: pointYValue,
|
|
paulo@89
|
6297 color: color(series,series.seriesIndex)
|
|
paulo@89
|
6298 });
|
|
paulo@89
|
6299 });
|
|
paulo@89
|
6300 //Highlight the tooltip entry based on which point the mouse is closest to.
|
|
paulo@89
|
6301 if (allData.length > 2) {
|
|
paulo@89
|
6302 var yValue = chart.yScale().invert(e.mouseY);
|
|
paulo@89
|
6303 var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
|
|
paulo@89
|
6304 var threshold = 0.03 * domainExtent;
|
|
paulo@89
|
6305 var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
|
|
paulo@89
|
6306 if (indexToHighlight !== null)
|
|
paulo@89
|
6307 allData[indexToHighlight].highlight = true;
|
|
paulo@89
|
6308 }
|
|
paulo@89
|
6309
|
|
paulo@89
|
6310 var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
|
|
paulo@89
|
6311 interactiveLayer.tooltip
|
|
paulo@89
|
6312 .position({left: e.mouseX + margin.left, top: e.mouseY + margin.top})
|
|
paulo@89
|
6313 .chartContainer(that.parentNode)
|
|
paulo@89
|
6314 .valueFormatter(function(d,i) {
|
|
paulo@89
|
6315 return d == null ? "N/A" : yAxis.tickFormat()(d);
|
|
paulo@89
|
6316 })
|
|
paulo@89
|
6317 .data({
|
|
paulo@89
|
6318 value: xValue,
|
|
paulo@89
|
6319 index: pointIndex,
|
|
paulo@89
|
6320 series: allData
|
|
paulo@89
|
6321 })();
|
|
paulo@89
|
6322
|
|
paulo@89
|
6323 interactiveLayer.renderGuideLine(pointXLocation);
|
|
paulo@89
|
6324
|
|
paulo@89
|
6325 });
|
|
paulo@89
|
6326
|
|
paulo@89
|
6327 interactiveLayer.dispatch.on('elementClick', function(e) {
|
|
paulo@89
|
6328 var pointXLocation, allData = [];
|
|
paulo@89
|
6329
|
|
paulo@89
|
6330 data.filter(function(series, i) {
|
|
paulo@89
|
6331 series.seriesIndex = i;
|
|
paulo@89
|
6332 return !series.disabled;
|
|
paulo@89
|
6333 }).forEach(function(series) {
|
|
paulo@89
|
6334 var pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
|
|
paulo@89
|
6335 var point = series.values[pointIndex];
|
|
paulo@89
|
6336 if (typeof point === 'undefined') return;
|
|
paulo@89
|
6337 if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
6338 var yPos = chart.yScale()(chart.y()(point,pointIndex));
|
|
paulo@89
|
6339 allData.push({
|
|
paulo@89
|
6340 point: point,
|
|
paulo@89
|
6341 pointIndex: pointIndex,
|
|
paulo@89
|
6342 pos: [pointXLocation, yPos],
|
|
paulo@89
|
6343 seriesIndex: series.seriesIndex,
|
|
paulo@89
|
6344 series: series
|
|
paulo@89
|
6345 });
|
|
paulo@89
|
6346 });
|
|
paulo@89
|
6347
|
|
paulo@89
|
6348 lines.dispatch.elementClick(allData);
|
|
paulo@89
|
6349 });
|
|
paulo@89
|
6350
|
|
paulo@89
|
6351 interactiveLayer.dispatch.on("elementMouseout",function(e) {
|
|
paulo@89
|
6352 lines.clearHighlights();
|
|
paulo@89
|
6353 });
|
|
paulo@89
|
6354
|
|
paulo@89
|
6355 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
6356 if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {
|
|
paulo@89
|
6357 data.forEach(function(series,i) {
|
|
paulo@89
|
6358 series.disabled = e.disabled[i];
|
|
paulo@89
|
6359 });
|
|
paulo@89
|
6360
|
|
paulo@89
|
6361 state.disabled = e.disabled;
|
|
paulo@89
|
6362 }
|
|
paulo@89
|
6363
|
|
paulo@89
|
6364 chart.update();
|
|
paulo@89
|
6365 });
|
|
paulo@89
|
6366
|
|
paulo@89
|
6367 });
|
|
paulo@89
|
6368
|
|
paulo@89
|
6369 renderWatch.renderEnd('lineChart immediate');
|
|
paulo@89
|
6370 return chart;
|
|
paulo@89
|
6371 }
|
|
paulo@89
|
6372
|
|
paulo@89
|
6373 //============================================================
|
|
paulo@89
|
6374 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
6375 //------------------------------------------------------------
|
|
paulo@89
|
6376
|
|
paulo@89
|
6377 lines.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
6378 tooltip.data(evt).position(evt.pos).hidden(false);
|
|
paulo@89
|
6379 });
|
|
paulo@89
|
6380
|
|
paulo@89
|
6381 lines.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
6382 tooltip.hidden(true)
|
|
paulo@89
|
6383 });
|
|
paulo@89
|
6384
|
|
paulo@89
|
6385 //============================================================
|
|
paulo@89
|
6386 // Expose Public Variables
|
|
paulo@89
|
6387 //------------------------------------------------------------
|
|
paulo@89
|
6388
|
|
paulo@89
|
6389 // expose chart's sub-components
|
|
paulo@89
|
6390 chart.dispatch = dispatch;
|
|
paulo@89
|
6391 chart.lines = lines;
|
|
paulo@89
|
6392 chart.legend = legend;
|
|
paulo@89
|
6393 chart.xAxis = xAxis;
|
|
paulo@89
|
6394 chart.yAxis = yAxis;
|
|
paulo@89
|
6395 chart.interactiveLayer = interactiveLayer;
|
|
paulo@89
|
6396 chart.tooltip = tooltip;
|
|
paulo@89
|
6397
|
|
paulo@89
|
6398 chart.dispatch = dispatch;
|
|
paulo@89
|
6399 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
6400
|
|
paulo@89
|
6401 chart._options = Object.create({}, {
|
|
paulo@89
|
6402 // simple options, just get/set the necessary values
|
|
paulo@89
|
6403 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
6404 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
6405 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
6406 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
6407 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
6408 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
6409 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
6410
|
|
paulo@89
|
6411 // deprecated options
|
|
paulo@89
|
6412 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
6413 // deprecated after 1.7.1
|
|
paulo@89
|
6414 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
6415 tooltip.enabled(!!_);
|
|
paulo@89
|
6416 }},
|
|
paulo@89
|
6417 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
6418 // deprecated after 1.7.1
|
|
paulo@89
|
6419 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
6420 tooltip.contentGenerator(_);
|
|
paulo@89
|
6421 }},
|
|
paulo@89
|
6422
|
|
paulo@89
|
6423 // options that require extra logic in the setter
|
|
paulo@89
|
6424 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
6425 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
6426 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
6427 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
6428 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
6429 }},
|
|
paulo@89
|
6430 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
6431 duration = _;
|
|
paulo@89
|
6432 renderWatch.reset(duration);
|
|
paulo@89
|
6433 lines.duration(duration);
|
|
paulo@89
|
6434 xAxis.duration(duration);
|
|
paulo@89
|
6435 yAxis.duration(duration);
|
|
paulo@89
|
6436 }},
|
|
paulo@89
|
6437 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
6438 color = nv.utils.getColor(_);
|
|
paulo@89
|
6439 legend.color(color);
|
|
paulo@89
|
6440 lines.color(color);
|
|
paulo@89
|
6441 }},
|
|
paulo@89
|
6442 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
6443 rightAlignYAxis = _;
|
|
paulo@89
|
6444 yAxis.orient( rightAlignYAxis ? 'right' : 'left');
|
|
paulo@89
|
6445 }},
|
|
paulo@89
|
6446 useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
|
|
paulo@89
|
6447 useInteractiveGuideline = _;
|
|
paulo@89
|
6448 if (useInteractiveGuideline) {
|
|
paulo@89
|
6449 lines.interactive(false);
|
|
paulo@89
|
6450 lines.useVoronoi(false);
|
|
paulo@89
|
6451 }
|
|
paulo@89
|
6452 }}
|
|
paulo@89
|
6453 });
|
|
paulo@89
|
6454
|
|
paulo@89
|
6455 nv.utils.inheritOptions(chart, lines);
|
|
paulo@89
|
6456 nv.utils.initOptions(chart);
|
|
paulo@89
|
6457
|
|
paulo@89
|
6458 return chart;
|
|
paulo@89
|
6459 };
|
|
paulo@89
|
6460 nv.models.linePlusBarChart = function() {
|
|
paulo@89
|
6461 "use strict";
|
|
paulo@89
|
6462
|
|
paulo@89
|
6463 //============================================================
|
|
paulo@89
|
6464 // Public Variables with Default Settings
|
|
paulo@89
|
6465 //------------------------------------------------------------
|
|
paulo@89
|
6466
|
|
paulo@89
|
6467 var lines = nv.models.line()
|
|
paulo@89
|
6468 , lines2 = nv.models.line()
|
|
paulo@89
|
6469 , bars = nv.models.historicalBar()
|
|
paulo@89
|
6470 , bars2 = nv.models.historicalBar()
|
|
paulo@89
|
6471 , xAxis = nv.models.axis()
|
|
paulo@89
|
6472 , x2Axis = nv.models.axis()
|
|
paulo@89
|
6473 , y1Axis = nv.models.axis()
|
|
paulo@89
|
6474 , y2Axis = nv.models.axis()
|
|
paulo@89
|
6475 , y3Axis = nv.models.axis()
|
|
paulo@89
|
6476 , y4Axis = nv.models.axis()
|
|
paulo@89
|
6477 , legend = nv.models.legend()
|
|
paulo@89
|
6478 , brush = d3.svg.brush()
|
|
paulo@89
|
6479 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
6480 ;
|
|
paulo@89
|
6481
|
|
paulo@89
|
6482 var margin = {top: 30, right: 30, bottom: 30, left: 60}
|
|
paulo@89
|
6483 , margin2 = {top: 0, right: 30, bottom: 20, left: 60}
|
|
paulo@89
|
6484 , width = null
|
|
paulo@89
|
6485 , height = null
|
|
paulo@89
|
6486 , getX = function(d) { return d.x }
|
|
paulo@89
|
6487 , getY = function(d) { return d.y }
|
|
paulo@89
|
6488 , color = nv.utils.defaultColor()
|
|
paulo@89
|
6489 , showLegend = true
|
|
paulo@89
|
6490 , focusEnable = true
|
|
paulo@89
|
6491 , focusShowAxisY = false
|
|
paulo@89
|
6492 , focusShowAxisX = true
|
|
paulo@89
|
6493 , focusHeight = 50
|
|
paulo@89
|
6494 , extent
|
|
paulo@89
|
6495 , brushExtent = null
|
|
paulo@89
|
6496 , x
|
|
paulo@89
|
6497 , x2
|
|
paulo@89
|
6498 , y1
|
|
paulo@89
|
6499 , y2
|
|
paulo@89
|
6500 , y3
|
|
paulo@89
|
6501 , y4
|
|
paulo@89
|
6502 , noData = null
|
|
paulo@89
|
6503 , dispatch = d3.dispatch('brush', 'stateChange', 'changeState')
|
|
paulo@89
|
6504 , transitionDuration = 0
|
|
paulo@89
|
6505 , state = nv.utils.state()
|
|
paulo@89
|
6506 , defaultState = null
|
|
paulo@89
|
6507 , legendLeftAxisHint = ' (left axis)'
|
|
paulo@89
|
6508 , legendRightAxisHint = ' (right axis)'
|
|
paulo@89
|
6509 ;
|
|
paulo@89
|
6510
|
|
paulo@89
|
6511 lines.clipEdge(true);
|
|
paulo@89
|
6512 lines2.interactive(false);
|
|
paulo@89
|
6513 xAxis.orient('bottom').tickPadding(5);
|
|
paulo@89
|
6514 y1Axis.orient('left');
|
|
paulo@89
|
6515 y2Axis.orient('right');
|
|
paulo@89
|
6516 x2Axis.orient('bottom').tickPadding(5);
|
|
paulo@89
|
6517 y3Axis.orient('left');
|
|
paulo@89
|
6518 y4Axis.orient('right');
|
|
paulo@89
|
6519
|
|
paulo@89
|
6520 tooltip.headerEnabled(true).headerFormatter(function(d, i) {
|
|
paulo@89
|
6521 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
6522 });
|
|
paulo@89
|
6523
|
|
paulo@89
|
6524 //============================================================
|
|
paulo@89
|
6525 // Private Variables
|
|
paulo@89
|
6526 //------------------------------------------------------------
|
|
paulo@89
|
6527
|
|
paulo@89
|
6528 var stateGetter = function(data) {
|
|
paulo@89
|
6529 return function(){
|
|
paulo@89
|
6530 return {
|
|
paulo@89
|
6531 active: data.map(function(d) { return !d.disabled })
|
|
paulo@89
|
6532 };
|
|
paulo@89
|
6533 }
|
|
paulo@89
|
6534 };
|
|
paulo@89
|
6535
|
|
paulo@89
|
6536 var stateSetter = function(data) {
|
|
paulo@89
|
6537 return function(state) {
|
|
paulo@89
|
6538 if (state.active !== undefined)
|
|
paulo@89
|
6539 data.forEach(function(series,i) {
|
|
paulo@89
|
6540 series.disabled = !state.active[i];
|
|
paulo@89
|
6541 });
|
|
paulo@89
|
6542 }
|
|
paulo@89
|
6543 };
|
|
paulo@89
|
6544
|
|
paulo@89
|
6545 function chart(selection) {
|
|
paulo@89
|
6546 selection.each(function(data) {
|
|
paulo@89
|
6547 var container = d3.select(this),
|
|
paulo@89
|
6548 that = this;
|
|
paulo@89
|
6549 nv.utils.initSVG(container);
|
|
paulo@89
|
6550 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
6551 availableHeight1 = nv.utils.availableHeight(height, container, margin)
|
|
paulo@89
|
6552 - (focusEnable ? focusHeight : 0),
|
|
paulo@89
|
6553 availableHeight2 = focusHeight - margin2.top - margin2.bottom;
|
|
paulo@89
|
6554
|
|
paulo@89
|
6555 chart.update = function() { container.transition().duration(transitionDuration).call(chart); };
|
|
paulo@89
|
6556 chart.container = this;
|
|
paulo@89
|
6557
|
|
paulo@89
|
6558 state
|
|
paulo@89
|
6559 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
6560 .getter(stateGetter(data))
|
|
paulo@89
|
6561 .update();
|
|
paulo@89
|
6562
|
|
paulo@89
|
6563 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
6564 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
6565
|
|
paulo@89
|
6566 if (!defaultState) {
|
|
paulo@89
|
6567 var key;
|
|
paulo@89
|
6568 defaultState = {};
|
|
paulo@89
|
6569 for (key in state) {
|
|
paulo@89
|
6570 if (state[key] instanceof Array)
|
|
paulo@89
|
6571 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
6572 else
|
|
paulo@89
|
6573 defaultState[key] = state[key];
|
|
paulo@89
|
6574 }
|
|
paulo@89
|
6575 }
|
|
paulo@89
|
6576
|
|
paulo@89
|
6577 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
6578 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
6579 nv.utils.noData(chart, container)
|
|
paulo@89
|
6580 return chart;
|
|
paulo@89
|
6581 } else {
|
|
paulo@89
|
6582 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
6583 }
|
|
paulo@89
|
6584
|
|
paulo@89
|
6585 // Setup Scales
|
|
paulo@89
|
6586 var dataBars = data.filter(function(d) { return !d.disabled && d.bar });
|
|
paulo@89
|
6587 var dataLines = data.filter(function(d) { return !d.bar }); // removed the !d.disabled clause here to fix Issue #240
|
|
paulo@89
|
6588
|
|
paulo@89
|
6589 x = bars.xScale();
|
|
paulo@89
|
6590 x2 = x2Axis.scale();
|
|
paulo@89
|
6591 y1 = bars.yScale();
|
|
paulo@89
|
6592 y2 = lines.yScale();
|
|
paulo@89
|
6593 y3 = bars2.yScale();
|
|
paulo@89
|
6594 y4 = lines2.yScale();
|
|
paulo@89
|
6595
|
|
paulo@89
|
6596 var series1 = data
|
|
paulo@89
|
6597 .filter(function(d) { return !d.disabled && d.bar })
|
|
paulo@89
|
6598 .map(function(d) {
|
|
paulo@89
|
6599 return d.values.map(function(d,i) {
|
|
paulo@89
|
6600 return { x: getX(d,i), y: getY(d,i) }
|
|
paulo@89
|
6601 })
|
|
paulo@89
|
6602 });
|
|
paulo@89
|
6603
|
|
paulo@89
|
6604 var series2 = data
|
|
paulo@89
|
6605 .filter(function(d) { return !d.disabled && !d.bar })
|
|
paulo@89
|
6606 .map(function(d) {
|
|
paulo@89
|
6607 return d.values.map(function(d,i) {
|
|
paulo@89
|
6608 return { x: getX(d,i), y: getY(d,i) }
|
|
paulo@89
|
6609 })
|
|
paulo@89
|
6610 });
|
|
paulo@89
|
6611
|
|
paulo@89
|
6612 x.range([0, availableWidth]);
|
|
paulo@89
|
6613
|
|
paulo@89
|
6614 x2 .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
|
|
paulo@89
|
6615 .range([0, availableWidth]);
|
|
paulo@89
|
6616
|
|
paulo@89
|
6617 // Setup containers and skeleton of chart
|
|
paulo@89
|
6618 var wrap = container.selectAll('g.nv-wrap.nv-linePlusBar').data([data]);
|
|
paulo@89
|
6619 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-linePlusBar').append('g');
|
|
paulo@89
|
6620 var g = wrap.select('g');
|
|
paulo@89
|
6621
|
|
paulo@89
|
6622 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
6623
|
|
paulo@89
|
6624 // this is the main chart
|
|
paulo@89
|
6625 var focusEnter = gEnter.append('g').attr('class', 'nv-focus');
|
|
paulo@89
|
6626 focusEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
6627 focusEnter.append('g').attr('class', 'nv-y1 nv-axis');
|
|
paulo@89
|
6628 focusEnter.append('g').attr('class', 'nv-y2 nv-axis');
|
|
paulo@89
|
6629 focusEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
6630 focusEnter.append('g').attr('class', 'nv-linesWrap');
|
|
paulo@89
|
6631
|
|
paulo@89
|
6632 // context chart is where you can focus in
|
|
paulo@89
|
6633 var contextEnter = gEnter.append('g').attr('class', 'nv-context');
|
|
paulo@89
|
6634 contextEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
6635 contextEnter.append('g').attr('class', 'nv-y1 nv-axis');
|
|
paulo@89
|
6636 contextEnter.append('g').attr('class', 'nv-y2 nv-axis');
|
|
paulo@89
|
6637 contextEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
6638 contextEnter.append('g').attr('class', 'nv-linesWrap');
|
|
paulo@89
|
6639 contextEnter.append('g').attr('class', 'nv-brushBackground');
|
|
paulo@89
|
6640 contextEnter.append('g').attr('class', 'nv-x nv-brush');
|
|
paulo@89
|
6641
|
|
paulo@89
|
6642 //============================================================
|
|
paulo@89
|
6643 // Legend
|
|
paulo@89
|
6644 //------------------------------------------------------------
|
|
paulo@89
|
6645
|
|
paulo@89
|
6646 if (showLegend) {
|
|
paulo@89
|
6647 var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;
|
|
paulo@89
|
6648 var legendXPosition = legend.align() ? legendWidth : 0;
|
|
paulo@89
|
6649
|
|
paulo@89
|
6650 legend.width(legendWidth);
|
|
paulo@89
|
6651
|
|
paulo@89
|
6652 g.select('.nv-legendWrap')
|
|
paulo@89
|
6653 .datum(data.map(function(series) {
|
|
paulo@89
|
6654 series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
|
|
paulo@89
|
6655 series.key = series.originalKey + (series.bar ? legendLeftAxisHint : legendRightAxisHint);
|
|
paulo@89
|
6656 return series;
|
|
paulo@89
|
6657 }))
|
|
paulo@89
|
6658 .call(legend);
|
|
paulo@89
|
6659
|
|
paulo@89
|
6660 if ( margin.top != legend.height()) {
|
|
paulo@89
|
6661 margin.top = legend.height();
|
|
paulo@89
|
6662 // FIXME: shouldn't this be "- (focusEnabled ? focusHeight : 0)"?
|
|
paulo@89
|
6663 availableHeight1 = nv.utils.availableHeight(height, container, margin) - focusHeight;
|
|
paulo@89
|
6664 }
|
|
paulo@89
|
6665
|
|
paulo@89
|
6666 g.select('.nv-legendWrap')
|
|
paulo@89
|
6667 .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');
|
|
paulo@89
|
6668 }
|
|
paulo@89
|
6669
|
|
paulo@89
|
6670 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
6671
|
|
paulo@89
|
6672 //============================================================
|
|
paulo@89
|
6673 // Context chart (focus chart) components
|
|
paulo@89
|
6674 //------------------------------------------------------------
|
|
paulo@89
|
6675
|
|
paulo@89
|
6676 // hide or show the focus context chart
|
|
paulo@89
|
6677 g.select('.nv-context').style('display', focusEnable ? 'initial' : 'none');
|
|
paulo@89
|
6678
|
|
paulo@89
|
6679 bars2
|
|
paulo@89
|
6680 .width(availableWidth)
|
|
paulo@89
|
6681 .height(availableHeight2)
|
|
paulo@89
|
6682 .color(data.map(function (d, i) {
|
|
paulo@89
|
6683 return d.color || color(d, i);
|
|
paulo@89
|
6684 }).filter(function (d, i) {
|
|
paulo@89
|
6685 return !data[i].disabled && data[i].bar
|
|
paulo@89
|
6686 }));
|
|
paulo@89
|
6687 lines2
|
|
paulo@89
|
6688 .width(availableWidth)
|
|
paulo@89
|
6689 .height(availableHeight2)
|
|
paulo@89
|
6690 .color(data.map(function (d, i) {
|
|
paulo@89
|
6691 return d.color || color(d, i);
|
|
paulo@89
|
6692 }).filter(function (d, i) {
|
|
paulo@89
|
6693 return !data[i].disabled && !data[i].bar
|
|
paulo@89
|
6694 }));
|
|
paulo@89
|
6695
|
|
paulo@89
|
6696 var bars2Wrap = g.select('.nv-context .nv-barsWrap')
|
|
paulo@89
|
6697 .datum(dataBars.length ? dataBars : [
|
|
paulo@89
|
6698 {values: []}
|
|
paulo@89
|
6699 ]);
|
|
paulo@89
|
6700 var lines2Wrap = g.select('.nv-context .nv-linesWrap')
|
|
paulo@89
|
6701 .datum(!dataLines[0].disabled ? dataLines : [
|
|
paulo@89
|
6702 {values: []}
|
|
paulo@89
|
6703 ]);
|
|
paulo@89
|
6704
|
|
paulo@89
|
6705 g.select('.nv-context')
|
|
paulo@89
|
6706 .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')');
|
|
paulo@89
|
6707
|
|
paulo@89
|
6708 bars2Wrap.transition().call(bars2);
|
|
paulo@89
|
6709 lines2Wrap.transition().call(lines2);
|
|
paulo@89
|
6710
|
|
paulo@89
|
6711 // context (focus chart) axis controls
|
|
paulo@89
|
6712 if (focusShowAxisX) {
|
|
paulo@89
|
6713 x2Axis
|
|
paulo@89
|
6714 ._ticks( nv.utils.calcTicksX(availableWidth / 100, data))
|
|
paulo@89
|
6715 .tickSize(-availableHeight2, 0);
|
|
paulo@89
|
6716 g.select('.nv-context .nv-x.nv-axis')
|
|
paulo@89
|
6717 .attr('transform', 'translate(0,' + y3.range()[0] + ')');
|
|
paulo@89
|
6718 g.select('.nv-context .nv-x.nv-axis').transition()
|
|
paulo@89
|
6719 .call(x2Axis);
|
|
paulo@89
|
6720 }
|
|
paulo@89
|
6721
|
|
paulo@89
|
6722 if (focusShowAxisY) {
|
|
paulo@89
|
6723 y3Axis
|
|
paulo@89
|
6724 .scale(y3)
|
|
paulo@89
|
6725 ._ticks( availableHeight2 / 36 )
|
|
paulo@89
|
6726 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
6727 y4Axis
|
|
paulo@89
|
6728 .scale(y4)
|
|
paulo@89
|
6729 ._ticks( availableHeight2 / 36 )
|
|
paulo@89
|
6730 .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none
|
|
paulo@89
|
6731
|
|
paulo@89
|
6732 g.select('.nv-context .nv-y3.nv-axis')
|
|
paulo@89
|
6733 .style('opacity', dataBars.length ? 1 : 0)
|
|
paulo@89
|
6734 .attr('transform', 'translate(0,' + x2.range()[0] + ')');
|
|
paulo@89
|
6735 g.select('.nv-context .nv-y2.nv-axis')
|
|
paulo@89
|
6736 .style('opacity', dataLines.length ? 1 : 0)
|
|
paulo@89
|
6737 .attr('transform', 'translate(' + x2.range()[1] + ',0)');
|
|
paulo@89
|
6738
|
|
paulo@89
|
6739 g.select('.nv-context .nv-y1.nv-axis').transition()
|
|
paulo@89
|
6740 .call(y3Axis);
|
|
paulo@89
|
6741 g.select('.nv-context .nv-y2.nv-axis').transition()
|
|
paulo@89
|
6742 .call(y4Axis);
|
|
paulo@89
|
6743 }
|
|
paulo@89
|
6744
|
|
paulo@89
|
6745 // Setup Brush
|
|
paulo@89
|
6746 brush.x(x2).on('brush', onBrush);
|
|
paulo@89
|
6747
|
|
paulo@89
|
6748 if (brushExtent) brush.extent(brushExtent);
|
|
paulo@89
|
6749
|
|
paulo@89
|
6750 var brushBG = g.select('.nv-brushBackground').selectAll('g')
|
|
paulo@89
|
6751 .data([brushExtent || brush.extent()]);
|
|
paulo@89
|
6752
|
|
paulo@89
|
6753 var brushBGenter = brushBG.enter()
|
|
paulo@89
|
6754 .append('g');
|
|
paulo@89
|
6755
|
|
paulo@89
|
6756 brushBGenter.append('rect')
|
|
paulo@89
|
6757 .attr('class', 'left')
|
|
paulo@89
|
6758 .attr('x', 0)
|
|
paulo@89
|
6759 .attr('y', 0)
|
|
paulo@89
|
6760 .attr('height', availableHeight2);
|
|
paulo@89
|
6761
|
|
paulo@89
|
6762 brushBGenter.append('rect')
|
|
paulo@89
|
6763 .attr('class', 'right')
|
|
paulo@89
|
6764 .attr('x', 0)
|
|
paulo@89
|
6765 .attr('y', 0)
|
|
paulo@89
|
6766 .attr('height', availableHeight2);
|
|
paulo@89
|
6767
|
|
paulo@89
|
6768 var gBrush = g.select('.nv-x.nv-brush')
|
|
paulo@89
|
6769 .call(brush);
|
|
paulo@89
|
6770 gBrush.selectAll('rect')
|
|
paulo@89
|
6771 //.attr('y', -5)
|
|
paulo@89
|
6772 .attr('height', availableHeight2);
|
|
paulo@89
|
6773 gBrush.selectAll('.resize').append('path').attr('d', resizePath);
|
|
paulo@89
|
6774
|
|
paulo@89
|
6775 //============================================================
|
|
paulo@89
|
6776 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
6777 //------------------------------------------------------------
|
|
paulo@89
|
6778
|
|
paulo@89
|
6779 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
6780 for (var key in newState)
|
|
paulo@89
|
6781 state[key] = newState[key];
|
|
paulo@89
|
6782 dispatch.stateChange(state);
|
|
paulo@89
|
6783 chart.update();
|
|
paulo@89
|
6784 });
|
|
paulo@89
|
6785
|
|
paulo@89
|
6786 // Update chart from a state object passed to event handler
|
|
paulo@89
|
6787 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
6788 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
6789 data.forEach(function(series,i) {
|
|
paulo@89
|
6790 series.disabled = e.disabled[i];
|
|
paulo@89
|
6791 });
|
|
paulo@89
|
6792 state.disabled = e.disabled;
|
|
paulo@89
|
6793 }
|
|
paulo@89
|
6794 chart.update();
|
|
paulo@89
|
6795 });
|
|
paulo@89
|
6796
|
|
paulo@89
|
6797 //============================================================
|
|
paulo@89
|
6798 // Functions
|
|
paulo@89
|
6799 //------------------------------------------------------------
|
|
paulo@89
|
6800
|
|
paulo@89
|
6801 // Taken from crossfilter (http://square.github.com/crossfilter/)
|
|
paulo@89
|
6802 function resizePath(d) {
|
|
paulo@89
|
6803 var e = +(d == 'e'),
|
|
paulo@89
|
6804 x = e ? 1 : -1,
|
|
paulo@89
|
6805 y = availableHeight2 / 3;
|
|
paulo@89
|
6806 return 'M' + (.5 * x) + ',' + y
|
|
paulo@89
|
6807 + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)
|
|
paulo@89
|
6808 + 'V' + (2 * y - 6)
|
|
paulo@89
|
6809 + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)
|
|
paulo@89
|
6810 + 'Z'
|
|
paulo@89
|
6811 + 'M' + (2.5 * x) + ',' + (y + 8)
|
|
paulo@89
|
6812 + 'V' + (2 * y - 8)
|
|
paulo@89
|
6813 + 'M' + (4.5 * x) + ',' + (y + 8)
|
|
paulo@89
|
6814 + 'V' + (2 * y - 8);
|
|
paulo@89
|
6815 }
|
|
paulo@89
|
6816
|
|
paulo@89
|
6817
|
|
paulo@89
|
6818 function updateBrushBG() {
|
|
paulo@89
|
6819 if (!brush.empty()) brush.extent(brushExtent);
|
|
paulo@89
|
6820 brushBG
|
|
paulo@89
|
6821 .data([brush.empty() ? x2.domain() : brushExtent])
|
|
paulo@89
|
6822 .each(function(d,i) {
|
|
paulo@89
|
6823 var leftWidth = x2(d[0]) - x2.range()[0],
|
|
paulo@89
|
6824 rightWidth = x2.range()[1] - x2(d[1]);
|
|
paulo@89
|
6825 d3.select(this).select('.left')
|
|
paulo@89
|
6826 .attr('width', leftWidth < 0 ? 0 : leftWidth);
|
|
paulo@89
|
6827
|
|
paulo@89
|
6828 d3.select(this).select('.right')
|
|
paulo@89
|
6829 .attr('x', x2(d[1]))
|
|
paulo@89
|
6830 .attr('width', rightWidth < 0 ? 0 : rightWidth);
|
|
paulo@89
|
6831 });
|
|
paulo@89
|
6832 }
|
|
paulo@89
|
6833
|
|
paulo@89
|
6834 function onBrush() {
|
|
paulo@89
|
6835 brushExtent = brush.empty() ? null : brush.extent();
|
|
paulo@89
|
6836 extent = brush.empty() ? x2.domain() : brush.extent();
|
|
paulo@89
|
6837 dispatch.brush({extent: extent, brush: brush});
|
|
paulo@89
|
6838 updateBrushBG();
|
|
paulo@89
|
6839
|
|
paulo@89
|
6840 // Prepare Main (Focus) Bars and Lines
|
|
paulo@89
|
6841 bars
|
|
paulo@89
|
6842 .width(availableWidth)
|
|
paulo@89
|
6843 .height(availableHeight1)
|
|
paulo@89
|
6844 .color(data.map(function(d,i) {
|
|
paulo@89
|
6845 return d.color || color(d, i);
|
|
paulo@89
|
6846 }).filter(function(d,i) { return !data[i].disabled && data[i].bar }));
|
|
paulo@89
|
6847
|
|
paulo@89
|
6848 lines
|
|
paulo@89
|
6849 .width(availableWidth)
|
|
paulo@89
|
6850 .height(availableHeight1)
|
|
paulo@89
|
6851 .color(data.map(function(d,i) {
|
|
paulo@89
|
6852 return d.color || color(d, i);
|
|
paulo@89
|
6853 }).filter(function(d,i) { return !data[i].disabled && !data[i].bar }));
|
|
paulo@89
|
6854
|
|
paulo@89
|
6855 var focusBarsWrap = g.select('.nv-focus .nv-barsWrap')
|
|
paulo@89
|
6856 .datum(!dataBars.length ? [{values:[]}] :
|
|
paulo@89
|
6857 dataBars
|
|
paulo@89
|
6858 .map(function(d,i) {
|
|
paulo@89
|
6859 return {
|
|
paulo@89
|
6860 key: d.key,
|
|
paulo@89
|
6861 values: d.values.filter(function(d,i) {
|
|
paulo@89
|
6862 return bars.x()(d,i) >= extent[0] && bars.x()(d,i) <= extent[1];
|
|
paulo@89
|
6863 })
|
|
paulo@89
|
6864 }
|
|
paulo@89
|
6865 })
|
|
paulo@89
|
6866 );
|
|
paulo@89
|
6867
|
|
paulo@89
|
6868 var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
|
|
paulo@89
|
6869 .datum(dataLines[0].disabled ? [{values:[]}] :
|
|
paulo@89
|
6870 dataLines
|
|
paulo@89
|
6871 .map(function(d,i) {
|
|
paulo@89
|
6872 return {
|
|
paulo@89
|
6873 area: d.area,
|
|
paulo@89
|
6874 fillOpacity: d.fillOpacity,
|
|
paulo@89
|
6875 key: d.key,
|
|
paulo@89
|
6876 values: d.values.filter(function(d,i) {
|
|
paulo@89
|
6877 return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
|
|
paulo@89
|
6878 })
|
|
paulo@89
|
6879 }
|
|
paulo@89
|
6880 })
|
|
paulo@89
|
6881 );
|
|
paulo@89
|
6882
|
|
paulo@89
|
6883 // Update Main (Focus) X Axis
|
|
paulo@89
|
6884 if (dataBars.length) {
|
|
paulo@89
|
6885 x = bars.xScale();
|
|
paulo@89
|
6886 } else {
|
|
paulo@89
|
6887 x = lines.xScale();
|
|
paulo@89
|
6888 }
|
|
paulo@89
|
6889
|
|
paulo@89
|
6890 xAxis
|
|
paulo@89
|
6891 .scale(x)
|
|
paulo@89
|
6892 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
6893 .tickSize(-availableHeight1, 0);
|
|
paulo@89
|
6894
|
|
paulo@89
|
6895 xAxis.domain([Math.ceil(extent[0]), Math.floor(extent[1])]);
|
|
paulo@89
|
6896
|
|
paulo@89
|
6897 g.select('.nv-x.nv-axis').transition().duration(transitionDuration)
|
|
paulo@89
|
6898 .call(xAxis);
|
|
paulo@89
|
6899
|
|
paulo@89
|
6900 // Update Main (Focus) Bars and Lines
|
|
paulo@89
|
6901 focusBarsWrap.transition().duration(transitionDuration).call(bars);
|
|
paulo@89
|
6902 focusLinesWrap.transition().duration(transitionDuration).call(lines);
|
|
paulo@89
|
6903
|
|
paulo@89
|
6904 // Setup and Update Main (Focus) Y Axes
|
|
paulo@89
|
6905 g.select('.nv-focus .nv-x.nv-axis')
|
|
paulo@89
|
6906 .attr('transform', 'translate(0,' + y1.range()[0] + ')');
|
|
paulo@89
|
6907
|
|
paulo@89
|
6908 y1Axis
|
|
paulo@89
|
6909 .scale(y1)
|
|
paulo@89
|
6910 ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
|
|
paulo@89
|
6911 .tickSize(-availableWidth, 0);
|
|
paulo@89
|
6912 y2Axis
|
|
paulo@89
|
6913 .scale(y2)
|
|
paulo@89
|
6914 ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
|
|
paulo@89
|
6915 .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none
|
|
paulo@89
|
6916
|
|
paulo@89
|
6917 g.select('.nv-focus .nv-y1.nv-axis')
|
|
paulo@89
|
6918 .style('opacity', dataBars.length ? 1 : 0);
|
|
paulo@89
|
6919 g.select('.nv-focus .nv-y2.nv-axis')
|
|
paulo@89
|
6920 .style('opacity', dataLines.length && !dataLines[0].disabled ? 1 : 0)
|
|
paulo@89
|
6921 .attr('transform', 'translate(' + x.range()[1] + ',0)');
|
|
paulo@89
|
6922
|
|
paulo@89
|
6923 g.select('.nv-focus .nv-y1.nv-axis').transition().duration(transitionDuration)
|
|
paulo@89
|
6924 .call(y1Axis);
|
|
paulo@89
|
6925 g.select('.nv-focus .nv-y2.nv-axis').transition().duration(transitionDuration)
|
|
paulo@89
|
6926 .call(y2Axis);
|
|
paulo@89
|
6927 }
|
|
paulo@89
|
6928
|
|
paulo@89
|
6929 onBrush();
|
|
paulo@89
|
6930
|
|
paulo@89
|
6931 });
|
|
paulo@89
|
6932
|
|
paulo@89
|
6933 return chart;
|
|
paulo@89
|
6934 }
|
|
paulo@89
|
6935
|
|
paulo@89
|
6936 //============================================================
|
|
paulo@89
|
6937 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
6938 //------------------------------------------------------------
|
|
paulo@89
|
6939
|
|
paulo@89
|
6940 lines.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
6941 tooltip
|
|
paulo@89
|
6942 .duration(100)
|
|
paulo@89
|
6943 .valueFormatter(function(d, i) {
|
|
paulo@89
|
6944 return y2Axis.tickFormat()(d, i);
|
|
paulo@89
|
6945 })
|
|
paulo@89
|
6946 .data(evt)
|
|
paulo@89
|
6947 .position(evt.pos)
|
|
paulo@89
|
6948 .hidden(false);
|
|
paulo@89
|
6949 });
|
|
paulo@89
|
6950
|
|
paulo@89
|
6951 lines.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
6952 tooltip.hidden(true)
|
|
paulo@89
|
6953 });
|
|
paulo@89
|
6954
|
|
paulo@89
|
6955 bars.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
6956 evt.value = chart.x()(evt.data);
|
|
paulo@89
|
6957 evt['series'] = {
|
|
paulo@89
|
6958 value: chart.y()(evt.data),
|
|
paulo@89
|
6959 color: evt.color
|
|
paulo@89
|
6960 };
|
|
paulo@89
|
6961 tooltip
|
|
paulo@89
|
6962 .duration(0)
|
|
paulo@89
|
6963 .valueFormatter(function(d, i) {
|
|
paulo@89
|
6964 return y1Axis.tickFormat()(d, i);
|
|
paulo@89
|
6965 })
|
|
paulo@89
|
6966 .data(evt)
|
|
paulo@89
|
6967 .hidden(false);
|
|
paulo@89
|
6968 });
|
|
paulo@89
|
6969
|
|
paulo@89
|
6970 bars.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
6971 tooltip.hidden(true);
|
|
paulo@89
|
6972 });
|
|
paulo@89
|
6973
|
|
paulo@89
|
6974 bars.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
6975 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
6976 });
|
|
paulo@89
|
6977
|
|
paulo@89
|
6978 //============================================================
|
|
paulo@89
|
6979
|
|
paulo@89
|
6980
|
|
paulo@89
|
6981 //============================================================
|
|
paulo@89
|
6982 // Expose Public Variables
|
|
paulo@89
|
6983 //------------------------------------------------------------
|
|
paulo@89
|
6984
|
|
paulo@89
|
6985 // expose chart's sub-components
|
|
paulo@89
|
6986 chart.dispatch = dispatch;
|
|
paulo@89
|
6987 chart.legend = legend;
|
|
paulo@89
|
6988 chart.lines = lines;
|
|
paulo@89
|
6989 chart.lines2 = lines2;
|
|
paulo@89
|
6990 chart.bars = bars;
|
|
paulo@89
|
6991 chart.bars2 = bars2;
|
|
paulo@89
|
6992 chart.xAxis = xAxis;
|
|
paulo@89
|
6993 chart.x2Axis = x2Axis;
|
|
paulo@89
|
6994 chart.y1Axis = y1Axis;
|
|
paulo@89
|
6995 chart.y2Axis = y2Axis;
|
|
paulo@89
|
6996 chart.y3Axis = y3Axis;
|
|
paulo@89
|
6997 chart.y4Axis = y4Axis;
|
|
paulo@89
|
6998 chart.tooltip = tooltip;
|
|
paulo@89
|
6999
|
|
paulo@89
|
7000 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
7001
|
|
paulo@89
|
7002 chart._options = Object.create({}, {
|
|
paulo@89
|
7003 // simple options, just get/set the necessary values
|
|
paulo@89
|
7004 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
7005 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
7006 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
7007 brushExtent: {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},
|
|
paulo@89
|
7008 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
7009 focusEnable: {get: function(){return focusEnable;}, set: function(_){focusEnable=_;}},
|
|
paulo@89
|
7010 focusHeight: {get: function(){return focusHeight;}, set: function(_){focusHeight=_;}},
|
|
paulo@89
|
7011 focusShowAxisX: {get: function(){return focusShowAxisX;}, set: function(_){focusShowAxisX=_;}},
|
|
paulo@89
|
7012 focusShowAxisY: {get: function(){return focusShowAxisY;}, set: function(_){focusShowAxisY=_;}},
|
|
paulo@89
|
7013 legendLeftAxisHint: {get: function(){return legendLeftAxisHint;}, set: function(_){legendLeftAxisHint=_;}},
|
|
paulo@89
|
7014 legendRightAxisHint: {get: function(){return legendRightAxisHint;}, set: function(_){legendRightAxisHint=_;}},
|
|
paulo@89
|
7015
|
|
paulo@89
|
7016 // deprecated options
|
|
paulo@89
|
7017 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
7018 // deprecated after 1.7.1
|
|
paulo@89
|
7019 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
7020 tooltip.enabled(!!_);
|
|
paulo@89
|
7021 }},
|
|
paulo@89
|
7022 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
7023 // deprecated after 1.7.1
|
|
paulo@89
|
7024 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
7025 tooltip.contentGenerator(_);
|
|
paulo@89
|
7026 }},
|
|
paulo@89
|
7027
|
|
paulo@89
|
7028 // options that require extra logic in the setter
|
|
paulo@89
|
7029 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
7030 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
7031 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
7032 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
7033 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
7034 }},
|
|
paulo@89
|
7035 duration: {get: function(){return transitionDuration;}, set: function(_){
|
|
paulo@89
|
7036 transitionDuration = _;
|
|
paulo@89
|
7037 }},
|
|
paulo@89
|
7038 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
7039 color = nv.utils.getColor(_);
|
|
paulo@89
|
7040 legend.color(color);
|
|
paulo@89
|
7041 }},
|
|
paulo@89
|
7042 x: {get: function(){return getX;}, set: function(_){
|
|
paulo@89
|
7043 getX = _;
|
|
paulo@89
|
7044 lines.x(_);
|
|
paulo@89
|
7045 lines2.x(_);
|
|
paulo@89
|
7046 bars.x(_);
|
|
paulo@89
|
7047 bars2.x(_);
|
|
paulo@89
|
7048 }},
|
|
paulo@89
|
7049 y: {get: function(){return getY;}, set: function(_){
|
|
paulo@89
|
7050 getY = _;
|
|
paulo@89
|
7051 lines.y(_);
|
|
paulo@89
|
7052 lines2.y(_);
|
|
paulo@89
|
7053 bars.y(_);
|
|
paulo@89
|
7054 bars2.y(_);
|
|
paulo@89
|
7055 }}
|
|
paulo@89
|
7056 });
|
|
paulo@89
|
7057
|
|
paulo@89
|
7058 nv.utils.inheritOptions(chart, lines);
|
|
paulo@89
|
7059 nv.utils.initOptions(chart);
|
|
paulo@89
|
7060
|
|
paulo@89
|
7061 return chart;
|
|
paulo@89
|
7062 };
|
|
paulo@89
|
7063 nv.models.lineWithFocusChart = function() {
|
|
paulo@89
|
7064 "use strict";
|
|
paulo@89
|
7065
|
|
paulo@89
|
7066 //============================================================
|
|
paulo@89
|
7067 // Public Variables with Default Settings
|
|
paulo@89
|
7068 //------------------------------------------------------------
|
|
paulo@89
|
7069
|
|
paulo@89
|
7070 var lines = nv.models.line()
|
|
paulo@89
|
7071 , lines2 = nv.models.line()
|
|
paulo@89
|
7072 , xAxis = nv.models.axis()
|
|
paulo@89
|
7073 , yAxis = nv.models.axis()
|
|
paulo@89
|
7074 , x2Axis = nv.models.axis()
|
|
paulo@89
|
7075 , y2Axis = nv.models.axis()
|
|
paulo@89
|
7076 , legend = nv.models.legend()
|
|
paulo@89
|
7077 , brush = d3.svg.brush()
|
|
paulo@89
|
7078 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
7079 , interactiveLayer = nv.interactiveGuideline()
|
|
paulo@89
|
7080 ;
|
|
paulo@89
|
7081
|
|
paulo@89
|
7082 var margin = {top: 30, right: 30, bottom: 30, left: 60}
|
|
paulo@89
|
7083 , margin2 = {top: 0, right: 30, bottom: 20, left: 60}
|
|
paulo@89
|
7084 , color = nv.utils.defaultColor()
|
|
paulo@89
|
7085 , width = null
|
|
paulo@89
|
7086 , height = null
|
|
paulo@89
|
7087 , height2 = 50
|
|
paulo@89
|
7088 , useInteractiveGuideline = false
|
|
paulo@89
|
7089 , x
|
|
paulo@89
|
7090 , y
|
|
paulo@89
|
7091 , x2
|
|
paulo@89
|
7092 , y2
|
|
paulo@89
|
7093 , showLegend = true
|
|
paulo@89
|
7094 , brushExtent = null
|
|
paulo@89
|
7095 , noData = null
|
|
paulo@89
|
7096 , dispatch = d3.dispatch('brush', 'stateChange', 'changeState')
|
|
paulo@89
|
7097 , transitionDuration = 250
|
|
paulo@89
|
7098 , state = nv.utils.state()
|
|
paulo@89
|
7099 , defaultState = null
|
|
paulo@89
|
7100 ;
|
|
paulo@89
|
7101
|
|
paulo@89
|
7102 lines.clipEdge(true).duration(0);
|
|
paulo@89
|
7103 lines2.interactive(false);
|
|
paulo@89
|
7104 xAxis.orient('bottom').tickPadding(5);
|
|
paulo@89
|
7105 yAxis.orient('left');
|
|
paulo@89
|
7106 x2Axis.orient('bottom').tickPadding(5);
|
|
paulo@89
|
7107 y2Axis.orient('left');
|
|
paulo@89
|
7108
|
|
paulo@89
|
7109 tooltip.valueFormatter(function(d, i) {
|
|
paulo@89
|
7110 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
7111 }).headerFormatter(function(d, i) {
|
|
paulo@89
|
7112 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
7113 });
|
|
paulo@89
|
7114
|
|
paulo@89
|
7115 //============================================================
|
|
paulo@89
|
7116 // Private Variables
|
|
paulo@89
|
7117 //------------------------------------------------------------
|
|
paulo@89
|
7118
|
|
paulo@89
|
7119 var stateGetter = function(data) {
|
|
paulo@89
|
7120 return function(){
|
|
paulo@89
|
7121 return {
|
|
paulo@89
|
7122 active: data.map(function(d) { return !d.disabled })
|
|
paulo@89
|
7123 };
|
|
paulo@89
|
7124 }
|
|
paulo@89
|
7125 };
|
|
paulo@89
|
7126
|
|
paulo@89
|
7127 var stateSetter = function(data) {
|
|
paulo@89
|
7128 return function(state) {
|
|
paulo@89
|
7129 if (state.active !== undefined)
|
|
paulo@89
|
7130 data.forEach(function(series,i) {
|
|
paulo@89
|
7131 series.disabled = !state.active[i];
|
|
paulo@89
|
7132 });
|
|
paulo@89
|
7133 }
|
|
paulo@89
|
7134 };
|
|
paulo@89
|
7135
|
|
paulo@89
|
7136 function chart(selection) {
|
|
paulo@89
|
7137 selection.each(function(data) {
|
|
paulo@89
|
7138 var container = d3.select(this),
|
|
paulo@89
|
7139 that = this;
|
|
paulo@89
|
7140 nv.utils.initSVG(container);
|
|
paulo@89
|
7141 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
7142 availableHeight1 = nv.utils.availableHeight(height, container, margin) - height2,
|
|
paulo@89
|
7143 availableHeight2 = height2 - margin2.top - margin2.bottom;
|
|
paulo@89
|
7144
|
|
paulo@89
|
7145 chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
|
|
paulo@89
|
7146 chart.container = this;
|
|
paulo@89
|
7147
|
|
paulo@89
|
7148 state
|
|
paulo@89
|
7149 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
7150 .getter(stateGetter(data))
|
|
paulo@89
|
7151 .update();
|
|
paulo@89
|
7152
|
|
paulo@89
|
7153 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
7154 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
7155
|
|
paulo@89
|
7156 if (!defaultState) {
|
|
paulo@89
|
7157 var key;
|
|
paulo@89
|
7158 defaultState = {};
|
|
paulo@89
|
7159 for (key in state) {
|
|
paulo@89
|
7160 if (state[key] instanceof Array)
|
|
paulo@89
|
7161 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
7162 else
|
|
paulo@89
|
7163 defaultState[key] = state[key];
|
|
paulo@89
|
7164 }
|
|
paulo@89
|
7165 }
|
|
paulo@89
|
7166
|
|
paulo@89
|
7167 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
7168 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
7169 nv.utils.noData(chart, container)
|
|
paulo@89
|
7170 return chart;
|
|
paulo@89
|
7171 } else {
|
|
paulo@89
|
7172 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
7173 }
|
|
paulo@89
|
7174
|
|
paulo@89
|
7175 // Setup Scales
|
|
paulo@89
|
7176 x = lines.xScale();
|
|
paulo@89
|
7177 y = lines.yScale();
|
|
paulo@89
|
7178 x2 = lines2.xScale();
|
|
paulo@89
|
7179 y2 = lines2.yScale();
|
|
paulo@89
|
7180
|
|
paulo@89
|
7181 // Setup containers and skeleton of chart
|
|
paulo@89
|
7182 var wrap = container.selectAll('g.nv-wrap.nv-lineWithFocusChart').data([data]);
|
|
paulo@89
|
7183 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineWithFocusChart').append('g');
|
|
paulo@89
|
7184 var g = wrap.select('g');
|
|
paulo@89
|
7185
|
|
paulo@89
|
7186 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
7187
|
|
paulo@89
|
7188 var focusEnter = gEnter.append('g').attr('class', 'nv-focus');
|
|
paulo@89
|
7189 focusEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
7190 focusEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
7191 focusEnter.append('g').attr('class', 'nv-linesWrap');
|
|
paulo@89
|
7192 focusEnter.append('g').attr('class', 'nv-interactive');
|
|
paulo@89
|
7193
|
|
paulo@89
|
7194 var contextEnter = gEnter.append('g').attr('class', 'nv-context');
|
|
paulo@89
|
7195 contextEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
7196 contextEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
7197 contextEnter.append('g').attr('class', 'nv-linesWrap');
|
|
paulo@89
|
7198 contextEnter.append('g').attr('class', 'nv-brushBackground');
|
|
paulo@89
|
7199 contextEnter.append('g').attr('class', 'nv-x nv-brush');
|
|
paulo@89
|
7200
|
|
paulo@89
|
7201 // Legend
|
|
paulo@89
|
7202 if (showLegend) {
|
|
paulo@89
|
7203 legend.width(availableWidth);
|
|
paulo@89
|
7204
|
|
paulo@89
|
7205 g.select('.nv-legendWrap')
|
|
paulo@89
|
7206 .datum(data)
|
|
paulo@89
|
7207 .call(legend);
|
|
paulo@89
|
7208
|
|
paulo@89
|
7209 if ( margin.top != legend.height()) {
|
|
paulo@89
|
7210 margin.top = legend.height();
|
|
paulo@89
|
7211 availableHeight1 = nv.utils.availableHeight(height, container, margin) - height2;
|
|
paulo@89
|
7212 }
|
|
paulo@89
|
7213
|
|
paulo@89
|
7214 g.select('.nv-legendWrap')
|
|
paulo@89
|
7215 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
7216 }
|
|
paulo@89
|
7217
|
|
paulo@89
|
7218 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
7219
|
|
paulo@89
|
7220
|
|
paulo@89
|
7221 //Set up interactive layer
|
|
paulo@89
|
7222 if (useInteractiveGuideline) {
|
|
paulo@89
|
7223 interactiveLayer
|
|
paulo@89
|
7224 .width(availableWidth)
|
|
paulo@89
|
7225 .height(availableHeight1)
|
|
paulo@89
|
7226 .margin({left:margin.left, top:margin.top})
|
|
paulo@89
|
7227 .svgContainer(container)
|
|
paulo@89
|
7228 .xScale(x);
|
|
paulo@89
|
7229 wrap.select(".nv-interactive").call(interactiveLayer);
|
|
paulo@89
|
7230 }
|
|
paulo@89
|
7231
|
|
paulo@89
|
7232 // Main Chart Component(s)
|
|
paulo@89
|
7233 lines
|
|
paulo@89
|
7234 .width(availableWidth)
|
|
paulo@89
|
7235 .height(availableHeight1)
|
|
paulo@89
|
7236 .color(
|
|
paulo@89
|
7237 data
|
|
paulo@89
|
7238 .map(function(d,i) {
|
|
paulo@89
|
7239 return d.color || color(d, i);
|
|
paulo@89
|
7240 })
|
|
paulo@89
|
7241 .filter(function(d,i) {
|
|
paulo@89
|
7242 return !data[i].disabled;
|
|
paulo@89
|
7243 })
|
|
paulo@89
|
7244 );
|
|
paulo@89
|
7245
|
|
paulo@89
|
7246 lines2
|
|
paulo@89
|
7247 .defined(lines.defined())
|
|
paulo@89
|
7248 .width(availableWidth)
|
|
paulo@89
|
7249 .height(availableHeight2)
|
|
paulo@89
|
7250 .color(
|
|
paulo@89
|
7251 data
|
|
paulo@89
|
7252 .map(function(d,i) {
|
|
paulo@89
|
7253 return d.color || color(d, i);
|
|
paulo@89
|
7254 })
|
|
paulo@89
|
7255 .filter(function(d,i) {
|
|
paulo@89
|
7256 return !data[i].disabled;
|
|
paulo@89
|
7257 })
|
|
paulo@89
|
7258 );
|
|
paulo@89
|
7259
|
|
paulo@89
|
7260 g.select('.nv-context')
|
|
paulo@89
|
7261 .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')')
|
|
paulo@89
|
7262
|
|
paulo@89
|
7263 var contextLinesWrap = g.select('.nv-context .nv-linesWrap')
|
|
paulo@89
|
7264 .datum(data.filter(function(d) { return !d.disabled }))
|
|
paulo@89
|
7265
|
|
paulo@89
|
7266 d3.transition(contextLinesWrap).call(lines2);
|
|
paulo@89
|
7267
|
|
paulo@89
|
7268 // Setup Main (Focus) Axes
|
|
paulo@89
|
7269 xAxis
|
|
paulo@89
|
7270 .scale(x)
|
|
paulo@89
|
7271 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
7272 .tickSize(-availableHeight1, 0);
|
|
paulo@89
|
7273
|
|
paulo@89
|
7274 yAxis
|
|
paulo@89
|
7275 .scale(y)
|
|
paulo@89
|
7276 ._ticks( nv.utils.calcTicksY(availableHeight1/36, data) )
|
|
paulo@89
|
7277 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
7278
|
|
paulo@89
|
7279 g.select('.nv-focus .nv-x.nv-axis')
|
|
paulo@89
|
7280 .attr('transform', 'translate(0,' + availableHeight1 + ')');
|
|
paulo@89
|
7281
|
|
paulo@89
|
7282 // Setup Brush
|
|
paulo@89
|
7283 brush
|
|
paulo@89
|
7284 .x(x2)
|
|
paulo@89
|
7285 .on('brush', function() {
|
|
paulo@89
|
7286 onBrush();
|
|
paulo@89
|
7287 });
|
|
paulo@89
|
7288
|
|
paulo@89
|
7289 if (brushExtent) brush.extent(brushExtent);
|
|
paulo@89
|
7290
|
|
paulo@89
|
7291 var brushBG = g.select('.nv-brushBackground').selectAll('g')
|
|
paulo@89
|
7292 .data([brushExtent || brush.extent()])
|
|
paulo@89
|
7293
|
|
paulo@89
|
7294 var brushBGenter = brushBG.enter()
|
|
paulo@89
|
7295 .append('g');
|
|
paulo@89
|
7296
|
|
paulo@89
|
7297 brushBGenter.append('rect')
|
|
paulo@89
|
7298 .attr('class', 'left')
|
|
paulo@89
|
7299 .attr('x', 0)
|
|
paulo@89
|
7300 .attr('y', 0)
|
|
paulo@89
|
7301 .attr('height', availableHeight2);
|
|
paulo@89
|
7302
|
|
paulo@89
|
7303 brushBGenter.append('rect')
|
|
paulo@89
|
7304 .attr('class', 'right')
|
|
paulo@89
|
7305 .attr('x', 0)
|
|
paulo@89
|
7306 .attr('y', 0)
|
|
paulo@89
|
7307 .attr('height', availableHeight2);
|
|
paulo@89
|
7308
|
|
paulo@89
|
7309 var gBrush = g.select('.nv-x.nv-brush')
|
|
paulo@89
|
7310 .call(brush);
|
|
paulo@89
|
7311 gBrush.selectAll('rect')
|
|
paulo@89
|
7312 .attr('height', availableHeight2);
|
|
paulo@89
|
7313 gBrush.selectAll('.resize').append('path').attr('d', resizePath);
|
|
paulo@89
|
7314
|
|
paulo@89
|
7315 onBrush();
|
|
paulo@89
|
7316
|
|
paulo@89
|
7317 // Setup Secondary (Context) Axes
|
|
paulo@89
|
7318 x2Axis
|
|
paulo@89
|
7319 .scale(x2)
|
|
paulo@89
|
7320 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
7321 .tickSize(-availableHeight2, 0);
|
|
paulo@89
|
7322
|
|
paulo@89
|
7323 g.select('.nv-context .nv-x.nv-axis')
|
|
paulo@89
|
7324 .attr('transform', 'translate(0,' + y2.range()[0] + ')');
|
|
paulo@89
|
7325 d3.transition(g.select('.nv-context .nv-x.nv-axis'))
|
|
paulo@89
|
7326 .call(x2Axis);
|
|
paulo@89
|
7327
|
|
paulo@89
|
7328 y2Axis
|
|
paulo@89
|
7329 .scale(y2)
|
|
paulo@89
|
7330 ._ticks( nv.utils.calcTicksY(availableHeight2/36, data) )
|
|
paulo@89
|
7331 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
7332
|
|
paulo@89
|
7333 d3.transition(g.select('.nv-context .nv-y.nv-axis'))
|
|
paulo@89
|
7334 .call(y2Axis);
|
|
paulo@89
|
7335
|
|
paulo@89
|
7336 g.select('.nv-context .nv-x.nv-axis')
|
|
paulo@89
|
7337 .attr('transform', 'translate(0,' + y2.range()[0] + ')');
|
|
paulo@89
|
7338
|
|
paulo@89
|
7339 //============================================================
|
|
paulo@89
|
7340 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
7341 //------------------------------------------------------------
|
|
paulo@89
|
7342
|
|
paulo@89
|
7343 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
7344 for (var key in newState)
|
|
paulo@89
|
7345 state[key] = newState[key];
|
|
paulo@89
|
7346 dispatch.stateChange(state);
|
|
paulo@89
|
7347 chart.update();
|
|
paulo@89
|
7348 });
|
|
paulo@89
|
7349
|
|
paulo@89
|
7350 interactiveLayer.dispatch.on('elementMousemove', function(e) {
|
|
paulo@89
|
7351 lines.clearHighlights();
|
|
paulo@89
|
7352 var singlePoint, pointIndex, pointXLocation, allData = [];
|
|
paulo@89
|
7353 data
|
|
paulo@89
|
7354 .filter(function(series, i) {
|
|
paulo@89
|
7355 series.seriesIndex = i;
|
|
paulo@89
|
7356 return !series.disabled;
|
|
paulo@89
|
7357 })
|
|
paulo@89
|
7358 .forEach(function(series,i) {
|
|
paulo@89
|
7359 var extent = brush.empty() ? x2.domain() : brush.extent();
|
|
paulo@89
|
7360 var currentValues = series.values.filter(function(d,i) {
|
|
paulo@89
|
7361 return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
|
|
paulo@89
|
7362 });
|
|
paulo@89
|
7363
|
|
paulo@89
|
7364 pointIndex = nv.interactiveBisect(currentValues, e.pointXValue, lines.x());
|
|
paulo@89
|
7365 var point = currentValues[pointIndex];
|
|
paulo@89
|
7366 var pointYValue = chart.y()(point, pointIndex);
|
|
paulo@89
|
7367 if (pointYValue != null) {
|
|
paulo@89
|
7368 lines.highlightPoint(i, pointIndex, true);
|
|
paulo@89
|
7369 }
|
|
paulo@89
|
7370 if (point === undefined) return;
|
|
paulo@89
|
7371 if (singlePoint === undefined) singlePoint = point;
|
|
paulo@89
|
7372 if (pointXLocation === undefined) pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
7373 allData.push({
|
|
paulo@89
|
7374 key: series.key,
|
|
paulo@89
|
7375 value: chart.y()(point, pointIndex),
|
|
paulo@89
|
7376 color: color(series,series.seriesIndex)
|
|
paulo@89
|
7377 });
|
|
paulo@89
|
7378 });
|
|
paulo@89
|
7379 //Highlight the tooltip entry based on which point the mouse is closest to.
|
|
paulo@89
|
7380 if (allData.length > 2) {
|
|
paulo@89
|
7381 var yValue = chart.yScale().invert(e.mouseY);
|
|
paulo@89
|
7382 var domainExtent = Math.abs(chart.yScale().domain()[0] - chart.yScale().domain()[1]);
|
|
paulo@89
|
7383 var threshold = 0.03 * domainExtent;
|
|
paulo@89
|
7384 var indexToHighlight = nv.nearestValueIndex(allData.map(function(d){return d.value}),yValue,threshold);
|
|
paulo@89
|
7385 if (indexToHighlight !== null)
|
|
paulo@89
|
7386 allData[indexToHighlight].highlight = true;
|
|
paulo@89
|
7387 }
|
|
paulo@89
|
7388
|
|
paulo@89
|
7389 var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
|
|
paulo@89
|
7390 interactiveLayer.tooltip
|
|
paulo@89
|
7391 .position({left: e.mouseX + margin.left, top: e.mouseY + margin.top})
|
|
paulo@89
|
7392 .chartContainer(that.parentNode)
|
|
paulo@89
|
7393 .valueFormatter(function(d,i) {
|
|
paulo@89
|
7394 return d == null ? "N/A" : yAxis.tickFormat()(d);
|
|
paulo@89
|
7395 })
|
|
paulo@89
|
7396 .data({
|
|
paulo@89
|
7397 value: xValue,
|
|
paulo@89
|
7398 index: pointIndex,
|
|
paulo@89
|
7399 series: allData
|
|
paulo@89
|
7400 })();
|
|
paulo@89
|
7401
|
|
paulo@89
|
7402 interactiveLayer.renderGuideLine(pointXLocation);
|
|
paulo@89
|
7403
|
|
paulo@89
|
7404 });
|
|
paulo@89
|
7405
|
|
paulo@89
|
7406 interactiveLayer.dispatch.on("elementMouseout",function(e) {
|
|
paulo@89
|
7407 lines.clearHighlights();
|
|
paulo@89
|
7408 });
|
|
paulo@89
|
7409
|
|
paulo@89
|
7410 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
7411 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
7412 data.forEach(function(series,i) {
|
|
paulo@89
|
7413 series.disabled = e.disabled[i];
|
|
paulo@89
|
7414 });
|
|
paulo@89
|
7415 }
|
|
paulo@89
|
7416 chart.update();
|
|
paulo@89
|
7417 });
|
|
paulo@89
|
7418
|
|
paulo@89
|
7419 //============================================================
|
|
paulo@89
|
7420 // Functions
|
|
paulo@89
|
7421 //------------------------------------------------------------
|
|
paulo@89
|
7422
|
|
paulo@89
|
7423 // Taken from crossfilter (http://square.github.com/crossfilter/)
|
|
paulo@89
|
7424 function resizePath(d) {
|
|
paulo@89
|
7425 var e = +(d == 'e'),
|
|
paulo@89
|
7426 x = e ? 1 : -1,
|
|
paulo@89
|
7427 y = availableHeight2 / 3;
|
|
paulo@89
|
7428 return 'M' + (.5 * x) + ',' + y
|
|
paulo@89
|
7429 + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)
|
|
paulo@89
|
7430 + 'V' + (2 * y - 6)
|
|
paulo@89
|
7431 + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)
|
|
paulo@89
|
7432 + 'Z'
|
|
paulo@89
|
7433 + 'M' + (2.5 * x) + ',' + (y + 8)
|
|
paulo@89
|
7434 + 'V' + (2 * y - 8)
|
|
paulo@89
|
7435 + 'M' + (4.5 * x) + ',' + (y + 8)
|
|
paulo@89
|
7436 + 'V' + (2 * y - 8);
|
|
paulo@89
|
7437 }
|
|
paulo@89
|
7438
|
|
paulo@89
|
7439
|
|
paulo@89
|
7440 function updateBrushBG() {
|
|
paulo@89
|
7441 if (!brush.empty()) brush.extent(brushExtent);
|
|
paulo@89
|
7442 brushBG
|
|
paulo@89
|
7443 .data([brush.empty() ? x2.domain() : brushExtent])
|
|
paulo@89
|
7444 .each(function(d,i) {
|
|
paulo@89
|
7445 var leftWidth = x2(d[0]) - x.range()[0],
|
|
paulo@89
|
7446 rightWidth = availableWidth - x2(d[1]);
|
|
paulo@89
|
7447 d3.select(this).select('.left')
|
|
paulo@89
|
7448 .attr('width', leftWidth < 0 ? 0 : leftWidth);
|
|
paulo@89
|
7449
|
|
paulo@89
|
7450 d3.select(this).select('.right')
|
|
paulo@89
|
7451 .attr('x', x2(d[1]))
|
|
paulo@89
|
7452 .attr('width', rightWidth < 0 ? 0 : rightWidth);
|
|
paulo@89
|
7453 });
|
|
paulo@89
|
7454 }
|
|
paulo@89
|
7455
|
|
paulo@89
|
7456
|
|
paulo@89
|
7457 function onBrush() {
|
|
paulo@89
|
7458 brushExtent = brush.empty() ? null : brush.extent();
|
|
paulo@89
|
7459 var extent = brush.empty() ? x2.domain() : brush.extent();
|
|
paulo@89
|
7460
|
|
paulo@89
|
7461 //The brush extent cannot be less than one. If it is, don't update the line chart.
|
|
paulo@89
|
7462 if (Math.abs(extent[0] - extent[1]) <= 1) {
|
|
paulo@89
|
7463 return;
|
|
paulo@89
|
7464 }
|
|
paulo@89
|
7465
|
|
paulo@89
|
7466 dispatch.brush({extent: extent, brush: brush});
|
|
paulo@89
|
7467
|
|
paulo@89
|
7468
|
|
paulo@89
|
7469 updateBrushBG();
|
|
paulo@89
|
7470
|
|
paulo@89
|
7471 // Update Main (Focus)
|
|
paulo@89
|
7472 var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
|
|
paulo@89
|
7473 .datum(
|
|
paulo@89
|
7474 data
|
|
paulo@89
|
7475 .filter(function(d) { return !d.disabled })
|
|
paulo@89
|
7476 .map(function(d,i) {
|
|
paulo@89
|
7477 return {
|
|
paulo@89
|
7478 key: d.key,
|
|
paulo@89
|
7479 area: d.area,
|
|
paulo@89
|
7480 values: d.values.filter(function(d,i) {
|
|
paulo@89
|
7481 return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
|
|
paulo@89
|
7482 })
|
|
paulo@89
|
7483 }
|
|
paulo@89
|
7484 })
|
|
paulo@89
|
7485 );
|
|
paulo@89
|
7486 focusLinesWrap.transition().duration(transitionDuration).call(lines);
|
|
paulo@89
|
7487
|
|
paulo@89
|
7488
|
|
paulo@89
|
7489 // Update Main (Focus) Axes
|
|
paulo@89
|
7490 g.select('.nv-focus .nv-x.nv-axis').transition().duration(transitionDuration)
|
|
paulo@89
|
7491 .call(xAxis);
|
|
paulo@89
|
7492 g.select('.nv-focus .nv-y.nv-axis').transition().duration(transitionDuration)
|
|
paulo@89
|
7493 .call(yAxis);
|
|
paulo@89
|
7494 }
|
|
paulo@89
|
7495 });
|
|
paulo@89
|
7496
|
|
paulo@89
|
7497 return chart;
|
|
paulo@89
|
7498 }
|
|
paulo@89
|
7499
|
|
paulo@89
|
7500 //============================================================
|
|
paulo@89
|
7501 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
7502 //------------------------------------------------------------
|
|
paulo@89
|
7503
|
|
paulo@89
|
7504 lines.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
7505 tooltip.data(evt).position(evt.pos).hidden(false);
|
|
paulo@89
|
7506 });
|
|
paulo@89
|
7507
|
|
paulo@89
|
7508 lines.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
7509 tooltip.hidden(true)
|
|
paulo@89
|
7510 });
|
|
paulo@89
|
7511
|
|
paulo@89
|
7512 //============================================================
|
|
paulo@89
|
7513 // Expose Public Variables
|
|
paulo@89
|
7514 //------------------------------------------------------------
|
|
paulo@89
|
7515
|
|
paulo@89
|
7516 // expose chart's sub-components
|
|
paulo@89
|
7517 chart.dispatch = dispatch;
|
|
paulo@89
|
7518 chart.legend = legend;
|
|
paulo@89
|
7519 chart.lines = lines;
|
|
paulo@89
|
7520 chart.lines2 = lines2;
|
|
paulo@89
|
7521 chart.xAxis = xAxis;
|
|
paulo@89
|
7522 chart.yAxis = yAxis;
|
|
paulo@89
|
7523 chart.x2Axis = x2Axis;
|
|
paulo@89
|
7524 chart.y2Axis = y2Axis;
|
|
paulo@89
|
7525 chart.interactiveLayer = interactiveLayer;
|
|
paulo@89
|
7526 chart.tooltip = tooltip;
|
|
paulo@89
|
7527
|
|
paulo@89
|
7528 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
7529
|
|
paulo@89
|
7530 chart._options = Object.create({}, {
|
|
paulo@89
|
7531 // simple options, just get/set the necessary values
|
|
paulo@89
|
7532 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
7533 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
7534 focusHeight: {get: function(){return height2;}, set: function(_){height2=_;}},
|
|
paulo@89
|
7535 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
7536 brushExtent: {get: function(){return brushExtent;}, set: function(_){brushExtent=_;}},
|
|
paulo@89
|
7537 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
7538 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
7539
|
|
paulo@89
|
7540 // deprecated options
|
|
paulo@89
|
7541 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
7542 // deprecated after 1.7.1
|
|
paulo@89
|
7543 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
7544 tooltip.enabled(!!_);
|
|
paulo@89
|
7545 }},
|
|
paulo@89
|
7546 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
7547 // deprecated after 1.7.1
|
|
paulo@89
|
7548 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
7549 tooltip.contentGenerator(_);
|
|
paulo@89
|
7550 }},
|
|
paulo@89
|
7551
|
|
paulo@89
|
7552 // options that require extra logic in the setter
|
|
paulo@89
|
7553 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
7554 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
7555 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
7556 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
7557 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
7558 }},
|
|
paulo@89
|
7559 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
7560 color = nv.utils.getColor(_);
|
|
paulo@89
|
7561 legend.color(color);
|
|
paulo@89
|
7562 // line color is handled above?
|
|
paulo@89
|
7563 }},
|
|
paulo@89
|
7564 interpolate: {get: function(){return lines.interpolate();}, set: function(_){
|
|
paulo@89
|
7565 lines.interpolate(_);
|
|
paulo@89
|
7566 lines2.interpolate(_);
|
|
paulo@89
|
7567 }},
|
|
paulo@89
|
7568 xTickFormat: {get: function(){return xAxis.tickFormat();}, set: function(_){
|
|
paulo@89
|
7569 xAxis.tickFormat(_);
|
|
paulo@89
|
7570 x2Axis.tickFormat(_);
|
|
paulo@89
|
7571 }},
|
|
paulo@89
|
7572 yTickFormat: {get: function(){return yAxis.tickFormat();}, set: function(_){
|
|
paulo@89
|
7573 yAxis.tickFormat(_);
|
|
paulo@89
|
7574 y2Axis.tickFormat(_);
|
|
paulo@89
|
7575 }},
|
|
paulo@89
|
7576 duration: {get: function(){return transitionDuration;}, set: function(_){
|
|
paulo@89
|
7577 transitionDuration=_;
|
|
paulo@89
|
7578 yAxis.duration(transitionDuration);
|
|
paulo@89
|
7579 y2Axis.duration(transitionDuration);
|
|
paulo@89
|
7580 xAxis.duration(transitionDuration);
|
|
paulo@89
|
7581 x2Axis.duration(transitionDuration);
|
|
paulo@89
|
7582 }},
|
|
paulo@89
|
7583 x: {get: function(){return lines.x();}, set: function(_){
|
|
paulo@89
|
7584 lines.x(_);
|
|
paulo@89
|
7585 lines2.x(_);
|
|
paulo@89
|
7586 }},
|
|
paulo@89
|
7587 y: {get: function(){return lines.y();}, set: function(_){
|
|
paulo@89
|
7588 lines.y(_);
|
|
paulo@89
|
7589 lines2.y(_);
|
|
paulo@89
|
7590 }},
|
|
paulo@89
|
7591 useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
|
|
paulo@89
|
7592 useInteractiveGuideline = _;
|
|
paulo@89
|
7593 if (useInteractiveGuideline) {
|
|
paulo@89
|
7594 lines.interactive(false);
|
|
paulo@89
|
7595 lines.useVoronoi(false);
|
|
paulo@89
|
7596 }
|
|
paulo@89
|
7597 }}
|
|
paulo@89
|
7598 });
|
|
paulo@89
|
7599
|
|
paulo@89
|
7600 nv.utils.inheritOptions(chart, lines);
|
|
paulo@89
|
7601 nv.utils.initOptions(chart);
|
|
paulo@89
|
7602
|
|
paulo@89
|
7603 return chart;
|
|
paulo@89
|
7604 };
|
|
paulo@89
|
7605
|
|
paulo@89
|
7606 nv.models.multiBar = function() {
|
|
paulo@89
|
7607 "use strict";
|
|
paulo@89
|
7608
|
|
paulo@89
|
7609 //============================================================
|
|
paulo@89
|
7610 // Public Variables with Default Settings
|
|
paulo@89
|
7611 //------------------------------------------------------------
|
|
paulo@89
|
7612
|
|
paulo@89
|
7613 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
7614 , width = 960
|
|
paulo@89
|
7615 , height = 500
|
|
paulo@89
|
7616 , x = d3.scale.ordinal()
|
|
paulo@89
|
7617 , y = d3.scale.linear()
|
|
paulo@89
|
7618 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
7619 , container = null
|
|
paulo@89
|
7620 , getX = function(d) { return d.x }
|
|
paulo@89
|
7621 , getY = function(d) { return d.y }
|
|
paulo@89
|
7622 , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
|
|
paulo@89
|
7623 , clipEdge = true
|
|
paulo@89
|
7624 , stacked = false
|
|
paulo@89
|
7625 , stackOffset = 'zero' // options include 'silhouette', 'wiggle', 'expand', 'zero', or a custom function
|
|
paulo@89
|
7626 , color = nv.utils.defaultColor()
|
|
paulo@89
|
7627 , hideable = false
|
|
paulo@89
|
7628 , barColor = null // adding the ability to set the color for each rather than the whole group
|
|
paulo@89
|
7629 , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
|
|
paulo@89
|
7630 , duration = 500
|
|
paulo@89
|
7631 , xDomain
|
|
paulo@89
|
7632 , yDomain
|
|
paulo@89
|
7633 , xRange
|
|
paulo@89
|
7634 , yRange
|
|
paulo@89
|
7635 , groupSpacing = 0.1
|
|
paulo@89
|
7636 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
7637 ;
|
|
paulo@89
|
7638
|
|
paulo@89
|
7639 //============================================================
|
|
paulo@89
|
7640 // Private Variables
|
|
paulo@89
|
7641 //------------------------------------------------------------
|
|
paulo@89
|
7642
|
|
paulo@89
|
7643 var x0, y0 //used to store previous scales
|
|
paulo@89
|
7644 , renderWatch = nv.utils.renderWatch(dispatch, duration)
|
|
paulo@89
|
7645 ;
|
|
paulo@89
|
7646
|
|
paulo@89
|
7647 var last_datalength = 0;
|
|
paulo@89
|
7648
|
|
paulo@89
|
7649 function chart(selection) {
|
|
paulo@89
|
7650 renderWatch.reset();
|
|
paulo@89
|
7651 selection.each(function(data) {
|
|
paulo@89
|
7652 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
7653 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
7654
|
|
paulo@89
|
7655 container = d3.select(this);
|
|
paulo@89
|
7656 nv.utils.initSVG(container);
|
|
paulo@89
|
7657 var nonStackableCount = 0;
|
|
paulo@89
|
7658 // This function defines the requirements for render complete
|
|
paulo@89
|
7659 var endFn = function(d, i) {
|
|
paulo@89
|
7660 if (d.series === data.length - 1 && i === data[0].values.length - 1)
|
|
paulo@89
|
7661 return true;
|
|
paulo@89
|
7662 return false;
|
|
paulo@89
|
7663 };
|
|
paulo@89
|
7664
|
|
paulo@89
|
7665 if(hideable && data.length) hideable = [{
|
|
paulo@89
|
7666 values: data[0].values.map(function(d) {
|
|
paulo@89
|
7667 return {
|
|
paulo@89
|
7668 x: d.x,
|
|
paulo@89
|
7669 y: 0,
|
|
paulo@89
|
7670 series: d.series,
|
|
paulo@89
|
7671 size: 0.01
|
|
paulo@89
|
7672 };}
|
|
paulo@89
|
7673 )}];
|
|
paulo@89
|
7674
|
|
paulo@89
|
7675 if (stacked) {
|
|
paulo@89
|
7676 var parsed = d3.layout.stack()
|
|
paulo@89
|
7677 .offset(stackOffset)
|
|
paulo@89
|
7678 .values(function(d){ return d.values })
|
|
paulo@89
|
7679 .y(getY)
|
|
paulo@89
|
7680 (!data.length && hideable ? hideable : data);
|
|
paulo@89
|
7681
|
|
paulo@89
|
7682 parsed.forEach(function(series, i){
|
|
paulo@89
|
7683 // if series is non-stackable, use un-parsed data
|
|
paulo@89
|
7684 if (series.nonStackable) {
|
|
paulo@89
|
7685 data[i].nonStackableSeries = nonStackableCount++;
|
|
paulo@89
|
7686 parsed[i] = data[i];
|
|
paulo@89
|
7687 } else {
|
|
paulo@89
|
7688 // don't stack this seires on top of the nonStackable seriees
|
|
paulo@89
|
7689 if (i > 0 && parsed[i - 1].nonStackable){
|
|
paulo@89
|
7690 parsed[i].values.map(function(d,j){
|
|
paulo@89
|
7691 d.y0 -= parsed[i - 1].values[j].y;
|
|
paulo@89
|
7692 d.y1 = d.y0 + d.y;
|
|
paulo@89
|
7693 });
|
|
paulo@89
|
7694 }
|
|
paulo@89
|
7695 }
|
|
paulo@89
|
7696 });
|
|
paulo@89
|
7697 data = parsed;
|
|
paulo@89
|
7698 }
|
|
paulo@89
|
7699 //add series index and key to each data point for reference
|
|
paulo@89
|
7700 data.forEach(function(series, i) {
|
|
paulo@89
|
7701 series.values.forEach(function(point) {
|
|
paulo@89
|
7702 point.series = i;
|
|
paulo@89
|
7703 point.key = series.key;
|
|
paulo@89
|
7704 });
|
|
paulo@89
|
7705 });
|
|
paulo@89
|
7706
|
|
paulo@89
|
7707 // HACK for negative value stacking
|
|
paulo@89
|
7708 if (stacked) {
|
|
paulo@89
|
7709 data[0].values.map(function(d,i) {
|
|
paulo@89
|
7710 var posBase = 0, negBase = 0;
|
|
paulo@89
|
7711 data.map(function(d, idx) {
|
|
paulo@89
|
7712 if (!data[idx].nonStackable) {
|
|
paulo@89
|
7713 var f = d.values[i]
|
|
paulo@89
|
7714 f.size = Math.abs(f.y);
|
|
paulo@89
|
7715 if (f.y<0) {
|
|
paulo@89
|
7716 f.y1 = negBase;
|
|
paulo@89
|
7717 negBase = negBase - f.size;
|
|
paulo@89
|
7718 } else
|
|
paulo@89
|
7719 {
|
|
paulo@89
|
7720 f.y1 = f.size + posBase;
|
|
paulo@89
|
7721 posBase = posBase + f.size;
|
|
paulo@89
|
7722 }
|
|
paulo@89
|
7723 }
|
|
paulo@89
|
7724
|
|
paulo@89
|
7725 });
|
|
paulo@89
|
7726 });
|
|
paulo@89
|
7727 }
|
|
paulo@89
|
7728 // Setup Scales
|
|
paulo@89
|
7729 // remap and flatten the data for use in calculating the scales' domains
|
|
paulo@89
|
7730 var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
|
|
paulo@89
|
7731 data.map(function(d, idx) {
|
|
paulo@89
|
7732 return d.values.map(function(d,i) {
|
|
paulo@89
|
7733 return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1, idx:idx }
|
|
paulo@89
|
7734 })
|
|
paulo@89
|
7735 });
|
|
paulo@89
|
7736
|
|
paulo@89
|
7737 x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
|
|
paulo@89
|
7738 .rangeBands(xRange || [0, availableWidth], groupSpacing);
|
|
paulo@89
|
7739
|
|
paulo@89
|
7740 y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) {
|
|
paulo@89
|
7741 var domain = d.y;
|
|
paulo@89
|
7742 // increase the domain range if this series is stackable
|
|
paulo@89
|
7743 if (stacked && !data[d.idx].nonStackable) {
|
|
paulo@89
|
7744 if (d.y > 0){
|
|
paulo@89
|
7745 domain = d.y1
|
|
paulo@89
|
7746 } else {
|
|
paulo@89
|
7747 domain = d.y1 + d.y
|
|
paulo@89
|
7748 }
|
|
paulo@89
|
7749 }
|
|
paulo@89
|
7750 return domain;
|
|
paulo@89
|
7751 }).concat(forceY)))
|
|
paulo@89
|
7752 .range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
7753
|
|
paulo@89
|
7754 // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
|
paulo@89
|
7755 if (x.domain()[0] === x.domain()[1])
|
|
paulo@89
|
7756 x.domain()[0] ?
|
|
paulo@89
|
7757 x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
|
paulo@89
|
7758 : x.domain([-1,1]);
|
|
paulo@89
|
7759
|
|
paulo@89
|
7760 if (y.domain()[0] === y.domain()[1])
|
|
paulo@89
|
7761 y.domain()[0] ?
|
|
paulo@89
|
7762 y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
|
|
paulo@89
|
7763 : y.domain([-1,1]);
|
|
paulo@89
|
7764
|
|
paulo@89
|
7765 x0 = x0 || x;
|
|
paulo@89
|
7766 y0 = y0 || y;
|
|
paulo@89
|
7767
|
|
paulo@89
|
7768 // Setup containers and skeleton of chart
|
|
paulo@89
|
7769 var wrap = container.selectAll('g.nv-wrap.nv-multibar').data([data]);
|
|
paulo@89
|
7770 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibar');
|
|
paulo@89
|
7771 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
7772 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
7773 var g = wrap.select('g');
|
|
paulo@89
|
7774
|
|
paulo@89
|
7775 gEnter.append('g').attr('class', 'nv-groups');
|
|
paulo@89
|
7776 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
7777
|
|
paulo@89
|
7778 defsEnter.append('clipPath')
|
|
paulo@89
|
7779 .attr('id', 'nv-edge-clip-' + id)
|
|
paulo@89
|
7780 .append('rect');
|
|
paulo@89
|
7781 wrap.select('#nv-edge-clip-' + id + ' rect')
|
|
paulo@89
|
7782 .attr('width', availableWidth)
|
|
paulo@89
|
7783 .attr('height', availableHeight);
|
|
paulo@89
|
7784
|
|
paulo@89
|
7785 g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
|
|
paulo@89
|
7786
|
|
paulo@89
|
7787 var groups = wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
7788 .data(function(d) { return d }, function(d,i) { return i });
|
|
paulo@89
|
7789 groups.enter().append('g')
|
|
paulo@89
|
7790 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
7791 .style('fill-opacity', 1e-6);
|
|
paulo@89
|
7792
|
|
paulo@89
|
7793 var exitTransition = renderWatch
|
|
paulo@89
|
7794 .transition(groups.exit().selectAll('rect.nv-bar'), 'multibarExit', Math.min(100, duration))
|
|
paulo@89
|
7795 .attr('y', function(d, i, j) {
|
|
paulo@89
|
7796 var yVal = y0(0) || 0;
|
|
paulo@89
|
7797 if (stacked) {
|
|
paulo@89
|
7798 if (data[d.series] && !data[d.series].nonStackable) {
|
|
paulo@89
|
7799 yVal = y0(d.y0);
|
|
paulo@89
|
7800 }
|
|
paulo@89
|
7801 }
|
|
paulo@89
|
7802 return yVal;
|
|
paulo@89
|
7803 })
|
|
paulo@89
|
7804 .attr('height', 0)
|
|
paulo@89
|
7805 .remove();
|
|
paulo@89
|
7806 if (exitTransition.delay)
|
|
paulo@89
|
7807 exitTransition.delay(function(d,i) {
|
|
paulo@89
|
7808 var delay = i * (duration / (last_datalength + 1)) - i;
|
|
paulo@89
|
7809 return delay;
|
|
paulo@89
|
7810 });
|
|
paulo@89
|
7811 groups
|
|
paulo@89
|
7812 .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
|
|
paulo@89
|
7813 .classed('hover', function(d) { return d.hover })
|
|
paulo@89
|
7814 .style('fill', function(d,i){ return color(d, i) })
|
|
paulo@89
|
7815 .style('stroke', function(d,i){ return color(d, i) });
|
|
paulo@89
|
7816 groups
|
|
paulo@89
|
7817 .style('stroke-opacity', 1)
|
|
paulo@89
|
7818 .style('fill-opacity', 0.75);
|
|
paulo@89
|
7819
|
|
paulo@89
|
7820 var bars = groups.selectAll('rect.nv-bar')
|
|
paulo@89
|
7821 .data(function(d) { return (hideable && !data.length) ? hideable.values : d.values });
|
|
paulo@89
|
7822 bars.exit().remove();
|
|
paulo@89
|
7823
|
|
paulo@89
|
7824 var barsEnter = bars.enter().append('rect')
|
|
paulo@89
|
7825 .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
|
|
paulo@89
|
7826 .attr('x', function(d,i,j) {
|
|
paulo@89
|
7827 return stacked && !data[j].nonStackable ? 0 : (j * x.rangeBand() / data.length )
|
|
paulo@89
|
7828 })
|
|
paulo@89
|
7829 .attr('y', function(d,i,j) { return y0(stacked && !data[j].nonStackable ? d.y0 : 0) || 0 })
|
|
paulo@89
|
7830 .attr('height', 0)
|
|
paulo@89
|
7831 .attr('width', function(d,i,j) { return x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length) })
|
|
paulo@89
|
7832 .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
|
|
paulo@89
|
7833 ;
|
|
paulo@89
|
7834 bars
|
|
paulo@89
|
7835 .style('fill', function(d,i,j){ return color(d, j, i); })
|
|
paulo@89
|
7836 .style('stroke', function(d,i,j){ return color(d, j, i); })
|
|
paulo@89
|
7837 .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
|
|
paulo@89
|
7838 d3.select(this).classed('hover', true);
|
|
paulo@89
|
7839 dispatch.elementMouseover({
|
|
paulo@89
|
7840 data: d,
|
|
paulo@89
|
7841 index: i,
|
|
paulo@89
|
7842 color: d3.select(this).style("fill")
|
|
paulo@89
|
7843 });
|
|
paulo@89
|
7844 })
|
|
paulo@89
|
7845 .on('mouseout', function(d,i) {
|
|
paulo@89
|
7846 d3.select(this).classed('hover', false);
|
|
paulo@89
|
7847 dispatch.elementMouseout({
|
|
paulo@89
|
7848 data: d,
|
|
paulo@89
|
7849 index: i,
|
|
paulo@89
|
7850 color: d3.select(this).style("fill")
|
|
paulo@89
|
7851 });
|
|
paulo@89
|
7852 })
|
|
paulo@89
|
7853 .on('mousemove', function(d,i) {
|
|
paulo@89
|
7854 dispatch.elementMousemove({
|
|
paulo@89
|
7855 data: d,
|
|
paulo@89
|
7856 index: i,
|
|
paulo@89
|
7857 color: d3.select(this).style("fill")
|
|
paulo@89
|
7858 });
|
|
paulo@89
|
7859 })
|
|
paulo@89
|
7860 .on('click', function(d,i) {
|
|
paulo@89
|
7861 dispatch.elementClick({
|
|
paulo@89
|
7862 data: d,
|
|
paulo@89
|
7863 index: i,
|
|
paulo@89
|
7864 color: d3.select(this).style("fill")
|
|
paulo@89
|
7865 });
|
|
paulo@89
|
7866 d3.event.stopPropagation();
|
|
paulo@89
|
7867 })
|
|
paulo@89
|
7868 .on('dblclick', function(d,i) {
|
|
paulo@89
|
7869 dispatch.elementDblClick({
|
|
paulo@89
|
7870 data: d,
|
|
paulo@89
|
7871 index: i,
|
|
paulo@89
|
7872 color: d3.select(this).style("fill")
|
|
paulo@89
|
7873 });
|
|
paulo@89
|
7874 d3.event.stopPropagation();
|
|
paulo@89
|
7875 });
|
|
paulo@89
|
7876 bars
|
|
paulo@89
|
7877 .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
|
|
paulo@89
|
7878 .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
|
|
paulo@89
|
7879
|
|
paulo@89
|
7880 if (barColor) {
|
|
paulo@89
|
7881 if (!disabled) disabled = data.map(function() { return true });
|
|
paulo@89
|
7882 bars
|
|
paulo@89
|
7883 .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })
|
|
paulo@89
|
7884 .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });
|
|
paulo@89
|
7885 }
|
|
paulo@89
|
7886
|
|
paulo@89
|
7887 var barSelection =
|
|
paulo@89
|
7888 bars.watchTransition(renderWatch, 'multibar', Math.min(250, duration))
|
|
paulo@89
|
7889 .delay(function(d,i) {
|
|
paulo@89
|
7890 return i * duration / data[0].values.length;
|
|
paulo@89
|
7891 });
|
|
paulo@89
|
7892 if (stacked){
|
|
paulo@89
|
7893 barSelection
|
|
paulo@89
|
7894 .attr('y', function(d,i,j) {
|
|
paulo@89
|
7895 var yVal = 0;
|
|
paulo@89
|
7896 // if stackable, stack it on top of the previous series
|
|
paulo@89
|
7897 if (!data[j].nonStackable) {
|
|
paulo@89
|
7898 yVal = y(d.y1);
|
|
paulo@89
|
7899 } else {
|
|
paulo@89
|
7900 if (getY(d,i) < 0){
|
|
paulo@89
|
7901 yVal = y(0);
|
|
paulo@89
|
7902 } else {
|
|
paulo@89
|
7903 if (y(0) - y(getY(d,i)) < -1){
|
|
paulo@89
|
7904 yVal = y(0) - 1;
|
|
paulo@89
|
7905 } else {
|
|
paulo@89
|
7906 yVal = y(getY(d, i)) || 0;
|
|
paulo@89
|
7907 }
|
|
paulo@89
|
7908 }
|
|
paulo@89
|
7909 }
|
|
paulo@89
|
7910 return yVal;
|
|
paulo@89
|
7911 })
|
|
paulo@89
|
7912 .attr('height', function(d,i,j) {
|
|
paulo@89
|
7913 if (!data[j].nonStackable) {
|
|
paulo@89
|
7914 return Math.max(Math.abs(y(d.y+d.y0) - y(d.y0)), 1);
|
|
paulo@89
|
7915 } else {
|
|
paulo@89
|
7916 return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0;
|
|
paulo@89
|
7917 }
|
|
paulo@89
|
7918 })
|
|
paulo@89
|
7919 .attr('x', function(d,i,j) {
|
|
paulo@89
|
7920 var width = 0;
|
|
paulo@89
|
7921 if (data[j].nonStackable) {
|
|
paulo@89
|
7922 width = d.series * x.rangeBand() / data.length;
|
|
paulo@89
|
7923 if (data.length !== nonStackableCount){
|
|
paulo@89
|
7924 width = data[j].nonStackableSeries * x.rangeBand()/(nonStackableCount*2);
|
|
paulo@89
|
7925 }
|
|
paulo@89
|
7926 }
|
|
paulo@89
|
7927 return width;
|
|
paulo@89
|
7928 })
|
|
paulo@89
|
7929 .attr('width', function(d,i,j){
|
|
paulo@89
|
7930 if (!data[j].nonStackable) {
|
|
paulo@89
|
7931 return x.rangeBand();
|
|
paulo@89
|
7932 } else {
|
|
paulo@89
|
7933 // if all series are nonStacable, take the full width
|
|
paulo@89
|
7934 var width = (x.rangeBand() / nonStackableCount);
|
|
paulo@89
|
7935 // otherwise, nonStackable graph will be only taking the half-width
|
|
paulo@89
|
7936 // of the x rangeBand
|
|
paulo@89
|
7937 if (data.length !== nonStackableCount) {
|
|
paulo@89
|
7938 width = x.rangeBand()/(nonStackableCount*2);
|
|
paulo@89
|
7939 }
|
|
paulo@89
|
7940 return width;
|
|
paulo@89
|
7941 }
|
|
paulo@89
|
7942 });
|
|
paulo@89
|
7943 }
|
|
paulo@89
|
7944 else {
|
|
paulo@89
|
7945 barSelection
|
|
paulo@89
|
7946 .attr('x', function(d,i) {
|
|
paulo@89
|
7947 return d.series * x.rangeBand() / data.length;
|
|
paulo@89
|
7948 })
|
|
paulo@89
|
7949 .attr('width', x.rangeBand() / data.length)
|
|
paulo@89
|
7950 .attr('y', function(d,i) {
|
|
paulo@89
|
7951 return getY(d,i) < 0 ?
|
|
paulo@89
|
7952 y(0) :
|
|
paulo@89
|
7953 y(0) - y(getY(d,i)) < 1 ?
|
|
paulo@89
|
7954 y(0) - 1 :
|
|
paulo@89
|
7955 y(getY(d,i)) || 0;
|
|
paulo@89
|
7956 })
|
|
paulo@89
|
7957 .attr('height', function(d,i) {
|
|
paulo@89
|
7958 return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) || 0;
|
|
paulo@89
|
7959 });
|
|
paulo@89
|
7960 }
|
|
paulo@89
|
7961
|
|
paulo@89
|
7962 //store old scales for use in transitions on update
|
|
paulo@89
|
7963 x0 = x.copy();
|
|
paulo@89
|
7964 y0 = y.copy();
|
|
paulo@89
|
7965
|
|
paulo@89
|
7966 // keep track of the last data value length for transition calculations
|
|
paulo@89
|
7967 if (data[0] && data[0].values) {
|
|
paulo@89
|
7968 last_datalength = data[0].values.length;
|
|
paulo@89
|
7969 }
|
|
paulo@89
|
7970
|
|
paulo@89
|
7971 });
|
|
paulo@89
|
7972
|
|
paulo@89
|
7973 renderWatch.renderEnd('multibar immediate');
|
|
paulo@89
|
7974
|
|
paulo@89
|
7975 return chart;
|
|
paulo@89
|
7976 }
|
|
paulo@89
|
7977
|
|
paulo@89
|
7978 //============================================================
|
|
paulo@89
|
7979 // Expose Public Variables
|
|
paulo@89
|
7980 //------------------------------------------------------------
|
|
paulo@89
|
7981
|
|
paulo@89
|
7982 chart.dispatch = dispatch;
|
|
paulo@89
|
7983
|
|
paulo@89
|
7984 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
7985
|
|
paulo@89
|
7986 chart._options = Object.create({}, {
|
|
paulo@89
|
7987 // simple options, just get/set the necessary values
|
|
paulo@89
|
7988 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
7989 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
7990 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
7991 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
7992 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
7993 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
7994 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
7995 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
7996 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
7997 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
7998 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
7999 stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},
|
|
paulo@89
|
8000 stackOffset: {get: function(){return stackOffset;}, set: function(_){stackOffset=_;}},
|
|
paulo@89
|
8001 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
8002 disabled: {get: function(){return disabled;}, set: function(_){disabled=_;}},
|
|
paulo@89
|
8003 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
8004 hideable: {get: function(){return hideable;}, set: function(_){hideable=_;}},
|
|
paulo@89
|
8005 groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},
|
|
paulo@89
|
8006
|
|
paulo@89
|
8007 // options that require extra logic in the setter
|
|
paulo@89
|
8008 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
8009 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
8010 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
8011 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
8012 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
8013 }},
|
|
paulo@89
|
8014 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
8015 duration = _;
|
|
paulo@89
|
8016 renderWatch.reset(duration);
|
|
paulo@89
|
8017 }},
|
|
paulo@89
|
8018 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
8019 color = nv.utils.getColor(_);
|
|
paulo@89
|
8020 }},
|
|
paulo@89
|
8021 barColor: {get: function(){return barColor;}, set: function(_){
|
|
paulo@89
|
8022 barColor = _ ? nv.utils.getColor(_) : null;
|
|
paulo@89
|
8023 }}
|
|
paulo@89
|
8024 });
|
|
paulo@89
|
8025
|
|
paulo@89
|
8026 nv.utils.initOptions(chart);
|
|
paulo@89
|
8027
|
|
paulo@89
|
8028 return chart;
|
|
paulo@89
|
8029 };
|
|
paulo@89
|
8030 nv.models.multiBarChart = function() {
|
|
paulo@89
|
8031 "use strict";
|
|
paulo@89
|
8032
|
|
paulo@89
|
8033 //============================================================
|
|
paulo@89
|
8034 // Public Variables with Default Settings
|
|
paulo@89
|
8035 //------------------------------------------------------------
|
|
paulo@89
|
8036
|
|
paulo@89
|
8037 var multibar = nv.models.multiBar()
|
|
paulo@89
|
8038 , xAxis = nv.models.axis()
|
|
paulo@89
|
8039 , yAxis = nv.models.axis()
|
|
paulo@89
|
8040 , legend = nv.models.legend()
|
|
paulo@89
|
8041 , controls = nv.models.legend()
|
|
paulo@89
|
8042 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
8043 ;
|
|
paulo@89
|
8044
|
|
paulo@89
|
8045 var margin = {top: 30, right: 20, bottom: 50, left: 60}
|
|
paulo@89
|
8046 , width = null
|
|
paulo@89
|
8047 , height = null
|
|
paulo@89
|
8048 , color = nv.utils.defaultColor()
|
|
paulo@89
|
8049 , showControls = true
|
|
paulo@89
|
8050 , controlLabels = {}
|
|
paulo@89
|
8051 , showLegend = true
|
|
paulo@89
|
8052 , showXAxis = true
|
|
paulo@89
|
8053 , showYAxis = true
|
|
paulo@89
|
8054 , rightAlignYAxis = false
|
|
paulo@89
|
8055 , reduceXTicks = true // if false a tick will show for every data point
|
|
paulo@89
|
8056 , staggerLabels = false
|
|
paulo@89
|
8057 , rotateLabels = 0
|
|
paulo@89
|
8058 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
8059 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
8060 , state = nv.utils.state()
|
|
paulo@89
|
8061 , defaultState = null
|
|
paulo@89
|
8062 , noData = null
|
|
paulo@89
|
8063 , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
|
|
paulo@89
|
8064 , controlWidth = function() { return showControls ? 180 : 0 }
|
|
paulo@89
|
8065 , duration = 250
|
|
paulo@89
|
8066 ;
|
|
paulo@89
|
8067
|
|
paulo@89
|
8068 state.stacked = false // DEPRECATED Maintained for backward compatibility
|
|
paulo@89
|
8069
|
|
paulo@89
|
8070 multibar.stacked(false);
|
|
paulo@89
|
8071 xAxis
|
|
paulo@89
|
8072 .orient('bottom')
|
|
paulo@89
|
8073 .tickPadding(7)
|
|
paulo@89
|
8074 .showMaxMin(false)
|
|
paulo@89
|
8075 .tickFormat(function(d) { return d })
|
|
paulo@89
|
8076 ;
|
|
paulo@89
|
8077 yAxis
|
|
paulo@89
|
8078 .orient((rightAlignYAxis) ? 'right' : 'left')
|
|
paulo@89
|
8079 .tickFormat(d3.format(',.1f'))
|
|
paulo@89
|
8080 ;
|
|
paulo@89
|
8081
|
|
paulo@89
|
8082 tooltip
|
|
paulo@89
|
8083 .duration(0)
|
|
paulo@89
|
8084 .valueFormatter(function(d, i) {
|
|
paulo@89
|
8085 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
8086 })
|
|
paulo@89
|
8087 .headerFormatter(function(d, i) {
|
|
paulo@89
|
8088 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
8089 });
|
|
paulo@89
|
8090
|
|
paulo@89
|
8091 controls.updateState(false);
|
|
paulo@89
|
8092
|
|
paulo@89
|
8093 //============================================================
|
|
paulo@89
|
8094 // Private Variables
|
|
paulo@89
|
8095 //------------------------------------------------------------
|
|
paulo@89
|
8096
|
|
paulo@89
|
8097 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
8098 var stacked = false;
|
|
paulo@89
|
8099
|
|
paulo@89
|
8100 var stateGetter = function(data) {
|
|
paulo@89
|
8101 return function(){
|
|
paulo@89
|
8102 return {
|
|
paulo@89
|
8103 active: data.map(function(d) { return !d.disabled }),
|
|
paulo@89
|
8104 stacked: stacked
|
|
paulo@89
|
8105 };
|
|
paulo@89
|
8106 }
|
|
paulo@89
|
8107 };
|
|
paulo@89
|
8108
|
|
paulo@89
|
8109 var stateSetter = function(data) {
|
|
paulo@89
|
8110 return function(state) {
|
|
paulo@89
|
8111 if (state.stacked !== undefined)
|
|
paulo@89
|
8112 stacked = state.stacked;
|
|
paulo@89
|
8113 if (state.active !== undefined)
|
|
paulo@89
|
8114 data.forEach(function(series,i) {
|
|
paulo@89
|
8115 series.disabled = !state.active[i];
|
|
paulo@89
|
8116 });
|
|
paulo@89
|
8117 }
|
|
paulo@89
|
8118 };
|
|
paulo@89
|
8119
|
|
paulo@89
|
8120 function chart(selection) {
|
|
paulo@89
|
8121 renderWatch.reset();
|
|
paulo@89
|
8122 renderWatch.models(multibar);
|
|
paulo@89
|
8123 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
8124 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
8125
|
|
paulo@89
|
8126 selection.each(function(data) {
|
|
paulo@89
|
8127 var container = d3.select(this),
|
|
paulo@89
|
8128 that = this;
|
|
paulo@89
|
8129 nv.utils.initSVG(container);
|
|
paulo@89
|
8130 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
8131 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
8132
|
|
paulo@89
|
8133 chart.update = function() {
|
|
paulo@89
|
8134 if (duration === 0)
|
|
paulo@89
|
8135 container.call(chart);
|
|
paulo@89
|
8136 else
|
|
paulo@89
|
8137 container.transition()
|
|
paulo@89
|
8138 .duration(duration)
|
|
paulo@89
|
8139 .call(chart);
|
|
paulo@89
|
8140 };
|
|
paulo@89
|
8141 chart.container = this;
|
|
paulo@89
|
8142
|
|
paulo@89
|
8143 state
|
|
paulo@89
|
8144 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
8145 .getter(stateGetter(data))
|
|
paulo@89
|
8146 .update();
|
|
paulo@89
|
8147
|
|
paulo@89
|
8148 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
8149 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
8150
|
|
paulo@89
|
8151 if (!defaultState) {
|
|
paulo@89
|
8152 var key;
|
|
paulo@89
|
8153 defaultState = {};
|
|
paulo@89
|
8154 for (key in state) {
|
|
paulo@89
|
8155 if (state[key] instanceof Array)
|
|
paulo@89
|
8156 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
8157 else
|
|
paulo@89
|
8158 defaultState[key] = state[key];
|
|
paulo@89
|
8159 }
|
|
paulo@89
|
8160 }
|
|
paulo@89
|
8161
|
|
paulo@89
|
8162 // Display noData message if there's nothing to show.
|
|
paulo@89
|
8163 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
8164 nv.utils.noData(chart, container)
|
|
paulo@89
|
8165 return chart;
|
|
paulo@89
|
8166 } else {
|
|
paulo@89
|
8167 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
8168 }
|
|
paulo@89
|
8169
|
|
paulo@89
|
8170 // Setup Scales
|
|
paulo@89
|
8171 x = multibar.xScale();
|
|
paulo@89
|
8172 y = multibar.yScale();
|
|
paulo@89
|
8173
|
|
paulo@89
|
8174 // Setup containers and skeleton of chart
|
|
paulo@89
|
8175 var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
|
|
paulo@89
|
8176 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
|
|
paulo@89
|
8177 var g = wrap.select('g');
|
|
paulo@89
|
8178
|
|
paulo@89
|
8179 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
8180 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
8181 gEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
8182 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
8183 gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
paulo@89
|
8184
|
|
paulo@89
|
8185 // Legend
|
|
paulo@89
|
8186 if (showLegend) {
|
|
paulo@89
|
8187 legend.width(availableWidth - controlWidth());
|
|
paulo@89
|
8188
|
|
paulo@89
|
8189 g.select('.nv-legendWrap')
|
|
paulo@89
|
8190 .datum(data)
|
|
paulo@89
|
8191 .call(legend);
|
|
paulo@89
|
8192
|
|
paulo@89
|
8193 if ( margin.top != legend.height()) {
|
|
paulo@89
|
8194 margin.top = legend.height();
|
|
paulo@89
|
8195 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
8196 }
|
|
paulo@89
|
8197
|
|
paulo@89
|
8198 g.select('.nv-legendWrap')
|
|
paulo@89
|
8199 .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');
|
|
paulo@89
|
8200 }
|
|
paulo@89
|
8201
|
|
paulo@89
|
8202 // Controls
|
|
paulo@89
|
8203 if (showControls) {
|
|
paulo@89
|
8204 var controlsData = [
|
|
paulo@89
|
8205 { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },
|
|
paulo@89
|
8206 { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }
|
|
paulo@89
|
8207 ];
|
|
paulo@89
|
8208
|
|
paulo@89
|
8209 controls.width(controlWidth()).color(['#444', '#444', '#444']);
|
|
paulo@89
|
8210 g.select('.nv-controlsWrap')
|
|
paulo@89
|
8211 .datum(controlsData)
|
|
paulo@89
|
8212 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
8213 .call(controls);
|
|
paulo@89
|
8214 }
|
|
paulo@89
|
8215
|
|
paulo@89
|
8216 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
8217 if (rightAlignYAxis) {
|
|
paulo@89
|
8218 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
8219 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
8220 }
|
|
paulo@89
|
8221
|
|
paulo@89
|
8222 // Main Chart Component(s)
|
|
paulo@89
|
8223 multibar
|
|
paulo@89
|
8224 .disabled(data.map(function(series) { return series.disabled }))
|
|
paulo@89
|
8225 .width(availableWidth)
|
|
paulo@89
|
8226 .height(availableHeight)
|
|
paulo@89
|
8227 .color(data.map(function(d,i) {
|
|
paulo@89
|
8228 return d.color || color(d, i);
|
|
paulo@89
|
8229 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
8230
|
|
paulo@89
|
8231
|
|
paulo@89
|
8232 var barsWrap = g.select('.nv-barsWrap')
|
|
paulo@89
|
8233 .datum(data.filter(function(d) { return !d.disabled }));
|
|
paulo@89
|
8234
|
|
paulo@89
|
8235 barsWrap.call(multibar);
|
|
paulo@89
|
8236
|
|
paulo@89
|
8237 // Setup Axes
|
|
paulo@89
|
8238 if (showXAxis) {
|
|
paulo@89
|
8239 xAxis
|
|
paulo@89
|
8240 .scale(x)
|
|
paulo@89
|
8241 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
8242 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
8243
|
|
paulo@89
|
8244 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
8245 .attr('transform', 'translate(0,' + y.range()[0] + ')');
|
|
paulo@89
|
8246 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
8247 .call(xAxis);
|
|
paulo@89
|
8248
|
|
paulo@89
|
8249 var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');
|
|
paulo@89
|
8250
|
|
paulo@89
|
8251 xTicks
|
|
paulo@89
|
8252 .selectAll('line, text')
|
|
paulo@89
|
8253 .style('opacity', 1)
|
|
paulo@89
|
8254
|
|
paulo@89
|
8255 if (staggerLabels) {
|
|
paulo@89
|
8256 var getTranslate = function(x,y) {
|
|
paulo@89
|
8257 return "translate(" + x + "," + y + ")";
|
|
paulo@89
|
8258 };
|
|
paulo@89
|
8259
|
|
paulo@89
|
8260 var staggerUp = 5, staggerDown = 17; //pixels to stagger by
|
|
paulo@89
|
8261 // Issue #140
|
|
paulo@89
|
8262 xTicks
|
|
paulo@89
|
8263 .selectAll("text")
|
|
paulo@89
|
8264 .attr('transform', function(d,i,j) {
|
|
paulo@89
|
8265 return getTranslate(0, (j % 2 == 0 ? staggerUp : staggerDown));
|
|
paulo@89
|
8266 });
|
|
paulo@89
|
8267
|
|
paulo@89
|
8268 var totalInBetweenTicks = d3.selectAll(".nv-x.nv-axis .nv-wrap g g text")[0].length;
|
|
paulo@89
|
8269 g.selectAll(".nv-x.nv-axis .nv-axisMaxMin text")
|
|
paulo@89
|
8270 .attr("transform", function(d,i) {
|
|
paulo@89
|
8271 return getTranslate(0, (i === 0 || totalInBetweenTicks % 2 !== 0) ? staggerDown : staggerUp);
|
|
paulo@89
|
8272 });
|
|
paulo@89
|
8273 }
|
|
paulo@89
|
8274
|
|
paulo@89
|
8275 if (reduceXTicks)
|
|
paulo@89
|
8276 xTicks
|
|
paulo@89
|
8277 .filter(function(d,i) {
|
|
paulo@89
|
8278 return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
|
|
paulo@89
|
8279 })
|
|
paulo@89
|
8280 .selectAll('text, line')
|
|
paulo@89
|
8281 .style('opacity', 0);
|
|
paulo@89
|
8282
|
|
paulo@89
|
8283 if(rotateLabels)
|
|
paulo@89
|
8284 xTicks
|
|
paulo@89
|
8285 .selectAll('.tick text')
|
|
paulo@89
|
8286 .attr('transform', 'rotate(' + rotateLabels + ' 0,0)')
|
|
paulo@89
|
8287 .style('text-anchor', rotateLabels > 0 ? 'start' : 'end');
|
|
paulo@89
|
8288
|
|
paulo@89
|
8289 g.select('.nv-x.nv-axis').selectAll('g.nv-axisMaxMin text')
|
|
paulo@89
|
8290 .style('opacity', 1);
|
|
paulo@89
|
8291 }
|
|
paulo@89
|
8292
|
|
paulo@89
|
8293 if (showYAxis) {
|
|
paulo@89
|
8294 yAxis
|
|
paulo@89
|
8295 .scale(y)
|
|
paulo@89
|
8296 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
8297 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
8298
|
|
paulo@89
|
8299 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
8300 .call(yAxis);
|
|
paulo@89
|
8301 }
|
|
paulo@89
|
8302
|
|
paulo@89
|
8303 //============================================================
|
|
paulo@89
|
8304 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
8305 //------------------------------------------------------------
|
|
paulo@89
|
8306
|
|
paulo@89
|
8307 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
8308 for (var key in newState)
|
|
paulo@89
|
8309 state[key] = newState[key];
|
|
paulo@89
|
8310 dispatch.stateChange(state);
|
|
paulo@89
|
8311 chart.update();
|
|
paulo@89
|
8312 });
|
|
paulo@89
|
8313
|
|
paulo@89
|
8314 controls.dispatch.on('legendClick', function(d,i) {
|
|
paulo@89
|
8315 if (!d.disabled) return;
|
|
paulo@89
|
8316 controlsData = controlsData.map(function(s) {
|
|
paulo@89
|
8317 s.disabled = true;
|
|
paulo@89
|
8318 return s;
|
|
paulo@89
|
8319 });
|
|
paulo@89
|
8320 d.disabled = false;
|
|
paulo@89
|
8321
|
|
paulo@89
|
8322 switch (d.key) {
|
|
paulo@89
|
8323 case 'Grouped':
|
|
paulo@89
|
8324 case controlLabels.grouped:
|
|
paulo@89
|
8325 multibar.stacked(false);
|
|
paulo@89
|
8326 break;
|
|
paulo@89
|
8327 case 'Stacked':
|
|
paulo@89
|
8328 case controlLabels.stacked:
|
|
paulo@89
|
8329 multibar.stacked(true);
|
|
paulo@89
|
8330 break;
|
|
paulo@89
|
8331 }
|
|
paulo@89
|
8332
|
|
paulo@89
|
8333 state.stacked = multibar.stacked();
|
|
paulo@89
|
8334 dispatch.stateChange(state);
|
|
paulo@89
|
8335 chart.update();
|
|
paulo@89
|
8336 });
|
|
paulo@89
|
8337
|
|
paulo@89
|
8338 // Update chart from a state object passed to event handler
|
|
paulo@89
|
8339 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
8340 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
8341 data.forEach(function(series,i) {
|
|
paulo@89
|
8342 series.disabled = e.disabled[i];
|
|
paulo@89
|
8343 });
|
|
paulo@89
|
8344 state.disabled = e.disabled;
|
|
paulo@89
|
8345 }
|
|
paulo@89
|
8346 if (typeof e.stacked !== 'undefined') {
|
|
paulo@89
|
8347 multibar.stacked(e.stacked);
|
|
paulo@89
|
8348 state.stacked = e.stacked;
|
|
paulo@89
|
8349 stacked = e.stacked;
|
|
paulo@89
|
8350 }
|
|
paulo@89
|
8351 chart.update();
|
|
paulo@89
|
8352 });
|
|
paulo@89
|
8353 });
|
|
paulo@89
|
8354
|
|
paulo@89
|
8355 renderWatch.renderEnd('multibarchart immediate');
|
|
paulo@89
|
8356 return chart;
|
|
paulo@89
|
8357 }
|
|
paulo@89
|
8358
|
|
paulo@89
|
8359 //============================================================
|
|
paulo@89
|
8360 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
8361 //------------------------------------------------------------
|
|
paulo@89
|
8362
|
|
paulo@89
|
8363 multibar.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
8364 evt.value = chart.x()(evt.data);
|
|
paulo@89
|
8365 evt['series'] = {
|
|
paulo@89
|
8366 key: evt.data.key,
|
|
paulo@89
|
8367 value: chart.y()(evt.data),
|
|
paulo@89
|
8368 color: evt.color
|
|
paulo@89
|
8369 };
|
|
paulo@89
|
8370 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
8371 });
|
|
paulo@89
|
8372
|
|
paulo@89
|
8373 multibar.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
8374 tooltip.hidden(true);
|
|
paulo@89
|
8375 });
|
|
paulo@89
|
8376
|
|
paulo@89
|
8377 multibar.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
8378 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
8379 });
|
|
paulo@89
|
8380
|
|
paulo@89
|
8381 //============================================================
|
|
paulo@89
|
8382 // Expose Public Variables
|
|
paulo@89
|
8383 //------------------------------------------------------------
|
|
paulo@89
|
8384
|
|
paulo@89
|
8385 // expose chart's sub-components
|
|
paulo@89
|
8386 chart.dispatch = dispatch;
|
|
paulo@89
|
8387 chart.multibar = multibar;
|
|
paulo@89
|
8388 chart.legend = legend;
|
|
paulo@89
|
8389 chart.controls = controls;
|
|
paulo@89
|
8390 chart.xAxis = xAxis;
|
|
paulo@89
|
8391 chart.yAxis = yAxis;
|
|
paulo@89
|
8392 chart.state = state;
|
|
paulo@89
|
8393 chart.tooltip = tooltip;
|
|
paulo@89
|
8394
|
|
paulo@89
|
8395 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
8396
|
|
paulo@89
|
8397 chart._options = Object.create({}, {
|
|
paulo@89
|
8398 // simple options, just get/set the necessary values
|
|
paulo@89
|
8399 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
8400 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
8401 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
8402 showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
|
|
paulo@89
|
8403 controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
|
|
paulo@89
|
8404 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
8405 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
8406 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
8407 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
8408 reduceXTicks: {get: function(){return reduceXTicks;}, set: function(_){reduceXTicks=_;}},
|
|
paulo@89
|
8409 rotateLabels: {get: function(){return rotateLabels;}, set: function(_){rotateLabels=_;}},
|
|
paulo@89
|
8410 staggerLabels: {get: function(){return staggerLabels;}, set: function(_){staggerLabels=_;}},
|
|
paulo@89
|
8411
|
|
paulo@89
|
8412 // deprecated options
|
|
paulo@89
|
8413 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
8414 // deprecated after 1.7.1
|
|
paulo@89
|
8415 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
8416 tooltip.enabled(!!_);
|
|
paulo@89
|
8417 }},
|
|
paulo@89
|
8418 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
8419 // deprecated after 1.7.1
|
|
paulo@89
|
8420 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
8421 tooltip.contentGenerator(_);
|
|
paulo@89
|
8422 }},
|
|
paulo@89
|
8423
|
|
paulo@89
|
8424 // options that require extra logic in the setter
|
|
paulo@89
|
8425 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
8426 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
8427 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
8428 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
8429 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
8430 }},
|
|
paulo@89
|
8431 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
8432 duration = _;
|
|
paulo@89
|
8433 multibar.duration(duration);
|
|
paulo@89
|
8434 xAxis.duration(duration);
|
|
paulo@89
|
8435 yAxis.duration(duration);
|
|
paulo@89
|
8436 renderWatch.reset(duration);
|
|
paulo@89
|
8437 }},
|
|
paulo@89
|
8438 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
8439 color = nv.utils.getColor(_);
|
|
paulo@89
|
8440 legend.color(color);
|
|
paulo@89
|
8441 }},
|
|
paulo@89
|
8442 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
8443 rightAlignYAxis = _;
|
|
paulo@89
|
8444 yAxis.orient( rightAlignYAxis ? 'right' : 'left');
|
|
paulo@89
|
8445 }},
|
|
paulo@89
|
8446 barColor: {get: function(){return multibar.barColor;}, set: function(_){
|
|
paulo@89
|
8447 multibar.barColor(_);
|
|
paulo@89
|
8448 legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})
|
|
paulo@89
|
8449 }}
|
|
paulo@89
|
8450 });
|
|
paulo@89
|
8451
|
|
paulo@89
|
8452 nv.utils.inheritOptions(chart, multibar);
|
|
paulo@89
|
8453 nv.utils.initOptions(chart);
|
|
paulo@89
|
8454
|
|
paulo@89
|
8455 return chart;
|
|
paulo@89
|
8456 };
|
|
paulo@89
|
8457
|
|
paulo@89
|
8458 nv.models.multiBarHorizontal = function() {
|
|
paulo@89
|
8459 "use strict";
|
|
paulo@89
|
8460
|
|
paulo@89
|
8461 //============================================================
|
|
paulo@89
|
8462 // Public Variables with Default Settings
|
|
paulo@89
|
8463 //------------------------------------------------------------
|
|
paulo@89
|
8464
|
|
paulo@89
|
8465 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
8466 , width = 960
|
|
paulo@89
|
8467 , height = 500
|
|
paulo@89
|
8468 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
8469 , container = null
|
|
paulo@89
|
8470 , x = d3.scale.ordinal()
|
|
paulo@89
|
8471 , y = d3.scale.linear()
|
|
paulo@89
|
8472 , getX = function(d) { return d.x }
|
|
paulo@89
|
8473 , getY = function(d) { return d.y }
|
|
paulo@89
|
8474 , getYerr = function(d) { return d.yErr }
|
|
paulo@89
|
8475 , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
|
|
paulo@89
|
8476 , color = nv.utils.defaultColor()
|
|
paulo@89
|
8477 , barColor = null // adding the ability to set the color for each rather than the whole group
|
|
paulo@89
|
8478 , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
|
|
paulo@89
|
8479 , stacked = false
|
|
paulo@89
|
8480 , showValues = false
|
|
paulo@89
|
8481 , showBarLabels = false
|
|
paulo@89
|
8482 , valuePadding = 60
|
|
paulo@89
|
8483 , groupSpacing = 0.1
|
|
paulo@89
|
8484 , valueFormat = d3.format(',.2f')
|
|
paulo@89
|
8485 , delay = 1200
|
|
paulo@89
|
8486 , xDomain
|
|
paulo@89
|
8487 , yDomain
|
|
paulo@89
|
8488 , xRange
|
|
paulo@89
|
8489 , yRange
|
|
paulo@89
|
8490 , duration = 250
|
|
paulo@89
|
8491 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
8492 ;
|
|
paulo@89
|
8493
|
|
paulo@89
|
8494 //============================================================
|
|
paulo@89
|
8495 // Private Variables
|
|
paulo@89
|
8496 //------------------------------------------------------------
|
|
paulo@89
|
8497
|
|
paulo@89
|
8498 var x0, y0; //used to store previous scales
|
|
paulo@89
|
8499 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
8500
|
|
paulo@89
|
8501 function chart(selection) {
|
|
paulo@89
|
8502 renderWatch.reset();
|
|
paulo@89
|
8503 selection.each(function(data) {
|
|
paulo@89
|
8504 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
8505 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
8506
|
|
paulo@89
|
8507 container = d3.select(this);
|
|
paulo@89
|
8508 nv.utils.initSVG(container);
|
|
paulo@89
|
8509
|
|
paulo@89
|
8510 if (stacked)
|
|
paulo@89
|
8511 data = d3.layout.stack()
|
|
paulo@89
|
8512 .offset('zero')
|
|
paulo@89
|
8513 .values(function(d){ return d.values })
|
|
paulo@89
|
8514 .y(getY)
|
|
paulo@89
|
8515 (data);
|
|
paulo@89
|
8516
|
|
paulo@89
|
8517 //add series index and key to each data point for reference
|
|
paulo@89
|
8518 data.forEach(function(series, i) {
|
|
paulo@89
|
8519 series.values.forEach(function(point) {
|
|
paulo@89
|
8520 point.series = i;
|
|
paulo@89
|
8521 point.key = series.key;
|
|
paulo@89
|
8522 });
|
|
paulo@89
|
8523 });
|
|
paulo@89
|
8524
|
|
paulo@89
|
8525 // HACK for negative value stacking
|
|
paulo@89
|
8526 if (stacked)
|
|
paulo@89
|
8527 data[0].values.map(function(d,i) {
|
|
paulo@89
|
8528 var posBase = 0, negBase = 0;
|
|
paulo@89
|
8529 data.map(function(d) {
|
|
paulo@89
|
8530 var f = d.values[i]
|
|
paulo@89
|
8531 f.size = Math.abs(f.y);
|
|
paulo@89
|
8532 if (f.y<0) {
|
|
paulo@89
|
8533 f.y1 = negBase - f.size;
|
|
paulo@89
|
8534 negBase = negBase - f.size;
|
|
paulo@89
|
8535 } else
|
|
paulo@89
|
8536 {
|
|
paulo@89
|
8537 f.y1 = posBase;
|
|
paulo@89
|
8538 posBase = posBase + f.size;
|
|
paulo@89
|
8539 }
|
|
paulo@89
|
8540 });
|
|
paulo@89
|
8541 });
|
|
paulo@89
|
8542
|
|
paulo@89
|
8543 // Setup Scales
|
|
paulo@89
|
8544 // remap and flatten the data for use in calculating the scales' domains
|
|
paulo@89
|
8545 var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
|
|
paulo@89
|
8546 data.map(function(d) {
|
|
paulo@89
|
8547 return d.values.map(function(d,i) {
|
|
paulo@89
|
8548 return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }
|
|
paulo@89
|
8549 })
|
|
paulo@89
|
8550 });
|
|
paulo@89
|
8551
|
|
paulo@89
|
8552 x.domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
|
|
paulo@89
|
8553 .rangeBands(xRange || [0, availableHeight], groupSpacing);
|
|
paulo@89
|
8554
|
|
paulo@89
|
8555 y.domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 + d.y : d.y1 ) : d.y }).concat(forceY)))
|
|
paulo@89
|
8556
|
|
paulo@89
|
8557 if (showValues && !stacked)
|
|
paulo@89
|
8558 y.range(yRange || [(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
|
|
paulo@89
|
8559 else
|
|
paulo@89
|
8560 y.range(yRange || [0, availableWidth]);
|
|
paulo@89
|
8561
|
|
paulo@89
|
8562 x0 = x0 || x;
|
|
paulo@89
|
8563 y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
|
|
paulo@89
|
8564
|
|
paulo@89
|
8565 // Setup containers and skeleton of chart
|
|
paulo@89
|
8566 var wrap = d3.select(this).selectAll('g.nv-wrap.nv-multibarHorizontal').data([data]);
|
|
paulo@89
|
8567 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibarHorizontal');
|
|
paulo@89
|
8568 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
8569 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
8570 var g = wrap.select('g');
|
|
paulo@89
|
8571
|
|
paulo@89
|
8572 gEnter.append('g').attr('class', 'nv-groups');
|
|
paulo@89
|
8573 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
8574
|
|
paulo@89
|
8575 var groups = wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
8576 .data(function(d) { return d }, function(d,i) { return i });
|
|
paulo@89
|
8577 groups.enter().append('g')
|
|
paulo@89
|
8578 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
8579 .style('fill-opacity', 1e-6);
|
|
paulo@89
|
8580 groups.exit().watchTransition(renderWatch, 'multibarhorizontal: exit groups')
|
|
paulo@89
|
8581 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
8582 .style('fill-opacity', 1e-6)
|
|
paulo@89
|
8583 .remove();
|
|
paulo@89
|
8584 groups
|
|
paulo@89
|
8585 .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
|
|
paulo@89
|
8586 .classed('hover', function(d) { return d.hover })
|
|
paulo@89
|
8587 .style('fill', function(d,i){ return color(d, i) })
|
|
paulo@89
|
8588 .style('stroke', function(d,i){ return color(d, i) });
|
|
paulo@89
|
8589 groups.watchTransition(renderWatch, 'multibarhorizontal: groups')
|
|
paulo@89
|
8590 .style('stroke-opacity', 1)
|
|
paulo@89
|
8591 .style('fill-opacity', .75);
|
|
paulo@89
|
8592
|
|
paulo@89
|
8593 var bars = groups.selectAll('g.nv-bar')
|
|
paulo@89
|
8594 .data(function(d) { return d.values });
|
|
paulo@89
|
8595 bars.exit().remove();
|
|
paulo@89
|
8596
|
|
paulo@89
|
8597 var barsEnter = bars.enter().append('g')
|
|
paulo@89
|
8598 .attr('transform', function(d,i,j) {
|
|
paulo@89
|
8599 return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
|
|
paulo@89
|
8600 });
|
|
paulo@89
|
8601
|
|
paulo@89
|
8602 barsEnter.append('rect')
|
|
paulo@89
|
8603 .attr('width', 0)
|
|
paulo@89
|
8604 .attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
|
|
paulo@89
|
8605
|
|
paulo@89
|
8606 bars
|
|
paulo@89
|
8607 .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
|
|
paulo@89
|
8608 d3.select(this).classed('hover', true);
|
|
paulo@89
|
8609 dispatch.elementMouseover({
|
|
paulo@89
|
8610 data: d,
|
|
paulo@89
|
8611 index: i,
|
|
paulo@89
|
8612 color: d3.select(this).style("fill")
|
|
paulo@89
|
8613 });
|
|
paulo@89
|
8614 })
|
|
paulo@89
|
8615 .on('mouseout', function(d,i) {
|
|
paulo@89
|
8616 d3.select(this).classed('hover', false);
|
|
paulo@89
|
8617 dispatch.elementMouseout({
|
|
paulo@89
|
8618 data: d,
|
|
paulo@89
|
8619 index: i,
|
|
paulo@89
|
8620 color: d3.select(this).style("fill")
|
|
paulo@89
|
8621 });
|
|
paulo@89
|
8622 })
|
|
paulo@89
|
8623 .on('mouseout', function(d,i) {
|
|
paulo@89
|
8624 dispatch.elementMouseout({
|
|
paulo@89
|
8625 data: d,
|
|
paulo@89
|
8626 index: i,
|
|
paulo@89
|
8627 color: d3.select(this).style("fill")
|
|
paulo@89
|
8628 });
|
|
paulo@89
|
8629 })
|
|
paulo@89
|
8630 .on('mousemove', function(d,i) {
|
|
paulo@89
|
8631 dispatch.elementMousemove({
|
|
paulo@89
|
8632 data: d,
|
|
paulo@89
|
8633 index: i,
|
|
paulo@89
|
8634 color: d3.select(this).style("fill")
|
|
paulo@89
|
8635 });
|
|
paulo@89
|
8636 })
|
|
paulo@89
|
8637 .on('click', function(d,i) {
|
|
paulo@89
|
8638 dispatch.elementClick({
|
|
paulo@89
|
8639 data: d,
|
|
paulo@89
|
8640 index: i,
|
|
paulo@89
|
8641 color: d3.select(this).style("fill")
|
|
paulo@89
|
8642 });
|
|
paulo@89
|
8643 d3.event.stopPropagation();
|
|
paulo@89
|
8644 })
|
|
paulo@89
|
8645 .on('dblclick', function(d,i) {
|
|
paulo@89
|
8646 dispatch.elementDblClick({
|
|
paulo@89
|
8647 data: d,
|
|
paulo@89
|
8648 index: i,
|
|
paulo@89
|
8649 color: d3.select(this).style("fill")
|
|
paulo@89
|
8650 });
|
|
paulo@89
|
8651 d3.event.stopPropagation();
|
|
paulo@89
|
8652 });
|
|
paulo@89
|
8653
|
|
paulo@89
|
8654 if (getYerr(data[0],0)) {
|
|
paulo@89
|
8655 barsEnter.append('polyline');
|
|
paulo@89
|
8656
|
|
paulo@89
|
8657 bars.select('polyline')
|
|
paulo@89
|
8658 .attr('fill', 'none')
|
|
paulo@89
|
8659 .attr('points', function(d,i) {
|
|
paulo@89
|
8660 var xerr = getYerr(d,i)
|
|
paulo@89
|
8661 , mid = 0.8 * x.rangeBand() / ((stacked ? 1 : data.length) * 2);
|
|
paulo@89
|
8662 xerr = xerr.length ? xerr : [-Math.abs(xerr), Math.abs(xerr)];
|
|
paulo@89
|
8663 xerr = xerr.map(function(e) { return y(e) - y(0); });
|
|
paulo@89
|
8664 var a = [[xerr[0],-mid], [xerr[0],mid], [xerr[0],0], [xerr[1],0], [xerr[1],-mid], [xerr[1],mid]];
|
|
paulo@89
|
8665 return a.map(function (path) { return path.join(',') }).join(' ');
|
|
paulo@89
|
8666 })
|
|
paulo@89
|
8667 .attr('transform', function(d,i) {
|
|
paulo@89
|
8668 var mid = x.rangeBand() / ((stacked ? 1 : data.length) * 2);
|
|
paulo@89
|
8669 return 'translate(' + (getY(d,i) < 0 ? 0 : y(getY(d,i)) - y(0)) + ', ' + mid + ')'
|
|
paulo@89
|
8670 });
|
|
paulo@89
|
8671 }
|
|
paulo@89
|
8672
|
|
paulo@89
|
8673 barsEnter.append('text');
|
|
paulo@89
|
8674
|
|
paulo@89
|
8675 if (showValues && !stacked) {
|
|
paulo@89
|
8676 bars.select('text')
|
|
paulo@89
|
8677 .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
|
|
paulo@89
|
8678 .attr('y', x.rangeBand() / (data.length * 2))
|
|
paulo@89
|
8679 .attr('dy', '.32em')
|
|
paulo@89
|
8680 .text(function(d,i) {
|
|
paulo@89
|
8681 var t = valueFormat(getY(d,i))
|
|
paulo@89
|
8682 , yerr = getYerr(d,i);
|
|
paulo@89
|
8683 if (yerr === undefined)
|
|
paulo@89
|
8684 return t;
|
|
paulo@89
|
8685 if (!yerr.length)
|
|
paulo@89
|
8686 return t + '±' + valueFormat(Math.abs(yerr));
|
|
paulo@89
|
8687 return t + '+' + valueFormat(Math.abs(yerr[1])) + '-' + valueFormat(Math.abs(yerr[0]));
|
|
paulo@89
|
8688 });
|
|
paulo@89
|
8689 bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
|
|
paulo@89
|
8690 .select('text')
|
|
paulo@89
|
8691 .attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
|
|
paulo@89
|
8692 } else {
|
|
paulo@89
|
8693 bars.selectAll('text').text('');
|
|
paulo@89
|
8694 }
|
|
paulo@89
|
8695
|
|
paulo@89
|
8696 if (showBarLabels && !stacked) {
|
|
paulo@89
|
8697 barsEnter.append('text').classed('nv-bar-label',true);
|
|
paulo@89
|
8698 bars.select('text.nv-bar-label')
|
|
paulo@89
|
8699 .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'start' : 'end' })
|
|
paulo@89
|
8700 .attr('y', x.rangeBand() / (data.length * 2))
|
|
paulo@89
|
8701 .attr('dy', '.32em')
|
|
paulo@89
|
8702 .text(function(d,i) { return getX(d,i) });
|
|
paulo@89
|
8703 bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
|
|
paulo@89
|
8704 .select('text.nv-bar-label')
|
|
paulo@89
|
8705 .attr('x', function(d,i) { return getY(d,i) < 0 ? y(0) - y(getY(d,i)) + 4 : -4 });
|
|
paulo@89
|
8706 }
|
|
paulo@89
|
8707 else {
|
|
paulo@89
|
8708 bars.selectAll('text.nv-bar-label').text('');
|
|
paulo@89
|
8709 }
|
|
paulo@89
|
8710
|
|
paulo@89
|
8711 bars
|
|
paulo@89
|
8712 .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
|
|
paulo@89
|
8713
|
|
paulo@89
|
8714 if (barColor) {
|
|
paulo@89
|
8715 if (!disabled) disabled = data.map(function() { return true });
|
|
paulo@89
|
8716 bars
|
|
paulo@89
|
8717 .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); })
|
|
paulo@89
|
8718 .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker( disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i] })[j] ).toString(); });
|
|
paulo@89
|
8719 }
|
|
paulo@89
|
8720
|
|
paulo@89
|
8721 if (stacked)
|
|
paulo@89
|
8722 bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
|
|
paulo@89
|
8723 .attr('transform', function(d,i) {
|
|
paulo@89
|
8724 return 'translate(' + y(d.y1) + ',' + x(getX(d,i)) + ')'
|
|
paulo@89
|
8725 })
|
|
paulo@89
|
8726 .select('rect')
|
|
paulo@89
|
8727 .attr('width', function(d,i) {
|
|
paulo@89
|
8728 return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
|
|
paulo@89
|
8729 })
|
|
paulo@89
|
8730 .attr('height', x.rangeBand() );
|
|
paulo@89
|
8731 else
|
|
paulo@89
|
8732 bars.watchTransition(renderWatch, 'multibarhorizontal: bars')
|
|
paulo@89
|
8733 .attr('transform', function(d,i) {
|
|
paulo@89
|
8734 //TODO: stacked must be all positive or all negative, not both?
|
|
paulo@89
|
8735 return 'translate(' +
|
|
paulo@89
|
8736 (getY(d,i) < 0 ? y(getY(d,i)) : y(0))
|
|
paulo@89
|
8737 + ',' +
|
|
paulo@89
|
8738 (d.series * x.rangeBand() / data.length
|
|
paulo@89
|
8739 +
|
|
paulo@89
|
8740 x(getX(d,i)) )
|
|
paulo@89
|
8741 + ')'
|
|
paulo@89
|
8742 })
|
|
paulo@89
|
8743 .select('rect')
|
|
paulo@89
|
8744 .attr('height', x.rangeBand() / data.length )
|
|
paulo@89
|
8745 .attr('width', function(d,i) {
|
|
paulo@89
|
8746 return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
|
|
paulo@89
|
8747 });
|
|
paulo@89
|
8748
|
|
paulo@89
|
8749 //store old scales for use in transitions on update
|
|
paulo@89
|
8750 x0 = x.copy();
|
|
paulo@89
|
8751 y0 = y.copy();
|
|
paulo@89
|
8752
|
|
paulo@89
|
8753 });
|
|
paulo@89
|
8754
|
|
paulo@89
|
8755 renderWatch.renderEnd('multibarHorizontal immediate');
|
|
paulo@89
|
8756 return chart;
|
|
paulo@89
|
8757 }
|
|
paulo@89
|
8758
|
|
paulo@89
|
8759 //============================================================
|
|
paulo@89
|
8760 // Expose Public Variables
|
|
paulo@89
|
8761 //------------------------------------------------------------
|
|
paulo@89
|
8762
|
|
paulo@89
|
8763 chart.dispatch = dispatch;
|
|
paulo@89
|
8764
|
|
paulo@89
|
8765 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
8766
|
|
paulo@89
|
8767 chart._options = Object.create({}, {
|
|
paulo@89
|
8768 // simple options, just get/set the necessary values
|
|
paulo@89
|
8769 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
8770 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
8771 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
8772 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
8773 yErr: {get: function(){return getYerr;}, set: function(_){getYerr=_;}},
|
|
paulo@89
|
8774 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
8775 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
8776 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
8777 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
8778 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
8779 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
8780 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
8781 stacked: {get: function(){return stacked;}, set: function(_){stacked=_;}},
|
|
paulo@89
|
8782 showValues: {get: function(){return showValues;}, set: function(_){showValues=_;}},
|
|
paulo@89
|
8783 // this shows the group name, seems pointless?
|
|
paulo@89
|
8784 //showBarLabels: {get: function(){return showBarLabels;}, set: function(_){showBarLabels=_;}},
|
|
paulo@89
|
8785 disabled: {get: function(){return disabled;}, set: function(_){disabled=_;}},
|
|
paulo@89
|
8786 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
8787 valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
|
|
paulo@89
|
8788 valuePadding: {get: function(){return valuePadding;}, set: function(_){valuePadding=_;}},
|
|
paulo@89
|
8789 groupSpacing:{get: function(){return groupSpacing;}, set: function(_){groupSpacing=_;}},
|
|
paulo@89
|
8790
|
|
paulo@89
|
8791 // options that require extra logic in the setter
|
|
paulo@89
|
8792 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
8793 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
8794 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
8795 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
8796 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
8797 }},
|
|
paulo@89
|
8798 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
8799 duration = _;
|
|
paulo@89
|
8800 renderWatch.reset(duration);
|
|
paulo@89
|
8801 }},
|
|
paulo@89
|
8802 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
8803 color = nv.utils.getColor(_);
|
|
paulo@89
|
8804 }},
|
|
paulo@89
|
8805 barColor: {get: function(){return barColor;}, set: function(_){
|
|
paulo@89
|
8806 barColor = _ ? nv.utils.getColor(_) : null;
|
|
paulo@89
|
8807 }}
|
|
paulo@89
|
8808 });
|
|
paulo@89
|
8809
|
|
paulo@89
|
8810 nv.utils.initOptions(chart);
|
|
paulo@89
|
8811
|
|
paulo@89
|
8812 return chart;
|
|
paulo@89
|
8813 };
|
|
paulo@89
|
8814
|
|
paulo@89
|
8815 nv.models.multiBarHorizontalChart = function() {
|
|
paulo@89
|
8816 "use strict";
|
|
paulo@89
|
8817
|
|
paulo@89
|
8818 //============================================================
|
|
paulo@89
|
8819 // Public Variables with Default Settings
|
|
paulo@89
|
8820 //------------------------------------------------------------
|
|
paulo@89
|
8821
|
|
paulo@89
|
8822 var multibar = nv.models.multiBarHorizontal()
|
|
paulo@89
|
8823 , xAxis = nv.models.axis()
|
|
paulo@89
|
8824 , yAxis = nv.models.axis()
|
|
paulo@89
|
8825 , legend = nv.models.legend().height(30)
|
|
paulo@89
|
8826 , controls = nv.models.legend().height(30)
|
|
paulo@89
|
8827 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
8828 ;
|
|
paulo@89
|
8829
|
|
paulo@89
|
8830 var margin = {top: 30, right: 20, bottom: 50, left: 60}
|
|
paulo@89
|
8831 , width = null
|
|
paulo@89
|
8832 , height = null
|
|
paulo@89
|
8833 , color = nv.utils.defaultColor()
|
|
paulo@89
|
8834 , showControls = true
|
|
paulo@89
|
8835 , controlLabels = {}
|
|
paulo@89
|
8836 , showLegend = true
|
|
paulo@89
|
8837 , showXAxis = true
|
|
paulo@89
|
8838 , showYAxis = true
|
|
paulo@89
|
8839 , stacked = false
|
|
paulo@89
|
8840 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
8841 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
8842 , state = nv.utils.state()
|
|
paulo@89
|
8843 , defaultState = null
|
|
paulo@89
|
8844 , noData = null
|
|
paulo@89
|
8845 , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
|
|
paulo@89
|
8846 , controlWidth = function() { return showControls ? 180 : 0 }
|
|
paulo@89
|
8847 , duration = 250
|
|
paulo@89
|
8848 ;
|
|
paulo@89
|
8849
|
|
paulo@89
|
8850 state.stacked = false; // DEPRECATED Maintained for backward compatibility
|
|
paulo@89
|
8851
|
|
paulo@89
|
8852 multibar.stacked(stacked);
|
|
paulo@89
|
8853
|
|
paulo@89
|
8854 xAxis
|
|
paulo@89
|
8855 .orient('left')
|
|
paulo@89
|
8856 .tickPadding(5)
|
|
paulo@89
|
8857 .showMaxMin(false)
|
|
paulo@89
|
8858 .tickFormat(function(d) { return d })
|
|
paulo@89
|
8859 ;
|
|
paulo@89
|
8860 yAxis
|
|
paulo@89
|
8861 .orient('bottom')
|
|
paulo@89
|
8862 .tickFormat(d3.format(',.1f'))
|
|
paulo@89
|
8863 ;
|
|
paulo@89
|
8864
|
|
paulo@89
|
8865 tooltip
|
|
paulo@89
|
8866 .duration(0)
|
|
paulo@89
|
8867 .valueFormatter(function(d, i) {
|
|
paulo@89
|
8868 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
8869 })
|
|
paulo@89
|
8870 .headerFormatter(function(d, i) {
|
|
paulo@89
|
8871 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
8872 });
|
|
paulo@89
|
8873
|
|
paulo@89
|
8874 controls.updateState(false);
|
|
paulo@89
|
8875
|
|
paulo@89
|
8876 //============================================================
|
|
paulo@89
|
8877 // Private Variables
|
|
paulo@89
|
8878 //------------------------------------------------------------
|
|
paulo@89
|
8879
|
|
paulo@89
|
8880 var stateGetter = function(data) {
|
|
paulo@89
|
8881 return function(){
|
|
paulo@89
|
8882 return {
|
|
paulo@89
|
8883 active: data.map(function(d) { return !d.disabled }),
|
|
paulo@89
|
8884 stacked: stacked
|
|
paulo@89
|
8885 };
|
|
paulo@89
|
8886 }
|
|
paulo@89
|
8887 };
|
|
paulo@89
|
8888
|
|
paulo@89
|
8889 var stateSetter = function(data) {
|
|
paulo@89
|
8890 return function(state) {
|
|
paulo@89
|
8891 if (state.stacked !== undefined)
|
|
paulo@89
|
8892 stacked = state.stacked;
|
|
paulo@89
|
8893 if (state.active !== undefined)
|
|
paulo@89
|
8894 data.forEach(function(series,i) {
|
|
paulo@89
|
8895 series.disabled = !state.active[i];
|
|
paulo@89
|
8896 });
|
|
paulo@89
|
8897 }
|
|
paulo@89
|
8898 };
|
|
paulo@89
|
8899
|
|
paulo@89
|
8900 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
8901
|
|
paulo@89
|
8902 function chart(selection) {
|
|
paulo@89
|
8903 renderWatch.reset();
|
|
paulo@89
|
8904 renderWatch.models(multibar);
|
|
paulo@89
|
8905 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
8906 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
8907
|
|
paulo@89
|
8908 selection.each(function(data) {
|
|
paulo@89
|
8909 var container = d3.select(this),
|
|
paulo@89
|
8910 that = this;
|
|
paulo@89
|
8911 nv.utils.initSVG(container);
|
|
paulo@89
|
8912 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
8913 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
8914
|
|
paulo@89
|
8915 chart.update = function() { container.transition().duration(duration).call(chart) };
|
|
paulo@89
|
8916 chart.container = this;
|
|
paulo@89
|
8917
|
|
paulo@89
|
8918 stacked = multibar.stacked();
|
|
paulo@89
|
8919
|
|
paulo@89
|
8920 state
|
|
paulo@89
|
8921 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
8922 .getter(stateGetter(data))
|
|
paulo@89
|
8923 .update();
|
|
paulo@89
|
8924
|
|
paulo@89
|
8925 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
8926 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
8927
|
|
paulo@89
|
8928 if (!defaultState) {
|
|
paulo@89
|
8929 var key;
|
|
paulo@89
|
8930 defaultState = {};
|
|
paulo@89
|
8931 for (key in state) {
|
|
paulo@89
|
8932 if (state[key] instanceof Array)
|
|
paulo@89
|
8933 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
8934 else
|
|
paulo@89
|
8935 defaultState[key] = state[key];
|
|
paulo@89
|
8936 }
|
|
paulo@89
|
8937 }
|
|
paulo@89
|
8938
|
|
paulo@89
|
8939 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
8940 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
8941 nv.utils.noData(chart, container)
|
|
paulo@89
|
8942 return chart;
|
|
paulo@89
|
8943 } else {
|
|
paulo@89
|
8944 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
8945 }
|
|
paulo@89
|
8946
|
|
paulo@89
|
8947 // Setup Scales
|
|
paulo@89
|
8948 x = multibar.xScale();
|
|
paulo@89
|
8949 y = multibar.yScale();
|
|
paulo@89
|
8950
|
|
paulo@89
|
8951 // Setup containers and skeleton of chart
|
|
paulo@89
|
8952 var wrap = container.selectAll('g.nv-wrap.nv-multiBarHorizontalChart').data([data]);
|
|
paulo@89
|
8953 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarHorizontalChart').append('g');
|
|
paulo@89
|
8954 var g = wrap.select('g');
|
|
paulo@89
|
8955
|
|
paulo@89
|
8956 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
8957 gEnter.append('g').attr('class', 'nv-y nv-axis')
|
|
paulo@89
|
8958 .append('g').attr('class', 'nv-zeroLine')
|
|
paulo@89
|
8959 .append('line');
|
|
paulo@89
|
8960 gEnter.append('g').attr('class', 'nv-barsWrap');
|
|
paulo@89
|
8961 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
8962 gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
paulo@89
|
8963
|
|
paulo@89
|
8964 // Legend
|
|
paulo@89
|
8965 if (showLegend) {
|
|
paulo@89
|
8966 legend.width(availableWidth - controlWidth());
|
|
paulo@89
|
8967
|
|
paulo@89
|
8968 g.select('.nv-legendWrap')
|
|
paulo@89
|
8969 .datum(data)
|
|
paulo@89
|
8970 .call(legend);
|
|
paulo@89
|
8971
|
|
paulo@89
|
8972 if ( margin.top != legend.height()) {
|
|
paulo@89
|
8973 margin.top = legend.height();
|
|
paulo@89
|
8974 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
8975 }
|
|
paulo@89
|
8976
|
|
paulo@89
|
8977 g.select('.nv-legendWrap')
|
|
paulo@89
|
8978 .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');
|
|
paulo@89
|
8979 }
|
|
paulo@89
|
8980
|
|
paulo@89
|
8981 // Controls
|
|
paulo@89
|
8982 if (showControls) {
|
|
paulo@89
|
8983 var controlsData = [
|
|
paulo@89
|
8984 { key: controlLabels.grouped || 'Grouped', disabled: multibar.stacked() },
|
|
paulo@89
|
8985 { key: controlLabels.stacked || 'Stacked', disabled: !multibar.stacked() }
|
|
paulo@89
|
8986 ];
|
|
paulo@89
|
8987
|
|
paulo@89
|
8988 controls.width(controlWidth()).color(['#444', '#444', '#444']);
|
|
paulo@89
|
8989 g.select('.nv-controlsWrap')
|
|
paulo@89
|
8990 .datum(controlsData)
|
|
paulo@89
|
8991 .attr('transform', 'translate(0,' + (-margin.top) +')')
|
|
paulo@89
|
8992 .call(controls);
|
|
paulo@89
|
8993 }
|
|
paulo@89
|
8994
|
|
paulo@89
|
8995 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
8996
|
|
paulo@89
|
8997 // Main Chart Component(s)
|
|
paulo@89
|
8998 multibar
|
|
paulo@89
|
8999 .disabled(data.map(function(series) { return series.disabled }))
|
|
paulo@89
|
9000 .width(availableWidth)
|
|
paulo@89
|
9001 .height(availableHeight)
|
|
paulo@89
|
9002 .color(data.map(function(d,i) {
|
|
paulo@89
|
9003 return d.color || color(d, i);
|
|
paulo@89
|
9004 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
9005
|
|
paulo@89
|
9006 var barsWrap = g.select('.nv-barsWrap')
|
|
paulo@89
|
9007 .datum(data.filter(function(d) { return !d.disabled }));
|
|
paulo@89
|
9008
|
|
paulo@89
|
9009 barsWrap.transition().call(multibar);
|
|
paulo@89
|
9010
|
|
paulo@89
|
9011 // Setup Axes
|
|
paulo@89
|
9012 if (showXAxis) {
|
|
paulo@89
|
9013 xAxis
|
|
paulo@89
|
9014 .scale(x)
|
|
paulo@89
|
9015 ._ticks( nv.utils.calcTicksY(availableHeight/24, data) )
|
|
paulo@89
|
9016 .tickSize(-availableWidth, 0);
|
|
paulo@89
|
9017
|
|
paulo@89
|
9018 g.select('.nv-x.nv-axis').call(xAxis);
|
|
paulo@89
|
9019
|
|
paulo@89
|
9020 var xTicks = g.select('.nv-x.nv-axis').selectAll('g');
|
|
paulo@89
|
9021
|
|
paulo@89
|
9022 xTicks
|
|
paulo@89
|
9023 .selectAll('line, text');
|
|
paulo@89
|
9024 }
|
|
paulo@89
|
9025
|
|
paulo@89
|
9026 if (showYAxis) {
|
|
paulo@89
|
9027 yAxis
|
|
paulo@89
|
9028 .scale(y)
|
|
paulo@89
|
9029 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
9030 .tickSize( -availableHeight, 0);
|
|
paulo@89
|
9031
|
|
paulo@89
|
9032 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
9033 .attr('transform', 'translate(0,' + availableHeight + ')');
|
|
paulo@89
|
9034 g.select('.nv-y.nv-axis').call(yAxis);
|
|
paulo@89
|
9035 }
|
|
paulo@89
|
9036
|
|
paulo@89
|
9037 // Zero line
|
|
paulo@89
|
9038 g.select(".nv-zeroLine line")
|
|
paulo@89
|
9039 .attr("x1", y(0))
|
|
paulo@89
|
9040 .attr("x2", y(0))
|
|
paulo@89
|
9041 .attr("y1", 0)
|
|
paulo@89
|
9042 .attr("y2", -availableHeight)
|
|
paulo@89
|
9043 ;
|
|
paulo@89
|
9044
|
|
paulo@89
|
9045 //============================================================
|
|
paulo@89
|
9046 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
9047 //------------------------------------------------------------
|
|
paulo@89
|
9048
|
|
paulo@89
|
9049 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
9050 for (var key in newState)
|
|
paulo@89
|
9051 state[key] = newState[key];
|
|
paulo@89
|
9052 dispatch.stateChange(state);
|
|
paulo@89
|
9053 chart.update();
|
|
paulo@89
|
9054 });
|
|
paulo@89
|
9055
|
|
paulo@89
|
9056 controls.dispatch.on('legendClick', function(d,i) {
|
|
paulo@89
|
9057 if (!d.disabled) return;
|
|
paulo@89
|
9058 controlsData = controlsData.map(function(s) {
|
|
paulo@89
|
9059 s.disabled = true;
|
|
paulo@89
|
9060 return s;
|
|
paulo@89
|
9061 });
|
|
paulo@89
|
9062 d.disabled = false;
|
|
paulo@89
|
9063
|
|
paulo@89
|
9064 switch (d.key) {
|
|
paulo@89
|
9065 case 'Grouped':
|
|
paulo@89
|
9066 multibar.stacked(false);
|
|
paulo@89
|
9067 break;
|
|
paulo@89
|
9068 case 'Stacked':
|
|
paulo@89
|
9069 multibar.stacked(true);
|
|
paulo@89
|
9070 break;
|
|
paulo@89
|
9071 }
|
|
paulo@89
|
9072
|
|
paulo@89
|
9073 state.stacked = multibar.stacked();
|
|
paulo@89
|
9074 dispatch.stateChange(state);
|
|
paulo@89
|
9075 stacked = multibar.stacked();
|
|
paulo@89
|
9076
|
|
paulo@89
|
9077 chart.update();
|
|
paulo@89
|
9078 });
|
|
paulo@89
|
9079
|
|
paulo@89
|
9080 // Update chart from a state object passed to event handler
|
|
paulo@89
|
9081 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
9082
|
|
paulo@89
|
9083 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
9084 data.forEach(function(series,i) {
|
|
paulo@89
|
9085 series.disabled = e.disabled[i];
|
|
paulo@89
|
9086 });
|
|
paulo@89
|
9087
|
|
paulo@89
|
9088 state.disabled = e.disabled;
|
|
paulo@89
|
9089 }
|
|
paulo@89
|
9090
|
|
paulo@89
|
9091 if (typeof e.stacked !== 'undefined') {
|
|
paulo@89
|
9092 multibar.stacked(e.stacked);
|
|
paulo@89
|
9093 state.stacked = e.stacked;
|
|
paulo@89
|
9094 stacked = e.stacked;
|
|
paulo@89
|
9095 }
|
|
paulo@89
|
9096
|
|
paulo@89
|
9097 chart.update();
|
|
paulo@89
|
9098 });
|
|
paulo@89
|
9099 });
|
|
paulo@89
|
9100 renderWatch.renderEnd('multibar horizontal chart immediate');
|
|
paulo@89
|
9101 return chart;
|
|
paulo@89
|
9102 }
|
|
paulo@89
|
9103
|
|
paulo@89
|
9104 //============================================================
|
|
paulo@89
|
9105 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
9106 //------------------------------------------------------------
|
|
paulo@89
|
9107
|
|
paulo@89
|
9108 multibar.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
9109 evt.value = chart.x()(evt.data);
|
|
paulo@89
|
9110 evt['series'] = {
|
|
paulo@89
|
9111 key: evt.data.key,
|
|
paulo@89
|
9112 value: chart.y()(evt.data),
|
|
paulo@89
|
9113 color: evt.color
|
|
paulo@89
|
9114 };
|
|
paulo@89
|
9115 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
9116 });
|
|
paulo@89
|
9117
|
|
paulo@89
|
9118 multibar.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9119 tooltip.hidden(true);
|
|
paulo@89
|
9120 });
|
|
paulo@89
|
9121
|
|
paulo@89
|
9122 multibar.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
9123 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
9124 });
|
|
paulo@89
|
9125
|
|
paulo@89
|
9126 //============================================================
|
|
paulo@89
|
9127 // Expose Public Variables
|
|
paulo@89
|
9128 //------------------------------------------------------------
|
|
paulo@89
|
9129
|
|
paulo@89
|
9130 // expose chart's sub-components
|
|
paulo@89
|
9131 chart.dispatch = dispatch;
|
|
paulo@89
|
9132 chart.multibar = multibar;
|
|
paulo@89
|
9133 chart.legend = legend;
|
|
paulo@89
|
9134 chart.controls = controls;
|
|
paulo@89
|
9135 chart.xAxis = xAxis;
|
|
paulo@89
|
9136 chart.yAxis = yAxis;
|
|
paulo@89
|
9137 chart.state = state;
|
|
paulo@89
|
9138 chart.tooltip = tooltip;
|
|
paulo@89
|
9139
|
|
paulo@89
|
9140 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
9141
|
|
paulo@89
|
9142 chart._options = Object.create({}, {
|
|
paulo@89
|
9143 // simple options, just get/set the necessary values
|
|
paulo@89
|
9144 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
9145 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
9146 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
9147 showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
|
|
paulo@89
|
9148 controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
|
|
paulo@89
|
9149 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
9150 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
9151 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
9152 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
9153
|
|
paulo@89
|
9154 // deprecated options
|
|
paulo@89
|
9155 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
9156 // deprecated after 1.7.1
|
|
paulo@89
|
9157 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
9158 tooltip.enabled(!!_);
|
|
paulo@89
|
9159 }},
|
|
paulo@89
|
9160 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
9161 // deprecated after 1.7.1
|
|
paulo@89
|
9162 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
9163 tooltip.contentGenerator(_);
|
|
paulo@89
|
9164 }},
|
|
paulo@89
|
9165
|
|
paulo@89
|
9166 // options that require extra logic in the setter
|
|
paulo@89
|
9167 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
9168 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
9169 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
9170 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
9171 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
9172 }},
|
|
paulo@89
|
9173 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
9174 duration = _;
|
|
paulo@89
|
9175 renderWatch.reset(duration);
|
|
paulo@89
|
9176 multibar.duration(duration);
|
|
paulo@89
|
9177 xAxis.duration(duration);
|
|
paulo@89
|
9178 yAxis.duration(duration);
|
|
paulo@89
|
9179 }},
|
|
paulo@89
|
9180 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
9181 color = nv.utils.getColor(_);
|
|
paulo@89
|
9182 legend.color(color);
|
|
paulo@89
|
9183 }},
|
|
paulo@89
|
9184 barColor: {get: function(){return multibar.barColor;}, set: function(_){
|
|
paulo@89
|
9185 multibar.barColor(_);
|
|
paulo@89
|
9186 legend.color(function(d,i) {return d3.rgb('#ccc').darker(i * 1.5).toString();})
|
|
paulo@89
|
9187 }}
|
|
paulo@89
|
9188 });
|
|
paulo@89
|
9189
|
|
paulo@89
|
9190 nv.utils.inheritOptions(chart, multibar);
|
|
paulo@89
|
9191 nv.utils.initOptions(chart);
|
|
paulo@89
|
9192
|
|
paulo@89
|
9193 return chart;
|
|
paulo@89
|
9194 };
|
|
paulo@89
|
9195 nv.models.multiChart = function() {
|
|
paulo@89
|
9196 "use strict";
|
|
paulo@89
|
9197
|
|
paulo@89
|
9198 //============================================================
|
|
paulo@89
|
9199 // Public Variables with Default Settings
|
|
paulo@89
|
9200 //------------------------------------------------------------
|
|
paulo@89
|
9201
|
|
paulo@89
|
9202 var margin = {top: 30, right: 20, bottom: 50, left: 60},
|
|
paulo@89
|
9203 color = nv.utils.defaultColor(),
|
|
paulo@89
|
9204 width = null,
|
|
paulo@89
|
9205 height = null,
|
|
paulo@89
|
9206 showLegend = true,
|
|
paulo@89
|
9207 noData = null,
|
|
paulo@89
|
9208 yDomain1,
|
|
paulo@89
|
9209 yDomain2,
|
|
paulo@89
|
9210 getX = function(d) { return d.x },
|
|
paulo@89
|
9211 getY = function(d) { return d.y},
|
|
paulo@89
|
9212 interpolate = 'monotone',
|
|
paulo@89
|
9213 useVoronoi = true
|
|
paulo@89
|
9214 ;
|
|
paulo@89
|
9215
|
|
paulo@89
|
9216 //============================================================
|
|
paulo@89
|
9217 // Private Variables
|
|
paulo@89
|
9218 //------------------------------------------------------------
|
|
paulo@89
|
9219
|
|
paulo@89
|
9220 var x = d3.scale.linear(),
|
|
paulo@89
|
9221 yScale1 = d3.scale.linear(),
|
|
paulo@89
|
9222 yScale2 = d3.scale.linear(),
|
|
paulo@89
|
9223
|
|
paulo@89
|
9224 lines1 = nv.models.line().yScale(yScale1),
|
|
paulo@89
|
9225 lines2 = nv.models.line().yScale(yScale2),
|
|
paulo@89
|
9226
|
|
paulo@89
|
9227 bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
|
|
paulo@89
|
9228 bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),
|
|
paulo@89
|
9229
|
|
paulo@89
|
9230 stack1 = nv.models.stackedArea().yScale(yScale1),
|
|
paulo@89
|
9231 stack2 = nv.models.stackedArea().yScale(yScale2),
|
|
paulo@89
|
9232
|
|
paulo@89
|
9233 xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
|
|
paulo@89
|
9234 yAxis1 = nv.models.axis().scale(yScale1).orient('left'),
|
|
paulo@89
|
9235 yAxis2 = nv.models.axis().scale(yScale2).orient('right'),
|
|
paulo@89
|
9236
|
|
paulo@89
|
9237 legend = nv.models.legend().height(30),
|
|
paulo@89
|
9238 tooltip = nv.models.tooltip(),
|
|
paulo@89
|
9239 dispatch = d3.dispatch();
|
|
paulo@89
|
9240
|
|
paulo@89
|
9241 function chart(selection) {
|
|
paulo@89
|
9242 selection.each(function(data) {
|
|
paulo@89
|
9243 var container = d3.select(this),
|
|
paulo@89
|
9244 that = this;
|
|
paulo@89
|
9245 nv.utils.initSVG(container);
|
|
paulo@89
|
9246
|
|
paulo@89
|
9247 chart.update = function() { container.transition().call(chart); };
|
|
paulo@89
|
9248 chart.container = this;
|
|
paulo@89
|
9249
|
|
paulo@89
|
9250 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
9251 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
9252
|
|
paulo@89
|
9253 var dataLines1 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 1});
|
|
paulo@89
|
9254 var dataLines2 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 2});
|
|
paulo@89
|
9255 var dataBars1 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 1});
|
|
paulo@89
|
9256 var dataBars2 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 2});
|
|
paulo@89
|
9257 var dataStack1 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 1});
|
|
paulo@89
|
9258 var dataStack2 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 2});
|
|
paulo@89
|
9259
|
|
paulo@89
|
9260 // Display noData message if there's nothing to show.
|
|
paulo@89
|
9261 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
9262 nv.utils.noData(chart, container);
|
|
paulo@89
|
9263 return chart;
|
|
paulo@89
|
9264 } else {
|
|
paulo@89
|
9265 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
9266 }
|
|
paulo@89
|
9267
|
|
paulo@89
|
9268 var series1 = data.filter(function(d) {return !d.disabled && d.yAxis == 1})
|
|
paulo@89
|
9269 .map(function(d) {
|
|
paulo@89
|
9270 return d.values.map(function(d,i) {
|
|
paulo@89
|
9271 return { x: d.x, y: d.y }
|
|
paulo@89
|
9272 })
|
|
paulo@89
|
9273 });
|
|
paulo@89
|
9274
|
|
paulo@89
|
9275 var series2 = data.filter(function(d) {return !d.disabled && d.yAxis == 2})
|
|
paulo@89
|
9276 .map(function(d) {
|
|
paulo@89
|
9277 return d.values.map(function(d,i) {
|
|
paulo@89
|
9278 return { x: d.x, y: d.y }
|
|
paulo@89
|
9279 })
|
|
paulo@89
|
9280 });
|
|
paulo@89
|
9281
|
|
paulo@89
|
9282 x .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
|
|
paulo@89
|
9283 .range([0, availableWidth]);
|
|
paulo@89
|
9284
|
|
paulo@89
|
9285 var wrap = container.selectAll('g.wrap.multiChart').data([data]);
|
|
paulo@89
|
9286 var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiChart').append('g');
|
|
paulo@89
|
9287
|
|
paulo@89
|
9288 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
9289 gEnter.append('g').attr('class', 'nv-y1 nv-axis');
|
|
paulo@89
|
9290 gEnter.append('g').attr('class', 'nv-y2 nv-axis');
|
|
paulo@89
|
9291 gEnter.append('g').attr('class', 'lines1Wrap');
|
|
paulo@89
|
9292 gEnter.append('g').attr('class', 'lines2Wrap');
|
|
paulo@89
|
9293 gEnter.append('g').attr('class', 'bars1Wrap');
|
|
paulo@89
|
9294 gEnter.append('g').attr('class', 'bars2Wrap');
|
|
paulo@89
|
9295 gEnter.append('g').attr('class', 'stack1Wrap');
|
|
paulo@89
|
9296 gEnter.append('g').attr('class', 'stack2Wrap');
|
|
paulo@89
|
9297 gEnter.append('g').attr('class', 'legendWrap');
|
|
paulo@89
|
9298
|
|
paulo@89
|
9299 var g = wrap.select('g');
|
|
paulo@89
|
9300
|
|
paulo@89
|
9301 var color_array = data.map(function(d,i) {
|
|
paulo@89
|
9302 return data[i].color || color(d, i);
|
|
paulo@89
|
9303 });
|
|
paulo@89
|
9304
|
|
paulo@89
|
9305 if (showLegend) {
|
|
paulo@89
|
9306 var legendWidth = legend.align() ? availableWidth / 2 : availableWidth;
|
|
paulo@89
|
9307 var legendXPosition = legend.align() ? legendWidth : 0;
|
|
paulo@89
|
9308
|
|
paulo@89
|
9309 legend.width(legendWidth);
|
|
paulo@89
|
9310 legend.color(color_array);
|
|
paulo@89
|
9311
|
|
paulo@89
|
9312 g.select('.legendWrap')
|
|
paulo@89
|
9313 .datum(data.map(function(series) {
|
|
paulo@89
|
9314 series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
|
|
paulo@89
|
9315 series.key = series.originalKey + (series.yAxis == 1 ? '' : ' (right axis)');
|
|
paulo@89
|
9316 return series;
|
|
paulo@89
|
9317 }))
|
|
paulo@89
|
9318 .call(legend);
|
|
paulo@89
|
9319
|
|
paulo@89
|
9320 if ( margin.top != legend.height()) {
|
|
paulo@89
|
9321 margin.top = legend.height();
|
|
paulo@89
|
9322 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
9323 }
|
|
paulo@89
|
9324
|
|
paulo@89
|
9325 g.select('.legendWrap')
|
|
paulo@89
|
9326 .attr('transform', 'translate(' + legendXPosition + ',' + (-margin.top) +')');
|
|
paulo@89
|
9327 }
|
|
paulo@89
|
9328
|
|
paulo@89
|
9329 lines1
|
|
paulo@89
|
9330 .width(availableWidth)
|
|
paulo@89
|
9331 .height(availableHeight)
|
|
paulo@89
|
9332 .interpolate(interpolate)
|
|
paulo@89
|
9333 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));
|
|
paulo@89
|
9334 lines2
|
|
paulo@89
|
9335 .width(availableWidth)
|
|
paulo@89
|
9336 .height(availableHeight)
|
|
paulo@89
|
9337 .interpolate(interpolate)
|
|
paulo@89
|
9338 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));
|
|
paulo@89
|
9339 bars1
|
|
paulo@89
|
9340 .width(availableWidth)
|
|
paulo@89
|
9341 .height(availableHeight)
|
|
paulo@89
|
9342 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'bar'}));
|
|
paulo@89
|
9343 bars2
|
|
paulo@89
|
9344 .width(availableWidth)
|
|
paulo@89
|
9345 .height(availableHeight)
|
|
paulo@89
|
9346 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'bar'}));
|
|
paulo@89
|
9347 stack1
|
|
paulo@89
|
9348 .width(availableWidth)
|
|
paulo@89
|
9349 .height(availableHeight)
|
|
paulo@89
|
9350 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'area'}));
|
|
paulo@89
|
9351 stack2
|
|
paulo@89
|
9352 .width(availableWidth)
|
|
paulo@89
|
9353 .height(availableHeight)
|
|
paulo@89
|
9354 .color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'area'}));
|
|
paulo@89
|
9355
|
|
paulo@89
|
9356 g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
9357
|
|
paulo@89
|
9358 var lines1Wrap = g.select('.lines1Wrap')
|
|
paulo@89
|
9359 .datum(dataLines1.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9360 var bars1Wrap = g.select('.bars1Wrap')
|
|
paulo@89
|
9361 .datum(dataBars1.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9362 var stack1Wrap = g.select('.stack1Wrap')
|
|
paulo@89
|
9363 .datum(dataStack1.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9364 var lines2Wrap = g.select('.lines2Wrap')
|
|
paulo@89
|
9365 .datum(dataLines2.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9366 var bars2Wrap = g.select('.bars2Wrap')
|
|
paulo@89
|
9367 .datum(dataBars2.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9368 var stack2Wrap = g.select('.stack2Wrap')
|
|
paulo@89
|
9369 .datum(dataStack2.filter(function(d){return !d.disabled}));
|
|
paulo@89
|
9370
|
|
paulo@89
|
9371 var extraValue1 = dataStack1.length ? dataStack1.map(function(a){return a.values}).reduce(function(a,b){
|
|
paulo@89
|
9372 return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
|
|
paulo@89
|
9373 }).concat([{x:0, y:0}]) : [];
|
|
paulo@89
|
9374 var extraValue2 = dataStack2.length ? dataStack2.map(function(a){return a.values}).reduce(function(a,b){
|
|
paulo@89
|
9375 return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
|
|
paulo@89
|
9376 }).concat([{x:0, y:0}]) : [];
|
|
paulo@89
|
9377
|
|
paulo@89
|
9378 yScale1 .domain(yDomain1 || d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))
|
|
paulo@89
|
9379 .range([0, availableHeight]);
|
|
paulo@89
|
9380
|
|
paulo@89
|
9381 yScale2 .domain(yDomain2 || d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))
|
|
paulo@89
|
9382 .range([0, availableHeight]);
|
|
paulo@89
|
9383
|
|
paulo@89
|
9384 lines1.yDomain(yScale1.domain());
|
|
paulo@89
|
9385 bars1.yDomain(yScale1.domain());
|
|
paulo@89
|
9386 stack1.yDomain(yScale1.domain());
|
|
paulo@89
|
9387
|
|
paulo@89
|
9388 lines2.yDomain(yScale2.domain());
|
|
paulo@89
|
9389 bars2.yDomain(yScale2.domain());
|
|
paulo@89
|
9390 stack2.yDomain(yScale2.domain());
|
|
paulo@89
|
9391
|
|
paulo@89
|
9392 if(dataStack1.length){d3.transition(stack1Wrap).call(stack1);}
|
|
paulo@89
|
9393 if(dataStack2.length){d3.transition(stack2Wrap).call(stack2);}
|
|
paulo@89
|
9394
|
|
paulo@89
|
9395 if(dataBars1.length){d3.transition(bars1Wrap).call(bars1);}
|
|
paulo@89
|
9396 if(dataBars2.length){d3.transition(bars2Wrap).call(bars2);}
|
|
paulo@89
|
9397
|
|
paulo@89
|
9398 if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}
|
|
paulo@89
|
9399 if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}
|
|
paulo@89
|
9400
|
|
paulo@89
|
9401 xAxis
|
|
paulo@89
|
9402 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
9403 .tickSize(-availableHeight, 0);
|
|
paulo@89
|
9404
|
|
paulo@89
|
9405 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
9406 .attr('transform', 'translate(0,' + availableHeight + ')');
|
|
paulo@89
|
9407 d3.transition(g.select('.nv-x.nv-axis'))
|
|
paulo@89
|
9408 .call(xAxis);
|
|
paulo@89
|
9409
|
|
paulo@89
|
9410 yAxis1
|
|
paulo@89
|
9411 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
9412 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
9413
|
|
paulo@89
|
9414
|
|
paulo@89
|
9415 d3.transition(g.select('.nv-y1.nv-axis'))
|
|
paulo@89
|
9416 .call(yAxis1);
|
|
paulo@89
|
9417
|
|
paulo@89
|
9418 yAxis2
|
|
paulo@89
|
9419 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
9420 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
9421
|
|
paulo@89
|
9422 d3.transition(g.select('.nv-y2.nv-axis'))
|
|
paulo@89
|
9423 .call(yAxis2);
|
|
paulo@89
|
9424
|
|
paulo@89
|
9425 g.select('.nv-y1.nv-axis')
|
|
paulo@89
|
9426 .classed('nv-disabled', series1.length ? false : true)
|
|
paulo@89
|
9427 .attr('transform', 'translate(' + x.range()[0] + ',0)');
|
|
paulo@89
|
9428
|
|
paulo@89
|
9429 g.select('.nv-y2.nv-axis')
|
|
paulo@89
|
9430 .classed('nv-disabled', series2.length ? false : true)
|
|
paulo@89
|
9431 .attr('transform', 'translate(' + x.range()[1] + ',0)');
|
|
paulo@89
|
9432
|
|
paulo@89
|
9433 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
9434 chart.update();
|
|
paulo@89
|
9435 });
|
|
paulo@89
|
9436
|
|
paulo@89
|
9437 //============================================================
|
|
paulo@89
|
9438 // Event Handling/Dispatching
|
|
paulo@89
|
9439 //------------------------------------------------------------
|
|
paulo@89
|
9440
|
|
paulo@89
|
9441 function mouseover_line(evt) {
|
|
paulo@89
|
9442 var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
|
|
paulo@89
|
9443 evt.value = evt.point.x;
|
|
paulo@89
|
9444 evt.series = {
|
|
paulo@89
|
9445 value: evt.point.y,
|
|
paulo@89
|
9446 color: evt.point.color
|
|
paulo@89
|
9447 };
|
|
paulo@89
|
9448 tooltip
|
|
paulo@89
|
9449 .duration(100)
|
|
paulo@89
|
9450 .valueFormatter(function(d, i) {
|
|
paulo@89
|
9451 return yaxis.tickFormat()(d, i);
|
|
paulo@89
|
9452 })
|
|
paulo@89
|
9453 .data(evt)
|
|
paulo@89
|
9454 .position(evt.pos)
|
|
paulo@89
|
9455 .hidden(false);
|
|
paulo@89
|
9456 }
|
|
paulo@89
|
9457
|
|
paulo@89
|
9458 function mouseover_stack(evt) {
|
|
paulo@89
|
9459 var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
|
|
paulo@89
|
9460 evt.point['x'] = stack1.x()(evt.point);
|
|
paulo@89
|
9461 evt.point['y'] = stack1.y()(evt.point);
|
|
paulo@89
|
9462 tooltip
|
|
paulo@89
|
9463 .duration(100)
|
|
paulo@89
|
9464 .valueFormatter(function(d, i) {
|
|
paulo@89
|
9465 return yaxis.tickFormat()(d, i);
|
|
paulo@89
|
9466 })
|
|
paulo@89
|
9467 .data(evt)
|
|
paulo@89
|
9468 .position(evt.pos)
|
|
paulo@89
|
9469 .hidden(false);
|
|
paulo@89
|
9470 }
|
|
paulo@89
|
9471
|
|
paulo@89
|
9472 function mouseover_bar(evt) {
|
|
paulo@89
|
9473 var yaxis = data[evt.data.series].yAxis === 2 ? yAxis2 : yAxis1;
|
|
paulo@89
|
9474
|
|
paulo@89
|
9475 evt.value = bars1.x()(evt.data);
|
|
paulo@89
|
9476 evt['series'] = {
|
|
paulo@89
|
9477 value: bars1.y()(evt.data),
|
|
paulo@89
|
9478 color: evt.color
|
|
paulo@89
|
9479 };
|
|
paulo@89
|
9480 tooltip
|
|
paulo@89
|
9481 .duration(0)
|
|
paulo@89
|
9482 .valueFormatter(function(d, i) {
|
|
paulo@89
|
9483 return yaxis.tickFormat()(d, i);
|
|
paulo@89
|
9484 })
|
|
paulo@89
|
9485 .data(evt)
|
|
paulo@89
|
9486 .hidden(false);
|
|
paulo@89
|
9487 }
|
|
paulo@89
|
9488
|
|
paulo@89
|
9489 lines1.dispatch.on('elementMouseover.tooltip', mouseover_line);
|
|
paulo@89
|
9490 lines2.dispatch.on('elementMouseover.tooltip', mouseover_line);
|
|
paulo@89
|
9491 lines1.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9492 tooltip.hidden(true)
|
|
paulo@89
|
9493 });
|
|
paulo@89
|
9494 lines2.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9495 tooltip.hidden(true)
|
|
paulo@89
|
9496 });
|
|
paulo@89
|
9497
|
|
paulo@89
|
9498 stack1.dispatch.on('elementMouseover.tooltip', mouseover_stack);
|
|
paulo@89
|
9499 stack2.dispatch.on('elementMouseover.tooltip', mouseover_stack);
|
|
paulo@89
|
9500 stack1.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9501 tooltip.hidden(true)
|
|
paulo@89
|
9502 });
|
|
paulo@89
|
9503 stack2.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9504 tooltip.hidden(true)
|
|
paulo@89
|
9505 });
|
|
paulo@89
|
9506
|
|
paulo@89
|
9507 bars1.dispatch.on('elementMouseover.tooltip', mouseover_bar);
|
|
paulo@89
|
9508 bars2.dispatch.on('elementMouseover.tooltip', mouseover_bar);
|
|
paulo@89
|
9509
|
|
paulo@89
|
9510 bars1.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9511 tooltip.hidden(true);
|
|
paulo@89
|
9512 });
|
|
paulo@89
|
9513 bars2.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
9514 tooltip.hidden(true);
|
|
paulo@89
|
9515 });
|
|
paulo@89
|
9516 bars1.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
9517 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
9518 });
|
|
paulo@89
|
9519 bars2.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
9520 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
9521 });
|
|
paulo@89
|
9522
|
|
paulo@89
|
9523 });
|
|
paulo@89
|
9524
|
|
paulo@89
|
9525 return chart;
|
|
paulo@89
|
9526 }
|
|
paulo@89
|
9527
|
|
paulo@89
|
9528 //============================================================
|
|
paulo@89
|
9529 // Global getters and setters
|
|
paulo@89
|
9530 //------------------------------------------------------------
|
|
paulo@89
|
9531
|
|
paulo@89
|
9532 chart.dispatch = dispatch;
|
|
paulo@89
|
9533 chart.lines1 = lines1;
|
|
paulo@89
|
9534 chart.lines2 = lines2;
|
|
paulo@89
|
9535 chart.bars1 = bars1;
|
|
paulo@89
|
9536 chart.bars2 = bars2;
|
|
paulo@89
|
9537 chart.stack1 = stack1;
|
|
paulo@89
|
9538 chart.stack2 = stack2;
|
|
paulo@89
|
9539 chart.xAxis = xAxis;
|
|
paulo@89
|
9540 chart.yAxis1 = yAxis1;
|
|
paulo@89
|
9541 chart.yAxis2 = yAxis2;
|
|
paulo@89
|
9542 chart.tooltip = tooltip;
|
|
paulo@89
|
9543
|
|
paulo@89
|
9544 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
9545
|
|
paulo@89
|
9546 chart._options = Object.create({}, {
|
|
paulo@89
|
9547 // simple options, just get/set the necessary values
|
|
paulo@89
|
9548 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
9549 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
9550 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
9551 yDomain1: {get: function(){return yDomain1;}, set: function(_){yDomain1=_;}},
|
|
paulo@89
|
9552 yDomain2: {get: function(){return yDomain2;}, set: function(_){yDomain2=_;}},
|
|
paulo@89
|
9553 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
9554 interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
|
|
paulo@89
|
9555
|
|
paulo@89
|
9556 // deprecated options
|
|
paulo@89
|
9557 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
9558 // deprecated after 1.7.1
|
|
paulo@89
|
9559 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
9560 tooltip.enabled(!!_);
|
|
paulo@89
|
9561 }},
|
|
paulo@89
|
9562 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
9563 // deprecated after 1.7.1
|
|
paulo@89
|
9564 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
9565 tooltip.contentGenerator(_);
|
|
paulo@89
|
9566 }},
|
|
paulo@89
|
9567
|
|
paulo@89
|
9568 // options that require extra logic in the setter
|
|
paulo@89
|
9569 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
9570 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
9571 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
9572 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
9573 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
9574 }},
|
|
paulo@89
|
9575 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
9576 color = nv.utils.getColor(_);
|
|
paulo@89
|
9577 }},
|
|
paulo@89
|
9578 x: {get: function(){return getX;}, set: function(_){
|
|
paulo@89
|
9579 getX = _;
|
|
paulo@89
|
9580 lines1.x(_);
|
|
paulo@89
|
9581 lines2.x(_);
|
|
paulo@89
|
9582 bars1.x(_);
|
|
paulo@89
|
9583 bars2.x(_);
|
|
paulo@89
|
9584 stack1.x(_);
|
|
paulo@89
|
9585 stack2.x(_);
|
|
paulo@89
|
9586 }},
|
|
paulo@89
|
9587 y: {get: function(){return getY;}, set: function(_){
|
|
paulo@89
|
9588 getY = _;
|
|
paulo@89
|
9589 lines1.y(_);
|
|
paulo@89
|
9590 lines2.y(_);
|
|
paulo@89
|
9591 stack1.y(_);
|
|
paulo@89
|
9592 stack2.y(_);
|
|
paulo@89
|
9593 bars1.y(_);
|
|
paulo@89
|
9594 bars2.y(_);
|
|
paulo@89
|
9595 }},
|
|
paulo@89
|
9596 useVoronoi: {get: function(){return useVoronoi;}, set: function(_){
|
|
paulo@89
|
9597 useVoronoi=_;
|
|
paulo@89
|
9598 lines1.useVoronoi(_);
|
|
paulo@89
|
9599 lines2.useVoronoi(_);
|
|
paulo@89
|
9600 stack1.useVoronoi(_);
|
|
paulo@89
|
9601 stack2.useVoronoi(_);
|
|
paulo@89
|
9602 }}
|
|
paulo@89
|
9603 });
|
|
paulo@89
|
9604
|
|
paulo@89
|
9605 nv.utils.initOptions(chart);
|
|
paulo@89
|
9606
|
|
paulo@89
|
9607 return chart;
|
|
paulo@89
|
9608 };
|
|
paulo@89
|
9609
|
|
paulo@89
|
9610
|
|
paulo@89
|
9611 nv.models.ohlcBar = function() {
|
|
paulo@89
|
9612 "use strict";
|
|
paulo@89
|
9613
|
|
paulo@89
|
9614 //============================================================
|
|
paulo@89
|
9615 // Public Variables with Default Settings
|
|
paulo@89
|
9616 //------------------------------------------------------------
|
|
paulo@89
|
9617
|
|
paulo@89
|
9618 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
9619 , width = null
|
|
paulo@89
|
9620 , height = null
|
|
paulo@89
|
9621 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
9622 , container = null
|
|
paulo@89
|
9623 , x = d3.scale.linear()
|
|
paulo@89
|
9624 , y = d3.scale.linear()
|
|
paulo@89
|
9625 , getX = function(d) { return d.x }
|
|
paulo@89
|
9626 , getY = function(d) { return d.y }
|
|
paulo@89
|
9627 , getOpen = function(d) { return d.open }
|
|
paulo@89
|
9628 , getClose = function(d) { return d.close }
|
|
paulo@89
|
9629 , getHigh = function(d) { return d.high }
|
|
paulo@89
|
9630 , getLow = function(d) { return d.low }
|
|
paulo@89
|
9631 , forceX = []
|
|
paulo@89
|
9632 , forceY = []
|
|
paulo@89
|
9633 , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
|
|
paulo@89
|
9634 , clipEdge = true
|
|
paulo@89
|
9635 , color = nv.utils.defaultColor()
|
|
paulo@89
|
9636 , interactive = false
|
|
paulo@89
|
9637 , xDomain
|
|
paulo@89
|
9638 , yDomain
|
|
paulo@89
|
9639 , xRange
|
|
paulo@89
|
9640 , yRange
|
|
paulo@89
|
9641 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd', 'chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove')
|
|
paulo@89
|
9642 ;
|
|
paulo@89
|
9643
|
|
paulo@89
|
9644 //============================================================
|
|
paulo@89
|
9645 // Private Variables
|
|
paulo@89
|
9646 //------------------------------------------------------------
|
|
paulo@89
|
9647
|
|
paulo@89
|
9648 function chart(selection) {
|
|
paulo@89
|
9649 selection.each(function(data) {
|
|
paulo@89
|
9650 container = d3.select(this);
|
|
paulo@89
|
9651 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
9652 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
9653
|
|
paulo@89
|
9654 nv.utils.initSVG(container);
|
|
paulo@89
|
9655
|
|
paulo@89
|
9656 // ohlc bar width.
|
|
paulo@89
|
9657 var w = (availableWidth / data[0].values.length) * .9;
|
|
paulo@89
|
9658
|
|
paulo@89
|
9659 // Setup Scales
|
|
paulo@89
|
9660 x.domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));
|
|
paulo@89
|
9661
|
|
paulo@89
|
9662 if (padData)
|
|
paulo@89
|
9663 x.range(xRange || [availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
|
paulo@89
|
9664 else
|
|
paulo@89
|
9665 x.range(xRange || [5 + w/2, availableWidth - w/2 - 5]);
|
|
paulo@89
|
9666
|
|
paulo@89
|
9667 y.domain(yDomain || [
|
|
paulo@89
|
9668 d3.min(data[0].values.map(getLow).concat(forceY)),
|
|
paulo@89
|
9669 d3.max(data[0].values.map(getHigh).concat(forceY))
|
|
paulo@89
|
9670 ]
|
|
paulo@89
|
9671 ).range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
9672
|
|
paulo@89
|
9673 // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
|
paulo@89
|
9674 if (x.domain()[0] === x.domain()[1])
|
|
paulo@89
|
9675 x.domain()[0] ?
|
|
paulo@89
|
9676 x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
|
paulo@89
|
9677 : x.domain([-1,1]);
|
|
paulo@89
|
9678
|
|
paulo@89
|
9679 if (y.domain()[0] === y.domain()[1])
|
|
paulo@89
|
9680 y.domain()[0] ?
|
|
paulo@89
|
9681 y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
|
|
paulo@89
|
9682 : y.domain([-1,1]);
|
|
paulo@89
|
9683
|
|
paulo@89
|
9684 // Setup containers and skeleton of chart
|
|
paulo@89
|
9685 var wrap = d3.select(this).selectAll('g.nv-wrap.nv-ohlcBar').data([data[0].values]);
|
|
paulo@89
|
9686 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-ohlcBar');
|
|
paulo@89
|
9687 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
9688 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
9689 var g = wrap.select('g');
|
|
paulo@89
|
9690
|
|
paulo@89
|
9691 gEnter.append('g').attr('class', 'nv-ticks');
|
|
paulo@89
|
9692
|
|
paulo@89
|
9693 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
9694
|
|
paulo@89
|
9695 container
|
|
paulo@89
|
9696 .on('click', function(d,i) {
|
|
paulo@89
|
9697 dispatch.chartClick({
|
|
paulo@89
|
9698 data: d,
|
|
paulo@89
|
9699 index: i,
|
|
paulo@89
|
9700 pos: d3.event,
|
|
paulo@89
|
9701 id: id
|
|
paulo@89
|
9702 });
|
|
paulo@89
|
9703 });
|
|
paulo@89
|
9704
|
|
paulo@89
|
9705 defsEnter.append('clipPath')
|
|
paulo@89
|
9706 .attr('id', 'nv-chart-clip-path-' + id)
|
|
paulo@89
|
9707 .append('rect');
|
|
paulo@89
|
9708
|
|
paulo@89
|
9709 wrap.select('#nv-chart-clip-path-' + id + ' rect')
|
|
paulo@89
|
9710 .attr('width', availableWidth)
|
|
paulo@89
|
9711 .attr('height', availableHeight);
|
|
paulo@89
|
9712
|
|
paulo@89
|
9713 g .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');
|
|
paulo@89
|
9714
|
|
paulo@89
|
9715 var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')
|
|
paulo@89
|
9716 .data(function(d) { return d });
|
|
paulo@89
|
9717 ticks.exit().remove();
|
|
paulo@89
|
9718
|
|
paulo@89
|
9719 ticks.enter().append('path')
|
|
paulo@89
|
9720 .attr('class', function(d,i,j) { return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i })
|
|
paulo@89
|
9721 .attr('d', function(d,i) {
|
|
paulo@89
|
9722 return 'm0,0l0,'
|
|
paulo@89
|
9723 + (y(getOpen(d,i))
|
|
paulo@89
|
9724 - y(getHigh(d,i)))
|
|
paulo@89
|
9725 + 'l'
|
|
paulo@89
|
9726 + (-w/2)
|
|
paulo@89
|
9727 + ',0l'
|
|
paulo@89
|
9728 + (w/2)
|
|
paulo@89
|
9729 + ',0l0,'
|
|
paulo@89
|
9730 + (y(getLow(d,i)) - y(getOpen(d,i)))
|
|
paulo@89
|
9731 + 'l0,'
|
|
paulo@89
|
9732 + (y(getClose(d,i))
|
|
paulo@89
|
9733 - y(getLow(d,i)))
|
|
paulo@89
|
9734 + 'l'
|
|
paulo@89
|
9735 + (w/2)
|
|
paulo@89
|
9736 + ',0l'
|
|
paulo@89
|
9737 + (-w/2)
|
|
paulo@89
|
9738 + ',0z';
|
|
paulo@89
|
9739 })
|
|
paulo@89
|
9740 .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
|
|
paulo@89
|
9741 .attr('fill', function(d,i) { return color[0]; })
|
|
paulo@89
|
9742 .attr('stroke', function(d,i) { return color[0]; })
|
|
paulo@89
|
9743 .attr('x', 0 )
|
|
paulo@89
|
9744 .attr('y', function(d,i) { return y(Math.max(0, getY(d,i))) })
|
|
paulo@89
|
9745 .attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) });
|
|
paulo@89
|
9746
|
|
paulo@89
|
9747 // the bar colors are controlled by CSS currently
|
|
paulo@89
|
9748 ticks.attr('class', function(d,i,j) {
|
|
paulo@89
|
9749 return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i;
|
|
paulo@89
|
9750 });
|
|
paulo@89
|
9751
|
|
paulo@89
|
9752 d3.transition(ticks)
|
|
paulo@89
|
9753 .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
|
|
paulo@89
|
9754 .attr('d', function(d,i) {
|
|
paulo@89
|
9755 var w = (availableWidth / data[0].values.length) * .9;
|
|
paulo@89
|
9756 return 'm0,0l0,'
|
|
paulo@89
|
9757 + (y(getOpen(d,i))
|
|
paulo@89
|
9758 - y(getHigh(d,i)))
|
|
paulo@89
|
9759 + 'l'
|
|
paulo@89
|
9760 + (-w/2)
|
|
paulo@89
|
9761 + ',0l'
|
|
paulo@89
|
9762 + (w/2)
|
|
paulo@89
|
9763 + ',0l0,'
|
|
paulo@89
|
9764 + (y(getLow(d,i))
|
|
paulo@89
|
9765 - y(getOpen(d,i)))
|
|
paulo@89
|
9766 + 'l0,'
|
|
paulo@89
|
9767 + (y(getClose(d,i))
|
|
paulo@89
|
9768 - y(getLow(d,i)))
|
|
paulo@89
|
9769 + 'l'
|
|
paulo@89
|
9770 + (w/2)
|
|
paulo@89
|
9771 + ',0l'
|
|
paulo@89
|
9772 + (-w/2)
|
|
paulo@89
|
9773 + ',0z';
|
|
paulo@89
|
9774 });
|
|
paulo@89
|
9775 });
|
|
paulo@89
|
9776
|
|
paulo@89
|
9777 return chart;
|
|
paulo@89
|
9778 }
|
|
paulo@89
|
9779
|
|
paulo@89
|
9780
|
|
paulo@89
|
9781 //Create methods to allow outside functions to highlight a specific bar.
|
|
paulo@89
|
9782 chart.highlightPoint = function(pointIndex, isHoverOver) {
|
|
paulo@89
|
9783 chart.clearHighlights();
|
|
paulo@89
|
9784 container.select(".nv-ohlcBar .nv-tick-0-" + pointIndex)
|
|
paulo@89
|
9785 .classed("hover", isHoverOver)
|
|
paulo@89
|
9786 ;
|
|
paulo@89
|
9787 };
|
|
paulo@89
|
9788
|
|
paulo@89
|
9789 chart.clearHighlights = function() {
|
|
paulo@89
|
9790 container.select(".nv-ohlcBar .nv-tick.hover")
|
|
paulo@89
|
9791 .classed("hover", false)
|
|
paulo@89
|
9792 ;
|
|
paulo@89
|
9793 };
|
|
paulo@89
|
9794
|
|
paulo@89
|
9795 //============================================================
|
|
paulo@89
|
9796 // Expose Public Variables
|
|
paulo@89
|
9797 //------------------------------------------------------------
|
|
paulo@89
|
9798
|
|
paulo@89
|
9799 chart.dispatch = dispatch;
|
|
paulo@89
|
9800 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
9801
|
|
paulo@89
|
9802 chart._options = Object.create({}, {
|
|
paulo@89
|
9803 // simple options, just get/set the necessary values
|
|
paulo@89
|
9804 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
9805 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
9806 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
9807 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
9808 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
9809 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
9810 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
9811 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
9812 forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},
|
|
paulo@89
|
9813 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
9814 padData: {get: function(){return padData;}, set: function(_){padData=_;}},
|
|
paulo@89
|
9815 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
9816 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
9817 interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
|
|
paulo@89
|
9818
|
|
paulo@89
|
9819 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
9820 y: {get: function(){return getY;}, set: function(_){getY=_;}},
|
|
paulo@89
|
9821 open: {get: function(){return getOpen();}, set: function(_){getOpen=_;}},
|
|
paulo@89
|
9822 close: {get: function(){return getClose();}, set: function(_){getClose=_;}},
|
|
paulo@89
|
9823 high: {get: function(){return getHigh;}, set: function(_){getHigh=_;}},
|
|
paulo@89
|
9824 low: {get: function(){return getLow;}, set: function(_){getLow=_;}},
|
|
paulo@89
|
9825
|
|
paulo@89
|
9826 // options that require extra logic in the setter
|
|
paulo@89
|
9827 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
9828 margin.top = _.top != undefined ? _.top : margin.top;
|
|
paulo@89
|
9829 margin.right = _.right != undefined ? _.right : margin.right;
|
|
paulo@89
|
9830 margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
9831 margin.left = _.left != undefined ? _.left : margin.left;
|
|
paulo@89
|
9832 }},
|
|
paulo@89
|
9833 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
9834 color = nv.utils.getColor(_);
|
|
paulo@89
|
9835 }}
|
|
paulo@89
|
9836 });
|
|
paulo@89
|
9837
|
|
paulo@89
|
9838 nv.utils.initOptions(chart);
|
|
paulo@89
|
9839 return chart;
|
|
paulo@89
|
9840 };
|
|
paulo@89
|
9841 // Code adapted from Jason Davies' "Parallel Coordinates"
|
|
paulo@89
|
9842 // http://bl.ocks.org/jasondavies/1341281
|
|
paulo@89
|
9843 nv.models.parallelCoordinates = function() {
|
|
paulo@89
|
9844 "use strict";
|
|
paulo@89
|
9845
|
|
paulo@89
|
9846 //============================================================
|
|
paulo@89
|
9847 // Public Variables with Default Settings
|
|
paulo@89
|
9848 //------------------------------------------------------------
|
|
paulo@89
|
9849
|
|
paulo@89
|
9850 var margin = {top: 30, right: 0, bottom: 10, left: 0}
|
|
paulo@89
|
9851 , width = null
|
|
paulo@89
|
9852 , height = null
|
|
paulo@89
|
9853 , x = d3.scale.ordinal()
|
|
paulo@89
|
9854 , y = {}
|
|
paulo@89
|
9855 , dimensionNames = []
|
|
paulo@89
|
9856 , dimensionFormats = []
|
|
paulo@89
|
9857 , color = nv.utils.defaultColor()
|
|
paulo@89
|
9858 , filters = []
|
|
paulo@89
|
9859 , active = []
|
|
paulo@89
|
9860 , dragging = []
|
|
paulo@89
|
9861 , lineTension = 1
|
|
paulo@89
|
9862 , dispatch = d3.dispatch('brush', 'elementMouseover', 'elementMouseout')
|
|
paulo@89
|
9863 ;
|
|
paulo@89
|
9864
|
|
paulo@89
|
9865 //============================================================
|
|
paulo@89
|
9866 // Private Variables
|
|
paulo@89
|
9867 //------------------------------------------------------------
|
|
paulo@89
|
9868
|
|
paulo@89
|
9869 function chart(selection) {
|
|
paulo@89
|
9870 selection.each(function(data) {
|
|
paulo@89
|
9871 var container = d3.select(this);
|
|
paulo@89
|
9872 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
9873 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
9874
|
|
paulo@89
|
9875 nv.utils.initSVG(container);
|
|
paulo@89
|
9876
|
|
paulo@89
|
9877 active = data; //set all active before first brush call
|
|
paulo@89
|
9878
|
|
paulo@89
|
9879 // Setup Scales
|
|
paulo@89
|
9880 x.rangePoints([0, availableWidth], 1).domain(dimensionNames);
|
|
paulo@89
|
9881
|
|
paulo@89
|
9882 //Set as true if all values on an axis are missing.
|
|
paulo@89
|
9883 var onlyNanValues = {};
|
|
paulo@89
|
9884 // Extract the list of dimensions and create a scale for each.
|
|
paulo@89
|
9885 dimensionNames.forEach(function(d) {
|
|
paulo@89
|
9886 var extent = d3.extent(data, function(p) { return +p[d]; });
|
|
paulo@89
|
9887 onlyNanValues[d] = false;
|
|
paulo@89
|
9888 //If there is no values to display on an axis, set the extent to 0
|
|
paulo@89
|
9889 if (extent[0] === undefined) {
|
|
paulo@89
|
9890 onlyNanValues[d] = true;
|
|
paulo@89
|
9891 extent[0] = 0;
|
|
paulo@89
|
9892 extent[1] = 0;
|
|
paulo@89
|
9893 }
|
|
paulo@89
|
9894 //Scale axis if there is only one value
|
|
paulo@89
|
9895 if (extent[0] === extent[1]) {
|
|
paulo@89
|
9896 extent[0] = extent[0] - 1;
|
|
paulo@89
|
9897 extent[1] = extent[1] + 1;
|
|
paulo@89
|
9898 }
|
|
paulo@89
|
9899 //Use 90% of (availableHeight - 12) for the axis range, 12 reprensenting the space necessary to display "undefined values" text.
|
|
paulo@89
|
9900 //The remaining 10% are used to display the missingValue line.
|
|
paulo@89
|
9901 y[d] = d3.scale.linear()
|
|
paulo@89
|
9902 .domain(extent)
|
|
paulo@89
|
9903 .range([(availableHeight - 12) * 0.9, 0]);
|
|
paulo@89
|
9904
|
|
paulo@89
|
9905 y[d].brush = d3.svg.brush().y(y[d]).on('brush', brush);
|
|
paulo@89
|
9906
|
|
paulo@89
|
9907 return d != 'name';
|
|
paulo@89
|
9908 });
|
|
paulo@89
|
9909
|
|
paulo@89
|
9910 // Setup containers and skeleton of chart
|
|
paulo@89
|
9911 var wrap = container.selectAll('g.nv-wrap.nv-parallelCoordinates').data([data]);
|
|
paulo@89
|
9912 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-parallelCoordinates');
|
|
paulo@89
|
9913 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
9914 var g = wrap.select('g');
|
|
paulo@89
|
9915
|
|
paulo@89
|
9916 gEnter.append('g').attr('class', 'nv-parallelCoordinates background');
|
|
paulo@89
|
9917 gEnter.append('g').attr('class', 'nv-parallelCoordinates foreground');
|
|
paulo@89
|
9918 gEnter.append('g').attr('class', 'nv-parallelCoordinates missingValuesline');
|
|
paulo@89
|
9919
|
|
paulo@89
|
9920 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
9921
|
|
paulo@89
|
9922 var line = d3.svg.line().interpolate('cardinal').tension(lineTension),
|
|
paulo@89
|
9923 axis = d3.svg.axis().orient('left'),
|
|
paulo@89
|
9924 axisDrag = d3.behavior.drag()
|
|
paulo@89
|
9925 .on('dragstart', dragStart)
|
|
paulo@89
|
9926 .on('drag', dragMove)
|
|
paulo@89
|
9927 .on('dragend', dragEnd);
|
|
paulo@89
|
9928
|
|
paulo@89
|
9929 //Add missing value line at the bottom of the chart
|
|
paulo@89
|
9930 var missingValuesline, missingValueslineText;
|
|
paulo@89
|
9931 var step = x.range()[1] - x.range()[0];
|
|
paulo@89
|
9932 var axisWithMissingValues = [];
|
|
paulo@89
|
9933 var lineData = [0 + step / 2, availableHeight - 12, availableWidth - step / 2, availableHeight - 12];
|
|
paulo@89
|
9934 missingValuesline = wrap.select('.missingValuesline').selectAll('line').data([lineData]);
|
|
paulo@89
|
9935 missingValuesline.enter().append('line');
|
|
paulo@89
|
9936 missingValuesline.exit().remove();
|
|
paulo@89
|
9937 missingValuesline.attr("x1", function(d) { return d[0]; })
|
|
paulo@89
|
9938 .attr("y1", function(d) { return d[1]; })
|
|
paulo@89
|
9939 .attr("x2", function(d) { return d[2]; })
|
|
paulo@89
|
9940 .attr("y2", function(d) { return d[3]; });
|
|
paulo@89
|
9941
|
|
paulo@89
|
9942 //Add the text "undefined values" under the missing value line
|
|
paulo@89
|
9943 missingValueslineText = wrap.select('.missingValuesline').selectAll('text').data(["undefined values"]);
|
|
paulo@89
|
9944 missingValueslineText.append('text').data(["undefined values"]);
|
|
paulo@89
|
9945 missingValueslineText.enter().append('text');
|
|
paulo@89
|
9946 missingValueslineText.exit().remove();
|
|
paulo@89
|
9947 missingValueslineText.attr("y", availableHeight)
|
|
paulo@89
|
9948 //To have the text right align with the missingValues line, substract 92 representing the text size.
|
|
paulo@89
|
9949 .attr("x", availableWidth - 92 - step / 2)
|
|
paulo@89
|
9950 .text(function(d) { return d; });
|
|
paulo@89
|
9951
|
|
paulo@89
|
9952 // Add grey background lines for context.
|
|
paulo@89
|
9953 var background = wrap.select('.background').selectAll('path').data(data);
|
|
paulo@89
|
9954 background.enter().append('path');
|
|
paulo@89
|
9955 background.exit().remove();
|
|
paulo@89
|
9956 background.attr('d', path);
|
|
paulo@89
|
9957
|
|
paulo@89
|
9958 // Add blue foreground lines for focus.
|
|
paulo@89
|
9959 var foreground = wrap.select('.foreground').selectAll('path').data(data);
|
|
paulo@89
|
9960 foreground.enter().append('path')
|
|
paulo@89
|
9961 foreground.exit().remove();
|
|
paulo@89
|
9962 foreground.attr('d', path).attr('stroke', color);
|
|
paulo@89
|
9963 foreground.on("mouseover", function (d, i) {
|
|
paulo@89
|
9964 d3.select(this).classed('hover', true);
|
|
paulo@89
|
9965 dispatch.elementMouseover({
|
|
paulo@89
|
9966 label: d.name,
|
|
paulo@89
|
9967 data: d.data,
|
|
paulo@89
|
9968 index: i,
|
|
paulo@89
|
9969 pos: [d3.mouse(this.parentNode)[0], d3.mouse(this.parentNode)[1]]
|
|
paulo@89
|
9970 });
|
|
paulo@89
|
9971
|
|
paulo@89
|
9972 });
|
|
paulo@89
|
9973 foreground.on("mouseout", function (d, i) {
|
|
paulo@89
|
9974 d3.select(this).classed('hover', false);
|
|
paulo@89
|
9975 dispatch.elementMouseout({
|
|
paulo@89
|
9976 label: d.name,
|
|
paulo@89
|
9977 data: d.data,
|
|
paulo@89
|
9978 index: i
|
|
paulo@89
|
9979 });
|
|
paulo@89
|
9980 });
|
|
paulo@89
|
9981
|
|
paulo@89
|
9982 // Add a group element for each dimension.
|
|
paulo@89
|
9983 var dimensions = g.selectAll('.dimension').data(dimensionNames);
|
|
paulo@89
|
9984 var dimensionsEnter = dimensions.enter().append('g').attr('class', 'nv-parallelCoordinates dimension');
|
|
paulo@89
|
9985 dimensionsEnter.append('g').attr('class', 'nv-parallelCoordinates nv-axis');
|
|
paulo@89
|
9986 dimensionsEnter.append('g').attr('class', 'nv-parallelCoordinates-brush');
|
|
paulo@89
|
9987 dimensionsEnter.append('text').attr('class', 'nv-parallelCoordinates nv-label');
|
|
paulo@89
|
9988
|
|
paulo@89
|
9989 dimensions.attr('transform', function(d) { return 'translate(' + x(d) + ',0)'; });
|
|
paulo@89
|
9990 dimensions.exit().remove();
|
|
paulo@89
|
9991
|
|
paulo@89
|
9992 // Add an axis and title.
|
|
paulo@89
|
9993 dimensions.select('.nv-label')
|
|
paulo@89
|
9994 .style("cursor", "move")
|
|
paulo@89
|
9995 .attr('dy', '-1em')
|
|
paulo@89
|
9996 .attr('text-anchor', 'middle')
|
|
paulo@89
|
9997 .text(String)
|
|
paulo@89
|
9998 .on("mouseover", function(d, i) {
|
|
paulo@89
|
9999 dispatch.elementMouseover({
|
|
paulo@89
|
10000 dim: d,
|
|
paulo@89
|
10001 pos: [d3.mouse(this.parentNode.parentNode)[0], d3.mouse(this.parentNode.parentNode)[1]]
|
|
paulo@89
|
10002 });
|
|
paulo@89
|
10003 })
|
|
paulo@89
|
10004 .on("mouseout", function(d, i) {
|
|
paulo@89
|
10005 dispatch.elementMouseout({
|
|
paulo@89
|
10006 dim: d
|
|
paulo@89
|
10007 });
|
|
paulo@89
|
10008 })
|
|
paulo@89
|
10009 .call(axisDrag);
|
|
paulo@89
|
10010
|
|
paulo@89
|
10011 dimensions.select('.nv-axis')
|
|
paulo@89
|
10012 .each(function (d, i) {
|
|
paulo@89
|
10013 d3.select(this).call(axis.scale(y[d]).tickFormat(d3.format(dimensionFormats[i])));
|
|
paulo@89
|
10014 });
|
|
paulo@89
|
10015
|
|
paulo@89
|
10016 dimensions.select('.nv-parallelCoordinates-brush')
|
|
paulo@89
|
10017 .each(function (d) {
|
|
paulo@89
|
10018 d3.select(this).call(y[d].brush);
|
|
paulo@89
|
10019 })
|
|
paulo@89
|
10020 .selectAll('rect')
|
|
paulo@89
|
10021 .attr('x', -8)
|
|
paulo@89
|
10022 .attr('width', 16);
|
|
paulo@89
|
10023
|
|
paulo@89
|
10024 // Returns the path for a given data point.
|
|
paulo@89
|
10025 function path(d) {
|
|
paulo@89
|
10026 return line(dimensionNames.map(function (p) {
|
|
paulo@89
|
10027 //If value if missing, put the value on the missing value line
|
|
paulo@89
|
10028 if(isNaN(d[p]) || isNaN(parseFloat(d[p]))) {
|
|
paulo@89
|
10029 var domain = y[p].domain();
|
|
paulo@89
|
10030 var range = y[p].range();
|
|
paulo@89
|
10031 var min = domain[0] - (domain[1] - domain[0]) / 9;
|
|
paulo@89
|
10032
|
|
paulo@89
|
10033 //If it's not already the case, allow brush to select undefined values
|
|
paulo@89
|
10034 if(axisWithMissingValues.indexOf(p) < 0) {
|
|
paulo@89
|
10035
|
|
paulo@89
|
10036 var newscale = d3.scale.linear().domain([min, domain[1]]).range([availableHeight - 12, range[1]]);
|
|
paulo@89
|
10037 y[p].brush.y(newscale);
|
|
paulo@89
|
10038 axisWithMissingValues.push(p);
|
|
paulo@89
|
10039 }
|
|
paulo@89
|
10040
|
|
paulo@89
|
10041 return [x(p), y[p](min)];
|
|
paulo@89
|
10042 }
|
|
paulo@89
|
10043
|
|
paulo@89
|
10044 //If parallelCoordinate contain missing values show the missing values line otherwise, hide it.
|
|
paulo@89
|
10045 if(axisWithMissingValues.length > 0) {
|
|
paulo@89
|
10046 missingValuesline.style("display", "inline");
|
|
paulo@89
|
10047 missingValueslineText.style("display", "inline");
|
|
paulo@89
|
10048 } else {
|
|
paulo@89
|
10049 missingValuesline.style("display", "none");
|
|
paulo@89
|
10050 missingValueslineText.style("display", "none");
|
|
paulo@89
|
10051 }
|
|
paulo@89
|
10052
|
|
paulo@89
|
10053 return [x(p), y[p](d[p])];
|
|
paulo@89
|
10054 }));
|
|
paulo@89
|
10055 }
|
|
paulo@89
|
10056
|
|
paulo@89
|
10057 // Handles a brush event, toggling the display of foreground lines.
|
|
paulo@89
|
10058 function brush() {
|
|
paulo@89
|
10059 var actives = dimensionNames.filter(function(p) { return !y[p].brush.empty(); }),
|
|
paulo@89
|
10060 extents = actives.map(function(p) { return y[p].brush.extent(); });
|
|
paulo@89
|
10061
|
|
paulo@89
|
10062 filters = []; //erase current filters
|
|
paulo@89
|
10063 actives.forEach(function(d,i) {
|
|
paulo@89
|
10064 filters[i] = {
|
|
paulo@89
|
10065 dimension: d,
|
|
paulo@89
|
10066 extent: extents[i]
|
|
paulo@89
|
10067 }
|
|
paulo@89
|
10068 });
|
|
paulo@89
|
10069
|
|
paulo@89
|
10070 active = []; //erase current active list
|
|
paulo@89
|
10071 foreground.style('display', function(d) {
|
|
paulo@89
|
10072 var isActive = actives.every(function(p, i) {
|
|
paulo@89
|
10073 if(isNaN(d[p]) && extents[i][0] == y[p].brush.y().domain()[0]) return true;
|
|
paulo@89
|
10074 return extents[i][0] <= d[p] && d[p] <= extents[i][1];
|
|
paulo@89
|
10075 });
|
|
paulo@89
|
10076 if (isActive) active.push(d);
|
|
paulo@89
|
10077 return isActive ? null : 'none';
|
|
paulo@89
|
10078 });
|
|
paulo@89
|
10079
|
|
paulo@89
|
10080 dispatch.brush({
|
|
paulo@89
|
10081 filters: filters,
|
|
paulo@89
|
10082 active: active
|
|
paulo@89
|
10083 });
|
|
paulo@89
|
10084 }
|
|
paulo@89
|
10085
|
|
paulo@89
|
10086 function dragStart(d, i) {
|
|
paulo@89
|
10087 dragging[d] = this.parentNode.__origin__ = x(d);
|
|
paulo@89
|
10088 background.attr("visibility", "hidden");
|
|
paulo@89
|
10089
|
|
paulo@89
|
10090 }
|
|
paulo@89
|
10091
|
|
paulo@89
|
10092 function dragMove(d, i) {
|
|
paulo@89
|
10093 dragging[d] = Math.min(availableWidth, Math.max(0, this.parentNode.__origin__ += d3.event.x));
|
|
paulo@89
|
10094 foreground.attr("d", path);
|
|
paulo@89
|
10095 dimensionNames.sort(function (a, b) { return position(a) - position(b); });
|
|
paulo@89
|
10096 x.domain(dimensionNames);
|
|
paulo@89
|
10097 dimensions.attr("transform", function(d) { return "translate(" + position(d) + ")"; });
|
|
paulo@89
|
10098 }
|
|
paulo@89
|
10099
|
|
paulo@89
|
10100 function dragEnd(d, i) {
|
|
paulo@89
|
10101 delete this.parentNode.__origin__;
|
|
paulo@89
|
10102 delete dragging[d];
|
|
paulo@89
|
10103 d3.select(this.parentNode).attr("transform", "translate(" + x(d) + ")");
|
|
paulo@89
|
10104 foreground
|
|
paulo@89
|
10105 .attr("d", path);
|
|
paulo@89
|
10106 background
|
|
paulo@89
|
10107 .attr("d", path)
|
|
paulo@89
|
10108 .attr("visibility", null);
|
|
paulo@89
|
10109
|
|
paulo@89
|
10110 }
|
|
paulo@89
|
10111
|
|
paulo@89
|
10112 function position(d) {
|
|
paulo@89
|
10113 var v = dragging[d];
|
|
paulo@89
|
10114 return v == null ? x(d) : v;
|
|
paulo@89
|
10115 }
|
|
paulo@89
|
10116 });
|
|
paulo@89
|
10117
|
|
paulo@89
|
10118 return chart;
|
|
paulo@89
|
10119 }
|
|
paulo@89
|
10120
|
|
paulo@89
|
10121 //============================================================
|
|
paulo@89
|
10122 // Expose Public Variables
|
|
paulo@89
|
10123 //------------------------------------------------------------
|
|
paulo@89
|
10124
|
|
paulo@89
|
10125 chart.dispatch = dispatch;
|
|
paulo@89
|
10126 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
10127
|
|
paulo@89
|
10128 chart._options = Object.create({}, {
|
|
paulo@89
|
10129 // simple options, just get/set the necessary values
|
|
paulo@89
|
10130 width: {get: function(){return width;}, set: function(_){width= _;}},
|
|
paulo@89
|
10131 height: {get: function(){return height;}, set: function(_){height= _;}},
|
|
paulo@89
|
10132 dimensionNames: {get: function() { return dimensionNames;}, set: function(_){dimensionNames= _;}},
|
|
paulo@89
|
10133 dimensionFormats : {get: function(){return dimensionFormats;}, set: function (_){dimensionFormats=_;}},
|
|
paulo@89
|
10134 lineTension: {get: function(){return lineTension;}, set: function(_){lineTension = _;}},
|
|
paulo@89
|
10135
|
|
paulo@89
|
10136 // deprecated options
|
|
paulo@89
|
10137 dimensions: {get: function (){return dimensionNames;}, set: function(_){
|
|
paulo@89
|
10138 // deprecated after 1.8.1
|
|
paulo@89
|
10139 nv.deprecated('dimensions', 'use dimensionNames instead');
|
|
paulo@89
|
10140 dimensionNames = _;
|
|
paulo@89
|
10141 }},
|
|
paulo@89
|
10142
|
|
paulo@89
|
10143 // options that require extra logic in the setter
|
|
paulo@89
|
10144 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
10145 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
10146 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
10147 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
10148 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
10149 }},
|
|
paulo@89
|
10150 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
10151 color = nv.utils.getColor(_);
|
|
paulo@89
|
10152 }}
|
|
paulo@89
|
10153 });
|
|
paulo@89
|
10154
|
|
paulo@89
|
10155 nv.utils.initOptions(chart);
|
|
paulo@89
|
10156 return chart;
|
|
paulo@89
|
10157 };
|
|
paulo@89
|
10158 nv.models.pie = function() {
|
|
paulo@89
|
10159 "use strict";
|
|
paulo@89
|
10160
|
|
paulo@89
|
10161 //============================================================
|
|
paulo@89
|
10162 // Public Variables with Default Settings
|
|
paulo@89
|
10163 //------------------------------------------------------------
|
|
paulo@89
|
10164
|
|
paulo@89
|
10165 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
10166 , width = 500
|
|
paulo@89
|
10167 , height = 500
|
|
paulo@89
|
10168 , getX = function(d) { return d.x }
|
|
paulo@89
|
10169 , getY = function(d) { return d.y }
|
|
paulo@89
|
10170 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
10171 , container = null
|
|
paulo@89
|
10172 , color = nv.utils.defaultColor()
|
|
paulo@89
|
10173 , valueFormat = d3.format(',.2f')
|
|
paulo@89
|
10174 , showLabels = true
|
|
paulo@89
|
10175 , labelsOutside = false
|
|
paulo@89
|
10176 , labelType = "key"
|
|
paulo@89
|
10177 , labelThreshold = .02 //if slice percentage is under this, don't show label
|
|
paulo@89
|
10178 , donut = false
|
|
paulo@89
|
10179 , title = false
|
|
paulo@89
|
10180 , growOnHover = true
|
|
paulo@89
|
10181 , titleOffset = 0
|
|
paulo@89
|
10182 , labelSunbeamLayout = false
|
|
paulo@89
|
10183 , startAngle = false
|
|
paulo@89
|
10184 , padAngle = false
|
|
paulo@89
|
10185 , endAngle = false
|
|
paulo@89
|
10186 , cornerRadius = 0
|
|
paulo@89
|
10187 , donutRatio = 0.5
|
|
paulo@89
|
10188 , arcsRadius = []
|
|
paulo@89
|
10189 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
|
|
paulo@89
|
10190 ;
|
|
paulo@89
|
10191
|
|
paulo@89
|
10192 var arcs = [];
|
|
paulo@89
|
10193 var arcsOver = [];
|
|
paulo@89
|
10194
|
|
paulo@89
|
10195 //============================================================
|
|
paulo@89
|
10196 // chart function
|
|
paulo@89
|
10197 //------------------------------------------------------------
|
|
paulo@89
|
10198
|
|
paulo@89
|
10199 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
10200
|
|
paulo@89
|
10201 function chart(selection) {
|
|
paulo@89
|
10202 renderWatch.reset();
|
|
paulo@89
|
10203 selection.each(function(data) {
|
|
paulo@89
|
10204 var availableWidth = width - margin.left - margin.right
|
|
paulo@89
|
10205 , availableHeight = height - margin.top - margin.bottom
|
|
paulo@89
|
10206 , radius = Math.min(availableWidth, availableHeight) / 2
|
|
paulo@89
|
10207 , arcsRadiusOuter = []
|
|
paulo@89
|
10208 , arcsRadiusInner = []
|
|
paulo@89
|
10209 ;
|
|
paulo@89
|
10210
|
|
paulo@89
|
10211 container = d3.select(this)
|
|
paulo@89
|
10212 if (arcsRadius.length === 0) {
|
|
paulo@89
|
10213 var outer = radius - radius / 5;
|
|
paulo@89
|
10214 var inner = donutRatio * radius;
|
|
paulo@89
|
10215 for (var i = 0; i < data[0].length; i++) {
|
|
paulo@89
|
10216 arcsRadiusOuter.push(outer);
|
|
paulo@89
|
10217 arcsRadiusInner.push(inner);
|
|
paulo@89
|
10218 }
|
|
paulo@89
|
10219 } else {
|
|
paulo@89
|
10220 arcsRadiusOuter = arcsRadius.map(function (d) { return (d.outer - d.outer / 5) * radius; });
|
|
paulo@89
|
10221 arcsRadiusInner = arcsRadius.map(function (d) { return (d.inner - d.inner / 5) * radius; });
|
|
paulo@89
|
10222 donutRatio = d3.min(arcsRadius.map(function (d) { return (d.inner - d.inner / 5); }));
|
|
paulo@89
|
10223 }
|
|
paulo@89
|
10224 nv.utils.initSVG(container);
|
|
paulo@89
|
10225
|
|
paulo@89
|
10226 // Setup containers and skeleton of chart
|
|
paulo@89
|
10227 var wrap = container.selectAll('.nv-wrap.nv-pie').data(data);
|
|
paulo@89
|
10228 var wrapEnter = wrap.enter().append('g').attr('class','nvd3 nv-wrap nv-pie nv-chart-' + id);
|
|
paulo@89
|
10229 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
10230 var g = wrap.select('g');
|
|
paulo@89
|
10231 var g_pie = gEnter.append('g').attr('class', 'nv-pie');
|
|
paulo@89
|
10232 gEnter.append('g').attr('class', 'nv-pieLabels');
|
|
paulo@89
|
10233
|
|
paulo@89
|
10234 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
10235 g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
|
paulo@89
|
10236 g.select('.nv-pieLabels').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
|
paulo@89
|
10237
|
|
paulo@89
|
10238 //
|
|
paulo@89
|
10239 container.on('click', function(d,i) {
|
|
paulo@89
|
10240 dispatch.chartClick({
|
|
paulo@89
|
10241 data: d,
|
|
paulo@89
|
10242 index: i,
|
|
paulo@89
|
10243 pos: d3.event,
|
|
paulo@89
|
10244 id: id
|
|
paulo@89
|
10245 });
|
|
paulo@89
|
10246 });
|
|
paulo@89
|
10247
|
|
paulo@89
|
10248 arcs = [];
|
|
paulo@89
|
10249 arcsOver = [];
|
|
paulo@89
|
10250 for (var i = 0; i < data[0].length; i++) {
|
|
paulo@89
|
10251
|
|
paulo@89
|
10252 var arc = d3.svg.arc().outerRadius(arcsRadiusOuter[i]);
|
|
paulo@89
|
10253 var arcOver = d3.svg.arc().outerRadius(arcsRadiusOuter[i] + 5);
|
|
paulo@89
|
10254
|
|
paulo@89
|
10255 if (startAngle !== false) {
|
|
paulo@89
|
10256 arc.startAngle(startAngle);
|
|
paulo@89
|
10257 arcOver.startAngle(startAngle);
|
|
paulo@89
|
10258 }
|
|
paulo@89
|
10259 if (endAngle !== false) {
|
|
paulo@89
|
10260 arc.endAngle(endAngle);
|
|
paulo@89
|
10261 arcOver.endAngle(endAngle);
|
|
paulo@89
|
10262 }
|
|
paulo@89
|
10263 if (donut) {
|
|
paulo@89
|
10264 arc.innerRadius(arcsRadiusInner[i]);
|
|
paulo@89
|
10265 arcOver.innerRadius(arcsRadiusInner[i]);
|
|
paulo@89
|
10266 }
|
|
paulo@89
|
10267
|
|
paulo@89
|
10268 if (arc.cornerRadius && cornerRadius) {
|
|
paulo@89
|
10269 arc.cornerRadius(cornerRadius);
|
|
paulo@89
|
10270 arcOver.cornerRadius(cornerRadius);
|
|
paulo@89
|
10271 }
|
|
paulo@89
|
10272
|
|
paulo@89
|
10273 arcs.push(arc);
|
|
paulo@89
|
10274 arcsOver.push(arcOver);
|
|
paulo@89
|
10275 }
|
|
paulo@89
|
10276
|
|
paulo@89
|
10277 // Setup the Pie chart and choose the data element
|
|
paulo@89
|
10278 var pie = d3.layout.pie()
|
|
paulo@89
|
10279 .sort(null)
|
|
paulo@89
|
10280 .value(function(d) { return d.disabled ? 0 : getY(d) });
|
|
paulo@89
|
10281
|
|
paulo@89
|
10282 // padAngle added in d3 3.5
|
|
paulo@89
|
10283 if (pie.padAngle && padAngle) {
|
|
paulo@89
|
10284 pie.padAngle(padAngle);
|
|
paulo@89
|
10285 }
|
|
paulo@89
|
10286
|
|
paulo@89
|
10287 // if title is specified and donut, put it in the middle
|
|
paulo@89
|
10288 if (donut && title) {
|
|
paulo@89
|
10289 g_pie.append("text").attr('class', 'nv-pie-title');
|
|
paulo@89
|
10290
|
|
paulo@89
|
10291 wrap.select('.nv-pie-title')
|
|
paulo@89
|
10292 .style("text-anchor", "middle")
|
|
paulo@89
|
10293 .text(function (d) {
|
|
paulo@89
|
10294 return title;
|
|
paulo@89
|
10295 })
|
|
paulo@89
|
10296 .style("font-size", (Math.min(availableWidth, availableHeight)) * donutRatio * 2 / (title.length + 2) + "px")
|
|
paulo@89
|
10297 .attr("dy", "0.35em") // trick to vertically center text
|
|
paulo@89
|
10298 .attr('transform', function(d, i) {
|
|
paulo@89
|
10299 return 'translate(0, '+ titleOffset + ')';
|
|
paulo@89
|
10300 });
|
|
paulo@89
|
10301 }
|
|
paulo@89
|
10302
|
|
paulo@89
|
10303 var slices = wrap.select('.nv-pie').selectAll('.nv-slice').data(pie);
|
|
paulo@89
|
10304 var pieLabels = wrap.select('.nv-pieLabels').selectAll('.nv-label').data(pie);
|
|
paulo@89
|
10305
|
|
paulo@89
|
10306 slices.exit().remove();
|
|
paulo@89
|
10307 pieLabels.exit().remove();
|
|
paulo@89
|
10308
|
|
paulo@89
|
10309 var ae = slices.enter().append('g');
|
|
paulo@89
|
10310 ae.attr('class', 'nv-slice');
|
|
paulo@89
|
10311 ae.on('mouseover', function(d, i) {
|
|
paulo@89
|
10312 d3.select(this).classed('hover', true);
|
|
paulo@89
|
10313 if (growOnHover) {
|
|
paulo@89
|
10314 d3.select(this).select("path").transition()
|
|
paulo@89
|
10315 .duration(70)
|
|
paulo@89
|
10316 .attr("d", arcsOver[i]);
|
|
paulo@89
|
10317 }
|
|
paulo@89
|
10318 dispatch.elementMouseover({
|
|
paulo@89
|
10319 data: d.data,
|
|
paulo@89
|
10320 index: i,
|
|
paulo@89
|
10321 color: d3.select(this).style("fill")
|
|
paulo@89
|
10322 });
|
|
paulo@89
|
10323 });
|
|
paulo@89
|
10324 ae.on('mouseout', function(d, i) {
|
|
paulo@89
|
10325 d3.select(this).classed('hover', false);
|
|
paulo@89
|
10326 if (growOnHover) {
|
|
paulo@89
|
10327 d3.select(this).select("path").transition()
|
|
paulo@89
|
10328 .duration(50)
|
|
paulo@89
|
10329 .attr("d", arcs[i]);
|
|
paulo@89
|
10330 }
|
|
paulo@89
|
10331 dispatch.elementMouseout({data: d.data, index: i});
|
|
paulo@89
|
10332 });
|
|
paulo@89
|
10333 ae.on('mousemove', function(d, i) {
|
|
paulo@89
|
10334 dispatch.elementMousemove({data: d.data, index: i});
|
|
paulo@89
|
10335 });
|
|
paulo@89
|
10336 ae.on('click', function(d, i) {
|
|
paulo@89
|
10337 dispatch.elementClick({
|
|
paulo@89
|
10338 data: d.data,
|
|
paulo@89
|
10339 index: i,
|
|
paulo@89
|
10340 color: d3.select(this).style("fill")
|
|
paulo@89
|
10341 });
|
|
paulo@89
|
10342 });
|
|
paulo@89
|
10343 ae.on('dblclick', function(d, i) {
|
|
paulo@89
|
10344 dispatch.elementDblClick({
|
|
paulo@89
|
10345 data: d.data,
|
|
paulo@89
|
10346 index: i,
|
|
paulo@89
|
10347 color: d3.select(this).style("fill")
|
|
paulo@89
|
10348 });
|
|
paulo@89
|
10349 });
|
|
paulo@89
|
10350
|
|
paulo@89
|
10351 slices.attr('fill', function(d,i) { return color(d.data, i); });
|
|
paulo@89
|
10352 slices.attr('stroke', function(d,i) { return color(d.data, i); });
|
|
paulo@89
|
10353
|
|
paulo@89
|
10354 var paths = ae.append('path').each(function(d) {
|
|
paulo@89
|
10355 this._current = d;
|
|
paulo@89
|
10356 });
|
|
paulo@89
|
10357
|
|
paulo@89
|
10358 slices.select('path')
|
|
paulo@89
|
10359 .transition()
|
|
paulo@89
|
10360 .attr('d', function (d, i) { return arcs[i](d); })
|
|
paulo@89
|
10361 .attrTween('d', arcTween);
|
|
paulo@89
|
10362
|
|
paulo@89
|
10363 if (showLabels) {
|
|
paulo@89
|
10364 // This does the normal label
|
|
paulo@89
|
10365 var labelsArc = [];
|
|
paulo@89
|
10366 for (var i = 0; i < data[0].length; i++) {
|
|
paulo@89
|
10367 labelsArc.push(arcs[i]);
|
|
paulo@89
|
10368
|
|
paulo@89
|
10369 if (labelsOutside) {
|
|
paulo@89
|
10370 if (donut) {
|
|
paulo@89
|
10371 labelsArc[i] = d3.svg.arc().outerRadius(arcs[i].outerRadius());
|
|
paulo@89
|
10372 if (startAngle !== false) labelsArc[i].startAngle(startAngle);
|
|
paulo@89
|
10373 if (endAngle !== false) labelsArc[i].endAngle(endAngle);
|
|
paulo@89
|
10374 }
|
|
paulo@89
|
10375 } else if (!donut) {
|
|
paulo@89
|
10376 labelsArc[i].innerRadius(0);
|
|
paulo@89
|
10377 }
|
|
paulo@89
|
10378 }
|
|
paulo@89
|
10379
|
|
paulo@89
|
10380 pieLabels.enter().append("g").classed("nv-label",true).each(function(d,i) {
|
|
paulo@89
|
10381 var group = d3.select(this);
|
|
paulo@89
|
10382
|
|
paulo@89
|
10383 group.attr('transform', function (d, i) {
|
|
paulo@89
|
10384 if (labelSunbeamLayout) {
|
|
paulo@89
|
10385 d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate
|
|
paulo@89
|
10386 d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate
|
|
paulo@89
|
10387 var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
|
|
paulo@89
|
10388 if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
|
|
paulo@89
|
10389 rotateAngle -= 90;
|
|
paulo@89
|
10390 } else {
|
|
paulo@89
|
10391 rotateAngle += 90;
|
|
paulo@89
|
10392 }
|
|
paulo@89
|
10393 return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';
|
|
paulo@89
|
10394 } else {
|
|
paulo@89
|
10395 d.outerRadius = radius + 10; // Set Outer Coordinate
|
|
paulo@89
|
10396 d.innerRadius = radius + 15; // Set Inner Coordinate
|
|
paulo@89
|
10397 return 'translate(' + labelsArc[i].centroid(d) + ')'
|
|
paulo@89
|
10398 }
|
|
paulo@89
|
10399 });
|
|
paulo@89
|
10400
|
|
paulo@89
|
10401 group.append('rect')
|
|
paulo@89
|
10402 .style('stroke', '#fff')
|
|
paulo@89
|
10403 .style('fill', '#fff')
|
|
paulo@89
|
10404 .attr("rx", 3)
|
|
paulo@89
|
10405 .attr("ry", 3);
|
|
paulo@89
|
10406
|
|
paulo@89
|
10407 group.append('text')
|
|
paulo@89
|
10408 .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
|
|
paulo@89
|
10409 .style('fill', '#000')
|
|
paulo@89
|
10410 });
|
|
paulo@89
|
10411
|
|
paulo@89
|
10412 var labelLocationHash = {};
|
|
paulo@89
|
10413 var avgHeight = 14;
|
|
paulo@89
|
10414 var avgWidth = 140;
|
|
paulo@89
|
10415 var createHashKey = function(coordinates) {
|
|
paulo@89
|
10416 return Math.floor(coordinates[0]/avgWidth) * avgWidth + ',' + Math.floor(coordinates[1]/avgHeight) * avgHeight;
|
|
paulo@89
|
10417 };
|
|
paulo@89
|
10418
|
|
paulo@89
|
10419 pieLabels.watchTransition(renderWatch, 'pie labels').attr('transform', function (d, i) {
|
|
paulo@89
|
10420 if (labelSunbeamLayout) {
|
|
paulo@89
|
10421 d.outerRadius = arcsRadiusOuter[i] + 10; // Set Outer Coordinate
|
|
paulo@89
|
10422 d.innerRadius = arcsRadiusOuter[i] + 15; // Set Inner Coordinate
|
|
paulo@89
|
10423 var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
|
|
paulo@89
|
10424 if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
|
|
paulo@89
|
10425 rotateAngle -= 90;
|
|
paulo@89
|
10426 } else {
|
|
paulo@89
|
10427 rotateAngle += 90;
|
|
paulo@89
|
10428 }
|
|
paulo@89
|
10429 return 'translate(' + labelsArc[i].centroid(d) + ') rotate(' + rotateAngle + ')';
|
|
paulo@89
|
10430 } else {
|
|
paulo@89
|
10431 d.outerRadius = radius + 10; // Set Outer Coordinate
|
|
paulo@89
|
10432 d.innerRadius = radius + 15; // Set Inner Coordinate
|
|
paulo@89
|
10433
|
|
paulo@89
|
10434 /*
|
|
paulo@89
|
10435 Overlapping pie labels are not good. What this attempts to do is, prevent overlapping.
|
|
paulo@89
|
10436 Each label location is hashed, and if a hash collision occurs, we assume an overlap.
|
|
paulo@89
|
10437 Adjust the label's y-position to remove the overlap.
|
|
paulo@89
|
10438 */
|
|
paulo@89
|
10439 var center = labelsArc[i].centroid(d);
|
|
paulo@89
|
10440 if (d.value) {
|
|
paulo@89
|
10441 var hashKey = createHashKey(center);
|
|
paulo@89
|
10442 if (labelLocationHash[hashKey]) {
|
|
paulo@89
|
10443 center[1] -= avgHeight;
|
|
paulo@89
|
10444 }
|
|
paulo@89
|
10445 labelLocationHash[createHashKey(center)] = true;
|
|
paulo@89
|
10446 }
|
|
paulo@89
|
10447 return 'translate(' + center + ')'
|
|
paulo@89
|
10448 }
|
|
paulo@89
|
10449 });
|
|
paulo@89
|
10450
|
|
paulo@89
|
10451 pieLabels.select(".nv-label text")
|
|
paulo@89
|
10452 .style('text-anchor', function(d,i) {
|
|
paulo@89
|
10453 //center the text on it's origin or begin/end if orthogonal aligned
|
|
paulo@89
|
10454 return labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle';
|
|
paulo@89
|
10455 })
|
|
paulo@89
|
10456 .text(function(d, i) {
|
|
paulo@89
|
10457 var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
|
|
paulo@89
|
10458 var label = '';
|
|
paulo@89
|
10459 if (!d.value || percent < labelThreshold) return '';
|
|
paulo@89
|
10460
|
|
paulo@89
|
10461 if(typeof labelType === 'function') {
|
|
paulo@89
|
10462 label = labelType(d, i, {
|
|
paulo@89
|
10463 'key': getX(d.data),
|
|
paulo@89
|
10464 'value': getY(d.data),
|
|
paulo@89
|
10465 'percent': valueFormat(percent)
|
|
paulo@89
|
10466 });
|
|
paulo@89
|
10467 } else {
|
|
paulo@89
|
10468 switch (labelType) {
|
|
paulo@89
|
10469 case 'key':
|
|
paulo@89
|
10470 label = getX(d.data);
|
|
paulo@89
|
10471 break;
|
|
paulo@89
|
10472 case 'value':
|
|
paulo@89
|
10473 label = valueFormat(getY(d.data));
|
|
paulo@89
|
10474 break;
|
|
paulo@89
|
10475 case 'percent':
|
|
paulo@89
|
10476 label = d3.format('%')(percent);
|
|
paulo@89
|
10477 break;
|
|
paulo@89
|
10478 }
|
|
paulo@89
|
10479 }
|
|
paulo@89
|
10480 return label;
|
|
paulo@89
|
10481 })
|
|
paulo@89
|
10482 ;
|
|
paulo@89
|
10483 }
|
|
paulo@89
|
10484
|
|
paulo@89
|
10485
|
|
paulo@89
|
10486 // Computes the angle of an arc, converting from radians to degrees.
|
|
paulo@89
|
10487 function angle(d) {
|
|
paulo@89
|
10488 var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
|
|
paulo@89
|
10489 return a > 90 ? a - 180 : a;
|
|
paulo@89
|
10490 }
|
|
paulo@89
|
10491
|
|
paulo@89
|
10492 function arcTween(a, idx) {
|
|
paulo@89
|
10493 a.endAngle = isNaN(a.endAngle) ? 0 : a.endAngle;
|
|
paulo@89
|
10494 a.startAngle = isNaN(a.startAngle) ? 0 : a.startAngle;
|
|
paulo@89
|
10495 if (!donut) a.innerRadius = 0;
|
|
paulo@89
|
10496 var i = d3.interpolate(this._current, a);
|
|
paulo@89
|
10497 this._current = i(0);
|
|
paulo@89
|
10498 return function (t) {
|
|
paulo@89
|
10499 return arcs[idx](i(t));
|
|
paulo@89
|
10500 };
|
|
paulo@89
|
10501 }
|
|
paulo@89
|
10502 });
|
|
paulo@89
|
10503
|
|
paulo@89
|
10504 renderWatch.renderEnd('pie immediate');
|
|
paulo@89
|
10505 return chart;
|
|
paulo@89
|
10506 }
|
|
paulo@89
|
10507
|
|
paulo@89
|
10508 //============================================================
|
|
paulo@89
|
10509 // Expose Public Variables
|
|
paulo@89
|
10510 //------------------------------------------------------------
|
|
paulo@89
|
10511
|
|
paulo@89
|
10512 chart.dispatch = dispatch;
|
|
paulo@89
|
10513 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
10514
|
|
paulo@89
|
10515 chart._options = Object.create({}, {
|
|
paulo@89
|
10516 // simple options, just get/set the necessary values
|
|
paulo@89
|
10517 arcsRadius: { get: function () { return arcsRadius; }, set: function (_) { arcsRadius = _; } },
|
|
paulo@89
|
10518 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
10519 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
10520 showLabels: {get: function(){return showLabels;}, set: function(_){showLabels=_;}},
|
|
paulo@89
|
10521 title: {get: function(){return title;}, set: function(_){title=_;}},
|
|
paulo@89
|
10522 titleOffset: {get: function(){return titleOffset;}, set: function(_){titleOffset=_;}},
|
|
paulo@89
|
10523 labelThreshold: {get: function(){return labelThreshold;}, set: function(_){labelThreshold=_;}},
|
|
paulo@89
|
10524 valueFormat: {get: function(){return valueFormat;}, set: function(_){valueFormat=_;}},
|
|
paulo@89
|
10525 x: {get: function(){return getX;}, set: function(_){getX=_;}},
|
|
paulo@89
|
10526 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
10527 endAngle: {get: function(){return endAngle;}, set: function(_){endAngle=_;}},
|
|
paulo@89
|
10528 startAngle: {get: function(){return startAngle;}, set: function(_){startAngle=_;}},
|
|
paulo@89
|
10529 padAngle: {get: function(){return padAngle;}, set: function(_){padAngle=_;}},
|
|
paulo@89
|
10530 cornerRadius: {get: function(){return cornerRadius;}, set: function(_){cornerRadius=_;}},
|
|
paulo@89
|
10531 donutRatio: {get: function(){return donutRatio;}, set: function(_){donutRatio=_;}},
|
|
paulo@89
|
10532 labelsOutside: {get: function(){return labelsOutside;}, set: function(_){labelsOutside=_;}},
|
|
paulo@89
|
10533 labelSunbeamLayout: {get: function(){return labelSunbeamLayout;}, set: function(_){labelSunbeamLayout=_;}},
|
|
paulo@89
|
10534 donut: {get: function(){return donut;}, set: function(_){donut=_;}},
|
|
paulo@89
|
10535 growOnHover: {get: function(){return growOnHover;}, set: function(_){growOnHover=_;}},
|
|
paulo@89
|
10536
|
|
paulo@89
|
10537 // depreciated after 1.7.1
|
|
paulo@89
|
10538 pieLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){
|
|
paulo@89
|
10539 labelsOutside=_;
|
|
paulo@89
|
10540 nv.deprecated('pieLabelsOutside', 'use labelsOutside instead');
|
|
paulo@89
|
10541 }},
|
|
paulo@89
|
10542 // depreciated after 1.7.1
|
|
paulo@89
|
10543 donutLabelsOutside: {get: function(){return labelsOutside;}, set: function(_){
|
|
paulo@89
|
10544 labelsOutside=_;
|
|
paulo@89
|
10545 nv.deprecated('donutLabelsOutside', 'use labelsOutside instead');
|
|
paulo@89
|
10546 }},
|
|
paulo@89
|
10547 // deprecated after 1.7.1
|
|
paulo@89
|
10548 labelFormat: {get: function(){ return valueFormat;}, set: function(_) {
|
|
paulo@89
|
10549 valueFormat=_;
|
|
paulo@89
|
10550 nv.deprecated('labelFormat','use valueFormat instead');
|
|
paulo@89
|
10551 }},
|
|
paulo@89
|
10552
|
|
paulo@89
|
10553 // options that require extra logic in the setter
|
|
paulo@89
|
10554 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
10555 margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
|
|
paulo@89
|
10556 margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
|
|
paulo@89
|
10557 margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
|
|
paulo@89
|
10558 margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
|
|
paulo@89
|
10559 }},
|
|
paulo@89
|
10560 y: {get: function(){return getY;}, set: function(_){
|
|
paulo@89
|
10561 getY=d3.functor(_);
|
|
paulo@89
|
10562 }},
|
|
paulo@89
|
10563 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
10564 color=nv.utils.getColor(_);
|
|
paulo@89
|
10565 }},
|
|
paulo@89
|
10566 labelType: {get: function(){return labelType;}, set: function(_){
|
|
paulo@89
|
10567 labelType= _ || 'key';
|
|
paulo@89
|
10568 }}
|
|
paulo@89
|
10569 });
|
|
paulo@89
|
10570
|
|
paulo@89
|
10571 nv.utils.initOptions(chart);
|
|
paulo@89
|
10572 return chart;
|
|
paulo@89
|
10573 };
|
|
paulo@89
|
10574 nv.models.pieChart = function() {
|
|
paulo@89
|
10575 "use strict";
|
|
paulo@89
|
10576
|
|
paulo@89
|
10577 //============================================================
|
|
paulo@89
|
10578 // Public Variables with Default Settings
|
|
paulo@89
|
10579 //------------------------------------------------------------
|
|
paulo@89
|
10580
|
|
paulo@89
|
10581 var pie = nv.models.pie();
|
|
paulo@89
|
10582 var legend = nv.models.legend();
|
|
paulo@89
|
10583 var tooltip = nv.models.tooltip();
|
|
paulo@89
|
10584
|
|
paulo@89
|
10585 var margin = {top: 30, right: 20, bottom: 20, left: 20}
|
|
paulo@89
|
10586 , width = null
|
|
paulo@89
|
10587 , height = null
|
|
paulo@89
|
10588 , showLegend = true
|
|
paulo@89
|
10589 , legendPosition = "top"
|
|
paulo@89
|
10590 , color = nv.utils.defaultColor()
|
|
paulo@89
|
10591 , state = nv.utils.state()
|
|
paulo@89
|
10592 , defaultState = null
|
|
paulo@89
|
10593 , noData = null
|
|
paulo@89
|
10594 , duration = 250
|
|
paulo@89
|
10595 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState','renderEnd')
|
|
paulo@89
|
10596 ;
|
|
paulo@89
|
10597
|
|
paulo@89
|
10598 tooltip
|
|
paulo@89
|
10599 .headerEnabled(false)
|
|
paulo@89
|
10600 .duration(0)
|
|
paulo@89
|
10601 .valueFormatter(function(d, i) {
|
|
paulo@89
|
10602 return pie.valueFormat()(d, i);
|
|
paulo@89
|
10603 });
|
|
paulo@89
|
10604
|
|
paulo@89
|
10605 //============================================================
|
|
paulo@89
|
10606 // Private Variables
|
|
paulo@89
|
10607 //------------------------------------------------------------
|
|
paulo@89
|
10608
|
|
paulo@89
|
10609 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
10610
|
|
paulo@89
|
10611 var stateGetter = function(data) {
|
|
paulo@89
|
10612 return function(){
|
|
paulo@89
|
10613 return {
|
|
paulo@89
|
10614 active: data.map(function(d) { return !d.disabled })
|
|
paulo@89
|
10615 };
|
|
paulo@89
|
10616 }
|
|
paulo@89
|
10617 };
|
|
paulo@89
|
10618
|
|
paulo@89
|
10619 var stateSetter = function(data) {
|
|
paulo@89
|
10620 return function(state) {
|
|
paulo@89
|
10621 if (state.active !== undefined) {
|
|
paulo@89
|
10622 data.forEach(function (series, i) {
|
|
paulo@89
|
10623 series.disabled = !state.active[i];
|
|
paulo@89
|
10624 });
|
|
paulo@89
|
10625 }
|
|
paulo@89
|
10626 }
|
|
paulo@89
|
10627 };
|
|
paulo@89
|
10628
|
|
paulo@89
|
10629 //============================================================
|
|
paulo@89
|
10630 // Chart function
|
|
paulo@89
|
10631 //------------------------------------------------------------
|
|
paulo@89
|
10632
|
|
paulo@89
|
10633 function chart(selection) {
|
|
paulo@89
|
10634 renderWatch.reset();
|
|
paulo@89
|
10635 renderWatch.models(pie);
|
|
paulo@89
|
10636
|
|
paulo@89
|
10637 selection.each(function(data) {
|
|
paulo@89
|
10638 var container = d3.select(this);
|
|
paulo@89
|
10639 nv.utils.initSVG(container);
|
|
paulo@89
|
10640
|
|
paulo@89
|
10641 var that = this;
|
|
paulo@89
|
10642 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
10643 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
10644
|
|
paulo@89
|
10645 chart.update = function() { container.transition().call(chart); };
|
|
paulo@89
|
10646 chart.container = this;
|
|
paulo@89
|
10647
|
|
paulo@89
|
10648 state.setter(stateSetter(data), chart.update)
|
|
paulo@89
|
10649 .getter(stateGetter(data))
|
|
paulo@89
|
10650 .update();
|
|
paulo@89
|
10651
|
|
paulo@89
|
10652 //set state.disabled
|
|
paulo@89
|
10653 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
10654
|
|
paulo@89
|
10655 if (!defaultState) {
|
|
paulo@89
|
10656 var key;
|
|
paulo@89
|
10657 defaultState = {};
|
|
paulo@89
|
10658 for (key in state) {
|
|
paulo@89
|
10659 if (state[key] instanceof Array)
|
|
paulo@89
|
10660 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
10661 else
|
|
paulo@89
|
10662 defaultState[key] = state[key];
|
|
paulo@89
|
10663 }
|
|
paulo@89
|
10664 }
|
|
paulo@89
|
10665
|
|
paulo@89
|
10666 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
10667 if (!data || !data.length) {
|
|
paulo@89
|
10668 nv.utils.noData(chart, container);
|
|
paulo@89
|
10669 return chart;
|
|
paulo@89
|
10670 } else {
|
|
paulo@89
|
10671 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
10672 }
|
|
paulo@89
|
10673
|
|
paulo@89
|
10674 // Setup containers and skeleton of chart
|
|
paulo@89
|
10675 var wrap = container.selectAll('g.nv-wrap.nv-pieChart').data([data]);
|
|
paulo@89
|
10676 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-pieChart').append('g');
|
|
paulo@89
|
10677 var g = wrap.select('g');
|
|
paulo@89
|
10678
|
|
paulo@89
|
10679 gEnter.append('g').attr('class', 'nv-pieWrap');
|
|
paulo@89
|
10680 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
10681
|
|
paulo@89
|
10682 // Legend
|
|
paulo@89
|
10683 if (showLegend) {
|
|
paulo@89
|
10684 if (legendPosition === "top") {
|
|
paulo@89
|
10685 legend.width( availableWidth ).key(pie.x());
|
|
paulo@89
|
10686
|
|
paulo@89
|
10687 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
10688 .datum(data)
|
|
paulo@89
|
10689 .call(legend);
|
|
paulo@89
|
10690
|
|
paulo@89
|
10691 if ( margin.top != legend.height()) {
|
|
paulo@89
|
10692 margin.top = legend.height();
|
|
paulo@89
|
10693 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
10694 }
|
|
paulo@89
|
10695
|
|
paulo@89
|
10696 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
10697 .attr('transform', 'translate(0,' + (-margin.top) +')');
|
|
paulo@89
|
10698 } else if (legendPosition === "right") {
|
|
paulo@89
|
10699 var legendWidth = nv.models.legend().width();
|
|
paulo@89
|
10700 if (availableWidth / 2 < legendWidth) {
|
|
paulo@89
|
10701 legendWidth = (availableWidth / 2)
|
|
paulo@89
|
10702 }
|
|
paulo@89
|
10703 legend.height(availableHeight).key(pie.x());
|
|
paulo@89
|
10704 legend.width(legendWidth);
|
|
paulo@89
|
10705 availableWidth -= legend.width();
|
|
paulo@89
|
10706
|
|
paulo@89
|
10707 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
10708 .datum(data)
|
|
paulo@89
|
10709 .call(legend)
|
|
paulo@89
|
10710 .attr('transform', 'translate(' + (availableWidth) +',0)');
|
|
paulo@89
|
10711 }
|
|
paulo@89
|
10712 }
|
|
paulo@89
|
10713 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
10714
|
|
paulo@89
|
10715 // Main Chart Component(s)
|
|
paulo@89
|
10716 pie.width(availableWidth).height(availableHeight);
|
|
paulo@89
|
10717 var pieWrap = g.select('.nv-pieWrap').datum([data]);
|
|
paulo@89
|
10718 d3.transition(pieWrap).call(pie);
|
|
paulo@89
|
10719
|
|
paulo@89
|
10720 //============================================================
|
|
paulo@89
|
10721 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
10722 //------------------------------------------------------------
|
|
paulo@89
|
10723
|
|
paulo@89
|
10724 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
10725 for (var key in newState) {
|
|
paulo@89
|
10726 state[key] = newState[key];
|
|
paulo@89
|
10727 }
|
|
paulo@89
|
10728 dispatch.stateChange(state);
|
|
paulo@89
|
10729 chart.update();
|
|
paulo@89
|
10730 });
|
|
paulo@89
|
10731
|
|
paulo@89
|
10732 // Update chart from a state object passed to event handler
|
|
paulo@89
|
10733 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
10734 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
10735 data.forEach(function(series,i) {
|
|
paulo@89
|
10736 series.disabled = e.disabled[i];
|
|
paulo@89
|
10737 });
|
|
paulo@89
|
10738 state.disabled = e.disabled;
|
|
paulo@89
|
10739 }
|
|
paulo@89
|
10740 chart.update();
|
|
paulo@89
|
10741 });
|
|
paulo@89
|
10742 });
|
|
paulo@89
|
10743
|
|
paulo@89
|
10744 renderWatch.renderEnd('pieChart immediate');
|
|
paulo@89
|
10745 return chart;
|
|
paulo@89
|
10746 }
|
|
paulo@89
|
10747
|
|
paulo@89
|
10748 //============================================================
|
|
paulo@89
|
10749 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
10750 //------------------------------------------------------------
|
|
paulo@89
|
10751
|
|
paulo@89
|
10752 pie.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
10753 evt['series'] = {
|
|
paulo@89
|
10754 key: chart.x()(evt.data),
|
|
paulo@89
|
10755 value: chart.y()(evt.data),
|
|
paulo@89
|
10756 color: evt.color
|
|
paulo@89
|
10757 };
|
|
paulo@89
|
10758 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
10759 });
|
|
paulo@89
|
10760
|
|
paulo@89
|
10761 pie.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
10762 tooltip.hidden(true);
|
|
paulo@89
|
10763 });
|
|
paulo@89
|
10764
|
|
paulo@89
|
10765 pie.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
10766 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
10767 });
|
|
paulo@89
|
10768
|
|
paulo@89
|
10769 //============================================================
|
|
paulo@89
|
10770 // Expose Public Variables
|
|
paulo@89
|
10771 //------------------------------------------------------------
|
|
paulo@89
|
10772
|
|
paulo@89
|
10773 // expose chart's sub-components
|
|
paulo@89
|
10774 chart.legend = legend;
|
|
paulo@89
|
10775 chart.dispatch = dispatch;
|
|
paulo@89
|
10776 chart.pie = pie;
|
|
paulo@89
|
10777 chart.tooltip = tooltip;
|
|
paulo@89
|
10778 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
10779
|
|
paulo@89
|
10780 // use Object get/set functionality to map between vars and chart functions
|
|
paulo@89
|
10781 chart._options = Object.create({}, {
|
|
paulo@89
|
10782 // simple options, just get/set the necessary values
|
|
paulo@89
|
10783 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
10784 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
10785 legendPosition: {get: function(){return legendPosition;}, set: function(_){legendPosition=_;}},
|
|
paulo@89
|
10786 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
10787
|
|
paulo@89
|
10788 // deprecated options
|
|
paulo@89
|
10789 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
10790 // deprecated after 1.7.1
|
|
paulo@89
|
10791 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
10792 tooltip.enabled(!!_);
|
|
paulo@89
|
10793 }},
|
|
paulo@89
|
10794 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
10795 // deprecated after 1.7.1
|
|
paulo@89
|
10796 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
10797 tooltip.contentGenerator(_);
|
|
paulo@89
|
10798 }},
|
|
paulo@89
|
10799
|
|
paulo@89
|
10800 // options that require extra logic in the setter
|
|
paulo@89
|
10801 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
10802 color = _;
|
|
paulo@89
|
10803 legend.color(color);
|
|
paulo@89
|
10804 pie.color(color);
|
|
paulo@89
|
10805 }},
|
|
paulo@89
|
10806 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
10807 duration = _;
|
|
paulo@89
|
10808 renderWatch.reset(duration);
|
|
paulo@89
|
10809 }},
|
|
paulo@89
|
10810 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
10811 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
10812 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
10813 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
10814 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
10815 }}
|
|
paulo@89
|
10816 });
|
|
paulo@89
|
10817 nv.utils.inheritOptions(chart, pie);
|
|
paulo@89
|
10818 nv.utils.initOptions(chart);
|
|
paulo@89
|
10819 return chart;
|
|
paulo@89
|
10820 };
|
|
paulo@89
|
10821
|
|
paulo@89
|
10822 nv.models.scatter = function() {
|
|
paulo@89
|
10823 "use strict";
|
|
paulo@89
|
10824
|
|
paulo@89
|
10825 //============================================================
|
|
paulo@89
|
10826 // Public Variables with Default Settings
|
|
paulo@89
|
10827 //------------------------------------------------------------
|
|
paulo@89
|
10828
|
|
paulo@89
|
10829 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
10830 , width = null
|
|
paulo@89
|
10831 , height = null
|
|
paulo@89
|
10832 , color = nv.utils.defaultColor() // chooses color
|
|
paulo@89
|
10833 , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't select one
|
|
paulo@89
|
10834 , container = null
|
|
paulo@89
|
10835 , x = d3.scale.linear()
|
|
paulo@89
|
10836 , y = d3.scale.linear()
|
|
paulo@89
|
10837 , z = d3.scale.linear() //linear because d3.svg.shape.size is treated as area
|
|
paulo@89
|
10838 , getX = function(d) { return d.x } // accessor to get the x value
|
|
paulo@89
|
10839 , getY = function(d) { return d.y } // accessor to get the y value
|
|
paulo@89
|
10840 , getSize = function(d) { return d.size || 1} // accessor to get the point size
|
|
paulo@89
|
10841 , getShape = function(d) { return d.shape || 'circle' } // accessor to get point shape
|
|
paulo@89
|
10842 , forceX = [] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
|
|
paulo@89
|
10843 , forceY = [] // List of numbers to Force into the Y scale
|
|
paulo@89
|
10844 , forceSize = [] // List of numbers to Force into the Size scale
|
|
paulo@89
|
10845 , interactive = true // If true, plots a voronoi overlay for advanced point intersection
|
|
paulo@89
|
10846 , pointActive = function(d) { return !d.notActive } // any points that return false will be filtered out
|
|
paulo@89
|
10847 , padData = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
|
|
paulo@89
|
10848 , padDataOuter = .1 //outerPadding to imitate ordinal scale outer padding
|
|
paulo@89
|
10849 , clipEdge = false // if true, masks points within x and y scale
|
|
paulo@89
|
10850 , clipVoronoi = true // if true, masks each point with a circle... can turn off to slightly increase performance
|
|
paulo@89
|
10851 , showVoronoi = false // display the voronoi areas
|
|
paulo@89
|
10852 , clipRadius = function() { return 25 } // function to get the radius for voronoi point clips
|
|
paulo@89
|
10853 , xDomain = null // Override x domain (skips the calculation from data)
|
|
paulo@89
|
10854 , yDomain = null // Override y domain
|
|
paulo@89
|
10855 , xRange = null // Override x range
|
|
paulo@89
|
10856 , yRange = null // Override y range
|
|
paulo@89
|
10857 , sizeDomain = null // Override point size domain
|
|
paulo@89
|
10858 , sizeRange = null
|
|
paulo@89
|
10859 , singlePoint = false
|
|
paulo@89
|
10860 , dispatch = d3.dispatch('elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
|
|
paulo@89
|
10861 , useVoronoi = true
|
|
paulo@89
|
10862 , duration = 250
|
|
paulo@89
|
10863 ;
|
|
paulo@89
|
10864
|
|
paulo@89
|
10865
|
|
paulo@89
|
10866 //============================================================
|
|
paulo@89
|
10867 // Private Variables
|
|
paulo@89
|
10868 //------------------------------------------------------------
|
|
paulo@89
|
10869
|
|
paulo@89
|
10870 var x0, y0, z0 // used to store previous scales
|
|
paulo@89
|
10871 , timeoutID
|
|
paulo@89
|
10872 , needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips
|
|
paulo@89
|
10873 , renderWatch = nv.utils.renderWatch(dispatch, duration)
|
|
paulo@89
|
10874 , _sizeRange_def = [16, 256]
|
|
paulo@89
|
10875 ;
|
|
paulo@89
|
10876
|
|
paulo@89
|
10877 function chart(selection) {
|
|
paulo@89
|
10878 renderWatch.reset();
|
|
paulo@89
|
10879 selection.each(function(data) {
|
|
paulo@89
|
10880 container = d3.select(this);
|
|
paulo@89
|
10881 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
10882 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
10883
|
|
paulo@89
|
10884 nv.utils.initSVG(container);
|
|
paulo@89
|
10885
|
|
paulo@89
|
10886 //add series index to each data point for reference
|
|
paulo@89
|
10887 data.forEach(function(series, i) {
|
|
paulo@89
|
10888 series.values.forEach(function(point) {
|
|
paulo@89
|
10889 point.series = i;
|
|
paulo@89
|
10890 });
|
|
paulo@89
|
10891 });
|
|
paulo@89
|
10892
|
|
paulo@89
|
10893 // Setup Scales
|
|
paulo@89
|
10894 // remap and flatten the data for use in calculating the scales' domains
|
|
paulo@89
|
10895 var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance
|
|
paulo@89
|
10896 d3.merge(
|
|
paulo@89
|
10897 data.map(function(d) {
|
|
paulo@89
|
10898 return d.values.map(function(d,i) {
|
|
paulo@89
|
10899 return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }
|
|
paulo@89
|
10900 })
|
|
paulo@89
|
10901 })
|
|
paulo@89
|
10902 );
|
|
paulo@89
|
10903
|
|
paulo@89
|
10904 x .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x; }).concat(forceX)))
|
|
paulo@89
|
10905
|
|
paulo@89
|
10906 if (padData && data[0])
|
|
paulo@89
|
10907 x.range(xRange || [(availableWidth * padDataOuter + availableWidth) / (2 *data[0].values.length), availableWidth - availableWidth * (1 + padDataOuter) / (2 * data[0].values.length) ]);
|
|
paulo@89
|
10908 //x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5) / data[0].values.length ]);
|
|
paulo@89
|
10909 else
|
|
paulo@89
|
10910 x.range(xRange || [0, availableWidth]);
|
|
paulo@89
|
10911
|
|
paulo@89
|
10912 y .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))
|
|
paulo@89
|
10913 .range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
10914
|
|
paulo@89
|
10915 z .domain(sizeDomain || d3.extent(seriesData.map(function(d) { return d.size }).concat(forceSize)))
|
|
paulo@89
|
10916 .range(sizeRange || _sizeRange_def);
|
|
paulo@89
|
10917
|
|
paulo@89
|
10918 // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
|
|
paulo@89
|
10919 singlePoint = x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1];
|
|
paulo@89
|
10920
|
|
paulo@89
|
10921 if (x.domain()[0] === x.domain()[1])
|
|
paulo@89
|
10922 x.domain()[0] ?
|
|
paulo@89
|
10923 x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
|
|
paulo@89
|
10924 : x.domain([-1,1]);
|
|
paulo@89
|
10925
|
|
paulo@89
|
10926 if (y.domain()[0] === y.domain()[1])
|
|
paulo@89
|
10927 y.domain()[0] ?
|
|
paulo@89
|
10928 y.domain([y.domain()[0] - y.domain()[0] * 0.01, y.domain()[1] + y.domain()[1] * 0.01])
|
|
paulo@89
|
10929 : y.domain([-1,1]);
|
|
paulo@89
|
10930
|
|
paulo@89
|
10931 if ( isNaN(x.domain()[0])) {
|
|
paulo@89
|
10932 x.domain([-1,1]);
|
|
paulo@89
|
10933 }
|
|
paulo@89
|
10934
|
|
paulo@89
|
10935 if ( isNaN(y.domain()[0])) {
|
|
paulo@89
|
10936 y.domain([-1,1]);
|
|
paulo@89
|
10937 }
|
|
paulo@89
|
10938
|
|
paulo@89
|
10939 x0 = x0 || x;
|
|
paulo@89
|
10940 y0 = y0 || y;
|
|
paulo@89
|
10941 z0 = z0 || z;
|
|
paulo@89
|
10942
|
|
paulo@89
|
10943 // Setup containers and skeleton of chart
|
|
paulo@89
|
10944 var wrap = container.selectAll('g.nv-wrap.nv-scatter').data([data]);
|
|
paulo@89
|
10945 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatter nv-chart-' + id);
|
|
paulo@89
|
10946 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
10947 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
10948 var g = wrap.select('g');
|
|
paulo@89
|
10949
|
|
paulo@89
|
10950 wrap.classed('nv-single-point', singlePoint);
|
|
paulo@89
|
10951 gEnter.append('g').attr('class', 'nv-groups');
|
|
paulo@89
|
10952 gEnter.append('g').attr('class', 'nv-point-paths');
|
|
paulo@89
|
10953 wrapEnter.append('g').attr('class', 'nv-point-clips');
|
|
paulo@89
|
10954
|
|
paulo@89
|
10955 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
10956
|
|
paulo@89
|
10957 defsEnter.append('clipPath')
|
|
paulo@89
|
10958 .attr('id', 'nv-edge-clip-' + id)
|
|
paulo@89
|
10959 .append('rect');
|
|
paulo@89
|
10960
|
|
paulo@89
|
10961 wrap.select('#nv-edge-clip-' + id + ' rect')
|
|
paulo@89
|
10962 .attr('width', availableWidth)
|
|
paulo@89
|
10963 .attr('height', (availableHeight > 0) ? availableHeight : 0);
|
|
paulo@89
|
10964
|
|
paulo@89
|
10965 g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
|
|
paulo@89
|
10966
|
|
paulo@89
|
10967 function updateInteractiveLayer() {
|
|
paulo@89
|
10968 // Always clear needs-update flag regardless of whether or not
|
|
paulo@89
|
10969 // we will actually do anything (avoids needless invocations).
|
|
paulo@89
|
10970 needsUpdate = false;
|
|
paulo@89
|
10971
|
|
paulo@89
|
10972 if (!interactive) return false;
|
|
paulo@89
|
10973
|
|
paulo@89
|
10974 // inject series and point index for reference into voronoi
|
|
paulo@89
|
10975 if (useVoronoi === true) {
|
|
paulo@89
|
10976 var vertices = d3.merge(data.map(function(group, groupIndex) {
|
|
paulo@89
|
10977 return group.values
|
|
paulo@89
|
10978 .map(function(point, pointIndex) {
|
|
paulo@89
|
10979 // *Adding noise to make duplicates very unlikely
|
|
paulo@89
|
10980 // *Injecting series and point index for reference
|
|
paulo@89
|
10981 /* *Adding a 'jitter' to the points, because there's an issue in d3.geom.voronoi.
|
|
paulo@89
|
10982 */
|
|
paulo@89
|
10983 var pX = getX(point,pointIndex);
|
|
paulo@89
|
10984 var pY = getY(point,pointIndex);
|
|
paulo@89
|
10985
|
|
paulo@89
|
10986 return [x(pX)+ Math.random() * 1e-4,
|
|
paulo@89
|
10987 y(pY)+ Math.random() * 1e-4,
|
|
paulo@89
|
10988 groupIndex,
|
|
paulo@89
|
10989 pointIndex, point]; //temp hack to add noise until I think of a better way so there are no duplicates
|
|
paulo@89
|
10990 })
|
|
paulo@89
|
10991 .filter(function(pointArray, pointIndex) {
|
|
paulo@89
|
10992 return pointActive(pointArray[4], pointIndex); // Issue #237.. move filter to after map, so pointIndex is correct!
|
|
paulo@89
|
10993 })
|
|
paulo@89
|
10994 })
|
|
paulo@89
|
10995 );
|
|
paulo@89
|
10996
|
|
paulo@89
|
10997 if (vertices.length == 0) return false; // No active points, we're done
|
|
paulo@89
|
10998 if (vertices.length < 3) {
|
|
paulo@89
|
10999 // Issue #283 - Adding 2 dummy points to the voronoi b/c voronoi requires min 3 points to work
|
|
paulo@89
|
11000 vertices.push([x.range()[0] - 20, y.range()[0] - 20, null, null]);
|
|
paulo@89
|
11001 vertices.push([x.range()[1] + 20, y.range()[1] + 20, null, null]);
|
|
paulo@89
|
11002 vertices.push([x.range()[0] - 20, y.range()[0] + 20, null, null]);
|
|
paulo@89
|
11003 vertices.push([x.range()[1] + 20, y.range()[1] - 20, null, null]);
|
|
paulo@89
|
11004 }
|
|
paulo@89
|
11005
|
|
paulo@89
|
11006 // keep voronoi sections from going more than 10 outside of graph
|
|
paulo@89
|
11007 // to avoid overlap with other things like legend etc
|
|
paulo@89
|
11008 var bounds = d3.geom.polygon([
|
|
paulo@89
|
11009 [-10,-10],
|
|
paulo@89
|
11010 [-10,height + 10],
|
|
paulo@89
|
11011 [width + 10,height + 10],
|
|
paulo@89
|
11012 [width + 10,-10]
|
|
paulo@89
|
11013 ]);
|
|
paulo@89
|
11014
|
|
paulo@89
|
11015 var voronoi = d3.geom.voronoi(vertices).map(function(d, i) {
|
|
paulo@89
|
11016 return {
|
|
paulo@89
|
11017 'data': bounds.clip(d),
|
|
paulo@89
|
11018 'series': vertices[i][2],
|
|
paulo@89
|
11019 'point': vertices[i][3]
|
|
paulo@89
|
11020 }
|
|
paulo@89
|
11021 });
|
|
paulo@89
|
11022
|
|
paulo@89
|
11023 // nuke all voronoi paths on reload and recreate them
|
|
paulo@89
|
11024 wrap.select('.nv-point-paths').selectAll('path').remove();
|
|
paulo@89
|
11025 var pointPaths = wrap.select('.nv-point-paths').selectAll('path').data(voronoi);
|
|
paulo@89
|
11026 var vPointPaths = pointPaths
|
|
paulo@89
|
11027 .enter().append("svg:path")
|
|
paulo@89
|
11028 .attr("d", function(d) {
|
|
paulo@89
|
11029 if (!d || !d.data || d.data.length === 0)
|
|
paulo@89
|
11030 return 'M 0 0';
|
|
paulo@89
|
11031 else
|
|
paulo@89
|
11032 return "M" + d.data.join(",") + "Z";
|
|
paulo@89
|
11033 })
|
|
paulo@89
|
11034 .attr("id", function(d,i) {
|
|
paulo@89
|
11035 return "nv-path-"+i; })
|
|
paulo@89
|
11036 .attr("clip-path", function(d,i) { return "url(#nv-clip-"+i+")"; })
|
|
paulo@89
|
11037 ;
|
|
paulo@89
|
11038
|
|
paulo@89
|
11039 // good for debugging point hover issues
|
|
paulo@89
|
11040 if (showVoronoi) {
|
|
paulo@89
|
11041 vPointPaths.style("fill", d3.rgb(230, 230, 230))
|
|
paulo@89
|
11042 .style('fill-opacity', 0.4)
|
|
paulo@89
|
11043 .style('stroke-opacity', 1)
|
|
paulo@89
|
11044 .style("stroke", d3.rgb(200,200,200));
|
|
paulo@89
|
11045 }
|
|
paulo@89
|
11046
|
|
paulo@89
|
11047 if (clipVoronoi) {
|
|
paulo@89
|
11048 // voronoi sections are already set to clip,
|
|
paulo@89
|
11049 // just create the circles with the IDs they expect
|
|
paulo@89
|
11050 wrap.select('.nv-point-clips').selectAll('clipPath').remove();
|
|
paulo@89
|
11051 wrap.select('.nv-point-clips').selectAll("clipPath")
|
|
paulo@89
|
11052 .data(vertices)
|
|
paulo@89
|
11053 .enter().append("svg:clipPath")
|
|
paulo@89
|
11054 .attr("id", function(d, i) { return "nv-clip-"+i;})
|
|
paulo@89
|
11055 .append("svg:circle")
|
|
paulo@89
|
11056 .attr('cx', function(d) { return d[0]; })
|
|
paulo@89
|
11057 .attr('cy', function(d) { return d[1]; })
|
|
paulo@89
|
11058 .attr('r', clipRadius);
|
|
paulo@89
|
11059 }
|
|
paulo@89
|
11060
|
|
paulo@89
|
11061 var mouseEventCallback = function(d, mDispatch) {
|
|
paulo@89
|
11062 if (needsUpdate) return 0;
|
|
paulo@89
|
11063 var series = data[d.series];
|
|
paulo@89
|
11064 if (series === undefined) return;
|
|
paulo@89
|
11065 var point = series.values[d.point];
|
|
paulo@89
|
11066 point['color'] = color(series, d.series);
|
|
paulo@89
|
11067
|
|
paulo@89
|
11068 // standardize attributes for tooltip.
|
|
paulo@89
|
11069 point['x'] = getX(point);
|
|
paulo@89
|
11070 point['y'] = getY(point);
|
|
paulo@89
|
11071
|
|
paulo@89
|
11072 // can't just get box of event node since it's actually a voronoi polygon
|
|
paulo@89
|
11073 var box = container.node().getBoundingClientRect();
|
|
paulo@89
|
11074 var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
paulo@89
|
11075 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
paulo@89
|
11076
|
|
paulo@89
|
11077 var pos = {
|
|
paulo@89
|
11078 left: x(getX(point, d.point)) + box.left + scrollLeft + margin.left + 10,
|
|
paulo@89
|
11079 top: y(getY(point, d.point)) + box.top + scrollTop + margin.top + 10
|
|
paulo@89
|
11080 };
|
|
paulo@89
|
11081
|
|
paulo@89
|
11082 mDispatch({
|
|
paulo@89
|
11083 point: point,
|
|
paulo@89
|
11084 series: series,
|
|
paulo@89
|
11085 pos: pos,
|
|
paulo@89
|
11086 seriesIndex: d.series,
|
|
paulo@89
|
11087 pointIndex: d.point
|
|
paulo@89
|
11088 });
|
|
paulo@89
|
11089 };
|
|
paulo@89
|
11090
|
|
paulo@89
|
11091 pointPaths
|
|
paulo@89
|
11092 .on('click', function(d) {
|
|
paulo@89
|
11093 mouseEventCallback(d, dispatch.elementClick);
|
|
paulo@89
|
11094 })
|
|
paulo@89
|
11095 .on('dblclick', function(d) {
|
|
paulo@89
|
11096 mouseEventCallback(d, dispatch.elementDblClick);
|
|
paulo@89
|
11097 })
|
|
paulo@89
|
11098 .on('mouseover', function(d) {
|
|
paulo@89
|
11099 mouseEventCallback(d, dispatch.elementMouseover);
|
|
paulo@89
|
11100 })
|
|
paulo@89
|
11101 .on('mouseout', function(d, i) {
|
|
paulo@89
|
11102 mouseEventCallback(d, dispatch.elementMouseout);
|
|
paulo@89
|
11103 });
|
|
paulo@89
|
11104
|
|
paulo@89
|
11105 } else {
|
|
paulo@89
|
11106 // add event handlers to points instead voronoi paths
|
|
paulo@89
|
11107 wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
11108 .selectAll('.nv-point')
|
|
paulo@89
|
11109 //.data(dataWithPoints)
|
|
paulo@89
|
11110 //.style('pointer-events', 'auto') // recativate events, disabled by css
|
|
paulo@89
|
11111 .on('click', function(d,i) {
|
|
paulo@89
|
11112 //nv.log('test', d, i);
|
|
paulo@89
|
11113 if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
|
|
paulo@89
|
11114 var series = data[d.series],
|
|
paulo@89
|
11115 point = series.values[i];
|
|
paulo@89
|
11116
|
|
paulo@89
|
11117 dispatch.elementClick({
|
|
paulo@89
|
11118 point: point,
|
|
paulo@89
|
11119 series: series,
|
|
paulo@89
|
11120 pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
|
|
paulo@89
|
11121 seriesIndex: d.series,
|
|
paulo@89
|
11122 pointIndex: i
|
|
paulo@89
|
11123 });
|
|
paulo@89
|
11124 })
|
|
paulo@89
|
11125 .on('dblclick', function(d,i) {
|
|
paulo@89
|
11126 if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
|
|
paulo@89
|
11127 var series = data[d.series],
|
|
paulo@89
|
11128 point = series.values[i];
|
|
paulo@89
|
11129
|
|
paulo@89
|
11130 dispatch.elementDblClick({
|
|
paulo@89
|
11131 point: point,
|
|
paulo@89
|
11132 series: series,
|
|
paulo@89
|
11133 pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
|
|
paulo@89
|
11134 seriesIndex: d.series,
|
|
paulo@89
|
11135 pointIndex: i
|
|
paulo@89
|
11136 });
|
|
paulo@89
|
11137 })
|
|
paulo@89
|
11138 .on('mouseover', function(d,i) {
|
|
paulo@89
|
11139 if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
|
|
paulo@89
|
11140 var series = data[d.series],
|
|
paulo@89
|
11141 point = series.values[i];
|
|
paulo@89
|
11142
|
|
paulo@89
|
11143 dispatch.elementMouseover({
|
|
paulo@89
|
11144 point: point,
|
|
paulo@89
|
11145 series: series,
|
|
paulo@89
|
11146 pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
|
|
paulo@89
|
11147 seriesIndex: d.series,
|
|
paulo@89
|
11148 pointIndex: i,
|
|
paulo@89
|
11149 color: color(d, i)
|
|
paulo@89
|
11150 });
|
|
paulo@89
|
11151 })
|
|
paulo@89
|
11152 .on('mouseout', function(d,i) {
|
|
paulo@89
|
11153 if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
|
|
paulo@89
|
11154 var series = data[d.series],
|
|
paulo@89
|
11155 point = series.values[i];
|
|
paulo@89
|
11156
|
|
paulo@89
|
11157 dispatch.elementMouseout({
|
|
paulo@89
|
11158 point: point,
|
|
paulo@89
|
11159 series: series,
|
|
paulo@89
|
11160 seriesIndex: d.series,
|
|
paulo@89
|
11161 pointIndex: i,
|
|
paulo@89
|
11162 color: color(d, i)
|
|
paulo@89
|
11163 });
|
|
paulo@89
|
11164 });
|
|
paulo@89
|
11165 }
|
|
paulo@89
|
11166 }
|
|
paulo@89
|
11167
|
|
paulo@89
|
11168 needsUpdate = true;
|
|
paulo@89
|
11169 var groups = wrap.select('.nv-groups').selectAll('.nv-group')
|
|
paulo@89
|
11170 .data(function(d) { return d }, function(d) { return d.key });
|
|
paulo@89
|
11171 groups.enter().append('g')
|
|
paulo@89
|
11172 .style('stroke-opacity', 1e-6)
|
|
paulo@89
|
11173 .style('fill-opacity', 1e-6);
|
|
paulo@89
|
11174 groups.exit()
|
|
paulo@89
|
11175 .remove();
|
|
paulo@89
|
11176 groups
|
|
paulo@89
|
11177 .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
|
|
paulo@89
|
11178 .classed('hover', function(d) { return d.hover });
|
|
paulo@89
|
11179 groups.watchTransition(renderWatch, 'scatter: groups')
|
|
paulo@89
|
11180 .style('fill', function(d,i) { return color(d, i) })
|
|
paulo@89
|
11181 .style('stroke', function(d,i) { return color(d, i) })
|
|
paulo@89
|
11182 .style('stroke-opacity', 1)
|
|
paulo@89
|
11183 .style('fill-opacity', .5);
|
|
paulo@89
|
11184
|
|
paulo@89
|
11185 // create the points, maintaining their IDs from the original data set
|
|
paulo@89
|
11186 var points = groups.selectAll('path.nv-point')
|
|
paulo@89
|
11187 .data(function(d) {
|
|
paulo@89
|
11188 return d.values.map(
|
|
paulo@89
|
11189 function (point, pointIndex) {
|
|
paulo@89
|
11190 return [point, pointIndex]
|
|
paulo@89
|
11191 }).filter(
|
|
paulo@89
|
11192 function(pointArray, pointIndex) {
|
|
paulo@89
|
11193 return pointActive(pointArray[0], pointIndex)
|
|
paulo@89
|
11194 })
|
|
paulo@89
|
11195 });
|
|
paulo@89
|
11196 points.enter().append('path')
|
|
paulo@89
|
11197 .style('fill', function (d) { return d.color })
|
|
paulo@89
|
11198 .style('stroke', function (d) { return d.color })
|
|
paulo@89
|
11199 .attr('transform', function(d) {
|
|
paulo@89
|
11200 return 'translate(' + x0(getX(d[0],d[1])) + ',' + y0(getY(d[0],d[1])) + ')'
|
|
paulo@89
|
11201 })
|
|
paulo@89
|
11202 .attr('d',
|
|
paulo@89
|
11203 nv.utils.symbol()
|
|
paulo@89
|
11204 .type(function(d) { return getShape(d[0]); })
|
|
paulo@89
|
11205 .size(function(d) { return z(getSize(d[0],d[1])) })
|
|
paulo@89
|
11206 );
|
|
paulo@89
|
11207 points.exit().remove();
|
|
paulo@89
|
11208 groups.exit().selectAll('path.nv-point')
|
|
paulo@89
|
11209 .watchTransition(renderWatch, 'scatter exit')
|
|
paulo@89
|
11210 .attr('transform', function(d) {
|
|
paulo@89
|
11211 return 'translate(' + x(getX(d[0],d[1])) + ',' + y(getY(d[0],d[1])) + ')'
|
|
paulo@89
|
11212 })
|
|
paulo@89
|
11213 .remove();
|
|
paulo@89
|
11214 points.each(function(d) {
|
|
paulo@89
|
11215 d3.select(this)
|
|
paulo@89
|
11216 .classed('nv-point', true)
|
|
paulo@89
|
11217 .classed('nv-point-' + d[1], true)
|
|
paulo@89
|
11218 .classed('nv-noninteractive', !interactive)
|
|
paulo@89
|
11219 .classed('hover',false)
|
|
paulo@89
|
11220 ;
|
|
paulo@89
|
11221 });
|
|
paulo@89
|
11222 points
|
|
paulo@89
|
11223 .watchTransition(renderWatch, 'scatter points')
|
|
paulo@89
|
11224 .attr('transform', function(d) {
|
|
paulo@89
|
11225 //nv.log(d, getX(d[0],d[1]), x(getX(d[0],d[1])));
|
|
paulo@89
|
11226 return 'translate(' + x(getX(d[0],d[1])) + ',' + y(getY(d[0],d[1])) + ')'
|
|
paulo@89
|
11227 })
|
|
paulo@89
|
11228 .attr('d',
|
|
paulo@89
|
11229 nv.utils.symbol()
|
|
paulo@89
|
11230 .type(function(d) { return getShape(d[0]); })
|
|
paulo@89
|
11231 .size(function(d) { return z(getSize(d[0],d[1])) })
|
|
paulo@89
|
11232 );
|
|
paulo@89
|
11233
|
|
paulo@89
|
11234 // Delay updating the invisible interactive layer for smoother animation
|
|
paulo@89
|
11235 clearTimeout(timeoutID); // stop repeat calls to updateInteractiveLayer
|
|
paulo@89
|
11236 timeoutID = setTimeout(updateInteractiveLayer, 300);
|
|
paulo@89
|
11237 //updateInteractiveLayer();
|
|
paulo@89
|
11238
|
|
paulo@89
|
11239 //store old scales for use in transitions on update
|
|
paulo@89
|
11240 x0 = x.copy();
|
|
paulo@89
|
11241 y0 = y.copy();
|
|
paulo@89
|
11242 z0 = z.copy();
|
|
paulo@89
|
11243
|
|
paulo@89
|
11244 });
|
|
paulo@89
|
11245 renderWatch.renderEnd('scatter immediate');
|
|
paulo@89
|
11246 return chart;
|
|
paulo@89
|
11247 }
|
|
paulo@89
|
11248
|
|
paulo@89
|
11249 //============================================================
|
|
paulo@89
|
11250 // Expose Public Variables
|
|
paulo@89
|
11251 //------------------------------------------------------------
|
|
paulo@89
|
11252
|
|
paulo@89
|
11253 chart.dispatch = dispatch;
|
|
paulo@89
|
11254 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
11255
|
|
paulo@89
|
11256 // utility function calls provided by this chart
|
|
paulo@89
|
11257 chart._calls = new function() {
|
|
paulo@89
|
11258 this.clearHighlights = function () {
|
|
paulo@89
|
11259 nv.dom.write(function() {
|
|
paulo@89
|
11260 container.selectAll(".nv-point.hover").classed("hover", false);
|
|
paulo@89
|
11261 });
|
|
paulo@89
|
11262 return null;
|
|
paulo@89
|
11263 };
|
|
paulo@89
|
11264 this.highlightPoint = function (seriesIndex, pointIndex, isHoverOver) {
|
|
paulo@89
|
11265 nv.dom.write(function() {
|
|
paulo@89
|
11266 container.select(" .nv-series-" + seriesIndex + " .nv-point-" + pointIndex)
|
|
paulo@89
|
11267 .classed("hover", isHoverOver);
|
|
paulo@89
|
11268 });
|
|
paulo@89
|
11269 };
|
|
paulo@89
|
11270 };
|
|
paulo@89
|
11271
|
|
paulo@89
|
11272 // trigger calls from events too
|
|
paulo@89
|
11273 dispatch.on('elementMouseover.point', function(d) {
|
|
paulo@89
|
11274 if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,true);
|
|
paulo@89
|
11275 });
|
|
paulo@89
|
11276
|
|
paulo@89
|
11277 dispatch.on('elementMouseout.point', function(d) {
|
|
paulo@89
|
11278 if (interactive) chart._calls.highlightPoint(d.seriesIndex,d.pointIndex,false);
|
|
paulo@89
|
11279 });
|
|
paulo@89
|
11280
|
|
paulo@89
|
11281 chart._options = Object.create({}, {
|
|
paulo@89
|
11282 // simple options, just get/set the necessary values
|
|
paulo@89
|
11283 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
11284 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
11285 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
11286 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
11287 pointScale: {get: function(){return z;}, set: function(_){z=_;}},
|
|
paulo@89
|
11288 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
11289 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
11290 pointDomain: {get: function(){return sizeDomain;}, set: function(_){sizeDomain=_;}},
|
|
paulo@89
|
11291 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
11292 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
11293 pointRange: {get: function(){return sizeRange;}, set: function(_){sizeRange=_;}},
|
|
paulo@89
|
11294 forceX: {get: function(){return forceX;}, set: function(_){forceX=_;}},
|
|
paulo@89
|
11295 forceY: {get: function(){return forceY;}, set: function(_){forceY=_;}},
|
|
paulo@89
|
11296 forcePoint: {get: function(){return forceSize;}, set: function(_){forceSize=_;}},
|
|
paulo@89
|
11297 interactive: {get: function(){return interactive;}, set: function(_){interactive=_;}},
|
|
paulo@89
|
11298 pointActive: {get: function(){return pointActive;}, set: function(_){pointActive=_;}},
|
|
paulo@89
|
11299 padDataOuter: {get: function(){return padDataOuter;}, set: function(_){padDataOuter=_;}},
|
|
paulo@89
|
11300 padData: {get: function(){return padData;}, set: function(_){padData=_;}},
|
|
paulo@89
|
11301 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
11302 clipVoronoi: {get: function(){return clipVoronoi;}, set: function(_){clipVoronoi=_;}},
|
|
paulo@89
|
11303 clipRadius: {get: function(){return clipRadius;}, set: function(_){clipRadius=_;}},
|
|
paulo@89
|
11304 showVoronoi: {get: function(){return showVoronoi;}, set: function(_){showVoronoi=_;}},
|
|
paulo@89
|
11305 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
11306
|
|
paulo@89
|
11307
|
|
paulo@89
|
11308 // simple functor options
|
|
paulo@89
|
11309 x: {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},
|
|
paulo@89
|
11310 y: {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},
|
|
paulo@89
|
11311 pointSize: {get: function(){return getSize;}, set: function(_){getSize = d3.functor(_);}},
|
|
paulo@89
|
11312 pointShape: {get: function(){return getShape;}, set: function(_){getShape = d3.functor(_);}},
|
|
paulo@89
|
11313
|
|
paulo@89
|
11314 // options that require extra logic in the setter
|
|
paulo@89
|
11315 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
11316 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
11317 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
11318 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
11319 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
11320 }},
|
|
paulo@89
|
11321 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
11322 duration = _;
|
|
paulo@89
|
11323 renderWatch.reset(duration);
|
|
paulo@89
|
11324 }},
|
|
paulo@89
|
11325 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
11326 color = nv.utils.getColor(_);
|
|
paulo@89
|
11327 }},
|
|
paulo@89
|
11328 useVoronoi: {get: function(){return useVoronoi;}, set: function(_){
|
|
paulo@89
|
11329 useVoronoi = _;
|
|
paulo@89
|
11330 if (useVoronoi === false) {
|
|
paulo@89
|
11331 clipVoronoi = false;
|
|
paulo@89
|
11332 }
|
|
paulo@89
|
11333 }}
|
|
paulo@89
|
11334 });
|
|
paulo@89
|
11335
|
|
paulo@89
|
11336 nv.utils.initOptions(chart);
|
|
paulo@89
|
11337 return chart;
|
|
paulo@89
|
11338 };
|
|
paulo@89
|
11339
|
|
paulo@89
|
11340 nv.models.scatterChart = function() {
|
|
paulo@89
|
11341 "use strict";
|
|
paulo@89
|
11342
|
|
paulo@89
|
11343 //============================================================
|
|
paulo@89
|
11344 // Public Variables with Default Settings
|
|
paulo@89
|
11345 //------------------------------------------------------------
|
|
paulo@89
|
11346
|
|
paulo@89
|
11347 var scatter = nv.models.scatter()
|
|
paulo@89
|
11348 , xAxis = nv.models.axis()
|
|
paulo@89
|
11349 , yAxis = nv.models.axis()
|
|
paulo@89
|
11350 , legend = nv.models.legend()
|
|
paulo@89
|
11351 , distX = nv.models.distribution()
|
|
paulo@89
|
11352 , distY = nv.models.distribution()
|
|
paulo@89
|
11353 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
11354 ;
|
|
paulo@89
|
11355
|
|
paulo@89
|
11356 var margin = {top: 30, right: 20, bottom: 50, left: 75}
|
|
paulo@89
|
11357 , width = null
|
|
paulo@89
|
11358 , height = null
|
|
paulo@89
|
11359 , container = null
|
|
paulo@89
|
11360 , color = nv.utils.defaultColor()
|
|
paulo@89
|
11361 , x = scatter.xScale()
|
|
paulo@89
|
11362 , y = scatter.yScale()
|
|
paulo@89
|
11363 , showDistX = false
|
|
paulo@89
|
11364 , showDistY = false
|
|
paulo@89
|
11365 , showLegend = true
|
|
paulo@89
|
11366 , showXAxis = true
|
|
paulo@89
|
11367 , showYAxis = true
|
|
paulo@89
|
11368 , rightAlignYAxis = false
|
|
paulo@89
|
11369 , state = nv.utils.state()
|
|
paulo@89
|
11370 , defaultState = null
|
|
paulo@89
|
11371 , dispatch = d3.dispatch('stateChange', 'changeState', 'renderEnd')
|
|
paulo@89
|
11372 , noData = null
|
|
paulo@89
|
11373 , duration = 250
|
|
paulo@89
|
11374 ;
|
|
paulo@89
|
11375
|
|
paulo@89
|
11376 scatter.xScale(x).yScale(y);
|
|
paulo@89
|
11377 xAxis.orient('bottom').tickPadding(10);
|
|
paulo@89
|
11378 yAxis
|
|
paulo@89
|
11379 .orient((rightAlignYAxis) ? 'right' : 'left')
|
|
paulo@89
|
11380 .tickPadding(10)
|
|
paulo@89
|
11381 ;
|
|
paulo@89
|
11382 distX.axis('x');
|
|
paulo@89
|
11383 distY.axis('y');
|
|
paulo@89
|
11384 tooltip
|
|
paulo@89
|
11385 .headerFormatter(function(d, i) {
|
|
paulo@89
|
11386 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
11387 })
|
|
paulo@89
|
11388 .valueFormatter(function(d, i) {
|
|
paulo@89
|
11389 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
11390 });
|
|
paulo@89
|
11391
|
|
paulo@89
|
11392 //============================================================
|
|
paulo@89
|
11393 // Private Variables
|
|
paulo@89
|
11394 //------------------------------------------------------------
|
|
paulo@89
|
11395
|
|
paulo@89
|
11396 var x0, y0
|
|
paulo@89
|
11397 , renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
11398
|
|
paulo@89
|
11399 var stateGetter = function(data) {
|
|
paulo@89
|
11400 return function(){
|
|
paulo@89
|
11401 return {
|
|
paulo@89
|
11402 active: data.map(function(d) { return !d.disabled })
|
|
paulo@89
|
11403 };
|
|
paulo@89
|
11404 }
|
|
paulo@89
|
11405 };
|
|
paulo@89
|
11406
|
|
paulo@89
|
11407 var stateSetter = function(data) {
|
|
paulo@89
|
11408 return function(state) {
|
|
paulo@89
|
11409 if (state.active !== undefined)
|
|
paulo@89
|
11410 data.forEach(function(series,i) {
|
|
paulo@89
|
11411 series.disabled = !state.active[i];
|
|
paulo@89
|
11412 });
|
|
paulo@89
|
11413 }
|
|
paulo@89
|
11414 };
|
|
paulo@89
|
11415
|
|
paulo@89
|
11416 function chart(selection) {
|
|
paulo@89
|
11417 renderWatch.reset();
|
|
paulo@89
|
11418 renderWatch.models(scatter);
|
|
paulo@89
|
11419 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
11420 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
11421 if (showDistX) renderWatch.models(distX);
|
|
paulo@89
|
11422 if (showDistY) renderWatch.models(distY);
|
|
paulo@89
|
11423
|
|
paulo@89
|
11424 selection.each(function(data) {
|
|
paulo@89
|
11425 var that = this;
|
|
paulo@89
|
11426
|
|
paulo@89
|
11427 container = d3.select(this);
|
|
paulo@89
|
11428 nv.utils.initSVG(container);
|
|
paulo@89
|
11429
|
|
paulo@89
|
11430 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
11431 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
11432
|
|
paulo@89
|
11433 chart.update = function() {
|
|
paulo@89
|
11434 if (duration === 0)
|
|
paulo@89
|
11435 container.call(chart);
|
|
paulo@89
|
11436 else
|
|
paulo@89
|
11437 container.transition().duration(duration).call(chart);
|
|
paulo@89
|
11438 };
|
|
paulo@89
|
11439 chart.container = this;
|
|
paulo@89
|
11440
|
|
paulo@89
|
11441 state
|
|
paulo@89
|
11442 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
11443 .getter(stateGetter(data))
|
|
paulo@89
|
11444 .update();
|
|
paulo@89
|
11445
|
|
paulo@89
|
11446 // DEPRECATED set state.disableddisabled
|
|
paulo@89
|
11447 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
11448
|
|
paulo@89
|
11449 if (!defaultState) {
|
|
paulo@89
|
11450 var key;
|
|
paulo@89
|
11451 defaultState = {};
|
|
paulo@89
|
11452 for (key in state) {
|
|
paulo@89
|
11453 if (state[key] instanceof Array)
|
|
paulo@89
|
11454 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
11455 else
|
|
paulo@89
|
11456 defaultState[key] = state[key];
|
|
paulo@89
|
11457 }
|
|
paulo@89
|
11458 }
|
|
paulo@89
|
11459
|
|
paulo@89
|
11460 // Display noData message if there's nothing to show.
|
|
paulo@89
|
11461 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
11462 nv.utils.noData(chart, container);
|
|
paulo@89
|
11463 renderWatch.renderEnd('scatter immediate');
|
|
paulo@89
|
11464 return chart;
|
|
paulo@89
|
11465 } else {
|
|
paulo@89
|
11466 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
11467 }
|
|
paulo@89
|
11468
|
|
paulo@89
|
11469 // Setup Scales
|
|
paulo@89
|
11470 x = scatter.xScale();
|
|
paulo@89
|
11471 y = scatter.yScale();
|
|
paulo@89
|
11472
|
|
paulo@89
|
11473 // Setup containers and skeleton of chart
|
|
paulo@89
|
11474 var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
|
|
paulo@89
|
11475 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());
|
|
paulo@89
|
11476 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
11477 var g = wrap.select('g');
|
|
paulo@89
|
11478
|
|
paulo@89
|
11479 // background for pointer events
|
|
paulo@89
|
11480 gEnter.append('rect').attr('class', 'nvd3 nv-background').style("pointer-events","none");
|
|
paulo@89
|
11481
|
|
paulo@89
|
11482 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
11483 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
11484 gEnter.append('g').attr('class', 'nv-scatterWrap');
|
|
paulo@89
|
11485 gEnter.append('g').attr('class', 'nv-regressionLinesWrap');
|
|
paulo@89
|
11486 gEnter.append('g').attr('class', 'nv-distWrap');
|
|
paulo@89
|
11487 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
11488
|
|
paulo@89
|
11489 if (rightAlignYAxis) {
|
|
paulo@89
|
11490 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
11491 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
11492 }
|
|
paulo@89
|
11493
|
|
paulo@89
|
11494 // Legend
|
|
paulo@89
|
11495 if (showLegend) {
|
|
paulo@89
|
11496 var legendWidth = availableWidth;
|
|
paulo@89
|
11497 legend.width(legendWidth);
|
|
paulo@89
|
11498
|
|
paulo@89
|
11499 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
11500 .datum(data)
|
|
paulo@89
|
11501 .call(legend);
|
|
paulo@89
|
11502
|
|
paulo@89
|
11503 if ( margin.top != legend.height()) {
|
|
paulo@89
|
11504 margin.top = legend.height();
|
|
paulo@89
|
11505 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
11506 }
|
|
paulo@89
|
11507
|
|
paulo@89
|
11508 wrap.select('.nv-legendWrap')
|
|
paulo@89
|
11509 .attr('transform', 'translate(0' + ',' + (-margin.top) +')');
|
|
paulo@89
|
11510 }
|
|
paulo@89
|
11511
|
|
paulo@89
|
11512 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
11513
|
|
paulo@89
|
11514 // Main Chart Component(s)
|
|
paulo@89
|
11515 scatter
|
|
paulo@89
|
11516 .width(availableWidth)
|
|
paulo@89
|
11517 .height(availableHeight)
|
|
paulo@89
|
11518 .color(data.map(function(d,i) {
|
|
paulo@89
|
11519 d.color = d.color || color(d, i);
|
|
paulo@89
|
11520 return d.color;
|
|
paulo@89
|
11521 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
11522
|
|
paulo@89
|
11523 wrap.select('.nv-scatterWrap')
|
|
paulo@89
|
11524 .datum(data.filter(function(d) { return !d.disabled }))
|
|
paulo@89
|
11525 .call(scatter);
|
|
paulo@89
|
11526
|
|
paulo@89
|
11527
|
|
paulo@89
|
11528 wrap.select('.nv-regressionLinesWrap')
|
|
paulo@89
|
11529 .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')');
|
|
paulo@89
|
11530
|
|
paulo@89
|
11531 var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines')
|
|
paulo@89
|
11532 .data(function (d) {
|
|
paulo@89
|
11533 return d;
|
|
paulo@89
|
11534 });
|
|
paulo@89
|
11535
|
|
paulo@89
|
11536 regWrap.enter().append('g').attr('class', 'nv-regLines');
|
|
paulo@89
|
11537
|
|
paulo@89
|
11538 var regLine = regWrap.selectAll('.nv-regLine')
|
|
paulo@89
|
11539 .data(function (d) {
|
|
paulo@89
|
11540 return [d]
|
|
paulo@89
|
11541 });
|
|
paulo@89
|
11542
|
|
paulo@89
|
11543 regLine.enter()
|
|
paulo@89
|
11544 .append('line').attr('class', 'nv-regLine')
|
|
paulo@89
|
11545 .style('stroke-opacity', 0);
|
|
paulo@89
|
11546
|
|
paulo@89
|
11547 // don't add lines unless we have slope and intercept to use
|
|
paulo@89
|
11548 regLine.filter(function(d) {
|
|
paulo@89
|
11549 return d.intercept && d.slope;
|
|
paulo@89
|
11550 })
|
|
paulo@89
|
11551 .watchTransition(renderWatch, 'scatterPlusLineChart: regline')
|
|
paulo@89
|
11552 .attr('x1', x.range()[0])
|
|
paulo@89
|
11553 .attr('x2', x.range()[1])
|
|
paulo@89
|
11554 .attr('y1', function (d, i) {
|
|
paulo@89
|
11555 return y(x.domain()[0] * d.slope + d.intercept)
|
|
paulo@89
|
11556 })
|
|
paulo@89
|
11557 .attr('y2', function (d, i) {
|
|
paulo@89
|
11558 return y(x.domain()[1] * d.slope + d.intercept)
|
|
paulo@89
|
11559 })
|
|
paulo@89
|
11560 .style('stroke', function (d, i, j) {
|
|
paulo@89
|
11561 return color(d, j)
|
|
paulo@89
|
11562 })
|
|
paulo@89
|
11563 .style('stroke-opacity', function (d, i) {
|
|
paulo@89
|
11564 return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1
|
|
paulo@89
|
11565 });
|
|
paulo@89
|
11566
|
|
paulo@89
|
11567 // Setup Axes
|
|
paulo@89
|
11568 if (showXAxis) {
|
|
paulo@89
|
11569 xAxis
|
|
paulo@89
|
11570 .scale(x)
|
|
paulo@89
|
11571 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
11572 .tickSize( -availableHeight , 0);
|
|
paulo@89
|
11573
|
|
paulo@89
|
11574 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
11575 .attr('transform', 'translate(0,' + y.range()[0] + ')')
|
|
paulo@89
|
11576 .call(xAxis);
|
|
paulo@89
|
11577 }
|
|
paulo@89
|
11578
|
|
paulo@89
|
11579 if (showYAxis) {
|
|
paulo@89
|
11580 yAxis
|
|
paulo@89
|
11581 .scale(y)
|
|
paulo@89
|
11582 ._ticks( nv.utils.calcTicksY(availableHeight/36, data) )
|
|
paulo@89
|
11583 .tickSize( -availableWidth, 0);
|
|
paulo@89
|
11584
|
|
paulo@89
|
11585 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
11586 .call(yAxis);
|
|
paulo@89
|
11587 }
|
|
paulo@89
|
11588
|
|
paulo@89
|
11589
|
|
paulo@89
|
11590 if (showDistX) {
|
|
paulo@89
|
11591 distX
|
|
paulo@89
|
11592 .getData(scatter.x())
|
|
paulo@89
|
11593 .scale(x)
|
|
paulo@89
|
11594 .width(availableWidth)
|
|
paulo@89
|
11595 .color(data.map(function(d,i) {
|
|
paulo@89
|
11596 return d.color || color(d, i);
|
|
paulo@89
|
11597 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
11598 gEnter.select('.nv-distWrap').append('g')
|
|
paulo@89
|
11599 .attr('class', 'nv-distributionX');
|
|
paulo@89
|
11600 g.select('.nv-distributionX')
|
|
paulo@89
|
11601 .attr('transform', 'translate(0,' + y.range()[0] + ')')
|
|
paulo@89
|
11602 .datum(data.filter(function(d) { return !d.disabled }))
|
|
paulo@89
|
11603 .call(distX);
|
|
paulo@89
|
11604 }
|
|
paulo@89
|
11605
|
|
paulo@89
|
11606 if (showDistY) {
|
|
paulo@89
|
11607 distY
|
|
paulo@89
|
11608 .getData(scatter.y())
|
|
paulo@89
|
11609 .scale(y)
|
|
paulo@89
|
11610 .width(availableHeight)
|
|
paulo@89
|
11611 .color(data.map(function(d,i) {
|
|
paulo@89
|
11612 return d.color || color(d, i);
|
|
paulo@89
|
11613 }).filter(function(d,i) { return !data[i].disabled }));
|
|
paulo@89
|
11614 gEnter.select('.nv-distWrap').append('g')
|
|
paulo@89
|
11615 .attr('class', 'nv-distributionY');
|
|
paulo@89
|
11616 g.select('.nv-distributionY')
|
|
paulo@89
|
11617 .attr('transform', 'translate(' + (rightAlignYAxis ? availableWidth : -distY.size() ) + ',0)')
|
|
paulo@89
|
11618 .datum(data.filter(function(d) { return !d.disabled }))
|
|
paulo@89
|
11619 .call(distY);
|
|
paulo@89
|
11620 }
|
|
paulo@89
|
11621
|
|
paulo@89
|
11622 //============================================================
|
|
paulo@89
|
11623 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
11624 //------------------------------------------------------------
|
|
paulo@89
|
11625
|
|
paulo@89
|
11626 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
11627 for (var key in newState)
|
|
paulo@89
|
11628 state[key] = newState[key];
|
|
paulo@89
|
11629 dispatch.stateChange(state);
|
|
paulo@89
|
11630 chart.update();
|
|
paulo@89
|
11631 });
|
|
paulo@89
|
11632
|
|
paulo@89
|
11633 // Update chart from a state object passed to event handler
|
|
paulo@89
|
11634 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
11635 if (typeof e.disabled !== 'undefined') {
|
|
paulo@89
|
11636 data.forEach(function(series,i) {
|
|
paulo@89
|
11637 series.disabled = e.disabled[i];
|
|
paulo@89
|
11638 });
|
|
paulo@89
|
11639 state.disabled = e.disabled;
|
|
paulo@89
|
11640 }
|
|
paulo@89
|
11641 chart.update();
|
|
paulo@89
|
11642 });
|
|
paulo@89
|
11643
|
|
paulo@89
|
11644 // mouseover needs availableHeight so we just keep scatter mouse events inside the chart block
|
|
paulo@89
|
11645 scatter.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
11646 tooltip.hidden(true);
|
|
paulo@89
|
11647 container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)
|
|
paulo@89
|
11648 .attr('y1', 0);
|
|
paulo@89
|
11649 container.select('.nv-chart-' + scatter.id() + ' .nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)
|
|
paulo@89
|
11650 .attr('x2', distY.size());
|
|
paulo@89
|
11651 });
|
|
paulo@89
|
11652
|
|
paulo@89
|
11653 scatter.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
11654 container.select('.nv-series-' + evt.seriesIndex + ' .nv-distx-' + evt.pointIndex)
|
|
paulo@89
|
11655 .attr('y1', evt.pos.top - availableHeight - margin.top);
|
|
paulo@89
|
11656 container.select('.nv-series-' + evt.seriesIndex + ' .nv-disty-' + evt.pointIndex)
|
|
paulo@89
|
11657 .attr('x2', evt.pos.left + distX.size() - margin.left);
|
|
paulo@89
|
11658 tooltip.position(evt.pos).data(evt).hidden(false);
|
|
paulo@89
|
11659 });
|
|
paulo@89
|
11660
|
|
paulo@89
|
11661 //store old scales for use in transitions on update
|
|
paulo@89
|
11662 x0 = x.copy();
|
|
paulo@89
|
11663 y0 = y.copy();
|
|
paulo@89
|
11664
|
|
paulo@89
|
11665 });
|
|
paulo@89
|
11666
|
|
paulo@89
|
11667 renderWatch.renderEnd('scatter with line immediate');
|
|
paulo@89
|
11668 return chart;
|
|
paulo@89
|
11669 }
|
|
paulo@89
|
11670
|
|
paulo@89
|
11671 //============================================================
|
|
paulo@89
|
11672 // Expose Public Variables
|
|
paulo@89
|
11673 //------------------------------------------------------------
|
|
paulo@89
|
11674
|
|
paulo@89
|
11675 // expose chart's sub-components
|
|
paulo@89
|
11676 chart.dispatch = dispatch;
|
|
paulo@89
|
11677 chart.scatter = scatter;
|
|
paulo@89
|
11678 chart.legend = legend;
|
|
paulo@89
|
11679 chart.xAxis = xAxis;
|
|
paulo@89
|
11680 chart.yAxis = yAxis;
|
|
paulo@89
|
11681 chart.distX = distX;
|
|
paulo@89
|
11682 chart.distY = distY;
|
|
paulo@89
|
11683 chart.tooltip = tooltip;
|
|
paulo@89
|
11684
|
|
paulo@89
|
11685 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
11686 chart._options = Object.create({}, {
|
|
paulo@89
|
11687 // simple options, just get/set the necessary values
|
|
paulo@89
|
11688 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
11689 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
11690 container: {get: function(){return container;}, set: function(_){container=_;}},
|
|
paulo@89
|
11691 showDistX: {get: function(){return showDistX;}, set: function(_){showDistX=_;}},
|
|
paulo@89
|
11692 showDistY: {get: function(){return showDistY;}, set: function(_){showDistY=_;}},
|
|
paulo@89
|
11693 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
11694 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
11695 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
11696 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
11697 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
11698 duration: {get: function(){return duration;}, set: function(_){duration=_;}},
|
|
paulo@89
|
11699
|
|
paulo@89
|
11700 // deprecated options
|
|
paulo@89
|
11701 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
11702 // deprecated after 1.7.1
|
|
paulo@89
|
11703 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
11704 tooltip.enabled(!!_);
|
|
paulo@89
|
11705 }},
|
|
paulo@89
|
11706 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
11707 // deprecated after 1.7.1
|
|
paulo@89
|
11708 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
11709 tooltip.contentGenerator(_);
|
|
paulo@89
|
11710 }},
|
|
paulo@89
|
11711 tooltipXContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
11712 // deprecated after 1.7.1
|
|
paulo@89
|
11713 nv.deprecated('tooltipContent', 'This option is removed, put values into main tooltip.');
|
|
paulo@89
|
11714 }},
|
|
paulo@89
|
11715 tooltipYContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
11716 // deprecated after 1.7.1
|
|
paulo@89
|
11717 nv.deprecated('tooltipContent', 'This option is removed, put values into main tooltip.');
|
|
paulo@89
|
11718 }},
|
|
paulo@89
|
11719
|
|
paulo@89
|
11720 // options that require extra logic in the setter
|
|
paulo@89
|
11721 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
11722 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
11723 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
11724 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
11725 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
11726 }},
|
|
paulo@89
|
11727 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
11728 rightAlignYAxis = _;
|
|
paulo@89
|
11729 yAxis.orient( (_) ? 'right' : 'left');
|
|
paulo@89
|
11730 }},
|
|
paulo@89
|
11731 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
11732 color = nv.utils.getColor(_);
|
|
paulo@89
|
11733 legend.color(color);
|
|
paulo@89
|
11734 distX.color(color);
|
|
paulo@89
|
11735 distY.color(color);
|
|
paulo@89
|
11736 }}
|
|
paulo@89
|
11737 });
|
|
paulo@89
|
11738
|
|
paulo@89
|
11739 nv.utils.inheritOptions(chart, scatter);
|
|
paulo@89
|
11740 nv.utils.initOptions(chart);
|
|
paulo@89
|
11741 return chart;
|
|
paulo@89
|
11742 };
|
|
paulo@89
|
11743
|
|
paulo@89
|
11744 nv.models.sparkline = function() {
|
|
paulo@89
|
11745 "use strict";
|
|
paulo@89
|
11746
|
|
paulo@89
|
11747 //============================================================
|
|
paulo@89
|
11748 // Public Variables with Default Settings
|
|
paulo@89
|
11749 //------------------------------------------------------------
|
|
paulo@89
|
11750
|
|
paulo@89
|
11751 var margin = {top: 2, right: 0, bottom: 2, left: 0}
|
|
paulo@89
|
11752 , width = 400
|
|
paulo@89
|
11753 , height = 32
|
|
paulo@89
|
11754 , container = null
|
|
paulo@89
|
11755 , animate = true
|
|
paulo@89
|
11756 , x = d3.scale.linear()
|
|
paulo@89
|
11757 , y = d3.scale.linear()
|
|
paulo@89
|
11758 , getX = function(d) { return d.x }
|
|
paulo@89
|
11759 , getY = function(d) { return d.y }
|
|
paulo@89
|
11760 , color = nv.utils.getColor(['#000'])
|
|
paulo@89
|
11761 , xDomain
|
|
paulo@89
|
11762 , yDomain
|
|
paulo@89
|
11763 , xRange
|
|
paulo@89
|
11764 , yRange
|
|
paulo@89
|
11765 ;
|
|
paulo@89
|
11766
|
|
paulo@89
|
11767 function chart(selection) {
|
|
paulo@89
|
11768 selection.each(function(data) {
|
|
paulo@89
|
11769 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
11770 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
11771
|
|
paulo@89
|
11772 container = d3.select(this);
|
|
paulo@89
|
11773 nv.utils.initSVG(container);
|
|
paulo@89
|
11774
|
|
paulo@89
|
11775 // Setup Scales
|
|
paulo@89
|
11776 x .domain(xDomain || d3.extent(data, getX ))
|
|
paulo@89
|
11777 .range(xRange || [0, availableWidth]);
|
|
paulo@89
|
11778
|
|
paulo@89
|
11779 y .domain(yDomain || d3.extent(data, getY ))
|
|
paulo@89
|
11780 .range(yRange || [availableHeight, 0]);
|
|
paulo@89
|
11781
|
|
paulo@89
|
11782 // Setup containers and skeleton of chart
|
|
paulo@89
|
11783 var wrap = container.selectAll('g.nv-wrap.nv-sparkline').data([data]);
|
|
paulo@89
|
11784 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparkline');
|
|
paulo@89
|
11785 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
11786 var g = wrap.select('g');
|
|
paulo@89
|
11787
|
|
paulo@89
|
11788 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
|
|
paulo@89
|
11789
|
|
paulo@89
|
11790 var paths = wrap.selectAll('path')
|
|
paulo@89
|
11791 .data(function(d) { return [d] });
|
|
paulo@89
|
11792 paths.enter().append('path');
|
|
paulo@89
|
11793 paths.exit().remove();
|
|
paulo@89
|
11794 paths
|
|
paulo@89
|
11795 .style('stroke', function(d,i) { return d.color || color(d, i) })
|
|
paulo@89
|
11796 .attr('d', d3.svg.line()
|
|
paulo@89
|
11797 .x(function(d,i) { return x(getX(d,i)) })
|
|
paulo@89
|
11798 .y(function(d,i) { return y(getY(d,i)) })
|
|
paulo@89
|
11799 );
|
|
paulo@89
|
11800
|
|
paulo@89
|
11801 // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
|
|
paulo@89
|
11802 var points = wrap.selectAll('circle.nv-point')
|
|
paulo@89
|
11803 .data(function(data) {
|
|
paulo@89
|
11804 var yValues = data.map(function(d, i) { return getY(d,i); });
|
|
paulo@89
|
11805 function pointIndex(index) {
|
|
paulo@89
|
11806 if (index != -1) {
|
|
paulo@89
|
11807 var result = data[index];
|
|
paulo@89
|
11808 result.pointIndex = index;
|
|
paulo@89
|
11809 return result;
|
|
paulo@89
|
11810 } else {
|
|
paulo@89
|
11811 return null;
|
|
paulo@89
|
11812 }
|
|
paulo@89
|
11813 }
|
|
paulo@89
|
11814 var maxPoint = pointIndex(yValues.lastIndexOf(y.domain()[1])),
|
|
paulo@89
|
11815 minPoint = pointIndex(yValues.indexOf(y.domain()[0])),
|
|
paulo@89
|
11816 currentPoint = pointIndex(yValues.length - 1);
|
|
paulo@89
|
11817 return [minPoint, maxPoint, currentPoint].filter(function (d) {return d != null;});
|
|
paulo@89
|
11818 });
|
|
paulo@89
|
11819 points.enter().append('circle');
|
|
paulo@89
|
11820 points.exit().remove();
|
|
paulo@89
|
11821 points
|
|
paulo@89
|
11822 .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })
|
|
paulo@89
|
11823 .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })
|
|
paulo@89
|
11824 .attr('r', 2)
|
|
paulo@89
|
11825 .attr('class', function(d,i) {
|
|
paulo@89
|
11826 return getX(d, d.pointIndex) == x.domain()[1] ? 'nv-point nv-currentValue' :
|
|
paulo@89
|
11827 getY(d, d.pointIndex) == y.domain()[0] ? 'nv-point nv-minValue' : 'nv-point nv-maxValue'
|
|
paulo@89
|
11828 });
|
|
paulo@89
|
11829 });
|
|
paulo@89
|
11830
|
|
paulo@89
|
11831 return chart;
|
|
paulo@89
|
11832 }
|
|
paulo@89
|
11833
|
|
paulo@89
|
11834 //============================================================
|
|
paulo@89
|
11835 // Expose Public Variables
|
|
paulo@89
|
11836 //------------------------------------------------------------
|
|
paulo@89
|
11837
|
|
paulo@89
|
11838 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
11839
|
|
paulo@89
|
11840 chart._options = Object.create({}, {
|
|
paulo@89
|
11841 // simple options, just get/set the necessary values
|
|
paulo@89
|
11842 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
11843 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
11844 xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},
|
|
paulo@89
|
11845 yDomain: {get: function(){return yDomain;}, set: function(_){yDomain=_;}},
|
|
paulo@89
|
11846 xRange: {get: function(){return xRange;}, set: function(_){xRange=_;}},
|
|
paulo@89
|
11847 yRange: {get: function(){return yRange;}, set: function(_){yRange=_;}},
|
|
paulo@89
|
11848 xScale: {get: function(){return x;}, set: function(_){x=_;}},
|
|
paulo@89
|
11849 yScale: {get: function(){return y;}, set: function(_){y=_;}},
|
|
paulo@89
|
11850 animate: {get: function(){return animate;}, set: function(_){animate=_;}},
|
|
paulo@89
|
11851
|
|
paulo@89
|
11852 //functor options
|
|
paulo@89
|
11853 x: {get: function(){return getX;}, set: function(_){getX=d3.functor(_);}},
|
|
paulo@89
|
11854 y: {get: function(){return getY;}, set: function(_){getY=d3.functor(_);}},
|
|
paulo@89
|
11855
|
|
paulo@89
|
11856 // options that require extra logic in the setter
|
|
paulo@89
|
11857 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
11858 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
11859 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
11860 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
11861 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
11862 }},
|
|
paulo@89
|
11863 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
11864 color = nv.utils.getColor(_);
|
|
paulo@89
|
11865 }}
|
|
paulo@89
|
11866 });
|
|
paulo@89
|
11867
|
|
paulo@89
|
11868 nv.utils.initOptions(chart);
|
|
paulo@89
|
11869 return chart;
|
|
paulo@89
|
11870 };
|
|
paulo@89
|
11871
|
|
paulo@89
|
11872 nv.models.sparklinePlus = function() {
|
|
paulo@89
|
11873 "use strict";
|
|
paulo@89
|
11874
|
|
paulo@89
|
11875 //============================================================
|
|
paulo@89
|
11876 // Public Variables with Default Settings
|
|
paulo@89
|
11877 //------------------------------------------------------------
|
|
paulo@89
|
11878
|
|
paulo@89
|
11879 var sparkline = nv.models.sparkline();
|
|
paulo@89
|
11880
|
|
paulo@89
|
11881 var margin = {top: 15, right: 100, bottom: 10, left: 50}
|
|
paulo@89
|
11882 , width = null
|
|
paulo@89
|
11883 , height = null
|
|
paulo@89
|
11884 , x
|
|
paulo@89
|
11885 , y
|
|
paulo@89
|
11886 , index = []
|
|
paulo@89
|
11887 , paused = false
|
|
paulo@89
|
11888 , xTickFormat = d3.format(',r')
|
|
paulo@89
|
11889 , yTickFormat = d3.format(',.2f')
|
|
paulo@89
|
11890 , showLastValue = true
|
|
paulo@89
|
11891 , alignValue = true
|
|
paulo@89
|
11892 , rightAlignValue = false
|
|
paulo@89
|
11893 , noData = null
|
|
paulo@89
|
11894 ;
|
|
paulo@89
|
11895
|
|
paulo@89
|
11896 function chart(selection) {
|
|
paulo@89
|
11897 selection.each(function(data) {
|
|
paulo@89
|
11898 var container = d3.select(this);
|
|
paulo@89
|
11899 nv.utils.initSVG(container);
|
|
paulo@89
|
11900
|
|
paulo@89
|
11901 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
11902 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
11903
|
|
paulo@89
|
11904 chart.update = function() { container.call(chart); };
|
|
paulo@89
|
11905 chart.container = this;
|
|
paulo@89
|
11906
|
|
paulo@89
|
11907 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
11908 if (!data || !data.length) {
|
|
paulo@89
|
11909 nv.utils.noData(chart, container)
|
|
paulo@89
|
11910 return chart;
|
|
paulo@89
|
11911 } else {
|
|
paulo@89
|
11912 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
11913 }
|
|
paulo@89
|
11914
|
|
paulo@89
|
11915 var currentValue = sparkline.y()(data[data.length-1], data.length-1);
|
|
paulo@89
|
11916
|
|
paulo@89
|
11917 // Setup Scales
|
|
paulo@89
|
11918 x = sparkline.xScale();
|
|
paulo@89
|
11919 y = sparkline.yScale();
|
|
paulo@89
|
11920
|
|
paulo@89
|
11921 // Setup containers and skeleton of chart
|
|
paulo@89
|
11922 var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
|
|
paulo@89
|
11923 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus');
|
|
paulo@89
|
11924 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
11925 var g = wrap.select('g');
|
|
paulo@89
|
11926
|
|
paulo@89
|
11927 gEnter.append('g').attr('class', 'nv-sparklineWrap');
|
|
paulo@89
|
11928 gEnter.append('g').attr('class', 'nv-valueWrap');
|
|
paulo@89
|
11929 gEnter.append('g').attr('class', 'nv-hoverArea');
|
|
paulo@89
|
11930
|
|
paulo@89
|
11931 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
11932
|
|
paulo@89
|
11933 // Main Chart Component(s)
|
|
paulo@89
|
11934 var sparklineWrap = g.select('.nv-sparklineWrap');
|
|
paulo@89
|
11935
|
|
paulo@89
|
11936 sparkline.width(availableWidth).height(availableHeight);
|
|
paulo@89
|
11937 sparklineWrap.call(sparkline);
|
|
paulo@89
|
11938
|
|
paulo@89
|
11939 if (showLastValue) {
|
|
paulo@89
|
11940 var valueWrap = g.select('.nv-valueWrap');
|
|
paulo@89
|
11941 var value = valueWrap.selectAll('.nv-currentValue')
|
|
paulo@89
|
11942 .data([currentValue]);
|
|
paulo@89
|
11943
|
|
paulo@89
|
11944 value.enter().append('text').attr('class', 'nv-currentValue')
|
|
paulo@89
|
11945 .attr('dx', rightAlignValue ? -8 : 8)
|
|
paulo@89
|
11946 .attr('dy', '.9em')
|
|
paulo@89
|
11947 .style('text-anchor', rightAlignValue ? 'end' : 'start');
|
|
paulo@89
|
11948
|
|
paulo@89
|
11949 value
|
|
paulo@89
|
11950 .attr('x', availableWidth + (rightAlignValue ? margin.right : 0))
|
|
paulo@89
|
11951 .attr('y', alignValue ? function (d) {
|
|
paulo@89
|
11952 return y(d)
|
|
paulo@89
|
11953 } : 0)
|
|
paulo@89
|
11954 .style('fill', sparkline.color()(data[data.length - 1], data.length - 1))
|
|
paulo@89
|
11955 .text(yTickFormat(currentValue));
|
|
paulo@89
|
11956 }
|
|
paulo@89
|
11957
|
|
paulo@89
|
11958 gEnter.select('.nv-hoverArea').append('rect')
|
|
paulo@89
|
11959 .on('mousemove', sparklineHover)
|
|
paulo@89
|
11960 .on('click', function() { paused = !paused })
|
|
paulo@89
|
11961 .on('mouseout', function() { index = []; updateValueLine(); });
|
|
paulo@89
|
11962
|
|
paulo@89
|
11963 g.select('.nv-hoverArea rect')
|
|
paulo@89
|
11964 .attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
|
|
paulo@89
|
11965 .attr('width', availableWidth + margin.left + margin.right)
|
|
paulo@89
|
11966 .attr('height', availableHeight + margin.top);
|
|
paulo@89
|
11967
|
|
paulo@89
|
11968 //index is currently global (within the chart), may or may not keep it that way
|
|
paulo@89
|
11969 function updateValueLine() {
|
|
paulo@89
|
11970 if (paused) return;
|
|
paulo@89
|
11971
|
|
paulo@89
|
11972 var hoverValue = g.selectAll('.nv-hoverValue').data(index);
|
|
paulo@89
|
11973
|
|
paulo@89
|
11974 var hoverEnter = hoverValue.enter()
|
|
paulo@89
|
11975 .append('g').attr('class', 'nv-hoverValue')
|
|
paulo@89
|
11976 .style('stroke-opacity', 0)
|
|
paulo@89
|
11977 .style('fill-opacity', 0);
|
|
paulo@89
|
11978
|
|
paulo@89
|
11979 hoverValue.exit()
|
|
paulo@89
|
11980 .transition().duration(250)
|
|
paulo@89
|
11981 .style('stroke-opacity', 0)
|
|
paulo@89
|
11982 .style('fill-opacity', 0)
|
|
paulo@89
|
11983 .remove();
|
|
paulo@89
|
11984
|
|
paulo@89
|
11985 hoverValue
|
|
paulo@89
|
11986 .attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
|
|
paulo@89
|
11987 .transition().duration(250)
|
|
paulo@89
|
11988 .style('stroke-opacity', 1)
|
|
paulo@89
|
11989 .style('fill-opacity', 1);
|
|
paulo@89
|
11990
|
|
paulo@89
|
11991 if (!index.length) return;
|
|
paulo@89
|
11992
|
|
paulo@89
|
11993 hoverEnter.append('line')
|
|
paulo@89
|
11994 .attr('x1', 0)
|
|
paulo@89
|
11995 .attr('y1', -margin.top)
|
|
paulo@89
|
11996 .attr('x2', 0)
|
|
paulo@89
|
11997 .attr('y2', availableHeight);
|
|
paulo@89
|
11998
|
|
paulo@89
|
11999 hoverEnter.append('text').attr('class', 'nv-xValue')
|
|
paulo@89
|
12000 .attr('x', -6)
|
|
paulo@89
|
12001 .attr('y', -margin.top)
|
|
paulo@89
|
12002 .attr('text-anchor', 'end')
|
|
paulo@89
|
12003 .attr('dy', '.9em');
|
|
paulo@89
|
12004
|
|
paulo@89
|
12005 g.select('.nv-hoverValue .nv-xValue')
|
|
paulo@89
|
12006 .text(xTickFormat(sparkline.x()(data[index[0]], index[0])));
|
|
paulo@89
|
12007
|
|
paulo@89
|
12008 hoverEnter.append('text').attr('class', 'nv-yValue')
|
|
paulo@89
|
12009 .attr('x', 6)
|
|
paulo@89
|
12010 .attr('y', -margin.top)
|
|
paulo@89
|
12011 .attr('text-anchor', 'start')
|
|
paulo@89
|
12012 .attr('dy', '.9em');
|
|
paulo@89
|
12013
|
|
paulo@89
|
12014 g.select('.nv-hoverValue .nv-yValue')
|
|
paulo@89
|
12015 .text(yTickFormat(sparkline.y()(data[index[0]], index[0])));
|
|
paulo@89
|
12016 }
|
|
paulo@89
|
12017
|
|
paulo@89
|
12018 function sparklineHover() {
|
|
paulo@89
|
12019 if (paused) return;
|
|
paulo@89
|
12020
|
|
paulo@89
|
12021 var pos = d3.mouse(this)[0] - margin.left;
|
|
paulo@89
|
12022
|
|
paulo@89
|
12023 function getClosestIndex(data, x) {
|
|
paulo@89
|
12024 var distance = Math.abs(sparkline.x()(data[0], 0) - x);
|
|
paulo@89
|
12025 var closestIndex = 0;
|
|
paulo@89
|
12026 for (var i = 0; i < data.length; i++){
|
|
paulo@89
|
12027 if (Math.abs(sparkline.x()(data[i], i) - x) < distance) {
|
|
paulo@89
|
12028 distance = Math.abs(sparkline.x()(data[i], i) - x);
|
|
paulo@89
|
12029 closestIndex = i;
|
|
paulo@89
|
12030 }
|
|
paulo@89
|
12031 }
|
|
paulo@89
|
12032 return closestIndex;
|
|
paulo@89
|
12033 }
|
|
paulo@89
|
12034
|
|
paulo@89
|
12035 index = [getClosestIndex(data, Math.round(x.invert(pos)))];
|
|
paulo@89
|
12036 updateValueLine();
|
|
paulo@89
|
12037 }
|
|
paulo@89
|
12038
|
|
paulo@89
|
12039 });
|
|
paulo@89
|
12040
|
|
paulo@89
|
12041 return chart;
|
|
paulo@89
|
12042 }
|
|
paulo@89
|
12043
|
|
paulo@89
|
12044 //============================================================
|
|
paulo@89
|
12045 // Expose Public Variables
|
|
paulo@89
|
12046 //------------------------------------------------------------
|
|
paulo@89
|
12047
|
|
paulo@89
|
12048 // expose chart's sub-components
|
|
paulo@89
|
12049 chart.sparkline = sparkline;
|
|
paulo@89
|
12050
|
|
paulo@89
|
12051 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
12052
|
|
paulo@89
|
12053 chart._options = Object.create({}, {
|
|
paulo@89
|
12054 // simple options, just get/set the necessary values
|
|
paulo@89
|
12055 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
12056 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
12057 xTickFormat: {get: function(){return xTickFormat;}, set: function(_){xTickFormat=_;}},
|
|
paulo@89
|
12058 yTickFormat: {get: function(){return yTickFormat;}, set: function(_){yTickFormat=_;}},
|
|
paulo@89
|
12059 showLastValue: {get: function(){return showLastValue;}, set: function(_){showLastValue=_;}},
|
|
paulo@89
|
12060 alignValue: {get: function(){return alignValue;}, set: function(_){alignValue=_;}},
|
|
paulo@89
|
12061 rightAlignValue: {get: function(){return rightAlignValue;}, set: function(_){rightAlignValue=_;}},
|
|
paulo@89
|
12062 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
12063
|
|
paulo@89
|
12064 // options that require extra logic in the setter
|
|
paulo@89
|
12065 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
12066 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
12067 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
12068 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
12069 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
12070 }}
|
|
paulo@89
|
12071 });
|
|
paulo@89
|
12072
|
|
paulo@89
|
12073 nv.utils.inheritOptions(chart, sparkline);
|
|
paulo@89
|
12074 nv.utils.initOptions(chart);
|
|
paulo@89
|
12075
|
|
paulo@89
|
12076 return chart;
|
|
paulo@89
|
12077 };
|
|
paulo@89
|
12078
|
|
paulo@89
|
12079 nv.models.stackedArea = function() {
|
|
paulo@89
|
12080 "use strict";
|
|
paulo@89
|
12081
|
|
paulo@89
|
12082 //============================================================
|
|
paulo@89
|
12083 // Public Variables with Default Settings
|
|
paulo@89
|
12084 //------------------------------------------------------------
|
|
paulo@89
|
12085
|
|
paulo@89
|
12086 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
12087 , width = 960
|
|
paulo@89
|
12088 , height = 500
|
|
paulo@89
|
12089 , color = nv.utils.defaultColor() // a function that computes the color
|
|
paulo@89
|
12090 , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't selet one
|
|
paulo@89
|
12091 , container = null
|
|
paulo@89
|
12092 , getX = function(d) { return d.x } // accessor to get the x value from a data point
|
|
paulo@89
|
12093 , getY = function(d) { return d.y } // accessor to get the y value from a data point
|
|
paulo@89
|
12094 , style = 'stack'
|
|
paulo@89
|
12095 , offset = 'zero'
|
|
paulo@89
|
12096 , order = 'default'
|
|
paulo@89
|
12097 , interpolate = 'linear' // controls the line interpolation
|
|
paulo@89
|
12098 , clipEdge = false // if true, masks lines within x and y scale
|
|
paulo@89
|
12099 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
12100 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
12101 , scatter = nv.models.scatter()
|
|
paulo@89
|
12102 , duration = 250
|
|
paulo@89
|
12103 , dispatch = d3.dispatch('areaClick', 'areaMouseover', 'areaMouseout','renderEnd', 'elementClick', 'elementMouseover', 'elementMouseout')
|
|
paulo@89
|
12104 ;
|
|
paulo@89
|
12105
|
|
paulo@89
|
12106 scatter
|
|
paulo@89
|
12107 .pointSize(2.2) // default size
|
|
paulo@89
|
12108 .pointDomain([2.2, 2.2]) // all the same size by default
|
|
paulo@89
|
12109 ;
|
|
paulo@89
|
12110
|
|
paulo@89
|
12111 /************************************
|
|
paulo@89
|
12112 * offset:
|
|
paulo@89
|
12113 * 'wiggle' (stream)
|
|
paulo@89
|
12114 * 'zero' (stacked)
|
|
paulo@89
|
12115 * 'expand' (normalize to 100%)
|
|
paulo@89
|
12116 * 'silhouette' (simple centered)
|
|
paulo@89
|
12117 *
|
|
paulo@89
|
12118 * order:
|
|
paulo@89
|
12119 * 'inside-out' (stream)
|
|
paulo@89
|
12120 * 'default' (input order)
|
|
paulo@89
|
12121 ************************************/
|
|
paulo@89
|
12122
|
|
paulo@89
|
12123 var renderWatch = nv.utils.renderWatch(dispatch, duration);
|
|
paulo@89
|
12124
|
|
paulo@89
|
12125 function chart(selection) {
|
|
paulo@89
|
12126 renderWatch.reset();
|
|
paulo@89
|
12127 renderWatch.models(scatter);
|
|
paulo@89
|
12128 selection.each(function(data) {
|
|
paulo@89
|
12129 var availableWidth = width - margin.left - margin.right,
|
|
paulo@89
|
12130 availableHeight = height - margin.top - margin.bottom;
|
|
paulo@89
|
12131
|
|
paulo@89
|
12132 container = d3.select(this);
|
|
paulo@89
|
12133 nv.utils.initSVG(container);
|
|
paulo@89
|
12134
|
|
paulo@89
|
12135 // Setup Scales
|
|
paulo@89
|
12136 x = scatter.xScale();
|
|
paulo@89
|
12137 y = scatter.yScale();
|
|
paulo@89
|
12138
|
|
paulo@89
|
12139 var dataRaw = data;
|
|
paulo@89
|
12140 // Injecting point index into each point because d3.layout.stack().out does not give index
|
|
paulo@89
|
12141 data.forEach(function(aseries, i) {
|
|
paulo@89
|
12142 aseries.seriesIndex = i;
|
|
paulo@89
|
12143 aseries.values = aseries.values.map(function(d, j) {
|
|
paulo@89
|
12144 d.index = j;
|
|
paulo@89
|
12145 d.seriesIndex = i;
|
|
paulo@89
|
12146 return d;
|
|
paulo@89
|
12147 });
|
|
paulo@89
|
12148 });
|
|
paulo@89
|
12149
|
|
paulo@89
|
12150 var dataFiltered = data.filter(function(series) {
|
|
paulo@89
|
12151 return !series.disabled;
|
|
paulo@89
|
12152 });
|
|
paulo@89
|
12153
|
|
paulo@89
|
12154 data = d3.layout.stack()
|
|
paulo@89
|
12155 .order(order)
|
|
paulo@89
|
12156 .offset(offset)
|
|
paulo@89
|
12157 .values(function(d) { return d.values }) //TODO: make values customizeable in EVERY model in this fashion
|
|
paulo@89
|
12158 .x(getX)
|
|
paulo@89
|
12159 .y(getY)
|
|
paulo@89
|
12160 .out(function(d, y0, y) {
|
|
paulo@89
|
12161 d.display = {
|
|
paulo@89
|
12162 y: y,
|
|
paulo@89
|
12163 y0: y0
|
|
paulo@89
|
12164 };
|
|
paulo@89
|
12165 })
|
|
paulo@89
|
12166 (dataFiltered);
|
|
paulo@89
|
12167
|
|
paulo@89
|
12168 // Setup containers and skeleton of chart
|
|
paulo@89
|
12169 var wrap = container.selectAll('g.nv-wrap.nv-stackedarea').data([data]);
|
|
paulo@89
|
12170 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedarea');
|
|
paulo@89
|
12171 var defsEnter = wrapEnter.append('defs');
|
|
paulo@89
|
12172 var gEnter = wrapEnter.append('g');
|
|
paulo@89
|
12173 var g = wrap.select('g');
|
|
paulo@89
|
12174
|
|
paulo@89
|
12175 gEnter.append('g').attr('class', 'nv-areaWrap');
|
|
paulo@89
|
12176 gEnter.append('g').attr('class', 'nv-scatterWrap');
|
|
paulo@89
|
12177
|
|
paulo@89
|
12178 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
12179
|
|
paulo@89
|
12180 // If the user has not specified forceY, make sure 0 is included in the domain
|
|
paulo@89
|
12181 // Otherwise, use user-specified values for forceY
|
|
paulo@89
|
12182 if (scatter.forceY().length == 0) {
|
|
paulo@89
|
12183 scatter.forceY().push(0);
|
|
paulo@89
|
12184 }
|
|
paulo@89
|
12185
|
|
paulo@89
|
12186 scatter
|
|
paulo@89
|
12187 .width(availableWidth)
|
|
paulo@89
|
12188 .height(availableHeight)
|
|
paulo@89
|
12189 .x(getX)
|
|
paulo@89
|
12190 .y(function(d) { return d.display.y + d.display.y0 })
|
|
paulo@89
|
12191 .forceY([0])
|
|
paulo@89
|
12192 .color(data.map(function(d,i) {
|
|
paulo@89
|
12193 return d.color || color(d, d.seriesIndex);
|
|
paulo@89
|
12194 }));
|
|
paulo@89
|
12195
|
|
paulo@89
|
12196 var scatterWrap = g.select('.nv-scatterWrap')
|
|
paulo@89
|
12197 .datum(data);
|
|
paulo@89
|
12198
|
|
paulo@89
|
12199 scatterWrap.call(scatter);
|
|
paulo@89
|
12200
|
|
paulo@89
|
12201 defsEnter.append('clipPath')
|
|
paulo@89
|
12202 .attr('id', 'nv-edge-clip-' + id)
|
|
paulo@89
|
12203 .append('rect');
|
|
paulo@89
|
12204
|
|
paulo@89
|
12205 wrap.select('#nv-edge-clip-' + id + ' rect')
|
|
paulo@89
|
12206 .attr('width', availableWidth)
|
|
paulo@89
|
12207 .attr('height', availableHeight);
|
|
paulo@89
|
12208
|
|
paulo@89
|
12209 g.attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');
|
|
paulo@89
|
12210
|
|
paulo@89
|
12211 var area = d3.svg.area()
|
|
paulo@89
|
12212 .x(function(d,i) { return x(getX(d,i)) })
|
|
paulo@89
|
12213 .y0(function(d) {
|
|
paulo@89
|
12214 return y(d.display.y0)
|
|
paulo@89
|
12215 })
|
|
paulo@89
|
12216 .y1(function(d) {
|
|
paulo@89
|
12217 return y(d.display.y + d.display.y0)
|
|
paulo@89
|
12218 })
|
|
paulo@89
|
12219 .interpolate(interpolate);
|
|
paulo@89
|
12220
|
|
paulo@89
|
12221 var zeroArea = d3.svg.area()
|
|
paulo@89
|
12222 .x(function(d,i) { return x(getX(d,i)) })
|
|
paulo@89
|
12223 .y0(function(d) { return y(d.display.y0) })
|
|
paulo@89
|
12224 .y1(function(d) { return y(d.display.y0) });
|
|
paulo@89
|
12225
|
|
paulo@89
|
12226 var path = g.select('.nv-areaWrap').selectAll('path.nv-area')
|
|
paulo@89
|
12227 .data(function(d) { return d });
|
|
paulo@89
|
12228
|
|
paulo@89
|
12229 path.enter().append('path').attr('class', function(d,i) { return 'nv-area nv-area-' + i })
|
|
paulo@89
|
12230 .attr('d', function(d,i){
|
|
paulo@89
|
12231 return zeroArea(d.values, d.seriesIndex);
|
|
paulo@89
|
12232 })
|
|
paulo@89
|
12233 .on('mouseover', function(d,i) {
|
|
paulo@89
|
12234 d3.select(this).classed('hover', true);
|
|
paulo@89
|
12235 dispatch.areaMouseover({
|
|
paulo@89
|
12236 point: d,
|
|
paulo@89
|
12237 series: d.key,
|
|
paulo@89
|
12238 pos: [d3.event.pageX, d3.event.pageY],
|
|
paulo@89
|
12239 seriesIndex: d.seriesIndex
|
|
paulo@89
|
12240 });
|
|
paulo@89
|
12241 })
|
|
paulo@89
|
12242 .on('mouseout', function(d,i) {
|
|
paulo@89
|
12243 d3.select(this).classed('hover', false);
|
|
paulo@89
|
12244 dispatch.areaMouseout({
|
|
paulo@89
|
12245 point: d,
|
|
paulo@89
|
12246 series: d.key,
|
|
paulo@89
|
12247 pos: [d3.event.pageX, d3.event.pageY],
|
|
paulo@89
|
12248 seriesIndex: d.seriesIndex
|
|
paulo@89
|
12249 });
|
|
paulo@89
|
12250 })
|
|
paulo@89
|
12251 .on('click', function(d,i) {
|
|
paulo@89
|
12252 d3.select(this).classed('hover', false);
|
|
paulo@89
|
12253 dispatch.areaClick({
|
|
paulo@89
|
12254 point: d,
|
|
paulo@89
|
12255 series: d.key,
|
|
paulo@89
|
12256 pos: [d3.event.pageX, d3.event.pageY],
|
|
paulo@89
|
12257 seriesIndex: d.seriesIndex
|
|
paulo@89
|
12258 });
|
|
paulo@89
|
12259 });
|
|
paulo@89
|
12260
|
|
paulo@89
|
12261 path.exit().remove();
|
|
paulo@89
|
12262 path.style('fill', function(d,i){
|
|
paulo@89
|
12263 return d.color || color(d, d.seriesIndex)
|
|
paulo@89
|
12264 })
|
|
paulo@89
|
12265 .style('stroke', function(d,i){ return d.color || color(d, d.seriesIndex) });
|
|
paulo@89
|
12266 path.watchTransition(renderWatch,'stackedArea path')
|
|
paulo@89
|
12267 .attr('d', function(d,i) {
|
|
paulo@89
|
12268 return area(d.values,i)
|
|
paulo@89
|
12269 });
|
|
paulo@89
|
12270
|
|
paulo@89
|
12271 //============================================================
|
|
paulo@89
|
12272 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
12273 //------------------------------------------------------------
|
|
paulo@89
|
12274
|
|
paulo@89
|
12275 scatter.dispatch.on('elementMouseover.area', function(e) {
|
|
paulo@89
|
12276 g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', true);
|
|
paulo@89
|
12277 });
|
|
paulo@89
|
12278 scatter.dispatch.on('elementMouseout.area', function(e) {
|
|
paulo@89
|
12279 g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', false);
|
|
paulo@89
|
12280 });
|
|
paulo@89
|
12281
|
|
paulo@89
|
12282 //Special offset functions
|
|
paulo@89
|
12283 chart.d3_stackedOffset_stackPercent = function(stackData) {
|
|
paulo@89
|
12284 var n = stackData.length, //How many series
|
|
paulo@89
|
12285 m = stackData[0].length, //how many points per series
|
|
paulo@89
|
12286 i,
|
|
paulo@89
|
12287 j,
|
|
paulo@89
|
12288 o,
|
|
paulo@89
|
12289 y0 = [];
|
|
paulo@89
|
12290
|
|
paulo@89
|
12291 for (j = 0; j < m; ++j) { //Looping through all points
|
|
paulo@89
|
12292 for (i = 0, o = 0; i < dataRaw.length; i++) { //looping through all series
|
|
paulo@89
|
12293 o += getY(dataRaw[i].values[j]); //total y value of all series at a certian point in time.
|
|
paulo@89
|
12294 }
|
|
paulo@89
|
12295
|
|
paulo@89
|
12296 if (o) for (i = 0; i < n; i++) { //(total y value of all series at point in time i) != 0
|
|
paulo@89
|
12297 stackData[i][j][1] /= o;
|
|
paulo@89
|
12298 } else { //(total y value of all series at point in time i) == 0
|
|
paulo@89
|
12299 for (i = 0; i < n; i++) {
|
|
paulo@89
|
12300 stackData[i][j][1] = 0;
|
|
paulo@89
|
12301 }
|
|
paulo@89
|
12302 }
|
|
paulo@89
|
12303 }
|
|
paulo@89
|
12304 for (j = 0; j < m; ++j) y0[j] = 0;
|
|
paulo@89
|
12305 return y0;
|
|
paulo@89
|
12306 };
|
|
paulo@89
|
12307
|
|
paulo@89
|
12308 });
|
|
paulo@89
|
12309
|
|
paulo@89
|
12310 renderWatch.renderEnd('stackedArea immediate');
|
|
paulo@89
|
12311 return chart;
|
|
paulo@89
|
12312 }
|
|
paulo@89
|
12313
|
|
paulo@89
|
12314 //============================================================
|
|
paulo@89
|
12315 // Global getters and setters
|
|
paulo@89
|
12316 //------------------------------------------------------------
|
|
paulo@89
|
12317
|
|
paulo@89
|
12318 chart.dispatch = dispatch;
|
|
paulo@89
|
12319 chart.scatter = scatter;
|
|
paulo@89
|
12320
|
|
paulo@89
|
12321 scatter.dispatch.on('elementClick', function(){ dispatch.elementClick.apply(this, arguments); });
|
|
paulo@89
|
12322 scatter.dispatch.on('elementMouseover', function(){ dispatch.elementMouseover.apply(this, arguments); });
|
|
paulo@89
|
12323 scatter.dispatch.on('elementMouseout', function(){ dispatch.elementMouseout.apply(this, arguments); });
|
|
paulo@89
|
12324
|
|
paulo@89
|
12325 chart.interpolate = function(_) {
|
|
paulo@89
|
12326 if (!arguments.length) return interpolate;
|
|
paulo@89
|
12327 interpolate = _;
|
|
paulo@89
|
12328 return chart;
|
|
paulo@89
|
12329 };
|
|
paulo@89
|
12330
|
|
paulo@89
|
12331 chart.duration = function(_) {
|
|
paulo@89
|
12332 if (!arguments.length) return duration;
|
|
paulo@89
|
12333 duration = _;
|
|
paulo@89
|
12334 renderWatch.reset(duration);
|
|
paulo@89
|
12335 scatter.duration(duration);
|
|
paulo@89
|
12336 return chart;
|
|
paulo@89
|
12337 };
|
|
paulo@89
|
12338
|
|
paulo@89
|
12339 chart.dispatch = dispatch;
|
|
paulo@89
|
12340 chart.scatter = scatter;
|
|
paulo@89
|
12341 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
12342
|
|
paulo@89
|
12343 chart._options = Object.create({}, {
|
|
paulo@89
|
12344 // simple options, just get/set the necessary values
|
|
paulo@89
|
12345 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
12346 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
12347 clipEdge: {get: function(){return clipEdge;}, set: function(_){clipEdge=_;}},
|
|
paulo@89
|
12348 offset: {get: function(){return offset;}, set: function(_){offset=_;}},
|
|
paulo@89
|
12349 order: {get: function(){return order;}, set: function(_){order=_;}},
|
|
paulo@89
|
12350 interpolate: {get: function(){return interpolate;}, set: function(_){interpolate=_;}},
|
|
paulo@89
|
12351
|
|
paulo@89
|
12352 // simple functor options
|
|
paulo@89
|
12353 x: {get: function(){return getX;}, set: function(_){getX = d3.functor(_);}},
|
|
paulo@89
|
12354 y: {get: function(){return getY;}, set: function(_){getY = d3.functor(_);}},
|
|
paulo@89
|
12355
|
|
paulo@89
|
12356 // options that require extra logic in the setter
|
|
paulo@89
|
12357 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
12358 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
12359 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
12360 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
12361 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
12362 }},
|
|
paulo@89
|
12363 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
12364 color = nv.utils.getColor(_);
|
|
paulo@89
|
12365 }},
|
|
paulo@89
|
12366 style: {get: function(){return style;}, set: function(_){
|
|
paulo@89
|
12367 style = _;
|
|
paulo@89
|
12368 switch (style) {
|
|
paulo@89
|
12369 case 'stack':
|
|
paulo@89
|
12370 chart.offset('zero');
|
|
paulo@89
|
12371 chart.order('default');
|
|
paulo@89
|
12372 break;
|
|
paulo@89
|
12373 case 'stream':
|
|
paulo@89
|
12374 chart.offset('wiggle');
|
|
paulo@89
|
12375 chart.order('inside-out');
|
|
paulo@89
|
12376 break;
|
|
paulo@89
|
12377 case 'stream-center':
|
|
paulo@89
|
12378 chart.offset('silhouette');
|
|
paulo@89
|
12379 chart.order('inside-out');
|
|
paulo@89
|
12380 break;
|
|
paulo@89
|
12381 case 'expand':
|
|
paulo@89
|
12382 chart.offset('expand');
|
|
paulo@89
|
12383 chart.order('default');
|
|
paulo@89
|
12384 break;
|
|
paulo@89
|
12385 case 'stack_percent':
|
|
paulo@89
|
12386 chart.offset(chart.d3_stackedOffset_stackPercent);
|
|
paulo@89
|
12387 chart.order('default');
|
|
paulo@89
|
12388 break;
|
|
paulo@89
|
12389 }
|
|
paulo@89
|
12390 }},
|
|
paulo@89
|
12391 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
12392 duration = _;
|
|
paulo@89
|
12393 renderWatch.reset(duration);
|
|
paulo@89
|
12394 scatter.duration(duration);
|
|
paulo@89
|
12395 }}
|
|
paulo@89
|
12396 });
|
|
paulo@89
|
12397
|
|
paulo@89
|
12398 nv.utils.inheritOptions(chart, scatter);
|
|
paulo@89
|
12399 nv.utils.initOptions(chart);
|
|
paulo@89
|
12400
|
|
paulo@89
|
12401 return chart;
|
|
paulo@89
|
12402 };
|
|
paulo@89
|
12403
|
|
paulo@89
|
12404 nv.models.stackedAreaChart = function() {
|
|
paulo@89
|
12405 "use strict";
|
|
paulo@89
|
12406
|
|
paulo@89
|
12407 //============================================================
|
|
paulo@89
|
12408 // Public Variables with Default Settings
|
|
paulo@89
|
12409 //------------------------------------------------------------
|
|
paulo@89
|
12410
|
|
paulo@89
|
12411 var stacked = nv.models.stackedArea()
|
|
paulo@89
|
12412 , xAxis = nv.models.axis()
|
|
paulo@89
|
12413 , yAxis = nv.models.axis()
|
|
paulo@89
|
12414 , legend = nv.models.legend()
|
|
paulo@89
|
12415 , controls = nv.models.legend()
|
|
paulo@89
|
12416 , interactiveLayer = nv.interactiveGuideline()
|
|
paulo@89
|
12417 , tooltip = nv.models.tooltip()
|
|
paulo@89
|
12418 ;
|
|
paulo@89
|
12419
|
|
paulo@89
|
12420 var margin = {top: 30, right: 25, bottom: 50, left: 60}
|
|
paulo@89
|
12421 , width = null
|
|
paulo@89
|
12422 , height = null
|
|
paulo@89
|
12423 , color = nv.utils.defaultColor()
|
|
paulo@89
|
12424 , showControls = true
|
|
paulo@89
|
12425 , showLegend = true
|
|
paulo@89
|
12426 , showXAxis = true
|
|
paulo@89
|
12427 , showYAxis = true
|
|
paulo@89
|
12428 , rightAlignYAxis = false
|
|
paulo@89
|
12429 , useInteractiveGuideline = false
|
|
paulo@89
|
12430 , x //can be accessed via chart.xScale()
|
|
paulo@89
|
12431 , y //can be accessed via chart.yScale()
|
|
paulo@89
|
12432 , state = nv.utils.state()
|
|
paulo@89
|
12433 , defaultState = null
|
|
paulo@89
|
12434 , noData = null
|
|
paulo@89
|
12435 , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd')
|
|
paulo@89
|
12436 , controlWidth = 250
|
|
paulo@89
|
12437 , controlOptions = ['Stacked','Stream','Expanded']
|
|
paulo@89
|
12438 , controlLabels = {}
|
|
paulo@89
|
12439 , duration = 250
|
|
paulo@89
|
12440 ;
|
|
paulo@89
|
12441
|
|
paulo@89
|
12442 state.style = stacked.style();
|
|
paulo@89
|
12443 xAxis.orient('bottom').tickPadding(7);
|
|
paulo@89
|
12444 yAxis.orient((rightAlignYAxis) ? 'right' : 'left');
|
|
paulo@89
|
12445
|
|
paulo@89
|
12446 tooltip
|
|
paulo@89
|
12447 .headerFormatter(function(d, i) {
|
|
paulo@89
|
12448 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
12449 })
|
|
paulo@89
|
12450 .valueFormatter(function(d, i) {
|
|
paulo@89
|
12451 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
12452 });
|
|
paulo@89
|
12453
|
|
paulo@89
|
12454 interactiveLayer.tooltip
|
|
paulo@89
|
12455 .headerFormatter(function(d, i) {
|
|
paulo@89
|
12456 return xAxis.tickFormat()(d, i);
|
|
paulo@89
|
12457 })
|
|
paulo@89
|
12458 .valueFormatter(function(d, i) {
|
|
paulo@89
|
12459 return yAxis.tickFormat()(d, i);
|
|
paulo@89
|
12460 });
|
|
paulo@89
|
12461
|
|
paulo@89
|
12462 var oldYTickFormat = null,
|
|
paulo@89
|
12463 oldValueFormatter = null;
|
|
paulo@89
|
12464
|
|
paulo@89
|
12465 controls.updateState(false);
|
|
paulo@89
|
12466
|
|
paulo@89
|
12467 //============================================================
|
|
paulo@89
|
12468 // Private Variables
|
|
paulo@89
|
12469 //------------------------------------------------------------
|
|
paulo@89
|
12470
|
|
paulo@89
|
12471 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
12472 var style = stacked.style();
|
|
paulo@89
|
12473
|
|
paulo@89
|
12474 var stateGetter = function(data) {
|
|
paulo@89
|
12475 return function(){
|
|
paulo@89
|
12476 return {
|
|
paulo@89
|
12477 active: data.map(function(d) { return !d.disabled }),
|
|
paulo@89
|
12478 style: stacked.style()
|
|
paulo@89
|
12479 };
|
|
paulo@89
|
12480 }
|
|
paulo@89
|
12481 };
|
|
paulo@89
|
12482
|
|
paulo@89
|
12483 var stateSetter = function(data) {
|
|
paulo@89
|
12484 return function(state) {
|
|
paulo@89
|
12485 if (state.style !== undefined)
|
|
paulo@89
|
12486 style = state.style;
|
|
paulo@89
|
12487 if (state.active !== undefined)
|
|
paulo@89
|
12488 data.forEach(function(series,i) {
|
|
paulo@89
|
12489 series.disabled = !state.active[i];
|
|
paulo@89
|
12490 });
|
|
paulo@89
|
12491 }
|
|
paulo@89
|
12492 };
|
|
paulo@89
|
12493
|
|
paulo@89
|
12494 var percentFormatter = d3.format('%');
|
|
paulo@89
|
12495
|
|
paulo@89
|
12496 function chart(selection) {
|
|
paulo@89
|
12497 renderWatch.reset();
|
|
paulo@89
|
12498 renderWatch.models(stacked);
|
|
paulo@89
|
12499 if (showXAxis) renderWatch.models(xAxis);
|
|
paulo@89
|
12500 if (showYAxis) renderWatch.models(yAxis);
|
|
paulo@89
|
12501
|
|
paulo@89
|
12502 selection.each(function(data) {
|
|
paulo@89
|
12503 var container = d3.select(this),
|
|
paulo@89
|
12504 that = this;
|
|
paulo@89
|
12505 nv.utils.initSVG(container);
|
|
paulo@89
|
12506
|
|
paulo@89
|
12507 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
12508 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
12509
|
|
paulo@89
|
12510 chart.update = function() { container.transition().duration(duration).call(chart); };
|
|
paulo@89
|
12511 chart.container = this;
|
|
paulo@89
|
12512
|
|
paulo@89
|
12513 state
|
|
paulo@89
|
12514 .setter(stateSetter(data), chart.update)
|
|
paulo@89
|
12515 .getter(stateGetter(data))
|
|
paulo@89
|
12516 .update();
|
|
paulo@89
|
12517
|
|
paulo@89
|
12518 // DEPRECATED set state.disabled
|
|
paulo@89
|
12519 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
12520
|
|
paulo@89
|
12521 if (!defaultState) {
|
|
paulo@89
|
12522 var key;
|
|
paulo@89
|
12523 defaultState = {};
|
|
paulo@89
|
12524 for (key in state) {
|
|
paulo@89
|
12525 if (state[key] instanceof Array)
|
|
paulo@89
|
12526 defaultState[key] = state[key].slice(0);
|
|
paulo@89
|
12527 else
|
|
paulo@89
|
12528 defaultState[key] = state[key];
|
|
paulo@89
|
12529 }
|
|
paulo@89
|
12530 }
|
|
paulo@89
|
12531
|
|
paulo@89
|
12532 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
12533 if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
|
|
paulo@89
|
12534 nv.utils.noData(chart, container)
|
|
paulo@89
|
12535 return chart;
|
|
paulo@89
|
12536 } else {
|
|
paulo@89
|
12537 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
12538 }
|
|
paulo@89
|
12539
|
|
paulo@89
|
12540 // Setup Scales
|
|
paulo@89
|
12541 x = stacked.xScale();
|
|
paulo@89
|
12542 y = stacked.yScale();
|
|
paulo@89
|
12543
|
|
paulo@89
|
12544 // Setup containers and skeleton of chart
|
|
paulo@89
|
12545 var wrap = container.selectAll('g.nv-wrap.nv-stackedAreaChart').data([data]);
|
|
paulo@89
|
12546 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedAreaChart').append('g');
|
|
paulo@89
|
12547 var g = wrap.select('g');
|
|
paulo@89
|
12548
|
|
paulo@89
|
12549 gEnter.append("rect").style("opacity",0);
|
|
paulo@89
|
12550 gEnter.append('g').attr('class', 'nv-x nv-axis');
|
|
paulo@89
|
12551 gEnter.append('g').attr('class', 'nv-y nv-axis');
|
|
paulo@89
|
12552 gEnter.append('g').attr('class', 'nv-stackedWrap');
|
|
paulo@89
|
12553 gEnter.append('g').attr('class', 'nv-legendWrap');
|
|
paulo@89
|
12554 gEnter.append('g').attr('class', 'nv-controlsWrap');
|
|
paulo@89
|
12555 gEnter.append('g').attr('class', 'nv-interactive');
|
|
paulo@89
|
12556
|
|
paulo@89
|
12557 g.select("rect").attr("width",availableWidth).attr("height",availableHeight);
|
|
paulo@89
|
12558
|
|
paulo@89
|
12559 // Legend
|
|
paulo@89
|
12560 if (showLegend) {
|
|
paulo@89
|
12561 var legendWidth = (showControls) ? availableWidth - controlWidth : availableWidth;
|
|
paulo@89
|
12562
|
|
paulo@89
|
12563 legend.width(legendWidth);
|
|
paulo@89
|
12564 g.select('.nv-legendWrap').datum(data).call(legend);
|
|
paulo@89
|
12565
|
|
paulo@89
|
12566 if ( margin.top != legend.height()) {
|
|
paulo@89
|
12567 margin.top = legend.height();
|
|
paulo@89
|
12568 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
12569 }
|
|
paulo@89
|
12570
|
|
paulo@89
|
12571 g.select('.nv-legendWrap')
|
|
paulo@89
|
12572 .attr('transform', 'translate(' + (availableWidth-legendWidth) + ',' + (-margin.top) +')');
|
|
paulo@89
|
12573 }
|
|
paulo@89
|
12574
|
|
paulo@89
|
12575 // Controls
|
|
paulo@89
|
12576 if (showControls) {
|
|
paulo@89
|
12577 var controlsData = [
|
|
paulo@89
|
12578 {
|
|
paulo@89
|
12579 key: controlLabels.stacked || 'Stacked',
|
|
paulo@89
|
12580 metaKey: 'Stacked',
|
|
paulo@89
|
12581 disabled: stacked.style() != 'stack',
|
|
paulo@89
|
12582 style: 'stack'
|
|
paulo@89
|
12583 },
|
|
paulo@89
|
12584 {
|
|
paulo@89
|
12585 key: controlLabels.stream || 'Stream',
|
|
paulo@89
|
12586 metaKey: 'Stream',
|
|
paulo@89
|
12587 disabled: stacked.style() != 'stream',
|
|
paulo@89
|
12588 style: 'stream'
|
|
paulo@89
|
12589 },
|
|
paulo@89
|
12590 {
|
|
paulo@89
|
12591 key: controlLabels.expanded || 'Expanded',
|
|
paulo@89
|
12592 metaKey: 'Expanded',
|
|
paulo@89
|
12593 disabled: stacked.style() != 'expand',
|
|
paulo@89
|
12594 style: 'expand'
|
|
paulo@89
|
12595 },
|
|
paulo@89
|
12596 {
|
|
paulo@89
|
12597 key: controlLabels.stack_percent || 'Stack %',
|
|
paulo@89
|
12598 metaKey: 'Stack_Percent',
|
|
paulo@89
|
12599 disabled: stacked.style() != 'stack_percent',
|
|
paulo@89
|
12600 style: 'stack_percent'
|
|
paulo@89
|
12601 }
|
|
paulo@89
|
12602 ];
|
|
paulo@89
|
12603
|
|
paulo@89
|
12604 controlWidth = (controlOptions.length/3) * 260;
|
|
paulo@89
|
12605 controlsData = controlsData.filter(function(d) {
|
|
paulo@89
|
12606 return controlOptions.indexOf(d.metaKey) !== -1;
|
|
paulo@89
|
12607 });
|
|
paulo@89
|
12608
|
|
paulo@89
|
12609 controls
|
|
paulo@89
|
12610 .width( controlWidth )
|
|
paulo@89
|
12611 .color(['#444', '#444', '#444']);
|
|
paulo@89
|
12612
|
|
paulo@89
|
12613 g.select('.nv-controlsWrap')
|
|
paulo@89
|
12614 .datum(controlsData)
|
|
paulo@89
|
12615 .call(controls);
|
|
paulo@89
|
12616
|
|
paulo@89
|
12617 if ( margin.top != Math.max(controls.height(), legend.height()) ) {
|
|
paulo@89
|
12618 margin.top = Math.max(controls.height(), legend.height());
|
|
paulo@89
|
12619 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
12620 }
|
|
paulo@89
|
12621
|
|
paulo@89
|
12622 g.select('.nv-controlsWrap')
|
|
paulo@89
|
12623 .attr('transform', 'translate(0,' + (-margin.top) +')');
|
|
paulo@89
|
12624 }
|
|
paulo@89
|
12625
|
|
paulo@89
|
12626 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
12627
|
|
paulo@89
|
12628 if (rightAlignYAxis) {
|
|
paulo@89
|
12629 g.select(".nv-y.nv-axis")
|
|
paulo@89
|
12630 .attr("transform", "translate(" + availableWidth + ",0)");
|
|
paulo@89
|
12631 }
|
|
paulo@89
|
12632
|
|
paulo@89
|
12633 //Set up interactive layer
|
|
paulo@89
|
12634 if (useInteractiveGuideline) {
|
|
paulo@89
|
12635 interactiveLayer
|
|
paulo@89
|
12636 .width(availableWidth)
|
|
paulo@89
|
12637 .height(availableHeight)
|
|
paulo@89
|
12638 .margin({left: margin.left, top: margin.top})
|
|
paulo@89
|
12639 .svgContainer(container)
|
|
paulo@89
|
12640 .xScale(x);
|
|
paulo@89
|
12641 wrap.select(".nv-interactive").call(interactiveLayer);
|
|
paulo@89
|
12642 }
|
|
paulo@89
|
12643
|
|
paulo@89
|
12644 stacked
|
|
paulo@89
|
12645 .width(availableWidth)
|
|
paulo@89
|
12646 .height(availableHeight);
|
|
paulo@89
|
12647
|
|
paulo@89
|
12648 var stackedWrap = g.select('.nv-stackedWrap')
|
|
paulo@89
|
12649 .datum(data);
|
|
paulo@89
|
12650
|
|
paulo@89
|
12651 stackedWrap.transition().call(stacked);
|
|
paulo@89
|
12652
|
|
paulo@89
|
12653 // Setup Axes
|
|
paulo@89
|
12654 if (showXAxis) {
|
|
paulo@89
|
12655 xAxis.scale(x)
|
|
paulo@89
|
12656 ._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
|
|
paulo@89
|
12657 .tickSize( -availableHeight, 0);
|
|
paulo@89
|
12658
|
|
paulo@89
|
12659 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
12660 .attr('transform', 'translate(0,' + availableHeight + ')');
|
|
paulo@89
|
12661
|
|
paulo@89
|
12662 g.select('.nv-x.nv-axis')
|
|
paulo@89
|
12663 .transition().duration(0)
|
|
paulo@89
|
12664 .call(xAxis);
|
|
paulo@89
|
12665 }
|
|
paulo@89
|
12666
|
|
paulo@89
|
12667 if (showYAxis) {
|
|
paulo@89
|
12668 var ticks;
|
|
paulo@89
|
12669 if (stacked.offset() === 'wiggle') {
|
|
paulo@89
|
12670 ticks = 0;
|
|
paulo@89
|
12671 }
|
|
paulo@89
|
12672 else {
|
|
paulo@89
|
12673 ticks = nv.utils.calcTicksY(availableHeight/36, data);
|
|
paulo@89
|
12674 }
|
|
paulo@89
|
12675 yAxis.scale(y)
|
|
paulo@89
|
12676 ._ticks(ticks)
|
|
paulo@89
|
12677 .tickSize(-availableWidth, 0);
|
|
paulo@89
|
12678
|
|
paulo@89
|
12679 if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {
|
|
paulo@89
|
12680 var currentFormat = yAxis.tickFormat();
|
|
paulo@89
|
12681
|
|
paulo@89
|
12682 if ( !oldYTickFormat || currentFormat !== percentFormatter )
|
|
paulo@89
|
12683 oldYTickFormat = currentFormat;
|
|
paulo@89
|
12684
|
|
paulo@89
|
12685 //Forces the yAxis to use percentage in 'expand' mode.
|
|
paulo@89
|
12686 yAxis.tickFormat(percentFormatter);
|
|
paulo@89
|
12687 }
|
|
paulo@89
|
12688 else {
|
|
paulo@89
|
12689 if (oldYTickFormat) {
|
|
paulo@89
|
12690 yAxis.tickFormat(oldYTickFormat);
|
|
paulo@89
|
12691 oldYTickFormat = null;
|
|
paulo@89
|
12692 }
|
|
paulo@89
|
12693 }
|
|
paulo@89
|
12694
|
|
paulo@89
|
12695 g.select('.nv-y.nv-axis')
|
|
paulo@89
|
12696 .transition().duration(0)
|
|
paulo@89
|
12697 .call(yAxis);
|
|
paulo@89
|
12698 }
|
|
paulo@89
|
12699
|
|
paulo@89
|
12700 //============================================================
|
|
paulo@89
|
12701 // Event Handling/Dispatching (in chart's scope)
|
|
paulo@89
|
12702 //------------------------------------------------------------
|
|
paulo@89
|
12703
|
|
paulo@89
|
12704 stacked.dispatch.on('areaClick.toggle', function(e) {
|
|
paulo@89
|
12705 if (data.filter(function(d) { return !d.disabled }).length === 1)
|
|
paulo@89
|
12706 data.forEach(function(d) {
|
|
paulo@89
|
12707 d.disabled = false;
|
|
paulo@89
|
12708 });
|
|
paulo@89
|
12709 else
|
|
paulo@89
|
12710 data.forEach(function(d,i) {
|
|
paulo@89
|
12711 d.disabled = (i != e.seriesIndex);
|
|
paulo@89
|
12712 });
|
|
paulo@89
|
12713
|
|
paulo@89
|
12714 state.disabled = data.map(function(d) { return !!d.disabled });
|
|
paulo@89
|
12715 dispatch.stateChange(state);
|
|
paulo@89
|
12716
|
|
paulo@89
|
12717 chart.update();
|
|
paulo@89
|
12718 });
|
|
paulo@89
|
12719
|
|
paulo@89
|
12720 legend.dispatch.on('stateChange', function(newState) {
|
|
paulo@89
|
12721 for (var key in newState)
|
|
paulo@89
|
12722 state[key] = newState[key];
|
|
paulo@89
|
12723 dispatch.stateChange(state);
|
|
paulo@89
|
12724 chart.update();
|
|
paulo@89
|
12725 });
|
|
paulo@89
|
12726
|
|
paulo@89
|
12727 controls.dispatch.on('legendClick', function(d,i) {
|
|
paulo@89
|
12728 if (!d.disabled) return;
|
|
paulo@89
|
12729
|
|
paulo@89
|
12730 controlsData = controlsData.map(function(s) {
|
|
paulo@89
|
12731 s.disabled = true;
|
|
paulo@89
|
12732 return s;
|
|
paulo@89
|
12733 });
|
|
paulo@89
|
12734 d.disabled = false;
|
|
paulo@89
|
12735
|
|
paulo@89
|
12736 stacked.style(d.style);
|
|
paulo@89
|
12737
|
|
paulo@89
|
12738
|
|
paulo@89
|
12739 state.style = stacked.style();
|
|
paulo@89
|
12740 dispatch.stateChange(state);
|
|
paulo@89
|
12741
|
|
paulo@89
|
12742 chart.update();
|
|
paulo@89
|
12743 });
|
|
paulo@89
|
12744
|
|
paulo@89
|
12745 interactiveLayer.dispatch.on('elementMousemove', function(e) {
|
|
paulo@89
|
12746 stacked.clearHighlights();
|
|
paulo@89
|
12747 var singlePoint, pointIndex, pointXLocation, allData = [];
|
|
paulo@89
|
12748 data
|
|
paulo@89
|
12749 .filter(function(series, i) {
|
|
paulo@89
|
12750 series.seriesIndex = i;
|
|
paulo@89
|
12751 return !series.disabled;
|
|
paulo@89
|
12752 })
|
|
paulo@89
|
12753 .forEach(function(series,i) {
|
|
paulo@89
|
12754 pointIndex = nv.interactiveBisect(series.values, e.pointXValue, chart.x());
|
|
paulo@89
|
12755 var point = series.values[pointIndex];
|
|
paulo@89
|
12756 var pointYValue = chart.y()(point, pointIndex);
|
|
paulo@89
|
12757 if (pointYValue != null) {
|
|
paulo@89
|
12758 stacked.highlightPoint(i, pointIndex, true);
|
|
paulo@89
|
12759 }
|
|
paulo@89
|
12760 if (typeof point === 'undefined') return;
|
|
paulo@89
|
12761 if (typeof singlePoint === 'undefined') singlePoint = point;
|
|
paulo@89
|
12762 if (typeof pointXLocation === 'undefined') pointXLocation = chart.xScale()(chart.x()(point,pointIndex));
|
|
paulo@89
|
12763
|
|
paulo@89
|
12764 //If we are in 'expand' mode, use the stacked percent value instead of raw value.
|
|
paulo@89
|
12765 var tooltipValue = (stacked.style() == 'expand') ? point.display.y : chart.y()(point,pointIndex);
|
|
paulo@89
|
12766 allData.push({
|
|
paulo@89
|
12767 key: series.key,
|
|
paulo@89
|
12768 value: tooltipValue,
|
|
paulo@89
|
12769 color: color(series,series.seriesIndex),
|
|
paulo@89
|
12770 stackedValue: point.display
|
|
paulo@89
|
12771 });
|
|
paulo@89
|
12772 });
|
|
paulo@89
|
12773
|
|
paulo@89
|
12774 allData.reverse();
|
|
paulo@89
|
12775
|
|
paulo@89
|
12776 //Highlight the tooltip entry based on which stack the mouse is closest to.
|
|
paulo@89
|
12777 if (allData.length > 2) {
|
|
paulo@89
|
12778 var yValue = chart.yScale().invert(e.mouseY);
|
|
paulo@89
|
12779 var yDistMax = Infinity, indexToHighlight = null;
|
|
paulo@89
|
12780 allData.forEach(function(series,i) {
|
|
paulo@89
|
12781
|
|
paulo@89
|
12782 //To handle situation where the stacked area chart is negative, we need to use absolute values
|
|
paulo@89
|
12783 //when checking if the mouse Y value is within the stack area.
|
|
paulo@89
|
12784 yValue = Math.abs(yValue);
|
|
paulo@89
|
12785 var stackedY0 = Math.abs(series.stackedValue.y0);
|
|
paulo@89
|
12786 var stackedY = Math.abs(series.stackedValue.y);
|
|
paulo@89
|
12787 if ( yValue >= stackedY0 && yValue <= (stackedY + stackedY0))
|
|
paulo@89
|
12788 {
|
|
paulo@89
|
12789 indexToHighlight = i;
|
|
paulo@89
|
12790 return;
|
|
paulo@89
|
12791 }
|
|
paulo@89
|
12792 });
|
|
paulo@89
|
12793 if (indexToHighlight != null)
|
|
paulo@89
|
12794 allData[indexToHighlight].highlight = true;
|
|
paulo@89
|
12795 }
|
|
paulo@89
|
12796
|
|
paulo@89
|
12797 var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
|
|
paulo@89
|
12798
|
|
paulo@89
|
12799 var valueFormatter = interactiveLayer.tooltip.valueFormatter();
|
|
paulo@89
|
12800 // Keeps track of the tooltip valueFormatter if the chart changes to expanded view
|
|
paulo@89
|
12801 if (stacked.style() === 'expand' || stacked.style() === 'stack_percent') {
|
|
paulo@89
|
12802 if ( !oldValueFormatter ) {
|
|
paulo@89
|
12803 oldValueFormatter = valueFormatter;
|
|
paulo@89
|
12804 }
|
|
paulo@89
|
12805 //Forces the tooltip to use percentage in 'expand' mode.
|
|
paulo@89
|
12806 valueFormatter = d3.format(".1%");
|
|
paulo@89
|
12807 }
|
|
paulo@89
|
12808 else {
|
|
paulo@89
|
12809 if (oldValueFormatter) {
|
|
paulo@89
|
12810 valueFormatter = oldValueFormatter;
|
|
paulo@89
|
12811 oldValueFormatter = null;
|
|
paulo@89
|
12812 }
|
|
paulo@89
|
12813 }
|
|
paulo@89
|
12814
|
|
paulo@89
|
12815 interactiveLayer.tooltip
|
|
paulo@89
|
12816 .position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
|
|
paulo@89
|
12817 .chartContainer(that.parentNode)
|
|
paulo@89
|
12818 .valueFormatter(valueFormatter)
|
|
paulo@89
|
12819 .data(
|
|
paulo@89
|
12820 {
|
|
paulo@89
|
12821 value: xValue,
|
|
paulo@89
|
12822 series: allData
|
|
paulo@89
|
12823 }
|
|
paulo@89
|
12824 )();
|
|
paulo@89
|
12825
|
|
paulo@89
|
12826 interactiveLayer.renderGuideLine(pointXLocation);
|
|
paulo@89
|
12827
|
|
paulo@89
|
12828 });
|
|
paulo@89
|
12829
|
|
paulo@89
|
12830 interactiveLayer.dispatch.on("elementMouseout",function(e) {
|
|
paulo@89
|
12831 stacked.clearHighlights();
|
|
paulo@89
|
12832 });
|
|
paulo@89
|
12833
|
|
paulo@89
|
12834 // Update chart from a state object passed to event handler
|
|
paulo@89
|
12835 dispatch.on('changeState', function(e) {
|
|
paulo@89
|
12836
|
|
paulo@89
|
12837 if (typeof e.disabled !== 'undefined' && data.length === e.disabled.length) {
|
|
paulo@89
|
12838 data.forEach(function(series,i) {
|
|
paulo@89
|
12839 series.disabled = e.disabled[i];
|
|
paulo@89
|
12840 });
|
|
paulo@89
|
12841
|
|
paulo@89
|
12842 state.disabled = e.disabled;
|
|
paulo@89
|
12843 }
|
|
paulo@89
|
12844
|
|
paulo@89
|
12845 if (typeof e.style !== 'undefined') {
|
|
paulo@89
|
12846 stacked.style(e.style);
|
|
paulo@89
|
12847 style = e.style;
|
|
paulo@89
|
12848 }
|
|
paulo@89
|
12849
|
|
paulo@89
|
12850 chart.update();
|
|
paulo@89
|
12851 });
|
|
paulo@89
|
12852
|
|
paulo@89
|
12853 });
|
|
paulo@89
|
12854
|
|
paulo@89
|
12855 renderWatch.renderEnd('stacked Area chart immediate');
|
|
paulo@89
|
12856 return chart;
|
|
paulo@89
|
12857 }
|
|
paulo@89
|
12858
|
|
paulo@89
|
12859 //============================================================
|
|
paulo@89
|
12860 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
12861 //------------------------------------------------------------
|
|
paulo@89
|
12862
|
|
paulo@89
|
12863 stacked.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
12864 evt.point['x'] = stacked.x()(evt.point);
|
|
paulo@89
|
12865 evt.point['y'] = stacked.y()(evt.point);
|
|
paulo@89
|
12866 tooltip.data(evt).position(evt.pos).hidden(false);
|
|
paulo@89
|
12867 });
|
|
paulo@89
|
12868
|
|
paulo@89
|
12869 stacked.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
12870 tooltip.hidden(true)
|
|
paulo@89
|
12871 });
|
|
paulo@89
|
12872
|
|
paulo@89
|
12873 //============================================================
|
|
paulo@89
|
12874 // Expose Public Variables
|
|
paulo@89
|
12875 //------------------------------------------------------------
|
|
paulo@89
|
12876
|
|
paulo@89
|
12877 // expose chart's sub-components
|
|
paulo@89
|
12878 chart.dispatch = dispatch;
|
|
paulo@89
|
12879 chart.stacked = stacked;
|
|
paulo@89
|
12880 chart.legend = legend;
|
|
paulo@89
|
12881 chart.controls = controls;
|
|
paulo@89
|
12882 chart.xAxis = xAxis;
|
|
paulo@89
|
12883 chart.yAxis = yAxis;
|
|
paulo@89
|
12884 chart.interactiveLayer = interactiveLayer;
|
|
paulo@89
|
12885 chart.tooltip = tooltip;
|
|
paulo@89
|
12886
|
|
paulo@89
|
12887 chart.dispatch = dispatch;
|
|
paulo@89
|
12888 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
12889
|
|
paulo@89
|
12890 chart._options = Object.create({}, {
|
|
paulo@89
|
12891 // simple options, just get/set the necessary values
|
|
paulo@89
|
12892 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
12893 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
12894 showLegend: {get: function(){return showLegend;}, set: function(_){showLegend=_;}},
|
|
paulo@89
|
12895 showXAxis: {get: function(){return showXAxis;}, set: function(_){showXAxis=_;}},
|
|
paulo@89
|
12896 showYAxis: {get: function(){return showYAxis;}, set: function(_){showYAxis=_;}},
|
|
paulo@89
|
12897 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
12898 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
12899 showControls: {get: function(){return showControls;}, set: function(_){showControls=_;}},
|
|
paulo@89
|
12900 controlLabels: {get: function(){return controlLabels;}, set: function(_){controlLabels=_;}},
|
|
paulo@89
|
12901 controlOptions: {get: function(){return controlOptions;}, set: function(_){controlOptions=_;}},
|
|
paulo@89
|
12902
|
|
paulo@89
|
12903 // deprecated options
|
|
paulo@89
|
12904 tooltips: {get: function(){return tooltip.enabled();}, set: function(_){
|
|
paulo@89
|
12905 // deprecated after 1.7.1
|
|
paulo@89
|
12906 nv.deprecated('tooltips', 'use chart.tooltip.enabled() instead');
|
|
paulo@89
|
12907 tooltip.enabled(!!_);
|
|
paulo@89
|
12908 }},
|
|
paulo@89
|
12909 tooltipContent: {get: function(){return tooltip.contentGenerator();}, set: function(_){
|
|
paulo@89
|
12910 // deprecated after 1.7.1
|
|
paulo@89
|
12911 nv.deprecated('tooltipContent', 'use chart.tooltip.contentGenerator() instead');
|
|
paulo@89
|
12912 tooltip.contentGenerator(_);
|
|
paulo@89
|
12913 }},
|
|
paulo@89
|
12914
|
|
paulo@89
|
12915 // options that require extra logic in the setter
|
|
paulo@89
|
12916 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
12917 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
12918 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
12919 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
12920 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
12921 }},
|
|
paulo@89
|
12922 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
12923 duration = _;
|
|
paulo@89
|
12924 renderWatch.reset(duration);
|
|
paulo@89
|
12925 stacked.duration(duration);
|
|
paulo@89
|
12926 xAxis.duration(duration);
|
|
paulo@89
|
12927 yAxis.duration(duration);
|
|
paulo@89
|
12928 }},
|
|
paulo@89
|
12929 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
12930 color = nv.utils.getColor(_);
|
|
paulo@89
|
12931 legend.color(color);
|
|
paulo@89
|
12932 stacked.color(color);
|
|
paulo@89
|
12933 }},
|
|
paulo@89
|
12934 rightAlignYAxis: {get: function(){return rightAlignYAxis;}, set: function(_){
|
|
paulo@89
|
12935 rightAlignYAxis = _;
|
|
paulo@89
|
12936 yAxis.orient( rightAlignYAxis ? 'right' : 'left');
|
|
paulo@89
|
12937 }},
|
|
paulo@89
|
12938 useInteractiveGuideline: {get: function(){return useInteractiveGuideline;}, set: function(_){
|
|
paulo@89
|
12939 useInteractiveGuideline = !!_;
|
|
paulo@89
|
12940 chart.interactive(!_);
|
|
paulo@89
|
12941 chart.useVoronoi(!_);
|
|
paulo@89
|
12942 stacked.scatter.interactive(!_);
|
|
paulo@89
|
12943 }}
|
|
paulo@89
|
12944 });
|
|
paulo@89
|
12945
|
|
paulo@89
|
12946 nv.utils.inheritOptions(chart, stacked);
|
|
paulo@89
|
12947 nv.utils.initOptions(chart);
|
|
paulo@89
|
12948
|
|
paulo@89
|
12949 return chart;
|
|
paulo@89
|
12950 };
|
|
paulo@89
|
12951 // based on http://bl.ocks.org/kerryrodden/477c1bfb081b783f80ad
|
|
paulo@89
|
12952 nv.models.sunburst = function() {
|
|
paulo@89
|
12953 "use strict";
|
|
paulo@89
|
12954
|
|
paulo@89
|
12955 //============================================================
|
|
paulo@89
|
12956 // Public Variables with Default Settings
|
|
paulo@89
|
12957 //------------------------------------------------------------
|
|
paulo@89
|
12958
|
|
paulo@89
|
12959 var margin = {top: 0, right: 0, bottom: 0, left: 0}
|
|
paulo@89
|
12960 , width = null
|
|
paulo@89
|
12961 , height = null
|
|
paulo@89
|
12962 , mode = "count"
|
|
paulo@89
|
12963 , modes = {count: function(d) { return 1; }, size: function(d) { return d.size }}
|
|
paulo@89
|
12964 , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
|
|
paulo@89
|
12965 , container = null
|
|
paulo@89
|
12966 , color = nv.utils.defaultColor()
|
|
paulo@89
|
12967 , duration = 500
|
|
paulo@89
|
12968 , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMousemove', 'elementMouseover', 'elementMouseout', 'renderEnd')
|
|
paulo@89
|
12969 ;
|
|
paulo@89
|
12970
|
|
paulo@89
|
12971 var x = d3.scale.linear().range([0, 2 * Math.PI]);
|
|
paulo@89
|
12972 var y = d3.scale.sqrt();
|
|
paulo@89
|
12973
|
|
paulo@89
|
12974 var partition = d3.layout.partition()
|
|
paulo@89
|
12975 .sort(null)
|
|
paulo@89
|
12976 .value(function(d) { return 1; });
|
|
paulo@89
|
12977
|
|
paulo@89
|
12978 var arc = d3.svg.arc()
|
|
paulo@89
|
12979 .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
|
|
paulo@89
|
12980 .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
|
|
paulo@89
|
12981 .innerRadius(function(d) { return Math.max(0, y(d.y)); })
|
|
paulo@89
|
12982 .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
|
|
paulo@89
|
12983
|
|
paulo@89
|
12984 // Keep track of the current and previous node being displayed as the root.
|
|
paulo@89
|
12985 var node, prevNode;
|
|
paulo@89
|
12986 // Keep track of the root node
|
|
paulo@89
|
12987 var rootNode;
|
|
paulo@89
|
12988
|
|
paulo@89
|
12989 //============================================================
|
|
paulo@89
|
12990 // chart function
|
|
paulo@89
|
12991 //------------------------------------------------------------
|
|
paulo@89
|
12992
|
|
paulo@89
|
12993 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
12994
|
|
paulo@89
|
12995 function chart(selection) {
|
|
paulo@89
|
12996 renderWatch.reset();
|
|
paulo@89
|
12997 selection.each(function(data) {
|
|
paulo@89
|
12998 container = d3.select(this);
|
|
paulo@89
|
12999 var availableWidth = nv.utils.availableWidth(width, container, margin);
|
|
paulo@89
|
13000 var availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
13001 var radius = Math.min(availableWidth, availableHeight) / 2;
|
|
paulo@89
|
13002 var path;
|
|
paulo@89
|
13003
|
|
paulo@89
|
13004 nv.utils.initSVG(container);
|
|
paulo@89
|
13005
|
|
paulo@89
|
13006 // Setup containers and skeleton of chart
|
|
paulo@89
|
13007 var wrap = container.selectAll('.nv-wrap.nv-sunburst').data(data);
|
|
paulo@89
|
13008 var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburst nv-chart-' + id);
|
|
paulo@89
|
13009
|
|
paulo@89
|
13010 var g = wrapEnter.selectAll('nv-sunburst');
|
|
paulo@89
|
13011
|
|
paulo@89
|
13012 wrap.attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
|
|
paulo@89
|
13013
|
|
paulo@89
|
13014 container.on('click', function (d, i) {
|
|
paulo@89
|
13015 dispatch.chartClick({
|
|
paulo@89
|
13016 data: d,
|
|
paulo@89
|
13017 index: i,
|
|
paulo@89
|
13018 pos: d3.event,
|
|
paulo@89
|
13019 id: id
|
|
paulo@89
|
13020 });
|
|
paulo@89
|
13021 });
|
|
paulo@89
|
13022
|
|
paulo@89
|
13023 y.range([0, radius]);
|
|
paulo@89
|
13024
|
|
paulo@89
|
13025 node = node || data;
|
|
paulo@89
|
13026 rootNode = data[0];
|
|
paulo@89
|
13027 partition.value(modes[mode] || modes["count"]);
|
|
paulo@89
|
13028 path = g.data(partition.nodes).enter()
|
|
paulo@89
|
13029 .append("path")
|
|
paulo@89
|
13030 .attr("d", arc)
|
|
paulo@89
|
13031 .style("fill", function (d) {
|
|
paulo@89
|
13032 return color((d.children ? d : d.parent).name);
|
|
paulo@89
|
13033 })
|
|
paulo@89
|
13034 .style("stroke", "#FFF")
|
|
paulo@89
|
13035 .on("click", function(d) {
|
|
paulo@89
|
13036 if (prevNode !== node && node !== d) prevNode = node;
|
|
paulo@89
|
13037 node = d;
|
|
paulo@89
|
13038 path.transition()
|
|
paulo@89
|
13039 .duration(duration)
|
|
paulo@89
|
13040 .attrTween("d", arcTweenZoom(d));
|
|
paulo@89
|
13041 })
|
|
paulo@89
|
13042 .each(stash)
|
|
paulo@89
|
13043 .on("dblclick", function(d) {
|
|
paulo@89
|
13044 if (prevNode.parent == d) {
|
|
paulo@89
|
13045 path.transition()
|
|
paulo@89
|
13046 .duration(duration)
|
|
paulo@89
|
13047 .attrTween("d", arcTweenZoom(rootNode));
|
|
paulo@89
|
13048 }
|
|
paulo@89
|
13049 })
|
|
paulo@89
|
13050 .each(stash)
|
|
paulo@89
|
13051 .on('mouseover', function(d,i){
|
|
paulo@89
|
13052 d3.select(this).classed('hover', true).style('opacity', 0.8);
|
|
paulo@89
|
13053 dispatch.elementMouseover({
|
|
paulo@89
|
13054 data: d,
|
|
paulo@89
|
13055 color: d3.select(this).style("fill")
|
|
paulo@89
|
13056 });
|
|
paulo@89
|
13057 })
|
|
paulo@89
|
13058 .on('mouseout', function(d,i){
|
|
paulo@89
|
13059 d3.select(this).classed('hover', false).style('opacity', 1);
|
|
paulo@89
|
13060 dispatch.elementMouseout({
|
|
paulo@89
|
13061 data: d
|
|
paulo@89
|
13062 });
|
|
paulo@89
|
13063 })
|
|
paulo@89
|
13064 .on('mousemove', function(d,i){
|
|
paulo@89
|
13065 dispatch.elementMousemove({
|
|
paulo@89
|
13066 data: d
|
|
paulo@89
|
13067 });
|
|
paulo@89
|
13068 });
|
|
paulo@89
|
13069
|
|
paulo@89
|
13070
|
|
paulo@89
|
13071
|
|
paulo@89
|
13072 // Setup for switching data: stash the old values for transition.
|
|
paulo@89
|
13073 function stash(d) {
|
|
paulo@89
|
13074 d.x0 = d.x;
|
|
paulo@89
|
13075 d.dx0 = d.dx;
|
|
paulo@89
|
13076 }
|
|
paulo@89
|
13077
|
|
paulo@89
|
13078 // When switching data: interpolate the arcs in data space.
|
|
paulo@89
|
13079 function arcTweenData(a, i) {
|
|
paulo@89
|
13080 var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);
|
|
paulo@89
|
13081
|
|
paulo@89
|
13082 function tween(t) {
|
|
paulo@89
|
13083 var b = oi(t);
|
|
paulo@89
|
13084 a.x0 = b.x;
|
|
paulo@89
|
13085 a.dx0 = b.dx;
|
|
paulo@89
|
13086 return arc(b);
|
|
paulo@89
|
13087 }
|
|
paulo@89
|
13088
|
|
paulo@89
|
13089 if (i == 0) {
|
|
paulo@89
|
13090 // If we are on the first arc, adjust the x domain to match the root node
|
|
paulo@89
|
13091 // at the current zoom level. (We only need to do this once.)
|
|
paulo@89
|
13092 var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
|
|
paulo@89
|
13093 return function (t) {
|
|
paulo@89
|
13094 x.domain(xd(t));
|
|
paulo@89
|
13095 return tween(t);
|
|
paulo@89
|
13096 };
|
|
paulo@89
|
13097 } else {
|
|
paulo@89
|
13098 return tween;
|
|
paulo@89
|
13099 }
|
|
paulo@89
|
13100 }
|
|
paulo@89
|
13101
|
|
paulo@89
|
13102 // When zooming: interpolate the scales.
|
|
paulo@89
|
13103 function arcTweenZoom(d) {
|
|
paulo@89
|
13104 var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
|
|
paulo@89
|
13105 yd = d3.interpolate(y.domain(), [d.y, 1]),
|
|
paulo@89
|
13106 yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
|
|
paulo@89
|
13107 return function (d, i) {
|
|
paulo@89
|
13108 return i
|
|
paulo@89
|
13109 ? function (t) {
|
|
paulo@89
|
13110 return arc(d);
|
|
paulo@89
|
13111 }
|
|
paulo@89
|
13112 : function (t) {
|
|
paulo@89
|
13113 x.domain(xd(t));
|
|
paulo@89
|
13114 y.domain(yd(t)).range(yr(t));
|
|
paulo@89
|
13115 return arc(d);
|
|
paulo@89
|
13116 };
|
|
paulo@89
|
13117 };
|
|
paulo@89
|
13118 }
|
|
paulo@89
|
13119
|
|
paulo@89
|
13120 });
|
|
paulo@89
|
13121
|
|
paulo@89
|
13122 renderWatch.renderEnd('sunburst immediate');
|
|
paulo@89
|
13123 return chart;
|
|
paulo@89
|
13124 }
|
|
paulo@89
|
13125
|
|
paulo@89
|
13126 //============================================================
|
|
paulo@89
|
13127 // Expose Public Variables
|
|
paulo@89
|
13128 //------------------------------------------------------------
|
|
paulo@89
|
13129
|
|
paulo@89
|
13130 chart.dispatch = dispatch;
|
|
paulo@89
|
13131 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
13132
|
|
paulo@89
|
13133 chart._options = Object.create({}, {
|
|
paulo@89
|
13134 // simple options, just get/set the necessary values
|
|
paulo@89
|
13135 width: {get: function(){return width;}, set: function(_){width=_;}},
|
|
paulo@89
|
13136 height: {get: function(){return height;}, set: function(_){height=_;}},
|
|
paulo@89
|
13137 mode: {get: function(){return mode;}, set: function(_){mode=_;}},
|
|
paulo@89
|
13138 id: {get: function(){return id;}, set: function(_){id=_;}},
|
|
paulo@89
|
13139 duration: {get: function(){return duration;}, set: function(_){duration=_;}},
|
|
paulo@89
|
13140
|
|
paulo@89
|
13141 // options that require extra logic in the setter
|
|
paulo@89
|
13142 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
13143 margin.top = _.top != undefined ? _.top : margin.top;
|
|
paulo@89
|
13144 margin.right = _.right != undefined ? _.right : margin.right;
|
|
paulo@89
|
13145 margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
13146 margin.left = _.left != undefined ? _.left : margin.left;
|
|
paulo@89
|
13147 }},
|
|
paulo@89
|
13148 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
13149 color=nv.utils.getColor(_);
|
|
paulo@89
|
13150 }}
|
|
paulo@89
|
13151 });
|
|
paulo@89
|
13152
|
|
paulo@89
|
13153 nv.utils.initOptions(chart);
|
|
paulo@89
|
13154 return chart;
|
|
paulo@89
|
13155 };
|
|
paulo@89
|
13156 nv.models.sunburstChart = function() {
|
|
paulo@89
|
13157 "use strict";
|
|
paulo@89
|
13158
|
|
paulo@89
|
13159 //============================================================
|
|
paulo@89
|
13160 // Public Variables with Default Settings
|
|
paulo@89
|
13161 //------------------------------------------------------------
|
|
paulo@89
|
13162
|
|
paulo@89
|
13163 var sunburst = nv.models.sunburst();
|
|
paulo@89
|
13164 var tooltip = nv.models.tooltip();
|
|
paulo@89
|
13165
|
|
paulo@89
|
13166 var margin = {top: 30, right: 20, bottom: 20, left: 20}
|
|
paulo@89
|
13167 , width = null
|
|
paulo@89
|
13168 , height = null
|
|
paulo@89
|
13169 , color = nv.utils.defaultColor()
|
|
paulo@89
|
13170 , id = Math.round(Math.random() * 100000)
|
|
paulo@89
|
13171 , defaultState = null
|
|
paulo@89
|
13172 , noData = null
|
|
paulo@89
|
13173 , duration = 250
|
|
paulo@89
|
13174 , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState','renderEnd')
|
|
paulo@89
|
13175 ;
|
|
paulo@89
|
13176
|
|
paulo@89
|
13177 //============================================================
|
|
paulo@89
|
13178 // Private Variables
|
|
paulo@89
|
13179 //------------------------------------------------------------
|
|
paulo@89
|
13180
|
|
paulo@89
|
13181 var renderWatch = nv.utils.renderWatch(dispatch);
|
|
paulo@89
|
13182 tooltip.headerEnabled(false).duration(0).valueFormatter(function(d, i) {
|
|
paulo@89
|
13183 return d;
|
|
paulo@89
|
13184 });
|
|
paulo@89
|
13185
|
|
paulo@89
|
13186 //============================================================
|
|
paulo@89
|
13187 // Chart function
|
|
paulo@89
|
13188 //------------------------------------------------------------
|
|
paulo@89
|
13189
|
|
paulo@89
|
13190 function chart(selection) {
|
|
paulo@89
|
13191 renderWatch.reset();
|
|
paulo@89
|
13192 renderWatch.models(sunburst);
|
|
paulo@89
|
13193
|
|
paulo@89
|
13194 selection.each(function(data) {
|
|
paulo@89
|
13195 var container = d3.select(this);
|
|
paulo@89
|
13196 nv.utils.initSVG(container);
|
|
paulo@89
|
13197
|
|
paulo@89
|
13198 var that = this;
|
|
paulo@89
|
13199 var availableWidth = nv.utils.availableWidth(width, container, margin),
|
|
paulo@89
|
13200 availableHeight = nv.utils.availableHeight(height, container, margin);
|
|
paulo@89
|
13201
|
|
paulo@89
|
13202 chart.update = function() {
|
|
paulo@89
|
13203 if (duration === 0)
|
|
paulo@89
|
13204 container.call(chart);
|
|
paulo@89
|
13205 else
|
|
paulo@89
|
13206 container.transition().duration(duration).call(chart)
|
|
paulo@89
|
13207 };
|
|
paulo@89
|
13208 chart.container = this;
|
|
paulo@89
|
13209
|
|
paulo@89
|
13210 // Display No Data message if there's nothing to show.
|
|
paulo@89
|
13211 if (!data || !data.length) {
|
|
paulo@89
|
13212 nv.utils.noData(chart, container);
|
|
paulo@89
|
13213 return chart;
|
|
paulo@89
|
13214 } else {
|
|
paulo@89
|
13215 container.selectAll('.nv-noData').remove();
|
|
paulo@89
|
13216 }
|
|
paulo@89
|
13217
|
|
paulo@89
|
13218 // Setup containers and skeleton of chart
|
|
paulo@89
|
13219 var wrap = container.selectAll('g.nv-wrap.nv-sunburstChart').data(data);
|
|
paulo@89
|
13220 var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sunburstChart').append('g');
|
|
paulo@89
|
13221 var g = wrap.select('g');
|
|
paulo@89
|
13222
|
|
paulo@89
|
13223 gEnter.append('g').attr('class', 'nv-sunburstWrap');
|
|
paulo@89
|
13224
|
|
paulo@89
|
13225 wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
|
paulo@89
|
13226
|
|
paulo@89
|
13227 // Main Chart Component(s)
|
|
paulo@89
|
13228 sunburst.width(availableWidth).height(availableHeight);
|
|
paulo@89
|
13229 var sunWrap = g.select('.nv-sunburstWrap').datum(data);
|
|
paulo@89
|
13230 d3.transition(sunWrap).call(sunburst);
|
|
paulo@89
|
13231
|
|
paulo@89
|
13232 });
|
|
paulo@89
|
13233
|
|
paulo@89
|
13234 renderWatch.renderEnd('sunburstChart immediate');
|
|
paulo@89
|
13235 return chart;
|
|
paulo@89
|
13236 }
|
|
paulo@89
|
13237
|
|
paulo@89
|
13238 //============================================================
|
|
paulo@89
|
13239 // Event Handling/Dispatching (out of chart's scope)
|
|
paulo@89
|
13240 //------------------------------------------------------------
|
|
paulo@89
|
13241
|
|
paulo@89
|
13242 sunburst.dispatch.on('elementMouseover.tooltip', function(evt) {
|
|
paulo@89
|
13243 evt['series'] = {
|
|
paulo@89
|
13244 key: evt.data.name,
|
|
paulo@89
|
13245 value: evt.data.size,
|
|
paulo@89
|
13246 color: evt.color
|
|
paulo@89
|
13247 };
|
|
paulo@89
|
13248 tooltip.data(evt).hidden(false);
|
|
paulo@89
|
13249 });
|
|
paulo@89
|
13250
|
|
paulo@89
|
13251 sunburst.dispatch.on('elementMouseout.tooltip', function(evt) {
|
|
paulo@89
|
13252 tooltip.hidden(true);
|
|
paulo@89
|
13253 });
|
|
paulo@89
|
13254
|
|
paulo@89
|
13255 sunburst.dispatch.on('elementMousemove.tooltip', function(evt) {
|
|
paulo@89
|
13256 tooltip.position({top: d3.event.pageY, left: d3.event.pageX})();
|
|
paulo@89
|
13257 });
|
|
paulo@89
|
13258
|
|
paulo@89
|
13259 //============================================================
|
|
paulo@89
|
13260 // Expose Public Variables
|
|
paulo@89
|
13261 //------------------------------------------------------------
|
|
paulo@89
|
13262
|
|
paulo@89
|
13263 // expose chart's sub-components
|
|
paulo@89
|
13264 chart.dispatch = dispatch;
|
|
paulo@89
|
13265 chart.sunburst = sunburst;
|
|
paulo@89
|
13266 chart.tooltip = tooltip;
|
|
paulo@89
|
13267 chart.options = nv.utils.optionsFunc.bind(chart);
|
|
paulo@89
|
13268
|
|
paulo@89
|
13269 // use Object get/set functionality to map between vars and chart functions
|
|
paulo@89
|
13270 chart._options = Object.create({}, {
|
|
paulo@89
|
13271 // simple options, just get/set the necessary values
|
|
paulo@89
|
13272 noData: {get: function(){return noData;}, set: function(_){noData=_;}},
|
|
paulo@89
|
13273 defaultState: {get: function(){return defaultState;}, set: function(_){defaultState=_;}},
|
|
paulo@89
|
13274
|
|
paulo@89
|
13275 // options that require extra logic in the setter
|
|
paulo@89
|
13276 color: {get: function(){return color;}, set: function(_){
|
|
paulo@89
|
13277 color = _;
|
|
paulo@89
|
13278 sunburst.color(color);
|
|
paulo@89
|
13279 }},
|
|
paulo@89
|
13280 duration: {get: function(){return duration;}, set: function(_){
|
|
paulo@89
|
13281 duration = _;
|
|
paulo@89
|
13282 renderWatch.reset(duration);
|
|
paulo@89
|
13283 sunburst.duration(duration);
|
|
paulo@89
|
13284 }},
|
|
paulo@89
|
13285 margin: {get: function(){return margin;}, set: function(_){
|
|
paulo@89
|
13286 margin.top = _.top !== undefined ? _.top : margin.top;
|
|
paulo@89
|
13287 margin.right = _.right !== undefined ? _.right : margin.right;
|
|
paulo@89
|
13288 margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
|
|
paulo@89
|
13289 margin.left = _.left !== undefined ? _.left : margin.left;
|
|
paulo@89
|
13290 }}
|
|
paulo@89
|
13291 });
|
|
paulo@89
|
13292 nv.utils.inheritOptions(chart, sunburst);
|
|
paulo@89
|
13293 nv.utils.initOptions(chart);
|
|
paulo@89
|
13294 return chart;
|
|
paulo@89
|
13295 };
|
|
paulo@89
|
13296
|
|
paulo@89
|
13297 nv.version = "1.8.1";
|
|
paulo@89
|
13298 })(); |
