ag-charts-community - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/cjs/axis.d.ts

@@ -126,3 +126,7 @@ import Scale from "./scale/scale";
     constructor(scale: S);
+    protected updateRange(): void;
+    protected requestedRange: number[];
     range: number[];
+    protected _visibleRange: number[];
+    visibleRange: number[];
     domain: D[];
@@ -129,0 +133,0 @@ private tickFormatter?;

dist/cjs/axis.js

@@ -128,2 +128,3 @@ "use strict";
         this.rotation = 0; // axis rotation angle in degrees
+        this._visibleRange = [0, 1];
         this._title = undefined;
@@ -153,2 +154,3 @@ /**
         this.scale = scale;
+        this.requestedRange = scale.range.slice();
         this.groupSelection = selection_1.Selection.select(this.group).selectAll();
@@ -160,8 +162,16 @@ this.label.onFormatChange = this.onTickFormatChange.bind(this);
     }
+    Axis.prototype.updateRange = function () {
+        var _a = this, rr = _a.requestedRange, vr = _a.visibleRange, scale = _a.scale;
+        var span = (rr[1] - rr[0]) / (vr[1] - vr[0]);
+        var shift = span * vr[0];
+        var start = rr[0] - shift;
+        scale.range = [start, start + span];
+    };
     Object.defineProperty(Axis.prototype, "range", {
         get: function () {
-            return this.scale.range;
+            return this.requestedRange.slice();
         },
         set: function (value) {
-            this.scale.range = value;
+            this.requestedRange = value.slice();
+            this.updateRange();
         },
@@ -171,8 +181,26 @@ enumerable: true,
     });
+    Object.defineProperty(Axis.prototype, "visibleRange", {
+        get: function () {
+            return this._visibleRange.slice();
+        },
+        set: function (value) {
+            if (value && value.length === 2) {
+                var min = value[0], max = value[1];
+                min = Math.max(0, min);
+                max = Math.min(1, max);
+                min = Math.min(min, max);
+                max = Math.max(min, max);
+                this._visibleRange = [min, max];
+                this.updateRange();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Axis.prototype, "domain", {
         get: function () {
-            return this.scale.domain;
+            return this.scale.domain.slice();
         },
         set: function (value) {
-            this.scale.domain = value;
+            this.scale.domain = value.slice();
         },
@@ -259,3 +287,5 @@ enumerable: true,
         var _this = this;
-        var _a = this, group = _a.group, scale = _a.scale, tick = _a.tick, label = _a.label, gridStyle = _a.gridStyle;
+        var _a = this, group = _a.group, scale = _a.scale, tick = _a.tick, label = _a.label, gridStyle = _a.gridStyle, requestedRange = _a.requestedRange;
+        var requestedRangeMin = Math.min(requestedRange[0], requestedRange[1]);
+        var requestedRangeMax = Math.max(requestedRange[0], requestedRange[1]);
         var rotation = angle_1.toRadians(this.rotation);
@@ -304,3 +334,8 @@ var parallelLabels = label.parallel;
         groupSelection
-            .attrFn('translationY', function (_, datum) { return Math.round(scale.convert(datum) + halfBandwidth); });
+            .attrFn('translationY', function (_, datum) {
+            return Math.round(scale.convert(datum) + halfBandwidth);
+        })
+            .attrFn('visible', function (node) {
+            return node.translationY >= requestedRangeMin && node.translationY <= requestedRangeMax;
+        });
         groupSelection.selectByTag(Tags.Tick)
@@ -393,4 +428,4 @@ .each(function (line) {
         lineNode.x2 = 0;
-        lineNode.y1 = scale.range[0];
-        lineNode.y2 = scale.range[scale.range.length - 1];
+        lineNode.y1 = requestedRange[0];
+        lineNode.y2 = requestedRange[1];
         lineNode.strokeWidth = this.line.width;
@@ -409,2 +444,3 @@ lineNode.stroke = this.line.color;
             titleNode.x = titleRotationFlag * sideFlag * (lineNode.y1 + lineNode.y2) / 2;
+            titleNode.x = titleRotationFlag * sideFlag * (requestedRange[0] + requestedRange[1]) / 2;
             if (sideFlag === -1) {
@@ -411,0 +447,0 @@ titleNode.y = titleRotationFlag * (-padding - bbox.width + Math.max(bbox.x + bbox.width, 0));

dist/cjs/canvas/hdpiCanvas.d.ts

@@ -28,9 +28,8 @@ declare type Size = {
     /**
-     * Updates the pixel ratio of the Canvas element with the given value,
+     * Changes the pixel ratio of the Canvas element to the given value,
      * or uses the window.devicePixelRatio (default), then resizes the Canvas
      * element accordingly (default).
-     * @param ratio
-     * @param resize
      */
-    updatePixelRatio(ratio?: number, resize?: boolean): void;
+    setPixelRatio(ratio?: number): void;
+    pixelated: boolean;
     private _width;
@@ -40,3 +39,3 @@ readonly width: number;
     readonly height: number;
-    resize(width: number, height: number, callbackWhenDone?: () => void): void;
+    resize(width: number, height: number): void;
     private static _textMeasuringContext?;
@@ -60,4 +59,4 @@ private static readonly textMeasuringContext;
     private static measureSvgText;
-    private static makeHdpiOverrides;
+    static overrideScale(ctx: CanvasRenderingContext2D, scale: number): void;
 }
 export {};

dist/cjs/canvas/hdpiCanvas.js

@@ -20,7 +20,7 @@ "use strict";
         this.element = document.createElement('canvas');
+        this.context = this.element.getContext('2d');
         this.element.style.userSelect = 'none';
         this.element.style.display = 'block';
-        this.context = this.element.getContext('2d');
-        this.updatePixelRatio(0, false);
-        this.resize(this._width = width, this._height = height);
+        this.setPixelRatio();
+        this.resize(width, height);
     }
@@ -100,11 +100,7 @@ Object.defineProperty(HdpiCanvas.prototype, "container", {
     /**
-     * Updates the pixel ratio of the Canvas element with the given value,
+     * Changes the pixel ratio of the Canvas element to the given value,
      * or uses the window.devicePixelRatio (default), then resizes the Canvas
      * element accordingly (default).
-     * @param ratio
-     * @param resize
      */
-    HdpiCanvas.prototype.updatePixelRatio = function (ratio, resize) {
-        if (ratio === void 0) { ratio = 0; }
-        if (resize === void 0) { resize = true; }
+    HdpiCanvas.prototype.setPixelRatio = function (ratio) {
         var pixelRatio = ratio || window.devicePixelRatio;
@@ -114,28 +110,16 @@ if (pixelRatio === this.pixelRatio) {
         }
-        var canvas = this.element;
-        var ctx = this.context;
-        var overrides = HdpiCanvas.makeHdpiOverrides(pixelRatio);
-        for (var name_1 in overrides) {
-            if (overrides.hasOwnProperty(name_1)) {
-                // Save native methods under prefixed names,
-                // if this hasn't been done by the previous overrides already.
-                if (!ctx['$' + name_1]) {
-                    ctx['$' + name_1] = ctx[name_1];
-                }
-                // Replace native methods with overrides,
-                // or previous overrides with the new ones.
-                ctx[name_1] = overrides[name_1];
-            }
-        }
-        if (resize) {
-            var logicalWidth = canvas.width / this.pixelRatio;
-            var logicalHeight = canvas.height / this.pixelRatio;
-            canvas.width = Math.round(logicalWidth * pixelRatio);
-            canvas.height = Math.round(logicalHeight * pixelRatio);
-            canvas.style.width = Math.round(logicalWidth) + 'px';
-            canvas.style.height = Math.round(logicalHeight) + 'px';
-            ctx.resetTransform(); // should be called every time Canvas size changes
-        }
+        HdpiCanvas.overrideScale(this.context, pixelRatio);
         this._pixelRatio = pixelRatio;
+        this.resize(this.width, this.height);
     };
+    Object.defineProperty(HdpiCanvas.prototype, "pixelated", {
+        get: function () {
+            return this.element.style.imageRendering === 'pixelated';
+        },
+        set: function (value) {
+            this.element.style.imageRendering = value ? 'pixelated' : 'auto';
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(HdpiCanvas.prototype, "width", {
@@ -155,17 +139,11 @@ get: function () {
     });
-    HdpiCanvas.prototype.resize = function (width, height, callbackWhenDone) {
-        var _this = this;
+    HdpiCanvas.prototype.resize = function (width, height) {
+        var _a = this, element = _a.element, context = _a.context, pixelRatio = _a.pixelRatio;
+        element.width = Math.round(width * pixelRatio);
+        element.height = Math.round(height * pixelRatio);
+        element.style.width = width + 'px';
+        element.style.height = height + 'px';
+        context.resetTransform();
         this._width = width;
         this._height = height;
-        requestAnimationFrame(function () {
-            var _a = _this, element = _a.element, context = _a.context, pixelRatio = _a.pixelRatio;
-            element.width = Math.round(width * pixelRatio);
-            element.height = Math.round(height * pixelRatio);
-            element.style.width = Math.round(width) + 'px';
-            element.style.height = Math.round(height) + 'px';
-            context.resetTransform();
-            // The canvas being resized is asynchronous. For the case where we
-            // need to do something after it is resized, return a promise.
-            callbackWhenDone && callbackWhenDone();
-        });
     };
@@ -287,5 +265,5 @@ Object.defineProperty(HdpiCanvas, "textMeasuringContext", {
     };
-    HdpiCanvas.makeHdpiOverrides = function (pixelRatio) {
+    HdpiCanvas.overrideScale = function (ctx, scale) {
         var depth = 0;
-        return {
+        var overrides = {
             save: function () {
@@ -302,3 +280,3 @@ this.$save();
             setTransform: function (a, b, c, d, e, f) {
-                this.$setTransform(a * pixelRatio, b * pixelRatio, c * pixelRatio, d * pixelRatio, e * pixelRatio, f * pixelRatio);
+                this.$setTransform(a * scale, b * scale, c * scale, d * scale, e * scale, f * scale);
             },
@@ -308,3 +286,3 @@ resetTransform: function () {
                 // and doesn't work in IE11 and Edge 44.
-                this.$setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+                this.$setTransform(scale, 0, 0, scale, 0, 0);
                 this.save();
@@ -317,2 +295,14 @@ depth = 0;
         };
+        for (var name_1 in overrides) {
+            if (overrides.hasOwnProperty(name_1)) {
+                // Save native methods under prefixed names,
+                // if this hasn't been done by the previous overrides already.
+                if (!ctx['$' + name_1]) {
+                    ctx['$' + name_1] = ctx[name_1];
+                }
+                // Replace native methods with overrides,
+                // or previous overrides with the new ones.
+                ctx[name_1] = overrides[name_1];
+            }
+        }
     };
@@ -319,0 +309,0 @@ HdpiCanvas.textSizeCache = {};

dist/cjs/chart/axis/groupedCategoryAxis.d.ts

@@ -33,3 +33,4 @@ import { Group } from "../../scene/group";
     domain: any[];
-    range: [number, number];
+    range: number[];
+    protected updateRange(): void;
     private resizeTickTree;
@@ -36,0 +37,0 @@ readonly translation: {

dist/cjs/chart/axis/groupedCategoryAxis.js

@@ -77,2 +77,3 @@ "use strict";
         scale.paddingInner = scale.paddingOuter * 2;
+        _this.requestedRange = scale.range.slice();
         tickScale.paddingInner = 1;
@@ -105,8 +106,7 @@ tickScale.paddingOuter = 0;
         get: function () {
-            return this.scale.range;
+            return this.requestedRange.slice();
         },
         set: function (value) {
-            this.scale.range = value;
-            this.tickScale.range = value;
-            this.resizeTickTree();
+            this.requestedRange = value.slice();
+            this.updateRange();
         },
@@ -116,2 +116,10 @@ enumerable: true,
     });
+    GroupedCategoryAxis.prototype.updateRange = function () {
+        var _a = this, rr = _a.requestedRange, vr = _a.visibleRange, scale = _a.scale;
+        var span = (rr[1] - rr[0]) / (vr[1] - vr[0]);
+        var shift = span * vr[0];
+        var start = rr[0] - shift;
+        this.tickScale.range = scale.range = [start, start + span];
+        this.resizeTickTree();
+    };
     GroupedCategoryAxis.prototype.resizeTickTree = function () {
@@ -166,3 +174,3 @@ var s = this.scale;
         var _this = this;
-        var _a = this, group = _a.group, scale = _a.scale, label = _a.label, tickScale = _a.tickScale;
+        var _a = this, group = _a.group, scale = _a.scale, label = _a.label, tickScale = _a.tickScale, requestedRange = _a.requestedRange;
         var rangeStart = scale.range[0];
@@ -231,2 +239,5 @@ var rangeEnd = scale.range[1];
             //     : 'middle';
+            node.textAlign = 'center';
+            node.translationX = datum.screenY - label.fontSize * 0.25;
+            node.translationY = datum.screenX;
             if (title && index === 0) { // use the phantom root as the axis title
@@ -248,6 +259,6 @@ node.text = title.text;
                     : String(datum.label);
+                node.visible =
+                    datum.screenX >= requestedRange[0] &&
+                        datum.screenX <= requestedRange[1];
             }
-            node.textAlign = 'center';
-            node.translationX = datum.screenY - label.fontSize * 0.25;
-            node.translationY = datum.screenX;
             var bbox = node.computeBBox();
@@ -323,3 +334,4 @@ if (bbox && bbox.width > maxLeafLabelWidth) {
         this.separatorSelection = separatorSelection;
-        separatorSelection.each(function (line, datum) {
+        var epsilon = 0.0000001;
+        separatorSelection.each(function (line, datum, i) {
             line.x1 = datum.x1;
@@ -329,2 +341,3 @@ line.x2 = datum.x2;
             line.y2 = datum.y;
+            line.visible = datum.y >= requestedRange[0] - epsilon && datum.y <= requestedRange[1] + epsilon;
             line.stroke = _this.tick.color;
@@ -351,4 +364,4 @@ line.fill = undefined;
             line.x2 = x;
-            line.y1 = rangeStart;
-            line.y2 = rangeEnd;
+            line.y1 = requestedRange[0];
+            line.y2 = requestedRange[1];
             line.strokeWidth = _this.line.width;
@@ -368,3 +381,4 @@ line.stroke = _this.line.color;
                 line.y2 = y;
-                line.visible = Math.abs(line.parent.translationY - rangeStart) > 1;
+                line.visible = y >= requestedRange[0] && y <= requestedRange[1] &&
+                    Math.abs(line.parent.translationY - rangeStart) > 1;
                 var style = styles_1[index % styleCount_1];
@@ -371,0 +385,0 @@ line.stroke = style.stroke;

dist/cjs/chart/cartesianChart.d.ts

 import { Chart } from "./chart";
-import { Group } from "../scene/group";
 import { Series } from "./series/series";
+import { ClipRect } from "../scene/clipRect";
+import { Navigator } from "./navigator/navigator";
 export declare class CartesianChart extends Chart {
@@ -9,7 +10,12 @@ static className: string;
     private _seriesRoot;
-    readonly seriesRoot: Group;
+    readonly seriesRoot: ClipRect;
+    readonly navigator: Navigator;
     performLayout(): void;
     protected initSeries(series: Series): void;
     protected freeSeries(series: Series): void;
+    protected onMouseDown(event: MouseEvent): void;
+    protected onMouseMove(event: MouseEvent): void;
+    protected onMouseUp(event: MouseEvent): void;
+    protected onMouseOut(event: MouseEvent): void;
     updateAxes(): void;
 }

dist/cjs/chart/cartesianChart.js

@@ -18,3 +18,2 @@ "use strict";
 var array_1 = require("../util/array");
-var group_1 = require("../scene/group");
 var categoryAxis_1 = require("./axis/categoryAxis");
@@ -24,3 +23,4 @@ var groupedCategoryAxis_1 = require("./axis/groupedCategoryAxis");
 var bbox_1 = require("../scene/bbox");
-// import { ClipRect } from "../scene/clipRect";
+var clipRect_1 = require("../scene/clipRect");
+var navigator_1 = require("./navigator/navigator");
 var CartesianChart = /** @class */ (function (_super) {
@@ -31,3 +31,4 @@ __extends(CartesianChart, _super);
         var _this = _super.call(this, document) || this;
-        _this._seriesRoot = new group_1.Group();
+        _this._seriesRoot = new clipRect_1.ClipRect();
+        _this.navigator = new navigator_1.Navigator(_this);
         // Prevent the scene from rendering chart components in an invalid state
@@ -37,4 +38,5 @@ // (before first layout is performed).
         var root = _this.scene.root;
-        root.append(_this._seriesRoot);
+        root.append(_this.seriesRoot);
         root.append(_this.legend.group);
+        _this.navigator.enabled = false;
         return _this;
@@ -54,3 +56,3 @@ }
         this.scene.root.visible = true;
-        var _a = this, width = _a.width, height = _a.height, axes = _a.axes, legend = _a.legend;
+        var _a = this, width = _a.width, height = _a.height, axes = _a.axes, legend = _a.legend, navigator = _a.navigator;
         var shrinkRect = new bbox_1.BBox(0, 0, width, height);
@@ -89,2 +91,6 @@ this.positionCaptions();
         shrinkRect.height -= padding.top + captionAutoPadding + padding.bottom;
+        if (navigator.enabled) {
+            shrinkRect.height -= navigator.height + navigator.margin;
+        }
+        var bottomAxesHeight = 0;
         axes.forEach(function (axis) {
@@ -107,2 +113,3 @@ axis.group.visible = true;
                     shrinkRect.height -= axisThickness;
+                    bottomAxesHeight += axisThickness;
                     axis.translation.y = Math.floor(shrinkRect.y + shrinkRect.height + 1);
@@ -150,3 +157,2 @@ break;
             }
-            // axis.tick.count = Math.abs(axis.range[1] - axis.range[0]) > 200 ? 10 : 5;
         });
@@ -159,8 +165,12 @@ this.seriesRect = shrinkRect;
         });
-        // When seriesRoot is a ClipRect:
-        // const { seriesRoot } = this;
-        // seriesRoot.x = shrinkRect.x;
-        // seriesRoot.y = shrinkRect.y;
-        // seriesRoot.width = shrinkRect.width;
-        // seriesRoot.height = shrinkRect.height;
+        var seriesRoot = this.seriesRoot;
+        seriesRoot.x = shrinkRect.x;
+        seriesRoot.y = shrinkRect.y;
+        seriesRoot.width = shrinkRect.width;
+        seriesRoot.height = shrinkRect.height;
+        if (navigator.enabled) {
+            navigator.x = shrinkRect.x;
+            navigator.y = shrinkRect.y + shrinkRect.height + bottomAxesHeight + navigator.margin;
+            navigator.width = shrinkRect.width;
+        }
         this.axes.forEach(function (axis) { return axis.update(); });
@@ -176,2 +186,18 @@ };
     };
+    CartesianChart.prototype.onMouseDown = function (event) {
+        _super.prototype.onMouseDown.call(this, event);
+        this.navigator.onMouseDown(event);
+    };
+    CartesianChart.prototype.onMouseMove = function (event) {
+        _super.prototype.onMouseMove.call(this, event);
+        this.navigator.onMouseMove(event);
+    };
+    CartesianChart.prototype.onMouseUp = function (event) {
+        _super.prototype.onMouseUp.call(this, event);
+        this.navigator.onMouseUp(event);
+    };
+    CartesianChart.prototype.onMouseOut = function (event) {
+        _super.prototype.onMouseOut.call(this, event);
+        this.navigator.onMouseUp(event);
+    };
     CartesianChart.prototype.updateAxes = function () {
@@ -178,0 +204,0 @@ this.axes.forEach(function (axis) {

dist/cjs/chart/chart.d.ts

@@ -28,3 +28,2 @@ import { Scene } from "../scene/scene";
     data: any[];
-    private pendingSize?;
     width: number;
@@ -49,2 +48,4 @@ height: number;
     axes: ChartAxis[];
+    protected attachAxis(axis: ChartAxis): void;
+    protected detachAxis(axis: ChartAxis): void;
     protected _series: Series[];
@@ -81,4 +82,4 @@ series: Series[];
     protected positionLegend(): void;
-    private setupDomListeners;
-    private cleanupDomListeners;
+    protected setupDomListeners(chartElement: HTMLCanvasElement): void;
+    protected cleanupDomListeners(chartElement: HTMLCanvasElement): void;
     protected seriesRect?: BBox;
@@ -88,5 +89,12 @@ private pickSeriesNode;
     private pickClosestSeriesNodeDatum;
-    private readonly onMouseMove;
-    private readonly onMouseOut;
-    private readonly onClick;
+    private _onMouseDown;
+    private _onMouseUp;
+    private _onMouseMove;
+    private _onMouseOut;
+    private _onClick;
+    protected onMouseMove(event: MouseEvent): void;
+    protected onMouseDown(event: MouseEvent): void;
+    protected onMouseUp(event: MouseEvent): void;
+    protected onMouseOut(event: MouseEvent): void;
+    protected onClick(event: MouseEvent): void;
     private checkSeriesNodeClick;
@@ -93,0 +101,0 @@ private onSeriesNodeClick;

dist/cjs/chart/chart.js

@@ -65,8 +65,3 @@ "use strict";
         _this._performLayout = function () {
-            var _a;
             _this.layoutCallbackId = 0;
-            if (_this.pendingSize) {
-                (_a = _this.scene).resize.apply(_a, _this.pendingSize);
-                _this.pendingSize = undefined;
-            }
             _this.background.width = _this.width;
@@ -80,64 +75,7 @@ _this.background.height = _this.height;
         _this.dataCallbackId = 0;
-        _this.onMouseMove = function (event) {
-            var _a = _this, lastPick = _a.lastPick, tooltipTracking = _a.tooltipTracking;
-            var pick = _this.pickSeriesNode(event.offsetX, event.offsetY);
-            var nodeDatum;
-            if (pick && pick.node instanceof shape_1.Shape) {
-                var node = pick.node;
-                nodeDatum = node.datum;
-                if (lastPick && lastPick.datum === nodeDatum) {
-                    lastPick.node = node;
-                }
-                // Marker nodes will have the `point` info in their datums.
-                // Highlight if not a marker node or, if not in the tracking mode, highlight markers too.
-                if ((!node.datum.point || !tooltipTracking)) {
-                    if (!lastPick // cursor moved from empty space to a node
-                        || lastPick.node !== node) { // cursor moved from one node to another
-                        _this.onSeriesDatumPick(event, node.datum, node);
-                    }
-                    else if (pick.series.tooltipEnabled) { // cursor moved within the same node
-                        _this.showTooltip(event);
-                    }
-                    // A non-marker node (takes precedence over marker nodes) was highlighted.
-                    // Or we are not in the tracking mode.
-                    // Either way, we are done at this point.
-                    return;
-                }
-            }
-            var hideTooltip = false;
-            // In tracking mode a tooltip is shown for the closest rendered datum.
-            // This makes it easier to show tooltips when markers are small and/or plentiful
-            // and also gives the ability to show tooltips even when the series were configured
-            // to not render markers.
-            if (tooltipTracking) {
-                var closestDatum = _this.pickClosestSeriesNodeDatum(event.offsetX, event.offsetY);
-                if (closestDatum && closestDatum.point) {
-                    var _b = closestDatum.point, x = _b.x, y = _b.y;
-                    var canvas = _this.scene.canvas;
-                    var point = closestDatum.series.group.inverseTransformPoint(x, y);
-                    var canvasRect = canvas.element.getBoundingClientRect();
-                    _this.onSeriesDatumPick({
-                        pageX: Math.round(canvasRect.left + window.pageXOffset + point.x),
-                        pageY: Math.round(canvasRect.top + window.pageYOffset + point.y)
-                    }, closestDatum, nodeDatum === closestDatum ? pick.node : undefined);
-                }
-                else {
-                    hideTooltip = true;
-                }
-            }
-            if (lastPick && (hideTooltip || !tooltipTracking)) {
-                // cursor moved from a non-marker node to empty space
-                // lastPick.datum.series.dehighlightDatum();
-                _this.dehighlightDatum();
-                _this.hideTooltip();
-                _this.lastPick = undefined;
-            }
-        };
-        _this.onMouseOut = function (_) {
-            _this.toggleTooltip(false);
-        };
-        _this.onClick = function (event) {
-            _this.checkSeriesNodeClick();
-            _this.checkLegendClick(event);
-        };
+        _this._onMouseDown = _this.onMouseDown.bind(_this);
+        _this._onMouseUp = _this.onMouseUp.bind(_this);
+        _this._onMouseMove = _this.onMouseMove.bind(_this);
+        _this._onMouseOut = _this.onMouseOut.bind(_this);
+        _this._onClick = _this.onClick.bind(_this);
         _this._tooltipClass = Chart.defaultTooltipClass;
@@ -213,3 +151,3 @@ /**
         get: function () {
-            return this.pendingSize ? this.pendingSize[0] : this.scene.width;
+            return this.scene.width;
         },
@@ -219,3 +157,3 @@ set: function (value) {
             if (this.width !== value) {
-                this.pendingSize = [value, this.height];
+                this.scene.resize(value, this.height);
                 this.fireEvent({ type: 'layoutChange' });
@@ -229,3 +167,3 @@ }
         get: function () {
-            return this.pendingSize ? this.pendingSize[1] : this.scene.height;
+            return this.scene.height;
         },
@@ -235,3 +173,3 @@ set: function (value) {
             if (this.height !== value) {
-                this.pendingSize = [this.width, value];
+                this.scene.resize(this.width, value);
                 this.fireEvent({ type: 'layoutChange' });
@@ -254,3 +192,3 @@ }
                         if (size.width !== chart_1.width || size.height !== chart_1.height) {
-                            chart_1.pendingSize = [size.width, size.height];
+                            chart_1.scene.resize(size.width, size.height);
                             chart_1.fireEvent({ type: 'layoutChange' });
@@ -314,7 +252,6 @@ }
             var _this = this;
-            var root = this.scene.root;
-            this._axes.forEach(function (axis) { return root.removeChild(axis.group); });
+            this._axes.forEach(function (axis) { return _this.detachAxis(axis); });
             // make linked axes go after the regular ones (simulates stable sort by `linkedTo` property)
             this._axes = values.filter(function (a) { return !a.linkedTo; }).concat(values.filter(function (a) { return a.linkedTo; }));
-            this._axes.forEach(function (axis) { return root.insertBefore(axis.group, _this.seriesRoot); });
+            this._axes.forEach(function (axis) { return _this.attachAxis(axis); });
             this.axesChanged = true;
@@ -325,2 +262,8 @@ },
     });
+    Chart.prototype.attachAxis = function (axis) {
+        this.scene.root.insertBefore(axis.group, this.seriesRoot);
+    };
+    Chart.prototype.detachAxis = function (axis) {
+        this.scene.root.removeChild(axis.group);
+    };
     Object.defineProperty(Chart.prototype, "series", {
@@ -662,13 +605,20 @@ get: function () {
     Chart.prototype.setupDomListeners = function (chartElement) {
-        chartElement.addEventListener('mousemove', this.onMouseMove);
-        chartElement.addEventListener('mouseout', this.onMouseOut);
-        chartElement.addEventListener('click', this.onClick);
+        chartElement.addEventListener('mousedown', this._onMouseDown);
+        chartElement.addEventListener('mousemove', this._onMouseMove);
+        chartElement.addEventListener('mouseup', this._onMouseUp);
+        chartElement.addEventListener('mouseout', this._onMouseOut);
+        chartElement.addEventListener('click', this._onClick);
     };
     Chart.prototype.cleanupDomListeners = function (chartElement) {
-        chartElement.removeEventListener('mousemove', this.onMouseMove);
-        chartElement.removeEventListener('mouseout', this.onMouseMove);
-        chartElement.removeEventListener('click', this.onClick);
+        chartElement.removeEventListener('mousedown', this._onMouseDown);
+        chartElement.removeEventListener('mousemove', this._onMouseMove);
+        chartElement.removeEventListener('mouseup', this._onMouseUp);
+        chartElement.removeEventListener('mouseout', this._onMouseOut);
+        chartElement.removeEventListener('click', this._onClick);
     };
     // x/y are local canvas coordinates in CSS pixels, not actual pixels
     Chart.prototype.pickSeriesNode = function (x, y) {
+        if (!this.seriesRect || !this.seriesRect.containsPoint(x, y)) {
+            return undefined;
+        }
         var allSeries = this.series;
@@ -722,2 +672,65 @@ var node = undefined;
     };
+    Chart.prototype.onMouseMove = function (event) {
+        var _a = this, lastPick = _a.lastPick, tooltipTracking = _a.tooltipTracking;
+        var pick = this.pickSeriesNode(event.offsetX, event.offsetY);
+        var nodeDatum;
+        if (pick && pick.node instanceof shape_1.Shape) {
+            var node = pick.node;
+            nodeDatum = node.datum;
+            if (lastPick && lastPick.datum === nodeDatum) {
+                lastPick.node = node;
+            }
+            // Marker nodes will have the `point` info in their datums.
+            // Highlight if not a marker node or, if not in the tracking mode, highlight markers too.
+            if ((!node.datum.point || !tooltipTracking)) {
+                if (!lastPick // cursor moved from empty space to a node
+                    || lastPick.node !== node) { // cursor moved from one node to another
+                    this.onSeriesDatumPick(event, node.datum, node);
+                }
+                else if (pick.series.tooltipEnabled) { // cursor moved within the same node
+                    this.showTooltip(event);
+                }
+                // A non-marker node (takes precedence over marker nodes) was highlighted.
+                // Or we are not in the tracking mode.
+                // Either way, we are done at this point.
+                return;
+            }
+        }
+        var hideTooltip = false;
+        // In tracking mode a tooltip is shown for the closest rendered datum.
+        // This makes it easier to show tooltips when markers are small and/or plentiful
+        // and also gives the ability to show tooltips even when the series were configured
+        // to not render markers.
+        if (tooltipTracking) {
+            var closestDatum = this.pickClosestSeriesNodeDatum(event.offsetX, event.offsetY);
+            if (closestDatum && closestDatum.point) {
+                var _b = closestDatum.point, x = _b.x, y = _b.y;
+                var canvas = this.scene.canvas;
+                var point = closestDatum.series.group.inverseTransformPoint(x, y);
+                var canvasRect = canvas.element.getBoundingClientRect();
+                this.onSeriesDatumPick({
+                    pageX: Math.round(canvasRect.left + window.pageXOffset + point.x),
+                    pageY: Math.round(canvasRect.top + window.pageYOffset + point.y)
+                }, closestDatum, nodeDatum === closestDatum ? pick.node : undefined);
+            }
+            else {
+                hideTooltip = true;
+            }
+        }
+        if (lastPick && (hideTooltip || !tooltipTracking)) {
+            // cursor moved from a non-marker node to empty space
+            this.dehighlightDatum();
+            this.hideTooltip();
+            this.lastPick = undefined;
+        }
+    };
+    Chart.prototype.onMouseDown = function (event) { };
+    Chart.prototype.onMouseUp = function (event) { };
+    Chart.prototype.onMouseOut = function (event) {
+        this.toggleTooltip(false);
+    };
+    Chart.prototype.onClick = function (event) {
+        this.checkSeriesNodeClick();
+        this.checkLegendClick(event);
+    };
     Chart.prototype.checkSeriesNodeClick = function () {
@@ -756,3 +769,2 @@ var lastPick = this.lastPick;
         this.highlightDatum(datum);
-        // datum.series.highlightDatum(datum);
         var html = datum.series.tooltipEnabled && datum.series.getTooltipHtml(datum);
@@ -759,0 +771,0 @@ if (html) {

dist/cjs/chart/chartMappings.js

@@ -31,2 +31,5 @@ "use strict";
 var legend_1 = require("./legend");
+var navigator_1 = require("./navigator/navigator");
+var navigatorMask_1 = require("./navigator/navigatorMask");
+var navigatorHandle_1 = require("./navigator/navigatorHandle");
 var palettes_1 = require("./palettes");
@@ -127,2 +130,3 @@ /*
     defaults: {
+        visibleRange: [0, 1],
         gridStyle: [{
@@ -242,5 +246,5 @@ stroke: 'rgba(219, 219, 219, 1)',
                     }] }) }) }, commonChartMappings), { axes: (_b = {},
-            _b[numberAxis_1.NumberAxis.type] = __assign({ meta: __assign({ constructor: numberAxis_1.NumberAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
-            _b[categoryAxis_1.CategoryAxis.type] = __assign({ meta: __assign({ constructor: categoryAxis_1.CategoryAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
-            _b[timeAxis_1.TimeAxis.type] = __assign({ meta: __assign({ constructor: timeAxis_1.TimeAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
+            _b[numberAxis_1.NumberAxis.type] = __assign({ meta: __assign({ constructor: numberAxis_1.NumberAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
+            _b[categoryAxis_1.CategoryAxis.type] = __assign({ meta: __assign({ constructor: categoryAxis_1.CategoryAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
+            _b[timeAxis_1.TimeAxis.type] = __assign({ meta: __assign({ constructor: timeAxis_1.TimeAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
             _b), series: (_c = {},
@@ -301,3 +305,52 @@ _c[lineSeries_1.LineSeries.type] = {
             },
-            _c) }),
+            _c), navigator: {
+            meta: {
+                constructor: navigator_1.Navigator,
+                defaults: {
+                    enabled: false,
+                    height: 30,
+                    min: 0,
+                    max: 1
+                }
+            },
+            mask: {
+                meta: {
+                    constructor: navigatorMask_1.NavigatorMask,
+                    defaults: {
+                        fill: '#999999',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        fillOpacity: 0.2
+                    }
+                }
+            },
+            minHandle: {
+                meta: {
+                    constructor: navigatorHandle_1.NavigatorHandle,
+                    defaults: {
+                        fill: '#f2f2f2',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        width: 8,
+                        height: 16,
+                        gripLineGap: 2,
+                        gripLineLength: 8
+                    }
+                }
+            },
+            maxHandle: {
+                meta: {
+                    constructor: navigatorHandle_1.NavigatorHandle,
+                    defaults: {
+                        fill: '#f2f2f2',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        width: 8,
+                        height: 16,
+                        gripLineGap: 2,
+                        gripLineLength: 8
+                    }
+                }
+            }
+        } }),
     _a[polarChart_1.PolarChart.type] = __assign(__assign({ meta: __assign(__assign({ constructor: polarChart_1.PolarChart }, chartMeta), { defaults: __assign(__assign({}, chartDefaults), { padding: new padding_1.Padding(40) }) }) }, commonChartMappings), { series: (_d = {},
@@ -304,0 +357,0 @@ _d[pieSeries_1.PieSeries.type] = __assign({ meta: {

dist/cjs/chart/marker/square.js

@@ -25,7 +25,8 @@ "use strict";
         var hs = this.size / 2;
+        var _b = this, a = _b.alignment, al = _b.align;
         path.clear();
-        path.moveTo(x - hs, y - hs);
-        path.lineTo(x + hs, y - hs);
-        path.lineTo(x + hs, y + hs);
-        path.lineTo(x - hs, y + hs);
+        path.moveTo(al(a, x - hs), al(a, y - hs));
+        path.lineTo(al(a, x + hs), al(a, y - hs));
+        path.lineTo(al(a, x + hs), al(a, y + hs));
+        path.lineTo(al(a, x - hs), al(a, y + hs));
         path.closePath();
@@ -32,0 +33,0 @@ };

dist/cjs/chartBuilder.d.ts

@@ -1,2 +0,2 @@
-import { ChartOptions, CartesianChartOptions, PolarChartOptions, SeriesOptions, BarSeriesOptions, LineSeriesOptions, ScatterSeriesOptions, AreaSeriesOptions, PieSeriesOptions, HistogramSeriesOptions, LegendOptions, CaptionOptions, FontWeight, DropShadowOptions, AxisOptions, SeriesLabelOptions, MarkerOptions, HighlightOptions, AxisType } from "./chartOptions";
+import { ChartOptions, CartesianChartOptions, PolarChartOptions, SeriesOptions, BarSeriesOptions, LineSeriesOptions, ScatterSeriesOptions, AreaSeriesOptions, PieSeriesOptions, HistogramSeriesOptions, LegendOptions, CaptionOptions, FontWeight, DropShadowOptions, AxisOptions, SeriesLabelOptions, MarkerOptions, HighlightOptions, AxisType, NavigatorOptions, NavigatorHandleOptions, NavigatorMaskOptions } from "./chartOptions";
 import { CartesianChart } from "./chart/cartesianChart";
@@ -21,2 +21,5 @@ import { PolarChart } from "./chart/polarChart";
 import { TimeAxis } from "./chart/axis/timeAxis";
+import { Navigator } from "./chart/navigator/navigator";
+import { NavigatorHandle } from "./chart/navigator/navigatorHandle";
+import { NavigatorMask } from "./chart/navigator/navigatorMask";
 export declare class ChartBuilder {
@@ -39,2 +42,3 @@ private static createCartesianChart;
     static createSeries(options: SeriesOptions): Series;
+    static initCartesianChart<C extends CartesianChart, T extends SeriesOptions>(chart: C, options: CartesianChartOptions<T>): C;
     static initChart<C extends Chart, T extends SeriesOptions>(chart: C, options: ChartOptions<T>): C;
@@ -52,2 +56,5 @@ static initSeries<S extends Series>(series: S, options: SeriesOptions): S;
     static initLegend(legend: Legend, options: LegendOptions): void;
+    static initNavigator(navigator: Navigator, options: NavigatorOptions): void;
+    static initNavigatorMask(mask: NavigatorMask, options: NavigatorMaskOptions): void;
+    static initNavigatorHandle(handle: NavigatorHandle, options: NavigatorHandleOptions): void;
     static initMarker(marker: SeriesMarker, options: MarkerOptions): void;
@@ -54,0 +61,0 @@ static initHighlightStyle(highlightStyle: HighlightStyle, options: HighlightOptions): void;

dist/cjs/chartBuilder.js

@@ -48,3 +48,3 @@ "use strict";
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createAxis(options.yAxis, 'category'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -57,3 +57,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new barSeries_1.BarSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createGroupedCategoryAxis(options.yAxis), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -66,3 +66,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new barSeries_1.BarSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -75,3 +75,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new barSeries_1.BarSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -84,3 +84,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new barSeries_1.BarSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -93,3 +93,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initLineSeries(new lineSeries_1.LineSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -102,3 +102,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initLineSeries(new lineSeries_1.LineSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -111,3 +111,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initScatterSeries(new scatterSeries_1.ScatterSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -120,3 +120,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initAreaSeries(new areaSeries_1.AreaSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -129,3 +129,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initAreaSeries(new areaSeries_1.AreaSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createNumberAxis(options.xAxis), ChartBuilder.createNumberAxis(options.yAxis), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         return chart;
@@ -167,2 +167,8 @@ };
     };
+    ChartBuilder.initCartesianChart = function (chart, options) {
+        if (options.navigator !== undefined) {
+            ChartBuilder.initNavigator(chart.navigator, options.navigator);
+        }
+        return this.initChart(chart, options);
+    };
     ChartBuilder.initChart = function (chart, options) {
@@ -450,2 +456,30 @@ this.setValueIfExists(chart, 'width', options.width);
     };
+    ChartBuilder.initNavigator = function (navigator, options) {
+        this.setValueIfExists(navigator, 'enabled', options.enabled);
+        this.setValueIfExists(navigator, 'height', options.height);
+        this.setValueIfExists(navigator, 'min', options.min);
+        this.setValueIfExists(navigator, 'max', options.max);
+        this.initNavigatorMask(navigator.mask, options.mask);
+        this.initNavigatorHandle(navigator.minHandle, options.minHandle);
+        this.initNavigatorHandle(navigator.maxHandle, options.maxHandle);
+    };
+    ChartBuilder.initNavigatorMask = function (mask, options) {
+        if (options) {
+            this.setValueIfExists(mask, 'fill', options.fill);
+            this.setValueIfExists(mask, 'stroke', options.stroke);
+            this.setValueIfExists(mask, 'strokeWidth', options.strokeWidth);
+            this.setValueIfExists(mask, 'fillOpacity', options.fillOpacity);
+        }
+    };
+    ChartBuilder.initNavigatorHandle = function (handle, options) {
+        if (options) {
+            this.setValueIfExists(handle, 'fill', options.fill);
+            this.setValueIfExists(handle, 'stroke', options.stroke);
+            this.setValueIfExists(handle, 'strokeWidth', options.strokeWidth);
+            this.setValueIfExists(handle, 'width', options.width);
+            this.setValueIfExists(handle, 'height', options.height);
+            this.setValueIfExists(handle, 'gripLineGap', options.gripLineGap);
+            this.setValueIfExists(handle, 'gripLineLength', options.gripLineLength);
+        }
+    };
     ChartBuilder.initMarker = function (marker, options) {
@@ -452,0 +486,0 @@ marker.shape = ChartBuilder.getMarkerByName(options.shape);

dist/cjs/chartOptions.d.ts

@@ -35,2 +35,3 @@ import { TooltipRendererParams } from "./chart/series/series";
     legend: LegendOptions;
+    navigator: NavigatorOptions;
     tooltipClass?: string;
@@ -68,2 +69,26 @@ listeners?: {
 }
+export interface NavigatorOptions {
+    enabled?: boolean;
+    height?: number;
+    min?: number;
+    max?: number;
+    mask?: NavigatorMaskOptions;
+    minHandle?: NavigatorHandleOptions;
+    maxHandle?: NavigatorHandleOptions;
+}
+export interface NavigatorMaskOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fillOpacity?: number;
+}
+export interface NavigatorHandleOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    width?: number;
+    height?: number;
+    gripLineGap?: number;
+    gripLineLength?: number;
+}
 export interface LegendItemOptions {
@@ -86,2 +111,3 @@ label?: LegendLabelOptions;
     yAxis: AxisOptions;
+    navigator: NavigatorOptions;
 }
@@ -88,0 +114,0 @@ export interface PolarChartOptions<T> extends ChartOptions<T> {

dist/cjs/scale/bandScale.d.ts

@@ -24,3 +24,3 @@ import Scale from './scale';
     private _range;
-    range: [number, number];
+    range: number[];
     ticks(): D[];
@@ -27,0 +27,0 @@ convert(d: D): number;

dist/cjs/scene/clipRect.d.ts

 import { Node } from "./node";
 import { Path2D } from "./path2D";
+import { BBox } from "./bbox";
 /**
@@ -12,3 +13,3 @@ * Acts as `Group` node but with specified bounds that form a rectangle.
     protected path: Path2D;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     private _active;
@@ -27,3 +28,4 @@ active: boolean;
     updatePath(): void;
+    computeBBox(): BBox;
     render(ctx: CanvasRenderingContext2D): void;
 }

dist/cjs/scene/clipRect.js

@@ -18,2 +18,3 @@ "use strict";
 var path2D_1 = require("./path2D");
+var bbox_1 = require("./bbox");
 /**
@@ -38,3 +39,3 @@ * Acts as `Group` node but with specified bounds that form a rectangle.
     }
-    ClipRect.prototype.isPointInNode = function (x, y) {
+    ClipRect.prototype.containsPoint = function (x, y) {
         var point = this.transformPoint(x, y);
@@ -130,2 +131,6 @@ return point.x >= this.x && point.x <= this.x + this.width
     };
+    ClipRect.prototype.computeBBox = function () {
+        var _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        return new bbox_1.BBox(x, y, width, height);
+    };
     ClipRect.prototype.render = function (ctx) {
@@ -149,2 +154,8 @@ if (this.active) {
         }
+        // debug
+        // this.computeBBox().render(ctx, {
+        //     label: this.id,
+        //     resetTransform: true,
+        //     fillStyle: 'rgba(0, 0, 0, 0.5)'
+        // });
     };
@@ -151,0 +162,0 @@ ClipRect.className = 'ClipRect';

dist/cjs/scene/group.d.ts

@@ -6,5 +6,5 @@ import { Node } from "./node";
     protected isContainerNode: boolean;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     computeBBox(): BBox;
     render(ctx: CanvasRenderingContext2D): void;
 }

dist/cjs/scene/group.js

@@ -27,3 +27,3 @@ "use strict";
     // We consider a group to be boundless, thus any point belongs to it.
-    Group.prototype.isPointInNode = function (x, y) {
+    Group.prototype.containsPoint = function (x, y) {
         return true;
@@ -30,0 +30,0 @@ };

dist/cjs/scene/node.d.ts

@@ -124,3 +124,3 @@ import { Scene } from "./scene";
     translationY: number;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     /**
@@ -127,0 +127,0 @@ * Hit testing method.

dist/cjs/scene/node.js

@@ -418,3 +418,3 @@ "use strict";
     });
-    Node.prototype.isPointInNode = function (x, y) {
+    Node.prototype.containsPoint = function (x, y) {
         return false;
@@ -431,3 +431,3 @@ };
     Node.prototype.pickNode = function (x, y) {
-        if (!this.visible || this.pointerEvents === PointerEvents.None || !this.isPointInNode(x, y)) {
+        if (!this.visible || this.pointerEvents === PointerEvents.None || !this.containsPoint(x, y)) {
             return;
@@ -434,0 +434,0 @@ }

dist/cjs/scene/scene.d.ts

 import { HdpiCanvas } from "../canvas/hdpiCanvas";
 import { Node } from "./node";
 import { Path2D } from "./path2D";
+interface DebugOptions {
+    renderFrameIndex: boolean;
+    renderBoundingBoxes: boolean;
+}
 export declare class Scene {
@@ -15,2 +19,3 @@ static className: string;
     readonly height: number;
+    private pendingSize?;
     resize(width: number, height: number): void;
@@ -24,7 +29,7 @@ private _dirty;
     appendPath(path: Path2D): void;
+    readonly debug: DebugOptions;
     private _frameIndex;
     readonly frameIndex: number;
-    private _renderFrameIndex;
-    renderFrameIndex: boolean;
     readonly render: () => void;
 }
+export {};

dist/cjs/scene/scene.js

@@ -17,7 +17,15 @@ "use strict";
         this._root = null;
+        this.debug = {
+            renderFrameIndex: false,
+            renderBoundingBoxes: false
+        };
         this._frameIndex = 0;
-        this._renderFrameIndex = false;
         this.render = function () {
-            var _a = _this, ctx = _a.ctx, root = _a.root;
+            var _a;
+            var _b = _this, ctx = _b.ctx, root = _b.root, pendingSize = _b.pendingSize;
             _this.animationFrameId = 0;
+            if (pendingSize) {
+                (_a = _this.canvas).resize.apply(_a, pendingSize);
+                _this.pendingSize = undefined;
+            }
             if (root && !root.visible) {
@@ -37,7 +45,7 @@ _this.dirty = false;
             _this._frameIndex++;
-            if (_this.renderFrameIndex) {
+            if (_this.debug.renderFrameIndex) {
                 ctx.fillStyle = 'white';
                 ctx.fillRect(0, 0, 40, 15);
                 ctx.fillStyle = 'black';
-                ctx.fillText(_this.frameIndex.toString(), 0, 10);
+                ctx.fillText(_this.frameIndex.toString(), 2, 10);
             }
@@ -67,3 +75,3 @@ _this.dirty = false;
         get: function () {
-            return this.canvas.width;
+            return this.pendingSize ? this.pendingSize[0] : this.canvas.width;
         },
@@ -75,3 +83,3 @@ enumerable: true,
         get: function () {
-            return this.canvas.height;
+            return this.pendingSize ? this.pendingSize[1] : this.canvas.height;
         },
@@ -82,7 +90,9 @@ enumerable: true,
     Scene.prototype.resize = function (width, height) {
-        var _this = this;
-        this.canvas.resize(width, height, 
-        // resizing a canvas clears the pixel content so when resizing is done
-        // mark as dirty to ensure a re-render
-        function () { return _this.dirty = true; });
+        width = Math.round(width);
+        height = Math.round(height);
+        if (width === this.width && height === this.height) {
+            return;
+        }
+        this.pendingSize = [width, height];
+        this.dirty = true;
     };
@@ -164,15 +174,2 @@ Object.defineProperty(Scene.prototype, "dirty", {
     });
-    Object.defineProperty(Scene.prototype, "renderFrameIndex", {
-        get: function () {
-            return this._renderFrameIndex;
-        },
-        set: function (value) {
-            if (this._renderFrameIndex !== value) {
-                this._renderFrameIndex = value;
-                this.dirty = true;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
     Scene.className = 'Scene';
@@ -179,0 +176,0 @@ return Scene;

dist/cjs/scene/shape/path.js

@@ -80,6 +80,12 @@ "use strict";
     Path.prototype.render = function (ctx) {
+        var scene = this.scene;
         if (this.dirtyTransform) {
             this.computeTransformMatrix();
         }
-        // this.matrix.transformBBox(this.computeBBox()!).render(ctx);
+        // if (scene.debug.renderBoundingBoxes) {
+        //     const bbox = this.computeBBox();
+        //     if (bbox) {
+        //         this.matrix.transformBBox(bbox).render(ctx);
+        //     }
+        // }
         this.matrix.toContext(ctx);
@@ -90,3 +96,3 @@ if (this.dirtyPath) {
         }
-        this.scene.appendPath(this.path);
+        scene.appendPath(this.path);
         this.fillStroke(ctx);
@@ -93,0 +99,0 @@ this.dirty = false;

dist/cjs/scene/shape/rect.js

@@ -184,4 +184,4 @@ "use strict";
         if (this.crisp && !borderSizing) {
-            var alignment = Math.floor(strokeWidth) % 2 / 2;
-            path.rect(Math.floor(x) + alignment, Math.floor(y) + alignment, Math.floor(width) + Math.floor(x % 1 + width % 1), Math.floor(height) + Math.floor(y % 1 + height % 1));
+            var _a = this, a = _a.alignment, al = _a.align;
+            path.rect(al(a, x), al(a, y), al(a, x, width), al(a, y, height));
         }
@@ -193,3 +193,4 @@ else {
     Rect.prototype.computeBBox = function () {
-        return new bbox_1.BBox(this.x, this.y, this.width, this.height);
+        var _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        return new bbox_1.BBox(x, y, width, height);
     };
@@ -196,0 +197,0 @@ Rect.prototype.isPointInPath = function (x, y) {

dist/cjs/scene/shape/shape.d.ts

@@ -52,7 +52,7 @@ import { Node } from "../node";
     protected restoreOverriddenStyles(): void;
-    private _fillOpacity;
+    protected _fillOpacity: number;
     fillOpacity: number;
-    private _strokeOpacity;
+    protected _strokeOpacity: number;
     strokeOpacity: number;
-    private _fill;
+    protected _fill: string | undefined;
     fill: string | undefined;
@@ -69,25 +69,27 @@ /**
      */
-    private _stroke;
+    protected _stroke: string | undefined;
     stroke: string | undefined;
     protected _strokeWidth: number;
     strokeWidth: number;
-    private _lineDash;
+    readonly alignment: number;
+    align(alignment: number, start: number, length?: number): number;
+    protected _lineDash: number[] | undefined;
     lineDash: number[] | undefined;
-    private _lineDashOffset;
+    protected _lineDashOffset: number;
     lineDashOffset: number;
-    private _lineCap;
+    protected _lineCap: ShapeLineCap;
     lineCap: ShapeLineCap;
-    private _lineJoin;
+    protected _lineJoin: ShapeLineJoin;
     lineJoin: ShapeLineJoin;
-    private _opacity;
+    protected _opacity: number;
     opacity: number;
     private readonly onShadowChange;
-    private _fillShadow;
+    protected _fillShadow: DropShadow | undefined;
     fillShadow: DropShadow | undefined;
-    private _strokeShadow;
+    protected _strokeShadow: DropShadow | undefined;
     strokeShadow: DropShadow | undefined;
     protected fillStroke(ctx: CanvasRenderingContext2D): void;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     abstract isPointInPath(x: number, y: number): boolean;
     abstract isPointInStroke(x: number, y: number): boolean;
 }

dist/cjs/scene/shape/shape.js

@@ -169,2 +169,18 @@ "use strict";
     });
+    Object.defineProperty(Shape.prototype, "alignment", {
+        // An offset value to align to the pixel grid.
+        get: function () {
+            return Math.floor(this.strokeWidth) % 2 / 2;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // Returns the aligned `start` or `length` value.
+    // For example: `start` could be `y` and `length` could be `height` of a rectangle.
+    Shape.prototype.align = function (alignment, start, length) {
+        if (length != undefined) {
+            return Math.floor(length) + Math.floor(start % 1 + length % 1);
+        }
+        return Math.floor(start) + alignment;
+    };
     Object.defineProperty(Shape.prototype, "lineDash", {
@@ -334,3 +350,3 @@ get: function () {
     };
-    Shape.prototype.isPointInNode = function (x, y) {
+    Shape.prototype.containsPoint = function (x, y) {
         return this.isPointInPath(x, y);
@@ -337,0 +353,0 @@ };

dist/cjs/scene/shape/text.js

@@ -270,6 +270,3 @@ "use strict";
         this.matrix.toContext(ctx);
-        var _a = this, opacity = _a.opacity, fill = _a.fill, stroke = _a.stroke, strokeWidth = _a.strokeWidth;
-        if (opacity < 1) {
-            ctx.globalAlpha = opacity;
-        }
+        var _a = this, fill = _a.fill, stroke = _a.stroke, strokeWidth = _a.strokeWidth;
         ctx.font = this.font;
@@ -281,2 +278,3 @@ ctx.textAlign = this.textAlign;
             ctx.fillStyle = fill;
+            ctx.globalAlpha = this.opacity * this.fillOpacity;
             var _b = this, fillShadow = _b.fillShadow, text = _b.text, x = _b.x, y = _b.y;
@@ -294,2 +292,3 @@ if (fillShadow && fillShadow.enabled) {
             ctx.lineWidth = strokeWidth;
+            ctx.globalAlpha = this.opacity * this.strokeOpacity;
             var _c = this, lineDash = _c.lineDash, lineDashOffset = _c.lineDashOffset, lineCap = _c.lineCap, lineJoin = _c.lineJoin, strokeShadow = _c.strokeShadow, text = _c.text, x = _c.x, y = _c.y;
@@ -296,0 +295,0 @@ if (lineDash) {

dist/es6/axis.d.ts

@@ -126,3 +126,7 @@ import Scale from "./scale/scale";
     constructor(scale: S);
+    protected updateRange(): void;
+    protected requestedRange: number[];
     range: number[];
+    protected _visibleRange: number[];
+    visibleRange: number[];
     domain: D[];
@@ -129,0 +133,0 @@ private tickFormatter?;

dist/es6/axis.js

@@ -126,2 +126,3 @@ import { Group } from "./scene/group";
         this.rotation = 0; // axis rotation angle in degrees
+        this._visibleRange = [0, 1];
         this._title = undefined;
@@ -151,2 +152,3 @@ /**
         this.scale = scale;
+        this.requestedRange = scale.range.slice();
         this.groupSelection = Selection.select(this.group).selectAll();
@@ -158,8 +160,16 @@ this.label.onFormatChange = this.onTickFormatChange.bind(this);
     }
+    Axis.prototype.updateRange = function () {
+        var _a = this, rr = _a.requestedRange, vr = _a.visibleRange, scale = _a.scale;
+        var span = (rr[1] - rr[0]) / (vr[1] - vr[0]);
+        var shift = span * vr[0];
+        var start = rr[0] - shift;
+        scale.range = [start, start + span];
+    };
     Object.defineProperty(Axis.prototype, "range", {
         get: function () {
-            return this.scale.range;
+            return this.requestedRange.slice();
         },
         set: function (value) {
-            this.scale.range = value;
+            this.requestedRange = value.slice();
+            this.updateRange();
         },
@@ -169,8 +179,26 @@ enumerable: true,
     });
+    Object.defineProperty(Axis.prototype, "visibleRange", {
+        get: function () {
+            return this._visibleRange.slice();
+        },
+        set: function (value) {
+            if (value && value.length === 2) {
+                var min = value[0], max = value[1];
+                min = Math.max(0, min);
+                max = Math.min(1, max);
+                min = Math.min(min, max);
+                max = Math.max(min, max);
+                this._visibleRange = [min, max];
+                this.updateRange();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Axis.prototype, "domain", {
         get: function () {
-            return this.scale.domain;
+            return this.scale.domain.slice();
         },
         set: function (value) {
-            this.scale.domain = value;
+            this.scale.domain = value.slice();
         },
@@ -257,3 +285,5 @@ enumerable: true,
         var _this = this;
-        var _a = this, group = _a.group, scale = _a.scale, tick = _a.tick, label = _a.label, gridStyle = _a.gridStyle;
+        var _a = this, group = _a.group, scale = _a.scale, tick = _a.tick, label = _a.label, gridStyle = _a.gridStyle, requestedRange = _a.requestedRange;
+        var requestedRangeMin = Math.min(requestedRange[0], requestedRange[1]);
+        var requestedRangeMax = Math.max(requestedRange[0], requestedRange[1]);
         var rotation = toRadians(this.rotation);
@@ -302,3 +332,8 @@ var parallelLabels = label.parallel;
         groupSelection
-            .attrFn('translationY', function (_, datum) { return Math.round(scale.convert(datum) + halfBandwidth); });
+            .attrFn('translationY', function (_, datum) {
+            return Math.round(scale.convert(datum) + halfBandwidth);
+        })
+            .attrFn('visible', function (node) {
+            return node.translationY >= requestedRangeMin && node.translationY <= requestedRangeMax;
+        });
         groupSelection.selectByTag(Tags.Tick)
@@ -391,4 +426,4 @@ .each(function (line) {
         lineNode.x2 = 0;
-        lineNode.y1 = scale.range[0];
-        lineNode.y2 = scale.range[scale.range.length - 1];
+        lineNode.y1 = requestedRange[0];
+        lineNode.y2 = requestedRange[1];
         lineNode.strokeWidth = this.line.width;
@@ -407,2 +442,3 @@ lineNode.stroke = this.line.color;
             titleNode.x = titleRotationFlag * sideFlag * (lineNode.y1 + lineNode.y2) / 2;
+            titleNode.x = titleRotationFlag * sideFlag * (requestedRange[0] + requestedRange[1]) / 2;
             if (sideFlag === -1) {
@@ -409,0 +445,0 @@ titleNode.y = titleRotationFlag * (-padding - bbox.width + Math.max(bbox.x + bbox.width, 0));

dist/es6/canvas/hdpiCanvas.d.ts

@@ -28,9 +28,8 @@ declare type Size = {
     /**
-     * Updates the pixel ratio of the Canvas element with the given value,
+     * Changes the pixel ratio of the Canvas element to the given value,
      * or uses the window.devicePixelRatio (default), then resizes the Canvas
      * element accordingly (default).
-     * @param ratio
-     * @param resize
      */
-    updatePixelRatio(ratio?: number, resize?: boolean): void;
+    setPixelRatio(ratio?: number): void;
+    pixelated: boolean;
     private _width;
@@ -40,3 +39,3 @@ readonly width: number;
     readonly height: number;
-    resize(width: number, height: number, callbackWhenDone?: () => void): void;
+    resize(width: number, height: number): void;
     private static _textMeasuringContext?;
@@ -60,4 +59,4 @@ private static readonly textMeasuringContext;
     private static measureSvgText;
-    private static makeHdpiOverrides;
+    static overrideScale(ctx: CanvasRenderingContext2D, scale: number): void;
 }
 export {};

dist/es6/canvas/hdpiCanvas.js

@@ -18,7 +18,7 @@ /**
         this.element = document.createElement('canvas');
+        this.context = this.element.getContext('2d');
         this.element.style.userSelect = 'none';
         this.element.style.display = 'block';
-        this.context = this.element.getContext('2d');
-        this.updatePixelRatio(0, false);
-        this.resize(this._width = width, this._height = height);
+        this.setPixelRatio();
+        this.resize(width, height);
     }
@@ -98,11 +98,7 @@ Object.defineProperty(HdpiCanvas.prototype, "container", {
     /**
-     * Updates the pixel ratio of the Canvas element with the given value,
+     * Changes the pixel ratio of the Canvas element to the given value,
      * or uses the window.devicePixelRatio (default), then resizes the Canvas
      * element accordingly (default).
-     * @param ratio
-     * @param resize
      */
-    HdpiCanvas.prototype.updatePixelRatio = function (ratio, resize) {
-        if (ratio === void 0) { ratio = 0; }
-        if (resize === void 0) { resize = true; }
+    HdpiCanvas.prototype.setPixelRatio = function (ratio) {
         var pixelRatio = ratio || window.devicePixelRatio;
@@ -112,28 +108,16 @@ if (pixelRatio === this.pixelRatio) {
         }
-        var canvas = this.element;
-        var ctx = this.context;
-        var overrides = HdpiCanvas.makeHdpiOverrides(pixelRatio);
-        for (var name_1 in overrides) {
-            if (overrides.hasOwnProperty(name_1)) {
-                // Save native methods under prefixed names,
-                // if this hasn't been done by the previous overrides already.
-                if (!ctx['$' + name_1]) {
-                    ctx['$' + name_1] = ctx[name_1];
-                }
-                // Replace native methods with overrides,
-                // or previous overrides with the new ones.
-                ctx[name_1] = overrides[name_1];
-            }
-        }
-        if (resize) {
-            var logicalWidth = canvas.width / this.pixelRatio;
-            var logicalHeight = canvas.height / this.pixelRatio;
-            canvas.width = Math.round(logicalWidth * pixelRatio);
-            canvas.height = Math.round(logicalHeight * pixelRatio);
-            canvas.style.width = Math.round(logicalWidth) + 'px';
-            canvas.style.height = Math.round(logicalHeight) + 'px';
-            ctx.resetTransform(); // should be called every time Canvas size changes
-        }
+        HdpiCanvas.overrideScale(this.context, pixelRatio);
         this._pixelRatio = pixelRatio;
+        this.resize(this.width, this.height);
     };
+    Object.defineProperty(HdpiCanvas.prototype, "pixelated", {
+        get: function () {
+            return this.element.style.imageRendering === 'pixelated';
+        },
+        set: function (value) {
+            this.element.style.imageRendering = value ? 'pixelated' : 'auto';
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(HdpiCanvas.prototype, "width", {
@@ -153,17 +137,11 @@ get: function () {
     });
-    HdpiCanvas.prototype.resize = function (width, height, callbackWhenDone) {
-        var _this = this;
+    HdpiCanvas.prototype.resize = function (width, height) {
+        var _a = this, element = _a.element, context = _a.context, pixelRatio = _a.pixelRatio;
+        element.width = Math.round(width * pixelRatio);
+        element.height = Math.round(height * pixelRatio);
+        element.style.width = width + 'px';
+        element.style.height = height + 'px';
+        context.resetTransform();
         this._width = width;
         this._height = height;
-        requestAnimationFrame(function () {
-            var _a = _this, element = _a.element, context = _a.context, pixelRatio = _a.pixelRatio;
-            element.width = Math.round(width * pixelRatio);
-            element.height = Math.round(height * pixelRatio);
-            element.style.width = Math.round(width) + 'px';
-            element.style.height = Math.round(height) + 'px';
-            context.resetTransform();
-            // The canvas being resized is asynchronous. For the case where we
-            // need to do something after it is resized, return a promise.
-            callbackWhenDone && callbackWhenDone();
-        });
     };
@@ -285,5 +263,5 @@ Object.defineProperty(HdpiCanvas, "textMeasuringContext", {
     };
-    HdpiCanvas.makeHdpiOverrides = function (pixelRatio) {
+    HdpiCanvas.overrideScale = function (ctx, scale) {
         var depth = 0;
-        return {
+        var overrides = {
             save: function () {
@@ -300,3 +278,3 @@ this.$save();
             setTransform: function (a, b, c, d, e, f) {
-                this.$setTransform(a * pixelRatio, b * pixelRatio, c * pixelRatio, d * pixelRatio, e * pixelRatio, f * pixelRatio);
+                this.$setTransform(a * scale, b * scale, c * scale, d * scale, e * scale, f * scale);
             },
@@ -306,3 +284,3 @@ resetTransform: function () {
                 // and doesn't work in IE11 and Edge 44.
-                this.$setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+                this.$setTransform(scale, 0, 0, scale, 0, 0);
                 this.save();
@@ -315,2 +293,14 @@ depth = 0;
         };
+        for (var name_1 in overrides) {
+            if (overrides.hasOwnProperty(name_1)) {
+                // Save native methods under prefixed names,
+                // if this hasn't been done by the previous overrides already.
+                if (!ctx['$' + name_1]) {
+                    ctx['$' + name_1] = ctx[name_1];
+                }
+                // Replace native methods with overrides,
+                // or previous overrides with the new ones.
+                ctx[name_1] = overrides[name_1];
+            }
+        }
     };
@@ -317,0 +307,0 @@ HdpiCanvas.textSizeCache = {};

dist/es6/chart/axis/groupedCategoryAxis.d.ts

@@ -33,3 +33,4 @@ import { Group } from "../../scene/group";
     domain: any[];
-    range: [number, number];
+    range: number[];
+    protected updateRange(): void;
     private resizeTickTree;
@@ -36,0 +37,0 @@ readonly translation: {

dist/es6/chart/axis/groupedCategoryAxis.js

@@ -75,2 +75,3 @@ var __extends = (this && this.__extends) || (function () {
         scale.paddingInner = scale.paddingOuter * 2;
+        _this.requestedRange = scale.range.slice();
         tickScale.paddingInner = 1;
@@ -103,8 +104,7 @@ tickScale.paddingOuter = 0;
         get: function () {
-            return this.scale.range;
+            return this.requestedRange.slice();
         },
         set: function (value) {
-            this.scale.range = value;
-            this.tickScale.range = value;
-            this.resizeTickTree();
+            this.requestedRange = value.slice();
+            this.updateRange();
         },
@@ -114,2 +114,10 @@ enumerable: true,
     });
+    GroupedCategoryAxis.prototype.updateRange = function () {
+        var _a = this, rr = _a.requestedRange, vr = _a.visibleRange, scale = _a.scale;
+        var span = (rr[1] - rr[0]) / (vr[1] - vr[0]);
+        var shift = span * vr[0];
+        var start = rr[0] - shift;
+        this.tickScale.range = scale.range = [start, start + span];
+        this.resizeTickTree();
+    };
     GroupedCategoryAxis.prototype.resizeTickTree = function () {
@@ -164,3 +172,3 @@ var s = this.scale;
         var _this = this;
-        var _a = this, group = _a.group, scale = _a.scale, label = _a.label, tickScale = _a.tickScale;
+        var _a = this, group = _a.group, scale = _a.scale, label = _a.label, tickScale = _a.tickScale, requestedRange = _a.requestedRange;
         var rangeStart = scale.range[0];
@@ -229,2 +237,5 @@ var rangeEnd = scale.range[1];
             //     : 'middle';
+            node.textAlign = 'center';
+            node.translationX = datum.screenY - label.fontSize * 0.25;
+            node.translationY = datum.screenX;
             if (title && index === 0) { // use the phantom root as the axis title
@@ -246,6 +257,6 @@ node.text = title.text;
                     : String(datum.label);
+                node.visible =
+                    datum.screenX >= requestedRange[0] &&
+                        datum.screenX <= requestedRange[1];
             }
-            node.textAlign = 'center';
-            node.translationX = datum.screenY - label.fontSize * 0.25;
-            node.translationY = datum.screenX;
             var bbox = node.computeBBox();
@@ -321,3 +332,4 @@ if (bbox && bbox.width > maxLeafLabelWidth) {
         this.separatorSelection = separatorSelection;
-        separatorSelection.each(function (line, datum) {
+        var epsilon = 0.0000001;
+        separatorSelection.each(function (line, datum, i) {
             line.x1 = datum.x1;
@@ -327,2 +339,3 @@ line.x2 = datum.x2;
             line.y2 = datum.y;
+            line.visible = datum.y >= requestedRange[0] - epsilon && datum.y <= requestedRange[1] + epsilon;
             line.stroke = _this.tick.color;
@@ -349,4 +362,4 @@ line.fill = undefined;
             line.x2 = x;
-            line.y1 = rangeStart;
-            line.y2 = rangeEnd;
+            line.y1 = requestedRange[0];
+            line.y2 = requestedRange[1];
             line.strokeWidth = _this.line.width;
@@ -366,3 +379,4 @@ line.stroke = _this.line.color;
                 line.y2 = y;
-                line.visible = Math.abs(line.parent.translationY - rangeStart) > 1;
+                line.visible = y >= requestedRange[0] && y <= requestedRange[1] &&
+                    Math.abs(line.parent.translationY - rangeStart) > 1;
                 var style = styles_1[index % styleCount_1];
@@ -369,0 +383,0 @@ line.stroke = style.stroke;

dist/es6/chart/cartesianChart.d.ts

 import { Chart } from "./chart";
-import { Group } from "../scene/group";
 import { Series } from "./series/series";
+import { ClipRect } from "../scene/clipRect";
+import { Navigator } from "./navigator/navigator";
 export declare class CartesianChart extends Chart {
@@ -9,7 +10,12 @@ static className: string;
     private _seriesRoot;
-    readonly seriesRoot: Group;
+    readonly seriesRoot: ClipRect;
+    readonly navigator: Navigator;
     performLayout(): void;
     protected initSeries(series: Series): void;
     protected freeSeries(series: Series): void;
+    protected onMouseDown(event: MouseEvent): void;
+    protected onMouseMove(event: MouseEvent): void;
+    protected onMouseUp(event: MouseEvent): void;
+    protected onMouseOut(event: MouseEvent): void;
     updateAxes(): void;
 }

dist/es6/chart/cartesianChart.js

@@ -16,3 +16,2 @@ var __extends = (this && this.__extends) || (function () {
 import { numericExtent } from "../util/array";
-import { Group } from "../scene/group";
 import { CategoryAxis } from "./axis/categoryAxis";
@@ -22,3 +21,4 @@ import { GroupedCategoryAxis } from "./axis/groupedCategoryAxis";
 import { BBox } from "../scene/bbox";
-// import { ClipRect } from "../scene/clipRect";
+import { ClipRect } from "../scene/clipRect";
+import { Navigator } from "./navigator/navigator";
 var CartesianChart = /** @class */ (function (_super) {
@@ -29,3 +29,4 @@ __extends(CartesianChart, _super);
         var _this = _super.call(this, document) || this;
-        _this._seriesRoot = new Group();
+        _this._seriesRoot = new ClipRect();
+        _this.navigator = new Navigator(_this);
         // Prevent the scene from rendering chart components in an invalid state
@@ -35,4 +36,5 @@ // (before first layout is performed).
         var root = _this.scene.root;
-        root.append(_this._seriesRoot);
+        root.append(_this.seriesRoot);
         root.append(_this.legend.group);
+        _this.navigator.enabled = false;
         return _this;
@@ -52,3 +54,3 @@ }
         this.scene.root.visible = true;
-        var _a = this, width = _a.width, height = _a.height, axes = _a.axes, legend = _a.legend;
+        var _a = this, width = _a.width, height = _a.height, axes = _a.axes, legend = _a.legend, navigator = _a.navigator;
         var shrinkRect = new BBox(0, 0, width, height);
@@ -87,2 +89,6 @@ this.positionCaptions();
         shrinkRect.height -= padding.top + captionAutoPadding + padding.bottom;
+        if (navigator.enabled) {
+            shrinkRect.height -= navigator.height + navigator.margin;
+        }
+        var bottomAxesHeight = 0;
         axes.forEach(function (axis) {
@@ -105,2 +111,3 @@ axis.group.visible = true;
                     shrinkRect.height -= axisThickness;
+                    bottomAxesHeight += axisThickness;
                     axis.translation.y = Math.floor(shrinkRect.y + shrinkRect.height + 1);
@@ -148,3 +155,2 @@ break;
             }
-            // axis.tick.count = Math.abs(axis.range[1] - axis.range[0]) > 200 ? 10 : 5;
         });
@@ -157,8 +163,12 @@ this.seriesRect = shrinkRect;
         });
-        // When seriesRoot is a ClipRect:
-        // const { seriesRoot } = this;
-        // seriesRoot.x = shrinkRect.x;
-        // seriesRoot.y = shrinkRect.y;
-        // seriesRoot.width = shrinkRect.width;
-        // seriesRoot.height = shrinkRect.height;
+        var seriesRoot = this.seriesRoot;
+        seriesRoot.x = shrinkRect.x;
+        seriesRoot.y = shrinkRect.y;
+        seriesRoot.width = shrinkRect.width;
+        seriesRoot.height = shrinkRect.height;
+        if (navigator.enabled) {
+            navigator.x = shrinkRect.x;
+            navigator.y = shrinkRect.y + shrinkRect.height + bottomAxesHeight + navigator.margin;
+            navigator.width = shrinkRect.width;
+        }
         this.axes.forEach(function (axis) { return axis.update(); });
@@ -174,2 +184,18 @@ };
     };
+    CartesianChart.prototype.onMouseDown = function (event) {
+        _super.prototype.onMouseDown.call(this, event);
+        this.navigator.onMouseDown(event);
+    };
+    CartesianChart.prototype.onMouseMove = function (event) {
+        _super.prototype.onMouseMove.call(this, event);
+        this.navigator.onMouseMove(event);
+    };
+    CartesianChart.prototype.onMouseUp = function (event) {
+        _super.prototype.onMouseUp.call(this, event);
+        this.navigator.onMouseUp(event);
+    };
+    CartesianChart.prototype.onMouseOut = function (event) {
+        _super.prototype.onMouseOut.call(this, event);
+        this.navigator.onMouseUp(event);
+    };
     CartesianChart.prototype.updateAxes = function () {
@@ -176,0 +202,0 @@ this.axes.forEach(function (axis) {

dist/es6/chart/chart.d.ts

@@ -28,3 +28,2 @@ import { Scene } from "../scene/scene";
     data: any[];
-    private pendingSize?;
     width: number;
@@ -49,2 +48,4 @@ height: number;
     axes: ChartAxis[];
+    protected attachAxis(axis: ChartAxis): void;
+    protected detachAxis(axis: ChartAxis): void;
     protected _series: Series[];
@@ -81,4 +82,4 @@ series: Series[];
     protected positionLegend(): void;
-    private setupDomListeners;
-    private cleanupDomListeners;
+    protected setupDomListeners(chartElement: HTMLCanvasElement): void;
+    protected cleanupDomListeners(chartElement: HTMLCanvasElement): void;
     protected seriesRect?: BBox;
@@ -88,5 +89,12 @@ private pickSeriesNode;
     private pickClosestSeriesNodeDatum;
-    private readonly onMouseMove;
-    private readonly onMouseOut;
-    private readonly onClick;
+    private _onMouseDown;
+    private _onMouseUp;
+    private _onMouseMove;
+    private _onMouseOut;
+    private _onClick;
+    protected onMouseMove(event: MouseEvent): void;
+    protected onMouseDown(event: MouseEvent): void;
+    protected onMouseUp(event: MouseEvent): void;
+    protected onMouseOut(event: MouseEvent): void;
+    protected onClick(event: MouseEvent): void;
     private checkSeriesNodeClick;
@@ -93,0 +101,0 @@ private onSeriesNodeClick;

dist/es6/chart/chart.js

@@ -63,8 +63,3 @@ var __extends = (this && this.__extends) || (function () {
         _this._performLayout = function () {
-            var _a;
             _this.layoutCallbackId = 0;
-            if (_this.pendingSize) {
-                (_a = _this.scene).resize.apply(_a, _this.pendingSize);
-                _this.pendingSize = undefined;
-            }
             _this.background.width = _this.width;
@@ -78,64 +73,7 @@ _this.background.height = _this.height;
         _this.dataCallbackId = 0;
-        _this.onMouseMove = function (event) {
-            var _a = _this, lastPick = _a.lastPick, tooltipTracking = _a.tooltipTracking;
-            var pick = _this.pickSeriesNode(event.offsetX, event.offsetY);
-            var nodeDatum;
-            if (pick && pick.node instanceof Shape) {
-                var node = pick.node;
-                nodeDatum = node.datum;
-                if (lastPick && lastPick.datum === nodeDatum) {
-                    lastPick.node = node;
-                }
-                // Marker nodes will have the `point` info in their datums.
-                // Highlight if not a marker node or, if not in the tracking mode, highlight markers too.
-                if ((!node.datum.point || !tooltipTracking)) {
-                    if (!lastPick // cursor moved from empty space to a node
-                        || lastPick.node !== node) { // cursor moved from one node to another
-                        _this.onSeriesDatumPick(event, node.datum, node);
-                    }
-                    else if (pick.series.tooltipEnabled) { // cursor moved within the same node
-                        _this.showTooltip(event);
-                    }
-                    // A non-marker node (takes precedence over marker nodes) was highlighted.
-                    // Or we are not in the tracking mode.
-                    // Either way, we are done at this point.
-                    return;
-                }
-            }
-            var hideTooltip = false;
-            // In tracking mode a tooltip is shown for the closest rendered datum.
-            // This makes it easier to show tooltips when markers are small and/or plentiful
-            // and also gives the ability to show tooltips even when the series were configured
-            // to not render markers.
-            if (tooltipTracking) {
-                var closestDatum = _this.pickClosestSeriesNodeDatum(event.offsetX, event.offsetY);
-                if (closestDatum && closestDatum.point) {
-                    var _b = closestDatum.point, x = _b.x, y = _b.y;
-                    var canvas = _this.scene.canvas;
-                    var point = closestDatum.series.group.inverseTransformPoint(x, y);
-                    var canvasRect = canvas.element.getBoundingClientRect();
-                    _this.onSeriesDatumPick({
-                        pageX: Math.round(canvasRect.left + window.pageXOffset + point.x),
-                        pageY: Math.round(canvasRect.top + window.pageYOffset + point.y)
-                    }, closestDatum, nodeDatum === closestDatum ? pick.node : undefined);
-                }
-                else {
-                    hideTooltip = true;
-                }
-            }
-            if (lastPick && (hideTooltip || !tooltipTracking)) {
-                // cursor moved from a non-marker node to empty space
-                // lastPick.datum.series.dehighlightDatum();
-                _this.dehighlightDatum();
-                _this.hideTooltip();
-                _this.lastPick = undefined;
-            }
-        };
-        _this.onMouseOut = function (_) {
-            _this.toggleTooltip(false);
-        };
-        _this.onClick = function (event) {
-            _this.checkSeriesNodeClick();
-            _this.checkLegendClick(event);
-        };
+        _this._onMouseDown = _this.onMouseDown.bind(_this);
+        _this._onMouseUp = _this.onMouseUp.bind(_this);
+        _this._onMouseMove = _this.onMouseMove.bind(_this);
+        _this._onMouseOut = _this.onMouseOut.bind(_this);
+        _this._onClick = _this.onClick.bind(_this);
         _this._tooltipClass = Chart.defaultTooltipClass;
@@ -211,3 +149,3 @@ /**
         get: function () {
-            return this.pendingSize ? this.pendingSize[0] : this.scene.width;
+            return this.scene.width;
         },
@@ -217,3 +155,3 @@ set: function (value) {
             if (this.width !== value) {
-                this.pendingSize = [value, this.height];
+                this.scene.resize(value, this.height);
                 this.fireEvent({ type: 'layoutChange' });
@@ -227,3 +165,3 @@ }
         get: function () {
-            return this.pendingSize ? this.pendingSize[1] : this.scene.height;
+            return this.scene.height;
         },
@@ -233,3 +171,3 @@ set: function (value) {
             if (this.height !== value) {
-                this.pendingSize = [this.width, value];
+                this.scene.resize(this.width, value);
                 this.fireEvent({ type: 'layoutChange' });
@@ -252,3 +190,3 @@ }
                         if (size.width !== chart_1.width || size.height !== chart_1.height) {
-                            chart_1.pendingSize = [size.width, size.height];
+                            chart_1.scene.resize(size.width, size.height);
                             chart_1.fireEvent({ type: 'layoutChange' });
@@ -312,7 +250,6 @@ }
             var _this = this;
-            var root = this.scene.root;
-            this._axes.forEach(function (axis) { return root.removeChild(axis.group); });
+            this._axes.forEach(function (axis) { return _this.detachAxis(axis); });
             // make linked axes go after the regular ones (simulates stable sort by `linkedTo` property)
             this._axes = values.filter(function (a) { return !a.linkedTo; }).concat(values.filter(function (a) { return a.linkedTo; }));
-            this._axes.forEach(function (axis) { return root.insertBefore(axis.group, _this.seriesRoot); });
+            this._axes.forEach(function (axis) { return _this.attachAxis(axis); });
             this.axesChanged = true;
@@ -323,2 +260,8 @@ },
     });
+    Chart.prototype.attachAxis = function (axis) {
+        this.scene.root.insertBefore(axis.group, this.seriesRoot);
+    };
+    Chart.prototype.detachAxis = function (axis) {
+        this.scene.root.removeChild(axis.group);
+    };
     Object.defineProperty(Chart.prototype, "series", {
@@ -660,13 +603,20 @@ get: function () {
     Chart.prototype.setupDomListeners = function (chartElement) {
-        chartElement.addEventListener('mousemove', this.onMouseMove);
-        chartElement.addEventListener('mouseout', this.onMouseOut);
-        chartElement.addEventListener('click', this.onClick);
+        chartElement.addEventListener('mousedown', this._onMouseDown);
+        chartElement.addEventListener('mousemove', this._onMouseMove);
+        chartElement.addEventListener('mouseup', this._onMouseUp);
+        chartElement.addEventListener('mouseout', this._onMouseOut);
+        chartElement.addEventListener('click', this._onClick);
     };
     Chart.prototype.cleanupDomListeners = function (chartElement) {
-        chartElement.removeEventListener('mousemove', this.onMouseMove);
-        chartElement.removeEventListener('mouseout', this.onMouseMove);
-        chartElement.removeEventListener('click', this.onClick);
+        chartElement.removeEventListener('mousedown', this._onMouseDown);
+        chartElement.removeEventListener('mousemove', this._onMouseMove);
+        chartElement.removeEventListener('mouseup', this._onMouseUp);
+        chartElement.removeEventListener('mouseout', this._onMouseOut);
+        chartElement.removeEventListener('click', this._onClick);
     };
     // x/y are local canvas coordinates in CSS pixels, not actual pixels
     Chart.prototype.pickSeriesNode = function (x, y) {
+        if (!this.seriesRect || !this.seriesRect.containsPoint(x, y)) {
+            return undefined;
+        }
         var allSeries = this.series;
@@ -720,2 +670,65 @@ var node = undefined;
     };
+    Chart.prototype.onMouseMove = function (event) {
+        var _a = this, lastPick = _a.lastPick, tooltipTracking = _a.tooltipTracking;
+        var pick = this.pickSeriesNode(event.offsetX, event.offsetY);
+        var nodeDatum;
+        if (pick && pick.node instanceof Shape) {
+            var node = pick.node;
+            nodeDatum = node.datum;
+            if (lastPick && lastPick.datum === nodeDatum) {
+                lastPick.node = node;
+            }
+            // Marker nodes will have the `point` info in their datums.
+            // Highlight if not a marker node or, if not in the tracking mode, highlight markers too.
+            if ((!node.datum.point || !tooltipTracking)) {
+                if (!lastPick // cursor moved from empty space to a node
+                    || lastPick.node !== node) { // cursor moved from one node to another
+                    this.onSeriesDatumPick(event, node.datum, node);
+                }
+                else if (pick.series.tooltipEnabled) { // cursor moved within the same node
+                    this.showTooltip(event);
+                }
+                // A non-marker node (takes precedence over marker nodes) was highlighted.
+                // Or we are not in the tracking mode.
+                // Either way, we are done at this point.
+                return;
+            }
+        }
+        var hideTooltip = false;
+        // In tracking mode a tooltip is shown for the closest rendered datum.
+        // This makes it easier to show tooltips when markers are small and/or plentiful
+        // and also gives the ability to show tooltips even when the series were configured
+        // to not render markers.
+        if (tooltipTracking) {
+            var closestDatum = this.pickClosestSeriesNodeDatum(event.offsetX, event.offsetY);
+            if (closestDatum && closestDatum.point) {
+                var _b = closestDatum.point, x = _b.x, y = _b.y;
+                var canvas = this.scene.canvas;
+                var point = closestDatum.series.group.inverseTransformPoint(x, y);
+                var canvasRect = canvas.element.getBoundingClientRect();
+                this.onSeriesDatumPick({
+                    pageX: Math.round(canvasRect.left + window.pageXOffset + point.x),
+                    pageY: Math.round(canvasRect.top + window.pageYOffset + point.y)
+                }, closestDatum, nodeDatum === closestDatum ? pick.node : undefined);
+            }
+            else {
+                hideTooltip = true;
+            }
+        }
+        if (lastPick && (hideTooltip || !tooltipTracking)) {
+            // cursor moved from a non-marker node to empty space
+            this.dehighlightDatum();
+            this.hideTooltip();
+            this.lastPick = undefined;
+        }
+    };
+    Chart.prototype.onMouseDown = function (event) { };
+    Chart.prototype.onMouseUp = function (event) { };
+    Chart.prototype.onMouseOut = function (event) {
+        this.toggleTooltip(false);
+    };
+    Chart.prototype.onClick = function (event) {
+        this.checkSeriesNodeClick();
+        this.checkLegendClick(event);
+    };
     Chart.prototype.checkSeriesNodeClick = function () {
@@ -754,3 +767,2 @@ var lastPick = this.lastPick;
         this.highlightDatum(datum);
-        // datum.series.highlightDatum(datum);
         var html = datum.series.tooltipEnabled && datum.series.getTooltipHtml(datum);
@@ -757,0 +769,0 @@ if (html) {

dist/es6/chart/chartMappings.js

@@ -29,2 +29,5 @@ var __assign = (this && this.__assign) || function () {
 import { Legend, LegendPosition } from "./legend";
+import { Navigator } from "./navigator/navigator";
+import { NavigatorMask } from "./navigator/navigatorMask";
+import { NavigatorHandle } from "./navigator/navigatorHandle";
 import palette from "./palettes";
@@ -125,2 +128,3 @@ /*
     defaults: {
+        visibleRange: [0, 1],
         gridStyle: [{
@@ -240,5 +244,5 @@ stroke: 'rgba(219, 219, 219, 1)',
                     }] }) }) }, commonChartMappings), { axes: (_b = {},
-            _b[NumberAxis.type] = __assign({ meta: __assign({ constructor: NumberAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
-            _b[CategoryAxis.type] = __assign({ meta: __assign({ constructor: CategoryAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
-            _b[TimeAxis.type] = __assign({ meta: __assign({ constructor: TimeAxis, setAsIs: ['gridStyle'] }, axisDefaults) }, axisMappings),
+            _b[NumberAxis.type] = __assign({ meta: __assign({ constructor: NumberAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
+            _b[CategoryAxis.type] = __assign({ meta: __assign({ constructor: CategoryAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
+            _b[TimeAxis.type] = __assign({ meta: __assign({ constructor: TimeAxis, setAsIs: ['gridStyle', 'visibleRange'] }, axisDefaults) }, axisMappings),
             _b), series: (_c = {},
@@ -299,3 +303,52 @@ _c[LineSeries.type] = {
             },
-            _c) }),
+            _c), navigator: {
+            meta: {
+                constructor: Navigator,
+                defaults: {
+                    enabled: false,
+                    height: 30,
+                    min: 0,
+                    max: 1
+                }
+            },
+            mask: {
+                meta: {
+                    constructor: NavigatorMask,
+                    defaults: {
+                        fill: '#999999',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        fillOpacity: 0.2
+                    }
+                }
+            },
+            minHandle: {
+                meta: {
+                    constructor: NavigatorHandle,
+                    defaults: {
+                        fill: '#f2f2f2',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        width: 8,
+                        height: 16,
+                        gripLineGap: 2,
+                        gripLineLength: 8
+                    }
+                }
+            },
+            maxHandle: {
+                meta: {
+                    constructor: NavigatorHandle,
+                    defaults: {
+                        fill: '#f2f2f2',
+                        stroke: '#999999',
+                        strokeWidth: 1,
+                        width: 8,
+                        height: 16,
+                        gripLineGap: 2,
+                        gripLineLength: 8
+                    }
+                }
+            }
+        } }),
     _a[PolarChart.type] = __assign(__assign({ meta: __assign(__assign({ constructor: PolarChart }, chartMeta), { defaults: __assign(__assign({}, chartDefaults), { padding: new Padding(40) }) }) }, commonChartMappings), { series: (_d = {},
@@ -302,0 +355,0 @@ _d[PieSeries.type] = __assign({ meta: {

dist/es6/chart/marker/square.js

@@ -23,7 +23,8 @@ var __extends = (this && this.__extends) || (function () {
         var hs = this.size / 2;
+        var _b = this, a = _b.alignment, al = _b.align;
         path.clear();
-        path.moveTo(x - hs, y - hs);
-        path.lineTo(x + hs, y - hs);
-        path.lineTo(x + hs, y + hs);
-        path.lineTo(x - hs, y + hs);
+        path.moveTo(al(a, x - hs), al(a, y - hs));
+        path.lineTo(al(a, x + hs), al(a, y - hs));
+        path.lineTo(al(a, x + hs), al(a, y + hs));
+        path.lineTo(al(a, x - hs), al(a, y + hs));
         path.closePath();
@@ -30,0 +31,0 @@ };

dist/es6/chartBuilder.d.ts

@@ -1,2 +0,2 @@
-import { ChartOptions, CartesianChartOptions, PolarChartOptions, SeriesOptions, BarSeriesOptions, LineSeriesOptions, ScatterSeriesOptions, AreaSeriesOptions, PieSeriesOptions, HistogramSeriesOptions, LegendOptions, CaptionOptions, FontWeight, DropShadowOptions, AxisOptions, SeriesLabelOptions, MarkerOptions, HighlightOptions, AxisType } from "./chartOptions";
+import { ChartOptions, CartesianChartOptions, PolarChartOptions, SeriesOptions, BarSeriesOptions, LineSeriesOptions, ScatterSeriesOptions, AreaSeriesOptions, PieSeriesOptions, HistogramSeriesOptions, LegendOptions, CaptionOptions, FontWeight, DropShadowOptions, AxisOptions, SeriesLabelOptions, MarkerOptions, HighlightOptions, AxisType, NavigatorOptions, NavigatorHandleOptions, NavigatorMaskOptions } from "./chartOptions";
 import { CartesianChart } from "./chart/cartesianChart";
@@ -21,2 +21,5 @@ import { PolarChart } from "./chart/polarChart";
 import { TimeAxis } from "./chart/axis/timeAxis";
+import { Navigator } from "./chart/navigator/navigator";
+import { NavigatorHandle } from "./chart/navigator/navigatorHandle";
+import { NavigatorMask } from "./chart/navigator/navigatorMask";
 export declare class ChartBuilder {
@@ -39,2 +42,3 @@ private static createCartesianChart;
     static createSeries(options: SeriesOptions): Series;
+    static initCartesianChart<C extends CartesianChart, T extends SeriesOptions>(chart: C, options: CartesianChartOptions<T>): C;
     static initChart<C extends Chart, T extends SeriesOptions>(chart: C, options: ChartOptions<T>): C;
@@ -52,2 +56,5 @@ static initSeries<S extends Series>(series: S, options: SeriesOptions): S;
     static initLegend(legend: Legend, options: LegendOptions): void;
+    static initNavigator(navigator: Navigator, options: NavigatorOptions): void;
+    static initNavigatorMask(mask: NavigatorMask, options: NavigatorMaskOptions): void;
+    static initNavigatorHandle(handle: NavigatorHandle, options: NavigatorHandleOptions): void;
     static initMarker(marker: SeriesMarker, options: MarkerOptions): void;
@@ -54,0 +61,0 @@ static initHighlightStyle(highlightStyle: HighlightStyle, options: HighlightOptions): void;

dist/es6/chartBuilder.js

@@ -46,3 +46,3 @@ import { CartesianChart } from "./chart/cartesianChart";
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createAxis(options.yAxis, 'category'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -55,3 +55,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new BarSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createGroupedCategoryAxis(options.yAxis), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -64,3 +64,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new BarSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -73,3 +73,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new BarSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -82,3 +82,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initBarSeries(new BarSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -91,3 +91,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initLineSeries(new LineSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -100,3 +100,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initLineSeries(new LineSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'number'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -109,3 +109,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initScatterSeries(new ScatterSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createAxis(options.xAxis, 'category'), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -118,3 +118,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initAreaSeries(new AreaSeries(), s); });
         var chart = this.createGroupedCategoryChart(container, ChartBuilder.createGroupedCategoryAxis(options.xAxis), ChartBuilder.createAxis(options.yAxis, 'number'), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         if (options.series) {
@@ -127,3 +127,3 @@ chart.series = options.series.map(function (s) { return ChartBuilder.initAreaSeries(new AreaSeries(), s); });
         var chart = this.createCartesianChart(container, ChartBuilder.createNumberAxis(options.xAxis), ChartBuilder.createNumberAxis(options.yAxis), options.document);
-        ChartBuilder.initChart(chart, options);
+        ChartBuilder.initCartesianChart(chart, options);
         return chart;
@@ -165,2 +165,8 @@ };
     };
+    ChartBuilder.initCartesianChart = function (chart, options) {
+        if (options.navigator !== undefined) {
+            ChartBuilder.initNavigator(chart.navigator, options.navigator);
+        }
+        return this.initChart(chart, options);
+    };
     ChartBuilder.initChart = function (chart, options) {
@@ -448,2 +454,30 @@ this.setValueIfExists(chart, 'width', options.width);
     };
+    ChartBuilder.initNavigator = function (navigator, options) {
+        this.setValueIfExists(navigator, 'enabled', options.enabled);
+        this.setValueIfExists(navigator, 'height', options.height);
+        this.setValueIfExists(navigator, 'min', options.min);
+        this.setValueIfExists(navigator, 'max', options.max);
+        this.initNavigatorMask(navigator.mask, options.mask);
+        this.initNavigatorHandle(navigator.minHandle, options.minHandle);
+        this.initNavigatorHandle(navigator.maxHandle, options.maxHandle);
+    };
+    ChartBuilder.initNavigatorMask = function (mask, options) {
+        if (options) {
+            this.setValueIfExists(mask, 'fill', options.fill);
+            this.setValueIfExists(mask, 'stroke', options.stroke);
+            this.setValueIfExists(mask, 'strokeWidth', options.strokeWidth);
+            this.setValueIfExists(mask, 'fillOpacity', options.fillOpacity);
+        }
+    };
+    ChartBuilder.initNavigatorHandle = function (handle, options) {
+        if (options) {
+            this.setValueIfExists(handle, 'fill', options.fill);
+            this.setValueIfExists(handle, 'stroke', options.stroke);
+            this.setValueIfExists(handle, 'strokeWidth', options.strokeWidth);
+            this.setValueIfExists(handle, 'width', options.width);
+            this.setValueIfExists(handle, 'height', options.height);
+            this.setValueIfExists(handle, 'gripLineGap', options.gripLineGap);
+            this.setValueIfExists(handle, 'gripLineLength', options.gripLineLength);
+        }
+    };
     ChartBuilder.initMarker = function (marker, options) {
@@ -450,0 +484,0 @@ marker.shape = ChartBuilder.getMarkerByName(options.shape);

dist/es6/chartOptions.d.ts

@@ -35,2 +35,3 @@ import { TooltipRendererParams } from "./chart/series/series";
     legend: LegendOptions;
+    navigator: NavigatorOptions;
     tooltipClass?: string;
@@ -68,2 +69,26 @@ listeners?: {
 }
+export interface NavigatorOptions {
+    enabled?: boolean;
+    height?: number;
+    min?: number;
+    max?: number;
+    mask?: NavigatorMaskOptions;
+    minHandle?: NavigatorHandleOptions;
+    maxHandle?: NavigatorHandleOptions;
+}
+export interface NavigatorMaskOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fillOpacity?: number;
+}
+export interface NavigatorHandleOptions {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    width?: number;
+    height?: number;
+    gripLineGap?: number;
+    gripLineLength?: number;
+}
 export interface LegendItemOptions {
@@ -86,2 +111,3 @@ label?: LegendLabelOptions;
     yAxis: AxisOptions;
+    navigator: NavigatorOptions;
 }
@@ -88,0 +114,0 @@ export interface PolarChartOptions<T> extends ChartOptions<T> {

dist/es6/scale/bandScale.d.ts

@@ -24,3 +24,3 @@ import Scale from './scale';
     private _range;
-    range: [number, number];
+    range: number[];
     ticks(): D[];
@@ -27,0 +27,0 @@ convert(d: D): number;

dist/es6/scene/clipRect.d.ts

 import { Node } from "./node";
 import { Path2D } from "./path2D";
+import { BBox } from "./bbox";
 /**
@@ -12,3 +13,3 @@ * Acts as `Group` node but with specified bounds that form a rectangle.
     protected path: Path2D;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     private _active;
@@ -27,3 +28,4 @@ active: boolean;
     updatePath(): void;
+    computeBBox(): BBox;
     render(ctx: CanvasRenderingContext2D): void;
 }

dist/es6/scene/clipRect.js

@@ -16,2 +16,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Path2D } from "./path2D";
+import { BBox } from "./bbox";
 /**
@@ -36,3 +37,3 @@ * Acts as `Group` node but with specified bounds that form a rectangle.
     }
-    ClipRect.prototype.isPointInNode = function (x, y) {
+    ClipRect.prototype.containsPoint = function (x, y) {
         var point = this.transformPoint(x, y);
@@ -128,2 +129,6 @@ return point.x >= this.x && point.x <= this.x + this.width
     };
+    ClipRect.prototype.computeBBox = function () {
+        var _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        return new BBox(x, y, width, height);
+    };
     ClipRect.prototype.render = function (ctx) {
@@ -147,2 +152,8 @@ if (this.active) {
         }
+        // debug
+        // this.computeBBox().render(ctx, {
+        //     label: this.id,
+        //     resetTransform: true,
+        //     fillStyle: 'rgba(0, 0, 0, 0.5)'
+        // });
     };
@@ -149,0 +160,0 @@ ClipRect.className = 'ClipRect';

dist/es6/scene/group.d.ts

@@ -6,5 +6,5 @@ import { Node } from "./node";
     protected isContainerNode: boolean;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     computeBBox(): BBox;
     render(ctx: CanvasRenderingContext2D): void;
 }

dist/es6/scene/group.js

@@ -25,3 +25,3 @@ var __extends = (this && this.__extends) || (function () {
     // We consider a group to be boundless, thus any point belongs to it.
-    Group.prototype.isPointInNode = function (x, y) {
+    Group.prototype.containsPoint = function (x, y) {
         return true;
@@ -28,0 +28,0 @@ };

dist/es6/scene/node.d.ts

@@ -124,3 +124,3 @@ import { Scene } from "./scene";
     translationY: number;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     /**
@@ -127,0 +127,0 @@ * Hit testing method.

dist/es6/scene/node.js

@@ -416,3 +416,3 @@ import { Matrix } from "./matrix";
     });
-    Node.prototype.isPointInNode = function (x, y) {
+    Node.prototype.containsPoint = function (x, y) {
         return false;
@@ -429,3 +429,3 @@ };
     Node.prototype.pickNode = function (x, y) {
-        if (!this.visible || this.pointerEvents === PointerEvents.None || !this.isPointInNode(x, y)) {
+        if (!this.visible || this.pointerEvents === PointerEvents.None || !this.containsPoint(x, y)) {
             return;
@@ -432,0 +432,0 @@ }

dist/es6/scene/scene.d.ts

 import { HdpiCanvas } from "../canvas/hdpiCanvas";
 import { Node } from "./node";
 import { Path2D } from "./path2D";
+interface DebugOptions {
+    renderFrameIndex: boolean;
+    renderBoundingBoxes: boolean;
+}
 export declare class Scene {
@@ -15,2 +19,3 @@ static className: string;
     readonly height: number;
+    private pendingSize?;
     resize(width: number, height: number): void;
@@ -24,7 +29,7 @@ private _dirty;
     appendPath(path: Path2D): void;
+    readonly debug: DebugOptions;
     private _frameIndex;
     readonly frameIndex: number;
-    private _renderFrameIndex;
-    renderFrameIndex: boolean;
     readonly render: () => void;
 }
+export {};

dist/es6/scene/scene.js

@@ -15,7 +15,15 @@ import { HdpiCanvas } from "../canvas/hdpiCanvas";
         this._root = null;
+        this.debug = {
+            renderFrameIndex: false,
+            renderBoundingBoxes: false
+        };
         this._frameIndex = 0;
-        this._renderFrameIndex = false;
         this.render = function () {
-            var _a = _this, ctx = _a.ctx, root = _a.root;
+            var _a;
+            var _b = _this, ctx = _b.ctx, root = _b.root, pendingSize = _b.pendingSize;
             _this.animationFrameId = 0;
+            if (pendingSize) {
+                (_a = _this.canvas).resize.apply(_a, pendingSize);
+                _this.pendingSize = undefined;
+            }
             if (root && !root.visible) {
@@ -35,7 +43,7 @@ _this.dirty = false;
             _this._frameIndex++;
-            if (_this.renderFrameIndex) {
+            if (_this.debug.renderFrameIndex) {
                 ctx.fillStyle = 'white';
                 ctx.fillRect(0, 0, 40, 15);
                 ctx.fillStyle = 'black';
-                ctx.fillText(_this.frameIndex.toString(), 0, 10);
+                ctx.fillText(_this.frameIndex.toString(), 2, 10);
             }
@@ -65,3 +73,3 @@ _this.dirty = false;
         get: function () {
-            return this.canvas.width;
+            return this.pendingSize ? this.pendingSize[0] : this.canvas.width;
         },
@@ -73,3 +81,3 @@ enumerable: true,
         get: function () {
-            return this.canvas.height;
+            return this.pendingSize ? this.pendingSize[1] : this.canvas.height;
         },
@@ -80,7 +88,9 @@ enumerable: true,
     Scene.prototype.resize = function (width, height) {
-        var _this = this;
-        this.canvas.resize(width, height, 
-        // resizing a canvas clears the pixel content so when resizing is done
-        // mark as dirty to ensure a re-render
-        function () { return _this.dirty = true; });
+        width = Math.round(width);
+        height = Math.round(height);
+        if (width === this.width && height === this.height) {
+            return;
+        }
+        this.pendingSize = [width, height];
+        this.dirty = true;
     };
@@ -162,15 +172,2 @@ Object.defineProperty(Scene.prototype, "dirty", {
     });
-    Object.defineProperty(Scene.prototype, "renderFrameIndex", {
-        get: function () {
-            return this._renderFrameIndex;
-        },
-        set: function (value) {
-            if (this._renderFrameIndex !== value) {
-                this._renderFrameIndex = value;
-                this.dirty = true;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
     Scene.className = 'Scene';
@@ -177,0 +174,0 @@ return Scene;

dist/es6/scene/shape/path.js

@@ -78,6 +78,12 @@ var __extends = (this && this.__extends) || (function () {
     Path.prototype.render = function (ctx) {
+        var scene = this.scene;
         if (this.dirtyTransform) {
             this.computeTransformMatrix();
         }
-        // this.matrix.transformBBox(this.computeBBox()!).render(ctx);
+        // if (scene.debug.renderBoundingBoxes) {
+        //     const bbox = this.computeBBox();
+        //     if (bbox) {
+        //         this.matrix.transformBBox(bbox).render(ctx);
+        //     }
+        // }
         this.matrix.toContext(ctx);
@@ -88,3 +94,3 @@ if (this.dirtyPath) {
         }
-        this.scene.appendPath(this.path);
+        scene.appendPath(this.path);
         this.fillStroke(ctx);
@@ -91,0 +97,0 @@ this.dirty = false;

dist/es6/scene/shape/rect.js

@@ -182,4 +182,4 @@ var __extends = (this && this.__extends) || (function () {
         if (this.crisp && !borderSizing) {
-            var alignment = Math.floor(strokeWidth) % 2 / 2;
-            path.rect(Math.floor(x) + alignment, Math.floor(y) + alignment, Math.floor(width) + Math.floor(x % 1 + width % 1), Math.floor(height) + Math.floor(y % 1 + height % 1));
+            var _a = this, a = _a.alignment, al = _a.align;
+            path.rect(al(a, x), al(a, y), al(a, x, width), al(a, y, height));
         }
@@ -191,3 +191,4 @@ else {
     Rect.prototype.computeBBox = function () {
-        return new BBox(this.x, this.y, this.width, this.height);
+        var _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        return new BBox(x, y, width, height);
     };
@@ -194,0 +195,0 @@ Rect.prototype.isPointInPath = function (x, y) {

dist/es6/scene/shape/shape.d.ts

@@ -52,7 +52,7 @@ import { Node } from "../node";
     protected restoreOverriddenStyles(): void;
-    private _fillOpacity;
+    protected _fillOpacity: number;
     fillOpacity: number;
-    private _strokeOpacity;
+    protected _strokeOpacity: number;
     strokeOpacity: number;
-    private _fill;
+    protected _fill: string | undefined;
     fill: string | undefined;
@@ -69,25 +69,27 @@ /**
      */
-    private _stroke;
+    protected _stroke: string | undefined;
     stroke: string | undefined;
     protected _strokeWidth: number;
     strokeWidth: number;
-    private _lineDash;
+    readonly alignment: number;
+    align(alignment: number, start: number, length?: number): number;
+    protected _lineDash: number[] | undefined;
     lineDash: number[] | undefined;
-    private _lineDashOffset;
+    protected _lineDashOffset: number;
     lineDashOffset: number;
-    private _lineCap;
+    protected _lineCap: ShapeLineCap;
     lineCap: ShapeLineCap;
-    private _lineJoin;
+    protected _lineJoin: ShapeLineJoin;
     lineJoin: ShapeLineJoin;
-    private _opacity;
+    protected _opacity: number;
     opacity: number;
     private readonly onShadowChange;
-    private _fillShadow;
+    protected _fillShadow: DropShadow | undefined;
     fillShadow: DropShadow | undefined;
-    private _strokeShadow;
+    protected _strokeShadow: DropShadow | undefined;
     strokeShadow: DropShadow | undefined;
     protected fillStroke(ctx: CanvasRenderingContext2D): void;
-    isPointInNode(x: number, y: number): boolean;
+    containsPoint(x: number, y: number): boolean;
     abstract isPointInPath(x: number, y: number): boolean;
     abstract isPointInStroke(x: number, y: number): boolean;
 }

dist/es6/scene/shape/shape.js

@@ -167,2 +167,18 @@ var __extends = (this && this.__extends) || (function () {
     });
+    Object.defineProperty(Shape.prototype, "alignment", {
+        // An offset value to align to the pixel grid.
+        get: function () {
+            return Math.floor(this.strokeWidth) % 2 / 2;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // Returns the aligned `start` or `length` value.
+    // For example: `start` could be `y` and `length` could be `height` of a rectangle.
+    Shape.prototype.align = function (alignment, start, length) {
+        if (length != undefined) {
+            return Math.floor(length) + Math.floor(start % 1 + length % 1);
+        }
+        return Math.floor(start) + alignment;
+    };
     Object.defineProperty(Shape.prototype, "lineDash", {
@@ -332,3 +348,3 @@ get: function () {
     };
-    Shape.prototype.isPointInNode = function (x, y) {
+    Shape.prototype.containsPoint = function (x, y) {
         return this.isPointInPath(x, y);
@@ -335,0 +351,0 @@ };

dist/es6/scene/shape/text.js

@@ -268,6 +268,3 @@ var __extends = (this && this.__extends) || (function () {
         this.matrix.toContext(ctx);
-        var _a = this, opacity = _a.opacity, fill = _a.fill, stroke = _a.stroke, strokeWidth = _a.strokeWidth;
-        if (opacity < 1) {
-            ctx.globalAlpha = opacity;
-        }
+        var _a = this, fill = _a.fill, stroke = _a.stroke, strokeWidth = _a.strokeWidth;
         ctx.font = this.font;
@@ -279,2 +276,3 @@ ctx.textAlign = this.textAlign;
             ctx.fillStyle = fill;
+            ctx.globalAlpha = this.opacity * this.fillOpacity;
             var _b = this, fillShadow = _b.fillShadow, text = _b.text, x = _b.x, y = _b.y;
@@ -292,2 +290,3 @@ if (fillShadow && fillShadow.enabled) {
             ctx.lineWidth = strokeWidth;
+            ctx.globalAlpha = this.opacity * this.strokeOpacity;
             var _c = this, lineDash = _c.lineDash, lineDashOffset = _c.lineDashOffset, lineCap = _c.lineCap, lineJoin = _c.lineJoin, strokeShadow = _c.strokeShadow, text = _c.text, x = _c.x, y = _c.y;
@@ -294,0 +293,0 @@ if (lineDash) {

package.json

 {
   "name": "ag-charts-community",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Advanced Charting / Charts supporting Javascript / React / Angular",
@@ -5,0 +5,0 @@ "main": "./dist/cjs/main.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4840619

increased by5.01%

Number of package files

597

increased by4.37%

Lines of code

90946

increased by5.25%

No dependency changes