Merge pull request #306 from simonnagl/bugfix/safari-misaligned_dial_graphs

Fixing Dial-graphs misaligned in Safari/OS X

diff --combined web/index.html
index 507fd7a308ba259c7819e3435fba6eda748d8339,502973c3df239901f7158c032d45d132e8bcf35f..06695647f3b96618d9a444f8a6c02aadf77b05d4
--- 1/web/index.html
--- 2/web/index.html
+++ b/web/index.html
@@@ -350,9 -350,8 +350,9 @@@
                                        <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">demo sites <strong class="caret"></strong></a>
                                                <ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
 -                                                      <li id="demo_eu"><a href="//netdata.firehol.org?nowelcome">EU - London (DigitalOcean.com)</a></li>
 +                                                      <li id="demo_eu"><a href="//netdata1.firehol.org?nowelcome">EU - London (DigitalOcean.com)</a></li>
                                                        <li id="demo_us"><a href="//netdata2.firehol.org?nowelcome">US - Atlanta (CDN77.com)</a></li>
 +                                                      <li id="demo_gr"><a href="//netdata3.firehol.org?nowelcome">EU - Greece</a></li>
                                                        <li role="separator" class="divider"></li>
                                                        <li id="demo_tv"><a href="tv.html">TV Dashboard for 2 servers</a></li>
                                                        <li id="demosites"><a href="demosites.html">Dashboard for monitoring netdata demo sites</a></li>
@@@ -799,7 -798,7 +799,7 @@@ function isdemo() 
  
        try {
                if(typeof document.location.hostname === 'string') {
 -                      if(document.location.hostname === 'netdata.firehol.org') {
 +                      if(document.location.hostname === 'netdata.firehol.org' || document.location.hostname === 'netdata1.firehol.org') {
                                document.getElementById("demo_eu").className = "active";
                                this_is_demo = true;
                        }
@@@ -807,10 -806,6 +807,10 @@@
                                document.getElementById("demo_us").className = "active";
                                this_is_demo = true;
                        }
 +                      else if(document.location.hostname === 'netdata3.firehol.org') {
 +                              document.getElementById("demo_gr").className = "active";
 +                              this_is_demo = true;
 +                      }
                }
  
                if(!this_is_demo)
@@@ -1447,11 -1442,11 +1447,11 @@@ function enrichChartData(chart) 
  
  function name2id(s) {
        return s
 -              .replace(' ', '_')
 -              .replace('(', '_')
 -              .replace(')', '_')
 -              .replace('.', '_')
 -              .replace('/', '_');
 +              .replace(/ /g, '_')
 +              .replace(/\(/g, '_')
 +              .replace(/\)/g, '_')
 +              .replace(/\./g, '_')
 +              .replace(/\//g, '_');
  }
  
  function headMain(charts, duration) {
@@@ -1606,9 -1601,8 +1606,9 @@@ function renderPage(menus, data) 
  
                // generate an entry at the main menu
  
 -              sidebar += '<li class=""><a href="#' + menu + '">' + menus[menu].title + '</a><ul class="nav">';
 -              html += '<div role="section"><div role="sectionhead"><h1 id="' + menu + '" role="heading">' + menus[menu].title + '</h1></div><div id="' + menu + '" role="document">';
 +              var menuid = name2id(menu);
 +              sidebar += '<li class=""><a href="#' + menuid + '">' + menus[menu].title + '</a><ul class="nav">';
 +              html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
  
                if(menus[menu].info !== null)
                        html += menus[menu].info;
@@@ -1616,7 -1610,7 +1616,7 @@@
                // console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
  
                var shtml = '';
-               var mhead = '<div style="width: 100%; text-align: center;">' + mainhead;
+               var mhead = '<div class="netdata-chart-row">' + mainhead;
                mainhead = '';
  
                // sort the submenus of this menu
@@@ -1626,14 -1620,13 +1626,14 @@@
                        var submenu = sub[si++];
  
                        // generate an entry at the submenu
 -                      sidebar += '<li class><a href="#' + name2id(menu + '_' + submenu) + '">' + menus[menu].submenus[submenu].title + '</a></li>';
 -                      shtml += '<div class="netdata-group-container" id="submenu_' + name2id(menu + '_' + submenu) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(menu + '_' + submenu) + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
 +                      var submenuid = name2id(menu + '_' + submenu);
 +                      sidebar += '<li class><a href="#' + submenuid + '">' + menus[menu].submenus[submenu].title + '</a></li>';
 +                      shtml += '<div class="netdata-group-container" id="submenu_' + submenuid + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + submenuid + '" class="netdata-chart-alignment" role="heading">' + menus[menu].submenus[submenu].title + '</h2>';
  
                        if(menus[menu].submenus[submenu].info !== null)
                                shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
  
-                       var head = '<div style="width: 100%; text-align: center;">';
+                       var head = '<div class="netdata-chart-row">';
                        var chtml = '';
  
                        // console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);
@@@ -2007,30 -2000,17 +2007,30 @@@ function finalizePage() 
                        location.reload();
        });
  
 -      if(!nowelcome && isdemo()) {
 -              setTimeout(function() {
 -                      $('#welcomeModal').modal();
 -              }, 1000);
 -      }
 -      else
 -              notifyForUpdate();
 -
        $('#updateModal').on('shown.bs.modal', function() {
                notifyForUpdate(true);
        });
 +
 +      if(isdemo()) {
 +              if(!nowelcome) {
 +                      setTimeout(function() {
 +                              $('#welcomeModal').modal();
 +                      }, 1000);
 +              }
 +
 +              // google analytics when this is used for the home page of the demo sites
 +              // this does not run on user's installations
 +              setTimeout(function() {
 +                      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 +                      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 +                      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 +                      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 +
 +                      ga('create', 'UA-64295674-3', 'auto');
 +                      ga('send', 'pageview');
 +              }, 2000);
 +      }
 +      else notifyForUpdate();
  }
  
  function resetDashboardOptions() {