feat(nui): Fetch chart data from resources

src/logger/index.ts

@@ -31,18 +31,35 @@ RegisterCommand(
 
     let totalQueries: number = 0;
     let totalTime = 0;
+    let chartData: [
+      {
+        x: number; // Number of queries
+        y: number; // Execution time
+        z: string; // Resource name
+      }
+    ] = [
+      {
+        x: 0,
+        y: 0,
+        z: '',
+      },
+    ];
 
     for (const resource in logStorage) {
       const queries = logStorage[resource];
+      let totalResourceTime = 0;
 
       totalQueries += queries.length;
       totalTime += queries.reduce((totalTime, query) => (totalTime += query.executionTime), 0);
+      totalResourceTime += queries.reduce((totalResourceTime, query) => (totalResourceTime += query.executionTime), 0);
+      chartData.push({ x: queries.length, y: totalResourceTime, z: resource });
     }
 
     emitNet(`oxmysql:openUi`, source, {
       resources: Object.keys(logStorage),
       totalQueries,
       totalTime,
+      chartData,
     });
   },
   true

ui/src/components/App.tsx

@@ -15,6 +15,11 @@ debugData([
       resources: ['ox_inventory', 'luke_garages', 'es_extended'],
       totalQueries: 732,
       totalTime: 258,
+      chartData: [
+        { x: 13, y: 350, z: 'ox_inventory' },
+        { x: 27, y: 752, z: 'es_extended' },
+        { x: 41, y: 52, z: 'luke_garages' },
+      ],
     },
   },
 ]);

ui/src/components/NavBars/LeftBar.tsx

@@ -5,7 +5,12 @@ import { useNuiEvent } from '../../hooks/useNuiEvent';
 import type { InitData } from '../../types';
 
 const LeftBar: React.FC = () => {
-  const [initData, setInitData] = useState<InitData>({ resources: [''], totalQueries: 0, totalTime: 0 });
+  const [initData, setInitData] = useState<InitData>({
+    resources: [''],
+    totalQueries: 0,
+    totalTime: 0,
+    chartData: [{ x: 0, y: 0, z: '' }],
+  });
 
   useNuiEvent<InitData>('openUI', (data) => {
     setInitData(data);

ui/src/components/NavBars/RightBar.tsx

@@ -1,11 +1,16 @@
 import { useState } from 'react';
-import { Box, VStack, Center, Spacer, Flex } from '@chakra-ui/react';
+import { Box, VStack, Center, Spacer, Flex, Text } from '@chakra-ui/react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { VictoryPie, VictoryTooltip } from 'victory';
 import type { InitData } from '../../types';
 
 const RightBar: React.FC = () => {
-  const [initData, setInitData] = useState<InitData>({ totalQueries: 0, totalTime: 0, resources: [''] });
+  const [initData, setInitData] = useState<InitData>({
+    totalQueries: 0,
+    totalTime: 0,
+    resources: [''],
+    chartData: [{ x: 0, y: 0, z: '' }],
+  });
 
   // Debug data defined in LeftBar.tsx
 
@@ -27,11 +32,7 @@ const RightBar: React.FC = () => {
           <Box>
             <VictoryPie
               colorScale="qualitative"
-              data={[
-                { x: 'ox_inventory', y: 63 },
-                { x: 'es_extended', y: 129 },
-                { x: 'luke_garages', y: 73 },
-              ]}
+              data={initData.chartData}
               labelComponent={<VictoryTooltip flyoutPadding={18} style={{ fontSize: 24 }} cornerRadius={15} />}
               style={{
                 labels: {
@@ -40,7 +41,7 @@ const RightBar: React.FC = () => {
                   fontSize: 28,
                 },
               }}
-              labels={({ datum }) => `${datum.x}: ${datum.y}ms`}
+              labels={({ datum }) => `${datum.z}: ${datum.x} (${Math.trunc(datum.y)}ms)`}
               labelPlacement="parallel"
             />
           </Box>

ui/src/types/index.ts

@@ -1,5 +1,12 @@
+interface ChartData {
+  x: number;
+  y: number;
+  z: string;
+}
+
 export type InitData = {
-    resources: string[];
-    totalQueries: number;
-    totalTime: number;
-}
+  resources: string[];
+  totalQueries: number;
+  totalTime: number;
+  chartData: ChartData[];
+};