You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
965 B
40 lines
965 B
import { Stack } from '../../types' |
|
import './style.scss' |
|
import _ from 'lodash' |
|
|
|
type Props = { |
|
stack: Stack |
|
} |
|
|
|
export const FundBar = ({ stack }: Props) => { |
|
const amount = _.sumBy(stack.transactions, 'amount') |
|
console.log('amount', stack.id, amount) |
|
const max = stack.amount |
|
const current = max - amount |
|
const percent = Math.max(current / max, 0) |
|
const hue = percent * 120 |
|
|
|
return ( |
|
<div className="fundbar"> |
|
<div |
|
className={`back`} |
|
onClick={() => console.log(`adding transaction to => ${stack.name}`)} |
|
></div> |
|
<div |
|
className={`front`} |
|
style={{ |
|
background: `hsl(${hue}, 100%, 50%)`, |
|
height: `${percent * 40 + 10}vmin`, |
|
}} |
|
> |
|
<h3>{stack.name}</h3> |
|
</div> |
|
<div |
|
className={`totals`} |
|
style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }} |
|
> |
|
${Math.floor(current)} / ${max} |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|