rabbotio · org-odajs · May 30, 2016 · May 31, 2016 · May 31, 2016 · May 31, 2016
diff --git a/ENV.js b/ENV.js
@@ -24,10 +24,10 @@ var ENV = ENV || (function() {
     var className = 'Query elapsed';
     if (elapsed >= 10.0) {
       className += ' warn_long';
-    }
+    } 
     else if (elapsed >= 1.0) {
       className += ' warn';
-    }
+    } 
     else {
       className += ' short';
     }
@@ -38,10 +38,10 @@ var ENV = ENV || (function() {
     var countClassName = "label";
     if (queries >= 20) {
       countClassName += " label-important";
-    }
+    } 
     else if (queries >= 10) {
       countClassName += " label-warning";
-    }
+    } 
     else {
       countClassName += " label-success";
     }
@@ -177,6 +177,7 @@ var ENV = ENV || (function() {
   function mutations(value) {
     if (value) {
       mutationsValue = value;
+      document.querySelector('#ratioval').innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
       return mutationsValue;
     } else {
       return mutationsValue;
@@ -186,7 +187,7 @@ var ENV = ENV || (function() {
   var body = document.querySelector('body');
   var theFirstChild = body.firstChild;
 
-  var sliderContainer = document.createElement( 'div' );
+  var sliderContainer = document.createElement('div');
   sliderContainer.style.cssText = "display: flex";
   var slider = document.createElement('input');
   var text = document.createElement('label');
@@ -196,13 +197,12 @@ var ENV = ENV || (function() {
   slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
   slider.addEventListener('change', function(e) {
     ENV.mutations(e.target.value / 100);
-    document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
   });
-  sliderContainer.appendChild( text );
-  sliderContainer.appendChild( slider );
-  body.insertBefore( sliderContainer, theFirstChild );
+  sliderContainer.appendChild(text);
+  sliderContainer.appendChild(slider);
+  body.insertBefore(sliderContainer, theFirstChild);
 
-  return  {
+  return {
     generateData: getData,
     rows: 50,
     timeout: 0,

diff --git a/all.html b/all.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>dbmon</title>
+  <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
+  <style>
+    body {
+      background-color: rgb(28, 28, 28);
+      font-family: "Open Sans Condensed", "Helvetica Neue";
+    }
+
+    #render-frame {
+      background-color: white;
+    }
+
+    #render-info {
+      color: white;
+    }
+
+    #ranking {
+      color: white;
+    }
+
+    .title {
+      color: rgb(102, 102, 102);
+      font-weight: bold;
+    }
+
+    @media(min-width: 1025px) {
+      .title {
+        font-size: 80px;
+      }
+    }
+
+    @media(max-width: 1024px) {
+      .title {
+        font-size: 40px;
+      }
+    }
+
+    a {
+      color: white;
+      text-decoration: none;
+      width: 100%;
+    }
+
+    .optimized {
+      background-color: #FF6347;
+      /*#FF6347;*/
+    }
+
+    .todo {
+      background-color: #2167FF;
+      /*#0EB26D;*/
+    }
+
+    .naive {
+      background-color: #EBA636;
+      /*rgb(100, 100, 100);*/
+    }
+
+    .container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+      justify-content: flex-start;
+    }
+
+    .legend {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+
+    .child {
+      padding: 0px;
+      width: 200px;
+      height: 200px;
+      margin-top: 10px;
+      margin-left: 5px;
+      margin-right: 5px;
+      color: white;
+      font-weight: bold;
+      font-size: 20px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .child:hover {
+      animation-name: blop;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      animation-duration: 2s;
+    }
+
+    .legendChild {
+      width: 200px;
+      margin-top: 5px;
+      color: white;
+      text-align: center;
+      display: flex;
+      align-items: center;
+    }
+
+    .color {
+      width: 15px;
+      height: 15px;
+    }
+
+    .fw {
+      margin-left: 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: white;
+      width: 120px;
+      text-align: right;
+    }
+
+    tr {
+      text-align: center;
+    }
+
+    @keyframes blop {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
+    <span class="title">REPAINT RATE CHALLENGE</span>
+    <div class="legend">
+      <div class="legendChild">
+        <span class="fw">Todo implementation</span>
+        <div class="color todo"></div>
+      </div>
+      <div class="legendChild">
+        <span class="fw">Naive implementation</span>
+        <div class="color naive"></div>
+      </div>
+      <div class="legendChild">
+        <span class="fw">Optimized implementation</span>
+        <div class="color optimized"></div>
+      </div>
+    </div>
+  </div>
+  <div id="render-box">
+    <div id="render-info"></div>
+    <iframe id="render-frame" height="1080" width="1920"></iframe>
+  </div>
+  <div>
+    <table id="ranking">
+      <thead>
+        <tr>
+          <th style="min-width:25px"></th>
+          <th style="min-width:250px">Name</th>
+          <th style="min-width:100px">Rate/sec 1%</th>
+          <th style="min-width:100px">25%</th>
+          <th style="min-width:100px">50%</th>
+          <th data-sort-default aria-sort="descending" style="min-width:100px">100%</th>
+        </tr>
+      </thead>
+      <tbody id="ranking-body">
+      </tbody>
+    </table>
+  </div>
+  <script src="./elem-vdom/elem.js"></script>
+  <script src="./list.js"></script>
+  <script src="./lib/monitor-all.js"></script>
+  <script src="./ga.js"></script>
+  <script src="https://cdn.rawgit.com/tristen/tablesort/gh-pages/dist/tablesort.min.js"></script>
+  <script src="https://cdn.rawgit.com/tristen/tablesort/gh-pages/dist/sorts/tablesort.number.min.js"></script>
+</body>
+
+</html>
diff --git a/angular-light/index.html b/angular-light/index.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular Light" />
   <script src="../lib/alight.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular light)</title>

diff --git a/angular-light/opt.html b/angular-light/opt.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular Light" />
   <script src="../lib/alight.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular light)</title>

diff --git a/angular-oneway/index.html b/angular-oneway/index.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular" />
 <script src="../lib/angular.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular)</title>

diff --git a/angular-track-by/index.html b/angular-track-by/index.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular" />
 <script src="../lib/angular.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular)</title>

diff --git a/angular/index.html b/angular/index.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular" />
 <script src="../lib/angular.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular)</title>

diff --git a/angular/opt.html b/angular/opt.html
@@ -3,7 +3,6 @@
 <head>
 <meta name="description" content="DBMON Angular" />
 <script src="../lib/angular.min.js"></script>
-  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="../styles.css" rel="stylesheet" type="text/css" />
   <meta charset="utf-8">
   <title>dbmon (angular optimized)</title>

diff --git a/angular2/index.html b/angular2/index.html
@@ -2,7 +2,6 @@
 <html>
 <head>
     <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
-    <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="../styles.css" rel="stylesheet" type="text/css" />
     <meta charset="utf-8">
     <title>dbmon (angular 2)</title>

diff --git a/angular2/opt.html b/angular2/opt.html
@@ -2,7 +2,6 @@
 <html>
 <head>
     <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
-    <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="../styles.css" rel="stylesheet" type="text/css" />
     <meta charset="utf-8">
     <title>dbmon (angular 2 optimized)</title>

diff --git a/aurelia-optimized/.editorconfig b/aurelia-optimized/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
diff --git a/aurelia-optimized/app.html b/aurelia-optimized/app.html
@@ -0,0 +1,29 @@
+<template>
+  <require from="when-visible"></require>
+  <div>
+    <table class="table table-striped latest-data">
+      <tbody>
+        <tr repeat.for="db of databases">
+          <td class="dbname">
+            ${db.dbname & oneTime & whenVisible}
+          </td>
+          <td class="query-count">
+            <span class-name.one-time="db.lastSample.countClassName & whenVisible">
+              ${db.lastSample.nbQueries & oneTime & whenVisible}
+            </span>
+          </td>
+          <td repeat.for="q of db.lastSample.topFiveQueries & oneTime & whenVisible"
+              class-name.one-time="q.elapsedClassName & whenVisible">
+            ${q.formatElapsed & oneTime & whenVisible}
+            <div class="popover left">
+              <div class="popover-content">
+                ${q.query & oneTime & whenVisible}
+              </div>
+              <div class="arrow"></div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/aurelia-optimized/app.js b/aurelia-optimized/app.js
@@ -0,0 +1,19 @@
+define(['exports'], function (exports) {
+  'use strict';
+
+  function App() {
+    this.databases = [];
+  }
+
+  App.prototype.activate = function() {
+    var _this = this;
+    function load() {
+      _this.databases = ENV.generateData().toArray();
+      Monitoring.renderRate.ping();
+      setTimeout(load, ENV.timeout);
+    }
+    load();
+  };
+
+  exports.App = App;
+});