v3.0.0-beta.4

This is the fourth 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.4, or track the v3.0.0 milestone here.

Features

Canvas Line Plot

This release adds support for rendering Line Plot onto Canvas, supporting the stroke, stroke-width, and opacity properties:

enum objects

We've added enum objects for the following enums:

• Plottable.Animators.EaseName
• Plottable.AxisOrientation
• Plottable.XAlignment
• Plottable.YAlignment
• Plottable.Axes.TimeAxisOrientation
• Plottable.Axes.TierLabelPosition
• Plottable.Plots.CurveName
• Plottable.Renderer
• Plottable.Utils.Stacking.IStackingOrder

This makes it convenient to see what options are available in an enum and makes the code more readable:

new Plottable.Axes.Category(scale, Plottable.AxisOrientation.right);

API Changes

Typescript: Minimum required version 2.1

Our .d.ts files now use the keyof operator which only exists on Typescript 2.1 and above. Upgrade to Typescript 2.1 to prevent compile errors.

Typescript: Some methods now get/set string literal union types

Plottable.Axes.Time.tierLabelPositions(), Plottable.Axes.Time.maxTimeIntervalPrecision(), Component.xAlignment(), Component.yAlignment(), and Plottable.RenderController.renderPolicy() now get/set string literal union types that define exactly the set of acceptable strings. Typescript may throw errors in places that previously worked:

Old:

var xAlign = "left";
component.xAlignment(xAlign); // Argument of type 'string' is not assignable to parameter of type '"left" | "center" | "right"'.

New:

var xAlign: Plottable.XAlignment = "left";
// or
const xAlign = "left";

component.xAlignment(xAlign);
// or
component.xAlignment("left");

Plottable.Components.Alignment renamed

• Plottable.Components.Alignment.TOP -> Plottable.YAlignment.top
• Plottable.Components.Alignment.CENTER -> Plottable.YAlignment.center or Plottable.XAlignment.center
• Plottable.Components.Alignment.BOTTOM -> Plottable.YAlignment.bottom
• Plottable.Components.Alignment.LEFT -> Plottable.XAlignment.left
• Plottable.Components.Alignment.RIGHT -> Plottable.XAlignment.right

Plottable.RenderController.Policy enum members camelCased

• Policy.IMMEDIATE -> Policy.immediate
• Policy.ANIMATION_FRAME -> Policy.animationFrame
• Policy.TIMEOUT -> Policy.timeout

Plottable.Plots.Bar.ORIENTATION_VERTICAL and ORIENTATION_HORIZONTAL renamed

• Plottable.Plots.Bar.ORIENTATION_VERTICAL -> Plottable.Plots.BarOrientation.vertical
• Plottable.Plots.Bar.ORIENTATION_HORIZONTAL -> Plottable.Plots.BarOrientation.horizontal

Remove Component Box API

Component's .bounding-box element has been removed. Use the .element() method to get the DOM element that bounds a Component.

Component's .background-fill element has been removed. This was added so users could add a background color using CSS chart. Instead, style the .component selector.

Old:

#myChart .background-fill {
  fill: "red";
}

New:

#myChart .component {
  background-color: "red";
}

Bugfixes

• We now explicitly include @types/d3 as an npm dependency. Previously users needed to manually install @types/d3 when installing Plottable since we expose d3 types in our public API; this should now be installed automatically.
• Calling plot.selections() on a Canvas Plot will return null instead of throwing an error.

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.

v3.0.0-beta.2

This is the second 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.2, or track the v3.0.0 milestone at https://github.com/palantir/plottable/milestone/64.

d3 v4

We now use d3 v4.5.0, which opens the door to many bugfixes and general improvements. You will need to upgrade your d3 dependency to point to 4.5.0 accordingly:

Script tag:

<!-- old -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<!-- new -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script>

requireJS:

require.config({
    paths: {
        // old
        d3: "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3",
        // new
        d3: "https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3",
    },
});

If you use d3 elsewhere, that code will need to be upgraded to v4 semantics. See Changes in D3 4.0.

Typescript users

If you depend on @types/d3, you will need to upgrade your codebase to use @types/[email protected].

API Changes

The upgrade to d3v4 has also cause some API changes:

LinePlot/AreaPlot

.interpolator() has been renamed to .curve(). .interpolator() used to take strings of the form "linear-closed", coinciding with d3v3 easing names. These are now camelCased ("linear-closed" -> "linearClosed"). Here's the full list of accepted curve names. It also now accepts a d3.curveFactory:

linePlot.curve(d3.curveCatmullRom.alpha(0.5))

See d3-shape#curves for more info.

EasingAnimator

EasingAnimator.easingMode() used to take strings of the form "exp-in-out", coinciding with d3v3 easing names. These are now camelCased ("exp-in-out" -> "expInOut"). Here's the full list of accepted easing names. It also now accepts an arbitrary mapping function:

animator.easingMode((t) => Math.sin(t * Math.PI))

See d3-ease for more info.

SymbolFactory

• triangleUp() renamed to triangle().
• triangleDown() removed.
• Added wye() and star().

Dropping IE9 support

We are bumping our minimum supported version of Internet Explorer from 9 to 11. IE9 is no longer supported by Microsoft and users are recommended to upgrade to a newer browser. Future releases should not be expected to have IE9 compatibility. Please let us know your thoughts about this on #3243.

v3.0.0-beta.1

This is the first 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-1, or track the v3.0.0 milestone at https://github.com/palantir/plottable/milestone/64.

Module Format

The codebase is now written in ES2015 Module format and we now publish our modules on npm. Users should be able to pull in just the parts of Plottable they care about using import statements:

// import just the Category Axis
import { Category } from "plottable/build/src/axes/categoryAxis";

Upon upgrading, Typescript consumers may see "cannot be named" errors like:

Error:(16, 17) TS4058:Return type of exported function has or is using name 'Scale' from external module "<path>/plottable/build/src/scales/scale" but cannot be named.

This occurs when your module exports a Plottable type. The recommended fix is to explicitly type the exported type:

// bad
export const k = new Plottable.Plots.Bar();

// good
export const k: Plottable.Plots.Bar = new Plottable.Plots.Bar();

npm changes

The npm package now simply contains our modules and typings. We've removed UMD support on npm (which didn't make much sense anyways).

standalone plottable.js

We are considering removing the standalone plottable.js file from our repository, which means directly referencing the file (e.g. through rawgithub.com) will no longer be supported. Please let us know your thoughts about this on #3212.

bower

We are considering dropping bower support. Bower is an outdated package manager and removing support for it will simplify maintenance burden. Please let us know your thoughts about this on #3212.

tickLabelShearAngle

Added tickLabelShearAngle property to CategoryAxis to enable shearing of long tick label text.

The existing tickLabelRotationAngle property can only rotate the text in the four cardinal directions, but tickLabelShearAngle can be any number of degrees from -80 to 80.

Note that while the lines of sheared text will still be wrapped within the bounds of the "primary" dimension (i.e. "width" in non-rotated text), the text may overflow the bounds of the "secondary" dimension (i.e. "height" in non-rotated text).

Improvements

• Pan/Zoomed Category Axes will only take up as much space as needed to show available ticks (also improves perf) #3223
• Fix stacked bar labels for date axes (#3208)
• Reduce memory leaks in Plots.Bar.entityNearest and entitiesIntersecting (#3220)
• Drastically increase perf by NOT invalidating text measuring cache on every render. Added explicit method to invalidate if necessary. (#3230)

v2.9.0

Configurable Series Stacking Order

Add stackingOrder property to stacked bar and stacked area charts. Set this
property to "topdown" or "bottomup" to set the order in which the series are
stacked.

Bar Label Styles

• Add 10px padding around bar labels

Bug Fixes

Fixed pan-zoom interaction for reversed domains and ranges

Removed bar label Italics

Italics in Bar Labels caused measuring errors in IE 9+.

Build Improvements

• Added link to create a JSFiddle from a PR's version of plottable.js
• Added route-linkable version of all quicktests. Removed superfluous "demo" previews.

v2.8.0

Features

Add max for time axis tick precision. (#3178)

Adds new property to time axes to limit how precise the
tick labels will go.

For example, setting the value of maxTimeIntervalPrecision
to "day" will prevent hours and minutes from showing
even if you are zoomed all the way in.

By default, not max is set.

Legend: maxWidth and maxLinesPerEntry (#3172)

When defined, maxWidth restricts legend growth to at most maxWidth pixels.
When defined, maxLinesPerEntry specifies number of times a single entry may wrap before being truncated

Performance

Reduce unnecessary call to computeLayout in renderTo() (#3171)

Previously, computeLayout() was invoked two times per renderTo(). Now renderTo() always does exactly one computeLayout and render, which should improve performance across the board for all charts (our tests showed ~25-30% improvement).

API Changes

Axis: isHorizontal() (#3177)
Axis: add getScale() (#3177)

Housekeeping

Add demo preview to plottable PRs (#3182)
Remove travis yml. Add circle yml. (#3176)

v2.7.0

Features

Stacked Bar: Summed Labels

In addition to individual labels within each bar, enabling labels for stacked bar plots now shows the sum of the stack above the bar. The sum is calculated for positive and negative entities separately, meaning that stacked bar plots with mixed positive and negative entities will have two separate sum labels: one for the positive sum, and one for the negative sum.

Downsampling for tick Labels

Previously, if there wasn't enough space for tick labels in a chart, they would all be hidden. With this new feature, we show as many tick labels as possible, hiding enough labels to make room for the others.

API Augmentations

Component API: Expose Resize Event

Components now support an onResize event, which is called when the component’s size changes.

Add alignment and start/end angle to pie plots

Allows pie plots that are not complete circles, and allows shifting of the pie plot's center.

Thanks to @carlosdiazh for this submission!

tickLabelMaxLines property for category scales

Adds the ability to wrap category tick labels up to a maximum number of lines.

Performance Improvements

svg-typewriter 1.0.2

More caching and better whitespace handling

LightweightEntity Caching

Significant perf improvement for locating entities plots based on mouse movement, greatly improving hovering and tooltip interactions.

Housekeeping

• Update bower.json d3 dependency to match package.json
• Remove outdated CLA information
• Update copyright on licenses

v2.6.0

Features

Pan and Zoom Support for Categorical Axes

Users can now pan and zoom charts with categorical axes.

In addition to this, a pan/zoom API is added to transformable scales that allows users to imperatively pan and zoom.

For example, to zoom the xScale by a certain amount around a center point, simply xScale.zoom(zoomAmount, xCenter);. To pan in a given direction yScale.pan(panAmount);

6150006

Expose Pan and Zoom API in PanZoom Interaction

Users may now directly control panning and zooming through the PanZoom interaction layer with the addition of the pan and zoom endpoints. These differ from the pan and zoom endpoints on transformable scales in that calling the interaction-layer endpoints will affect all scales grouped within that interaction layer. This may be useful for manually panning and zooming multiple linked charts, like small multiples.

To zoom around the center of a chart, call the PanZoom instance with the desired zoom amount. A value of 1 will have no effect, a value of 1.1 will zoom out by 10% and a value of 0.9 will zoom in by 10%. this.panZoomInteraction.zoom(zoomAmount);.

To zoom around a different point call zoom with the point around which you'd like to zoom. this.panZoomInteraction.zoom(zoomAmount, zoomPoint);

To pan a chart, call pan with a point {x, y} where the x and y values represent the dx and dy of the panning action.
this.panZoomInteraction.pan({ x: center.x - oldCenter.x, y: center.y - oldCenter.y});

6ff9285

Add entitiesIn to Line Plot

Line plots now implement the entitiesIn method. As is the case with the other XYPlot types, calling entitiesIn on a linePlot now returns all entities that intersect the specified bounds.

1dcba44

v2.5.0

Enhancements

Extend click callback to include the original MouseEvent or TouchEvent.

#3130

v2.4.1

Bug Fixes

2.4.1 hotfixes tick label alignment bugs with the new Category.tickLabelMaxWidth() property. If you're using left, top, bottom axes with tickLabelMaxWidth(), upgrade to 2.4.1.