PDF rausgenommen

msd2/tracking/piwik/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js

@@ -0,0 +1,80 @@
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * 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 exports = require('piwik/UI'),
+        JqplotGraphDataTable = exports.JqplotGraphDataTable;
+
+    exports.JqplotBarGraphDataTable = function (element) {
+        JqplotGraphDataTable.call(this, element);
+    };
+
+    $.extend(exports.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 = ' (' + NumberFormatter.formatPercent(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);

msd2/tracking/piwik/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js

@@ -0,0 +1,142 @@
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * 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 exports = require('piwik/UI'),
+        JqplotGraphDataTable = exports.JqplotGraphDataTable,
+        JqplotGraphDataTablePrototype = JqplotGraphDataTable.prototype;
+
+    exports.JqplotEvolutionGraphDataTable = function (element) {
+        JqplotGraphDataTable.call(this, element);
+    };
+
+    $.extend(exports.JqplotEvolutionGraphDataTable.prototype, JqplotGraphDataTablePrototype, {
+
+        _setJqplotParameters: function (params) {
+            JqplotGraphDataTablePrototype._setJqplotParameters.call(this, params);
+
+            var defaultParams = {
+                axes: {
+                    xaxis: {
+                        pad: 1.0,
+                        renderer: $.jqplot.CategoryAxisRenderer,
+                        tickOptions: {
+                            showGridline: false
+                        }
+                    }
+                },
+                piwikTicks: {
+                    showTicks: true,
+                    showGrid: true,
+                    showHighlight: true,
+                    tickColor: this.tickColor
+                }
+            };
+
+            if (this.props.show_line_graph) {
+                defaultParams.seriesDefaults = {
+                    lineWidth: 1,
+                    markerOptions: {
+                        style: "filledCircle",
+                        size: 6,
+                        shadow: false
+                    }
+                };
+            } else {
+                defaultParams.seriesDefaults = {
+                    renderer: $.jqplot.BarRenderer,
+                    rendererOptions: {
+                        shadowOffset: 1,
+                        shadowDepth: 2,
+                        shadowAlpha: .2,
+                        fillToZero: true,
+                        barMargin: this.data[0].length > 10 ? 2 : 10
+                    }
+                };
+            }
+
+            var overrideParams = {
+                legend: {
+                    show: false
+                },
+                canvasLegend: {
+                    show: true
+                }
+            };
+            this.jqplotParams = $.extend(true, {}, defaultParams, this.jqplotParams, overrideParams);
+        },
+
+        _bindEvents: function () {
+            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];
+
+                        broadcast.propagateNewPage(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> ' + piwikHelper.htmlEntities(series));
+                    }
+                    var content = '<h3>'+piwikHelper.htmlEntities(label)+'</h3>'+text.join('<br />');
+
+                    $(this).tooltip({
+                        track:   true,
+                        items:   'div',
+                        content: content,
+                        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.setYTicks();
+        },
+
+        _destroyDataPointTooltip: function () {
+            // do nothing, tooltips are destroyed in the jqplotMouseLeave event
+        },
+
+        render: function () {
+            JqplotGraphDataTablePrototype.render.call(this);
+
+            if (initializeSparklines) {
+                initializeSparklines();
+            }
+        }
+    });
+
+})(jQuery, require);

msd2/tracking/piwik/plugins/CoreVisualizations/javascripts/jqplotPieGraph.js

@@ -0,0 +1,81 @@
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * 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 exports = require('piwik/UI'),
+        JqplotGraphDataTable = exports.JqplotGraphDataTable;
+
+    exports.JqplotPieGraphDataTable = function (element) {
+        JqplotGraphDataTable.call(this, element);
+    };
+
+    $.extend(exports.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>' + NumberFormatter.formatPercent(percentage) + '</strong> (' + value + ' ' + series + ')';
+            $(element).tooltip({
+                track:   true,
+                items:   '*',
+                content: '<h3>' + label + '</h3>' + text,
+                show: false,
+                hide: false
+            }).trigger('mouseover');
+        }
+    });
+
+})(jQuery, require);

msd2/tracking/piwik/plugins/CoreVisualizations/javascripts/seriesPicker.js

@@ -0,0 +1,153 @@
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * Series Picker control addition for DataTable visualizations.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+(function ($, require) {
+
+    /**
+     * This class creates and manages the Series Picker for certain DataTable visualizations.
+     *
+     * To add the series picker to your DataTable visualization, create a SeriesPicker instance
+     * and after your visualization has been rendered, call the 'init' method.
+     *
+     * To customize SeriesPicker placement and behavior, you can bind callbacks to the following
+     * events before calling 'init':
+     *
+     * 'placeSeriesPicker': Triggered after the DOM element for the series picker link is created.
+     *                      You must use this event to add the link to the dataTable. YOu can also
+     *                      use this event to position the link however you want.
+     *
+     *                      Callback Signature: function () {}
+     *
+     * 'seriesPicked':      Triggered when the user selects one or more columns/rows.
+     *
+     *                      Callback Signature: function (eventInfo, columns, rows) {}
+     *
+     * Events are triggered via jQuery, so you bind callbacks to them like this:
+     *
+     * var picker = new SeriesPicker(dataTable);
+     * $(picker).bind('placeSeriesPicker', function () {
+     *   $(this.domElem).doSomething(...);
+     * });
+     *
+     * @param {dataTable} dataTable  The dataTable instance to add a series picker to.
+     * @constructor
+     * @deprecated use the piwik-series-picker directive instead
+     */
+    var SeriesPicker = function (dataTable) {
+        this.domElem = null;
+        this.dataTableId = dataTable.workingDivId;
+
+        // the columns that can be selected
+        this.selectableColumns = dataTable.props.selectable_columns;
+
+        // the rows that can be selected
+        this.selectableRows = dataTable.props.selectable_rows;
+
+        // render the picker?
+        this.show = !! dataTable.props.show_series_picker
+                 && (this.selectableColumns || this.selectableRows);
+
+        // can multiple rows we selected?
+        this.multiSelect = !! dataTable.props.allow_multi_select_series_picker;
+    };
+
+    SeriesPicker.prototype = {
+
+        /**
+         * Initializes the series picker by creating the element. Must be called when
+         * the datatable the picker is being attached to is ready for it to be drawn.
+         */
+        init: function () {
+            if (!this.show) {
+                return;
+            }
+
+            var self = this;
+
+            var selectedColumns = this.selectableColumns
+                .filter(isItemDisplayed)
+                .map(function (columnConfig) {
+                    return columnConfig.column;
+                });
+
+            var selectedRows = this.selectableRows
+                .filter(isItemDisplayed)
+                .map(function (rowConfig) {
+                    return rowConfig.matcher;
+                });
+
+            // initialize dom element
+            var seriesPicker = '<piwik-series-picker'
+                + ' multiselect="' + (this.multiSelect ? 'true' : 'false') + '"'
+                + ' selectable-columns="selectableColumns"'
+                + ' selectable-rows="selectableRows"'
+                + ' selected-columns="selectedColumns"'
+                + ' selected-rows="selectedRows"'
+                + ' on-select="selectionChanged(columns, rows)"/>';
+
+            this.domElem = $(seriesPicker);
+
+            $(this).trigger('placeSeriesPicker');
+
+            piwikHelper.compileAngularComponents(this.domElem, {
+                params: {
+                    selectableColumns: this.selectableColumns,
+                    selectableRows: this.selectableRows,
+                    selectedColumns: selectedColumns,
+                    selectedRows: selectedRows,
+                    selectionChanged: function selectionChanged(columns, rows) {
+                        if (columns.length === 0 && rows.length === 0) {
+                            return;
+                        }
+
+                        rows = rows.map(encodeURIComponent);
+
+                        $(self).trigger('seriesPicked', [columns, rows]);
+
+                        // inform dashboard widget about changed parameters (to be restored on reload)
+                        var UI = require('piwik/UI');
+                        var params = {
+                            columns: columns,
+                            columns_to_display: columns,
+                            rows: rows,
+                            rows_to_display: rows
+                        };
+
+                        var tableNode = $('#' + self.dataTableId);
+                        UI.DataTable.prototype.notifyWidgetParametersChange(tableNode, params);
+                    }
+                }
+            });
+
+            function isItemDisplayed(columnOrRowConfig) {
+                return columnOrRowConfig.displayed;
+            }
+        },
+
+        /**
+         * Returns the translation of a metric that can be selected.
+         *
+         * @param {String} metric The name of the metric, ie, 'nb_visits' or 'nb_actions'.
+         * @return {String} The metric translation. If one cannot be found, the metric itself
+         *                  is returned.
+         */
+        getMetricTranslation: function (metric) {
+            for (var i = 0; i !== this.selectableColumns.length; ++i) {
+                if (this.selectableColumns[i].column === metric) {
+                    return this.selectableColumns[i].translation;
+                }
+            }
+            return metric;
+        }
+    };
+
+    var exports = require('piwik/DataTableVisualizations/Widgets');
+    exports.SeriesPicker = SeriesPicker;
+
+})(jQuery, require);