From fbb25870f1bae012371884cafe3e9c4732534df4 Mon Sep 17 00:00:00 2001 From: Thomas G Date: Mon, 2 Mar 2020 22:15:41 +0100 Subject: [PATCH] feat(style): allow z-independent values for "regular" graphs (#100) * Allow z-independent values for "regular" graphs This allows setting values independent of the z coordinate (but falls back to the old behaviour of using `z` if not specified) for the following plots: - bar - dot - dot-line - grid - surface * Update documentation * Remove _checkValueField method colValue is always defined now, so no need for special treatment. * Add an example * Add missing example links --- docs/graph3d/index.html | 5 ++- examples/graph3d/17_surface_value.html | 58 ++++++++++++++++++++++++++ examples/graph3d/index.html | 9 +++- lib/graph3d/DataGroup.js | 49 +++------------------- lib/graph3d/Graph3d.js | 23 +++++----- 5 files changed, 84 insertions(+), 60 deletions(-) create mode 100644 examples/graph3d/17_surface_value.html diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index a984c7620..7e9849aca 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -231,7 +231,10 @@

Definition

The data value, required for graph styles dot-color and dot-size. If an object is supplied, this allows styling on a per-point basis. The object should be in the form of - { "fill":"red", "stroke":"#999" }. + { "fill":"red", "stroke":"#999" }. For graph styles + bar, dot, dot-line, + grid, and surface this column can be used to + specify data values, but no per-point styling is supported yet. diff --git a/examples/graph3d/17_surface_value.html b/examples/graph3d/17_surface_value.html new file mode 100644 index 000000000..007aa6b25 --- /dev/null +++ b/examples/graph3d/17_surface_value.html @@ -0,0 +1,58 @@ + + + + Graph 3D | Surface value + + + + + + + + + + +
+ +
+ + diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html index 24da11dc5..8b6796e35 100644 --- a/examples/graph3d/index.html +++ b/examples/graph3d/index.html @@ -11,7 +11,7 @@

Grpah3D Examples

- + View docs »
interactive playground »
@@ -29,6 +29,11 @@

Basic usage

  • styling
  • tooltips
  • custom_labels
    • +
  • disable zoom
    • +
  • zoom ctrl scroll
    • +
  • styling per point
    • +
  • styling surface
    • +
  • surface value

    • Extended examples

    @@ -39,4 +44,4 @@

    Extended examples

    - \ No newline at end of file + diff --git a/lib/graph3d/DataGroup.js b/lib/graph3d/DataGroup.js index 0ce69ed96..69ccbd56d 100644 --- a/lib/graph3d/DataGroup.js +++ b/lib/graph3d/DataGroup.js @@ -108,6 +108,10 @@ DataGroup.prototype.initializeData = function(graph3d, rawData, style) { this._setRangeDefaults(valueRange, graph3d.defaultValueMin, graph3d.defaultValueMax); this.valueRange = valueRange; } + else { + this.colValue = 'z'; + this.valueRange = this.zRange; + } // Initialize data filter if a filter column is provided var table = this.getDataTable(); @@ -337,10 +341,7 @@ DataGroup.prototype.getDataPoints = function(data) { point.y = data[i][this.colY] || 0; point.z = data[i][this.colZ] || 0; point.data = data[i]; - - if (this.colValue !== undefined) { - point.value = data[i][this.colValue] || 0; - } + point.value = data[i][this.colValue] || 0; var obj = {}; obj.point = point; @@ -445,7 +446,6 @@ DataGroup.prototype._getDataPoints = function (data) { dataPoints = this.initDataAsMatrix(data); } else { // 'dot', 'dot-line', etc. - this._checkValueField(data); dataPoints = this.getDataPoints(data); if (this.style === Settings.STYLE.LINE) { @@ -462,43 +462,4 @@ DataGroup.prototype._getDataPoints = function (data) { }; -/** - * Check if the state is consistent for the use of the value field. - * - * Throws if a problem is detected. - * - * @param {Array.} data - * @private - */ -DataGroup.prototype._checkValueField = function (data) { - - var hasValueField = this.style === Settings.STYLE.BARCOLOR - || this.style === Settings.STYLE.BARSIZE - || this.style === Settings.STYLE.DOTCOLOR - || this.style === Settings.STYLE.DOTSIZE; - - if (!hasValueField) { - return; // No need to check further - } - - - // Following field must be present for the current graph style - if (this.colValue === undefined) { - throw new Error('Expected data to have ' - + ' field \'style\' ' - + ' for graph style \'' + this.style + '\'' - ); - } - - // The data must also contain this field. - // Note that only first data element is checked. - if (data[0][this.colValue] === undefined) { - throw new Error('Expected data to have ' - + ' field \'' + this.colValue + '\' ' - + ' for graph style \'' + this.style + '\'' - ); - } -}; - - module.exports = DataGroup; diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index dc6f95896..743c95218 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -385,10 +385,7 @@ Graph3d.prototype.getDataPoints = function(data) { point.y = data[i][this.colY] || 0; point.z = data[i][this.colZ] || 0; point.data = data[i]; - - if (this.colValue !== undefined) { - point.value = data[i][this.colValue] || 0; - } + point.value = data[i][this.colValue] || 0; var obj = {}; obj.point = point; @@ -459,7 +456,6 @@ Graph3d.prototype._getDataPoints = function (data) { } } else { // 'dot', 'dot-line', etc. - this._checkValueField(data); dataPoints = this.getDataPoints(data); if (this.style === Graph3d.STYLE.LINE) { @@ -848,6 +844,7 @@ Graph3d.prototype._redrawLegend = function() { // Legend is either tracking z values or style values. This flag if false means use z values. var isValueLegend = (this.style === Graph3d.STYLE.DOTSIZE || this.style === Graph3d.STYLE.DOTCOLOR + || this.style === Graph3d.STYLE.SURFACE || this.style === Graph3d.STYLE.BARCOLOR); var height = Math.max(this.frame.clientHeight * 0.25, 100); @@ -1629,8 +1626,8 @@ Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) { * @private */ Graph3d.prototype._getColorsRegular = function(point) { - // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0 - var hue = (1 - (point.point.z - this.zRange.min) * this.scale.z / this.verticalRatio) * 240; + // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0 + var hue = (1 - (point.point.value - this.valueRange.min) * this.scale.value) * 240; var color = this._hsv2rgb(hue, 1, 1); var borderColor = this._hsv2rgb(hue, 1, 0.8); @@ -1886,9 +1883,9 @@ Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) { if (topSideVisible) { - // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0 - var zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4; - var ratio = (1 - (zAvg - this.zRange.min) * this.scale.z / this.verticalRatio); + // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0 + var vAvg = (point.point.value + right.point.value + top.point.value + cross.point.value) / 4; + var ratio = (1 - (vAvg - this.valueRange.min) * this.scale.value); var colors = this.surfaceColors; if (colors && colors.length !== 0) { @@ -1955,9 +1952,9 @@ Graph3d.prototype._drawGridLine = function(ctx, from, to) { return; } - // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0 - var zAvg = (from.point.z + to.point.z) / 2; - var h = (1 - (zAvg - this.zRange.min) * this.scale.z / this.verticalRatio) * 240; + // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0 + var vAvg = (from.point.value + to.point.value) / 2; + var h = (1 - (vAvg - this.valueRange.min) * this.scale.value) * 240; ctx.lineWidth = this._getStrokeWidth(from) * 2; ctx.strokeStyle = this._hsv2rgb(h, 1, 1);