added validator to graph2d, maybe also put it in groups?

docs/graph2d.html

@@ -465,10 +465,10 @@ var options = {
             <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">
 function (value) {
-  return '' + value.toPrecision(5);
+  return value;
 }
             </pre>
-            which basically rounds it to 5 decimals.</td>
+            which does nothing to it.</td>
         </tr>
         <tr parent="dataAxis" class="hidden">
             <td class="indent2">dataAxis.left.range.min</td>
@@ -747,7 +747,38 @@ function (value) {
                 If not provided, the latest date present in the items set is taken as
                 end date.</td>
         </tr>
-
+        <tr>
+            <td>format</td>
+            <td class="mid">Object</td>
+            <td class="mid">none</td>
+            <td>
+                Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is:
+      <pre class="prettyprint lang-js">{
+  minorLabels: {
+    millisecond:'SSS',
+    second:     's',
+    minute:     'HH:mm',
+    hour:       'HH:mm',
+    weekday:    'ddd D',
+    day:        'D',
+    month:      'MMM',
+    year:       'YYYY'
+  },
+  majorLabels: {
+    millisecond:'HH:mm:ss',
+    second:     'D MMMM HH:mm',
+    minute:     'ddd D MMMM',
+    hour:       'ddd D MMMM',
+    weekday:    'MMMM YYYY',
+    day:        'MMMM YYYY',
+    month:      'YYYY',
+    year:       ''
+  }
+}</pre>
+                For values which not provided in the customized <code>options.format</code>, the default values will be used.
+                All available formatting syntax is described in the <a href="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>.
+            </td>
+        </tr>
         <tr>
             <td>height</td>
             <td class="mid">Number or String</td>
@@ -816,6 +847,15 @@ function (value) {
             <td class="mid">none</td>
             <td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
         </tr>
+        <tr>
+            <td>moveable</td>
+            <td class="mid">boolean</td>
+            <td class="mid"><code>true</code></td>
+            <td>
+                Specifies whether the Timeline can be moved and zoomed by dragging the window.
+                See also option <code>zoomable</code>.
+            </td>
+        </tr>
 
         <tr>
             <td>orientation</td>

examples/graph2d/04_rightAxis.html

@@ -117,7 +117,7 @@
         dataAxis: {icons: true},
         start: '2014-06-10',
         end: '2014-07-04',
-        movable: false
+        moveable: false
     };
     var graph2d = new vis.Graph2d(container, dataset, groups, options);
 

examples/graph2d/15_streaming_data.html

@@ -45,8 +45,8 @@
     start: vis.moment().add(-30, 'seconds'), // changed so its faster
     end: vis.moment(),
     dataAxis: {
-      customRange: {
-        left: {
+      left: {
+        range: {
           min:-10, max: 10
         }
       }
@@ -73,12 +73,12 @@
     switch (strategy.value) {
       case 'continuous':
         // continuously move the window
-        graph2d.setWindow(now - interval, now, {animate: false});
+        graph2d.setWindow(now - interval, now, {animation: false});
         requestAnimationFrame(renderStep);
         break;
 
       case 'discrete':
-        graph2d.setWindow(now - interval, now, {animate: false});
+        graph2d.setWindow(now - interval, now, {animation: false});
         setTimeout(renderStep, DELAY);
         break;
 

examples/graph2d/18_scatterplot.html

@@ -42,8 +42,8 @@ var options = {
       sampling:false,
       style:'points',
       dataAxis: {
-          customRange: {
-              left: {
+          left: {
+              range: {
                   min: 300, max: 800
               }
           }

lib/timeline/Graph2d.js

@@ -10,6 +10,12 @@ var CurrentTime = require('./component/CurrentTime');
 var CustomTime = require('./component/CustomTime');
 var LineGraph = require('./component/LineGraph');
 
+var ConfigurationSystem = require('../shared/ConfigurationSystem');
+var Validator = require('../shared/Validator').default;
+var printStyle = require('../shared/Validator').printStyle;
+var allOptions = require('./graph2dOptions').allOptions;
+var configureOptions = require('./graph2dOptions').configureOptions;
+
 /**
  * Create a timeline visualization
  * @param {HTMLElement} container
@@ -101,6 +107,11 @@ function Graph2d (container, items, groups, options) {
 
   // apply options
   if (options) {
+    let errorFound = Validator.validate(options, allOptions);
+    if (errorFound === true) {
+      console.log('%cErrors have been found in the supplied options object.', printStyle);
+    }
+
     this.setOptions(options);
   }
 

lib/timeline/component/DataAxis.js

@@ -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;},
       title: {text:undefined,style:undefined}
     },
     right:{
       range: {min:undefined,max:undefined},
-      format: function (value) {return ''+value;},
+      format: function (value) {return value;},
       title: {text:undefined,style:undefined}
     }
   };

lib/timeline/component/LineGraph.js

@@ -58,12 +58,12 @@ function LineGraph(body, options) {
       alignZeros: true,
       left:{
         range: {min:undefined,max:undefined},
-        format: function (value) {return '' + value;},
+        format: function (value) {return value;},
         title: {text:undefined,style:undefined}
       },
       right:{
         range: {min:undefined,max:undefined},
-        format: function (value) {return '' + value;},
+        format: function (value) {return value;},
         title: {text:undefined,style:undefined}
       }
     },

lib/timeline/graph2dOptions.js

@@ -0,0 +1,261 @@
+/**
+ * This object contains all possible options. It will check if the types are correct, if required if the option is one
+ * of the allowed values.
+ *
+ * __any__ means that the name of the property does not matter.
+ * __type__ is a required field for all objects and contains the allowed types of all objects
+ */
+let string = 'string';
+let boolean = 'boolean';
+let number = 'number';
+let array = 'array';
+let date = 'date';
+let object = 'object'; // should only be in a __type__ property
+let dom = 'dom';
+let moment = 'moment';
+let fn = 'function';
+let nada = 'null';
+let undef = 'undefined';
+let any = 'any';
+
+
+let allOptions = {
+  configure: {
+    enabled: {boolean},
+    filter: {boolean,string,array},
+    container: {dom},
+    __type__: {object,boolean,string,array}
+  },
+
+  //globals :
+  yAxisOrientation: {string:['left','right']},
+  defaultGroup: {string},
+  sort: {boolean},
+  sampling: {boolean},
+  stack:{boolean},
+  graphHeight: {string, number},
+  shaded: {
+    enabled: {boolean},
+    orientation: {string:['bottom','top']}, // top, bottom
+    __type__: {boolean,object}
+  },
+  style: {string:['line','bar','points']}, // line, bar
+  barChart: {
+    width: {number},
+    sideBySide: {boolean},
+    align: {string:['left','center','right']},
+    __type__: {object}
+  },
+  interpolation: {
+    enabled: {boolean},
+    parametrization: {string:['centripetal', 'chordal','uniform']}, // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
+    alpha: {number},
+    __type__: {object,boolean}
+  },
+  drawPoints: {
+    enabled: {boolean},
+    size: {number},
+    style: {string:['square','circle']}, // square, circle
+    __type__: {object,boolean}
+  },
+  dataAxis: {
+    showMinorLabels: {boolean},
+    showMajorLabels: {boolean},
+    icons: {boolean},
+    width: {string, number},
+    visible: {boolean},
+    alignZeros: {boolean},
+    left:{
+      range: {min:{number},max:{number},__type__: {object}},
+      format: {fn},
+      title: {text:{string,number},style:{string},__type__: {object}},
+      __type__: {object}
+    },
+    right:{
+      range: {min:{number},max:{number},__type__: {object}},
+      format: {fn},
+      title: {text:{string,number},style:{string},__type__: {object}},
+      __type__: {object}
+    },
+    __type__: {object}
+  },
+  legend: {
+    enabled: {boolean},
+    icons: {boolean},
+    left: {
+      visible: {boolean},
+      position: {string:['top-right','bottom-right','top-left','bottom-left']},
+      __type__: {object}
+    },
+    right: {
+      visible: {boolean},
+      position: {string:['top-right','bottom-right','top-left','bottom-left']},
+      __type__: {object}
+    },
+    __type__: {object,boolean}
+  },
+  groups: {
+    visibility: {any},
+    __type__: {object}
+  },
+
+  autoResize: {boolean},
+  clickToUse: {boolean},
+  end: {number, date, string, moment},
+  format: {
+    minorLabels: {
+      millisecond: {string,undef},
+      second: {string,undef},
+      minute: {string,undef},
+      hour: {string,undef},
+      weekday: {string,undef},
+      day: {string,undef},
+      month: {string,undef},
+      year: {string,undef},
+      __type__: {object}
+    },
+    majorLabels: {
+      millisecond: {string,undef},
+      second: {string,undef},
+      minute: {string,undef},
+      hour: {string,undef},
+      weekday: {string,undef},
+      day: {string,undef},
+      month: {string,undef},
+      year: {string,undef},
+      __type__: {object}
+    },
+    __type__: {object}
+  },
+  height: {string, number},
+  hiddenDates: {object, array},
+  locale:{string},
+  locales:{
+    __any__: {object},
+    __type__: {object}
+  },
+  max: {date, number, string, moment},
+  maxHeight: {number, string},
+  min: {date, number, string, moment},
+  minHeight: {number, string},
+  moveable: {boolean},
+  multiselect: {boolean},
+  orientation: {string},
+  showCurrentTime: {boolean},
+  showMajorLabels: {boolean},
+  showMinorLabels: {boolean},
+  start: {date, number, string, moment},
+  timeAxis: {
+    scale: {string,undef},
+    step: {number,undef},
+    __type__: {object}
+  },
+  width: {string, number},
+  zoomable: {boolean},
+  zoomMax: {number},
+  zoomMin: {number},
+  __type__: {object}
+}
+
+let configureOptions = {
+  global: {
+    yAxisOrientation: ['left','right'],
+    sort: true,
+    sampling: true,
+    stack:false,
+    shaded: {
+      enabled: false,
+      orientation: ['top','bottom'] // top, bottom
+    },
+    style: ['line','bar','points'], // line, bar
+    barChart: {
+      width: [50,5,100,5],
+      sideBySide: false,
+      align: ['left','center','right'] // left, center, right
+    },
+    interpolation: {
+      enabled: true,
+      parametrization: ['centripetal','chordal','uniform'] // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
+    },
+    drawPoints: {
+      enabled: true,
+      size: [6,2,30,1],
+      style: 'square' // square, circle
+    },
+    dataAxis: {
+      showMinorLabels: true,
+      showMajorLabels: true,
+      icons: false,
+      width: [40,0,200,1],
+      visible: true,
+      alignZeros: true,
+      left:{
+        //range: {min:undefined,max:undefined},
+        //format: function (value) {return value;},
+        title: {text:'',style:''}
+      },
+      right:{
+        //range: {min:undefined,max:undefined},
+        //format: function (value) {return value;},
+        title: {text:'',style:''}
+      }
+    },
+    legend: {
+      enabled: false,
+      icons: true,
+      left: {
+        visible: true,
+        position: ['top-right','bottom-right','top-left','bottom-left'] // top/bottom - left,right
+      },
+      right: {
+        visible: true,
+        position: ['top-right','bottom-right','top-left','bottom-left'] // top/bottom - left,right
+      }
+    },
+
+    autoResize: true,
+    clickToUse: false,
+    end: '',
+    format: {
+      minorLabels: {
+        millisecond:'SSS',
+        second:     's',
+        minute:     'HH:mm',
+        hour:       'HH:mm',
+        weekday:    'ddd D',
+        day:        'D',
+        month:      'MMM',
+        year:       'YYYY'
+      },
+      majorLabels: {
+        millisecond:'HH:mm:ss',
+        second:     'D MMMM HH:mm',
+        minute:     'ddd D MMMM',
+        hour:       'ddd D MMMM',
+        weekday:    'MMMM YYYY',
+        day:        'MMMM YYYY',
+        month:      'YYYY',
+        year:       ''
+      }
+    },
+
+    height: '',
+    locale: '',
+    max: '',
+    maxHeight: '',
+    min: '',
+    minHeight: '',
+    movable:true,
+    orientation: ['both', 'bottom', 'top'],
+    showCurrentTime: false,
+    showMajorLabels: true,
+    showMinorLabels: true,
+    start: '',
+    width: '100%',
+    zoomable: true,
+    zoomMax: [315360000000000, 10, 315360000000000, 1],
+    zoomMin: [10, 10, 315360000000000, 1]
+  }
+};
+
+export {allOptions, configureOptions};