84 lines
4.6 KiB
React
84 lines
4.6 KiB
React
import VdapApi from '../../hooks/useVdapApi.js';
|
|
import {Flex, Spinner, Text, Box, Center} from "@chakra-ui/react"; // Adjust path as needed
|
|
|
|
|
|
export default function LlmAlChangesQuadPlot(props) {
|
|
console.log("3. Quad Plot loaded");
|
|
let tp_percent = 0;
|
|
let tn_percent = 0;
|
|
let fp_percent = 0;
|
|
let fn_percent = 0;
|
|
|
|
// Clean, single-line data fetching
|
|
const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
|
|
|
|
if (isLoading) return (
|
|
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
|
|
<Spinner size="xl" color="blue.400" thickness="4px" />
|
|
</Flex>
|
|
);
|
|
|
|
if (error) return (
|
|
<Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
|
|
<Text color="red.400">{error}</Text>
|
|
</Flex>
|
|
);
|
|
|
|
if (apiData.length === 0) return (
|
|
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
|
|
<Text color="gray.400">No alert level quad plot data available.</Text>
|
|
</Flex>
|
|
);
|
|
|
|
if (apiData) {
|
|
console.log(apiData);
|
|
tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
|
|
tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
|
|
fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
|
|
fn_percent = ((apiData[0]['fn_count']/apiData[0]['tot_count'])*100).toFixed(2);
|
|
}
|
|
|
|
return (
|
|
<Flex direction="column" w="100%" h="100%" borderRadius="lg">
|
|
<Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
|
|
{/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
|
|
<Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
|
|
</Flex>
|
|
<Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg">
|
|
<Flex direction="row" w="100%" h="100%" gap="2">
|
|
<Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
|
|
<Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
|
|
<Text>True Positive</Text>
|
|
<Text fontSize="lg"> {tp_percent}% </Text>
|
|
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text>
|
|
</Flex>
|
|
</Center>
|
|
<Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
|
|
<Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
|
|
<Text>True Negative</Text>
|
|
<Text fontSize="lg"> {tn_percent}% </Text>
|
|
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
|
|
</Flex>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction="row" w="100%" h="100%" gap="2">
|
|
<Center bg={`blue.200/${fp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
|
|
<Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
|
|
<Text>False Positive</Text>
|
|
<Text fontSize="lg"> {fp_percent}% </Text>
|
|
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text>
|
|
</Flex>
|
|
</Center>
|
|
<Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
|
|
<Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
|
|
<Text>False Negative</Text>
|
|
<Text fontSize="lg"> {fn_percent}% </Text>
|
|
<Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text>
|
|
</Flex>
|
|
</Center>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
|
|
} |