From 7f75966f435d40f4c520f375ff55066ec79fea17 Mon Sep 17 00:00:00 2001
From: Tim <timvdwest@gmail.com>
Date: Mon, 10 Aug 2015 00:24:34 +0200
Subject: [PATCH] Stream info graphs and some styling changes.

---
 data/interfaces/default/graphs.html           | 257 +++++++++++++-----
 .../js/graphs/plays_by_source_resolution.js   |  55 ++++
 .../js/graphs/plays_by_stream_resolution.js   |  55 ++++
 .../default/js/graphs/plays_by_stream_type.js |  65 +++++
 plexpy/graphs.py                              | 207 ++++++++++++++
 plexpy/webserve.py                            |  36 +++
 6 files changed, 603 insertions(+), 72 deletions(-)
 create mode 100644 data/interfaces/default/js/graphs/plays_by_source_resolution.js
 create mode 100644 data/interfaces/default/js/graphs/plays_by_stream_resolution.js
 create mode 100644 data/interfaces/default/js/graphs/plays_by_stream_type.js

diff --git a/data/interfaces/default/graphs.html b/data/interfaces/default/graphs.html
index 8699c12f..4f22beea 100644
--- a/data/interfaces/default/graphs.html
+++ b/data/interfaces/default/graphs.html
@@ -34,17 +34,19 @@
         </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 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">
-                        <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>
+                        <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>
@@ -53,13 +55,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
-                </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>
+                        <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...
@@ -69,9 +70,10 @@
                         </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>
+                        <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...
@@ -83,9 +85,10 @@
                 </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>
+                        <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...
@@ -95,9 +98,10 @@
                         </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>
+                        <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...
@@ -109,12 +113,58 @@
                 </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>
+
             <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>
+                        <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...
@@ -125,6 +175,8 @@
                     </div>
                 </div>
             </div>
+            <div class="modal fade" id="history-modal" tabindex="-1" role="dialog" aria-labelledby="history-modal">
+            </div>
         </div>
     </div>
 </div>
@@ -171,12 +223,16 @@
 <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_month.js"></script>
 <script>
     $(document).ready(function () {
 
         var current_range = 30;
         var yaxis = 'plays';
+        var current_tab = '#tabs-1';
 
         function loadGraphsTab1(time_range, yaxis) {
             setGraphFormat(yaxis);
@@ -186,7 +242,6 @@
                 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++) {
@@ -204,7 +259,6 @@
                 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;
@@ -217,7 +271,6 @@
                 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;
@@ -230,7 +283,6 @@
                 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;
@@ -243,7 +295,6 @@
                 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;
@@ -252,6 +303,51 @@
             });
         }
 
+        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());
+                    }
+                    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);
+                }
+            });
+        }
+
         function loadGraphsTab3(yaxis) {
             setGraphFormat(yaxis);
 
@@ -260,7 +356,6 @@
                 type: 'get',
                 data: { y_axis: yaxis },
                 dataType: "json",
-                cache: false,
                 success: function(data) {
                     var dateArray = [];
                     for (var i = 0; i < data.categories.length; i++) {
@@ -277,42 +372,61 @@
         // Set initial state
         loadGraphsTab1(current_range, yaxis);
 
-        $('#watch-count-graphs').click(function() {
-            loadGraphsTab1(current_range, yaxis);
-            $('#days-selection').show();
-        });
+        // Tab1 opened
+        $('#graph-tabs a[href="#tabs-1"]').click(function (e) {
+            current_tab = $(this).attr('href');
+            e.preventDefault();
+            $(this).tab('show');
+            $(this).on('shown.bs.tab', function (e) {
+              $('#days-selection').show();
+              loadGraphsTab1(current_range, yaxis);
+            })
+        })
 
-        $('#watch-totals-graphs').click(function() {
-            loadGraphsTab3(yaxis);
-            $('#days-selection').hide();
-        });
+        // Tab2 opened
+        $('#graph-tabs a[href="#tabs-2"]').click(function (e) {
+            current_tab = $(this).attr('href');
+            e.preventDefault();
+            $(this).tab('show');
+            $(this).on('shown.bs.tab', function (e) {
+              $('#days-selection').show();
+              loadGraphsTab2(current_range, yaxis);
+            })
+        })
 
+        // Tab3 opened
+        $('#graph-tabs a[href="#tabs-3"]').click(function (e) {
+            current_tab = $(this).attr('href');
+            e.preventDefault();
+            $(this).tab('show');
+            $(this).on('shown.bs.tab', function (e) {
+              $('#days-selection').hide();
+              loadGraphsTab3(yaxis);
+            })
+        })
+
+        // Date range changed
         $('#days-selection').on('change', function() {
             current_range = $('input[name=date-options]:checked', '#days-selection').val();
-            loadGraphsTab1(current_range, yaxis);
+            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();
-            loadGraphsTab1(current_range, yaxis);
-            loadGraphsTab3(yaxis);
-            $('.days').html(current_range);
+            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; };
-                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, 'X').isValid() && (this.x > 946684800)) {
-                                        var s = '<b>'+ moment(this.x, 'X').format("ddd MMM D") +'</b>';
+                                        var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
                                     } else {
                                         var s = '<b>'+ this.x +'</b>';
                                     }
@@ -325,27 +439,13 @@
                 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, 'X').isValid() && (this.x > 946684800)) {
-                                        var s = '<b>'+ moment(this.x, 'X').format("ddd MMM D") +'</b>';
+                                        var s = '<b>'+ moment(this.x).format("ddd MMM D") +'</b>';
                                     } else {
                                         var s = '<b>'+ this.x +'</b>';
                                     }
@@ -359,16 +459,29 @@
                                           var s = moment.duration(this.total, 'seconds').format("H [hrs] m [mins]");
                                           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');
             }
+
+            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_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_month_options.tooltip.formatter = tooltip_format;
+            hc_plays_by_month_options.yAxis.stackLabels.formatter = stack_labels_format;
         }
     });
 </script>
diff --git a/data/interfaces/default/js/graphs/plays_by_source_resolution.js b/data/interfaces/default/js/graphs/plays_by_source_resolution.js
new file mode 100644
index 00000000..88b02209
--- /dev/null
+++ b/data/interfaces/default/js/graphs/plays_by_source_resolution.js
@@ -0,0 +1,55 @@
+var hc_plays_by_source_resolution_options = {
+    chart: {
+        type: 'column',
+        backgroundColor: 'rgba(0,0,0,0)',
+        renderTo: 'chart_div_plays_by_source_resolution'
+    },
+    title: {
+        text: ''
+    },
+    plotOptions: {
+            column: {
+                pointPadding: 0.2,
+                borderWidth: 0
+            }
+        },
+    legend: {
+        enabled: true,
+        itemStyle: {
+            font: '9pt "Open Sans", sans-serif',
+            color: '#A0A0A0'
+        },
+        itemHoverStyle: {
+            color: '#FFF'
+        },
+        itemHiddenStyle: {
+            color: '#444'
+        }
+    },
+    credits: {
+        enabled: false
+    },
+    colors: ['#F9AA03', '#FFFFFF'],
+    xAxis: {
+            categories: [{}],
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    yAxis: {
+            title: {
+                text: null
+            },
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    tooltip: {
+        shared: true
+    },
+    series: [{}]
+};
\ No newline at end of file
diff --git a/data/interfaces/default/js/graphs/plays_by_stream_resolution.js b/data/interfaces/default/js/graphs/plays_by_stream_resolution.js
new file mode 100644
index 00000000..5a7b546c
--- /dev/null
+++ b/data/interfaces/default/js/graphs/plays_by_stream_resolution.js
@@ -0,0 +1,55 @@
+var hc_plays_by_stream_resolution_options = {
+    chart: {
+        type: 'column',
+        backgroundColor: 'rgba(0,0,0,0)',
+        renderTo: 'chart_div_plays_by_stream_resolution'
+    },
+    title: {
+        text: ''
+    },
+    plotOptions: {
+            column: {
+                pointPadding: 0.2,
+                borderWidth: 0
+            }
+        },
+    legend: {
+        enabled: true,
+        itemStyle: {
+            font: '9pt "Open Sans", sans-serif',
+            color: '#A0A0A0'
+        },
+        itemHoverStyle: {
+            color: '#FFF'
+        },
+        itemHiddenStyle: {
+            color: '#444'
+        }
+    },
+    credits: {
+        enabled: false
+    },
+    colors: ['#F9AA03', '#FFFFFF'],
+    xAxis: {
+            categories: [{}],
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    yAxis: {
+            title: {
+                text: null
+            },
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    tooltip: {
+        shared: true
+    },
+    series: [{}]
+};
\ No newline at end of file
diff --git a/data/interfaces/default/js/graphs/plays_by_stream_type.js b/data/interfaces/default/js/graphs/plays_by_stream_type.js
new file mode 100644
index 00000000..8c7fee7a
--- /dev/null
+++ b/data/interfaces/default/js/graphs/plays_by_stream_type.js
@@ -0,0 +1,65 @@
+var hc_plays_by_stream_type_options = {
+    chart: {
+        type: 'line',
+        backgroundColor: 'rgba(0,0,0,0)',
+        renderTo: 'chart_div_plays_by_stream_type'
+    },
+    title: {
+        text: ''
+    },
+    legend: {
+        enabled: true,
+        itemStyle: {
+            font: '9pt "Open Sans", sans-serif',
+            color: '#A0A0A0'
+        },
+        itemHoverStyle: {
+            color: '#FFF'
+        },
+        itemHiddenStyle: {
+            color: '#444'
+        }
+    },
+    credits: {
+        enabled: false
+    },
+    plotOptions: {
+        series: {
+            cursor: 'pointer',
+            point: {
+                events: {
+                    click: function() {
+                        selectHandler(this.category);
+                    }
+                }
+            }
+        }
+    },
+    colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
+    xAxis: {
+            type: 'datetime',
+            labels: {
+                formatter: function() {
+                    return moment(this.value).format("MMM D");
+                },
+                style: {
+                    color: '#aaa'
+                }
+            },
+            categories: [{}]
+    },
+    yAxis: {
+            title: {
+                text: null
+            },
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    tooltip: {
+        shared: true
+    },
+    series: [{}]
+};
\ No newline at end of file
diff --git a/plexpy/graphs.py b/plexpy/graphs.py
index 70d978e3..a29fef72 100644
--- a/plexpy/graphs.py
+++ b/plexpy/graphs.py
@@ -382,3 +382,210 @@ class Graphs(object):
         output = {'categories': categories,
                   'series': [series_1_output]}
         return output
+
+    def get_total_plays_per_stream_type(self, time_range='30', y_axis='plays'):
+        monitor_db = database.MonitorDatabase()
+
+        if not time_range.isdigit():
+            time_range = '30'
+
+        try:
+            if y_axis == 'plays':
+                query = 'SELECT date(session_history.started, "unixepoch", "localtime") as date_played, ' \
+                        'SUM(case when session_history_media_info.video_decision = "direct play" then 1 else 0 end) as dp_count, ' \
+                        'SUM(case when session_history_media_info.video_decision = "copy" then 1 else 0 end) as ds_count, ' \
+                        'SUM(case when session_history_media_info.video_decision = "transcode" then 1 else 0 end) as tc_count ' \
+                        'FROM session_history ' \
+                        'JOIN session_history_media_info ON session_history.id = session_history_media_info.id ' \
+                        'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                        'datetime("now", "-%s days", "localtime")) AND ' \
+                        '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                        'GROUP BY date_played ' \
+                        'ORDER BY started ASC' % time_range
+
+                result = monitor_db.select(query)
+            else:
+                query = 'SELECT date(session_history.started, "unixepoch", "localtime") as date_played, ' \
+                        'SUM(case when session_history_media_info.video_decision = "direct play" AND ' \
+                        'session_history.stopped > 0 then (stopped - started) else 0 end) as dp_duration, ' \
+                        'SUM(case when session_history_media_info.video_decision = "copy" AND ' \
+                        'session_history.stopped > 0 then (stopped - started) else 0 end) as ds_duration, ' \
+                        'SUM(case when session_history_media_info.video_decision = "transcode" ' \
+                        'AND session_history.stopped > 0 then (stopped - started) else 0 end) as tc_duration ' \
+                        'FROM session_history ' \
+                        'JOIN session_history_media_info ON session_history.id = session_history_media_info.id ' \
+                        'WHERE datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                        'datetime("now", "-%s days", "localtime") AND ' \
+                        '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                        'GROUP BY date_played ' \
+                        'ORDER BY started ASC' % time_range
+
+                result = monitor_db.select(query)
+        except:
+            logger.warn("Unable to execute database query.")
+            return None
+
+        # create our date range as some days may not have any data
+        # but we still want to display them
+        base = datetime.date.today()
+        date_list = [base - datetime.timedelta(days=x) for x in range(0, int(time_range))]
+
+        categories = []
+        series_1 = []
+        series_2 = []
+        series_3 = []
+
+        for date_item in sorted(date_list):
+            date_string = date_item.strftime('%Y-%m-%d')
+            categories.append(date_string)
+            series_1_value = 0
+            series_2_value = 0
+            series_3_value = 0
+            for item in result:
+                if date_string == item[0]:
+                    series_1_value = item[1]
+                    series_2_value = item[2]
+                    series_3_value = item[3]
+                    break
+                else:
+                    series_1_value = 0
+                    series_2_value = 0
+                    series_3_value = 0
+
+            series_1.append(series_1_value)
+            series_2.append(series_2_value)
+            series_3.append(series_3_value)
+
+        series_1_output = {'name': 'Direct Play',
+                           'data': series_1}
+        series_2_output = {'name': 'Direct Stream',
+                           'data': series_2}
+        series_3_output = {'name': 'Transcode',
+                           'data': series_3}
+
+        output = {'categories': categories,
+                  'series': [series_1_output, series_2_output, series_3_output]}
+
+        return output
+
+    def get_total_plays_by_source_resolution(self, time_range='30', y_axis='plays'):
+        monitor_db = database.MonitorDatabase()
+
+        if not time_range.isdigit():
+            time_range = '30'
+
+        if y_axis == 'plays':
+            query = 'SELECT ' \
+                    'count(session_history.id) as play_count, ' \
+                    'session_history_media_info.video_resolution AS resolution ' \
+                    'FROM session_history ' \
+                    'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
+                    'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                    'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
+                    '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                    'GROUP BY resolution ' \
+                    'ORDER BY play_count DESC ' \
+                    'LIMIT 10'
+
+            result = monitor_db.select(query)
+            y_axis_label = 'Total plays'
+        else:
+            query = 'SELECT ' \
+                    'SUM(case when stopped > 0 then (stopped - started) else 0 end) as duration, ' \
+                    'session_history_media_info.video_resolution AS resolution ' \
+                    'FROM session_history ' \
+                    'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
+                    'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                    'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
+                    '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                    'GROUP BY resolution ' \
+                    'ORDER BY duration DESC ' \
+                    'LIMIT 10'
+
+            result = monitor_db.select(query)
+            y_axis_label = 'Total duration'
+
+        categories = []
+        series_1 = []
+
+        for item in result:
+            categories.append(item[1])
+            series_1.append(item[0])
+
+        series_1_output = {'name': y_axis_label,
+                           'data': series_1}
+
+        output = {'categories': categories,
+                  'series': [series_1_output]}
+
+        return output
+
+    def get_total_plays_by_stream_resolution(self, time_range='30', y_axis='plays'):
+        monitor_db = database.MonitorDatabase()
+
+        if not time_range.isdigit():
+            time_range = '30'
+
+        if y_axis == 'plays':
+            query = 'SELECT ' \
+                    'count(session_history.id) as play_count, ' \
+                    '(case when session_history_media_info.video_decision = "transcode" then ' \
+                    '(case ' \
+                    'when session_history_media_info.transcode_height <= 360 then "sd" ' \
+                    'when session_history_media_info.transcode_height <= 480 then "480" ' \
+                    'when session_history_media_info.transcode_height <= 576 then "576" ' \
+                    'when session_history_media_info.transcode_height <= 720 then "720" ' \
+                    'when session_history_media_info.transcode_height <= 1080 then "1080" ' \
+                    'when session_history_media_info.transcode_height <= 1440 then "QHD" ' \
+                    'when session_history_media_info.transcode_height <= 2160 then "4K" ' \
+                    'else "unknown" end) else session_history_media_info.video_resolution end) as resolution ' \
+                    'FROM session_history ' \
+                    'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
+                    'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                    'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
+                    '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                    'GROUP BY resolution ' \
+                    'ORDER BY play_count DESC ' \
+                    'LIMIT 10'
+
+            result = monitor_db.select(query)
+            y_axis_label = 'Total plays'
+        else:
+            query = 'SELECT ' \
+                    'SUM(case when stopped > 0 then (stopped - started) else 0 end) as duration, ' \
+                    '(case when session_history_media_info.video_decision = "transcode" then ' \
+                    '(case ' \
+                    'when session_history_media_info.transcode_height <= 360 then "sd" ' \
+                    'when session_history_media_info.transcode_height <= 480 then "480" ' \
+                    'when session_history_media_info.transcode_height <= 576 then "576" ' \
+                    'when session_history_media_info.transcode_height <= 720 then "720" ' \
+                    'when session_history_media_info.transcode_height <= 1080 then "1080" ' \
+                    'when session_history_media_info.transcode_height <= 1440 then "QHD" ' \
+                    'when session_history_media_info.transcode_height <= 2160 then "4K" ' \
+                    'else "unknown" end) else session_history_media_info.video_resolution end) as resolution ' \
+                    'FROM session_history ' \
+                    'JOIN session_history_media_info on session_history.id = session_history_media_info.id ' \
+                    'WHERE (datetime(session_history.stopped, "unixepoch", "localtime") >= ' \
+                    'datetime("now", "-' + time_range + ' days", "localtime")) AND ' \
+                    '(session_history.media_type = "episode" OR session_history.media_type = "movie") ' \
+                    'GROUP BY resolution ' \
+                    'ORDER BY duration DESC ' \
+                    'LIMIT 10'
+
+            result = monitor_db.select(query)
+            y_axis_label = 'Total duration'
+
+        categories = []
+        series_1 = []
+
+        for item in result:
+            categories.append(item[1])
+            series_1.append(item[0])
+
+        series_1_output = {'name': y_axis_label,
+                           'data': series_1}
+
+        output = {'categories': categories,
+                  'series': [series_1_output]}
+
+        return output
\ No newline at end of file
diff --git a/plexpy/webserve.py b/plexpy/webserve.py
index 7da23a54..fc61dc41 100644
--- a/plexpy/webserve.py
+++ b/plexpy/webserve.py
@@ -902,6 +902,42 @@ class WebInterface(object):
         else:
             logger.warn('Unable to retrieve data.')
 
+    @cherrypy.expose
+    def get_plays_by_stream_type(self, time_range='30', y_axis='plays', **kwargs):
+
+        graph = graphs.Graphs()
+        result = graph.get_total_plays_per_stream_type(time_range=time_range, y_axis=y_axis)
+
+        if result:
+            cherrypy.response.headers['Content-type'] = 'application/json'
+            return json.dumps(result)
+        else:
+            logger.warn('Unable to retrieve data.')
+
+    @cherrypy.expose
+    def get_plays_by_source_resolution(self, time_range='30', y_axis='plays', **kwargs):
+
+        graph = graphs.Graphs()
+        result = graph.get_total_plays_by_source_resolution(time_range=time_range, y_axis=y_axis)
+
+        if result:
+            cherrypy.response.headers['Content-type'] = 'application/json'
+            return json.dumps(result)
+        else:
+            logger.warn('Unable to retrieve data.')
+
+    @cherrypy.expose
+    def get_plays_by_stream_resolution(self, time_range='30', y_axis='plays', **kwargs):
+
+        graph = graphs.Graphs()
+        result = graph.get_total_plays_by_stream_resolution(time_range=time_range, y_axis=y_axis)
+
+        if result:
+            cherrypy.response.headers['Content-type'] = 'application/json'
+            return json.dumps(result)
+        else:
+            logger.warn('Unable to retrieve data.')
+
     @cherrypy.expose
     def get_friends_list(self, **kwargs):