openpanel/templates/admini/partials/pagespeed.html

<div class="col-md-3">
<div class="card">
<lazy-loader>
<div class="card-body text-center" id="loading_pagespeed_data">
    <!-- Loading message -->
    Loading data...
</div>
</lazy-loader>


<div class="card-body text-center d-none" id="actual_data">

    <style>



/*
* Widget basic styling
*/

.wrapper_ps{
        width: 148px;
        height: 148px;
        font-family: 'Menlo','dejavu sans mono','Consolas','Lucida Console',monospace;
        position: relative;
        display: inline-block;
}

#desktop-meter, #mobile-meter{
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);  
}

.perf_percentage {
    position: absolute;
    width: inherit;
    top: 70px;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.4em;
}

/*
* Mobile display 
*/

@media only screen and (max-width: 600px) {
    .itps-settings-page .inner-sidebar {
        width: 100%;
    }

    .itps-settings-page #post-body-content {
        margin-right: auto;
    }
}

  
    </style>


    <div class="row">
        <div style="text-align: center; padding-top:10px;">    
                       
            <!-- Desktop -->
            <div class="wrapper_ps desktop">
                <div style="text-align: center;width: inherit;">Desktop</div>
                <svg id="desktop-meter">
                    <circle r="53" cx="50%" cy="50%" stroke="#e8eaed" stroke-width="10" fill="none"></circle>
                    <circle r="53" cx="50%" cy="50%" stroke="#178239" stroke-width="10" fill="none" class="frontCircle desktop_mainColor"></circle> <!--  transform="rotate(-90,240,240)" -->
                </svg>
                <div class="perf_percentage desktop_mainColor" id="desktop-performance_score"></div>
            </div>

            <!-- Mobile -->
            <div class="wrapper_ps mobile">
                <div style="text-align: center;width: inherit;">Mobile</div>
                <svg id="mobile-meter">
                    <circle r="53" cx="50%" cy="50%" stroke="#e8eaed" stroke-width="10" fill="none"></circle>
                    <circle r="53" cx="50%" cy="50%" stroke="#178239" stroke-width="10" fill="none" class="frontCircle mobile_mainColor"></circle> <!--  transform="rotate(-90,240,240)" -->
                </svg>
                <div class="perf_percentage mobile_mainColor" id="mobile-performance_score"></div>
            </div>  
        </div>
    </div>
    <!-- Statistics -->
    <div id="statistics" style="padding: 10px; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 14px;">
        <div class="stat_row" style="border-bottom: 1px solid #ebebeb; display: flex; justify-content: space-between; padding: 8px;">
            <span>First Contentful Paint</span>
            <div style="padding-right: 5px; font-weight: bold;">
                <span class="desktop-mainColor" id="desktop-first_contentful_paint">&nbsp;</span>&nbsp;/&nbsp;<span id="mobile-first_contentful_paint" class="mobile-mainColor">&nbsp;</span>
            </div>
        </div>
        <div class="stat_row" style="border-bottom: 1px solid #ebebeb; display: flex; justify-content: space-between; padding: 8px;">
            <span>Speed Index</span>
            <div style="padding-right: 5px; font-weight: bold;">
                <span class="desktop-mainColor" id="desktop-speed_index"></span>&nbsp;/&nbsp;<span id="mobile-speed_index" class="mobile-mainColor"></span>
            </div>
        </div>
        <div class="stat_row" style="border-bottom: 1px solid #ebebeb; display: flex; justify-content: space-between; padding: 8px;">
            <span>Time to Interactive</span>
            <div style="padding-right: 5px; font-weight: bold;">
                <span class="desktop-mainColor" id="desktop-interactive"></span>&nbsp;/&nbsp;<span id="mobile-interactive" class="mobile-mainColor"></span>
            </div>
        </div>
        <div style="color: #0000008a; font-size: 10px; text-align: right;">
            Measured at <span id="timestamp">Loading...</span>
        </div>
        <div style="margin-top: 10px; font-size: 12px; text-align: center;">
            <a href="https://developers.google.com/speed/pagespeed/insights/?url=http://{{ current_domain }}" target="_blank" style="outline: 0; text-decoration: none;">View complete results</a> on Google PageSpeed Insights.
        </div>
    </div>

<script>
$(document).ready(function() {

    function fetchDataAndUpdateUI() {
        var currentDomain = "{{ current_domain }}";
        $.ajax({
            url: "/json/page_speed/" + currentDomain,
            type: "GET",
            success: function(data) {

                // Handle case where no data is available yet
                if (data.message === "No data yet, please allow a few minutes for data gathering..") {
                    setTimeout(fetchDataAndUpdateUI, 15000);  // Retry after 15 seconds
                    return;
                }


                // Update performance metrics
                $('#desktop-first_contentful_paint').text(data.desktop_speed.first_contentful_paint);
                $('#desktop-speed_index').text(data.desktop_speed.speed_index);
                $('#desktop-interactive').text(data.desktop_speed.interactive);
                $('#mobile-first_contentful_paint').text(data.mobile_speed.first_contentful_paint);
                $('#mobile-speed_index').text(data.mobile_speed.speed_index);
                $('#mobile-interactive').text(data.mobile_speed.interactive);
                $('#timestamp').text(data.timestamp);

                // Update performance metrics
                $('#desktop-performance_score').text(Math.round(data.desktop_speed.performance_score * 100));
                $('#mobile-performance_score').text(Math.round(data.mobile_speed.performance_score * 100));

                // Determine and update colors based on performance scores
                updateColors(data.desktop_speed.performance_score, 'desktop');
                updateColors(data.mobile_speed.performance_score, 'mobile');


                // Determine color based on score for desktop
                var desktopScore = Math.round(data.desktop_speed.performance_score * 100);
                var desktopColor = getColorForScore(desktopScore);
                $('.desktop-mainColor').css('color', desktopColor);

                // Determine color based on score for mobile
                var mobileScore = Math.round(data.mobile_speed.performance_score * 100);
                var mobileColor = getColorForScore(mobileScore);
                $('.mobile-mainColor').css('color', mobileColor);

                // Switch from loading to actual data
                $('#loading_pagespeed_data').addClass('d-none');
                $('#actual_data').removeClass('d-none');
            },
            error: function(error) {
                console.log("Error fetching data:", error);
            }
        });
    }

    // Function to update colors based on performance score
    function updateColors(score, type) {
        var color = getColorForScore(Math.round(score * 100));
        $('.' + type + '-mainColor').css('color', color); // Set text color
        $('#' + type + '-meter .frontCircle').css('stroke', color); // Set circle stroke color
    }


    function getColorForScore(score) {
        if (score >= 90) {
            return '#178239';
        } else if (score >= 50 && score <= 89) {
            return '#e67700';
        } else {
            return '#c7221f';
        }
    }

    // Fetch data and update UI on page load
    fetchDataAndUpdateUI();

});
</script>

</div>
</div>
</div>