this.once("ready", () => {
// Create all gutters and tooltips incase the showing of min/max/avg
// are changed later
this._gutter = this._createGutter();
this._maxGutterLine = this._createGutterLine("maximum");
this._maxTooltip = this._createTooltip("maximum", "start", L10N.getStr("graphs.label.maximum"), metric);
this._minGutterLine = this._createGutterLine("minimum");
this._minTooltip = this._createTooltip("minimum", "start", L10N.getStr("graphs.label.minimum"), metric);
this._avgGutterLine = this._createGutterLine("average");
this._avgTooltip = this._createTooltip("average", "end", L10N.getStr("graphs.label.average"), metric);
});
_drawOverlays: function(ctx, minValue, maxValue, avgValue, dataScaleY) {
let width = this._width;
let height = this._height;
let totalTicks = this._data.length;
// Draw the maximum value horizontal line.
if (this._showMax) {
ctx.strokeStyle = this.maximumLineColor;
ctx.lineWidth = GRAPH_HELPER_LINES_WIDTH;
ctx.setLineDash(GRAPH_HELPER_LINES_DASH);
ctx.beginPath();
let maximumY = height - maxValue * dataScaleY;
ctx.moveTo(0, maximumY);
ctx.lineTo(width, maximumY);
ctx.stroke();
}
// Draw the average value horizontal line.
if (this._showAvg) {
ctx.strokeStyle = this.averageLineColor;
ctx.lineWidth = GRAPH_HELPER_LINES_WIDTH;
ctx.setLineDash(GRAPH_HELPER_LINES_DASH);
ctx.beginPath();
let averageY = height - avgValue * dataScaleY;
ctx.moveTo(0, averageY);
ctx.lineTo(width, averageY);
ctx.stroke();
}
// Draw the minimum value horizontal line.
if (this._showMin) {
ctx.strokeStyle = this.minimumLineColor;
ctx.lineWidth = GRAPH_HELPER_LINES_WIDTH;
ctx.setLineDash(GRAPH_HELPER_LINES_DASH);
ctx.beginPath();
let minimumY = height - minValue * dataScaleY;
ctx.moveTo(0, minimumY);
ctx.lineTo(width, minimumY);
ctx.stroke();
}
// Update the tooltips text and gutter lines.
this._maxTooltip.querySelector("[text=value]").textContent =
L10N.numberWithDecimals(maxValue, 2);
this._avgTooltip.querySelector("[text=value]").textContent =
L10N.numberWithDecimals(avgValue, 2);
this._minTooltip.querySelector("[text=value]").textContent =
L10N.numberWithDecimals(minValue, 2);
let bottom = height / this._pixelRatio;
let maxPosY = CanvasGraphUtils.map(maxValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
let avgPosY = CanvasGraphUtils.map(avgValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
let minPosY = CanvasGraphUtils.map(minValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
let safeTop = GRAPH_TOOLTIP_SAFE_BOUNDS;
let safeBottom = bottom - GRAPH_TOOLTIP_SAFE_BOUNDS;
let maxTooltipTop = (this.withFixedTooltipPositions
? safeTop : CanvasGraphUtils.clamp(maxPosY, safeTop, safeBottom));
let avgTooltipTop = (this.withFixedTooltipPositions
? safeTop : CanvasGraphUtils.clamp(avgPosY, safeTop, safeBottom));
let minTooltipTop = (this.withFixedTooltipPositions
? safeBottom : CanvasGraphUtils.clamp(minPosY, safeTop, safeBottom));
this._maxTooltip.style.top = maxTooltipTop + "px";
this._avgTooltip.style.top = avgTooltipTop + "px";
this._minTooltip.style.top = minTooltipTop + "px";
this._maxGutterLine.style.top = maxPosY + "px";
this._avgGutterLine.style.top = avgPosY + "px";
this._minGutterLine.style.top = minPosY + "px";
this._maxTooltip.setAttribute("with-arrows", this.withTooltipArrows);
this._avgTooltip.setAttribute("with-arrows", this.withTooltipArrows);
this._minTooltip.setAttribute("with-arrows", this.withTooltipArrows);
let distanceMinMax = Math.abs(maxTooltipTop - minTooltipTop);
this._maxTooltip.hidden = this._showMax === false || !totalTicks || distanceMinMax < GRAPH_MIN_MAX_TOOLTIP_DISTANCE;
this._avgTooltip.hidden = this._showAvg === false || !totalTicks;
this._minTooltip.hidden = this._showMin === false || !totalTicks;
this._gutter.hidden = (this._showMin === false && this._showAvg === false && this._showMax === false) || !totalTicks;
this._maxGutterLine.hidden = this._showMax === false;
this._avgGutterLine.hidden = this._showAvg === false;
this._minGutterLine.hidden = this._showMin === false;
},