Compare commits

..

5 Commits

Author SHA1 Message Date
Kevin Belisle 5b7885368f Improve error handling - just display nothing 2021-09-03 11:56:02 -04:00
Kevin Belisle d224ac81d8 Fix react build warnings 2021-09-03 11:49:42 -04:00
Kevin Belisle c3286bfa7f Sort player stats by rank, then value 2021-09-03 11:47:40 -04:00
Kevin Belisle 7c637f181e Fix aggregatesShowcase error handling 2021-09-03 11:45:23 -04:00
Kevin Belisle 34e5e207d9 Make the aggregate bar charts more saturated 2021-09-03 11:44:26 -04:00
6 changed files with 86 additions and 118 deletions

View File

@ -2,59 +2,43 @@ import React from "react";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import axios from "axios"; import axios from "axios";
import { import { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
AspectRatio,
Box,
Flex,
Heading,
HStack,
Icon,
SimpleGrid,
Stat,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
Tooltip,
} from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom";
import { AutoSizer, WindowScroller, List } from "react-virtualized";
import prettifyStatisticName from "./PrettifyStatisticName"; import prettifyStatisticName from "./PrettifyStatisticName";
import StackedBar from "./StackedBar"; import StackedBar from "./StackedBar";
const AggregatesShowcase = () => { const AggregatesShowcase = () => {
const aggregates = useQuery( const aggregates = useQuery(`aggregates`, async () => {
`aggregates`, const { data } = await axios.get(`/api/aggregates`);
async () => { return data;
const { data } = await axios.get(`/api/aggregates`); });
return data;
},
{
placeholderData: [],
}
);
const killedAggregates = aggregates.data const killedAggregates = aggregates.isSuccess
.filter((x) => x.type === "minecraft:killed") ? aggregates.data
.sort((a, b) => b.value - a.value); .filter((x) => x.type === "minecraft:killed")
const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0); .sort((a, b) => b.value - a.value)
: [];
// const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);
const killedByAggregates = aggregates.data const killedByAggregates = aggregates.isSuccess
.filter((x) => x.type === "minecraft:killed_by") ? aggregates.data
.sort((a, b) => b.value - a.value); .filter((x) => x.type === "minecraft:killed_by")
const killedByTotal = killedByAggregates.reduce( .sort((a, b) => b.value - a.value)
(acc, val) => acc + val.value, : [];
0 // const killedByTotal = killedByAggregates.reduce(
); // (acc, val) => acc + val.value,
// 0
// );
const travelAggregates = aggregates.data const travelAggregates = aggregates.isSuccess
.filter((x) => x.type === "minecraft:custom" && x.name.endsWith("one_cm")) ? aggregates.data
.sort((a, b) => b.value - a.value); .filter(
const travelTotal = travelAggregates.reduce((acc, val) => acc + val.value, 0); (x) => x.type === "minecraft:custom" && x.name.endsWith("one_cm")
)
.sort((a, b) => b.value - a.value)
: [];
// const travelTotal = travelAggregates.reduce((acc, val) => acc + val.value, 0);
return aggregates.isFetched ? ( return aggregates.isSuccess ? (
<> <>
<StackedBar heading="Mobs Killed" aggregates={killedAggregates} /> <StackedBar heading="Mobs Killed" aggregates={killedAggregates} />
@ -73,13 +57,13 @@ const AggregatesShowcase = () => {
.map((x, i) => { .map((x, i) => {
var value = x.value; var value = x.value;
if (x.name === "minecraft:play_one_minute") { if (x.name === "minecraft:play_one_minute") {
value = x.value / 20 / 60; value = Math.floor(x.value / 20 / 60);
} }
return ( return (
<Stat key={i}> <Stat key={i}>
<StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel> <StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel>
<StatNumber>{`${x.value <StatNumber>{`${value
.toString() .toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</StatNumber> .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</StatNumber>
</Stat> </Stat>

View File

@ -41,14 +41,17 @@ const App = () => {
<Statistic <Statistic
type={routeProps.match.params.type} type={routeProps.match.params.type}
name={routeProps.match.params.name} name={routeProps.match.params.name}
players={players} players={players.data}
/> />
)} )}
/> />
<Route <Route
path="/player/:id" path="/player/:id"
render={(routeProps) => ( render={(routeProps) => (
<Player playerId={routeProps.match.params.id} players={players} /> <Player
playerId={routeProps.match.params.id}
players={players.data}
/>
)} )}
/> />
<Route> <Route>

View File

@ -16,19 +16,13 @@ import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName"; import prettifyStatisticName from "./PrettifyStatisticName";
const Player = ({ playerId, players }) => { const Player = ({ playerId, players }) => {
const playerStats = useQuery( const playerStats = useQuery(`player ${playerId}`, async () => {
`player ${playerId}`, const { data } = await axios.get(`/api/players/${playerId}`);
async () => { data.sort((a, b) => a.rank - b.rank || b.value - a.value);
const { data } = await axios.get(`/api/players/${playerId}`); return data.filter((x) => x.value > 0);
data.sort((a, b) => a.rank - b.rank); });
return data.filter((x) => x.value > 0);
},
{
placeholderData: [],
}
);
const playerName = players.data.find((x) => x.id === playerId)?.name; const playerName = players?.find((x) => x.id === playerId)?.name;
return ( return (
<> <>
@ -60,19 +54,23 @@ const Player = ({ playerId, players }) => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{playerStats.data.map((x, i) => { {playerStats.isSuccess ? (
return ( playerStats.data.map((x, i) => {
<Tr key={i}> return (
<Td> <Tr key={i}>
<Link to={`/statistic/${x.type}/${x.name}`}> <Td>
{prettifyStatisticName(x.type, x.name)} <Link to={`/statistic/${x.type}/${x.name}`}>
</Link> {prettifyStatisticName(x.type, x.name)}
</Td> </Link>
<Td isNumeric>{x.rank}</Td> </Td>
<Td isNumeric>{x.value}</Td> <Td isNumeric>{x.rank}</Td>
</Tr> <Td isNumeric>{x.value}</Td>
); </Tr>
})} );
})
) : (
<></>
)}
</Tbody> </Tbody>
</Table> </Table>
</> </>

View File

@ -1,21 +1,6 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import useHover from "./useHover"; import useHover from "./useHover";
import { import { Box, Heading, HStack, Tooltip } from "@chakra-ui/react";
AspectRatio,
Box,
Button,
Heading,
HStack,
Icon,
Input,
Stat,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
Tooltip,
} from "@chakra-ui/react";
import prettifyStatisticName from "./PrettifyStatisticName"; import prettifyStatisticName from "./PrettifyStatisticName";
const randomColor = () => const randomColor = () =>
@ -41,7 +26,7 @@ const StackedBarSegment = ({ aggregate, total }) => {
<Box <Box
width={aggregate.value / total} width={aggregate.value / total}
height="100%" height="100%"
filter={isHovered ? "clear" : "saturate(0.15)"} filter={isHovered ? "clear" : "saturate(0.5)"}
backgroundColor={color} backgroundColor={color}
ref={hoverRef} ref={hoverRef}
></Box> ></Box>

View File

@ -15,19 +15,13 @@ import { Link } from "react-router-dom";
import prettifyStatisticName from "./PrettifyStatisticName"; import prettifyStatisticName from "./PrettifyStatisticName";
const Statistic = ({ type, name, players }) => { const Statistic = ({ type, name, players }) => {
const ranking = useQuery( const ranking = useQuery(`statistic ${type} ${name}`, async () => {
`statistic ${type} ${name}`, const { data } = await axios.get(`/api/statistics/${type}/${name}`);
async () => { return data.filter((x) => x.value > 0);
const { data } = await axios.get(`/api/statistics/${type}/${name}`); });
return data.filter((x) => x.value > 0);
},
{
placeholderData: [],
}
);
const playerDict = useMemo(() => { const playerDict = useMemo(() => {
return Object.assign({}, ...players.data.map((x) => ({ [x.id]: x.name }))); return Object.assign({}, ...players.map((x) => ({ [x.id]: x.name })));
}, [players]); }, [players]);
return ( return (
@ -52,19 +46,23 @@ const Statistic = ({ type, name, players }) => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{ranking.data.map((x, i) => { {ranking.isSuccess ? (
return ( ranking.data.map((x, i) => {
<Tr key={i}> return (
<Td> <Tr key={i}>
<Link to={`/player/${x.playerId}`}> <Td>
{playerDict[x.playerId]} <Link to={`/player/${x.playerId}`}>
</Link> {playerDict[x.playerId]}
</Td> </Link>
<Td isNumeric>{x.rank}</Td> </Td>
<Td isNumeric>{x.value}</Td> <Td isNumeric>{x.rank}</Td>
</Tr> <Td isNumeric>{x.value}</Td>
); </Tr>
})} );
})
) : (
<></>
)}
</Tbody> </Tbody>
</Table> </Table>
</> </>

View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
function useHover() { function useHover() {
const [value, setValue] = useState(false); const [value, setValue] = useState(false);
@ -16,8 +16,8 @@ function useHover() {
node.removeEventListener("mouseout", handleMouseOut); node.removeEventListener("mouseout", handleMouseOut);
}; };
} }
}, } //,
[ref.current] // Recall only if ref changes //[ref.current] // Recall only if ref changes
); );
return [ref, value]; return [ref, value];
} }