Merge remote-tracking branch 'origin/develop' into develop

HISTORY.md

@@ -9,6 +9,9 @@ http://visjs.org
 - Altered edges for arrows and added the arrowStrikethrough option.
 - Improved the hierarchical layout algorithm by adding a condensing method to remove whitespace.
 
+### Graph2d
+
+- Fixes #1557: Fix default axis formatting function.
 
 ## 2016-01-08, version 4.12.0
 

docs/graph2d/index.html

@@ -434,7 +434,7 @@ var options = {
             <td class="greenField indent">barChart.sideBySide</td>
             <td>Boolean</td>
             <td>false</td>
-            <td>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.
+            <td>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 <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
                 When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
             </td>
@@ -445,7 +445,12 @@ var options = {
             <td>50</td>
             <td>The width of the bars.</td>
         </tr>
-
+        <tr parent="barChart" class="hidden">
+            <td class="greenField indent">barChart.minWidth</td>
+            <td>Number</td>
+            <td></td>
+            <td>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.</td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('g2dOptions','dataAxis', this);">
             <td><span parent="dataAxis" class="right-caret"></span> dataAxis</td>
             <td>Object</td>
@@ -470,12 +475,11 @@ var options = {
             <td>Function</td>
             <td></td>
             <td>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:
-            <pre class="code">
+            <pre class="prettyprint lang-js">
 function (value) {
-  return value;
-}
-            </pre>
-            which does nothing to it.</td>
+  return ''+value.toPrecision(3);
+}</pre>
+            </td>
         </tr>
         <tr parent="dataAxis" class="hidden">
             <td class="indent2">dataAxis.left.range.min</td>

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);
 };
 
 /**

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}
     }
   };

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;

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: {}
     }

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') {

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
     },