intrepidshape/elm-web3-ui/4.0.0

Web3.Ui.VeBalanceChart

SVG line chart of vote-escrow balance decaying linearly from nowSec to unlockTime. Educational primitive -- shows the user how their vote weight will fade as the lock matures.

Linear-decay model (Curve / Aerodrome standard):

veBalance(t) = amount * max(0, unlockTime - t) / maxLockSec

At t = nowSec the line starts at the current ve-balance; at t = unlockTime it hits zero and stays there. The chart samples sampleCount points across that span and connects them with a polyline.

The amount cancels out of the normalised curve -- every plotted height is remaining(t) / remaining(nowSec), a ratio of two second counts -- so the geometry is computed entirely in integer space and the uint256 amount is never converted to a Float. It is only tested for zero (a zero balance draws a flat line on the axis). Coordinates are emitted in hundredths of a pixel.

Web3.Ui.VeBalanceChart.view []
    { amount = lock.amount
    , unlockTime = lock.unlockTime
    , maxLockSec = fourYears
    , nowSec = model.nowSec
    , width = 320
    , height = 80
    }

CSS classes: web3-vebalancechart, web3-vebalancechart__path, web3-vebalancechart__current, web3-vebalancechart__axis. Stroke and fill colors come from the consumer stylesheet.

view : List (Attribute msg) -> Config -> Html msg

Render the decay chart.

type alias Config =
{ amount : BigInt
, unlockTime : Int
, maxLockSec : Int
, nowSec : Int
, width : Int
, height : Int
}

The lock being charted, the instant to chart it from, and the pixel geometry of the plot.