alex/restaurant-search
1
Fork 0
Code Releases Activity

Use static width for graph columns

Browse Source
This commit is contained in:
Alex Yatskov 2014-09-16 11:17:33 +09:00
parent a2aeaf5a50
commit e2b77d366b
3 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/application.js
View File

@ -42,7 +42,7 @@
ctx.hintSteps = params.hintSteps; ctx.hintSteps = params.hintSteps;
ctx.maxResults = params.maxResults; ctx.maxResults = params.maxResults;
ctx.grapher = new Grapher('grapher', ctx.searchRange, true, true); ctx.grapher = new Grapher('grapher', ctx.searchRange, 150, true, true);
ctx.grapher.setColumns(results.columns); ctx.grapher.setColumns(results.columns);
ctx.grapher.setValueChangedListener(onAdjust); ctx.grapher.setValueChangedListener(onAdjust);

22
client/grapher.js
View File

@ -381,13 +381,10 @@ function Column(canvas, name, params, scale, range, bounds) {
// Grapher // Grapher
// //
function Grapher(canvas, range, useLocalScale, useRelativeScale) { function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
this.setColumns = function(columns) { this.setColumns = function(columns) {
this.clearColumns(); this.clearColumns();
var graphBounds = this.getGraphBounds(this.getCanvasBounds());
var columnCount = _.keys(columns).length;
var scale = 0; var scale = 0;
if (!useLocalScale) { if (!useLocalScale) {
var hintData = {}; var hintData = {};
@ -398,14 +395,16 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
scale = this.getGlobalScale(hintData); scale = this.getGlobalScale(hintData);
} }
var index = 0; var graphBounds = this.getGraphBounds(this.getCanvasBounds());
var that = this;
var index = 0;
var that = this;
_.each(columns, function(columnValue, columnName) { _.each(columns, function(columnValue, columnName) {
if (useLocalScale) { if (useLocalScale) {
scale = that.getLocalScale(columnValue.hints); scale = that.getLocalScale(columnValue.hints);
} }
var columnBounds = that.getColumnBounds(graphBounds, index, columnCount); var columnBounds = that.getColumnBounds(graphBounds, index);
that.columns.push(new Column(that.canvas, columnName, columnValue, scale, that.range, columnBounds)); that.columns.push(new Column(that.canvas, columnName, columnValue, scale, that.range, columnBounds));
that.indexMap[columnName] = index++; that.indexMap[columnName] = index++;
}); });
@ -517,13 +516,11 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
} }
this.getColumnBounds = function(bounds, index, count) { this.getColumnBounds = function(bounds, index, count) {
var secWidth = bounds.width / count; var width = this.columnWidth + this.padding * 2;
var columnWidth = secWidth - this.padding * 2;
return new goog.math.Rect( return new goog.math.Rect(
bounds.left + secWidth * index + this.padding, bounds.left + width * index + this.padding,
bounds.top, bounds.top,
columnWidth, this.columnWidth,
bounds.height bounds.height
); );
} }
@ -573,6 +570,7 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
this.useLocalScale = useLocalScale; this.useLocalScale = useLocalScale;
this.useRelativeScale = useRelativeScale; this.useRelativeScale = useRelativeScale;
this.columnWidth = columnWidth;
this.canvas = new fabric.StaticCanvas(canvas); this.canvas = new fabric.StaticCanvas(canvas);
this.range = new goog.math.Range(range.min, range.max); this.range = new goog.math.Range(range.min, range.max);
this.padding = 10; this.padding = 10;

2
client/index.html
View File

@ -58,7 +58,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><big>Semantic tweaks to <span id="query" class="text-primary"></span></big></div> <div class="panel-heading"><big>Semantic tweaks to <span id="query" class="text-primary"></span></big></div>
<div style="padding: 10px;" class="unselectable"> <div style="padding: 10px;" class="unselectable">
<canvas id="grapher" width="500" height="550"></canvas><br> <canvas id="grapher" width="800" height="550"></canvas><br>
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="useLocalScale" name="useLocalScale" checked="checked"> Use local scale <input type="checkbox" id="useLocalScale" name="useLocalScale" checked="checked"> Use local scale
</label> </label>