mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-07 13:41:15 -07:00
604 lines
No EOL
31 KiB
HTML
604 lines
No EOL
31 KiB
HTML
<%inherit file="base.html"/>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.bootstrap.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/plexpy-dataTables.css">
|
|
</%def>
|
|
|
|
<%def name="body()">
|
|
<div class="container-fluid">
|
|
<div class='table-card-header'>
|
|
<div class="header-bar">
|
|
<span><i class="fa fa-bar-chart"></i> Graphs</span>
|
|
</div>
|
|
<div class="button-bar hidden-xs">
|
|
<div class="btn-group" data-toggle="buttons" id="yaxis-selection">
|
|
<label class="btn btn-dark active">
|
|
<input type="radio" name="yaxis-options" id="yaxis-count" value="plays" autocomplete="off" checked> Play Count
|
|
</label>
|
|
<label class="btn btn-dark">
|
|
<input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
|
|
</label>
|
|
</div>
|
|
<div class="btn-group" data-toggle="buttons" id="days-selection">
|
|
<label class="btn btn-dark">
|
|
<input type="radio" name="date-options" id="graph-7" value="7" autocomplete="off"> 7 days
|
|
</label>
|
|
<label class="btn btn-dark active">
|
|
<input type="radio" name="date-options" id="graph-30" value="30" autocomplete="off" checked> 30 days
|
|
</label>
|
|
<label class="btn btn-dark">
|
|
<input type="radio" name="date-options" id="graph-90" value="90" autocomplete="off"> 90 days
|
|
</label>
|
|
<label class="btn btn-dark">
|
|
<input type="radio" name="date-options" id="graph-365" value="365" autocomplete="off"> 1 year
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='table-card-back'>
|
|
<ul class="nav nav-pills" role="tablist" id="graph-tabs">
|
|
<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 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>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="tabs-1">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<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>
|
|
<p class="help-block">
|
|
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="watch-chart" id="chart_div_plays_by_day">
|
|
<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-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The combined total of movies and tv played per day of the week.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<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>
|
|
<p class="help-block">
|
|
The combined total of movies and tv played per hour of the day.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<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>
|
|
<p class="help-block">
|
|
The combined total of movies and tv played by top 10 most active platforms.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<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>
|
|
<p class="help-block">
|
|
The combined total of movies and tv played by top 10 most active users.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</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 class="row">
|
|
<div class="col-md-6">
|
|
<h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by platform and stream type <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The combined total of movies and tv by platform and stream type.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="chart_div_plays_by_platform_by_stream_type" 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-user"></i> <span class="yaxis-text">Play count</span> by user and stream type <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The combined total of movies and tv by user and stream type.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="chart_div_plays_by_user_by_stream_type" style="float: left;">
|
|
<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 class="row">
|
|
<div class="col-md-12">
|
|
<h4><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h4>
|
|
<p class="help-block">
|
|
The combined total of movies and tv by month.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<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>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
<script src="interfaces/default/js/moment-with-locale.js"></script>
|
|
<script src="interfaces/default/js/moment-duration-format.js"></script>
|
|
<script src="interfaces/default/js/highcharts/js/highcharts.js"></script>
|
|
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.bootstrap.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.bootstrap.pagination.js"></script>
|
|
|
|
<script>
|
|
// Modal popup dialog
|
|
function selectHandler(selectedDate) {
|
|
|
|
try
|
|
{
|
|
var dateValue = new Date(selectedDate);
|
|
var d = dateValue.getDate();
|
|
var m = dateValue.getMonth() + 1;
|
|
var y = dateValue.getFullYear();
|
|
var dateString = '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
|
|
|
|
$.ajax({
|
|
"url": "history_table_modal",
|
|
type: 'post',
|
|
data: { 'start_date': dateString },
|
|
complete: function(xhr, status) {
|
|
$('#history-modal').modal('show');
|
|
$("#history-modal").html(xhr.responseText);
|
|
}
|
|
});
|
|
}
|
|
catch(err)
|
|
{
|
|
console.log("Failed to retrieve data");
|
|
}
|
|
}
|
|
</script>
|
|
<script src="interfaces/default/js/graphs/plays_by_day.js"></script>
|
|
<script src="interfaces/default/js/graphs/plays_by_dayofweek.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_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_platform_by_stream_type.js"></script>
|
|
<script src="interfaces/default/js/graphs/plays_by_user_by_stream_type.js"></script>
|
|
<script src="interfaces/default/js/graphs/plays_by_month.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
// Save graph state to cookies
|
|
$('input[name=yaxis-options]').change(function() {
|
|
setCookie('graphType', $(this).val(), 365, '/');
|
|
});
|
|
$('input[name=date-options]').change(function() {
|
|
setCookie('graphDate', $(this).val(), 365, '/');
|
|
});
|
|
$('a[data-toggle=tab]').click(function() {
|
|
setCookie('graphTab', $(this).attr('href'), 365, '/');
|
|
});
|
|
|
|
// Initial values for graph if no saved state
|
|
var yaxis = 'plays';
|
|
var current_range = 30;
|
|
var current_tab = '#tabs-1';
|
|
|
|
// Read saved graph state from cookies and set initial values
|
|
if(getCookie('graphType')) {
|
|
var yaxis = getCookie('graphType');
|
|
$('input[name=yaxis-options][value=' + yaxis + ']').prop('checked', true).trigger('click');
|
|
}
|
|
if(getCookie('graphDate')) {
|
|
var current_range = getCookie('graphDate');
|
|
$('input[name=date-options][value=' + current_range + ']').prop('checked', true).trigger('click');
|
|
$('.days').html(current_range);
|
|
}
|
|
if(getCookie('graphTab')) {
|
|
var current_tab = getCookie('graphTab');
|
|
$('a[data-toggle=tab][href=' + current_tab + ']').trigger('click');
|
|
}
|
|
|
|
function loadGraphsTab1(time_range, yaxis) {
|
|
setGraphFormat(yaxis);
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_date",
|
|
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());
|
|
// Highlight the weekend
|
|
if ((moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sat') ||
|
|
(moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sun')) {
|
|
hc_plays_by_day_options.xAxis.plotBands.push({
|
|
from: i-0.5,
|
|
to: i+0.5,
|
|
color: 'rgba(80,80,80,0.3)'
|
|
});
|
|
}
|
|
}
|
|
hc_plays_by_day_options.yAxis.min = 0;
|
|
hc_plays_by_day_options.xAxis.categories = dateArray;
|
|
hc_plays_by_day_options.series = data.series;
|
|
var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_dayofweek",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
|
|
hc_plays_by_dayofweek_options.series = data.series;
|
|
var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_hourofday",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_hourofday_options.xAxis.categories = data.categories;
|
|
hc_plays_by_hourofday_options.series = data.series;
|
|
var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_top_10_platforms",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_platform_options.xAxis.categories = data.categories;
|
|
hc_plays_by_platform_options.series = data.series;
|
|
var hc_plays_by_platform = new Highcharts.Chart(hc_plays_by_platform_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_top_10_users",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_user_options.xAxis.categories = data.categories;
|
|
hc_plays_by_user_options.series = data.series;
|
|
var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options);
|
|
}
|
|
});
|
|
}
|
|
|
|
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());
|
|
// Highlight the weekend
|
|
if ((moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sat') ||
|
|
(moment(data.categories[i], 'YYYY-MM-DD').format('ddd') == 'Sun')) {
|
|
hc_plays_by_stream_type_options.xAxis.plotBands.push({
|
|
from: i-0.5,
|
|
to: i+0.5,
|
|
color: 'rgba(80,80,80,0.3)'
|
|
});
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_stream_type_by_top_10_platforms",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_platform_by_stream_type_options.xAxis.categories = data.categories;
|
|
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);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_stream_type_by_top_10_users",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_user_by_stream_type_options.xAxis.categories = data.categories;
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadGraphsTab3(yaxis) {
|
|
setGraphFormat(yaxis);
|
|
|
|
$.ajax({
|
|
url: "get_plays_per_month",
|
|
type: 'get',
|
|
data: { y_axis: yaxis },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
hc_plays_by_month_options.yAxis.min = 0;
|
|
hc_plays_by_month_options.xAxis.categories = data.categories;
|
|
hc_plays_by_month_options.series = data.series;
|
|
var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Set initial state
|
|
loadGraphsTab1(current_range, yaxis);
|
|
|
|
// Tab1 opened
|
|
$('#graph-tabs a[href="#tabs-1"]').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
$('#days-selection').show();
|
|
loadGraphsTab1(current_range, yaxis);
|
|
})
|
|
|
|
// Tab2 opened
|
|
$('#graph-tabs a[href="#tabs-2"]').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
$('#days-selection').show();
|
|
loadGraphsTab2(current_range, yaxis);
|
|
})
|
|
|
|
// Tab3 opened
|
|
$('#graph-tabs a[href="#tabs-3"]').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
$('#days-selection').hide();
|
|
console.log('loading....');
|
|
loadGraphsTab3(yaxis);
|
|
})
|
|
|
|
|
|
// Date range changed
|
|
$('#days-selection').on('change', function() {
|
|
current_range = $('input[name=date-options]:checked', '#days-selection').val();
|
|
if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
|
|
if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
|
|
$('.days').html(current_range);
|
|
});
|
|
|
|
// Y-axis changed
|
|
$('#yaxis-selection').on('change', function() {
|
|
yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
|
|
if (current_tab == '#tabs-1') { loadGraphsTab1(current_range, yaxis); }
|
|
if (current_tab == '#tabs-2') { loadGraphsTab2(current_range, yaxis); }
|
|
if (current_tab == '#tabs-3') { loadGraphsTab3(yaxis); }
|
|
});
|
|
|
|
function setGraphFormat(type) {
|
|
if (type === 'plays') {
|
|
yaxis_format = function() { return this.value; };
|
|
tooltip_format = function() {
|
|
if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
|
|
var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
|
|
} else {
|
|
var s = '<b>'+ this.x +'</b>';
|
|
}
|
|
if (this.points.length > 1) {
|
|
var total = 0;
|
|
$.each(this.points, function(i, point) {
|
|
s += '<br/>'+point.series.name+': '+point.y;
|
|
total += point.y;
|
|
});
|
|
s += '<br><b>Total: '+total+'</b>';
|
|
} else {
|
|
$.each(this.points, function(i, point) {
|
|
s += '<br/>'+point.series.name+': '+point.y;
|
|
});
|
|
}
|
|
return s;
|
|
}
|
|
stack_labels_format = function() {
|
|
return this.total;
|
|
}
|
|
|
|
$('.yaxis-text').html('Play count');
|
|
} else {
|
|
yaxis_format = function() { return moment.duration(this.value, 'seconds').format("m [mins]"); };
|
|
tooltip_format = function() {
|
|
if (moment(this.x, 'X').isValid() && (this.x > 946684800)) {
|
|
var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
|
|
} else {
|
|
var s = '<b>'+ this.x +'</b>';
|
|
}
|
|
if (this.points.length > 1) {
|
|
var total = 0;
|
|
$.each(this.points, function(i, point) {
|
|
s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'seconds').format('D [days] H [hrs] m [mins]');
|
|
total += point.y;
|
|
});
|
|
s += '<br/><b>Total: '+moment.duration(total, 'seconds').format('D [days] H [hrs] m [mins]')+'</b>';
|
|
} else {
|
|
$.each(this.points, function(i, point) {
|
|
s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'seconds').format('D [days] H [hrs] m [mins]');
|
|
});
|
|
}
|
|
return s;
|
|
}
|
|
stack_labels_format = function() {
|
|
var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]");
|
|
return s;
|
|
}
|
|
$('.yaxis-text').html('Play duration');
|
|
}
|
|
|
|
hc_plays_by_day_options.xAxis.plotBands = [];
|
|
hc_plays_by_stream_type_options.xAxis.plotBands = [];
|
|
|
|
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_platform_by_stream_type_options.yAxis.labels.formatter = yaxis_format;
|
|
hc_plays_by_user_by_stream_type_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_platform_by_stream_type_options.tooltip.formatter = tooltip_format;
|
|
hc_plays_by_platform_by_stream_type_options.yAxis.stackLabels.formatter = stack_labels_format;
|
|
hc_plays_by_user_by_stream_type_options.tooltip.formatter = tooltip_format;
|
|
hc_plays_by_user_by_stream_type_options.yAxis.stackLabels.formatter = stack_labels_format;
|
|
hc_plays_by_month_options.tooltip.formatter = tooltip_format;
|
|
hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
|
|
}
|
|
});
|
|
</script>
|
|
</%def> |