Internal.Events.Config element data msg
Use in the Chart.Config
passed to Chart.viewCustom
.
chartConfig : Chart.Config element data msg
chartConfig =
{ ...
, events = Events.default
, ...
}
default : Config element data msg
Adds no events.
hoverDot : (Maybe (Found element data) -> msg) -> Config element data msg
hoverDots : (List (Found element data) -> msg) -> Config element data msg
hoverBlock : (Maybe (Found Internal.Element.Block data) -> msg) -> Config Internal.Element.Block data msg
hoverBlocks : (List (Found Internal.Element.Block data) -> msg) -> Config Internal.Element.Block data msg
click : (Maybe (Found element data) -> msg) -> Config element 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 element data msg
eventsConfig =
Events.click Click
See the full example here.
custom : List (Event element data msg) -> Config element 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 element 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 element area and Hover Nothing
when your leave the element area.
Internal.Events.Event element data msg
onClick : (a -> msg) -> Decoder element data a -> Event element data msg
onMouseMove : (a -> msg) -> Decoder element data a -> Event element data msg
onMouseUp : (a -> msg) -> Decoder element data a -> Event element data msg
onMouseDown : (a -> msg) -> Decoder element data a -> Event element data msg
onMouseLeave : msg -> Event element data msg
on : String -> (a -> msg) -> Decoder element data a -> Event element data msg
Add any event to your element.
Arguments:
Events.Decoder
to determine what data you want from the event.onWithOptions : String -> Options -> (a -> msg) -> Decoder element data a -> Event element 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 element data msg
Gets you information about where your event happened on your element. This example gets you the data of the nearest dot to where you are hovering.
events : Config element data msg
events =
Events.custom
[ Events.onMouseMove Hover Events.getNearest ]
getSvg : Decoder element data Chart.Coordinate.Point
Get the SVG-space coordinates of the event.
getData : Decoder element data Chart.Coordinate.Point
Get the data-space coordinates of the event.
getNearest : Decoder element data (Maybe (Found element data))
Get the data coordinates nearest to the event.
Returns Nothing
if you have no data showing.
getNearestX : Decoder element data (List (Found element data))
Get the data coordinates horizontally nearest to the event.
getWithin : Basics.Float -> Decoder element data (Maybe (Found element 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 element data (List (Found element data))
Finds the data coordinates horizontally nearest to the event, within the distance you provide in the first argument.
Internal.Events.Found element data
data : Found element data -> data
label : Found element data -> String
color : Found element data -> Color
isExactly : Maybe (Found element data) -> Basics.Int -> data -> Basics.Bool
isSeries : Maybe (Found element data) -> Basics.Int -> data -> Basics.Bool
isDatum : Maybe (Found element data) -> Basics.Int -> data -> Basics.Bool
type Msg =
Hover ( Maybe Data, Coordinate.Point )
events : Events.Config Element.Dot Data Msg
events =
Events.custom
[ Events.onMouseMove Hover decoder ]
decoder : Events.Decoder Element.Dot Data Msg
decoder =
Events.map2 (,) Events.getNearest Events.getSvg
map : (a -> msg) -> Decoder element data a -> Decoder element data msg
map2 : (a -> b -> msg) -> Decoder element data a -> Decoder element data b -> Decoder element data msg
map3 : (a -> b -> c -> msg) -> Decoder element data a -> Decoder element data b -> Decoder element data c -> Decoder element data msg