import { useState } from 'react'; import { Card, CardTitle, CardBody, CardHeader, Title, Accordion, AccordionItem, AccordionToggle, AccordionContent, Divider, Grid, GridItem, Flex, FlexItem } from '@patternfly/react-core'; import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; export const CardWithAccordion: React.FunctionComponent = () => { const [openCPU, setOpenCPU] = useState('cpu1'); return ( Hardware Monitor { if (openCPU === 'cpu1') { setOpenCPU(null); } else { setOpenCPU('cpu1'); } }} > CPU 1 Temperature 64C 100C 50C 0C `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz 3.6Ghz 1.5Ghz 0GHZ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > { if (openCPU === 'cpu2') { setOpenCPU(null); } else { setOpenCPU('cpu2'); } }} > CPU 2 Temperature 64C 100C 50C 0C `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz 3.6Ghz 1.5Ghz 0GHZ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > { if (openCPU === 'cpu3') { setOpenCPU(null); } else { setOpenCPU('cpu3'); } }} > CPU 3 Temperature 64C 100C 50C 0C `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 100 }} padding={0} width={400} > Speed 2.3Ghz 3.6Ghz 1.5Ghz 0GHZ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> } height={60} maxDomain={{ y: 3.6 }} padding={0} width={400} > ); };