Good evening,

Today's release includes an upgrade to Axis.Time, a new implementation for drag boxes, and a few other Interaction upgrades.

Features

Arbitrary number of tiers on Axis.Time

Previously, Axis.Time supported a maximum of two tiers; now it supports any number of tiers. To use this feature, pass a larger number of TierConfigurations into the axisConfigurations() method:

var twoTierAxisConfig = [
  tier1Config,
  tier2Config
];
var threeTierAxisConfig = [
  tier1Config,
  tier2Config,
  tier3Config
];
timeAxis.axisConfigurations([
  twoTierConfig,
  threeTierConfig,
  ...
]);

Try it out: https://jsfiddle.net/xs3zps5w/

Interaction.Drag

Interaction.Drag has been refactored. You can register for events with the following methods:

• onDragStart(callback): The callback will be passed the starting point of the drag gesture.
• onDrag(callback): The callback will be passed the starting point and current location of the drag gesture.
• onDragEnd(callback): The callback will be passed the starting point and ending point of the drag gesture.

In addition, setupZoomCallback() has been removed (it was broken anyway). See the section on Component.DragBoxLayer to see how to implement this functionality.

Try it out: https://jsfiddle.net/fgns88L7/2/

Component.SelectionBoxLayer

This Component draws a translucent box in the space it occupies. The bounds of the box can be set using the bounds() method:

bounds(newBounds: Bounds): SelectionBoxLayer;

A Bounds object is used to specify the location of the corners of the box:

/**
 * The corners of a box.
 */
export type Bounds = {
  topLeft: Point;
  bottomRight: Point;
}

In a Bounds object, the topLeft is always the top-left Point of the drag box, regardless of how the user is creating or resizing the box.

The box can be shown or hidden using the boxVisible() method. Note that the visible box does not necessarily occupy all of the space in the SelectionBoxLayer.
Try it out: https://jsfiddle.net/4pb2yw1y/4/

The box can be re-styled by changing the CSS rules for .plottable .selection-box-layer .selection-area.
Try it out: https://jsfiddle.net/4pb2yw1y/5/

DragBoxLayer

A DragBoxLayer is a SelectionBoxLayer with an Interaction.Drag already hooked up. You can register for events on DragBoxLayer:

• onDragStart(callback)
• onDrag(callback)
• onDragEnd(callback)

The callbacks passed to the above methods will be called with the current bounds() of the box.

Finally, the box can be made resizable by calling resize(true) on the DragBoxLayer.

Try it out: https://jsfiddle.net/5L700d8w/

An example showing how to zoom in after a drag: https://jsfiddle.net/sazokb53/

DragBoxLayer replaces Interaction.DragBox; see "API-Breaking Changes and Upgrade Instructions" for how to make the transition.

XDragBoxLayer and YDragBoxLayer

These are subclasses of DragBoxLayer that only allow selection in a single dimension.

Try them out: https://jsfiddle.net/5fpvyzu0/

Interaction.DoubleClick

Interaction.DoubleClick has been refactored. You can register for the double-click event with the following method:

• onDoubleClick(callback): The callback will be passed the point that was double-clicked.

Note that a double-click event is defined by two consecutive mouse click-downs and click-ups within the span of the system-determined double-click speed.

Try it out: https://jsfiddle.net/gzo2vjha/

Dispatcher.Touch can work on multiple touches

The callbacks in the API for Dispatcher.Touch now have a different signature to account for multiple touches:

type TouchCallback = (ids: number[], idToPoint: { [id: number]: Point; }, e: TouchEvent) => any;

Each Touch has a unique identifier, stored in the ids array. idToPoint stores the location of the touch with a given identifier.

Bugfixes

• Interaction.Drag now works under CSS transforms (#1497) and zooming in IE9 (#1491).
• Constrained tick labels on Axis.Numeric now display better (#1118).
• Components that are already rendered can be moved into Groups (1823.
• Plot.StackedBar, Plot.StackedArea, Plot.Pie, and Plot.Grid now handle NaN and undefined data more gracefully (#1838, #1844, #1850, #1851)

API-Breaking Changes and Upgrade Instructions

Interaction.Drag callbacks

The methods for registering callbacks on Interaction.Drag have been renamed, although the signatures of the callbacks passed in have not:

• .dragstart() → onDragStart()
• .drag() → onDrag()
• .dragend() → onDragEnd()

Component.DragBoxLayer replaces Interaction.DragBox

To add a drag box to a Plot:

New way: Create a Component.DragBoxLayer and combine it with the Plot using a Group.

• example: https://jsfiddle.net/77p0z2mj/1/

Old way: Create an Interaction.Dragbox and register it to the Plot.

• example: https://jsfiddle.net/dLz743gd/5/

The methods for registering callbacks on DragBoxLayer have also been renamed:

• .dragstart() → onDragStart()
• .drag() → onDrag()
• .dragend() → onDragEnd()

Callbacks registered to onDragStart(), onDrag(), and onDragEnd() are now passed the Bounds of the DragBoxLayer:

export type Bounds = {
  topLeft: Point;
  bottomRight: Point;
}

The CSS classes associated with a drag box have also changed, as well as the default stylings. To control the appearance of the box on DragBoxLayer, CSS classes should be set on .drag-box-layer .selection-area. For example, the following code will make the drag box look as it did on previous versions:

.plottable .drag-box-layer .selection-area {
  fill: aliceblue;
  fill-opacity: .7;
  stroke: #C0C8FF;
}

Release Song

Two Weeks, Grizzly Bear: https://www.youtube.com/watch?v=sPXDJQkuWeA