feat: add detail page

mazipan · Oct 1, 2020 · cb367a0 · cb367a0 · vercel · Oct 1, 2020
1 parent 97af15e
commit cb367a0
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 31 deletions.
diff --git a/components/CardDetail.tsx 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 (
+    <div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
+      <div className="flex justify-center space-between">
+        <div className="text-gray-600 my-2 mr-2">
+          <small className="text-sm font-bold">{title}</small>
+          <div className={`text-5xl font-bold capitalize ${getPerfColorClass(data.perf)}`}>
+            {(data.perf * 100).toFixed(0)}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center space-between my-2">
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">LCP</small>
+          <div className="text-center">
+            <span className={`text-3xl text-gray-600 font-bold capitalize ${getLCPColorClass(data.lcp)}`}>
+              {(data.lcp / 1000).toFixed(2)}
+            </span>
+            <small className="text-lg font-bold text-gray-600 ml-1">s</small>
+          </div>
+        </div>
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">FID</small>
+          <div className="text-center">
+            <span className={`text-3xl text-gray-600 font-bold capitalize ${getFIDColorClass(data.fid)}`}>
+              {data.fid.toFixed(0)}
+            </span>
+            <small className="text-lg font-bold text-gray-600 ml-1">ms</small>
+          </div>
+        </div>
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">CLS</small>
+          <div className={`text-3xl text-gray-600 font-bold capitalize ${getCLSColorClass(data.cls)}`}>
+            {data.cls.toFixed(2)}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center space-between my-2">
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">TBT</small>
+          <div className="text-center">
+            <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.tbt / 1000).toFixed(2)}</span>
+            <small className="text-lg font-bold text-gray-600 ml-1">s</small>
+          </div>
+        </div>
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">FCP</small>
+          <div className="text-center">
+            <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.fcp / 1000).toFixed(2)}</span>
+            <small className="text-lg font-bold text-gray-600 ml-1">s</small>
+          </div>
+        </div>
+        <div className="w-20 my-2 mr-4 text-center">
+          <small className="text-sm text-blue-400 font-bold">TTI</small>
+          <div className="text-center">
+            <span className={`text-3xl text-gray-600 font-bold capitalize`}>{(data.tti / 1000).toFixed(2)}</span>
+            <small className="text-lg font-bold text-gray-600 ml-1">s</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardDetail;
diff --git a/cronjob/ecommerce.ts → constants/ecommerce.ts b/cronjob/ecommerce.ts → constants/ecommerce.ts
diff --git a/cronjob/lh.ts b/cronjob/lh.ts
@@ -39,7 +39,7 @@ export default async (name: string, url: string, device: string): Promise<LHResp
 
       const perf = categories?.performance?.score || 0;
       const req = totalResources.requestCount || 0;
-      const size = totalResources.size || 0;
+      const size = totalResources.size || totalResources.transferSize || 0;
 
       const response: LHResponse = {
         perf,

diff --git a/cronjob/run.ts b/cronjob/run.ts
@@ -1,6 +1,6 @@
 import Table from 'cli-table3';
 
-import data from './ecommerce';
+import data from '../constants/ecommerce';
 import runLH from './lh';
 import { updateReport } from './report';
 import { EcommerceItem } from '../types';

diff --git a/cronjob/utils.ts b/cronjob/utils.ts
@@ -3,7 +3,7 @@ export default function sortAsc(arr: any[], key: string): any[] {
   return arr.sort((a, b) => 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
@@ -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 (
+    <Layout>
+      <h1 className="text-3xl font-bold capitalize">Web Performance: {data.n}</h1>
+      <small className="text-gray-600 text-lg font-bold">Last update {lastUpdate}</small>
+
+      <CardDetail data={data.d} title="Desktop" />
+      <CardDetail data={data.m} title="Mobile" />
+    </Layout>
+  );
+};
+
+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
@@ -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 => {
       <h3 className="text-gray-900 text-xl font-bold">Last update {lastDate}</h3>
 
       {lastReportSorted.map((item) => (
-        <div key={item.n} className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
-          <h3 className="text-3xl font-bold capitalize">{item.n}</h3>
-          <div className="flex justify-start">
-            <div className="text-gray-400 my-2 mr-2">
-              <small className="text-sm font-bold">Desktop</small>
-              <div className={`text-5xl font-bold capitalize ${getColorClass(item.d.perf)}`}>
-                {(item.d.perf * 100).toFixed(0)}
-              </div>
-            </div>
-            <div className="text-gray-400 my-2 ml-2">
-              <small className="text-sm font-bold">Mobile</small>
-              <div className={`text-5xl font-bold capitalize ${getColorClass(item.m.perf)}`}>
-                {(item.m.perf * 100).toFixed(0)}
+        <Link href={`/${item.n.toLowerCase()}`} key={item.n}>
+          <a href={`/${item.n.toLowerCase()}`}>
+            <div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
+              <h3 className="text-3xl font-bold capitalize">{item.n}</h3>
+              <div className="flex justify-start">
+                <div className="text-gray-600 my-2 mr-2">
+                  <small className="text-sm font-bold">Desktop</small>
+                  <div className={`text-5xl font-bold capitalize ${getPerfColorClass(item.d.perf)}`}>
+                    {(item.d.perf * 100).toFixed(0)}
+                  </div>
+                </div>
+                <div className="text-gray-600 my-2 ml-2">
+                  <small className="text-sm font-bold">Mobile</small>
+                  <div className={`text-5xl font-bold capitalize ${getPerfColorClass(item.m.perf)}`}>
+                    {(item.m.perf * 100).toFixed(0)}
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
+          </a>
+        </Link>
       ))}
     </Layout>
   );

diff --git a/utils/getColorClass.ts 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);
+};