terezka / charts / Chart.Events

Add events.

Event handlers


type alias Attribute x data msg =
{ x | events : List (Event data msg) } -> { x | events : List (Event data msg) }

An attribute for adding events.


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

Decoders


type alias Decoder data msg =
Internal.Events.Decoder data msg


type alias Point =
{ 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