feat: add index.html
This commit is contained in:
parent
bf9936d7c9
commit
4a2adf2b27
190
index.html
Normal file
190
index.html
Normal file
|
@ -0,0 +1,190 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" id="fixed" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" id="change" />
|
||||||
|
|
||||||
|
<title>Web Vitals</title>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/json.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select, input, button {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
select, button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsons {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
height: calc(100% - (2 * 13px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.top_bar {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsons {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.top_bar {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jsons {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="top_bar">
|
||||||
|
<select class="api">
|
||||||
|
<option value="https://theclashfruit.me/api/v2">Production (https://theclashfruit.me/api/v2)</option>
|
||||||
|
<option value="http://localhost:3000/api/v2">Local Development (http://localhost:3000/api/v2)</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select class="type">
|
||||||
|
<option value="TTFB">Time to First Byte</option>
|
||||||
|
<option value="FCP">First Contentful Paint</option>
|
||||||
|
<option value="LCP">Largest Contentful Paint</option>
|
||||||
|
<option value="FID">First Input Delay</option>
|
||||||
|
<option value="CLS">Cumulative Layout Shift</option>
|
||||||
|
<option value="INP">Interaction to Next Paint</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select class="theme-selector"></select>
|
||||||
|
|
||||||
|
<input class="filter" placeholder="Filter" value="v.rating == 'good'" />
|
||||||
|
|
||||||
|
<button onclick="fetchApi(input.value)">Refresh</button>
|
||||||
|
<button onclick="downloadData(input.value)">Download Data</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="jsons"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const input = document.querySelector('.api');
|
||||||
|
const select = document.querySelector('.type');
|
||||||
|
|
||||||
|
const filter = document.querySelector('.filter');
|
||||||
|
|
||||||
|
const themes = document.querySelector('.theme-selector');
|
||||||
|
|
||||||
|
let events = [];
|
||||||
|
|
||||||
|
const iC = (e) => {
|
||||||
|
const url = e.target.value;
|
||||||
|
|
||||||
|
fetchApi(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sC = (e) => {
|
||||||
|
const vital = e.target.value;
|
||||||
|
|
||||||
|
fetchApi(input.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
input.onchange = iC;
|
||||||
|
select.onchange = sC;
|
||||||
|
|
||||||
|
filter.onchange = (e) => {
|
||||||
|
fetchApi(input.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
themes.onchange = (e) => {
|
||||||
|
document.querySelector('#change').href = `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/${e.target.value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchApi = async (url) => {
|
||||||
|
const parent = document.querySelector('.jsons');
|
||||||
|
|
||||||
|
parent.innerHTML = '';
|
||||||
|
|
||||||
|
fetch(`${url}/analytics/vitals`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
data.filter(v => v.name === select.value).filter(v => eval(`${filter.value}`)).forEach(vital => {
|
||||||
|
const div = document.createElement('pre');
|
||||||
|
|
||||||
|
div.innerHTML = `<code>${JSON.stringify(vital, null, 2)}</code>`;
|
||||||
|
|
||||||
|
parent.appendChild(div);
|
||||||
|
});
|
||||||
|
|
||||||
|
hljs.highlightAll();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const downloadData = async (url) => {
|
||||||
|
fetch(`${url}/analytics/vitals`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
|
||||||
|
a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }));
|
||||||
|
a.download = `vitals-${new Date().getTime()}.json`;
|
||||||
|
|
||||||
|
a.click();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchApi(input.value);
|
||||||
|
|
||||||
|
fetch('https://api.cdnjs.com/libraries/highlight.js/11.9.0')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
data.files.filter(f => f.includes('.min.css')).forEach(data => {
|
||||||
|
const newOption = document.createElement('option');
|
||||||
|
|
||||||
|
newOption.value = data
|
||||||
|
.replace('styles/', '');
|
||||||
|
newOption.innerText = data
|
||||||
|
.replace('styles/', '')
|
||||||
|
.replace('.min.css', '')
|
||||||
|
.replace('/', '-');
|
||||||
|
|
||||||
|
themes.appendChild(newOption);
|
||||||
|
});
|
||||||
|
|
||||||
|
themes.value = 'github.min.css';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in a new issue