alex/restaurant-search
1
Fork 0
Code Releases Activity

Changing bar graph color based on value

Browse Source
This commit is contained in:
Alex Yatskov 2014-09-25 16:47:56 +09:00
parent 6a8f7bfa6d
commit d10b27b9db
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/grapher.js
View File

@ -75,7 +75,7 @@ function Column(canvas, name, params, scale, range, bounds) {
top: this.fillBounds.top, top: this.fillBounds.top,
width: this.fillBounds.width, width: this.fillBounds.width,
height: this.fillBounds.height, height: this.fillBounds.height,
fill: this.fillColor fill: this.getFillColor()
}); });
this.updateRect('handleRect', { this.updateRect('handleRect', {
@ -83,7 +83,7 @@ function Column(canvas, name, params, scale, range, bounds) {
top: this.handleBounds.top, top: this.handleBounds.top,
width: this.handleBounds.width, width: this.handleBounds.width,
height: this.handleBounds.height, height: this.handleBounds.height,
fill: this.handleColor fill: this.getHandleColor()
}); });
if (final && goog.math.Range.containsPoint(this.range, 0.0)) { if (final && goog.math.Range.containsPoint(this.range, 0.0)) {
@ -133,14 +133,6 @@ function Column(canvas, name, params, scale, range, bounds) {
} }
} }
this.updateColor = function(color) {
var fillColorRgb = goog.color.hexToRgb(goog.color.parse(color).hex);
var handleColorRgb = goog.color.darken(fillColorRgb, this.handleDarken);
this.fillColor = goog.color.rgbToHex.apply(this, fillColorRgb);
this.handleColor = goog.color.rgbToHex.apply(this, handleColorRgb);
}
this.decimateHints = function(steps, scale) { this.decimateHints = function(steps, scale) {
var groups = this.groupHints(steps); var groups = this.groupHints(steps);
@ -245,6 +237,14 @@ function Column(canvas, name, params, scale, range, bounds) {
return handleBounds; return handleBounds;
} }
this.getFillColor = function() {
return this.value >= 0.0 ? this.fillColorPos : this.fillColorNeg;
}
this.getHandleColor = function() {
return this.value >= 0.0 ? this.handleColorPos : this.handleColorNeg;
}
this.mouseDown = function(position) { this.mouseDown = function(position) {
if (this.isGrabbing(position)) { if (this.isGrabbing(position)) {
this.stateTransition(this.State.DRAG, position); this.stateTransition(this.State.DRAG, position);
@ -351,15 +351,19 @@ function Column(canvas, name, params, scale, range, bounds) {
DRAG: 2 DRAG: 2
}; };
this.handleSize = 10; this.handleSize = 10;
this.handleDarken = 0.25; this.handleDarken = 0.25;
this.hintSize = 10; this.hintSize = 10;
this.labelFontSize = 15; this.labelFontSize = 15;
this.labelSize = 20; this.labelSize = 20;
this.tickLength = 5; this.tickLength = 5;
this.emptyColor = '#eeeeec'; this.emptyColor = '#eeeeec';
this.strokeColor = '#d3d7cf'; this.strokeColor = '#d3d7cf';
this.tickColor = '#888a85'; this.tickColor = '#888a85';
this.fillColorPos = '#3465a4';
this.fillColorNeg = '#cc0000';
this.handleColorPos = '#204a87';
this.handleColorNeg = '#a40000';
this.canvas = canvas; this.canvas = canvas;
this.shapes = []; this.shapes = [];
@ -372,7 +376,6 @@ function Column(canvas, name, params, scale, range, bounds) {
this.bounds = bounds; this.bounds = bounds;
this.state = this.State.NORMAL; this.state = this.State.NORMAL;
this.updateColor(params.color);
this.updateShapes(true); this.updateShapes(true);
} }

1
server/search.js
View File

@ -251,7 +251,6 @@ function execQuery(query, callback) {
); );
graphColumns[keyword] = { graphColumns[keyword] = {
color: '#607080',
value: query.searchParams[keyword], value: query.searchParams[keyword],
hints: searchHints, hints: searchHints,
steps: query.hintSteps steps: query.hintSteps