From a44e88ef6de82f1c16116a48524c662909f7e677 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Fri, 4 Dec 2015 15:38:02 +0100 Subject: [PATCH 1/7] Introducing group based shading Separate shading from line drawing (fixes drawing order) Cleanup of draw code Fix icon-shading CSS override --- docs/graph2d/index.html | 15 +- examples/graph2d/06_interpolation.html | 2 +- examples/graph2d/17_dynamicStyling.html | 27 +- examples/graph2d/20_shading.html | 70 ++- lib/timeline/component/GraphGroup.js | 93 ++-- lib/timeline/component/Legend.js | 2 +- lib/timeline/component/LineGraph.js | 274 +++++++---- lib/timeline/component/graph2d_types/line.js | 469 +++++++++---------- lib/timeline/optionsGraph2d.js | 5 +- 9 files changed, 545 insertions(+), 412 deletions(-) diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 92bf9ab6..18e8ad67 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -758,9 +758,18 @@ 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'. - See Example 20 what these options look like. + 'bottom' + 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', 'top', or the special case of 'group'. If group is chosen, the option groupId is required. + See Example 20 what these options look like. + + + + shaded.groupId + String + undefined + The id of the group which should be used as the other shading limit. + shaded.style diff --git a/examples/graph2d/06_interpolation.html b/examples/graph2d/06_interpolation.html index 47b31d69..a6ddc53b 100644 --- a/examples/graph2d/06_interpolation.html +++ b/examples/graph2d/06_interpolation.html @@ -88,7 +88,7 @@ } var options = { - dataPoints: false, + drawPoints: false, dataAxis: {visible: false}, legend: true, start: '2014-06-11', diff --git a/examples/graph2d/17_dynamicStyling.html b/examples/graph2d/17_dynamicStyling.html index 665f0636..414313f5 100644 --- a/examples/graph2d/17_dynamicStyling.html +++ b/examples/graph2d/17_dynamicStyling.html @@ -79,7 +79,8 @@ @@ -98,16 +99,16 @@ Fill Opacity @@ -187,7 +188,7 @@ {x: '2014-06-11', y: 10, group: 0}, {x: '2014-06-12', y: 25, group: 0}, {x: '2014-06-13', y: 30, group: 0}, - {x: '2014-06-14', y: 10, group: 0}, + {x: '2014-06-14', y: -10, group: 0}, {x: '2014-06-15', y: 15, group: 0}, {x: '2014-06-16', y: 30, group: 0} ]; @@ -210,7 +211,7 @@ style: 'square' // square, circle }, shaded: { - orientation: 'bottom' // top, bottom + orientation: 'zero' // top, bottom } } }; diff --git a/examples/graph2d/20_shading.html b/examples/graph2d/20_shading.html index 62d09239..1fc0980c 100644 --- a/examples/graph2d/20_shading.html +++ b/examples/graph2d/20_shading.html @@ -24,7 +24,7 @@