@deephaven/chart 0.35.1-sideEffects.3 → 0.35.1-test-envoy.18

package/dist/ChartUtils.js

@@ -3,14 +3,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// TODO: remove this. Set dh to undefined to catch and fix all globals.
+/* eslint-disable @typescript-eslint/no-shadow */
 import Log from '@deephaven/log';
 import { TableUtils } from '@deephaven/jsapi-utils';
-import dh from '@deephaven/jsapi-shim';
 import set from 'lodash.set';
 import { assertNotNull } from '@deephaven/utils';
 import ChartTheme from "./ChartTheme.js";
 var log = Log.module('ChartUtils');
-var DAYS = Object.freeze(dh.calendar.DayOfWeek.values());
 var BUSINESS_COLUMN_TYPE = 'io.deephaven.time.DateTime';
 var MILLIS_PER_HOUR = 3600000;
 var NANOS_PER_MILLI = 1000000;
@@ -27,168 +27,6 @@ function isRangedPlotlyAxis(value) {
   return value != null && value.range != null && (value.autorange === false || value.autorange === undefined);
 }
 class ChartUtils {
-  /**
-   * Converts the Iris plot style into a plotly chart type
-   * @param plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle
-   * @param 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.TREEMAP:
-        return 'treemap';
-      case dh.plot.SeriesPlotStyle.HISTOGRAM:
-        return 'histogram';
-      case dh.plot.SeriesPlotStyle.OHLC:
-        return 'ohlc';
-      default:
-        return undefined;
-    }
-  }
-
-  /**
-   * Converts the Iris plot style into a plotly chart mode
-   * @param plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
-   * @param areLinesVisible Whether lines are visible or not
-   * @param areShapesVisible Whether shapes are visible or not
-   */
-  static getPlotlyChartMode(plotStyle, areLinesVisible, areShapesVisible) {
-    var modes = new Set();
-    switch (plotStyle) {
-      case dh.plot.SeriesPlotStyle.SCATTER:
-        // Default to only showing shapes in scatter plots
-        if (areLinesVisible !== null && areLinesVisible !== void 0 ? areLinesVisible : false) {
-          modes.add(ChartUtils.MODE_LINES);
-        }
-        if (areShapesVisible !== null && areShapesVisible !== void 0 ? areShapesVisible : true) {
-          modes.add(ChartUtils.MODE_MARKERS);
-        }
-        break;
-      case dh.plot.SeriesPlotStyle.LINE:
-        // Default to only showing lines in line series
-        if (areLinesVisible !== null && areLinesVisible !== void 0 ? areLinesVisible : true) {
-          modes.add(ChartUtils.MODE_LINES);
-        }
-        if (areShapesVisible !== null && areShapesVisible !== void 0 ? areShapesVisible : false) {
-          modes.add(ChartUtils.MODE_MARKERS);
-        }
-        break;
-      default:
-        break;
-    }
-    return modes.size > 0 ? [...modes].join('+') : undefined;
-  }
-
-  /**
-   * Get the property to set on the series data for plotly
-   * @param plotStyle The plot style of the series
-   * @param sourceType The source type for the series
-   */
-  static 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;
-      case dh.plot.SeriesPlotStyle.OHLC:
-        switch (sourceType) {
-          case dh.plot.SourceType.TIME:
-            return 'x';
-          default:
-            break;
-        }
-        break;
-      case dh.plot.SeriesPlotStyle.TREEMAP:
-        switch (sourceType) {
-          case dh.plot.SourceType.X:
-            return 'ids';
-          case dh.plot.SourceType.Y:
-            return 'values';
-          case dh.plot.SourceType.LABEL:
-            return 'labels';
-          case dh.plot.SourceType.PARENT:
-            return 'parents';
-          case dh.plot.SourceType.COLOR:
-            return 'marker.colors';
-          default:
-            break;
-        }
-        break;
-      default:
-        break;
-    }
-    switch (sourceType) {
-      case dh.plot.SourceType.X:
-        return 'x';
-      case dh.plot.SourceType.Y:
-        return 'y';
-      case dh.plot.SourceType.Z:
-        return 'z';
-      case dh.plot.SourceType.X_LOW:
-        return 'xLow';
-      case dh.plot.SourceType.X_HIGH:
-        return 'xHigh';
-      case dh.plot.SourceType.Y_LOW:
-        return 'yLow';
-      case dh.plot.SourceType.Y_HIGH:
-        return 'yHigh';
-      case dh.plot.SourceType.TIME:
-        return 'time';
-      case dh.plot.SourceType.OPEN:
-        return 'open';
-      case dh.plot.SourceType.HIGH:
-        return 'high';
-      case dh.plot.SourceType.LOW:
-        return 'low';
-      case dh.plot.SourceType.CLOSE:
-        return 'close';
-      case dh.plot.SourceType.SHAPE:
-        return 'shape';
-      case dh.plot.SourceType.SIZE:
-        return 'size';
-      case dh.plot.SourceType.LABEL:
-        return 'label';
-      case dh.plot.SourceType.COLOR:
-        return 'color';
-      case dh.plot.SourceType.PARENT:
-        return 'parent';
-      case dh.plot.SourceType.HOVER_TEXT:
-        return 'hovertext';
-      case dh.plot.SourceType.TEXT:
-        return 'text';
-      default:
-        throw new Error("Unrecognized source type: ".concat(sourceType));
-    }
-  }
-  static getPlotlySeriesOrientation(series) {
-    var _sources$, _sources$$axis;
-    var {
-      sources
-    } = series;
-    if (sources.length === 2 && ((_sources$ = sources[0]) === null || _sources$ === void 0 ? void 0 : (_sources$$axis = _sources$.axis) === null || _sources$$axis === void 0 ? void 0 : _sources$$axis.type) === dh.plot.AxisType.Y) {
-      return ChartUtils.ORIENTATION.HORIZONTAL;
-    }
-    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.
@@ -208,7 +46,7 @@ class ChartUtils {
       arrayminus
     };
   }
-  static getPlotlyDateFormat(formatter, columnType, formatPattern) {
+  static getPlotlyDateFormat(dh, formatter, columnType, formatPattern) {
     var tickformat = formatPattern == null ? undefined : 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
 
     var ticksuffix;
@@ -265,8 +103,8 @@ class ChartUtils {
    * @param source The Source to get the formatter information from
    * @param formatter The current formatter for formatting data
    */
-  static getPlotlyAxisFormat(source) {
-    var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  static getPlotlyAxisFormat(dh, source) {
+    var formatter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     var {
       axis,
       columnType
@@ -276,7 +114,7 @@ class ChartUtils {
     } = axis;
     var axisFormat = null;
     if (TableUtils.isDateType(columnType)) {
-      axisFormat = ChartUtils.getPlotlyDateFormat(formatter, columnType, formatPattern);
+      axisFormat = ChartUtils.getPlotlyDateFormat(dh, formatter, columnType, formatPattern);
       axisFormat = ChartUtils.addTickSpacing(axisFormat, axis, true);
     } else if (TableUtils.isNumberType(columnType)) {
       axisFormat = ChartUtils.getPlotlyNumberFormat(formatter, columnType, formatPattern);
@@ -385,186 +223,151 @@ class ChartUtils {
   }
 
   /**
-   * Create a data series (trace) for use with plotly
-   * @param series The series to create the series data with
-   * @param axisTypeMap The map of axes grouped by type
-   * @param seriesVisibility Visibility setting for the series
-   * @param theme The theme properties for the plot. See ChartTheme.js for an example
-   * @returns The series data (trace) object for use with plotly.
+   * Get the Plotly marker symbol for the provided Deephaven shape
+   * Deephaven shapes: https://deephaven.io/enterprise/docs/plotting/visual-formatting/#point-formatting
+   * Plotly shapes: https://plotly.com/javascript/reference/scattergl/#scattergl-marker-symbol
+   * Table of plotly shapes: https://plotly.com/python/marker-style/#custom-marker-symbols
+   * @param deephavenShape Deephaven shape to get the marker symbol for
    */
-  static makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
-    var showLegend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    var theme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ChartTheme;
-    var {
-      name,
-      isLinesVisible,
-      isShapesVisible,
-      plotStyle,
-      lineColor,
-      shapeColor,
-      sources,
-      shape,
-      shapeSize
-    } = series;
-    var isBusinessTime = sources.some(source => {
-      var _source$axis;
-      return (_source$axis = source.axis) === null || _source$axis === void 0 ? void 0 : _source$axis.businessCalendar;
-    });
-    var type = ChartUtils.getChartType(plotStyle, isBusinessTime);
-    var mode = ChartUtils.getPlotlyChartMode(plotStyle, isLinesVisible !== null && isLinesVisible !== void 0 ? isLinesVisible : undefined, isShapesVisible !== null && isShapesVisible !== void 0 ? isShapesVisible : undefined);
-    var orientation = ChartUtils.getPlotlySeriesOrientation(series);
-    var seriesData = ChartUtils.makeSeriesData(type, mode, name, showLegend, orientation);
-    ChartUtils.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
-    ChartUtils.addStylingToSeriesData(seriesData, plotStyle, theme, lineColor, shapeColor, shape, shapeSize, seriesVisibility);
-    return seriesData;
+  static getMarkerSymbol(deephavenShape) {
+    switch (deephavenShape) {
+      case 'SQUARE':
+        return 'square';
+      case 'CIRCLE':
+        return 'circle';
+      case 'DIAMOND':
+        return 'diamond';
+      case 'UP_TRIANGLE':
+        return 'triangle-up';
+      case 'DOWN_TRIANGLE':
+        return 'triangle-down';
+      case 'RIGHT_TRIANGLE':
+        return 'triangle-right';
+      case 'LEFT_TRIANGLE':
+        return 'triangle-left';
+      // There don't seem to be any plotly equivalents for ellipse or rectangles
+      // Rectangles could be `line-ew`, `line-ns`, or `hourglass` and `bowtie` instead?
+      // Ellipse could be `asterisk` or `diamond-wide` instead?
+      // Just throw an error, we've already got a bunch of types.
+      case 'ELLIPSE':
+      case 'HORIZONTAL_RECTANGLE':
+      case 'VERTICAL_RECTANGLE':
+      default:
+        throw new Error("Unrecognized shape ".concat(deephavenShape));
+    }
   }
-  static addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
-    var seriesData = seriesDataParam;
-    for (var k = 0; k < sources.length; k += 1) {
-      var source = sources[k];
-      var {
-        axis: _axis,
-        type: sourceType
-      } = source;
-      var dataAttributeName = ChartUtils.getPlotlyProperty(plotStyle, sourceType);
-      set(seriesData, dataAttributeName, []);
-      var axisProperty = _axis != null ? ChartUtils.getAxisPropertyName(_axis.type) : null;
-      if (axisProperty != null) {
-        var axes = axisTypeMap.get(_axis.type);
-        if (axes) {
-          var axisIndex = axes.indexOf(_axis);
-          var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-          seriesData["".concat(axisProperty, "axis")] = "".concat(axisProperty).concat(axisIndexString);
+
+  /**
+   * Get all axes for a given `Figure`. Iterates through all charts axes and concatenates them.
+   * @param figure Figure to get all axes for
+   */
+  static getAllAxes(figure) {
+    return figure.charts.reduce((axes, chart) => [...axes, ...chart.axes], []);
+  }
+
+  /**
+   * Retrieve the chart that contains the passed in series from the figure
+   * @param figure The figure to retrieve the chart from
+   * @param series The series to get the chart for
+   */
+  static getChartForSeries(figure, series) {
+    var {
+      charts
+    } = figure;
+    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;
         }
       }
     }
+    return null;
   }
-  static addStylingToSeriesData(seriesDataParam, plotStyle) {
-    var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ChartTheme;
-    var lineColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    var shapeColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-    var shape = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-    var shapeSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-    var seriesVisibility = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 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 = [];
-      if (seriesData.marker.line !== undefined) {
-        Object.assign(seriesData.marker.line, {
-          color: theme.paper_bgcolor,
-          width: 1
-        });
-      }
-    } else if (plotStyle === dh.plot.SeriesPlotStyle.OHLC) {
-      seriesData.increasing = {
-        line: {
-          color: theme.ohlc_increasing
-        }
-      };
-      seriesData.decreasing = {
-        line: {
-          color: theme.ohlc_decreasing
-        }
-      };
-    } else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
-      seriesData.textinfo = 'label+percent';
 
-      // TODO Open DefinitelyTyped/Plotly PR to mark family and size as optional
-      // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/plotly.js/lib/traces/pie.d.ts#L6
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      seriesData.outsidetextfont = {
-        color: theme.title_color
-      };
-    } else if (plotStyle === dh.plot.SeriesPlotStyle.TREEMAP) {
-      seriesData.hoverinfo = 'text';
-      seriesData.textinfo = 'label+text';
-      seriesData.tiling = {
-        packing: 'squarify',
-        pad: 0
-      };
-      seriesData.textposition = 'middle center';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      seriesData.outsidetextfont = {
-        color: theme.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;
-    }
-    if (shape != null && shape.length > 0) {
-      try {
-        seriesData.marker.symbol = ChartUtils.getMarkerSymbol(shape);
-      } catch (e) {
-        log.warn('Unable to handle shape', shape, ':', e);
+  /**
+   * Get an object mapping axis to their ranges
+   * @param layout The plotly layout object to get the ranges from
+   * @returns An object mapping the axis name to it's range
+   */
+  static getLayoutRanges(layout) {
+    var ranges = {};
+    var keys = Object.keys(layout).filter(key => key.indexOf('axis') >= 0);
+    for (var i = 0; i < keys.length; i += 1) {
+      var key = keys[i];
+      var value = layout[key];
+      if (isRangedPlotlyAxis(value)) {
+        // Only want to add the range if it's not autoranged
+        ranges[key] = [...value.range];
       }
     }
-    if (shapeSize != null) {
-      seriesData.marker.size = shapeSize * ChartUtils.DEFAULT_MARKER_SIZE;
-    }
+    return ranges;
+  }
+  static getAxisLayoutProperty(axisProperty, axisIndex) {
+    var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
+    return "".concat(axisProperty !== null && axisProperty !== void 0 ? axisProperty : '', "axis").concat(axisIndexString);
+  }
 
-    // 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;
-    }
+  /**
+   * Converts an open or close period to a declimal. e.g '09:30" to 9.5
+   *
+   * @param period the open or close value of the period
+   */
+  static periodToDecimal(period) {
+    var values = period.split(':');
+    return Number(values[0]) + Number(values[1]) / 60;
   }
 
   /**
-   * Get the Plotly marker symbol for the provided Deephaven shape
-   * Deephaven shapes: https://deephaven.io/enterprise/docs/plotting/visual-formatting/#point-formatting
-   * Plotly shapes: https://plotly.com/javascript/reference/scattergl/#scattergl-marker-symbol
-   * Table of plotly shapes: https://plotly.com/python/marker-style/#custom-marker-symbols
-   * @param deephavenShape Deephaven shape to get the marker symbol for
+   * Groups an array and returns a map
+   * @param array The object to group
+   * @param property The property name to group by
+   * @returns A map containing the items grouped by their values for the property
    */
-  static getMarkerSymbol(deephavenShape) {
-    switch (deephavenShape) {
-      case 'SQUARE':
-        return 'square';
-      case 'CIRCLE':
-        return 'circle';
-      case 'DIAMOND':
-        return 'diamond';
-      case 'UP_TRIANGLE':
-        return 'triangle-up';
-      case 'DOWN_TRIANGLE':
-        return 'triangle-down';
-      case 'RIGHT_TRIANGLE':
-        return 'triangle-right';
-      case 'LEFT_TRIANGLE':
-        return 'triangle-left';
-      // There don't seem to be any plotly equivalents for ellipse or rectangles
-      // Rectangles could be `line-ew`, `line-ns`, or `hourglass` and `bowtie` instead?
-      // Ellipse could be `asterisk` or `diamond-wide` instead?
-      // Just throw an error, we've already got a bunch of types.
-      case 'ELLIPSE':
-      case 'HORIZONTAL_RECTANGLE':
-      case 'VERTICAL_RECTANGLE':
-      default:
-        throw new Error("Unrecognized shape ".concat(deephavenShape));
+  static groupArray(array, property) {
+    return array.reduce((result, item) => {
+      var _result$get;
+      var key = item[property];
+      var group = (_result$get = result.get(key)) !== null && _result$get !== void 0 ? _result$get : [];
+      group.push(item);
+      result.set(key, group);
+      return result;
+    }, new Map());
+  }
+
+  /**
+   * Parses the colorway property of a theme and returns an array of colors
+   * Theme could have a single string with space separated colors or an array of strings representing the colorway
+   * @param theme The theme to get colorway from
+   * @returns Colorway array for the theme
+   */
+  static getColorwayFromTheme() {
+    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ChartTheme;
+    var colorway = [];
+    if (theme.colorway) {
+      if (Array.isArray(theme.colorway)) {
+        colorway = theme.colorway;
+      } else if (typeof theme.colorway === 'string') {
+        colorway = theme.colorway.split(' ');
+      } else {
+        log.warn("Unable to handle colorway property: ".concat(theme.colorway));
+      }
     }
+    return colorway;
+  }
+  static titleFromSettings(settings) {
+    var {
+      series,
+      xAxis,
+      title = "".concat((series !== null && series !== void 0 ? series : []).join(', '), " by ").concat(xAxis)
+    } = settings;
+    return title;
+  }
+  constructor(dh) {
+    _defineProperty(this, "dh", void 0);
+    _defineProperty(this, "days", void 0);
+    this.dh = dh;
+    this.days = Object.freeze(dh.calendar.DayOfWeek.values());
   }
 
   /**
@@ -574,7 +377,11 @@ class ChartUtils {
    * @param formatter The formatter to use when getting the axis format
    * @returns A map of axis layout property names to axis formats
    */
-  static getAxisFormats(figure, formatter) {
+  getAxisFormats(figure, formatter) {
+    var _this = this;
+    var {
+      dh
+    } = this;
     var axisFormats = new Map();
     var nullFormat = {
       tickformat: null,
@@ -586,9 +393,9 @@ class ChartUtils {
       charts
     } = figure;
     for (var i = 0; i < charts.length; i += 1) {
-      var _chart = charts[i];
-      for (var j = 0; j < _chart.series.length; j += 1) {
-        var series = _chart.series[j];
+      var _chart2 = charts[i];
+      for (var j = 0; j < _chart2.series.length; j += 1) {
+        var series = _chart2.series[j];
         var {
           sources
         } = series;
@@ -604,14 +411,14 @@ class ChartUtils {
           var typeAxes = axisTypeMap.get(axisType);
           assertNotNull(typeAxes);
           var axisIndex = typeAxes.indexOf(axis);
-          var axisProperty = ChartUtils.getAxisPropertyName(axisType);
+          var axisProperty = _this.getAxisPropertyName(axisType);
           if (axisProperty != null) {
             var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
             if (axisFormats.has(axisLayoutProperty)) {
               log.debug("".concat(axisLayoutProperty, " already added."));
             } else {
               log.debug("Adding ".concat(axisLayoutProperty, " to axisFormats."));
-              var axisFormat = ChartUtils.getPlotlyAxisFormat(source, formatter);
+              var axisFormat = ChartUtils.getPlotlyAxisFormat(dh, source, formatter);
               if (axisFormat === null) {
                 axisFormats.set(axisLayoutProperty, nullFormat);
               } else {
@@ -634,22 +441,22 @@ class ChartUtils {
                   }
                   var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
                   if (holidays.length > 0) {
-                    rangebreaks.push(...ChartUtils.createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone));
+                    rangebreaks.push(..._this.createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone));
                   }
                   businessPeriods.forEach(period => 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 => rangebreaks.push({
+                  if (businessDays.length < _this.days.length) {
+                    _this.createBoundsFromDays(businessDays).forEach(weekendBounds => rangebreaks.push({
                       pattern: 'day of week',
                       bounds: weekendBounds
                     }));
                   }
                   axisFormat.rangebreaks = rangebreaks;
                 }
-                if (axisFormats.size === _chart.axes.length) {
+                if (axisFormats.size === _chart2.axes.length) {
                   return {
                     v: axisFormats
                   };
@@ -664,16 +471,344 @@ class ChartUtils {
         }
       }
     }
-    return axisFormats;
+    return axisFormats;
+  }
+
+  /**
+   * Converts the Iris plot style into a plotly chart type
+   * @param plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle
+   * @param isBusinessTime If the plot is using business time for an axis
+   */
+  getPlotlyChartType(plotStyle, isBusinessTime) {
+    var {
+      dh
+    } = this;
+    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.TREEMAP:
+        return 'treemap';
+      case dh.plot.SeriesPlotStyle.HISTOGRAM:
+        return 'histogram';
+      case dh.plot.SeriesPlotStyle.OHLC:
+        return 'ohlc';
+      default:
+        return undefined;
+    }
+  }
+
+  /**
+   * Converts the Iris plot style into a plotly chart mode
+   * @param plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
+   * @param areLinesVisible Whether lines are visible or not
+   * @param areShapesVisible Whether shapes are visible or not
+   */
+  getPlotlyChartMode(plotStyle, areLinesVisible, areShapesVisible) {
+    var {
+      dh
+    } = this;
+    var modes = new Set();
+    switch (plotStyle) {
+      case dh.plot.SeriesPlotStyle.SCATTER:
+        // Default to only showing shapes in scatter plots
+        if (areLinesVisible !== null && areLinesVisible !== void 0 ? areLinesVisible : false) {
+          modes.add(ChartUtils.MODE_LINES);
+        }
+        if (areShapesVisible !== null && areShapesVisible !== void 0 ? areShapesVisible : true) {
+          modes.add(ChartUtils.MODE_MARKERS);
+        }
+        break;
+      case dh.plot.SeriesPlotStyle.LINE:
+        // Default to only showing lines in line series
+        if (areLinesVisible !== null && areLinesVisible !== void 0 ? areLinesVisible : true) {
+          modes.add(ChartUtils.MODE_LINES);
+        }
+        if (areShapesVisible !== null && areShapesVisible !== void 0 ? areShapesVisible : false) {
+          modes.add(ChartUtils.MODE_MARKERS);
+        }
+        break;
+      default:
+        break;
+    }
+    return modes.size > 0 ? [...modes].join('+') : undefined;
+  }
+
+  /**
+   * Get the property to set on the series data for plotly
+   * @param plotStyle The plot style of the series
+   * @param sourceType The source type for the series
+   */
+  getPlotlyProperty(plotStyle, sourceType) {
+    var {
+      dh
+    } = this;
+    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;
+      case dh.plot.SeriesPlotStyle.OHLC:
+        switch (sourceType) {
+          case dh.plot.SourceType.TIME:
+            return 'x';
+          default:
+            break;
+        }
+        break;
+      case dh.plot.SeriesPlotStyle.TREEMAP:
+        switch (sourceType) {
+          case dh.plot.SourceType.X:
+            return 'ids';
+          case dh.plot.SourceType.Y:
+            return 'values';
+          case dh.plot.SourceType.LABEL:
+            return 'labels';
+          case dh.plot.SourceType.PARENT:
+            return 'parents';
+          case dh.plot.SourceType.COLOR:
+            return 'marker.colors';
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+    switch (sourceType) {
+      case dh.plot.SourceType.X:
+        return 'x';
+      case dh.plot.SourceType.Y:
+        return 'y';
+      case dh.plot.SourceType.Z:
+        return 'z';
+      case dh.plot.SourceType.X_LOW:
+        return 'xLow';
+      case dh.plot.SourceType.X_HIGH:
+        return 'xHigh';
+      case dh.plot.SourceType.Y_LOW:
+        return 'yLow';
+      case dh.plot.SourceType.Y_HIGH:
+        return 'yHigh';
+      case dh.plot.SourceType.TIME:
+        return 'time';
+      case dh.plot.SourceType.OPEN:
+        return 'open';
+      case dh.plot.SourceType.HIGH:
+        return 'high';
+      case dh.plot.SourceType.LOW:
+        return 'low';
+      case dh.plot.SourceType.CLOSE:
+        return 'close';
+      case dh.plot.SourceType.SHAPE:
+        return 'shape';
+      case dh.plot.SourceType.SIZE:
+        return 'size';
+      case dh.plot.SourceType.LABEL:
+        return 'label';
+      case dh.plot.SourceType.COLOR:
+        return 'color';
+      case dh.plot.SourceType.PARENT:
+        return 'parent';
+      case dh.plot.SourceType.HOVER_TEXT:
+        return 'hovertext';
+      case dh.plot.SourceType.TEXT:
+        return 'text';
+      default:
+        throw new Error("Unrecognized source type: ".concat(sourceType));
+    }
+  }
+  getPlotlySeriesOrientation(series) {
+    var _sources$, _sources$$axis;
+    var {
+      dh
+    } = this;
+    var {
+      sources
+    } = series;
+    if (sources.length === 2 && ((_sources$ = sources[0]) === null || _sources$ === void 0 ? void 0 : (_sources$$axis = _sources$.axis) === null || _sources$$axis === void 0 ? void 0 : _sources$$axis.type) === dh.plot.AxisType.Y) {
+      return ChartUtils.ORIENTATION.HORIZONTAL;
+    }
+    return ChartUtils.ORIENTATION.VERTICAL;
+  }
+
+  /**
+   * Create a data series (trace) for use with plotly
+   * @param series The series to create the series data with
+   * @param axisTypeMap The map of axes grouped by type
+   * @param seriesVisibility Visibility setting for the series
+   * @param theme The theme properties for the plot. See ChartTheme.js for an example
+   * @returns The series data (trace) object for use with plotly.
+   */
+  makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
+    var showLegend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var theme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ChartTheme;
+    var {
+      name,
+      isLinesVisible,
+      isShapesVisible,
+      plotStyle,
+      lineColor,
+      shapeColor,
+      sources,
+      shape,
+      shapeSize
+    } = series;
+    var isBusinessTime = sources.some(source => {
+      var _source$axis;
+      return (_source$axis = source.axis) === null || _source$axis === void 0 ? void 0 : _source$axis.businessCalendar;
+    });
+    var type = this.getChartType(plotStyle, isBusinessTime);
+    var mode = this.getPlotlyChartMode(plotStyle, isLinesVisible !== null && isLinesVisible !== void 0 ? isLinesVisible : undefined, isShapesVisible !== null && isShapesVisible !== void 0 ? isShapesVisible : undefined);
+    var orientation = this.getPlotlySeriesOrientation(series);
+    var seriesData = ChartUtils.makeSeriesData(type, mode, name, showLegend, orientation);
+    this.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
+    this.addStylingToSeriesData(seriesData, plotStyle, theme, lineColor, shapeColor, shape, shapeSize, seriesVisibility);
+    return seriesData;
+  }
+  addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
+    var seriesData = seriesDataParam;
+    for (var k = 0; k < sources.length; k += 1) {
+      var source = sources[k];
+      var {
+        axis: _axis,
+        type: sourceType
+      } = source;
+      var dataAttributeName = this.getPlotlyProperty(plotStyle, sourceType);
+      set(seriesData, dataAttributeName, []);
+      var axisProperty = _axis != null ? this.getAxisPropertyName(_axis.type) : null;
+      if (axisProperty != null) {
+        var axes = axisTypeMap.get(_axis.type);
+        if (axes) {
+          var axisIndex = axes.indexOf(_axis);
+          var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
+          seriesData["".concat(axisProperty, "axis")] = "".concat(axisProperty).concat(axisIndexString);
+        }
+      }
+    }
+  }
+  addStylingToSeriesData(seriesDataParam, plotStyle) {
+    var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ChartTheme;
+    var lineColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var shapeColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    var shape = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+    var shapeSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var seriesVisibility = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
+    var {
+      dh
+    } = this;
+    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 = [];
+      if (seriesData.marker.line !== undefined) {
+        Object.assign(seriesData.marker.line, {
+          color: theme.paper_bgcolor,
+          width: 1
+        });
+      }
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.OHLC) {
+      seriesData.increasing = {
+        line: {
+          color: theme.ohlc_increasing
+        }
+      };
+      seriesData.decreasing = {
+        line: {
+          color: theme.ohlc_decreasing
+        }
+      };
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
+      seriesData.textinfo = 'label+percent';
+
+      // TODO Open DefinitelyTyped/Plotly PR to mark family and size as optional
+      // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/plotly.js/lib/traces/pie.d.ts#L6
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      seriesData.outsidetextfont = {
+        color: theme.title_color
+      };
+    } else if (plotStyle === dh.plot.SeriesPlotStyle.TREEMAP) {
+      seriesData.hoverinfo = 'text';
+      seriesData.textinfo = 'label+text';
+      seriesData.tiling = {
+        packing: 'squarify',
+        pad: 0
+      };
+      seriesData.textposition = 'middle center';
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      seriesData.outsidetextfont = {
+        color: theme.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;
+    }
+    if (shape != null && shape.length > 0) {
+      try {
+        seriesData.marker.symbol = ChartUtils.getMarkerSymbol(shape);
+      } catch (e) {
+        log.warn('Unable to handle shape', shape, ':', e);
+      }
+    }
+    if (shapeSize != null) {
+      seriesData.marker.size = shapeSize * ChartUtils.DEFAULT_MARKER_SIZE;
+    }
+
+    // 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;
+    }
   }
-  static getChartType(plotStyle, isBusinessTime) {
+  getChartType(plotStyle, isBusinessTime) {
+    var {
+      dh
+    } = this;
     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 this.getPlotlyChartType(plotStyle, isBusinessTime);
     }
   }
 
@@ -681,7 +816,10 @@ class ChartUtils {
    * Return the plotly axis property name
    * @param axisType The axis type to get the property name for
    */
-  static getAxisPropertyName(axisType) {
+  getAxisPropertyName(axisType) {
+    var {
+      dh
+    } = this;
     switch (axisType) {
       case dh.plot.AxisType.X:
         return 'x';
@@ -696,7 +834,10 @@ class ChartUtils {
    * Returns the plotly "side" value for the provided axis position
    * @param axisPosition The Iris AxisPosition of the axis
    */
-  static getAxisSide(axisPosition) {
+  getAxisSide(axisPosition) {
+    var {
+      dh
+    } = this;
     switch (axisPosition) {
       case dh.plot.AxisPosition.BOTTOM:
         return 'bottom';
@@ -711,53 +852,6 @@ class ChartUtils {
     }
   }
 
-  /**
-   * Get all axes for a given `Figure`. Iterates through all charts axes and concatenates them.
-   * @param figure Figure to get all axes for
-   */
-  static getAllAxes(figure) {
-    return figure.charts.reduce((axes, chart) => [...axes, ...chart.axes], []);
-  }
-
-  /**
-   * Retrieve the chart that contains the passed in series from the figure
-   * @param figure The figure to retrieve the chart from
-   * @param series The series to get the chart for
-   */
-  static getChartForSeries(figure, series) {
-    var {
-      charts
-    } = figure;
-    for (var i = 0; i < charts.length; i += 1) {
-      var _chart2 = charts[i];
-      for (var j = 0; j < _chart2.series.length; j += 1) {
-        if (series === _chart2.series[j]) {
-          return _chart2;
-        }
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Get an object mapping axis to their ranges
-   * @param layout The plotly layout object to get the ranges from
-   * @returns An object mapping the axis name to it's range
-   */
-  static getLayoutRanges(layout) {
-    var ranges = {};
-    var keys = Object.keys(layout).filter(key => key.indexOf('axis') >= 0);
-    for (var i = 0; i < keys.length; i += 1) {
-      var key = keys[i];
-      var value = layout[key];
-      if (isRangedPlotlyAxis(value)) {
-        // Only want to add the range if it's not autoranged
-        ranges[key] = [...value.range];
-      }
-    }
-    return ranges;
-  }
-
   /**
    * Update the layout with all the axes information for the provided figure
    * @param figure Figure to update the axes for
@@ -767,7 +861,7 @@ class ChartUtils {
    * @param plotHeight Height of the plot in pixels
    * @param theme Theme used for displaying the plot
    */
-  static updateFigureAxes(layoutParam, figure, chartAxisRangeParser) {
+  updateFigureAxes(layoutParam, figure, chartAxisRangeParser) {
     var plotWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     var plotHeight = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
     var theme = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ChartTheme;
@@ -776,13 +870,16 @@ class ChartUtils {
     for (var i = 0; i < figure.charts.length; i += 1) {
       var _chart3 = figure.charts[i];
       var axisRangeParser = chartAxisRangeParser === null || chartAxisRangeParser === void 0 ? void 0 : chartAxisRangeParser(_chart3);
-      var bounds = ChartUtils.getChartBounds(figure, _chart3, plotWidth, plotHeight);
-      ChartUtils.updateLayoutAxes(layout, _chart3.axes, figureAxes, plotWidth, plotHeight, bounds, axisRangeParser, theme);
+      var bounds = this.getChartBounds(figure, _chart3, plotWidth, plotHeight);
+      this.updateLayoutAxes(layout, _chart3.axes, figureAxes, plotWidth, plotHeight, bounds, axisRangeParser, theme);
     }
-    ChartUtils.removeStaleAxes(layout, figureAxes);
+    this.removeStaleAxes(layout, figureAxes);
   }
-  static getChartBounds(figure, chart, plotWidth, plotHeight) {
+  getChartBounds(figure, chart, plotWidth, plotHeight) {
     var _axisPositionMap$get;
+    var {
+      dh
+    } = this;
     var {
       cols,
       rows
@@ -834,7 +931,7 @@ class ChartUtils {
    * @param bounds The bounds for this set of axes
    * @param axisRangeParser A function to retrieve the range parser for a given axis
    */
-  static updateLayoutAxes(layoutParam, chartAxes, figureAxes) {
+  updateLayoutAxes(layoutParam, chartAxes, figureAxes) {
     var plotWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     var plotHeight = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
     var bounds = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
@@ -845,6 +942,9 @@ class ChartUtils {
     };
     var axisRangeParser = arguments.length > 6 ? arguments[6] : undefined;
     var theme = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : ChartTheme;
+    var {
+      dh
+    } = this;
     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;
     var layout = layoutParam;
@@ -854,7 +954,7 @@ class ChartUtils {
     var figureAxisTypeMap = ChartUtils.groupArray(figureAxes, 'type');
     for (var j = 0; j < axisTypes.length; j += 1) {
       var axisType = axisTypes[j];
-      var axisProperty = ChartUtils.getAxisPropertyName(axisType);
+      var axisProperty = this.getAxisPropertyName(axisType);
       if (axisProperty != null) {
         var typeAxes = axisTypeMap.get(axisType);
         var figureTypeAxes = figureAxisTypeMap.get(axisType);
@@ -867,11 +967,11 @@ class ChartUtils {
           var figureAxisIndex = figureTypeAxes.indexOf(_axis2);
           var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, figureAxisIndex);
           if (layout[axisLayoutProperty] == null) {
-            layout[axisLayoutProperty] = ChartUtils.makeLayoutAxis(axisType, theme);
+            layout[axisLayoutProperty] = this.makeLayoutAxis(axisType, theme);
           }
           var layoutAxis = layout[axisLayoutProperty];
           if (layoutAxis != null) {
-            ChartUtils.updateLayoutAxis(layoutAxis, _axis2, chartAxisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
+            this.updateLayoutAxis(layoutAxis, _axis2, chartAxisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
             var {
               range: _range,
               autorange
@@ -895,7 +995,7 @@ class ChartUtils {
    * @param layoutParam Layout object to remove stale axes from
    * @param axes All axes in the figure
    */
-  static removeStaleAxes(layoutParam, axes) {
+  removeStaleAxes(layoutParam, axes) {
     var layout = layoutParam;
     var figureAxisTypeMap = ChartUtils.groupArray(axes, 'type');
     var figureAxisTypes = [...figureAxisTypeMap.keys()];
@@ -905,7 +1005,7 @@ class ChartUtils {
       assertNotNull(typeAxes);
       var axisIndex = typeAxes.length;
       // Delete any axes that may no longer exist
-      var axisProperty = ChartUtils.getAxisPropertyName(axisType);
+      var axisProperty = this.getAxisPropertyName(axisType);
       if (axisProperty != null) {
         var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
         while (layout[axisLayoutProperty] != null) {
@@ -916,10 +1016,6 @@ class ChartUtils {
       }
     }
   }
-  static getAxisLayoutProperty(axisProperty, axisIndex) {
-    var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-    return "".concat(axisProperty !== null && axisProperty !== void 0 ? axisProperty : '', "axis").concat(axisIndexString);
-  }
 
   /**
    * Updates the layout axis object in place
@@ -930,8 +1026,11 @@ class ChartUtils {
    * @param axisSize The size of each axis in percent
    * @param bounds The bounds of the axes domains
    */
-  static updateLayoutAxis(layoutAxisParam, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds) {
+  updateLayoutAxis(layoutAxisParam, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds) {
     var _axis$label;
+    var {
+      dh
+    } = this;
     var isYAxis = axis.type === dh.plot.AxisType.Y;
     var axisSize = isYAxis ? yAxisSize : xAxisSize;
     var layoutAxis = layoutAxisParam;
@@ -948,10 +1047,10 @@ class ChartUtils {
     if (axis.log) {
       layoutAxis.type = 'log';
     }
-    layoutAxis.side = ChartUtils.getAxisSide(axis.position);
+    layoutAxis.side = this.getAxisSide(axis.position);
     if (axisIndex > 0) {
-      var _ChartUtils$getAxisPr, _axisPositionMap$get2;
-      layoutAxis.overlaying = (_ChartUtils$getAxisPr = ChartUtils.getAxisPropertyName(axis.type)) !== null && _ChartUtils$getAxisPr !== void 0 ? _ChartUtils$getAxisPr : undefined;
+      var _this$getAxisProperty, _axisPositionMap$get2;
+      layoutAxis.overlaying = (_this$getAxisProperty = this.getAxisPropertyName(axis.type)) !== null && _this$getAxisProperty !== void 0 ? _this$getAxisProperty : undefined;
       var positionAxes = (_axisPositionMap$get2 = axisPositionMap.get(axis.position)) !== null && _axisPositionMap$get2 !== void 0 ? _axisPositionMap$get2 : [];
       var sideIndex = positionAxes.indexOf(axis);
       if (sideIndex > 0) {
@@ -981,16 +1080,6 @@ class ChartUtils {
     }
   }
 
-  /**
-   * Converts an open or close period to a declimal. e.g '09:30" to 9.5
-   *
-   * @param period the open or close value of the period
-   */
-  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']
@@ -999,14 +1088,14 @@ class ChartUtils {
    *
    * @param 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));
+  createBoundsFromDays(businessDays) {
+    var businessDaysInt = businessDays.map(day => this.days.indexOf(day));
+    var nonBusinessDaysInt = this.days.filter(day => !businessDays.includes(day)).map(day => this.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;
+      for (var i = closed + 1; i < closed + this.days.length; i += 1) {
+        var adjustedDay = i % this.days.length;
         if (businessDaysInt.includes(adjustedDay)) {
           reopenDays.add(adjustedDay);
           break;
@@ -1016,8 +1105,8 @@ class ChartUtils {
     var boundsArray = [];
     // For each reopen day, find the furthest previous closed day
     reopenDays.forEach(open => {
-      for (var i = open - 1; i > open - DAYS.length; i -= 1) {
-        var adjustedDay = i < 0 ? i + DAYS.length : i;
+      for (var i = open - 1; i > open - this.days.length; i -= 1) {
+        var adjustedDay = i < 0 ? i + this.days.length : i;
         if (businessDaysInt.includes(adjustedDay)) {
           var closedDay = (adjustedDay + 1) % 7;
           boundsArray.push([closedDay, open]);
@@ -1035,14 +1124,14 @@ class ChartUtils {
    * @param calendarTimeZone the time zone for the business calendar
    * @param formatterTimeZone the time zone for the formatter
    */
-  static createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone) {
+  createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone) {
     var fullHolidays = [];
     var partialHolidays = [];
     holidays.forEach(holiday => {
       if (holiday.businessPeriods.length > 0) {
-        partialHolidays.push(...ChartUtils.createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone));
+        partialHolidays.push(...this.createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone));
       } else {
-        fullHolidays.push(ChartUtils.createFullHoliday(holiday, calendarTimeZone, formatterTimeZone));
+        fullHolidays.push(this.createFullHoliday(holiday, calendarTimeZone, formatterTimeZone));
       }
     });
     return [{
@@ -1057,8 +1146,8 @@ class ChartUtils {
    * @param calendarTimeZone the time zone for the business calendar
    * @param formatterTimeZone the time zone for the formatter
    */
-  static createFullHoliday(holiday, calendarTimeZone, formatterTimeZone) {
-    return ChartUtils.adjustDateForTimeZone("".concat(holiday.date.toString(), " 00:00:00.000000"), calendarTimeZone, formatterTimeZone);
+  createFullHoliday(holiday, calendarTimeZone, formatterTimeZone) {
+    return this.adjustDateForTimeZone("".concat(holiday.date.toString(), " 00:00:00.000000"), calendarTimeZone, formatterTimeZone);
   }
 
   /**
@@ -1069,7 +1158,7 @@ class ChartUtils {
    * @param calendarTimeZone the time zone for the business calendar
    * @param formatterTimeZone the time zone for the formatter
    */
-  static createPartialHoliday(holiday, calendarTimeZone, formatterTimeZone) {
+  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
@@ -1089,7 +1178,7 @@ class ChartUtils {
       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 values = [this.adjustDateForTimeZone("".concat(dateString, " ").concat(startClose, ":00.000000"), calendarTimeZone, formatterTimeZone)];
         var dvalue = MILLIS_PER_HOUR * (ChartUtils.periodToDecimal(endClose) - ChartUtils.periodToDecimal(startClose));
         rangeBreaks.push({
           values,
@@ -1107,35 +1196,77 @@ class ChartUtils {
    * @param calendarTimeZone the time zone for the business calendar
    * @param formatterTimeZone the time zone for the formatter
    */
-  static adjustDateForTimeZone(dateString, calendarTimeZone, formatterTimeZone) {
+  adjustDateForTimeZone(dateString, calendarTimeZone, formatterTimeZone) {
     if (formatterTimeZone && formatterTimeZone.standardOffset !== calendarTimeZone.standardOffset) {
-      return ChartUtils.unwrapValue(ChartUtils.wrapValue(dateString, BUSINESS_COLUMN_TYPE, calendarTimeZone), formatterTimeZone);
+      return this.unwrapValue(this.wrapValue(dateString, BUSINESS_COLUMN_TYPE, calendarTimeZone), formatterTimeZone);
     }
     return dateString;
   }
 
   /**
-   * Groups an array and returns a map
-   * @param array The object to group
-   * @param property The property name to group by
-   * @returns A map containing the items grouped by their values for the property
+   * 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 settings The chart builder settings
+   * @param settings.title The title for this figure
+   * @param settings.xAxis The name of the column to use for the x-axis
+   * @param settings.series The name of the columns to use for the series of this figure
+   * @param settings.type The plot style for this figure
    */
-  static groupArray(array, property) {
-    return array.reduce((result, item) => {
-      var _result$get;
-      var key = item[property];
-      var group = (_result$get = result.get(key)) !== null && _result$get !== void 0 ? _result$get : [];
-      group.push(item);
-      result.set(key, group);
-      return result;
-    }, new Map());
+  makeFigureSettings(settings, table) {
+    var {
+      dh
+    } = this;
+    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 !== null && series !== void 0 ? series : []).map(name => ({
+          plotStyle: "".concat(type),
+          name,
+          dataSources: [{
+            type: "".concat(dh.plot.SourceType.X),
+            columnName: settingsAxis !== null && settingsAxis !== void 0 ? settingsAxis : '',
+            axis: xAxis,
+            table
+          }, {
+            type: "".concat(dh.plot.SourceType.Y),
+            columnName: name,
+            axis: yAxis,
+            table
+          }]
+        }))
+      }],
+      title
+    };
   }
 
   /**
    * Unwraps a value provided from API to a value plotly can understand
    * Eg. Unwraps DateWrapper, LongWrapper objects.
    */
-  static unwrapValue(value, timeZone) {
+  unwrapValue(value, timeZone) {
+    var {
+      dh
+    } = this;
     if (value != null) {
       if (isDateWrapper(value)) {
         return dh.i18n.DateTimeFormat.format(ChartUtils.DATE_FORMAT, value, timeZone);
@@ -1153,8 +1284,11 @@ class ChartUtils {
    * @param columnType The type of column this value is from
    * @param timeZone The time zone if applicable
    */
-  static wrapValue(value, columnType) {
+  wrapValue(value, columnType) {
     var timeZone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var {
+      dh
+    } = this;
     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
@@ -1177,8 +1311,11 @@ class ChartUtils {
     }
     return value;
   }
-  static makeLayoutAxis(type) {
+  makeLayoutAxis(type) {
     var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ChartTheme;
+    var {
+      dh
+    } = this;
     var axis = {
       automargin: true,
       gridcolor: theme.gridcolor,
@@ -1212,29 +1349,11 @@ class ChartUtils {
     }
     return axis;
   }
-
-  /**
-   * Parses the colorway property of a theme and returns an array of colors
-   * Theme could have a single string with space separated colors or an array of strings representing the colorway
-   * @param theme The theme to get colorway from
-   * @returns Colorway array for the theme
-   */
-  static getColorwayFromTheme() {
-    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ChartTheme;
-    var colorway = [];
-    if (theme.colorway) {
-      if (Array.isArray(theme.colorway)) {
-        colorway = theme.colorway;
-      } else if (typeof theme.colorway === 'string') {
-        colorway = theme.colorway.split(' ');
-      } else {
-        log.warn("Unable to handle colorway property: ".concat(theme.colorway));
-      }
-    }
-    return colorway;
-  }
-  static makeDefaultLayout() {
+  makeDefaultLayout() {
     var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ChartTheme;
+    var {
+      dh
+    } = this;
     var layout = _objectSpread(_objectSpread({}, theme), {}, {
       autosize: true,
       colorway: ChartUtils.getColorwayFromTheme(theme),
@@ -1255,8 +1374,8 @@ class ChartUtils {
         }
       },
       margin: _objectSpread({}, ChartUtils.DEFAULT_MARGIN),
-      xaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.X, theme),
-      yaxis: ChartUtils.makeLayoutAxis(dh.plot.AxisType.Y, theme)
+      xaxis: this.makeLayoutAxis(dh.plot.AxisType.X, theme),
+      yaxis: this.makeLayoutAxis(dh.plot.AxisType.Y, theme)
     });
     layout.datarevision = 0;
     return layout;
@@ -1266,72 +1385,14 @@ class ChartUtils {
    * Hydrate settings from a JSONable object
    * @param settings Dehydrated settings
    */
-  static hydrateSettings(settings) {
+  hydrateSettings(settings) {
+    var {
+      dh
+    } = this;
     return _objectSpread(_objectSpread({}, settings), {}, {
       type: settings.type != null ? dh.plot.SeriesPlotStyle[settings.type] : undefined
     });
   }
-  static titleFromSettings(settings) {
-    var {
-      series,
-      xAxis,
-      title = "".concat((series !== null && series !== void 0 ? 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 settings The chart builder settings
-   * @param settings.title The title for this figure
-   * @param settings.xAxis The name of the column to use for the x-axis
-   * @param settings.series The name of the columns to use for the series of this figure
-   * @param 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 !== null && series !== void 0 ? series : []).map(name => ({
-          plotStyle: "".concat(type),
-          name,
-          dataSources: [{
-            type: "".concat(dh.plot.SourceType.X),
-            columnName: settingsAxis !== null && settingsAxis !== void 0 ? settingsAxis : '',
-            axis: xAxis,
-            table
-          }, {
-            type: "".concat(dh.plot.SourceType.Y),
-            columnName: name,
-            axis: yAxis,
-            table
-          }]
-        }))
-      }],
-      title
-    };
-  }
 }
 _defineProperty(ChartUtils, "DEFAULT_AXIS_SIZE", 0.15);
 _defineProperty(ChartUtils, "MIN_AXIS_SIZE", 0.025);