@deephaven/chart 0.38.1-beta.3 → 0.38.1-beta.5

package/dist/ChartUtils.js

@@ -5,12 +5,10 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import 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 +25,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,20 +44,6 @@ class ChartUtils {
       arrayminus
     };
   }
-  static getPlotlyDateFormat(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;
-    var dataFormatter = formatter === null || formatter === void 0 ? void 0 : formatter.getColumnTypeFormatter(columnType);
-    if (dataFormatter != null && isDateTimeColumnFormatter(dataFormatter) && dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
-      ticksuffix = dh.i18n.DateTimeFormat.format(' z', new Date(), dataFormatter.dhTimeZone);
-    }
-    return {
-      tickformat,
-      ticksuffix,
-      automargin: true
-    };
-  }
   static convertNumberPrefix(prefix) {
     return prefix.replace(/\u00A4\u00A4/g, 'USD').replace(/\u00A4/g, '$');
   }
@@ -260,42 +82,6 @@ class ChartUtils {
     };
   }
 
-  /**
-   * Gets the plotly axis formatting information from the source passed in
-   * @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;
-    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);
-    }
-    if (axis.formatType === dh.plot.AxisFormatType.CATEGORY) {
-      if (axisFormat) {
-        axisFormat.type = 'category';
-      } else {
-        axisFormat = {
-          type: 'category',
-          tickformat: undefined,
-          ticksuffix: undefined
-        };
-      }
-    }
-    return axisFormat;
-  }
-
   /**
    * Adds tick spacing for an axis that has gapBetweenMajorTicks defined.
    *
@@ -354,34 +140,457 @@ class ChartUtils {
     if (settings != null && settings.hiddenSeries != null && settings.hiddenSeries.includes(name)) {
       return 'legendonly';
     }
-    return true;
+    return true;
+  }
+
+  /**
+   * Get hidden labels array from chart settings
+   * @param settings Chart settings
+   * @returns 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 A simple series data object with no styling
+   */
+  static makeSeriesData(type, mode, name, showLegend) {
+    var orientation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ChartUtils.ORIENTATION.VERTICAL;
+    return {
+      type,
+      mode,
+      name,
+      orientation,
+      showlegend: showLegend !== null && showLegend !== void 0 ? showLegend : undefined
+    };
+  }
+
+  /**
+   * 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 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));
+    }
+  }
+
+  /**
+   * 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;
+  }
+
+  /**
+   * 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;
+  }
+  static getAxisLayoutProperty(axisProperty, axisIndex) {
+    var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
+    return "".concat(axisProperty !== null && axisProperty !== void 0 ? axisProperty : '', "axis").concat(axisIndexString);
+  }
+
+  /**
+   * 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;
+  }
+
+  /**
+   * 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 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, "daysOfWeek", void 0);
+    this.dh = dh;
+    this.daysOfWeek = Object.freeze(dh.calendar.DayOfWeek.values());
+  }
+
+  /**
+   * Retrieve the axis formats from the provided figure.
+   * Currently defaults to just the x/y axes.
+   * @param figure The figure to get the axis formats for
+   * @param formatter The formatter to use when getting the axis format
+   * @returns A map of axis layout property names to axis formats
+   */
+  getAxisFormats(figure, formatter) {
+    var _this = this;
+    var axisFormats = new Map();
+    var nullFormat = {
+      tickformat: null,
+      ticksuffix: null
+    };
+    var allAxes = ChartUtils.getAllAxes(figure);
+    var axisTypeMap = ChartUtils.groupArray(allAxes, 'type');
+    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) {
+        var series = _chart2.series[j];
+        var {
+          sources
+        } = series;
+        var axisSources = sources.filter(source => source.axis);
+        var _loop = function _loop() {
+          var source = axisSources[k];
+          var {
+            axis
+          } = source;
+          var {
+            type: axisType
+          } = axis;
+          var typeAxes = axisTypeMap.get(axisType);
+          assertNotNull(typeAxes);
+          var axisIndex = typeAxes.indexOf(axis);
+          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 = _this.getPlotlyAxisFormat(source, formatter);
+              if (axisFormat === null) {
+                axisFormats.set(axisLayoutProperty, nullFormat);
+              } else {
+                axisFormats.set(axisLayoutProperty, axisFormat);
+                var {
+                  businessCalendar
+                } = axis;
+                if (businessCalendar != null) {
+                  var rangebreaks = [];
+                  var {
+                    businessPeriods,
+                    businessDays,
+                    holidays,
+                    timeZone: calendarTimeZone
+                  } = businessCalendar;
+                  var typeFormatter = formatter === null || formatter === void 0 ? void 0 : formatter.getColumnTypeFormatter(BUSINESS_COLUMN_TYPE);
+                  var formatterTimeZone;
+                  if (isDateTimeColumnFormatter(typeFormatter)) {
+                    formatterTimeZone = typeFormatter.dhTimeZone;
+                  }
+                  var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
+                  if (holidays.length > 0) {
+                    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 < _this.daysOfWeek.length) {
+                    _this.createBoundsFromDays(businessDays).forEach(weekendBounds => rangebreaks.push({
+                      pattern: 'day of week',
+                      bounds: weekendBounds
+                    }));
+                  }
+                  axisFormat.rangebreaks = rangebreaks;
+                }
+                if (axisFormats.size === _chart2.axes.length) {
+                  return {
+                    v: axisFormats
+                  };
+                }
+              }
+            }
+          }
+        };
+        for (var k = 0; k < axisSources.length; k += 1) {
+          var _ret = _loop();
+          if (typeof _ret === "object") return _ret.v;
+        }
+      }
+    }
+    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));
+    }
   }
-
-  /**
-   * Get hidden labels array from chart settings
-   * @param settings Chart settings
-   * @returns Array of hidden series names
-   */
-  static getHiddenLabels(settings) {
-    if (settings !== null && settings !== void 0 && settings.hiddenSeries) {
-      return [...settings.hiddenSeries];
+  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 [];
-  }
-
-  /**
-   * Create a default series data object. Apply styling to the object afterward.
-   * @returns A simple series data object with no styling
-   */
-  static makeSeriesData(type, mode, name, showLegend) {
-    var orientation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ChartUtils.ORIENTATION.VERTICAL;
-    return {
-      type,
-      mode,
-      name,
-      orientation,
-      showlegend: showLegend !== null && showLegend !== void 0 ? showLegend : undefined
-    };
+    return ChartUtils.ORIENTATION.VERTICAL;
   }
 
   /**
@@ -392,7 +601,7 @@ class ChartUtils {
    * @param theme The theme properties for the plot. See ChartTheme.js for an example
    * @returns The series data (trace) object for use with plotly.
    */
-  static makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
+  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 {
@@ -410,15 +619,15 @@ class ChartUtils {
       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 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);
-    ChartUtils.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
-    ChartUtils.addStylingToSeriesData(seriesData, plotStyle, theme, lineColor, shapeColor, shape, shapeSize, seriesVisibility);
+    this.addSourcesToSeriesData(seriesData, plotStyle, sources, axisTypeMap);
+    this.addStylingToSeriesData(seriesData, plotStyle, theme, lineColor, shapeColor, shape, shapeSize, seriesVisibility);
     return seriesData;
   }
-  static addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
+  addSourcesToSeriesData(seriesDataParam, plotStyle, sources, axisTypeMap) {
     var seriesData = seriesDataParam;
     for (var k = 0; k < sources.length; k += 1) {
       var source = sources[k];
@@ -426,9 +635,9 @@ class ChartUtils {
         axis: _axis,
         type: sourceType
       } = source;
-      var dataAttributeName = ChartUtils.getPlotlyProperty(plotStyle, sourceType);
+      var dataAttributeName = this.getPlotlyProperty(plotStyle, sourceType);
       set(seriesData, dataAttributeName, []);
-      var axisProperty = _axis != null ? ChartUtils.getAxisPropertyName(_axis.type) : null;
+      var axisProperty = _axis != null ? this.getAxisPropertyName(_axis.type) : null;
       if (axisProperty != null) {
         var axes = axisTypeMap.get(_axis.type);
         if (axes) {
@@ -439,13 +648,16 @@ class ChartUtils {
       }
     }
   }
-  static addStylingToSeriesData(seriesDataParam, plotStyle) {
+  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 = {
@@ -531,231 +743,58 @@ class ChartUtils {
       seriesData.visible = seriesVisibility;
     }
   }
-
-  /**
-   * 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 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));
-    }
-  }
-
-  /**
-   * Retrieve the axis formats from the provided figure.
-   * Currently defaults to just the x/y axes.
-   * @param figure The figure to get the axis formats for
-   * @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) {
-    var axisFormats = new Map();
-    var nullFormat = {
-      tickformat: null,
-      ticksuffix: null
-    };
-    var allAxes = ChartUtils.getAllAxes(figure);
-    var axisTypeMap = ChartUtils.groupArray(allAxes, 'type');
+  getChartType(plotStyle, isBusinessTime) {
     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) {
-        var series = _chart.series[j];
-        var {
-          sources
-        } = series;
-        var axisSources = sources.filter(source => source.axis);
-        var _loop = function _loop() {
-          var source = axisSources[k];
-          var {
-            axis
-          } = source;
-          var {
-            type: axisType
-          } = axis;
-          var typeAxes = axisTypeMap.get(axisType);
-          assertNotNull(typeAxes);
-          var axisIndex = typeAxes.indexOf(axis);
-          var axisProperty = ChartUtils.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);
-              if (axisFormat === null) {
-                axisFormats.set(axisLayoutProperty, nullFormat);
-              } else {
-                axisFormats.set(axisLayoutProperty, axisFormat);
-                var {
-                  businessCalendar
-                } = axis;
-                if (businessCalendar != null) {
-                  var rangebreaks = [];
-                  var {
-                    businessPeriods,
-                    businessDays,
-                    holidays,
-                    timeZone: calendarTimeZone
-                  } = businessCalendar;
-                  var typeFormatter = formatter === null || formatter === void 0 ? void 0 : formatter.getColumnTypeFormatter(BUSINESS_COLUMN_TYPE);
-                  var formatterTimeZone;
-                  if (isDateTimeColumnFormatter(typeFormatter)) {
-                    formatterTimeZone = typeFormatter.dhTimeZone;
-                  }
-                  var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
-                  if (holidays.length > 0) {
-                    rangebreaks.push(...ChartUtils.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({
-                      pattern: 'day of week',
-                      bounds: weekendBounds
-                    }));
-                  }
-                  axisFormat.rangebreaks = rangebreaks;
-                }
-                if (axisFormats.size === _chart.axes.length) {
-                  return {
-                    v: axisFormats
-                  };
-                }
-              }
-            }
-          }
-        };
-        for (var k = 0; k < axisSources.length; k += 1) {
-          var _ret = _loop();
-          if (typeof _ret === "object") return _ret.v;
-        }
-      }
-    }
-    return axisFormats;
-  }
-  static getChartType(plotStyle, isBusinessTime) {
+      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 the plotly axis property name
-   * @param 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 axisPosition The Iris AxisPosition of the axis
-   */
-  static getAxisSide(axisPosition) {
-    switch (axisPosition) {
-      case dh.plot.AxisPosition.BOTTOM:
-        return 'bottom';
-      case dh.plot.AxisPosition.TOP:
-        return 'top';
-      case dh.plot.AxisPosition.LEFT:
-        return 'left';
-      case dh.plot.AxisPosition.RIGHT:
-        return 'right';
-      default:
-        return undefined;
+        return this.getPlotlyChartType(plotStyle, isBusinessTime);
     }
   }
-
-  /**
-   * 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 the plotly axis property name
+   * @param axisType The axis type to get the property name for
+   */
+  getAxisPropertyName(axisType) {
+    var {
+      dh
+    } = this;
+    switch (axisType) {
+      case dh.plot.AxisType.X:
+        return 'x';
+      case dh.plot.AxisType.Y:
+        return 'y';
+      default:
+        return null;
     }
-    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
+   * Returns the plotly "side" value for the provided axis position
+   * @param axisPosition The Iris AxisPosition of the axis
    */
-  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];
-      }
+  getAxisSide(axisPosition) {
+    var {
+      dh
+    } = this;
+    switch (axisPosition) {
+      case dh.plot.AxisPosition.BOTTOM:
+        return 'bottom';
+      case dh.plot.AxisPosition.TOP:
+        return 'top';
+      case dh.plot.AxisPosition.LEFT:
+        return 'left';
+      case dh.plot.AxisPosition.RIGHT:
+        return 'right';
+      default:
+        return undefined;
     }
-    return ranges;
   }
 
   /**
@@ -767,7 +806,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 +815,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
@@ -820,6 +862,62 @@ class ChartUtils {
     }
     return bounds;
   }
+  getPlotlyDateFormat(formatter, columnType, formatPattern) {
+    var {
+      dh
+    } = this;
+    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;
+    var dataFormatter = formatter === null || formatter === void 0 ? void 0 : formatter.getColumnTypeFormatter(columnType);
+    if (dataFormatter != null && isDateTimeColumnFormatter(dataFormatter) && dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
+      ticksuffix = dh.i18n.DateTimeFormat.format(' z', new Date(), dataFormatter.dhTimeZone);
+    }
+    return {
+      tickformat,
+      ticksuffix,
+      automargin: true
+    };
+  }
+
+  /**
+   * Gets the plotly axis formatting information from the source passed in
+   * @param source The Source to get the formatter information from
+   * @param formatter The current formatter for formatting data
+   */
+  getPlotlyAxisFormat(source) {
+    var formatter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var {
+      dh
+    } = this;
+    var {
+      axis,
+      columnType
+    } = source;
+    var {
+      formatPattern
+    } = axis;
+    var axisFormat = null;
+    if (TableUtils.isDateType(columnType)) {
+      axisFormat = this.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: undefined,
+          ticksuffix: undefined
+        };
+      }
+    }
+    return axisFormat;
+  }
 
   /**
    * Updates the axes positions and sizes in the layout object provided.
@@ -834,7 +932,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 +943,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 +955,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 +968,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 +996,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 +1006,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 +1017,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 +1027,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 +1048,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 +1081,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 +1089,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.daysOfWeek.indexOf(day));
+    var nonBusinessDaysInt = this.daysOfWeek.filter(day => !businessDays.includes(day)).map(day => this.daysOfWeek.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.daysOfWeek.length; i += 1) {
+        var adjustedDay = i % this.daysOfWeek.length;
         if (businessDaysInt.includes(adjustedDay)) {
           reopenDays.add(adjustedDay);
           break;
@@ -1016,8 +1106,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.daysOfWeek.length; i -= 1) {
+        var adjustedDay = i < 0 ? i + this.daysOfWeek.length : i;
         if (businessDaysInt.includes(adjustedDay)) {
           var closedDay = (adjustedDay + 1) % 7;
           boundsArray.push([closedDay, open]);
@@ -1035,14 +1125,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 +1147,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 +1159,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 +1179,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 +1197,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 +1285,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 +1312,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 +1350,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 +1375,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 +1386,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);