2f7b266e6b
* MP-1674: replaced the logo and added dekstop only nav
* MP-1677: borrowCapacity implemented into the SubAccount Nav
* MP-1677: adjusted the SubAccount navigation
* M1677: fixed the button and SearchInput component
* MP-1674: fixed the NavLink component
* MP-1674: fixed the SubAccount navigation
* tidy: cleaning up the trading view
* MP-1674: added withdraw and funding functions
* MP-1674: worked on the AccountStats
* MP-1671: modal work
* MP-1647: improvised CreditAccount expander
* tidy: fixed the page structure
* MP-1758: finished the SearchInput layout
* MP-1759: updated the semicircle graphs
* MP-1759: SemiCircle to Gauge
* fix: implemented animated numbers
* tidy: refactor
* MP-1759: added Tooltip to the Gauge
* fix: replace animate={true} with animate
* fix: fixed the Gauge timing
* fix: updated the BorrowCapacity styles
* fix: renamed SubAccount to Account
* fix: Text should not be a button, Button should be
* tidy: format
* fix: Text no clicky
* fix: replaced all the Text appearances with onClick
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
import classNames from 'classnames'
|
|
import { ReactNode } from 'react'
|
|
|
|
import Tooltip from './Tooltip'
|
|
|
|
type Props = {
|
|
tooltip: string | ReactNode
|
|
strokeWidth?: number
|
|
background?: string
|
|
diameter?: number
|
|
value: number
|
|
label?: string
|
|
}
|
|
|
|
const Gauge = ({ background = '#15161A', diameter = 40, value = 0, label, tooltip }: Props) => {
|
|
const percentage = value * 100
|
|
const percentageValue = percentage > 100 ? 100 : percentage < 0 ? 0 : percentage
|
|
const semiCirclePercentage = Math.abs(percentageValue / 2 - 50)
|
|
|
|
return (
|
|
<Tooltip content={tooltip}>
|
|
<div
|
|
className={classNames(
|
|
'relative overflow-hidden',
|
|
`w-${diameter / 4} h-${diameter / 8 + 1}`,
|
|
)}
|
|
>
|
|
<svg
|
|
viewBox='2 -2 28 36'
|
|
width={diameter}
|
|
height={diameter}
|
|
style={{ transform: 'rotate(180deg)' }}
|
|
className='absolute top-0 left-0'
|
|
>
|
|
<linearGradient id='gradient'>
|
|
<stop stopColor='#C13338' offset='0%'></stop>
|
|
<stop stopColor='#4F3D9F' offset='50%'></stop>
|
|
<stop stopColor='#15BFA9' offset='100%'></stop>
|
|
</linearGradient>
|
|
<circle
|
|
fill='none'
|
|
stroke={background}
|
|
strokeWidth={4}
|
|
strokeDasharray='50 100'
|
|
strokeLinecap='round'
|
|
r='16'
|
|
cx='16'
|
|
cy='16'
|
|
shapeRendering='geometricPrecision'
|
|
/>
|
|
<circle
|
|
r='16'
|
|
cx='16'
|
|
cy='16'
|
|
fill='none'
|
|
strokeLinecap='round'
|
|
stroke='url(#gradient)'
|
|
strokeDasharray='50 100'
|
|
strokeWidth={5}
|
|
style={{
|
|
strokeDashoffset: semiCirclePercentage,
|
|
transition: 'stroke-dashoffset 1s ease',
|
|
}}
|
|
shapeRendering='geometricPrecision'
|
|
/>
|
|
</svg>
|
|
{label && (
|
|
<span
|
|
className='text-xs'
|
|
style={{
|
|
width: '100%',
|
|
left: '0',
|
|
textAlign: 'center',
|
|
bottom: '-2px',
|
|
position: 'absolute',
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
export default Gauge
|