PackagesReroutesAboutlamdera.com

terezka/charts/15.0.0

NOTE: the latest version is 20.0.1

READMEAboutVersionsSourceModules

Chart.Events

Add events and interact with chart "items".

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 =
Event data msg
onMouseMove : (a -> msg) -> Decoder data a -> Attribute x data msg

Add an mouse move event handler.

C.chart
  [ CE.onMouseMove (CE.getNearest CE.bar) ]
  [ .. ]

See example at elm-charts.org.

onMouseLeave : msg -> Attribute x data msg

Add an mouse leave event handler. See example at elm-charts.org.

onMouseUp : (a -> msg) -> Decoder data a -> Attribute x data msg

Add an mouse up event handler. See example at elm-charts.org.

onMouseDown : (a -> msg) -> Decoder data a -> Attribute x data msg

Add an mouse down event handler. See example at elm-charts.org.

onClick : (a -> msg) -> Decoder data a -> Attribute x data msg

Add an click event handler.

C.chart
  [ CE.onClick Clicked C.getCoords ]
  [ .. ]
on : String -> Decoder data msg -> Attribute x data msg

Add any event handler.

C.chart
  [ CE.on "mousemove" <|
      CE.map2 OnMouseMove
        (CE.getNearest CE.bar)
        (CE.getNearest CE.dot)


  ]
  [ .. ]

See example at elm-charts.org.

Decoders

type alias Decoder data msg =
Decoder data msg
type alias Point =
{ x : Float
, y : Float
}
getCoords : Decoder data Point

Decode to get the cartesian coordinates of the event.

Grouping (Product Any (Maybe Float) data) (Item result)
-> Decoder data (List (Item result))

Decode to get the nearest item to the event.

type alias Model =
  { hovering : List (CE.Product CE.Bar (Maybe Float) Datum) }


init : Model
init =
  { hovering = [] }


type Msg
  = OnHover (List (CE.Product CE.Bar (Maybe Float) Datum))


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 CE.bar)
    , 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.

Grouping (Product Any (Maybe Float) data) (Item result)
-> Decoder data (List (Item result))

Like getNearest, but only takes x coordiante into account

Float
-> Grouping (Product Any (Maybe Float) data) (Item result)
-> Decoder data (List (Item result))

Decode to get the nearest item within certain radius to the event.

Float
-> Grouping (Product Any (Maybe Float) data) (Item result)
-> Decoder data (List (Item result))

Like getWithin, but only takes x coordiante into account

map : (a -> msg) -> Decoder data a -> Decoder data msg
map2 : (a -> b -> msg) -> Decoder data a -> Decoder data b -> Decoder data msg
(a -> b -> c -> msg)
-> Decoder data a
-> Decoder data b
-> Decoder data c
-> Decoder data msg
(a -> b -> c -> d -> msg)
-> Decoder data a
-> Decoder data b
-> Decoder data c
-> Decoder data d
-> Decoder data msg

Chart items

type alias Item a =
Item a

An item is anything on the chart which is produced from data elements, that is bar, line, and scatter charts.

It may be a single one of such items (a Product), or a group of such items (a Group).

type alias Product config value data =
Product config value data

A product is an item produced by a bar series, or a dot series (line or scatter).

CE.Product CE.Any value data -- A product of either a bar or dot series
CE.Product CE.Dot value data -- A product of a dot series
CE.Product CE.Bar value data -- A product of a bar series

You may have used C.scatterMaybe or C.barMaybe to represent missing data on your chart. The second type value represent whether this product could be a representation of a missing data point.

CE.Product CE.Any Float data
  -- A product of a bar or dot series which is always
  -- a real data point.


CE.Product CE.Any (Maybe Float) data
  -- A product of a bar or dot series which may or
  -- may not be a real data point.
type alias Group inter config value data =
Group inter config value data

A group is a collection of products which have certain characteristics in common. For example, a stacked bar is produced from the same data point and has the same x value.

Group (Stack data) Bar value data -- representation of a stack of bars
Group (Bin data) Bar value data -- representation of a bin of bars

Working with chart items

type alias Grouping a b =
Grouping a b

Say we have an event handler like so:

CE.onMouseMove (CE.getNearest CE.bar)

The function getNearest takes a Grouping as the first argument. A Grouping is essentially a method for filtering or collecting items.

For example, the grouping bar takes a list of Product Any value data and filters it, such that there are only bar products left, that is a list of Product Bar value data.

On the other hand, the grouping bin takes a list of Product config value data and bundles all the products made from the same data point together. This results in a list of Group (Bin data) config value data.

If you'd like to combine the two and collect all bins of bars, you can do it like so.

CE.collect CE.bin CE.bar

This will result in a list of Group (Bin data) Bar value data.

Check out the many examples on elm-charts.org.

Filtering

Grouping (Product b v data) (Product c x data)
-> Grouping a (Product b v data)
-> Grouping a (Product c x data)

Filter a set of products.

CE.keep CE.realValues CE.bar
-- Keeps all bars which are not a representation of missing data.

Filter products

type alias Any =
Any

The configuration of either a dot or a bar.

product : Grouping (Product Any value data) (Product Any value data)

All products.

CE.getNearest CE.product
-- gets nearest product (bar or dot)

Filter bars

type alias Bar =
Bar

The coniguration of a bar.

bar : Grouping (Product Any value data) (Product Bar value data)

All bars.

CE.getNearest CE.bar
-- gets nearest bar

Filter dots

type alias Dot =
Dot

The coniguration of a dot.

dot : Grouping (Product Any value data) (Product Dot value data)

All dots.

CE.getNearest CE.dot
-- gets nearest dot

Other qualities

Grouping
(Product config (Maybe Float) data)
(Product config Float data)

All real values. If you have used Chart.barMaybe or the like, you may have representations of missing data in your chart. This can filter those out.

CE.getNearest CE.realValues
-- gets nearest product which is not a representation of missing data.
List String
-> Grouping
(Product config value data)
(Product config value data)

All values produced from a particular set of series.

CE.getNearest (CE.named [ "cats", "dogs" ])
-- gets nearest product from the cats or dogs series.

Collecting

collect : Grouping b c -> Grouping a b -> Grouping a c

Collect groups from a set of products.

CE.collect CE.bin CE.bar
-- collect all bars into bins.

Group bins

type alias Bin data =
{ datum : data
, start : Float
, end : Float
}
bin :
Grouping
(Product config value data)
(Group (Bin data) config value data)

Collect values of the same bin into groups. Two products are in the same bin if they are produced from the same data from your List data in your bar or dot series.

CE.getNearest CE.bin
-- gets nearest bin.

Group stack

type alias Stack datum =
{ datum : datum
, start : Float
, end : Float
, index : Int
}
Grouping
(Product config value data)
(Group (Stack data) config value data)

Collect values of the same stack into groups. A stack is produced using C.stacked.

CE.getNearest CE.stack
-- gets nearest stack.

Group same x value

type alias SameX =
{ x1 : Float
, x2 : Float
}
Grouping
(Product config value data)
(Group SameX config value data)

All values with the same x values.

CE.getNearest CE.sameX
-- gets nearest set of products from any series, sharing the same x values.

Group helpers

group : Grouping a b -> List a -> List b

Low level api for applying a Grouping.

C.withProducts <| \p products ->
    let grouping : Grouping (Product Any (Maybe Float) Datum) (Group (Bin Datum) Bar Float Datum)
        grouping =
          CE.bar
            |> CE.keep CE.realValues
            |> CE.collect CE.bin


        toBinLabel : Group (Bin Datum) Bar Float Datum -> Element msg Datum
        toBinLabel bin =
          let datum = (CE.getCommonality bin).datum in
          C.label [] [ S.text datum.country ] (CE.getTop p bin)
    in
    List.map toBinLabel (CE.group grouping products).
regroup : Grouping (Product a v data) b -> Group i a v data -> List b

Low level helper to applying a new grouping to a group. Same as saying:

CE.group (CE.getProducts myGroup)

Information about item

getDependent : Product config value data -> value

Get the dependent (y) value.

getIndependent : Product config value data -> Float

Get the independent (x) value.

getDatum : Product config value data -> data

Get the datum which produced this product.

getColor : Product config value data -> String

Get the color of the product.

getName : Product config value data -> String

Get the name of the series which produced the product.

isSame : Product config value data -> Product config value data -> Bool

Is this product the exact same as this other one?

getSize : Product Dot value data -> Float

Get the size of the product (only if a dot).

getDefaultTooltip : Item a -> List (Html Never)

Render the default tooltip of an item.

Information about item's position

getTop : Plane -> Item a -> Point

Get the center top of item.

getTopLeft : Plane -> Item a -> Point

Get the top left of item.

getTopRight : Plane -> Item a -> Point

Get the top right of item.

getBottom : Plane -> Item a -> Point

Get the center bottom of item.

getBottomLeft : Plane -> Item a -> Point

Get the bottom left of item.

getBottomRight : Plane -> Item a -> Point

Get the bottom right of item.

getLeft : Plane -> Item a -> Point

Get the center left of item.

getRight : Plane -> Item a -> Point

Get the center right of item.

getCenter : Plane -> Item a -> Point

Get center of item.

getPosition : Plane -> Item a -> Position

Get full position of item.

getLimits : Item a -> Position

In a few cases, an item's "position" and "limits" aren't the same.

In the case of bins, the "position" is the area which the bins bars take up, not inclusing any margin which may be around them. Its "limits" include the margin.

Information about group

getProducts : Group inter config value data -> List (Product config value data)

Get the products of a group.

getCommonality : Group inter config value data -> inter

Get the commonality of a group.

(a -> Maybe b)
-> List (Product config value a)
-> List (Product config value b)

Keep products of certain data types.

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera