Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Commit

Permalink
Merge pull request #2214 from wimrijnders/PR23
Browse files Browse the repository at this point in the history 
Add point draw methods for styles 'dot-color' and 'dot-size'
  • Loading branch information
@yotamberk
yotamberk authored Oct 23, 2016
2 parents 1c4e1a4 + 9e1fd66 commit a9be8e7
Showing 1 changed file with 111 additions and 114 deletions.
225 changes: 111 additions & 114 deletions lib/graph3d/Graph3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -837,9 +837,15 @@ Graph3d.prototype.getPointDrawingMethod = function() {
case Graph3d.STYLE.DOT:
pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
break;
case Graph3d.STYLE.DOT:
case Graph3d.STYLE.DOTLINE:
pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
break;
case Graph3d.STYLE.DOTCOLOR:
pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint;
break;
case Graph3d.STYLE.DOTSIZE:
pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
break;
}

return pointDrawingMethod;
Expand Down Expand Up @@ -877,8 +883,8 @@ Graph3d.prototype.redraw = function() {
this._redrawDataLine();
}
else {
// style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
this._redrawDataDot();
// Should not be reached any more.
throw new Error('Unknown graph style \'' + this.style + '\'');
}
}

Expand All @@ -893,6 +899,10 @@ Graph3d.prototype.redraw = function() {
Graph3d.prototype._getContext = function() {
var canvas = this.frame.canvas;
var ctx = canvas.getContext('2d');

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

return ctx;
};

Expand Down Expand Up @@ -1430,9 +1440,6 @@ Graph3d.prototype._redrawDataGrid = function() {
topSideVisible, fillStyle, strokeStyle, lineWidth,
h, s, v, zAvg;

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?

Expand Down Expand Up @@ -1522,95 +1529,18 @@ Graph3d.prototype._getStrokeWidth = function(point) {
return this.dataColor.strokeWidth;
};

/**
* Draw all datapoints as dots.
* This function can be used when the style is 'dot' or 'dot-line'
*/
Graph3d.prototype._redrawDataDot = function() {
var ctx = this._getContext();
var i;

if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?

this._calcTranslations(this.dataPoints);

// draw the datapoints as colored circles
var dotSize = this._dotSize();
for (i = 0; i < this.dataPoints.length; i++) {
var point = this.dataPoints[i];

if (this.style === Graph3d.STYLE.DOTLINE) {
// draw a vertical line from the bottom to the graph value
//var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
this._line(ctx, from, point.screen, this.gridColor);
}

// calculate radius for the circle
var size;
if (this.style === Graph3d.STYLE.DOTSIZE) {
size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
}
else {
size = dotSize;
}

var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}

var hue, color, borderColor;
if (this.style === Graph3d.STYLE.DOTCOLOR ) {
// calculate the color based on the value
hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
else if (this.style === Graph3d.STYLE.DOTSIZE) {
color = this.dataColor.fill;
borderColor = this.dataColor.stroke;
}
else {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
}

// draw the circle
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
}
};


// -----------------------------------------------------------------------------
// Drawing primitives for the graphs
// -----------------------------------------------------------------------------


/**
* Draw a bar element in the view with the given properties.
*/
Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
var i, j, surface, corners;

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

// calculate all corner points
var me = this;
var point3d = point.point;
Expand Down Expand Up @@ -1688,7 +1618,12 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
};


Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
/**
* @param size optional; if not specified use value from 'this._dotSize()`
*/
Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) {
var radius = this._calcRadius(point, size);

ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
Expand All @@ -1699,7 +1634,10 @@ Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor)
};


Graph3d.prototype._getColorsRegular = function(ctx, point) {
/**
* Determine the colors for the 'regular' graph styles.
*/
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.zMin) * this.scale.z / this.verticalRatio) * 240;
var color = this._hsv2rgb(hue, 1, 1);
Expand All @@ -1711,6 +1649,63 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
};
};


/**
* Get the colors for the 'color' graph styles.
* These styles are currently: 'bar-color' and 'dot-color'
*/
Graph3d.prototype._getColorsColor = function(point) {
// calculate the color based on the value
var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);

return {
fill : color,
border : borderColor
};
};


/**
* Get the colors for the 'size' graph styles.
* These styles are currently: 'bar-size' and 'dot-size'
*/
Graph3d.prototype._getColorsSize = function() {
return {
fill : this.dataColor.fill,
border : this.dataColor.stroke
};
};


/**
* Determine the size of a point on-screen, as determined by the
* distance to the camera.
*
* @param size the size that needs to be translated to screen coordinates.
* optional; if not passed, use the default point size.
*/
Graph3d.prototype._calcRadius = function(point, size) {
if (size === undefined) {
size = this._dotSize();
}

var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}

return radius;
};


// -----------------------------------------------------------------------------
// Methods for drawing points per graph style.
// -----------------------------------------------------------------------------
Expand All @@ -1722,7 +1717,7 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsRegular(ctx, point);
var colors = this._getColorsRegular(point);

this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
Expand All @@ -1734,13 +1729,9 @@ Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsColor(point);

// calculate the color based on the value
var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);

this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};


Expand All @@ -1753,34 +1744,19 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);

// determine color
var color = this.dataColor.fill;
var borderColor = this.dataColor.stroke;
var colors = this._getColorsSize();

this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};


/**
* Draw single datapoint for graph style 'dot'.
*/
Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
var size = this._dotSize();
var colors = this._getColorsRegular(point);

var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}

var colors = this._getColorsRegular(ctx, point);

this._drawCircle(ctx, point, radius, colors.fill, colors.border);
this._drawCircle(ctx, point, colors.fill, colors.border);
};


Expand All @@ -1797,6 +1773,29 @@ Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
};


/**
* Draw single datapoint for graph style 'dot-color'.
*/
Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
var colors = this._getColorsColor(point);

this._drawCircle(ctx, point, colors.fill, colors.border);
};


/**
* Draw single datapoint for graph style 'dot-size'.
*/
Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
var dotSize = this._dotSize();
var fraction = (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
var size = dotSize/2 + 2*dotSize * fraction;
var colors = this._getColorsSize();

this._drawCircle(ctx, point, colors.fill, colors.border, size);
};


/**
* Draw all datapoints for currently selected graph style.
*
Expand Down Expand Up @@ -1843,8 +1842,6 @@ Graph3d.prototype._redrawDataLine = function() {
point = this.dataPoints[0];

ctx.lineWidth = this._getStrokeWidth(point);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = this.dataColor.stroke;

for (i = 0; i < this.dataPoints.length; i++) {
Expand Down

0 comments on commit a9be8e7

Please sign in to comment.