58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import stl from './ErrorBars.module.css';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
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 { t } = useTranslation();
|
|
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">{t(state)}</div>
|
|
</div>
|
|
);
|
|
}
|