Browse Source

Merge pull request #2176 from wimrijnders/PR12

Added structure for default values
codeClimate
yotamberk 8 years ago
committed by GitHub
parent
commit
810922a68a
1 changed files with 110 additions and 47 deletions
  1. +110
    -47
      lib/graph3d/Graph3d.js

+ 110
- 47
lib/graph3d/Graph3d.js View File

@ -39,12 +39,83 @@ var OPTIONKEYS = [
'animationPreload', 'animationPreload',
'animationAutoStart', 'animationAutoStart',
'axisColor', 'axisColor',
'gridColor'
'gridColor',
'xCenter',
'yCenter'
]; ];
/** /**
* Copy fields from src to dst in a controlled manner.
* Default values for certain option fields.
*
* These are the values used when a Graph3d instance is initialized
* without custom settings.
*
* If a field is not in this list, a default value of 'undefined' can
* be assumed. Of course, it does no harm to set a field explicitly to
* 'undefined' here.
*
* A value of 'undefined' here normally means:
*
* 'derive from current data and graph style'
*
* In the code, this is indicated by the comment 'auto by default'.
*/
var DEFAULTS = {
width : '400px',
height : '400px',
filterLabel : 'time',
legendLabel : 'value',
xLabel : 'x',
yLabel : 'y',
zLabel : 'z',
xValueLabel : function(v) { return v; },
yValueLabel : function(v) { return v; },
zValueLabel : function(v) { return v; },
showGrid : true,
showPerspective : true,
showShadow : false,
keepAspectRatio : true,
verticalRatio : 0.5, // 0.1 to 1.0, where 1.0 results in a 'cube'
animationInterval: 1000, // milliseconds
animationPreload : false,
axisColor : '#4D4D4D',
gridColor : '#D3D3D3',
xCenter : '55%',
yCenter : '50%'
// Following not in defaults (yet) but present in user settings
// These will be initialized as 'undefined'
//'showAnimationControls',
//'animationAutoStart'
};
/**
* forcibly copy fields from src to dst in a controlled manner.
*
* A given field in dst will always be overwitten. If this field
* is undefined or not present in src, the field in dst will
* be explicitly set to undefined.
*
* The intention here is to be able to reset all option fields.
*
* Only the fields mentioned in array 'fields' will be handled.
*
* @param fields array with names of fields to copy
*/
function forceCopy(src, dst, fields) {
for (var i in fields) {
var field = fields[i];
dst[field] = src[field];
}
}
/**
* Copy fields from src to dst in a safe and controlled manner.
* *
* Only the fields mentioned in array 'fields' will be copied over, * Only the fields mentioned in array 'fields' will be copied over,
* and only if these are actually defined. * and only if these are actually defined.
@ -85,45 +156,38 @@ function Graph3d(container, data, options) {
// create variables and set default values // create variables and set default values
this.containerElement = container; this.containerElement = container;
this.width = '400px';
this.height = '400px';
this.dataTable = null; // The original data table
this.dataPoints = null; // The table with point objects
//
// Start Settings
//
// Handle the defaults which can be simply copied over
forceCopy(DEFAULTS, this, OPTIONKEYS);
// Following are internal fields, not part of the user settings
this.margin = 10; // px this.margin = 10; // px
this.defaultXCenter = '55%';
this.defaultYCenter = '50%';
this.showGrayBottom = false; // TODO: this does not work correctly
this.showTooltip = false;
this.dotSizeRatio = 0.02; // size of the dots as a fraction of the graph width
this.xLabel = 'x';
this.yLabel = 'y';
this.zLabel = 'z';
// The rest of the fields.
// These require special attention in some way
// TODO: handle these
var passValueFn = function(v) { return v; };
this.xValueLabel = passValueFn;
this.yValueLabel = passValueFn;
this.zValueLabel = passValueFn;
this.filterLabel = 'time';
this.legendLabel = 'value';
this.showLegend = undefined; // auto by default (based on graph style) this.showLegend = undefined; // auto by default (based on graph style)
this.style = Graph3d.STYLE.DOT; this.style = Graph3d.STYLE.DOT;
this.showPerspective = true;
this.showGrid = true;
this.keepAspectRatio = true;
this.showShadow = false;
this.showGrayBottom = false; // TODO: this does not work correctly
this.showTooltip = false;
this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
this.animationInterval = 1000; // milliseconds
this.animationPreload = false;
this.camera = new Camera(); this.camera = new Camera();
this.camera.setArmRotation(1.0, 0.5); this.camera.setArmRotation(1.0, 0.5);
this.camera.setArmLength(1.7); this.camera.setArmLength(1.7);
this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window? this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window?
this.dataTable = null; // The original data table
this.dataPoints = null; // The table with point objects
// the column indexes // the column indexes
this.colX = undefined; this.colX = undefined;
this.colY = undefined; this.colY = undefined;
@ -147,15 +211,16 @@ function Graph3d(container, data, options) {
// TODO: customize axis range // TODO: customize axis range
// colors // colors
this.axisColor = '#4D4D4D';
this.gridColor = '#D3D3D3';
this.dataColor = { this.dataColor = {
fill: '#7DC1FF', fill: '#7DC1FF',
stroke: '#3267D2', stroke: '#3267D2',
strokeWidth: 1 // px strokeWidth: 1 // px
}; };
this.dotSizeRatio = 0.02; // size of the dots as a fraction of the graph width
//
// End Settings
//
// create a frame and canvas // create a frame and canvas
this.create(); this.create();
@ -281,8 +346,8 @@ Graph3d.prototype._convertTranslationToScreen = function(translation) {
// shift and scale the point to the center of the screen // shift and scale the point to the center of the screen
// use the width of the graph to scale both horizontally and vertically. // use the width of the graph to scale both horizontally and vertically.
return new Point2d( return new Point2d(
this.xcenter + bx * this.frame.canvas.clientWidth,
this.ycenter - by * this.frame.canvas.clientWidth);
this.currentXCenter + bx * this.frame.canvas.clientWidth,
this.currentYCenter - by * this.frame.canvas.clientWidth);
}; };
@ -809,30 +874,30 @@ Graph3d.prototype.animationStop = function() {
/** /**
* Resize the center position based on the current values in this.defaultXCenter
* and this.defaultYCenter (which are strings with a percentage or a value
* in pixels). The center positions are the variables this.xCenter
* and this.yCenter
* Resize the center position based on the current values in this.xCenter
* and this.yCenter (which are strings with a percentage or a value
* in pixels). The center positions are the variables this.currentXCenter
* and this.currentYCenter
*/ */
Graph3d.prototype._resizeCenter = function() { Graph3d.prototype._resizeCenter = function() {
// calculate the horizontal center position // calculate the horizontal center position
if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
this.xcenter =
parseFloat(this.defaultXCenter) / 100 *
if (this.xCenter.charAt(this.xCenter.length-1) === '%') {
this.currentXCenter =
parseFloat(this.xCenter) / 100 *
this.frame.canvas.clientWidth; this.frame.canvas.clientWidth;
} }
else { else {
this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
this.currentXCenter = parseFloat(this.xCenter); // supposed to be in px
} }
// calculate the vertical center position // calculate the vertical center position
if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
this.ycenter =
parseFloat(this.defaultYCenter) / 100 *
if (this.yCenter.charAt(this.yCenter.length-1) === '%') {
this.currentYCenter =
parseFloat(this.yCenter) / 100 *
(this.frame.canvas.clientHeight - this.frame.filter.clientHeight); (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
} }
else { else {
this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
this.currentYCenter = parseFloat(this.yCenter); // supposed to be in px
} }
}; };
@ -931,8 +996,6 @@ Graph3d.prototype.setOptions = function (options) {
safeCopy(options, this, OPTIONKEYS); safeCopy(options, this, OPTIONKEYS);
// Handle the rest of the parameters // Handle the rest of the parameters
if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
if (options.showLegend !== undefined) this.defaultShowLegend = options.showLegend; if (options.showLegend !== undefined) this.defaultShowLegend = options.showLegend;
if (options.style !== undefined) { if (options.style !== undefined) {

Loading…
Cancel
Save