<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rapport - <?= $this->url ?></title>
    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://c1.webien.cloud/favicon.ico">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <style>
        *{box-sizing:border-box;}
        html,body{width:100%;margin:0;padding:0;overflow-x:hidden;}
        body{background:#fff;padding:0;margin:0;font-family:"Roboto",sans-serif;}
        a{color: inherit;}
        .info{text-align:center;padding:30px 30px 40px;background:#fcfcfc;border-bottom:1px solid #ddd;margin:0 auto 40px;}
        canvas{width:100%;overflow:hidden;max-width: 90%;margin:0 auto 50px;}
        .score{display:flex;align-items:center;justify-content:center;}
        .circle{margin-left:20px;background:rgba(3,127,40,0.05);border:3px solid #037F8C;color:#037F8C;font-weight:bold;border-radius:25px;width:50px;height:50px;display:flex;align-items:center;justify-content: center;}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>

<div class="info">
    <h2>Analys av <span style="color:#037F8C"><?= $this->url ?></span></h2>
    <small>Genererad <?= date("Y-m-d H:i") ?>, värden framtagna med <a href="https://developers.google.com/web/tools/lighthouse" target="_blank">Google Lighthouse</a>.<br>Mätvärden är medianen av <?= $this->screeningNum ?>st lighthouse rapporter mellan varje plugin.<br>Siten hade vid rapporten <?= count($this->active_plugins) ?>st plugins aktiva.</small>
    <div class="score"><h3>Slutgiltigt Performance resultat för desktop:</h3><span class="circle"><?= $final_score ?></span></div>
</div>

<canvas id="line-chart-1" width="800" height="450"></canvas>

<script>
    var chart1 = new Chart(document.getElementById("line-chart-1"), {
        type: 'line',
        data: {
            labels: <?= $labels ?>,
            datasets: [{
                label: 'Performance score',
                data: <?= $scores ?>,
                borderColor: "#037F8C",
                fill: true,
                tension: 0.1,
                yAxisID: 'score',
                backgroundColor: 'rgba(3,127,40,0.05)',
                pointRadius: 8,
                pointHitRadius: 20,
                pointBorderWidth: 3,
                pointBackgroundColor: '#fff',
            },{
                label: 'Server response',
                data: <?= $response_times ?>,
                borderColor: "#F28F38",
                fill: true,
                tension: 0.1,
                yAxisID: 'response',
                backgroundColor: 'rgba(242,143,56,0.05)',
                pointRadius: 8,
                pointHitRadius: 20,
                pointBorderWidth: 3,
                pointBackgroundColor: '#fff',
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    id: 'score',
                    type: 'linear',
                    position: 'left',
                    ticks: {
                        max: 100,
                        min: 0
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Performance (%)'
                    }
                }, {
                    id: 'response',
                    type: 'linear',
                    position: 'right',
                    ticks: {
                        beginAtZero: true,
                    },
                    gridLines: {
                        display:false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Response time (sec)'
                    }
                }],
            },
            legend: {
                display: true,
                labels: {
                    fontColor: '#333',
                    usePointStyle:true,
                    padding: 50,
                }
            }
        }
    });
</script>
</body>
</html>
