@elastic/charts 46.0.0 → 46.2.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [46.2.0](https://github.com/elastic/elastic-charts/compare/v46.1.0...v46.2.0) (2022-05-18)
+
+
+### Bug Fixes
+
+* runtime error with `process.env` in src ([#1672](https://github.com/elastic/elastic-charts/issues/1672)) ([47a6b0b](https://github.com/elastic/elastic-charts/commit/47a6b0b9ab88cc33229ca8c132e10deb6729cd57))
+* **deps:** update dependency @elastic/eui to v56 ([#1667](https://github.com/elastic/elastic-charts/issues/1667)) ([285ec8b](https://github.com/elastic/elastic-charts/commit/285ec8bdd05dee758f03b503cb1df311b140c778))
+
+
+### Features
+
+* flame graph with WebGL ([#1664](https://github.com/elastic/elastic-charts/issues/1664)) ([96368ea](https://github.com/elastic/elastic-charts/commit/96368ea45e093cf0e1b0b6db7356568e98be25c9))
+
+# [46.1.0](https://github.com/elastic/elastic-charts/compare/v46.0.1...v46.1.0) (2022-05-05)
+
+
+### Bug Fixes
+
+* **animations:** flashing when using grouped parameterized keys ([#1665](https://github.com/elastic/elastic-charts/issues/1665)) ([1323edc](https://github.com/elastic/elastic-charts/commit/1323edc76f496028ffe2119ec83af2834484bede))
+* **deps:** update dependency @elastic/eui to ^55.1.0 ([#1663](https://github.com/elastic/elastic-charts/issues/1663)) ([ef8a185](https://github.com/elastic/elastic-charts/commit/ef8a185fc621890d561432953846112e957bdb5d))
+* **deps:** update dependency @elastic/eui to v55 ([#1659](https://github.com/elastic/elastic-charts/issues/1659)) ([5fc4af3](https://github.com/elastic/elastic-charts/commit/5fc4af3c84b1ff9d2818862d1eb19de780de4208))
+
+
+### Features
+
+* **annotations:** animated focus states for hovered annotation ([#1628](https://github.com/elastic/elastic-charts/issues/1628)) ([0bbb809](https://github.com/elastic/elastic-charts/commit/0bbb809132897dc691f1a71c676c46ec91aa59df))
+
+## [46.0.1](https://github.com/elastic/elastic-charts/compare/v46.0.0...v46.0.1) (2022-04-19)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @elastic/eui to ^54.1.0 ([#1652](https://github.com/elastic/elastic-charts/issues/1652)) ([c9c6d31](https://github.com/elastic/elastic-charts/commit/c9c6d31aca342df83271efcbaeed5a79c02a71a3))
+* **rendering:** clip at panel sizes on small multiples ([#1651](https://github.com/elastic/elastic-charts/issues/1651)) ([2850530](https://github.com/elastic/elastic-charts/commit/285053061f286d6171221cb99483dd500dfaf52a))
+
 # [46.0.0](https://github.com/elastic/elastic-charts/compare/v45.1.1...v46.0.0) (2022-04-14)
 
 

package/dist/chart_types/flame_chart/flame_api.d.ts

@@ -0,0 +1,52 @@
+import { ChartType } from '..';
+import { AnimationConfig } from '../../common/animation';
+import { BaseDatum, Spec } from '../../specs';
+import { SpecType } from '../../specs/constants';
+import { SFProps } from '../../state/spec_factory';
+import { Datum, ValueAccessor, ValueFormatter } from '../../utils/common';
+/**
+ * Provides direct controls for the component user
+ * @public
+ */
+export declare type ControlProviderCallback = (controlName: string, controlFunction: (...args: unknown[]) => void) => void;
+/**
+ * Column oriented data input for N data points:
+ *   - label: array of N strings
+ *   - value: Float64Array of N numbers, for tooltip value display
+ *   - color: Float32Array of 4 * N numbers, eg. green[i] = color[4 * i + 1]
+ *   - position0: Float32Array of 2 * N numbers with unit coordinates [x0, y0, x1, y1, ..., xN-1, yN-1]
+ *   - position1: for now, the same typed array for position0 to be used
+ *   - size0: Float32Array of N numbers with unit widths [width0, width1, ... , widthN-1]
+ *   - size1: for now, the same typed array for size0 to be used
+ * @public
+ */
+export interface ColumnarViewModel {
+    label: string[];
+    value: Float64Array;
+    color: Float32Array;
+    position0: Float32Array;
+    position1: Float32Array;
+    size0: Float32Array;
+    size1: Float32Array;
+}
+/**
+ * Specifies the flame chart
+ * @public
+ */
+export interface FlameSpec<D extends BaseDatum = Datum> extends Spec, AnimationConfig {
+    specType: typeof SpecType.Series;
+    chartType: typeof ChartType.Flame;
+    columnarData: ColumnarViewModel;
+    controlProviderCallback: ControlProviderCallback;
+    valueAccessor: ValueAccessor<D>;
+    valueFormatter: ValueFormatter;
+    valueGetter: (datumIndex: number) => number;
+}
+declare const buildProps: import("../../state/spec_factory").BuildProps<FlameSpec<any>, "chartType" | "specType", "animation" | "valueAccessor" | "valueFormatter" | "valueGetter", never, "id" | "columnarData" | "controlProviderCallback">;
+/**
+ * Adds flame spec to chart specs
+ * @public
+ */
+export declare const Flame: <D extends BaseDatum = any>(props: SFProps<FlameSpec<D>, "chartType" | "specType", "animation" | "valueAccessor" | "valueFormatter" | "valueGetter", never, "id" | "columnarData" | "controlProviderCallback">) => null;
+export {};
+//# sourceMappingURL=flame_api.d.ts.map

package/dist/chart_types/flame_chart/flame_api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flame_api.d.ts","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAgB,OAAO,EAAkB,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,KAAK,EAAkB,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1F;;;GAGG;AACH,oBAAY,uBAAuB,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;AAEnH;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,YAAY,CAAC;IACxB,SAAS,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,KAAK,CAAE,SAAQ,IAAI,EAAE,eAAe;IACnF,QAAQ,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC;IACjC,SAAS,EAAE,OAAO,SAAS,CAAC,KAAK,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,uBAAuB,EAAE,uBAAuB,CAAC;IACjD,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAED,QAAA,MAAM,UAAU,qNAWf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,yNAYjB,CAAC"}

package/dist/chart_types/flame_chart/flame_api.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flame = void 0;
+var __1 = require("..");
+var constants_1 = require("../../specs/constants");
+var spec_factory_1 = require("../../state/spec_factory");
+var common_1 = require("../../utils/common");
+var buildProps = (0, spec_factory_1.buildSFProps)()({
+    chartType: __1.ChartType.Flame,
+    specType: constants_1.SpecType.Series,
+}, {
+    valueAccessor: function (d) { return (typeof d === 'number' ? d : 0); },
+    valueGetter: function (n) { return n; },
+    valueFormatter: function (d) { return String(d); },
+    animation: { duration: 0 },
+});
+var Flame = function (props) {
+    var defaults = buildProps.defaults, overrides = buildProps.overrides;
+    (0, spec_factory_1.useSpecFactory)(__assign(__assign(__assign({}, defaults), (0, common_1.stripUndefined)(props)), overrides));
+    return null;
+};
+exports.Flame = Flame;
+//# sourceMappingURL=flame_api.js.map

package/dist/chart_types/flame_chart/flame_api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flame_api.js","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_api.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,wBAA+B;AAG/B,mDAAiD;AACjD,yDAAiF;AACjF,6CAA0F;AA2C1F,IAAM,UAAU,GAAG,IAAA,2BAAY,GAAa,CAC1C;IACE,SAAS,EAAE,aAAS,CAAC,KAAK;IAC1B,QAAQ,EAAE,oBAAQ,CAAC,MAAM;CAC1B,EACD;IACE,aAAa,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAA/B,CAA+B;IACrD,WAAW,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC;IACrB,cAAc,EAAE,UAAC,CAAC,IAAK,OAAA,MAAM,CAAC,CAAC,CAAC,EAAT,CAAS;IAChC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;CAC3B,CACF,CAAC;AAMK,IAAM,KAAK,GAAG,UACnB,KAMC;IAEO,IAAA,QAAQ,GAAgB,UAAU,SAA1B,EAAE,SAAS,GAAK,UAAU,UAAf,CAAgB;IAC3C,IAAA,6BAAc,iCAAoB,QAAQ,GAAK,IAAA,uBAAc,EAAC,KAAK,CAAC,GAAK,SAAS,EAAG,CAAC;IACtF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAZW,QAAA,KAAK,SAYhB"}

package/dist/chart_types/flame_chart/flame_chart.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=flame_chart.d.ts.map

package/dist/chart_types/flame_chart/flame_chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flame_chart.d.ts","sourceRoot":"","sources":["../../../src/chart_types/flame_chart/flame_chart.tsx"],"names":[],"mappings":""}

package/dist/chart_types/flame_chart/flame_chart.js

@@ -0,0 +1,481 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlameWithTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var redux_1 = require("redux");
+var __1 = require("..");
+var constants_1 = require("../../common/constants");
+var kingly_1 = require("../../common/kingly");
+var tooltip_1 = require("../../components/tooltip/tooltip");
+var specs_1 = require("../../specs");
+var chart_1 = require("../../state/actions/chart");
+var mouse_1 = require("../../state/actions/mouse");
+var get_accessibility_config_1 = require("../../state/selectors/get_accessibility_config");
+var get_settings_specs_1 = require("../../state/selectors/get_settings_specs");
+var utils_1 = require("../../state/utils");
+var common_1 = require("../../utils/common");
+var common_2 = require("./render/common");
+var draw_a_frame_1 = require("./render/draw_a_frame");
+var ensure_webgl_1 = require("./render/ensure_webgl");
+var shaders_1 = require("./shaders");
+var types_1 = require("./types");
+var PINCH_ZOOM_CHECK_INTERVAL_MS = 100;
+var SIDE_OVERSHOOT_RATIO = 0.05;
+var RECURRENCE_ALPHA_PER_MS_X = 0.01;
+var RECURRENCE_ALPHA_PER_MS_Y = 0.01;
+var SINGLE_CLICK_EMPTY_FOCUS = true;
+var IS_META_REQUIRED_FOR_ZOOM = false;
+var ZOOM_SPEED = 0.0015;
+var DEEPEST_ZOOM_RATIO = 1e-7;
+var ZOOM_FROM_EDGE_BAND = 16;
+var LEFT_MOUSE_BUTTON = 1;
+var unitRowPitch = function (position) { return (position.length >= 4 ? position[1] - position[3] : 1); };
+var initialPixelRowPitch = function () { return 16; };
+var specValueFormatter = function (d) { return d; };
+var browserRootWindow = function () {
+    var rootWindow = window;
+    while (window.parent && window.parent.window !== rootWindow)
+        rootWindow = rootWindow.parent.window;
+    return rootWindow;
+};
+var columnToRowPositions = function (_a, i) {
+    var position1 = _a.position1, size1 = _a.size1;
+    return ({
+        x0: position1[i * 2],
+        x1: position1[i * 2] + size1[i],
+        y0: position1[i * 2 + 1],
+        y1: position1[i * 2 + 1] + unitRowPitch(position1),
+    });
+};
+var focusRect = function (columnarViewModel, chartHeight, drilldownDatumIndex, drilldownTimestamp) {
+    var _a = columnToRowPositions(columnarViewModel, drilldownDatumIndex || 0), x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
+    var sideOvershoot = SIDE_OVERSHOOT_RATIO * (x1 - x0);
+    var unitHeight = (chartHeight / initialPixelRowPitch()) * (y1 - y0);
+    var intendedY0 = y1 - unitHeight;
+    var bottomOvershoot = Math.max(0, -intendedY0);
+    var top = Math.min(1, y1 + bottomOvershoot);
+    return {
+        timestamp: drilldownTimestamp,
+        x0: Math.max(0, x0 - sideOvershoot),
+        x1: Math.min(1, x1 + sideOvershoot),
+        y0: Math.max(0, intendedY0),
+        y1: Math.min(1, top),
+    };
+};
+var getColor = function (c, i) {
+    var r = Math.round(255 * c[4 * i]);
+    var g = Math.round(255 * c[4 * i + 1]);
+    var b = Math.round(255 * c[4 * i + 2]);
+    var a = c[4 * i + 3];
+    return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+};
+var colorToDatumIndex = function (pixel) {
+    var isEmptyArea = pixel[0] + pixel[1] + pixel[2] + pixel[3] < shaders_1.GEOM_INDEX_OFFSET;
+    return isEmptyArea ? NaN : pixel[3] + 256 * (pixel[2] + 256 * (pixel[1] + 256 * pixel[0])) - shaders_1.GEOM_INDEX_OFFSET;
+};
+var FlameComponent = (function (_super) {
+    __extends(FlameComponent, _super);
+    function FlameComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.startOfDragX = NaN;
+        _this.startOfDragX0 = NaN;
+        _this.startOfDragY = NaN;
+        _this.startOfDragY0 = NaN;
+        _this.setupDevicePixelRatioChangeListener = function () {
+            window.matchMedia("(resolution: " + window.devicePixelRatio + "dppx)").addEventListener('change', function () {
+                _this.setState({});
+                _this.setupDevicePixelRatioChangeListener();
+            }, { once: true });
+        };
+        _this.setupViewportScaleChangeListener = function () {
+            window.clearInterval(_this.pinchZoomSetInterval);
+            _this.pinchZoomSetInterval = window.setInterval(function () {
+                var pinchZoomScale = browserRootWindow().visualViewport.scale;
+                if (pinchZoomScale !== _this.pinchZoomScale) {
+                    _this.pinchZoomScale = pinchZoomScale;
+                    _this.setState({});
+                }
+            }, PINCH_ZOOM_CHECK_INTERVAL_MS);
+        };
+        _this.componentDidMount = function () {
+            var _a;
+            _this.tryCanvasContext();
+            _this.drawCanvas();
+            _this.props.onChartRendered();
+            _this.setupDevicePixelRatioChangeListener();
+            (_a = _this.props.containerRef().current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', _this.preventScroll, { passive: false });
+        };
+        _this.componentDidUpdate = function () {
+            if (!_this.ctx)
+                _this.tryCanvasContext();
+            _this.ensurePickTexture();
+            _this.drawCanvas();
+        };
+        _this.datumAtXY = function (x, y) {
+            return _this.glContext ? colorToDatumIndex((0, kingly_1.readPixel)(_this.glContext, x, y)) : NaN;
+        };
+        _this.getHoveredDatumIndex = function (e) {
+            var pr = window.devicePixelRatio * _this.pinchZoomScale;
+            return {
+                datumIndex: _this.datumAtXY(pr * _this.pointerX, pr * (_this.props.chartDimensions.height - _this.pointerY)),
+                timestamp: e.timeStamp,
+            };
+        };
+        _this.getDragDistanceX = function () { return _this.pointerX - _this.startOfDragX; };
+        _this.getDragDistanceY = function () { return -(_this.pointerY - _this.startOfDragY); };
+        _this.isDragging = function (_a) {
+            var buttons = _a.buttons;
+            return buttons & LEFT_MOUSE_BUTTON;
+        };
+        _this.handleMouseHoverMove = function (e) {
+            if (!_this.isDragging(e)) {
+                e.stopPropagation();
+                _this.updatePointerLocation(e);
+                var hovered = _this.getHoveredDatumIndex(e);
+                var prevHoverIndex = _this.hoverIndex >= 0 ? _this.hoverIndex : NaN;
+                if (hovered) {
+                    _this.hoverIndex = hovered.datumIndex;
+                    if (!Object.is(_this.hoverIndex, prevHoverIndex)) {
+                        if (Number.isFinite(hovered.datumIndex)) {
+                            _this.props.onElementOver([{ vmIndex: hovered.datumIndex }]);
+                        }
+                        else {
+                            _this.hoverIndex = NaN;
+                            _this.props.onElementOut();
+                        }
+                    }
+                    _this.setState({});
+                }
+            }
+        };
+        _this.handleMouseDragMove = function (e) {
+            e.stopPropagation();
+            _this.updatePointerLocation(e);
+            if (_this.isDragging(e)) {
+                var _a = _this.currentFocus, x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
+                var focusWidth = x1 - x0;
+                var focusHeight = y1 - y0;
+                if (Number.isNaN(_this.startOfDragX0))
+                    _this.startOfDragX0 = x0;
+                if (Number.isNaN(_this.startOfDragY0))
+                    _this.startOfDragY0 = y0;
+                var dragDistanceX = _this.getDragDistanceX();
+                var dragDistanceY = _this.getDragDistanceY();
+                var _b = _this.props.chartDimensions, chartWidth = _b.width, chartHeight = _b.height;
+                var deltaIntentX = (-dragDistanceX / chartWidth) * focusWidth;
+                var deltaIntentY = (-dragDistanceY / chartHeight) * focusHeight;
+                var deltaCorrectionX = deltaIntentX > 0
+                    ? Math.min(0, 1 - (_this.startOfDragX0 + focusWidth + deltaIntentX))
+                    : -Math.min(0, _this.startOfDragX0 + deltaIntentX);
+                var deltaCorrectionY = deltaIntentY > 0
+                    ? Math.min(0, 1 - (_this.startOfDragY0 + focusHeight + deltaIntentY))
+                    : -Math.min(0, _this.startOfDragY0 + deltaIntentY);
+                var deltaX = deltaIntentX + deltaCorrectionX;
+                var deltaY = deltaIntentY + deltaCorrectionY;
+                var newX0 = (0, common_1.clamp)(_this.startOfDragX0 + deltaX, 0, 1);
+                var newX1 = (0, common_1.clamp)(_this.startOfDragX0 + focusWidth + deltaX, 0, 1);
+                var newY0 = (0, common_1.clamp)(_this.startOfDragY0 + deltaY, 0, 1);
+                var newY1 = (0, common_1.clamp)(_this.startOfDragY0 + focusHeight + deltaY, 0, 1);
+                var newFocus = { x0: newX0, x1: newX1, y0: newY0, y1: newY1, timestamp: e.timeStamp };
+                _this.currentFocus = newFocus;
+                _this.targetFocus = newFocus;
+                _this.hoverIndex = NaN;
+                _this.setState({});
+            }
+        };
+        _this.clearDrag = function () {
+            _this.startOfDragX = NaN;
+            _this.startOfDragX0 = NaN;
+            _this.startOfDragY = NaN;
+            _this.startOfDragY0 = NaN;
+        };
+        _this.resetDrag = function () {
+            _this.startOfDragX = _this.pointerX;
+            _this.startOfDragY = _this.pointerY;
+        };
+        _this.handleMouseDown = function (e) {
+            e.stopPropagation();
+            _this.resetDrag();
+            window.addEventListener('mousemove', _this.handleMouseDragMove, { passive: true });
+            window.addEventListener('mouseup', _this.handleMouseUp, { passive: true });
+        };
+        _this.handleMouseUp = function (e) {
+            e.stopPropagation();
+            window.removeEventListener('mousemove', _this.handleMouseDragMove);
+            window.removeEventListener('mouseup', _this.handleMouseUp);
+            _this.updatePointerLocation(e);
+            var dragDistanceX = _this.getDragDistanceX();
+            var dragDistanceY = _this.getDragDistanceY();
+            if (!dragDistanceX && !dragDistanceY) {
+                var hovered = _this.getHoveredDatumIndex(e);
+                var isDoubleClick = e.detail > 1;
+                var hasClickedOnRectangle = Number.isFinite(hovered === null || hovered === void 0 ? void 0 : hovered.datumIndex);
+                var mustFocus = SINGLE_CLICK_EMPTY_FOCUS || isDoubleClick !== hasClickedOnRectangle;
+                if (mustFocus) {
+                    _this.targetFocus = focusRect(_this.props.columnarViewModel, _this.props.chartDimensions.height, hovered.datumIndex, hovered.timestamp);
+                    _this.prevT = NaN;
+                    _this.hoverIndex = NaN;
+                    _this.setState({});
+                    _this.props.onElementClick([{ vmIndex: hovered.datumIndex }]);
+                }
+            }
+            _this.clearDrag();
+            _this.setState({});
+        };
+        _this.handleMouseLeave = function (e) {
+            e.stopPropagation();
+            if (Number.isFinite(_this.hoverIndex)) {
+                _this.hoverIndex = NaN;
+                _this.setState({});
+            }
+        };
+        _this.preventScroll = function (e) { return e.metaKey === IS_META_REQUIRED_FOR_ZOOM && e.preventDefault(); };
+        _this.handleWheel = function (e) {
+            if (e.metaKey !== IS_META_REQUIRED_FOR_ZOOM)
+                return;
+            _this.updatePointerLocation(e);
+            var _a = _this.currentFocus, x0 = _a.x0, x1 = _a.x1, y0 = _a.y0, y1 = _a.y1;
+            var wheelDelta = -e.deltaY;
+            var delta = wheelDelta * ZOOM_SPEED;
+            var unitX = _this.pointerX / _this.props.chartDimensions.width;
+            var unitY = (_this.props.chartDimensions.height - _this.pointerY) / _this.props.chartDimensions.height;
+            var zoomOut = delta <= 0;
+            var midX = x0 === 0 && (zoomOut || _this.pointerX < ZOOM_FROM_EDGE_BAND)
+                ? 0
+                : x1 === 1 && (zoomOut || _this.pointerX > _this.props.chartDimensions.width - ZOOM_FROM_EDGE_BAND)
+                    ? 1
+                    : (0, common_1.clamp)(x0 + unitX * Math.abs(x1 - x0), 0, 1);
+            var midY = y0 === 0 && (zoomOut || _this.pointerY > _this.props.chartDimensions.height - ZOOM_FROM_EDGE_BAND)
+                ? 0
+                : y1 === 1 && (zoomOut || _this.pointerY < ZOOM_FROM_EDGE_BAND)
+                    ? 1
+                    : (0, common_1.clamp)(y0 + unitY * Math.abs(y1 - y0), 0, 1);
+            var targetX0 = (0, common_1.clamp)(x0 - delta * (x0 - midX), 0, 1);
+            var targetX1 = (0, common_1.clamp)(x1 + delta * (midX - x1), 0, 1);
+            var targetY0 = (0, common_1.clamp)(y0 - delta * (y0 - midY), 0, 1);
+            var targetY1 = (0, common_1.clamp)(y1 + delta * (midY - y1), 0, 1);
+            var newX0 = Math.min(targetX0, midX);
+            var newX1 = Math.max(targetX1, midX);
+            var newY0 = Math.min(targetY0, midY);
+            var newY1 = Math.max(targetY1, midY);
+            var xZoom = (e.ctrlKey || !e.altKey) && newX1 - newX0 >= DEEPEST_ZOOM_RATIO;
+            var yZoom = (e.ctrlKey || e.altKey) && newY1 - newY0 >= unitRowPitch(_this.props.columnarViewModel.position1);
+            if (xZoom || yZoom) {
+                var newFocus = {
+                    x0: xZoom ? newX0 : x0,
+                    x1: xZoom ? newX1 : x1,
+                    y0: yZoom ? newY0 : y0,
+                    y1: yZoom ? newY1 : y1,
+                    timestamp: e.timeStamp,
+                };
+                _this.currentFocus = newFocus;
+                _this.targetFocus = newFocus;
+            }
+            _this.hoverIndex = NaN;
+            _this.setState({});
+        };
+        _this.render = function () {
+            var _a = _this.props, forwardStageRef = _a.forwardStageRef, _b = _a.chartDimensions, requestedWidth = _b.width, requestedHeight = _b.height, a11ySettings = _a.a11ySettings;
+            var width = (0, common_2.roundUpSize)(requestedWidth);
+            var height = (0, common_2.roundUpSize)(requestedHeight);
+            var style = {
+                width: width,
+                height: height,
+                top: 0,
+                left: 0,
+                padding: 0,
+                margin: 0,
+                border: 0,
+                position: 'absolute',
+                cursor: _this.startOfDragX ? 'grab' : _this.hoverIndex >= 0 ? 'pointer' : constants_1.DEFAULT_CSS_CURSOR,
+            };
+            var dpr = window.devicePixelRatio * _this.pinchZoomScale;
+            var canvasWidth = width * dpr;
+            var canvasHeight = height * dpr;
+            var columns = _this.props.columnarViewModel;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("figure", { "aria-labelledby": a11ySettings.labelId, "aria-describedby": a11ySettings.descriptionId },
+                    react_1.default.createElement("canvas", { ref: _this.glCanvasRef, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, style: style, role: "presentation" }),
+                    react_1.default.createElement("canvas", { ref: forwardStageRef, className: "echCanvasRenderer", width: canvasWidth, height: canvasHeight, onMouseMove: _this.handleMouseHoverMove, onMouseDown: _this.handleMouseDown, onMouseLeave: _this.handleMouseLeave, onWheel: _this.handleWheel, style: style, role: "presentation" })),
+                react_1.default.createElement(tooltip_1.BasicTooltip, { onPointerMove: function () { return ({ type: mouse_1.ON_POINTER_MOVE, position: { x: NaN, y: NaN }, time: NaN }); }, position: { x: _this.pointerX, y: _this.pointerY, width: 0, height: 0 }, visible: _this.props.tooltipRequired && _this.hoverIndex >= 0, info: {
+                        header: null,
+                        values: _this.hoverIndex >= 0
+                            ? [
+                                {
+                                    label: columns.label[_this.hoverIndex],
+                                    color: getColor(columns.color, _this.hoverIndex),
+                                    isHighlighted: false,
+                                    isVisible: true,
+                                    seriesIdentifier: { specId: '', key: '' },
+                                    value: columns.value[_this.hoverIndex],
+                                    formattedValue: "" + specValueFormatter(columns.value[_this.hoverIndex]),
+                                    valueAccessor: _this.hoverIndex,
+                                },
+                            ]
+                            : [],
+                    }, getChartContainerRef: _this.props.containerRef })));
+        };
+        _this.drawCanvas = function () {
+            if (!_this.ctx || !_this.glContext || !_this.pickTexture)
+                return;
+            var renderFrame = (0, draw_a_frame_1.drawFrame)(_this.ctx, _this.glContext, _this.props.chartDimensions.width, _this.props.chartDimensions.height, window.devicePixelRatio * _this.pinchZoomScale, _this.props.columnarViewModel, _this.pickTexture, _this.glResources.pickTextureRenderer, _this.glResources.roundedRectRenderer, _this.hoverIndex, unitRowPitch(_this.props.columnarViewModel.position1));
+            var anim = function (t) {
+                var msDeltaT = Number.isNaN(_this.prevT) ? 0 : t - _this.prevT;
+                _this.prevT = t;
+                var dx0 = _this.targetFocus.x0 - _this.currentFocus.x0;
+                var dx1 = _this.targetFocus.x1 - _this.currentFocus.x1;
+                var dy0 = _this.targetFocus.y0 - _this.currentFocus.y0;
+                var dy1 = _this.targetFocus.y1 - _this.currentFocus.y1;
+                var currentExtentX = _this.currentFocus.x1 - _this.currentFocus.x0;
+                var currentExtentY = _this.currentFocus.y1 - _this.currentFocus.y0;
+                var relativeExpansionX = Math.max(1, (currentExtentX + dx1 - dx0) / currentExtentX);
+                var relativeExpansionY = Math.max(1, (currentExtentX + dy1 - dy0) / currentExtentY);
+                var jointRelativeExpansion = relativeExpansionX * relativeExpansionY;
+                var convergenceRateX = Math.min(1, msDeltaT * RECURRENCE_ALPHA_PER_MS_X) / jointRelativeExpansion;
+                var convergenceRateY = Math.min(1, msDeltaT * RECURRENCE_ALPHA_PER_MS_Y) / jointRelativeExpansion;
+                _this.currentFocus.x0 += convergenceRateX * dx0;
+                _this.currentFocus.x1 += convergenceRateX * dx1;
+                _this.currentFocus.y0 += convergenceRateY * dy0;
+                _this.currentFocus.y1 += convergenceRateY * dy1;
+                renderFrame([_this.currentFocus.x0, _this.currentFocus.x1, _this.currentFocus.y0, _this.currentFocus.y1]);
+                var maxDiff = Math.max(Math.abs(dx0), Math.abs(dx1), Math.abs(dy0), Math.abs(dy1));
+                if (maxDiff > 1e-12)
+                    _this.animationRafId = window.requestAnimationFrame(anim);
+            };
+            window.cancelAnimationFrame(_this.animationRafId);
+            _this.animationRafId = window.requestAnimationFrame(anim);
+            _this.props.onRenderChange(true);
+        };
+        _this.ensurePickTexture = function () {
+            var _a;
+            var _b = _this.props.chartDimensions, width = _b.width, height = _b.height;
+            var pr = window.devicePixelRatio * _this.pinchZoomScale;
+            var textureWidth = pr * width;
+            var textureHeight = pr * height;
+            var current = _this.pickTexture;
+            if (_this.glContext &&
+                (current === kingly_1.NullTexture || current.width !== textureWidth || current.height !== textureHeight)) {
+                current.delete();
+                _this.pickTexture =
+                    (_a = (0, kingly_1.createTexture)(_this.glContext, {
+                        textureIndex: 0,
+                        width: textureWidth,
+                        height: textureHeight,
+                        internalFormat: _this.glContext.RGBA8,
+                        data: null,
+                    })) !== null && _a !== void 0 ? _a : kingly_1.NullTexture;
+                (0, kingly_1.bindFramebuffer)(_this.glContext, kingly_1.GL_READ_FRAMEBUFFER, _this.pickTexture.target());
+            }
+        };
+        _this.tryCanvasContext = function () {
+            var canvas = _this.props.forwardStageRef.current;
+            var glCanvas = _this.glCanvasRef.current;
+            _this.ctx = canvas && canvas.getContext('2d');
+            _this.glContext = glCanvas && glCanvas.getContext('webgl2');
+            _this.ensurePickTexture();
+            if (_this.glContext && _this.glResources === types_1.NULL_GL_RESOURCES) {
+                _this.glResources = (0, ensure_webgl_1.ensureWebgl)(_this.glContext, _this.props.columnarViewModel);
+            }
+        };
+        _this.ctx = null;
+        _this.glContext = null;
+        _this.pickTexture = kingly_1.NullTexture;
+        _this.glResources = types_1.NULL_GL_RESOURCES;
+        _this.glCanvasRef = (0, react_1.createRef)();
+        _this.animationRafId = NaN;
+        _this.prevT = NaN;
+        _this.currentFocus = focusRect(_this.props.columnarViewModel, props.chartDimensions.height, 0, -Infinity);
+        _this.targetFocus = __assign({}, _this.currentFocus);
+        _this.hoverIndex = NaN;
+        _this.pointerX = -10000;
+        _this.pointerY = -10000;
+        _this.pinchZoomSetInterval = NaN;
+        _this.pinchZoomScale = browserRootWindow().visualViewport.scale;
+        _this.setupViewportScaleChangeListener();
+        return _this;
+    }
+    FlameComponent.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = this.props.containerRef().current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', this.preventScroll);
+    };
+    FlameComponent.prototype.updatePointerLocation = function (e) {
+        if (!this.props.forwardStageRef.current || !this.ctx)
+            return;
+        var box = this.props.forwardStageRef.current.getBoundingClientRect();
+        this.pointerX = e.clientX - box.left;
+        this.pointerY = e.clientY - box.top;
+    };
+    FlameComponent.displayName = 'Flame';
+    return FlameComponent;
+}(react_1.default.Component));
+var mapStateToProps = function (state) {
+    var _a, _b, _c, _d, _e, _f;
+    var flameSpec = (0, utils_1.getSpecsFromStore)(state.specs, __1.ChartType.Flame, specs_1.SpecType.Series)[0];
+    var settingsSpec = (0, get_settings_specs_1.getSettingsSpecSelector)(state);
+    return {
+        columnarViewModel: (_a = flameSpec === null || flameSpec === void 0 ? void 0 : flameSpec.columnarData) !== null && _a !== void 0 ? _a : types_1.nullColumnarViewModel,
+        animationDuration: (_b = flameSpec === null || flameSpec === void 0 ? void 0 : flameSpec.animation.duration) !== null && _b !== void 0 ? _b : 0,
+        chartDimensions: state.parentDimensions,
+        a11ySettings: (0, get_accessibility_config_1.getA11ySettingsSelector)(state),
+        tooltipRequired: (0, specs_1.getTooltipType)(settingsSpec) !== specs_1.TooltipType.None,
+        onElementOver: (_c = settingsSpec.onElementOver) !== null && _c !== void 0 ? _c : (function () { }),
+        onElementClick: (_d = settingsSpec.onElementClick) !== null && _d !== void 0 ? _d : (function () { }),
+        onElementOut: (_e = settingsSpec.onElementOut) !== null && _e !== void 0 ? _e : (function () { }),
+        onRenderChange: (_f = settingsSpec.onRenderChange) !== null && _f !== void 0 ? _f : (function () { }),
+    };
+};
+var mapDispatchToProps = function (dispatch) {
+    return (0, redux_1.bindActionCreators)({
+        onChartRendered: chart_1.onChartRendered,
+    }, dispatch);
+};
+var FlameChartLayers = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(FlameComponent);
+var FlameWithTooltip = function (containerRef, forwardStageRef) { return (react_1.default.createElement(FlameChartLayers, { forwardStageRef: forwardStageRef, containerRef: containerRef })); };
+exports.FlameWithTooltip = FlameWithTooltip;
+//# sourceMappingURL=flame_chart.js.map