plexpy/data/interfaces/default/graphs.html

<%inherit file="base.html"/>

<%def name="headIncludes()">
</%def>

<%def name="body()">
<div class="container-fluid">
    <div class='table-card-back'>
        <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 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">
            <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"><a id="watch-totals-graphs" href="#tabs-3" aria-controls="tabs-2" role="tab" data-toggle="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">
                        <div class="padded-header">
                            <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>
                        </div>
                        <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">
                        <div class="padded-header">
                            <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>
                        </div>
                        <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">
                        <div class="padded-header">
                            <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>
                        </div>
                        <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">
                        <div class="padded-header">
                            <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>
                        </div>
                        <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">
                        <div class="padded-header">
                            <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>
                        </div>
                        <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-3">
                <div class="row">
                    <div class="col-md-12">
                        <div class="padded-header">
                            <h3><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h3>
                        </div>
                        <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>
    </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/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_month.js"></script>
<script>
    $(document).ready(function () {

        var current_range = 30;
        var yaxis = 'plays';

        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",
                cache: false,
                success: function(data) {
                    var dateArray = [];
                    for (var i = 0; i < data.categories.length; i++) {
                        dateArray.push(moment(data.categories[i]).valueOf());
                    }
                    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",
                cache: false,
                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",
                cache: false,
                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",
                cache: false,
                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",
                cache: false,
                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 loadGraphsTab3(yaxis) {
            setGraphFormat(yaxis);

            $.ajax({
                url: "get_plays_per_month",
                type: 'get',
                data: { y_axis: yaxis },
                dataType: "json",
                cache: false,
                success: function(data) {
                    var dateArray = [];
                    for (var i = 0; i < data.categories.length; i++) {
                        dateArray.push(moment(data.categories[i]).valueOf());
                    }
                    hc_plays_by_month_options.yAxis.min = 0;
                    hc_plays_by_month_options.xAxis.categories = dateArray;
                    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);

        $('#watch-count-graphs').click(function() {
            loadGraphsTab1(current_range, yaxis);
            $('#days-selection').show();
        });

        $('#watch-totals-graphs').click(function() {
            loadGraphsTab3(yaxis);
            $('#days-selection').hide();
        });

        $('#days-selection').on('change', function() {
            current_range = $('input[name=date-options]:checked', '#days-selection').val();
            loadGraphsTab1(current_range, yaxis);
            $('.days').html(current_range);
        });

        $('#yaxis-selection').on('change', function() {
            yaxis = $('input[name=yaxis-options]:checked', '#yaxis-selection').val();
            loadGraphsTab1(current_range, yaxis);
            loadGraphsTab3(yaxis);
            $('.days').html(current_range);
        });

        function setGraphFormat(type) {
            if (type === 'plays') {
                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() {
                                    if (moment(this.x).isValid()) {
                                        var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
                                    } else {
                                        var s = '<b>'+ this.x +'</b>';
                                    }

                                    $.each(this.points, function(i, point) {
                                        s += '<br/>'+point.series.name+': '+point.y;
                                    });
                                    return s;
                                 }
                stack_labels_format = function() {
                                          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');
            } else {
                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() {
                                    if (moment(this.x).isValid()) {
                                        var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
                                    } else {
                                        var s = '<b>'+ this.x +'</b>';
                                    }

                                    $.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() {
                                          if (moment(this.total).isValid()) {
                                              console.log(this);
                                              var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]");
                                          } else {
                                              var s = this.total;
                                          }
                                          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');
            }
        }
    });
</script>
</%def>