mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-03-12 04:35:40 -07:00
835 lines
42 KiB
HTML
835 lines
42 KiB
HTML
<%inherit file="base.html"/>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="${http_root}css/bootstrap-select.min.css">
|
|
<link rel="stylesheet" href="${http_root}css/dataTables.bootstrap.min.css">
|
|
<link rel="stylesheet" href="${http_root}css/tautulli-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">
|
|
<div class="btn-group" id="user-selection">
|
|
<label>
|
|
<select name="graph-user" id="graph-user" multiple>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="btn-group" style="margin-right: 2px;" data-toggle="buttons" id="yaxis-selection">
|
|
<label class="btn btn-dark btn-filter">
|
|
<input type="radio" name="yaxis-options" id="yaxis-plays" value="plays" autocomplete="off"> Play Count
|
|
</label>
|
|
<label class="btn btn-dark btn-filter">
|
|
<input type="radio" name="yaxis-options" id="yaxis-duration" value="duration" autocomplete="off"> Play Duration
|
|
</label>
|
|
</div>
|
|
<div class="input-group pull-right" style="width: 1px;" id="days-selection">
|
|
<span class="input-group-addon btn-dark inactive">Last</span>
|
|
<input type="number" class="form-control number-input" name="graph-days" id="graph-days" value="30" min="1" data-default="7" data-toggle="tooltip" title="Min: 1 day" />
|
|
<span class="input-group-addon btn-dark inactive">days</span>
|
|
</div>
|
|
<div class="input-group pull-right" style="width: 1px;" id="months-selection">
|
|
<span class="input-group-addon btn-dark inactive">Last</span>
|
|
<input type="number" class="form-control number-input" name="graph-months" id="graph-months" value="12" min="1" data-default="12" data-toggle="tooltip" title="Min: 1 month" />
|
|
<span class="input-group-addon btn-dark inactive">months</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-card-back">
|
|
<ul class="nav nav-list nav-pills" role="tablist" id="graph-tabs">
|
|
<li role="presentation"><a id="nav-tabs-plays" href="#tabs-plays" aria-controls="tabs-plays" data-toggle="tab" role="tab">Media Type</a></li>
|
|
<li role="presentation"><a id="nav-tabs-stream" href="#tabs-stream" aria-controls="tabs-stream" data-toggle="tab" role="tab">Stream Type</a></li>
|
|
<li role="presentation"><a id="nav-tabs-total" href="#tabs-total" aria-controls="tabs-total" data-toggle="tab" role="tab">Play Totals</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane" id="tabs-plays">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4><i class="fa fa-history"></i> Daily <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by media type <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The total play count or duration of tv, movies, and music 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="graph_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 tv, movies, and music played per day of the week.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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 tv, movies, and music played per hour of the day.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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 tv, movies, and music played by top 10 most active platforms.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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 tv, movies, and music played by top 10 most active users.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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-stream">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4><i class="fa fa-video-camera"></i> Daily <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by stream type <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The total play count or duration of tv, movies, and music 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="graph_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" id="concurrent-graph">
|
|
<div class="col-md-12">
|
|
<h4><i class="fa fa-video-camera"></i> Daily concurrent stream count</span> by stream type <small>Last <span class="days">30</span> days</small></h4>
|
|
<p class="help-block">
|
|
The total count of concurrent streams of tv, movies, and music by the transcode decision.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_concurrent_streams_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-arrows-alt"></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 tv and movies by their original resolution (pre-transcoding).
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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-arrows-alt"></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 tv and movies by their streamed resolution (post-transcoding).
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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 tv, movies, and music by platform and stream type.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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 tv, movies, and music by user and stream type.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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-total">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4><i class="fa fa-calendar"></i> Total <span class="yaxis-text" style="text-transform: lowercase;">play count</span> by month <small>Last <span class="months">12</span> months</small></h4>
|
|
<p class="help-block">
|
|
The combined total of tv, movies, and music by month.
|
|
</p>
|
|
<div class="graphs-instance">
|
|
<div class="watch-chart" id="graph_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>
|
|
</div>
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="modalIncludes()">
|
|
<div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
|
|
</div>
|
|
<div class="modal fade" id="info-modal" tabindex="-1" role="dialog" aria-labelledby="info-modal">
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
<script src="${http_root}js/bootstrap-select.min.js"></script>
|
|
<script src="${http_root}js/highcharts.min.js"></script>
|
|
<script src="${http_root}js/jquery.dataTables.min.js"></script>
|
|
<script src="${http_root}js/dataTables.bootstrap.min.js"></script>
|
|
<script src="${http_root}js/dataTables.bootstrap.pagination.js"></script>
|
|
|
|
<script>
|
|
var selected_user_id = null;
|
|
|
|
// Modal popup dialog
|
|
function selectHandler(selectedDate, selectedSeries) {
|
|
|
|
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);
|
|
|
|
var media_type = null;
|
|
var transcode_decision = null;
|
|
switch(selectedSeries) {
|
|
case "TV": media_type = 'episode'; break;
|
|
case "Movies": media_type = 'movie'; break;
|
|
case "Music": media_type = 'track'; break;
|
|
case "Live TV": media_type = 'live'; break;
|
|
case "Direct Play": transcode_decision = 'direct play'; break;
|
|
case "Direct Stream": transcode_decision = 'copy'; break;
|
|
case "Transcode": transcode_decision = 'transcode'; break;
|
|
}
|
|
|
|
$.ajax({
|
|
url: "history_table_modal",
|
|
cache: false,
|
|
async: true,
|
|
data: {
|
|
user_id: selected_user_id,
|
|
start_date: dateString,
|
|
media_type: media_type,
|
|
transcode_decision: transcode_decision
|
|
},
|
|
complete: function(xhr, status) {
|
|
$("#history-modal").html(xhr.responseText);
|
|
$('#history-modal').modal();
|
|
}
|
|
});
|
|
}
|
|
catch(err)
|
|
{
|
|
console.log("Failed to retrieve history modal data.");
|
|
}
|
|
}
|
|
|
|
function getGraphVisibility(chart_name, data_series) {
|
|
var chart_key = 'HighCharts_' + chart_name;
|
|
var chart_visibility = JSON.parse(getLocalStorage(chart_key, null)) || [];
|
|
|
|
chart_visibility = chart_visibility.reduce(function(obj, s) {
|
|
obj[s.name] = s.visible;
|
|
return obj;
|
|
}, {});
|
|
|
|
return data_series.map(function(s) {
|
|
var obj = Object.assign({}, s);
|
|
obj.visible = (chart_visibility[s.name] !== false);
|
|
return obj
|
|
});
|
|
}
|
|
|
|
function setGraphVisibility(chart_name, data_series, series_name) {
|
|
var chart_key = 'HighCharts_' + chart_name;
|
|
|
|
var chart_visibility = data_series.map(function(s) {
|
|
return {name: s.name, visible: (s.name === series_name) ? !s.visible : s.visible}
|
|
});
|
|
|
|
setLocalStorage(chart_key, JSON.stringify(chart_visibility));
|
|
}
|
|
|
|
function getGraphColors(data_series) {
|
|
var colors = {
|
|
'TV': '#E5A00D',
|
|
'Movies': '#FFFFFF',
|
|
'Music': '#F06464',
|
|
'Live TV': '#19A0D7',
|
|
'Direct Play': '#E5A00D',
|
|
'Direct Stream': '#FFFFFF',
|
|
'Transcode': '#F06464',
|
|
'Max. Concurrent Streams': '#96C83C'
|
|
};
|
|
var series_colors = [];
|
|
$.each(data_series, function(index, series) {
|
|
series_colors.push(colors[series.name]);
|
|
});
|
|
return series_colors;
|
|
}
|
|
</script>
|
|
<script src="${http_root}js/graphs/plays_by_day.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_dayofweek.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_hourofday.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_platform.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_user.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_stream_type.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/concurrent_streams_by_stream_type.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_source_resolution.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_stream_resolution.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_platform_by_stream_type.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_user_by_stream_type.js${cache_param}"></script>
|
|
<script src="${http_root}js/graphs/plays_by_month.js${cache_param}"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
// Initial values for graph from local storage
|
|
var yaxis = getLocalStorage('graph_type', 'plays');
|
|
var current_day_range = getLocalStorage('graph_days', 30);
|
|
var current_month_range = getLocalStorage('graph_months', 12);
|
|
var current_tab = '#' + getLocalStorage('graph_tab', 'tabs-plays');
|
|
|
|
// Update tab values from upgrading
|
|
switch (current_tab) {
|
|
case '#tabs-1':
|
|
current_tab = '#tabs-plays'
|
|
break
|
|
case '#tabs-2':
|
|
current_tab = '#tabs-stream'
|
|
break
|
|
case '#tabs-3':
|
|
current_tab = '#tabs-total'
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
|
|
if (window.location.hash === '#concurrent-graph') {
|
|
current_tab = '#tabs-stream';
|
|
}
|
|
|
|
$('#yaxis-' + yaxis).prop('checked', true);
|
|
$('#yaxis-' + yaxis).closest('label').addClass('active');
|
|
$('#graph-days').val(current_day_range);
|
|
$('#graph-months').val(current_month_range);
|
|
$('#nav-' + current_tab.replace('#', '')).tab('show').trigger('show.bs.tab');
|
|
//$(current_tab).addClass('active');
|
|
|
|
|
|
$('.days').text(current_day_range);
|
|
$('.months').text(current_month_range);
|
|
|
|
// Load user ids and names (for the selector)
|
|
$.ajax({
|
|
url: 'get_user_names',
|
|
type: 'get',
|
|
dataType: "json",
|
|
success: function (data) {
|
|
let select = $('#graph-user');
|
|
let by_id = {};
|
|
data.sort(function(a, b) {
|
|
return a.friendly_name.localeCompare(b.friendly_name);
|
|
});
|
|
data.forEach(function(item) {
|
|
select.append('<option value="' + item.user_id + '">' +
|
|
item.friendly_name + '</option>');
|
|
by_id[item.user_id] = item.friendly_name;
|
|
});
|
|
select.selectpicker({
|
|
countSelectedText: function(sel, total) {
|
|
if (sel === 0 || sel === total) {
|
|
return 'All users';
|
|
} else if (sel > 1) {
|
|
return sel + ' users';
|
|
} else {
|
|
return select.val().map(function(id) {
|
|
return by_id[id];
|
|
}).join(', ');
|
|
}
|
|
},
|
|
style: 'btn-dark',
|
|
actionsBox: true,
|
|
selectedTextFormat: 'count',
|
|
noneSelectedText: 'All users'
|
|
});
|
|
select.selectpicker('render');
|
|
select.selectpicker('selectAll');
|
|
}
|
|
});
|
|
|
|
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) {
|
|
$('#days-selection').show();
|
|
$('#months-selection').hide();
|
|
|
|
setGraphFormat(yaxis);
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_date",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
var dateArray = [];
|
|
$.each(data.categories, function (i, day) {
|
|
dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
|
|
// Highlight the weekend
|
|
if ((moment(day, 'YYYY-MM-DD').format('ddd') === 'Sat') ||
|
|
(moment(day, '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)'
|
|
});
|
|
}
|
|
});
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_day_options.yAxis.min = 0;
|
|
hc_plays_by_day_options.xAxis.categories = dateArray;
|
|
hc_plays_by_day_options.series = getGraphVisibility(hc_plays_by_day_options.chart.renderTo, data.series);
|
|
hc_plays_by_day_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_dayofweek_options.xAxis.categories = data.categories;
|
|
hc_plays_by_dayofweek_options.series = getGraphVisibility(hc_plays_by_dayofweek_options.chart.renderTo, data.series);
|
|
hc_plays_by_dayofweek_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_hourofday_options.xAxis.categories = data.categories;
|
|
hc_plays_by_hourofday_options.series = getGraphVisibility(hc_plays_by_hourofday_options.chart.renderTo, data.series);
|
|
hc_plays_by_hourofday_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_platform_options.xAxis.categories = data.categories;
|
|
hc_plays_by_platform_options.series = getGraphVisibility(hc_plays_by_platform_options.chart.renderTo, data.series);
|
|
hc_plays_by_platform_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_user_options.xAxis.categories = data.categories;
|
|
hc_plays_by_user_options.series = getGraphVisibility(hc_plays_by_user_options.chart.renderTo, data.series);
|
|
hc_plays_by_user_options.colors = getGraphColors(data.series);
|
|
var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options);
|
|
}
|
|
});
|
|
|
|
$('#nav-tabs-plays').tab('show');
|
|
}
|
|
|
|
function loadGraphsTab2(time_range, yaxis) {
|
|
$('#days-selection').show();
|
|
$('#months-selection').hide();
|
|
|
|
setGraphFormat(yaxis);
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_stream_type",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
var dateArray = [];
|
|
$.each(data.categories, function (i, day) {
|
|
dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
|
|
// Highlight the weekend
|
|
if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
|
|
(moment(day, '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)'
|
|
});
|
|
}
|
|
});
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
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 = getGraphVisibility(hc_plays_by_stream_type_options.chart.renderTo, data.series);
|
|
hc_plays_by_stream_type_options.colors = getGraphColors(data.series);
|
|
var hc_plays_by_stream_type = new Highcharts.Chart(hc_plays_by_stream_type_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_concurrent_streams_by_stream_type",
|
|
type: 'get',
|
|
data: { time_range: time_range, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
var dateArray = [];
|
|
$.each(data.categories, function (i, day) {
|
|
dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
|
|
// Highlight the weekend
|
|
if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
|
|
(moment(day, '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_concurrent_streams_by_stream_type_options.yAxis.min = 0;
|
|
hc_concurrent_streams_by_stream_type_options.xAxis.categories = dateArray;
|
|
hc_concurrent_streams_by_stream_type_options.series = getGraphVisibility(hc_concurrent_streams_by_stream_type_options.chart.renderTo, data.series);
|
|
hc_concurrent_streams_by_stream_type_options.colors = getGraphColors(data.series);
|
|
var hc_plays_by_stream_type = new Highcharts.Chart(hc_concurrent_streams_by_stream_type_options);
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: "get_plays_by_source_resolution",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_source_resolution_options.xAxis.categories = data.categories;
|
|
hc_plays_by_source_resolution_options.series = getGraphVisibility(hc_plays_by_source_resolution_options.chart.renderTo, data.series);
|
|
hc_plays_by_source_resolution_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_stream_resolution_options.xAxis.categories = data.categories;
|
|
hc_plays_by_stream_resolution_options.series = getGraphVisibility(hc_plays_by_stream_resolution_options.chart.renderTo, data.series);
|
|
hc_plays_by_stream_resolution_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
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.series = getGraphVisibility(hc_plays_by_platform_by_stream_type_options.chart.renderTo, data.series);
|
|
hc_plays_by_platform_by_stream_type_options.colors = getGraphColors(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, user_id: selected_user_id },
|
|
dataType: "json",
|
|
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.series = getGraphVisibility(hc_plays_by_user_by_stream_type_options.chart.renderTo, data.series);
|
|
hc_plays_by_user_by_stream_type_options.colors = getGraphColors(data.series);
|
|
var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options);
|
|
}
|
|
});
|
|
|
|
$('#nav-tabs-stream').tab('show');
|
|
}
|
|
|
|
function loadGraphsTab3(time_range, yaxis) {
|
|
$('#days-selection').hide();
|
|
$('#months-selection').show();
|
|
|
|
setGraphFormat(yaxis);
|
|
|
|
$.ajax({
|
|
url: "get_plays_per_month",
|
|
type: 'get',
|
|
data: { time_range: time_range, y_axis: yaxis, user_id: selected_user_id },
|
|
dataType: "json",
|
|
success: function(data) {
|
|
if (yaxis === 'duration') { dataSecondsToHours(data); }
|
|
hc_plays_by_month_options.yAxis.min = 0;
|
|
hc_plays_by_month_options.xAxis.categories = data.categories;
|
|
hc_plays_by_month_options.series = getGraphVisibility(hc_plays_by_month_options.chart.renderTo, data.series);
|
|
hc_plays_by_month_options.colors = getGraphColors(data.series);
|
|
var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options);
|
|
}
|
|
});
|
|
|
|
$('#nav-tabs-total').tab('show');
|
|
}
|
|
|
|
// Tab1 opened
|
|
$('#nav-tabs-plays').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
setLocalStorage('graph_tab', current_tab.replace('#',''));
|
|
loadGraphsTab1(current_day_range, yaxis);
|
|
});
|
|
|
|
// Tab2 opened
|
|
$('#nav-tabs-stream').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
setLocalStorage('graph_tab', current_tab.replace('#',''));
|
|
loadGraphsTab2(current_day_range, yaxis);
|
|
});
|
|
|
|
// Tab3 opened
|
|
$('#nav-tabs-total').on('shown.bs.tab', function (e) {
|
|
e.preventDefault();
|
|
current_tab = $(this).attr('href');
|
|
setLocalStorage('graph_tab', current_tab.replace('#',''));
|
|
loadGraphsTab3(current_month_range, yaxis);
|
|
});
|
|
|
|
// Date range changed
|
|
$('#graph-days').tooltip({ container: 'body', placement: 'top', html: true });
|
|
$('#graph-days').on('change', function() {
|
|
forceMinMax($(this));
|
|
current_day_range = $(this).val();
|
|
setLocalStorage('graph_days', current_day_range);
|
|
if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
|
|
if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
|
|
$('.days').text(current_day_range);
|
|
});
|
|
|
|
// Month range changed
|
|
$('#graph-months').tooltip({ container: 'body', placement: 'top', html: true });
|
|
$('#graph-months').on('change', function() {
|
|
forceMinMax($(this));
|
|
current_month_range = $(this).val();
|
|
setLocalStorage('graph_months', current_month_range);
|
|
if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, yaxis); }
|
|
$('.months').text(current_month_range);
|
|
});
|
|
|
|
let graph_user_last_id = undefined;
|
|
|
|
// User changed
|
|
$('#graph-user').on('change', function() {
|
|
let val = $(this).val();
|
|
if (val.length === 0 || val.length === $(this).children().length) {
|
|
selected_user_id = null; // if all users are selected, just send an empty list
|
|
} else {
|
|
selected_user_id = val.join(",");
|
|
}
|
|
if (selected_user_id === graph_user_last_id) {
|
|
return;
|
|
}
|
|
graph_user_last_id = selected_user_id;
|
|
if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
|
|
if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
|
|
if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, yaxis); }
|
|
});
|
|
|
|
// Y-axis changed
|
|
$('#yaxis-selection').on('change', function() {
|
|
yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
|
|
setLocalStorage('graph_type', yaxis);
|
|
if (current_tab === '#tabs-plays') { loadGraphsTab1(current_day_range, yaxis); }
|
|
if (current_tab === '#tabs-stream') { loadGraphsTab2(current_day_range, yaxis); }
|
|
if (current_tab === '#tabs-total') { loadGraphsTab3(current_month_range, 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, 'hours').format('H [h] m [m]'); };
|
|
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, 'hours').format('D [days] H [hrs] m [mins]');
|
|
total += point.y;
|
|
});
|
|
s += '<br/><b>Total: '+moment.duration(total, 'hours').format('D [days] H [hrs] m [mins]')+'</b>';
|
|
} else {
|
|
$.each(this.points, function(i, point) {
|
|
s += '<br/>'+point.series.name+': '+moment.duration(point.y, 'hours').format('D [days] H [hrs] m [mins]');
|
|
});
|
|
}
|
|
return s;
|
|
}
|
|
stack_labels_format = function() {
|
|
var s = moment.duration(this.total, 'hours').format('H [h] m [m]');
|
|
return s;
|
|
}
|
|
$('.yaxis-text').html('Play duration');
|
|
}
|
|
|
|
hc_plays_by_day_options.xAxis.plotBands = [];
|
|
hc_plays_by_stream_type_options.xAxis.plotBands = [];
|
|
hc_concurrent_streams_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> |