Stream info graphs and some styling changes.

This commit is contained in:
Tim 2015-08-10 00:24:34 +02:00
parent 0313c65caa
commit 7f75966f43
6 changed files with 603 additions and 72 deletions

View file

@ -34,17 +34,19 @@
</div> </div>
</div> </div>
<div class='table-card-back'> <div class='table-card-back'>
<ul class="nav nav-pills" role="tablist"> <ul class="nav nav-pills" role="tablist" id="graph-tabs">
<li role="presentation" class="active"><a id="watch-count-graphs" href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab">Plays by period</a></li> <li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" data-toggle="tab" role="tab">Plays by period</a></li>
<li role="presentation"><a id="watch-totals-graphs" href="#tabs-3" aria-controls="tabs-2" role="tab" data-toggle="tab">Play Totals</a></li> <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" data-toggle="tab" role="tab">Stream Info</a></li>
<li role="presentation"><a href="#tabs-3" aria-controls="tabs-3" data-toggle="tab" role="tab">Play Totals</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tabs-1"> <div role="tabpanel" class="tab-pane active" id="tabs-1">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="padded-header"> <h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4>
<h3><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h3> <p class="help-block">
</div> The total play count or duration of movies and tv played per day. Click a graph point to open up a list of items played for that specific date.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_day"> <div class="watch-chart" id="chart_div_plays_by_day">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div> <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
@ -53,13 +55,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
</div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="padded-header"> <h4><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
<h3><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h3> <p class="help-block">
</div> The combined total of movies and tv played per day of the week.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_dayofweek" style="float: left;"> <div class="watch-chart" id="chart_div_plays_by_dayofweek" style="float: left;">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart... <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
@ -69,9 +70,10 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="padded-header"> <h4><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h4>
<h3><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h3> <p class="help-block">
</div> The combined total of movies and tv played per hour of the day.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_hourofday"> <div class="watch-chart" id="chart_div_plays_by_hourofday">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart... <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
@ -83,9 +85,10 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="padded-header"> <h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h4>
<h3><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h3> <p class="help-block">
</div> The combined total of movies and tv played by top 10 most active platforms.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_platform" style="float: left;"> <div class="watch-chart" id="chart_div_plays_by_platform" style="float: left;">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart... <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
@ -95,9 +98,10 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="padded-header"> <h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h4>
<h3><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h3> <p class="help-block">
</div> The combined total of movies and tv played by top 10 most active users.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_user"> <div class="watch-chart" id="chart_div_plays_by_user">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart... <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
@ -109,12 +113,58 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="tabs-2">
<div class="row">
<div class="col-md-12">
<h4><i class="fa fa-video-camera"></i> Daily Stream type breakdown <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The total play count or duration of movies and tv by the transcode decision. Click a graph point to open up a list of items played for that specific date.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_stream_type">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by source resolution <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by their original resolution (pre-transcoding).
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_source_resolution" style="float: left;">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
</div>
<br>
</div>
</div>
</div>
<div class="col-md-6">
<h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by stream resolution <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by their streamed resolution (post-transcoding).
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_stream_resolution">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
</div>
<br>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tabs-3"> <div role="tabpanel" class="tab-pane" id="tabs-3">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="padded-header"> <h4><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h4>
<h3><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h3> <p class="help-block">
</div> The combined total of movies and tv by month.
</p>
<div class="graphs-instance"> <div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_month"> <div class="watch-chart" id="chart_div_plays_by_month">
<div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart... <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...
@ -125,6 +175,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -171,12 +223,16 @@
<script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script> <script src="interfaces/default/js/graphs/plays_by_hourofday.js"></script>
<script src="interfaces/default/js/graphs/plays_by_platform.js"></script> <script src="interfaces/default/js/graphs/plays_by_platform.js"></script>
<script src="interfaces/default/js/graphs/plays_by_user.js"></script> <script src="interfaces/default/js/graphs/plays_by_user.js"></script>
<script src="interfaces/default/js/graphs/plays_by_stream_type.js"></script>
<script src="interfaces/default/js/graphs/plays_by_source_resolution.js"></script>
<script src="interfaces/default/js/graphs/plays_by_stream_resolution.js"></script>
<script src="interfaces/default/js/graphs/plays_by_month.js"></script> <script src="interfaces/default/js/graphs/plays_by_month.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
var current_range = 30; var current_range = 30;
var yaxis = 'plays'; var yaxis = 'plays';
var current_tab = '#tabs-1';
function loadGraphsTab1(time_range, yaxis) { function loadGraphsTab1(time_range, yaxis) {
setGraphFormat(yaxis); setGraphFormat(yaxis);
@ -186,7 +242,6 @@
type: 'get', type: 'get',
data: { time_range: time_range, y_axis: yaxis }, data: { time_range: time_range, y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(data) {
var dateArray = []; var dateArray = [];
for (var i = 0; i < data.categories.length; i++) { for (var i = 0; i < data.categories.length; i++) {
@ -204,7 +259,6 @@
type: 'get', type: 'get',
data: { time_range: time_range, y_axis: yaxis }, data: { time_range: time_range, y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(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;
@ -217,7 +271,6 @@
type: 'get', type: 'get',
data: { time_range: time_range, y_axis: yaxis }, data: { time_range: time_range, y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(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;
@ -230,7 +283,6 @@
type: 'get', type: 'get',
data: { time_range: time_range, y_axis: yaxis }, data: { time_range: time_range, y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(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;
@ -243,7 +295,6 @@
type: 'get', type: 'get',
data: { time_range: time_range, y_axis: yaxis }, data: { time_range: time_range, y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(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;
@ -252,6 +303,51 @@
}); });
} }
function loadGraphsTab2(time_range, yaxis) {
setGraphFormat(yaxis);
$.ajax({
url: "get_plays_by_stream_type",
type: 'get',
data: { time_range: time_range, y_axis: yaxis },
dataType: "json",
success: function(data) {
var dateArray = [];
for (var i = 0; i < data.categories.length; i++) {
dateArray.push(moment(data.categories[i], 'YYYY-MM-DD').valueOf());
}
hc_plays_by_stream_type_options.yAxis.min = 0;
hc_plays_by_stream_type_options.xAxis.categories = dateArray;
hc_plays_by_stream_type_options.series = data.series;
var hc_plays_by_stream_type = new Highcharts.Chart(hc_plays_by_stream_type_options);
}
});
$.ajax({
url: "get_plays_by_source_resolution",
type: 'get',
data: { time_range: time_range, y_axis: yaxis },
dataType: "json",
success: function(data) {
hc_plays_by_source_resolution_options.xAxis.categories = data.categories;
hc_plays_by_source_resolution_options.series = data.series;
var hc_plays_by_source_resolution = new Highcharts.Chart(hc_plays_by_source_resolution_options);
}
});
$.ajax({
url: "get_plays_by_stream_resolution",
type: 'get',
data: { time_range: time_range, y_axis: yaxis },
dataType: "json",
success: function(data) {
hc_plays_by_stream_resolution_options.xAxis.categories = data.categories;
hc_plays_by_stream_resolution_options.series = data.series;
var hc_plays_by_stream_resolution = new Highcharts.Chart(hc_plays_by_stream_resolution_options);
}
});
}
function loadGraphsTab3(yaxis) { function loadGraphsTab3(yaxis) {
setGraphFormat(yaxis); setGraphFormat(yaxis);
@ -260,7 +356,6 @@
type: 'get', type: 'get',
data: { y_axis: yaxis }, data: { y_axis: yaxis },
dataType: "json", dataType: "json",
cache: false,
success: function(data) { success: function(data) {
var dateArray = []; var dateArray = [];
for (var i = 0; i < data.categories.length; i++) { for (var i = 0; i < data.categories.length; i++) {
@ -277,42 +372,61 @@
// Set initial state // Set initial state
loadGraphsTab1(current_range, yaxis); loadGraphsTab1(current_range, yaxis);
$('#watch-count-graphs').click(function() { // Tab1 opened
loadGraphsTab1(current_range, yaxis); $('#graph-tabs a[href="#tabs-1"]').click(function (e) {
$('#days-selection').show(); current_tab = $(this).attr('href');
}); e.preventDefault();
$(this).tab('show');
$(this).on('shown.bs.tab', function (e) {
$('#days-selection').show();
loadGraphsTab1(current_range, yaxis);
})
})
$('#watch-totals-graphs').click(function() { // Tab2 opened
loadGraphsTab3(yaxis); $('#graph-tabs a[href="#tabs-2"]').click(function (e) {
$('#days-selection').hide(); current_tab = $(this).attr('href');
}); e.preventDefault();
$(this).tab('show');
$(this).on('shown.bs.tab', function (e) {
$('#days-selection').show();
loadGraphsTab2(current_range, yaxis);
})
})
// Tab3 opened
$('#graph-tabs a[href="#tabs-3"]').click(function (e) {
current_tab = $(this).attr('href');
e.preventDefault();
$(this).tab('show');
$(this).on('shown.bs.tab', function (e) {
$('#days-selection').hide();
loadGraphsTab3(yaxis);
})
})
// Date range changed
$('#days-selection').on('change', function() { $('#days-selection').on('change', function() {
current_range = $('input[name=date-options]:checked', '#days-selection').val(); current_range = $('input[name=date-options]:checked', '#days-selection').val();
loadGraphsTab1(current_range, yaxis); if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
$('.days').html(current_range); $('.days').html(current_range);
}); });
// Y-axis changed
$('#yaxis-selection').on('change', function() { $('#yaxis-selection').on('change', function() {
yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val(); yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
loadGraphsTab1(current_range, yaxis); if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
loadGraphsTab3(yaxis); if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
$('.days').html(current_range); if (current_tab == '#tabs-3') { loadGraphsTab3(yaxis); }
}); });
function setGraphFormat(type) { function setGraphFormat(type) {
if (type === 'plays') { if (type === 'plays') {
yaxis_format = function() { return this.value; }; yaxis_format = function() { return this.value; };
hc_plays_by_day_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_dayofweek_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_hourofday_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_platform_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_user_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_month_options.yAxis.labels.formatter = yaxis_format;
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, '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>';
} }
@ -325,27 +439,13 @@
stack_labels_format = function() { stack_labels_format = function() {
return this.total; return this.total;
} }
hc_plays_by_day_options.tooltip.formatter = tooltip_format;
hc_plays_by_dayofweek_options.tooltip.formatter = tooltip_format;
hc_plays_by_hourofday_options.tooltip.formatter = tooltip_format;
hc_plays_by_platform_options.tooltip.formatter = tooltip_format;
hc_plays_by_user_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
$('.yaxis-text').html('Play count'); $('.yaxis-text').html('Play count');
} else { } else {
yaxis_format = function() { return moment.duration(this.value, 'seconds').format("m [mins]"); }; yaxis_format = function() { return moment.duration(this.value, 'seconds').format("m [mins]"); };
hc_plays_by_day_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_dayofweek_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_hourofday_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_platform_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_user_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_month_options.yAxis.labels.formatter = yaxis_format;
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, '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>';
} }
@ -359,16 +459,29 @@
var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]"); var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]");
return s; return s;
} }
hc_plays_by_day_options.tooltip.formatter = tooltip_format;
hc_plays_by_dayofweek_options.tooltip.formatter = tooltip_format;
hc_plays_by_hourofday_options.tooltip.formatter = tooltip_format;
hc_plays_by_platform_options.tooltip.formatter = tooltip_format;
hc_plays_by_user_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
$('.yaxis-text').html('Play duration'); $('.yaxis-text').html('Play duration');
} }
hc_plays_by_day_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_dayofweek_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_hourofday_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_platform_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_user_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_stream_type_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_source_resolution_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_stream_resolution_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_month_options.yAxis.labels.formatter = yaxis_format;
hc_plays_by_day_options.tooltip.formatter = tooltip_format;
hc_plays_by_dayofweek_options.tooltip.formatter = tooltip_format;
hc_plays_by_hourofday_options.tooltip.formatter = tooltip_format;
hc_plays_by_platform_options.tooltip.formatter = tooltip_format;
hc_plays_by_user_options.tooltip.formatter = tooltip_format;
hc_plays_by_stream_type_options.tooltip.formatter = tooltip_format;
hc_plays_by_source_resolution_options.tooltip.formatter = tooltip_format;
hc_plays_by_stream_resolution_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.tooltip.formatter = tooltip_format;
hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
} }
}); });
</script> </script>

View file

@ -0,0 +1,55 @@
var hc_plays_by_source_resolution_options = {
chart: {
type: 'column',
backgroundColor: 'rgba(0,0,0,0)',
renderTo: 'chart_div_plays_by_source_resolution'
},
title: {
text: ''
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
enabled: true,
itemStyle: {
font: '9pt "Open Sans", sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
xAxis: {
categories: [{}],
labels: {
style: {
color: '#aaa'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#aaa'
}
}
},
tooltip: {
shared: true
},
series: [{}]
};

View file

@ -0,0 +1,55 @@
var hc_plays_by_stream_resolution_options = {
chart: {
type: 'column',
backgroundColor: 'rgba(0,0,0,0)',
renderTo: 'chart_div_plays_by_stream_resolution'
},
title: {
text: ''
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
enabled: true,
itemStyle: {
font: '9pt "Open Sans", sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
xAxis: {
categories: [{}],
labels: {
style: {
color: '#aaa'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#aaa'
}
}
},
tooltip: {
shared: true
},
series: [{}]
};

View file

@ -0,0 +1,65 @@
var hc_plays_by_stream_type_options = {
chart: {
type: 'line',
backgroundColor: 'rgba(0,0,0,0)',
renderTo: 'chart_div_plays_by_stream_type'
},
title: {
text: ''
},
legend: {
enabled: true,
itemStyle: {
font: '9pt "Open Sans", sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
selectHandler(this.category);
}
}
}
}
},
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("MMM D");
},
style: {
color: '#aaa'
}
},
categories: [{}]
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#aaa'
}
}
},
tooltip: {
shared: true
},
series: [{}]
};

View file

@ -382,3 +382,210 @@ class Graphs(object):
output = {'categories': categories, output = {'categories': categories,
'series': [series_1_output]} 'series': [series_1_output]}
return output return output
def get_total_plays_per_stream_type(self, time_range='30', y_axis='plays'):
monitor_db = database.MonitorDatabase()
if not time_range.isdigit():
time_range = '30'
try:
if y_axis == 'plays':
query = 'SELECT date(session_history.started, "unixepoch", "localtime") as date_played, ' \
'SUM(case when session_history_media_info.video_decision = "direct play" then 1 else 0 end) as dp_count, ' \
'SUM(case when session_history_media_info.video_decision = "copy" then 1 else 0 end) as ds_count, ' \
'SUM(case when session_history_media_info.video_decision = "transcode" then 1 else 0 end) as tc_count ' \
'FROM session_history ' \
'JOIN session_history_media_info ON session_history.id = session_history_media_info.id ' \
'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-%s days", "localtime")) AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY date_played ' \
'ORDER BY started ASC' % time_range
result = monitor_db.select(query)
else:
query = 'SELECT date(session_history.started, "unixepoch", "localtime") as date_played, ' \
'SUM(case when session_history_media_info.video_decision = "direct play" AND ' \
'session_history.stopped > 0 then (stopped - started) else 0 end) as dp_duration, ' \
'SUM(case when session_history_media_info.video_decision = "copy" AND ' \
'session_history.stopped > 0 then (stopped - started) else 0 end) as ds_duration, ' \
'SUM(case when session_history_media_info.video_decision = "transcode" ' \
'AND session_history.stopped > 0 then (stopped - started) else 0 end) as tc_duration ' \
'FROM session_history ' \
'JOIN session_history_media_info ON session_history.id = session_history_media_info.id ' \
'WHERE datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-%s days", "localtime") AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY date_played ' \
'ORDER BY started ASC' % time_range
result = monitor_db.select(query)
except:
logger.warn("Unable to execute database query.")
return None
# create our date range as some days may not have any data
# but we still want to display them
base = datetime.date.today()
date_list = [base - datetime.timedelta(days=x) for x in range(0, int(time_range))]
categories = []
series_1 = []
series_2 = []
series_3 = []
for date_item in sorted(date_list):
date_string = date_item.strftime('%Y-%m-%d')
categories.append(date_string)
series_1_value = 0
series_2_value = 0
series_3_value = 0
for item in result:
if date_string == item[0]:
series_1_value = item[1]
series_2_value = item[2]
series_3_value = item[3]
break
else:
series_1_value = 0
series_2_value = 0
series_3_value = 0
series_1.append(series_1_value)
series_2.append(series_2_value)
series_3.append(series_3_value)
series_1_output = {'name': 'Direct Play',
'data': series_1}
series_2_output = {'name': 'Direct Stream',
'data': series_2}
series_3_output = {'name': 'Transcode',
'data': series_3}
output = {'categories': categories,
'series': [series_1_output, series_2_output, series_3_output]}
return output
def get_total_plays_by_source_resolution(self, time_range='30', y_axis='plays'):
monitor_db = database.MonitorDatabase()
if not time_range.isdigit():
time_range = '30'
if y_axis == 'plays':
query = 'SELECT ' \
'count(session_history.id) as play_count, ' \
'session_history_media_info.video_resolution AS resolution ' \
'FROM session_history ' \
'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY resolution ' \
'ORDER BY play_count DESC ' \
'LIMIT 10'
result = monitor_db.select(query)
y_axis_label = 'Total plays'
else:
query = 'SELECT ' \
'SUM(case when stopped > 0 then (stopped - started) else 0 end) as duration, ' \
'session_history_media_info.video_resolution AS resolution ' \
'FROM session_history ' \
'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY resolution ' \
'ORDER BY duration DESC ' \
'LIMIT 10'
result = monitor_db.select(query)
y_axis_label = 'Total duration'
categories = []
series_1 = []
for item in result:
categories.append(item[1])
series_1.append(item[0])
series_1_output = {'name': y_axis_label,
'data': series_1}
output = {'categories': categories,
'series': [series_1_output]}
return output
def get_total_plays_by_stream_resolution(self, time_range='30', y_axis='plays'):
monitor_db = database.MonitorDatabase()
if not time_range.isdigit():
time_range = '30'
if y_axis == 'plays':
query = 'SELECT ' \
'count(session_history.id) as play_count, ' \
'(case when session_history_media_info.video_decision = "transcode" then ' \
'(case ' \
'when session_history_media_info.transcode_height <= 360 then "sd" ' \
'when session_history_media_info.transcode_height <= 480 then "480" ' \
'when session_history_media_info.transcode_height <= 576 then "576" ' \
'when session_history_media_info.transcode_height <= 720 then "720" ' \
'when session_history_media_info.transcode_height <= 1080 then "1080" ' \
'when session_history_media_info.transcode_height <= 1440 then "QHD" ' \
'when session_history_media_info.transcode_height <= 2160 then "4K" ' \
'else "unknown" end) else session_history_media_info.video_resolution end) as resolution ' \
'FROM session_history ' \
'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY resolution ' \
'ORDER BY play_count DESC ' \
'LIMIT 10'
result = monitor_db.select(query)
y_axis_label = 'Total plays'
else:
query = 'SELECT ' \
'SUM(case when stopped > 0 then (stopped - started) else 0 end) as duration, ' \
'(case when session_history_media_info.video_decision = "transcode" then ' \
'(case ' \
'when session_history_media_info.transcode_height <= 360 then "sd" ' \
'when session_history_media_info.transcode_height <= 480 then "480" ' \
'when session_history_media_info.transcode_height <= 576 then "576" ' \
'when session_history_media_info.transcode_height <= 720 then "720" ' \
'when session_history_media_info.transcode_height <= 1080 then "1080" ' \
'when session_history_media_info.transcode_height <= 1440 then "QHD" ' \
'when session_history_media_info.transcode_height <= 2160 then "4K" ' \
'else "unknown" end) else session_history_media_info.video_resolution end) as resolution ' \
'FROM session_history ' \
'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
'(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
'GROUP BY resolution ' \
'ORDER BY duration DESC ' \
'LIMIT 10'
result = monitor_db.select(query)
y_axis_label = 'Total duration'
categories = []
series_1 = []
for item in result:
categories.append(item[1])
series_1.append(item[0])
series_1_output = {'name': y_axis_label,
'data': series_1}
output = {'categories': categories,
'series': [series_1_output]}
return output

View file

@ -902,6 +902,42 @@ class WebInterface(object):
else: else:
logger.warn('Unable to retrieve data.') logger.warn('Unable to retrieve data.')
@cherrypy.expose
def get_plays_by_stream_type(self, time_range='30', y_axis='plays', **kwargs):
graph = graphs.Graphs()
result = graph.get_total_plays_per_stream_type(time_range=time_range, y_axis=y_axis)
if result:
cherrypy.response.headers['Content-type'] = 'application/json'
return json.dumps(result)
else:
logger.warn('Unable to retrieve data.')
@cherrypy.expose
def get_plays_by_source_resolution(self, time_range='30', y_axis='plays', **kwargs):
graph = graphs.Graphs()
result = graph.get_total_plays_by_source_resolution(time_range=time_range, y_axis=y_axis)
if result:
cherrypy.response.headers['Content-type'] = 'application/json'
return json.dumps(result)
else:
logger.warn('Unable to retrieve data.')
@cherrypy.expose
def get_plays_by_stream_resolution(self, time_range='30', y_axis='plays', **kwargs):
graph = graphs.Graphs()
result = graph.get_total_plays_by_stream_resolution(time_range=time_range, y_axis=y_axis)
if result:
cherrypy.response.headers['Content-type'] = 'application/json'
return json.dumps(result)
else:
logger.warn('Unable to retrieve data.')
@cherrypy.expose @cherrypy.expose
def get_friends_list(self, **kwargs): def get_friends_list(self, **kwargs):