Skip to content

More Hover interactivity, padding on labels, colors via CSS

Pre-release
Pre-release
Compare
Choose a tag to compare
@jtlan jtlan released this 11 Nov 18:42
· 5816 commits to master since this release

Good evening,

Tonight's release includes enabling Interaction.Hover for Plot.Line and Plot.Area, the ability to set padding on Labels, 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 Lines and Areas 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 Components.

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+1th 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

Plots 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:
screen shot 2014-10-13 at 12 42 18 pm
Now:
screen shot 2014-11-10 at 7 35 43 pm

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 Components 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.