[v1.6.0] Interpolation, a New Formatter, and Key Interactions

This week's release includes many new features: a Short Scale Formatter for large values, the ability to set opacity on individual legend icons, an API for key release events, and several modes of interpolation for line and area plots.

In addition to these features there are multiple bugfixes for iPad, and clicks and drags now register correctly on desktop Safari. Labels are much improved, as they will now throw errors if given non-string input, and Pie Plot labels are accurate even when given bad data. Gridlines can be rendered without being attached to another component. Finally, deferredRendering() and autorangeMode() now work well together.

Features

Short Scale Formatter

Formatters.shortScale() was added to format large values using short scale suffixes.

The available suffixes include

• K - thousands
• M - millions
• B - billions
• T - trillions
• Q - quadrillions

Values greater than or equal to 10^18 will be displayed in scientific notation.

Try it out: http://jsfiddle.net/dzyee6oo/

API for Key Release Event Handler

Interaction.Key now has an endpoint for listening for key release events:

• onKeyRelease(keyCode, callback) registers callback to be called when the key associated with keyCode is released.
• offKeyRelease(keyCode, callback) removes callback from the key associated with keycode when it is longer needed.

The callbacks will only be called if the key was pressed with the cursor inside the Component that the Interaction.Key is attached to.

Try it out: http://jsfiddle.net/ztsai/5c6djgco/4/

Symbol Opacity on Legends

Users can now set the opacity of the symbols on a Legend to be either a constant value or the result of a function.

/**
 * Gets the opacity of the symbols of the Legend.
 */
symbolOpacity(): (datum: any, index: number) => number;
/**
 * Sets the opacity of the symbols of the Legend.
 */
symbolOpacity(symbolOpacity: number | ((datum: any, index: number) => number)): Legend;

Thanks to @yqlu for this feature!

Try it out: http://jsfiddle.net/bp1ozonh/

entitiesIn() on Plots.Scatter

Users can now query for Entities within a certain range or bounds on Plots.Scatter:

/**
 * Gets the Entities that intersect the Bounds.
 */
entitiesIn(bounds: Bounds): PlotEntity[];
/**
 * Gets the Entities that intersect the area defined by the ranges.
 */
entitiesIn(xRange: Range, yRange: Range): PlotEntity[];

Try it out: http://jsfiddle.net/bluong63/o3s4wst5/

Line Interpolation

The interpolation mode for Plots.Line and Plots.Area can be set via the new interpolator() endpoint.

/**
 * Gets the interpolation function associated with the plot.
 *
 * @return {string | (points: Array<[number, number]>) => string)}
 */
interpolator(): string | ((points: Array<[number, number]>) => string);
/**
 * Sets the interpolation function associated with the plot.
 *
 * @param {string | points: Array<[number, number]>) => string} interpolator Interpolation function
 * @return Plots.Line
 */
interpolator(interpolator: string | ((points: Array<[number, number]>) => string)): Plots.Line<X>;
interpolator(interpolator: "linear"): Line<X>;
interpolator(interpolator: "linear-closed"): Line<X>;
interpolator(interpolator: "step"): Line<X>;
interpolator(interpolator: "step-before"): Line<X>;
interpolator(interpolator: "step-after"): Line<X>;
interpolator(interpolator: "basis"): Line<X>;
interpolator(interpolator: "basis-open"): Line<X>;
interpolator(interpolator: "basis-closed"): Line<X>;
interpolator(interpolator: "bundle"): Line<X>;
interpolator(interpolator: "cardinal"): Line<X>;
interpolator(interpolator: "cardinal-open"): Line<X>;
interpolator(interpolator: "cardinal-closed"): Line<X>;
interpolator(interpolator: "monotone"): Line<X>;

Try it out: http://jsfiddle.net/qnaL2x7v/

Bugfixes

• deferredRendering() now works correctly when autorangeMode() is set (#2538).
• Labels are no longer drawn for invalid slice values on Plots.Pie (#2556).
• Label now throws an error if passed a non-string value for the text (#2574).
• Gridlines now render correctly if drawn on their own (#2532).
• Clicks/drags now register correctly on desktop Safari (#2454).

On iPad:

• Interactions.Click and Interactions.Drag no longer trigger through an overlay (#2452)
• Interactions.PanZoom no longer affects multiple Components (#2510).