<!DOCTYPE html>
<html>
<head>
  <title>Gramex Update</title>
  <link rel="stylesheet" href="ui/bootstraptheme.css">
</head>
<body>
  <div class="container">
    <h1 class="mt-4">Gramex Update</h1>
    <p>Welcome to the Gramex update page.</p>
    <p>The latest version is {{ version }}. You can install it by following
      <a href="https://gramener.com/gramex/guide/install/">these instructions</a>.</p>
    <p>Examples of visualisations created by Gramex are at <a href="https://gramener.com/">gramener.com</a>.</p>

    <h2 class="auth d-none">Monthly Users</h2>
    <div id="users-by-month"></div>
    <h2 class="auth d-none">Daily: <span id="user-count"></span> machines / day</h2>
    <div id="users-by-date"></div>
    <h2 class="auth d-none">Browse logs</h2>
    <div class="data"></div>
  </div>
  <div class="small fixed-bottom bg-light border-top py-1">
    <div class="container">
      {% if handler.current_user %}
      You are logged in as <a href="login/">{{ handler.current_user.id }}</a>
      {% else %}
      You are <a href="login/">not logged in</a>.
      {% end %}
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vega@4.2.0/build/vega.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc4/build/vega-lite.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.18.2/build/vega-embed.js"></script>
  <script src="ui/jquery/dist/jquery.min.js"></script>
  <script src="ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="ui/g1/dist/g1.min.js"></script>
  <script src="ui/moment/min/moment.min.js"></script>
  <script src="ui/lodash/lodash.min.js"></script>
  <script>
    /* eslint-env browser, jquery */
    /* globals moment, _, vegaEmbed */
    var from = moment().subtract(1, 'month').format('YYYY-MM-DD')
    $.getJSON(`data/logs?date>~=${from}&_by=date&_by=node&_sort=-date&_c=event|count`)
      .done(function(data) {
        $('.auth.d-none').removeClass('d-none')
        var usage = _.map(_.groupBy(data, 'date'), function (v, date) {
          return { date: date, users: v.length }
        })
        var mean = _.meanBy(usage, function(row) { return row.users })
        $('#user-count').html(Math.round(mean))
        vegaEmbed('#users-by-date', {
          '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
          'mark': 'bar',
          'data': { 'values': usage },
          'encoding': {
            'x': { 'field': 'date', 'type': 'nominal', 'axis': {'title': ''} },
            'y': { 'field': 'users', 'type': 'quantitative', 'axis': {'title': ''} }
          }
        }, {actions: false})
        $('.data').formhandler({
          src: 'data/logs?date>~=' + from,
          columns: 'date,event,ip,system,node,cwd,args'
        })
      })
    $.getJSON('data/mau?_sort=-month&_limit=24')
      .done(function(data) {
        vegaEmbed('#users-by-month', {
          '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
          'mark': 'bar',
          'data': { 'values': data },
          'encoding': {
            'x': { 'field': 'month', 'type': 'nominal', 'axis': {'title': 'Month'} },
            'y': { 'field': 'nodes', 'type': 'quantitative', 'axis': {'title': 'Users'} }
          }
        }, {actions: false})
      })
  </script>
</body>
</html>
