1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
+ < meta http-equiv ="X-UA-Compatible " />
7
+ < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/chart.min.js "
> </ script >
8
+ < title > buffers.buffer_allocation</ title >
9
+ < style >
10
+ body {
11
+ margin : 0 ;
12
+ padding : 0 ;
13
+ background : # ddd ;
14
+ }
15
+
16
+ .container {
17
+ box-sizing : border-box;
18
+ height : 96vh ;
19
+ width : 96vw ;
20
+ margin : 2vh 2vw ;
21
+ resize : both;
22
+ overflow : hidden;
23
+ padding : 20px ;
24
+ background : white;
25
+ box-shadow : 0 0 15px # aaa ;
26
+ }
27
+ </ style >
28
+ </ head >
29
+ < body >
30
+ < div class ="container ">
31
+ < canvas id ="chart1695635571016 " width ="16 " height ="9 "> </ canvas >
32
+ </ div >
33
+ < script >
34
+ const format = ( num ) => {
35
+ const [ whole , fraction ] = String ( num ) . split ( '.' )
36
+ const chunked = [ ]
37
+ whole
38
+ . split ( '' )
39
+ . reverse ( )
40
+ . forEach ( ( char , index ) => {
41
+ if ( index % 3 === 0 ) {
42
+ chunked . unshift ( [ char ] )
43
+ } else {
44
+ chunked [ 0 ] . unshift ( char )
45
+ }
46
+ } )
47
+
48
+ const fractionStr = fraction !== undefined ? '.' + fraction : ''
49
+
50
+ return (
51
+ chunked . map ( ( chunk ) => chunk . join ( '' ) ) . join ( ' ' ) + fractionStr
52
+ )
53
+ }
54
+ const ctx1695635571016 = document
55
+ . getElementById ( 'chart1695635571016' )
56
+ . getContext ( '2d' )
57
+ const chart1695635571016 = new Chart ( ctx1695635571016 , {
58
+ type : 'bar' ,
59
+ data : {
60
+ labels : [ "Buffer.alloc" , "Buffer.allocUnsafe" , "Buffer.allocUnsafeSlow" , "Buffer.from subarray" , "Buffer.copyBytesFrom" , "Uint8Array" , "Uint8Array slice" ] ,
61
+ datasets : [
62
+ {
63
+ data : [ 737442 , 3112051 , 949633 , 1700664 , 517646 , 777665 , 704702 ] ,
64
+ backgroundColor : [ "hsl(28.44, 85%, 55%)" , "hsl(120, 85%, 55%)" , "hsl(36.612, 85%, 55%)" , "hsl(65.58, 85%, 55%)" , "hsl(19.955999999999992, 85%, 55%)" , "hsl(29.987999999999996, 85%, 55%)" , "hsl(27.168000000000003, 85%, 55%)" ] ,
65
+ borderColor : [ "hsl(28.44, 85%, 55%)" , "hsl(120, 85%, 55%)" , "hsl(36.612, 85%, 55%)" , "hsl(65.58, 85%, 55%)" , "hsl(19.955999999999992, 85%, 55%)" , "hsl(29.987999999999996, 85%, 55%)" , "hsl(27.168000000000003, 85%, 55%)" ] ,
66
+ borderWidth : 2 ,
67
+ } ,
68
+ ] ,
69
+ } ,
70
+ options : {
71
+ maintainAspectRatio : false ,
72
+ plugins : {
73
+ title : {
74
+ display : true ,
75
+ text : 'buffers.buffer_allocation' ,
76
+ font : { size : 20 } ,
77
+ padding : 20 ,
78
+ } ,
79
+ legend : {
80
+ display : false ,
81
+ } ,
82
+ tooltip : {
83
+ callbacks : {
84
+ label : ( context ) => {
85
+ return format ( context . parsed . y ) + ' ops/s'
86
+ } ,
87
+ } ,
88
+ displayColors : false ,
89
+ backgroundColor : '#222222' ,
90
+ padding : 10 ,
91
+ cornerRadius : 5 ,
92
+ intersect : false ,
93
+ } ,
94
+ } ,
95
+ scales : {
96
+ x : {
97
+ grid : {
98
+ color : '#888888' ,
99
+ } ,
100
+ } ,
101
+ y : {
102
+ title : {
103
+ display : true ,
104
+ text : 'Operations per second' ,
105
+ padding : 10 ,
106
+ } ,
107
+ grid : {
108
+ color : '#888888' ,
109
+ } ,
110
+ } ,
111
+ } ,
112
+ } ,
113
+ } )
114
+ </ script >
115
+ </ body >
116
+ </ html >
0 commit comments