terezka/charts/13.0.0

NOTE: the latest version is 20.0.1

Chart.Events

Add events and interact with chart "items".

Event handlers

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

Add an mouse move event handler.

onMouseLeave : msg -> Attribute { x | events : List (Event data msg) }

Add an mouse leave event handler.

(a -> msg)
-> Decoder data a
-> Attribute { x | events : List (Event data msg) }

Add an mouse up event handler.

(a -> msg)
-> Decoder data a
-> Attribute { x | events : List (Event data msg) }

Add an mouse down event handler.

(a -> msg)
-> Decoder data a
-> Attribute { x | events : List (Event data msg) }

Add an click event handler.

C.chart
  [ CE.onClick Clicked C.getCoords ]
  [ .. ]
on :
String
-> Decoder data msg
-> Attribute { x | events : List (Event data msg) }

Add any event handler.

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


  ]
  [ .. ]
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.

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 Product config value data =
Product config value data

A product is an item produced by a bar or dot series.

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
type alias Grouping a b =
Grouping a b

The representation of a method of grouping.

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.getNearest (CE.keep CE.realValues CE.bar)
-- get nearest bar which is not a representation of missing data

Filter products

type alias Any =
Any
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
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
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 "real" value
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.

Grouping

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

Collect groups from a set of products.

CE.getNearest (CE.collect CE.bins CE.bar)
-- collect all bars into bins and get the nearest one.

Group bins

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

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)

Group same x value

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

Group helpers

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

Apply a grouping method to a list of items.

regroup : Grouping (Product a v data) b -> Group i a v data -> List b

Given a group, apply a new grouping method to the products of the group.

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)

Information about item's position

getTop : Plane -> Item a -> Point
getTopLeft : Plane -> Item a -> Point
getTopRight : Plane -> Item a -> Point
getBottom : Plane -> Item a -> Point
getBottomLeft : Plane -> Item a -> Point
getBottomRight : Plane -> Item a -> Point
getLeft : Plane -> Item a -> Point
getRight : Plane -> Item a -> Point
getCenter : Plane -> Item a -> Point
getPosition : Plane -> Item a -> Position
getLimits : Item a -> Position

Information about group

getProducts : Group inter config value data -> List (Product Any 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.