From d0f2a63b91b028ccc1c1b89fd2c1a7f03577d498 Mon Sep 17 00:00:00 2001 From: Vx2gas Date: Sat, 25 Feb 2017 13:18:10 -0700 Subject: [PATCH] Added support to supply an end to bar charts to have them scale (#2760) * Added support to supply an X2 to bar charts to have them scale * Fixed graph2d stacking issue. It no longer takes into account hidden items * Changed x2 to end per recommendation and added this to the docs --- docs/graph2d/index.html | 8 +++- examples/graph2d/21_barsWithEnd.html | 51 +++++++++++++++++++++ lib/timeline/component/LineGraph.js | 11 ++++- lib/timeline/component/graph2d_types/bar.js | 18 +++++++- 4 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 examples/graph2d/21_barsWithEnd.html diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 66a488f0..7683d82d 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -297,7 +297,13 @@ var items = [ label Object no - A label object which will be displayed near to the item. A label object has one requirement - a content property. In addition you can set the xOffset, yOffset and className for further appearance customisations + A label object which will be displayed near to the item. A label object has one requirement - a content property. In addition you can set the xOffset, yOffset and className for further appearance customisations. + + + end + Date + no + A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property. diff --git a/examples/graph2d/21_barsWithEnd.html b/examples/graph2d/21_barsWithEnd.html new file mode 100644 index 00000000..c5d131ff --- /dev/null +++ b/examples/graph2d/21_barsWithEnd.html @@ -0,0 +1,51 @@ + + + + Graph2d | Bar Graph Example + + + + + + + +

Graph2d | Bar Graph With End Example

+
+ This example shows how you can plot a bar chart and supply an end value to have it fill. +
+
+ +
+ + + + \ No newline at end of file diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index fa0934e2..ec797541 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -487,6 +487,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) { //Copy data (because of unmodifiable DataView input. var extended = util.bridgeObject(item); extended.x = util.convert(item.x, 'Date'); + extended.end = util.convert(item.end, 'Date'); extended.orginalY = item.y; //real Y extended.y = Number(item.y); extended[fieldId] = item[fieldId]; @@ -908,10 +909,10 @@ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) { // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups. if (options.stack === true && options.style === 'bar') { if (options.yAxisOrientation === 'left') { - combinedDataLeft = combinedDataLeft.concat(group.getItems()); + combinedDataLeft = combinedDataLeft.concat(groupData); } else { - combinedDataRight = combinedDataRight.concat(group.getItems()); + combinedDataRight = combinedDataRight.concat(groupData); } } else { @@ -1064,6 +1065,12 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) { for (var i = 0; i < datapoints.length; i++) { datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width; datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations + if (datapoints[i].end != undefined) { + datapoints[i].screen_end = toScreen(datapoints[i].end) + this.props.width; + } + else { + datapoints[i].screen_end = undefined; + } } }; diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js index 32b3d36e..a8db2e24 100644 --- a/lib/timeline/component/graph2d_types/bar.js +++ b/lib/timeline/component/graph2d_types/bar.js @@ -62,8 +62,10 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { for (j = 0; j < processedGroupData[groupIds[i]].length; j++) { combinedData.push({ screen_x: processedGroupData[groupIds[i]][j].screen_x, + screen_end: processedGroupData[groupIds[i]][j].screen_end, screen_y: processedGroupData[groupIds[i]][j].screen_y, x: processedGroupData[groupIds[i]][j].x, + end: processedGroupData[groupIds[i]][j].end, y: processedGroupData[groupIds[i]][j].y, groupId: groupIds[i], label: processedGroupData[groupIds[i]][j].label @@ -128,7 +130,21 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1)); } } - DOMutil.drawBar(combinedData[i].screen_x + drawData.offset, combinedData[i].screen_y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style); + + let dataWidth = drawData.width; + let start = combinedData[i].screen_x; + + // are we drawing explicit boxes? (we supplied an end value) + if (combinedData[i].screen_end != undefined){ + dataWidth = combinedData[i].screen_end - combinedData[i].screen_x; + start += (dataWidth * 0.5); + } + else { + start += drawData.offset + } + + DOMutil.drawBar(start, combinedData[i].screen_y - heightOffset, dataWidth, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style); + // draw points if (group.options.drawPoints.enabled === true) { let pointData = {