source: trip-planner-front/node_modules/hdr-histogram-js/benchmark/results/distribution.chart.html@ 6fe77af

Last change on this file since 6fe77af was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 3.0 KB
Line 
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/chart.js@2.8.0/dist/Chart.min.js"></script>
8 <style>
9 .wrapper {
10 display: flex;
11 flex: wrap;
12 order: row;
13 }
14 </style>
15 <title>Histogram percentile distribution</title>
16 </head>
17 <body>
18 <div style="max-width: 800px;">
19 <canvas id="chart1595167522806" width="16" height="9"></canvas>
20 </div>
21 <script>
22 const format = num => {
23 const chunked = [];
24 String(num)
25 .split("")
26 .reverse()
27 .forEach((char, index) => {
28 if (index % 3 === 0) {
29 chunked.unshift([char]);
30 } else {
31 chunked[0].unshift(char);
32 }
33 });
34
35 return chunked.map(chunk => chunk.join("")).join(" ");
36 };
37 const ctx1595167522806 = document
38 .getElementById("chart1595167522806")
39 .getContext("2d");
40 const chart1595167522806 = new Chart(ctx1595167522806, {
41 type: "bar",
42 data: {
43 labels: [
44 "Int32Histogram",
45 "WASM 32B Histogram",
46 "Packed Histogram",
47 "WASM Packed Histogram"
48 ],
49 datasets: [
50 {
51 data: [16, 297, 9, 89],
52 backgroundColor: [
53 "rgba(63, 142, 252, 0.8)",
54 "rgba(116, 165, 127, 0.8)",
55 "rgba(158, 206, 154, 0.8)",
56 "rgba(58, 175, 185, 0.8)"
57 ],
58 borderColor: [
59 "rgba(63, 142, 252, 1)",
60 "rgba(116, 165, 127, 1)",
61 "rgba(158, 206, 154, 1)",
62 "rgba(58, 175, 185, 1)"
63 ],
64 borderWidth: 1
65 }
66 ]
67 },
68 options: {
69 legend: {
70 display: false
71 },
72 title: {
73 display: true,
74 text: "Histogram percentile distribution",
75 fontSize: 16,
76 padding: 20
77 },
78 tooltips: {
79 callbacks: {
80 label: tooltipItem => {
81 return format(tooltipItem.yLabel) + " ops/s";
82 }
83 }
84 },
85 scales: {
86 yAxes: [
87 {
88 gridLines: {
89 color: "rgba(127, 127, 127, 0.2)"
90 },
91 scaleLabel: {
92 display: true,
93 labelString: "Operations per second"
94 },
95 ticks: {
96 beginAtZero: true,
97 callback: format
98 }
99 }
100 ],
101 xAxes: [
102 {
103 gridLines: {
104 color: "rgba(127, 127, 127, 0.2)"
105 },
106 maxBarThickness: 150
107 }
108 ]
109 }
110 }
111 });
112 </script>
113 </body>
114</html>
Note: See TracBrowser for help on using the repository browser.