@deephaven/chart 0.5.0 → 0.5.2-lessredux.14

package/dist/Chart.js

@@ -1,86 +1,59 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import deepEqual from 'deep-equal';
-import { connect } from 'react-redux';
 import memoize from 'memoize-one';
 import { vsLoading, dhGraphLineDown, dhWarningFilled } from '@deephaven/icons';
-import { Formatter, FormatterUtils } from '@deephaven/iris-grid';
+import { Formatter, FormatterUtils, DateUtils } from '@deephaven/iris-grid';
 import Log from '@deephaven/log';
-import { getSettings } from '@deephaven/redux';
-import Plotly from './plotly/Plotly';
-import Plot from './plotly/Plot';
-import ChartModel from './ChartModel';
-import ChartUtils from './ChartUtils';
+import Plotly from "./plotly/Plotly.js";
+import Plot from "./plotly/Plot.js";
+import ChartModel from "./ChartModel.js";
+import ChartUtils from "./ChartUtils.js";
 import ChartConstants from "./Chart.module.css";
 import "./Chart.css";
 var log = Log.module('Chart');
-export var Chart = /*#__PURE__*/function (_Component) {
-  _inherits(Chart, _Component);
-
-  var _super = _createSuper(Chart);
+export class Chart extends Component {
+  /**
+   * Convert a font awesome icon definition to a plotly icon definition
+   * @param {FontAwesome.IconDefinition} faIcon The icon to convert
+   */
+  static convertIcon(faIcon) {
+    var [width,,,, path] = faIcon.icon; // By default the icons are flipped upside down, so we need to add our own transform
+    // https://github.com/plotly/plotly.js/issues/1335
+
+    return {
+      width,
+      path,
+      ascent: width,
+      descent: 0,
+      transform: "matrix(1, 0, 0, 1, 0, 0)"
+    };
+  }
 
-  function Chart(props) {
-    var _this;
+  static downsampleButtonTitle(isDownsampleInProgress, isDownsamplingDisabled) {
+    if (isDownsampleInProgress) {
+      return ChartConstants['title-downsampling-in-progress'];
+    }
 
-    _classCallCheck(this, Chart);
+    return isDownsamplingDisabled ? ChartConstants['title-downsampling-disabled'] : ChartConstants['title-downsampling-enabled'];
+  }
 
-    _this = _super.call(this, props);
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "getCachedConfig", memoize(function (downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled) {
+    _defineProperty(this, "getCachedConfig", memoize((downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled) => {
       var customButtons = [];
 
       if (downsamplingError) {
         customButtons.push({
           name: "".concat(ChartConstants['title-downsampling-failed'], ": ").concat(downsamplingError),
-          click: function click() {},
+          click: () => {},
           icon: Chart.convertIcon(dhWarningFilled)
         });
       }
@@ -89,9 +62,9 @@ export var Chart = /*#__PURE__*/function (_Component) {
         var name = Chart.downsampleButtonTitle(isDownsampleInProgress, isDownsamplingDisabled);
         var icon = isDownsampleInProgress ? vsLoading : dhGraphLineDown;
         customButtons.push({
-          name: name,
+          name,
           icon: Chart.convertIcon(icon),
-          click: _this.handleDownsampleClick
+          click: this.handleDownsampleClick
         });
       }
 
@@ -105,21 +78,21 @@ export var Chart = /*#__PURE__*/function (_Component) {
       };
     }));
 
-    _this.handleAfterPlot = _this.handleAfterPlot.bind(_assertThisInitialized(_this));
-    _this.handleDownsampleClick = _this.handleDownsampleClick.bind(_assertThisInitialized(_this));
-    _this.handleModelEvent = _this.handleModelEvent.bind(_assertThisInitialized(_this));
-    _this.handlePlotUpdate = _this.handlePlotUpdate.bind(_assertThisInitialized(_this));
-    _this.handleRelayout = _this.handleRelayout.bind(_assertThisInitialized(_this));
-    _this.handleRestyle = _this.handleRestyle.bind(_assertThisInitialized(_this));
-    _this.plot = /*#__PURE__*/React.createRef();
-    _this.plotWrapper = /*#__PURE__*/React.createRef();
-    _this.columnFormats = [];
-    _this.dateTimeFormatterOptions = {};
-    _this.rect = null;
-    _this.ranges = null;
-    _this.isSubscribed = false;
-    _this.isLoadedFired = false;
-    _this.state = {
+    this.handleAfterPlot = this.handleAfterPlot.bind(this);
+    this.handleDownsampleClick = this.handleDownsampleClick.bind(this);
+    this.handleModelEvent = this.handleModelEvent.bind(this);
+    this.handlePlotUpdate = this.handlePlotUpdate.bind(this);
+    this.handleRelayout = this.handleRelayout.bind(this);
+    this.handleRestyle = this.handleRestyle.bind(this);
+    this.plot = /*#__PURE__*/React.createRef();
+    this.plotWrapper = /*#__PURE__*/React.createRef();
+    this.columnFormats = [];
+    this.dateTimeFormatterOptions = {};
+    this.rect = null;
+    this.ranges = null;
+    this.isSubscribed = false;
+    this.isLoadedFired = false;
+    this.state = {
       data: null,
       downsamplingError: null,
       isDownsampleFinished: false,
@@ -130,407 +103,401 @@ export var Chart = /*#__PURE__*/function (_Component) {
       },
       revision: 0
     };
-    return _this;
   }
 
-  _createClass(Chart, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Need to make sure the model dimensions are up to date before initializing the data
-      this.updateDimensions();
-      this.updateModelDimensions();
-      this.initData();
-      this.initFormatter();
-      var isActive = this.props.isActive;
+  componentDidMount() {
+    // Need to make sure the model dimensions are up to date before initializing the data
+    this.updateDimensions();
+    this.updateModelDimensions();
+    this.initData();
+    this.initFormatter();
+    var {
+      isActive
+    } = this.props;
+
+    if (isActive) {
+      this.subscribe();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    var {
+      isActive,
+      settings
+    } = this.props;
+    this.updateFormatterSettings(settings);
 
+    if (isActive !== prevProps.isActive) {
       if (isActive) {
         this.subscribe();
+      } else {
+        this.unsubscribe();
       }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-          isActive = _this$props.isActive,
-          settings = _this$props.settings;
-      this.updateFormatterSettings(settings);
-
-      if (isActive !== prevProps.isActive) {
-        if (isActive) {
-          this.subscribe();
-        } else {
-          this.unsubscribe();
-        }
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unsubscribe();
-    }
-  }, {
-    key: "getPlotRect",
-    value: function getPlotRect() {
-      var _this$plotWrapper$cur, _this$plotWrapper$cur2;
+  }
 
-      return (_this$plotWrapper$cur = (_this$plotWrapper$cur2 = this.plotWrapper.current) === null || _this$plotWrapper$cur2 === void 0 ? void 0 : _this$plotWrapper$cur2.getBoundingClientRect()) !== null && _this$plotWrapper$cur !== void 0 ? _this$plotWrapper$cur : null;
-    }
-  }, {
-    key: "initData",
-    value: function initData() {
-      var model = this.props.model;
-      var layout = this.state.layout;
-      this.setState({
-        data: model.getData(),
-        layout: _objectSpread(_objectSpread({}, layout), model.getLayout())
-      });
-    }
-  }, {
-    key: "subscribe",
-    value: function subscribe() {
-      if (this.isSubscribed) {
-        return;
-      }
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
 
-      var model = this.props.model;
+  getPlotRect() {
+    var _this$plotWrapper$cur, _this$plotWrapper$cur2;
 
-      if (!this.rect || this.rect.width === 0 || this.rect.height === 0) {
-        log.debug2('Delaying subscription until model dimensions are set');
-        return;
-      }
+    return (_this$plotWrapper$cur = (_this$plotWrapper$cur2 = this.plotWrapper.current) === null || _this$plotWrapper$cur2 === void 0 ? void 0 : _this$plotWrapper$cur2.getBoundingClientRect()) !== null && _this$plotWrapper$cur !== void 0 ? _this$plotWrapper$cur : null;
+  }
 
-      model.subscribe(this.handleModelEvent);
-      this.isSubscribed = true;
-    }
-  }, {
-    key: "unsubscribe",
-    value: function unsubscribe() {
-      if (!this.isSubscribed) {
-        return;
-      }
+  initData() {
+    var {
+      model
+    } = this.props;
+    var {
+      layout
+    } = this.state;
+    this.setState({
+      data: model.getData(),
+      layout: _objectSpread(_objectSpread({}, layout), model.getLayout())
+    });
+  }
 
-      var model = this.props.model;
-      model.unsubscribe(this.handleModelEvent);
-      this.isSubscribed = false;
-    }
-  }, {
-    key: "handleAfterPlot",
-    value: function handleAfterPlot() {
-      if (this.plot.current) {// TODO: Translate whatever Don was doing in plotting.js in the afterplot here so that area graphs show up properly
-      }
+  subscribe() {
+    if (this.isSubscribed) {
+      return;
     }
-  }, {
-    key: "handleDownsampleClick",
-    value: function handleDownsampleClick() {
-      var _this2 = this;
-
-      this.setState(function (_ref) {
-        var isDownsamplingDisabled = _ref.isDownsamplingDisabled;
-        return {
-          downsamplingError: null,
-          isDownsampleInProgress: false,
-          isDownsampleFinished: false,
-          isDownsamplingDisabled: !isDownsamplingDisabled
-        };
-      }, function () {
-        var model = _this2.props.model;
-        var isDownsamplingDisabled = _this2.state.isDownsamplingDisabled;
-        model.setDownsamplingDisabled(isDownsamplingDisabled);
-      });
+
+    var {
+      model
+    } = this.props;
+
+    if (!this.rect || this.rect.width === 0 || this.rect.height === 0) {
+      log.debug2('Delaying subscription until model dimensions are set');
+      return;
     }
-  }, {
-    key: "handleModelEvent",
-    value: function handleModelEvent(event) {
-      var type = event.type,
-          detail = event.detail;
-      log.debug2('Received data update', type, detail);
-
-      switch (type) {
-        case ChartModel.EVENT_UPDATED:
-          {
-            this.currentSeries += 1;
-            this.setState(function (state) {
-              var layout = state.layout,
-                  revision = state.revision;
-              layout.datarevision += 1;
-              return {
-                data: detail,
-                layout: layout,
-                revision: revision + 1
-              };
-            });
-            var onUpdate = this.props.onUpdate;
-            onUpdate({
-              isLoading: !this.isLoadedFired
-            });
-            break;
-          }
-
-        case ChartModel.EVENT_LOADFINISHED:
-          {
-            var _onUpdate = this.props.onUpdate;
-            this.isLoadedFired = true;
-
-            _onUpdate({
-              isLoading: false
-            });
-
-            break;
-          }
-
-        case ChartModel.EVENT_DISCONNECT:
-          {
-            var onDisconnect = this.props.onDisconnect;
-            onDisconnect();
-            break;
-          }
-
-        case ChartModel.EVENT_RECONNECT:
-          {
-            var onReconnect = this.props.onReconnect;
-            onReconnect();
-            break;
-          }
-
-        case ChartModel.EVENT_DOWNSAMPLESTARTED:
-          {
-            this.setState({
-              isDownsampleFinished: false,
-              isDownsampleInProgress: true,
-              downsamplingError: null
-            });
-            break;
-          }
-
-        case ChartModel.EVENT_DOWNSAMPLEFINISHED:
-          {
-            this.setState({
-              isDownsampleFinished: true,
-              isDownsampleInProgress: false,
-              downsamplingError: null
-            });
-            break;
-          }
-
-        case ChartModel.EVENT_DOWNSAMPLENEEDED:
-        case ChartModel.EVENT_DOWNSAMPLEFAILED:
-          {
-            var downsamplingError = detail.message ? detail.message : detail;
-            this.setState({
-              isDownsampleFinished: false,
-              isDownsampleInProgress: false,
-              isDownsamplingDisabled: false,
-              downsamplingError: downsamplingError
-            });
-            var onError = this.props.onError;
-            onError(new Error(downsamplingError));
-            break;
-          }
-
-        default:
-          log.debug('Unknown event type', type, event);
-      }
+
+    model.subscribe(this.handleModelEvent);
+    this.isSubscribed = true;
+  }
+
+  unsubscribe() {
+    if (!this.isSubscribed) {
+      return;
     }
-  }, {
-    key: "handlePlotUpdate",
-    value: function handlePlotUpdate(figure) {
-      // User could have modified zoom/pan here, update the model dimensions
-      // We don't need to update the datarevision, as we don't have any data changes
-      // until an update comes back from the server anyway
-      var layout = figure.layout;
-      var ranges = ChartUtils.getLayoutRanges(layout);
-      var isRangesChanged = !deepEqual(ranges, this.ranges);
-
-      if (isRangesChanged) {
-        this.ranges = ranges;
-        this.updateModelDimensions(true);
-      }
+
+    var {
+      model
+    } = this.props;
+    model.unsubscribe(this.handleModelEvent);
+    this.isSubscribed = false;
+  }
+
+  handleAfterPlot() {
+    if (this.plot.current) {// TODO: Translate whatever Don was doing in plotting.js in the afterplot here so that area graphs show up properly
     }
-  }, {
-    key: "handleRelayout",
-    value: function handleRelayout(changes) {
-      log.debug('handleRelayout', changes);
+  }
+
+  handleDownsampleClick() {
+    this.setState((_ref) => {
+      var {
+        isDownsamplingDisabled
+      } = _ref;
+      return {
+        downsamplingError: null,
+        isDownsampleInProgress: false,
+        isDownsampleFinished: false,
+        isDownsamplingDisabled: !isDownsamplingDisabled
+      };
+    }, () => {
+      var {
+        model
+      } = this.props;
+      var {
+        isDownsamplingDisabled
+      } = this.state;
+      model.setDownsamplingDisabled(isDownsamplingDisabled);
+    });
+  }
 
-      if (Object.keys(changes).includes('hiddenlabels')) {
-        var onSettingsChanged = this.props.onSettingsChanged; // Pie charts store series visibility in layout.hiddenlabels and trigger relayout on changes
-        // Series visibility for other types of charts is handled in handleRestyle
+  handleModelEvent(event) {
+    var {
+      type,
+      detail
+    } = event;
+    log.debug2('Received data update', type, detail);
+
+    switch (type) {
+      case ChartModel.EVENT_UPDATED:
+        {
+          this.currentSeries += 1;
+          this.setState(state => {
+            var {
+              layout,
+              revision
+            } = state;
+            layout.datarevision += 1;
+            return {
+              data: detail,
+              layout,
+              revision: revision + 1
+            };
+          });
+          var {
+            onUpdate
+          } = this.props;
+          onUpdate({
+            isLoading: !this.isLoadedFired
+          });
+          break;
+        }
 
-        var hiddenSeries = _toConsumableArray(changes.hiddenlabels);
+      case ChartModel.EVENT_LOADFINISHED:
+        {
+          var {
+            onUpdate: _onUpdate
+          } = this.props;
+          this.isLoadedFired = true;
 
-        onSettingsChanged({
-          hiddenSeries: hiddenSeries
-        });
-      }
+          _onUpdate({
+            isLoading: false
+          });
 
-      this.updateModelDimensions();
-    }
-  }, {
-    key: "handleRestyle",
-    value: function handleRestyle(_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-          changes = _ref3[0],
-          seriesIndexes = _ref3[1];
-
-      log.debug('handleRestyle', changes, seriesIndexes);
-
-      if (Object.keys(changes).includes('visible')) {
-        var data = this.state.data;
-        var onSettingsChanged = this.props.onSettingsChanged;
-        var hiddenSeries = data.reduce(function (acc, _ref4) {
-          var name = _ref4.name,
-              visible = _ref4.visible;
-          return visible === 'legendonly' ? [].concat(_toConsumableArray(acc), [name]) : acc;
-        }, []);
-        onSettingsChanged({
-          hiddenSeries: hiddenSeries
-        });
-      }
-    }
-    /**
-     * Update the models dimensions and ranges.
-     * Note that this will update it all whether the plot size changes OR the range
-     * the user is looking at has changed (eg. panning/zooming).
-     * Could update each independently, but doing them at the same time keeps the
-     * ChartModel API a bit cleaner.
-     * @param {boolean} force Force a change even if the chart dimensions haven't changed (eg. after pan/zoom)
-     */
-
-  }, {
-    key: "updateModelDimensions",
-    value: function updateModelDimensions() {
-      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var rect = this.getPlotRect();
-
-      if (!rect) {
-        log.warn('Unable to get plotting rect');
-        return;
-      }
+          break;
+        }
 
-      var isRectChanged = !this.rect || this.rect.width !== rect.width || this.rect.height !== rect.height;
+      case ChartModel.EVENT_DISCONNECT:
+        {
+          var {
+            onDisconnect
+          } = this.props;
+          onDisconnect();
+          break;
+        }
 
-      if (isRectChanged || force) {
-        this.rect = rect;
-        var _this$props2 = this.props,
-            isActive = _this$props2.isActive,
-            model = _this$props2.model;
-        model.setDimensions(rect); // We may need to resubscribe if dimensions were too small before
+      case ChartModel.EVENT_RECONNECT:
+        {
+          var {
+            onReconnect
+          } = this.props;
+          onReconnect();
+          break;
+        }
 
-        if (isActive) {
-          this.subscribe();
+      case ChartModel.EVENT_DOWNSAMPLESTARTED:
+        {
+          this.setState({
+            isDownsampleFinished: false,
+            isDownsampleInProgress: true,
+            downsamplingError: null
+          });
+          break;
         }
-      }
+
+      case ChartModel.EVENT_DOWNSAMPLEFINISHED:
+        {
+          this.setState({
+            isDownsampleFinished: true,
+            isDownsampleInProgress: false,
+            downsamplingError: null
+          });
+          break;
+        }
+
+      case ChartModel.EVENT_DOWNSAMPLENEEDED:
+      case ChartModel.EVENT_DOWNSAMPLEFAILED:
+        {
+          var downsamplingError = detail.message ? detail.message : detail;
+          this.setState({
+            isDownsampleFinished: false,
+            isDownsampleInProgress: false,
+            isDownsamplingDisabled: false,
+            downsamplingError
+          });
+          var {
+            onError
+          } = this.props;
+          onError(new Error(downsamplingError));
+          break;
+        }
+
+      default:
+        log.debug('Unknown event type', type, event);
     }
-  }, {
-    key: "initFormatter",
-    value: function initFormatter() {
-      var settings = this.props.settings;
-      this.updateFormatterSettings(settings);
+  }
+
+  handlePlotUpdate(figure) {
+    // User could have modified zoom/pan here, update the model dimensions
+    // We don't need to update the datarevision, as we don't have any data changes
+    // until an update comes back from the server anyway
+    var {
+      layout
+    } = figure;
+    var ranges = ChartUtils.getLayoutRanges(layout);
+    var isRangesChanged = !deepEqual(ranges, this.ranges);
+
+    if (isRangesChanged) {
+      this.ranges = ranges;
+      this.updateModelDimensions(true);
     }
-  }, {
-    key: "updateFormatterSettings",
-    value: function updateFormatterSettings(settings) {
-      var columnFormats = FormatterUtils.getColumnFormats(settings);
-      var dateTimeFormatterOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
-
-      if (!deepEqual(this.columnFormats, columnFormats) || !deepEqual(this.dateTimeFormatterOptions, dateTimeFormatterOptions)) {
-        this.columnFormats = FormatterUtils.getColumnFormats(settings);
-        this.dateTimeFormatterOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
-        this.updateFormatter();
-      }
+  }
+
+  handleRelayout(changes) {
+    log.debug('handleRelayout', changes);
+
+    if (Object.keys(changes).includes('hiddenlabels')) {
+      var {
+        onSettingsChanged
+      } = this.props; // Pie charts store series visibility in layout.hiddenlabels and trigger relayout on changes
+      // Series visibility for other types of charts is handled in handleRestyle
+
+      var hiddenSeries = [...changes.hiddenlabels];
+      onSettingsChanged({
+        hiddenSeries
+      });
+    }
+
+    this.updateModelDimensions();
+  }
+
+  handleRestyle(_ref2) {
+    var [changes, seriesIndexes] = _ref2;
+    log.debug('handleRestyle', changes, seriesIndexes);
+
+    if (Object.keys(changes).includes('visible')) {
+      var {
+        data
+      } = this.state;
+      var {
+        onSettingsChanged
+      } = this.props;
+      var hiddenSeries = data.reduce((acc, _ref3) => {
+        var {
+          name,
+          visible
+        } = _ref3;
+        return visible === 'legendonly' ? [...acc, name] : acc;
+      }, []);
+      onSettingsChanged({
+        hiddenSeries
+      });
     }
-  }, {
-    key: "updateFormatter",
-    value: function updateFormatter() {
-      var formatter = new Formatter(this.columnFormats, this.dateTimeFormatterOptions);
-      var model = this.props.model;
-      model.setFormatter(formatter);
+  }
+  /**
+   * Update the models dimensions and ranges.
+   * Note that this will update it all whether the plot size changes OR the range
+   * the user is looking at has changed (eg. panning/zooming).
+   * Could update each independently, but doing them at the same time keeps the
+   * ChartModel API a bit cleaner.
+   * @param {boolean} force Force a change even if the chart dimensions haven't changed (eg. after pan/zoom)
+   */
+
+
+  updateModelDimensions() {
+    var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var rect = this.getPlotRect();
+
+    if (!rect) {
+      log.warn('Unable to get plotting rect');
+      return;
     }
-  }, {
-    key: "updateDimensions",
-    value: function updateDimensions() {
-      var rect = this.getPlotRect();
-
-      if (this.plot.current != null && rect != null && rect.width > 0 && rect.height > 0) {
-        // Call relayout to resize avoiding the debouncing plotly does
-        // https://github.com/plotly/plotly.js/issues/2769#issuecomment-402099552
-        Plotly.relayout(this.plot.current.el, {
-          autosize: true
-        })["catch"](function (e) {
-          log.debug('Unable to resize, promise rejected', e);
-        });
+
+    var isRectChanged = !this.rect || this.rect.width !== rect.width || this.rect.height !== rect.height;
+
+    if (isRectChanged || force) {
+      this.rect = rect;
+      var {
+        isActive,
+        model
+      } = this.props;
+      model.setDimensions(rect); // We may need to resubscribe if dimensions were too small before
+
+      if (isActive) {
+        this.subscribe();
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          data = _this$state.data,
-          downsamplingError = _this$state.downsamplingError,
-          isDownsampleFinished = _this$state.isDownsampleFinished,
-          isDownsampleInProgress = _this$state.isDownsampleInProgress,
-          isDownsamplingDisabled = _this$state.isDownsamplingDisabled,
-          layout = _this$state.layout,
-          revision = _this$state.revision;
-      var config = this.getCachedConfig(downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled);
-      var isPlotShown = data != null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "h-100 w-100 chart-wrapper",
-        ref: this.plotWrapper
-      }, isPlotShown && /*#__PURE__*/React.createElement(Plot, {
-        ref: this.plot,
-        data: data,
-        layout: layout,
-        revision: revision,
-        config: config,
-        onAfterPlot: this.handleAfterPlot,
-        onRelayout: this.handleRelayout,
-        onUpdate: this.handlePlotUpdate,
-        onRestyle: this.handleRestyle,
-        useResizeHandler: true,
-        style: {
-          height: '100%',
-          width: '100%'
-        }
-      }));
-    }
-  }], [{
-    key: "convertIcon",
-    value:
-    /**
-     * Convert a font awesome icon definition to a plotly icon definition
-     * @param {FontAwesome.IconDefinition} faIcon The icon to convert
-     */
-    function convertIcon(faIcon) {
-      var _faIcon$icon = _slicedToArray(faIcon.icon, 5),
-          width = _faIcon$icon[0],
-          path = _faIcon$icon[4]; // By default the icons are flipped upside down, so we need to add our own transform
-      // https://github.com/plotly/plotly.js/issues/1335
+  }
 
+  initFormatter() {
+    var {
+      settings
+    } = this.props;
+    this.updateFormatterSettings(settings);
+  }
 
-      return {
-        width: width,
-        path: path,
-        ascent: width,
-        descent: 0,
-        transform: "matrix(1, 0, 0, 1, 0, 0)"
-      };
+  updateFormatterSettings(settings) {
+    var columnFormats = FormatterUtils.getColumnFormats(settings);
+    var dateTimeFormatterOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
+
+    if (!deepEqual(this.columnFormats, columnFormats) || !deepEqual(this.dateTimeFormatterOptions, dateTimeFormatterOptions)) {
+      this.columnFormats = FormatterUtils.getColumnFormats(settings);
+      this.dateTimeFormatterOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
+      this.updateFormatter();
     }
-  }, {
-    key: "downsampleButtonTitle",
-    value: function downsampleButtonTitle(isDownsampleInProgress, isDownsamplingDisabled) {
-      if (isDownsampleInProgress) {
-        return ChartConstants['title-downsampling-in-progress'];
-      }
+  }
+
+  updateFormatter() {
+    var formatter = new Formatter(this.columnFormats, this.dateTimeFormatterOptions);
+    var {
+      model
+    } = this.props;
+    model.setFormatter(formatter);
+  }
+
+  updateDimensions() {
+    var rect = this.getPlotRect();
 
-      return isDownsamplingDisabled ? ChartConstants['title-downsampling-disabled'] : ChartConstants['title-downsampling-enabled'];
+    if (this.plot.current != null && rect != null && rect.width > 0 && rect.height > 0) {
+      // Call relayout to resize avoiding the debouncing plotly does
+      // https://github.com/plotly/plotly.js/issues/2769#issuecomment-402099552
+      Plotly.relayout(this.plot.current.el, {
+        autosize: true
+      }).catch(e => {
+        log.debug('Unable to resize, promise rejected', e);
+      });
     }
-  }]);
+  }
 
-  return Chart;
-}(Component);
+  render() {
+    var {
+      data,
+      downsamplingError,
+      isDownsampleFinished,
+      isDownsampleInProgress,
+      isDownsamplingDisabled,
+      layout,
+      revision
+    } = this.state;
+    var config = this.getCachedConfig(downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled);
+    var isPlotShown = data != null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "h-100 w-100 chart-wrapper",
+      ref: this.plotWrapper
+    }, isPlotShown && /*#__PURE__*/React.createElement(Plot, {
+      ref: this.plot,
+      data: data,
+      layout: layout,
+      revision: revision,
+      config: config,
+      onAfterPlot: this.handleAfterPlot,
+      onRelayout: this.handleRelayout,
+      onUpdate: this.handlePlotUpdate,
+      onRestyle: this.handleRestyle,
+      useResizeHandler: true,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }));
+  }
+
+}
 Chart.propTypes = {
   model: PropTypes.instanceOf(ChartModel).isRequired,
-  settings: PropTypes.shape({}).isRequired,
+  // These settings come from the redux store
+  settings: PropTypes.shape({
+    timeZone: PropTypes.string.isRequired,
+    defaultDateTimeFormat: PropTypes.string.isRequired,
+    showTimeZone: PropTypes.bool.isRequired,
+    showTSeparator: PropTypes.bool.isRequired,
+    formatter: PropTypes.arrayOf(PropTypes.shape({})).isRequired
+  }),
   isActive: PropTypes.bool,
   onDisconnect: PropTypes.func,
   onReconnect: PropTypes.func,
@@ -540,20 +507,18 @@ Chart.propTypes = {
 };
 Chart.defaultProps = {
   isActive: true,
-  onDisconnect: function onDisconnect() {},
-  onReconnect: function onReconnect() {},
-  onUpdate: function onUpdate() {},
-  onError: function onError() {},
-  onSettingsChanged: function onSettingsChanged() {}
+  settings: {
+    timeZone: 'America/New_York',
+    defaultDateTimeFormat: DateUtils.FULL_DATE_FORMAT,
+    showTimeZone: false,
+    showTSeparator: true,
+    formatter: []
+  },
+  onDisconnect: () => {},
+  onReconnect: () => {},
+  onUpdate: () => {},
+  onError: () => {},
+  onSettingsChanged: () => {}
 };
-
-var mapStateToProps = function mapStateToProps(state) {
-  return {
-    settings: getSettings(state)
-  };
-};
-
-export default connect(mapStateToProps, null, null, {
-  forwardRef: true
-})(Chart);
+export default Chart;
 //# sourceMappingURL=Chart.js.map