benchmark/results/general.chart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
    <title>General performance suite</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #ddd;
      }

      .container {
        box-sizing: border-box;
        height: 96vh;
        width: 96vw;
        margin: 2vh 2vw;
        resize: both;
        overflow: hidden;
        padding: 20px;
        background: white;
        box-shadow: 0 0 15px #aaa;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <canvas id="chart1652327395025" width="16" height="9"></canvas>
    </div>
    <script>
      const format = (num) => {
        const [whole, fraction] = String(num).split('.')
        const chunked = []
        whole
          .split('')
          .reverse()
          .forEach((char, index) => {
            if (index % 3 === 0) {
              chunked.unshift([char])
            } else {
              chunked[0].unshift(char)
            }
          })

        const fractionStr = fraction !== undefined ? '.' + fraction : ''

        return (
          chunked.map((chunk) => chunk.join('')).join(' ') + fractionStr
        )
      }
      const ctx1652327395025 = document
        .getElementById('chart1652327395025')
        .getContext('2d')
      const chart1652327395025 = new Chart(ctx1652327395025, {
        type: 'bar',
        data: {
          labels: ["Blind cycle a traffic light 500 times by transition","Blind cycle a hooked traffic light 500 times by transition","Blind cycle a traffic light 500 times by action","Blind cycle a hooked traffic light 500 times by action"],
          datasets: [
            {
              data: [19509,1675,13411,828],
              backgroundColor: ["hsl(120, 85%, 55%)","hsl(10.308000000000003, 85%, 55%)","hsl(82.48799999999999, 85%, 55%)","hsl(5.087999999999994, 85%, 55%)"],
              borderColor: ["hsl(120, 85%, 55%)","hsl(10.308000000000003, 85%, 55%)","hsl(82.48799999999999, 85%, 55%)","hsl(5.087999999999994, 85%, 55%)"],
              borderWidth: 2,
            },
          ],
        },
        options: {
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: 'General performance suite',
              font: { size: 20 },
              padding: 20,
            },
            legend: {
              display: false,
            },
            tooltip: {
              callbacks: {
                label: (context) => {
                  return format(context.parsed.y) + ' ops/s'
                },
              },
              displayColors: false,
              backgroundColor: '#222222',
              padding: 10,
              cornerRadius: 5,
              intersect: false,
            },
          },
          scales: {
            x: {
              grid: {
                color: '#888888',
              },
            },
            y: {
              title: {
                display: true,
                text: 'Operations per second',
                padding: 10,
              },
              grid: {
                color: '#888888',
              },
            },
          },
        },
      })
    </script>
  </body>
</html>