plexpy/data/interfaces/default/graphs.html

<%inherit file="base.html"/>
<%!
from plexpy import helpers
%>

<%def name="headIncludes()">

</%def>

<%def name="body()">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="wellheader-bg">
                <div class="dashboard-wellheader-no-chevron">
                    <h2><i class="fa fa-bar-chart"></i> Graphs</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="wellbg">
                <div class="wellheader">
                    <div class="dashboard-wellheader">
                        <div class="span12">
                            <div class="span8"><h4>Daily Watch History (Past <span class="days">30</span> days)</h4>
                            </div>
                            <div class="span4" style="text-align: right; padding-right: 30px;">
                                <h5>
                                    <a href="javascript:void(0)" id="graph-30"> 30 days</a> |
                                    <a href="javascript:void(0)" id="graph-90"> 90 days</a> |
                                    <a href="javascript:void(0)" id="graph-365"> 1 year</a>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
                <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 class="container-fluid">
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="wellheader">
                                <div class="dashboard-wellheader">
                                    <h4>Watches by day of week (Past <span class="days">30</span> days)</h4>
                                </div>
                            </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="span6">
                            <div class="wellheader">
                                <div class="dashboard-wellheader">
                                    <h4>Watches by hour of day (Past <span class="days">30</span> days)</h4>
                                </div>
                            </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>
            </div>
        </div>
    </div>
</div>
</%def>

<%def name="javascriptIncludes()">
<script src="interfaces/default/js/moment-with-locale.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>
    $(document).ready(function () {

        var current_range = 30;

        function loadGraphs(time_range) {

            $.ajax({
                url: "get_plays_by_date",
                type: 'get',
                data: { time_range: time_range },
                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 },
                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 },
                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);
                }
            });
        }

        // Set initial state
        loadGraphs(current_range);

        $('#graph-30').click(function() {
            current_range = 30;
            $('.days').html(current_range);
            loadGraphs(30);
        });

        $('#graph-90').click(function() {
            current_range = 90;
            $('.days').html(current_range);
            loadGraphs(90);
        });

        $('#graph-365').click(function() {
            current_range = 365;
            $('.days').html(current_range);
            loadGraphs(365);
        });

    });

</script>
</%def>