terezka / elm-charts-alpha / Chart.Events


type alias Config element data msg =
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.

Customization

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.

Events


type alias Event element data msg =
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:

  1. The JavaScript event name.
  2. The message.
  3. The 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.


type alias Options =
{ stopPropagation : Basics.Bool
, preventDefault : Basics.Bool
, catchOutsideChart : Basics.Bool 
}

Decoders


type alias Decoder element data msg =
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.

Found


type alias Found element data =
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

Maps

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