Internal.Events.Config data msg
Use in the LineChart.Config
passed to LineChart.viewCustom
.
chartConfig : LineChart.Config Data msg
chartConfig =
{ ...
, events = Events.default
, ...
}
default : Config data msg
Adds no events.
hoverOne : (Maybe data -> msg) -> Config data msg
Sends a message when the mouse is within a 30 pixel radius of a dot.
Sends a Nothing
when the mouse is not hovering a dot.
Pass a message taking the data of the data point hovered.
eventsConfig : Events.Config Data Msg
eventsConfig =
Events.hoverOne Hover
See the full example here.
hoverMany : (List data -> msg) -> Config data msg
Sends a message when the mouse is within a 30 pixel distance of a
x-coordinate with one or several dots on. Sends a []
when the mouse
is not hovering an dots.
Pass a message taking the data of the data points hovered.
eventsConfig : Events.Config Data Msg
eventsConfig =
Events.hoverMany OnHoverMany
See the full example here.
click : (Maybe data -> msg) -> Config data msg
Sends a given message when clicking on a dot.
Pass a message taking the data of the data points clicked.
eventsConfig : Events.Config Data Msg
eventsConfig =
Events.click Click
See the full example here.
custom : List (Event data msg) -> Config data msg
Add your own combination of events. The cool thing here is that you can pick
another Events.Decoder
or use Events.on
for events without shortcuts.
eventsConfig : Events.Config Data Msg
eventsConfig =
Events.custom
[ Events.onMouseMove Hover Events.getNearest
, Events.onMouseLeave (Hover Nothing)
]
See the full example here.
This example sends the Hover
message with the data of the nearest dot when
hovering the chart area and Hover Nothing
when your leave the chart area.
Internal.Events.Event data msg
onClick : (a -> msg) -> Decoder data a -> Event data msg
onMouseMove : (a -> msg) -> Decoder data a -> Event data msg
onMouseUp : (a -> msg) -> Decoder data a -> Event data msg
onMouseDown : (a -> msg) -> Decoder data a -> Event data msg
onMouseLeave : msg -> Event data msg
on : String -> (a -> msg) -> Decoder data a -> Event data msg
Add any event to your chart.
Arguments:
Events.Decoder
to determine what data you want from the event.onWithOptions : String -> Options -> (a -> msg) -> Decoder data a -> Event data msg
Same as on
, but you can add some options too!
1. The JavaScript event name.
2. The `Options`.
2. The message.
3. The `Events.Decoder` to determine what data you want from the event.
{ stopPropagation : Basics.Bool
, preventDefault : Basics.Bool
, catchOutsideChart : Basics.Bool
}
Internal.Events.Decoder data msg
Gets you information about where your event happened on your chart. This example gets you the data of the nearest dot to where you are hovering.
events : Config Data Msg
events =
Events.custom
[ Events.onMouseMove Hover Events.getNearest ]
getSvg : Decoder data LineChart.Coordinate.Point
Get the SVG-space coordinates of the event.
getData : Decoder data LineChart.Coordinate.Point
Get the data-space coordinates of the event.
getNearest : Decoder data (Maybe data)
Get the data coordinates nearest to the event.
Returns Nothing
if you have no data showing.
getNearestX : Decoder data (List data)
Get the data coordinates horizontally nearest to the event.
getWithin : Basics.Float -> Decoder data (Maybe data)
Get the data coordinates nearest of the event within the radius
you provide in the first argument. Returns Nothing
if you have no data showing.
getWithinX : Basics.Float -> Decoder data (List data)
Finds the data coordinates horizontally nearest to the event, within the distance you provide in the first argument.
type Msg
= Hover ( Maybe Data, Coordinate.Point )
events : Events.Config Data Msg
events =
Events.custom
[ Events.onMouseMove Hover decoder ]
decoder : Events.Decoder
decoder =
Events.map2 (,) Events.getNearest Events.getSvg
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