Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 1x 1x 2x 2x 3x 3x 3x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
BarChart,
Bar,
} from "recharts";
export default function CommonStatsCharts({ data, histogramData }) {
const healthData = data.filter((d) => !isNaN(Number(d.avgHealth)));
const histogramChartData = histogramData.map((userCommons) => ({
username: userCommons.username,
numOfCows: userCommons.numOfCows,
}));
return (
<div>
<h3>Cow Ownership Histogram</h3>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={histogramChartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="username" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="numOfCows" fill="#8884d8" />
</BarChart>
</ResponsiveContainer>
<h3 className="mt-4">Cows Over Time</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="id" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="numCows" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
<h3 className="mt-4">Average Health Over Time</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={healthData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="id" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="avgHealth" stroke="#82ca9d" />
</LineChart>
</ResponsiveContainer>
</div>
);
}
|