Skip to content

Commit

Permalink
Moved space allocation for tooltip to _computeLayout()
Browse files Browse the repository at this point in the history 
This correctly triggers updates for the axis, and was the correct place
for the code anyway. This change means that tooltips now render correctly
on HorizontalBar Plots.
  • Loading branch information
Justin Lan committed Jul 15, 2014
1 parent 51f0c57 commit a696abc
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 28 deletions.
29 changes: 17 additions & 12 deletions plottable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5651,12 +5651,12 @@ var Plottable;
_this._bars.classed("hover", false);
_this.deselectAll();

var fullExtent = { min: 0, max: Infinity };
var fullExtent = { min: -Infinity, max: Infinity };
var selectX = (_this._isVertical) ? p.x : fullExtent;
var selectY = (_this._isVertical) ? fullExtent : p.y;
var bar = _this.selectBar(selectX, selectY, true);
if (bar != null) {
_this._drawTooltip(_this._getTooltipText(bar), 0, 0);
_this._drawTooltip(_this._getTooltipText(bar.data()[0]), 0, 0);
_this._bars.classed("hover", true);
}
});
Expand All @@ -5675,14 +5675,14 @@ var Plottable;
return this;
};

BarPlot.prototype._getTooltipText = function (bar) {
BarPlot.prototype._getTooltipText = function (datum) {
var textProjector = this._projectors["tooltip-text"];
if (textProjector == null) {
return "";
}

var tooltipTextFunction = Plottable.Util.Methods.applyAccessor(textProjector.accessor, this._dataSource);
return tooltipTextFunction(bar.data()[0], null);
return tooltipTextFunction(datum, null);
};

BarPlot.prototype._drawTooltip = function (text, rootX, rootY) {
Expand Down Expand Up @@ -5715,18 +5715,14 @@ var Plottable;
this._tooltip.style("visibility", "hidden");
};

BarPlot.prototype._paint = function () {
BarPlot.prototype._computeLayout = function (xOffset, yOffset, availableWidth, availableHeight) {
var _this = this;
_super.prototype._paint.call(this);

this._bars = this.renderArea.selectAll("rect").data(this._dataSource.data());
this._bars.enter().append("rect");
_super.prototype._computeLayout.call(this, xOffset, yOffset, availableWidth, availableHeight);

// adjust space for tooltip, if necessary
if (this._showTooltip()) {
var tooltipHeights = this._bars[0].map(function (barEl) {
var bar = d3.select(barEl);
_this._drawTooltip(_this._getTooltipText(bar), 0, 0);
var tooltipHeights = this._dataSource.data().map(function (datum) {
_this._drawTooltip(_this._getTooltipText(datum), 0, 0);
var bbox = Plottable.Util.DOM.getBBox(_this._tooltip);
return bbox.height;
});
Expand All @@ -5738,6 +5734,15 @@ var Plottable;
this.yScale.range(yRange);
}

return this;
};

BarPlot.prototype._paint = function () {
_super.prototype._paint.call(this);

this._bars = this.renderArea.selectAll("rect").data(this._dataSource.data());
this._bars.enter().append("rect");

var primaryScale = this._isVertical ? this.yScale : this.xScale;
var scaledBaseline = primaryScale.scale(this._baselineValue);
var positionAttr = this._isVertical ? "y" : "x";
Expand Down
2 changes: 1 addition & 1 deletion quicktests/html/overlappingTickLabels-quicktest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@

var yScale2 = new Plottable.Scale.Ordinal().rangeType("bands");
var yAxis2 = new Plottable.Axis.Category(yScale2, "left");
window.yAxis = yAxis2;
// window.yAxis = yAxis2;

var horizBarPlot = new Plottable.Plot.HorizontalBar(ds, xScale2, yScale2)
.project("x", "age", xScale2)
Expand Down
29 changes: 17 additions & 12 deletions src/components/plots/abstractBarPlot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@ export module Abstract {
this._bars.classed("hover", false);
this.deselectAll();

var fullExtent: IExtent = { min: 0, max:Infinity };
var fullExtent: IExtent = { min: -Infinity, max: Infinity };
var selectX: any = (this._isVertical) ? p.x : fullExtent;
var selectY: any = (this._isVertical) ? fullExtent : p.y;
var bar = this.selectBar(selectX, selectY, true);
if (bar != null) {
this._drawTooltip(this._getTooltipText(bar), 0, 0);
this._drawTooltip(this._getTooltipText(bar.data()[0]), 0, 0);
this._bars.classed("hover", true);
}
});
Expand All @@ -90,14 +90,14 @@ export module Abstract {
return this;
}

public _getTooltipText(bar: D3.Selection) {
public _getTooltipText(datum: any) {
var textProjector = this._projectors["tooltip-text"];
if (textProjector == null) {
return "";
}

var tooltipTextFunction = Util.Methods.applyAccessor(textProjector.accessor, this._dataSource);
return tooltipTextFunction(bar.data()[0], null);
return tooltipTextFunction(datum, null);
}

public _drawTooltip(text: string, rootX: number, rootY: number) {
Expand Down Expand Up @@ -133,17 +133,13 @@ export module Abstract {
this._tooltip.style("visibility", "hidden");
}

public _paint() {
super._paint();

this._bars = this.renderArea.selectAll("rect").data(this._dataSource.data());
this._bars.enter().append("rect");
public _computeLayout(xOffset?: number, yOffset?: number, availableWidth?: number, availableHeight?: number) {
super._computeLayout(xOffset, yOffset, availableWidth, availableHeight);

// adjust space for tooltip, if necessary
if (this._showTooltip()) {
var tooltipHeights: number[] = this._bars[0].map((barEl: any) => {
var bar = d3.select(barEl);
this._drawTooltip(this._getTooltipText(bar), 0, 0);
var tooltipHeights: number[] = this._dataSource.data().map((datum: any) => {
this._drawTooltip(this._getTooltipText(datum), 0, 0);
var bbox = Util.DOM.getBBox(this._tooltip);
return bbox.height;
});
Expand All @@ -155,6 +151,15 @@ export module Abstract {
this.yScale.range(yRange);
}

return this;
}

public _paint() {
super._paint();

this._bars = this.renderArea.selectAll("rect").data(this._dataSource.data());
this._bars.enter().append("rect");

var primaryScale = this._isVertical ? this.yScale : this.xScale;
var scaledBaseline = primaryScale.scale(this._baselineValue);
var positionAttr = this._isVertical ? "y" : "x";
Expand Down
6 changes: 3 additions & 3 deletions src/interactions/mouseInteraction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export module Interaction {
var p: Point = {
x: xy[0],
y: xy[1]
}
};
this._mouseover(p);
}
});
Expand All @@ -29,7 +29,7 @@ export module Interaction {
var p: Point = {
x: xy[0],
y: xy[1]
}
};
this._mousemove(p);
}
});
Expand All @@ -39,7 +39,7 @@ export module Interaction {
var p: Point = {
x: xy[0],
y: xy[1]
}
};
this._mouseout(p);
}
});
Expand Down

0 comments on commit a696abc

Please sign in to comment.