import { makeStyles, Theme } from '@material-ui/core'; import { CHART_WIDTH, LINE_CHART_SMALL_HEIGHT } from './consts'; import HealthyIndexRow from './HealthyIndexRow'; import LineChartSmall from './LineChartSmall'; import { ENodeService, INodeTreeStructure, IThreshold } from './Types'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import { Dispatch, SetStateAction, useState } from 'react'; const getStyles = makeStyles((theme: Theme) => ({ mainView: { width: '100%', marginTop: '16px', }, healthyIndexItem: { display: 'flex', marginTop: '8px', justifyContent: 'space-between', }, healthyIndexLabel: { fontWeight: 500, fontSize: '12px', color: '#444', display: 'flex', alignItems: 'center', cursor: 'pointer', }, healthyIndexLabelText: {}, healthyIndexRow: { width: `${CHART_WIDTH}px`, }, chartItem: { margin: '8px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }, chartLabel: { width: `50px`, paddingLeft: '20px', fontSize: '12px', fontWeight: 500, color: '#444', }, chart: { height: `${LINE_CHART_SMALL_HEIGHT}px`, width: `${CHART_WIDTH}px`, }, })); const HealthyIndexTreeItem = ({ node, threshold, }: { node: INodeTreeStructure; threshold: IThreshold; }) => { const classes = getStyles(); const [open, setOpen] = useState(false); return ( <>