First charts

.gitignore

@@ -1,28 +1,4 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# Commenting this out is preferred by some people, see
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
-
-# Users Environment Variables
-.lock-wscript
+bower_components
+www/assets/css
+www/assets/js

README.md

@@ -1,4 +1,4 @@
-zen-audit
-=========
+site
+====
 
-Audit Application for ZEN modules
+Personal site

bower.json

@@ -0,0 +1,22 @@
+{
+    "name": "zen.audit",
+    "version": "1.0.0",
+    "directory": "dependencies/bower",
+    "componentsDirectory": "dependencies/bower",
+    "ignore": [
+            "**/.*",
+            "node_modules",
+            "bower_components",
+            "test",
+            "tests"
+    ],
+    "dependencies": {
+        "highcharts"       : "*",
+        "hope"             : "*",
+        "jquery"           : "*",
+        "moment"           : "*",
+        "stylmethods"      : "*",
+        "tuktuk"           : "*",
+        "ua-parser-js"     : "*"
+    }
+}

gulpfile.js

@@ -0,0 +1,100 @@
+"use strict"
+
+// -- DEPENDENCIES -------------------------------------------------------------
+var gulp    = require('gulp');
+var coffee  = require('gulp-coffee');
+var concat  = require('gulp-concat');
+var connect = require('gulp-connect');
+var flatten = require('gulp-flatten');
+var header  = require('gulp-header');
+var uglify  = require('gulp-uglify');
+var gutil   = require('gulp-util');
+var stylus  = require('gulp-stylus');
+var yml     = require('gulp-yml');
+var pkg     = require('./package.json');
+
+// -- FILES --------------------------------------------------------------------
+var assets = 'www/assets/';
+var source = {
+  coffee: [ 'source/app.coffee',
+            'source/app.*.coffee'],
+  styl  : [ 'source/styles/__init.styl',
+            'source/styles/vendor.styl',
+            'source/styles/reset.styl',
+            'source/styles/app.styl',
+            'source/styles/app.*.styl']};
+
+var dependencies = {
+    js   :[ 'bower_components/jquery/dist/jquery.min.js',
+            'bower_components/hope/hope.js',
+            'bower_components/moment/min/moment.min.js',
+            'bower_components/highcharts/highcharts.js',
+            // 'bower_components/highcharts/modules/canvas-tools.js',
+            // 'bower_components/highcharts/modules/data.js',
+            // 'bower_components/highcharts/modules/drilldown.js',
+            'bower_components/highcharts/modules/exporting.js',
+            // 'bower_components/highcharts/modules/funnel.js',
+            // 'bower_components/highcharts/modules/heatmap.js',
+            // 'bower_components/highcharts/modules/no-data-to-display.js',
+            // 'bower_components/highcharts/modules/solid-gauge.js',
+            'bower_components/highcharts/themes/dark-unica.js',
+            'bower_components/ua-parser-js/src/ua-parser.js'
+          ],
+    css  :[ 'bower_components/tuktuk/tuktuk.grid.css']};
+
+var banner = ['/**',
+  ' * <%= pkg.name %> - <%= pkg.description %>',
+  ' * @version v<%= pkg.version %>',
+  ' * @link    <%= pkg.homepage %>',
+  ' * @author  <%= pkg.author.name %> (<%= pkg.author.site %>)',
+  ' * @license <%= pkg.license %>',
+  ' */',
+  ''].join('\n');
+
+// -- TASKS --------------------------------------------------------------------
+gulp.task('dependencies', function() {
+  gulp.src(dependencies.js)
+    .pipe(concat(pkg.name + '.dependencies.js'))
+    .pipe(uglify({mangle: false}))
+    .pipe(header(banner, {pkg: pkg}))
+    .pipe(gulp.dest(assets + '/js'));
+
+  gulp.src(dependencies.css)
+    .pipe(concat(pkg.name + '.dependencies.css'))
+    .pipe(header(banner, {pkg: pkg}))
+    .pipe(gulp.dest(assets + '/css'));
+});
+
+gulp.task('coffee', function() {
+  gulp.src(source.coffee)
+    .pipe(concat(pkg.name + '.coffee'))
+    .pipe(coffee().on('error', gutil.log))
+    .pipe(uglify({mangle: false}))
+    .pipe(header(banner, {pkg: pkg}))
+    .pipe(gulp.dest(assets + '/js'))
+    .pipe(connect.reload());
+});
+
+gulp.task('styl', function() {
+  gulp.src(source.styl)
+    .pipe(concat(pkg.name + '.styl'))
+    .pipe(stylus({compress: true, errors: true}))
+    .pipe(header(banner, {pkg: pkg}))
+    .pipe(gulp.dest(assets + '/css'))
+    .pipe(connect.reload());
+});
+
+gulp.task('webserver', function() {
+  connect.server({ port: 8000, root: 'www/', livereload: true });
+});
+
+gulp.task('init', function() {
+  gulp.run(['dependencies', 'coffee', 'styl'])
+});
+
+gulp.task('default', function() {
+  gulp.run(['webserver'])
+  gulp.watch(dependencies.js, ['dependencies']);
+  gulp.watch(source.coffee, ['coffee']);
+  gulp.watch(source.styl, ['styl']);
+});

package.json

@@ -0,0 +1,21 @@
+{
+  "name"            : "zen.audit",
+  "version"         : "0.10.29",
+  "description"     : "",
+  "homepage"        : "http://soyjavi.com",
+  "author"          : "Javi Jimenez Villar",
+  "dependencies": {},
+  "devDependencies" : {
+    "gulp"        : "*",
+    "gulp-coffee" : "*",
+    "gulp-concat" : "*",
+    "gulp-connect": "*",
+    "gulp-flatten": "*",
+    "gulp-header" : "*",
+    "gulp-stylus" : "*",
+    "gulp-uglify" : "*",
+    "gulp-util"   : "*",
+    "gulp-yml"    : "*"
+  },
+  "engines"         : { "node": "*"}
+}

source/app.coffee

@@ -0,0 +1,55 @@
+"use strict"
+
+window.ZEN = ZEN = {}
+ZEN.url = "http://localhost:1337/audit/my_P4ssw0rd/20141030"
+$ ->
+  parser = new UAParser()
+
+  ZEN.count = (object, key, value = 1) ->
+    object[key] = if object[key] then (object[key] + value) else value
+
+  ZEN.utc = (object) ->
+    values = []
+    for key, value of object
+      date = new Date(key)
+      utc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())
+      values.push [utc, value]
+    values
+
+
+  ZEN.proxy("GET", ZEN.url).then (error, response) ->
+    console.log "REQUESTS", response.length
+    latence = []
+    requests = {}
+    bandwitdh = {}
+    agents = {}
+    browsers = {}
+    devices = {}
+    os = {}
+    for audit in response
+      audit = JSON.parse(audit)
+
+      # Latence
+      date = new Date(audit.at)
+      utc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())
+      latence.push [utc, audit.ms]
+
+      # Number of requests per second
+      ZEN.count requests, moment(date).format("YYYY/MM/DD HH:mm:ss")
+      # Bytes per minute
+      ZEN.count bandwitdh, moment(date).format("YYYY/MM/DD HH:mm"), audit.size
+
+      # Agent
+      if audit.agent
+        ua = parser.setUA(audit.agent).getResult()
+        ZEN.count browsers, ua.browser.name
+        ZEN.count devices, ua.device.type
+        ZEN.count os, (if ua.os.version then "#{ua.os.name} #{ua.os.version}" else ua.os.name)
+
+    # Requests
+    ZEN.spline "requests", "DAILY Requests", latence, (ZEN.utc requests), (ZEN.utc bandwitdh)
+
+    # Agents
+    ZEN.pie "browsers", "Browser", browsers
+    ZEN.pie "devices", "Device", devices
+    ZEN.pie "os", "OS", os

source/app.pie.coffee

@@ -0,0 +1,30 @@
+"use strict"
+
+ZEN.pie = (container, title, values) ->
+  $("[data-zen=#{container}").highcharts
+    chart:
+      plotBorderWidth: 0
+      plotShadow: false
+    title:
+      text          : title
+      align         : 'center'
+      verticalAlign : 'middle'
+      y             : 20
+    tooltip: pointFormat: "<b>{point.percentage:.1f}%</b>"
+    plotOptions:
+      pie:
+        dataLabels:
+          enabled: true
+          distance: 8
+        startAngle: -135
+        endAngle: 135
+        center: [
+          "50%"
+          "60%"
+        ]
+
+    series: [
+      type: "pie"
+      innerSize: "50%"
+      data: ([key, value] for key, value of values)
+    ]

source/app.proxy.coffee

@@ -0,0 +1,20 @@
+"use strict"
+
+ZEN.proxy = (type, method, parameters = {}, background = false) ->
+    promise = new Hope.Promise()
+    # unless background then do __.Dialog.Loading.show
+    $.ajax
+      url         : "#{method}"
+      type        : type
+      data        : parameters
+      # contentType : "application/x-www-form-urlencoded"
+      dataType    : 'json'
+      success: (response, xhr) ->
+        # unless background then do __.Dialog.Loading.hide
+        promise.done null, response
+      error: (xhr, error) =>
+        # unless background then do __.Dialog.Loading.hide
+        error = code: error.status, message: error.response
+        console.error "__.proxy [ERROR #{error.code}]: #{error.message}"
+        promise.done error, null
+    promise

source/app.spline.coffee

@@ -0,0 +1,76 @@
+"use strict"
+
+ZEN.spline = (container, title, latence, requests, bandwidth) ->
+  $("[data-zen=#{container}]").highcharts
+    chart:
+      type    : 'spline'
+      zoomType: 'x'
+    title: text: title
+    subtitle: text: ZEN.url
+    xAxis:
+      type: 'datetime'
+      # minRange: 1 * 3600000  # 2 hour
+      title: enabled: false, text: 'Date'
+    yAxis: [
+      title: enabled: false
+      min: 0
+      labels:
+        format: '{value} ms'
+        style: color: Highcharts.getOptions().colors[0]
+    ,
+      title: enabled: false
+      opposite: true
+      min: 0
+      labels:
+        format: '{value}/s'
+        style: color: Highcharts.getOptions().colors[1]
+    ,
+      title: enabled: false
+      opposite: true
+      min: 0
+      labels:
+        style: color: Highcharts.getOptions().colors[2]
+    ]
+    legend: enabled: true
+    plotOptions:
+      spline:
+        lineWidth : 1
+        states    : hover: lineWidth: 2
+        marker    : enabled: false
+      column:
+        pointPadding: 0.2
+        borderWidth: 0
+      area:
+        lineWidth: 1
+        states: hover: lineWidth: 1
+        threshold: null
+
+    # tooltip:
+    #   # headerFormat: '<b>{series.name}</b><br>',
+    #   headerFormat: '<b>http://</b><br>'
+    #   pointFormat: '{point.x:%e. %b}: {point.y:.0f}ms'
+    series: [
+      type: 'spline'
+      name: 'Latence'
+      # pointInterval: 24 * 3600 * 1000
+      data: latence
+      tooltip: valueSuffix: ' ms'
+      yAxis: 0
+    ,
+      type: 'spline'
+      name: 'Requests'
+      # dashStyle: 'shortdot'
+      # pointInterval: 24 * 3600 * 1000
+      data: requests
+      tooltip: valueSuffix: '/sec'
+      marker: enabled: false
+      yAxis: 1
+    ,
+      type: 'column'
+      name: 'bandwidth'
+      data: bandwidth
+      tooltip: valueSuffix: ' bytes/min'
+      marker: enabled: false
+      yAxis: 2
+    ]
+