Fix #78 On click microflows for Pie, Doughnut and Polar charts

Author: Jelte Lagendijk

src/ChartJS/widgets/BarChart/widget/BarChart.js

@@ -8,6 +8,8 @@ define([
 
     return declare("ChartJS.widgets.BarChart.widget.BarChart", [ Core ], {
 
+        _chartType: "bar",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -101,7 +103,7 @@ define([
                 this._chart.bindEvents(); // tooltips otherwise won't work
             } else {
                 var chartProperties = {
-                    type: "bar",
+                    type: this._chartType,
                     data: data,
                     options: this._chartOptions({
 

src/ChartJS/widgets/Core.js

@@ -67,6 +67,8 @@ define([
         _mxObj: null,
         _handle: null,
 
+        _chartType: null,
+
         _resizeTimer: null,
 
         _currentContext: null,
@@ -319,9 +321,7 @@ define([
 
         _onClickChart: function (evt) {
             logger.debug(this.id + "._onClickChart");
-
             var elements = this._chart.getElementAtEvent(evt);
-
             if (elements.length) {
                 var el = elements[0],
                 datasetIndex = el._datasetIndex,
@@ -331,6 +331,11 @@ define([
                 dataPointObject = dataset && dataset.points ? dataset.points[pointIndex] : null;
 
                 if (this.onclickDataSetMf && datasetObject) {
+                    if (this._chartType === "pie" || this._chartType === "doughnut" || this._chartType === "polarArea") {
+                        // These chartTypes use a single series data set, so the datasetobject is different
+                        datasetObject = this._activeDatasets[pointIndex].obj;
+                    }
+
                     this._executeMicroflow(this.onclickDataSetMf, null, datasetObject);
                 }
 
@@ -431,7 +436,7 @@ define([
         },
 
         _createDataSets: function (data) {
-            logger.debug(this.id + "._createDataSets", data);
+            logger.debug(this.id + "._createDataSets");
             var _chartData = {
                 labels: [],
                 datasets: [
@@ -516,7 +521,7 @@ define([
         },
 
         _hexToRgb: function (hex, alpha) {
-            logger.debug(this.id + "._hexToRgb", hex, alpha);
+            //logger.debug(this.id + "._hexToRgb", hex, alpha);
             if (hex !== null) {
                 var regex = null,
                     shorthandRegex = null,

src/ChartJS/widgets/DoughnutChart/widget/DoughnutChart.js

@@ -10,6 +10,8 @@ define([
 
     return declare("ChartJS.widgets.DoughnutChart.widget.DoughnutChart", [ Core ], {
 
+        _chartType: "doughnut",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -46,6 +48,7 @@ define([
 
                 chartData.push(point);
                 this._activeDatasets.push({
+                    obj: set.dataset,
                     dataset : point,
                     idx : j,
                     active : true
@@ -95,7 +98,7 @@ define([
                 this._chart.destroy();
             }
             this._chart = new this._chartJS(this._ctx, {
-                type: "doughnut",
+                type: this._chartType,
                 data: this._createDataSets(data),
                 options: this._chartOptions({
 

src/ChartJS/widgets/LineChart/widget/LineChart.js

@@ -9,7 +9,7 @@ define([
 
     return declare("ChartJS.widgets.LineChart.widget.LineChart", [ Core ], {
 
-        // Overwrite functions from _core here...
+        _chartType: "line",
 
         _processData : function () {
             logger.debug(this.id + "._processData");
@@ -100,8 +100,8 @@ define([
             }
             this._chartData.labels = xlabels;
 
-            logger.debug(this.id + " Created LineChart data");
-            logger.debug(this.id + "  " + JSON.stringify(this._chartData));
+            //logger.debug(this.id + " Created LineChart data");
+            //logger.debug(this.id + "  " + JSON.stringify(this._chartData));
 
             this._createChart(this._chartData);
 
@@ -121,7 +121,7 @@ define([
                 //logger.debug("stacked:" + this.isStacked);
 
                 var chartProperties = {
-                    type: "line",
+                    type: this._chartType,
                     data: data,
                     options: this._chartOptions({
 

src/ChartJS/widgets/PieChart/widget/PieChart.js

@@ -11,6 +11,8 @@ define([
 
     return declare("ChartJS.widgets.PieChart.widget.PieChart", [ Core ], {
 
+        _chartType: "pie",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -46,14 +48,14 @@ define([
 
                 chartData.push(point);
                 this._activeDatasets.push({
+                    obj: set.dataset,
                     dataset : point,
                     idx : j,
                     active : true
                 });
             }
 
             this._createChart(chartData);
-
             this._createLegend(true);
         },
 
@@ -100,7 +102,7 @@ define([
                 this._chart.bindEvents(); // tooltips otherwise won't work
             } else {
                 var chartProperties = {
-                    type: "pie",
+                    type: this._chartType,
                     data:  this._createDataSets(data),
                     options: this._chartOptions({
 

src/ChartJS/widgets/PolarChart/widget/PolarChart.js

@@ -11,6 +11,8 @@ define([
     // Declare widget.
     return declare("ChartJS.widgets.PolarChart.widget.PolarChart", [ _core ], {
 
+        _chartType: "polarArea",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -46,6 +48,7 @@ define([
 
                 chartData.push(point);
                 this._activeDatasets.push({
+                    obj: set.dataset,
                     dataset : point,
                     idx : j,
                     active : true
@@ -94,7 +97,7 @@ define([
             logger.debug(this.id + "._createChart");
 
             this._chart = new this._chartJS(this._ctx, {
-                type: "polarArea",
+                type: this._chartType,
                 data: this._createDataSets(data),
                 options: {
                     title: {

src/ChartJS/widgets/RadarChart/widget/RadarChart.js

@@ -9,6 +9,8 @@ define([
 
     return declare("ChartJS.widgets.RadarChart.widget.RadarChart", [ Core ], {
 
+        _chartType: "radar",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -105,7 +107,7 @@ define([
             } else {
 
                 this._chart = new this._chartJS(this._ctx, {
-                    type: "radar",
+                    type: this._chartType,
                     data: data,
                     options: this._chartOptions({
 

src/ChartJS/widgets/StackedBarChart/widget/StackedBarChart.js

@@ -9,6 +9,8 @@ define([
 
     return declare("ChartJS.widgets.StackedBarChart.widget.StackedBarChart", [ Core ], {
 
+        _chartType: "bar",
+
         _processData : function () {
             logger.debug(this.id + "._processData");
             var sets = [],
@@ -104,7 +106,7 @@ define([
             } else {
 
                 var chartProperties = {
-                    type: "bar",
+                    type: this._chartType,
                     data: data,
                     options: this._chartOptions({