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 axios from "axios";
import {
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 { SimpleGrid, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
import prettifyStatisticName from "./PrettifyStatisticName";
import StackedBar from "./StackedBar";
const AggregatesShowcase = () => {
const aggregates = useQuery(
`aggregates`,
async () => {
const { data } = await axios.get(`/api/aggregates`);
return data;
},
{
placeholderData: [],
}
);
const aggregates = useQuery(`aggregates`, async () => {
const { data } = await axios.get(`/api/aggregates`);
return data;
});
const killedAggregates = aggregates.data
.filter((x) => x.type === "minecraft:killed")
.sort((a, b) => b.value - a.value);
const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);
const killedAggregates = aggregates.isSuccess
? aggregates.data
.filter((x) => x.type === "minecraft:killed")
.sort((a, b) => b.value - a.value)
: [];
// const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);
const killedByAggregates = aggregates.data
.filter((x) => x.type === "minecraft:killed_by")
.sort((a, b) => b.value - a.value);
const killedByTotal = killedByAggregates.reduce(
(acc, val) => acc + val.value,
0
);
const killedByAggregates = aggregates.isSuccess
? aggregates.data
.filter((x) => x.type === "minecraft:killed_by")
.sort((a, b) => b.value - a.value)
: [];
// const killedByTotal = killedByAggregates.reduce(
// (acc, val) => acc + val.value,
// 0
// );
const travelAggregates = aggregates.data
.filter((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);
const travelAggregates = aggregates.isSuccess
? aggregates.data
.filter(
(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} />
@ -73,13 +57,13 @@ const AggregatesShowcase = () => {
.map((x, i) => {
var value = x.value;
if (x.name === "minecraft:play_one_minute") {
value = x.value / 20 / 60;
value = Math.floor(x.value / 20 / 60);
}
return (
<Stat key={i}>
<StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel>
<StatNumber>{`${x.value
<StatNumber>{`${value
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</StatNumber>
</Stat>

View File

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

View File

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

View File

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

View File

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

View File

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