Positions List

import { PositionsList } from '@hanzo/ui'

Default

Every open position, with its P&L trend and totals.

AAPL
+17.00%
Shares100
Avg Price$150.00
Current Price$175.50
Total Value$17550.00
P&L+$2550.00
MSFT
-1.14%
Shares25
Avg Price$420.00
Current Price$415.20
Total Value$10380.00
P&L$-120.00
TSLA
+36.28%
Shares10
Avg Price$180.00
Current Price$245.30
Total Value$2453.00
P&L+$653.00
export function Default() {
return <PositionsList positions={positions} />
}

Clickable

A handler on the list logs the row a viewer selects.

AAPL
+17.00%
Shares100
Avg Price$150.00
Current Price$175.50
Total Value$17550.00
P&L+$2550.00
MSFT
-1.14%
Shares25
Avg Price$420.00
Current Price$415.20
Total Value$10380.00
P&L$-120.00
TSLA
+36.28%
Shares10
Avg Price$180.00
Current Price$245.30
Total Value$2453.00
P&L+$653.00
export function Clickable() {
return (
<PositionsList positions={positions} onPositionClick={(position) => console.log("clicked", position.symbol)} />
)
}

Empty

No positions yields a centered No open positions message.

No open positions
export function Empty() {
return <PositionsList positions={[]} />
}

Types

export interface Position {
symbol: string
shares: number
avgPrice: number
currentPrice: number
}
export interface PositionsListProps {
positions: Position[]
onPositionClick?: (position: Position) => void
}

Exports

PositionsListtype Positiontype PositionsListProps