Refs #4041, split JqplotGraph datatable class into three: JqplotBarGraph, JqplotPieGraph & JqplotEvolutionGraph.

9 files changed, 296 insertions, 241 deletions

diff --git a/plugins/CoreVisualizations/CoreVisualizations.php b/plugins/CoreVisualizations/CoreVisualizations.php
index 3c14a5dcae..b1dd216858 100644
--- a/plugins/CoreVisualizations/CoreVisualizations.php
+++ b/plugins/CoreVisualizations/CoreVisualizations.php
@@ -55,5 +55,8 @@ class CoreVisualizations extends \Piwik\Plugin
     {
         $jsFiles[] = "plugins/CoreVisualizations/javascripts/seriesPicker.js";
         $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplot.js";
+        $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplotBarGraph.js";
+        $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplotPieGraph.js";
+        $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js";
     }
 }
\ No newline at end of file
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph.php
index 3e037f16c3..2b844a9fc9 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph.php
@@ -70,8 +70,6 @@ class JqplotGraph extends Graph
             $result['filter_sort_column'] = $firstColumn;
             $result['filter_sort_order'] = 'desc';
         }
-
-        $view->datatable_js_type = 'JqplotGraphDataTable';
     }
 
     /**
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
index fdaaad02c5..27e46abf87 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Bar.php
@@ -21,6 +21,12 @@ class Bar extends JqplotGraph
 {
     const ID = 'graphVerticalBar';
 
+    public function __construct($view)
+    {
+        parent::__construct($view);
+        $view->datatable_js_type = 'JqplotBarGraphDataTable';
+    }
+
     public static function getDefaultPropertyValues()
     {
         $result = parent::getDefaultPropertyValues();
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Evolution.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Evolution.php
index 431b592cbb..d949ddee75 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Evolution.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Evolution.php
@@ -47,6 +47,8 @@ class Evolution extends JqplotGraph
                     $this->getDefaultXAxisStepSize($dataTable->getRowsCount());
             };
         }
+
+        $view->datatable_js_type = 'JqplotEvolutionGraphDataTable';
     }
 
     public static function getDefaultPropertyValues()
diff --git a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
index 17df141dfa..398c021a3b 100644
--- a/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
+++ b/plugins/CoreVisualizations/Visualizations/JqplotGraph/Pie.php
@@ -25,6 +25,7 @@ class Pie extends JqplotGraph
     {
         parent::__construct($view);
         $view->visualization_properties->show_all_ticks = true;
+        $view->datatable_js_type = 'JqplotPieGraphDataTable';
     }
 
     public function render($dataTable, $properties)
diff --git a/plugins/CoreVisualizations/javascripts/jqplot.js b/plugins/CoreVisualizations/javascripts/jqplot.js
index 2db36cde16..863a17a9e8 100644
--- a/plugins/CoreVisualizations/javascripts/jqplot.js
+++ b/plugins/CoreVisualizations/javascripts/jqplot.js
@@ -1,7 +1,7 @@
 /**
  * Piwik - Web Analytics
  *
- * Adapter for jqplot
+ * DataTable UI class for JqplotGraph.
  *
  * @link http://www.jqplot.com
  * @link http://piwik.org
@@ -59,22 +59,11 @@
 
             this.data = graphData.data;
             this._setJqplotParameters(graphData.params);
-            this._setColors();
 
             if (this.props.display_percentage_in_tooltip) {
                 this._setTooltipPercentages();
             }
 
-            // determine the graph type
-            var dataTableDiv = $('#' + this.workingDivId);
-            if (dataTableDiv.hasClass('dataTableVizEvolution')) {
-                this.type = 'evolution';
-            } else if (dataTableDiv.hasClass('dataTableVizBar')) {
-                this.type = 'bar';
-            } else if (dataTableDiv.hasClass('dataTableVizPie')) {
-                this.type = 'pie';
-            }
-
             this._bindEvents();
 
             // add external series toggle if it should be added
@@ -123,6 +112,8 @@
             };
 
             this.jqplotParams = $.extend(true, {}, defaultParams, params);
+
+            this._setColors();
         },
 
         _setTooltipPercentages: function () {
@@ -139,17 +130,6 @@
         },
 
         _bindEvents: function () {
-            // preapare the appropriate chart type
-            if (this.type == 'evolution') {
-                this.prepareEvolutionChart();
-            } else if (this.type == 'bar') {
-                this.prepareBarChart();
-            } else if (this.type == 'pie') {
-                this.preparePieChart();
-            } else {
-                return;
-            }
-
             var self = this;
             var target = $('#' + this.targetDivId);
 
@@ -158,11 +138,7 @@
                 self._showDataPointTooltip(this, seriesIndex, valueIndex);
             })
             .on('jqplotDataUnhighlight', function () {
-                if (self.type != 'evolution') {
-                    if ($(this).is( ":data('ui-tooltip')" )) {
-                        $(this).tooltip('destroy');
-                    }
-                }
+                self._destroyDataPointTooltip($(this));
             });
 
             // handle window resize
@@ -210,44 +186,16 @@
             $(window).on('resize', this._resizeListener);
         },
 
-        _showDataPointTooltip: function (element, seriesIndex, valueIndex) {
-            if (this.type == 'bar') {
-                var value = this.formatY(this.data[seriesIndex][valueIndex], seriesIndex);
-                var series = this.jqplotParams.series[seriesIndex].label;
-
-                var percentage = '';
-                if (typeof this.tooltip.percentages != 'undefined') {
-                    percentage = this.tooltip.percentages[seriesIndex][valueIndex];
-                    percentage = ' (' + percentage + '%)';
-                }
-
-                var label = this.jqplotParams.axes.xaxis.labels[valueIndex];
-                var text = '<strong>' + value + '</strong> ' + series + percentage;
-                $(element).tooltip({
-                    track:   true,
-                    items:   '*',
-                    content: '<h3>' + label + '</h3>' + text,
-                    show: false,
-                    hide: false
-                }).trigger('mouseover');
-            } else if (this.type == 'pie') {
-                var value = this.formatY(this.data[0][valueIndex][1], 0);
-                var series = this.jqplotParams.series[0].label;
-                var percentage = this.tooltip.percentages[0][valueIndex];
-
-                var label = this.data[0][valueIndex][0];
-
-                var text = '<strong>' + percentage + '%</strong> (' + value + ' ' + series + ')';
-                $(element).tooltip({
-                    track:   true,
-                    items:   '*',
-                    content: '<h3>' + label + '</h3>' + text,
-                    show: false,
-                    hide: false
-                }).trigger('mouseover');
+        _destroyDataPointTooltip: function ($element) {
+            if ($element.is( ":data('ui-tooltip')" )) {
+                $element.tooltip('destroy');
             }
         },
 
+        _showDataPointTooltip: function (element, seriesIndex, valueIndex) {
+            // empty
+        },
+
         changeSeries: function (columns, rows) {
             this.showLoading();
 
@@ -412,182 +360,6 @@
             });
         },
 
-
-        // ------------------------------------------------------------
-        //  EVOLUTION CHART
-        // ------------------------------------------------------------
-
-        prepareEvolutionChart: function () {
-            var targetDivId = this.targetDivId;
-            var lang = this._lang;
-
-            this.setYTicks();
-
-            defaultParams.axes = {
-                xaxis: {
-                    pad: 1.0,
-                    renderer: $.jqplot.CategoryAxisRenderer,
-                    tickOptions: {
-                        showGridline: false
-                    }
-                }
-            };
-
-            defaultParams.seriesDefaults = {
-                lineWidth: 1,
-                markerOptions: {
-                    style: "filledCircle",
-                    size: 6,
-                    shadow: false
-                }
-            };
-
-            defaultParams.piwikTicks = {
-                showTicks: true,
-                showGrid: true,
-                showHighlight: true,
-                tickColor: this.tickColor
-            };
-
-            this.jqplotParams = $.extend(true, {}, defaultParams, this.jqplotParams);
-
-            var self = this;
-            var lastTick = false;
-
-            $('#' + targetDivId)
-                .on('jqplotMouseLeave', function (e, s, i, d) {
-                    $(this).css('cursor', 'default');
-                    if ($(this).is( ":data('ui-tooltip')" )) {
-                        $(this).tooltip('destroy');
-                    }
-                })
-                .on('jqplotClick', function (e, s, i, d) {
-                    if (lastTick !== false && typeof self.jqplotParams.axes.xaxis.onclick != 'undefined'
-                        && typeof self.jqplotParams.axes.xaxis.onclick[lastTick] == 'string') {
-                        var url = self.jqplotParams.axes.xaxis.onclick[lastTick];
-                        piwikHelper.redirectToUrl(url);
-                    }
-                })
-                .on('jqplotPiwikTickOver', function (e, tick) {
-                    lastTick = tick;
-                    var label;
-                    if (typeof self.jqplotParams.axes.xaxis.labels != 'undefined') {
-                        label = self.jqplotParams.axes.xaxis.labels[tick];
-                    } else {
-                        label = self.jqplotParams.axes.xaxis.ticks[tick];
-                    }
-        
-                    var text = [];
-                    for (var d = 0; d < self.data.length; d++) {
-                        var value = self.formatY(self.data[d][tick], d);
-                        var series = self.jqplotParams.series[d].label;
-                        text.push('<strong>' + value + '</strong> ' + series);
-                    }
-                    $(this).tooltip({
-                                track:   true,
-                                items:   'div',
-                                content: '<h3>'+label+'</h3>'+text.join('<br />'),
-                                show: false,
-                                hide: false
-                            }).trigger('mouseover');
-                    if (typeof self.jqplotParams.axes.xaxis.onclick != 'undefined'
-                        && typeof self.jqplotParams.axes.xaxis.onclick[lastTick] == 'string') {
-                        $(this).css('cursor', 'pointer');
-                    }
-                });
-
-            this.jqplotParams.legend = {
-                show: false
-            };
-            this.jqplotParams.canvasLegend = {
-                show: true
-            };
-        },
-
-        // ------------------------------------------------------------
-        //  PIE CHART
-        // ------------------------------------------------------------
-
-        preparePieChart: function () {
-            var targetDivId = this.targetDivId;
-            var lang = this._lang;
-
-            this.jqplotParams.seriesDefaults = {
-                renderer: $.jqplot.PieRenderer,
-                rendererOptions: {
-                    shadow: false,
-                    showDataLabels: false,
-                    sliceMargin: 1,
-                    startAngle: 35
-                }
-            };
-
-            this.jqplotParams.piwikTicks = {
-                showTicks: false,
-                showGrid: false,
-                showHighlight: false,
-                tickColor: this.tickColor
-            };
-
-            this.jqplotParams.legend = {
-                show: false
-            };
-            this.jqplotParams.pieLegend = {
-                show: true,
-                labelColor: this.singleMetricColor
-            };
-            this.jqplotParams.canvasLegend = {
-                show: true,
-                singleMetric: true,
-                singleMetricColor: this.singleMetricColor
-            };
-
-            // pie charts have a different data format
-            if (!(this.data[0][0] instanceof Array)) { // check if already in different format
-                for (var i = 0; i < this.data[0].length; i++) {
-                    this.data[0][i] = [this.jqplotParams.axes.xaxis.ticks[i], this.data[0][i]];
-                }
-            }
-        },
-
-        // ------------------------------------------------------------
-        //  BAR CHART
-        // ------------------------------------------------------------
-
-        prepareBarChart: function () {
-            var targetDivId = this.targetDivId;
-            var lang = this._lang;
-
-            this.setYTicks();
-
-            this.jqplotParams.seriesDefaults = {
-                renderer: $.jqplot.BarRenderer,
-                rendererOptions: {
-                    shadowOffset: 1,
-                    shadowDepth: 2,
-                    shadowAlpha: .2,
-                    fillToZero: true,
-                    barMargin: this.data[0].length > 10 ? 2 : 10
-                }
-            };
-
-            this.jqplotParams.piwikTicks = {
-                showTicks: true,
-                showGrid: false,
-                showHighlight: false,
-                tickColor: this.tickColor
-            };
-
-            this.jqplotParams.axes.xaxis.renderer = $.jqplot.CategoryAxisRenderer;
-            this.jqplotParams.axes.xaxis.tickOptions = {
-                showGridline: false
-            };
-
-            this.jqplotParams.canvasLegend = {
-                show: true
-            };
-        },
-
         // ------------------------------------------------------------
         //  HELPER METHODS
         // ------------------------------------------------------------
diff --git a/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js b/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js
new file mode 100644
index 0000000000..f2e8366a05
--- /dev/null
+++ b/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js
@@ -0,0 +1,79 @@
+/**
+ * Piwik - Web Analytics
+ *
+ * DataTable UI class for JqplotGraph/Bar.
+ *
+ * @link http://www.jqplot.com
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+(function ($, require) {
+
+    var JqplotGraphDataTable = window.JqplotGraphDataTable;
+
+    window.JqplotBarGraphDataTable = function () {
+        dataTable.call(this);
+    };
+
+    $.extend(window.JqplotBarGraphDataTable.prototype, JqplotGraphDataTable.prototype, {
+
+        _setJqplotParameters: function (params) {
+            JqplotGraphDataTable.prototype._setJqplotParameters.call(this, params);
+
+            this.jqplotParams.seriesDefaults = {
+                renderer: $.jqplot.BarRenderer,
+                rendererOptions: {
+                    shadowOffset: 1,
+                    shadowDepth: 2,
+                    shadowAlpha: .2,
+                    fillToZero: true,
+                    barMargin: this.data[0].length > 10 ? 2 : 10
+                }
+            };
+
+            this.jqplotParams.piwikTicks = {
+                showTicks: true,
+                showGrid: false,
+                showHighlight: false,
+                tickColor: this.tickColor
+            };
+
+            this.jqplotParams.axes.xaxis.renderer = $.jqplot.CategoryAxisRenderer;
+            this.jqplotParams.axes.xaxis.tickOptions = {
+                showGridline: false
+            };
+
+            this.jqplotParams.canvasLegend = {
+                show: true
+            };
+        },
+
+        _bindEvents: function () {
+            this.setYTicks();
+            JqplotGraphDataTable.prototype._bindEvents.call(this);
+        },
+
+        _showDataPointTooltip: function (element, seriesIndex, valueIndex) {
+            var value = this.formatY(this.data[seriesIndex][valueIndex], seriesIndex);
+            var series = this.jqplotParams.series[seriesIndex].label;
+
+            var percentage = '';
+            if (typeof this.tooltip.percentages != 'undefined') {
+                percentage = this.tooltip.percentages[seriesIndex][valueIndex];
+                percentage = ' (' + percentage + '%)';
+            }
+
+            var label = this.jqplotParams.axes.xaxis.labels[valueIndex];
+            var text = '<strong>' + value + '</strong> ' + series + percentage;
+            $(element).tooltip({
+                track:   true,
+                items:   '*',
+                content: '<h3>' + label + '</h3>' + text,
+                show: false,
+                hide: false
+            }).trigger('mouseover');
+        }
+    });
+
+})(jQuery, require);
diff --git a/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
new file mode 100644
index 0000000000..74154e7f3a
--- /dev/null
+++ b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
@@ -0,0 +1,114 @@
+/**
+ * Piwik - Web Analytics
+ *
+ * DataTable UI class for JqplotGraph/Evolution.
+ *
+ * @link http://www.jqplot.com
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+(function ($, require) {
+
+    var JqplotGraphDataTable = window.JqplotGraphDataTable,
+        JqplotGraphDataTablePrototype = JqplotGraphDataTable.prototype;
+
+    window.JqplotEvolutionGraphDataTable = function () {
+        dataTable.call(this);
+    };
+
+    $.extend(window.JqplotEvolutionGraphDataTable.prototype, JqplotGraphDataTablePrototype, {
+
+        _setJqplotParameters: function (params) {
+            JqplotGraphDataTablePrototype._setJqplotParameters.call(this, params);
+            
+            var defaultParams = {
+                axes: {
+                    xaxis: {
+                        pad: 1.0,
+                        renderer: $.jqplot.CategoryAxisRenderer,
+                        tickOptions: {
+                            showGridline: false
+                        }
+                    }
+                },
+                seriesDefaults: {
+                    lineWidth: 1,
+                    markerOptions: {
+                        style: "filledCircle",
+                        size: 6,
+                        shadow: false
+                    }
+                },
+                piwikTicks: {
+                    showTicks: true,
+                    showGrid: true,
+                    showHighlight: true,
+                    tickColor: this.tickColor
+                },
+            };
+            var overrideParams = {
+                legend: {
+                    show: false
+                },
+                canvasLegend: {
+                    show: true
+                }
+            };
+            this.jqplotParams = $.extend(true, {}, defaultParams, this.jqplotParams, overrideParams);
+        },
+
+        _bindEvents: function () {
+            this.setYTicks();
+            JqplotGraphDataTablePrototype._bindEvents.call(this);
+
+            var self = this;
+            var lastTick = false;
+
+            $('#' + this.targetDivId)
+                .on('jqplotMouseLeave', function (e, s, i, d) {
+                    $(this).css('cursor', 'default');
+                    JqplotGraphDataTablePrototype._destroyDataPointTooltip.call(this, $(this));
+                })
+                .on('jqplotClick', function (e, s, i, d) {
+                    if (lastTick !== false && typeof self.jqplotParams.axes.xaxis.onclick != 'undefined'
+                        && typeof self.jqplotParams.axes.xaxis.onclick[lastTick] == 'string') {
+                        var url = self.jqplotParams.axes.xaxis.onclick[lastTick];
+                        piwikHelper.redirectToUrl(url);
+                    }
+                })
+                .on('jqplotPiwikTickOver', function (e, tick) {
+                    lastTick = tick;
+                    var label;
+                    if (typeof self.jqplotParams.axes.xaxis.labels != 'undefined') {
+                        label = self.jqplotParams.axes.xaxis.labels[tick];
+                    } else {
+                        label = self.jqplotParams.axes.xaxis.ticks[tick];
+                    }
+        
+                    var text = [];
+                    for (var d = 0; d < self.data.length; d++) {
+                        var value = self.formatY(self.data[d][tick], d);
+                        var series = self.jqplotParams.series[d].label;
+                        text.push('<strong>' + value + '</strong> ' + series);
+                    }
+                    $(this).tooltip({
+                        track:   true,
+                        items:   'div',
+                        content: '<h3>'+label+'</h3>'+text.join('<br />'),
+                        show: false,
+                        hide: false
+                    }).trigger('mouseover');
+                    if (typeof self.jqplotParams.axes.xaxis.onclick != 'undefined'
+                        && typeof self.jqplotParams.axes.xaxis.onclick[lastTick] == 'string') {
+                        $(this).css('cursor', 'pointer');
+                    }
+                });
+        },
+
+        _destroyDataPointTooltip: function () {
+            // do nothing, tooltips are destroyed in the jqplotMouseLeave event
+        }
+    });
+
+})(jQuery, require);
diff --git a/plugins/CoreVisualizations/javascripts/jqplotPieGraph.js b/plugins/CoreVisualizations/javascripts/jqplotPieGraph.js
new file mode 100644
index 0000000000..63df6c482a
--- /dev/null
+++ b/plugins/CoreVisualizations/javascripts/jqplotPieGraph.js
@@ -0,0 +1,80 @@
+/**
+ * Piwik - Web Analytics
+ *
+ * DataTable UI class for JqplotGraph/Pie.
+ *
+ * @link http://www.jqplot.com
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+(function ($, require) {
+
+    var JqplotGraphDataTable = window.JqplotGraphDataTable;
+
+    window.JqplotPieGraphDataTable = function () {
+        dataTable.call(this);
+    };
+
+    $.extend(window.JqplotPieGraphDataTable.prototype, JqplotGraphDataTable.prototype, {
+
+        _setJqplotParameters: function (params) {
+            JqplotGraphDataTable.prototype._setJqplotParameters.call(this, params);
+
+            this.jqplotParams.seriesDefaults = {
+                renderer: $.jqplot.PieRenderer,
+                rendererOptions: {
+                    shadow: false,
+                    showDataLabels: false,
+                    sliceMargin: 1,
+                    startAngle: 35
+                }
+            };
+
+            this.jqplotParams.piwikTicks = {
+                showTicks: false,
+                showGrid: false,
+                showHighlight: false,
+                tickColor: this.tickColor
+            };
+
+            this.jqplotParams.legend = {
+                show: false
+            };
+            this.jqplotParams.pieLegend = {
+                show: true,
+                labelColor: this.singleMetricColor
+            };
+            this.jqplotParams.canvasLegend = {
+                show: true,
+                singleMetric: true,
+                singleMetricColor: this.singleMetricColor
+            };
+
+            // pie charts have a different data format
+            if (!(this.data[0][0] instanceof Array)) { // check if already in different format
+                for (var i = 0; i < this.data[0].length; i++) {
+                    this.data[0][i] = [this.jqplotParams.axes.xaxis.ticks[i], this.data[0][i]];
+                }
+            }
+        },
+
+        _showDataPointTooltip: function (element, seriesIndex, valueIndex) {
+            var value = this.formatY(this.data[0][valueIndex][1], 0);
+            var series = this.jqplotParams.series[0].label;
+            var percentage = this.tooltip.percentages[0][valueIndex];
+
+            var label = this.data[0][valueIndex][0];
+
+            var text = '<strong>' + percentage + '%</strong> (' + value + ' ' + series + ')';
+            $(element).tooltip({
+                track:   true,
+                items:   '*',
+                content: '<h3>' + label + '</h3>' + text,
+                show: false,
+                hide: false
+            }).trigger('mouseover');
+        },
+    });
+
+})(jQuery, require);