From dc8d3965a21e89152dba40246d99e6492d1ff2df Mon Sep 17 00:00:00 2001 From: Wolfram Hofmeister Date: Thu, 7 Oct 2021 19:38:20 +0200 Subject: [PATCH 1/7] Replace non-working links to VR assets with working ones --- player/vr-360/js/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/player/vr-360/js/script.js b/player/vr-360/js/script.js index f7250449..84bd5a52 100644 --- a/player/vr-360/js/script.js +++ b/player/vr-360/js/script.js @@ -14,8 +14,8 @@ var conf = { var source = { dash: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', - hls: 'https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8', - progressive: 'https://bitmovin.com/player-content/playhouse-vr/progressive.mp4', + hls: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', + progressive: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/progressive.mp4', poster: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/poster.jpg', vr: { startupMode: '2d', From 7c2c3bcb338b5f400f7e967dabfa79581e45d4e2 Mon Sep 17 00:00:00 2001 From: Wolfram Hofmeister Date: Thu, 7 Oct 2021 19:53:01 +0200 Subject: [PATCH 2/7] Update the source shown on the demo page as well --- player/vr-360/demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/player/vr-360/demo.js b/player/vr-360/demo.js index 6fbb9643..23d71026 100644 --- a/player/vr-360/demo.js +++ b/player/vr-360/demo.js @@ -9,9 +9,9 @@ var source = { dash: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', hls: - 'https://bitmovin.com/player-content/playhouse-vr/m3u8s/105560.m3u8', + 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', progressive: - 'https://bitmovin.com/player-content/playhouse-vr/progressive.mp4', + 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/progressive.mp4', poster: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/poster.jpg', vr: { From 8a2cd8184e2bd893bab4287f4fb5b398386f29d1 Mon Sep 17 00:00:00 2001 From: Ines Kulenovic Date: Thu, 14 Oct 2021 17:12:30 +0200 Subject: [PATCH 3/7] Added industry insight demo --- .../analytics-industry-insights/css/style.css | 62 +++ .../analytics-industry-insights/icon.svg | 1 + .../analytics-industry-insights/index.html | 121 ++++++ .../analytics-industry-insights/info.json | 14 + .../js/industry-insights.js | 365 ++++++++++++++++++ 5 files changed, 563 insertions(+) create mode 100644 analytics/analytics-industry-insights/css/style.css create mode 100755 analytics/analytics-industry-insights/icon.svg create mode 100644 analytics/analytics-industry-insights/index.html create mode 100644 analytics/analytics-industry-insights/info.json create mode 100644 analytics/analytics-industry-insights/js/industry-insights.js diff --git a/analytics/analytics-industry-insights/css/style.css b/analytics/analytics-industry-insights/css/style.css new file mode 100644 index 00000000..3d44577e --- /dev/null +++ b/analytics/analytics-industry-insights/css/style.css @@ -0,0 +1,62 @@ +.map-legend{ + height: 16px; + width: 20px; + margin-left: 2px; +} + +.map-legend-text-size{ + font-size: 13px !important; +} + +.country{ + font-weight: 600; + font-size: 18px; + display: inline-block; + margin-bottom: 0px !important; + vertical-align: bottom; + color: #0D3841; +} + +.metric-text{ + font-size: 13px !important; + margin-bottom: 0px !important; + margin-top: 8px; +} + +.metric-value{ + font-weight: 600; + font-size: 24px !important; + margin-bottom: 16px !important; + color: #0D3841; +} + +.box-border{ + box-shadow: inset 1px 0px 0px #CBE0ED; +} + +.text-label { + margin-left: 8px; +} + +.chart-legend-extra-dark{ + background-color: rgb(0, 107, 255); +} +.chart-legend-dark{ + background-color: rgba(0, 107, 255, 0.8); +} +.chart-legend-medium{ + background-color: rgba(0, 107, 255, 0.6); +} +.chart-legend-neutral{ + background-color: rgba(0, 107, 255, 0.4); +} +.chart-legend-light{ + background-color: rgba(0, 107, 255, 0.2); +} +.chart-legend-extra-light{ + background-color: rgba(0, 107, 255, 0.05); +} +.chart-legend-no-data{ + background-color: #DCDFE4; + margin-left: 24px; +} diff --git a/analytics/analytics-industry-insights/icon.svg b/analytics/analytics-industry-insights/icon.svg new file mode 100755 index 00000000..287a940c --- /dev/null +++ b/analytics/analytics-industry-insights/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/analytics/analytics-industry-insights/index.html b/analytics/analytics-industry-insights/index.html new file mode 100644 index 00000000..c12e71a7 --- /dev/null +++ b/analytics/analytics-industry-insights/index.html @@ -0,0 +1,121 @@ +

+ For selected metrics, industry insights display the median of all data points we collect for this metric. + Choose the metric below to get industry insights across the world: +

+ +
+ +
+ +
+
+
+
+ +
+

Comparing countries

+
+
+ +

+
+ +

+

+
+ +
+

Shift + Click on map to compare countries

+
+ +
+ + +
+
+
+

+
+ +
+
+
+
+ +
+
+

0

+
+ +
Median video startup time (s)
+
+
No data available
+
+
+ +
+

About Median Startup Time

+
+

+ The total startup time represents the amount of time it takes from starting to load the player until the video + playback can commence. This includes all the initializations the player has to perform as well as downloading + and parsing the manifests, downloading the content segments and initiating playback. +

+ +
Good to know:
+

+ Studies have shown that after 10 seconds of startup delay, more than half of your audience has usually left and + only 8% of users will return to your website within 24 hours after experiencing a video failure. +

+

+ Specifically, if it takes longer than 2 seconds to load the video, viewers will start to leave. After 5 seconds, + more than 20% of your users abandon, and with each additional second of delay, 6% of your users leave and the + majority will never come back. +

+
+ +
+

About Error Percentage

+
+

+ The error percentage shows the number of errors in relation to the number of play attempts on a video platform. +

+ +

+ The error percentage includes errors that disrupted a user's playback as well as errors from which the player was able to recover. +

+
+ +
+

About Rebuffer Percentage

+
+

+ Rebuffering occurs when the player buffer runs out of video data to display to the user. The player pauses and has to wait for ongoing video segment downloads to finish before it can resume playback. +

+ +

+ Rebuffering percentage is the average time a user had to wait for video segment downloads in relation to the total time a user spent watching a video. +

+

+ Example: If a user watches a video with a length of 9 seconds and has to wait 1 second for video segment downloads, it would take him 10 seconds in total to watch the video, so you'd get a 10% rebuffering percentage. +

+
+ + +
+ Disclaimer + + The information presented in the Bitmovin Industry Insights Demo is for demonstration purposes only and not for + research or any other purposes. + Bitmovin makes no representations or warranties express or implied in relation to the Industry Insights Demo as + to the currency, accuracy, validity, + reliability, fitness or completeness of the information provided. + +
+ + + \ No newline at end of file diff --git a/analytics/analytics-industry-insights/info.json b/analytics/analytics-industry-insights/info.json new file mode 100644 index 00000000..30df4159 --- /dev/null +++ b/analytics/analytics-industry-insights/info.json @@ -0,0 +1,14 @@ +{ + "title": "Industry Insights Demo", + "description": "Industry Insights", + "executable": { + "executable": false, + "indexfile": "index.html" + }, + "tags": [ + "analytics", + "industry insights" + ], + "hide_github_link": true + } + \ No newline at end of file diff --git a/analytics/analytics-industry-insights/js/industry-insights.js b/analytics/analytics-industry-insights/js/industry-insights.js new file mode 100644 index 00000000..18c03799 --- /dev/null +++ b/analytics/analytics-industry-insights/js/industry-insights.js @@ -0,0 +1,365 @@ +var countriesChart = {}; +var mapChart = {}; +const INDUSTRY_INSIGHT_MEDIAN_STARTUP_TIME_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/median_video_startup_time_test.json' +const INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/error_percentage_test.json' +const INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/rebuffer_percentage_test.json' + +$(function () { + reset(); + + $(document).on('change', '#available-industry-insight-metrics', function () { + reset(); + if (this.value === 'medianStartupTime') { + showMedianStartupTimeChart(); + } + if (this.value === 'errorPercentage') { + showErrorPercentageChart(); + } + if (this.value === 'rebufferPercentage') { + showRebufferPercentageChart(); + } + }); + + showMedianStartupTimeChart(); +}); + +function getIndustryInsightsData(url, callbackFunction) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.setRequestHeader('Content-Type', 'application/json'); + xhr.onreadystatechange = function () { + if (xhr.readyState === XMLHttpRequest.DONE) { + callbackFunction(JSON.parse(xhr.responseText)); + } + }; + + xhr.send(); +} + +function showMedianStartupTimeChart() { + // todo check real ranges + const dataClasses = [ + { + from: 10 + }, + { + from: 7.5, + to: 10 + }, + { + from: 6, + to: 7.5 + }, + { + from: 4.5, + to: 6 + }, + { + from: 3, + to: 4.5 + }, + { + from: 1.5, + to: 3 + }, + { + to: 1.5 + }]; + $('#metricLegend').html('Median video startup time (s)'); + $('#legend_max_value').html('10'); + $('#startupTimeContent').show(); + $('#errorPercentageContent').hide(); + $('#rebufferPercentageContent').hide(); + + getIndustryInsightsData(INDUSTRY_INSIGHT_MEDIAN_STARTUP_TIME_URL, (response) => { + const data = response.map((res, i) => ({ + code: res.countryCode.toUpperCase(), + value: (parseFloat(res.value) / 1000).toFixed(2), + name: res.countryCode, + })); + + + drawChart(data, 'Median video startup time', 'Seconds', 's', dataClasses); + }); +} + +function showErrorPercentageChart() { + // todo check real ranges + const dataClasses = [ + { + from: 2.8 + }, + { + from: 2.0, + to: 2.4 + }, + { + from: 1.6, + to: 2.0 + }, + { + from: 1.2, + to: 1.6 + }, + { + from: 0.8, + to: 1.2 + }, + { + from: 0.4, + to: 0.8 + }, + { + to: 0.4 + }]; + $('#startupTimeContent').hide(); + $('#errorPercentageContent').show(); + $('#rebufferPercentageContent').hide(); + $('#metricLegend').html('Error percentage (%)'); + $('#legend_max_value').html('3'); + getIndustryInsightsData(INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL, (response) => { + const data = response.map((res, i) => ({ + code: res.countryCode.toUpperCase(), + value: parseFloat(res.value).toFixed(2), + name: res.countryCode, + })); + + drawChart(data, 'Error Percentage', 'Percentage', '%', dataClasses); + }); +} + +function showRebufferPercentageChart() { + // todo check real ranges + const dataClasses = [ + { + from: 2.8 + }, + { + from: 2.0, + to: 2.4 + }, + { + from: 1.6, + to: 2.0 + }, + { + from: 1.2, + to: 1.6 + }, + { + from: 0.8, + to: 1.2 + }, + { + from: 0.4, + to: 0.8 + }, + { + to: 0.4 + }]; + + $('#startupTimeContent').hide(); + $('#errorPercentageContent').hide(); + $('#rebufferPercentageContent').show(); + $('#metricLegend').html('Rebuffer percentage (%)'); + $('#legend_max_value').html('3'); + getIndustryInsightsData(INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL, (response) => { + const data = response.map((res, i) => ({ + code: res.countryCode.toUpperCase(), + value: parseFloat(res.value).toFixed(2), + name: res.countryCode + })); + drawChart(data, 'Rebuffer Percentage', 'Percentage', '%', dataClasses); + }) +} + +function drawChart(data, metric, unit, unitAbb, dataClasses) { + + Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) { + proceed.apply(this, Array.prototype.slice.call(arguments, 1)); + var points = mapChart.getSelectedPoints(); + + if (points.length === 0) { + reset(); + } + else if (points.length === 1) { + if (!$.isEmptyObject(countriesChart)) { + countriesChart = countriesChart.destroy(); + } + setValues(points[0], metric, unit); + $('#info').show(); + $('#instructions').show(); + $('#additionalData').show(); + $('#chartTitle').hide(); + } else { + $('#info').hide(); + $('#chartTitle').show(); + var categories = $.map(points, function (n, i) { + return [n.name]; + }); + var seriesData = $.map(points, function (n, i) { + return [{ "name": n.name, "data": [parseFloat(n.value)] }]; + }); + + compareCharts(categories, seriesData, metric, unit, unitAbb); + } + + }); + + mapChart = Highcharts + .mapChart('container', { + title: { + text: '' + }, + chart: { + map: map, + }, + + colors: ['rgba(0, 107, 255, 1)', + 'rgba(0, 107, 255, 0.8)', + 'rgba(0, 107, 255, 0.6)', + 'rgba(0, 107, 255, 0.4)', + 'rgba(0, 107, 255, 0.2)', + 'rgba(0, 107, 255, 0.05)' + ], + + mapNavigation: { + enabled: true + }, + + legend: { + enabled: false + }, + tooltip: { + backgroundColor: '#FFFFFF', + borderWidth: 1, + borderColor: '#CBE0ED', + borderRadius: 16, + useHTML: true, + pointFormat: '
{point.name}: {point.value} ' + unitAbb + '
' + + '(click for details)
' + }, + colorAxis: [{ + maxColor: 'rgba(0, 107, 255, 1)', + minColor: 'rgba(0, 107, 255, 0.2)', + dataClasses: dataClasses + }], + series: [{ + data: data, + allowPointSelect: true, + joinBy: ['iso-a2', 'code'], + animation: true, + name: metric, + states: { + hover: { + color: '#43C878' + } + }, + colorAxis: 0, + + nullColor: '#DCDFE4', + + shadow: false + }], + credits: { + enabled: false + }, + }); +} + +function compareCharts(categories, series, metric, unit, unitAbb) { + + if ($.isEmptyObject(countriesChart)) { + + countriesChart = Highcharts.chart('country-chart', { + chart: { + type: 'column' + }, + title: { + text: '' + }, + xAxis: { + categories: categories, + labels: { + enabled: false + } + }, + colors: ['#1278E1', + '#3dd9bb', + '#f3d236', + '#d2347f', + '#ad5536', + '#2f66f2', + '#bd37d1', + '#32e0bf', + '#670CE8', + '#FF0000', + '#E8900C', + '#9A0DFF', + '#100CE8', + '#E8B00C', + '#0DFF1A'], + yAxis: { + min: 0, + title: { + text: unit + } + }, + tooltip: { + headerFormat: '' + metric + '', + pointFormat: '' + + '', + footerFormat: '
{series.name}: {point.y:.1f} ' + unitAbb + '
', + shared: true, + useHTML: true + }, + plotOptions: { + column: { + pointPadding: 0.2, + borderWidth: 0 + } + }, + series: series, + credits: { + enabled: false + }, + }); + } + else { + countriesChart.categories = categories; + $.each(series, function (i) { + if (countriesChart.series[i]) { + countriesChart.series[i].update({ + name: this.name, + data: this.data, + }, false); + } else { + countriesChart.addSeries({ + name: this.name, + data: this.data, + }, false); + } + }); + while (countriesChart.series.length > series.length) { + countriesChart.series[countriesChart.series.length - 1].remove(false); + } + countriesChart.redraw(); + } +} + + +function setValues(point, metric, unit) { + $('#info #flag').attr('class', 'flag ' + point.properties["hc-key"]); + $('#country').html(point.name); + $('#metricName').html(metric); + $('#metricValue').html(point.value + ' ' + unit); + $('#intructions').show(); +} + +function reset() { + $('#additionalData').hide(); + + if (!$.isEmptyObject(countriesChart)) { + countriesChart = countriesChart.destroy(); + } +} From 734c7aa653e62c7834d4800d6d2a5564678e0ac6 Mon Sep 17 00:00:00 2001 From: Ines Kulenovic Date: Fri, 15 Oct 2021 11:38:45 +0200 Subject: [PATCH 4/7] color for selected state --- .../analytics-industry-insights/js/industry-insights.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/analytics/analytics-industry-insights/js/industry-insights.js b/analytics/analytics-industry-insights/js/industry-insights.js index 18c03799..c53b633b 100644 --- a/analytics/analytics-industry-insights/js/industry-insights.js +++ b/analytics/analytics-industry-insights/js/industry-insights.js @@ -253,12 +253,13 @@ function drawChart(data, metric, unit, unitAbb, dataClasses) { states: { hover: { color: '#43C878' + }, + select: { + color: '#69D393' } }, colorAxis: 0, - nullColor: '#DCDFE4', - shadow: false }], credits: { From 05838b78e52069d1797ead631f432427f54fd3c9 Mon Sep 17 00:00:00 2001 From: Ines Kulenovic Date: Fri, 15 Oct 2021 13:29:35 +0200 Subject: [PATCH 5/7] Updated colors and formatting --- .../analytics-industry-insights/css/style.css | 8 +- .../analytics-industry-insights/index.html | 46 ++-- .../js/industry-insights.js | 240 ++++++++++-------- 3 files changed, 155 insertions(+), 139 deletions(-) diff --git a/analytics/analytics-industry-insights/css/style.css b/analytics/analytics-industry-insights/css/style.css index 3d44577e..075ee488 100644 --- a/analytics/analytics-industry-insights/css/style.css +++ b/analytics/analytics-industry-insights/css/style.css @@ -14,7 +14,7 @@ display: inline-block; margin-bottom: 0px !important; vertical-align: bottom; - color: #0D3841; + color: rgb(13, 56, 65); } .metric-text{ @@ -27,11 +27,11 @@ font-weight: 600; font-size: 24px !important; margin-bottom: 16px !important; - color: #0D3841; + color: rgb(13, 56, 65); } .box-border{ - box-shadow: inset 1px 0px 0px #CBE0ED; + box-shadow: inset 1px 0px 0px rgb(203, 224, 237); } .text-label { @@ -57,6 +57,6 @@ background-color: rgba(0, 107, 255, 0.05); } .chart-legend-no-data{ - background-color: #DCDFE4; + background-color: rgb(220, 223, 228); margin-left: 24px; } diff --git a/analytics/analytics-industry-insights/index.html b/analytics/analytics-industry-insights/index.html index c12e71a7..6f6cc89c 100644 --- a/analytics/analytics-industry-insights/index.html +++ b/analytics/analytics-industry-insights/index.html @@ -14,6 +14,26 @@
+
+
+
+

+
+ +
+
+
+
+ +
+
+

0

+
+ +
Median video startup time (s)
+
+
No data available
+
@@ -23,38 +43,17 @@

Comparing countries

-

- +
+

Shift + Click on map to compare countries

- -
-
-
-

-
- -
-
-
-
- -
-
-

0

-
- -
Median video startup time (s)
-
-
No data available
-

@@ -105,7 +104,6 @@

About Rebuffer Percentage

-
Disclaimer diff --git a/analytics/analytics-industry-insights/js/industry-insights.js b/analytics/analytics-industry-insights/js/industry-insights.js index c53b633b..f59f29fc 100644 --- a/analytics/analytics-industry-insights/js/industry-insights.js +++ b/analytics/analytics-industry-insights/js/industry-insights.js @@ -37,30 +37,30 @@ function getIndustryInsightsData(url, callbackFunction) { } function showMedianStartupTimeChart() { - // todo check real ranges + // todo check real ranges const dataClasses = [ { from: 10 }, { + to: 10, from: 7.5, - to: 10 }, { + to: 7.5, from: 6, - to: 7.5 }, { + to: 6, from: 4.5, - to: 6 }, { + to: 4.5, from: 3, - to: 4.5 }, { + to: 3, from: 1.5, - to: 3 }, { to: 1.5 @@ -78,7 +78,6 @@ function showMedianStartupTimeChart() { name: res.countryCode, })); - drawChart(data, 'Median video startup time', 'Seconds', 's', dataClasses); }); } @@ -87,36 +86,36 @@ function showErrorPercentageChart() { // todo check real ranges const dataClasses = [ { - from: 2.8 + from: 2.4 }, { + to: 2.4, from: 2.0, - to: 2.4 }, { + to: 2.0, from: 1.6, - to: 2.0 }, { + to: 1.6, from: 1.2, - to: 1.6 }, { + to: 1.2, from: 0.8, - to: 1.2 }, { + to: 0.8, from: 0.4, - to: 0.8 }, { to: 0.4 }]; - $('#startupTimeContent').hide(); - $('#errorPercentageContent').show(); - $('#rebufferPercentageContent').hide(); - $('#metricLegend').html('Error percentage (%)'); - $('#legend_max_value').html('3'); + $('#startupTimeContent').hide(); + $('#errorPercentageContent').show(); + $('#rebufferPercentageContent').hide(); + $('#metricLegend').html('Error percentage (%)'); + $('#legend_max_value').html('3'); getIndustryInsightsData(INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL, (response) => { const data = response.map((res, i) => ({ code: res.countryCode.toUpperCase(), @@ -129,51 +128,125 @@ function showErrorPercentageChart() { } function showRebufferPercentageChart() { - // todo check real ranges + // todo check real ranges const dataClasses = [ { - from: 2.8 + from: 2.4 }, { + to: 2.4, from: 2.0, - to: 2.4 }, { + to: 2.0, from: 1.6, - to: 2.0 }, { + to: 1.6, from: 1.2, - to: 1.6 }, { + to: 1.2, from: 0.8, - to: 1.2 }, { + to: 0.8, from: 0.4, - to: 0.8 }, { to: 0.4 }]; - $('#startupTimeContent').hide(); - $('#errorPercentageContent').hide(); - $('#rebufferPercentageContent').show(); - $('#metricLegend').html('Rebuffer percentage (%)'); - $('#legend_max_value').html('3'); + $('#startupTimeContent').hide(); + $('#errorPercentageContent').hide(); + $('#rebufferPercentageContent').show(); + $('#metricLegend').html('Rebuffer percentage (%)'); + $('#legend_max_value').html('3'); getIndustryInsightsData(INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL, (response) => { const data = response.map((res, i) => ({ code: res.countryCode.toUpperCase(), value: parseFloat(res.value).toFixed(2), name: res.countryCode })); + drawChart(data, 'Rebuffer Percentage', 'Percentage', '%', dataClasses); }) } function drawChart(data, metric, unit, unitAbb, dataClasses) { + if ($.isEmptyObject(mapChart)) { + mapChart = Highcharts + .mapChart('container', { + title: { + text: '' + }, + chart: { + map: map, + }, + colors: ['rgba(0, 107, 255, 1)', + 'rgba(0, 107, 255, 0.8)', + 'rgba(0, 107, 255, 0.6)', + 'rgba(0, 107, 255, 0.4)', + 'rgba(0, 107, 255, 0.2)', + 'rgba(0, 107, 255, 0.05)' + ], + mapNavigation: { + enabled: true + }, + legend: { + enabled: false + }, + tooltip: { + backgroundColor: 'rgb(255, 255, 255)', + borderWidth: 1, + borderColor: 'rgb(203, 224, 237)', + borderRadius: 16, + useHTML: true, + pointFormat: '
{point.name}: {point.value} ' + unitAbb + '
' + + '(click for details)
' + }, + colorAxis: [{ + maxColor: 'rgba(0, 107, 255, 1)', + minColor: 'rgba(0, 107, 255, 0.2)', + dataClasses: dataClasses + }], + series: [{ + data: data, + allowPointSelect: true, + joinBy: ['iso-a2', 'code'], + animation: true, + name: metric, + states: { + hover: { + color: 'rgb(67, 200, 120)' + }, + select: { + color: 'rgb(105, 211, 147)' + } + }, + colorAxis: 0, + nullColor: 'rgb(220, 223, 228)', + shadow: false + }], + credits: { + enabled: false + }, + }); + } + else { + mapChart.tooltip.update({ + pointFormat: '
{point.name}: {point.value} ' + unitAbb + '
' + + '(click for details)
' + }); + mapChart.colorAxis[0].update({ + dataClasses: dataClasses + }); + mapChart.series[0].update({ + data: data, + name: metric + }); + mapChart.redraw(); + } Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) { proceed.apply(this, Array.prototype.slice.call(arguments, 1)); @@ -186,7 +259,7 @@ function drawChart(data, metric, unit, unitAbb, dataClasses) { if (!$.isEmptyObject(countriesChart)) { countriesChart = countriesChart.destroy(); } - setValues(points[0], metric, unit); + setValues(points[0], metric, unitAbb); $('#info').show(); $('#instructions').show(); $('#additionalData').show(); @@ -203,75 +276,11 @@ function drawChart(data, metric, unit, unitAbb, dataClasses) { compareCharts(categories, seriesData, metric, unit, unitAbb); } - }); - - mapChart = Highcharts - .mapChart('container', { - title: { - text: '' - }, - chart: { - map: map, - }, - - colors: ['rgba(0, 107, 255, 1)', - 'rgba(0, 107, 255, 0.8)', - 'rgba(0, 107, 255, 0.6)', - 'rgba(0, 107, 255, 0.4)', - 'rgba(0, 107, 255, 0.2)', - 'rgba(0, 107, 255, 0.05)' - ], - - mapNavigation: { - enabled: true - }, - - legend: { - enabled: false - }, - tooltip: { - backgroundColor: '#FFFFFF', - borderWidth: 1, - borderColor: '#CBE0ED', - borderRadius: 16, - useHTML: true, - pointFormat: '
{point.name}: {point.value} ' + unitAbb + '
' + - '(click for details)
' - }, - colorAxis: [{ - maxColor: 'rgba(0, 107, 255, 1)', - minColor: 'rgba(0, 107, 255, 0.2)', - dataClasses: dataClasses - }], - series: [{ - data: data, - allowPointSelect: true, - joinBy: ['iso-a2', 'code'], - animation: true, - name: metric, - states: { - hover: { - color: '#43C878' - }, - select: { - color: '#69D393' - } - }, - colorAxis: 0, - nullColor: '#DCDFE4', - shadow: false - }], - credits: { - enabled: false - }, - }); } function compareCharts(categories, series, metric, unit, unitAbb) { - if ($.isEmptyObject(countriesChart)) { - countriesChart = Highcharts.chart('country-chart', { chart: { type: 'column' @@ -285,21 +294,21 @@ function compareCharts(categories, series, metric, unit, unitAbb) { enabled: false } }, - colors: ['#1278E1', - '#3dd9bb', - '#f3d236', - '#d2347f', - '#ad5536', - '#2f66f2', - '#bd37d1', - '#32e0bf', - '#670CE8', - '#FF0000', - '#E8900C', - '#9A0DFF', - '#100CE8', - '#E8B00C', - '#0DFF1A'], + colors: ['rgb(18, 120, 225)', + 'rgb(61, 217, 187)', + 'rgb(243, 210, 54)', + 'rgb(210, 52, 127)', + 'rgb(173, 85, 54)', + 'rgb(47, 102, 242)', + 'rgb(189, 55, 209)', + 'rgb(50, 224, 191)', + 'rgb(103, 12, 232)', + 'rgb(255, 0, 0)', + 'rgb(232, 144, 12)', + 'rgb(154, 13, 255)', + 'rgb(16, 12, 232)', + 'rgb(232, 176, 12)', + 'rgb(13, 255, 26)'], yAxis: { min: 0, title: { @@ -328,6 +337,16 @@ function compareCharts(categories, series, metric, unit, unitAbb) { } else { countriesChart.categories = categories; + countriesChart.yAxis[0].update({ + title: { + text: unit + } + }); + countriesChart.tooltip.update({ + headerFormat: '' + metric + '', + pointFormat: '' + + '', + }); $.each(series, function (i) { if (countriesChart.series[i]) { countriesChart.series[i].update({ @@ -359,7 +378,6 @@ function setValues(point, metric, unit) { function reset() { $('#additionalData').hide(); - if (!$.isEmptyObject(countriesChart)) { countriesChart = countriesChart.destroy(); } From fe915c20cd20e99c7347a10bda4a7e13b38aab71 Mon Sep 17 00:00:00 2001 From: Ines Kulenovic Date: Wed, 27 Oct 2021 11:39:22 +0200 Subject: [PATCH 6/7] Updated demo description and data ranges --- .../analytics-industry-insights/info.json | 2 +- .../js/industry-insights.js | 88 +++++++++---------- 2 files changed, 43 insertions(+), 47 deletions(-) diff --git a/analytics/analytics-industry-insights/info.json b/analytics/analytics-industry-insights/info.json index 30df4159..0159f3d0 100644 --- a/analytics/analytics-industry-insights/info.json +++ b/analytics/analytics-industry-insights/info.json @@ -1,6 +1,6 @@ { "title": "Industry Insights Demo", - "description": "Industry Insights", + "description": "Gain insights into video performance across the globe provided by Bitmovin Analytics", "executable": { "executable": false, "indexfile": "index.html" diff --git a/analytics/analytics-industry-insights/js/industry-insights.js b/analytics/analytics-industry-insights/js/industry-insights.js index f59f29fc..78cc58cf 100644 --- a/analytics/analytics-industry-insights/js/industry-insights.js +++ b/analytics/analytics-industry-insights/js/industry-insights.js @@ -1,8 +1,8 @@ var countriesChart = {}; var mapChart = {}; -const INDUSTRY_INSIGHT_MEDIAN_STARTUP_TIME_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/median_video_startup_time_test.json' -const INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/error_percentage_test.json' -const INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/rebuffer_percentage_test.json' +const INDUSTRY_INSIGHT_MEDIAN_STARTUP_TIME_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/median_video_startup_time.json' +const INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/error_percentage.json' +const INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL = 'https://storage.googleapis.com/bitmovin-frontend-cdn-origin/frontend/demos/analytics/rebuffer_percentage.json' $(function () { reset(); @@ -37,36 +37,35 @@ function getIndustryInsightsData(url, callbackFunction) { } function showMedianStartupTimeChart() { - // todo check real ranges const dataClasses = [ { - from: 10 + from: 4.2 }, { - to: 10, - from: 7.5, + from: 3.5, + to: 4.2 }, { - to: 7.5, - from: 6, + from: 2.8, + to: 3.5 }, { - to: 6, - from: 4.5, + from: 2.1, + to: 2.8 }, { - to: 4.5, - from: 3, + from: 1.4, + to: 2.1 }, { - to: 3, - from: 1.5, + from: 0.7, + to: 1.4 }, { - to: 1.5 + to: 0.7 }]; $('#metricLegend').html('Median video startup time (s)'); - $('#legend_max_value').html('10'); + $('#legend_max_value').html('4'); $('#startupTimeContent').show(); $('#errorPercentageContent').hide(); $('#rebufferPercentageContent').hide(); @@ -83,39 +82,38 @@ function showMedianStartupTimeChart() { } function showErrorPercentageChart() { - // todo check real ranges const dataClasses = [ { - from: 2.4 + from: 4.2 }, { - to: 2.4, - from: 2.0, + from: 3.5, + to: 4.2 }, { - to: 2.0, - from: 1.6, + from: 2.8, + to: 3.5 }, { - to: 1.6, - from: 1.2, + from: 2.1, + to: 2.8 }, { - to: 1.2, - from: 0.8, + from: 1.4, + to: 2.1 }, { - to: 0.8, - from: 0.4, + from: 0.7, + to: 1.4 }, { - to: 0.4 + to: 0.7 }]; $('#startupTimeContent').hide(); $('#errorPercentageContent').show(); $('#rebufferPercentageContent').hide(); $('#metricLegend').html('Error percentage (%)'); - $('#legend_max_value').html('3'); + $('#legend_max_value').html('4'); getIndustryInsightsData(INDUSTRY_INSIGHT_ERROR_PERCENTAGE_URL, (response) => { const data = response.map((res, i) => ({ code: res.countryCode.toUpperCase(), @@ -128,40 +126,38 @@ function showErrorPercentageChart() { } function showRebufferPercentageChart() { - // todo check real ranges const dataClasses = [ { - from: 2.4 - }, - { - to: 2.4, - from: 2.0, + from: 1.2 }, { - to: 2.0, - from: 1.6, + from: 1.0, + to: 1.2 }, { - to: 1.6, - from: 1.2, + from: 0.8, + to: 1.0 }, { - to: 1.2, - from: 0.8, + from: 0.6, + to: 0.8 }, { - to: 0.8, from: 0.4, + to: 0.6 }, { + from: 0.2, to: 0.4 + }, + { + to: 0.2 }]; - $('#startupTimeContent').hide(); $('#errorPercentageContent').hide(); $('#rebufferPercentageContent').show(); $('#metricLegend').html('Rebuffer percentage (%)'); - $('#legend_max_value').html('3'); + $('#legend_max_value').html('1'); getIndustryInsightsData(INDUSTRY_INSIGHT_REBUFFER_PERCENTAGE_URL, (response) => { const data = response.map((res, i) => ({ code: res.countryCode.toUpperCase(), From 2063b64a31e51313d1bab8d8a7ddf008d56c183d Mon Sep 17 00:00:00 2001 From: Ines Kulenovic Date: Wed, 27 Oct 2021 15:27:51 +0200 Subject: [PATCH 7/7] Update formatting --- .../analytics-industry-insights/js/industry-insights.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/analytics/analytics-industry-insights/js/industry-insights.js b/analytics/analytics-industry-insights/js/industry-insights.js index 78cc58cf..c02acf76 100644 --- a/analytics/analytics-industry-insights/js/industry-insights.js +++ b/analytics/analytics-industry-insights/js/industry-insights.js @@ -73,10 +73,9 @@ function showMedianStartupTimeChart() { getIndustryInsightsData(INDUSTRY_INSIGHT_MEDIAN_STARTUP_TIME_URL, (response) => { const data = response.map((res, i) => ({ code: res.countryCode.toUpperCase(), - value: (parseFloat(res.value) / 1000).toFixed(2), + value: parseFloat(res.value).toFixed(2), name: res.countryCode, })); - drawChart(data, 'Median video startup time', 'Seconds', 's', dataClasses); }); } @@ -120,7 +119,6 @@ function showErrorPercentageChart() { value: parseFloat(res.value).toFixed(2), name: res.countryCode, })); - drawChart(data, 'Error Percentage', 'Percentage', '%', dataClasses); }); } @@ -164,7 +162,6 @@ function showRebufferPercentageChart() { value: parseFloat(res.value).toFixed(2), name: res.countryCode })); - drawChart(data, 'Rebuffer Percentage', 'Percentage', '%', dataClasses); }) }
{series.name}: {point.y:.1f} ' + unitAbb + '