[v1.16.0] Component.componentAt() and Visual Adjustments to InterpolatedColorLegend

Plottable users can now select Components from a table, using the componentAt() endpoint. Axes.Category now render top-down instead of bottom-up. In addition, InterpolatedColorLegends have received a slight visual adjustment to their padding.

Features

componentAt() on Table

Users can now get the Component at a given row and column index in a Table using componentAt():

public componentAt(rowIndex: number, columnIndex: number): Component;

This method returns null if no Component exists at the specified position.

Try it out: http://jsfiddle.net/o0gqk349/

Padding on InterpolatedColorLegend

Padding on InterpolatedColorLegends has been increased so that there will be more space between the Legends and other Components in a Table. On vertical InterpolatedColorLegends, the top and bottom padding was removed, and the legend will now take up the full height of its parent container.

Bug Fixes

• Axes.Category in the vertical orientation now render the text from top to bottom to match the rendering direction of XYPlots (#2863).

[v1.15.0] Plots.Line Performance Improvements

Plottable has released another performance improvement for Plots.Line and Plots.Area which contain large numbers of data points. Downsampling removes unnecessary data points resulting in faster rendering.

Issues with rendering a single bar on Plots.Bar have been fixed. A top oriented Axes.Time will now show labels when tickLabelPosition is set to center. Legend's default comparator sorts formatted entries correctly.

Features

Downsampling on Plots.Line

Downsampling decreases the number of lines rendered by Plots, without removing interesting data points. This feature is helpful when a large number of lines are drawn on Plots.Line or Plots.Area. Downsampling is disabled by default. Downsampling will decrease initial render time, and result in faster rendering while using Interactions.PanZoom.

: Plots.StackedArea does not support downsampling in this release. We will be adding functionality for this in the future.

Try it out: http://jsfiddle.net/yxpq4uuv/43/

/**
  * Gets if downsampling is enabled
  * 
  * When downsampling is enabled, two consecutive lines with the same slope will be merged to one line.
  */
public downsamplingEnabled(): boolean;
/**
  * Sets if downsampling is enabled
  * 
  * @returns {Plots.Line} The calling Plots.Line
  */
public downsamplingEnabled(downsampling: boolean): Plots.Line<X>;

Bug Fixes

• Since 1.7.0, Plots.Bar would not choose good default domains when only one bar was rendered, so that the bar was rendered off-center. Now, Extents are recomputed for Scales attached to Plots.Bar when the default bar width changes, and Plots with one bar will render correctly. (#2857).
• Axes.Time now supports setting tickLabelPosition("center") while the axis is in the top orientation (#2831)
• Previously, the default Legend.comparator() did not sort entries correctly when a custom formatter was used. Now by default, entries are sorted to match the order of the domain values of the Legend's Scales.Color.(#2843)
• Plottable was doing unnecessary caching. We have deprecated _computedWidth and _computedHeight on Axes due to premature optimization. There should be no behavior changes. (#2852)

[v1.14.0] Localization and More Performance Improvements

Plottable is now multi-lingual! Axes.Time has easy localization options through the Plottable-moment library. This release also includes performance improvements on the rendering speed of Plots.Lineand Plots.Area.

The end ticks on Axes.Time are now matched in size on the left and right sides. pixelPoint() now returns the correct location on Plots.Bar and all derived classes. Interactions.Pointer callbacks will no longer trigger through an overlay.

Features

Cropped Rendering on Plots.Line

Plots.Line will only render portions of a line that are contained in the viewport. This option is enabled by default.

This will result in new behavior while deferredRendering() is enabled, since lines will not be drawn until they are on-screen and deferredRendering() is complete.

Try it out: http://jsfiddle.net/yxpq4uuv/7/

/**
 * Gets if croppedRendering is enabled
 *
 * When croppedRendering is enabled, lines that will not be visible in the viewport will not be drawn.
 */
public croppedRenderingEnabled(): boolean;

/**
 * Sets if croppedRendering is enabled
 */
public croppedRenderingEnabled(croppedRendering: boolean): Plots.Line<X>;

Time Axis Localization

A new library utilizing MomentJS has been created to provide localization on Axes.Time. Plottable-moment is hosted at https://github.com/palantir/plottable-moment

When the library loads, it will override the default configuration list of Axes.Time in order to match the locale set in MomentJS.

Try it out: https://jsfiddle.net/zsfkg32b/20/

Bug Fixes

• The logic in pointerMove, pointerExit, and pointerEnter has changed so that points under an overlay are considered outside of the Component. Interactions.Pointer callbacks will no longer trigger under modals or other overlays that overlap Plots (2416)
• Several situations used to result in incorrect pixelPoint()s on 'Plots.Bar'. Now,pixelPoint() returns the correct data point, which is used when finding the correct nearest bar (2793)
• The end tick marks in Axes.Time used to be uneven when tierlabelPosition was set to "center", but now always have the same length (2800)

[v1.13.0] Off-Bar-Labels and Legend Formatters

We're very excited to release off-bar labels this week! Now, if labels do not fit inside a bar, they will be placed just outside of the bar. Additionally, we are releasing legend formatters, which gives developers the ability to alter the text of legend entries.

In this release we've also fixed two bugs on Scales, and added a clipPath to SelectionBoxLayers.

Features

Better label display on Plots.Bar

When labels are enabled, Plots.Bar will now show labels off the bar if the label would not fit on the bar. The off-bar labels can be styled using the CSS class off-bar-label. On-bar labels carry the CSS class on-bar-label.

This feature also works on Plots.ClusteredBar, but has not yet been implemented on Plots.StackedBar (#2795).

Special thanks to @okal for work on this feature.

Try it out: http://jsfiddle.net/9qq0zw9u/

Typescript 1.6

Plottable is now being developed using Typescript 1.6. Check out their release notes for more details on the new features.

Please note that Plottable currently only takes advantages of features in releases up to Typescript 1.5. This is to maintain a smoother upgrade path for our users. To use the latest typescript features, please pull the latest release of Plottable and run npm install.

Formatter for Legend

Previously, Legend entries displayed the domain values of the Legend's Scales.Color. Now Legends have the endpoint .formatter(), which can be used to format the displayed text. If the legend uses a comparator function, it will be applied after the entries have been formatted.

/**
* Gets the Formatter for the text. 
*/
formatter(): Formatter;
/**
* Sets the Formatter for the text.
*
* @param {Formatter} formatter
* @returns {Legend} The calling Legend.
*/
formatter(formatter: Formatter): Legend;

Try it out: http://jsfiddle.net/cmf3ut7g/13/

Bug Fixes

• Plottable had a bug where autodomain did not work when Scales were attached after rendering. Scales now autodomain correctly. (#2396).
• clipPaths are now enabled on SelectionBoxLayer. Previously, SelectionBoxLayers could be drawn outside of their table cell or svg. (#2769). Thanks to @jacqt for this fix!
• Scales.Time now have a larger default domain, and will render with meaningful labels by default. (#2740).

[V1.12.0] Set SelectionBox Extents in Data Space

This week Plottable is releasing a new API endpoint for setting the bounds of SelectionBoxLayers in data space; this was previously only possible in pixel space.

We've also made bugfixes for clipPaths caused by URL changes. The center orientation on Axes.Time in the bottom orientation will now show all labels. The callbacks on DragBoxLayers are properly removed when the DragBoxLayer is destroy()ed.

Features

Extent setters on SelectionBoxLayer

Users can now set the position of a SelectionBoxLayer in data-space, by passing in data values instead of pixel positions:

API Changes:

/**
 * Sets the data values backing the left and right edges of the box.
 */
xExtent(xExtent: (number | { valueOf(): number; })[]): SelectionBoxLayer;
/**
 * Sets the data values backing the top and bottom edges of the box.
 */
yExtent(yExtent: (number | { valueOf(): number; })[]): SelectionBoxLayer;

Try it out: http://jsfiddle.net/bluong63/ewga1des/

Bug Fixes

• DragBoxLayer properly disconnects from its callbacks when destroy()ed or detach()ed. Previously, the callbacks associated with the DragBoxLayer would be called while it was detach()ed or had been destroy()ed (#2553).
• We were made aware of a bug where URL changes would cause a clipPath to stop working, and Components could extend out of their cell on a Table. Components with clipPaths update their reference when re-rendering after the URL changes. (#2733).
• In bottom orientation TimeAxis, TickLabels are now visible when tickLabelPosition is set to center. Previously they were hidden.
  (#2725)

[v1.11.0] Bugfixes for Horizontal Bar Plots and Cursors on Interactive Elements

This week the Plottable Team focused on testing improvements, to ensure high-quality releases going forward. We also released a few bug fixes.

Cursors indicating possible drag and resizing actions will now show up for all layered dragBoxLayers and dragLineLayers. The domain chosen for horizontal Plots.Bar by autodomain will now include all bars. Horizontal Plots.Bar labels are now hidden when they would be cut off by the edge of Plots.

Bug Fixes

• Custom cursors now show on all Components in a Group (#2749).
• Horizontal Plots.Bar now autodomain correctly. Previously, if plot.autoDomain() was called after plot.renderTo(), then the first and the last bar of the plot were cut off (#2704).
• Previously, on horizontal Plots.Bar, the labels would sometimes be hidden when there was enough space to show them, or show when partially cut off. This has been fixed (#2736).

[v1.10.0] Axis Annotations and Expanding Interpolated Color Legends

This week, Plottable is releasing Axis Annotations: special labels on Axes that call out interesting or important values. Additionally, InterpolatedColorLegends can now expand lengthwise to occupy available space. There is also a new configuration point for removing <title> elements from the DOM.

A bug fix for Plots.Bar's entityNearest() function now correctly identifies the nearest entity, even for entities partially drawn on the SVG. Plots.Rectangle and Plots.Bar now render the same color blue as all other Plottable Plots by default.

Features

Axis Annotations

Axis annotations are a visualization on top of an axis that places special tick values into separate containers. This helps the user determine which values are interesting and deserve more attention.

The annotations can be styled with CSS using the following selectors:

• .plottable .axis .annotation-circle
• .plottable .axis .annotation-line
• .plottable .axis .annotation-rect

New API points:

/**
 * Gets the annotated ticks.
 */
annotatedTicks(): D[];
/**
 * Sets the annotated ticks
 */
annotatedTicks(annotatedTicks: D[]): Axis<D>;
/**
 * Gets the formatter for the annotations
 */
annotationFormatter(): Formatter;
/**
 * Sets the formatter for the annotations
 */
annotationFormatter(annotationFormatter: Formatter): Axis<D>;
/**
 * Gets if annotations are enabled
 */
annotationsEnabled(): boolean;
/**
 * Sets if annotations are enabled
 */
annotationsEnabled(annotationsEnabled: boolean): Axis<D>;
/**
 * Gets the count of annotation tiers to render
 */
annotationTierCount(): number;
/**
 * Sets the count of annotation tiers to render
 */
annotationTierCount(annotationTierCount: number): Axis<D>;

Try it out: https://jsfiddle.net/bluong63/nup2ya6w/1/

Another example, combining axis annotations with DragBoxLayer: https://jsfiddle.net/bluong63/0y30f2q3/2/

Expanding InterpolatedColorLegend

InterpolatedColorLegend can now expand lengthwise to occupy all available space using expands(true).

New API points:

/**
 * Gets whether the InterpolatedColorLegend expands to occupy all offered space 
 * in the long direction
 */
public expands(): boolean;
/**
 * Sets whether the InterpolatedColorLegend expands to occupy all offered space
 * in the long direction
 */
public expands(expands: boolean): InterpolatedColorLegend;

Try it out: http://jsfiddle.net/ztsai/wgx8o4ua/

Configuration option for <title> elements

Plottable Legends normally display a tooltip (the <title> element) when the mouse hovers over the entry text. This can be helpful if the text would otherwise be cut off:

You can now disable these tooltips by setting the following configuration option to false:

module Plottable {
  export module Configs {
    /**
     * Specifies whether Plottable should add <title> elements to text
     */
     var ADD_TITLE_ELEMENTS: boolean;
  }
}

NOTE: The option must be set before the Legend is rendered.

Bug Fixes

• Previously, Plots.Bar entities lying below the baseline and partially out of the SVG were not considered by entityNearest(). This has been fixed. #2670
• Plots.Rectangle and Plots.Wheel used to render black if the fill was not explicitly set. Now, both plots render blue, the same default color as all other Plots. #2720

[v1.9.0] DragLineLayer and Plots.Wheel

This release includes DragLineLayers, which serve the same purpose as GuideLineLayers but are also draggable. You can now pass in DOM Elements to renderTo(). We're excited to announce Plots.Wheel as a new Plot, with additional features coming soon!

Features

DragLineLayer

This subclass of GuideLineLayer has a built-in Drag Interaction that allows it to be repositioned by dragging. It has the following additional API points:

/**
 * Get/set the detection radius in pixels.
 */
public detectionRadius(): number;
public detectionRadius(detectionRadius: number): DragLineLayer<D>;

/**
 * Get/set the enabled status.
 */
public enabled(): boolean;
public enabled(enabled: boolean): DragLineLayer<D>;

/**
 * Add or remove callbacks.
 */
public onDragStart(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDragStart(callback: DragLineCallback<D>): DragLineLayer<D>;

public onDrag(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDrag(callback: DragLineCallback<D>): DragLineLayer<D>;

public onDragEnd(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDragEnd(callback: DragLineCallback<D>): DragLineLayer<D>;

Try it out: http://jsfiddle.net/p0tovrz5/

renderTo() works with DOM Elements

Previously, renderTo() only worked with strings identifying DOM Elements, or d3 selections. Now, renderTo() can be passed the DOM Element itself.

Try it here: http://jsfiddle.net/82wugm84/

New Plot: Plots.Wheel!

NOTE: Plots.Wheel is an in-progress feature, and is not yet complete. We have several improvements planned, and our progress can be tracked here: #2612

Plots.Wheel utilizes polar coordinates, and uses the accessors .r() and .t().

• The r direction on Plots.Wheel moves outward from the center of the wheel along the radius.
• The t direction is measured in degrees if no scale is provided. It increases clockwise around Plots.Wheel, starting from vertical.

Plots.Wheel has four property methods: t(), t2(), r(), and r2(), which are used to define the bounds of the arcs:

/**
 * Sets t to a constant number or the result of an Accessor<number> in degrees.
 */
t(t: number | Accessor<number>): Plots.Wheel<R, T>;
/**
 * Sets t to a scaled constant value or scaled result of an Accessor in degrees.
 * The supplied Scale will also be used for t2().
 */
t(t: T | Accessor<T>, scale: QuantitativeScale<T>): Plots.Wheel<R, T>;
/**
 * Sets t2 to a constant number or the result of an Accessor<number> in degrees.
 * If a Scale has been set for t, it will also be used to scale t2.
 */
t2(t2: number | Accessor<number> | T | Accessor<T>): Plots.Wheel<R, T>;

/**
 * Sets r to a constant number or the result of an Accessor<number>.
 */
r(r: number | Accessor<number>): Plots.Wheel<R, T>;
/**
 * Sets r to a scaled constant value or scaled result of an Accessor.
 * The supplied Scale will also be used for r2().
 */
r(r: R | Accessor<R>, scale: QuantitativeScale<R>): Plots.Wheel<R, T>;
/**
 * Gets the AccessorScaleBinding for r2.
 */
r2(): AccessorScaleBinding<R, number>;
/**
 * Sets r2 to a constant number or the result of an Accessor<number>.
 * If a Scale has been set for r, it will also be used to scale r2.
 */
r2(r2: number | Accessor<number> | R | Accessor<R>): Plots.Wheel<R, T>;

t() and t2() share a Scale, and r() and r2() share a Scale. Currently, only QuantitativeScales are supported for these properties. We intend to add additional scales in the near future.

Try it here: http://jsfiddle.net/ztsai/dvaev9b0/

[v1.8.0] Smooth Autoranging, entitiesAt() on Scatter Plots, Pie Plot improvements

Users can now place labels on Plots.Rectangle. We've added an autorangeSmooth() option for Plots.Line and Plots.Area. Line Plots with autorangeMode() turned on have been very jerky during panning, but using autorangeSmooth() makes the movement smoother. We have also built entitiesAt() for Plots.Scatter, allowing the user to identify symbols containing a given point.

Bug fixes include cleaner strokes on Plots.Pie sectors. Also, Plots.Pie has stopped accepting negative values, eliminating several bugs. Axis.Time will now use margin() correctly; previously the call had no effect.

Performance improvements

Adding Datasets in batches using Plots.datasets() is now faster.

150 Datasets - 90x speedup

• Before: http://jsfiddle.net/6jd666s4/ - 3300 ms
• After: http://jsfiddle.net/6jd666s4/1/ - 36 ms

Note that this does not affect the Plot.addDataset() or Plot.removeDataset() endpoints. We recommend using Plots.Datasets() to add multiple datasets.

Features

entitiesAt() on Plots.Scatter

Users can now query for Entities that contain a given point on Plots.Scatter with .entitiesAt()

/**
 * Gets the Entities at a particular Point.
 *
 * @param {Point} p
 * @returns {PlotEntity[]}
 */
entitiesAt(p: Point)

Try it out: http://jsfiddle.net/ztsai/ufv4kea3/

Labels on Plots.Rectangle

Plots.Rectangle now supports data-backed labels. Labels will not appear if they are partially covered by another rectangle.

• Use labelsEnabled() to enable/disable labels:

/**
 * Gets whether labels are enabled.
 *
 * @returns {boolean}
 */
labelsEnabled(): boolean;
/**
 * Sets whether labels are enabled.
 * Labels too big to be contained in the rectangle, cut off by edges, or blocked by other rectangles will not be shown.
 *
 * @param {boolean} labelsEnabled
 * @returns {Rectangle} The calling Rectangle Plot.
 */
labelsEnabled(enabled: boolean): Plots.Rectangle<X, Y>;

• Use label() to set the text of labels:

/**
 * Gets the accessor for labels.
 *
 * @returns {Accessor<string>}
 */
label(): Accessor<string>;
/**
 * Sets the text of labels to the result of an Accessor.
 *
 * @param {Accessor<string>} label
 * @returns {Plots.Rectangle} The calling Rectangle Plot.
 */
label(label: Accessor<string>): Plots.Rectangle<X, Y>;

Try it out: http://jsfiddle.net/ztsai/85ndejru/

Autorange Smooth

When panning and zooming on a plot with autorangeMode() set, the interaction has historically been very jerky. The movement can be made smoother by enabling autorangeSmooth(). This affects Plots.Line, Plots.Area and Plots.StackedArea.

Inital values chosen for domains may be messy. SnappingDomainEnabled(true) will choose cleaner values for Plots.Scales domains.

• Without autorangeSmooth() enabled: http://jsfiddle.net/vxa04vek/
• With autorangeSmooth() enabled: http://jsfiddle.net/vxa04vek/1/

New API points

QuantitativeScale

/**
 * Gets whether or not the scale snaps its domain to nice values.
 */
snappingDomainEnabled(): boolean;
/**
 * Sets whether or not the scale snaps its domain to nice values.
 */
snappingDomainEnabled(snappingDomainEnabled: boolean): QuantitativeScale<D>;

Plots.Line

/**
 * Gets whether or not the autoranging is done smoothly.
 */
autorangeSmooth(): boolean;
/**
 * Sets whether or not the autorange is done smoothly.
 *
 * Smooth autoranging is done by making sure lines always exit on the left / right side of the plot
 * and deactivating the nice domain feature on the scales
 */
autorangeSmooth(autorangeSmooth: boolean): Plots.Line<X>;

Plots.Pie sector outline visual improvements

Slice outlines on Plots.Pie will no longer be cut off by the fill of adjacent slices:

Try it out: http://jsfiddle.net/3b6jenpa/

NOTE: This feature is implemented by using a separate <path> to draw the outline of each slice, similar to how an extra <path> is used to draw the line on Plots.Area. This means that

piePlot.content().selectAll(".arc");

Will yield twice as many <path>s as before. The <path>s that draws the fill now also carry the CSS class "fill"; similarly, the <path>s that draw the outlines for each slice carry the CSS class "outline". These classes can be used to select the <path>s of interest:

piePlot.content().selectAll(".arc.fill"); // selects fills only
piePlot.content().selectAll(".arc.outline"); // selects outlines only

This feature addresses #2492.

Bugfixes

• Axes.Time now properly includes uses its margin(). Previously arguments given to margin() were not taken into consideration. (#2042).
• Negative values no longer render on Plots.Pie, eliminating bugs related to visual misrepresentation of data and the Plots.entities() endpoint. (#2611).

[v1.7.0] GuideLineLayer, Selection on Rectangle and Segment Plots

This release introduces GuideLineLayer. GuideLineLayers span the entire plot vertically or horizontally, and can be used to indicate values of interest. EntitiesIn() for Plots.Rectangle and Plots.Segment has also been implemented for this release.

onKeyPress() has been fixed to only fire once when pressed, instead of continuously while a key is held down. Plots.Bar width calculations are now more stable in the case when a bar is off the edge of the screen. Formatters will throw errors when passed non-Integers. DragBoxLayer no longer shows move or resize cursors when disabled.

Features

GuideLineLayer

A GuideLineLayer draws a vertical or horizontal line at a specified value or pixel position. The GuideLineLayer fully occupies the Table cell it is placed in, much like SelectionBoxLayer. Multiple GuideLineLayers can be layered on Plots. It has the following API points:

class GuideLineLayer<D> extends Component {

  constructor(orientation: string);

  scale(): QuantitativeScale<D>;
  scale(scale: QuantitativeScale<D>): GuideLineLayer<D>;

  value(): D;
  value(value: D): GuideLineLayer<D>;

  pixelPosition(): number;
  pixelPosition(pixelPosition: number): GuideLineLayer<D>;
}

Try it out: http://jsfiddle.net/y8s1yaza/

entitiesIn() on Plots.Segment and Plots.Rectangle

Users can now query for Entities within a certain range or bounds on Plots.Segment and Plots.Rectangle:

/**
    * Gets the Entities that intersect the Bounds.
    */
entitiesIn(bounds: Bounds): PlotEntity[];
/**
    * Gets the Entities that intersect the area defined by the ranges.
    */
entitiesIn(xRange: Range, yRange: Range): PlotEntity[];

Try it out:

• Rectangle: http://jsfiddle.net/njt6en92/1/
• Segment: http://jsfiddle.net/njt6en92/2/

Miscellaneous

• AutoDomaining on a Plots.Bar now extends the domain to account for the width of bars, instead of shrinking the bars on the edge. This eliminates the scenario where all bars are rendered with a very small width, because one is close to an edge.

Bugfixes

• Formatters given a non-integer precision now throw an error. Previously the values were silently coerced, which caused unpredictable behavior. (#2527).
• Bar width calculations for Plots.Bar no longer are affected by a bar being off the edge of Plots. This means that when PanZooming on a Plots.Bar, the bars no longer shrink / flicker when the first and last bar cross the edges (#2545).
• DragBoxLayer will no longer show move/resize cursors if it is not enabled() (#2542).
• Interactions.key.onKeyPress() only fires once, when the key is first pressed. Previously, onKeyPress() would fire continuously while the key was held down (#2499)