Skip to content

Commit 35b855e

Browse files
jorozco94jorozco94
committed
Re-added rating feature to go along with web-vitals that did not succesfully commit initially
1 parent 4886746 commit 35b855e

File tree

4 files changed

+76
-16
lines changed

4 files changed

+76
-16
lines changed

‎public/SvelteStormdebugPrepend.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@ setTimeout(() => setupListeners(window.document));
170170
*/
171171

172172
// sendMetrics helper function for web-vitals functions
173-
function sendMetrics({ name, value }) {
174-
ipcRenderer.send('web-vitals', { name, value });
173+
function sendMetrics({ name, value, rating }) {
174+
ipcRenderer.send('web-vitals', { name, value, rating });
175175
};
176176

177177
// JO 9/3 attempt to call the web vitals - we'll need to store these if we can get them

‎src/PerformanceDashboard/WebVitals.svelte

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script>
22
import { vitals } from "../DataStore/SvelteStormDataStore";
3+
import FileDir from "../Directory/FileDir.svelte";
34
const { ipcRenderer } = require('electron');
45
56
ipcRenderer.on('web-vitals', (event, args) => {
67
vitals.update((currVal) => {
7-
currVal[args.name] = args.value;
8+
currVal[args.name] = args;
89
return currVal;
910
});
1011
});
@@ -20,29 +21,65 @@
2021
<div class='vitals-left'>
2122
<div class='individual-vital'>
2223
<h5>Largest Contentful Paint</h5>
23-
<p>{$vitals.LCP === undefined ? "TBD" : ($vitals.LCP).toFixed(3)}</p>
24+
<p>{$vitals.LCP === undefined ? "TBD" : ($vitals.LCP.value).toFixed(3) + 's'}</p>
25+
{#if $vitals.LCP}
26+
<p>Rating:
27+
<span class={$vitals.LCP.rating[0]}>{$vitals.LCP.rating.toUpperCase()}
28+
</span>
29+
</p>
30+
{/if}
2431
</div>
2532
<div class='individual-vital'>
2633
<h5>First Input Delay</h5>
27-
<p>{$vitals.FID === undefined ? "TBD" : ($vitals.FID).toFixed(3)}</p>
34+
<p>{$vitals.FID === undefined ? "TBD" : ($vitals.FID.value).toFixed(3) + 'ms'}</p>
35+
{#if $vitals.FID}
36+
<p>Rating:
37+
<span class={$vitals.FID.rating[0]}>{$vitals.FID.rating.toUpperCase()}
38+
</span>
39+
</p>
40+
{/if}
2841
</div>
2942
<div class='individual-vital'>
3043
<h5>Cumulative Layout Shift</h5>
31-
<p>{$vitals.CLS === undefined ? "TBD" : ($vitals.CLS).toFixed(3)}</p>
44+
<p>{$vitals.CLS === undefined ? "TBD" : ($vitals.CLS.value).toFixed(3)}</p>
45+
{#if $vitals.CLS}
46+
<p>Rating:
47+
<span class={$vitals.CLS.rating[0]}>{$vitals.CLS.rating.toUpperCase()}
48+
</span>
49+
</p>
50+
{/if}
3251
</div>
3352
</div>
3453
<div class='vitals-right'>
3554
<div class='individual-vital'>
3655
<h5>First Contentful Paint</h5>
37-
<p>{$vitals.FCP === undefined ? "TBD" : ($vitals.FCP).toFixed(3)}</p>
56+
<p>{$vitals.FCP === undefined ? "TBD" : ($vitals.FCP.value).toFixed(3) + 's'}</p>
57+
{#if $vitals.FCP}
58+
<p>Rating:
59+
<span class={$vitals.FCP.rating[0]}>{$vitals.FCP.rating.toUpperCase()}
60+
</span>
61+
</p>
62+
{/if}
3863
</div>
3964
<div class='individual-vital'>
4065
<h5>Time To First Byte</h5>
41-
<p>{$vitals.TTFB === undefined ? "TBD" : ($vitals.TTFB).toFixed(3)}</p>
66+
<p>{$vitals.TTFB === undefined ? "TBD" : ($vitals.TTFB.value).toFixed(3) + 'ms'}</p>
67+
{#if $vitals.TTFB}
68+
<p>Rating:
69+
<span class={$vitals.TTFB.rating[0]}>{$vitals.TTFB.rating.toUpperCase()}
70+
</span>
71+
</p>
72+
{/if}
4273
</div>
4374
<div class='individual-vital'>
4475
<h5>Interaction to Next Paint</h5>
45-
<p>{$vitals.INP === undefined ? "TBD" : ($vitals.INP).toFixed(3)}</p>
76+
<p>{$vitals.INP === undefined ? "TBD" : ($vitals.INP.value).toFixed(3) + 'ms'}</p>
77+
{#if $vitals.INP}
78+
<p>Rating:
79+
<span class={$vitals.INP.rating[0]}>{$vitals.INP.rating.toUpperCase()}
80+
</span>
81+
</p>
82+
{/if}
4683
</div>
4784
</div>
4885
</div>
@@ -51,6 +88,25 @@
5188
</main>
5289

5390
<style>
91+
.invisible {
92+
display: none;
93+
}
94+
95+
.g, .n, .p {
96+
font-weight: bold;
97+
}
98+
99+
.g {
100+
color: rgb(0, 154, 0);
101+
}
102+
103+
.n {
104+
color: rgb(243, 197, 80);
105+
}
106+
107+
.p {
108+
color: rgb(240, 38, 38);
109+
}
54110
55111
.web-vitals-parent-container {
56112
display: flex;

‎src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,6 @@ ipcMain.on('SNAPSHOT', (event, data) => {
353353
* ==================================================
354354
*/
355355
ipcMain.on('web-vitals', (event, args) => {
356-
// console.log(args);
357356
newWindow.webContents.send('web-vitals', args)
358357
});
359358

‎src/types.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,18 @@ export type componentStateObj = {
109109
// export type SnapForPassingAround = [
110110
// componentStateObj
111111
// ]
112+
interface SingleObject {
113+
name: string,
114+
value: number,
115+
rating: string
116+
}
112117

113118
// used for web vitals objects
114119
export interface VitalObject {
115-
LCP?: number,
116-
FID?: number,
117-
CLS?: number,
118-
FCP?: number,
119-
TTFB?: number,
120-
INP?: number,
120+
LCP?: SingleObject,
121+
FID?: SingleObject,
122+
CLS?: SingleObject,
123+
FCP?: SingleObject,
124+
TTFB?: SingleObject,
125+
INP?: SingleObject,
121126
}

0 commit comments

Comments
 (0)