🎉 We are pleased to announce Plottable v3.0.0! 3.0.0 brings a host of performance improvements and new features, as well as modernizing the codebase and the ways in which users consume the library. Please read on for a list of breaking changes and upgrade steps.
.renderTo() only accepts HTML elementsPreviously, Components only understood SVG elements and had to be rendered to an SVG. Components now 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>
width= and height= attributes; in HTML please use CSS to size the chart appropriately.overflow: visible to the renderTo target.Component.originToSVG() renamed to Component.originToRoot().Component.root() and Component.isRoot() methods.Component.element() which returns the root HTML Element for that given component.content/foreground/background/box-container are now <svg>s instead of <g>s.component element instead of on the .content.rawgit.com will no longer work as a CDN for newer versions of Plottable. We recommend using npm and webpack to bundle Plottable with your application. If that's not possible, you may use unpkg.com.
If on develop: https://rawgithub.com/palantir/plottable/develop/plottable.js --> //unpkg.com/plottable@latest/plottable.js
If on a specific version: https://rawgithub.com/palantir/plottable/v3.0.0-beta.1/plottable.js --> //unpkg.com/plottable@v3.0.0-beta.1/plottable.js
Similarly, we are no longer supporting cdnjs.com and it may break in the future. Use unpkg instead.
Bower is an outdated package manager and we have dropped support for it. Please use yarn/npm instead.
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 or higher 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.
The upgrade to d3v4 has also cause some API changes:
.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.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.
triangleUp() renamed to triangle().triangleDown() removed.wye() and star().The codebase is now written in ES2015 Module format and we now publish our modules on npm. The npm package contains our modules and typings.
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();
All Typescript interfaces now have an I prepended to them:
// old var entity: Plottable.Entity... // no exported member Entity // new var entity: Plottable.IEntityMinimum required version TS2.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.
If you depend on @types/d3, you will need to upgrade your codebase to use @types/d3@4.5.0.
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.RenderController.Policy enum members camelCased
Plottable.Plots.Bar.ORIENTATION_VERTICAL and ORIENTATION_HORIZONTAL renamed
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";
}
The DoubleClick interaction has been combined with Click and internally controls overlap between the two events.
onDoubleClick and unregistered with offDoubleClickdblclick 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.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.
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.
plot.renderer("svg" | "canvas") method to tell the Plot to render to SVG or to Canvas.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)Rectangle plot and bar plot are supported, supporting the stroke-width, stroke, fill, and opacity attributes.
Rendering Line Plot onto Canvas, supporting the stroke, stroke-width, and opacity attributes.
BarPlot now exposes a barAlignment("start" | "middle" | "end") property that determines whether the .x() accessor defines the start, middle, or end of the bar being drawn.
BarPlot now also exposes a barEnd() that controls the width of the bar. This together with barAlignment() allows more direct control over the start and end coordinates for each bar and helps build histogram-like plots.
Add Axis.tickLabelDataOnElement, which gets the data value for a tick label. This allows users to implement behaviors based on interacting with a tick label:
clickInteraction.onClick((point, event) => {
const dataValue = axis.tickLabelDataOnElement(event.target);
console.log("clicked on value", dataValue);
}).attachTo(axis); CategoryAxis 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).
XYPlot.entityNearest using a quad treeWe've added enum objects for the following enums:
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);
@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.Entity.position sometimes not giving the pixel position.nearestEntity comparing entities in data space, which didn't make sense for categorical axes.Thanks,
Plottable Team
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4