43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import stl from './ErrorBars.module.css';
|
|
|
|
const GOOD = 'Good';
|
|
const LESS_CRITICAL = 'Few Issues';
|
|
const CRITICAL = 'Many Issues';
|
|
const getErrorState = (count: number) => {
|
|
if (count === 0) { return GOOD; }
|
|
if (count < 3) { return LESS_CRITICAL; }
|
|
return CRITICAL;
|
|
};
|
|
|
|
interface Props {
|
|
count?: number
|
|
}
|
|
export default function ErrorBars(props: Props) {
|
|
const { count = 2 } = props;
|
|
const state = React.useMemo(() => getErrorState(count), [count]);
|
|
const isGood = state === GOOD;
|
|
const showFirstBar = (state === LESS_CRITICAL || state === CRITICAL);
|
|
const showSecondBar = (state === CRITICAL);
|
|
// const showThirdBar = (state === GOOD || state === CRITICAL);
|
|
// const bgColor = { 'bg-red' : state === CRITICAL, 'bg-red2' : state === LESS_CRITICAL }
|
|
const bgColor = 'bg-red2';
|
|
return isGood ? <></> : (
|
|
<div>
|
|
<div className="relative" style={{ width: '100px' }}>
|
|
<div className="grid grid-cols-3 gap-1 absolute inset-0" style={{ opacity: '1' }}>
|
|
{ showFirstBar && <div className={cn('rounded-tl rounded-bl', bgColor, stl.bar)} /> }
|
|
{ showSecondBar && <div className={cn('rounded-tl rounded-bl', bgColor, stl.bar)} /> }
|
|
{/* { showThirdBar && <div className={cn("rounded-tl rounded-bl", bgColor, stl.bar)}></div> } */}
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-1" style={{ opacity: '0.3' }}>
|
|
<div className={cn('rounded-tl rounded-bl', bgColor, stl.bar)} />
|
|
<div className={cn(bgColor, stl.bar)} />
|
|
{/* <div className={cn("rounded-tr rounded-br", bgColor, stl.bar)}></div> */}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 color-gray-medium text-sm">{state}</div>
|
|
</div>
|
|
);
|
|
}
|