andrea.morten/web-check-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates docs, loader list, react lint and remove commented code

Browse Source
This commit is contained in:
Alicia Sykes
2023-08-14 22:43:51 +01:00
parent fac47e27c6
commit 8ce46fbf89
5 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Results/Rank.tsx
View File

@@ -39,6 +39,23 @@ const makeChartData = (data: {date: string, rank: number }[]) => {
});
};
function Chart(chartData: { date: string; uv: number; }[], data: any) {
return <ResponsiveContainer width="100%" height={100}>
<AreaChart width={400} height={100} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="20%" stopColor="#0f1620" stopOpacity={0.8} />
<stop offset="80%" stopColor="#0f1620" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50, 100, 150, 200, 250, 300, 350]} horizontalPoints={[25, 50, 75]} />
<Tooltip contentStyle={{ background: colors.background, color: colors.textColor, borderRadius: 4 }}
labelFormatter={(value) => ['Date : ', data[value].date]} />
<Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
</AreaChart>
</ResponsiveContainer>;
}
const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
const data = props.data.ranks || [];
const { average, percentageChange } = makeRankStats(data);
@@ -49,42 +66,12 @@ const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.
<Row lbl="Change since Yesterday" val={`${percentageChange > 0 ? '+':''} ${percentageChange.toFixed(2)}%`} />
<Row lbl="Historical Average Rank" val={average.toLocaleString()} />
<div className="chart-container">
<ResponsiveContainer width="100%" height={100}>
<AreaChart width={400} height={100} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="20%" stopColor="#0f1620" stopOpacity={0.8}/>
<stop offset="80%" stopColor="#0f1620" stopOpacity={0}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50,100,150,200,250,300,350]} horizontalPoints={[25,50,75]} />
<Tooltip contentStyle={{background: colors.background, color: colors.textColor, borderRadius: 4 }}
labelFormatter={(value) => ['Date : ', data[value].date]}/>
<Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
</AreaChart>
</ResponsiveContainer>
{Chart(chartData, data)}
</div>
{/* { domain.Domain_Name && <Row lbl="Registered Domain" val={domain.Domain_Name} /> }
{ domain.Creation_Date && <Row lbl="Creation Date" val={domain.Creation_Date} /> }
{ domain.Updated_Date && <Row lbl="Updated Date" val={domain.Updated_Date} /> }
{ domain.Registry_Expiry_Date && <Row lbl="Registry Expiry Date" val={domain.Registry_Expiry_Date} /> }
{ domain.Registry_Domain_ID && <Row lbl="Registry Domain ID" val={domain.Registry_Domain_ID} /> }
{ domain.Registrar_WHOIS_Server && <Row lbl="Registrar WHOIS Server" val={domain.Registrar_WHOIS_Server} /> }
{ domain.Registrar && <Row lbl="" val="">
<span className="lbl">Registrar</span>
<span className="val"><a href={domain.Registrar_URL || '#'}>{domain.Registrar}</a></span>
</Row> }
{ domain.Registrar_IANA_ID && <Row lbl="Registrar IANA ID" val={domain.Registrar_IANA_ID} /> } */}
{/* <Row lbl="" val="">
<span className="lbl">Is Up?</span>
{ serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
</Row>
<Row lbl="Status Code" val={serverStatus.responseCode} />
{ serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> } */}
</Card>
);
}
export default RankCard;