Skip to content

Commit 47507a9

Browse files
rfrf
rf
authored and
rf
committed
feat(cwv): add stats for mobile
1 parent 9dd0a43 commit 47507a9

6 files changed

Lines changed: 69 additions & 43 deletions

File tree

‎packages/docs/src/components/CoreWebVitalChart.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
---
2-
import { getCWVDesktopStatsChartData } from '../lib/collections'
3-
import type { CWV } from '../lib/collections'
2+
import { getCWVStatsChartData } from '../lib/collections'
3+
import type { CWV, Device } from '../lib/collections'
44
import ComparisonBarChart from './ComparisonBarChart.astro'
55
66
interface Props {
77
cwv: CWV
8+
device: Device
89
}
910
10-
const { cwv } = Astro.props
11+
const { cwv, device } = Astro.props
1112
1213
const cwvTitle: Record<CWV, string> = {
1314
lcp: 'Good Largest Contentful Paint',
@@ -29,7 +30,7 @@ const cwvDescription: Record<CWV, string> = {
2930
<ComparisonBarChart
3031
title={cwvTitle[cwv]}
3132
description={cwvDescription[cwv]}
32-
data={getCWVDesktopStatsChartData(cwv)}
33+
data={getCWVStatsChartData(cwv, device)}
3334
valueFormat="count"
3435
yAxisLabel="%"
3536
/>

‎packages/docs/src/components/CoreWebVitalsCharts.astro‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
---
22
import ChartTabs from './ChartTabs.astro'
33
import CoreWebVitalChart from './CoreWebVitalChart.astro'
4+
import type { Device } from '../lib/collections'
5+
6+
interface Props {
7+
device: Device
8+
}
9+
10+
const { device } = Astro.props
11+
12+
const deviceLabel: Record<Device, string> = {
13+
desktop: 'Core Web Vitals Desktop',
14+
mobile: 'Core Web Vitals Mobile',
15+
}
416
---
517

618
<ChartTabs
7-
sectionId="client-side-rendered"
8-
label="Core Web Vitals Desktop"
19+
sectionId="core-web-vitals"
20+
label={deviceLabel[device]}
921
tab1Label="LCP"
1022
tab2Label="CLS"
1123
tab3Label="FCP"
1224
tab4Label="TTFB"
1325
tab5Label="INP"
1426
>
15-
<CoreWebVitalChart slot="panel-1" cwv="lcp" />
16-
<CoreWebVitalChart slot="panel-2" cwv="cls" />
17-
<CoreWebVitalChart slot="panel-3" cwv="fcp" />
18-
<CoreWebVitalChart slot="panel-4" cwv="ttfb" />
19-
<CoreWebVitalChart slot="panel-5" cwv="inp" />
27+
<CoreWebVitalChart slot="panel-1" cwv="lcp" device={device} />
28+
<CoreWebVitalChart slot="panel-2" cwv="cls" device={device} />
29+
<CoreWebVitalChart slot="panel-3" cwv="fcp" device={device} />
30+
<CoreWebVitalChart slot="panel-4" cwv="ttfb" device={device} />
31+
<CoreWebVitalChart slot="panel-5" cwv="inp" device={device} />
2032
</ChartTabs>

‎packages/docs/src/components/CoreWebVitalsMethodologyNotes.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import MethodologyNotes from '../components/MethodologyNotes.astro'
44

55
<MethodologyNotes>
66
<li>
7-
All Core Web Vitals for Desktop are sourced from <a
7+
All Core Web Vitals are sourced from <a
88
href="https://httparchive.org/reports/techreport/tech"
99
target="_blank"
1010
rel="noopener noreferrer">HTTP Archive</a

‎packages/docs/src/components/CoreWebVitalsTable.astro‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
import { cwvStats } from '../lib/collections'
33
import { getFrameworkSlug } from '../lib/utils'
44
import StatsTable from './StatsTable.astro'
5+
import type { Device } from '../lib/collections'
6+
7+
interface Props {
8+
device: Device
9+
}
10+
11+
const { device } = Astro.props
512
613
const columns = [
714
{
@@ -11,12 +18,16 @@ const columns = [
1118
href: (row: Record<string, unknown>) =>
1219
`/framework/${getFrameworkSlug(row.id as string)}`,
1320
},
14-
{ key: 'lcpDesktopPercent', header: 'LCP%' },
15-
{ key: 'clsDesktopPercent', header: 'CLS%' },
16-
{ key: 'fcpDesktopPercent', header: 'FCP%' },
17-
{ key: 'ttfbDesktopPercent', header: 'TTFB%' },
18-
{ key: 'inpDesktopPercent', header: 'INP%' },
21+
{ key: 'lcpPercent', header: 'LCP%' },
22+
{ key: 'clsPercent', header: 'CLS%' },
23+
{ key: 'fcpPercent', header: 'FCP%' },
24+
{ key: 'ttfbPercent', header: 'TTFB%' },
25+
{ key: 'inpPercent', header: 'INP%' },
1926
]
2027
---
2128

22-
<StatsTable label="CWV by framework" columns={columns} data={cwvStats} />
29+
<StatsTable
30+
label="CWV by framework"
31+
columns={columns}
32+
data={cwvStats(device)}
33+
/>

‎packages/docs/src/lib/collections.ts‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,31 @@ const devtimeEntries = await getCollection('devtime')
55
export const runtimeEntries = await getCollection('runtime')
66
const cwvEntries = await getCollection('cwv')
77

8-
export const cwvStats = cwvEntries
9-
.map((entry) => entry.data)
10-
.sort((a, b) => b.overall.desktop - a.overall.desktop)
11-
.map((stat) => ({
12-
id: stat.id,
13-
framework: stat.framework,
14-
isFocused: true,
15-
lcpDesktopPercent: Math.floor(stat.lcp.desktop * 100),
16-
lcpMobilePercent: Math.floor(stat.lcp.mobile * 100),
17-
clsDesktopPercent: Math.floor(stat.cls.desktop * 100),
18-
clsMobilePercent: Math.floor(stat.cls.mobile * 100),
19-
fcpDesktopPercent: Math.floor(stat.fcp.desktop * 100),
20-
fcpMobilePercent: Math.floor(stat.fcp.mobile * 100),
21-
ttfbDesktopPercent: Math.floor(stat.ttfb.desktop * 100),
22-
ttfbMobilePercent: Math.floor(stat.ttfb.mobile * 100),
23-
inpDesktopPercent: Math.floor(stat.inp.desktop * 100),
24-
inpMobilePercent: Math.floor(stat.inp.mobile * 100),
25-
}))
8+
export type Device = 'desktop' | 'mobile'
9+
10+
export const cwvStats = (device: Device) =>
11+
cwvEntries
12+
.map(({ data }) => ({
13+
id: data.id,
14+
framework: data.framework,
15+
isFocused: true,
16+
overallPercent: Math.floor(data.overall[device] * 100),
17+
lcpPercent: Math.floor(data.lcp[device] * 100),
18+
clsPercent: Math.floor(data.cls[device] * 100),
19+
fcpPercent: Math.floor(data.fcp[device] * 100),
20+
ttfbPercent: Math.floor(data.ttfb[device] * 100),
21+
inpPercent: Math.floor(data.inp[device] * 100),
22+
}))
23+
.sort((a, b) => b.overallPercent - a.overallPercent)
2624

2725
export type CWV = 'lcp' | 'cls' | 'fcp' | 'ttfb' | 'inp'
2826

29-
export function getCWVDesktopStatsChartData(cwv: CWV) {
30-
return cwvStats
31-
.sort((a, b) => b[`${cwv}DesktopPercent`] - a[`${cwv}DesktopPercent`])
27+
export function getCWVStatsChartData(cwv: CWV, device: Device) {
28+
return cwvStats(device)
29+
.sort((a, b) => b[`${cwv}Percent`] - a[`${cwv}Percent`])
3230
.map((stat) => ({
3331
name: stat.framework,
34-
value: stat[`${cwv}DesktopPercent`],
32+
value: stat[`${cwv}Percent`],
3533
focused: true,
3634
}))
3735
}

‎packages/docs/src/pages/run-time.astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,12 @@ import CoreWebVitalsMethodologyNotes from '../components/CoreWebVitalsMethodolog
4040
<SSRLoadP90Charts />
4141
<SSRLoadStatsTable />
4242
<SSRLoadStatsMethodologyNotes />
43-
<h2 id="server-side-load-test">Core Web Vitals Desktop</h2>
44-
<CoreWebVitalsCharts />
45-
<CoreWebVitalsTable />
43+
<h2 id="core-web-vitals-test">Core Web Vitals (CWV)</h2>
44+
<h3>CWV Desktop</h3>
45+
<CoreWebVitalsCharts device="desktop" />
46+
<CoreWebVitalsTable device="desktop" />
47+
<h3>CWV Mobile</h3>
48+
<CoreWebVitalsCharts device="mobile" />
49+
<CoreWebVitalsTable device="mobile" />
4650
<CoreWebVitalsMethodologyNotes />
4751
</Layout>

0 commit comments

Comments
 (0)