Skip to content
This repository has been archived by the owner on Feb 3, 2025. It is now read-only.

Commit

Permalink
chore: tune detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
@irfan-maulana-tkp
irfan-maulana-tkp committed Nov 23, 2020
1 parent 6825596 commit 0578d6f
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 67 deletions.
40 changes: 24 additions & 16 deletions components/CardDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
import React from 'react';
import dynamic from 'next/dynamic';

import Gauge from './Gauge';
import { getPerfColorClass, getLCPColorClass, getFIDColorClass, getCLSColorClass } from '../utils/getColorClass';

const CardDetail = ({ data, title }): React.ReactElement => {
const ChartTimeline = dynamic(() => import('./ChartTimeline'), { ssr: false });

const CardDetail = ({ data, allData }): 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 text-center">
<small className="text-sm font-bold">{title}</small>
<div className={`text-6xl font-bold capitalize ${getPerfColorClass(data.perf)}`}>
{(data.perf * 100).toFixed(0)}
<>
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg">
<div className="flex justify-center items-center">
<Gauge score={data.perf} variant="large" />
</div>
</div>

<div className="p-2 bg-white shadow overflow-hidden rounded-lg">
<ChartTimeline data={allData} title="Performance Score" dataKey="perf" />
</div>
</div>

<div className="flex justify-center space-between my-2">
<div className="w-20 my-2 mr-4 text-center">
<div className="mt-4 grid grid-cols-3 gap-4">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-xs text-gray-600 italic">(Loading)</small>
<h3 className="text-3xl text-blue-500 font-bold">LCP</h3>
<div className="text-center">
Expand All @@ -24,7 +32,7 @@ const CardDetail = ({ data, title }): React.ReactElement => {
<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">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-xs text-gray-600 italic">(Interactivity)</small>
<h3 className="text-3xl text-blue-500 font-bold">FID</h3>
<div className="text-center">
Expand All @@ -34,7 +42,7 @@ const CardDetail = ({ data, title }): React.ReactElement => {
<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">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-xs text-gray-600 italic">(Stability)</small>
<h3 className="text-3xl text-blue-500 font-bold">CLS</h3>
<div className={`text-3xl text-gray-600 font-bold capitalize ${getCLSColorClass(data.cls)}`}>
Expand All @@ -43,30 +51,30 @@ const CardDetail = ({ data, title }): React.ReactElement => {
</div>
</div>

<div className="flex justify-center space-between my-2">
<div className="w-20 my-2 mr-4 text-center">
<div className="mt-4 grid grid-cols-3 gap-4">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-sm text-blue-500 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">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-sm text-blue-500 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">
<div className="p-2 bg-white shadow overflow-hidden rounded-lg text-center">
<small className="text-sm text-blue-500 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>
</>
);
};

Expand Down
12 changes: 6 additions & 6 deletions components/ChartTimeline.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import Chart from 'react-apexcharts';

const ChartTimeline = ({ data, title }): React.ReactElement => {
const ChartTimeline = ({ data, title, dataKey }): React.ReactElement => {
const series = [
{
name: 'Mobile',
data: data.map((item) => {
return {
x: item.date,
y: parseInt((item.m.perf * 100).toFixed(0), 10),
y: parseInt((item.m[dataKey] * 100).toFixed(0), 10),
};
}),
},
Expand All @@ -17,7 +17,7 @@ const ChartTimeline = ({ data, title }): React.ReactElement => {
data: data.map((item) => {
return {
x: item.date,
y: parseInt((item.d.perf * 100).toFixed(0), 10),
y: parseInt((item.d[dataKey] * 100).toFixed(0), 10),
};
}),
},
Expand Down Expand Up @@ -49,10 +49,10 @@ const ChartTimeline = ({ data, title }): React.ReactElement => {
};

return (
<div className="mt-4 p-4 bg-white shadow overflow-hidden rounded-lg">
<div>{title}</div>
<>
<div className="text-gray-600">{title}</div>
<Chart options={options} series={series} width="100%" />
</div>
</>
);
};

Expand Down
82 changes: 45 additions & 37 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,71 @@

:root {
--fast: #0cce6b;
--avg: #ffa400;
--slow: #ff4e42;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.lh-gauge__wrapper {
margin: '24px 0 12px 0';
position: 'relative';
display: 'flex';
align-items: 'center';
flex-direction: 'column';
text-decoration: 'none';
padding: '8px';
contain: 'content';
will-change: 'opacity';
};
margin: 24px 0 12px 0;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
text-decoration: none;
padding: 8px;
contain: content;
will-change: opacity;
}


.lh-gauge__text {
font-size: '20px';
line-height: 1;
color: '#000';
text-align: 'center';
margin-top: '10px';
};
font-size: 20px;
line-height: 1;
color: #000;
text-align: center;
margin-top: 10px;
}

.is--fast {
color: '#0cce6b';
fill: '#0cce6b';
stroke: '#0cce6b';
color: var(--fast);
fill: var(--fast);
stroke: var(--fast);
}

.is--avg {
color: '#ffa400';
fill: '#ffa400';
stroke: '#ffa400';
color: var(--avg);
fill: var(--avg);
stroke: var(--avg);
}

.is--slow {
color: '#ff4e42';
fill: '#ff4e42';
stroke: '#ff4e42';
color: var(--slow);
fill: var(--slow);
stroke: var(--slow);
}

.svg-circle {
opacity: 0.1;
stroke-width: 8;
};
opacity: 0.1;
stroke-width: 8;
}

.svg-circle__arc {
fill: 'none';
stroke-width: 8;
};
fill: none;
stroke-width: 8;
}

.stroke--slow {
stroke: '#ff4e42';
};
stroke: var(--slow);
}

.stroke--avg {
stroke: '#ffa400';
};
stroke: var(--avg);
}

.stroke--fast {
stroke: '#0cce6b';
};
stroke: var(--fast);
}
9 changes: 1 addition & 8 deletions pages/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import dynamic from 'next/dynamic';

import Layout from '../components/Layout';
import DesktopIcon from '../components/Icons/Desktop';
Expand All @@ -11,8 +10,6 @@ import reports from '../reports/output';
import dataEcommerce from '../constants/ecommerce';
import { EcommerceItem } from '../types';

const ChartTimeline = dynamic(() => import('../components/ChartTimeline'), { ssr: false });

const DetailPage = ({ data, allData, logo, lastUpdate }): React.ReactElement => {
const [showDevice, setShowDevice] = useState('desktop');

Expand Down Expand Up @@ -51,11 +48,7 @@ const DetailPage = ({ data, allData, logo, lastUpdate }): React.ReactElement =>
</div>
</div>

<CardDetail
data={showDevice === 'desktop' ? data.d : data.m}
title={showDevice === 'desktop' ? 'Desktop' : 'Mobile'}
/>
<ChartTimeline data={allData} title="Performance Score" />
<CardDetail data={showDevice === 'desktop' ? data.d : data.m} allData={allData} />
</Layout>
);
};
Expand Down

0 comments on commit 0578d6f

Please sign in to comment.