From 050bb4258ddfb2976a360eb2f89aac6a982d7780 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Thu, 26 Nov 2015 10:32:00 +0100 Subject: [PATCH 1/5] Introduce "zero" shade orientation. --- lib/timeline/component/graph2d_types/line.js | 10 +++++++--- lib/timeline/optionsGraph2d.js | 6 +++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js index 7d70e8d3..7a866c3d 100644 --- a/lib/timeline/component/graph2d_types/line.js +++ b/lib/timeline/component/graph2d_types/line.js @@ -133,13 +133,17 @@ Line.prototype.draw = function (dataset, group, framework) { // append with points for fill and finalize the path if (group.options.shaded.enabled == true) { var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.svg); - var dFill; + var zero = 0; if (group.options.shaded.orientation == 'top') { - dFill = 'M' + dataset[0].x + ',' + 0 + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + 0; + zero = 0; + } + else if (group.options.shaded.orientation == 'bottom') { + zero = svgHeight; } else { - dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight; + zero = Math.min(Math.max(0,group.zeroPosition),svgHeight); } + var dFill = 'M' + dataset[0].x + ',' + zero + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + zero; fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill'); if(group.options.shaded.style !== undefined) { fillPath.setAttributeNS(null, 'style', group.options.shaded.style); diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js index a2faf89d..e2f249c1 100644 --- a/lib/timeline/optionsGraph2d.js +++ b/lib/timeline/optionsGraph2d.js @@ -33,7 +33,7 @@ let allOptions = { graphHeight: {string, number}, shaded: { enabled: {boolean}, - orientation: {string:['bottom','top']}, // top, bottom + orientation: {string:['bottom','top','zero']}, // top, bottom, zero __type__: {boolean,object} }, style: {string:['line','bar','points']}, // line, bar @@ -171,7 +171,7 @@ let configureOptions = { stack:false, shaded: { enabled: false, - orientation: ['top','bottom'] // top, bottom + orientation: ['zero','top','bottom'] // zero, top, bottom }, style: ['line','bar','points'], // line, bar barChart: { @@ -266,4 +266,4 @@ let configureOptions = { } }; -export {allOptions, configureOptions}; \ No newline at end of file +export {allOptions, configureOptions}; From 9bf7452041ece6e7a0b95c227d7e2fe5045872df Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Thu, 26 Nov 2015 10:33:01 +0100 Subject: [PATCH 2/5] Prevent potential null pointer error --- lib/DataSet.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/DataSet.js b/lib/DataSet.js index 25ede879..a5cc956d 100644 --- a/lib/DataSet.js +++ b/lib/DataSet.js @@ -241,6 +241,9 @@ DataSet.prototype.update = function (data, senderId) { var fieldId = me._fieldId; var addOrUpdate = function (item) { + if (!item){ + return; + } var id = item[fieldId]; if (me._data[id]) { var oldData = util.extend({}, me._data[id]); From 7c5ca074bbeefbf809aef934defdc4dc9d72c648 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Thu, 26 Nov 2015 11:00:05 +0100 Subject: [PATCH 3/5] Update documentation for new Shaded option. Removed some old incorrect texts. --- docs/graph2d/index.html | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index aba25cd7..edf01416 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -246,8 +246,6 @@

Graph2d can load data from an Array, a DataSet (offering 2 way data binding), or a DataView (offering one way data binding). Objects are added to this DataSet by using the add() function. - Data points must have properties x, y, and z, - and can optionally have a property style and filter.

Graph2d can be provided with two types of data:

@@ -760,8 +758,8 @@ onRender: function(item, group, graph2d) { shaded.orientation String - 'bottom' - This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'. + 'zero' + This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph. The options are 'zero', 'bottom' or 'top'. shaded.style @@ -1308,15 +1306,6 @@ Graph2d.off('rangechanged', onChange); - - finishedRedraw - - none. - - Fired after a redraw is complete. When moving the Graph2d around, this could be fired frequently. - - - rangechange From 22b09d2197bc36f3273710e7e3dc8e9a78a5d073 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Thu, 26 Nov 2015 11:25:48 +0100 Subject: [PATCH 4/5] Add shading example. --- docs/graph2d/index.html | 3 +- examples/graph2d/20_shading.html | 91 ++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 examples/graph2d/20_shading.html diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index edf01416..b1675ff0 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -759,7 +759,8 @@ onRender: function(item, group, graph2d) { shaded.orientation String 'zero' - This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph. The options are 'zero', 'bottom' or 'top'. + This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph. The options are 'zero', 'bottom' or 'top'. + See Example 20 what these options look like. shaded.style diff --git a/examples/graph2d/20_shading.html b/examples/graph2d/20_shading.html new file mode 100644 index 00000000..62d09239 --- /dev/null +++ b/examples/graph2d/20_shading.html @@ -0,0 +1,91 @@ + + + + Graph2d | Shading Example + + + + + + + + +

Graph2d | Shading Example

+
+ This example shows the shading functionality within Graph2d. +
+
+ +
+ + + + From 6059ff3299190e2c893d1176a4fca5c6510e4a9a Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Tue, 1 Dec 2015 09:43:06 +0100 Subject: [PATCH 5/5] Revert inadvertedly included commit 9bf7452041ece6e7a0b95c227d7e2fe5045872df --- lib/DataSet.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/DataSet.js b/lib/DataSet.js index a5cc956d..25ede879 100644 --- a/lib/DataSet.js +++ b/lib/DataSet.js @@ -241,9 +241,6 @@ DataSet.prototype.update = function (data, senderId) { var fieldId = me._fieldId; var addOrUpdate = function (item) { - if (!item){ - return; - } var id = item[fieldId]; if (me._data[id]) { var oldData = util.extend({}, me._data[id]);