Skip to content

Commit

Permalink
remove anonymous in user-leaderboards
Browse files Browse the repository at this point in the history
  • Loading branch information
@Paulsenik
Paulsenik committed Jan 7, 2025
1 parent 1ce0ef6 commit 27f77ec
Showing 1 changed file with 161 additions and 155 deletions.
316 changes: 161 additions & 155 deletions frontend/src/Components/StatisticsTab/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import { Link } from "react-router-dom";
import {Link} from "react-router-dom";
import {
UserMetricType,
UserMetricEntry,
TimeSpan,
ItemMetricType,
ItemMetricEntry,
CompositeMetricEntry,
CompositeMetricType,
convertUsersBalance,
convertUsersSpent,
CompositeMetricType,
CompositeMetricEntry,
ItemMetricEntry,
ItemMetricType,
TimeSpan,
UserMetricEntry,
UserMetricType,
} from "../../Types/Statistics";
import { useEffect, useState } from "react";
import { getAllUsers, getCompositeMetric, getItemMetric, getUserMetric } from "../../Queries";
import { ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "@radix-ui/react-scroll-area";
import { formatMoney } from "../../Format";
import {useEffect, useState} from "react";
import {getAllUsers, getCompositeMetric, getItemMetric, getUserMetric} from "../../Queries";
import {
ScrollArea,
ScrollAreaScrollbar,
ScrollAreaThumb,
ScrollAreaViewport
} from "@radix-ui/react-scroll-area";
import {formatMoney} from "../../Format";

export function CompositeLeaderboard(props: {
type: CompositeMetricType;
Expand All @@ -22,7 +27,7 @@ export function CompositeLeaderboard(props: {
desc: string;
isMoney: boolean;
}) {
const { type, timeSpan, title, desc, isMoney } = props;
const {type, timeSpan, title, desc, isMoney} = props;
const [stats, setStats] = useState<CompositeMetricEntry[]>([]);
const [options, setOptions] = useState<[string, string][]>([]);
const [selected, setSelected] = useState<[string, string]>();
Expand All @@ -45,66 +50,66 @@ export function CompositeLeaderboard(props: {

useEffect(() => {
const uniqueKeys = Array.from(
new Set(stats.map((entry) => JSON.stringify([entry.key1, entry.key1DisplayName])))
new Set(stats.map((entry) => JSON.stringify([entry.key1, entry.key1DisplayName])))
).map((key) => JSON.parse(key));
setOptions(uniqueKeys.sort((a: string, b: string) => a[0].localeCompare(b[0])));
setSelected(uniqueKeys[0]);
}, [stats]);

return (
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3>{title}</h3>
<select
onChange={(a) => select(a.target.value)}
style={{ margin: "0.5rem" }}
value={selected ? selected[0] : options[0]?.[0] || ""}
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
{options.map((option) => (
<option value={option[0]} key={option[0]}>
{option[1]}
</option>
))}
</select>
<p>{desc}</p>
</div>
<h3>{title}</h3>
<select
onChange={(a) => select(a.target.value)}
style={{margin: "0.5rem"}}
value={selected ? selected[0] : options[0]?.[0] || ""}
>
{options.map((option) => (
<option value={option[0]} key={option[0]}>
{option[1]}
</option>
))}
</select>
<p>{desc}</p>
</div>

<ScrollAreaViewport style={{ maxHeight: "20rem" }}>
<table className="Table">
<tbody>
<ScrollAreaViewport style={{maxHeight: "20rem"}}>
<table className="Table">
<tbody>
{stats
.filter((a) => {
return selected && a.key1 == selected[0];
})
.map((entry, index) => {
return (
.filter((a) => {
return selected && a.key1 == selected[0];
})
.map((entry, index) => {
return (
<LeaderboardEntry
entryDisplayName={entry.key2DisplayName}
entryId={entry.key2}
entryValue={entry.value}
position={index + 1}
isUser={true}
key={index}
isMoney={isMoney}
anonymize={entry.key2.length == 0}
entryDisplayName={entry.key2DisplayName}
entryId={entry.key2}
entryValue={entry.value}
position={index + 1}
isUser={true}
key={index}
isMoney={isMoney}
anonymize={entry.key2.length == 0}
/>
);
})}
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
</ScrollArea>
);
})}
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
</ScrollArea>
);
}

Expand All @@ -115,59 +120,59 @@ export function ItemLeaderboard(props: {
desc: string;
isMoney: boolean;
}) {
const { type, timeSpan, title, desc, isMoney } = props;
const {type, timeSpan, title, desc, isMoney} = props;
const [stats, setStats] = useState<ItemMetricEntry[]>([]);

useEffect(() => {
getItemMetric(type, timeSpan)
.then((l) => {
if (l) {
setStats(l);
}
})
.catch(() => {
setStats([]);
});
.then((l) => {
if (l) {
setStats(l);
}
})
.catch(() => {
setStats([]);
});
}, [timeSpan]);

return (
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3>{title}</h3>
<p>{desc}</p>
</div>
<ScrollAreaViewport style={{ maxHeight: "20rem" }}>
<table className="Table">
<tbody>
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3>{title}</h3>
<p>{desc}</p>
</div>
<ScrollAreaViewport style={{maxHeight: "20rem"}}>
<table className="Table">
<tbody>
{stats.map((entry, index) => {
return (
<LeaderboardEntry
entryDisplayName={entry.entity.displayName}
entryId={entry.entity.id}
entryValue={entry.value}
position={index + 1}
isUser={false}
key={index}
isMoney={isMoney}
anonymize={false}
/>
<LeaderboardEntry
entryDisplayName={entry.entity.displayName}
entryId={entry.entity.id}
entryValue={entry.value}
position={index + 1}
isUser={false}
key={index}
isMoney={isMoney}
anonymize={false}
/>
);
})}
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
</ScrollArea>
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
</ScrollArea>
);
}

Expand All @@ -178,7 +183,7 @@ export function UserLeaderboard(props: {
desc: string;
isMoney: boolean;
}) {
const { type, timeSpan, title, desc, isMoney } = props;
const {type, timeSpan, title, desc, isMoney} = props;
const [stats, setStats] = useState<UserMetricEntry[]>([]);

useEffect(() => {
Expand All @@ -204,43 +209,43 @@ export function UserLeaderboard(props: {
}, [timeSpan]);

return (
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3>{title}</h3>
<p>{desc}</p>
</div>
<ScrollAreaViewport style={{ maxHeight: "20rem" }}>
<table className="Table">
<tbody>
{stats.map((entry, index) => {
<ScrollArea className="DisplayCard">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3>{title}</h3>
<p>{desc}</p>
</div>
<ScrollAreaViewport style={{maxHeight: "20rem"}}>
<table className="Table">
<tbody>
{stats.filter((e) => (!e.entity.hidden)).map((entry, index) => {
return (
<LeaderboardEntry
entryDisplayName={entry.entity.displayName}
entryId={entry.entity.id}
entryValue={entry.value}
position={index + 1}
isUser={true}
key={index}
isMoney={isMoney}
anonymize={entry.entity.hidden}
/>
<LeaderboardEntry
entryDisplayName={entry.entity.displayName}
entryId={entry.entity.id}
entryValue={entry.value}
position={index + 1}
isUser={true}
key={index}
isMoney={isMoney}
anonymize={entry.entity.hidden}
/>
);
})}
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb" />
</ScrollAreaScrollbar>
</ScrollArea>
</tbody>
</table>
</ScrollAreaViewport>
<ScrollAreaScrollbar className="Scrollbar" orientation="vertical">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
<ScrollAreaScrollbar className="Scrollbar" orientation="horizontal">
<ScrollAreaThumb className="ScrollbarThumb"/>
</ScrollAreaScrollbar>
</ScrollArea>
);
}

Expand All @@ -253,23 +258,24 @@ export function LeaderboardEntry(props: {
isMoney: boolean;
anonymize: boolean;
}) {
const { entryDisplayName, entryId, entryValue, position, isUser, isMoney, anonymize } = props;
const {entryDisplayName, entryId, entryValue, position, isUser, isMoney, anonymize} = props;

return (
<tr className="table-entry">
<th className="left">{position}</th>
<th className="name left">
{isUser && anonymize ? (
<>Anonyme 🍍</>
) : isUser ? (
<Link to={`/stats/users/${entryId}`} className="bold">
{entryDisplayName}
</Link>
) : (
<>{entryDisplayName}</>
)}
</th>
{isMoney ? <th className="right">{formatMoney(entryValue)}</th> : <th className="right">{entryValue}</th>}
</tr>
<tr className="table-entry">
<th className="left">{position}</th>
<th className="name left">
{isUser && anonymize ? (
<>Anonyme 🍍</>
) : isUser ? (
<Link to={`/stats/users/${entryId}`} className="bold">
{entryDisplayName}
</Link>
) : (
<>{entryDisplayName}</>
)}
</th>
{isMoney ? <th className="right">{formatMoney(entryValue)}</th> :
<th className="right">{entryValue}</th>}
</tr>
);
}

0 comments on commit 27f77ec

Please sign in to comment.