1

Use static width for graph columns

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

View File

@ -42,7 +42,7 @@
ctx.hintSteps = params.hintSteps;
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.setValueChangedListener(onAdjust);

View File

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

View File

@ -58,7 +58,7 @@
<div class="panel panel-default">
<div class="panel-heading"><big>Semantic tweaks to <span id="query" class="text-primary"></span></big></div>
<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">
<input type="checkbox" id="useLocalScale" name="useLocalScale" checked="checked"> Use local scale
</label>