From b1af7857d0f183685a50c151dda0b7844b982a82 Mon Sep 17 00:00:00 2001 From: soulgalore Date: Thu, 5 May 2022 09:48:00 +0200 Subject: [PATCH] Add safe check for missing CRUX data --- lib/plugins/crux/pug/index.pug | 207 +++++++++++++++++---------------- 1 file changed, 105 insertions(+), 102 deletions(-) diff --git a/lib/plugins/crux/pug/index.pug b/lib/plugins/crux/pug/index.pug index 9a9682802..d05387d19 100644 --- a/lib/plugins/crux/pug/index.pug +++ b/lib/plugins/crux/pug/index.pug @@ -14,108 +14,111 @@ mixin sizeCell(title, size) - const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)',experimental_interaction_to_next_paint: 'Interaction to next paint (INP)', experimental_time_to_first_byte: 'Time to first byte (TTFB)'}; - const experiences = ['loadingExperience','originLoadingExperience']; -small - ||  +if experiences + small + ||  + each experience in experiences + each formFactor in Object.keys(crux[experience]) + a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} | + |  |  + + a#crux + h2 CrUx + p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome. + + p.small The CrUx data has four different buckets (form factor) depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with + code --crux.formFactor + | . + each experience in experiences - each formFactor in Object.keys(crux[experience]) - a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} | - |  |  + if experience === 'loadingExperience' && crux[experience] + p Over the last 30 days, this is the field data for this page for Chrome users. + else if crux[experience] + h4 All pages served from this origin + p This is a summary of all pages served from this origin over the last 30 days for Chrome users. -a#crux -h2 CrUx -p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome. - -p.small The CrUx data has four different buckets (form factor) depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with - code --crux.formFactor - | . - -each experience in experiences - if experience === 'loadingExperience' && crux[experience] - p Over the last 30 days, this is the field data for this page for Chrome users. - else if crux[experience] - h4 All pages served from this origin - p This is a summary of all pages served from this origin over the last 30 days for Chrome users. - - if crux[experience] - each formFactor in Object.keys(crux[experience]) - if (crux[experience][formFactor] && crux[experience][formFactor].data) - a(id=experience + '-' + formFactor) - h3 Form Factor #{formFactor} - table - thead - tr - th Metric - th Value - tbody - each name, key in metrics - if crux[experience][formFactor].data.record.metrics[key] - tr - td #{name} 75 percentile - td #{key.indexOf('cumulative') > -1 ? crux[experience][formFactor].data.record.metrics[key].percentiles.p75 : h.time.ms(crux[experience][formFactor].data.record.metrics[key].percentiles.p75)} - - h4 Distribution - - let cruxus = `${experience}.${formFactor}.data.record.metrics`; - - let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)]; - - - let LCPs = [Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)]; - - - let FIDs = [Number(get(crux, `${cruxus}.first_input_delay.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[2].density`, 0)*100).toFixed(2)]; - - - let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)]; - - - let TTFBs = [Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[2].density`, 0)*100).toFixed(2)]; - - - let ITNPs = [Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)]; - - script(type='text/javascript'). - document.addEventListener("DOMContentLoaded", function() { - - function drawPie(id, series, labels) { - new Chartist.Pie(id, { - series, - labels, - }, { - showLabel: false, - plugins: [ - Chartist.plugins.legend( - { clickable: false, - position: 'bottom' - } - ) - ] - }); - } - - drawPie('#chartFCP#{experience + formFactor}', [#{FCPs}], ['Fast: #{FCPs[0]}%', 'Moderate #{FCPs[1]}%', 'Slow: #{FCPs[2]}%']); - drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']); - drawPie('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[2]}%']); - drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']); - drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']); - drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']); - - - }); - .responsive + if crux[experience] + each formFactor in Object.keys(crux[experience]) + if (crux[experience][formFactor] && crux[experience][formFactor].data) + a(id=experience + '-' + formFactor) + h3 Form Factor #{formFactor} table - tr - th #{metrics['first_contentful_paint']} - th #{metrics['largest_contentful_paint']} - th #{metrics['first_input_delay']} - tr - td(data-title=metrics['first_contentful_paint']) - .ct-chart(id='chartFCP' + experience + formFactor) - td(data-title=metrics['largest_contentful_paint']) - .ct-chart(id='chartLCP' + experience + formFactor) - td(data-title=metrics['first_input_delay']) - .ct-chart(id='chartFID' + experience + formFactor) - tr - th #{metrics['cumulative_layout_shift']} - th #{metrics['experimental_interaction_to_next_paint']} - th #{metrics['experimental_time_to_first_byte']} - tr - td(data-title=metrics['cumulative_layout_shift']) - .ct-chart(id='chartCLS' + experience + formFactor) - td(data-title=metrics['experimental_interaction_to_next_paint']) - .ct-chart(id='chartITNP' + experience + formFactor) - td(data-title=metrics['experimental_time_to_first_byte']) - .ct-chart(id='chartTTFB' + experience + formFactor) \ No newline at end of file + thead + tr + th Metric + th Value + tbody + each name, key in metrics + if crux[experience][formFactor].data.record.metrics[key] + tr + td #{name} 75 percentile + td #{key.indexOf('cumulative') > -1 ? crux[experience][formFactor].data.record.metrics[key].percentiles.p75 : h.time.ms(crux[experience][formFactor].data.record.metrics[key].percentiles.p75)} + + h4 Distribution + - let cruxus = `${experience}.${formFactor}.data.record.metrics`; + - let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)]; + + - let LCPs = [Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)]; + + - let FIDs = [Number(get(crux, `${cruxus}.first_input_delay.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[2].density`, 0)*100).toFixed(2)]; + + - let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)]; + + - let TTFBs = [Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[2].density`, 0)*100).toFixed(2)]; + + - let ITNPs = [Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)]; + + script(type='text/javascript'). + document.addEventListener("DOMContentLoaded", function() { + + function drawPie(id, series, labels) { + new Chartist.Pie(id, { + series, + labels, + }, { + showLabel: false, + plugins: [ + Chartist.plugins.legend( + { clickable: false, + position: 'bottom' + } + ) + ] + }); + } + + drawPie('#chartFCP#{experience + formFactor}', [#{FCPs}], ['Fast: #{FCPs[0]}%', 'Moderate #{FCPs[1]}%', 'Slow: #{FCPs[2]}%']); + drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']); + drawPie('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[2]}%']); + drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']); + drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']); + drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']); + + + }); + .responsive + table + tr + th #{metrics['first_contentful_paint']} + th #{metrics['largest_contentful_paint']} + th #{metrics['first_input_delay']} + tr + td(data-title=metrics['first_contentful_paint']) + .ct-chart(id='chartFCP' + experience + formFactor) + td(data-title=metrics['largest_contentful_paint']) + .ct-chart(id='chartLCP' + experience + formFactor) + td(data-title=metrics['first_input_delay']) + .ct-chart(id='chartFID' + experience + formFactor) + tr + th #{metrics['cumulative_layout_shift']} + th #{metrics['experimental_interaction_to_next_paint']} + th #{metrics['experimental_time_to_first_byte']} + tr + td(data-title=metrics['cumulative_layout_shift']) + .ct-chart(id='chartCLS' + experience + formFactor) + td(data-title=metrics['experimental_interaction_to_next_paint']) + .ct-chart(id='chartITNP' + experience + formFactor) + td(data-title=metrics['experimental_time_to_first_byte']) + .ct-chart(id='chartTTFB' + experience + formFactor) +else + p No data availible in the Chrome User Experience report. \ No newline at end of file