Scribd
Upload
6 views3 pages

Pstee

The document contains two React components, Stats and Rewards, which fetch and display player statistics and user rewards respectively. The Stats component visualizes players' points per game using a bar chart and games won using a pie chart, while the Rewards component displays user points and a gauge chart indicating progress towards the next reward. Both components handle data fetching from a local API and manage state using React hooks.

Uploaded by

rghlsri2345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

Pstee

The document contains two React components, Stats and Rewards, which fetch and display player statistics and user rewards respectively. The Stats component visualizes players' points per game using a bar chart and games won using a pie chart, while the Rewards component displays user points and a gauge chart indicating progress towards the next reward. Both components handle data fetching from a local API and manage state using React hooks.

Uploaded by

rghlsri2345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState, useEffect} from 'react';

import { BarChart, Bar, XAxis, YAxis, Tooltip, PieChart, Pie, Cell } from
'recharts';

function Stats() {
const [playerPPG, setPlayerPPG] = useState([]);
const [gamesWonData, setGamesWonData] = useState([]);

const COLORS = ['#FF0000', '#0000FF', '#00FF00', '#F0F0F0'];

useEffect(() => {

fetch('http://localhost:8000/api/stats')
.then((res) => res.json())
.then((data) => {

setPlayerPPG(data.playerPPG);
setGamesWonData(data.gamesWon);
})
.catch((error) => console.error('Error fetching stats:', error));
}, []);

return (
<div className="statsboard">
<h2>Rutgers Players PPG</h2>
<BarChart width={500} height={300} data={playerPPG}>
<XAxis dataKey="player" />
<YAxis />
<Tooltip />
<Bar dataKey="ppg" fill="#8884d8" />
</BarChart>

<h2>Games Won This Season</h2>


<PieChart width={400} height={300}>
<Pie
data={gamesWonData}
dataKey="value"
nameKey="name"
cx="50%"
cy="50%"
outerRadius={80}
fill="#8884d8"
label
>
{gamesWonData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index %
COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</div>
);
}

export default StatsDashboard;

import React, { useState, useEffect } from 'react';


import Gauge from 'react-gauge-chart';

function Rewards() {
const [points, setPoints] = useState(0);
const [nextRewardThreshold, setNextRewardThreshold] = useState(100);

useEffect(() => {
// Example fetch for user points
fetch('http://localhost:8000/api/user-points')
.then((res) => res.json())
.then((data) => {
setPoints(data.points);
setNextRewardThreshold(data.nextRewardThreshold);
})
.catch((error) => console.error('Error fetching points:', error));
}, []);
const rewPercent = points / nextRewardThreshold;

return (
<div className="rewardsodo">
<h2>Rewards</h2>
<div className="rewardsm">
<GaugeChart
id="rewardsm"
nrOfLevels={20}
percent={rewPercent}
textColor="#000000"
colors={['#FF5F6D', '#FFC371']}
/>
</div>
<p>{nextRewardThreshold - points} points until your next reward!</p>

<div className="rewards-list">
<p>Possible Rewards:</p>
<ul>
<li>Priority Seating</li>
<li>Keychain</li>
<li>Rutgers Sticker</li>
</ul>
</div>
</div>
);
}

export default Rewards;

You might also like