{
    "title": "Hello The World"
}
---
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hello The World</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body class="container">
                <h1>Hello The World</h1>
        <hr/>
                    <div>
            <h2>Output Test</h2>
                <p>This report demonstrates output</p>
                            <table class="table table-striped">
            <caption>Values</caption>
        <thead class="thead-light">
                    <th>string</th>
                    <th>int</th>
                    <th>float</th>
                    <th>bool</th>
                    <th>null</th>
                    <th>parameter</th>
            </thead>
    <tbody>
                    <tr>
            <td>one</td>
            <td>123</td>
            <td>12.2</td>
            <td>[<span style="font-weight: bold; color: blue">true</span>
, <span style="font-weight: bold; color: red">false</span>
]</td>
            <td>null</td>
            <td>foo.bar</td>
    </tr>
            </tbody>
</table>
                    <table class="table table-striped">
            <caption>Percent Difference</caption>
        <thead class="thead-light">
                    <th>-100</th>
                    <th>-90</th>
                    <th>-80</th>
                    <th>-70</th>
                    <th>-60</th>
                    <th>-50</th>
                    <th>-40</th>
                    <th>-30</th>
                    <th>-20</th>
                    <th>-10</th>
                    <th>0</th>
                    <th>10</th>
                    <th>20</th>
                    <th>30</th>
                    <th>40</th>
                    <th>50</th>
                    <th>60</th>
                    <th>70</th>
                    <th>80</th>
                    <th>90</th>
                    <th>100</th>
            </thead>
    <tbody>
                    <tr>
            <td><span style="color: #00fc00">
    -100.00%</span>

</td>
            <td><span style="color: #05e805">
    -90.00%</span>

</td>
            <td><span style="color: #0ad40a">
    -80.00%</span>

</td>
            <td><span style="color: #0fbf0f">
    -70.00%</span>

</td>
            <td><span style="color: #14ab14">
    -60.00%</span>

</td>
            <td><span style="color: #1a961a">
    -50.00%</span>

</td>
            <td><span style="color: #1f821f">
    -40.00%</span>

</td>
            <td><span style="color: #246e24">
    -30.00%</span>

</td>
            <td><span style="color: #295929">
    -20.00%</span>

</td>
            <td><span style="color: #2e452e">
    -10.00%</span>

</td>
            <td><span style="color: #333333">
    0.00%</span>

</td>
            <td><span style="color: #472d2d">
    +10.00%</span>

</td>
            <td><span style="color: #5b2828">
    +20.00%</span>

</td>
            <td><span style="color: #702323">
    +30.00%</span>

</td>
            <td><span style="color: #841e1e">
    +40.00%</span>

</td>
            <td><span style="color: #991919">
    +50.00%</span>

</td>
            <td><span style="color: #ad1414">
    +60.00%</span>

</td>
            <td><span style="color: #c10f0f">
    +70.00%</span>

</td>
            <td><span style="color: #d60a0a">
    +80.00%</span>

</td>
            <td><span style="color: #ea0505">
    +90.00%</span>

</td>
            <td><span style="color: #ff0000">
    +100.00%</span>

</td>
    </tr>
            </tbody>
</table>
                    <table class="table table-striped">
            <caption>Relative Deviation</caption>
        <thead class="thead-light">
                    <th>0</th>
                    <th>10</th>
                    <th>20</th>
                    <th>30</th>
                    <th>40</th>
                    <th>50</th>
                    <th>60</th>
                    <th>70</th>
                    <th>80</th>
                    <th>90</th>
                    <th>100</th>
            </thead>
    <tbody>
                    <tr>
            <td><span style="color: #000000">
    <span style="color: #555; font-weight: bold;">±</span>
0.00%</span>

</td>
            <td><span style="color: #190000">
    <span style="color: #555; font-weight: bold;">±</span>
10.00%</span>

</td>
            <td><span style="color: #330000">
    <span style="color: #555; font-weight: bold;">±</span>
20.00%</span>

</td>
            <td><span style="color: #4c0000">
    <span style="color: #555; font-weight: bold;">±</span>
30.00%</span>

</td>
            <td><span style="color: #660000">
    <span style="color: #555; font-weight: bold;">±</span>
40.00%</span>

</td>
            <td><span style="color: #7f0000">
    <span style="color: #555; font-weight: bold;">±</span>
50.00%</span>

</td>
            <td><span style="color: #990000">
    <span style="color: #555; font-weight: bold;">±</span>
60.00%</span>

</td>
            <td><span style="color: #b20000">
    <span style="color: #555; font-weight: bold;">±</span>
70.00%</span>

</td>
            <td><span style="color: #cc0000">
    <span style="color: #555; font-weight: bold;">±</span>
80.00%</span>

</td>
            <td><span style="color: #e50000">
    <span style="color: #555; font-weight: bold;">±</span>
90.00%</span>

</td>
            <td><span style="color: #fe0000">
    <span style="color: #555; font-weight: bold;">±</span>
100.00%</span>

</td>
    </tr>
            </tbody>
</table>
                    <table class="table table-striped">
            <caption>Time</caption>
        <thead class="thead-light">
                    <th>time</th>
            </thead>
    <tbody>
                    <tr>
            <td>10.0<span style="color: #555; font-weight: bold;">ms</span>
</td>
    </tr>
            </tbody>
</table>
                    <div id="phpbench-component-80" width="400" height="100"></div>
<script>
var data = [
        {
        x: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
        name: 'Set 1',
        y: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
        type: 'bar',
                error_y: {
            type: 'data',
            array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
            visible: true,
        }
            },
        {
        x: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
        name: 'Set 2',
        y: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
        type: 'bar',
                error_y: {
            type: 'data',
            array: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
            visible: true,
        }
            },
    ]
var layout = {
    barmode: 'group',
    yaxis: {
        tickmode: 'array',
        tickvals: [0,3.2,6.4,9.600000000000001,12.8,16,19.200000000000003,22.400000000000002,25.6,28.8,32],
        ticktext: ["0.000<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","3.200<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","6.400<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","9.600<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","12.800<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","16.000<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","19.200<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","22.400<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","25.600<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","28.800<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n","32.000<span style=\"color: #555; font-weight: bold;\">\u03bcs<\/span>\n"]    },
    xaxis: {
        tickmode: 'array',
        tickvals: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
        ticktext: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
    }
};
layout.title = "Example Aggregate Barchart";
Plotly.newPlot(document.getElementById('phpbench-component-80'), data, layout);
</script>
                    <div>
                    <ul class="nav nav-tabs" id="tab-group-phpbench-component-83" role="tablist">
                                        <li class="nav-item" role="presentation">
                    <button 
                        class="nav-link active" 
                        id="tab-button-phpbench-component-83-0" 
                        data-bs-toggle="tab" 
                        data-bs-target="#tab-content-phpbench-component-83-0" 
                        aria-controls="#tab-content-phpbench-component-83-0" 
                        aria-current="page" 
                        >
                        Tab One                    </button>
                </li>
                                            <li class="nav-item" role="presentation">
                    <button 
                        class="nav-link " 
                        id="tab-button-phpbench-component-83-1" 
                        data-bs-toggle="tab" 
                        data-bs-target="#tab-content-phpbench-component-83-1" 
                        aria-controls="#tab-content-phpbench-component-83-1" 
                        aria-current="page" 
                        >
                        Tab Two                    </button>
                </li>
                                            <li class="nav-item" role="presentation">
                    <button 
                        class="nav-link " 
                        id="tab-button-phpbench-component-83-2" 
                        data-bs-toggle="tab" 
                        data-bs-target="#tab-content-phpbench-component-83-2" 
                        aria-controls="#tab-content-phpbench-component-83-2" 
                        aria-current="page" 
                        >
                        Tab Three                    </button>
                </li>
                                    </ul>
                <div class="tab-content">
                  <div
              class="tab-pane show active" 
              id="tab-content-phpbench-component-83-0" 
              role="tabpanel" 
              aria-labelledby="tab-button-phpbench-component-83-0"
          >
<br/>
              <p>This is tab one</p>
          </div>
                            <div
              class="tab-pane " 
              id="tab-content-phpbench-component-83-1" 
              role="tabpanel" 
              aria-labelledby="tab-button-phpbench-component-83-1"
          >
<br/>
              <p>This is tab two</p>
          </div>
                            <div
              class="tab-pane " 
              id="tab-content-phpbench-component-83-2" 
              role="tabpanel" 
              aria-labelledby="tab-button-phpbench-component-83-2"
          >
<br/>
              <p>This is tab three</p>
          </div>
                          </div>
    </div>
            </div>
    </body>
    <footer>
        <center>
        Generated by <a href="https://github.com/phpbench/phpbench">PHPBench</a>
        </center>
    </footer>
    <script type="text/javascript">
    /**
     * Resize Plots when tab is activated
     */
    (function () {
        var tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]')
        tabEls.forEach(function (tabEl) {
            tabEl.addEventListener('shown.bs.tab', function (event) {
console.log(event);
                var docs = event.target.parentNode.parentNode.parentNode.querySelectorAll('.tab-pane.active .js-plotly-plot');
                docs.forEach(function (plotEl) {
                    Plotly.relayout(plotEl, {autosize: true});
                });
            });
        });
    })();
    </script>
</html>
