diff options
Diffstat (limited to 'plugins/CoreVisualizations/javascripts')
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, |