Rename v1 to web-check-live

2024-05-08 21:23:03 +01:00
parent e5738d1f5b
commit 7e27143a90
77 changed files with 240 additions and 240 deletions
--- a/src/web-check-live/components/Results/Rank.tsx
+++ b/src/web-check-live/components/Results/Rank.tsx
@@ -0,0 +1,77 @@
+
+import { AreaChart, Area, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts';
+import colors from 'web-check-live/styles/colors';
+import { Card } from 'web-check-live/components/Form/Card';
+import Row from 'web-check-live/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;
+
+