libreoffice-online/loleaflet/admin/adminAnalytics.html

<main>
  <div class="container">
    <script>Admin.Analytics(host);</script>

    <h3 class="title is-3"><script>document.write(l10nstrings.strAnalytics)</script></h3>

    <div class="tabs">
      <ul>
        <li id="tab-documents-opened" class="is-active"><a id="button-memview" href="#memview"><script>document.write(l10nstrings.strMemoryGraph)</script></a></li>
        <li id="tab-users-online"><a id="button-cpuview" href="#cpuview"><script>document.write(l10nstrings.strCpuGraph)</script></a></li>
        <li id="tab-users-online"><a id="button-networkview" href="#networkview"><script>document.write(l10nstrings.strNetGraph)</script></a></li>
      </ul>
    </div>

    <div id="memview" class="mtabs">
      <div class="graph-container">
        <div>
          <svg id="MemVisualisation" width="1010" height="510"></svg>
        </div>
      </div>
    </div>

    <div id="cpuview" class="mtabs">
      <div class="graph-container">
        <div>
          <svg id="CpuVisualisation" width="1010" height="510"></svg>
        </div>
      </div>
    </div>

    <div id="networkview" class="mtabs">
      <div class="graph-container">
        <div>
          <svg id="NetVisualisation" width="1010" height="510"></svg>
        </div>
      </div>
    </div>

  </div>
</main>

<script>
  document.getElementById('a-analytics-mobile').classList.add('is-active');
  document.getElementById('a-analytics-tablet').classList.add('is-active');

  // Switching tabs is done by css rules. We will set "is-active" classes here.
  document.getElementById('button-memview').onclick = function() {
    document.getElementById('button-memview').parentNode.className = 'is-active';
    document.getElementById('button-cpuview').parentNode.className = '';
    document.getElementById('button-networkview').parentNode.className = '';
  }

  document.getElementById('button-cpuview').onclick = function() {
    document.getElementById('button-memview').parentNode.className = '';
    document.getElementById('button-cpuview').parentNode.className = 'is-active';
    document.getElementById('button-networkview').parentNode.className = '';
  }

  document.getElementById('button-networkview').onclick = function() {
    document.getElementById('button-memview').parentNode.className = '';
    document.getElementById('button-cpuview').parentNode.className = '';
    document.getElementById('button-networkview').parentNode.className = 'is-active';
  }
</script>