terezka / elm-charts-alpha / Chart.Junk

Junk is a way to draw whatever you like in the chart. The name comes from Edward Tufte's concept of "chart junk". If you want to add tooltips, sections for emphasis, or kittens on your chart, this is where it's at.

Legends


type alias Config element msg =
Internal.Junk.Config element msg

Use in the Chart.Config passed to Chart.viewCustom.

chartConfig : Chart.Config nature Data msg
chartConfig =
  { ...
  , junk = Junk.default
  , ...
  }

default : Config element msg

For the junk-free chart.

none : Config element msg

above : List (Chart.Coordinate.System -> Svg msg) -> Config element msg -> Config element msg

below : List (Chart.Coordinate.System -> Svg msg) -> Config element msg -> Config element msg

html : List (Chart.Coordinate.System -> Html msg) -> Config element msg -> Config element msg

hoverBlock : Maybe (Chart.Events.Found Chart.Element.Block data) -> Config Chart.Element.Block msg

hoverBlocks : List (Chart.Events.Found Chart.Element.Block data) -> Config Chart.Element.Block msg

hoverDot : Maybe (Chart.Events.Found Chart.Element.LineDot data) -> Config Chart.Element.LineDot msg

hoverDots : List (Chart.Events.Found Chart.Element.LineDot data) -> Config Chart.Element.LineDot msg

Helpers

On chart area

A good thing to know before reading this section is what I mean by "chart area". It is basically the rectangle which covers your entire x and y axis-range. Below is an illustration.

What is an axis-range? See the Axis.Range module.

Legends

withinChartArea : Chart.Coordinate.System -> Svg.Attribute msg

An attribute which when added, truncates the rendered element if it extends outside the chart area.

Lines

vertical : List (Svg.Attribute msg) -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a vertical line, which is the full length of the y-range.

Pass the x-coordinate.

Note: The line is truncated off if outside the chart area.

horizontal : List (Svg.Attribute msg) -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a horizontal line which is the full length of the x-range.

Pass the y-coordinate.

Note: The line is truncated off if outside the chart area.

verticalCustom : List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a vertical line.

Pass the x-, y1- and y2-coordinates, respectively.

Note: The line is truncated off if outside the chart area.

horizontalCustom : List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a horizontal line.

Pass the y-, x1- and x2-coordinates, respectively.

Note: The line is truncated off if outside the chart area.

Shapes

rectangle : List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a rectangle. This can be used for grid bands and highlighting a range e.g. for selection.

xSelectionArea : Coordinate.System -> Float -> Float -> Svg msg
xSelectionArea system startX endX =
    Junk.rectangle system
      [ Attributes.fill "rgba(255,0,0,0.1)" ]
      startX endX system.y.min system.y.max

Note: The rectangle is truncated off if outside the chart area.

circle : Basics.Float -> Color -> Basics.Float -> Basics.Float -> Chart.Coordinate.System -> Svg msg

Draws a circle. Pass the system, radius, color and x- and y-coordinates respectively.

Label

label : Color -> String -> Svg msg

Given a color, it draws the text in the second argument.

labelAt : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> String -> Color -> String -> Chart.Coordinate.System -> Svg msg

A label, but you get to place it too.

Arguments: 1. The coordinate system. 2. The x-coordinate in data-space. 3. The y-coordinate in data-space. 4. The x-offset in SVG-space. 5. The y-offset in SVG-space. 6. The text-anchor css value. 7. The color of the text. 8. The text.

customJunk : Junk.Config element msg
customJunk =
  Junk.custom <| \system ->
    { below = []
    , above =
        [ Junk.labelAt system 2  1.5 0 -10 "middle" Colors.black "← axis range →"
        , Junk.labelAt system 2 -1.5 0  18 "middle" Colors.black "← data range →"
        -- Try changing the numbers!
        ]
    , html = []
    }

Placing

placed : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> List (Svg msg) -> Chart.Coordinate.System -> Svg msg

Place a list of elements on a given spot.

Arguments: 1. The coordinate system. 2. The x-coordinate in data-space. 3. The y-coordinate in data-space. 4. The x-offset in SVG-space. 5. The y-offset in SVG-space. 6. The list of elements


type alias Transfrom =
Internal.Svg.Transfrom

transform : List Transfrom -> Svg.Attribute msg

Produces a SVG transform attributes. Useful to move elements around.

movedStuff : Coordinate.System -> Svg.Svg msg
movedStuff system =
  Svg.g
    [ Junk.transform
        [ Junk.move system someDataPoint.age someDataPoint.weight
        , Junk.offset 20 10
        -- Try changing the offset!
        ]
    ]
    [ Junk.label Colors.blue "stuff" ]

See the full example here.

move : Basics.Float -> Basics.Float -> Chart.Coordinate.System -> Transfrom

Moves in data-space.

offset : Basics.Float -> Basics.Float -> Transfrom

Moves in SVG-space.

Hover views

This is just regular html views! Nothing fancy - you can also make your own! Notice that you can override all the styles.

hoverCustom : { position : { x : Maybe Basics.Float, y : Maybe Basics.Float }, offset : { x : Basics.Float, y : Basics.Float }, styles : List ( String, String ), content : List (Html msg) } -> Chart.Coordinate.System -> Html msg