Skip to content

Instantly share code, notes, and snippets.

@hsk

hsk/index.html

Last active March 22, 2017 13:42
Show Gist options
  • Save hsk/f247195d5ee72b92c18fcd79abace421 to your computer and use it in GitHub Desktop.
Save hsk/f247195d5ee72b92c18fcd79abace421 to your computer and use it in GitHub Desktop.
Download ZIP
smartlog.js hispeed big log data view
Raw
index.html
<html>
<title>SmartLogJs Example</title>
<script src="smartlog.js"></script>
<script>
window.onload = function () {
var counter = 0
var log = new SmartLog({
el:document.getElementById("log"),
buildRow:function(){return {
head:"",text:"",
html:"<span style='color:green'></span><span style='color:white'><span style='color:cyan'>~</span>$ </span><span style='color:white'></span>"};},
updateRow:function(node,data) {
node.childNodes[0].innerText=data.head;
node.childNodes[2].innerText=data.text;
},
height:100
});
var log2 = new SmartLog({
el:document.getElementById("log2"),
buildRow:function(){return {
head:"",text:"",
html:"<span style='color:green'></span><span style='color:white'><span style='color:cyan'>~</span>$ </span><span style='color:white'></span>"};},
updateRow:function(node,data) {
node.childNodes[0].innerText=data.head;
node.childNodes[2].innerText=data.text;
},
height:100 // optional
});
function add(log,n) {
for(var i =0; i<n;i++) {
counter++
log.append({head:"hoge@test-machine",text:"text"+counter})
}
}
function addEvent(prefix,log,n) {
document.getElementById(prefix+n).addEventListener("click",function(){add(log,n)},false);
}
for(var i = 0,n=1; i < 7;i++,n*=10) addEvent("add",log,n);
for(var i = 0,n=1; i < 7;i++,n*=10) addEvent("add2",log2,n);
add(log,1);
add(log2,1);
};
</script>
<body>
<h1>SmartLogJS Example</h1>
<div id="log" style="background:black;overflow: scroll;"></div>
<button id=add1>add 1</button>
<button id="add10">add 10</button>
<button id="add100">add 100</button>
<button id="add1000">add 1000</button>
<button id="add10000">add 10000</button>
<button id="add100000">add 100000</button>
<button id="add1000000">add 1000000</button>
<div id="log2" style="background:black;overflow: scroll;"></div>
<button id=add21>add 1</button>
<button id="add210">add 10</button>
<button id="add2100">add 100</button>
<button id="add21000">add 1000</button>
<button id="add210000">add 10000</button>
<button id="add2100000">add 100000</button>
<button id="add21000000">add 1000000</button>
</body>
</html>
Raw
smartlog.js
function SmartLog(opts) {
if(!opts.el) throw new Error("Need to pass `el` into SmartLog.");
if(!opts.buildRow) throw new Error("Need to pass `buildRow` into SmartLog.");
if(!opts.updateRow) throw new Error("Need to pass `updateRow` into SmartLog.");
this.list = [];
this.start = 0;
this.view_end = 0;
this.end = 0;
this.height = 480;
this.isUpdate = false;
this.isSet = false;
this.max = 1000;
for(var i in opts) this[i] = opts[i];
for(var i = 0; i < this.max; i++) {
var data = this.buildRow();
var node = document.createElement("div");
node.innerHTML = data.html;
data.node = node;
data.visible=false;
this.list[i]=data;
}
this.last = document.createElement("div");
this.el.appendChild(this.last);
this.el.style.height=this.height;
}
SmartLog.prototype.append = function(data) {
var dt = this.list[this.end%this.max]; this.end++;
for(var i in data) dt[i]=data[i];
var obj=this;
if(!this.isSet) {this.isSet=true;setTimeout(function(){obj.update()},1);}
};
SmartLog.prototype.update = function () {
this.isSet = false;
if(this.isUpdate) {
return;
}
this.isUpdate = true;
if (this.end-this.view_end>this.max) this.view_end = this.end -this.max-1;
for(var i = this.view_end; i < this.end; i++) {
var data = this.list[i%this.max];
var node = data.node;
if(i>=this.max&&data.visible) this.el.removeChild(node);
data.visible=true;
this.updateRow(node,data);
this.el.insertBefore(node, this.last);
}
this.view_end = this.end = this.end % this.max;
this.el.scrollTop = this.el.scrollHeight;
this.isUpdate = false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment