From 95d46a3d5449044b1bd9857b104275fe23ba945e Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Thu, 10 Dec 2015 15:32:08 +0100 Subject: [PATCH] Introducing "point" style as new label for "points", consistency in naming. Some fixes and cleanups after the large rewrite. --- lib/timeline/component/GraphGroup.js | 3 +- lib/timeline/component/LineGraph.js | 8 ++- lib/timeline/component/graph2d_types/bar.js | 55 ++++++++++++++----- .../component/graph2d_types/points.js | 1 - 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js index c0061bda..289c4f00 100644 --- a/lib/timeline/component/GraphGroup.js +++ b/lib/timeline/component/GraphGroup.js @@ -134,7 +134,8 @@ GraphGroup.prototype.getLegend = function (iconWidth, iconHeight, framework, x, case "line": Lines.drawIcon(this, x, y, iconWidth, iconHeight, framework); break; - case "points": + case "points": //explicit no break + case "point": Points.drawIcon(this, x, y, iconWidth, iconHeight, framework); break; case "bar": diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index 447ddc0d..2bf80722 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -333,8 +333,8 @@ LineGraph.prototype.setGroups = function (groups) { // remove all drawn groups ids = this.groupsData.getIds(); this.groupsData = null; - for (var i = 0; i < groupIds.length; i++) { - this._removeGroup(groupIds[i]); + for (var i = 0; i < ids.length; i++) { + this._removeGroup(ids[i]); } } @@ -733,8 +733,10 @@ LineGraph.prototype._updateGraph = function () { } Lines.draw(paths[groupIds[i]], group, this.framework); //explicit no break; + case "point": + //explicit no break; case "points": - if (group.options.style == "points" || group.options.drawPoints.enabled == true) { + if (group.options.style == "point" || group.options.style == "points" || group.options.drawPoints.enabled == true) { Points.draw(groupsData[groupIds[i]], group, this.framework); } break; diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js index 7b2e65f1..dfa688a6 100644 --- a/lib/timeline/component/graph2d_types/bar.js +++ b/lib/timeline/component/graph2d_types/bar.js @@ -16,6 +16,8 @@ Bargraph.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) { outline.setAttributeNS(null, "class", "vis-outline"); var barWidth = Math.round(0.3 * iconWidth); + var originalWidth = group.options.barChart.width; + var scale = originalWidth / barWidth; var bar1Height = Math.round(0.4 * iconHeight); var bar2Height = Math.round(0.75 * iconHeight); @@ -28,7 +30,7 @@ Bargraph.drawIcon = function (group, x, y, iconWidth, iconHeight, framework) { var groupTemplate = { style: group.options.drawPoints.style, styles: group.options.drawPoints.styles, - size: Math.max(barWidth/5,group.options.drawPoints.size), + size: (group.options.drawPoints.size / scale), className: group.className }; DOMutil.drawPoint(x + 0.5 * barWidth + offset, y + fillHeight - bar1Height - 1, groupTemplate, framework.svgElements, framework.svg); @@ -49,7 +51,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { var coreDistance; var key, drawData; var group; - var i,j; + var i, j; var barPoints = 0; // combine all barchart data @@ -61,6 +63,8 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { combinedData.push({ screen_x: processedGroupData[groupIds[i]][j].screen_x, screen_y: processedGroupData[groupIds[i]][j].screen_y, + x: processedGroupData[groupIds[i]][j].x, + y: processedGroupData[groupIds[i]][j].y, groupId: groupIds[i], label: processedGroupData[groupIds[i]][j].label }); @@ -70,7 +74,9 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { } } - if (barPoints === 0) {return;} + if (barPoints === 0) { + return; + } // sort by time and by group combinedData.sort(function (a, b) { @@ -93,15 +99,23 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { key = combinedData[i].screen_x; var heightOffset = 0; if (intersections[key] === undefined) { - if (i+1 < combinedData.length) {coreDistance = Math.abs(combinedData[i+1].screen_x - key);} - if (i > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[i-1].screen_x - key));} + if (i + 1 < combinedData.length) { + coreDistance = Math.abs(combinedData[i + 1].screen_x - key); + } + if (i > 0) { + coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].screen_x - key)); + } drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth); } else { var nextKey = i + (intersections[key].amount - intersections[key].resolved); var prevKey = i - (intersections[key].resolved + 1); - if (nextKey < combinedData.length) {coreDistance = Math.abs(combinedData[nextKey].screen_x - key);} - if (prevKey > 0) {coreDistance = Math.min(coreDistance,Math.abs(combinedData[prevKey].screen_x - key));} + if (nextKey < combinedData.length) { + coreDistance = Math.abs(combinedData[nextKey].screen_x - key); + } + if (prevKey > 0) { + coreDistance = Math.min(coreDistance, Math.abs(combinedData[prevKey].screen_x - key)); + } drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth); intersections[key].resolved += 1; @@ -117,17 +131,23 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { } else if (group.options.barChart.sideBySide === true) { drawData.width = drawData.width / intersections[key].amount; - drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1)); - if (group.options.barChart.align === 'left') {drawData.offset -= 0.5*drawData.width;} - else if (group.options.barChart.align === 'right') {drawData.offset += 0.5*drawData.width;} + drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1)); + if (group.options.barChart.align === 'left') { + drawData.offset -= 0.5 * drawData.width; + } + else if (group.options.barChart.align === 'right') { + drawData.offset += 0.5 * drawData.width; + } } } 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); // draw points if (group.options.drawPoints.enabled === true) { let pointData = { - screen_x:combinedData[i].screen_x, - screen_y:combinedData[i].screen_y - heightOffset, + screen_x: combinedData[i].screen_x, + screen_y: combinedData[i].screen_y - heightOffset, + x: combinedData[i].x, + y: combinedData[i].y, groupId: combinedData[i].groupId, label: combinedData[i].label }; @@ -156,7 +176,12 @@ Bargraph._getDataIntersections = function (intersections, combinedData) { } if (coreDistance === 0) { if (intersections[combinedData[i].screen_x] === undefined) { - intersections[combinedData[i].screen_x] = {amount: 0, resolved: 0, accumulatedPositive: 0, accumulatedNegative: 0}; + intersections[combinedData[i].screen_x] = { + amount: 0, + resolved: 0, + accumulatedPositive: 0, + accumulatedNegative: 0 + }; } intersections[combinedData[i].screen_x].amount += 1; } @@ -201,13 +226,13 @@ Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) { return {width: width, offset: offset}; }; -Bargraph.getStackedYRange = function(combinedData, groupRanges, groupIds, groupLabel, orientation) { +Bargraph.getStackedYRange = function (combinedData, groupRanges, groupIds, groupLabel, orientation) { if (combinedData.length > 0) { // sort by time and by group combinedData.sort(function (a, b) { if (a.screen_x === b.screen_x) { return a.groupId < b.groupId ? -1 : 1; - } + } else { return a.screen_x - b.screen_x; } diff --git a/lib/timeline/component/graph2d_types/points.js b/lib/timeline/component/graph2d_types/points.js index 4241b622..c6a05a92 100644 --- a/lib/timeline/component/graph2d_types/points.js +++ b/lib/timeline/component/graph2d_types/points.js @@ -66,7 +66,6 @@ function getCallback(framework, group) { if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') { callback = group.group.options.drawPoints.onRender; } - return callback; }