diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 19bc59ef..61a6cdf6 100644 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -82,13 +82,23 @@ var DEFAULTS = { axisColor : '#4D4D4D', gridColor : '#D3D3D3', xCenter : '55%', - yCenter : '50%' + yCenter : '50%', // Following not in defaults (yet) but present in user settings // These will be initialized as 'undefined' //'showAnimationControls', //'animationAutoStart' + + // Following not in OPTIONKEYS because they require special handling, + + backgroundColor : undefined, + + dataColor : { + fill : '#7DC1FF', + stroke : '#3267D2', + strokeWidth: 1 // px + } }; @@ -160,6 +170,8 @@ function Graph3d(container, data, options) { this.dataTable = null; // The original data table this.dataPoints = null; // The table with point objects + // create a frame and canvas + this.create(); // // Start Settings @@ -174,6 +186,9 @@ function Graph3d(container, data, options) { this.showTooltip = false; this.dotSizeRatio = 0.02; // size of the dots as a fraction of the graph width + // Handle the more complex ('special') fields + this._setSpecialSettings(DEFAULTS, this); + // The rest of the fields. // These require special attention in some way // TODO: handle these @@ -210,21 +225,10 @@ function Graph3d(container, data, options) { this.yBarWidth = 1; // TODO: customize axis range - // colors - this.dataColor = { - fill: '#7DC1FF', - stroke: '#3267D2', - strokeWidth: 1 // px - }; - - // // End Settings // - // create a frame and canvas - this.create(); - // apply options (also when undefined) this.setOptions(options); @@ -381,11 +385,41 @@ Graph3d.prototype._calcTranslations = function(points, sort) { }; +// ----------------------------------------------------------------------------- +// Methods for handling settings +// ----------------------------------------------------------------------------- + + +/** + * Special handling for certain parameters + * + * 'Special' here means: setting requires more than a simple copy + */ +Graph3d.prototype._setSpecialSettings = function(src, dst) { + + if (src.backgroundColor !== undefined) { + this._setBackgroundColor(src.backgroundColor, dst); + } + + this._setDataColor(src.dataColor, dst); + +/* TODO + setStyle(src.style, dst); + + if (src.tooltip !== undefined) { + dst.showTooltip = src.tooltip; + } + + setCameraPosition(src.cameraPosition, dst); +End TODO */ +} + + /** * Set the background styling for the graph * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor */ -Graph3d.prototype._setBackgroundColor = function(backgroundColor) { +Graph3d.prototype._setBackgroundColor = function(backgroundColor, dst) { var fill = 'white'; var stroke = 'gray'; var strokeWidth = 1; @@ -400,20 +434,49 @@ Graph3d.prototype._setBackgroundColor = function(backgroundColor) { if (backgroundColor.stroke !== undefined) stroke = backgroundColor.stroke; if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth; } - else if (backgroundColor === undefined) { - // use use defaults - } else { throw new Error('Unsupported type of backgroundColor'); } - this.frame.style.backgroundColor = fill; - this.frame.style.borderColor = stroke; - this.frame.style.borderWidth = strokeWidth + 'px'; - this.frame.style.borderStyle = 'solid'; + dst.frame.style.backgroundColor = fill; + dst.frame.style.borderColor = stroke; + dst.frame.style.borderWidth = strokeWidth + 'px'; + dst.frame.style.borderStyle = 'solid'; }; +Graph3d.prototype._setDataColor = function(dataColor, dst) { + if (dataColor === undefined) { + return; // Nothing to do + } + + if (dst.dataColor === undefined) { + dst.dataColor = {}; + } + + if (typeof dataColor === 'string') { + dst.dataColor.fill = dataColor; + dst.dataColor.stroke = dataColor; + } + else { + if (dataColor.fill) { + dst.dataColor.fill = dataColor.fill; + } + if (dataColor.stroke) { + dst.dataColor.stroke = dataColor.stroke; + } + if (dataColor.strokeWidth !== undefined) { + dst.dataColor.strokeWidth = dataColor.strokeWidth; + } + } +} + + +// ----------------------------------------------------------------------------- +// End methods for handling settings +// ----------------------------------------------------------------------------- + + /// enumerate the available styles Graph3d.STYLE = { BAR: 0, @@ -995,6 +1058,9 @@ Graph3d.prototype.setOptions = function (options) { // Handle the parameters which can be simply copied over safeCopy(options, this, OPTIONKEYS); + // Handle the more complex ('special') fields + this._setSpecialSettings(options, this); + // Handle the rest of the parameters if (options.showLegend !== undefined) this.defaultShowLegend = options.showLegend; @@ -1019,7 +1085,6 @@ Graph3d.prototype.setOptions = function (options) { if (options.zMax !== undefined) this.defaultZMax = options.zMax; if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin; if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax; - if (options.backgroundColor !== undefined) this._setBackgroundColor(options.backgroundColor); if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition; @@ -1027,26 +1092,6 @@ Graph3d.prototype.setOptions = function (options) { this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical); this.camera.setArmLength(cameraPosition.distance); } - - // colors - if (options.dataColor) { - if (typeof options.dataColor === 'string') { - this.dataColor.fill = options.dataColor; - this.dataColor.stroke = options.dataColor; - } - else { - if (options.dataColor.fill) { - this.dataColor.fill = options.dataColor.fill; - } - if (options.dataColor.stroke) { - this.dataColor.stroke = options.dataColor.stroke; - } - if (options.dataColor.strokeWidth !== undefined) { - this.dataColor.strokeWidth = options.dataColor.strokeWidth; - } - } - } - } this.setSize(this.width, this.height);