Skip to content

Commit

Permalink
a day with lots of coffee!
Browse files Browse the repository at this point in the history
  • Loading branch information
zer0kool committed Aug 21, 2024
1 parent 588ce14 commit 67ae787
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 59 deletions.
208 changes: 208 additions & 0 deletions css/histo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
/*sitename*/
#cruxbatch td.site {
font-size: 10px;
width: 100%;
}

#cruxbatch span.good {
border-bottom: 1px solid green;
/* width: 50px;*/
display: inline-block;
}
#cruxbatch span.needs.improvement {
border-bottom: 1px solid yellow;
/* width: 50px;*/
display: inline-block;
}
#cruxbatch span.poor {
border-bottom: 1px solid red;
/* width: 50px;*/
display: inline-block;
}

#cruxbatch tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

#cruxbatch .cwvmetrics {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 1rem;
}
#cruxbatch .metric-label.Passed {
background-color: #ffffff;
border-radius: 2px;
padding: 2px 5px;
border-left: 2px solid #68ad5c;
-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
#cruxbatch .metric-label.Failed {
background-color: #f8f8f8;
border-radius: 2px;
padding: 2px 5px;
border-left: 2px solid #f44336;
-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
#cruxbatch .CLS {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}

#cruxbatch .FCP {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}

#cruxbatch .FID {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}

#cruxbatch .LCP {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
#cruxbatch .INP {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
#cruxbatch .TTFB {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
#cruxbatch .p75Chart {
background-color: white;
margin-bottom: 30px;
-webkit-box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}
#cruxbatch .metric {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#cruxbatch .metric-title {
width: 100%;
}
#cruxbatch .metric-labels {
font-size: 11px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: .3rem;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#cruxbatch .collapsible-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
line-height: 1.5;
padding: 1rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

#cruxbatch .collapsible-body {
background-color: rgb(250, 250, 250);
}

/*bypass*/
#cruxbatch .collapsible.popout>li {
-webkit-box-shadow: none;
box-shadow: none;
}
#cruxbatch .collapsible.popout>li.active {
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/*tabs*/
#cruxbatch .tabs {
background-color: transparent;
}
#cruxbatch .tabs .tab a:hover {
color: hsl(200, 17%, 28%);
}
#cruxbatch .tabs .tab a:focus,
#cruxbatch .tabs .tab a:focus.active {
background-color: #bbdefb14;
outline: none;
}
#cruxbatch .tabs .tab a {
background-color: transparent;
color: hsl(200, 17%, 28%);
}
#cruxbatch .tabs .tab a.active {
background-color: transparent;
color: #006cc2;
}
#cruxbatch .tabs .indicator {
background-color: #42a5f5;
}

#cruxbatch #page:has(.active:empty),
#cruxbatch #results:has(#LCP:empty),
#cruxbatch .dataUrls:has(#data:empty) {
display: none;
}
#cruxbatch .cwvmetrics .metric-label {
font-size: .75em;
}
#cruxbatch .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: -webkit-fill-available;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 5px;
}

#cruxbatch div#page {
border: 1px dashed;
-webkit-box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

#cruxbatch .drill.spi {
text-align: right;
margin-top: -20px;
margin-bottom: 20px;
}
47 changes: 45 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;display=swap">
<link rel="stylesheet" type="text/css" href="./css/init.css" media="screen,projection">
<link rel="stylesheet" type="text/css" href="./css/init2.css" media="screen,projection">
<link rel="stylesheet" type="text/css" href="./css/histo.css" media="screen,projection">
<link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v53/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Expand Down Expand Up @@ -72,6 +73,13 @@
</a>
</li>

<li class="nav-item tab">
<a href="#cruxbatch" class="nav-link">
<i class="material-icons">data_usage</i>
<span class="link-text">Batch Urls</span>
</a>
</li>

<li class="nav-item tab">
<a href="#about" class="nav-link">
<i class="material-icons">eco</i>
Expand Down Expand Up @@ -123,6 +131,7 @@ <h6>Visualize field data collected over the last 28 days</h6>
<div id="app"></div>
</div>
</div>

<div id="cruxurl" class="col s12" style="display: none;">
<div class="info">
<h1>CrUX by Url</h1>
Expand Down Expand Up @@ -154,6 +163,39 @@ <h6>Visualize field data collected over the last 28 days</h6>
<div id="app"></div>
</div>
</div>

<div id="cruxbatch" class="col s12" style="display: none;">
<div id="batch" class="container">
<div class="hero">
<h1>CrUX Batch Tool</h1>
<p>Discover and optimize your Core Web Vitals</p>
<a class="waves-effect waves-light btn black modal-trigger" href="#batchModal">Get Started</a>
</div>
<i class="material-icons menu">settings</i>

<!-- Modal Structure -->
<div id="batchModal" class="modal bottom-sheet">
<div class="modal-content">
<h4>CrUX Batch</h4>
<p>A bunch of ulrs..</p>
<div class="form">
<div class="col s10 center">
<div class="input-field col s12">
<textarea id="dataUrls" class="materialize-textarea prompt-box" data-length="1020"></textarea>
</div>
</div>
<div class="feedback center"></div>
</div>
</div>
<div class="modal-footer">
<div class="sticky"><button onclick="processUrls()" class="btn"> Fetch Urls </button></div>
</div>
</div>
<div class="container dataUrls"></div>
<ul class="collapsible popout" id="data"></ul>
</div>
</div>

<div id="about" class="col s12" style="display: none;">
<div class="container">
<div class="section">
Expand Down Expand Up @@ -283,6 +325,7 @@ <h5>Questions and Answers</h5>
<br><br>
</div>
</div>

<div id="credits" class="col s12" style="display: none;"> <br><br>
<div class="section center">
<img decoding="async" loading="lazy" width="280" height="50" src="./wompmobile.png" fetchpriority="low">
Expand Down Expand Up @@ -343,7 +386,7 @@ <h5>Github Community: Thank you!</h5>
<script defer type="text/javascript" src="./js/charts/chart.js"></script>
<script defer type="text/javascript" src="./js/crux/fetchOrigin.js"></script>
<script defer type="text/javascript" src="./js/crux/fetchURL.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/histo.js"></script>
<script type="text/javascript" src="js/charts/batch.js"></script>
<script type="text/javascript" src="js/charts/histo.js"></script>

</body>
29 changes: 15 additions & 14 deletions js/charts/batch.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
M.Tabs.init(chartTabs, {});
// M.Tabs.init(chartTabs, {});


const CrUXApiUtil = {};
CrUXApiUtil.API_KEY = 'AIzaSyABFb0DrX8sAZ3867SAjpimUP-lxZ6yjuA';
CrUXApiUtil.API_HOST = 'https://chromeuxreport.googleapis.com';
CrUXApiUtil.API_ENDPOINT_PATH = `/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
CrUXApiUtil.API_ENDPOINT = `${CrUXApiUtil.API_HOST}${CrUXApiUtil.API_ENDPOINT_PATH}`;
CrUXApiUtil.query = function (url) {
if (CrUXApiUtil.API_KEY === '[YOUR_API_KEY]') {
const CrUXApiService = {};
CrUXApiService.API_KEY = 'AIzaSyABFb0DrX8sAZ3867SAjpimUP-lxZ6yjuA';
CrUXApiService.API_HOST = 'https://chromeuxreport.googleapis.com';
CrUXApiService.API_ENDPOINT_PATH = `/v1/records:queryRecord?key=${CrUXApiService.API_KEY}`;
CrUXApiService.API_ENDPOINT = `${CrUXApiService.API_HOST}${CrUXApiService.API_ENDPOINT_PATH}`;
CrUXApiService.query = function (url) {
if (CrUXApiService.API_KEY === '[YOUR_API_KEY]') {
throw 'Replace "YOUR_API_KEY" with your private CrUX API key. Get a key at https://goo.gle/crux-api-key.';
}
const requestBody = {
Expand All @@ -16,7 +16,7 @@ CrUXApiUtil.query = function (url) {
metrics: ['first_contentful_paint', 'largest_contentful_paint', 'first_input_delay', 'cumulative_layout_shift', 'interaction_to_next_paint', 'experimental_time_to_first_byte'],
};

return fetch(CrUXApiUtil.API_ENDPOINT, {
return fetch(CrUXApiService.API_ENDPOINT, {
method: 'POST',
body: JSON.stringify(requestBody),
})
Expand Down Expand Up @@ -50,18 +50,19 @@ function processUrls() {
const dataUrls = document.getElementById('dataUrls').value;
const urls = dataUrls.split(/[,\n]/).map(url => url.trim());
const filteredUrls = urls.filter(url => url.startsWith('https'));
const promises = filteredUrls.map(url => CrUXApiUtil.query(url));
const promises = filteredUrls.map(url => CrUXApiService.query(url));

Promise.all(promises)
.then(responses => {
responses.forEach((response, index) => {
console.log(response)
const url = urls[index];
if (!response.record) {
queryBatch.noData.push(url);
return
};
queryBatch.cruxUrls.push(url)
response.record.metrics = labelMetricData(response.record.metrics);
response.record.metrics = labelMetricDatabatch(response.record.metrics);
queryBatch.metrics.push(response?.record)

// Store results in queryBatch.results object
Expand All @@ -86,7 +87,7 @@ function processUrls() {
renderData(queryBatch.metrics)
})
.catch(error => {
console.error('Error:', error);
console.error('Error in Promise.all:', error);
});

};
Expand Down Expand Up @@ -211,7 +212,7 @@ function renderData(crux) {
event.target.hidden = true

// Call the function to load historical data using the dataId value as a scope for the charts
loadHistoricalData(dataId, pageURL);
loadHistoricalDataById(dataId, pageURL)
});


Expand All @@ -220,7 +221,7 @@ function renderData(crux) {



function labelMetricData(metrics) {
function labelMetricDatabatch(metrics) {
const nameToFullNameMap = {
first_contentful_paint: 'First Contentful Paint (FCP)',
largest_contentful_paint: 'Largest Contentful Paint (LCP)',
Expand Down
Loading

0 comments on commit 67ae787

Please sign in to comment.