@deephaven/chart 0.5.1 → 0.6.0

package/dist/ChartUtils.js

@@ -2,1318 +2,1232 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 _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 _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 _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 _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 _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 _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 _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 _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 _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 Log from '@deephaven/log';
 import { TableUtils } from '@deephaven/iris-grid';
 import dh from '@deephaven/jsapi-shim';
-import ChartTheme from './ChartTheme';
+import ChartTheme from "./ChartTheme.js";
 var log = Log.module('ChartUtils');
 var DAYS = Object.freeze(dh.calendar.DayOfWeek.values());
 var BUSINESS_COLUMN_TYPE = 'io.deephaven.db.tables.utils.DBDateTime';
 var MILLIS_PER_HOUR = 3600000;
 var NANOS_PER_MILLI = 1000000;
 
-var ChartUtils = /*#__PURE__*/function () {
-  function ChartUtils() {
-    _classCallCheck(this, ChartUtils);
+class ChartUtils {
+  /**
+   * Converts the Iris plot style into a plotly chart type
+   * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle
+   * @param {boolean} isBusinessTime If the plot is using business time for an axis
+   */
+  static getPlotlyChartType(plotStyle, isBusinessTime) {
+    switch (plotStyle) {
+      case dh.plot.SeriesPlotStyle.SCATTER:
+        // scattergl mode is more performant, but doesn't support the rangebreaks we need for businessTime calendars
+        return !isBusinessTime ? 'scattergl' : 'scatter';
+
+      case dh.plot.SeriesPlotStyle.LINE:
+        // There is also still some artifacting bugs with scattergl: https://github.com/plotly/plotly.js/issues/3522
+        // The artifacting only occurs on line plots, which we can draw with fairly decent performance using SVG paths
+        // Once the above plotly issue is fixed, scattergl should be used here (when !isBusinessTime)
+        return 'scatter';
+
+      case dh.plot.SeriesPlotStyle.BAR:
+      case dh.plot.SeriesPlotStyle.STACKED_BAR:
+        return 'bar';
+
+      case dh.plot.SeriesPlotStyle.PIE:
+        return 'pie';
+
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return 'histogram';
+
+      case dh.plot.SeriesPlotStyle.OHLC:
+        return 'ohlc';
+
+      default:
+        return null;
+    }
   }
+  /**
+   * Converts the Iris plot style into a plotly chart mode
+   * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
+   */
 
-  _createClass(ChartUtils, null, [{
-    key: "getPlotlyChartType",
-    value:
-    /**
-     * Converts the Iris plot style into a plotly chart type
-     * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle
-     * @param {boolean} isBusinessTime If the plot is using business time for an axis
-     */
-    function getPlotlyChartType(plotStyle, isBusinessTime) {
-      switch (plotStyle) {
-        case dh.plot.SeriesPlotStyle.SCATTER:
-          // scattergl mode is more performant, but doesn't support the rangebreaks we need for businessTime calendars
-          return !isBusinessTime ? 'scattergl' : 'scatter';
-
-        case dh.plot.SeriesPlotStyle.LINE:
-          // There is also still some artifacting bugs with scattergl: https://github.com/plotly/plotly.js/issues/3522
-          // The artifacting only occurs on line plots, which we can draw with fairly decent performance using SVG paths
-          // Once the above plotly issue is fixed, scattergl should be used here (when !isBusinessTime)
-          return 'scatter';
-
-        case dh.plot.SeriesPlotStyle.BAR:
-        case dh.plot.SeriesPlotStyle.STACKED_BAR:
-          return 'bar';
-
-        case dh.plot.SeriesPlotStyle.PIE:
-          return 'pie';
-
-        case dh.plot.SeriesPlotStyle.HISTOGRAM:
-          return 'histogram';
-
-        case dh.plot.SeriesPlotStyle.OHLC:
-          return 'ohlc';
-
-        default:
-          return null;
-      }
-    }
-    /**
-     * Converts the Iris plot style into a plotly chart mode
-     * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
-     */
-
-  }, {
-    key: "getPlotlyChartMode",
-    value: function getPlotlyChartMode(plotStyle) {
-      switch (plotStyle) {
-        case dh.plot.SeriesPlotStyle.SCATTER:
-          return 'markers';
-
-        case dh.plot.SeriesPlotStyle.LINE:
-          return 'lines';
-
-        default:
-          return null;
-      }
-    }
-    /**
-     * Get the property to set on the series data for plotly
-     * @param {dh.plot.SeriesPlotStyle} plotStyle The plot style of the series
-     * @param {dh.plot.SourceType} sourceType The source type for the series
-     */
-
-  }, {
-    key: "getPlotlyProperty",
-    value: function getPlotlyProperty(plotStyle, sourceType) {
-      switch (plotStyle) {
-        case dh.plot.SeriesPlotStyle.PIE:
-          switch (sourceType) {
-            case dh.plot.SourceType.X:
-              return 'labels';
-
-            case dh.plot.SourceType.Y:
-              return 'values';
-
-            default:
-              break;
-          }
 
-          break;
+  static getPlotlyChartMode(plotStyle) {
+    switch (plotStyle) {
+      case dh.plot.SeriesPlotStyle.SCATTER:
+        return 'markers';
 
-        case dh.plot.SeriesPlotStyle.OHLC:
-          switch (sourceType) {
-            case dh.plot.SourceType.TIME:
-              return 'x';
+      case dh.plot.SeriesPlotStyle.LINE:
+        return 'lines';
 
-            default:
-              break;
-          }
+      default:
+        return null;
+    }
+  }
+  /**
+   * Get the property to set on the series data for plotly
+   * @param {dh.plot.SeriesPlotStyle} plotStyle The plot style of the series
+   * @param {dh.plot.SourceType} sourceType The source type for the series
+   */
 
-          break;
 
-        default:
-          break;
-      }
+  static getPlotlyProperty(plotStyle, sourceType) {
+    switch (plotStyle) {
+      case dh.plot.SeriesPlotStyle.PIE:
+        switch (sourceType) {
+          case dh.plot.SourceType.X:
+            return 'labels';
 
-      switch (sourceType) {
-        case dh.plot.SourceType.X:
-          return 'x';
+          case dh.plot.SourceType.Y:
+            return 'values';
 
-        case dh.plot.SourceType.Y:
-          return 'y';
+          default:
+            break;
+        }
 
-        case dh.plot.SourceType.Z:
-          return 'z';
+        break;
 
-        case dh.plot.SourceType.X_LOW:
-          return 'xLow';
+      case dh.plot.SeriesPlotStyle.OHLC:
+        switch (sourceType) {
+          case dh.plot.SourceType.TIME:
+            return 'x';
 
-        case dh.plot.SourceType.X_HIGH:
-          return 'xHigh';
+          default:
+            break;
+        }
 
-        case dh.plot.SourceType.Y_LOW:
-          return 'yLow';
+        break;
 
-        case dh.plot.SourceType.Y_HIGH:
-          return 'yHigh';
+      default:
+        break;
+    }
 
-        case dh.plot.SourceType.TIME:
-          return 'time';
+    switch (sourceType) {
+      case dh.plot.SourceType.X:
+        return 'x';
 
-        case dh.plot.SourceType.OPEN:
-          return 'open';
+      case dh.plot.SourceType.Y:
+        return 'y';
 
-        case dh.plot.SourceType.HIGH:
-          return 'high';
+      case dh.plot.SourceType.Z:
+        return 'z';
 
-        case dh.plot.SourceType.LOW:
-          return 'low';
+      case dh.plot.SourceType.X_LOW:
+        return 'xLow';
 
-        case dh.plot.SourceType.CLOSE:
-          return 'shape';
+      case dh.plot.SourceType.X_HIGH:
+        return 'xHigh';
 
-        case dh.plot.SourceType.SIZE:
-          return 'size';
+      case dh.plot.SourceType.Y_LOW:
+        return 'yLow';
 
-        case dh.plot.SourceType.LABEL:
-          return 'label';
+      case dh.plot.SourceType.Y_HIGH:
+        return 'yHigh';
 
-        case dh.plot.SourceType.COLOR:
-          return 'color';
+      case dh.plot.SourceType.TIME:
+        return 'time';
 
-        default:
-          throw new Error('Unrecognized source type', sourceType);
-      }
-    }
-  }, {
-    key: "getPlotlySeriesOrientation",
-    value: function getPlotlySeriesOrientation(series) {
-      var sources = series.sources;
+      case dh.plot.SourceType.OPEN:
+        return 'open';
 
-      if (sources.length === 2 && sources[0].axis.type === dh.plot.AxisType.Y) {
-        return ChartUtils.ORIENTATION.HORIZONTAL;
-      }
+      case dh.plot.SourceType.HIGH:
+        return 'high';
 
-      return ChartUtils.ORIENTATION.VERTICAL;
-    }
-    /**
-     * Generate the plotly error bar data from the passed in data.
-     * Iris passes in the values as absolute, plotly needs them as relative.
-     * @param {Array[Number]} x The main data array
-     * @param {Array[Number]} xLow The absolute low values
-     * @param {Array[Number]} xHigh
-     *
-     * @returns {Object} The error_x object required by plotly, or null if none is required
-     */
-
-  }, {
-    key: "getPlotlyErrorBars",
-    value: function getPlotlyErrorBars(x, xLow, xHigh) {
-      var array = xHigh.map(function (value, i) {
-        return value - x[i];
-      });
-      var arrayminus = xLow.map(function (value, i) {
-        return x[i] - value;
-      });
-      return {
-        type: 'data',
-        symmetric: false,
-        array: array,
-        arrayminus: arrayminus
-      };
-    }
-  }, {
-    key: "getPlotlyDateFormat",
-    value: function getPlotlyDateFormat(formatter, columnType, formatPattern) {
-      var tickformat = formatPattern == null ? null : formatPattern.replace('%', '%%').replace(/S{9}/g, '%9f').replace(/S{8}/g, '%8f').replace(/S{7}/g, '%7f').replace(/S{6}/g, '%6f').replace(/S{5}/g, '%5f').replace(/S{4}/g, '%4f').replace(/S{3}/g, '%3f').replace(/S{2}/g, '%2f').replace(/S{1}/g, '%1f').replace(/y{4}/g, '%Y').replace(/y{2}/g, '%y').replace(/M{4}/g, '%B').replace(/M{3}/g, '%b').replace(/M{2}/g, '%m').replace(/M{1}/g, '%-m').replace(/E{4,}/g, '%A').replace(/E{1,}/g, '%a').replace(/d{2}/g, '%d').replace(/([^%]|^)d{1}/g, '$1%-d').replace(/H{2}/g, '%H').replace(/h{2}/g, '%I').replace(/h{1}/g, '%-I').replace(/m{2}/g, '%M').replace(/s{2}/g, '%S').replace("'T'", 'T').replace(' z', ''); // timezone added as suffix if necessary
+      case dh.plot.SourceType.LOW:
+        return 'low';
 
-      var ticksuffix = null;
-      var dataFormatter = formatter.getColumnTypeFormatter(columnType);
+      case dh.plot.SourceType.CLOSE:
+        return 'shape';
 
-      if (dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
-        ticksuffix = dh.i18n.DateTimeFormat.format(' z', new Date(), dataFormatter.dhTimeZone);
-      }
+      case dh.plot.SourceType.SIZE:
+        return 'size';
 
-      return {
-        tickformat: tickformat,
-        ticksuffix: ticksuffix,
-        automargin: true
-      };
-    }
-  }, {
-    key: "convertNumberPrefix",
-    value: function convertNumberPrefix(prefix) {
-      return prefix.replace(/\u00A4\u00A4/g, 'USD').replace(/\u00A4/g, '$');
-    }
-  }, {
-    key: "getPlotlyNumberFormat",
-    value: function getPlotlyNumberFormat(formatter, columnType, formatPattern) {
-      if (!formatPattern) {
-        return null;
-      } // We translate java formatting: https://docs.oracle.com/javase/7/docs/api/java/text/DecimalFormat.html
-      // Into d3 number formatting: https://github.com/d3/d3-format
-      // We can't translate number formatting exactly, but should be able to translate the most common cases
-      // First split it into the subpatterns; currently only handling the positive subpattern, ignoring the rest
-
-
-      var subpatterns = formatPattern.split(';');
-
-      var _subpatterns$0$match = subpatterns[0].match(/^([^#,0.]*)([#,]*)([0,]*)(\.?)(0*)(#*)(E?0*)(%?)(.*)/),
-          _subpatterns$0$match2 = _slicedToArray(_subpatterns$0$match, 10),
-          prefix = _subpatterns$0$match2[1],
-          placeholderDigits = _subpatterns$0$match2[2],
-          zeroDigits = _subpatterns$0$match2[3],
-          decimalDigits = _subpatterns$0$match2[5],
-          optionalDecimalDigits = _subpatterns$0$match2[6],
-          numberType = _subpatterns$0$match2[7],
-          percentSign = _subpatterns$0$match2[8],
-          suffix = _subpatterns$0$match2[9];
-
-      var paddingLength = zeroDigits.replace(',', '').length;
-      var isCommaSeparated = placeholderDigits.indexOf(',') >= 0 || zeroDigits.indexOf(',') >= 0;
-      var comma = isCommaSeparated ? ',' : '';
-      var plotlyNumberType = numberType ? 'e' : 'f';
-      var type = percentSign || plotlyNumberType;
-      var decimalLength = decimalDigits.length + optionalDecimalDigits.length; // IDS-4565 Plotly uses an older version of d3 which doesn't support the trim option or negative brackets
-      // If plotly updates it's d3 version, this should be re-enabled
-      // const trimOption = optionalDecimalDigits.length > 0 ? '~' : '';
-
-      var trimOption = '';
-      var tickformat = "0".concat(paddingLength).concat(comma, ".").concat(decimalLength).concat(trimOption).concat(type);
-      var tickprefix = ChartUtils.convertNumberPrefix(prefix); // prefix and suffix are processed the same
-
-      var ticksuffix = ChartUtils.convertNumberPrefix(suffix);
-      return {
-        tickformat: tickformat,
-        tickprefix: tickprefix,
-        ticksuffix: ticksuffix,
-        automargin: true
-      };
+      case dh.plot.SourceType.LABEL:
+        return 'label';
+
+      case dh.plot.SourceType.COLOR:
+        return 'color';
+
+      default:
+        throw new Error('Unrecognized source type', sourceType);
     }
-    /**
-     * Gets the plotly axis formatting information from the source passed in
-     * @param {dh.plot.Source} source The Source to get the formatter information from
-     * @param {Formatter} formatter The current formatter for formatting data
-     */
-
-  }, {
-    key: "getPlotlyAxisFormat",
-    value: function getPlotlyAxisFormat(source) {
-      var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var axis = source.axis,
-          columnType = source.columnType;
-      var formatPattern = axis.formatPattern;
-      var axisFormat = null;
-
-      if (TableUtils.isDateType(columnType)) {
-        axisFormat = ChartUtils.getPlotlyDateFormat(formatter, columnType, formatPattern);
-        axisFormat = ChartUtils.addTickSpacing(axisFormat, axis, true);
-      } else if (TableUtils.isNumberType(columnType)) {
-        axisFormat = ChartUtils.getPlotlyNumberFormat(formatter, columnType, formatPattern);
-        axisFormat = ChartUtils.addTickSpacing(axisFormat, axis, false);
-      }
+  }
 
-      if (axis.formatType === dh.plot.AxisFormatType.CATEGORY) {
-        if (axisFormat) {
-          axisFormat.type = 'category';
-        } else {
-          axisFormat = {
-            type: 'category',
-            tickformat: null,
-            ticksuffix: null
-          };
-        }
-      }
+  static getPlotlySeriesOrientation(series) {
+    var {
+      sources
+    } = series;
 
-      return axisFormat;
+    if (sources.length === 2 && sources[0].axis.type === dh.plot.AxisType.Y) {
+      return ChartUtils.ORIENTATION.HORIZONTAL;
     }
-    /**
-     * Adds tick spacing for an axis that has gapBetweenMajorTicks defined.
-     *
-     * @param {object} axisFormat the current axis format, may be null
-     * @param {object} axis the current axis
-     * @param {boolean} isDateType indicates if the columns is a date type
-     */
-
-  }, {
-    key: "addTickSpacing",
-    value: function addTickSpacing(axisFormat, axis, isDateType) {
-      var gapBetweenMajorTicks = axis.gapBetweenMajorTicks;
-
-      if (gapBetweenMajorTicks > 0) {
-        var updatedFormat = axisFormat || {};
-        var tickSpacing = gapBetweenMajorTicks;
-
-        if (isDateType) {
-          // Need to convert from nanoseconds to milliseconds
-          tickSpacing = gapBetweenMajorTicks / NANOS_PER_MILLI;
-        }
 
-        if (axis.log) {
-          tickSpacing = Math.log(tickSpacing);
-        } // Note that tickmode defaults to 'auto'
+    return ChartUtils.ORIENTATION.VERTICAL;
+  }
+  /**
+   * Generate the plotly error bar data from the passed in data.
+   * Iris passes in the values as absolute, plotly needs them as relative.
+   * @param {Array[Number]} x The main data array
+   * @param {Array[Number]} xLow The absolute low values
+   * @param {Array[Number]} xHigh
+   *
+   * @returns {Object} The error_x object required by plotly, or null if none is required
+   */
+
+
+  static getPlotlyErrorBars(x, xLow, xHigh) {
+    var array = xHigh.map((value, i) => value - x[i]);
+    var arrayminus = xLow.map((value, i) => x[i] - value);
+    return {
+      type: 'data',
+      symmetric: false,
+      array,
+      arrayminus
+    };
+  }
 
+  static getPlotlyDateFormat(formatter, columnType, formatPattern) {
+    var tickformat = formatPattern == null ? null : formatPattern.replace('%', '%%').replace(/S{9}/g, '%9f').replace(/S{8}/g, '%8f').replace(/S{7}/g, '%7f').replace(/S{6}/g, '%6f').replace(/S{5}/g, '%5f').replace(/S{4}/g, '%4f').replace(/S{3}/g, '%3f').replace(/S{2}/g, '%2f').replace(/S{1}/g, '%1f').replace(/y{4}/g, '%Y').replace(/y{2}/g, '%y').replace(/M{4}/g, '%B').replace(/M{3}/g, '%b').replace(/M{2}/g, '%m').replace(/M{1}/g, '%-m').replace(/E{4,}/g, '%A').replace(/E{1,}/g, '%a').replace(/d{2}/g, '%d').replace(/([^%]|^)d{1}/g, '$1%-d').replace(/H{2}/g, '%H').replace(/h{2}/g, '%I').replace(/h{1}/g, '%-I').replace(/m{2}/g, '%M').replace(/s{2}/g, '%S').replace("'T'", 'T').replace(' z', ''); // timezone added as suffix if necessary
 
-        updatedFormat.tickmode = 'linear';
-        updatedFormat.dtick = tickSpacing;
-        return updatedFormat;
-      }
+    var ticksuffix = null;
+    var dataFormatter = formatter.getColumnTypeFormatter(columnType);
 
-      return axisFormat;
+    if (dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
+      ticksuffix = dh.i18n.DateTimeFormat.format(' z', new Date(), dataFormatter.dhTimeZone);
     }
-    /**
-     * Retrieve the data source for a given axis in a chart
-     * @param {dh.plot.Chart} chart The chart to get the source for
-     * @param {dh.plot.Axis} axis The axis to find the source for
-     * @returns {dh.plot.Source} The first source matching this axis
-     */
-
-  }, {
-    key: "getSourceForAxis",
-    value: function getSourceForAxis(chart, axis) {
-      for (var i = 0; i < chart.series.length; i += 1) {
-        var series = chart.series[i];
-
-        for (var j = 0; j < series.sources.length; j += 1) {
-          var source = series.sources[j];
-
-          if (source.axis === axis) {
-            return source;
-          }
-        }
-      }
 
+    return {
+      tickformat,
+      ticksuffix,
+      automargin: true
+    };
+  }
+
+  static convertNumberPrefix(prefix) {
+    return prefix.replace(/\u00A4\u00A4/g, 'USD').replace(/\u00A4/g, '$');
+  }
+
+  static getPlotlyNumberFormat(formatter, columnType, formatPattern) {
+    if (!formatPattern) {
       return null;
+    } // We translate java formatting: https://docs.oracle.com/javase/7/docs/api/java/text/DecimalFormat.html
+    // Into d3 number formatting: https://github.com/d3/d3-format
+    // We can't translate number formatting exactly, but should be able to translate the most common cases
+    // First split it into the subpatterns; currently only handling the positive subpattern, ignoring the rest
+
+
+    var subpatterns = formatPattern.split(';');
+    var [, prefix, placeholderDigits, zeroDigits,, decimalDigits, optionalDecimalDigits, numberType, percentSign, suffix] = subpatterns[0].match(/^([^#,0.]*)([#,]*)([0,]*)(\.?)(0*)(#*)(E?0*)(%?)(.*)/);
+    var paddingLength = zeroDigits.replace(',', '').length;
+    var isCommaSeparated = placeholderDigits.indexOf(',') >= 0 || zeroDigits.indexOf(',') >= 0;
+    var comma = isCommaSeparated ? ',' : '';
+    var plotlyNumberType = numberType ? 'e' : 'f';
+    var type = percentSign || plotlyNumberType;
+    var decimalLength = decimalDigits.length + optionalDecimalDigits.length; // IDS-4565 Plotly uses an older version of d3 which doesn't support the trim option or negative brackets
+    // If plotly updates it's d3 version, this should be re-enabled
+    // const trimOption = optionalDecimalDigits.length > 0 ? '~' : '';
+
+    var trimOption = '';
+    var tickformat = "0".concat(paddingLength).concat(comma, ".").concat(decimalLength).concat(trimOption).concat(type);
+    var tickprefix = ChartUtils.convertNumberPrefix(prefix); // prefix and suffix are processed the same
+
+    var ticksuffix = ChartUtils.convertNumberPrefix(suffix);
+    return {
+      tickformat,
+      tickprefix,
+      ticksuffix,
+      automargin: true
+    };
+  }
+  /**
+   * Gets the plotly axis formatting information from the source passed in
+   * @param {dh.plot.Source} source The Source to get the formatter information from
+   * @param {Formatter} formatter The current formatter for formatting data
+   */
+
+
+  static getPlotlyAxisFormat(source) {
+    var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var {
+      axis,
+      columnType
+    } = source;
+    var {
+      formatPattern
+    } = axis;
+    var axisFormat = null;
+
+    if (TableUtils.isDateType(columnType)) {
+      axisFormat = ChartUtils.getPlotlyDateFormat(formatter, columnType, formatPattern);
+      axisFormat = ChartUtils.addTickSpacing(axisFormat, axis, true);
+    } else if (TableUtils.isNumberType(columnType)) {
+      axisFormat = ChartUtils.getPlotlyNumberFormat(formatter, columnType, formatPattern);
+      axisFormat = ChartUtils.addTickSpacing(axisFormat, axis, false);
     }
-    /**
-     * Get visibility setting for the series object
-     * @param {string} name The series name to get the visibility for
-     * @param {object} settings Chart settings
-     * @returns {boolean|string} True for visible series and 'legendonly' for hidden
-     */
-
-  }, {
-    key: "getSeriesVisibility",
-    value: function getSeriesVisibility(name, settings) {
-      var _settings$hiddenSerie;
-
-      if (settings !== null && settings !== void 0 && (_settings$hiddenSerie = settings.hiddenSeries) !== null && _settings$hiddenSerie !== void 0 && _settings$hiddenSerie.includes(name)) {
-        return 'legendonly';
-      }
 
-      return true;
+    if (axis.formatType === dh.plot.AxisFormatType.CATEGORY) {
+      if (axisFormat) {
+        axisFormat.type = 'category';
+      } else {
+        axisFormat = {
+          type: 'category',
+          tickformat: null,
+          ticksuffix: null
+        };
+      }
     }
-    /**
-     * Get hidden labels array from chart settings
-     * @param {object} settings Chart settings
-     * @returns {string[]} Array of hidden series names
-     */
-
-  }, {
-    key: "getHiddenLabels",
-    value: function getHiddenLabels(settings) {
-      if (settings !== null && settings !== void 0 && settings.hiddenSeries) {
-        return _toConsumableArray(settings.hiddenSeries);
+
+    return axisFormat;
+  }
+  /**
+   * Adds tick spacing for an axis that has gapBetweenMajorTicks defined.
+   *
+   * @param {object} axisFormat the current axis format, may be null
+   * @param {object} axis the current axis
+   * @param {boolean} isDateType indicates if the columns is a date type
+   */
+
+
+  static addTickSpacing(axisFormat, axis, isDateType) {
+    var {
+      gapBetweenMajorTicks
+    } = axis;
+
+    if (gapBetweenMajorTicks > 0) {
+      var updatedFormat = axisFormat || {};
+      var tickSpacing = gapBetweenMajorTicks;
+
+      if (isDateType) {
+        // Need to convert from nanoseconds to milliseconds
+        tickSpacing = gapBetweenMajorTicks / NANOS_PER_MILLI;
       }
 
-      return [];
-    }
-    /**
-     * Create a default series data object. Apply styling to the object afterward.
-     * @returns {Object} A simple series data object with no styling
-     */
-
-  }, {
-    key: "makeSeriesData",
-    value: function makeSeriesData(type, mode, name) {
-      var orientation = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ChartUtils.ORIENTATION.VERTICAL;
-      return {
-        type: type,
-        mode: mode,
-        name: name,
-        orientation: orientation
-      };
-    }
-    /**
-     * Create a data series (trace) for use with plotly
-     * @param {dh.plot.Series} series The series to create the series data with
-     * @param {Map<dh.plot.AxisType, dh.plot.Axis[]>} axisTypeMap The map of axes grouped by type
-     * @param {boolean|string} seriesVisibility Visibility setting for the series
-     * @returns {Object} The series data (trace) object for use with plotly.
-     */
-
-  }, {
-    key: "makeSeriesDataFromSeries",
-    value: function makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
-      var name = series.name,
-          plotStyle = series.plotStyle,
-          lineColor = series.lineColor,
-          shapeColor = series.shapeColor,
-          sources = series.sources;
-      var isBusinessTime = sources.some(function (source) {
-        return source.axis.businessCalendar;
-      });
-      var type = ChartUtils.getChartType(plotStyle, isBusinessTime);
-      var mode = ChartUtils.getPlotlyChartMode(plotStyle);
-      var orientation = ChartUtils.getPlotlySeriesOrientation(series);
-      var seriesData = ChartUtils.makeSeriesData(type, mode, name, orientation);
-      ChartUtils.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
-      ChartUtils.addStylingToSeriesData(seriesData, plotStyle, lineColor, shapeColor, seriesVisibility);
-      return seriesData;
+      if (axis.log) {
+        tickSpacing = Math.log(tickSpacing);
+      } // Note that tickmode defaults to 'auto'
+
+
+      updatedFormat.tickmode = 'linear';
+      updatedFormat.dtick = tickSpacing;
+      return updatedFormat;
     }
-  }, {
-    key: "addSourcesToSeriesData",
-    value: function addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
-      var seriesData = seriesDataParam;
-
-      for (var k = 0; k < sources.length; k += 1) {
-        var source = sources[k];
-        var axis = source.axis,
-            sourceType = source.type;
-        var dataAttributeName = ChartUtils.getPlotlyProperty(plotStyle, sourceType);
-        seriesData[dataAttributeName] = [];
-        var axisProperty = ChartUtils.getAxisPropertyName(axis.type);
-        var axes = axisTypeMap.get(axis.type);
-        var axisIndex = axes.indexOf(axis);
-
-        if (axisProperty != null) {
-          var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-          seriesData["".concat(axisProperty, "axis")] = "".concat(axisProperty).concat(axisIndexString);
+
+    return axisFormat;
+  }
+  /**
+   * Retrieve the data source for a given axis in a chart
+   * @param {dh.plot.Chart} chart The chart to get the source for
+   * @param {dh.plot.Axis} axis The axis to find the source for
+   * @returns {dh.plot.Source} The first source matching this axis
+   */
+
+
+  static getSourceForAxis(chart, axis) {
+    for (var i = 0; i < chart.series.length; i += 1) {
+      var series = chart.series[i];
+
+      for (var j = 0; j < series.sources.length; j += 1) {
+        var source = series.sources[j];
+
+        if (source.axis === axis) {
+          return source;
         }
       }
     }
-  }, {
-    key: "addStylingToSeriesData",
-    value: function addStylingToSeriesData(seriesDataParam, plotStyle) {
-      var lineColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var shapeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var seriesVisibility = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-      var seriesData = seriesDataParam; // Add some empty objects so we can fill them in later with details without checking for existence
 
-      seriesData.marker = {
-        line: {}
-      }; // border line width on markers
+    return null;
+  }
+  /**
+   * Get visibility setting for the series object
+   * @param {string} name The series name to get the visibility for
+   * @param {object} settings Chart settings
+   * @returns {boolean|string} True for visible series and 'legendonly' for hidden
+   */
 
-      seriesData.line = {
-        width: 1 // default line width for lines, should eventually be able to override
 
-      };
+  static getSeriesVisibility(name, settings) {
+    var _settings$hiddenSerie;
 
-      if (plotStyle === dh.plot.SeriesPlotStyle.AREA) {
-        seriesData.fill = 'tozeroy';
-      } else if (plotStyle === dh.plot.SeriesPlotStyle.STACKED_AREA) {
-        seriesData.stackgroup = 'stack';
-      } else if (plotStyle === dh.plot.SeriesPlotStyle.STEP) {
-        seriesData.line.shape = 'hv'; // plot.ly horizontal then vertical step styling
-      } else if (plotStyle === dh.plot.SeriesPlotStyle.HISTOGRAM) {
-        // The default histfunc in plotly is 'count', but the data passed up from the API provides explicit x/y values and bins
-        // Since it's converted to bar, just set the widths of each bar
-        seriesData.width = [];
-        Object.assign(seriesData.marker.line, {
-          color: ChartTheme.paper_bgcolor,
-          width: 1
-        });
-      } else if (plotStyle === dh.plot.SeriesPlotStyle.OHLC) {
-        seriesData.increasing = {
-          line: {
-            color: ChartTheme.ohlc_increasing
-          }
-        };
-        seriesData.decreasing = {
-          line: {
-            color: ChartTheme.ohlc_decreasing
-          }
-        };
-      } else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
-        seriesData.textinfo = 'label+percent';
-        seriesData.outsidetextfont = {
-          color: ChartTheme.title_color
-        };
+    if (settings !== null && settings !== void 0 && (_settings$hiddenSerie = settings.hiddenSeries) !== null && _settings$hiddenSerie !== void 0 && _settings$hiddenSerie.includes(name)) {
+      return 'legendonly';
+    }
+
+    return true;
+  }
+  /**
+   * Get hidden labels array from chart settings
+   * @param {object} settings Chart settings
+   * @returns {string[]} Array of hidden series names
+   */
+
+
+  static getHiddenLabels(settings) {
+    if (settings !== null && settings !== void 0 && settings.hiddenSeries) {
+      return [...settings.hiddenSeries];
+    }
+
+    return [];
+  }
+  /**
+   * Create a default series data object. Apply styling to the object afterward.
+   * @returns {Object} A simple series data object with no styling
+   */
+
+
+  static makeSeriesData(type, mode, name) {
+    var orientation = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ChartUtils.ORIENTATION.VERTICAL;
+    return {
+      type,
+      mode,
+      name,
+      orientation
+    };
+  }
+  /**
+   * Create a data series (trace) for use with plotly
+   * @param {dh.plot.Series} series The series to create the series data with
+   * @param {Map<dh.plot.AxisType, dh.plot.Axis[]>} axisTypeMap The map of axes grouped by type
+   * @param {boolean|string} seriesVisibility Visibility setting for the series
+   * @returns {Object} The series data (trace) object for use with plotly.
+   */
+
+
+  static makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
+    var {
+      name,
+      plotStyle,
+      lineColor,
+      shapeColor,
+      sources
+    } = series;
+    var isBusinessTime = sources.some(source => source.axis.businessCalendar);
+    var type = ChartUtils.getChartType(plotStyle, isBusinessTime);
+    var mode = ChartUtils.getPlotlyChartMode(plotStyle);
+    var orientation = ChartUtils.getPlotlySeriesOrientation(series);
+    var seriesData = ChartUtils.makeSeriesData(type, mode, name, orientation);
+    ChartUtils.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
+    ChartUtils.addStylingToSeriesData(seriesData, plotStyle, lineColor, shapeColor, seriesVisibility);
+    return seriesData;
+  }
+
+  static addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
+    var seriesData = seriesDataParam;
+
+    for (var k = 0; k < sources.length; k += 1) {
+      var source = sources[k];
+      var {
+        axis,
+        type: sourceType
+      } = source;
+      var dataAttributeName = ChartUtils.getPlotlyProperty(plotStyle, sourceType);
+      seriesData[dataAttributeName] = [];
+      var axisProperty = ChartUtils.getAxisPropertyName(axis.type);
+      var axes = axisTypeMap.get(axis.type);
+      var axisIndex = axes.indexOf(axis);
+
+      if (axisProperty != null) {
+        var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
+        seriesData["".concat(axisProperty, "axis")] = "".concat(axisProperty).concat(axisIndexString);
       }
+    }
+  }
 
-      if (lineColor != null) {
-        if (plotStyle === dh.plot.SeriesPlotStyle.BAR) {
-          seriesData.marker.color = lineColor;
-        } else {
-          seriesData.line.color = lineColor;
+  static addStylingToSeriesData(seriesDataParam, plotStyle) {
+    var lineColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var shapeColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var seriesVisibility = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    var seriesData = seriesDataParam; // Add some empty objects so we can fill them in later with details without checking for existence
+
+    seriesData.marker = {
+      line: {}
+    }; // border line width on markers
+
+    seriesData.line = {
+      width: 1 // default line width for lines, should eventually be able to override
+
+    };
+
+    if (plotStyle === dh.plot.SeriesPlotStyle.AREA) {
+      seriesData.fill = 'tozeroy';
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.STACKED_AREA) {
+      seriesData.stackgroup = 'stack';
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.STEP) {
+      seriesData.line.shape = 'hv'; // plot.ly horizontal then vertical step styling
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.HISTOGRAM) {
+      // The default histfunc in plotly is 'count', but the data passed up from the API provides explicit x/y values and bins
+      // Since it's converted to bar, just set the widths of each bar
+      seriesData.width = [];
+      Object.assign(seriesData.marker.line, {
+        color: ChartTheme.paper_bgcolor,
+        width: 1
+      });
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.OHLC) {
+      seriesData.increasing = {
+        line: {
+          color: ChartTheme.ohlc_increasing
+        }
+      };
+      seriesData.decreasing = {
+        line: {
+          color: ChartTheme.ohlc_decreasing
         }
+      };
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
+      seriesData.textinfo = 'label+percent';
+      seriesData.outsidetextfont = {
+        color: ChartTheme.title_color
+      };
+    }
+
+    if (lineColor != null) {
+      if (plotStyle === dh.plot.SeriesPlotStyle.BAR) {
+        seriesData.marker.color = lineColor;
+      } else {
+        seriesData.line.color = lineColor;
       }
+    }
 
-      if (shapeColor != null) {
-        seriesData.marker.color = shapeColor;
-      } // Skipping pie charts
-      // Pie slice visibility is configured in chart layout instead of series data
+    if (shapeColor != null) {
+      seriesData.marker.color = shapeColor;
+    } // Skipping pie charts
+    // Pie slice visibility is configured in chart layout instead of series data
 
 
-      if (seriesVisibility != null && plotStyle !== dh.plot.SeriesPlotStyle.PIE) {
-        seriesData.visible = seriesVisibility;
-      }
+    if (seriesVisibility != null && plotStyle !== dh.plot.SeriesPlotStyle.PIE) {
+      seriesData.visible = seriesVisibility;
     }
-    /**
-     * Retrieve the axis formats from the provided figure.
-     * Currently defaults to just the x/y axes.
-     * @param {dh.plot.Figure} figure The figure to get the axis formats for
-     * @param {Formatter} formatter The formatter to use when getting the axis format
-     * @returns {Map<string, object>} A map of axis layout property names to axis formats
-     */
-
-  }, {
-    key: "getAxisFormats",
-    value: function getAxisFormats(figure, formatter) {
-      var axisFormats = new Map();
-      var nullFormat = {
-        tickformat: null,
-        ticksuffix: null
-      };
-      var charts = figure.charts;
-
-      for (var i = 0; i < charts.length; i += 1) {
-        var chart = charts[i];
-        var axisTypeMap = ChartUtils.groupArray(chart.axes, 'type');
-
-        for (var j = 0; j < chart.series.length; j += 1) {
-          var series = chart.series[j];
-          var sources = series.sources;
-
-          for (var k = 0; k < sources.length; k += 1) {
-            var source = sources[k];
-            var axis = source.axis;
-            var axisType = axis.type;
-            var typeAxes = axisTypeMap.get(axisType);
-            var axisIndex = typeAxes.indexOf(axis);
-            var axisProperty = ChartUtils.getAxisPropertyName(axisType);
-            var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
-
-            if (axisFormats.has(axisLayoutProperty)) {
-              log.debug("".concat(axisLayoutProperty, " already added."));
-            } else {
-              var _ret = function () {
-                log.debug("Adding ".concat(axisLayoutProperty, " to axisFormats."));
-                var axisFormat = ChartUtils.getPlotlyAxisFormat(source, formatter);
-
-                if (axisFormat === null) {
-                  axisFormats.set(axisLayoutProperty, nullFormat);
-                } else {
-                  axisFormats.set(axisLayoutProperty, axisFormat);
-                  var businessCalendar = axis.businessCalendar;
-
-                  if (businessCalendar) {
-                    var _formatter$getColumnT;
-
-                    axisFormat.rangebreaks = [];
-                    var businessPeriods = businessCalendar.businessPeriods,
-                        businessDays = businessCalendar.businessDays,
-                        holidays = businessCalendar.holidays,
-                        calendarTimeZone = businessCalendar.timeZone;
-                    var formatterTimeZone = formatter === null || formatter === void 0 ? void 0 : (_formatter$getColumnT = formatter.getColumnTypeFormatter(BUSINESS_COLUMN_TYPE)) === null || _formatter$getColumnT === void 0 ? void 0 : _formatter$getColumnT.dhTimeZone;
-                    var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
-
-                    if (holidays.length > 0) {
-                      var _axisFormat$rangebrea;
-
-                      (_axisFormat$rangebrea = axisFormat.rangebreaks).push.apply(_axisFormat$rangebrea, _toConsumableArray(ChartUtils.createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone)));
-                    }
-
-                    businessPeriods.forEach(function (period) {
-                      return axisFormat.rangebreaks.push({
-                        pattern: 'hour',
-                        bounds: [ChartUtils.periodToDecimal(period.close) + timeZoneDiff, ChartUtils.periodToDecimal(period.open) + timeZoneDiff]
-                      });
-                    }); // If there are seven business days, then there is no weekend
-
-                    if (businessDays.length < DAYS.length) {
-                      ChartUtils.createBoundsFromDays(businessDays).forEach(function (weekendBounds) {
-                        return axisFormat.rangebreaks.push({
-                          pattern: 'day of week',
-                          bounds: weekendBounds
-                        });
-                      });
-                    }
+  }
+  /**
+   * Retrieve the axis formats from the provided figure.
+   * Currently defaults to just the x/y axes.
+   * @param {dh.plot.Figure} figure The figure to get the axis formats for
+   * @param {Formatter} formatter The formatter to use when getting the axis format
+   * @returns {Map<string, object>} A map of axis layout property names to axis formats
+   */
+
+
+  static getAxisFormats(figure, formatter) {
+    var axisFormats = new Map();
+    var nullFormat = {
+      tickformat: null,
+      ticksuffix: null
+    };
+    var {
+      charts
+    } = figure;
+
+    for (var i = 0; i < charts.length; i += 1) {
+      var chart = charts[i];
+      var axisTypeMap = ChartUtils.groupArray(chart.axes, 'type');
+
+      for (var j = 0; j < chart.series.length; j += 1) {
+        var series = chart.series[j];
+        var {
+          sources
+        } = series;
+
+        for (var k = 0; k < sources.length; k += 1) {
+          var source = sources[k];
+          var {
+            axis
+          } = source;
+          var {
+            type: axisType
+          } = axis;
+          var typeAxes = axisTypeMap.get(axisType);
+          var axisIndex = typeAxes.indexOf(axis);
+          var axisProperty = ChartUtils.getAxisPropertyName(axisType);
+          var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
+
+          if (axisFormats.has(axisLayoutProperty)) {
+            log.debug("".concat(axisLayoutProperty, " already added."));
+          } else {
+            var _ret = function () {
+              log.debug("Adding ".concat(axisLayoutProperty, " to axisFormats."));
+              var axisFormat = ChartUtils.getPlotlyAxisFormat(source, formatter);
+
+              if (axisFormat === null) {
+                axisFormats.set(axisLayoutProperty, nullFormat);
+              } else {
+                axisFormats.set(axisLayoutProperty, axisFormat);
+                var {
+                  businessCalendar
+                } = axis;
+
+                if (businessCalendar) {
+                  var _formatter$getColumnT;
+
+                  axisFormat.rangebreaks = [];
+                  var {
+                    businessPeriods,
+                    businessDays,
+                    holidays,
+                    timeZone: calendarTimeZone
+                  } = businessCalendar;
+                  var formatterTimeZone = formatter === null || formatter === void 0 ? void 0 : (_formatter$getColumnT = formatter.getColumnTypeFormatter(BUSINESS_COLUMN_TYPE)) === null || _formatter$getColumnT === void 0 ? void 0 : _formatter$getColumnT.dhTimeZone;
+                  var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
+
+                  if (holidays.length > 0) {
+                    axisFormat.rangebreaks.push(...ChartUtils.createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone));
                   }
 
-                  if (axisFormats.size === chart.axes.length) {
-                    return {
-                      v: axisFormats
-                    };
+                  businessPeriods.forEach(period => axisFormat.rangebreaks.push({
+                    pattern: 'hour',
+                    bounds: [ChartUtils.periodToDecimal(period.close) + timeZoneDiff, ChartUtils.periodToDecimal(period.open) + timeZoneDiff]
+                  })); // If there are seven business days, then there is no weekend
+
+                  if (businessDays.length < DAYS.length) {
+                    ChartUtils.createBoundsFromDays(businessDays).forEach(weekendBounds => axisFormat.rangebreaks.push({
+                      pattern: 'day of week',
+                      bounds: weekendBounds
+                    }));
                   }
                 }
-              }();
 
-              if (_typeof(_ret) === "object") return _ret.v;
-            }
+                if (axisFormats.size === chart.axes.length) {
+                  return {
+                    v: axisFormats
+                  };
+                }
+              }
+            }();
+
+            if (typeof _ret === "object") return _ret.v;
           }
         }
       }
-
-      return axisFormats;
     }
-  }, {
-    key: "getChartType",
-    value: function getChartType(plotStyle, isBusinessTime) {
-      switch (plotStyle) {
-        case dh.plot.SeriesPlotStyle.HISTOGRAM:
-          // When reading data from the `Figure`, it already provides bins and values, so rather than using
-          // plot.ly to calculate the bins and sum values, just convert it to a bar chart
-          return 'bar';
-
-        default:
-          return ChartUtils.getPlotlyChartType(plotStyle, isBusinessTime);
-      }
+
+    return axisFormats;
+  }
+
+  static getChartType(plotStyle, isBusinessTime) {
+    switch (plotStyle) {
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        // When reading data from the `Figure`, it already provides bins and values, so rather than using
+        // plot.ly to calculate the bins and sum values, just convert it to a bar chart
+        return 'bar';
+
+      default:
+        return ChartUtils.getPlotlyChartType(plotStyle, isBusinessTime);
     }
-    /**
-     * Return the plotly axis property name
-     * @param {dh.plot.AxisType} axisType The axis type to get the property name for
-     */
-
-  }, {
-    key: "getAxisPropertyName",
-    value: function getAxisPropertyName(axisType) {
-      switch (axisType) {
-        case dh.plot.AxisType.X:
-          return 'x';
-
-        case dh.plot.AxisType.Y:
-          return 'y';
-
-        default:
-          return null;
-      }
+  }
+  /**
+   * Return the plotly axis property name
+   * @param {dh.plot.AxisType} axisType The axis type to get the property name for
+   */
+
+
+  static getAxisPropertyName(axisType) {
+    switch (axisType) {
+      case dh.plot.AxisType.X:
+        return 'x';
+
+      case dh.plot.AxisType.Y:
+        return 'y';
+
+      default:
+        return null;
     }
-    /**
-     * Returns the plotly "side" value for the provided axis position
-     * @param {dh.plot.AxisPosition} axisPosition The Iris AxisPosition of the axis
-     */
+  }
+  /**
+   * Returns the plotly "side" value for the provided axis position
+   * @param {dh.plot.AxisPosition} axisPosition The Iris AxisPosition of the axis
+   */
 
-  }, {
-    key: "getAxisSide",
-    value: function getAxisSide(axisPosition) {
-      switch (axisPosition) {
-        case dh.plot.AxisPosition.BOTTOM:
-          return 'bottom';
 
-        case dh.plot.AxisPosition.TOP:
-          return 'top';
+  static getAxisSide(axisPosition) {
+    switch (axisPosition) {
+      case dh.plot.AxisPosition.BOTTOM:
+        return 'bottom';
 
-        case dh.plot.AxisPosition.LEFT:
-          return 'left';
+      case dh.plot.AxisPosition.TOP:
+        return 'top';
 
-        case dh.plot.AxisPosition.RIGHT:
-          return 'right';
+      case dh.plot.AxisPosition.LEFT:
+        return 'left';
 
-        default:
-          return null;
-      }
-    }
-    /**
-     * Retrieve the chart that contains the passed in series from the figure
-     * @param {dh.plot.Figure} figure The figure to retrieve the chart from
-     * @param {dh.plot.Series} series The series to get the chart for
-     */
-
-  }, {
-    key: "getChartForSeries",
-    value: function getChartForSeries(figure, series) {
-      var charts = figure.charts;
-
-      for (var i = 0; i < charts.length; i += 1) {
-        var chart = charts[i];
-
-        for (var j = 0; j < chart.series.length; j += 1) {
-          if (series === chart.series[j]) {
-            return chart;
-          }
-        }
-      }
+      case dh.plot.AxisPosition.RIGHT:
+        return 'right';
 
-      return null;
+      default:
+        return null;
     }
-    /**
-     * Get an object mapping axis to their ranges
-     * @param {object} layout The plotly layout object to get the ranges from
-     * @returns {object} An object mapping the axis name to it's range
-     */
-
-  }, {
-    key: "getLayoutRanges",
-    value: function getLayoutRanges(layout) {
-      var ranges = {};
-      var keys = Object.keys(layout).filter(function (key) {
-        return key.indexOf('axis') >= 0;
-      });
+  }
+  /**
+   * Retrieve the chart that contains the passed in series from the figure
+   * @param {dh.plot.Figure} figure The figure to retrieve the chart from
+   * @param {dh.plot.Series} series The series to get the chart for
+   */
 
-      for (var i = 0; i < keys.length; i += 1) {
-        var key = keys[i];
 
-        if (layout[key] && layout[key].range && !layout[key].autorange) {
-          // Only want to add the range if it's not autoranged
-          ranges[key] = _toConsumableArray(layout[key].range);
-        }
-      }
+  static getChartForSeries(figure, series) {
+    var {
+      charts
+    } = figure;
 
-      return ranges;
-    }
-    /**
-     * Updates the axes positions and sizes in the layout object provided.
-     * If the axis did not exist in the layout previously, it is created and added.
-     * Any axis that no longer exists in axes is removed.
-     * With Downsampling enabled, will also update the range on the axis itself as appropriate
-     * @param {object} layoutParam The layout object to update
-     * @param {dh.plot.Axis[]} axes The axes to update the layout with
-     * @param {number} plotWidth The width of the plot to calculate the axis sizes for
-     * @param {number} plotHeight The height of the plot to calculate the axis sizes for
-     * @param {func} getRangeParser A function to retrieve the range parser for a given axis
-     */
-
-  }, {
-    key: "updateLayoutAxes",
-    value: function updateLayoutAxes(layoutParam, axes) {
-      var plotWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      var plotHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var getRangeParser = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-      var xAxisSize = plotWidth > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotHeight, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE;
-      var yAxisSize = plotHeight > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotWidth, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE; // Adjust the bounds based on where the legend is
-      // For now, always assume the legend is shown on the right
-
-      var bounds = {
-        left: 0,
-        bottom: 0,
-        top: 1,
-        right: 1
-      };
-      var axisPositionMap = ChartUtils.groupArray(axes, 'position');
-      var rightAxes = axisPositionMap.get(dh.plot.AxisPosition.RIGHT) || [];
+    for (var i = 0; i < charts.length; i += 1) {
+      var chart = charts[i];
 
-      if (rightAxes.length > 0) {
-        if (plotWidth > 0) {
-          bounds.right = 1 - Math.max(0, Math.min(ChartUtils.LEGEND_WIDTH_PX / plotWidth, ChartUtils.MAX_LEGEND_SIZE));
-        } else {
-          bounds.right = 1 - ChartUtils.DEFAULT_AXIS_SIZE;
+      for (var j = 0; j < chart.series.length; j += 1) {
+        if (series === chart.series[j]) {
+          return chart;
         }
       }
+    }
+
+    return null;
+  }
+  /**
+   * Get an object mapping axis to their ranges
+   * @param {object} layout The plotly layout object to get the ranges from
+   * @returns {object} An object mapping the axis name to it's range
+   */
 
-      var layout = layoutParam;
-      var axisTypeMap = ChartUtils.groupArray(axes, 'type');
 
-      var axisTypes = _toConsumableArray(axisTypeMap.keys());
+  static getLayoutRanges(layout) {
+    var ranges = {};
+    var keys = Object.keys(layout).filter(key => key.indexOf('axis') >= 0);
 
-      for (var j = 0; j < axisTypes.length; j += 1) {
-        var axisType = axisTypes[j];
-        var axisProperty = ChartUtils.getAxisPropertyName(axisType);
+    for (var i = 0; i < keys.length; i += 1) {
+      var key = keys[i];
 
-        if (axisProperty != null) {
-          var typeAxes = axisTypeMap.get(axisType);
-          var isYAxis = axisType === dh.plot.AxisType.Y;
-          var plotSize = isYAxis ? plotHeight : plotWidth;
-          var axisIndex = 0;
+      if (layout[key] && layout[key].range && !layout[key].autorange) {
+        // Only want to add the range if it's not autoranged
+        ranges[key] = [...layout[key].range];
+      }
+    }
 
-          for (axisIndex = 0; axisIndex < typeAxes.length; axisIndex += 1) {
-            var axis = typeAxes[axisIndex];
+    return ranges;
+  }
+  /**
+   * Updates the axes positions and sizes in the layout object provided.
+   * If the axis did not exist in the layout previously, it is created and added.
+   * Any axis that no longer exists in axes is removed.
+   * With Downsampling enabled, will also update the range on the axis itself as appropriate
+   * @param {object} layoutParam The layout object to update
+   * @param {dh.plot.Axis[]} axes The axes to update the layout with
+   * @param {number} plotWidth The width of the plot to calculate the axis sizes for
+   * @param {number} plotHeight The height of the plot to calculate the axis sizes for
+   * @param {func} getRangeParser A function to retrieve the range parser for a given axis
+   */
+
+
+  static updateLayoutAxes(layoutParam, axes) {
+    var plotWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    var plotHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    var getRangeParser = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    var xAxisSize = plotWidth > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotHeight, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE;
+    var yAxisSize = plotHeight > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotWidth, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE; // Adjust the bounds based on where the legend is
+    // For now, always assume the legend is shown on the right
+
+    var bounds = {
+      left: 0,
+      bottom: 0,
+      top: 1,
+      right: 1
+    };
+    var axisPositionMap = ChartUtils.groupArray(axes, 'position');
+    var rightAxes = axisPositionMap.get(dh.plot.AxisPosition.RIGHT) || [];
+
+    if (rightAxes.length > 0) {
+      if (plotWidth > 0) {
+        bounds.right = 1 - Math.max(0, Math.min(ChartUtils.LEGEND_WIDTH_PX / plotWidth, ChartUtils.MAX_LEGEND_SIZE));
+      } else {
+        bounds.right = 1 - ChartUtils.DEFAULT_AXIS_SIZE;
+      }
+    }
 
-            var _axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
+    var layout = layoutParam;
+    var axisTypeMap = ChartUtils.groupArray(axes, 'type');
+    var axisTypes = [...axisTypeMap.keys()];
 
-            if (layout[_axisLayoutProperty] == null) {
-              layout[_axisLayoutProperty] = ChartUtils.makeLayoutAxis(axisType);
-            }
+    for (var j = 0; j < axisTypes.length; j += 1) {
+      var axisType = axisTypes[j];
+      var axisProperty = ChartUtils.getAxisPropertyName(axisType);
 
-            var layoutAxis = layout[_axisLayoutProperty];
-            ChartUtils.updateLayoutAxis(layoutAxis, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
-            var range = layoutAxis.range,
-                autorange = layoutAxis.autorange;
+      if (axisProperty != null) {
+        var typeAxes = axisTypeMap.get(axisType);
+        var isYAxis = axisType === dh.plot.AxisType.Y;
+        var plotSize = isYAxis ? plotHeight : plotWidth;
+        var axisIndex = 0;
 
-            if (getRangeParser && range && !autorange) {
-              var rangeParser = getRangeParser(axis);
+        for (axisIndex = 0; axisIndex < typeAxes.length; axisIndex += 1) {
+          var axis = typeAxes[axisIndex];
 
-              var _rangeParser = rangeParser(range),
-                  _rangeParser2 = _slicedToArray(_rangeParser, 2),
-                  rangeStart = _rangeParser2[0],
-                  rangeEnd = _rangeParser2[1];
+          var _axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
 
-              log.debug('Setting downsample range', plotSize, rangeStart, rangeEnd);
-              axis.range(plotSize, rangeStart, rangeEnd);
-            } else {
-              axis.range(plotSize);
-            }
+          if (layout[_axisLayoutProperty] == null) {
+            layout[_axisLayoutProperty] = ChartUtils.makeLayoutAxis(axisType);
           }
 
-          var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
-
-          while (layout[axisLayoutProperty] != null) {
-            delete layout[axisLayoutProperty];
-            axisIndex += 1;
-            axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
+          var layoutAxis = layout[_axisLayoutProperty];
+          ChartUtils.updateLayoutAxis(layoutAxis, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
+          var {
+            range,
+            autorange
+          } = layoutAxis;
+
+          if (getRangeParser && range && !autorange) {
+            var rangeParser = getRangeParser(axis);
+            var [rangeStart, rangeEnd] = rangeParser(range);
+            log.debug('Setting downsample range', plotSize, rangeStart, rangeEnd);
+            axis.range(plotSize, rangeStart, rangeEnd);
+          } else {
+            axis.range(plotSize);
           }
         }
+
+        var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
+
+        while (layout[axisLayoutProperty] != null) {
+          delete layout[axisLayoutProperty];
+          axisIndex += 1;
+          axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
+        }
       }
     }
-  }, {
-    key: "getAxisLayoutProperty",
-    value: function getAxisLayoutProperty(axisProperty, axisIndex) {
-      var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-      return "".concat(axisProperty, "axis").concat(axisIndexString);
-    }
-    /**
-     * Updates the layout axis object in place
-     * @param {object} layoutAxisParam The plotly layout axis param
-     * @param {dh.plot.Axis} axis The Iris Axis to update the plotly layout with
-     * @param {number} axisIndex The type index for this axis
-     * @param {Map<dh.plot.AxisPosition, dh.plot.Axis>} axisPositionMap All the axes mapped by position
-     * @param {number} axisSize The size of each axis in percent
-     * @param {object} bounds The bounds of the axes domains
-     */
-
-  }, {
-    key: "updateLayoutAxis",
-    value: function updateLayoutAxis(layoutAxisParam, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds) {
-      var isYAxis = axis.type === dh.plot.AxisType.Y;
-      var axisSize = isYAxis ? yAxisSize : xAxisSize;
-      var layoutAxis = layoutAxisParam;
-      layoutAxis.title.text = axis.label;
+  }
 
-      if (axis.log) {
-        layoutAxis.type = 'log';
-      }
+  static getAxisLayoutProperty(axisProperty, axisIndex) {
+    var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
+    return "".concat(axisProperty, "axis").concat(axisIndexString);
+  }
+  /**
+   * Updates the layout axis object in place
+   * @param {object} layoutAxisParam The plotly layout axis param
+   * @param {dh.plot.Axis} axis The Iris Axis to update the plotly layout with
+   * @param {number} axisIndex The type index for this axis
+   * @param {Map<dh.plot.AxisPosition, dh.plot.Axis>} axisPositionMap All the axes mapped by position
+   * @param {number} axisSize The size of each axis in percent
+   * @param {object} bounds The bounds of the axes domains
+   */
+
+
+  static updateLayoutAxis(layoutAxisParam, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds) {
+    var isYAxis = axis.type === dh.plot.AxisType.Y;
+    var axisSize = isYAxis ? yAxisSize : xAxisSize;
+    var layoutAxis = layoutAxisParam;
+    layoutAxis.title.text = axis.label;
+
+    if (axis.log) {
+      layoutAxis.type = 'log';
+    }
 
-      layoutAxis.side = ChartUtils.getAxisSide(axis.position);
+    layoutAxis.side = ChartUtils.getAxisSide(axis.position);
 
-      if (axisIndex > 0) {
-        layoutAxis.overlaying = ChartUtils.getAxisPropertyName(axis.type);
-        var positionAxes = axisPositionMap.get(axis.position);
-        var sideIndex = positionAxes.indexOf(axis);
+    if (axisIndex > 0) {
+      layoutAxis.overlaying = ChartUtils.getAxisPropertyName(axis.type);
+      var positionAxes = axisPositionMap.get(axis.position);
+      var sideIndex = positionAxes.indexOf(axis);
 
-        if (sideIndex > 0) {
-          layoutAxis.anchor = 'free';
+      if (sideIndex > 0) {
+        layoutAxis.anchor = 'free';
 
-          if (axis.position === dh.plot.AxisPosition.RIGHT) {
-            layoutAxis.position = bounds.right + (sideIndex - positionAxes.length + 1) * axisSize;
-          } else if (axis.position === dh.plot.AxisPosition.TOP) {
-            layoutAxis.position = bounds.top + (sideIndex - positionAxes.length + 1) * axisSize;
-          } else if (axis.position === dh.plot.AxisPosition.BOTTOM) {
-            layoutAxis.position = bounds.bottom + (positionAxes.length - sideIndex + 1) * axisSize;
-          } else if (axis.position === dh.plot.AxisPosition.LEFT) {
-            layoutAxis.position = bounds.left + (positionAxes.length - sideIndex + 1) * axisSize;
-          }
+        if (axis.position === dh.plot.AxisPosition.RIGHT) {
+          layoutAxis.position = bounds.right + (sideIndex - positionAxes.length + 1) * axisSize;
+        } else if (axis.position === dh.plot.AxisPosition.TOP) {
+          layoutAxis.position = bounds.top + (sideIndex - positionAxes.length + 1) * axisSize;
+        } else if (axis.position === dh.plot.AxisPosition.BOTTOM) {
+          layoutAxis.position = bounds.bottom + (positionAxes.length - sideIndex + 1) * axisSize;
+        } else if (axis.position === dh.plot.AxisPosition.LEFT) {
+          layoutAxis.position = bounds.left + (positionAxes.length - sideIndex + 1) * axisSize;
         }
-      } else if (axis.type === dh.plot.AxisType.X) {
-        var leftAxes = axisPositionMap.get(dh.plot.AxisPosition.LEFT) || [];
-        var rightAxes = axisPositionMap.get(dh.plot.AxisPosition.RIGHT) || [];
-        var left = Math.max(bounds.left, bounds.left + (leftAxes.length - 1) * yAxisSize);
-        var right = Math.min(bounds.right - (rightAxes.length - 1) * yAxisSize, bounds.right);
-        layoutAxis.domain = [left, right];
-      } else if (axis.type === dh.plot.AxisType.Y) {
-        var bottomAxes = axisPositionMap.get(dh.plot.AxisPosition.BOTTOM) || [];
-        var topAxes = axisPositionMap.get(dh.plot.AxisPosition.TOP) || [];
-        var bottom = Math.max(bounds.bottom, bounds.bottom + (bottomAxes.length - 1) * xAxisSize);
-        var top = Math.min(bounds.top - (topAxes.length - 1) * xAxisSize, bounds.top);
-        layoutAxis.domain = [bottom, top];
       }
+    } else if (axis.type === dh.plot.AxisType.X) {
+      var leftAxes = axisPositionMap.get(dh.plot.AxisPosition.LEFT) || [];
+      var rightAxes = axisPositionMap.get(dh.plot.AxisPosition.RIGHT) || [];
+      var left = Math.max(bounds.left, bounds.left + (leftAxes.length - 1) * yAxisSize);
+      var right = Math.min(bounds.right - (rightAxes.length - 1) * yAxisSize, bounds.right);
+      layoutAxis.domain = [left, right];
+    } else if (axis.type === dh.plot.AxisType.Y) {
+      var bottomAxes = axisPositionMap.get(dh.plot.AxisPosition.BOTTOM) || [];
+      var topAxes = axisPositionMap.get(dh.plot.AxisPosition.TOP) || [];
+      var bottom = Math.max(bounds.bottom, bounds.bottom + (bottomAxes.length - 1) * xAxisSize);
+      var top = Math.min(bounds.top - (topAxes.length - 1) * xAxisSize, bounds.top);
+      layoutAxis.domain = [bottom, top];
     }
-    /**
-     * Converts an open or close period to a declimal. e.g '09:30" to 9.5
-     *
-     * @param {String} period the open or close value of the period
-     */
-
-  }, {
-    key: "periodToDecimal",
-    value: function periodToDecimal(period) {
-      var values = period.split(':');
-      return Number(values[0]) + Number(values[1] / 60);
-    }
-    /**
-     * Creates range break bounds for plotly from business days.
-     * For example a standard business week of ['MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY']
-     * will result in [[6,1]] meaning close on Saturday and open on Monday.
-     * If you remove Wednesday from the array, then you get two closures [[6, 1], [3, 4]]
-     *
-     * @param {Array} businessDays the days to display on the x-axis
-     */
-
-  }, {
-    key: "createBoundsFromDays",
-    value: function createBoundsFromDays(businessDays) {
-      var businessDaysInt = businessDays.map(function (day) {
-        return DAYS.indexOf(day);
-      });
-      var nonBusinessDaysInt = DAYS.filter(function (day) {
-        return !businessDays.includes(day);
-      }).map(function (day) {
-        return DAYS.indexOf(day);
-      }); // These are the days when business reopens (e.g. Monday after a weekend)
-
-      var reopenDays = new Set();
-      nonBusinessDaysInt.forEach(function (closed) {
-        for (var i = closed + 1; i < closed + DAYS.length; i += 1) {
-          var adjustedDay = i % DAYS.length;
-
-          if (businessDaysInt.includes(adjustedDay)) {
-            reopenDays.add(adjustedDay);
-            break;
-          }
-        }
-      });
-      var boundsArray = []; // For each reopen day, find the furthest previous closed day
+  }
+  /**
+   * Converts an open or close period to a declimal. e.g '09:30" to 9.5
+   *
+   * @param {String} period the open or close value of the period
+   */
 
-      reopenDays.forEach(function (open) {
-        for (var i = open - 1; i > open - DAYS.length; i -= 1) {
-          var adjustedDay = i < 0 ? i + DAYS.length : i;
 
-          if (businessDaysInt.includes(adjustedDay)) {
-            var closedDay = (adjustedDay + 1) % 7;
-            boundsArray.push([closedDay, open]);
-            break;
-          }
-        }
-      });
-      return boundsArray;
-    }
-    /**
-     * Creates an array of range breaks for all holidays.
-     *
-     * @param {Array} holidays an array of holidays
-     * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-     * @param {TimeZone} formatterTimeZone the time zone for the formatter
-     */
-
-  }, {
-    key: "createRangeBreakValuesFromHolidays",
-    value: function createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone) {
-      var fullHolidays = [];
-      var partialHolidays = [];
-      holidays.forEach(function (holiday) {
-        if (holiday.businessPeriods.length > 0) {
-          partialHolidays.push.apply(partialHolidays, _toConsumableArray(ChartUtils.createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone)));
-        } else {
-          fullHolidays.push(ChartUtils.createFullHoliday(holiday, calendarTimeZone, formatterTimeZone));
-        }
-      });
-      return [{
-        values: fullHolidays
-      }].concat(partialHolidays);
-    }
-    /**
-     * Creates the range break value for a full holiday. A full holiday is day that has no business periods.
-     *
-     * @param {Holiday} holiday the full holiday
-     * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-     * @param {TimeZone} formatterTimeZone the time zone for the formatter
-     */
-
-  }, {
-    key: "createFullHoliday",
-    value: function createFullHoliday(holiday, calendarTimeZone, formatterTimeZone) {
-      return ChartUtils.adjustDateForTimeZone("".concat(holiday.date.toString(), " 00:00:00.000000"), calendarTimeZone, formatterTimeZone);
-    }
-    /**
-     * Creates the range break for a partial holiday. A partial holiday is holiday with business periods
-     * that are different than the default business periods.
-     *
-     * @param {Holiday} holiday the partial holiday
-     * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-     * @param {TimeZone} formatterTimeZone the time zone for the formatter
-     */
-
-  }, {
-    key: "createPartialHoliday",
-    value: function createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone) {
-      // If a holiday has business periods {open1, close1} and {open2, close2}
-      // This will generate range breaks for:
-      // closed from 00:00 to open1
-      // closed from close1 to open2
-      // closed from close2 to 23:59:59.999999
-      var dateString = holiday.date.toString();
-      var closedPeriods = ['00:00'];
-      holiday.businessPeriods.forEach(function (period) {
-        closedPeriods.push(period.open);
-        closedPeriods.push(period.close);
-      }); // To go up to 23:59:59.999999, we calculate the dvalue using 24 - close
-
-      closedPeriods.push('24:00');
-      var rangeBreaks = [];
-
-      for (var i = 0; i < closedPeriods.length; i += 2) {
-        var startClose = closedPeriods[i];
-        var endClose = closedPeriods[i + 1]; // Skip over any periods where start and close are the same (zero hours)
-
-        if (startClose !== endClose) {
-          var values = [ChartUtils.adjustDateForTimeZone("".concat(dateString, " ").concat(startClose, ":00.000000"), calendarTimeZone, formatterTimeZone)];
-          var dvalue = MILLIS_PER_HOUR * (ChartUtils.periodToDecimal(endClose) - ChartUtils.periodToDecimal(startClose));
-          rangeBreaks.push({
-            values: values,
-            dvalue: dvalue
-          });
+  static periodToDecimal(period) {
+    var values = period.split(':');
+    return Number(values[0]) + Number(values[1] / 60);
+  }
+  /**
+   * Creates range break bounds for plotly from business days.
+   * For example a standard business week of ['MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY']
+   * will result in [[6,1]] meaning close on Saturday and open on Monday.
+   * If you remove Wednesday from the array, then you get two closures [[6, 1], [3, 4]]
+   *
+   * @param {Array} businessDays the days to display on the x-axis
+   */
+
+
+  static createBoundsFromDays(businessDays) {
+    var businessDaysInt = businessDays.map(day => DAYS.indexOf(day));
+    var nonBusinessDaysInt = DAYS.filter(day => !businessDays.includes(day)).map(day => DAYS.indexOf(day)); // These are the days when business reopens (e.g. Monday after a weekend)
+
+    var reopenDays = new Set();
+    nonBusinessDaysInt.forEach(closed => {
+      for (var i = closed + 1; i < closed + DAYS.length; i += 1) {
+        var adjustedDay = i % DAYS.length;
+
+        if (businessDaysInt.includes(adjustedDay)) {
+          reopenDays.add(adjustedDay);
+          break;
         }
       }
+    });
+    var boundsArray = []; // For each reopen day, find the furthest previous closed day
 
-      return rangeBreaks;
-    }
-    /**
-     * Adjusts a date string from the calendar time zone to the formatter time zone.
-     *
-     * @param {string} dateString the date string
-     * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-     * @param {TimeZone} formatterTimeZone the time zone for the formatter
-     */
-
-  }, {
-    key: "adjustDateForTimeZone",
-    value: function adjustDateForTimeZone(dateString, calendarTimeZone, formatterTimeZone) {
-      if (formatterTimeZone && formatterTimeZone.standardOffset !== calendarTimeZone.standardOffset) {
-        return ChartUtils.unwrapValue(ChartUtils.wrapValue(dateString, BUSINESS_COLUMN_TYPE, calendarTimeZone), formatterTimeZone);
+    reopenDays.forEach(open => {
+      for (var i = open - 1; i > open - DAYS.length; i -= 1) {
+        var adjustedDay = i < 0 ? i + DAYS.length : i;
+
+        if (businessDaysInt.includes(adjustedDay)) {
+          var closedDay = (adjustedDay + 1) % 7;
+          boundsArray.push([closedDay, open]);
+          break;
+        }
       }
+    });
+    return boundsArray;
+  }
+  /**
+   * Creates an array of range breaks for all holidays.
+   *
+   * @param {Array} holidays an array of holidays
+   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
+   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   */
+
+
+  static createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone) {
+    var fullHolidays = [];
+    var partialHolidays = [];
+    holidays.forEach(holiday => {
+      if (holiday.businessPeriods.length > 0) {
+        partialHolidays.push(...ChartUtils.createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone));
+      } else {
+        fullHolidays.push(ChartUtils.createFullHoliday(holiday, calendarTimeZone, formatterTimeZone));
+      }
+    });
+    return [{
+      values: fullHolidays
+    }, ...partialHolidays];
+  }
+  /**
+   * Creates the range break value for a full holiday. A full holiday is day that has no business periods.
+   *
+   * @param {Holiday} holiday the full holiday
+   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
+   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   */
 
-      return dateString;
+
+  static createFullHoliday(holiday, calendarTimeZone, formatterTimeZone) {
+    return ChartUtils.adjustDateForTimeZone("".concat(holiday.date.toString(), " 00:00:00.000000"), calendarTimeZone, formatterTimeZone);
+  }
+  /**
+   * Creates the range break for a partial holiday. A partial holiday is holiday with business periods
+   * that are different than the default business periods.
+   *
+   * @param {Holiday} holiday the partial holiday
+   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
+   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   */
+
+
+  static createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone) {
+    // If a holiday has business periods {open1, close1} and {open2, close2}
+    // This will generate range breaks for:
+    // closed from 00:00 to open1
+    // closed from close1 to open2
+    // closed from close2 to 23:59:59.999999
+    var dateString = holiday.date.toString();
+    var closedPeriods = ['00:00'];
+    holiday.businessPeriods.forEach(period => {
+      closedPeriods.push(period.open);
+      closedPeriods.push(period.close);
+    }); // To go up to 23:59:59.999999, we calculate the dvalue using 24 - close
+
+    closedPeriods.push('24:00');
+    var rangeBreaks = [];
+
+    for (var i = 0; i < closedPeriods.length; i += 2) {
+      var startClose = closedPeriods[i];
+      var endClose = closedPeriods[i + 1]; // Skip over any periods where start and close are the same (zero hours)
+
+      if (startClose !== endClose) {
+        var values = [ChartUtils.adjustDateForTimeZone("".concat(dateString, " ").concat(startClose, ":00.000000"), calendarTimeZone, formatterTimeZone)];
+        var dvalue = MILLIS_PER_HOUR * (ChartUtils.periodToDecimal(endClose) - ChartUtils.periodToDecimal(startClose));
+        rangeBreaks.push({
+          values,
+          dvalue
+        });
+      }
     }
-    /**
-     * Groups an array and returns a map
-     * @param {object[]} array The object to group
-     * @param {string} property The property name to group by
-     * @returns {Map<object, object>} A map containing the items grouped by their values for the property
-     */
-
-  }, {
-    key: "groupArray",
-    value: function groupArray(array, property) {
-      return array.reduce(function (result, item) {
-        var key = item[property];
-        var group = result.get(key) || [];
-        group.push(item);
-        result.set(key, group);
-        return result;
-      }, new Map());
+
+    return rangeBreaks;
+  }
+  /**
+   * Adjusts a date string from the calendar time zone to the formatter time zone.
+   *
+   * @param {string} dateString the date string
+   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
+   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   */
+
+
+  static adjustDateForTimeZone(dateString, calendarTimeZone, formatterTimeZone) {
+    if (formatterTimeZone && formatterTimeZone.standardOffset !== calendarTimeZone.standardOffset) {
+      return ChartUtils.unwrapValue(ChartUtils.wrapValue(dateString, BUSINESS_COLUMN_TYPE, calendarTimeZone), formatterTimeZone);
     }
-    /**
-     * Update
-     */
-
-  }, {
-    key: "updateRanges",
-    value: function updateRanges() {}
-    /**
-     * Unwraps a value provided from API to a value plotly can understand
-     * Eg. Unwraps DateWrapper, LongWrapper objects.
-     */
-
-  }, {
-    key: "unwrapValue",
-    value: function unwrapValue(value) {
-      var timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-      if (value != null) {
-        if (value.asDate) {
-          return dh.i18n.DateTimeFormat.format(ChartUtils.DATE_FORMAT, value, timeZone);
-        }
 
-        if (value.asNumber) {
-          return value.asNumber();
-        }
+    return dateString;
+  }
+  /**
+   * Groups an array and returns a map
+   * @param {object[]} array The object to group
+   * @param {string} property The property name to group by
+   * @returns {Map<object, object>} A map containing the items grouped by their values for the property
+   */
+
+
+  static groupArray(array, property) {
+    return array.reduce((result, item) => {
+      var key = item[property];
+      var group = result.get(key) || [];
+      group.push(item);
+      result.set(key, group);
+      return result;
+    }, new Map());
+  }
+  /**
+   * Update
+   */
+
+
+  static updateRanges() {}
+  /**
+   * Unwraps a value provided from API to a value plotly can understand
+   * Eg. Unwraps DateWrapper, LongWrapper objects.
+   */
+
+
+  static unwrapValue(value) {
+    var timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+    if (value != null) {
+      if (value.asDate) {
+        return dh.i18n.DateTimeFormat.format(ChartUtils.DATE_FORMAT, value, timeZone);
       }
 
-      return value;
-    }
-    /**
-     *
-     * @param {any} value The value to wrap up
-     * @param {string} columnType The type of column this value is from
-     * @param {dh.i18n.TimeZone} timeZone The time zone if applicable
-     */
-
-  }, {
-    key: "wrapValue",
-    value: function wrapValue(value, columnType) {
-      var timeZone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
-      if (TableUtils.isDateType(columnType) && typeof value === 'string') {
-        // Need to limit the format to the actual length of the string range set in plotly
-        // Otherwise parse will fail
-        var text = value;
-        var format = ChartUtils.DATE_FORMAT.substr(0, value.length);
-        var date = dh.i18n.DateTimeFormat.parse(format, text);
-
-        if (!timeZone) {
-          return date;
-        } // IDS-5994 Due to date parsing, time zone, and daylight savings shenanigans, we need
-        // to pass the actual offset with the time to have it parse correctly.
-        // However, the offset can change based on the date because of Daylight Savings
-        // So we end up parsing the date multiple times. And curse daylight savings.
-
-
-        var tzFormat = "".concat(format, " Z");
-        var estimatedOffset = dh.i18n.DateTimeFormat.format('Z', date, timeZone);
-        var estimatedDate = dh.i18n.DateTimeFormat.parse(tzFormat, "".concat(text, " ").concat(estimatedOffset));
-        var offset = dh.i18n.DateTimeFormat.format('Z', estimatedDate, timeZone);
-        return dh.i18n.DateTimeFormat.parse(tzFormat, "".concat(text, " ").concat(offset));
+      if (value.asNumber) {
+        return value.asNumber();
       }
+    }
 
-      return value;
+    return value;
+  }
+  /**
+   *
+   * @param {any} value The value to wrap up
+   * @param {string} columnType The type of column this value is from
+   * @param {dh.i18n.TimeZone} timeZone The time zone if applicable
+   */
+
+
+  static wrapValue(value, columnType) {
+    var timeZone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+    if (TableUtils.isDateType(columnType) && typeof value === 'string') {
+      // Need to limit the format to the actual length of the string range set in plotly
+      // Otherwise parse will fail
+      var text = value;
+      var format = ChartUtils.DATE_FORMAT.substr(0, value.length);
+      var date = dh.i18n.DateTimeFormat.parse(format, text);
+
+      if (!timeZone) {
+        return date;
+      } // IDS-5994 Due to date parsing, time zone, and daylight savings shenanigans, we need
+      // to pass the actual offset with the time to have it parse correctly.
+      // However, the offset can change based on the date because of Daylight Savings
+      // So we end up parsing the date multiple times. And curse daylight savings.
+
+
+      var tzFormat = "".concat(format, " Z");
+      var estimatedOffset = dh.i18n.DateTimeFormat.format('Z', date, timeZone);
+      var estimatedDate = dh.i18n.DateTimeFormat.parse(tzFormat, "".concat(text, " ").concat(estimatedOffset));
+      var offset = dh.i18n.DateTimeFormat.format('Z', estimatedDate, timeZone);
+      return dh.i18n.DateTimeFormat.parse(tzFormat, "".concat(text, " ").concat(offset));
     }
-  }, {
-    key: "makeLayoutAxis",
-    value: function makeLayoutAxis(type) {
-      var axis = {
-        automargin: true,
-        gridcolor: ChartTheme.gridcolor,
-        linecolor: ChartTheme.linecolor,
-        rangeslider: {
-          visible: false
-        },
-        showline: true,
-        ticklen: 5,
-        // act as padding, can't find a tick padding
-        tickcolor: ChartTheme.paper_bgcolor,
-        // hide ticks as padding
-        tickfont: {
-          color: ChartTheme.zerolinecolor
-        },
-        title: {
-          font: {
-            color: ChartTheme.title_color
-          }
-        }
-      };
 
-      if (type === dh.plot.AxisType.X) {
-        Object.assign(axis, {
-          showgrid: true
-        });
-      } else if (type === dh.plot.AxisType.Y) {
-        Object.assign(axis, {
-          zerolinecolor: ChartTheme.zerolinecolor,
-          zerolinewidth: 2
-        });
-      }
+    return value;
+  }
 
-      return axis;
-    }
-  }, {
-    key: "makeDefaultLayout",
-    value: function makeDefaultLayout() {
-      var layout = _objectSpread(_objectSpread({}, ChartTheme), {}, {
-        autosize: true,
-        colorway: ChartTheme.colorway ? ChartTheme.colorway.split(' ') : [],
+  static makeLayoutAxis(type) {
+    var axis = {
+      automargin: true,
+      gridcolor: ChartTheme.gridcolor,
+      linecolor: ChartTheme.linecolor,
+      rangeslider: {
+        visible: false
+      },
+      showline: true,
+      ticklen: 5,
+      // act as padding, can't find a tick padding
+      tickcolor: ChartTheme.paper_bgcolor,
+      // hide ticks as padding
+      tickfont: {
+        color: ChartTheme.zerolinecolor
+      },
+      title: {
         font: {
-          family: "'Fira Sans', sans-serif"
-        },
-        title: {
-          font: {
-            color: ChartTheme.title_color
-          },
-          yanchor: 'top',
-          pad: _objectSpread({}, ChartUtils.DEFAULT_TITLE_PADDING),
-          y: 1,
-          text: 'Untitled'
-        },
-        legend: {
-          font: {
-            color: ChartTheme.title_color
-          }
-        },
-        margin: _objectSpread({}, ChartUtils.DEFAULT_MARGIN),
-        xaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.X),
-        yaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.Y)
-      });
+          color: ChartTheme.title_color
+        }
+      }
+    };
 
-      layout.datarevision = 0;
-      return layout;
-    }
-    /**
-     * Dehydrate settings so they can be JSONified
-     * @param {object} settings Chart builder settings
-     */
-
-  }, {
-    key: "dehydrateSettings",
-    value: function dehydrateSettings(settings) {
-      return _objectSpread(_objectSpread({}, settings), {}, {
-        type: "".concat(settings.type)
+    if (type === dh.plot.AxisType.X) {
+      Object.assign(axis, {
+        showgrid: true
       });
-    }
-    /**
-     * Hydrate settings from a JSONable object
-     * @param {object} settings Dehydrated settings
-     */
-
-  }, {
-    key: "hydrateSettings",
-    value: function hydrateSettings(settings) {
-      return _objectSpread(_objectSpread({}, settings), {}, {
-        type: dh.plot.SeriesPlotStyle[settings.type]
+    } else if (type === dh.plot.AxisType.Y) {
+      Object.assign(axis, {
+        zerolinecolor: ChartTheme.zerolinecolor,
+        zerolinewidth: 2
       });
     }
-  }, {
-    key: "titleFromSettings",
-    value: function titleFromSettings(settings) {
-      var series = settings.series,
-          xAxis = settings.xAxis,
-          _settings$title = settings.title,
-          title = _settings$title === void 0 ? "".concat(series.join(', '), " by ").concat(xAxis) : _settings$title;
-      return title;
-    }
-    /**
-     * Creates the Figure settings from the Chart Builder settings
-     * This should be deprecated at some point, and have Chart Builder create the figure settings directly.
-     * This logic will still need to exist to translate existing charts, but could be part of a migration script
-     * to translate the data.
-     * Change when we decide to add more functionality to the Chart Builder.
-     * @param {object} settings The chart builder settings
-     * @param {string} settings.title The title for this figure
-     * @param {string} settings.xAxis The name of the column to use for the x-axis
-     * @param {string[]} settings.series The name of the columns to use for the series of this figure
-     * @param {dh.plot.SeriesPlotStyle} settings.type The plot style for this figure
-     */
-
-  }, {
-    key: "makeFigureSettings",
-    value: function makeFigureSettings(settings, table) {
-      var series = settings.series,
-          settingsAxis = settings.xAxis,
-          type = settings.type;
-      var title = ChartUtils.titleFromSettings(settings);
-      var xAxis = {
-        formatType: "".concat(dh.plot.AxisFormatType.NUMBER),
-        type: "".concat(dh.plot.AxisType.X),
-        position: "".concat(dh.plot.AxisPosition.BOTTOM)
-      };
-      var yAxis = {
-        formatType: "".concat(dh.plot.AxisFormatType.NUMBER),
-        type: "".concat(dh.plot.AxisType.Y),
-        position: "".concat(dh.plot.AxisPosition.LEFT)
-      };
-      return {
-        charts: [{
-          chartType: "".concat(dh.plot.ChartType.XY),
-          axes: [xAxis, yAxis],
-          series: series.map(function (name) {
-            return {
-              plotStyle: "".concat(type),
-              name: name,
-              dataSources: [{
-                type: "".concat(dh.plot.SourceType.X),
-                columnName: settingsAxis,
-                axis: xAxis,
-                table: table
-              }, {
-                type: "".concat(dh.plot.SourceType.Y),
-                columnName: name,
-                axis: yAxis,
-                table: table
-              }]
-            };
-          })
-        }],
-        title: title
-      };
-    }
-  }]);
 
-  return ChartUtils;
-}();
+    return axis;
+  }
+
+  static makeDefaultLayout() {
+    var layout = _objectSpread(_objectSpread({}, ChartTheme), {}, {
+      autosize: true,
+      colorway: ChartTheme.colorway ? ChartTheme.colorway.split(' ') : [],
+      font: {
+        family: "'Fira Sans', sans-serif"
+      },
+      title: {
+        font: {
+          color: ChartTheme.title_color
+        },
+        yanchor: 'top',
+        pad: _objectSpread({}, ChartUtils.DEFAULT_TITLE_PADDING),
+        y: 1,
+        text: 'Untitled'
+      },
+      legend: {
+        font: {
+          color: ChartTheme.title_color
+        }
+      },
+      margin: _objectSpread({}, ChartUtils.DEFAULT_MARGIN),
+      xaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.X),
+      yaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.Y)
+    });
+
+    layout.datarevision = 0;
+    return layout;
+  }
+  /**
+   * Dehydrate settings so they can be JSONified
+   * @param {object} settings Chart builder settings
+   */
+
+
+  static dehydrateSettings(settings) {
+    return _objectSpread(_objectSpread({}, settings), {}, {
+      type: "".concat(settings.type)
+    });
+  }
+  /**
+   * Hydrate settings from a JSONable object
+   * @param {object} settings Dehydrated settings
+   */
+
+
+  static hydrateSettings(settings) {
+    return _objectSpread(_objectSpread({}, settings), {}, {
+      type: dh.plot.SeriesPlotStyle[settings.type]
+    });
+  }
+
+  static titleFromSettings(settings) {
+    var {
+      series,
+      xAxis,
+      title = "".concat(series.join(', '), " by ").concat(xAxis)
+    } = settings;
+    return title;
+  }
+  /**
+   * Creates the Figure settings from the Chart Builder settings
+   * This should be deprecated at some point, and have Chart Builder create the figure settings directly.
+   * This logic will still need to exist to translate existing charts, but could be part of a migration script
+   * to translate the data.
+   * Change when we decide to add more functionality to the Chart Builder.
+   * @param {object} settings The chart builder settings
+   * @param {string} settings.title The title for this figure
+   * @param {string} settings.xAxis The name of the column to use for the x-axis
+   * @param {string[]} settings.series The name of the columns to use for the series of this figure
+   * @param {dh.plot.SeriesPlotStyle} settings.type The plot style for this figure
+   */
+
+
+  static makeFigureSettings(settings, table) {
+    var {
+      series,
+      xAxis: settingsAxis,
+      type
+    } = settings;
+    var title = ChartUtils.titleFromSettings(settings);
+    var xAxis = {
+      formatType: "".concat(dh.plot.AxisFormatType.NUMBER),
+      type: "".concat(dh.plot.AxisType.X),
+      position: "".concat(dh.plot.AxisPosition.BOTTOM)
+    };
+    var yAxis = {
+      formatType: "".concat(dh.plot.AxisFormatType.NUMBER),
+      type: "".concat(dh.plot.AxisType.Y),
+      position: "".concat(dh.plot.AxisPosition.LEFT)
+    };
+    return {
+      charts: [{
+        chartType: "".concat(dh.plot.ChartType.XY),
+        axes: [xAxis, yAxis],
+        series: series.map(name => ({
+          plotStyle: "".concat(type),
+          name,
+          dataSources: [{
+            type: "".concat(dh.plot.SourceType.X),
+            columnName: settingsAxis,
+            axis: xAxis,
+            table
+          }, {
+            type: "".concat(dh.plot.SourceType.Y),
+            columnName: name,
+            axis: yAxis,
+            table
+          }]
+        }))
+      }],
+      title
+    };
+  }
+
+}
 
 _defineProperty(ChartUtils, "DEFAULT_AXIS_SIZE", 0.15);