v3.0.0-beta.4
Pre-releaseThis 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.