ops-Gazelle/templates/admin/process-histogram.twig

{{ header('Process histograms', {'js': 'vendor/highcharts,vendor/highcharts_custom'}) }}
<div class="thin">
    <div class="header">
        <h3>Process histograms</h3>
    </div>
    <div class="linkbox">
        <a href="?action=process_info" class="brackets">PHP processes</a>
    </div>
    <div class="box pad center">
        <figure class="highcharts-figure"><div id="process-duration"></div></figure>
    </div>
    <div class="box pad center">
        <figure class="highcharts-figure"><div id="process-memory"></div></figure>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    Highcharts.chart('process-duration', {
        chart: {
            type: 'column',
            plotBackgroundColor: '#051401',
            backgroundColor: '#000000',
        },
        title: {
            text: 'Historical Process Duration',
            style: { color: '#c0c0c0', },
        },
        credits: { enabled: false },
        xAxis: {
            categories: {{ duration|keys|json_encode|raw }},
        },
        yAxis: [
            {
                labels: { format: '{value}', style: { color: Highcharts.getOptions().colors[2] }},
                title: { text: 'Total', style: { color: Highcharts.getOptions().colors[2] }},
            }
        ],
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            column: { stacking: 'normal' }
        },
        series: [
            { type: 'column', name: 'Total',  data: {{ duration|values|json_encode|raw }} },
        ]
    });
    Highcharts.chart('process-memory', {
        chart: {
            type: 'column',
            plotBackgroundColor: '#051401',
            backgroundColor: '#000000',
        },
        title: {
            text: 'Historical Memory Duration',
            style: { color: '#c0c0c0', },
        },
        credits: { enabled: false },
        xAxis: {
            categories: {{ memory|keys|json_encode|raw }},
        },
        yAxis: [
            {
                labels: { format: '{value}', style: { color: Highcharts.getOptions().colors[2] }},
                title: { text: 'Total', style: { color: Highcharts.getOptions().colors[2] }},
            }
        ],
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            column: { stacking: 'normal' }
        },
        series: [
            { type: 'column', name: 'Total',  data: {{ memory|values|json_encode|raw }} },
        ]
    })
});

</script>
{{ footer() }}