@deephaven/chart 0.42.1-beta.4 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/chart",
-  "version": "0.42.1-beta.4+154ccfcc",
+  "version": "0.43.0",
   "description": "Deephaven Chart",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -22,11 +22,11 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
-    "@deephaven/icons": "^0.42.1-beta.4+154ccfcc",
-    "@deephaven/jsapi-types": "^0.42.1-beta.4+154ccfcc",
-    "@deephaven/jsapi-utils": "^0.42.1-beta.4+154ccfcc",
-    "@deephaven/log": "^0.42.1-beta.4+154ccfcc",
-    "@deephaven/utils": "^0.42.1-beta.4+154ccfcc",
+    "@deephaven/icons": "^0.43.0",
+    "@deephaven/jsapi-types": "^0.43.0",
+    "@deephaven/jsapi-utils": "^0.43.0",
+    "@deephaven/log": "^0.43.0",
+    "@deephaven/utils": "^0.43.0",
     "deep-equal": "^2.0.5",
     "lodash.debounce": "^4.0.8",
     "lodash.set": "^4.3.2",
@@ -40,8 +40,8 @@
     "react": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/jsapi-shim": "^0.42.1-beta.4+154ccfcc",
-    "@deephaven/mocks": "^0.42.1-beta.4+154ccfcc",
+    "@deephaven/jsapi-shim": "^0.43.0",
+    "@deephaven/mocks": "^0.43.0",
     "@types/plotly.js": "^2.12.11"
   },
   "files": [
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "154ccfccd5a6f9996d67f0fcc71d031985bfd6a5"
+  "gitHead": "b16776b5bdc15a02cd2897cd79d562ea38c60ed8"
 }

package/dist/Chart.css

@@ -1,71 +0,0 @@
-/* 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

@@ -1 +0,0 @@
-{"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

@@ -1,518 +0,0 @@
-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