plottable 3.12.0 → 4.0.0

package/README.md

@@ -11,6 +11,13 @@ Plottable is used and developed at [Palantir Technologies](http://palantir.com/)
 
 ## Quick Start
 
+Plottable requires D3 7 (`d3@^7.9.0`) and a browser with ES2015 support.
+When loading D3 with a script tag or RequireJS, use `d3/dist/d3.min.js`.
+CommonJS consumers need Node.js 22.12 or later to load D3's ES modules;
+browser applications can use a bundler with ES module support.
+TypeScript consumers need TypeScript 5 or later for the D3 type definitions.
+The `Category20`, `Category20b`, and `Category20c` color scales retain their original palettes.
+
 - Get Plottable:
   - npm: `npm install --save plottable`
   - yarn: `yarn add plottable`
@@ -38,8 +45,8 @@ If you run into any problems using Plottable, please let us know. We want Plotta
 ## Development
 
 - Clone the repo
-- Install local dependencies `yarn install`
-- Run `yarn build` to build the dependencies
+- Use the Node.js version in `.nvmrc`, then run `yarn install` and `yarn build`
+- Run `yarn playwright install chromium` to install the browser used by `yarn test`
 - Run `yarn start` and it will spin up a server (pointed at http://localhost:9999) and begin compiling the typescript code
 - Navigate to `http://localhost:9999/quicktests/` and choose a directory to view visual tests
 

package/build/src/animators/easingAnimator.d.ts

@@ -5,7 +5,7 @@
 import * as d3 from "d3";
 import { AttributeToAppliedProjector, SimpleSelection } from "../core/interfaces";
 import { IAnimator } from "./animator";
-export declare type EaseFn = (normalizedTime: number) => number;
+export type EaseFn = (normalizedTime: number) => number;
 export declare const EaseName: {
     linear: "linear";
     circle: "circle";
@@ -48,7 +48,7 @@ export declare const EaseName: {
 /**
  * Known ease types that animator's .ease() methods understand
  */
-export declare type EaseName = keyof typeof EaseName;
+export type EaseName = keyof typeof EaseName;
 /**
  * An Animator with easing and configurable durations and delays.
  */

package/build/src/animators/easingAnimator.js

@@ -5,7 +5,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = exports.EaseName = void 0;
-var d3Ease = require("d3-ease");
+var d3Ease = require("d3");
 var coerceD3_1 = require("../utils/coerceD3");
 var makeEnum_1 = require("../utils/makeEnum");
 var EASE_NAME_MAPPING = {

package/build/src/animators/index.js

@@ -5,5 +5,5 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./easingAnimator"), exports);
-(0, tslib_1.__exportStar)(require("./nullAnimator"), exports);
+tslib_1.__exportStar(require("./easingAnimator"), exports);
+tslib_1.__exportStar(require("./nullAnimator"), exports);

package/build/src/axes/axis.d.ts

@@ -13,7 +13,7 @@ export declare const AxisOrientation: {
     bottom: "bottom";
     right: "right";
 };
-export declare type AxisOrientation = keyof typeof AxisOrientation;
+export type AxisOrientation = keyof typeof AxisOrientation;
 export declare class Axis<D> extends Component {
     /**
      * The css class applied to each end tick mark (the line on the end tick).

package/build/src/axes/axis.js

@@ -15,7 +15,7 @@ var Utils = require("../utils");
 var makeEnum_1 = require("../utils/makeEnum");
 exports.AxisOrientation = (0, makeEnum_1.makeEnum)(["bottom", "left", "right", "top"]);
 var Axis = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Axis, _super);
+    tslib_1.__extends(Axis, _super);
     /**
      * Constructs an Axis.
      * An Axis is a visual representation of a Scale.
@@ -184,8 +184,8 @@ var Axis = /** @class */ (function (_super) {
         }
         // clearing to remove outdated font-size classes
         this._tickLabelContainer.attr("class", null)
-            .classed(Axis.TICK_LABEL_CLASS + "-container", true)
-            .classed("label-" + this._tickLabelFontSize, true);
+            .classed("".concat(Axis.TICK_LABEL_CLASS, "-container"), true)
+            .classed("label-".concat(this._tickLabelFontSize), true);
     };
     /*
      * Function for generating tick values in data-space (as opposed to pixel values).
@@ -281,7 +281,7 @@ var Axis = /** @class */ (function (_super) {
             }
         });
         var bindElements = function (selection, elementName, className) {
-            var elementsUpdate = selection.selectAll("." + className).data(annotatedTicks);
+            var elementsUpdate = selection.selectAll(".".concat(className)).data(annotatedTicks);
             var elements = elementsUpdate
                 .enter()
                 .append(elementName)
@@ -356,7 +356,7 @@ var Axis = /** @class */ (function (_super) {
             transform: function (d) {
                 var xTranslate = isHorizontal ? positionF(d) : rectangleOffsetF(d);
                 var yTranslate = isHorizontal ? rectangleOffsetF(d) : positionF(d);
-                return "translate(" + xTranslate + "," + yTranslate + ")";
+                return "translate(".concat(xTranslate, ",").concat(yTranslate, ")");
             },
             visibility: visibilityF,
         })

package/build/src/axes/categoryAxis.js

@@ -13,7 +13,7 @@ var label_1 = require("../components/label");
 var Utils = require("../utils");
 var axis_1 = require("./axis");
 var Category = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Category, _super);
+    tslib_1.__extends(Category, _super);
     /**
      * Constructs a Category Axis.
      *
@@ -227,7 +227,7 @@ var Category = /** @class */ (function (_super) {
                 // aligned with the side of the ticks
                 if (self.orientation() === "left" && width > self._tickLabelMaxWidth) {
                     var cutOffWidth = width - self._tickLabelMaxWidth;
-                    var newTransform = container.attr("transform") + " translate(" + cutOffWidth + ", 0)";
+                    var newTransform = "".concat(container.attr("transform"), " translate(").concat(cutOffWidth, ", 0)");
                     container.attr("transform", newTransform);
                 }
                 width = Math.min(width, self._tickLabelMaxWidth);
@@ -288,10 +288,11 @@ var Category = /** @class */ (function (_super) {
             return _this._wrapper.wrap(_this.formatter()(s), _this._measurer, width, height);
         });
         // HACKHACK: https://github.com/palantir/svg-typewriter/issues/25
-        var widthFn = (this.isHorizontal() && this._tickLabelAngle === 0) ? d3.sum : Utils.Math.max;
-        var heightFn = (this.isHorizontal() && this._tickLabelAngle === 0) ? Utils.Math.max : d3.sum;
-        var usedWidth = widthFn(wrappingResults, function (t) { return _this._measurer.measure(t.wrappedText).width; }, 0);
-        var usedHeight = heightFn(wrappingResults, function (t) { return _this._measurer.measure(t.wrappedText).height; }, 0);
+        var widths = wrappingResults.map(function (result) { return _this._measurer.measure(result.wrappedText).width; });
+        var heights = wrappingResults.map(function (result) { return _this._measurer.measure(result.wrappedText).height; });
+        var horizontal = this.isHorizontal() && this._tickLabelAngle === 0;
+        var usedWidth = horizontal ? d3.sum(widths) : Utils.Math.max(widths, 0);
+        var usedHeight = horizontal ? Utils.Math.max(heights, 0) : d3.sum(heights);
         // If the tick labels are rotated, reverse usedWidth and usedHeight
         // HACKHACK: https://github.com/palantir/svg-typewriter/issues/25
         if (this._tickLabelAngle !== 0) {
@@ -333,7 +334,7 @@ var Category = /** @class */ (function (_super) {
         this._drawTicks(stepWidth, tickLabels);
         var xTranslate = this.orientation() === "right" ? this._tickSpaceRequired() : 0;
         var yTranslate = this.orientation() === "bottom" ? this._tickSpaceRequired() : 0;
-        this._tickLabelContainer.attr("transform", "translate(" + xTranslate + "," + yTranslate + ")");
+        this._tickLabelContainer.attr("transform", "translate(".concat(xTranslate, ",").concat(yTranslate, ")"));
         // hide ticks and labels that overflow the axis
         this._showAllTickMarks();
         this._showAllTickLabels();

package/build/src/axes/index.js

@@ -5,6 +5,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./categoryAxis"), exports);
-(0, tslib_1.__exportStar)(require("./numericAxis"), exports);
-(0, tslib_1.__exportStar)(require("./timeAxis"), exports);
+tslib_1.__exportStar(require("./categoryAxis"), exports);
+tslib_1.__exportStar(require("./numericAxis"), exports);
+tslib_1.__exportStar(require("./timeAxis"), exports);

package/build/src/axes/numericAxis.js

@@ -12,7 +12,7 @@ var Formatters = require("../core/formatters");
 var Utils = require("../utils");
 var axis_1 = require("./axis");
 var Numeric = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Numeric, _super);
+    tslib_1.__extends(Numeric, _super);
     /**
      * Constructs a Numeric Axis.
      *

package/build/src/axes/timeAxis.d.ts

@@ -15,12 +15,12 @@ export declare const TimeInterval: {
     month: "month";
     year: "year";
 };
-export declare type TimeInterval = keyof typeof TimeInterval;
+export type TimeInterval = keyof typeof TimeInterval;
 /**
  * Defines a configuration for a Time Axis tier.
  * For details on how ticks are generated see: https://github.com/mbostock/d3/wiki/Time-Scales#ticks
  */
-export declare type TimeAxisTierConfiguration = {
+export type TimeAxisTierConfiguration = {
     /**
      * The time unit associated with this configuration (seconds, minutes, hours, etc).
      */
@@ -40,7 +40,7 @@ export declare type TimeAxisTierConfiguration = {
  * Each configuration will be shown on a different tier.
  * Currently, up to two tiers are supported.
  */
-export declare type TimeAxisConfiguration = TimeAxisTierConfiguration[];
+export type TimeAxisConfiguration = TimeAxisTierConfiguration[];
 /**
  * Possible orientations for a Time Axis.
  */
@@ -48,12 +48,12 @@ export declare const TimeAxisOrientation: {
     top: "top";
     bottom: "bottom";
 };
-export declare type TimeAxisOrientation = keyof typeof TimeAxisOrientation;
+export type TimeAxisOrientation = keyof typeof TimeAxisOrientation;
 export declare const TierLabelPosition: {
     center: "center";
     between: "between";
 };
-export declare type TierLabelPosition = keyof typeof TierLabelPosition;
+export type TierLabelPosition = keyof typeof TierLabelPosition;
 export declare class Time extends Axis<Date> {
     /**
      * The CSS class applied to each Time Axis tier

package/build/src/axes/timeAxis.js

@@ -29,7 +29,7 @@ exports.TimeInterval = (0, makeEnum_1.makeEnum)([
 exports.TimeAxisOrientation = (0, makeEnum_1.makeEnum)(["top", "bottom"]);
 exports.TierLabelPosition = (0, makeEnum_1.makeEnum)(["between", "center"]);
 var Time = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Time, _super);
+    tslib_1.__extends(Time, _super);
     /**
      * Constructs a Time Axis.
      *
@@ -63,8 +63,8 @@ var Time = /** @class */ (function (_super) {
             this._tierLabelContainers.forEach(function (container) {
                 // clearing to remove outdated font-size classes
                 container.attr("class", null)
-                    .classed(axis_1.Axis.TICK_LABEL_CLASS + "-container", true)
-                    .classed("label-" + _this._tickLabelFontSize, true);
+                    .classed("".concat(axis_1.Axis.TICK_LABEL_CLASS, "-container"), true)
+                    .classed("label-".concat(_this._tickLabelFontSize), true);
             });
         }
         return _super.prototype.tickLabelFontSize.call(this, fontSize);
@@ -214,8 +214,8 @@ var Time = /** @class */ (function (_super) {
         for (var i = 0; i < this._numTiers; ++i) {
             var tierContainer = this.content().append("g").classed(Time.TIME_AXIS_TIER_CLASS, true);
             this._tierLabelContainers.push(tierContainer.append("g")
-                .classed(axis_1.Axis.TICK_LABEL_CLASS + "-container", true)
-                .classed("label-" + this._tickLabelFontSize, true));
+                .classed("".concat(axis_1.Axis.TICK_LABEL_CLASS, "-container"), true)
+                .classed("label-".concat(this._tickLabelFontSize), true));
             this._tierMarkContainers.push(tierContainer.append("g").classed(axis_1.Axis.TICK_MARK_CLASS + "-container", true));
             this._tierBaselines.push(tierContainer.append("line").classed("baseline", true));
         }
@@ -286,7 +286,7 @@ var Time = /** @class */ (function (_super) {
         var tickLabels = tickLabelsUpdate.merge(tickLabelsEnter);
         var textSelection = tickLabels.selectAll("text");
         if (textSelection.size() > 0) {
-            textSelection.attr("transform", "translate(" + xTranslate + "," + yTranslate + ")");
+            textSelection.attr("transform", "translate(".concat(xTranslate, ",").concat(yTranslate, ")"));
         }
         tickLabelsUpdate.exit().remove();
         tickLabels.attr("transform", function (d) { return "translate(" + _this._scale.scale(d) + ",0)"; });

package/build/src/components/component.d.ts

@@ -5,8 +5,8 @@
 import * as d3 from "d3";
 import { Bounds, Point, SimpleSelection, SpaceRequest } from "../core/interfaces";
 import { ComponentContainer } from "./componentContainer";
-export declare type ComponentCallback = (component: Component) => void;
-export declare type IResizeHandler = (size: {
+export type ComponentCallback = (component: Component) => void;
+export type IResizeHandler = (size: {
     height: number;
     width: number;
 }) => void;
@@ -15,13 +15,13 @@ export declare const XAlignment: {
     left: "left";
     right: "right";
 };
-export declare type XAlignment = keyof typeof XAlignment;
+export type XAlignment = keyof typeof XAlignment;
 export declare const YAlignment: {
     center: "center";
     top: "top";
     bottom: "bottom";
 };
-export declare type YAlignment = keyof typeof YAlignment;
+export type YAlignment = keyof typeof YAlignment;
 /**
  * Components are the core logical units that build Plottable visualizations.
  *

package/build/src/components/component.js

@@ -8,7 +8,7 @@ exports.Component = exports.YAlignment = exports.XAlignment = void 0;
 var d3 = require("d3");
 var RenderController = require("../core/renderController");
 var Utils = require("../utils");
-var lodash_es_1 = require("lodash-es");
+var isElement_1 = require("lodash-es/isElement");
 var coerceD3_1 = require("../utils/coerceD3");
 var makeEnum_1 = require("../utils/makeEnum");
 exports.XAlignment = (0, makeEnum_1.makeEnum)(["left", "center", "right"]);
@@ -195,10 +195,10 @@ var Component = /** @class */ (function () {
         };
         if (this._element != null) {
             this._element.styles({
-                left: originX + "px",
-                height: height + "px",
-                top: originY + "px",
-                width: width + "px",
+                left: "".concat(originX, "px"),
+                height: "".concat(height, "px"),
+                top: "".concat(originY, "px"),
+                width: "".concat(width, "px"),
             });
         }
         if (this._resizeHandler != null) {
@@ -288,7 +288,7 @@ var Component = /** @class */ (function () {
             if (typeof (element) === "string") {
                 selection = d3.select(element);
             }
-            else if ((0, lodash_es_1.isElement)(element)) {
+            else if ((0, isElement_1.default)(element)) {
                 selection = d3.select(element);
             }
             else {

package/build/src/components/componentContainer.js

@@ -13,7 +13,7 @@ var component_1 = require("./component");
  * It will not do anything if instantiated directly.
  */
 var ComponentContainer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentContainer, _super);
+    tslib_1.__extends(ComponentContainer, _super);
     function ComponentContainer() {
         var _this = _super.call(this) || this;
         _this._detachCallback = function (component) { return _this.remove(component); };

package/build/src/components/dragBoxLayer.d.ts

@@ -6,7 +6,7 @@ import * as d3 from "d3";
 import { Bounds } from "../core/interfaces";
 import * as Interactions from "../interactions";
 import { SelectionBoxLayer } from "./selectionBoxLayer";
-export declare type DragBoxCallback = (bounds: Bounds) => void;
+export type DragBoxCallback = (bounds: Bounds) => void;
 export declare class DragBoxLayer extends SelectionBoxLayer {
     private _dragInteraction;
     private _detectionEdgeT;

package/build/src/components/dragBoxLayer.js

@@ -12,7 +12,7 @@ var coerceD3_1 = require("../utils/coerceD3");
 var _1 = require("./");
 var selectionBoxLayer_1 = require("./selectionBoxLayer");
 var DragBoxLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DragBoxLayer, _super);
+    tslib_1.__extends(DragBoxLayer, _super);
     /**
      * Constructs a DragBoxLayer.
      *

package/build/src/components/dragLineLayer.js

@@ -10,7 +10,7 @@ var guideLineLayer_1 = require("../components/guideLineLayer");
 var Interactions = require("../interactions");
 var Utils = require("../utils");
 var DragLineLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DragLineLayer, _super);
+    tslib_1.__extends(DragLineLayer, _super);
     function DragLineLayer(orientation) {
         var _this = _super.call(this, orientation) || this;
         _this._detectionRadius = 3;

package/build/src/components/gridlines.js

@@ -39,7 +39,7 @@ function gridPositionFactory(scale, between, orderedTicks) {
     };
 }
 var Gridlines = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Gridlines, _super);
+    tslib_1.__extends(Gridlines, _super);
     /**
      * @constructor
      * @param {Scale} xScale The scale to base the x gridlines on. Pass null if no gridlines are desired.

package/build/src/components/group.js

@@ -9,7 +9,7 @@ var tslib_1 = require("tslib");
 var Utils = require("../utils");
 var componentContainer_1 = require("./componentContainer");
 var Group = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Group, _super);
+    tslib_1.__extends(Group, _super);
     /**
      * Constructs a Group.
      *

package/build/src/components/guideLineLayer.js

@@ -14,7 +14,7 @@ var PropertyMode;
     PropertyMode[PropertyMode["PIXEL"] = 1] = "PIXEL";
 })(PropertyMode || (PropertyMode = {}));
 var GuideLineLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(GuideLineLayer, _super);
+    tslib_1.__extends(GuideLineLayer, _super);
     function GuideLineLayer(orientation) {
         var _this = _super.call(this) || this;
         _this._mode = PropertyMode.VALUE;

package/build/src/components/index.js

@@ -5,17 +5,17 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-(0, tslib_1.__exportStar)(require("./dragBoxLayer"), exports);
-(0, tslib_1.__exportStar)(require("./dragLineLayer"), exports);
-(0, tslib_1.__exportStar)(require("./gridlines"), exports);
-(0, tslib_1.__exportStar)(require("./group"), exports);
-(0, tslib_1.__exportStar)(require("./guideLineLayer"), exports);
-(0, tslib_1.__exportStar)(require("./interpolatedColorLegend"), exports);
-(0, tslib_1.__exportStar)(require("./label"), exports);
-(0, tslib_1.__exportStar)(require("./legend"), exports);
-(0, tslib_1.__exportStar)(require("./plotGroup"), exports);
-(0, tslib_1.__exportStar)(require("./selectionBoxLayer"), exports);
-(0, tslib_1.__exportStar)(require("./table"), exports);
-(0, tslib_1.__exportStar)(require("./wrappedLabel"), exports);
-(0, tslib_1.__exportStar)(require("./xDragBoxLayer"), exports);
-(0, tslib_1.__exportStar)(require("./yDragBoxLayer"), exports);
+tslib_1.__exportStar(require("./dragBoxLayer"), exports);
+tslib_1.__exportStar(require("./dragLineLayer"), exports);
+tslib_1.__exportStar(require("./gridlines"), exports);
+tslib_1.__exportStar(require("./group"), exports);
+tslib_1.__exportStar(require("./guideLineLayer"), exports);
+tslib_1.__exportStar(require("./interpolatedColorLegend"), exports);
+tslib_1.__exportStar(require("./label"), exports);
+tslib_1.__exportStar(require("./legend"), exports);
+tslib_1.__exportStar(require("./plotGroup"), exports);
+tslib_1.__exportStar(require("./selectionBoxLayer"), exports);
+tslib_1.__exportStar(require("./table"), exports);
+tslib_1.__exportStar(require("./wrappedLabel"), exports);
+tslib_1.__exportStar(require("./xDragBoxLayer"), exports);
+tslib_1.__exportStar(require("./yDragBoxLayer"), exports);

package/build/src/components/interpolatedColorLegend.js

@@ -12,7 +12,7 @@ var Formatters = require("../core/formatters");
 var Utils = require("../utils");
 var component_1 = require("./component");
 var InterpolatedColorLegend = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(InterpolatedColorLegend, _super);
+    tslib_1.__extends(InterpolatedColorLegend, _super);
     /**
      * Creates an InterpolatedColorLegend.
      *

package/build/src/components/label.d.ts

@@ -5,7 +5,7 @@
 import * as Typesettable from "typesettable";
 import { SimpleSelection, SpaceRequest } from "../core/interfaces";
 import { Component } from "./component";
-export declare type LabelFontSizePx = 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+export type LabelFontSizePx = 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 export declare class Label extends Component {
     static _MIN_FONT_SIZE_PX: LabelFontSizePx;
     static _MAX_FONT_SIZE_PX: LabelFontSizePx;

package/build/src/components/label.js

@@ -9,7 +9,7 @@ var tslib_1 = require("tslib");
 var Typesettable = require("typesettable");
 var component_1 = require("./component");
 var Label = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Label, _super);
+    tslib_1.__extends(Label, _super);
     /**
      * A Label is a Component that displays a single line of text.
      *
@@ -130,7 +130,7 @@ var Label = /** @class */ (function (_super) {
 }(component_1.Component));
 exports.Label = Label;
 var TitleLabel = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TitleLabel, _super);
+    tslib_1.__extends(TitleLabel, _super);
     /**
      * @constructor
      * @param {string} [text]
@@ -146,7 +146,7 @@ var TitleLabel = /** @class */ (function (_super) {
 }(Label));
 exports.TitleLabel = TitleLabel;
 var AxisLabel = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AxisLabel, _super);
+    tslib_1.__extends(AxisLabel, _super);
     /**
      * @constructor
      * @param {string} [text]

package/build/src/components/legend.js

@@ -180,7 +180,7 @@ var LegendTable = /** @class */ (function () {
     return LegendTable;
 }());
 var Legend = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Legend, _super);
+    tslib_1.__extends(Legend, _super);
     /**
      * The Legend consists of a series of entries, each with a color and label taken from the Color Scale.
      *
@@ -366,12 +366,12 @@ var Legend = /** @class */ (function (_super) {
                 var columnBounds = table.getColumnBounds(rowIndex, columnIndex);
                 var withinColumn = Utils.Math.within(p, columnBounds);
                 if (withinColumn) {
-                    var rowElement = _this.content().selectAll("." + Legend.LEGEND_ROW_CLASS).nodes()[rowIndex];
+                    var rowElement = _this.content().selectAll(".".concat(Legend.LEGEND_ROW_CLASS)).nodes()[rowIndex];
                     // HACKHACK The 2.x API chooses the symbol element as the "selection" to return, regardless of what
                     // was actually selected
                     var entryElement = d3.select(rowElement)
-                        .selectAll("." + Legend.LEGEND_ENTRY_CLASS).nodes()[Math.floor(columnIndex / 2)];
-                    var symbolElement = d3.select(entryElement).select("." + Legend.LEGEND_SYMBOL_CLASS);
+                        .selectAll(".".concat(Legend.LEGEND_ENTRY_CLASS)).nodes()[Math.floor(columnIndex / 2)];
+                    var symbolElement = d3.select(entryElement).select(".".concat(Legend.LEGEND_SYMBOL_CLASS));
                     // HACKHACK The 2.x API returns the center {x, y} of the symbol as the position.
                     var rowTranslate = Utils.DOM.getTranslateValues(d3.select(rowElement));
                     var symbolTranslate = Utils.DOM.getTranslateValues(symbolElement);
@@ -404,7 +404,7 @@ var Legend = /** @class */ (function (_super) {
         rowsUpdate.exit().remove();
         rows.attr("transform", function (row, rowIndex) {
             var rowBounds = table.getRowBounds(rowIndex);
-            return "translate(" + rowBounds.topLeft.x + ", " + rowBounds.topLeft.y + ")";
+            return "translate(".concat(rowBounds.topLeft.x, ", ").concat(rowBounds.topLeft.y, ")");
         });
         var self = this;
         rows.each(function (row, rowIndex) {
@@ -412,7 +412,7 @@ var Legend = /** @class */ (function (_super) {
             for (var i = 0; i < row.columns.length; i += 2) {
                 symbolEntryPairs.push([row.columns[i], row.columns[i + 1]]);
             }
-            var entriesUpdate = d3.select(this).selectAll("g." + Legend.LEGEND_ENTRY_CLASS).data(symbolEntryPairs);
+            var entriesUpdate = d3.select(this).selectAll("g.".concat(Legend.LEGEND_ENTRY_CLASS)).data(symbolEntryPairs);
             var entriesEnter = entriesUpdate
                 .enter()
                 .append("g")
@@ -427,7 +427,7 @@ var Legend = /** @class */ (function (_super) {
                 var symbol = symbolEntryPair[0];
                 var columnIndex = table.rows[rowIndex].columns.indexOf(symbol);
                 var columnBounds = table.getColumnBounds(rowIndex, columnIndex);
-                return "translate(" + (columnBounds.topLeft.x + symbol.width / 2) + ", " + symbol.height / 2 + ")";
+                return "translate(".concat(columnBounds.topLeft.x + symbol.width / 2, ", ").concat(symbol.height / 2, ")");
             })
                 .attr("fill", function (symbolEntryPair) { return self._colorScale.scale(symbolEntryPair[0].data.name); })
                 .attr("opacity", function (symbolEntryPair, _columnIndex) {

package/build/src/components/plotGroup.js

@@ -10,7 +10,7 @@ var plot_1 = require("../plots/plot");
 var Utils = require("../utils");
 var group_1 = require("./group");
 var PlotGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PlotGroup, _super);
+    tslib_1.__extends(PlotGroup, _super);
     function PlotGroup() {
         return _super !== null && _super.apply(this, arguments) || this;
     }

package/build/src/components/selectionBoxLayer.js

@@ -12,9 +12,9 @@ var PropertyMode;
 (function (PropertyMode) {
     PropertyMode[PropertyMode["VALUE"] = 0] = "VALUE";
     PropertyMode[PropertyMode["PIXEL"] = 1] = "PIXEL";
-})(PropertyMode = exports.PropertyMode || (exports.PropertyMode = {}));
+})(PropertyMode || (exports.PropertyMode = PropertyMode = {}));
 var SelectionBoxLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SelectionBoxLayer, _super);
+    tslib_1.__extends(SelectionBoxLayer, _super);
     function SelectionBoxLayer() {
         var _this = _super.call(this) || this;
         _this._boxVisible = false;

package/build/src/components/table.js

@@ -10,7 +10,7 @@ var d3 = require("d3");
 var Utils = require("../utils");
 var componentContainer_1 = require("./componentContainer");
 var Table = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Table, _super);
+    tslib_1.__extends(Table, _super);
     /**
      * A Table combines Components in the form of a grid. A
      * common case is combining a y-axis, x-axis, and the plotted data via

package/build/src/components/wrappedLabel.js

@@ -9,7 +9,7 @@ var tslib_1 = require("tslib");
 var label_1 = require("./label");
 var DEFAULT_MAX_LINES = 2;
 var WrappedLabel = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(WrappedLabel, _super);
+    tslib_1.__extends(WrappedLabel, _super);
     function WrappedLabel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._maxLines = DEFAULT_MAX_LINES;

package/build/src/components/xDragBoxLayer.js

@@ -8,7 +8,7 @@ exports.XDragBoxLayer = void 0;
 var tslib_1 = require("tslib");
 var dragBoxLayer_1 = require("./dragBoxLayer");
 var XDragBoxLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(XDragBoxLayer, _super);
+    tslib_1.__extends(XDragBoxLayer, _super);
     /**
      * An XDragBoxLayer is a DragBoxLayer whose size can only be set in the X-direction.
      * The y-values of the bounds() are always set to 0 and the height() of the XDragBoxLayer.

package/build/src/components/yDragBoxLayer.js

@@ -8,7 +8,7 @@ exports.YDragBoxLayer = void 0;
 var tslib_1 = require("tslib");
 var dragBoxLayer_1 = require("./dragBoxLayer");
 var YDragBoxLayer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(YDragBoxLayer, _super);
+    tslib_1.__extends(YDragBoxLayer, _super);
     /**
      * A YDragBoxLayer is a DragBoxLayer whose size can only be set in the Y-direction.
      * The x-values of the bounds() are always set to 0 and the width() of the YDragBoxLayer.

package/build/src/core/dataset.d.ts

@@ -2,7 +2,7 @@
  * Copyright 2014-present Palantir Technologies
  * @license MIT
  */
-export declare type DatasetCallback = (dataset: Dataset) => void;
+export type DatasetCallback = (dataset: Dataset) => void;
 export declare class Dataset {
     private _data;
     private _metadata;

package/build/src/core/formatters.d.ts

@@ -10,7 +10,7 @@ import { Dataset } from "./dataset";
  * The value will be different for each use of the formatter - check the documentation of individual
  * methods to see what will be passed into the formatter.
  */
-export declare type Formatter = (value: any) => string;
+export type Formatter = (value: any) => string;
 /**
  * A formatter function that will be passed the value to format as well as the underlying datum, index, and
  * dataset that the value came from. Datum-backed visual elements that display labels, such as Bar Plot bars
@@ -19,7 +19,7 @@ export declare type Formatter = (value: any) => string;
  * The value will be different for each use of the formatter - check the documentation of individual
  * methods to see what will be passed into the formatter.
  */
-export declare type DatumFormatter = (value: any, datum: any, index: number, dataset: Dataset) => string;
+export type DatumFormatter = (value: any, datum: any, index: number, dataset: Dataset) => string;
 /**
  * Creates a formatter for currency values.
  *