More Hover interactivity, padding on labels, colors via CSS
Pre-releaseGood evening,
Tonight's release includes enabling Interaction.Hover
for Plot.Line
and Plot.Area
, the ability to set padding on Label
s, and initializing the default Plottable
colors through CSS.
Features
Interaction.Hover for Line and Area plots
Interaction.Hover
has been enabled for Plot.Line
and Plot.Area
. The algorithm returns the closest point within a close range of the cursor. As Line
s and Area
s feature one DOM element for all the data (as opposed to one DOM element per datum, like in Plot.Scatter
), a <circle class="hover-target">
selection will be returned as part of the HoverData
; this circle will be centered on the hovered-over point.
Label Padding
You can now use Label.padding(padAmount)
to the set the padding on a Label
. Padding is the amount of pixels of blank space surrounding the text for the Label
, which can help in separating the Label
from adjacent Component
s.
Color CSS
It is now possible to initialize the default colors used in Scale.Color
through CSS. For example:
.plottable-colors-0 {
background-color: #ABCDEF;
}
will set the first Plottable color to #ABCDEF
instead of Plottable.Core.Colors.INDIGO
(the current default). The class plottable-colors-{{k}}
can be used to set the k+1
th color to the value specified in background-color
.
IMPORTANT: The colors are read from CSS at the time the Scale.Color
is instantiated, meaning that further changes to the CSS classes will not be registered unless the Scale.Color
is regenerated. We are working on better ways to apply CSS classes to Plot
elements; see the "Future Changes" section below.
Bugfixes
Ordinal Scale Reverse
Plot
s that utilize a Scale.Ordinal
for the Y-Axis now are flipped so that labels are read top-to-bottom rather than bottom-to-top. Before:
Now:
Other notes
The extra plottable-dev.d.ts
file has been removed.
Future Changes
As mentioned previously, we are looking into better ways to apply CSS to Plot
subelements. Currently, CSS classes can be set/unset on Component
s using the classed()
call, but the only way to set classes on Plot
subelements (such as individual Plot.Scatter
points) is to use the project()
method to set the class
attribute. The drawback of using project()
here is that it's difficult to attach classes additively, as the last-project()
ed class will overwrite all others. We're working on building an API point to make easier to attach classes to Plot
elements.