78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
|
|
import { AreaChart, Area, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts';
|
|
import colors from 'styles/colors';
|
|
import { Card } from 'components/Form/Card';
|
|
import Row from 'components/Form/Row';
|
|
|
|
const cardStyles = `
|
|
span.val {
|
|
&.up { color: ${colors.success}; }
|
|
&.down { color: ${colors.danger}; }
|
|
}
|
|
.rank-average {
|
|
text-align: center;
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.chart-container {
|
|
margin-top: 1rem;
|
|
}
|
|
`;
|
|
|
|
const makeRankStats = (data: {date: string, rank: number }[]) => {
|
|
const average = Math.round(data.reduce((acc, cur) => acc + cur.rank, 0) / data.length);
|
|
const today = data[0].rank;
|
|
const yesterday = data[1].rank;
|
|
const percentageChange = ((today - yesterday) / yesterday) * 100;
|
|
return {
|
|
average,
|
|
percentageChange
|
|
};
|
|
};
|
|
|
|
const makeChartData = (data: {date: string, rank: number }[]) => {
|
|
return data.map((d) => {
|
|
return {
|
|
date: d.date,
|
|
uv: d.rank
|
|
};
|
|
});
|
|
};
|
|
|
|
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);
|
|
const chartData = makeChartData(data);
|
|
return (
|
|
<Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
|
|
<div className="rank-average">{data[0].rank.toLocaleString()}</div>
|
|
<Row lbl="Change since Yesterday" val={`${percentageChange > 0 ? '+':''} ${percentageChange.toFixed(2)}%`} />
|
|
<Row lbl="Historical Average Rank" val={average.toLocaleString()} />
|
|
<div className="chart-container">
|
|
{Chart(chartData, data)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default RankCard;
|
|
|
|
|