From: Evert Timberg Date: Sun, 31 May 2015 20:55:17 +0000 (-0400) Subject: Animations & tool tips show. The title is not correct yet. X-Git-Tag: v2.0-alpha~2^2~32 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=92776ce0ac035c24ea80320dc04040bbc82c28d3;p=thirdparty%2FChart.js.git Animations & tool tips show. The title is not correct yet. --- diff --git a/samples/line.html b/samples/line.html index 7f96c553a..7655abe7a 100644 --- a/samples/line.html +++ b/samples/line.html @@ -36,7 +36,7 @@ $.each(lineChartData.datasets, function(i, dataset) { dataset.borderColor = randomColor(0.4); - dataset.backgroundColor = randomColor(1); + dataset.backgroundColor = randomColor(0.5); dataset.pointBorderColor = randomColor(0.7); dataset.pointBackgroundColor = randomColor(0.5); dataset.pointBorderWidth = 1; diff --git a/src/Chart.Core.js b/src/Chart.Core.js index a3b41c901..3a5adf38a 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1131,7 +1131,7 @@ each(this._model, function(value, key) { - if (key[0] === '_' || !this.hasOwnProperty(key)) { + if (key[0] === '_' || !this._model.hasOwnProperty(key)) { // Only non-underscored properties } @@ -1141,14 +1141,14 @@ } // No unnecessary computations - else if (this[key] === this._view[key]) { + else if (this._model[key] === this._view[key]) { // It's the same! Woohoo! } // Color transitions if possible else if (typeof value === 'string') { try { - var color = helpers.color(this._start[key]).mix(helpers.color(this[key]), ease); + var color = helpers.color(this._start[key]).mix(helpers.color(this._model[key]), ease); this._view[key] = color.rgbString(); } catch (err) { this._view[key] = value; @@ -1156,7 +1156,7 @@ } // Number transitions else if (typeof value === 'number') { - this._view[key] = ((this[key] - this._start[key]) * ease) + this._start[key]; + this._view[key] = ((this._model[key] - this._start[key]) * ease) + this._start[key]; } // Everything else else { @@ -1172,12 +1172,12 @@ }, tooltipPosition: function() { return { - x: this.x, - y: this.y + x: this._model.x, + y: this._model.y }; }, hasValue: function() { - return isNumber(this.value); + return isNumber(this._model.x) && isNumber(this._model.y); } }); @@ -1192,7 +1192,12 @@ }, inGroupRange: function(mouseX) { var vm = this._view; - return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + this.hoverRadius, 2)); + + if (vm) { + return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2)); + } else { + return false; + } }, tooltipPosition: function() { var vm = this._view; @@ -1472,24 +1477,31 @@ initialize: function() { var options = this._options; extend(this, { - opacity: 0, - xPadding: options.tooltips.xPadding, - yPadding: options.tooltips.yPadding, - xOffset: options.tooltips.xOffset, - backgroundColor: options.tooltips.backgroundColor, - textColor: options.tooltips.fontColor, - _fontFamily: options.tooltips.fontFamily, - _fontStyle: options.tooltips.fontStyle, - fontSize: options.tooltips.fontSize, - titleTextColor: options.tooltips.titleFontColor, - _titleFontFamily: options.tooltips.titleFontFamily, - _titleFontStyle: options.tooltips.titleFontStyle, - titleFontSize: options.tooltips.titleFontSize, - caretHeight: options.tooltips.caretSize, - cornerRadius: options.tooltips.cornerRadius, - legendColorBackground: options.tooltips.multiKeyBackground, - labels: [], - colors: [], + _model: { + // Positioning + xPadding: options.tooltips.xPadding, + yPadding: options.tooltips.yPadding, + xOffset: options.tooltips.xOffset, + + // Labels + textColor: options.tooltips.fontColor, + _fontFamily: options.tooltips.fontFamily, + _fontStyle: options.tooltips.fontStyle, + fontSize: options.tooltips.fontSize, + + // Title + titleTextColor: options.tooltips.titleFontColor, + _titleFontFamily: options.tooltips.titleFontFamily, + _titleFontStyle: options.tooltips.titleFontStyle, + titleFontSize: options.tooltips.titleFontSize, + + // Appearance + caretHeight: options.tooltips.caretSize, + cornerRadius: options.tooltips.cornerRadius, + backgroundColor: options.tooltips.backgroundColor, + opacity: 0, + legendColorBackground: options.tooltips.multiKeyBackground, + }, }); }, update: function() { @@ -1498,15 +1510,22 @@ switch (this._options.hover.mode) { case 'single': - helpers.extend(this, { - text: template(this._options.tooltips.template, this._active[0]), + helpers.extend(this._model, { + text: template(this._options.tooltips.template, { + // These variables are available in the template function. Add others here + element: this._active[0], + value: this._data.datasets[this._active[0]._datasetIndex].data[this._active[0]._index], + label: this._data.labels ? this._data.labels[this._active[0]._index] : '', + }), }); + var tooltipPosition = this._active[0].tooltipPosition(); - helpers.extend(this, { + helpers.extend(this._model, { x: Math.round(tooltipPosition.x), y: Math.round(tooltipPosition.y), caretPadding: tooltipPosition.padding }); + break; case 'label': @@ -1542,14 +1561,19 @@ if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()) { elements.push(dataCollection[dataIndex]); } - }); + }, this); helpers.each(elements, function(element) { xPositions.push(element._view.x); yPositions.push(element._view.y); //Include any colour information about the element - labels.push(helpers.template(this._options.tooltips.multiTemplate, element)); + labels.push(helpers.template(this._options.tooltips.multiTemplate, { + // These variables are available in the template function. Add others here + element: element, + datasetLabel: this._data.datasets[element._datasetIndex].label, + value: this._data.datasets[element._datasetIndex].data[element._index], + })); colors.push({ fill: element._view.backgroundColor, stroke: element._view.borderColor @@ -1570,7 +1594,7 @@ }).call(this, dataIndex); // Apply for now - helpers.extend(this, { + helpers.extend(this._model, { x: medianPosition.x, y: medianPosition.y, labels: labels, @@ -1582,30 +1606,30 @@ // Calculate Appearance Tweaks - this.height = (labels.length * this.fontSize) + ((labels.length - 1) * (this.fontSize / 2)) + (this.yPadding * 2) + this.titleFontSize * 1.5; + this._model.height = (labels.length * this._model.fontSize) + ((labels.length - 1) * (this._model.fontSize / 2)) + (this._model.yPadding * 2) + this._model.titleFontSize * 1.5; var titleWidth = ctx.measureText(this.title).width, //Label has a legend square as well so account for this. - labelWidth = longestText(ctx, this.font, labels) + this.fontSize + 3, + labelWidth = longestText(ctx, this.font, labels) + this._model.fontSize + 3, longestTextWidth = max([labelWidth, titleWidth]); - this.width = longestTextWidth + (this.xPadding * 2); + this._model.width = longestTextWidth + (this._model.xPadding * 2); - var halfHeight = this.height / 2; + var halfHeight = this._model.height / 2; //Check to ensure the height will fit on the canvas - if (this.y - halfHeight < 0) { - this.y = halfHeight; - } else if (this.y + halfHeight > this._chart.height) { - this.y = this._chart.height - halfHeight; + if (this._model.y - halfHeight < 0) { + this._model.y = halfHeight; + } else if (this._model.y + halfHeight > this._chart.height) { + this._model.y = this._chart.height - halfHeight; } //Decide whether to align left or right based on position on canvas - if (this.x > this._chart.width / 2) { - this.x -= this.xOffset + this.width; + if (this._model.x > this._chart.width / 2) { + this._model.x -= this._model.xOffset + this._model.width; } else { - this.x += this.xOffset; + this._model.x += this._model.xOffset; } break; } diff --git a/src/Chart.Line.js b/src/Chart.Line.js index fa54cb96d..06f4c09b8 100644 --- a/src/Chart.Line.js +++ b/src/Chart.Line.js @@ -415,8 +415,8 @@ }.call(this); // On Hover hook - if (this.options.onHover) { - this.options.onHover.call(this, this.active); + if (this.options.hover.onHover) { + this.options.hover.onHover.call(this, this.active); } if (e.type == 'mouseup' || e.type == 'click') { @@ -496,17 +496,16 @@ // Active if (this.active.length) { + this.tooltip._model.opacity = 1; + helpers.extend(this.tooltip, { - opacity: 1, _active: this.active, }); this.tooltip.update(); } else { // Inactive - helpers.extend(this.tooltip, { - opacity: 0, - }); + this.tooltip._model.opacity = 0; } } @@ -529,7 +528,7 @@ (this.lastActive.length && this.active.length && changed)) { this.stop(); - this.render(this.options.hoverAnimationDuration); + this.render(this.options.hover.animationDuration); } }