diff --git a/components/CardDetail.tsx b/components/CardDetail.tsx new file mode 100644 index 0000000..cf0b5a3 --- /dev/null +++ b/components/CardDetail.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { getPerfColorClass, getLCPColorClass, getFIDColorClass, getCLSColorClass } from '../utils/getColorClass'; + +const CardDetail = ({ data, title }): React.ReactElement => { + return ( +
+
+
+ {title} +
+ {(data.perf * 100).toFixed(0)} +
+
+
+ +
+
+ LCP +
+ + {(data.lcp / 1000).toFixed(2)} + + s +
+
+
+ FID +
+ + {data.fid.toFixed(0)} + + ms +
+
+
+ CLS +
+ {data.cls.toFixed(2)} +
+
+
+ +
+
+ TBT +
+ {(data.tbt / 1000).toFixed(2)} + s +
+
+
+ FCP +
+ {(data.fcp / 1000).toFixed(2)} + s +
+
+
+ TTI +
+ {(data.tti / 1000).toFixed(2)} + s +
+
+
+
+ ); +}; + +export default CardDetail; diff --git a/cronjob/ecommerce.ts b/constants/ecommerce.ts similarity index 100% rename from cronjob/ecommerce.ts rename to constants/ecommerce.ts diff --git a/cronjob/lh.ts b/cronjob/lh.ts index fd8b8e7..0fcce42 100644 --- a/cronjob/lh.ts +++ b/cronjob/lh.ts @@ -39,7 +39,7 @@ export default async (name: string, url: string, device: string): Promise a - b); } -const _quantile = (sorted: any[], q: number) => { +const _quantile = (sorted: any[], q: number): any => { const pos = (sorted.length - 1) * q; const base = Math.floor(pos); const rest = pos - base; @@ -14,7 +14,7 @@ const _quantile = (sorted: any[], q: number) => { } }; -export function quantile(arr: any[], q: number, key: string) { +export function quantile(arr: any[], q: number, key: string): any { const sorted = sortAsc(arr, key); const sortOnlyValue = sorted.map((i) => i[key]); const res = _quantile(sortOnlyValue, q); diff --git a/pages/[id].tsx b/pages/[id].tsx new file mode 100644 index 0000000..389c222 --- /dev/null +++ b/pages/[id].tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { GetStaticProps, GetStaticPaths } from 'next'; + +import Layout from '../components/Layout'; +import CardDetail from '../components/CardDetail'; + +import reports from '../reports/output'; +import dataEcommerce from '../constants/ecommerce'; +import { EcommerceItem } from '../types'; + +const DetailPage = ({ data, lastUpdate }): React.ReactElement => { + return ( + +

Web Performance: {data.n}

+ Last update {lastUpdate} + + + + + ); +}; + +export const getStaticPaths: GetStaticPaths = async () => { + const paths = dataEcommerce.map((i: EcommerceItem) => `/${i.name.toLowerCase()}`); + + return { paths, fallback: false }; +}; + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const id: string = params ? `${params.id}` : ''; + + const reportDates = Object.keys(reports) || []; + const lastDate = reportDates[reportDates.length - 1] || ''; + const lastReport = reports[lastDate] || []; + const data = lastReport.length > 0 ? lastReport.find((item) => item.n.toLowerCase() === id.toLowerCase()) : {}; + + return { props: { data, lastUpdate: lastDate } }; +}; + +export default DetailPage; diff --git a/pages/index.tsx b/pages/index.tsx index 7c40dfb..7541554 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,18 +1,9 @@ import React from 'react'; -// import Link from 'next/link'; +import Link from 'next/link'; + import Layout from '../components/Layout'; import reports from '../reports/output'; - -const getColorClass = (value): string => { - if (value <= 0.49) { - return 'text-red-600'; - } - if (value <= 0.89) { - return 'text-orange-500'; - } - - return 'text-green-500'; -}; +import { getPerfColorClass } from '../utils/getColorClass'; const Home = (): React.ReactElement => { const reportDates = Object.keys(reports) || []; @@ -25,23 +16,27 @@ const Home = (): React.ReactElement => {

Last update {lastDate}

{lastReportSorted.map((item) => ( -
-

{item.n}

-
-
- Desktop -
- {(item.d.perf * 100).toFixed(0)} -
-
-
- Mobile -
- {(item.m.perf * 100).toFixed(0)} + + +
+

{item.n}

+
+
+ Desktop +
+ {(item.d.perf * 100).toFixed(0)} +
+
+
+ Mobile +
+ {(item.m.perf * 100).toFixed(0)} +
+
-
-
+ + ))} ); diff --git a/utils/getColorClass.ts b/utils/getColorClass.ts new file mode 100644 index 0000000..3043ec3 --- /dev/null +++ b/utils/getColorClass.ts @@ -0,0 +1,34 @@ +export const getPerfColorClass = (value: number): string => { + if (value <= 0.49) { + return 'text-red-600'; + } + if (value <= 0.89) { + return 'text-orange-500'; + } + + return 'text-green-500'; +}; + +export const getWebVitalColorClass = (value: number, good: number, avg: number): string => { + if (value <= good) { + return 'text-green-500'; + } + + if (value <= avg) { + return 'text-orange-500'; + } + + return 'text-red-600'; +}; + +export const getLCPColorClass = (value: number): string => { + return getWebVitalColorClass(value, 2500, 4000); +}; + +export const getFIDColorClass = (value: number): string => { + return getWebVitalColorClass(value, 100, 300); +}; + +export const getCLSColorClass = (value: number): string => { + return getWebVitalColorClass(value, 0.1, 0.25); +};