Skip to content

Commit

Permalink
Update benchmarks page theme (#4176)
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinkuba
martinkuba authored Oct 3, 2023
1 parent 628807f commit 117e9c5
Showing 1 changed file with 96 additions and 36 deletions.
132 changes: 96 additions & 36 deletions benchmarks/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,99 +5,162 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
<style>
html {
font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background-color: #fff;
font-size: 16px;
}

body {
margin: 0;
color: #4a4a4a;
margin: 8px;
font-size: 1em;
font-weight: 400;
}

header {
margin-bottom: 8px;
width: 100%;
display: flex;
flex-direction: column;
flex-direction: row;
background-color: rgb(79, 98, 173);
}

main {
margin: 8px;
width: 100%;
display: flex;
flex-direction: column;
}

a {
color: #3273dc;
cursor: pointer;
text-decoration: none;
}

a:hover {
color: #000;
}

button {
color: #fff;
background-color: #3298dc;
border-color: transparent;
cursor: pointer;
text-align: center;
}

button:hover {
background-color: #2793da;
flex: none;
}

.spacer {
flex: auto;
}

.small {
font-size: 0.75rem;
}

footer {
margin-top: 16px;
display: flex;
align-items: center;
}

.header-label {
margin-right: 4px;
}

.benchmark-set {
margin: 8px 0;
width: 100%;
display: flex;
flex-direction: column;
}

.benchmark-title {
font-size: 3rem;
font-weight: 600;
word-break: break-word;
text-align: center;
}

.benchmark-graphs {
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}

.benchmark-chart {
max-width: 1000px;
}

header nav {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
line-height: 24px;
min-height: 64px;
display: flex;
flex: 2;
align-items: center;
}

.logo svg {
height: 48px;
margin-left: 30px;
}

.header-item {
flex: 1;
}

div.container {
max-width: 1012px;
margin-right: auto;
margin-left: auto;
}
</style>
<title>Benchmarks</title>
<title>JavaScript SDK Benchmarks</title>
</head>

<body>
<header id="header">
<div class="header-item">
<strong class="header-label">Last Update:</strong>
<nav>
<div class="header-item logo">
<a href="https://opentelemetry.io">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-15.54 -18.54 1016.08 381.08">
<title id="opentelemetry-logo-title">The OpenTelemetry Logo</title>
<style>
svg {
enable-background: new 0 0 985.5 345.7
}
</style>
<path fill="#fff"
d="M185.6 188.8c-14.6 14.6-14.6 38.3.0 52.9s38.3 14.6 52.9.0c14.6-14.6 14.6-38.3.0-52.9-14.6-14.6-38.3-14.6-52.9.0zm39.6 39.6c-7.2 7.2-19 7.2-26.2.0s-7.2-19 0-26.2 19-7.2 26.2.0 7.2 19 0 26.2zm35.4-32h15.7v7.9c3.8-5.2 9.1-9 17.2-9 12.9.0 25.2 10.1 25.2 28.6v.2c0 18.5-12.1 28.6-25.2 28.6-8.4.0-13.5-3.8-17.2-8.3v23.7h-15.7v-71.7zm42.4 27.8v-.2c0-9.2-6.2-15.3-13.5-15.3s-13.4 6.1-13.4 15.3v.2c0 9.2 6.1 15.3 13.4 15.3 7.3-.1 13.5-6 13.5-15.3zm26.8.1v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6-.1-28.8-11.7-28.8-28.5zm38.8-4.7c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.4-23.2h16v8c3.7-4.7 8.4-9 16.5-9 12.1.0 19.1 8 19.1 20.9v36.4h-16v-31.4c0-7.6-3.6-11.4-9.7-11.4s-10 3.9-10 11.4v31.4h-16v-56.3zM237.9 4.9 215 27.8c-4.5 4.5-4.5 11.8.0 16.3l89.5 89.5c4.5 4.5 11.8 4.5 16.3.0l22.9-22.9c4.5-4.5 4.5-11.8.0-16.3L254.2 4.9c-4.5-4.5-11.8-4.5-16.3.0zM77.4 297.6c4.1-4.1 4.1-10.7.0-14.8l-11.7-11.7c-4.1-4.1-10.7-4.1-14.8.0l-24 24-6.6-6.6c-3.6-3.6-9.6-3.6-13.2.0s-3.6 9.6.0 13.2l39.7 39.7c3.6 3.6 9.6 3.6 13.2.0s3.6-9.6.0-13.2l-6.6-6.6 24-24zm121.2-227-50.9 50.9c-4.5 4.5-4.5 12 0 16.5l31.4 31.4c22.2-16 53.4-14 73.4 6l25.4-25.4c4.5-4.5 4.5-12 0-16.5l-62.8-62.8c-4.6-4.6-12-4.6-16.5-.1zm-32.7 112.1-18.6-18.6c-4.3-4.3-11.5-4.3-15.8.0L66 229.6c-4.3 4.3-4.3 11.5.0 15.8l37.1 37.1c4.3 4.3 11.5 4.3 15.8.0l42.1-42.1c-8.8-18.5-7.2-40.7 4.9-57.7zM476.2 193h-22.8v-15.2h62.1V193h-22.8v59.7h-16.5V193zm39.4 31.2v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6.0-28.8-11.6-28.8-28.5zm38.8-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.3-41.8h15.6v74.9h-15.6v-74.9zm26.7 46.5v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.5-.1-28.8-11.7-28.8-28.5zm38.9-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm26.3-23.3h16v8c3.7-4.7 8.5-9 16.6-9 7.3.0 12.9 3.3 15.8 8.9 4.9-5.8 10.8-8.9 18.5-8.9 11.9.0 19 7.1 19 20.7v36.6h-16v-31.4c0-7.6-3.4-11.4-9.3-11.4-6 0-9.7 3.9-9.7 11.4v31.4h-16v-31.4c0-7.6-3.4-11.4-9.3-11.4-6 0-9.7 3.9-9.7 11.4v31.4h-16v-56.3zm97 27.8v-.2c0-15.7 11.2-28.7 27.2-28.7 18.4.0 26.8 14.3 26.8 29.9.0 1.2-.1 2.7-.2 4.1h-38.3c1.5 7.1 6.5 10.8 13.5 10.8 5.2.0 9-1.6 13.4-5.6l8.9 7.9c-5.1 6.4-12.5 10.3-22.5 10.3-16.6.0-28.8-11.6-28.8-28.5zm38.8-4.6c-.9-7-5-11.7-11.6-11.7-6.5.0-10.7 4.6-11.9 11.7h23.5zm28.1 16.1v-26.9h-6.8V195h6.8v-14.5h16.1V195H866v13.8h-13.3V233c0 3.7 1.6 5.5 5.2 5.5 3 0 5.6-.7 7.9-2v12.9c-3.4 2-7.3 3.3-12.7 3.3-9.9.0-16.6-3.9-16.6-17zm41.6-39.7h16.2v11.5c3.3-7.9 8.6-13 18.2-12.6v17h-.9c-10.8.0-17.4 6.5-17.4 20.2v21.1H878V196zm85.9-.6h17.2l-22.4 59.8c-4.5 11.9-9.3 16.3-19.2 16.3-6 0-10.4-1.5-14.7-4l5.5-12c2.2 1.3 4.9 2.3 7.1 2.3 2.8.0 4.4-.9 5.8-3.8l-22.9-58.6h17.5l13.3 39.7 12.8-39.7z" />
</svg>
</a>
</div>
<div class="header-item"><!-- links --></div>
</nav>
</header>
<div class="container">
<h2>JavaScript SDK Benchmarks</h2>
<div>
<strong>Last Update:</strong>
<span id="last-update"></span>
</div>
<div class="header-item">
<strong class="header-label">Repository:</strong>
<div>
<strong>Repository:</strong>
<a id="repository-link" rel="noopener"></a>
</div>
</header>
<main id="main"></main>
<main id="main"></main>
</div>
<footer>
<button id="dl-button">Download data as JSON</button>
<div class="spacer"></div>
Expand All @@ -109,22 +172,19 @@
<script id="main-script">
'use strict';
(function() {
// Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
const toolColors = {
cargo: '#dea584',
go: '#00add8',
benchmarkjs: '#f1e05a',
benchmarkluau: '#000080',
pytest: '#3572a5',
googlecpp: '#f34b7d',
catch2: '#f34b7d',
julia: '#a270ba',
jmh: '#b07219',
benchmarkdotnet: '#178600',
customBiggerIsBetter: '#38ff38',
customSmallerIsBetter: '#ff3838',
_: '#333333'
};
const COLORS = [
"#48aaf9",
"#8a3ef2",
"#78eeda",
"#d78000",
"#1248b3",
"#97dbfc",
"#006174",
"#00b6b6",
"#854200",
"#f3c8ad",
"#410472",
];

function init() {
function collectBenchesPerTestCase(entries) {
Expand Down Expand Up @@ -171,19 +231,24 @@
function renderAllChars(dataSets) {

function renderGraph(parent, name, dataset) {
const chartTitle = document.createElement('h3');
chartTitle.textContent = name;
parent.append(chartTitle);

const canvas = document.createElement('canvas');
canvas.className = 'benchmark-chart';
parent.appendChild(canvas);

const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
const color = COLORS[0];
const data = {
labels: dataset.map(d => d.commit.id.slice(0, 7)),
datasets: [
{
label: name,
data: dataset.map(d => d.bench.value),
borderColor: color,
backgroundColor: color + '60', // Add alpha for #rrggbbaa
backgroundColor: color + '60', // Add alpha for #rrggbbaa,
fill: false
}
],
};
Expand Down Expand Up @@ -254,11 +319,6 @@
setElem.className = 'benchmark-set';
main.appendChild(setElem);

const nameElem = document.createElement('h1');
nameElem.className = 'benchmark-title';
nameElem.textContent = name;
setElem.appendChild(nameElem);

const graphsElem = document.createElement('div');
graphsElem.className = 'benchmark-graphs';
setElem.appendChild(graphsElem);
Expand Down

0 comments on commit 117e9c5

Please sign in to comment.