feat:Added piechart in Dashboard

This commit is contained in:
2025-02-22 15:35:48 +05:30
parent 357071b967
commit f7cb1af2c4
384 changed files with 112765 additions and 8 deletions
+52
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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')
})
}
})
})
File diff suppressed because one or more lines are too long
+19
View File
@@ -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
View File
@@ -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
View File
@@ -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
})
}
})
})