v3.0.0-beta.3

This is the third in a series of beta releases for the next major revision of Plottable, v3.0.0. Please read on for a list of changes in beta.3, or track the v3.0.0 milestone here.

HTML Components

Previously, Components only understood SVG elements and had to be rendered to an SVG. This release allows Components to work with generic HTML elements, opening the way for more improvements such as canvas rendering. This introduces the following breaking changes:

[ACTION REQUIRED] .renderTo() only accepts HTML elements

Components now must .renderTo() an HTML element, not an <svg>. All users will need to modify the element they are passing to .renderTo() (or .anchor()) appropriately.

old:
<svg width="300" height="300"></svg>

new:
<div style="width: 300px; height: 300px"></div>

In SVG you could use the width= and height= attributes; in HTML please use CSS to size the chart appropriately.

Other changes

We no longer apply overflow: visible to the renderTo target.

Component.originToSVG() renamed to Component.originToRoot().

Added Component.root() and Component.isRoot() methods.

Added Component.element() which returns the root HTML Element for that given component.

The internal DOM hierarchy has changed; existing CSS selectors targetting Plottable elements may no longer work. The gist of the changes are:

1. content/foreground/background/box-container are now <svg>s instead of <g>s
2. Table and Group now place their children on the .component element instead of on the .content.

Canvas Renderer

This release adds preliminary support for rendering Rectangle and Bar Plot's visual primitives (the <rect>s) onto a single Canvas element rather than many SVG elements. Canvas rendering should improve performance for Plots with many elements, and avoid crashing the browser due to an overloaded DOM.

Plots now expose a plot.renderer("svg" | "canvas") method to tell the Plot to render to SVG or to Canvas. Currently:

• Only rectangle plot and bar plot are supported, supporting the stroke-width, stroke, fill, and opacity attributes.
• No animations are supported
• All PlotEntity objects (from calling entities(), entitiesAt(), entitiesIn(), or entityNearest()) returned from plots using the canvas renderer will have a null selection property (so e.g. changing the color of a clicked bar in Canvas is not possible)

API Changes

Click Interaction

The DoubleClick interaction has been combined with Click and internally controls overlap between the two events.

• callbacks are registered with onDoubleClick and unregistered with offDoubleClick
• on a dblclick event, the single click callback will not be called

// old:

var singleClick = new Plottable.Interactions.Click();
var doubleClick = new Plottable.Interactions.DoubleClick();

singleClick.onClick(...) // will fire on both physical click instances
doubleClick.onDoubleClick(...)

// new:

var click = new Plottable.Interactions.Click();
click.onClick(...) // only fires on the first physical click
click.onDoubleClick(...) // only fires on the physical click corresponding to a double-click

Dispatchers

Dispatchers.Mouse.getDispatcher and Dispatchers.touch.getDispatcher should now be passed Components instead of SVG elements.

eventInsideSVG renamed to eventInside and now must be passed the Component to test as the first argument.

Considering removing foreground() and background()

We are considering removing the Component.foreground() and Component.background() from our public API since they're only used as a 3rd party hook just in case users would like to do further modification of the chart. Let us know your thoughts at #3260.

Bugfixes

• Fix Entity.position sometimes not giving the pixel position.
• Fix nearestEntity comparing entities in data space, which didn't make sense for categorical axes.

Enhancements

• Performance of drawing labels has been improved across the board.