Ejegg has uploaded a new change for review. https://gerrit.wikimedia.org/r/196010
Change subject: WIP: Fix x axis labels
......................................................................
WIP: Fix x axis labels
Also simplifies data processing. No longer invents data points
for time periods where no data exists in the database.
Change-Id: I12f0ba790e2668287471f74b5f84a3b969e4f517
---
M src/app/widgetBase.js
M src/components/widgets/x-by-y/x-by-y.js
2 files changed, 87 insertions(+), 315 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/10/196010/1
diff --git a/src/app/widgetBase.js b/src/app/widgetBase.js
index 3efc24f..9bd2764 100644
--- a/src/app/widgetBase.js
+++ b/src/app/widgetBase.js
@@ -66,76 +66,49 @@
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 += ( dataPoint.Month || defaultMonth )
+ '-';
+ tempDate += ( dataPoint.Day || '1' );
+ if ( dataPoint.Hour ) {
+ tempDate += ' ' + dataPoint.Hour +
':00';
+ }
+
+ 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 +157,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 7a36515..eeab553 100644
--- a/src/components/widgets/x-by-y/x-by-y.js
+++ b/src/components/widgets/x-by-y/x-by-y.js
@@ -27,237 +27,60 @@
});
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
+ },
+ 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.5
+ }
}
- 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){
@@ -288,7 +111,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){
--
To view, visit https://gerrit.wikimedia.org/r/196010
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I12f0ba790e2668287471f74b5f84a3b969e4f517
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ejegg <eeggles...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
