Layers graph (#792)

lynckia · Mar 9, 2017 · d4e0587 · d4e0587
1 parent de95e07
commit d4e0587
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/extras/basic_example/public/quality_layers.html b/extras/basic_example/public/quality_layers.html
@@ -7,6 +7,6 @@
   </head>
 
   <body>
-    <div id="chart" style="width:100%; height:400px; float:right;"></div>
+    <div id="chart" style="width: calc(100% - 640px); height:700px; float:right;"></div>
   </body>
 </html>
diff --git a/extras/basic_example/public/quality_layers.js b/extras/basic_example/public/quality_layers.js
@@ -12,6 +12,8 @@ function getParameterByName(name) {
 }
 
 var seriesMap = {};
+var spatialStyles = ['ShortDot', 'Dash', 'DashDot', 'ShortDashDotDot'];
+var temporalStyles = ['#7cb5ec', '#90ed7d', '#f7a35c', '#f15c80'];
 
 var initChart = function () {
     chart = new Highcharts.Chart({
@@ -23,6 +25,13 @@ var initChart = function () {
             events: {
             }
         },
+        plotOptions: {
+            series: {
+                marker: {
+                    enabled: false
+                }
+            }
+        },
         title: {
             text: 'Live Layer Bitrate'
         },
@@ -35,17 +44,32 @@ var initChart = function () {
             minPadding: 0.2,
             maxPadding: 0.2,
             title: {
-                text: 'Value',
+                text: null,
                 margin: 80
             }
         },
         series: []
     });
 };
-var updateSeriesForKey = function (key, value_x, value_y) {
+var updateSeriesForKey = function (key, spatial, temporal, value_x, value_y) {
     if (seriesMap[key] === undefined) {
+
+        let dash, color, width = 3;
+        if (spatial && temporal) {
+            dash = spatialStyles[spatial];
+            color = temporalStyles[temporal];
+            width = 2;
+        } else if (key === 'Current Received') {
+            color = '#2b908f';
+        } else if (key === 'Estimated Bandwidth') {
+            color = '#434348';
+        }
+
         seriesMap[key] = chart.addSeries({
             name: key,
+            dashStyle: dash,
+            color: color,
+            lineWidth: width,
             data: []
         });
     }
@@ -61,18 +85,18 @@ var updateChart = function () {
             if (i != "publisher") {
                 let totalBitrate = data[i]["total"]["bitrateCalculated"];
                 if (totalBitrate) {
-                    updateSeriesForKey("Current Received",date, totalBitrate);
+                    updateSeriesForKey("Current Received", undefined, undefined, date, totalBitrate);
                 }
                 let bitrateEstimated = data[i]["total"]["senderBitrateEstimation"]; 
                 if (bitrateEstimated) {
-                    updateSeriesForKey("Estimated Bandwidth",date, totalBitrate);
+                    updateSeriesForKey("Estimated Bandwidth", undefined, undefined, date, bitrateEstimated);
                 }
                 let qualityLayersData = data[i]["qualityLayers"];
                 if (qualityLayersData !== undefined){
                     for (var spatialLayer in qualityLayersData) {
                         for (var temporalLayer in qualityLayersData[spatialLayer]) {
                             let key = "Spatial " + spatialLayer + " / Temporal " + temporalLayer;
-                            updateSeriesForKey(key, date, qualityLayersData[spatialLayer][temporalLayer])
+                            updateSeriesForKey(key, spatialLayer, temporalLayer, date, qualityLayersData[spatialLayer][temporalLayer])
                         }
                     }