almost mvp

frontend/src/widgets/FundBar/index.tsx

@@ -1,27 +1,27 @@
 import { Stack } from '../../types'
 import './style.scss'
+import _ from 'lodash'
 
 type Props = {
-  col: number
   stack: Stack
 }
 
-export const FundBar = ({ stack, col }: Props) => {
-  const amount = 0
-
+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={`fundbar back col${col}`}
+        className={`back`}
         onClick={() => console.log(`adding transaction to => ${stack.name}`)}
       ></div>
       <div
-        className={`fundbar front col${col}`}
+        className={`front`}
         style={{
           background: `hsl(${hue}, 100%, 50%)`,
           height: `${percent * 40 + 10}vmin`,
@@ -30,11 +30,11 @@ export const FundBar = ({ stack, col }: Props) => {
         <h3>{stack.name}</h3>
       </div>
       <div
-        className={`fundbar totals col${col}`}
+        className={`totals`}
         style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }}
       >
         ${Math.floor(current)} / ${max}
       </div>
-    </>
+    </div>
   )
 }