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 data msg
Use in the LineChart.Config
passed to LineChart.viewCustom
.
chartConfig : LineChart.Config Data msg
chartConfig =
{ ...
, junk = Junk.default
, ...
}
default : Config data msg
For the junk-free chart.
hoverOne : Maybe data -> List ( String, data -> String ) -> Config data msg
Draws the default tooltip.
customJunk : Maybe Data -> Junk.Junk msg
customJunk hovered =
Junk.hoverOne model.hovered
[ ( "Age", toString << .age )
, ( "Weight", toString << .weight )
]
See the full example here.
hoverMany : List data -> (data -> String) -> (data -> String) -> Config data msg
Draws the default tooltip for multiple hovered points.
customJunk : List Data -> Junk.Junk msg
customJunk hovered =
Junk.hoverMany model.hovered formatX formatY
formatX : Data -> String
formatX =
.date >> Date.fromTime >> Date.Format.format "%e. %b, %Y"
formatY : Data -> String
formatY data =
toString data.weight ++ "kg"
See the full example here.
custom : (LineChart.Coordinate.System -> Layers msg) -> Config data msg
Draw whatever junk you'd like. You're given the Coordinate.System
to help
you place your junk on the intended spot in the chart, because it allows you
to translate from data-space into SVG-space and vice versa.
To learn more about the Coordinate.System
and how to use it, see the
Coordinate
module.
junk : Maybe Coordinate.Point -> Coordinate.System -> Junk.Layers msg
junk hovered system =
{ below =
case hovered of
Just hovered ->
[ sectionBand hovered system ]
Nothing ->
[]
, above = []
, html = []
}
sectionBand : Coordinate.Point -> Coordinate.System -> Svg.Svg msg
sectionBand hovered system =
Junk.rectangle system
[ Svg.Attributes.fill "#b6b6b61a" ]
(hovered.x - 5)
(hovered.x + 5)
system.y.min
system.y.max
See the full example here.
{ below : List (Svg msg)
, above : List (Svg msg)
, html : List (Html msg)
}
The layers where you can put your junk.
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 : LineChart.Coordinate.System -> Svg.Attribute msg
An attribute which when added, truncates the rendered element if it extends outside the chart area.
vertical : LineChart.Coordinate.System -> List (Svg.Attribute msg) -> Basics.Float -> 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 : LineChart.Coordinate.System -> List (Svg.Attribute msg) -> Basics.Float -> 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 : LineChart.Coordinate.System -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> 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 : LineChart.Coordinate.System -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> 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 : LineChart.Coordinate.System -> List (Svg.Attribute msg) -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> 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 : LineChart.Coordinate.System -> Basics.Float -> Color -> Basics.Float -> Basics.Float -> 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 : LineChart.Coordinate.System -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> String -> Color -> String -> Svg msg
A label, but you get to place it too.
Arguments:
text-anchor
css value.customJunk : Junk.Config Data 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 : LineChart.Coordinate.System -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> List (Svg msg) -> Svg msg
Place a list of elements on a given spot.
Arguments:
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 : LineChart.Coordinate.System -> Basics.Float -> Basics.Float -> 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.
hover : LineChart.Coordinate.System -> Basics.Float -> List ( String, String ) -> List (Html msg) -> Html msg
Make the markup for a hover placed in the middle of the y-axis and at a given x-coordinate.
Pass the hint x-coordinate, your styles and your internal view.
customJunk : Maybe Data -> Junk.Config Data msg
customJunk hovered =
Junk.custom <|
\system ->
{ below = []
, above = []
, html =
[ Junk.hover system
hovered.x
[ ( "border-color", "red" ) ]
[ Html.text (toString hovered.y) ]
]
}
hoverAt : LineChart.Coordinate.System -> Basics.Float -> Basics.Float -> List ( String, String ) -> List (Html msg) -> Html msg
Make the markup for a hover placed at a given x- and y-coordinate.
Pass the hint x- and y-coordinate, your styles and your internal view.
customJunk : Maybe Data -> Junk.Config Data msg
customJunk hovered =
Junk.custom <|
\system ->
{ below = []
, above = []
, html =
[ Junk.hoverAt system
hovered.x
system.y.max
[ ( "border-color", "red" ) ]
[ Html.text (toString hovered.y) ]
]
}