2015-06-12 22:00:48 +02:00
|
|
|
(function() {
|
|
|
|
|
2015-06-13 16:15:21 +02:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
var root = this,
|
|
|
|
Chart = root.Chart,
|
|
|
|
helpers = Chart.helpers;
|
|
|
|
|
|
|
|
Chart.defaults.global.tooltips = {
|
|
|
|
enabled: true,
|
|
|
|
custom: null,
|
2015-10-07 04:40:25 +02:00
|
|
|
mode: 'single',
|
2015-06-13 16:15:21 +02:00
|
|
|
backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
|
titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
|
|
|
titleFontSize: 12,
|
|
|
|
titleFontStyle: "bold",
|
2015-10-12 22:51:00 +02:00
|
|
|
titleSpacing: 2,
|
|
|
|
titleMarginBottom: 6,
|
2015-10-07 04:40:25 +02:00
|
|
|
titleColor: "#fff",
|
|
|
|
titleAlign: "left",
|
|
|
|
bodyFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
|
|
|
bodyFontSize: 12,
|
|
|
|
bodyFontStyle: "normal",
|
2015-10-12 22:51:00 +02:00
|
|
|
bodySpacing: 2,
|
2015-10-07 04:40:25 +02:00
|
|
|
bodyColor: "#fff",
|
|
|
|
bodyAlign: "left",
|
|
|
|
footerFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
|
|
|
footerFontSize: 12,
|
|
|
|
footerFontStyle: "bold",
|
2015-10-12 22:51:00 +02:00
|
|
|
footerSpacing: 2,
|
|
|
|
footerMarginTop: 6,
|
2015-10-07 04:40:25 +02:00
|
|
|
footerColor: "#fff",
|
|
|
|
footerAlign: "left",
|
2015-06-13 16:15:21 +02:00
|
|
|
yPadding: 6,
|
|
|
|
xPadding: 6,
|
2015-10-07 04:40:25 +02:00
|
|
|
caretSize: 5,
|
2015-06-13 16:15:21 +02:00
|
|
|
cornerRadius: 6,
|
|
|
|
xOffset: 10,
|
|
|
|
multiKeyBackground: '#fff',
|
2015-10-07 04:40:25 +02:00
|
|
|
callbacks: {
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItems, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
beforeTitle: helpers.noop,
|
2015-10-31 01:12:05 +01:00
|
|
|
title: function(tooltipItems, data) {
|
|
|
|
// Pick first xLabel for now
|
2015-10-31 01:35:36 +01:00
|
|
|
var title = '';
|
|
|
|
|
|
|
|
if (tooltipItems.length > 0) {
|
|
|
|
if (tooltipItems[0].xLabel) {
|
|
|
|
title = tooltipItems[0].xLabel;
|
|
|
|
} else if (data.labels.length > 0 && tooltipItems[0].index < data.labels.length) {
|
|
|
|
title = data.labels[tooltipItems[0].index];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return title;
|
2015-10-07 04:40:25 +02:00
|
|
|
},
|
|
|
|
afterTitle: helpers.noop,
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItems, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
beforeBody: helpers.noop,
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
beforeLabel: helpers.noop,
|
2015-10-31 01:12:05 +01:00
|
|
|
label: function(tooltipItem, data) {
|
|
|
|
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
|
|
|
|
return datasetLabel + ': ' + tooltipItem.yLabel;
|
2015-10-07 04:40:25 +02:00
|
|
|
},
|
|
|
|
afterLabel: helpers.noop,
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItems, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
afterBody: helpers.noop,
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItems, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
beforeFooter: helpers.noop,
|
|
|
|
footer: helpers.noop,
|
|
|
|
afterFooter: helpers.noop,
|
|
|
|
},
|
2015-06-13 16:15:21 +02:00
|
|
|
};
|
|
|
|
|
2015-10-18 22:31:18 +02:00
|
|
|
// Helper to push or concat based on if the 2nd parameter is an array or not
|
|
|
|
function pushOrConcat(base, toPush) {
|
|
|
|
if (toPush) {
|
|
|
|
if (helpers.isArray(toPush)) {
|
|
|
|
base = base.concat(toPush);
|
|
|
|
} else {
|
|
|
|
base.push(toPush);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return base;
|
|
|
|
}
|
|
|
|
|
2015-06-13 16:15:21 +02:00
|
|
|
Chart.Tooltip = Chart.Element.extend({
|
|
|
|
initialize: function() {
|
|
|
|
var options = this._options;
|
|
|
|
helpers.extend(this, {
|
|
|
|
_model: {
|
|
|
|
// Positioning
|
|
|
|
xPadding: options.tooltips.xPadding,
|
|
|
|
yPadding: options.tooltips.yPadding,
|
|
|
|
xOffset: options.tooltips.xOffset,
|
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
// Body
|
|
|
|
bodyColor: options.tooltips.bodyColor,
|
|
|
|
_bodyFontFamily: options.tooltips.bodyFontFamily,
|
|
|
|
_bodyFontStyle: options.tooltips.bodyFontStyle,
|
2015-10-31 02:04:45 +01:00
|
|
|
_bodyAlign: options.tooltips.bodyAlign,
|
2015-10-07 04:40:25 +02:00
|
|
|
bodyFontSize: options.tooltips.bodyFontSize,
|
2015-10-12 22:51:00 +02:00
|
|
|
bodySpacing: options.tooltips.bodySpacing,
|
2015-06-13 16:15:21 +02:00
|
|
|
|
|
|
|
// Title
|
2015-10-07 04:40:25 +02:00
|
|
|
titleColor: options.tooltips.titleColor,
|
2015-06-13 16:15:21 +02:00
|
|
|
_titleFontFamily: options.tooltips.titleFontFamily,
|
|
|
|
_titleFontStyle: options.tooltips.titleFontStyle,
|
|
|
|
titleFontSize: options.tooltips.titleFontSize,
|
2015-10-07 04:40:25 +02:00
|
|
|
_titleAlign: options.tooltips.titleAlign,
|
2015-10-12 22:51:00 +02:00
|
|
|
titleSpacing: options.tooltips.titleSpacing,
|
|
|
|
titleMarginBottom: options.tooltips.titleMarginBottom,
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
// Footer
|
|
|
|
footerColor: options.tooltips.footerColor,
|
|
|
|
_footerFontFamily: options.tooltips.footerFontFamily,
|
|
|
|
_footerFontStyle: options.tooltips.footerFontStyle,
|
|
|
|
footerFontSize: options.tooltips.footerFontSize,
|
|
|
|
_footerAlign: options.tooltips.footerAlign,
|
2015-10-12 22:51:00 +02:00
|
|
|
footerSpacing: options.tooltips.footerSpacing,
|
|
|
|
footerMarginTop: options.tooltips.footerMarginTop,
|
2015-06-13 16:15:21 +02:00
|
|
|
|
|
|
|
// Appearance
|
2015-10-07 04:40:25 +02:00
|
|
|
caretSize: options.tooltips.caretSize,
|
2015-06-13 16:15:21 +02:00
|
|
|
cornerRadius: options.tooltips.cornerRadius,
|
|
|
|
backgroundColor: options.tooltips.backgroundColor,
|
|
|
|
opacity: 0,
|
|
|
|
legendColorBackground: options.tooltips.multiKeyBackground,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-10-31 23:07:57 +01:00
|
|
|
// Get the title
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
getTitle: function() {
|
|
|
|
var beforeTitle = this._options.tooltips.callbacks.beforeTitle.apply(this, arguments),
|
|
|
|
title = this._options.tooltips.callbacks.title.apply(this, arguments),
|
|
|
|
afterTitle = this._options.tooltips.callbacks.afterTitle.apply(this, arguments);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
var lines = [];
|
2015-10-18 22:31:18 +02:00
|
|
|
lines = pushOrConcat(lines, beforeTitle);
|
|
|
|
lines = pushOrConcat(lines, title);
|
|
|
|
lines = pushOrConcat(lines, afterTitle);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
return lines;
|
|
|
|
},
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
|
|
|
getBeforeBody: function() {
|
|
|
|
var lines = this._options.tooltips.callbacks.beforeBody.call(this, arguments);
|
2015-10-17 23:53:33 +02:00
|
|
|
return helpers.isArray(lines) ? lines : [lines];
|
|
|
|
},
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
|
|
|
getBody: function(tooltipItems, data) {
|
2015-10-07 04:40:25 +02:00
|
|
|
var lines = [];
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
helpers.each(tooltipItems, function(bodyItem) {
|
|
|
|
var beforeLabel = this._options.tooltips.callbacks.beforeLabel.call(this, bodyItem, data) || '';
|
|
|
|
var bodyLabel = this._options.tooltips.callbacks.label.call(this, bodyItem, data) || '';
|
|
|
|
var afterLabel = this._options.tooltips.callbacks.afterLabel.call(this, bodyItem, data) || '';
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
lines.push(beforeLabel + bodyLabel + afterLabel);
|
2015-10-29 03:52:43 +01:00
|
|
|
}, this);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
return lines;
|
|
|
|
},
|
|
|
|
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
|
|
|
getAfterBody: function() {
|
|
|
|
var lines = this._options.tooltips.callbacks.afterBody.call(this, arguments);
|
2015-10-17 23:53:33 +02:00
|
|
|
return helpers.isArray(lines) ? lines : [lines];
|
|
|
|
},
|
|
|
|
|
2015-10-18 22:31:18 +02:00
|
|
|
// Get the footer and beforeFooter and afterFooter lines
|
2015-10-31 01:12:05 +01:00
|
|
|
// Args are: (tooltipItem, data)
|
2015-10-07 04:40:25 +02:00
|
|
|
getFooter: function() {
|
2015-10-18 22:31:18 +02:00
|
|
|
var beforeFooter = this._options.tooltips.callbacks.beforeFooter.apply(this, arguments);
|
|
|
|
var footer = this._options.tooltips.callbacks.footer.apply(this, arguments);
|
|
|
|
var afterFooter = this._options.tooltips.callbacks.afterFooter.apply(this, arguments);
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
var lines = [];
|
2015-10-18 22:31:18 +02:00
|
|
|
lines = pushOrConcat(lines, beforeFooter);
|
|
|
|
lines = pushOrConcat(lines, footer);
|
|
|
|
lines = pushOrConcat(lines, afterFooter);
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
return lines;
|
|
|
|
},
|
|
|
|
|
2015-11-02 06:43:44 +01:00
|
|
|
getAveragePosition: function(elements){
|
|
|
|
|
|
|
|
if(!elements.length){
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
var xPositions = [];
|
|
|
|
var yPositions = [];
|
|
|
|
|
|
|
|
helpers.each(elements, function(el){
|
2015-11-10 00:53:08 +01:00
|
|
|
if(el) {
|
|
|
|
var pos = el.tooltipPosition();
|
|
|
|
xPositions.push(pos.x);
|
|
|
|
yPositions.push(pos.y);
|
|
|
|
}
|
2015-11-02 06:43:44 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
var x = 0, y = 0;
|
|
|
|
for (var i = 0; i < xPositions.length; i++) {
|
|
|
|
x += xPositions[i];
|
|
|
|
y += yPositions[i];
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
x: Math.round(x / xPositions.length),
|
|
|
|
y: Math.round(y / xPositions.length)
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2015-11-01 21:56:36 +01:00
|
|
|
update: function(changed) {
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
var ctx = this._chart.ctx;
|
|
|
|
|
2015-11-01 01:14:56 +01:00
|
|
|
if(this._active.length){
|
|
|
|
this._model.opacity = 1;
|
|
|
|
|
|
|
|
var element = this._active[0],
|
|
|
|
labelColors = [],
|
|
|
|
tooltipPosition;
|
2015-10-29 03:52:43 +01:00
|
|
|
|
2015-11-01 01:14:56 +01:00
|
|
|
var tooltipItems = [];
|
|
|
|
|
|
|
|
if (this._options.tooltips.mode == 'single') {
|
|
|
|
var yScale = element._yScale || element._scale; // handle radar || polarArea charts
|
2015-10-31 01:12:05 +01:00
|
|
|
tooltipItems.push({
|
2015-11-01 01:14:56 +01:00
|
|
|
xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '',
|
|
|
|
yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '',
|
2015-10-29 03:52:43 +01:00
|
|
|
index: element._index,
|
2015-11-01 01:14:56 +01:00
|
|
|
datasetIndex: element._datasetIndex,
|
2015-10-29 03:52:43 +01:00
|
|
|
});
|
2015-11-02 06:43:44 +01:00
|
|
|
tooltipPosition = this.getAveragePosition(this._active);
|
2015-11-01 01:14:56 +01:00
|
|
|
} else {
|
|
|
|
helpers.each(this._data.datasets, function(dataset, datasetIndex) {
|
|
|
|
if (!helpers.isDatasetVisible(dataset)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var currentElement = dataset.metaData[element._index];
|
2015-11-10 00:53:08 +01:00
|
|
|
if (currentElement) {
|
|
|
|
var yScale = element._yScale || element._scale; // handle radar || polarArea charts
|
|
|
|
|
|
|
|
tooltipItems.push({
|
|
|
|
xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
|
|
|
|
yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
|
|
|
|
index: element._index,
|
|
|
|
datasetIndex: datasetIndex,
|
|
|
|
});
|
|
|
|
}
|
2015-10-12 22:51:00 +02:00
|
|
|
});
|
|
|
|
|
2015-11-01 01:14:56 +01:00
|
|
|
helpers.each(this._active, function(active, i) {
|
2015-11-10 00:53:08 +01:00
|
|
|
if (active) {
|
|
|
|
labelColors.push({
|
|
|
|
borderColor: active._view.borderColor,
|
|
|
|
backgroundColor: active._view.backgroundColor
|
|
|
|
});
|
|
|
|
}
|
2015-11-01 01:14:56 +01:00
|
|
|
}, this);
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-11-02 06:43:44 +01:00
|
|
|
tooltipPosition = this.getAveragePosition(this._active);
|
2015-11-01 01:14:56 +01:00
|
|
|
tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
|
|
|
|
}
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-11-01 01:14:56 +01:00
|
|
|
// Build the Text Lines
|
|
|
|
helpers.extend(this._model, {
|
|
|
|
title: this.getTitle(tooltipItems, this._data),
|
|
|
|
beforeBody: this.getBeforeBody(tooltipItems, this._data),
|
|
|
|
body: this.getBody(tooltipItems, this._data),
|
|
|
|
afterBody: this.getAfterBody(tooltipItems, this._data),
|
|
|
|
footer: this.getFooter(tooltipItems, this._data),
|
|
|
|
});
|
|
|
|
|
|
|
|
helpers.extend(this._model, {
|
|
|
|
x: Math.round(tooltipPosition.x),
|
|
|
|
y: Math.round(tooltipPosition.y),
|
|
|
|
caretPadding: tooltipPosition.padding,
|
|
|
|
labelColors: labelColors,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
else{
|
|
|
|
this._model.opacity = 0;
|
|
|
|
}
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-11-01 21:56:36 +01:00
|
|
|
if (changed && this._options.tooltips.custom) {
|
2015-10-31 23:07:57 +01:00
|
|
|
this._options.tooltips.custom.call(this, this._model);
|
|
|
|
}
|
|
|
|
|
2015-06-13 16:15:21 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
draw: function() {
|
|
|
|
|
2015-11-01 21:56:36 +01:00
|
|
|
|
2015-06-13 16:15:21 +02:00
|
|
|
var ctx = this._chart.ctx;
|
|
|
|
var vm = this._view;
|
|
|
|
|
2015-10-17 23:53:33 +02:00
|
|
|
if (this._view.opacity === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
// Get Dimensions
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
vm.position = "top";
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
var caretPadding = vm.caretPadding || 2;
|
2015-10-17 23:53:33 +02:00
|
|
|
|
|
|
|
var combinedBodyLength = vm.body.length + vm.beforeBody.length + vm.afterBody.length;
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
// Height
|
2015-10-12 22:51:00 +02:00
|
|
|
var tooltipHeight = vm.yPadding * 2; // Tooltip Padding
|
|
|
|
|
|
|
|
tooltipHeight += vm.title.length * vm.titleFontSize; // Title Lines
|
|
|
|
tooltipHeight += (vm.title.length - 1) * vm.titleSpacing; // Title Line Spacing
|
|
|
|
tooltipHeight += vm.title.length ? vm.titleMarginBottom : 0; // Title's bottom Margin
|
|
|
|
|
|
|
|
tooltipHeight += combinedBodyLength * vm.bodyFontSize; // Body Lines
|
|
|
|
tooltipHeight += (combinedBodyLength - 1) * vm.bodySpacing; // Body Line Spacing
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
tooltipHeight += vm.footer.length ? vm.footerMarginTop : 0; // Footer Margin
|
|
|
|
tooltipHeight += vm.footer.length * (vm.footerFontSize); // Footer Lines
|
|
|
|
tooltipHeight += (vm.footer.length - 1) * vm.footerSpacing; // Footer Line Spacing
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
// Width
|
|
|
|
var tooltipWidth = 0;
|
|
|
|
helpers.each(vm.title, function(line, i) {
|
|
|
|
ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
|
|
|
|
tooltipWidth = Math.max(tooltipWidth, ctx.measureText(line).width);
|
|
|
|
});
|
|
|
|
helpers.each(vm.body, function(line, i) {
|
|
|
|
ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
|
2015-10-12 22:51:00 +02:00
|
|
|
tooltipWidth = Math.max(tooltipWidth, ctx.measureText(line).width + (this._options.tooltips.mode != 'single' ? (vm.bodyFontSize + 2) : 0));
|
|
|
|
}, this);
|
2015-10-07 04:40:25 +02:00
|
|
|
helpers.each(vm.footer, function(line, i) {
|
|
|
|
ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
|
|
|
|
tooltipWidth = Math.max(tooltipWidth, ctx.measureText(line).width);
|
|
|
|
});
|
|
|
|
tooltipWidth += 2 * vm.xPadding;
|
|
|
|
var tooltipTotalWidth = tooltipWidth + vm.caretSize + caretPadding;
|
2015-06-13 16:15:21 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// Smart Tooltip placement to stay on the canvas
|
2015-10-07 04:40:25 +02:00
|
|
|
// Top, center, or bottom
|
|
|
|
vm.yAlign = "center";
|
|
|
|
if (vm.y - (tooltipHeight / 2) < 0) {
|
|
|
|
vm.yAlign = "top";
|
|
|
|
} else if (vm.y + (tooltipHeight / 2) > this._chart.height) {
|
|
|
|
vm.yAlign = "bottom";
|
|
|
|
}
|
2015-06-13 16:15:21 +02:00
|
|
|
|
|
|
|
|
2015-10-07 04:40:25 +02:00
|
|
|
// Left or Right
|
|
|
|
vm.xAlign = "right";
|
|
|
|
if (vm.x + tooltipTotalWidth > this._chart.width) {
|
|
|
|
vm.xAlign = "left";
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Background Position
|
|
|
|
var tooltipX = vm.x,
|
|
|
|
tooltipY = vm.y;
|
|
|
|
|
|
|
|
if (vm.yAlign == 'top') {
|
|
|
|
tooltipY = vm.y - vm.caretSize - vm.cornerRadius;
|
|
|
|
} else if (vm.yAlign == 'bottom') {
|
|
|
|
tooltipY = vm.y - tooltipHeight + vm.caretSize + vm.cornerRadius;
|
|
|
|
} else {
|
|
|
|
tooltipY = vm.y - (tooltipHeight / 2);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (vm.xAlign == 'left') {
|
|
|
|
tooltipX = vm.x - tooltipTotalWidth;
|
|
|
|
} else if (vm.xAlign == 'right') {
|
|
|
|
tooltipX = vm.x + caretPadding + vm.caretSize;
|
|
|
|
} else {
|
|
|
|
tooltipX = vm.x + (tooltipTotalWidth / 2);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Draw Background
|
|
|
|
|
|
|
|
if (this._options.tooltips.enabled) {
|
|
|
|
ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString();
|
|
|
|
helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipHeight, vm.cornerRadius);
|
|
|
|
ctx.fill();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Draw Caret
|
|
|
|
if (this._options.tooltips.enabled) {
|
|
|
|
ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString();
|
|
|
|
|
|
|
|
if (vm.xAlign == 'left') {
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(vm.x - caretPadding, vm.y);
|
|
|
|
ctx.lineTo(vm.x - caretPadding - vm.caretSize, vm.y - vm.caretSize);
|
|
|
|
ctx.lineTo(vm.x - caretPadding - vm.caretSize, vm.y + vm.caretSize);
|
|
|
|
ctx.closePath();
|
|
|
|
ctx.fill();
|
|
|
|
} else {
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(vm.x + caretPadding, vm.y);
|
|
|
|
ctx.lineTo(vm.x + caretPadding + vm.caretSize, vm.y - vm.caretSize);
|
|
|
|
ctx.lineTo(vm.x + caretPadding + vm.caretSize, vm.y + vm.caretSize);
|
|
|
|
ctx.closePath();
|
|
|
|
ctx.fill();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Draw Title, Body, and Footer
|
|
|
|
|
|
|
|
if (this._options.tooltips.enabled) {
|
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
var yBase = tooltipY + vm.yPadding;
|
|
|
|
var xBase = tooltipX + vm.xPadding;
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
// Titles
|
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
if (vm.title.length) {
|
|
|
|
ctx.textAlign = vm._titleAlign;
|
|
|
|
ctx.textBaseline = "top";
|
|
|
|
ctx.fillStyle = helpers.color(vm.titleColor).alpha(vm.opacity).rgbString();
|
|
|
|
ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
|
|
|
|
|
|
|
|
helpers.each(vm.title, function(title, i) {
|
|
|
|
ctx.fillText(title, xBase, yBase);
|
|
|
|
yBase += vm.titleFontSize + vm.titleSpacing; // Line Height and spacing
|
|
|
|
if (i + 1 == vm.title.length) {
|
|
|
|
yBase += vm.titleMarginBottom - vm.titleSpacing; // If Last, add margin, remove spacing
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
}
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
|
|
|
|
// Body
|
|
|
|
ctx.textAlign = vm._bodyAlign;
|
|
|
|
ctx.textBaseline = "top";
|
|
|
|
ctx.fillStyle = helpers.color(vm.bodyColor).alpha(vm.opacity).rgbString();
|
|
|
|
ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// Before Body
|
2015-10-17 23:53:33 +02:00
|
|
|
helpers.each(vm.beforeBody, function(beforeBody, i) {
|
2015-10-12 22:51:00 +02:00
|
|
|
ctx.fillText(vm.beforeBody, xBase, yBase);
|
|
|
|
yBase += vm.bodyFontSize + vm.bodySpacing;
|
2015-10-17 23:53:33 +02:00
|
|
|
});
|
2015-10-07 04:40:25 +02:00
|
|
|
|
|
|
|
helpers.each(vm.body, function(body, i) {
|
|
|
|
|
2015-10-23 20:40:56 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// Draw Legend-like boxes if needed
|
|
|
|
if (this._options.tooltips.mode != 'single') {
|
2015-11-13 14:20:39 +01:00
|
|
|
// Fill a white rect so that colours merge nicely if the opacity is < 1
|
|
|
|
ctx.fillStyle = helpers.color('#FFFFFF').alpha(vm.opacity).rgbaString();
|
2015-10-12 22:51:00 +02:00
|
|
|
ctx.fillRect(xBase, yBase, vm.bodyFontSize, vm.bodyFontSize);
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-11-13 14:20:39 +01:00
|
|
|
// Border
|
|
|
|
ctx.strokeStyle = helpers.color(vm.labelColors[i].borderColor).alpha(vm.opacity).rgbaString();
|
|
|
|
ctx.strokeRect(xBase, yBase, vm.bodyFontSize, vm.bodyFontSize);
|
|
|
|
|
|
|
|
// Inner square
|
|
|
|
ctx.fillStyle = helpers.color(vm.labelColors[i].backgroundColor).alpha(vm.opacity).rgbaString();
|
2015-10-12 22:51:00 +02:00
|
|
|
ctx.fillRect(xBase + 1, yBase + 1, vm.bodyFontSize - 2, vm.bodyFontSize - 2);
|
2015-10-07 04:40:25 +02:00
|
|
|
|
2015-11-13 14:20:39 +01:00
|
|
|
ctx.fillStyle = helpers.color(vm.bodyColor).alpha(vm.opacity).rgbaString(); // Return fill style for text
|
2015-10-12 22:51:00 +02:00
|
|
|
}
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// Body Line
|
|
|
|
ctx.fillText(body, xBase + (this._options.tooltips.mode != 'single' ? (vm.bodyFontSize + 2) : 0), yBase);
|
2015-06-22 21:10:49 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
yBase += vm.bodyFontSize + vm.bodySpacing;
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
}, this);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// After Body
|
2015-10-17 23:53:33 +02:00
|
|
|
helpers.each(vm.afterBody, function(afterBody, i) {
|
2015-10-12 22:51:00 +02:00
|
|
|
ctx.fillText(vm.afterBody, xBase, yBase);
|
|
|
|
yBase += vm.bodyFontSize;
|
2015-10-17 23:53:33 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
yBase -= vm.bodySpacing; // Remove last body spacing
|
2015-06-13 16:15:21 +02:00
|
|
|
|
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
// Footer
|
|
|
|
if (vm.footer.length) {
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
yBase += vm.footerMarginTop;
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
ctx.textAlign = vm._footerAlign;
|
|
|
|
ctx.textBaseline = "top";
|
|
|
|
ctx.fillStyle = helpers.color(vm.footerColor).alpha(vm.opacity).rgbString();
|
|
|
|
ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
|
2015-06-13 16:15:21 +02:00
|
|
|
|
2015-10-12 22:51:00 +02:00
|
|
|
helpers.each(vm.footer, function(footer, i) {
|
|
|
|
ctx.fillText(footer, xBase, yBase);
|
|
|
|
yBase += vm.footerFontSize + vm.footerSpacing;
|
2015-06-13 16:15:21 +02:00
|
|
|
}, this);
|
2015-10-12 22:51:00 +02:00
|
|
|
}
|
|
|
|
|
2015-06-13 16:15:21 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
2015-06-12 22:00:48 +02:00
|
|
|
|
|
|
|
}).call(this);
|