import { useState } from 'react';
import {
Card,
CardHeader,
CardTitle,
CardBody,
CardExpandableContent,
Checkbox,
Title,
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 CardNested: React.FunctionComponent = () => {
const [isCardExpanded1, onCardExpand1] = useState(true);
const [isCardExpanded2, onCardExpand2] = useState(false);
const [isCardExpanded3, onCardExpand3] = useState(false);
const [isToggleOnRight, onCheckClick] = useState(false);
return (
<>
onCheckClick(!isToggleOnRight)}
/>
{' '}
Hardware Monitor{' '}
onCardExpand1(!isCardExpanded1)}
isToggleRightAligned={isToggleOnRight}
toggleButtonProps={{
id: 'toggle-button-1',
'aria-label': 'Details',
'aria-labelledby': 'nested-cards-toggle-group-1-title toggle-button-1',
'aria-expanded': isCardExpanded1
}}
>
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}
>
onCardExpand3(!isCardExpanded3)}
isToggleRightAligned={isToggleOnRight}
toggleButtonProps={{
id: 'toggle-button-2',
'aria-label': 'Details',
'aria-labelledby': 'nested-cards-toggle-group-2-title toggle-button-2',
'aria-expanded': isCardExpanded3
}}
>
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}
>
onCardExpand2(!isCardExpanded2)}
isToggleRightAligned={isToggleOnRight}
toggleButtonProps={{
id: 'toggle-button-3',
'aria-label': 'Details',
'aria-labelledby': 'nested-cards-toggle-group-3-title toggle-button-3',
'aria-expanded': isCardExpanded2
}}
>
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}
>
);
};