Web3.Ui.TrendIndicator

Compact Up/Neutral/Down arrow with paired volume pills. Useful for any trend-aware contract -- trend-detector outputs, lending-rate sentiment, DAO vote pressure indicators, etc.

-- From explicit trend:
Web3.Ui.TrendIndicator.view
    { trend = Web3.Ui.TrendIndicator.Down
    , buyVolume = buyVol
    , sellVolume = sellVol
    , decimals = 18
    }


-- Or derive trend from volumes given a threshold (in basis points,
-- e.g., 5800 = 58% one side):
let
    trend =
        Web3.Ui.TrendIndicator.fromVolumes
            { buyVolume = buyVol
            , sellVolume = sellVol
            , thresholdBps = 5800
            }
in
Web3.Ui.TrendIndicator.view
    { trend = trend
    , buyVolume = buyVol
    , sellVolume = sellVol
    , decimals = 6
    }

decimals scales the two volume pills. It used to be hardcoded to 18, so a USDC-denominated volume rendered 1e12 too small.

Style classes: web3-trend, web3-trend--up, web3-trend--neutral, web3-trend--down, web3-trend__arrow, web3-trend__pill.

view :

{ trend : Trend

, buyVolume : BigInt

, sellVolume : BigInt

, decimals : Int

}

-> Html msg

Render the indicator. decimals scales both volume pills.

type Trend

= Up

| Neutral

| Down

fromVolumes :

{ buyVolume : BigInt

, sellVolume : BigInt

, thresholdBps : Int

}

-> Trend

Derive a Trend from buy/sell volumes plus a threshold in basis points. The side that exceeds the threshold determines the direction; otherwise Neutral.

Each side's share is divided in BigInt space and compared as an integer number of basis points (floored), so volumes far above 2^53 are compared exactly. Zero total volume is Neutral.

intrepidshape/elm-web3-ui/3.0.0

Web3.Ui.TrendIndicator

Modules