Use static width for graph columns
This commit is contained in:
parent
a2aeaf5a50
commit
e2b77d366b
@ -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);
|
||||||
|
|
||||||
|
@ -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,6 +395,8 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
|
|||||||
scale = this.getGlobalScale(hintData);
|
scale = this.getGlobalScale(hintData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var graphBounds = this.getGraphBounds(this.getCanvasBounds());
|
||||||
|
|
||||||
var index = 0;
|
var index = 0;
|
||||||
var that = this;
|
var that = this;
|
||||||
_.each(columns, function(columnValue, columnName) {
|
_.each(columns, function(columnValue, columnName) {
|
||||||
@ -405,7 +404,7 @@ function Grapher(canvas, range, useLocalScale, useRelativeScale) {
|
|||||||
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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user