feat(nui): WIP pie chart

overextended · Jan 26, 2022 · b944271 · b944271
1 parent 79a4e4c
commit b944271
Show file tree

Hide file tree

Showing 3 changed files with 453 additions and 10 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -19,7 +19,8 @@
     "react-router-dom": "6",
     "react-scripts": "5.0.0",
     "react-table": "^7.7.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "victory": "^36.2.0"
   },
   "scripts": {
     "start": "cross-env PUBLIC_URL=/ craco start",

diff --git a/ui/src/components/NavBars/RightBar.tsx b/ui/src/components/NavBars/RightBar.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Box, VStack, Center } from '@chakra-ui/react';
+import { Box, VStack, Center, Spacer, Flex } from '@chakra-ui/react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
+import { VictoryPie, VictoryTooltip } from 'victory';
 import type { InitData } from '../../types';
 
 const RightBar: React.FC = () => {
@@ -13,12 +14,37 @@ const RightBar: React.FC = () => {
   });
 
   return (
-    <Box float="right" w="20%" h="max" p="1.2vh">
-      <Center>
-        <VStack align="left">
-          <Box>Total number of queries: {initData.totalQueries}</Box>
-          <Box>Total amount of time querying: {Math.trunc(initData.totalTime)} ms</Box>
-        </VStack>
+    <Box float="right" w="20%" h="100%" p="1.2vh">
+      <Center h="100%">
+        <Flex direction="column" h="100%">
+          <Box>
+            <VStack align="left">
+              <Box>Number of queries: {initData.totalQueries}</Box>
+              <Box>Time querying: {Math.trunc(initData.totalTime)} ms</Box>
+            </VStack>
+          </Box>
+          <Spacer />
+          <Box>
+            <VictoryPie
+              colorScale="qualitative"
+              data={[
+                { x: 'ox_inventory', y: 63 },
+                { x: 'es_extended', y: 129 },
+                { x: 'luke_garages', y: 73 },
+              ]}
+              labelComponent={<VictoryTooltip flyoutPadding={18} style={{ fontSize: 24 }} cornerRadius={15} />}
+              style={{
+                labels: {
+                  fill: 'black',
+                  fontFamily: 'Poppins',
+                  fontSize: 28,
+                },
+              }}
+              labels={({ datum }) => `${datum.x}: ${datum.y}ms`}
+              labelPlacement="parallel"
+            />
+          </Box>
+        </Flex>
       </Center>
     </Box>
   );