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 > stream_1KB</ 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 ="chart1692341002348 " 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 ctx1692341002348 = document
55+ . getElementById ( 'chart1692341002348' )
56+ . getContext ( '2d' )
57+ const chart1692341002348 = new Chart ( ctx1692341002348 , {
58+ type : 'bar' ,
59+ data : {
60+ labels : [ "send 1Kib of data" ] ,
61+ datasets : [
62+ {
63+ data : [ 157 ] ,
64+ backgroundColor : [ "hsl(120, 85%, 55%)" ] ,
65+ borderColor : [ "hsl(120, 85%, 55%)" ] ,
66+ borderWidth : 2 ,
67+ } ,
68+ ] ,
69+ } ,
70+ options : {
71+ maintainAspectRatio : false ,
72+ plugins : {
73+ title : {
74+ display : true ,
75+ text : 'stream_1KB' ,
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