Concurrent Streams per Day Graph (#2046)

* initial commit

* fix grouping in webserve

* remove event handler and adapt cursor

* optimize most concurrent calculation

* update branch from nightly and user filter

* max concurrent streams in graph

* made several changes mentioned in review

data/interfaces/default/graphs.html

@@ -137,6 +137,20 @@
                         </div>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="col-md-12">
+                        <h4><i class="fa fa-video-camera"></i> Daily concurrent stream count</span> by stream type <small>Last <span class="days">30</span> days</small></h4>
+                        <p class="help-block">
+                            The total count of concurrent streams of tv, movies, and music by the transcode decision.
+                        </p>
+                        <div class="graphs-instance">
+                            <div class="watch-chart" id="graph_concurrent_streams_by_stream_type">
+                                <div class="graphs-load"><i class="fa fa-refresh fa-spin"></i> Loading chart...</div>
+                                <br>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="row">
                     <div class="col-md-6">
                         <h4><i class="fa fa-expand-arrows-alt"></i> <span class="yaxis-text">Play count</span> by source resolution <small>Last <span class="days">30</span> days</small></h4>
@@ -312,7 +326,8 @@
             'Live TV': '#19A0D7',
             'Direct Play': '#E5A00D',
             'Direct Stream': '#FFFFFF',
-            'Transcode': '#F06464'
+            'Transcode': '#F06464',
+            'Max. Concurrent Streams': '#1014FC'
         };
         var series_colors = [];
         $.each(data_series, function(index, series) {
@@ -327,6 +342,7 @@
 <script src="${http_root}js/graphs/plays_by_platform.js${cache_param}"></script>
 <script src="${http_root}js/graphs/plays_by_user.js${cache_param}"></script>
 <script src="${http_root}js/graphs/plays_by_stream_type.js${cache_param}"></script>
+<script src="${http_root}js/graphs/concurrent_streams_by_stream_type.js${cache_param}"></script>
 <script src="${http_root}js/graphs/plays_by_source_resolution.js${cache_param}"></script>
 <script src="${http_root}js/graphs/plays_by_stream_resolution.js${cache_param}"></script>
 <script src="${http_root}js/graphs/plays_by_platform_by_stream_type.js${cache_param}"></script>
@@ -540,6 +556,33 @@
                 }
             });
 
+            $.ajax({
+                url: "get_concurrent_streams_by_stream_type",
+                type: 'get',
+                data: { time_range: time_range, user_id: selected_user_id },
+                dataType: "json",
+                success: function(data) {
+                    var dateArray = [];
+                    $.each(data.categories, function (i, day) {
+                        dateArray.push(moment(day, 'YYYY-MM-DD').valueOf());
+                        // Highlight the weekend
+                        if ((moment(day, 'YYYY-MM-DD').format('ddd') == 'Sat') ||
+                            (moment(day, 'YYYY-MM-DD').format('ddd') == 'Sun')) {
+                            hc_plays_by_day_options.xAxis.plotBands.push({
+                                from: i-0.5,
+                                to: i+0.5,
+                                color: 'rgba(80,80,80,0.3)'
+                            });
+                        }
+                    });
+                    hc_concurrent_streams_by_stream_type_options.yAxis.min = 0;
+                    hc_concurrent_streams_by_stream_type_options.xAxis.categories = dateArray;
+                    hc_concurrent_streams_by_stream_type_options.series = getGraphVisibility(hc_concurrent_streams_by_stream_type_options.chart.renderTo, data.series);
+                    hc_concurrent_streams_by_stream_type_options.colors = getGraphColors(data.series);
+                    var hc_plays_by_stream_type = new Highcharts.Chart(hc_concurrent_streams_by_stream_type_options);
+                }
+            });
+
             $.ajax({
                 url: "get_plays_by_source_resolution",
                 type: 'get',
@@ -754,6 +797,7 @@
 
             hc_plays_by_day_options.xAxis.plotBands = [];
             hc_plays_by_stream_type_options.xAxis.plotBands = [];
+            hc_concurrent_streams_by_stream_type_options.xAxis.plotBands = [];
 
             hc_plays_by_day_options.yAxis.labels.formatter = yaxis_format;
             hc_plays_by_dayofweek_options.yAxis.labels.formatter = yaxis_format;

data/interfaces/default/js/graphs/concurrent_streams_by_stream_type.js

@@ -0,0 +1,76 @@
+var formatter_function = 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>';
+    }
+    $.each(this.points, function(i, point) {
+        s += '<br/>'+point.series.name+': '+point.y;
+    });
+    return s;
+};
+
+var hc_concurrent_streams_by_stream_type_options = {
+    chart: {
+        type: 'line',
+        backgroundColor: 'rgba(0,0,0,0)',
+        renderTo: 'graph_concurrent_streams_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: {
+            events: {
+                legendItemClick: function() {
+                    setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name);
+                }
+            }
+        }
+    },
+    xAxis: {
+            type: 'datetime',
+            labels: {
+                formatter: function() {
+                    return moment(this.value).format("MMM D");
+                },
+                style: {
+                    color: '#aaa'
+                }
+            },
+            categories: [{}],
+            plotBands: []
+    },
+    yAxis: {
+            title: {
+                text: null
+            },
+            labels: {
+                style: {
+                    color: '#aaa'
+                }
+            }
+    },
+    tooltip: {
+        shared: true,
+        crosshairs: true,
+        formatter: formatter_function
+    },
+    series: [{}]
+};