From 257d876e14080d0f0595ac467e0660ca34b2c00a Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Tue, 12 Jan 2016 11:34:20 +0100 Subject: [PATCH 1/3] -Fix default axis formatting function. Fixes #1557. -Keep single defaults location -Update documentation on formatting function. --- docs/graph2d/index.html | 9 ++++---- lib/timeline/DataStep.js | 16 +++---------- lib/timeline/component/DataAxis.js | 6 ++--- lib/timeline/component/Legend.js | 3 ++- lib/timeline/component/LineGraph.js | 36 ++--------------------------- 5 files changed, 14 insertions(+), 56 deletions(-) diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 9c659f7a..40a4866e 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -470,12 +470,11 @@ var options = { Function Insert a custom function on how to format the label. The function will receive a numeric value and has to return a string. Default function is: - 
+            
 function (value) {
-  return value;
-}
-            

-            which does nothing to it.
+  return ''+value.toPrecision(3);
+}
+ dataAxis.left.range.min diff --git a/lib/timeline/DataStep.js b/lib/timeline/DataStep.js index 9bc67fec..96453387 100644 --- a/lib/timeline/DataStep.js +++ b/lib/timeline/DataStep.js @@ -190,21 +190,11 @@ DataStep.prototype.previous = function() { DataStep.prototype.getCurrent = function() { // prevent round-off errors when close to zero var current = (Math.abs(this.current) < this.step / 2) ? 0 : this.current; - var returnValue = current.toPrecision(5); + var returnValue = current; if (typeof this.formattingFunction === 'function') { - returnValue = this.formattingFunction(current); + return this.formattingFunction(current); } - - if (typeof returnValue === 'number') { - return '' + returnValue; - } - else if (typeof returnValue === 'string') { - return returnValue; - } - else { - return current.toPrecision(5); - } - + return '' + returnValue.toPrecision(3); }; /** diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 4a1291a3..269a3f7d 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -19,7 +19,7 @@ function DataAxis (body, options, svg, linegraphOptions) { orientation: 'left', // supported: 'left', 'right' showMinorLabels: true, showMajorLabels: true, - icons: true, + icons: false, majorLinesOffset: 7, minorLinesOffset: 4, labelOffsetX: 10, @@ -30,12 +30,12 @@ function DataAxis (body, options, svg, linegraphOptions) { alignZeros: true, left:{ range: {min:undefined,max:undefined}, - format: function (value) {return value;}, + format: function (value) {return ''+value.toPrecision(3);}, title: {text:undefined,style:undefined} }, right:{ range: {min:undefined,max:undefined}, - format: function (value) {return value;}, + format: function (value) {return ''+value.toPrecision(3);}, title: {text:undefined,style:undefined} } }; diff --git a/lib/timeline/component/Legend.js b/lib/timeline/component/Legend.js index 0843db38..f00222c8 100644 --- a/lib/timeline/component/Legend.js +++ b/lib/timeline/component/Legend.js @@ -8,7 +8,7 @@ var Component = require('./Component'); function Legend(body, options, side, linegraphOptions) { this.body = body; this.defaultOptions = { - enabled: true, + enabled: false, icons: true, iconSize: 20, iconSpacing: 6, @@ -21,6 +21,7 @@ function Legend(body, options, side, linegraphOptions) { position: 'top-left' // top/bottom - left,center,right } } + this.side = side; this.options = util.extend({},this.defaultOptions); this.linegraphOptions = linegraphOptions; diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index bfdbaeb2..2ea127d5 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -50,40 +50,8 @@ function LineGraph(body, options) { size: 6, style: 'square' // square, circle }, - dataAxis: { - showMinorLabels: true, - showMajorLabels: true, - icons: false, - width: '40px', - visible: true, - alignZeros: true, - left: { - range: {min: undefined, max: undefined}, - format: function (value) { - return value; - }, - title: {text: undefined, style: undefined} - }, - right: { - range: {min: undefined, max: undefined}, - format: function (value) { - return value; - }, - title: {text: undefined, style: undefined} - } - }, - legend: { - enabled: false, - icons: true, - left: { - visible: true, - position: 'top-left' // top/bottom - left,right - }, - right: { - visible: true, - position: 'top-right' // top/bottom - left,right - } - }, + dataAxis: {}, //Defaults are done on DataAxis level + legend: {}, //Defaults are done on Legend level groups: { visibility: {} } From 69ce07d07e9cd14cd9d9c729c152c142659719e0 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Tue, 12 Jan 2016 11:42:20 +0100 Subject: [PATCH 2/3] Update HISTORY --- HISTORY.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/HISTORY.md b/HISTORY.md index ae05f0df..1614ef5f 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -8,6 +8,9 @@ http://visjs.org - Altered edges for arrows and added the arrowStrikethrough option. +### Graph2d + +- Fixes #1557: Fix default axis formatting function. ## 2016-01-08, version 4.12.0 From b6b3807c51e3b0fc9c4c2b772f05e62c74053019 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Tue, 12 Jan 2016 13:53:49 +0100 Subject: [PATCH 3/3] Fixed #1017: Allow overriding of the minWidth of bars while zooming out. Fix the variable month width bug. Update documentation to better describe the current behavior. --- docs/graph2d/index.html | 9 +++++++-- lib/timeline/component/graph2d_types/bar.js | 16 ++-------------- lib/timeline/optionsGraph2d.js | 2 ++ 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 40a4866e..3a73847e 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -434,7 +434,7 @@ var options = { barChart.sideBySide Boolean false - If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side. + If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side, within the same width as a single bar.. See example 10 for more information. When using groups, see example 11. @@ -445,7 +445,12 @@ var options = { 50 The width of the bars. - + + barChart.minWidth + Number + + The minimum width of the bars in pixels: by default the bars get smaller while zooming out to prevent overlap, this value is the minimum width of the bar. Default behavior (when minWidth is not set) is 10% of the bar width. + dataAxis Object diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js index dfa688a6..ac22a289 100644 --- a/lib/timeline/component/graph2d_types/bar.js +++ b/lib/timeline/component/graph2d_types/bar.js @@ -94,7 +94,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { // plot barchart for (i = 0; i < combinedData.length; i++) { group = framework.groups[combinedData[i].groupId]; - var minWidth = 0.1 * group.options.barChart.width; + var minWidth = group.options.barChart.minWidth != undefined ? group.options.barChart.minWidth : 0.1 * group.options.barChart.width; key = combinedData[i].screen_x; var heightOffset = 0; @@ -102,9 +102,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { 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 { @@ -113,9 +110,6 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) { 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; @@ -132,12 +126,6 @@ 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; - } } } 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); @@ -201,7 +189,7 @@ Bargraph._getDataIntersections = function (intersections, combinedData) { Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) { var width, offset; if (coreDistance < group.options.barChart.width && coreDistance > 0) { - width = coreDistance < minWidth ? minWidth : coreDistance; + width = coreDistance < minWidth ? minWidth : coreDistance offset = 0; // recalculate offset with the new width; if (group.options.barChart.align === 'left') { diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js index 978624a2..fb8e0455 100644 --- a/lib/timeline/optionsGraph2d.js +++ b/lib/timeline/optionsGraph2d.js @@ -40,6 +40,7 @@ let allOptions = { style: {string:['line','bar','points']}, // line, bar barChart: { width: {number}, + minWidth: {number}, sideBySide: {boolean}, align: {string:['left','center','right']}, __type__: {object} @@ -179,6 +180,7 @@ let configureOptions = { style: ['line','bar','points'], // line, bar barChart: { width: [50,5,100,5], + minWidth: [50,5,100,5], sideBySide: false, align: ['left','center','right'] // left, center, right },