@deephaven/chart 0.43.0 → 0.44.1-beta.0

package/dist/Chart.css

@@ -0,0 +1,71 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.plotly-notifier {
+  margin-right: 15px;
+}
+
+.plotly-notifier .notifier-note {
+  color: #f0f0ee !important;
+  border: 0 !important;
+  border-radius: 2px !important;
+  background: #555356 !important;
+  overflow-wrap: normal !important;
+  hyphens: unset !important;
+  margin-bottom: 0.5rem !important;
+  box-shadow: 0 0.1rem 1rem rgba(26, 23, 26, 0.45) !important;
+}
+
+.plotly-notifier .notifier-close {
+  color: #929192 !important;
+  transition: all 0.2s ease-in-out !important;
+}
+.plotly-notifier .notifier-close:hover {
+  color: #f0f0ee !important;
+}
+
+.chart-wrapper {
+  background: #2d2a2e;
+}
+.chart-wrapper .plot-container .cartesianlayer text {
+  user-select: none;
+}
+.chart-wrapper .plot-container .hovertext path,
+.chart-wrapper .plot-container .axistext path {
+  stroke: none !important;
+}
+.chart-wrapper .plot-container .axistext path {
+  fill: #555356 !important;
+  box-shadow: 4px 4px #1a171a;
+}
+.chart-wrapper .plot-container .zoomlayer .zoombox {
+  fill: rgba(0, 0, 0, 0.5) !important;
+}
+.chart-wrapper .plot-container .zoomlayer .zoombox-corners {
+  fill: #f0f0ee;
+  stroke: #211f22;
+}
+.chart-wrapper .js-plotly-plot .plotly [data-title]::before {
+  border-color: transparent transparent #403e41;
+  z-index: 1002;
+}
+.chart-wrapper .js-plotly-plot .plotly [data-title]::after {
+  border-radius: 4px;
+  background: #403e41;
+  color: #f0f0ee;
+  padding: 0.25rem 0.5rem;
+  box-shadow: 0 0.1rem 1.5rem 0.1rem rgba(26, 23, 26, 0.8);
+  z-index: 1001;
+}
+.chart-wrapper .js-plotly-plot .plotly .modebar {
+  z-index: auto;
+}
+.chart-wrapper .js-plotly-plot .plotly .modebar .modebar-btn[data-attr=animation-spin] svg {
+  animation: fa-spin 2s infinite linear;
+}
+.chart-wrapper .js-plotly-plot .plotly .modebar .modebar-btn[data-attr=fill-active] svg path {
+  fill: rgba(255, 255, 255, 0.7) !important;
+}
+.chart-wrapper .js-plotly-plot .plotly .modebar .modebar-btn[data-attr=fill-warning] svg path {
+  fill: #f37e3f !important;
+}
+
+/*# sourceMappingURL=Chart.css.map */

package/dist/Chart.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../node_modules/@deephaven/components/scss/custom.scss","../src/Chart.scss","../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACQA;EACE,cAN6B;;;AAS/B;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AACA;EACE;;;AAIJ;EACE,YCxBc;;AD2BZ;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE,MC5CW;ED6CX,QC/BK;;ADoCT;EACE;EAGA;;AAGF;EACE,eCkDY;EDjDZ,YChDO;EDiDP,OC5Da;ED6Db;EACA,YCuGiB;EDpGjB;;AAGF;EAEE;;AAII;EACE;;AAMA;EACE;;AAOF;EACE","file":"Chart.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '@deephaven/components/scss/custom.scss';\n\n$chart-bg: $content-bg;\n$plotly-notifier-margin-right: 15px;\n$plotly-notifier-note-bg: $gray-600;\n$plotly-notifier-note-border-radius: 2px;\n$plotly-color-btn-active: rgba(255, 255, 255, 70%);\n\n.plotly-notifier {\n  margin-right: $plotly-notifier-margin-right;\n}\n\n.plotly-notifier .notifier-note {\n  // Mark these properties as !important because plotly css can be loaded in a different order in production\n  // See comments on IDS-4808\n  // https://illumon.aha.io/comments/6737799632463662636\n  color: $foreground !important;\n  border: 0 !important;\n  border-radius: $plotly-notifier-note-border-radius !important;\n  background: $plotly-notifier-note-bg !important;\n  overflow-wrap: normal !important;\n  hyphens: unset !important;\n  margin-bottom: $spacer-2 !important;\n  box-shadow: $box-shadow !important;\n}\n\n.plotly-notifier .notifier-close {\n  color: $gray-400 !important;\n  transition: $transition-base !important;\n  &:hover {\n    color: $foreground !important;\n  }\n}\n\n.chart-wrapper {\n  background: $chart-bg;\n\n  .plot-container {\n    .cartesianlayer text {\n      user-select: none;\n    }\n\n    .hovertext path,\n    .axistext path {\n      stroke: none !important;\n    }\n\n    .axistext path {\n      fill: $gray-600 !important;\n      box-shadow: 4px 4px $black;\n    }\n\n    .zoomlayer .zoombox {\n      fill: rgba(0, 0, 0, 50%) !important;\n    }\n\n    .zoomlayer .zoombox-corners {\n      fill: $white;\n      stroke: $gray-900;\n    }\n  }\n\n  // Tooltip arrow\n  .js-plotly-plot .plotly [data-title]::before {\n    border-color: transparent transparent $tooltip-bg;\n\n    // Make the arrow appear above the box shadow of the body\n    z-index: 1002;\n  }\n  // Tooltip body\n  .js-plotly-plot .plotly [data-title]::after {\n    border-radius: $border-radius;\n    background: $tooltip-bg;\n    color: $tooltip-color;\n    padding: $tooltip-padding-y $tooltip-padding-x;\n    box-shadow: $tooltip-box-shadow;\n\n    // Already set by plotly, just setting again in case it changes in the future so body shadow appears under arrow tip\n    z-index: 1001;\n  }\n\n  .js-plotly-plot .plotly .modebar {\n    //aggressive set as 1001 by plotly, no need for it to be explicitly above anything\n    z-index: auto;\n\n    .modebar-btn {\n      &[data-attr='animation-spin'] {\n        svg {\n          animation: fa-spin 2s infinite linear;\n        }\n      }\n\n      &[data-attr='fill-active'] {\n        svg {\n          path {\n            fill: $plotly-color-btn-active !important;\n          }\n        }\n      }\n\n      &[data-attr='fill-warning'] {\n        svg {\n          path {\n            fill: $warning !important;\n          }\n        }\n      }\n    }\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n"]}

package/dist/Chart.js

@@ -0,0 +1,518 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import deepEqual from 'deep-equal';
+import memoize from 'memoize-one';
+import { vsLoading, dhGraphLineDown, dhWarningFilled } from '@deephaven/icons';
+import { Formatter, FormatterUtils, DateUtils } from '@deephaven/jsapi-utils';
+import Log from '@deephaven/log';
+import createPlotlyComponent from 'react-plotly.js/factory.js';
+import Plotly from "./plotly/Plotly.js";
+import ChartModel from "./ChartModel.js";
+import ChartUtils from "./ChartUtils.js";
+import "./Chart.css";
+var log = Log.module('Chart');
+export class Chart extends Component {
+  /**
+   * Convert a font awesome icon definition to a plotly icon definition
+   * @param 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
+    var stringPath = "".concat(path);
+    return {
+      width,
+      path: stringPath,
+      ascent: width,
+      descent: 0,
+      transform: "matrix(1, 0, 0, 1, 0, 0)"
+    };
+  }
+  static downsampleButtonTitle(isDownsampleInProgress, isDownsamplingDisabled) {
+    if (isDownsampleInProgress) {
+      return 'Downsampling in progress...';
+    }
+    return isDownsamplingDisabled ? 'Downsampling disabled, click to enable' : 'Downsampling enabled, click to disable';
+  }
+  static downsampleButtonAttr(isDownsampleInProgress, isDownsamplingDisabled) {
+    if (isDownsampleInProgress) {
+      return 'animation-spin';
+    }
+    return isDownsamplingDisabled ? undefined : 'fill-active';
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "currentSeries", void 0);
+    _defineProperty(this, "PlotComponent", void 0);
+    _defineProperty(this, "plot", void 0);
+    _defineProperty(this, "plotWrapper", void 0);
+    _defineProperty(this, "columnFormats", void 0);
+    _defineProperty(this, "dateTimeFormatterOptions", void 0);
+    _defineProperty(this, "decimalFormatOptions", void 0);
+    _defineProperty(this, "integerFormatOptions", void 0);
+    _defineProperty(this, "rect", void 0);
+    _defineProperty(this, "ranges", void 0);
+    _defineProperty(this, "isSubscribed", void 0);
+    _defineProperty(this, "isLoadedFired", void 0);
+    _defineProperty(this, "getCachedConfig", memoize((downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled, data) => {
+      var customButtons = [];
+      var hasDownsampleError = Boolean(downsamplingError);
+      if (hasDownsampleError) {
+        customButtons.push({
+          name: "Downsampling failed: ".concat(downsamplingError),
+          title: 'Downsampling failed',
+          click: () => undefined,
+          icon: Chart.convertIcon(dhWarningFilled),
+          attr: 'fill-warning'
+        });
+      }
+      if (isDownsampleFinished || isDownsampleInProgress || isDownsamplingDisabled || hasDownsampleError) {
+        var name = Chart.downsampleButtonTitle(isDownsampleInProgress, isDownsamplingDisabled);
+        var attr = Chart.downsampleButtonAttr(isDownsampleInProgress, isDownsamplingDisabled);
+        var icon = isDownsampleInProgress ? vsLoading : dhGraphLineDown;
+        customButtons.push({
+          name,
+          title: 'Downsampling status',
+          icon: Chart.convertIcon(icon),
+          click: this.handleDownsampleClick,
+          attr
+        });
+      }
+      var has2D = data.some(_ref => {
+        var {
+          type
+        } = _ref;
+        return type != null && !type.includes('3d');
+      });
+      var has3D = data.some(_ref2 => {
+        var {
+          type
+        } = _ref2;
+        return type != null && type.includes('3d');
+      });
+      var buttons2D = ['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'];
+      var buttons3D = ['orbitRotation', 'tableRotation', 'resetCameraDefault3d'];
+      return {
+        displaylogo: false,
+        // Display the mode bar if there's an error or downsampling so user can see progress
+        // Yes, the value is a boolean or the string 'hover': https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L249
+        displayModeBar:
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        isDownsampleInProgress || hasDownsampleError ? true : 'hover',
+        // Each array gets grouped together in the mode bar
+        modeBarButtons: [customButtons, ['toImage'], ['zoom2d', 'pan2d'],
+        // These work the same for both 2d and 3d
+        [...(has2D ? buttons2D : []), ...(has3D ? buttons3D : [])]]
+      };
+    }));
+    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.PlotComponent = createPlotlyComponent(props.Plotly);
+    this.plot = /*#__PURE__*/React.createRef();
+    this.plotWrapper = /*#__PURE__*/React.createRef();
+    this.columnFormats = [];
+    this.dateTimeFormatterOptions = {};
+    this.decimalFormatOptions = {};
+    this.integerFormatOptions = {};
+    this.isSubscribed = false;
+    this.isLoadedFired = false;
+    this.currentSeries = 0;
+    this.state = {
+      data: null,
+      downsamplingError: null,
+      isDownsampleFinished: false,
+      isDownsampleInProgress: false,
+      isDownsamplingDisabled: false,
+      layout: {
+        datarevision: 0
+      },
+      revision: 0
+    };
+  }
+  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();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+  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;
+  }
+  initData() {
+    var {
+      model
+    } = this.props;
+    var {
+      layout
+    } = this.state;
+    this.setState({
+      data: model.getData(),
+      layout: _objectSpread(_objectSpread({}, layout), model.getLayout())
+    });
+  }
+  subscribe() {
+    if (this.isSubscribed) {
+      return;
+    }
+    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;
+    }
+    model.subscribe(this.handleModelEvent);
+    this.isSubscribed = true;
+  }
+  unsubscribe() {
+    if (!this.isSubscribed) {
+      return;
+    }
+    var {
+      model
+    } = this.props;
+    model.unsubscribe(this.handleModelEvent);
+    this.isSubscribed = false;
+  }
+  handleAfterPlot() {
+    if (this.plot.current != null) {
+      // TODO: Translate whatever Don was doing in plotting.js in the afterplot here so that area graphs show up properly
+    }
+  }
+  handleDownsampleClick() {
+    this.setState(_ref3 => {
+      var {
+        isDownsamplingDisabled
+      } = _ref3;
+      return {
+        downsamplingError: null,
+        isDownsampleInProgress: false,
+        isDownsampleFinished: false,
+        isDownsamplingDisabled: !isDownsamplingDisabled
+      };
+    }, () => {
+      var {
+        model
+      } = this.props;
+      var {
+        isDownsamplingDisabled
+      } = this.state;
+      model.setDownsamplingDisabled(isDownsamplingDisabled);
+    });
+  }
+  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;
+            if (typeof layout.datarevision === 'number') {
+              layout.datarevision += 1;
+            }
+            return {
+              data: detail,
+              layout,
+              revision: revision + 1
+            };
+          });
+          var {
+            onUpdate
+          } = this.props;
+          onUpdate({
+            isLoading: !this.isLoadedFired
+          });
+          break;
+        }
+      case ChartModel.EVENT_LOADFINISHED:
+        {
+          var {
+            onUpdate: _onUpdate
+          } = this.props;
+          this.isLoadedFired = true;
+          _onUpdate({
+            isLoading: false
+          });
+          break;
+        }
+      case ChartModel.EVENT_DISCONNECT:
+        {
+          var {
+            onDisconnect
+          } = this.props;
+          onDisconnect();
+          break;
+        }
+      case ChartModel.EVENT_RECONNECT:
+        {
+          var {
+            onReconnect
+          } = this.props;
+          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 _detail$message;
+          var downsamplingError = (_detail$message = detail.message) !== null && _detail$message !== void 0 ? _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);
+    }
+  }
+  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);
+    }
+  }
+  handleRelayout(changes) {
+    log.debug('handleRelayout', changes);
+    if (changes.hiddenlabels != null) {
+      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(_ref4) {
+    var [changes, seriesIndexes] = _ref4;
+    log.debug('handleRestyle', changes, seriesIndexes);
+    if (Object.keys(changes).includes('visible')) {
+      var {
+        data
+      } = this.state;
+      var {
+        onSettingsChanged
+      } = this.props;
+      if (data != null) {
+        var hiddenSeries = data.reduce((acc, _ref5) => {
+          var {
+            name,
+            visible
+          } = _ref5;
+          return name != null && visible === 'legendonly' ? [...acc, name] : acc;
+        }, []);
+        onSettingsChanged({
+          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 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;
+    }
+    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();
+      }
+    }
+  }
+  initFormatter() {
+    var {
+      settings
+    } = this.props;
+    this.updateFormatterSettings(settings);
+  }
+  updateFormatterSettings(settings) {
+    var columnFormats = FormatterUtils.getColumnFormats(settings);
+    var dateTimeFormatterOptions = FormatterUtils.getDateTimeFormatterOptions(settings);
+    var {
+      decimalFormatOptions = {},
+      integerFormatOptions = {}
+    } = settings;
+    if (!deepEqual(this.columnFormats, columnFormats) || !deepEqual(this.dateTimeFormatterOptions, dateTimeFormatterOptions) || !deepEqual(this.decimalFormatOptions, decimalFormatOptions) || !deepEqual(this.integerFormatOptions, integerFormatOptions)) {
+      this.columnFormats = FormatterUtils.getColumnFormats(settings);
+      this.dateTimeFormatterOptions = dateTimeFormatterOptions;
+      this.decimalFormatOptions = decimalFormatOptions;
+      this.integerFormatOptions = integerFormatOptions;
+      this.updateFormatter();
+    }
+  }
+  updateFormatter() {
+    var {
+      model
+    } = this.props;
+    var formatter = new Formatter(model.dh, this.columnFormats, this.dateTimeFormatterOptions, this.decimalFormatOptions, this.integerFormatOptions);
+    model.setFormatter(formatter);
+  }
+  updateDimensions() {
+    var rect = this.getPlotRect();
+    var {
+      Plotly: PlotlyProp
+    } = this.props;
+    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
+      PlotlyProp.relayout(this.plot.current.el, {
+        autosize: true
+      }).catch(e => {
+        log.debug('Unable to resize, promise rejected', e);
+      });
+    }
+  }
+  render() {
+    var {
+      PlotComponent
+    } = this;
+    var {
+      data,
+      downsamplingError,
+      isDownsampleFinished,
+      isDownsampleInProgress,
+      isDownsamplingDisabled,
+      layout,
+      revision
+    } = this.state;
+    var config = this.getCachedConfig(downsamplingError, isDownsampleFinished, isDownsampleInProgress, isDownsamplingDisabled, data !== null && data !== void 0 ? data : []);
+    var isPlotShown = data != null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "h-100 w-100 chart-wrapper",
+      ref: this.plotWrapper
+    }, isPlotShown && /*#__PURE__*/React.createElement(PlotComponent
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    , {
+      ref: this.plot,
+      data: data,
+      layout: layout,
+      revision: revision,
+      config: config,
+      onAfterPlot: this.handleAfterPlot,
+      onError: log.error,
+      onRelayout: this.handleRelayout,
+      onUpdate: this.handlePlotUpdate,
+      onRestyle: this.handleRestyle,
+      useResizeHandler: true,
+      style: {
+        height: '100%',
+        width: '100%'
+      }
+    }));
+  }
+}
+_defineProperty(Chart, "defaultProps", {
+  isActive: true,
+  settings: {
+    timeZone: 'America/New_York',
+    defaultDateTimeFormat: DateUtils.FULL_DATE_FORMAT,
+    showTimeZone: false,
+    showTSeparator: true,
+    formatter: []
+  },
+  Plotly,
+  onDisconnect: () => undefined,
+  onReconnect: () => undefined,
+  onUpdate: () => undefined,
+  onError: () => undefined,
+  onSettingsChanged: () => undefined
+});
+export default Chart;
+//# sourceMappingURL=Chart.js.map