jenkins-bot has submitted this change and it was merged. Change subject: Fix x axis labels ......................................................................
Fix x axis labels Also simplifies data processing. No longer invents data points for time periods where no data exists in the database. Also add hour groupings and fix hour display label. Change-Id: I12f0ba790e2668287471f74b5f84a3b969e4f517 --- M src/app/widgetBase.js M src/components/widgets/x-by-y/x-by-y.js M widgets/x-by-y.js 3 files changed, 93 insertions(+), 316 deletions(-) Approvals: Ssmith: Looks good to me, approved jenkins-bot: Verified diff --git a/src/app/widgetBase.js b/src/app/widgetBase.js index 3efc24f..ba71d70 100644 --- a/src/app/widgetBase.js +++ b/src/app/widgetBase.js @@ -4,6 +4,12 @@ 'momentjs' ], function( $, ko, moment ){ + function zeroPad( number ) { + if ( number < 10 ) { + return '0' + number; + } + return number; + } function WidgetBase( params ){ var self = this; @@ -66,76 +72,47 @@ self.processData = function(rawdata, timescale){ - var dailyDataArray = ['Daily Total'], - dailyCountArray = ['Daily Count'], - secondsByHourDonationData = ['Donations Per Second'], - dayObj = {}, returnObj; + var timeWord = ( timescale === 'Day' ? 'Dai' : timescale ) + 'ly', + totals = [ timeWord + ' Total'], + counts = [ timeWord + ' Count'], + xs = [ 'x' ], + defaultYear = new Date().getFullYear(), + defaultMonth = new Date().getMonth() + 1, + tempDate, timeFormat; + + $.each( rawdata, function( index, dataPoint ) { + totals.push( dataPoint.usd_total ); + counts.push( dataPoint.donations ); + + tempDate = ( dataPoint.Year || defaultYear ) + '-'; + tempDate += zeroPad( dataPoint.Month || defaultMonth ) + '-'; + tempDate += zeroPad( dataPoint.Day || 1 ); + tempDate += ' ' + zeroPad( dataPoint.Hour || 0 ); + + xs.push( tempDate ); + } ); switch(timescale){ case 'Year': + timeFormat = '%Y'; + break; case 'Month': - var monthlyDataArray = ['Monthly Total'], - monthlyCountArray = ['Monthly Count'], - months = rawdata; - - $.each(months, function(i, el){ - monthlyDataArray.push(el.usd_total); - monthlyCountArray.push(el.donations); - }); - - returnObj = { - timescale: timescale, - monthlyDataArray: monthlyDataArray, - monthlyCountArray: monthlyCountArray - }; - return returnObj; + timeFormat = '%b \'%y'; + break; case 'Day': + timeFormat = '%b %e'; + break; case 'Hour': - for (var d = 1; d < 32; d++) { - dailyDataArray[d] = 0; - dailyCountArray[d] = 0; - if (!dayObj[d]) { - dayObj[d] = new Array(25); - dayObj[d][0] = 'Hourly Totals'; - for (var h = 0; h < 24; h++) { - dayObj[d][h + 1] = { total: 0, count: 0 }; - secondsByHourDonationData[(d - 1) * 24 + h + 1] = 0; - } - } - } - - var dataCount = rawdata.length; - for (var i = 0; i < dataCount; i++ ) { - - var el = rawdata[i], - day = el.Day, - hour = el.hour, - total = el.usd_total, - runningTotal = 0; - - if(!hour){ - dayObj[day+1] = { total: total, count: el.donations }; - } else { - dayObj[day][hour + 1] = { total: total, count: el.donations }; - } - - secondsByHourDonationData[(day - 1) * 24 + hour + 1] = el.usd_per_second; - runningTotal += total; - dailyDataArray[day] += total; - dailyCountArray[day] += el.donations; - } - - returnObj = { - timescale: timescale, - dailyDataArray: dailyDataArray, - dailyCountArray: dailyCountArray, - secondsByHourDonationData: secondsByHourDonationData, - dayObj: dayObj - }; - - return returnObj; + timeFormat = '%H:00'; + break; } - + return { + timescale: timescale, + totals: totals, + counts: counts, + xs: xs, + timeFormat: timeFormat + }; }; self.convertToQuery = function( userChoices ){ @@ -184,30 +161,6 @@ // return groupStr; // } return query; - }; - - // Generate chart label arrays for time increment types - self.chartLabels = function(type){ - var chartLabels; - switch(type){ - case 'Year': - chartLabels = ['Year']; - break; - case 'Month': - chartLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - break; - case 'Day': - chartLabels = [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', - '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', - '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']; - break; - case 'Hour': - chartLabels = [ '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', - '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', - '22:00', '23:00']; - break; - } - return chartLabels; }; self.logStateChange = function(n){ diff --git a/src/components/widgets/x-by-y/x-by-y.js b/src/components/widgets/x-by-y/x-by-y.js index 8fdffb6..9757aa7 100644 --- a/src/components/widgets/x-by-y/x-by-y.js +++ b/src/components/widgets/x-by-y/x-by-y.js @@ -49,237 +49,61 @@ }); self.makeChart = function(data){ + var colors = {}, axes = {}; + colors[data.totals[0]] = 'rgb(92,184,92)'; + colors[data.counts[0]] = '#f0ad4e'; + axes[data.totals[0]] = 'y'; + axes[data.counts[0]] = 'y2'; - self.chartLoaded(true); - - self.monthlyChart = function(d,i){ - - var monthNamesArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - - return { - bindto: '#x-by-yChart', - size: { - height: 450, - width: window.width + self.xByYChart = c3.generate( { + bindto: '#x-by-yChart', //need to update this to allow multiples + size: { + height: 450, + width: window.width + }, + zoom: { enabled: true }, + data: { + x: 'x', + columns: [ data.xs, data.totals, data.counts ], + type: 'bar', + colors: colors, + axes: axes, + xFormat: '%Y-%m-%d %H' + }, + grid: { + x: { + show: true }, - zoom: { enabled: true }, - data: { - columns: [ data.monthlyCountArray, data.monthlyDataArray ], - type: 'bar', - colors: { 'Monthly Total': 'rgb(92,184,92)', 'Monthly Count': '#f0ad4e' }, - axes: { - 'Monthly Total': 'y', - 'Monthly Count': 'y2' - } - }, - grid: { - x: { - show: true - }, - y: { - show: true - } - }, - axis: { - x: { - tick: { - format: function(x){ return monthNamesArray[x]; } - } - }, - y: { - tick: { - format: function(x){ return numeral(x).format('$0,0'); } - } - }, - y2: { - tick: { - format: function(x){ return numeral(x).format('0,0'); } - }, - show: true - } - }, - tooltip: { - format: { - title: function (d) { - return monthNamesArray[d]; - }, - value: function (value, ratio, id) { - var display; - if(id === 'Monthly Total'){ - display = numeral(value).format('$0,0'); - } else { - display = numeral(value).format('0,0'); - } - return display; - } - } - }, - bar: { - width: { - ratio: 0.5 - } + y: { + show: true } - }; - }; - - self.hourlyChart = function(d,i){ - var hourlyData = data.dayObj[d.x + 1 ], - hourlyCountArray = ['Hourly Count'], - hourlyTotalArray = ['Hourly Total']; - for(var j=1; j<25; j++){ - hourlyCountArray.push(hourlyData[j].count); - hourlyTotalArray.push(hourlyData[j].total); + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: data.timeFormat + } + }, + y: { + tick: { + format: function(x){ return numeral(x).format('$0,0'); } + } + }, + y2: { + tick: { + format: function(x){ return numeral(x).format('0,0'); } + }, + show: true + } + }, + bar: { + width: { + ratio: 0.4 + } } - return { - bindto: '#x-by-yChart', - size: { - height: 450, - width: window.width - }, - zoom: { enabled: true }, - data: { - columns: [ hourlyTotalArray, hourlyCountArray ], - type: 'bar', - colors: { 'Hourly Total': 'rgb(92,184,92)', 'Hourly Count': '#f0ad4e' }, - onclick: function (d, i) { c3.generate(self.dailyChart()); }, - axes: { - 'Hourly Total': 'y', - 'Hourly Count': 'y2' - } - }, - grid: { - x: { - show: true - }, - y: { - show: true - } - }, - axis: { - x: { - label: { - text: 'December ' + ( d.x + 1 ), - position: 'outer-left' - }, - tick: { - format: function(x){ return x + ':00'; } - } - }, - y: { - tick: { - format: function(x){ return numeral(x).format('$0,0'); } - } - }, - y2: { - tick: { - format: function(x){ return numeral(x).format('0,0'); } - }, - show: true - } - }, - tooltip: { - format: { - title: function (d) { return 'Hour ' + d; }, - value: function (value, ratio, id) { - var display; - if(id === 'Hourly Total'){ - display = numeral(value).format('$0,0'); - } else { - display = numeral(value).format('0,0'); - } - return display; - } - } - }, - bar: { - width: { - ratio: 0.5 - } - } - }; - }; - - self.dailyChart = function(d,i){ - return { - bindto: '#x-by-yChart', - size: { - height: 450, - width: window.width - }, - zoom: { enabled: true }, - data: { - columns: [ data.dailyDataArray, data.dailyCountArray ], - type: 'bar', - colors: { 'Daily Total': 'rgb(49,176,213)', 'Daily Count': '#f0ad4e' }, - onclick: function (d, i) { - self.xByYChart = c3.generate(self.hourlyChart(d,i)); - }, - axes: { - 'Daily Total': 'y', - 'Daily Count': 'y2' - } - }, - grid: { - x: { - show: true - }, - y: { - show: true - } - }, - axis: { - x: { - tick: { - format: function(x){ return 'Dec ' + (x+1); } - } - }, - y: { - tick: { - format: function(x){ return numeral(x).format('$0,0'); } - } - }, - y2: { - tick: { - format: function(x){ return numeral(x).format('0,0'); } - }, - show: true - } - }, - tooltip: { - format: { - title: function (d) { return 'Day ' + (d+1); }, - value: function (value, ratio, id) { - var display; - if(id === 'Daily Total'){ - display = numeral(value).format('$0,0'); - } else { - display = numeral(value).format('0,0'); - } - return display; - } - } - }, - bar: { - width: { - ratio: 0.5 - } - } - }; - }; - - - switch(data.timescale){ - case 'Year': - case 'Month': - self.xByYChart = c3.generate(self.monthlyChart()); - break; - case 'Day': - self.xByYChart = c3.generate(self.dailyChart()); - break; - case 'Hour': - self.xByYChart = c3.generate(self.hourlyChart()); - break; - } + } ); + self.chartLoaded(true); }; self.showPanelBody = function(area){ @@ -310,7 +134,7 @@ return $.get( 'metadata/x-by-y', function(reqData){ self.metadata = reqData; - var xArray = [], timeArray = ['Year', 'Month', 'Day'], groupArray = []; + var xArray = [], timeArray = ['Year', 'Month', 'Day', 'Hour'], groupArray = []; $.each(self.metadata.filters, function(prop, obj){ diff --git a/widgets/x-by-y.js b/widgets/x-by-y.js index 98d8afb..7bd09d2 100644 --- a/widgets/x-by-y.js +++ b/widgets/x-by-y.js @@ -46,7 +46,7 @@ table: 'cc', func: 'HOUR', column: 'receive_date', - display: 'Month', + display: 'Hour', type: 'number', canGroup: true }, -- To view, visit https://gerrit.wikimedia.org/r/196010 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I12f0ba790e2668287471f74b5f84a3b969e4f517 Gerrit-PatchSet: 3 Gerrit-Project: wikimedia/fundraising/dash Gerrit-Branch: master Gerrit-Owner: Ejegg <eeggles...@wikimedia.org> Gerrit-Reviewer: Ssmith <ssm...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits