From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Wed, 3 Jun 2015 22:31:25 +0000 (-0600)
Subject: Doughnut and polar hovering/clicking
X-Git-Tag: v2.0-alpha~2^2~9^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8e5d8b88615f77685c3f44e6fbaf76f5120ea82d;p=thirdparty%2FChart.js.git

Doughnut and polar hovering/clicking
---

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 9c91b862d..356e0dbc3 100755
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -88,13 +88,13 @@
                 xOffset: 10,
                 template: [
                     '<% if(label){ %>',
-                    '    <%=label %>:',
+                    '<%=label %>:',
                     '<% } %>',
                     '<%=value %>',
                 ].join(''),
                 multiTemplate: [
                     '<%if (datasetLabel){ %>',
-                    '   <%=datasetLabel %>:',
+                    '<%=datasetLabel %>:',
                     '<% } %>',
                     '<%=value %>'
                 ].join(''),
@@ -1429,6 +1429,15 @@
     });
 
     Chart.Arc = Chart.Element.extend({
+        inGroupRange: function(mouseX) {
+            var vm = this._view;
+
+            if (vm) {
+                return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
+            } else {
+                return false;
+            }
+        },
         inRange: function(chartX, chartY) {
 
             var vm = this._view;
diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js
index a6db6cb82..9ccee22af 100644
--- a/src/Chart.Doughnut.js
+++ b/src/Chart.Doughnut.js
@@ -58,16 +58,7 @@
             this.update();
 
         },
-        getSliceAtEvent: function(e) {
-            var elements = [];
-
-            var location = helpers.getRelativePosition(e);
 
-            helpers.each(this.data.metaData, function(slice, index) {
-                if (slice.inRange(location.x, location.y)) elements.push(slice);
-            }, this);
-            return elements;
-        },
         calculateCircumference: function(dataset, value) {
             if (dataset.total > 0) {
                 return (Math.PI * 2) * (value / dataset.total);
@@ -161,23 +152,91 @@
             this.lastActive = this.lastActive || [];
 
             // Find Active Elements
-            this.active = this.getSliceAtEvent(e);
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getSliceAtEvent(e);
+                    case 'label':
+                        return this.getSlicesAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.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') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
             // Remove styling for last active (even if it may still be active)
             if (this.lastActive.length) {
-                this.lastActive[0].backgroundColor = this.data.data[this.lastActive[0]._index].backgroundColor;
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
             }
 
             // Built in hover styling
             if (this.active.length && this.options.hover.mode) {
-                this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString();
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
             }
 
+
             // Built in Tooltips
             if (this.options.tooltips.enabled) {
 
@@ -186,17 +245,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;
                 }
             }
 
@@ -226,8 +284,31 @@
             // Remember Last Active
             this.lastActive = this.active;
             return this;
+        },
+        getSliceAtEvent: function(e) {
+            var elements = [];
 
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
         },
+        /*getSlicesAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inGroupRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },*/
     });
 
     Chart.types.Doughnut.extend({
diff --git a/src/Chart.PolarArea.js b/src/Chart.PolarArea.js
index e11f222ea..ae4b72363 100644
--- a/src/Chart.PolarArea.js
+++ b/src/Chart.PolarArea.js
@@ -187,6 +187,8 @@
             }, this);
 
             this.scale.draw();
+
+            this.tooltip.transition(easingDecimal).draw();
         },
         events: function(e) {
 
@@ -198,23 +200,91 @@
             this.lastActive = this.lastActive || [];
 
             // Find Active Elements
-            this.active = this.getSliceAtEvent(e);
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getSliceAtEvent(e);
+                    case 'label':
+                        return this.getSlicesAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.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') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
             }
 
+            var dataset;
+            var index;
             // Remove styling for last active (even if it may still be active)
             if (this.lastActive.length) {
-                this.lastActive[0].backgroundColor = this.data.data[this.lastActive[0]._index].backgroundColor;
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
             }
 
             // Built in hover styling
             if (this.active.length && this.options.hover.mode) {
-                this.active[0].backgroundColor = this.data.data[this.active[0]._index].hoverBackgroundColor || helpers.color(this.data.data[this.active[0]._index].backgroundColor).saturate(0.5).darken(0.35).rgbString();
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
             }
 
+
             // Built in Tooltips
             if (this.options.tooltips.enabled) {
 
@@ -223,17 +293,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;
                 }
             }
 
@@ -263,18 +332,31 @@
             // Remember Last Active
             this.lastActive = this.active;
             return this;
-
         },
         getSliceAtEvent: function(e) {
             var elements = [];
 
             var location = helpers.getRelativePosition(e);
 
-            helpers.each(this.data.metaData, function(slice, index) {
-                if (slice.inRange(location.x, location.y)) elements.push(slice);
+            this.eachElement(function(slice, index) {
+                if (slice.inRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
             }, this);
             return elements;
         },
+        /*getSlicesAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inGroupRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },*/
     });
 
 }).call(this);