mathieuancelin · mathieuancelin · Aug 30, 2016 · Aug 15, 2016 · Aug 30, 2016 · Aug 30, 2016
diff --git a/lib/simulacra.min.js b/lib/simulacra.min.js
diff --git a/library-list.js b/library-list.js
@@ -58,7 +58,8 @@
     { type: 'naive', id: 'vidom', url: './vidom/index.html', label: 'DBMON vidom' },
     { type: 'optimized', id: 'cycle + xstream', label: 'DBMON Cycle.js + xstream', url: './cycle-xstream' },
     { type: 'naive', id: 'rionite', url: './rionite', label: 'DBMON Rionite' },
-    { type: 'naive', id: 'monkberry', url: './monkberry/index.html', label: 'DBMON Monkberry' }
+    { type: 'naive', id: 'monkberry', url: './monkberry/index.html', label: 'DBMON Monkberry' },
+    { type: 'naive', id: 'simulacra', url: './simulacra/index.html', label: 'DBMON Simulacra' }
   ];
 
   function Library() {

diff --git a/readme.md b/readme.md
@@ -39,6 +39,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/
 * [Vidom](https://github.com/dfilatov/vidom)
 * [Rionite](https://github.com/Riim/Rionite)
 * [Monkberry](http://monkberry.js.org)
+* [Simulacra](http://simulacra.js.org)
 
 ## Todo
 

diff --git a/simulacra/app.js b/simulacra/app.js
@@ -0,0 +1,43 @@
+var data = {
+  dbs: ENV.generateData().toArray().map(function (db) {
+    db.topFiveQueries = db.lastSample.topFiveQueries
+    return db
+  })
+}
+
+document.getElementById('app').appendChild(simulacra(data, [
+  document.getElementById('table').content, {
+    dbs: [ id('dbs'), {
+      dbname: id('dbname'),
+      lastSample: [ id('lastSample'), {
+        countClassName: function (node, value) {
+          node.className = value
+        },
+        nbQueries: function (node, value) {
+          return value
+        }
+      } ],
+      topFiveQueries: [ id('topFiveQueries'), {
+        elapsedClassName: function (node, value) {
+          node.className = value
+        },
+        formatElapsed: function (node, value) {
+          node.childNodes[0].textContent = value
+        },
+        query: id('query')
+      } ]
+    } ]
+  }
+]))
+
+function loadSamples () {
+  ENV.generateData(true)
+  Monitoring.renderRate.ping();
+  setTimeout(loadSamples, ENV.timeout)
+}
+
+loadSamples()
+
+function id (x) {
+  return '[data-id="' + x + '"]'
+}
diff --git a/simulacra/index.html b/simulacra/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="dbmon simulacra" />
+<link href="../styles.css" rel="stylesheet" type="text/css" />
+<title>dbmon (Simulacra)</title>
+</head>
+<body>
+  <div id="app"></div>
+
+  <template id="table">
+    <table class="table table-striped latest-data">
+      <tbody>
+        <tr data-id="dbs">
+          <td class="dbname" data-id="dbname"></td>
+          <td class="query-count">
+            <span data-id="lastSample"></span>
+          </td>
+          <td data-id="topFiveQueries">
+            &nbsp;
+            <div class="popover left">
+              <div class="popover-content" data-id="query"></div>
+              <div class="arrow"></div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </template>
+
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="../lib/simulacra.min.js"></script>
+  <script src="./app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>