Nicer y-axis intervals for duration graphs

This commit is contained in:
JonnyWong16 2016-08-06 15:52:44 -07:00
commit 54af92251c

View file

@ -341,6 +341,14 @@
var music_visible = (${config['music_logging_enable']} == 1 ? true : false); var music_visible = (${config['music_logging_enable']} == 1 ? true : false);
function dataSecondsToHours(data) {
$.each(data.series, function (i, series) {
series.data = $.map(series.data, function (value) {
return value / 60 / 60;
});
});
}
function loadGraphsTab1(time_range, yaxis) { function loadGraphsTab1(time_range, yaxis) {
$('#days-selection').show(); $('#days-selection').show();
@ -354,18 +362,19 @@
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
var dateArray = []; var dateArray = [];
for (var i = 0; i < data.categories.length; i++) { $.each(data.categories, function (i, day) {
dateArray.push(moment(data.categories[i], 'YYYY-MM-DD').valueOf()); dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
// Highlight the weekend // Highlight the weekend
if ((moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sat') || if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
(moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sun')) { (moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) {
hc_plays_by_day_options.xAxis.plotBands.push({ hc_plays_by_day_options.xAxis.plotBands.push({
from: i-0.5, from: i-0.5,
to: i+0.5, to: i+0.5,
color: 'rgba(80,80,80,0.3)' color: 'rgba(80,80,80,0.3)'
}); });
} }
} });
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_day_options.yAxis.min = 0; hc_plays_by_day_options.yAxis.min = 0;
hc_plays_by_day_options.xAxis.categories = dateArray; hc_plays_by_day_options.xAxis.categories = dateArray;
hc_plays_by_day_options.series = data.series; hc_plays_by_day_options.series = data.series;
@ -380,6 +389,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_dayofweek_options.xAxis.categories = data.categories; hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
hc_plays_by_dayofweek_options.series = data.series; hc_plays_by_dayofweek_options.series = data.series;
hc_plays_by_dayofweek_options.series[2].visible = music_visible; hc_plays_by_dayofweek_options.series[2].visible = music_visible;
@ -393,6 +403,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_hourofday_options.xAxis.categories = data.categories; hc_plays_by_hourofday_options.xAxis.categories = data.categories;
hc_plays_by_hourofday_options.series = data.series; hc_plays_by_hourofday_options.series = data.series;
hc_plays_by_hourofday_options.series[2].visible = music_visible; hc_plays_by_hourofday_options.series[2].visible = music_visible;
@ -406,6 +417,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_platform_options.xAxis.categories = data.categories; hc_plays_by_platform_options.xAxis.categories = data.categories;
hc_plays_by_platform_options.series = data.series; hc_plays_by_platform_options.series = data.series;
hc_plays_by_platform_options.series[2].visible = music_visible; hc_plays_by_platform_options.series[2].visible = music_visible;
@ -419,6 +431,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_user_options.xAxis.categories = data.categories; hc_plays_by_user_options.xAxis.categories = data.categories;
hc_plays_by_user_options.series = data.series; hc_plays_by_user_options.series = data.series;
hc_plays_by_user_options.series[2].visible = music_visible; hc_plays_by_user_options.series[2].visible = music_visible;
@ -439,18 +452,19 @@
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
var dateArray = []; var dateArray = [];
for (var i = 0; i < data.categories.length; i++) { $.each(data.categories, function (i, day) {
dateArray.push(moment(data.categories[i], 'YYYY-MM-DD').valueOf()); dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
// Highlight the weekend // Highlight the weekend
if ((moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sat') || if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
(moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sun')) { (moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) {
hc_plays_by_stream_type_options.xAxis.plotBands.push({ hc_plays_by_day_options.xAxis.plotBands.push({
from: i-0.5, from: i-0.5,
to: i+0.5, to: i+0.5,
color: 'rgba(80,80,80,0.3)' color: 'rgba(80,80,80,0.3)'
}); });
} }
} });
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_stream_type_options.yAxis.min = 0; hc_plays_by_stream_type_options.yAxis.min = 0;
hc_plays_by_stream_type_options.xAxis.categories = dateArray; hc_plays_by_stream_type_options.xAxis.categories = dateArray;
hc_plays_by_stream_type_options.series = data.series; hc_plays_by_stream_type_options.series = data.series;
@ -464,6 +478,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_source_resolution_options.xAxis.categories = data.categories; hc_plays_by_source_resolution_options.xAxis.categories = data.categories;
hc_plays_by_source_resolution_options.series = data.series; hc_plays_by_source_resolution_options.series = data.series;
var hc_plays_by_source_resolution = new Highcharts.Chart(hc_plays_by_source_resolution_options); var hc_plays_by_source_resolution = new Highcharts.Chart(hc_plays_by_source_resolution_options);
@ -476,6 +491,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_stream_resolution_options.xAxis.categories = data.categories; hc_plays_by_stream_resolution_options.xAxis.categories = data.categories;
hc_plays_by_stream_resolution_options.series = data.series; hc_plays_by_stream_resolution_options.series = data.series;
var hc_plays_by_stream_resolution = new Highcharts.Chart(hc_plays_by_stream_resolution_options); var hc_plays_by_stream_resolution = new Highcharts.Chart(hc_plays_by_stream_resolution_options);
@ -488,6 +504,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_platform_by_stream_type_options.xAxis.categories = data.categories; hc_plays_by_platform_by_stream_type_options.xAxis.categories = data.categories;
hc_plays_by_platform_by_stream_type_options.series = data.series; hc_plays_by_platform_by_stream_type_options.series = data.series;
var hc_plays_by_platform_by_stream_type = new Highcharts.Chart(hc_plays_by_platform_by_stream_type_options); var hc_plays_by_platform_by_stream_type = new Highcharts.Chart(hc_plays_by_platform_by_stream_type_options);
@ -500,6 +517,7 @@
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id }, data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_user_by_stream_type_options.xAxis.categories = data.categories; hc_plays_by_user_by_stream_type_options.xAxis.categories = data.categories;
hc_plays_by_user_by_stream_type_options.series = data.series; hc_plays_by_user_by_stream_type_options.series = data.series;
var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options); var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options);
@ -518,6 +536,7 @@
data: { y_axis: yaxis, user_id: selected_user_id }, data: { y_axis: yaxis, user_id: selected_user_id },
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (yaxis === 'duration') { dataSecondsToHours(data); }
hc_plays_by_month_options.yAxis.min = 0; hc_plays_by_month_options.yAxis.min = 0;
hc_plays_by_month_options.xAxis.categories = data.categories; hc_plays_by_month_options.xAxis.categories = data.categories;
hc_plays_by_month_options.series = data.series; hc_plays_by_month_options.series = data.series;
@ -610,56 +629,55 @@
if (type === 'plays') { if (type === 'plays') {
yaxis_format = function() { return this.value; }; yaxis_format = function() { return this.value; };
tooltip_format = function() { tooltip_format = function() {
if (moment(this.x, 'X').isValid() && (this.x > 946684800)) { if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>'; var s = '<b>'+ moment(this.x).format('ddd MMM D') +'</b>';
} else { } else {
var s = '<b>'+ this.x +'</b>'; var s = '<b>'+ this.x +'</b>';
} }
if (this.points.length > 1) { if (this.points.length > 1) {
var total = 0; var total = 0;
$.each(this.points, function(i, point) { $.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y; s += '<br/>'+point.series.name+': '+point.y;
total += point.y; total += point.y;
}); });
s += '<br><b>Total: '+total+'</b>'; s += '<br><b>Total: '+total+'</b>';
} else { } else {
$.each(this.points, function(i, point) { $.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y; s += '<br/>'+point.series.name+': '+point.y;
}); });
} }
return s; return s;
} }
stack_labels_format = function() { stack_labels_format = function() {
return this.total; return this.total;
} }
$('.yaxis-text').html('Play count'); $('.yaxis-text').html('Play count');
} else { } else {
yaxis_format = function() { return moment.duration(this.value, 'seconds').format("H [h] m [m]"); }; yaxis_format = function() { return moment.duration(this.value, 'hours').format('H [h] m [m]'); };
tooltip_format = function() { tooltip_format = function() {
if (moment(this.x, 'X').isValid() && (this.x > 946684800)) { if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>'; var s = '<b>'+ moment(this.x).format('ddd MMM D') +'</b>';
} else { } else {
var s = '<b>'+ this.x +'</b>'; var s = '<b>'+ this.x +'</b>';
} }
if (this.points.length > 1) { if (this.points.length > 1) {
var total = 0; var total = 0;
$.each(this.points, function(i, point) { $.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'seconds').format('D [days] H [hrs] m [mins]'); s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'hours').format('D [days] H [hrs] m [mins]');
total += point.y; total += point.y;
}); });
s += '<br/><b>Total: '+moment.duration(total, 'seconds').format('D [days] H [hrs] m [mins]')+'</b>'; s += '<br/><b>Total: '+moment.duration(total, 'hours').format('D [days] H [hrs] m [mins]')+'</b>';
} else { } else {
$.each(this.points, function(i, point) { $.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'seconds').format('D [days] H [hrs] m [mins]'); s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'hours').format('D [days] H [hrs] m [mins]');
}); });
} }
return s; return s;
} }
stack_labels_format = function() { stack_labels_format = function() {
var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]"); var s = moment.duration(this.total, 'hours').format('H [h] m [m]');
return s; return s;
} }
$('.yaxis-text').html('Play duration'); $('.yaxis-text').html('Play duration');
} }