analytics.html

<link rel="shortcut icon" type="image/png" href="./favicon.png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://rawcdn.githack.com/mozilla/metrics-graphics/aca3532f9945b08c85ba5e72946863ff3f2b762a/dist/metricsgraphics.css" rel="stylesheet"></link>
<script src="https://rawcdn.githack.com/mozilla/metrics-graphics/aca3532f9945b08c85ba5e72946863ff3f2b762a/dist/metricsgraphics.min.js"></script>
<style>
    .tablewrap {
        height: 30%;
        overflow: scroll;
        padding: 10px;
    }
    h1, h2 {
        text-align: center;
    }
    h2 {
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
    }
    #totals {
        background-color: lightblue;
        height: 170px;
    }
    #projects {
        background-color: lightgreen;
    }
    #users {
        background-color: pink;
    }
    table {
        background-color: white;
    }
</style>
<div id="page" style="display: none" :style="{display: authenticated ? 'block' : 'none'}">
    <h1>WoofJS.com Analytics</h1>
    <div id="totals" class="tablewrap">
        <h2>Totals</h2>
        <analytics-table
          :columns="aggregateColumns"
          :rows="[{}]"
          :joins="{users: users, projects: projects}"
        ></analytics-table>
    </div>
    <div id="projects" class="tablewrap">
        <h2>Projects</h2>
        <analytics-table
          :columns="projectColumns"
          :rows="projects"
          :joins="{users: users}"
        ></analytics-table>
    </div>
    <div id="users" class="tablewrap">
      <h2>Users</h2>
      <analytics-table
        :columns="userColumns"
        :rows="users"
        :joins="{projects: projects}"
      ></analytics-table>
    </div>
</div>
<script type="text/x-template" id="analytics-table-template">
  <table class="table table-striped">
    <thead>
      <tr>
        <th @click="clickSort(column)" v-for="column in columns" :style="{fontWeight: sortColumn.name == column.name ? 'bold' : 'normal'}">
          {{column.name}}
          <i v-show="sortColumn.name == column.name" :class="[sortDirection == 'UP' ? 'fa-caret-square-o-up' : 'fa-caret-square-o-down', 'fa']"></i>
        </th>
      </tr>
    </thead>
    <tbody>
      <i v-show="rows.length == 0" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="margin-left:auto; margin-right: auto"></i>
      <tr v-for="row in sortedRows">
          <td v-for="column in columns">{{calculateCell(column, row, joins)}}</td>
      </tr>
    </tbody>
  </table>
</script>

<script>
  Vue.component('analytics-table', {
    template: '#analytics-table-template',
    props: [
      "columns",
      "rows",
      "joins"
    ],
    data: function(){ return {
      sortColumn: this.columns[0],
      sortDirection: "DOWN"
    }},
    methods: {
      clickSort: function(column) {
        if (this.sortColumn == column){
          this.sortDirection = this.sortDirection == "DOWN" ? "UP" : "DOWN"
        } else {
          this.sortColumn = column
          this.sortDirection = "DOWN"
        }
      },
      calculateCell: function(column, row, joins){
        var result = column.func(row, joins)
        if (column.type == "DATE"){
          result = new Date(result)
          if (result.toString() == "Invalid Date"){
            result = ""
          } else {
            result = result.toLocaleString()
          }
        }
        return result
      }
    },
    computed: {
      sortedRows: function(){
        var sorted
        if (this.sortDirection == "DOWN"){
          var undefineds = _.filter(this.rows, row => this.sortColumn.func(row, this.joins) === undefined)
          var hardVaules = _.filter(this.rows, row => this.sortColumn.func(row, this.joins) !== undefined)
          sorted = _.sortBy(hardVaules, row => this.sortColumn.func(row, this.joins)).reverse()
          sorted.concat(undefineds)
        } else {
          sorted = _.sortBy(this.rows, row => this.sortColumn.func(row, this.joins))
        }
        
        return sorted
      }
    }
  })
  
  var aggregateColumns = [
  
    {
      name: "Projects Created Today",
      func: function(row, joins) {
        return joins.projects.filter(project => project.currentVersionTime).filter(project => new Date().toDateString() == new Date(project.projectCreatedTime).toDateString()).length
      }
    },
    {
      name: "Projects Worked On Today",
      func: function(row, joins) {
        return joins.projects.filter(project => project.currentVersionTime).filter(project => new Date().toDateString() == new Date(project.currentVersionTime).toDateString()).length
      }
    },
    {
      name: "Users Active Today",
      func: function(row, joins) {
        return Array.from(new Set(joins.projects.filter(project => project.currentVersionTime).filter(project => new Date().toDateString() == new Date(project.currentVersionTime).toDateString()).map(project => project.uid))).length
      }
    },
    {
      name: "Total Users",
      func: function(row, joins) {
        return joins.users.length
      }
    },
    {
      name: "Total Projects",
      func: function(row, joins) {
        return joins.projects.length 
      }
    },
    {
      name: "Total Revisions",
      func: function(row, joins) {
        return joins.projects.reduce((a,b) => a + b.revisions.length, 0)
      }
    }
  ]
  
  var projectColumns = [
    {
      name: "Project",
      func: function(project, joins) {
        return project.key
      }
      
    },
    {
      name: "Created By",
      func: function(project, joins) {
        return project.user ? project.user.displayName : 'Anonymous'
      }
    },
    {
      name: "Last Revision",
      func: function(project, joins) {
        return project.currentVersionTime      
      },
      type: "DATE"
    },
    {
      name: "Created At",
      func: function(project, joins) {
        return project.projectCreatedTime
      },
      type: "DATE"
    },
    {
      name: "Number of Revisions",
      func: function(project, joins) {
        return project.revisions.length + 1
      }
    }
  ]
  
  var userColumns = [
      {
        name: "Name",
        func: function(user, joins){
          return user.displayName
        }
      },
      {
        name: "ID",
        func: function(user, joins){
          return user.key
        }
      },
      {
        name: "Account Created",
        func: function(user, joins){
          return user.createdDate
        },
        type: "DATE" 
      },
      {
        name: "First Revision",
        func: function(user, joins){
          return user.projects.map(project => project.projectCreatedTime).sort()[0]
        },
        type: "DATE" 
      },
      {
        name: "Last Active",
        func: function(user, joins){
          if (user.projects.length > 0){
            // last revision
            return user.projects.map(project => project.currentVersionTime).sort().reverse()[0]
          } else {
            // account created
            return user.projects.map(project => project.projectCreatedTime).sort()[0]
          }
          
        },
        type: "DATE"
      },
      {
        name: "Number of Projects",
        func: function(user, joins){
          return user.projects.length
        }  
      },
      {
        name: "Number of Revisions",
        func: function(user, joins){
          return user.projects.reduce((a,b) => a + b.revisions.length, 0)
      
        }
      }
  ]
  
  var app = new Vue({
      el: '#page',
      data: {
        users: [],
        userColumns: userColumns,
        projects: [],
        projectColumns: projectColumns,
        aggregateColumns: aggregateColumns,
        authenticated: false,
      }
  })
    
  app.authenticated = prompt("Password") == 'codingspace'
    
  var config = {
    apiKey: "AIzaSyBYHv7dCiD0bWiHRlcp4VIZCIqzoMnB4yY",
    authDomain: "woofjs-d1b27.firebaseapp.com",
    databaseURL: "https://woofjs-d1b27.firebaseio.com",
    storageBucket: "woofjs-d1b27.appspot.com",
    messagingSenderId: "397293370524"
  };
  
  firebase.initializeApp(config);
  
  var objectOfObjectsToArray = function(obj, keyName = "key"){
    return Object.keys(obj).map(function(key) {
      var child = obj[key]
      child[keyName] = key
      return child;
    })
  }
  
  firebase.database().ref('/user/').on('value', function(snapshot) {
    app.users = objectOfObjectsToArray(snapshot.val())
    app.users.forEach(user => user.projects = [])
  });
  
  var accountsCreatedByDay, revisions, revisionsByDay, projectsCreatedByDay, projectsEditedByDay, usersActiveByDay
  
  firebase.database().ref('/code-meta-data/').on('value', function(snapshot) {
    app.projects = objectOfObjectsToArray(snapshot.val())
    
    // make revisions objects
    app.projects.forEach(function(project) {
      if (project.version) {
        project.revisions = Object.keys(project.version).map(key => { return {key: key, time: project.version[key], project: project} })  
      } else {
        project.revisions = []
      }
    })
    
    // join projects to users and users to projects
    app.projects.forEach(function(project) {
      project.user = app.users.find(user => user.key == project['uid']) 
      project.revisions.forEach(r => r.project.user = project.user)
      if (project.user){
        project.user.projects.push(project)
      }
    })
    
    // Graph data
    function MGbyDay(rows, date) {
      //rows.forEach(row => console.log(row.time))
      // count users by created date (chopping off time from date string)
      var byDay = _.countBy(rows, row => new Date(row[date]).toISOString().split("T")[0])
      // make the date string a Date object for MG
      byDay = _.map(byDay, function(value, prop) {
        var d = new Date(prop)
        d.setDate(d.getDate() + 1)
        return { date: d, value: value  };
      })
      return byDay
    }
    
    accountsCreatedByDay = MGbyDay(app.users, "createdDate")
    
    revisions = _.flatten(_.map(app.projects, "revisions"))



  });
</script>
<script>
  (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-82374072-1', 'auto');
  ga('send', 'pageview');
</script>