mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-07 13:41:15 -07:00
343a3e9281
* Extract user filter generation code into method * Extend make_user_cond to allow lists of user IDs * Update documentation for stats APIs to indicate handling of ID lists * Use multiselect dropdown for user filter on graphs page Use standard concatenation Fix select style Move settings to JS constructor Change text for no users checked Don't call selectAll on page init Add it back Remove attributes Fix emptiness check Allow deselect all Only refresh if user id changed * Show "N users" starting at 2 users Co-authored-by: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com> * Use helper function split_strip Co-authored-by: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com> * Move make_user_cond at bottom and make private * Add new user picker to history page * Fix copy-paste error * Again * Add CSS for bootstrap-select --------- Co-authored-by: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
787 lines
No EOL
39 KiB
HTML
787 lines
No EOL
39 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">
|
|
<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'
|
|
};
|
|
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/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
|
|
}
|
|
|
|
$('#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_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-2').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_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> |