Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
btwlouis committed Dec 29, 2024
1 parent 366cf13 commit 01ae487
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 64 deletions.
25 changes: 15 additions & 10 deletions frontend/src/components/server/ServerChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Line } from "react-chartjs-2";
import zoomPlugin from "chartjs-plugin-zoom";
import "chartjs-adapter-date-fns"; // Import date adapter
import { format } from "date-fns";
import { toZonedTime } from "date-fns-tz"; // Use toZonedTime instead of utcToZonedTime
import Loading from "../utils/Loading";

ChartJS.register(...registerables, zoomPlugin);
Expand All @@ -16,7 +15,7 @@ const ServerChart = () => {
const [chartData, setChartData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [period, setPeriod] = useState("30d");
const [period, setPeriod] = useState("24h");

useEffect(() => {
const fetchData = async () => {
Expand Down Expand Up @@ -50,7 +49,7 @@ const ServerChart = () => {
const labels = chartData.map((obj) => {
const date = new Date(obj.timestamp);

const currentDate = format(date, "dd.MM.yyyy");
const currentDate = format(date, "dd.MM.yy");

const label =
currentDate !== previousDate ? `${currentDate}` : format(date, "HH:mm");
Expand All @@ -66,10 +65,10 @@ const ServerChart = () => {
labels,
datasets: [
{
label: "Clients",
label: "Players",
data,
borderColor: "rgba(75, 192, 192, 1)",
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(29, 78, 216, 1)",
backgroundColor: "rgba(29, 78, 216, 0.2)",
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 0,
Expand All @@ -85,7 +84,7 @@ const ServerChart = () => {
maintainAspectRatio: false,
plugins: {
legend: {
position: "top",
display: false,
},
zoom: {
pan: {
Expand All @@ -105,6 +104,9 @@ const ServerChart = () => {
},
scales: {
x: {
grid: {
display: false,
},
type: "category", // Time scale for the x-axis
time: {
unit: "hour", // Adjust based on your data
Expand All @@ -115,6 +117,9 @@ const ServerChart = () => {
},
},
y: {
grid: {
display: false,
},
beginAtZero: true,
title: {
display: true,
Expand All @@ -129,13 +134,13 @@ const ServerChart = () => {
};

return (
<div className="p-4 w-full">
<div className="p-4 w-full ">
<div className="flex justify-start gap-4 mb-4">
{["24h", "7d", "14d", "30d"].map((p) => (
<button
key={p}
className={`px-4 py-2 rounded ${
period === p ? "bg-blue-500 text-white" : "bg-gray-200"
className={`px-4 py-2 rounded text-white ${
period === p ? "bg-blue-700 " : "bg-slate-500"
}`}
onClick={() => handlePeriodChange(p)}>
{p}
Expand Down
134 changes: 80 additions & 54 deletions frontend/src/components/server/Show.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import axios from "axios";
import { getServerIconURL, removeColors } from "../../helpers";
import { FaArrowLeft } from "react-icons/fa";
import ServerChart from "./ServerChart";
import Loading from "../utils/Loading";

const Server = () => {
// get id from path: "/server/:id", browser router
Expand All @@ -28,8 +29,10 @@ const Server = () => {
newData.tags = JSON.parse(newData.tags);
newData.hostname = removeColors(newData.hostname);
newData.projectName = removeColors(newData.projectName);
newData.resources = JSON.parse(newData.resources);
newData.players = JSON.parse(newData.players);

setData(response.data);
setData(newData);
setLoading(false);
} catch (error) {
setError(error.message);
Expand All @@ -41,62 +44,85 @@ const Server = () => {
}, []);

return (
<div className="flex justify-center items-center min-h-screen">
<div className="container mx-auto">
<button
onClick={() => window.history.back()}
className="bg-slate-900 text-white p-4 rounded my-2 ">
<FaArrowLeft />
</button>
<img
className="rounded mb-1 w-full h-24 object-cover"
src={data.bannerDetail}
alt="Server Banner"
/>
<div className="flex bg-slate-900 rounded">
<div className="flex items-start">
<img
className="m-3 rounded h-24 w-24"
src={getServerIconURL(data.joinId, data.iconVersion)}
loading="lazy"
alt="Server Icon"
/>
</div>
<div className="h-screen">
{loading ? (
<Loading />
) : error ? (
<div className="text-red-500">{error}</div>
) : (
<>
<div className="flex justify-center items-center min-h-screen">
<div className="container mx-auto">
<button
onClick={() => window.history.back()}
className="bg-slate-900 text-white p-4 rounded my-2 ">
<FaArrowLeft />
</button>
<img
className="rounded mb-1 w-full h-24 object-cover"
src={data.bannerDetail}
alt="Server Banner"
/>
<div className="flex bg-slate-900 rounded">
<div className="flex items-start">
<img
className="m-3 rounded h-24 w-24"
src={getServerIconURL(data.joinId, data.iconVersion)}
loading="lazy"
alt="Server Icon"
/>
</div>

<div className="flex items-start mt-3 text-white flex-col ">
<div className="flex flex-col">
<p className="text-2xl font-bold">{data.projectName}</p>
<p className="text-sm opacity-70">{data.projectDescription}</p>
</div>
<div className="flex flex-wrap gap-2 max-w-[70%] my-3">
{Array.isArray(data.tags) ? (
data.tags.map((tag, index) => (
<span
key={index}
className="bg-slate-500 text-white text-sm py-1 px-3 ">
{tag}
</span>
))
) : (
<span></span>
)}
</div>
</div>
</div>
<div className="flex items-start mt-3 text-white flex-col ">
<div className="flex flex-col">
<p className="text-2xl font-bold">{data.projectName}</p>
<p className="text-sm opacity-70">
{data.projectDescription}
</p>
</div>
<div className="flex flex-wrap gap-2 max-w-[70%] my-3">
{Array.isArray(data.tags) ? (
data.tags.map((tag, index) => (
<span
key={index}
className="bg-slate-500 text-white text-sm py-1 px-3 ">
{tag}
</span>
))
) : (
<span></span>
)}
</div>
</div>
</div>

<div className="grid grid-cols-2 gap-4 mt-3 text-white">
<div className="bg-slate-900 p-4 rounded">
<p className="text-lg">Resources ({data.resources?.length})</p>
</div>
<div className="bg-slate-900 p-4 rounded">
<p className="text-lg">Players ({data.players?.length})</p>
</div>
</div>
<div className="grid grid-cols-2 gap-4 mt-3 text-white">
{data.resources?.length > 0 ? (
<div className="bg-slate-900 p-4 rounded">
<p className="text-lg">
Resources ({data.resources?.length})
</p>
</div>
) : (
<div></div>
)}

{data.players?.length > 0 ? (
<div className="bg-slate-900 p-4 rounded">
<p className="text-lg">Players ({data.players?.length})</p>
</div>
) : (
<div></div>
)}
</div>

<div className="flex bg-slate-900 mt-3">
<ServerChart />
</div>
</div>
<div className="flex bg-slate-900 mt-3 rounded">
<ServerChart />
</div>
</div>
</div>
</>
)}
</div>
);
};
Expand Down

0 comments on commit 01ae487

Please sign in to comment.