Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/matomo-org/matomo.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/CoreVisualizations/javascripts')
-rw-r--r--plugins/CoreVisualizations/javascripts/jqplot.js30
-rw-r--r--plugins/CoreVisualizations/javascripts/jqplotBarGraph.js17
-rw-r--r--plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js54
3 files changed, 85 insertions, 16 deletions
diff --git a/plugins/CoreVisualizations/javascripts/jqplot.js b/plugins/CoreVisualizations/javascripts/jqplot.js
index a509f401a6..c53cdcb493 100644
--- a/plugins/CoreVisualizations/javascripts/jqplot.js
+++ b/plugins/CoreVisualizations/javascripts/jqplot.js
@@ -634,9 +634,7 @@ function rowEvolutionGetMetricNameFromRow(tr)
* Sets the colors used to render this graph.
*/
_setColors: function () {
- var colorManager = piwik.ColorManager,
- seriesColorNames = ['series1', 'series2', 'series3', 'series4', 'series5',
- 'series6', 'series7', 'series8', 'series9', 'series10'];
+ var colorManager = piwik.ColorManager;
var viewDataTable = $('#' + this.workingDivId).data('uiControlObject').param['viewDataTable'];
@@ -651,11 +649,31 @@ function rowEvolutionGetMetricNameFromRow(tr)
var namespace = graphType + '-graph-colors';
- this.jqplotParams.seriesColors = colorManager.getColors(namespace, seriesColorNames, true);
+ this._setSeriesColors(namespace);
+
this.jqplotParams.grid.background = colorManager.getColor(namespace, 'grid-background');
this.jqplotParams.grid.borderColor = colorManager.getColor(namespace, 'grid-border');
this.tickColor = colorManager.getColor(namespace, 'ticks');
this.singleMetricColor = colorManager.getColor(namespace, 'single-metric-label')
+ },
+
+ _setSeriesColors: function (namespace) {
+ var colorManager = piwik.ColorManager,
+ seriesColorNames = ['series0', 'series1', 'series2', 'series3', 'series4', 'series5',
+ 'series6', 'series7', 'series8', 'series9', 'series10'];
+
+ var comparisonService = piwikHelper.getAngularDependency('piwikComparisonsService');
+ if (comparisonService.isComparing() && typeof this.jqplotParams.series[0].seriesIndex !== 'undefined') {
+ namespace = 'comparison-series-color';
+
+ seriesColorNames = [];
+ this.jqplotParams.series.forEach(function (s) {
+ var seriesColorName = comparisonService.getSeriesColorName(s.seriesIndex, s.metricIndex);
+ seriesColorNames.push(seriesColorName);
+ });
+ }
+
+ this.jqplotParams.seriesColors = colorManager.getColors(namespace, seriesColorNames, true);
}
});
@@ -1040,7 +1058,9 @@ RowEvolutionSeriesToggle.prototype.beforeReplot = function () {
c.markerRenderer.init();
var position = series.gridData[tick];
- c.markerRenderer.draw(position[0], position[1], c.piwikHighlightCanvas._ctx);
+ if (typeof position !== 'undefined') {
+ c.markerRenderer.draw(position[0], position[1], c.piwikHighlightCanvas._ctx);
+ }
}
}
diff --git a/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js b/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js
index cd21308f73..24af4c2e9d 100644
--- a/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js
+++ b/plugins/CoreVisualizations/javascripts/jqplotBarGraph.js
@@ -22,6 +22,9 @@
_setJqplotParameters: function (params) {
JqplotGraphDataTable.prototype._setJqplotParameters.call(this, params);
+ var barMargin = this.data[0].length > 10 ? 2 : 10;
+ var minBarWidth = 10;
+
this.jqplotParams.seriesDefaults = {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
@@ -29,7 +32,7 @@
shadowDepth: 2,
shadowAlpha: .2,
fillToZero: true,
- barMargin: this.data[0].length > 10 ? 2 : 10
+ barMargin: barMargin
}
};
@@ -48,6 +51,18 @@
this.jqplotParams.canvasLegend = {
show: true
};
+
+ var comparisonService = piwikHelper.getAngularDependency('piwikComparisonsService');
+ if (comparisonService.isComparing()) {
+ var seriesCount = this.jqplotParams.series.length;
+ var dataCount = this.data[0].length;
+
+ var totalBars = seriesCount * dataCount;
+ var totalMinWidth = (minBarWidth + barMargin) * totalBars + 50;
+
+ this.$element.find('.piwik-graph').css('min-width', totalMinWidth + 'px');
+ this.$element.css('overflow-x', 'scroll');
+ }
},
_bindEvents: function () {
diff --git a/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
index b77add4962..012e5e8bc1 100644
--- a/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
+++ b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
@@ -96,19 +96,53 @@
.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 dataByAxis = {};
+ for (var d = 0; d < self.data.length; ++d) {
+ var valueUnformatted = self.data[d][tick];
+ if (typeof valueUnformatted === 'undefined' || valueUnformatted === null) {
+ continue;
+ }
+
+ var axis = self.jqplotParams.series[d]._xaxis || 'xaxis';
+ if (!dataByAxis[axis]) {
+ dataByAxis[axis] = [];
+ }
+
+ var value = self.formatY(valueUnformatted, d);
var series = self.jqplotParams.series[d].label;
- text.push('<strong>' + value + '</strong> ' + piwikHelper.htmlEntities(series));
+
+ var seriesColor = self.jqplotParams.seriesColors[d];
+
+ dataByAxis[axis].push('<span class="tooltip-series-color" style="background-color: ' + seriesColor + ';"/>' + '<strong>' + value + '</strong> ' + piwikHelper.htmlEntities(series));
+ }
+
+ var xAxisCount = 0;
+ Object.keys(self.jqplotParams.axes).forEach(function (axis) {
+ if (axis.substring(0, 1) === 'x') {
+ ++xAxisCount;
+ }
+ });
+
+ var content = '';
+ for (var i = 0; i < xAxisCount; ++i) {
+ var axisName = i === 0 ? 'xaxis' : 'x' + (i + 1) + 'axis';
+ if (!dataByAxis[axisName] || !dataByAxis[axisName].length) {
+ continue;
+ }
+
+ if (typeof self.jqplotParams.axes[axisName].labels != 'undefined') {
+ label = self.jqplotParams.axes[axisName].labels[tick];
+ } else {
+ label = self.jqplotParams.axes[axisName].ticks[tick];
+ }
+
+ if (typeof label === 'undefined') { // sanity check
+ continue;
+ }
+
+ content += '<h3 class="evolution-tooltip-header">'+piwikHelper.htmlEntities(label)+'</h3>'+dataByAxis[axisName].join('<br />');
}
- var content = '<h3>'+piwikHelper.htmlEntities(label)+'</h3>'+text.join('<br />');
$(this).tooltip({
track: true,