Skip to content

Dispatchers, getAllSelections, and Flipped Axes

Pre-release
Pre-release
Compare
Choose a tag to compare
@crmorford crmorford released this 20 Feb 23:17
· 4743 commits to master since this release

TL;WR

  • You can now use getAllSelections to get just one dataset, instead of all data associated with a plot.
  • Hover (Dispatcher.Mouse) and Key (Dispatcher.Key) interactions now work correctly even when a Component or Plot is scaled with CSS.
  • Axis.Numeric now supports reversed scales.

v0.45.0

Features

getAllSelections()

  • Plot.getAllSelections now take in a string or an array of strings as arguments to the API endpoint. The input should be the dataset key(s) that allow the plot to retrieve the selections associated with that dataset. If no input is given, then all selections will be retrieved as per previous behavior. If a single string is given, then only that dataset will be retrieved. If an array is given, all specified datasets will be retrieved. Invalid dataset keys are ignored.
  • areaPlot.getAllSelections now retrieves the line path elements on an areaPlot as well as the area path elements.

Dispatchers

A number of major changes have occurred on Dispatchers:

General

  • Dispatchers now use a factory pattern. Instead of invoking the constructor directly, use the static getDispatcher() method of the class.
  • Dispatchers no longer have to be connect()ed and disconnect()ed manually.

Dispatcher.Mouse

  • Dispatcher.Mouse now uses a different method of computing the mouse position. A given Dispatcher.Mouse is associated with a particular <svg> and will now account for CSS transform: scale() effects applied to that <svg> (or one of its ancestor nodes).
  • Dispatcher.Mouse will report the new mouse position relative to its <svg> every time the mouse position changes. It is up to users to confirm that this position is inside a Component of interest, using the Component's width(), height(), and originToSVG() methods.

Dispatcher.Key

  • Dispatcher.Keypress has been refactored as Dispatcher.Key.
  • Dispatcher.Key now reports keydown events that occur anywhere on the page. It can be used in conjunction with focus-testing or Dispatcher.Mouse to implement more complex behaviors.

NumericAxis

  • NumericAxis now handles inverted domains. For example, if a NumericAxis is constructed with a LinearScale with domain set as scale.domain([6, 0]), the axis will be rendered from 6 to 0, left to right.

Bugfixes

  • When Axis.Category does its space calculation, it used to report that it would only want more space if the labels did fit and would not want more space if labels did not fit... This has been corrected such that when labels that do not fit, Axis.Category will try to get more space.
  • Ticks are now only rendered on a valid domain (#1578)

API-Breaking Changes

  • There are a number of breaking changes related to Dispatchers; please see the "Upgrade Instructions" for more details:
    • constructors should no longer be invoked directly
    • connect() and disconnect() calls removed
    • mouseover(), mousemove(), and mouseout() calls removed in favor of onMouseMove() (Dispatcher.Mouse)
    • Dispatcher.Keypress renamed to Dispatcher.Key, onKeyDown now takes different arguments.
  • ResizeBroadcaster has been removed, and the resize() method of AbstractComponent has been renamed redraw(). We find that the user often has a better sense of when to redraw, and with an exposed API point for redraws, users should be able to write this implementation themselves. For example, the following is a way to replicate the original ResizeBroadcaster behavior on a pie chart that occupies the entire screen:
var plot = new Plottable.Plot.Pie().addDataset(data).project("value", "value").renderTo(svg);
window.addEventListener('resize', function(event) {
    plot.redraw();
});
  • Broadcaster now passes correctly arguments to its callbacks one at a time, rather than as an array of any[]s (#1583).

Upgrade Instructions

  • Here is the new way to use a Dispatcher.Mouse:
svgElement = d3.select("#mySVG").node(); // get the <svg>
var md = Plottable.Dispatcher.Mouse.getDispatcher(svgElement);
var callback = function(point) {
  // do something with the point
};
md.onMouseMove("callbackKey", callback);
...
md.onMouseMove("callbackKey", null); // to remove the callback
  • Here is the new way to use a Dispatcher.Key:
var kd = Plottable.Dispatcher.Key.getDispatcher();
var callback = function(keyCode) {
  if (keyCode === keyCodeOfInterest) {
    // do something;
  }
}
kd.onKeyDown("callbackKey", callback);
...
kd.onKeyDown("callbackKey", null); // to remove the callback
  • ResizeBroadcaster has been removed. An example of how to replicate its behavior:
var plot = new Plottable.Plot.Pie().addDataset(data).project("value", "value").renderTo(svg);
window.addEventListener('resize', function(event) {
    plot.redraw();
});