Browse Source

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

flowchartTest
Alex de Mulder 9 years ago
parent
commit
b9ff0eb827
9 changed files with 769 additions and 175 deletions
  1. +443
    -161
      dist/vis.js
  2. +43
    -3
      docs/graph2d.html
  3. +1
    -1
      examples/graph2d/04_rightAxis.html
  4. +4
    -4
      examples/graph2d/15_streaming_data.html
  5. +2
    -2
      examples/graph2d/18_scatterplot.html
  6. +11
    -0
      lib/timeline/Graph2d.js
  7. +2
    -2
      lib/timeline/component/DataAxis.js
  8. +2
    -2
      lib/timeline/component/LineGraph.js
  9. +261
    -0
      lib/timeline/graph2dOptions.js

+ 443
- 161
dist/vis.js
File diff suppressed because it is too large
View File


+ 43
- 3
docs/graph2d.html View File

@ -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: <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="code">
function (value) { function (value) {
return '' + value.toPrecision(5);
return value;
} }
</pre> </pre>
which basically rounds it to 5 decimals.</td>
which does nothing to it.</td>
</tr> </tr>
<tr parent="dataAxis" class="hidden"> <tr parent="dataAxis" class="hidden">
<td class="indent2">dataAxis.left.range.min</td> <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 If not provided, the latest date present in the items set is taken as
end date.</td> end date.</td>
</tr> </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> <tr>
<td>height</td> <td>height</td>
<td class="mid">Number or String</td> <td class="mid">Number or String</td>
@ -816,6 +847,15 @@ function (value) {
<td class="mid">none</td> <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> <td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr> </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> <tr>
<td>orientation</td> <td>orientation</td>

+ 1
- 1
examples/graph2d/04_rightAxis.html View File

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

+ 4
- 4
examples/graph2d/15_streaming_data.html View File

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

+ 2
- 2
examples/graph2d/18_scatterplot.html View File

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

+ 11
- 0
lib/timeline/Graph2d.js View File

@ -10,6 +10,12 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime'); var CustomTime = require('./component/CustomTime');
var LineGraph = require('./component/LineGraph'); 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 * Create a timeline visualization
* @param {HTMLElement} container * @param {HTMLElement} container
@ -101,6 +107,11 @@ function Graph2d (container, items, groups, options) {
// apply options // apply options
if (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); this.setOptions(options);
} }

+ 2
- 2
lib/timeline/component/DataAxis.js View File

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

+ 2
- 2
lib/timeline/component/LineGraph.js View File

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

+ 261
- 0
lib/timeline/graph2dOptions.js View File

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

Loading…
Cancel
Save