@deephaven/chart 0.15.5-vite.12 → 0.15.6-beta.3

package/dist/ChartUtils.js

@@ -8,17 +8,35 @@ 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;
 
+function isDateWrapper(value) {
+  return value.asDate !== undefined;
+}
+
+function isLongWrapper(value) {
+  return value.asNumber !== undefined;
+}
+
+function isDateTimeColumnFormatter(value) {
+  return value.dhTimeZone !== undefined;
+}
+
+function isRangedPlotlyAxis(value) {
+  return value != null && value.range && !value.autorange;
+}
+
 class ChartUtils {
   /**
    * Converts the Iris plot style into a plotly chart type
-   * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle
-   * @param {boolean} isBusinessTime If the plot is using business time for an axis
+   * @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) {
@@ -49,12 +67,12 @@ class ChartUtils {
         return 'ohlc';
 
       default:
-        return null;
+        return undefined;
     }
   }
   /**
    * Converts the Iris plot style into a plotly chart mode
-   * @param {String} plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
+   * @param plotStyle The plotStyle to use, see dh.plot.SeriesPlotStyle.*
    */
 
 
@@ -67,13 +85,13 @@ class ChartUtils {
         return 'lines';
 
       default:
-        return null;
+        return undefined;
     }
   }
   /**
    * Get the property to set on the series data for plotly
-   * @param {dh.plot.SeriesPlotStyle} plotStyle The plot style of the series
-   * @param {dh.plot.SourceType} sourceType The source type for the series
+   * @param plotStyle The plot style of the series
+   * @param sourceType The source type for the series
    */
 
 
@@ -210,11 +228,11 @@ class ChartUtils {
   /**
    * Generate the plotly error bar data from the passed in data.
    * Iris passes in the values as absolute, plotly needs them as relative.
-   * @param {Array[Number]} x The main data array
-   * @param {Array[Number]} xLow The absolute low values
-   * @param {Array[Number]} xHigh
+   * @param x The main data array
+   * @param xLow The absolute low values
+   * @param xHigh
    *
-   * @returns {Object} The error_x object required by plotly, or null if none is required
+   * @returns The error_x object required by plotly, or null if none is required
    */
 
 
@@ -230,12 +248,12 @@ class ChartUtils {
   }
 
   static getPlotlyDateFormat(formatter, columnType, formatPattern) {
-    var tickformat = formatPattern == null ? null : formatPattern.replace('%', '%%').replace(/S{9}/g, '%9f').replace(/S{8}/g, '%8f').replace(/S{7}/g, '%7f').replace(/S{6}/g, '%6f').replace(/S{5}/g, '%5f').replace(/S{4}/g, '%4f').replace(/S{3}/g, '%3f').replace(/S{2}/g, '%2f').replace(/S{1}/g, '%1f').replace(/y{4}/g, '%Y').replace(/y{2}/g, '%y').replace(/M{4}/g, '%B').replace(/M{3}/g, '%b').replace(/M{2}/g, '%m').replace(/M{1}/g, '%-m').replace(/E{4,}/g, '%A').replace(/E{1,}/g, '%a').replace(/d{2}/g, '%d').replace(/([^%]|^)d{1}/g, '$1%-d').replace(/H{2}/g, '%H').replace(/h{2}/g, '%I').replace(/h{1}/g, '%-I').replace(/m{2}/g, '%M').replace(/s{2}/g, '%S').replace("'T'", 'T').replace(' z', ''); // timezone added as suffix if necessary
+    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 = null;
-    var dataFormatter = formatter.getColumnTypeFormatter(columnType);
+    var ticksuffix;
+    var dataFormatter = formatter === null || formatter === void 0 ? void 0 : formatter.getColumnTypeFormatter(columnType);
 
-    if (dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
+    if (dataFormatter != null && isDateTimeColumnFormatter(dataFormatter) && dataFormatter.dhTimeZone != null && dataFormatter.showTimeZone) {
       ticksuffix = dh.i18n.DateTimeFormat.format(' z', new Date(), dataFormatter.dhTimeZone);
     }
 
@@ -260,7 +278,9 @@ class ChartUtils {
 
 
     var subpatterns = formatPattern.split(';');
-    var [, prefix, placeholderDigits, zeroDigits,, decimalDigits, optionalDecimalDigits, numberType, percentSign, suffix] = subpatterns[0].match(/^([^#,0.]*)([#,]*)([0,]*)(\.?)(0*)(#*)(E?0*)(%?)(.*)/);
+    var matchArray = subpatterns[0].match(/^([^#,0.]*)([#,]*)([0,]*)(\.?)(0*)(#*)(E?0*)(%?)(.*)/);
+    assertNotNull(matchArray);
+    var [, prefix, placeholderDigits, zeroDigits,, decimalDigits, optionalDecimalDigits, numberType, percentSign, suffix] = matchArray;
     var paddingLength = zeroDigits.replace(',', '').length;
     var isCommaSeparated = placeholderDigits.indexOf(',') >= 0 || zeroDigits.indexOf(',') >= 0;
     var comma = isCommaSeparated ? ',' : '';
@@ -284,8 +304,8 @@ class ChartUtils {
   }
   /**
    * Gets the plotly axis formatting information from the source passed in
-   * @param {dh.plot.Source} source The Source to get the formatter information from
-   * @param {Formatter} formatter The current formatter for formatting data
+   * @param source The Source to get the formatter information from
+   * @param formatter The current formatter for formatting data
    */
 
 
@@ -314,8 +334,8 @@ class ChartUtils {
       } else {
         axisFormat = {
           type: 'category',
-          tickformat: null,
-          ticksuffix: null
+          tickformat: undefined,
+          ticksuffix: undefined
         };
       }
     }
@@ -325,9 +345,9 @@ class ChartUtils {
   /**
    * Adds tick spacing for an axis that has gapBetweenMajorTicks defined.
    *
-   * @param {object} axisFormat the current axis format, may be null
-   * @param {object} axis the current axis
-   * @param {boolean} isDateType indicates if the columns is a date type
+   * @param axisFormat the current axis format, may be null
+   * @param axis the current axis
+   * @param isDateType indicates if the columns is a date type
    */
 
 
@@ -359,9 +379,9 @@ class ChartUtils {
   }
   /**
    * Retrieve the data source for a given axis in a chart
-   * @param {dh.plot.Chart} chart The chart to get the source for
-   * @param {dh.plot.Axis} axis The axis to find the source for
-   * @returns {dh.plot.Source} The first source matching this axis
+   * @param chart The chart to get the source for
+   * @param axis The axis to find the source for
+   * @returns The first source matching this axis
    */
 
 
@@ -382,9 +402,9 @@ class ChartUtils {
   }
   /**
    * Get visibility setting for the series object
-   * @param {string} name The series name to get the visibility for
-   * @param {object} settings Chart settings
-   * @returns {boolean|string} True for visible series and 'legendonly' for hidden
+   * @param  name The series name to get the visibility for
+   * @param  settings Chart settings
+   * @returns True for visible series and 'legendonly' for hidden
    */
 
 
@@ -399,8 +419,8 @@ class ChartUtils {
   }
   /**
    * Get hidden labels array from chart settings
-   * @param {object} settings Chart settings
-   * @returns {string[]} Array of hidden series names
+   * @param settings Chart settings
+   * @returns Array of hidden series names
    */
 
 
@@ -413,7 +433,7 @@ class ChartUtils {
   }
   /**
    * Create a default series data object. Apply styling to the object afterward.
-   * @returns {Object} A simple series data object with no styling
+   * @returns A simple series data object with no styling
    */
 
 
@@ -428,15 +448,16 @@ class ChartUtils {
   }
   /**
    * Create a data series (trace) for use with plotly
-   * @param {dh.plot.Series} series The series to create the series data with
-   * @param {Map<dh.plot.AxisType, dh.plot.Axis[]>} axisTypeMap The map of axes grouped by type
-   * @param {boolean|string} seriesVisibility Visibility setting for the series
-   * @param {Object} theme The theme properties for the plot. See ChartTheme.js for an example
-   * @returns {Object} The series data (trace) object 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.
    */
 
 
-  static makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility, theme) {
+  static makeSeriesDataFromSeries(series, axisTypeMap, seriesVisibility) {
+    var theme = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ChartTheme;
     var {
       name,
       plotStyle,
@@ -464,24 +485,27 @@ class ChartUtils {
     for (var k = 0; k < sources.length; k += 1) {
       var source = sources[k];
       var {
-        axis,
+        axis: _axis,
         type: sourceType
       } = source;
       var dataAttributeName = ChartUtils.getPlotlyProperty(plotStyle, sourceType);
       set(seriesData, dataAttributeName, []);
-      var axisProperty = axis ? ChartUtils.getAxisPropertyName(axis.type) : null;
+      var axisProperty = _axis ? ChartUtils.getAxisPropertyName(_axis.type) : null;
 
       if (axisProperty != null) {
-        var axes = axisTypeMap.get(axis.type);
-        var axisIndex = axes.indexOf(axis);
-        var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-        seriesData["".concat(axisProperty, "axis")] = "".concat(axisProperty).concat(axisIndexString);
+        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);
+        }
       }
     }
   }
 
   static addStylingToSeriesData(seriesDataParam, plotStyle) {
-    var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    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 seriesVisibility = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
@@ -522,7 +546,10 @@ class ChartUtils {
         }
       };
     } else if (plotStyle === dh.plot.SeriesPlotStyle.PIE) {
-      seriesData.textinfo = 'label+percent';
+      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
       };
@@ -533,7 +560,11 @@ class ChartUtils {
         packing: 'squarify',
         pad: 0
       };
-      seriesData.textposition = 'middle center';
+      seriesData.textposition = 'middle center'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      seriesData.outsidetextfont = {
+        color: theme.title_color
+      };
     }
 
     if (lineColor != null) {
@@ -557,9 +588,9 @@ class ChartUtils {
   /**
    * Retrieve the axis formats from the provided figure.
    * Currently defaults to just the x/y axes.
-   * @param {dh.plot.Figure} figure The figure to get the axis formats for
-   * @param {Formatter} formatter The formatter to use when getting the axis format
-   * @returns {Map<string, object>} A map of axis layout property names to axis formats
+   * @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
    */
 
 
@@ -587,20 +618,22 @@ class ChartUtils {
         for (var k = 0; k < axisSources.length; k += 1) {
           var source = axisSources[k];
           var {
-            axis
+            axis: _axis2
           } = source;
           var {
             type: axisType
-          } = axis;
+          } = _axis2;
           var typeAxes = axisTypeMap.get(axisType);
-          var axisIndex = typeAxes.indexOf(axis);
+          assertNotNull(typeAxes);
+          var axisIndex = typeAxes.indexOf(_axis2);
           var axisProperty = ChartUtils.getAxisPropertyName(axisType);
-          var axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
 
-          if (axisFormats.has(axisLayoutProperty)) {
-            log.debug("".concat(axisLayoutProperty, " already added."));
-          } else {
-            var _ret = function () {
+          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);
 
@@ -610,47 +643,51 @@ class ChartUtils {
                 axisFormats.set(axisLayoutProperty, axisFormat);
                 var {
                   businessCalendar
-                } = axis;
+                } = _axis2;
 
                 if (businessCalendar) {
-                  var _formatter$getColumnT;
-
-                  axisFormat.rangebreaks = [];
-                  var {
-                    businessPeriods,
-                    businessDays,
-                    holidays,
-                    timeZone: calendarTimeZone
-                  } = businessCalendar;
-                  var formatterTimeZone = formatter === null || formatter === void 0 ? void 0 : (_formatter$getColumnT = formatter.getColumnTypeFormatter(BUSINESS_COLUMN_TYPE)) === null || _formatter$getColumnT === void 0 ? void 0 : _formatter$getColumnT.dhTimeZone;
-                  var timeZoneDiff = formatterTimeZone ? (calendarTimeZone.standardOffset - formatterTimeZone.standardOffset) / 60 : 0;
-
-                  if (holidays.length > 0) {
-                    axisFormat.rangebreaks.push(...ChartUtils.createRangeBreakValuesFromHolidays(holidays, calendarTimeZone, formatterTimeZone));
-                  }
-
-                  businessPeriods.forEach(period => axisFormat.rangebreaks.push({
-                    pattern: 'hour',
-                    bounds: [ChartUtils.periodToDecimal(period.close) + timeZoneDiff, ChartUtils.periodToDecimal(period.open) + timeZoneDiff]
-                  })); // If there are seven business days, then there is no weekend
-
-                  if (businessDays.length < DAYS.length) {
-                    ChartUtils.createBoundsFromDays(businessDays).forEach(weekendBounds => axisFormat.rangebreaks.push({
-                      pattern: 'day of week',
-                      bounds: weekendBounds
-                    }));
-                  }
+                  (function () {
+                    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 = void 0;
+
+                    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
-                  };
+                  return axisFormats;
                 }
               }
-            }();
-
-            if (typeof _ret === "object") return _ret.v;
+            }
           }
         }
       }
@@ -672,7 +709,7 @@ class ChartUtils {
   }
   /**
    * Return the plotly axis property name
-   * @param {dh.plot.AxisType} axisType The axis type to get the property name for
+   * @param axisType The axis type to get the property name for
    */
 
 
@@ -690,7 +727,7 @@ class ChartUtils {
   }
   /**
    * Returns the plotly "side" value for the provided axis position
-   * @param {dh.plot.AxisPosition} axisPosition The Iris AxisPosition of the axis
+   * @param axisPosition The Iris AxisPosition of the axis
    */
 
 
@@ -709,13 +746,13 @@ class ChartUtils {
         return 'right';
 
       default:
-        return null;
+        return undefined;
     }
   }
   /**
    * Retrieve the chart that contains the passed in series from the figure
-   * @param {dh.plot.Figure} figure The figure to retrieve the chart from
-   * @param {dh.plot.Series} series The series to get the chart for
+   * @param figure The figure to retrieve the chart from
+   * @param series The series to get the chart for
    */
 
 
@@ -738,8 +775,8 @@ class ChartUtils {
   }
   /**
    * Get an object mapping axis to their ranges
-   * @param {object} layout The plotly layout object to get the ranges from
-   * @returns {object} An object mapping the axis name to it's range
+   * @param layout The plotly layout object to get the ranges from
+   * @returns An object mapping the axis name to it's range
    */
 
 
@@ -749,10 +786,11 @@ class ChartUtils {
 
     for (var i = 0; i < keys.length; i += 1) {
       var key = keys[i];
+      var value = layout[key];
 
-      if (layout[key] && layout[key].range && !layout[key].autorange) {
+      if (isRangedPlotlyAxis(value)) {
         // Only want to add the range if it's not autoranged
-        ranges[key] = [...layout[key].range];
+        ranges[key] = [...value.range];
       }
     }
 
@@ -763,11 +801,11 @@ class ChartUtils {
    * If the axis did not exist in the layout previously, it is created and added.
    * Any axis that no longer exists in axes is removed.
    * With Downsampling enabled, will also update the range on the axis itself as appropriate
-   * @param {object} layoutParam The layout object to update
-   * @param {dh.plot.Axis[]} axes The axes to update the layout with
-   * @param {number} plotWidth The width of the plot to calculate the axis sizes for
-   * @param {number} plotHeight The height of the plot to calculate the axis sizes for
-   * @param {func} getRangeParser A function to retrieve the range parser for a given axis
+   * @param layoutParam The layout object to update
+   * @param axes The axes to update the layout with
+   * @param plotWidth The width of the plot to calculate the axis sizes for
+   * @param plotHeight The height of the plot to calculate the axis sizes for
+   * @param getRangeParser A function to retrieve the range parser for a given axis
    */
 
 
@@ -775,7 +813,7 @@ class ChartUtils {
     var plotWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     var plotHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     var getRangeParser = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
-    var theme = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+    var theme = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ChartTheme;
     var xAxisSize = plotWidth > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotHeight, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE;
     var yAxisSize = plotHeight > 0 ? Math.max(ChartUtils.MIN_AXIS_SIZE, Math.min(ChartUtils.AXIS_SIZE_PX / plotWidth, ChartUtils.MAX_AXIS_SIZE)) : ChartUtils.DEFAULT_AXIS_SIZE; // Adjust the bounds based on where the legend is
     // For now, always assume the legend is shown on the right
@@ -809,10 +847,11 @@ class ChartUtils {
         var typeAxes = axisTypeMap.get(axisType);
         var isYAxis = axisType === dh.plot.AxisType.Y;
         var plotSize = isYAxis ? plotHeight : plotWidth;
+        assertNotNull(typeAxes);
         var axisIndex = 0;
 
         for (axisIndex = 0; axisIndex < typeAxes.length; axisIndex += 1) {
-          var axis = typeAxes[axisIndex];
+          var _axis3 = typeAxes[axisIndex];
 
           var _axisLayoutProperty = ChartUtils.getAxisLayoutProperty(axisProperty, axisIndex);
 
@@ -821,19 +860,23 @@ class ChartUtils {
           }
 
           var layoutAxis = layout[_axisLayoutProperty];
-          ChartUtils.updateLayoutAxis(layoutAxis, axis, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
-          var {
-            range,
-            autorange
-          } = layoutAxis;
-
-          if (getRangeParser && range && !autorange) {
-            var rangeParser = getRangeParser(axis);
-            var [rangeStart, rangeEnd] = rangeParser(range);
-            log.debug('Setting downsample range', plotSize, rangeStart, rangeEnd);
-            axis.range(plotSize, rangeStart, rangeEnd);
-          } else {
-            axis.range(plotSize);
+
+          if (layoutAxis != null) {
+            ChartUtils.updateLayoutAxis(layoutAxis, _axis3, axisIndex, axisPositionMap, xAxisSize, yAxisSize, bounds);
+            var {
+              range: _range,
+              autorange
+            } = layoutAxis;
+
+            if (getRangeParser && _range && !autorange) {
+              var rangeParser = getRangeParser(_axis3);
+              var [rangeStart, rangeEnd] = rangeParser(_range);
+              log.debug('Setting downsample range', plotSize, rangeStart, rangeEnd);
+
+              _axis3.range(plotSize, rangeStart, rangeEnd);
+            } else {
+              _axis3.range(plotSize);
+            }
           }
         }
 
@@ -850,16 +893,16 @@ class ChartUtils {
 
   static getAxisLayoutProperty(axisProperty, axisIndex) {
     var axisIndexString = axisIndex > 0 ? "".concat(axisIndex + 1) : '';
-    return "".concat(axisProperty, "axis").concat(axisIndexString);
+    return "".concat(axisProperty !== null && axisProperty !== void 0 ? axisProperty : '', "axis").concat(axisIndexString);
   }
   /**
    * Updates the layout axis object in place
-   * @param {object} layoutAxisParam The plotly layout axis param
-   * @param {dh.plot.Axis} axis The Iris Axis to update the plotly layout with
-   * @param {number} axisIndex The type index for this axis
-   * @param {Map<dh.plot.AxisPosition, dh.plot.Axis>} axisPositionMap All the axes mapped by position
-   * @param {number} axisSize The size of each axis in percent
-   * @param {object} bounds The bounds of the axes domains
+   * @param layoutAxisParam The plotly layout axis param
+   * @param axis The Iris Axis to update the plotly layout with
+   * @param axisIndex The type index for this axis
+   * @param axisPositionMap All the axes mapped by position
+   * @param axisSize The size of each axis in percent
+   * @param bounds The bounds of the axes domains
    */
 
 
@@ -867,7 +910,14 @@ class ChartUtils {
     var isYAxis = axis.type === dh.plot.AxisType.Y;
     var axisSize = isYAxis ? yAxisSize : xAxisSize;
     var layoutAxis = layoutAxisParam;
-    layoutAxis.title.text = axis.label;
+
+    if (layoutAxis.title !== undefined && typeof layoutAxis.title !== 'string') {
+      layoutAxis.title.text = axis.label;
+    } else {
+      layoutAxis.title = {
+        text: axis.label
+      };
+    }
 
     if (axis.log) {
       layoutAxis.type = 'log';
@@ -876,8 +926,10 @@ class ChartUtils {
     layoutAxis.side = ChartUtils.getAxisSide(axis.position);
 
     if (axisIndex > 0) {
-      layoutAxis.overlaying = ChartUtils.getAxisPropertyName(axis.type);
-      var positionAxes = axisPositionMap.get(axis.position);
+      var _ChartUtils$getAxisPr, _axisPositionMap$get;
+
+      layoutAxis.overlaying = (_ChartUtils$getAxisPr = ChartUtils.getAxisPropertyName(axis.type)) !== null && _ChartUtils$getAxisPr !== void 0 ? _ChartUtils$getAxisPr : undefined;
+      var positionAxes = (_axisPositionMap$get = axisPositionMap.get(axis.position)) !== null && _axisPositionMap$get !== void 0 ? _axisPositionMap$get : [];
       var sideIndex = positionAxes.indexOf(axis);
 
       if (sideIndex > 0) {
@@ -910,13 +962,13 @@ class ChartUtils {
   /**
    * Converts an open or close period to a declimal. e.g '09:30" to 9.5
    *
-   * @param {String} period the open or close value of the period
+   * @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);
+    return Number(values[0]) + Number(values[1]) / 60;
   }
   /**
    * Creates range break bounds for plotly from business days.
@@ -924,7 +976,7 @@ class ChartUtils {
    * will result in [[6,1]] meaning close on Saturday and open on Monday.
    * If you remove Wednesday from the array, then you get two closures [[6, 1], [3, 4]]
    *
-   * @param {Array} businessDays the days to display on the x-axis
+   * @param businessDays the days to display on the x-axis
    */
 
 
@@ -961,9 +1013,9 @@ class ChartUtils {
   /**
    * Creates an array of range breaks for all holidays.
    *
-   * @param {Array} holidays an array of holidays
-   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   * @param holidays an array of holidays
+   * @param calendarTimeZone the time zone for the business calendar
+   * @param formatterTimeZone the time zone for the formatter
    */
 
 
@@ -984,9 +1036,9 @@ class ChartUtils {
   /**
    * Creates the range break value for a full holiday. A full holiday is day that has no business periods.
    *
-   * @param {Holiday} holiday the full holiday
-   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   * @param holiday the full holiday
+   * @param calendarTimeZone the time zone for the business calendar
+   * @param formatterTimeZone the time zone for the formatter
    */
 
 
@@ -997,9 +1049,9 @@ class ChartUtils {
    * Creates the range break for a partial holiday. A partial holiday is holiday with business periods
    * that are different than the default business periods.
    *
-   * @param {Holiday} holiday the partial holiday
-   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   * @param holiday the partial holiday
+   * @param calendarTimeZone the time zone for the business calendar
+   * @param formatterTimeZone the time zone for the formatter
    */
 
 
@@ -1038,9 +1090,9 @@ class ChartUtils {
   /**
    * Adjusts a date string from the calendar time zone to the formatter time zone.
    *
-   * @param {string} dateString the date string
-   * @param {TimeZone} calendarTimeZone the time zone for the business calendar
-   * @param {TimeZone} formatterTimeZone the time zone for the formatter
+   * @param dateString the date string
+   * @param calendarTimeZone the time zone for the business calendar
+   * @param formatterTimeZone the time zone for the formatter
    */
 
 
@@ -1053,9 +1105,9 @@ class ChartUtils {
   }
   /**
    * Groups an array and returns a map
-   * @param {object[]} array The object to group
-   * @param {string} property The property name to group by
-   * @returns {Map<object, object>} A map containing the items grouped by their values for the property
+   * @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
    */
 
 
@@ -1068,27 +1120,19 @@ class ChartUtils {
       return result;
     }, new Map());
   }
-  /**
-   * Update
-   */
-
-
-  static updateRanges() {}
   /**
    * Unwraps a value provided from API to a value plotly can understand
    * Eg. Unwraps DateWrapper, LongWrapper objects.
    */
 
 
-  static unwrapValue(value) {
-    var timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
+  static unwrapValue(value, timeZone) {
     if (value != null) {
-      if (value.asDate) {
+      if (isDateWrapper(value)) {
         return dh.i18n.DateTimeFormat.format(ChartUtils.DATE_FORMAT, value, timeZone);
       }
 
-      if (value.asNumber) {
+      if (isLongWrapper(value)) {
         return value.asNumber();
       }
     }
@@ -1097,9 +1141,9 @@ class ChartUtils {
   }
   /**
    *
-   * @param {any} value The value to wrap up
-   * @param {string} columnType The type of column this value is from
-   * @param {dh.i18n.TimeZone} timeZone The time zone if applicable
+   * @param value The value to wrap up
+   * @param columnType The type of column this value is from
+   * @param timeZone The time zone if applicable
    */
 
 
@@ -1132,7 +1176,7 @@ class ChartUtils {
   }
 
   static makeLayoutAxis(type) {
-    var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ChartTheme;
     var axis = {
       automargin: true,
       gridcolor: theme.gridcolor,
@@ -1171,12 +1215,13 @@ class ChartUtils {
   /**
    * 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 {ChartTheme} theme The theme to get colorway from
-   * @returns {string[]} Colorway array for the theme
+   * @param theme The theme to get colorway from
+   * @returns Colorway array for the theme
    */
 
 
-  static getColorwayFromTheme(theme) {
+  static getColorwayFromTheme() {
+    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ChartTheme;
     var colorway = [];
 
     if (theme.colorway) {
@@ -1193,7 +1238,7 @@ class ChartUtils {
   }
 
   static makeDefaultLayout() {
-    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ChartTheme;
 
     var layout = _objectSpread(_objectSpread({}, theme), {}, {
       autosize: true,
@@ -1224,7 +1269,7 @@ class ChartUtils {
   }
   /**
    * Hydrate settings from a JSONable object
-   * @param {object} settings Dehydrated settings
+   * @param settings Dehydrated settings
    */
 
 
@@ -1248,11 +1293,11 @@ class ChartUtils {
    * This logic will still need to exist to translate existing charts, but could be part of a migration script
    * to translate the data.
    * Change when we decide to add more functionality to the Chart Builder.
-   * @param {object} settings The chart builder settings
-   * @param {string} settings.title The title for this figure
-   * @param {string} settings.xAxis The name of the column to use for the x-axis
-   * @param {string[]} settings.series The name of the columns to use for the series of this figure
-   * @param {dh.plot.SeriesPlotStyle} settings.type The plot style for this figure
+   * @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
    */