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.
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
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.
withinChartArea : Chart.Coordinate.System -> Svg.Attribute msg
An attribute which when added, truncates the rendered element if it extends outside the chart area.
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.
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 : 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 = []
}
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
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.
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