44 lines
1.9 KiB
TypeScript
44 lines
1.9 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)}></div> }
|
|
{ showSecondBar && <div className={cn("rounded-tl rounded-bl", bgColor, stl.bar)}></div> }
|
|
{/* { 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>
|
|
<div className={cn(bgColor, stl.bar)}></div>
|
|
{/* <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>
|
|
)
|
|
}
|