vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use animation best practices in dbmon

Browse source
This commit is contained in:
Leo Horie 2016-12-02 20:44:03 -05:00
parent 2f7c4983f3
commit 4a4bd7a548
8 changed files with 48 additions and 2299 deletions
Download patch file Download diff file Expand all files Collapse all files

3
examples/dbmonster/angular/app.js vendored
View file

@ -32,9 +32,10 @@ var AppComponent = ng.core.Component({selector: "my-app"})
this.update() this.update()
}, },
update: function() { update: function() {
requestAnimationFrame(function() {self.update()})
var self = this var self = this
self.databases = ENV.generateData().toArray() self.databases = ENV.generateData().toArray()
setTimeout(function() {self.update()}, ENV.timeout)
if (renderStage === 0) { if (renderStage === 0) {
renderStage = 1 renderStage = 1

44
examples/dbmonster/mithril-0.2.x/app.js
View file

@ -1,44 +0,0 @@
"use strict"
var data = []
var root = document.getElementById("app")
update()
function update() {
data = ENV.generateData().toArray()
Monitoring.renderRate.ping()
m.redraw();
setTimeout(update, ENV.timeout)
}
m.mount(root, {
view : function() {
return m("div", [
m("table", { className: "table table-striped latest-data" }, [
m("tbody",
data.map(function(db) {
return m("tr", {key: db.dbname}, [
m("td", { className: "dbname" }, db.dbname),
m("td", { className: "query-count" }, [
m("span", { className: db.lastSample.countClassName }, db.lastSample.nbQueries)
]),
db.lastSample.topFiveQueries.map(function(query) {
return m("td", { className: query.elapsedClassName }, [
m("span", query.formatElapsed),
m("div", { className: "popover left" }, [
m("div", { className: "popover-content" }, query.query),
m("div", { className: "arrow" })
])
])
})
])
})
)
])
])
}
});

17
examples/dbmonster/mithril-0.2.x/index.html
View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="DBMON Mithril 0.2.x" />
<meta charset="utf-8">
<link href="../styles.css" rel="stylesheet" type="text/css" />
<title>dbmon (Mithril 0.2.x)</title>
</head>
<body>
<div id="app"></div>
<script src="./mithril-0.2.4.js"></script>
<script src="../ENV.js"></script>
<script src="../memory-stats.js"></script>
<script src="../monitor.js"></script>
<script src="app.js"></script>
</body>
</html>

2190
examples/dbmonster/mithril-0.2.x/mithril-0.2.4.js
View file

File diff suppressed because it is too large Load diff

4
examples/dbmonster/mithril/app.js
View file

@ -35,13 +35,13 @@ m.mount(document.getElementById("app"), {
}) })
function update() { function update() {
requestAnimationFrame(update)
data = ENV.generateData().toArray() data = ENV.generateData().toArray()
perfMonitor.startProfile("render") perfMonitor.startProfile("render")
m.redraw() m.redraw()
perfMonitor.endProfile("render") perfMonitor.endProfile("render")
setTimeout(update, ENV.timeout)
} }
update() update()

5
examples/dbmonster/react/app.js
View file

@ -38,14 +38,13 @@ var DBMon = React.createClass({
var root = document.getElementById("app") var root = document.getElementById("app")
function update() { function update() {
requestAnimationFrame(update)
data = ENV.generateData().toArray() data = ENV.generateData().toArray()
perfMonitor.startProfile("render") perfMonitor.startProfile("render")
ReactDOM.render(h(DBMon, null), root) ReactDOM.render(h(DBMon, null), root)
perfMonitor.endProfile("render") perfMonitor.endProfile("render")
setTimeout(update, ENV.timeout)
} }
update() update()

82
examples/dbmonster/vue/app.js
View file

@ -4,48 +4,48 @@ perfMonitor.startMemMonitor()
perfMonitor.initProfiler("render") perfMonitor.initProfiler("render")
var vm = new Vue({ var vm = new Vue({
el: '#app', el: '#app',
data: { data: {
databases: [], databases: [],
}, },
methods: { methods: {
update: function () { update: function () {
this.databases = ENV.generateData().toArray() requestAnimationFrame(this.update.bind(this))
setTimeout(this.update.bind(this), ENV.timeout) this.databases = ENV.generateData().toArray()
if (renderStage === 0) { if (renderStage === 0) {
renderStage = 1 renderStage = 1
perfMonitor.startProfile('render') perfMonitor.startProfile('render')
} }
}, },
}, },
updated: function () { updated: function () {
if (renderStage === 1) { if (renderStage === 1) {
renderStage = 0 renderStage = 0
perfMonitor.endProfile('render') perfMonitor.endProfile('render')
} }
}, },
template: '<div>' + template: '<div>' +
'<table class="table table-striped latest-data">' + '<table class="table table-striped latest-data">' +
'<tbody>' + '<tbody>' +
'<tr v-for="db of databases">' + '<tr v-for="db of databases">' +
'<td class="dbname">{{ db.dbname }}</td>' + '<td class="dbname">{{ db.dbname }}</td>' +
'<td class="query-count">' + '<td class="query-count">' +
'<span v-bind:class="[ db.lastSample.countClassName ]">' + '<span v-bind:class="[ db.lastSample.countClassName ]">' +
'{{ db.lastSample.nbQueries}}' + '{{ db.lastSample.nbQueries}}' +
'</span>' + '</span>' +
'</td>' + '</td>' +
'<td v-for="q of db.lastSample.topFiveQueries" v-bind:class="[ q.elapsedClassName ]">' + '<td v-for="q of db.lastSample.topFiveQueries" v-bind:class="[ q.elapsedClassName ]">' +
'{{ q.formatElapsed }}' + '{{ q.formatElapsed }}' +
'<div class="popover left">' + '<div class="popover left">' +
'<div className="popover-content">{{ q.query }}</div>' + '<div className="popover-content">{{ q.query }}</div>' +
'<div className="arrow"></div>' + '<div className="arrow"></div>' +
'</div>' + '</div>' +
'</td>' + '</td>' +
'</tr>' + '</tr>' +
'</tbody>' + '</tbody>' +
'</table>' + '</table>' +
'</div>', '</div>',
}) })
vm.update() vm.update()

2
examples/dbmonster/vue/index.html
View file

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="//vuejs.org/js/vue.min.js"></script> <script src="https://vuejs.org/js/vue.min.js"></script>
<script src="../ENV.js"></script> <script src="../ENV.js"></script>
<script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script> <script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
<script src="app.js"></script> <script src="app.js"></script>