99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
|
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 prettifyStatisticName from "./PrettifyStatisticName";
|
||
|
import StackedBar from "./StackedBar";
|
||
|
|
||
|
const AggregatesShowcase = () => {
|
||
|
const aggregates = useQuery(
|
||
|
`aggregates`,
|
||
|
async () => {
|
||
|
const { data } = await axios.get(`http://localhost:7000/api/aggregates`);
|
||
|
return data;
|
||
|
},
|
||
|
{
|
||
|
placeholderData: [],
|
||
|
}
|
||
|
);
|
||
|
|
||
|
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 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 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);
|
||
|
|
||
|
return aggregates.isFetched ? (
|
||
|
<>
|
||
|
<StackedBar heading="Mobs Killed" aggregates={killedAggregates} />
|
||
|
|
||
|
<StackedBar heading="Causes of Death" aggregates={killedByAggregates} />
|
||
|
|
||
|
<StackedBar heading="Preferred Travel" aggregates={travelAggregates} />
|
||
|
|
||
|
<SimpleGrid columns={2} mt={4} spacingY={4} spacingX={8}>
|
||
|
{aggregates.data
|
||
|
.filter(
|
||
|
(x) =>
|
||
|
x.type !== "minecraft:killed" &&
|
||
|
x.type !== "minecraft:killed_by" &&
|
||
|
!x.name.endsWith("one_cm")
|
||
|
)
|
||
|
.map((x, i) => {
|
||
|
var value = x.value;
|
||
|
if (x.name === "minecraft:play_one_minute") {
|
||
|
value = x.value / 20 / 60;
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<Stat key={i}>
|
||
|
<StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel>
|
||
|
<StatNumber>{`${x.value
|
||
|
.toString()
|
||
|
.replace(
|
||
|
/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g,
|
||
|
","
|
||
|
)}`}</StatNumber>
|
||
|
</Stat>
|
||
|
);
|
||
|
})}
|
||
|
</SimpleGrid>
|
||
|
</>
|
||
|
) : (
|
||
|
<></>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default AggregatesShowcase;
|