StatisticsView.tsx

import React from 'react';
import {
    Accordion,
    AccordionButton,
    AccordionIcon,
    AccordionItem,
    AccordionPanel,
    Box,
    VStack,
} from '@chakra-ui/react';
import { AnnotationStatistics } from './AnnotationStatistics';
import { ApiSizeStatistics } from './ApiSizeStatistics';
import { ApiSizeVsUsefulnessStatistics } from './ApiSizeVsUsefulnessStatistics';
import { ProgressStatistics } from './ProgressStatistics';
import { AchievementDisplay } from '../achievements/AchievementDisplay';
import { QualityStatistics } from './QualityStatistics';

export const StatisticsView: React.FC = function () {
    return (
        <Accordion defaultIndex={0} allowToggle>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            Progress on Matched Elements
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <VStack spacing={8}>
                        <ProgressStatistics />
                    </VStack>
                </AccordionPanel>
            </AccordionItem>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            Annotations on Matched Elements
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <AnnotationStatistics />
                </AccordionPanel>
            </AccordionItem>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            API Size
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <VStack spacing={8}>
                        <ApiSizeStatistics />
                    </VStack>
                </AccordionPanel>
            </AccordionItem>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            API Size per Minimum Usefulness Threshold
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <VStack spacing={8}>
                        <ApiSizeVsUsefulnessStatistics />
                    </VStack>
                </AccordionPanel>
            </AccordionItem>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            Quality of Autogenerated Annotations
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <VStack spacing={8}>
                        <QualityStatistics />
                    </VStack>
                </AccordionPanel>
            </AccordionItem>
            <AccordionItem>
                <h2>
                    <AccordionButton>
                        <Box flex="1" textAlign="left">
                            Achievements
                        </Box>
                        <AccordionIcon />
                    </AccordionButton>
                </h2>
                <AccordionPanel pb={4}>
                    <VStack spacing={8}>
                        <AchievementDisplay />
                    </VStack>
                </AccordionPanel>
            </AccordionItem>
        </Accordion>
    );
};