From 0c8e1ecf03f69913a6bf777756a95712c80f296d Mon Sep 17 00:00:00 2001 From: zer0kool Date: Wed, 21 Aug 2024 10:52:37 -0700 Subject: [PATCH] project structure --- init.css => css/init.css | 0 init2.css => css/init2.css | 0 data.,json | 179 ----------------------- fetch.js | 168 --------------------- CruxTool.png => img/CruxTool.png | Bin sample.png => img/sample.png | Bin wompmobile.png => img/wompmobile.png | Bin index.html | 12 +- chart.js => js/charts/chart.js | 18 +-- fetchOrigin.js => js/crux/fetchOrigin.js | 6 +- fetchURL.js => js/crux/fetchURL.js | 6 +- init.js => js/init.js | 2 +- theme.js => js/theme.js | 0 test.html | 42 ------ v1.html | 73 --------- 15 files changed, 22 insertions(+), 484 deletions(-) rename init.css => css/init.css (100%) rename init2.css => css/init2.css (100%) delete mode 100644 data.,json delete mode 100644 fetch.js rename CruxTool.png => img/CruxTool.png (100%) rename sample.png => img/sample.png (100%) rename wompmobile.png => img/wompmobile.png (100%) rename chart.js => js/charts/chart.js (99%) rename fetchOrigin.js => js/crux/fetchOrigin.js (99%) rename fetchURL.js => js/crux/fetchURL.js (99%) rename init.js => js/init.js (99%) rename theme.js => js/theme.js (100%) delete mode 100644 test.html delete mode 100644 v1.html diff --git a/init.css b/css/init.css similarity index 100% rename from init.css rename to css/init.css diff --git a/init2.css b/css/init2.css similarity index 100% rename from init2.css rename to css/init2.css diff --git a/data.,json b/data.,json deleted file mode 100644 index bbc82e1..0000000 --- a/data.,json +++ /dev/null @@ -1,179 +0,0 @@ -[ - { - "metric": "first_contentful_paint", - "data": [ - [ - { - "week": 0, - "good": 0.951263427734375, - "Need Improvement": 0.027008056640625, - "bad": 0.021728515625 - }, - { - "week": 1, - "good": 0.950958251953125, - "Need Improvement": 0.027099609375, - "bad": 0.021942138671875 - }, - { - "week": 2, - "good": 0.9521484375, - "Need Improvement": 0.025909423828125, - "bad": 0.021942138671875 - }, - { - "week": 3, - "good": 0.953155517578125, - "Need Improvement": 0.025787353515625, - "bad": 0.02105712890625 - }, - { - "week": 4, - "good": 0.954345703125, - "Need Improvement": 0.02471923828125, - "bad": 0.02093505859375 - }, - { - "week": 5, - "good": 0.954254150390625, - "Need Improvement": 0.02471923828125, - "bad": 0.021026611328125 - }, - { - "week": 6, - "good": 0.954345703125, - "Need Improvement": 0.025299072265625, - "bad": 0.020355224609375 - }, - { - "week": 7, - "good": 0.956451416015625, - "Need Improvement": 0.023712158203125, - "bad": 0.01983642578125 - }, - { - "week": 8, - "good": 0.956939697265625, - "Need Improvement": 0.024200439453125, - "bad": 0.01885986328125 - }, - { - "week": 9, - "good": 0.956756591796875, - "Need Improvement": 0.0233154296875, - "bad": 0.019927978515625 - }, - { - "week": 10, - "good": 0.958648681640625, - "Need Improvement": 0.022613525390625, - "bad": 0.01873779296875 - }, - { - "week": 11, - "good": 0.9593505859375, - "Need Improvement": 0.022003173828125, - "bad": 0.018646240234375 - }, - { - "week": 12, - "good": 0.9588623046875, - "Need Improvement": 0.023101806640625, - "bad": 0.018035888671875 - }, - { - "week": 13, - "good": 0.960479736328125, - "Need Improvement": 0.021392822265625, - "bad": 0.01812744140625 - }, - { - "week": 14, - "good": 0.96014404296875, - "Need Improvement": 0.021697998046875, - "bad": 0.018157958984375 - }, - { - "week": 15, - "good": 0.95965576171875, - "Need Improvement": 0.02239990234375, - "bad": 0.0179443359375 - }, - { - "week": 16, - "good": 0.9576416015625, - "Need Improvement": 0.0238037109375, - "bad": 0.0185546875 - }, - { - "week": 17, - "good": 0.959442138671875, - "Need Improvement": 0.022216796875, - "bad": 0.018341064453125 - }, - { - "week": 18, - "good": 0.959869384765625, - "Need Improvement": 0.02239990234375, - "bad": 0.017730712890625 - }, - { - "week": 19, - "good": 0.9610595703125, - "Need Improvement": 0.021087646484375, - "bad": 0.017852783203125 - }, - { - "week": 20, - "good": 0.960968017578125, - "Need Improvement": 0.021209716796875, - "bad": 0.017822265625 - }, - { - "week": 21, - "good": 0.96044921875, - "Need Improvement": 0.0216064453125, - "bad": 0.0179443359375 - }, - { - "week": 22, - "good": 0.9605712890625, - "Need Improvement": 0.02191162109375, - "bad": 0.01751708984375 - }, - { - "week": 23, - "good": 0.95965576171875, - "Need Improvement": 0.022308349609375, - "bad": 0.018035888671875 - }, - { - "week": 24, - "good": 0.95947265625, - "Need Improvement": 0.022308349609375, - "bad": 0.018218994140625 - } - ] - ] - }, - { - "metric": "first_input_delay", - "data": [] - }, - { - "metric": "largest_contentful_paint", - "data": [] - }, - { - "metric": "cumulative_layout_shift", - "data": [] - }, - { - "metric": "experimental_interaction_to_next_paint", - "data": [] - }, - { - "metric": "experimental_time_to_first_byte", - "data": [] - } -] \ No newline at end of file diff --git a/fetch.js b/fetch.js deleted file mode 100644 index 49b42fb..0000000 --- a/fetch.js +++ /dev/null @@ -1,168 +0,0 @@ -const CrUXApiUtil = {}; -CrUXApiUtil.KEY = 'AIzaSyCv-IHj-oddickRMsoI5UBAJx3Cwj-mwck'; -const endpointUrl = 'https://chromeuxreport.googleapis.com/v1/records:queryRecord'; -var url = `${endpointUrl}?key=${CrUXApiUtil.KEY}`; -var app = document.querySelector('#app'); -var toastHTML = 'Data already exist on screen'; -var noData = `

No data

`; - -document.querySelector('form').addEventListener('submit', function (e) { - e.preventDefault(); - debugger; -// var origin = document.getElementById('search').value.toLowerCase().replace(/^(?:https?:\/\/)/i, "").split('/')[0]; - var origin = document.getElementById('search').value.toLowerCase().replace(/^(?:https?:\/\/)/i, ""); - var siteName = origin.split('/')[0]; -// var siteName = origin.replace(/^www\./, '').split('.').slice(0, -1).join('.'); -// if (!siteName) { return } -// if (siteName.match(/^\d/)) { siteName = `N${siteName}`} - var child = document.querySelector(`#${siteName}`); - if (app.contains(child)) { - M.toast({ html: toastHTML }); - } else { - M.toast({html: `Building a request to the API.`, classes: 'green', displayLength: 600}); - getData(origin); - } -}) - -CrUXApiUtil.query = async function (requestBody, formFactor) { - const resp = await fetch(url, {method: 'POST', body: JSON.stringify(requestBody)}); - const json = await resp.json(); - console.log(json); - if (resp.ok) { return json; }; - M.toast({ html: `${formFactor.formFactor}: ${json.error.message}`, classes: 'red darken-4 white-text'}); -}; - -getData = async (origin) => { - document.getElementById("loading").style.display = "block"; - const request = []; - const sum = await CrUXApiUtil.query({ url: `https://${origin}/`}, {formFactor: "Sum"}); - const phone = await CrUXApiUtil.query({ url: `https://${origin}/`, formFactor: "PHONE"}, {formFactor: "Phone"} ); - const desktop = await CrUXApiUtil.query({ url: `https://${origin}/`, formFactor: "DESKTOP"},{formFactor: "Desktop"}); - const tablet = await CrUXApiUtil.query({ url: `https://${origin}/`, formFactor: "TABLET"},{formFactor: "Tablet"}); - - // check if data is undefined - if (sum !== undefined){request.push(sum)}; - if (phone !== undefined){request.push(phone)}; - if (desktop !== undefined){request.push(desktop)}; - if (tablet !== undefined){request.push(tablet)}; - if (!request.length){document.getElementById("loading").style.display = "none"; throw new Error(`no crux data for ${origin}`); } - - process(request, origin); -} - -function process(formFactor, origin) { - const labeledMetrics = []; - formFactor.forEach( formFactor => { - const validData = labelMetricData(formFactor.record.metrics, formFactor.record.key.formFactor); - labeledMetrics.push(validData); - }) - const data = buildCard(labeledMetrics, origin); -} - -function buildCard(labeledMetrics, origin) { - const favicon = `https://${origin}/favicon.ico` - let filter = origin.replace(/^www\./, '').split('.').slice(0, -1).join('.'); - let siteName = filter.split('.').join("-") - let cardTitle = filter.split('.').join("-") - if (siteName.match(/^\d/)) { siteName = `N${siteName}`} - let sumId = `${siteName}SUM`; - let phoneId = `${siteName}PHONE`; - let desktopId = `${siteName}DESKTOP`; - let tabletId = `${siteName}TABLET`; - let card = ` -
- remove -
- - ${cardTitle} -
-
-
- -
-
-
-
-
-
- `; document.getElementById('app').insertAdjacentHTML("afterbegin", card); - labeledMetrics.forEach ( formFactor => { - buildData(formFactor, siteName); - }) - var el = document.querySelectorAll('.tabs'); - var instance = M.Tabs.init(el, {}); - var noData = `

No data

`; - let checkMetrics = document.querySelectorAll(".metrics"); - checkMetrics.forEach( metrics => { - let scopeId = metrics.parentNode.id; - if(metrics.hasChildNodes()){return}; - document.querySelector(`#${scopeId} .metrics`).insertAdjacentHTML("beforeend", noData); - }) - document.getElementById("loading").style.display = "none"; - document.getElementById('search').value = ''; - document.querySelector(`#${siteName} .close`).onclick = function() {removeCard()}; - function removeCard(){ - document.querySelector(`#${siteName}`).remove(); - } -} - -function buildData(labeledMetrics, siteName) { - labeledMetrics.forEach( metric => { - var finalData = {key:"", acronym:"", good:"", ok:"", poor:""} - finalData.key = siteName + metric.key; - finalData.acronym = metric.acronym; - finalData.good = metric.labeledBins[0].percentage.toFixed(2); - finalData.ok = metric.labeledBins[1].percentage.toFixed(2); - finalData.poor = metric.labeledBins[2].percentage.toFixed(2); - let htmlBar = ` -
-
- sentiment_very_satisfied${finalData.good}% - sentiment_neutral${finalData.ok}% - sentiment_very_dissatisfied${finalData.poor}% -
-

${finalData.acronym}

-
-
-
-
-
- `;document.querySelector(`#${finalData.key} .metrics`).insertAdjacentHTML("beforeend", htmlBar); - }); -} - -function labelMetricData(metrics, key) { - if(key === undefined){key = "SUM"}; - console.log(key); - const nameToAcronymMap = { - first_contentful_paint: 'FCP', - largest_contentful_paint: 'LCP', - first_input_delay: 'FID', - cumulative_layout_shift: 'CLS', - }; - return Object.entries(metrics).map(([metricName, metricData]) => { - const standardBinLabels = ['good', 'needs improvement', 'poor']; - const metricBins = metricData.histogram; - const labeledBins = metricBins.map((bin, i) => { - return { - label: standardBinLabels[i], - percentage: bin.density ? bin.density * 100 : 0, - ...bin, - }; - }); - return { - key: key, - acronym: nameToAcronymMap[metricName], - name: metricName, - labeledBins, - }; - }); -} - -// on page load, load google site metrics as an example. -getData('www.google.com'); diff --git a/CruxTool.png b/img/CruxTool.png similarity index 100% rename from CruxTool.png rename to img/CruxTool.png diff --git a/sample.png b/img/sample.png similarity index 100% rename from sample.png rename to img/sample.png diff --git a/wompmobile.png b/img/wompmobile.png similarity index 100% rename from wompmobile.png rename to img/wompmobile.png diff --git a/index.html b/index.html index 5008cd6..6ab9e5c 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ -Google CWV - Query and visualize CrUX CLS, FCP, FID and LCP. +Google CWV - Query and visualize CrUX CLS, FCP, FID and LCP.
@@ -297,15 +297,15 @@
Github Community: Thank you!
- - + + - - - + + + diff --git a/chart.js b/js/charts/chart.js similarity index 99% rename from chart.js rename to js/charts/chart.js index cb6944e..e8b67d4 100644 --- a/chart.js +++ b/js/charts/chart.js @@ -25,14 +25,14 @@ getHistoricalData = async (historyOrigin) => { CrUXApiHistory.query({ origin: `https://${historyOrigin}/`, formFactor: "Phone" }, { formFactor: "Phone" }), CrUXApiHistory.query({ origin: `https://${historyOrigin}/`, formFactor: "Desktop" }, { formFactor: "Desktop" }) ]; - + for (let i = 0; i < requests.length; i++) { const result = await requests[i]; if (result !== undefined) { request.push(result); } } - + await buildObjectData(request, historyOrigin); formChartData(request); }; @@ -252,7 +252,7 @@ function buildObjectData(entries, historyOrigin) { } } - + // console.log(cardObject) @@ -261,21 +261,21 @@ function buildObjectData(entries, historyOrigin) { }) // console.log(newRequestToProcess); - + const groupCards = arr => { let result = {}; for (let i = 0; i < arr.length; i++) { const cardIndexValue = arr[i].key.cardIndex; - if (result[cardIndexValue] === undefined) //if the key is not present in the object, create an array and add it to the object + if (result[cardIndexValue] === undefined) //if the key is not present in the object, create an array and add it to the object result[cardIndexValue] = [arr[i]]; - else //else push the objects into existing subarray + else //else push the objects into existing subarray result[cardIndexValue].push(arr[i]); } - return Object.values(result); //return a new array with all values of the grouped objects + return Object.values(result); //return a new array with all values of the grouped objects } let cards = groupCards(newRequestToProcess) @@ -285,7 +285,7 @@ function buildObjectData(entries, historyOrigin) { cards.forEach(item => { processd(item, historyOrigin) }) - + // formChartData(entries); } @@ -411,7 +411,7 @@ function labelMetricDatax(metrics, key, index) { experimental_time_to_first_byte: 'TTFB', }; return Object.entries(metrics).map(([metricName, metricData]) => { - // debugger; + // debugger; const standardBinLabels = ['good', 'needs improvement', 'poor']; const metricBins = metricData.histogram; const labeledBins = metricBins.map((bin, i) => { diff --git a/fetchOrigin.js b/js/crux/fetchOrigin.js similarity index 99% rename from fetchOrigin.js rename to js/crux/fetchOrigin.js index 3f95c43..8fa9144 100644 --- a/fetchOrigin.js +++ b/js/crux/fetchOrigin.js @@ -179,12 +179,12 @@ function createDefaultCard(cardTitle, favicon, siteName, sumId, phoneId, desktop CRUX Settingsclose

When the effective connection type is unspecified, aggregated data from all connection types will be displayed for a comprehensive overview.

${createNetworkFilters()} -
+

Explore the historical core web vitals trends for ${origin} from the last 6 months. This data is updated weekly and reflects the overall performance across all connection types.

-
+
View Historical Chart View Deck of Cards -
+

This card displays aggregated data from

diff --git a/fetchURL.js b/js/crux/fetchURL.js similarity index 99% rename from fetchURL.js rename to js/crux/fetchURL.js index f71d455..9c43796 100644 --- a/fetchURL.js +++ b/js/crux/fetchURL.js @@ -117,14 +117,14 @@ function buildUrlCardData(labeledMetrics, origin, pageType, network, dates) { Crux settingsclose

If the effective connection type is unspecified, then aggregated data over all effective connection types will be returned.

- +

The aggregated data on this card is from

${dates.first.month}-${dates.first.day}-${dates.first.year} to ${dates.last.month}-${dates.last.day}-${dates.last.year}
- +

Filter 3G connection bucket

@@ -330,7 +330,7 @@ function labelMetricData(metrics, key) { if ("navigation_types" in metrics ) {delete metrics["navigation_types"]}; if ("round_trip_time" in metrics ) {delete metrics["round_trip_time"]}; if (key === undefined) {key = "SUM"}; - + const nameToFullNameMap = { first_contentful_paint: 'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', diff --git a/init.js b/js/init.js similarity index 99% rename from init.js rename to js/init.js index c928cf2..cf7d8e5 100644 --- a/init.js +++ b/js/init.js @@ -15,4 +15,4 @@ M.Modal.init(slide, {}); document.getElementById('clear').addEventListener('click', function() { document.getElementById('search').value = ''; -}); \ No newline at end of file +}); diff --git a/theme.js b/js/theme.js similarity index 100% rename from theme.js rename to js/theme.js diff --git a/test.html b/test.html deleted file mode 100644 index b89df48..0000000 --- a/test.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
- sentiment_very_satisfied${finalData.good}% - sentiment_neutral${finalData.ok}% - sentiment_very_dissatisfied${finalData.poor}% -
-
-

${finalData.name}

-
-
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/v1.html b/v1.html deleted file mode 100644 index b7ff388..0000000 --- a/v1.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - Core Web Vitals Tool - - - - - - - - - - - - - - -
- -
-
-

Query the CrUX API

-
field data collected over the last 28 days
-
-
-
- - close -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-

Core Web Vitals Tool

-
The data in the Chrome UX Report is a 28-day rolling average of aggregated metrics. This means that the data presented in the Chrome UX Report at any given time is actually data for the past 28 days aggregated together. -
-
This is similar to how the CrUX dataset on BigQuery aggregates monthly reports.
-
-
-
-
-
- alex@wompmobile.com - Google CrUX API -
-
-
- - - - -