[v1.5.0] Movable Drag Boxes, entitiesAt() for Rectangles, and Data-backed SelectionBoxLayers

Features

Movable Drag Boxes

The box on DragBoxLayer can now be moved without resizing by clicking and dragging on the inside of the box. The functionality is accessed via the movable() API point on DragBoxLayer:

/**
 * Gets whether or not the drag box is movable.
 */
movable(): boolean;
/**
 * Sets whether or not the drag box is movable.
 *
 * @param {boolean} movable
 * @return {DragBoxLayer} The calling DragBoxLayer.
 */
movable(movable: boolean): DragBoxLayer;

A DragBoxLayer can be both movable() and resizable().

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

entitiesAt() on Plots.Rectangle

Mirroring the API endpoint on Plots.Bar, entitiesAt() has been added to Plots.Rectangle to extract all of the Entities at a given point.

The API is as below

/**
 * Gets the PlotEntities at a particular Point.
 *
 * @param {Point} point The point to query.
 * @returns {PlotEntity[]} The PlotEntities at the particular point
 */
entitiesAt(point: Point): PlotEntity[];

Try it out: http://jsfiddle.net/bluong63/9k6cxhmy/

Data-backed SelectionBoxLayers

The edges of the box in a SelectionBoxLayer can now be backed by a scale. This means that boxes can react to changes on the scale, re-rendering to place the box in correct location. In order to achieve this, you will need to input the scales to the SelectionBoxLayer.

You can set the scales or get them using the API below:

/**
 * Gets the x scale for this SelectionBoxLayer.
 */
xScale(): QuantitativeScale<number | { valueOf(): number; }>;
/**
 * Sets the x scale for this SelectionBoxLayer.
 *
 * @returns {SelectionBoxLayer} The calling SelectionBoxLayer.
 */
xScale(xScale: QuantitativeScale<number | { valueOf(): number; }>): SelectionBoxLayer;
/**
 * Gets the y scale for this SelectionBoxLayer.
 */
yScale(): QuantitativeScale<number | { valueOf(): number; }>;
/**
 * Sets the y scale for this SelectionBoxLayer.
 *
 * @returns {SelectionBoxLayer} The calling SelectionBoxLayer.
*/
yScale(yScale: QuantitativeScale<number | { valueOf(): number; }>): SelectionBoxLayer;

Also, it has been brought to attention that users will want to extract the data values that are backing the edges of the box (under the assumption that those edges are backed by a scale). Thus, endpoints have been created to derive the values of the edges in data space.

The API is as below:

/**
 * Gets the data values backing the left and right edges of the box.
 *
 * Returns an undefined array if the edges are not backed by a scale.
 */
xExtent(): (number | { valueOf(): number; })[];
/**
 * Gets the data values backing the top and bottom edges of the box.
 *
 * Returns an undefined array if the edges are not backed by a scale.
 */
yExtent(): (number | { valueOf(): number; })[];

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

Performance improvements

30% speedup: Axes.Numeric rendering with approximated text size

An API point has been added to approximate text measurement on Axes.Numeric. When enabled with usesTextWidthApproximation(true), this feature causes Axes.Numeric to render slightly faster by assuming all number characters are the same width. This feature is particularly useful in cases where you need to load many charts on one page.

usesTextWidthApproximation() defaults to false.

Thanks to @PeterFaiman for this feature!

Try it out: http://jsfiddle.net/330wrfx1/

Bugfixes

• Labels that were previously cut off are now hidden on Plots.Bar and Plots.Pie (#1728).
• Tick generation logic has been improved on Scales.ModifiedLog so that the "Linear" portion of the Scale is less sparse.
  • Try it out: http://jsfiddle.net/ztsai/1zfz0tg2/3
• Plots.Pie's entitiesAt() method now returns the correct value for narrow slices (#2491).