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