Add events.
Internal.Helpers.Attribute { x | events : List (Event data msg) }
An attribute for adding events.
Internal.Events.Event data msg
onMouseMove : (a -> msg) -> Decoder data a -> Attribute x data msg
Add a mouse move event handler.
C.chart
[ CE.onMouseMove (CE.getNearest CI.bars) ]
[ .. ]
See example at elm-charts.org.
onMouseLeave : msg -> Attribute x data msg
Add a mouse leave event handler. See example at elm-charts.org.
onMouseUp : (a -> msg) -> Decoder data a -> Attribute x data msg
Add a mouse up event handler. See example at elm-charts.org.
onMouseDown : (a -> msg) -> Decoder data a -> Attribute x data msg
Add a mouse down event handler. See example at elm-charts.org.
onClick : (a -> msg) -> Decoder data a -> Attribute x data msg
Add a click event handler.
C.chart
[ CE.onClick Clicked C.getCoords ]
[ .. ]
onDoubleClick : (a -> msg) -> Decoder data a -> Attribute x data msg
Add a double click event handler.
on : String -> Decoder data msg -> Attribute x data msg
Add any event handler.
C.chart
[ CE.on "mousemove" <|
CE.map2 OnMouseMove
(CE.getNearest CI.bars)
(CE.getNearest CI.dots)
]
[ .. ]
See example at elm-charts.org.
Internal.Events.Decoder data msg
{ x : Basics.Float, y : Basics.Float }
getNearest : Chart.Item.Remodel (Chart.Item.One data Chart.Item.Any) (Chart.Item.Item result) -> Decoder data (List (Chart.Item.Item result))
Decode to get the nearest item to the event. Use the Remodel
functions in Chart.Item
to filter down what items or groups of items you will be searching for.
import Chart as C
import Chart.Attributes as CA
import Chart.Events as CE
import Chart.Item as CI
type alias Model =
{ hovering : List (CI.One Datum CI.Bar) }
init : Model
init =
{ hovering = [] }
type Msg
= OnHover (List (CI.One Datum CI.Bar))
update : Msg -> Model -> Model
update msg model =
case msg of
OnHover hovering ->
{ model | hovering = hovering }
view : Model -> H.Html Msg
view model =
C.chart
[ CA.height 300
, CA.width 300
, CE.onMouseMove OnHover (CE.getNearest CI.bars)
, CE.onMouseLeave (OnHover [])
]
[ C.xLabels []
, C.yLabels []
, C.bars []
[ C.bar .z []
, C.bar .y []
]
data
, C.each model.hovering <| \p bar ->
[ C.tooltip bar [] [] [] ]
]
See example at elm-charts.org.
getNearestX : Chart.Item.Remodel (Chart.Item.One data Chart.Item.Any) (Chart.Item.Item result) -> Decoder data (List (Chart.Item.Item result))
Like getNearest
, but only takes x coordiante into account. Use the Remodel
functions in Chart.Item
to filter down what items or groups of items you will be searching for.
getWithin : Basics.Float -> Chart.Item.Remodel (Chart.Item.One data Chart.Item.Any) (Chart.Item.Item result) -> Decoder data (List (Chart.Item.Item result))
Decode to get the nearest item within certain radius to the event. Use the Remodel
functions in Chart.Item
to filter down what items or groups of items you will be searching for.
getWithinX : Basics.Float -> Chart.Item.Remodel (Chart.Item.One data Chart.Item.Any) (Chart.Item.Item result) -> Decoder data (List (Chart.Item.Item result))
Like getWithin
, but only takes x coordiante into account. Use the Remodel
functions in Chart.Item
to filter down what items or groups of items you will be searching for.
getCoords : Decoder data Point
Decode to get the cartesian coordinates of the event.
getSvgCoords : Decoder data Point
Decode to get the SVG coordinates of the event.
getOffset : Decoder data Point
Decode to get the event offset from center in cartesian coordinates.
map : (a -> msg) -> Decoder data a -> Decoder data msg
map2 : (a -> b -> msg) -> Decoder data a -> Decoder data b -> Decoder data msg
map3 : (a -> b -> c -> msg) -> Decoder data a -> Decoder data b -> Decoder data c -> Decoder data msg
map4 : (a -> b -> c -> d -> msg) -> Decoder data a -> Decoder data b -> Decoder data c -> Decoder data d -> Decoder data msg