feat:Added piechart in Dashboard
This commit is contained in:
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>SVG.js benchmarker</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
|
||||
body {
|
||||
font-family: 'Inconsolata', 'Menlo', monospace;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
svg {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
}
|
||||
span.name {
|
||||
color: #B7CD3E;
|
||||
}
|
||||
span.ms {
|
||||
color: #FF0066;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.test {
|
||||
text-indent: 1em;
|
||||
}
|
||||
.skipped {
|
||||
color: #FBCB72;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="draw"></div>
|
||||
<svg id="native" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"></svg>
|
||||
<script src="../dist/svg.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
|
||||
<script src="svg.bench.js"></script>
|
||||
<!-- <script src="tests/10000-each.js"></script>
|
||||
<script src="tests/10000-rects.js"></script>
|
||||
<script src="tests/10000-circles.js"></script>
|
||||
<script src="tests/10000-paths.js"></script>-->
|
||||
<script src="tests/10000-polysPointRead.js"></script>
|
||||
<script>
|
||||
SVG.bench.run()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
;( function() {
|
||||
|
||||
SVG.bench = {
|
||||
// Initalize test store
|
||||
_chain: []
|
||||
, _before: function() {}
|
||||
, _after: function() {}
|
||||
, draw: SVG('draw')
|
||||
, snap: Snap(100, 100)
|
||||
, raw: document.getElementById('native')
|
||||
|
||||
// Add descriptor
|
||||
, describe: function(name, closure) {
|
||||
this._chain.push({
|
||||
name: name
|
||||
, run: closure
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
// Add test
|
||||
, test: function(name, run) {
|
||||
// run test
|
||||
var start = ( new Date ).getTime()
|
||||
run()
|
||||
this.write( name, ( new Date ).getTime() - start )
|
||||
|
||||
// clear everything
|
||||
this.clear()
|
||||
}
|
||||
|
||||
// Skip test
|
||||
, skip: function(name, run) {
|
||||
this.write( name, false )
|
||||
}
|
||||
|
||||
// Run tests
|
||||
, run: function() {
|
||||
this.pad()
|
||||
|
||||
for (var h, i = 0, il = this._chain.length; i < il; i++) {
|
||||
var h = document.createElement('h1')
|
||||
h.innerHTML = this._chain[i].name
|
||||
|
||||
this.pad().appendChild(h)
|
||||
|
||||
this._chain[i].run(this)
|
||||
}
|
||||
}
|
||||
|
||||
// Write result
|
||||
, write: function(name, ms) {
|
||||
var test = document.createElement('div')
|
||||
|
||||
if (typeof ms === 'number') {
|
||||
test.className = 'test'
|
||||
test.innerHTML = '<span class="name">' + name + '</span> completed in <span class="ms">' + ms + 'ms</span>'
|
||||
} else {
|
||||
test.className = 'test skipped'
|
||||
test.innerHTML = name + ' (skipped)'
|
||||
}
|
||||
|
||||
this.pad().appendChild(test)
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
// Reference writable element
|
||||
, pad: function() {
|
||||
var pad = document.getElementById('pad')
|
||||
|
||||
if (!pad) {
|
||||
pad = document.createElement('div')
|
||||
document.getElementsByTagName('body')[0].appendChild(pad)
|
||||
}
|
||||
|
||||
return pad
|
||||
}
|
||||
|
||||
// Clear canvasses
|
||||
, clear: function() {
|
||||
while(this.raw.hasChildNodes())
|
||||
this.raw.removeChild(this.raw.lastChild)
|
||||
this.draw.clear()
|
||||
this.snap.clear()
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
SVG.bench.describe('Generate 10000 circles', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.circle(100,100)
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var circle = document.createElementNS(SVG.ns, 'circle')
|
||||
circle.setAttributeNS(null, 'rx', 50)
|
||||
circle.setAttributeNS(null, 'ry', 50)
|
||||
bench.raw.appendChild(circle)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.circle(50, 50, 100, 100)
|
||||
})
|
||||
})
|
||||
|
||||
SVG.bench.describe('Generate 10000 circles with fill', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.circle(100,100).fill('#f06')
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var circle = document.createElementNS(SVG.ns, 'circle')
|
||||
circle.setAttributeNS(null, 'rx', 50)
|
||||
circle.setAttributeNS(null, 'ry', 50)
|
||||
circle.setAttributeNS(null, 'fill', '#f06')
|
||||
bench.raw.appendChild(circle)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.circle(50, 50, 100, 100).attr('fill', '#f06')
|
||||
})
|
||||
})
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
SVG.bench.describe('each() vs forEach()', function(bench) {
|
||||
// preparation
|
||||
var list = []
|
||||
|
||||
for (var i = 99; i >= 0; i--)
|
||||
list.push(bench.draw.rect(100, 50))
|
||||
|
||||
var set = new SVG.Set(list)
|
||||
|
||||
|
||||
bench.test('10000 x each()', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
set.each(function() {
|
||||
this.fill('#f06')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
bench.test('10000 x forEach()', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
list.forEach(function(e) {
|
||||
e.fill('#f06')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
+22
File diff suppressed because one or more lines are too long
+19
@@ -0,0 +1,19 @@
|
||||
SVG.bench.describe('Generate 10000 paths', function(bench) {
|
||||
var data = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
|
||||
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.path(data)
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var path = document.createElementNS(SVG.ns, 'path')
|
||||
path.setAttributeNS(null, 'd', data)
|
||||
bench.raw.appendChild(path)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.path(data)
|
||||
})
|
||||
})
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
SVG.bench.describe('read points 10000 times from polygon', function(bench) {
|
||||
var poly = bench.draw.polygon('100 100 150 100 175 125 234 512 214 123 451 214 200 200')
|
||||
bench.test('with attr', function() {
|
||||
var arrs = []
|
||||
|
||||
for (var i = 0; i < 100000; i++) {
|
||||
arrs.push(poly.array())
|
||||
poly.clear()
|
||||
}
|
||||
})
|
||||
bench.test('using dom properties', function() {
|
||||
var arrs = []
|
||||
|
||||
for (var i = 0; i < 100000; i++)
|
||||
arrs.push(new SVG.PointArray(Array.prototype.slice.call(poly.node.points)))
|
||||
})
|
||||
})
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
SVG.bench.describe('Generate 10000 rects', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.rect(100,100)
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var rect = document.createElementNS(SVG.ns, 'rect')
|
||||
rect.setAttributeNS(null, 'height', 100)
|
||||
rect.setAttributeNS(null, 'width', 100)
|
||||
bench.raw.appendChild(rect)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.rect(50, 50, 100, 100)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.rect(100,100).fill('#f06')
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var rect = document.createElementNS(SVG.ns, 'rect')
|
||||
rect.setAttributeNS(null, 'height', 100)
|
||||
rect.setAttributeNS(null, 'width', 100)
|
||||
rect.setAttributeNS(null, 'fill', '#f06')
|
||||
bench.raw.appendChild(rect)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.draw.rect(100,100).move(50,50).fill('#f06')
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var rect = document.createElementNS(SVG.ns, 'rect')
|
||||
rect.setAttributeNS(null, 'height', 100)
|
||||
rect.setAttributeNS(null, 'width', 100)
|
||||
rect.setAttributeNS(null, 'fill', '#f06')
|
||||
rect.setAttributeNS(null, 'x', 50)
|
||||
rect.setAttributeNS(null, 'y', 50)
|
||||
bench.raw.appendChild(rect)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++)
|
||||
bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) {
|
||||
bench.test('using SVG.js v2.5.3', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var g = bench.draw.gradient('linear', function(stop) {
|
||||
stop.at(0, '#000')
|
||||
stop.at(0.25, '#f00')
|
||||
stop.at(1, '#fff')
|
||||
})
|
||||
|
||||
bench.draw.rect(100,100).fill(g)
|
||||
}
|
||||
})
|
||||
bench.test('using vanilla js', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var g = document.createElementNS(SVG.ns, 'linearGradient')
|
||||
var stop = document.createElementNS(SVG.ns, 'stop')
|
||||
stop.setAttributeNS(null, 'offset', '0%')
|
||||
stop.setAttributeNS(null, 'color', '#000')
|
||||
g.appendChild(stop)
|
||||
stop = document.createElementNS(SVG.ns, 'stop')
|
||||
stop.setAttributeNS(null, 'offset', '25%')
|
||||
stop.setAttributeNS(null, 'color', '#f00')
|
||||
g.appendChild(stop)
|
||||
stop = document.createElementNS(SVG.ns, 'stop')
|
||||
stop.setAttributeNS(null, 'offset', '100%')
|
||||
stop.setAttributeNS(null, 'color', '#fff')
|
||||
g.appendChild(stop)
|
||||
bench.raw.appendChild(g)
|
||||
|
||||
var rect = document.createElementNS(SVG.ns, 'rect')
|
||||
rect.setAttributeNS(null, 'height', 100)
|
||||
rect.setAttributeNS(null, 'width', 100)
|
||||
rect.setAttributeNS(null, 'fill', '#f06')
|
||||
bench.raw.appendChild(rect)
|
||||
}
|
||||
})
|
||||
bench.test('using Snap.svg v0.5.1', function() {
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff")
|
||||
|
||||
bench.snap.rect(50, 50, 100, 100).attr({
|
||||
fill: g
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user