@splunk/visualizations 25.13.1 → 26.1.0

package/Punchcard.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 441);
+/******/ 	return __webpack_require__(__webpack_require__.s = 444);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -120,7 +120,7 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 112:
+/***/ 113:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/find");
@@ -143,40 +143,46 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
     style: {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }
   };
 }).withConfig({
   displayName: "FixedSizeContainer__Item",
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
   var width = _ref2.width,
-    height = _ref2.height;
+      height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }), height && {
-      height: style_1.toPx(height)
+      height: (0, style_1.toPx)(height)
     })
   };
 }).withConfig({
   displayName: "FixedSizeContainer__FixSizeItem",
   componentId: "sc-1yhgpod-1"
 })(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 var ItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__ItemContent",
@@ -186,11 +192,13 @@ var FixSizeItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__FixSizeItemContent",
   componentId: "sc-1yhgpod-3"
 })(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+
 var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
   var FixedSizeContainer = function FixedSizeContainer(props) {
     var width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor;
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -198,36 +206,39 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         backgroundColor: backgroundColor
       }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
     }
+
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.13.1 - ea48ec41e",
+      "data-splunk-visualization-version": "26.1.0 - fc8bf8d77",
       width: width,
       height: height,
       backgroundColor: backgroundColor
     }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
       var newWidth = _ref3.width,
-        newHeight = _ref3.height;
+          newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
+
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
+
 exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 136:
+/***/ 138:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/findIndex");
 
 /***/ }),
 
-/***/ 137:
+/***/ 139:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/flattenDeep");
@@ -257,9 +268,10 @@ exports.extendStaticWrapperProps = void 0;
  * @param {DashboardVizType} props.Wrapper
  * @param {DashboardVizType} props.Visualization
  */
+
 var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var Wrapper = _ref.Wrapper,
-    Visualization = _ref.Visualization;
+      Visualization = _ref.Visualization;
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
@@ -268,6 +280,7 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
+
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
@@ -279,17 +292,17 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 167:
+/***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/sortBy");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 17:
+/***/ 170:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("lodash/sortBy");
 
 /***/ }),
 
@@ -321,24 +334,33 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -348,20 +370,22 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
+
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-      title = _a.title,
-      description = _a.description,
-      readOnly = _a.readOnly,
-      writeOnly = _a.writeOnly,
-      examples = _a.examples,
-      defaultValue = _a.default,
-      type = _a.type,
-      properties = _a.properties,
-      patternProperties = _a.patternProperties,
-      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -375,12 +399,14 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
+
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
+
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -398,6 +424,7 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
+
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -406,11 +433,14 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
+
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
+
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
+
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -418,6 +448,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -425,6 +456,7 @@ exports.enhanceConfig = enhanceConfig;
  * @param vizConfig a Visualization Config
  * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
  */
+
 function uncollapseEditorConfig(vizConfig) {
   var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
@@ -434,13 +466,16 @@ function uncollapseEditorConfig(vizConfig) {
   });
   return editorPanelUncollapsedConfig;
 }
+
 exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
 }
-exports.isDynamicOption = isDynamicOption;
-// private helpers to improve readability of getInitialPreset
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
 // this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
 /**
  * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
  * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
@@ -449,6 +484,7 @@ exports.isDynamicOption = isDynamicOption;
  *
  * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
  */
+
 function hasCompatibleContexts(vizContext, presetContext) {
   var presetContextKeys = Object.keys(presetContext);
   return presetContextKeys.every(function (contextKey) {
@@ -458,6 +494,8 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
  */
+
+
 function hasCompatibleOptions(vizOptions, presetOptions) {
   var presetOptionKeys = Object.keys(presetOptions);
   return presetOptionKeys.every(function (optionKey) {
@@ -472,18 +510,21 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @param {Object} vizOptions - the current vizOptions definition
  * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
  */
+
+
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
+    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions);
-    // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
     // if not, then the preset is invalid in config.ts
+
     if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
     return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
   });
 }
+
 exports.getInitialPreset = getInitialPreset;
 /**
  * generates number precision values for a Select editor
@@ -491,14 +532,16 @@ exports.getInitialPreset = getInitialPreset;
  * @param {Number} numPrecisionValues - number of integer precision values to generate
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
+
 function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
       label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
       value: i
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -508,12 +551,15 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
  * @returns {EditorLayoutConfig[][]} new editor layout with insertion
  */
+
 var insertLayout = function insertLayout(layout, index) {
   for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     layoutItems[_key - 2] = arguments[_key];
   }
+
   return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
+
 exports.insertLayout = insertLayout;
 
 /***/ }),
@@ -535,28 +581,28 @@ module.exports = require("@splunk/themes/pick");
 /***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
 /***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
 /***/ 27:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 29:
+/***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
@@ -570,11 +616,18 @@ module.exports = require("lodash");
 /***/ 30:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
 /***/ 31:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -584,11 +637,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -596,14 +655,17 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @param {boolean} loading
  * @returns {boolean}
  */
+
+
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
   var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -618,11 +680,13 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
+
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-    height = props.height,
-    icon = props.icon,
-    iconColor = props.iconColor;
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -637,26 +701,21 @@ var IconPlaceholder = function IconPlaceholder(props) {
       height: '50%'
     });
   }
+
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
     level: "warning",
-    message: i18n_1._('No DataSource Connected')
+    message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
+exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
@@ -667,21 +726,27 @@ module.exports = require("@splunk/ui-utils/id");
 
 
 var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var DataSource_1 = __webpack_require__(43);
+
+var DataSource_1 = __webpack_require__(34);
+
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
   currentSortDir: T.oneOf(DataSource_1.validSortDirs),
   onSort: T.func
 });
+
 var getSortingParams = function getSortingParams(_ref) {
   var requestParams = _ref.requestParams,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -690,17 +755,20 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
+
   if (typeof onRequestParamsChange === 'function') {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+    if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
-    }
-    // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
     onSort = function onSort(e, _ref2) {
       var sortKey = _ref2.sortKey,
-        sortDir = _ref2.sortDir;
+          sortDir = _ref2.sortDir;
+
       if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
           offset: 0,
           sort: _defineProperty({}, sortKey, nextSortDir)
@@ -710,12 +778,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -726,43 +796,69 @@ exports.getSortingParams = getSortingParams;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+
+/***/ 35:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
+
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-    meta = _ref.meta,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var totalCount = meta && meta.totalCount || 0;
   var offset = requestParams && requestParams.offset || 0;
   var count = requestParams && requestParams.count;
   var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
   var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
   var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
+
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
-      countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+        countArg = _ref2.count;
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
+
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
     }
+
     var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
     if (typeof page === 'number' && page > 0) {
       newParams.count = pageCount;
       newParams.offset = (page - 1) * pageCount;
     }
+
     onRequestParamsChange(newParams);
   };
+
   return {
     isPaging: isPaging,
     current: current,
@@ -770,11 +866,12 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
+
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -785,6 +882,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -802,67 +900,96 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var getSettingsFromThemedProps_1 = __webpack_require__(37);
-var Options_1 = __webpack_require__(29);
-var SanitizeProps_1 = __webpack_require__(38);
-var TimezoneContext_1 = __webpack_require__(25);
-var moment_1 = __webpack_require__(39);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(38);
+
+var Options_1 = __webpack_require__(30);
+
+var SanitizeProps_1 = __webpack_require__(39);
+
+var TimezoneContext_1 = __webpack_require__(26);
+
+var moment_1 = __webpack_require__(40);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(4);
-var hocUtils_1 = __webpack_require__(26);
-var JSONSchemaUtils_1 = __webpack_require__(27);
-var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-var id_1 = __webpack_require__(32);
-var SplunkVisualization_1 = __webpack_require__(41);
+
+var hocUtils_1 = __webpack_require__(27);
+
+var JSONSchemaUtils_1 = __webpack_require__(28);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+
+var id_1 = __webpack_require__(25);
+
+var SplunkVisualization_1 = __webpack_require__(42);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var getSorting_1 = __webpack_require__(33);
-var getPagination_1 = __webpack_require__(34);
+
+var getPagination_1 = __webpack_require__(35);
+
 var useDeepMemo_1 = __webpack_require__(44);
+
 var MissingPropsMessage_1 = __webpack_require__(45);
+
 var withEditModeCover_1 = __webpack_require__(46);
+
 var withPlaceholder_1 = __webpack_require__(47);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
+
+
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
-    vizConfig = opts.vizConfig,
-    _opts$computeVizProps = opts.computeVizProps,
-    computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-    disableEditModeCover = opts.disableEditModeCover,
-    useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
-  var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
-  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+
+  var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
+  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+
   var DashboardViz = function DashboardViz(props) {
     var _a;
+
     var mode = props.mode,
-      hasEventHandlers = props.hasEventHandlers,
-      dataSources = props.dataSources,
-      options = props.options,
-      _props$context = props.context,
-      context = _props$context === void 0 ? {} : _props$context,
-      width = props.width,
-      height = props.height,
-      onComputedProps = props.onComputedProps,
-      onEventTrigger = props.onEventTrigger,
-      theme = props.theme,
-      onRequestParamsChange = props.onRequestParamsChange;
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
     var _React$useContext = React.useContext(TimezoneContext_1.default),
-      serializedTimezone = _React$useContext.serializedTimezone;
+        serializedTimezone = _React$useContext.serializedTimezone;
+
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -876,44 +1003,58 @@ var withDashboardViz = function withDashboardViz(opts) {
         moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
       }
     }
+
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
+
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
+
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
-    var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
-        theme: theme
-      }),
-      currentThemeFamily = _getSettingsFromTheme.family,
-      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-      currentThemeDensity = _getSettingsFromTheme.density;
+
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
+
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
     var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      evaluatedOptionsAsync = _React$useState2[0],
-      setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
-      _React$useState4 = _slicedToArray(_React$useState3, 1),
-      visualizationID = _React$useState4[0];
+
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
     var _React$useState5 = React.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dataSourcesInState = _React$useState6[0],
-      setDataSourcesInState = _React$useState6[1];
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
+
     var _React$useState7 = React.useState(),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      dataFramesInState = _React$useState8[0],
-      setDataFramesInState = _React$useState8[1];
-    var _React$useState9 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      useAsyncEvaluatedOptions = _React$useState10[0],
-      setUseAsyncEvaluatedOptions = _React$useState10[1];
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
+    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
+
+    var isMounted = React.useRef(true);
+    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
         if (useAsyncEvaluatedOptions) {
           var optionsToEvaluate = {
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           };
           var asyncDynamicOptionsEvaluatorParams = {
             visualizationID: visualizationID,
@@ -924,21 +1065,23 @@ var withDashboardViz = function withDashboardViz(opts) {
           };
           async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(function (e) {
-            // eslint-disable-next-line no-console
-            console.error("unexpected error evaluating options - async: ".concat(e.message));
-            setUseAsyncEvaluatedOptions(false);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
           });
         } else {
           var dataFrames = dataFramesInState;
+
           if (dataSources !== dataSourcesInState) {
             setDataSourcesInState(dataSources);
             dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
             setDataFramesInState(dataFrames);
           }
+
           return Options_1.Options.evaluate({
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           }, dataSources, themeFunc, dataFrames);
         }
       } catch (e) {
@@ -946,67 +1089,76 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
+
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    // trellis specific backgroundColor update for onComputedProps
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
     // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
     // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
     var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
     var clonedEvaluatedOptions = evaluatedOptionsToUse;
+
     if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
       clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
-    }
-    // useEffect hook needs to be initialized before any early returns
+    } // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
+
+
     React.useEffect(function () {
       onComputedProps(clonedEvaluatedOptions);
     });
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // present warning message if any required props are missing
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
+
     var _vizConfig$requiredPr = vizConfig.requiredProps,
-      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-      supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
     ) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    }
-    // events
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
+
+
     var eventCallbackProps = {};
+
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null;
-        // todo: refactor single value and single value icon to send payload from viz
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
+        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
+
         var payloadKeys = supportedEvents[eventName].payloadKeys;
         var payload = {};
+
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
             payload[p] = evaluatedOptionsToUse[p];
           });
         }
+
         eventCallbackProps[eventCallbackPropName] = function (ev) {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
+
           return onEventTrigger({
             originalEvent: ev,
             payload: payload,
@@ -1014,8 +1166,9 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         };
       });
-    }
-    // compute pure viz props which are not from options
+    } // compute pure viz props which are not from options
+
+
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
@@ -1033,21 +1186,25 @@ var withDashboardViz = function withDashboardViz(opts) {
      * In future, we could automatically detect which all datasources are being used
      * and bind those magically to pagination/sorting behavior.
      */
+
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
-      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
+    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
+      var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
+
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
-      var sortParams = getSorting_1.getSortingParams({
+
+      var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
       });
-      var paginatorParams = getPagination_1.getPaginationParams({
+      var paginatorParams = (0, getPagination_1.getPaginationParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
@@ -1056,115 +1213,132 @@ var withDashboardViz = function withDashboardViz(opts) {
         sortParams: sortParams,
         paginatorParams: paginatorParams
       };
-    }
-    // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+    } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+
+
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+
     return React.createElement(SanitizedReactViz, Object.assign({
       mode: mode,
       width: width,
       height: height
     }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
+
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
   DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
     // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
     theme: {}
-  });
-  // attach viz config
-  DashboardViz.config = vizConfig;
-  // @ts-ignore: TODO fix sc upgrade TS issues
-  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
+
 exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 37:
+/***/ 38:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 38:
+/***/ 39:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 40:
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var VizActionHandler_1 = __webpack_require__(42);
-// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
 exports.INITIAL_WIDTH = 250;
 exports.INITIAL_HEIGHT = 250;
 /**
  * A Splunk visualization
  */
+
 var SplunkVisualization = function SplunkVisualization() {
   _classCallCheck(this, SplunkVisualization);
 };
+
 SplunkVisualization.propTypes = {
   /**
    * display mode
    */
   mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
   /**
    * width in pixel or string, defaults to 100%
    */
   width: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * height in pixel or string
    */
   height: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * visualization context used for dynamic option evaluation
    */
   context: T.object,
+
   /**
    * visualization formatting options
    */
   options: T.object,
+
   /**
    * A callback to update formatting options
    */
   onOptionsChange: T.func,
+
   /**
    * datasource state which include data and request params, object key indicate the datasource type.
    */
@@ -1173,6 +1347,7 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
+
     /**
      * current dataset
      */
@@ -1180,6 +1355,7 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
+
     /**
      * error
      */
@@ -1187,29 +1363,35 @@ SplunkVisualization.propTypes = {
       level: T.string,
       message: T.string
     }),
+
     /**
      * meta data that came with the dataset
      */
     meta: T.object
   })),
+
   /**
    * A callback to trigger event
    */
   onEventTrigger: T.func,
+
   /**
    * Inform viz if there are handlers listening to events
    */
   hasEventHandlers: T.bool,
+
   /**
    * A callback to communicate computed props to a consumer
    */
   onComputedProps: T.func,
+
   /**
    * A callback to obtain visualization api
    */
   vizActionHandlerRef: T.func,
   loading: T.bool,
   theme: T.object,
+
   /**
    * A callback to request new data with updated request params
    */
@@ -1218,6 +1400,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
+
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -1246,26 +1429,29 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultVizActionHandler = void 0;
+
 var DefaultVizActionHandler = /*#__PURE__*/function () {
   function DefaultVizActionHandler() {
     _classCallCheck(this, DefaultVizActionHandler);
   }
+
   _createClass(DefaultVizActionHandler, [{
     key: "focus",
-    value: function focus() {
-      // noop
+    value: function focus() {// noop
     }
   }, {
     key: "snapshot",
@@ -1273,23 +1459,11 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
       return null; // noop
     }
   }]);
+
   return DefaultVizActionHandler;
 }();
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-
-/***/ 43:
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
@@ -1303,7 +1477,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -1318,21 +1494,26 @@ var lodash_1 = __webpack_require__(3);
  * @param fn the function to be executed and
  * @param dependencies an array of dependencies
  */
+
+
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+  var ref = (0, react_1.useRef)();
+
+  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
+
   return ref.current.value;
 };
+
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 441:
+/***/ 444:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1340,35 +1521,48 @@ exports.useDeepMemo = useDeepMemo;
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themes = exports.computeVizProps = exports.PurePunchcard = exports.config = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
-var config_1 = __webpack_require__(442);
-var withDashboardViz_1 = __webpack_require__(36);
-var Punchcard_1 = __webpack_require__(443);
-var punchcardUtils_1 = __webpack_require__(451);
+
+var config_1 = __webpack_require__(445);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
+var Punchcard_1 = __webpack_require__(446);
+
+var punchcardUtils_1 = __webpack_require__(454);
+
 exports.config = config_1.default;
 exports.PurePunchcard = Punchcard_1.default;
 var validOptions = Object.keys(exports.config.optionsSchema);
+
 var computeVizProps = function computeVizProps(_a) {
   var onPointClick = _a.onPointClick,
-    onLegendClick = _a.onLegendClick,
-    x = _a.x,
-    y = _a.y,
-    category = _a.category,
-    otherOptions = __rest(_a, ["onPointClick", "onLegendClick", "x", "y", "category"]);
-  var options = lodash_1.chain(otherOptions).pick(validOptions).thru(punchcardUtils_1.convertToPunchcardProperties).value();
+      onLegendClick = _a.onLegendClick,
+      x = _a.x,
+      y = _a.y,
+      category = _a.category,
+      otherOptions = __rest(_a, ["onPointClick", "onLegendClick", "x", "y", "category"]);
+
+  var options = (0, lodash_1.chain)(otherOptions).pick(validOptions).thru(punchcardUtils_1.convertToPunchcardProperties).value();
+
   if (options.seriesColors && typeof options.seriesColors === 'string') {
     try {
       options.seriesColors = JSON.parse(options.seriesColors);
@@ -1376,6 +1570,7 @@ var computeVizProps = function computeVizProps(_a) {
       options.seriesColors = visualization_color_palettes_1.VIZ_CATEGORICAL;
     }
   }
+
   return Object.assign({
     onPointClick: onPointClick,
     onLegendClick: onLegendClick,
@@ -1385,8 +1580,9 @@ var computeVizProps = function computeVizProps(_a) {
     category: category && category.map(String)
   }, options);
 };
+
 exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
+var viz = (0, withDashboardViz_1.default)({
   ReactViz: Punchcard_1.default,
   computeVizProps: exports.computeVizProps,
   vizConfig: config_1.default
@@ -1396,7 +1592,7 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 442:
+/***/ 445:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1405,24 +1601,35 @@ exports.default = viz;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var visualization_icons_1 = __webpack_require__(52);
-var placeholders_1 = __webpack_require__(49);
+
+var placeholders_1 = __webpack_require__(50);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
+
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
+
 var VizBehavior_1 = __webpack_require__(6);
-var VizCategory_1 = __webpack_require__(35);
+
+var VizCategory_1 = __webpack_require__(36);
+
 var configUtils_1 = __webpack_require__(20);
+
 var BackgroundColor_1 = __webpack_require__(53);
+
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
     description: 'DataSource that powers the visualization'
   }],
-  optionalDataSources: [
-    // Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
+  optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
     // {
     //     name: 'annotation',
     //     description: 'DataSource that populate event annotations',
@@ -1511,7 +1718,7 @@ var optionsSchema = {
   bubbleLabelDisplay: {
     default: 'all',
     description: 'Specify whether all bubble labels, the max value bubble labels, or none of the bubble labels should be displayed.',
-    pattern: schemaUtils_1.getPattern(['all', 'max', 'off']),
+    pattern: (0, schemaUtils_1.getPattern)(['all', 'max', 'off']),
     type: 'string'
   },
   bubbleRadiusMax: {
@@ -1527,7 +1734,7 @@ var optionsSchema = {
   bubbleRowScale: {
     default: 'global',
     description: 'Specify how bubbles are scaled relative to other rows.',
-    pattern: schemaUtils_1.getPattern(['global', 'row']),
+    pattern: (0, schemaUtils_1.getPattern)(['global', 'row']),
     type: 'string'
   },
   bubbleSizeMax: {
@@ -1543,19 +1750,19 @@ var optionsSchema = {
   bubbleSizeMethod: {
     default: 'area',
     description: 'Specify whether bubble area or diameter corresponds to the size value.',
-    pattern: schemaUtils_1.getPattern(['radius', 'area']),
+    pattern: (0, schemaUtils_1.getPattern)(['radius', 'area']),
     type: 'string'
   },
   colorMode: {
     default: 'dynamic',
     description: 'Specify the coloring method used for the bubbles.',
-    pattern: schemaUtils_1.getPattern(['categorical', 'dynamic']),
+    pattern: (0, schemaUtils_1.getPattern)(['categorical', 'dynamic']),
     type: 'string'
   },
   legendDisplay: {
     default: 'right',
     description: 'Specify the location of the legend on the panel.',
-    pattern: schemaUtils_1.getPattern(['right', 'off']),
+    pattern: (0, schemaUtils_1.getPattern)(['right', 'off']),
     type: 'string'
   },
   seriesColors: {
@@ -1584,7 +1791,7 @@ var optionsSchema = {
 };
 var themes = {
   defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.black(props),
         light: variables_1.default.backgroundColor(props)
@@ -1594,73 +1801,72 @@ var themes = {
   }
 };
 var editorConfig = [{
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [[{
-    label: i18n_1._('Show bubble labels'),
+    label: (0, i18n_1._)('Show bubble labels'),
     option: 'bubbleLabelDisplay',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('All'),
+        label: (0, i18n_1._)('All'),
         value: 'all'
       }, {
-        label: i18n_1._('Max'),
+        label: (0, i18n_1._)('Max'),
         value: 'max'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     }
   }], [{
-    label: i18n_1._('Pulsate max value'),
+    label: (0, i18n_1._)('Pulsate max value'),
     option: 'showMaxValuePulsation',
     editor: 'editor.toggle'
   }], [{
-    label: i18n_1._('Bubble scale'),
+    label: (0, i18n_1._)('Bubble scale'),
     option: 'bubbleSizeMethod',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Radius'),
+        label: (0, i18n_1._)('Radius'),
         value: 'radius'
       }, {
-        label: i18n_1._('Area'),
+        label: (0, i18n_1._)('Area'),
         value: 'area'
       }]
     }
   }], [{
-    label: i18n_1._('Bubble row scale'),
+    label: (0, i18n_1._)('Bubble row scale'),
     option: 'bubbleRowScale',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Global'),
+        label: (0, i18n_1._)('Global'),
         value: 'global'
       }, {
-        label: i18n_1._('By Row'),
+        label: (0, i18n_1._)('By Row'),
         value: 'row'
       }]
     }
   }]]
 }, {
-  label: i18n_1._('Color and style'),
+  label: (0, i18n_1._)('Color and style'),
   layout: [[{
-    label: i18n_1._('Color mode'),
+    label: (0, i18n_1._)('Color mode'),
     option: 'colorMode',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Dynamic'),
+        label: (0, i18n_1._)('Dynamic'),
         value: 'dynamic'
       }, {
-        label: i18n_1._('Categorical'),
+        label: (0, i18n_1._)('Categorical'),
         value: 'categorical'
       }]
     }
-  }], [
-  // This should be hidden in categorical color mode
+  }], [// This should be hidden in categorical color mode
   {
-    label: i18n_1._('Color by field'),
+    label: (0, i18n_1._)('Color by field'),
     editor: 'editor.columnSelector',
     option: 'bubbleColor',
     context: 'bubbleColorConfig',
@@ -1680,18 +1886,18 @@ var editorConfig = [{
         };
       }
     }
-  }], BackgroundColor_1.default({
+  }], (0, BackgroundColor_1.default)({
     themes: themes
   }), [{
-    label: i18n_1._('Legend display'),
+    label: (0, i18n_1._)('Legend display'),
     option: 'legendDisplay',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Right'),
+        label: (0, i18n_1._)('Right'),
         value: 'right'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     },
@@ -1704,16 +1910,19 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.punchcard',
+
   /**
    * viz name
    */
-  name: i18n_1._('Punchcard'),
+  name: (0, i18n_1._)('Punchcard'),
   category: VizCategory_1.VizCategory.CORRELATION,
+
   /**
    * viz icon
    */
@@ -1736,39 +1945,57 @@ var config = {
   themes: themes,
   requiredProps: ['x', 'y', 'size']
 };
-exports.default = configUtils_1.enhanceConfig(config);
+exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 443:
+/***/ 446:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _defineProperty = __webpack_require__(7);
+
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
+var types_1 = __webpack_require__(83);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
+
 var punchcardUtils_1 = __webpack_require__(99);
-var sortUtils_1 = __webpack_require__(444);
-var PunchcardAxis_1 = __webpack_require__(445);
-var PunchcardChartArea_1 = __webpack_require__(446);
-var PunchcardLegend_1 = __webpack_require__(449);
-var PunchcardGridLines_1 = __webpack_require__(450);
+
+var sortUtils_1 = __webpack_require__(447);
+
+var PunchcardAxis_1 = __webpack_require__(448);
+
+var PunchcardChartArea_1 = __webpack_require__(449);
+
+var PunchcardLegend_1 = __webpack_require__(452);
+
+var PunchcardGridLines_1 = __webpack_require__(453);
+
 var Container = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__Container",
   componentId: "orvtgq-0"
 })(["cursor:default;overflow:hidden;", ";background-color:", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 }, function (props) {
   return props.backgroundColor;
 });
@@ -1782,96 +2009,110 @@ var PunchcardContainer = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__PunchcardContainer",
   componentId: "orvtgq-2"
 })(["overflow:hidden;position:relative;", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
 var PunchcardSVG = styled_components_1.default.svg.withConfig({
   displayName: "Punchcard__PunchcardSVG",
   componentId: "orvtgq-3"
 })(["", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
+
 var Punchcard = function Punchcard(props) {
   var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedX = _React$useState2[0],
-    setSelectedX = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedX = _React$useState2[0],
+      setSelectedX = _React$useState2[1];
+
   var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    selectedY = _React$useState4[0],
-    setSelectedY = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedY = _React$useState4[0],
+      setSelectedY = _React$useState4[1];
+
   var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    selectedCategory = _React$useState6[0],
-    setSelectedCategory = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedCategory = _React$useState6[0],
+      setSelectedCategory = _React$useState6[1];
+
   var handleMouseLeave = function handleMouseLeave() {
     setSelectedX(null);
     setSelectedY(null);
     setSelectedCategory(null);
   };
+
   var handleLegendHover = function handleLegendHover(category) {
     setSelectedX(null);
     setSelectedY(null);
     setSelectedCategory(category);
   };
+
   var handleXAxisHover = function handleXAxisHover(xValue) {
     setSelectedX(xValue);
     setSelectedY(null);
     setSelectedCategory(null);
   };
+
   var handleYAxisHover = function handleYAxisHover(yValue) {
     setSelectedX(null);
     setSelectedY(yValue);
     setSelectedCategory(null);
   };
+
   var handleBubbleHover = function handleBubbleHover(xValue, yValue, category) {
     setSelectedX(xValue);
     setSelectedY(yValue);
     setSelectedCategory(category);
   };
+
   var backgroundColor = props.backgroundColor,
-    showBubbleLabels = props.showBubbleLabels,
-    bubbleRowScale = props.bubbleRowScale,
-    bubbleScale = props.bubbleScale,
-    category = props.category,
-    categoryField = props.categoryField,
-    colorMode = props.colorMode,
-    seriesColors = props.seriesColors,
-    bubbleColor = props.bubbleColor,
-    minBubbleColorIntensity = props.minBubbleColorIntensity,
-    height = props.height,
-    showMaxValuePulsation = props.showMaxValuePulsation,
-    isBubbleSizeDynamic = props.isBubbleSizeDynamic,
-    minBubbleSize = props.minBubbleSize,
-    maxBubbleSize = props.maxBubbleSize,
-    maxBubbleRadius = props.maxBubbleRadius,
-    minBubbleRadius = props.minBubbleRadius,
-    useDefaultSort = props.useDefaultSort,
-    showLegend = props.showLegend,
-    size = props.size,
-    sizeField = props.sizeField,
-    width = props.width,
-    x = props.x,
-    y = props.y,
-    xField = props.xField,
-    yField = props.yField,
-    onPointClick = props.onPointClick,
-    onLegendClick = props.onLegendClick;
+      showBubbleLabels = props.showBubbleLabels,
+      bubbleRowScale = props.bubbleRowScale,
+      bubbleScale = props.bubbleScale,
+      category = props.category,
+      categoryField = props.categoryField,
+      colorMode = props.colorMode,
+      seriesColors = props.seriesColors,
+      bubbleColor = props.bubbleColor,
+      minBubbleColorIntensity = props.minBubbleColorIntensity,
+      height = props.height,
+      showMaxValuePulsation = props.showMaxValuePulsation,
+      isBubbleSizeDynamic = props.isBubbleSizeDynamic,
+      minBubbleSize = props.minBubbleSize,
+      maxBubbleSize = props.maxBubbleSize,
+      maxBubbleRadius = props.maxBubbleRadius,
+      minBubbleRadius = props.minBubbleRadius,
+      useDefaultSort = props.useDefaultSort,
+      showLegend = props.showLegend,
+      size = props.size,
+      sizeField = props.sizeField,
+      width = props.width,
+      x = props.x,
+      y = props.y,
+      xField = props.xField,
+      yField = props.yField,
+      onPointClick = props.onPointClick,
+      onLegendClick = props.onLegendClick;
   var calculatedColorMode = category ? colorMode : punchcardUtils_1.COLOR_MODE_TYPES.SEQUENTIAL;
   var displayLegend = showLegend && calculatedColorMode === punchcardUtils_1.COLOR_MODE_TYPES.CATEGORICAL;
-  var uniqX = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(x.map(function (v) {
+  var uniqX = useDefaultSort ? (0, sortUtils_1.sortAxis)((0, lodash_1.uniq)(x.map(function (v) {
     return "".concat(v);
-  }))) : lodash_1.uniq(x);
-  var uniqY = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(y.map(function (v) {
+  }))) : (0, lodash_1.uniq)(x);
+  var uniqY = useDefaultSort ? (0, sortUtils_1.sortAxis)((0, lodash_1.uniq)(y.map(function (v) {
     return "".concat(v);
-  }))) : lodash_1.uniq(y);
-  var uniqCategory = lodash_1.uniq(category);
-  var colorCategoryMapping = punchcardUtils_1.getColorCategoryMapping({
+  }))) : (0, lodash_1.uniq)(y);
+  var uniqCategory = (0, lodash_1.uniq)(category);
+  var bubbleSizes = size.map(function (v) {
+    return (0, types_1.isNumber)(v) ? Number(v) : 0;
+  });
+  var colorCategoryMapping = (0, punchcardUtils_1.getColorCategoryMapping)({
     category: uniqCategory,
     colorMode: calculatedColorMode,
     seriesColors: seriesColors
   });
+
   var handlePointClick = function handlePointClick(sizeValue) {
     var _rowData;
+
     var rowData = (_rowData = {}, _defineProperty(_rowData, "row.".concat(xField, ".value"), selectedX), _defineProperty(_rowData, "row.".concat(yField, ".value"), selectedY), _defineProperty(_rowData, "row.".concat(sizeField, ".value"), sizeValue), _rowData);
     if (categoryField) rowData["row.".concat(categoryField, ".value")] = selectedCategory;
     onPointClick({
@@ -1882,6 +2123,7 @@ var Punchcard = function Punchcard(props) {
       }, rowData)
     });
   };
+
   var handleLegendClick = function handleLegendClick() {
     onLegendClick({
       type: 'legend.click',
@@ -1890,35 +2132,40 @@ var Punchcard = function Punchcard(props) {
       }
     });
   };
+
   var renderVisualization = function renderVisualization(_ref) {
     var containerWidth = _ref.width,
-      containerHeight = _ref.height;
-    var _punchcardUtils_1$get = punchcardUtils_1.getChartAreaDimensions({
-        containerWidth: containerWidth,
-        containerHeight: containerHeight,
-        displayLegend: displayLegend
-      }),
-      xAxisStartY = _punchcardUtils_1$get.xAxisStartY,
-      yAxisStartX = _punchcardUtils_1$get.yAxisStartX,
-      chartAreaStartX = _punchcardUtils_1$get.chartAreaStartX,
-      chartAreaStartY = _punchcardUtils_1$get.chartAreaStartY,
-      chartAreaEndX = _punchcardUtils_1$get.chartAreaEndX,
-      chartAreaEndY = _punchcardUtils_1$get.chartAreaEndY,
-      legendStartX = _punchcardUtils_1$get.legendStartX;
-    var _punchcardUtils_1$get2 = punchcardUtils_1.getScales({
-        values: uniqX,
-        start: chartAreaStartX,
-        end: chartAreaEndX
-      }),
-      xScale = _punchcardUtils_1$get2.scale,
-      xPositionScale = _punchcardUtils_1$get2.positionScale;
-    var _punchcardUtils_1$get3 = punchcardUtils_1.getScales({
-        values: uniqY,
-        start: chartAreaStartY,
-        end: chartAreaEndY
-      }),
-      yScale = _punchcardUtils_1$get3.scale,
-      yPositionScale = _punchcardUtils_1$get3.positionScale;
+        containerHeight = _ref.height;
+
+    var _ref2 = (0, punchcardUtils_1.getChartAreaDimensions)({
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      displayLegend: displayLegend
+    }),
+        xAxisStartY = _ref2.xAxisStartY,
+        yAxisStartX = _ref2.yAxisStartX,
+        chartAreaStartX = _ref2.chartAreaStartX,
+        chartAreaStartY = _ref2.chartAreaStartY,
+        chartAreaEndX = _ref2.chartAreaEndX,
+        chartAreaEndY = _ref2.chartAreaEndY,
+        legendStartX = _ref2.legendStartX;
+
+    var _ref3 = (0, punchcardUtils_1.getScales)({
+      values: uniqX,
+      start: chartAreaStartX,
+      end: chartAreaEndX
+    }),
+        xScale = _ref3.scale,
+        xPositionScale = _ref3.positionScale;
+
+    var _ref4 = (0, punchcardUtils_1.getScales)({
+      values: uniqY,
+      start: chartAreaStartY,
+      end: chartAreaEndY
+    }),
+        yScale = _ref4.scale,
+        yPositionScale = _ref4.positionScale;
+
     var minBand = Math.min(xScale.bandwidth(), yScale.bandwidth());
     return React.createElement(PunchcardWrapper, {
       backgroundColor: backgroundColor
@@ -1985,7 +2232,7 @@ var Punchcard = function Punchcard(props) {
       selectedCategory: selectedCategory,
       selectedX: selectedX,
       selectedY: selectedY,
-      size: size,
+      size: bubbleSizes,
       x: x,
       xScale: xPositionScale,
       y: y,
@@ -1998,6 +2245,7 @@ var Punchcard = function Punchcard(props) {
       values: "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
     })))));
   };
+
   return React.createElement(Container, {
     backgroundColor: backgroundColor,
     height: height,
@@ -2006,6 +2254,7 @@ var Punchcard = function Punchcard(props) {
     return renderVisualization(containerDimension);
   }));
 };
+
 var propTypes = {
   backgroundColor: T.string,
   showBubbleLabels: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_LABELS_TYPES)),
@@ -2033,7 +2282,7 @@ var propTypes = {
   // implemented in config file using requiredProps
   x: T.arrayOf(T.oneOfType([T.string, T.number])),
   y: T.arrayOf(T.oneOfType([T.string, T.number])),
-  size: T.arrayOf(T.number),
+  size: T.arrayOf(T.oneOfType([T.string, T.number])),
   xField: T.string,
   yField: T.string,
   onPointClick: T.func,
@@ -2075,7 +2324,7 @@ exports.default = Punchcard;
 
 /***/ }),
 
-/***/ 444:
+/***/ 447:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2085,13 +2334,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortedByDTime", function() { return sortedByDTime; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortByDigitOrAlpha", function() { return sortByDigitOrAlpha; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortAxis", function() { return sortAxis; });
-/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(136);
+/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(138);
 /* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(112);
+/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(113);
 /* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_find__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(167);
+/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(170);
 /* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(137);
+/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(139);
 /* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_4__);
@@ -2188,78 +2437,82 @@ var TIME_RANGES = {
     'sun.': true
   }]
 };
-
 /**
  * Sort axis labels by weekday
  * @param {array} axis - string array
  * @return {array} - string array. If those are not weekday strings, return []
  */
+
 var sortedByWeekday = function sortedByWeekday(axis) {
   var sortedAxis = [];
   var notWeekDay = lodash_find__WEBPACK_IMPORTED_MODULE_1___default()(axis, function (value) {
     var lowerValue = value.toLowerCase();
     var index = lodash_findIndex__WEBPACK_IMPORTED_MODULE_0___default()(TIME_RANGES.wday, lowerValue);
+
     if (index === -1) {
       // if the axis contains any value not inside weekdays, then don't treat it as weekdays
       return true;
     }
+
     if (sortedAxis[index]) {
       sortedAxis[index] = [sortedAxis[index], value];
     } else {
       sortedAxis[index] = value;
     }
+
     return false;
   });
   return notWeekDay ? [] : lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3___default()(sortedAxis.filter(Boolean));
 };
-
 /**
  * Sort axis labels by month
  * @param {array} axis - string array
  * @return {array} - string array. If those are not month strings, return []
  */
+
 var sortedByMonth = function sortedByMonth(axis) {
   var sortedAxis = [];
   var notMonth = lodash_find__WEBPACK_IMPORTED_MODULE_1___default()(axis, function (value) {
     var lowerValue = value.toLowerCase();
     var index = lodash_findIndex__WEBPACK_IMPORTED_MODULE_0___default()(TIME_RANGES.month, lowerValue);
+
     if (index === -1) {
       // if the axis contains any value not inside month, then don't treat it as month
       return true;
     }
+
     if (sortedAxis[index]) {
       sortedAxis[index] = [sortedAxis[index], value];
     } else {
       sortedAxis[index] = value;
     }
+
     return false;
   });
   return notMonth ? [] : lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3___default()(sortedAxis.filter(Boolean));
 };
-
 /**
  * Sort axis labels by date time
  * @param {array} axis - string array
  * @return {array} - string array. If those are not in acceptTimeFormat or formatted date, return []
  */
+
 var sortedByDTime = function sortedByDTime(axis) {
   // valid time format 01:00 am, 01:00:00, 01:00
-  var acceptTimeFormat = [/^([0-1])?\d( )?(am|pm)$/i,
-  // 1am, 1 am, 12am, 12 am
-  /^([0-1])?\d:[0-5]\d( )?(am|pm)$/i,
-  // 01:00 am, 01:00am, 1:00am
-  /^([0-2])?\d:([0-5]\d:)?[0-5]\d$/,
-  // 01:00:00, 1:00:00, 23:00
+  var acceptTimeFormat = [/^([0-1])?\d( )?(am|pm)$/i, // 1am, 1 am, 12am, 12 am
+  /^([0-1])?\d:[0-5]\d( )?(am|pm)$/i, // 01:00 am, 01:00am, 1:00am
+  /^([0-2])?\d:([0-5]\d:)?[0-5]\d$/, // 01:00:00, 1:00:00, 23:00
   /^([0-2])?\d:[0-5]\d:[0-5]\d( )?(am|pm)$/i // 01:00:00 am, 1:00:00am
   ];
-
   var sortArr = [];
   var notDate = lodash_find__WEBPACK_IMPORTED_MODULE_1___default()(axis, function (value) {
     if (!Number.isNaN(Number(value))) {
       return true;
-    }
-    // should accept long date: 2019-03-02, Mar 2 2019, ..., 2019-01-01T00:00:00.000Z
+    } // should accept long date: 2019-03-02, Mar 2 2019, ..., 2019-01-01T00:00:00.000Z
+
+
     var convertedDate = new Date(value);
+
     if (!Number.isNaN(Number(convertedDate))) {
       sortArr.push({
         epoch: convertedDate,
@@ -2267,19 +2520,23 @@ var sortedByDTime = function sortedByDTime(axis) {
       });
       return false;
     }
+
     var acceptedTime = acceptTimeFormat.find(function (format) {
       return format.test(value);
     });
+
     if (acceptedTime) {
       var midday = /(am|pm)$/i;
       var reformatTime = value;
       var containsMidday = value.match(midday);
+
       if (containsMidday) {
         // for time format like 01:00 am and 1 am
         reformatTime = value.split(midday).slice(0, -1);
         reformatTime[0] = "".concat(reformatTime[0].trim(), ":00");
         reformatTime = reformatTime.join(' ');
       }
+
       convertedDate = new Date("1970/01/01 ".concat(reformatTime));
       sortArr.push({
         epoch: convertedDate,
@@ -2287,61 +2544,72 @@ var sortedByDTime = function sortedByDTime(axis) {
       });
       return false;
     }
+
     return true;
   });
+
   if (notDate) {
     return [];
   }
+
   return lodash_sortBy__WEBPACK_IMPORTED_MODULE_2___default()(sortArr, function (val) {
     return val.epoch;
   }).map(function (val) {
     return val.original;
   });
 };
-
 /**
  * Sort axis labels by digits or alphabetical order
  * @param {array} axis - string array
  * @return {array} - string array.
  * If those inputs are numbers, then return in digits order. Otherwise, return array based on alphabetical order
  */
+
 var sortByDigitOrAlpha = function sortByDigitOrAlpha(axis) {
   // 10, 10.0, 10.1, not accept 10,000.0
   var coercedIsFinite = function coercedIsFinite(num) {
     return Number.isFinite(Number(num));
   };
+
   if (Object(lodash__WEBPACK_IMPORTED_MODULE_4__["every"])(axis, coercedIsFinite)) {
     return axis.sort(function (a, b) {
       return Number(a) - Number(b);
     });
   }
+
   return axis.sort();
 };
-
 /**
  * Sort axis based on the priority: time measures, numbers, strings in ascending order
  * @param {array} axis - string array
  * @return {array} - string array
  */
+
 var sortAxis = function sortAxis(axis) {
   var sortedTimeAxis = sortedByDTime(axis);
+
   if (sortedTimeAxis.length) {
     return sortedTimeAxis;
   }
+
   var sortedWeekdays = sortedByWeekday(axis);
+
   if (sortedWeekdays.length) {
     return sortedWeekdays;
   }
+
   var sortedMonths = sortedByMonth(axis);
+
   if (sortedMonths.length) {
     return sortedMonths;
   }
+
   return sortByDigitOrAlpha(axis);
 };
 
 /***/ }),
 
-/***/ 445:
+/***/ 448:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2350,16 +2618,23 @@ var sortAxis = function sortAxis(axis) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var styled_components_1 = __webpack_require__(4);
+
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
+
 var punchcardUtils_1 = __webpack_require__(99);
+
 var AxisLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardAxis__AxisLabelText",
   componentId: "sc-1jv7cdw-0"
-})(["cursor:pointer;dominant-baseline:middle;fill:", ";font-size:12px;text-anchor:", ";opacity:", ";transition:all 0.15s;"], pick_1.default({
+})(["cursor:pointer;dominant-baseline:middle;fill:", ";font-size:12px;text-anchor:", ";opacity:", ";transition:all 0.15s;"], (0, pick_1.default)({
   /* was previously named textColor in themeReg */
   enterprise: variables_1.default.textColor,
   prisma: variables_1.default.contentColorDefault
@@ -2368,25 +2643,26 @@ var AxisLabelText = styled_components_1.default.text.withConfig({
 }, function (props) {
   return props.muted ? 0.15 : 1;
 });
+
 var PunchcardAxis = function PunchcardAxis(props) {
   var labels = props.labels,
-    handleMouseEnter = props.handleMouseEnter,
-    handleMouseLeave = props.handleMouseLeave,
-    orientation = props.orientation,
-    scale = props.scale,
-    selected = props.selected,
-    startPositionX = props.startPositionX,
-    startPositionY = props.startPositionY;
+      handleMouseEnter = props.handleMouseEnter,
+      handleMouseLeave = props.handleMouseLeave,
+      orientation = props.orientation,
+      scale = props.scale,
+      selected = props.selected,
+      startPositionX = props.startPositionX,
+      startPositionY = props.startPositionY;
   return React.createElement("g", null, labels.map(function (label, index) {
     // Space between labels either in x or y direction depending on orientation
     var positionDelta = index * scale.bandwidth() + scale.bandwidth() / 2;
     var xPosition = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? startPositionX : startPositionX + positionDelta;
-    var yPosition = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? startPositionY + positionDelta : startPositionY;
-    // create padding between x-axis labels
+    var yPosition = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? startPositionY + positionDelta : startPositionY; // create padding between x-axis labels
+
     var xAxisWidthScale = scale.copy().paddingInner(0.1).round(true);
-    var truncatedLabel = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? punchcardUtils_1.truncateAxisLabelText({
+    var truncatedLabel = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? (0, punchcardUtils_1.truncateAxisLabelText)({
       label: "".concat(label)
-    }) : punchcardUtils_1.truncateAxisLabelText({
+    }) : (0, punchcardUtils_1.truncateAxisLabelText)({
       label: "".concat(label),
       widthInPX: xAxisWidthScale.bandwidth()
     });
@@ -2403,6 +2679,7 @@ var PunchcardAxis = function PunchcardAxis(props) {
     }, React.createElement("title", null, label), truncatedLabel);
   }));
 };
+
 var propTypes = {
   labels: T.arrayOf(T.oneOfType([T.string, T.number])).isRequired,
   handleMouseEnter: T.func,
@@ -2433,50 +2710,58 @@ exports.default = PunchcardAxis;
 
 /***/ }),
 
-/***/ 446:
+/***/ 449:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var punchcardUtils_1 = __webpack_require__(99);
-var PunchcardRow_1 = __webpack_require__(447);
+
+var PunchcardRow_1 = __webpack_require__(450);
+
 var PunchcardChartArea = function PunchcardChartArea(props) {
   var showBubbleLabels = props.showBubbleLabels,
-    bubbleRowScale = props.bubbleRowScale,
-    bubbleScale = props.bubbleScale,
-    category = props.category,
-    colorCategoryMapping = props.colorCategoryMapping,
-    colorMode = props.colorMode,
-    bubbleColor = props.bubbleColor,
-    handleMouseEnter = props.handleMouseEnter,
-    handleMouseLeave = props.handleMouseLeave,
-    isBubbleSizeDynamic = props.isBubbleSizeDynamic,
-    minBubbleColorIntensity = props.minBubbleColorIntensity,
-    minBand = props.minBand,
-    minBubbleSize = props.minBubbleSize,
-    maxBubbleSize = props.maxBubbleSize,
-    maxBubbleRadius = props.maxBubbleRadius,
-    minBubbleRadius = props.minBubbleRadius,
-    showMaxValuePulsation = props.showMaxValuePulsation,
-    selectedCategory = props.selectedCategory,
-    selectedX = props.selectedX,
-    selectedY = props.selectedY,
-    size = props.size,
-    x = props.x,
-    xScale = props.xScale,
-    y = props.y,
-    yScale = props.yScale,
-    handlePointClick = props.handlePointClick;
+      bubbleRowScale = props.bubbleRowScale,
+      bubbleScale = props.bubbleScale,
+      category = props.category,
+      colorCategoryMapping = props.colorCategoryMapping,
+      colorMode = props.colorMode,
+      bubbleColor = props.bubbleColor,
+      handleMouseEnter = props.handleMouseEnter,
+      handleMouseLeave = props.handleMouseLeave,
+      isBubbleSizeDynamic = props.isBubbleSizeDynamic,
+      minBubbleColorIntensity = props.minBubbleColorIntensity,
+      minBand = props.minBand,
+      minBubbleSize = props.minBubbleSize,
+      maxBubbleSize = props.maxBubbleSize,
+      maxBubbleRadius = props.maxBubbleRadius,
+      minBubbleRadius = props.minBubbleRadius,
+      showMaxValuePulsation = props.showMaxValuePulsation,
+      selectedCategory = props.selectedCategory,
+      selectedX = props.selectedX,
+      selectedY = props.selectedY,
+      size = props.size,
+      x = props.x,
+      xScale = props.xScale,
+      y = props.y,
+      yScale = props.yScale,
+      handlePointClick = props.handlePointClick;
   /** @type {Object<String\|Number, import('./utils/punchcardUtils').RowData>} */
-  var dataByRows = punchcardUtils_1.getDataByRows({
+
+  var dataByRows = (0, punchcardUtils_1.getDataByRows)({
     bubbleRowScale: bubbleRowScale,
     bubbleScale: bubbleScale,
     category: category,
@@ -2496,15 +2781,16 @@ var PunchcardChartArea = function PunchcardChartArea(props) {
   });
   return React.createElement("g", null, Object.entries(dataByRows).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-      row = _ref2[0],
-      rowData = _ref2[1];
+        row = _ref2[0],
+        rowData = _ref2[1];
+
     var rowXValues = rowData.rowXValues,
-      rowSizeValues = rowData.rowSizeValues,
-      rowCategoryValues = rowData.rowCategoryValues,
-      rowColorValues = rowData.rowColorValues,
-      rowFillOpacityValues = rowData.rowFillOpacityValues,
-      rowSizeScale = rowData.rowSizeScale,
-      rowRadiusValues = rowData.rowRadiusValues;
+        rowSizeValues = rowData.rowSizeValues,
+        rowCategoryValues = rowData.rowCategoryValues,
+        rowColorValues = rowData.rowColorValues,
+        rowFillOpacityValues = rowData.rowFillOpacityValues,
+        rowSizeScale = rowData.rowSizeScale,
+        rowRadiusValues = rowData.rowRadiusValues;
     var yPosition = yScale(row);
     return React.createElement(PunchcardRow_1.default, {
       key: row,
@@ -2530,6 +2816,7 @@ var PunchcardChartArea = function PunchcardChartArea(props) {
     });
   }));
 };
+
 var propTypes = {
   showBubbleLabels: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_LABELS_TYPES)),
   bubbleRowScale: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_ROW_SCALE_TYPES)),
@@ -2595,7 +2882,88 @@ exports.default = PunchcardChartArea;
 
 /***/ }),
 
-/***/ 447:
+/***/ 45:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(10);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
+ */
+
+
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
+};
+
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
+
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return (0, exports.isMissing)(target[k]);
+  });
+};
+
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
+};
+/**
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
+ */
+
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
+
+/***/ }),
+
+/***/ 450:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2604,30 +2972,36 @@ exports.default = PunchcardChartArea;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var styled_components_1 = __webpack_require__(4);
-var PunchcardBubble_1 = __webpack_require__(448);
+
+var PunchcardBubble_1 = __webpack_require__(451);
+
 var punchcardUtils_1 = __webpack_require__(99);
+
 var PunchcardRow = function PunchcardRow(props) {
   var showBubbleLabels = props.showBubbleLabels,
-    category = props.category,
-    colors = props.colors,
-    _handleMouseEnter = props.handleMouseEnter,
-    handleMouseLeave = props.handleMouseLeave,
-    maxSizeValue = props.maxSizeValue,
-    opacities = props.opacities,
-    radiusValues = props.radiusValues,
-    selectedCategory = props.selectedCategory,
-    selectedX = props.selectedX,
-    selectedY = props.selectedY,
-    showMaxValuePulsation = props.showMaxValuePulsation,
-    size = props.size,
-    x = props.x,
-    xScale = props.xScale,
-    yPosition = props.yPosition,
-    yValue = props.yValue,
-    handlePointClick = props.handlePointClick;
+      category = props.category,
+      colors = props.colors,
+      _handleMouseEnter = props.handleMouseEnter,
+      handleMouseLeave = props.handleMouseLeave,
+      maxSizeValue = props.maxSizeValue,
+      opacities = props.opacities,
+      radiusValues = props.radiusValues,
+      selectedCategory = props.selectedCategory,
+      selectedX = props.selectedX,
+      selectedY = props.selectedY,
+      showMaxValuePulsation = props.showMaxValuePulsation,
+      size = props.size,
+      x = props.x,
+      xScale = props.xScale,
+      yPosition = props.yPosition,
+      yValue = props.yValue,
+      handlePointClick = props.handlePointClick;
   return React.createElement("g", null, x.map(function (xValue, index) {
     var sizeValue = size[index];
     var categoryValue = category[index];
@@ -2635,11 +3009,11 @@ var PunchcardRow = function PunchcardRow(props) {
     var cx = xScale(xValue);
     var r = radiusValues[index];
     var fillOpacity = opacities[index];
-    var hover = punchcardUtils_1.isSomethingSelected({
+    var hover = (0, punchcardUtils_1.isSomethingSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory
-    }) && punchcardUtils_1.isBubbleSelected({
+    }) && (0, punchcardUtils_1.isBubbleSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory,
@@ -2647,7 +3021,7 @@ var PunchcardRow = function PunchcardRow(props) {
       yValue: yValue,
       categoryValue: categoryValue
     });
-    var muted = punchcardUtils_1.isSomethingSelected({
+    var muted = (0, punchcardUtils_1.isSomethingSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory
@@ -2673,6 +3047,7 @@ var PunchcardRow = function PunchcardRow(props) {
     });
   }));
 };
+
 var propTypes = {
   showBubbleLabels: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_LABELS_TYPES)),
   category: T.arrayOf(T.string),
@@ -2716,39 +3091,49 @@ var defaultProps = {
 };
 PunchcardRow.propTypes = propTypes;
 PunchcardRow.defaultProps = defaultProps;
-exports.default = styled_components_1.withTheme(PunchcardRow);
+exports.default = (0, styled_components_1.withTheme)(PunchcardRow);
 
 /***/ }),
 
-/***/ 448:
+/***/ 451:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(98);
-var _templateObject;
+var _taggedTemplateLiteral = __webpack_require__(59);
+
+var _templateObject, _templateObject2;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var styled_components_1 = __webpack_require__(4);
+
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
-var numberUtils_1 = __webpack_require__(30);
+
+var numberUtils_1 = __webpack_require__(31);
+
 var punchcardUtils_1 = __webpack_require__(99);
+
 var BubbleCircle = styled_components_1.default.circle.withConfig({
   displayName: "PunchcardBubble__BubbleCircle",
   componentId: "sc-1jmms9f-0"
 })(["fill:", ";fill-opacity:1;opacity:", ";stroke:", ";"], function (props) {
-  return props.outline ? pick_1.default({
+  return props.outline ? (0, pick_1.default)({
     // bubbleTextColor
     enterprise: {
       light: variables_1.default.white,
       dark: variables_1.default.contentColorInverted // enterprise.textColor
-    },
 
+    },
     prisma: variables_1.default.contentColorActive
   })(props) : props.color;
 }, function (props) {
@@ -2756,18 +3141,17 @@ var BubbleCircle = styled_components_1.default.circle.withConfig({
 }, function (props) {
   return props.outline ? props.color : 'none';
 });
+
 var pulsateAnimation = function pulsateAnimation(r) {
-  return styled_components_1.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    41% {\n        opacity: 0;\n        r: ", ";\n    }\n    100% {\n        opacity: 0;\n        r: ", ";\n    }\n"])), r + 5, r + 5);
+  return (0, styled_components_1.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    41% {\n        opacity: 0;\n        r: ", ";\n    }\n    100% {\n        opacity: 0;\n        r: ", ";\n    }\n"])), r + 5, r + 5);
 };
-var PulsateBubble = styled_components_1.default(BubbleCircle).withConfig({
-  displayName: "PunchcardBubble__PulsateBubble",
-  componentId: "sc-1jmms9f-1"
-})(["animation:", " 2.4s linear 0.4s infinite;"], function (props) {
+
+var PulsateBubble = (0, styled_components_1.default)(BubbleCircle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    animation: ", " 2.4s linear 0.4s infinite;\n"])), function (props) {
   return pulsateAnimation(props.r);
 });
 var BubbleGroup = styled_components_1.default.g.withConfig({
   displayName: "PunchcardBubble__BubbleGroup",
-  componentId: "sc-1jmms9f-2"
+  componentId: "sc-1jmms9f-1"
 })(["cursor:pointer;opacity:", ";filter:", ";transition:opacity 0.15s;"], function (props) {
   return props.muted ? 0.15 : 1;
 }, function (props) {
@@ -2775,15 +3159,15 @@ var BubbleGroup = styled_components_1.default.g.withConfig({
 });
 var BubbleLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardBubble__BubbleLabelText",
-  componentId: "sc-1jmms9f-3"
+  componentId: "sc-1jmms9f-2"
 })(["dominant-baseline:middle;opacity:", ";fill:", "};font-size:", ";font-weight:", ";text-anchor:middle;"], function (props) {
   return props.displayLabel ? 1 : 0;
 }, function (props) {
-  return props.hover || props.outline ? pick_1.default({
+  return props.hover || props.outline ? (0, pick_1.default)({
     // bubbleAltTextColor
     enterprise: variables_1.default.textColor,
     prisma: variables_1.default.contentColorActive
-  })(props) : pick_1.default({
+  })(props) : (0, pick_1.default)({
     enterprise: {
       dark: variables_1.default.textColor,
       light: variables_1.default.white
@@ -2798,29 +3182,32 @@ var BubbleLabelText = styled_components_1.default.text.withConfig({
 var MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL = 13;
 var MAX_DISPLAYABLE_VALUE = 99499999999999;
 var VALUE_OVERFLOW_TEXT = '99T+';
+
 var PunchcardBubble = function PunchcardBubble(props) {
   var showBubbleLabel = props.showBubbleLabel,
-    color = props.color,
-    cx = props.cx,
-    cy = props.cy,
-    fillOpacity = props.fillOpacity,
-    handleMouseEnter = props.handleMouseEnter,
-    handleMouseLeave = props.handleMouseLeave,
-    hover = props.hover,
-    muted = props.muted,
-    pulsate = props.pulsate,
-    value = props.value,
-    r = props.r,
-    handlePointClick = props.handlePointClick;
+      color = props.color,
+      cx = props.cx,
+      cy = props.cy,
+      fillOpacity = props.fillOpacity,
+      handleMouseEnter = props.handleMouseEnter,
+      handleMouseLeave = props.handleMouseLeave,
+      hover = props.hover,
+      muted = props.muted,
+      pulsate = props.pulsate,
+      value = props.value,
+      r = props.r,
+      handlePointClick = props.handlePointClick;
   var outline = value < 0;
   var showPulsateBubble = pulsate && !muted && !hover;
   var displayLabel = hover || showBubbleLabel && r >= MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL;
-  var bubbleLabelValueText = value <= MAX_DISPLAYABLE_VALUE ? numberUtils_1.formatNumber(value, 0, {
+  var bubbleLabelValueText = value <= MAX_DISPLAYABLE_VALUE ? (0, numberUtils_1.formatNumber)(value, 0, {
     useTrendUnits: true
   }) : VALUE_OVERFLOW_TEXT;
+
   if (hover) {
-    bubbleLabelValueText = numberUtils_1.formatNumber(value, 2);
+    bubbleLabelValueText = (0, numberUtils_1.formatNumber)(value, 2);
   }
+
   return React.createElement(BubbleGroup, {
     muted: muted,
     onMouseEnter: handleMouseEnter,
@@ -2851,6 +3238,7 @@ var PunchcardBubble = function PunchcardBubble(props) {
     displayLabel: displayLabel
   }, bubbleLabelValueText));
 };
+
 var propTypes = {
   showBubbleLabel: T.bool,
   color: T.string,
@@ -2887,7 +3275,7 @@ exports.default = PunchcardBubble;
 
 /***/ }),
 
-/***/ 449:
+/***/ 452:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2896,11 +3284,17 @@ exports.default = PunchcardBubble;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var styled_components_1 = __webpack_require__(4);
+
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
+
 var LEGEND_ITEM_VERTICAL_SPACER = 25;
 var LEGEND_ITEM_HORIZONTAL_SPACER = 10;
 var LEGEND_RECT_WIDTH = 5;
@@ -2921,22 +3315,23 @@ var LegendIcon = styled_components_1.default.rect.withConfig({
 var LegendText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardLegend__LegendText",
   componentId: "c2f7we-2"
-})(["dominant-baseline:middle;fill:", ";font-size:12px;"], pick_1.default({
+})(["dominant-baseline:middle;fill:", ";font-size:12px;"], (0, pick_1.default)({
   /* was previously named textColor in themeReg */
   enterprise: variables_1.default.textColor,
   prisma: variables_1.default.contentColorDefault
 }));
+
 var PunchcardLegend = function PunchcardLegend(props) {
   var category = props.category,
-    colorCategoryMapping = props.colorCategoryMapping,
-    handleMouseEnter = props.handleMouseEnter,
-    handleMouseLeave = props.handleMouseLeave,
-    selected = props.selected,
-    startPositionX = props.startPositionX,
-    startPositionY = props.startPositionY,
-    containerWidth = props.containerWidth,
-    containerHeight = props.containerHeight,
-    handleLegendClick = props.handleLegendClick;
+      colorCategoryMapping = props.colorCategoryMapping,
+      handleMouseEnter = props.handleMouseEnter,
+      handleMouseLeave = props.handleMouseLeave,
+      selected = props.selected,
+      startPositionX = props.startPositionX,
+      startPositionY = props.startPositionY,
+      containerWidth = props.containerWidth,
+      containerHeight = props.containerHeight,
+      handleLegendClick = props.handleLegendClick;
   var legendWidth = containerWidth - LEGEND_OFFSET_RIGHT - startPositionX;
   var legendHeight = containerHeight - LEGEND_OFFSET_BOTTOM;
   return React.createElement("svg", {
@@ -2967,6 +3362,7 @@ var PunchcardLegend = function PunchcardLegend(props) {
     }, React.createElement("title", null, c), c));
   })));
 };
+
 var propTypes = {
   category: T.arrayOf(T.string),
   colorCategoryMapping: T.func.isRequired,
@@ -2998,7 +3394,7 @@ exports.default = PunchcardLegend;
 
 /***/ }),
 
-/***/ 45:
+/***/ 453:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3007,101 +3403,40 @@ exports.default = PunchcardLegend;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
-var i18n_1 = __webpack_require__(2);
-var Message_1 = __webpack_require__(10);
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
-};
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
-  });
-};
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
-/***/ }),
+var styled_components_1 = __webpack_require__(4);
 
-/***/ 450:
-/***/ (function(module, exports, __webpack_require__) {
+var lodash_1 = __webpack_require__(3);
 
-"use strict";
+var pick_1 = __webpack_require__(23);
+
+var variables_1 = __webpack_require__(11); // was previously lineColor in themeRegistry
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var React = __webpack_require__(1);
-var T = __webpack_require__(0);
-var styled_components_1 = __webpack_require__(4);
-var lodash_1 = __webpack_require__(3);
-var pick_1 = __webpack_require__(23);
-var variables_1 = __webpack_require__(11);
-// was previously lineColor in themeRegistry
 var GridLine = styled_components_1.default.line.withConfig({
   displayName: "PunchcardGridLines__GridLine",
   componentId: "sc-12y1iif-0"
-})(["stroke:", ";stroke-width:1px;"], pick_1.default({
+})(["stroke:", ";stroke-width:1px;"], (0, pick_1.default)({
   enterprise: {
     light: variables_1.default.gray96,
     dark: variables_1.default.gray25
   },
   prisma: variables_1.default.interactiveColorBackgroundDisabled
 }));
+
 var PunchcardGridLines = function PunchcardGridLines(props) {
   var xStartPosition = props.xStartPosition,
-    xEndPosition = props.xEndPosition,
-    yStartPosition = props.yStartPosition,
-    yEndPosition = props.yEndPosition,
-    xDelta = props.xDelta,
-    yDelta = props.yDelta;
-  var yGridLinesXPositions = lodash_1.range(xStartPosition, xEndPosition + 1, xDelta);
-  var xGridLinesYPositions = lodash_1.range(yStartPosition, yEndPosition + 1, yDelta);
+      xEndPosition = props.xEndPosition,
+      yStartPosition = props.yStartPosition,
+      yEndPosition = props.yEndPosition,
+      xDelta = props.xDelta,
+      yDelta = props.yDelta;
+  var yGridLinesXPositions = (0, lodash_1.range)(xStartPosition, xEndPosition + 1, xDelta);
+  var xGridLinesYPositions = (0, lodash_1.range)(yStartPosition, yEndPosition + 1, yDelta);
   return React.createElement("g", {
     "data-test": "data-test-gridlines"
   }, yGridLinesXPositions.map(function (xValue) {
@@ -3122,6 +3457,7 @@ var PunchcardGridLines = function PunchcardGridLines(props) {
     });
   }));
 };
+
 var propTypes = {
   xStartPosition: T.number,
   xEndPosition: T.number,
@@ -3144,7 +3480,7 @@ exports.default = PunchcardGridLines;
 
 /***/ }),
 
-/***/ 451:
+/***/ 454:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3154,8 +3490,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToPunchcardProperties = exports.mapToOldKey = exports.punchcardOptionValuesMapping = void 0;
+
 var lodash_1 = __webpack_require__(3);
-var chartingUtils_1 = __webpack_require__(55);
+
+var chartingUtils_1 = __webpack_require__(56);
+
 var punchcardOptionsMapping = {
   legendDisplay: 'showLegend',
   bubbleLabelDisplay: 'showBubbleLabels',
@@ -3166,9 +3505,9 @@ var punchcardOptionsMapping = {
   bubbleRadiusMin: 'minBubbleRadius',
   bubbleSizeMax: 'maxBubbleSize',
   bubbleSizeMin: 'minBubbleSize'
-};
-// key value mapping of what options (and their corresponding values) which
+}; // key value mapping of what options (and their corresponding values) which
 // we expose in config.ts to property values PurePunchcard understands
+
 exports.punchcardOptionValuesMapping = {
   showLegend: {
     right: true,
@@ -3187,11 +3526,13 @@ exports.punchcardOptionValuesMapping = {
  * @param {Object} options
  * @returns {Object}
  */
+
 var mapToOldKey = function mapToOldKey(options) {
-  return lodash_1.mapKeys(options, function (val, key) {
+  return (0, lodash_1.mapKeys)(options, function (val, key) {
     return punchcardOptionsMapping[key] ? punchcardOptionsMapping[key] : key;
   });
 };
+
 exports.mapToOldKey = mapToOldKey;
 /**
  * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that PurePunchcard accepts
@@ -3200,9 +3541,11 @@ exports.mapToOldKey = mapToOldKey;
  * @param {Object} originalOptions
  * @returns {Object}
  */
+
 var convertToPunchcardProperties = function convertToPunchcardProperties(originalOptions) {
-  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(chartingUtils_1.mapToValues(exports.punchcardOptionValuesMapping)).value();
+  return (0, lodash_1.chain)((0, exports.mapToOldKey)(originalOptions)).thru((0, chartingUtils_1.mapToValues)(exports.punchcardOptionValuesMapping)).value();
 };
+
 exports.convertToPunchcardProperties = convertToPunchcardProperties;
 
 /***/ }),
@@ -3216,15 +3559,19 @@ exports.convertToPunchcardProperties = convertToPunchcardProperties;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.13.1 - ea48ec41e"
+  'data-splunk-visualization-version': "26.1.0 - fc8bf8d77"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3235,6 +3582,7 @@ var Blocker = styled_components_1.default.div.attrs({
  * @param {ExtendedDashViz} Visualization
  * @returns {ExtendedDashViz} Wrapper
  */
+
 var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
   var Wrapper = function Wrapper(props) {
     var mode = props.mode;
@@ -3243,12 +3591,14 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-  hocUtils_1.extendStaticWrapperProps({
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withEditModeCover;
 
 /***/ }),
@@ -3262,27 +3612,37 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var variables_1 = __webpack_require__(11);
-var IconPlaceholder_1 = __webpack_require__(31);
+
+var IconPlaceholder_1 = __webpack_require__(32);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
   var config = Visualization.config;
   var themes = config.themes;
+
   var Wrapper = function Wrapper(props) {
     var _a, _b;
+
     var dataSources = props.dataSources,
-      loading = props.loading,
-      options = props.options,
-      height = props.height,
-      width = props.width;
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
+
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
@@ -3293,19 +3653,22 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
+
     return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
@@ -3335,13 +3698,15 @@ module.exports = require("@splunk/visualization-icons");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var background = function background(_ref) {
   var label = _ref.label,
-    themes = _ref.themes,
-    labelPosition = _ref.labelPosition;
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
   return [{
-    label: i18n_1._(label || 'Background'),
+    label: (0, i18n_1._)(label || 'Background'),
     option: 'backgroundColor',
     editor: 'editor.color',
     editorProps: {
@@ -3350,31 +3715,37 @@ var background = function background(_ref) {
     }
   }];
 };
+
 exports.default = background;
 
 /***/ }),
 
-/***/ 55:
+/***/ 56:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.constructFieldsAndColumns = exports.toArrayForSeries = exports.isMultiSeriesData = exports.convertOverlayFields = exports.convertY2AxisOptions = exports.mapToValues = exports.truncateData = exports.getAnnotations = void 0;
+
 var lodash_1 = __webpack_require__(3);
 /**
  * Get formatted annotations
@@ -3385,10 +3756,12 @@ var lodash_1 = __webpack_require__(3);
  * @param {Array} options.annotationLabel
  * @returns {Array}
  */
+
+
 var getAnnotations = function getAnnotations(_ref) {
   var annotationX = _ref.annotationX,
-    annotationColor = _ref.annotationColor,
-    annotationLabel = _ref.annotationLabel;
+      annotationColor = _ref.annotationColor,
+      annotationLabel = _ref.annotationLabel;
   return annotationX && annotationX.length ? annotationX.map(function (timestamp, i) {
     return {
       color: annotationColor && annotationColor[i],
@@ -3397,6 +3770,7 @@ var getAnnotations = function getAnnotations(_ref) {
     };
   }) : [];
 };
+
 exports.getAnnotations = getAnnotations;
 /**
  * Truncate the result set to given limit
@@ -3405,20 +3779,25 @@ exports.getAnnotations = getAnnotations;
  * @param {Number|String} truncationLimit - options['chart.resultTruncationLimit']
  * @returns {Object}
  */
+
 var truncateData = function truncateData(dataSet, truncationLimit) {
   if (!dataSet) {
     return null;
   }
+
   var limit = parseInt(truncationLimit, 10);
+
   if (!limit || limit <= 0) {
     return dataSet;
   }
+
   var truncatedData = Object.assign({}, dataSet);
   truncatedData.columns = truncatedData.columns.map(function (columnData) {
     return columnData && Array.isArray(columnData) ? columnData.slice(0, limit) : columnData;
   });
   return truncatedData;
 };
+
 exports.truncateData = truncateData;
 /**
  * Helper method to update the option values into the values that SC accepts
@@ -3426,13 +3805,15 @@ exports.truncateData = truncateData;
  * @param {Object} options
  * @returns {Object}
  */
+
 var mapToValues = function mapToValues(optionValuesSCMapping) {
   return function (options) {
     var convertedOptions = Object.assign({}, options);
     Object.keys(optionValuesSCMapping).forEach(function (key) {
-      if (lodash_1.has(options, key)) {
+      if ((0, lodash_1.has)(options, key)) {
         var updatedValue = optionValuesSCMapping[key][options[key]];
-        if (!lodash_1.isUndefined(updatedValue)) {
+
+        if (!(0, lodash_1.isUndefined)(updatedValue)) {
           convertedOptions[key] = updatedValue;
         }
       }
@@ -3440,6 +3821,7 @@ var mapToValues = function mapToValues(optionValuesSCMapping) {
     return convertedOptions;
   };
 };
+
 exports.mapToValues = mapToValues;
 /**
  * Helper method to process options related to y2Fields
@@ -3447,18 +3829,23 @@ exports.mapToValues = mapToValues;
  * @param {Object} originalOptions
  * @returns {Object}
  */
+
 var convertY2AxisOptions = function convertY2AxisOptions(_a) {
   var y2Fields = _a.y2Fields,
-    originalOptions = __rest(_a, ["y2Fields"]);
+      originalOptions = __rest(_a, ["y2Fields"]);
+
   var convertedOptions = Object.assign({}, originalOptions);
+
   if (y2Fields) {
     convertedOptions['axisY2.enabled'] = true;
-    convertedOptions['axisY2.fields'] = lodash_1.isArray(y2Fields) ? y2Fields.filter(function (name) {
+    convertedOptions['axisY2.fields'] = (0, lodash_1.isArray)(y2Fields) ? y2Fields.filter(function (name) {
       return name;
     }).join(',') : y2Fields;
   }
+
   return convertedOptions;
 };
+
 exports.convertY2AxisOptions = convertY2AxisOptions;
 /**
  * Helper method to format value for overlayFields
@@ -3466,9 +3853,11 @@ exports.convertY2AxisOptions = convertY2AxisOptions;
  * @param {Object} originalOptions
  * @returns {Object}
  */
+
 var convertOverlayFields = function convertOverlayFields(originalOptions) {
   var convertedOptions = Object.assign({}, originalOptions);
   var overlayFields = originalOptions.overlayFields;
+
   if (overlayFields) {
     convertedOptions.overlayFields = Array.isArray(overlayFields) ? overlayFields.filter(function (field) {
       return field;
@@ -3476,17 +3865,21 @@ var convertOverlayFields = function convertOverlayFields(originalOptions) {
       return field.trim();
     }).join(',') : overlayFields;
   }
+
   return convertedOptions;
 };
+
 exports.convertOverlayFields = convertOverlayFields;
 /**
  * checks whether data is multi series data
  * @param {array} data array
  * @return {Boolean}
  */
+
 var isMultiSeriesData = function isMultiSeriesData(data) {
   return Array.isArray(data) && Array.isArray(data[0]);
 };
+
 exports.isMultiSeriesData = isMultiSeriesData;
 /**
  * checks whether data is multi series data and returns value as array
@@ -3494,36 +3887,39 @@ exports.isMultiSeriesData = isMultiSeriesData;
  * @param {*} value to return as array
  * @return {array}
  */
+
 var toArrayForSeries = function toArrayForSeries(data, value) {
-  return exports.isMultiSeriesData(data) ? value : [value];
+  return (0, exports.isMultiSeriesData)(data) ? value : [value];
 };
+
 exports.toArrayForSeries = toArrayForSeries;
+
 var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
   var _ref2$x = _ref2.x,
-    x = _ref2$x === void 0 ? [] : _ref2$x,
-    _ref2$y = _ref2.y,
-    y = _ref2$y === void 0 ? [] : _ref2$y,
-    xField = _ref2.xField,
-    yFields = _ref2.yFields,
-    y2 = _ref2.y2,
-    y2Fields = _ref2.y2Fields;
-  var columns = [x.map(String)].concat(_toConsumableArray(exports.toArrayForSeries(y, y).map(function (series) {
+      x = _ref2$x === void 0 ? [] : _ref2$x,
+      _ref2$y = _ref2.y,
+      y = _ref2$y === void 0 ? [] : _ref2$y,
+      xField = _ref2.xField,
+      yFields = _ref2.yFields,
+      y2 = _ref2.y2,
+      y2Fields = _ref2.y2Fields;
+  var columns = [x.map(String)].concat(_toConsumableArray((0, exports.toArrayForSeries)(y, y).map(function (series) {
     return series.map(String);
   })));
-  var yFieldsArray = exports.toArrayForSeries(y, yFields);
+  var yFieldsArray = (0, exports.toArrayForSeries)(y, yFields);
   var fields = [{
     name: xField
   }].concat(_toConsumableArray(yFieldsArray.map(function (field) {
     return {
       name: field
     };
-  })));
-  // splunk-charting requires y2 to be part of columns
+  }))); // splunk-charting requires y2 to be part of columns
   // when y & y2 options are configured with different (mutually exclusive) series
   // y2 columns need to be added to columns
+
   if (y2Fields) {
-    var y2FieldsArray = exports.toArrayForSeries(y2, y2Fields);
-    var y2AsArray = exports.toArrayForSeries(y2, y2).map(function (series) {
+    var y2FieldsArray = (0, exports.toArrayForSeries)(y2, y2Fields);
+    var y2AsArray = (0, exports.toArrayForSeries)(y2, y2).map(function (series) {
       return series === null || series === void 0 ? void 0 : series.map(String);
     });
     y2FieldsArray.forEach(function (y2Field, index) {
@@ -3535,15 +3931,24 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
       }
     });
   }
+
   return {
     columns: columns,
     fields: fields
   };
 };
+
 exports.constructFieldsAndColumns = constructFieldsAndColumns;
 
 /***/ }),
 
+/***/ 59:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3555,6 +3960,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -3574,6 +3980,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -3595,24 +4002,24 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 9:
+/***/ 83:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
-/***/ 91:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-scale");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 98:
+/***/ 93:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+module.exports = require("d3-scale");
 
 /***/ }),
 
@@ -3623,15 +4030,20 @@ module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.truncateAxisLabelText = exports.isBubbleSelected = exports.isSomethingSelected = exports.getDataByRows = exports.createValueScale = exports.getScales = exports.getChartAreaDimensions = exports.getColorCategoryMapping = exports.GRAYSCALE_FILTER_ID = exports.BUBBLE_LABELS_TYPES = exports.COLOR_MODE_TYPES = exports.BUBBLE_SCALE_TYPES = exports.BUBBLE_ROW_SCALE_TYPES = exports.AXIS_ORIENTATION_TYPES = void 0;
-var d3_scale_1 = __webpack_require__(91);
+
+var d3_scale_1 = __webpack_require__(93);
 /**
  * @enum {AXIS_ORIENTATION_TYPES}
  */
+
+
 var AXIS_ORIENTATION_TYPES;
+
 (function (AXIS_ORIENTATION_TYPES) {
   AXIS_ORIENTATION_TYPES["VERTICAL"] = "vertical";
   AXIS_ORIENTATION_TYPES["HORIZONTAL"] = "horizontal";
@@ -3639,7 +4051,10 @@ var AXIS_ORIENTATION_TYPES;
 /**
  * @enum {BUBBLE_ROW_SCALE_TYPES}
  */
+
+
 var BUBBLE_ROW_SCALE_TYPES;
+
 (function (BUBBLE_ROW_SCALE_TYPES) {
   BUBBLE_ROW_SCALE_TYPES["GLOBAL"] = "global";
   BUBBLE_ROW_SCALE_TYPES["ROW"] = "row";
@@ -3647,7 +4062,10 @@ var BUBBLE_ROW_SCALE_TYPES;
 /**
  * @enum {BUBBLE_SCALE_TYPES}
  */
+
+
 var BUBBLE_SCALE_TYPES;
+
 (function (BUBBLE_SCALE_TYPES) {
   BUBBLE_SCALE_TYPES["RADIUS"] = "radius";
   BUBBLE_SCALE_TYPES["AREA"] = "area";
@@ -3655,7 +4073,10 @@ var BUBBLE_SCALE_TYPES;
 /**
  * @enum {COLOR_MODE_TYPES}
  */
+
+
 var COLOR_MODE_TYPES;
+
 (function (COLOR_MODE_TYPES) {
   COLOR_MODE_TYPES["SEQUENTIAL"] = "sequential";
   COLOR_MODE_TYPES["CATEGORICAL"] = "categorical";
@@ -3663,7 +4084,10 @@ var COLOR_MODE_TYPES;
 /**
  * @enum {BUBBLE_LABELS_TYPES}
  */
+
+
 var BUBBLE_LABELS_TYPES;
+
 (function (BUBBLE_LABELS_TYPES) {
   BUBBLE_LABELS_TYPES["ALL"] = "all";
   BUBBLE_LABELS_TYPES["MAX"] = "max";
@@ -3672,6 +4096,8 @@ var BUBBLE_LABELS_TYPES;
 /**
  * @string GRAYSCALE_FILTER_ID
  */
+
+
 exports.GRAYSCALE_FILTER_ID = "punchcard-grayscale-filter-id-".concat(Math.floor(Math.random() * 1000));
 var X_AXIS_HEIGHT = 15;
 var Y_AXIS_WIDTH = 77;
@@ -3687,15 +4113,19 @@ var HORIZONTAL_SPACE_FOR_SINGLE_CHAR = 6;
  * @param {Array<String>} seriesColors
  * @return {Function} colorCategoryMapping
  */
+
 var getColorCategoryMapping = function getColorCategoryMapping(_ref) {
   var category = _ref.category,
-    colorMode = _ref.colorMode,
-    seriesColors = _ref.seriesColors;
+      colorMode = _ref.colorMode,
+      seriesColors = _ref.seriesColors;
+
   if (colorMode === COLOR_MODE_TYPES.SEQUENTIAL) {
     return null;
   }
-  return d3_scale_1.scaleOrdinal().domain(category).range(seriesColors).unknown(seriesColors[0]);
+
+  return (0, d3_scale_1.scaleOrdinal)().domain(category).range(seriesColors).unknown(seriesColors[0]);
 };
+
 exports.getColorCategoryMapping = getColorCategoryMapping;
 /**
  * get punchcard dimensions given container width and height
@@ -3712,18 +4142,21 @@ exports.getColorCategoryMapping = getColorCategoryMapping;
  * @return {Number} dimensions.chartAreaEndX
  * @return {Number} dimensions.chartAreaEndY
  */
+
 var getChartAreaDimensions = function getChartAreaDimensions(_ref2) {
   var containerWidth = _ref2.containerWidth,
-    containerHeight = _ref2.containerHeight,
-    displayLegend = _ref2.displayLegend;
+      containerHeight = _ref2.containerHeight,
+      displayLegend = _ref2.displayLegend;
   var yAxisStartX = MARGIN;
   var chartAreaStartX = yAxisStartX + Y_AXIS_WIDTH + MARGIN;
   var chartAreaEndX = containerWidth - MARGIN;
   var legendStartX = null;
+
   if (displayLegend) {
     legendStartX = containerWidth - LEGEND_WIDTH;
     chartAreaEndX = legendStartX - MARGIN;
   }
+
   var chartAreaStartY = MARGIN;
   var xAxisStartY = containerHeight - X_AXIS_HEIGHT - MARGIN;
   var chartAreaEndY = xAxisStartY - MARGIN;
@@ -3737,6 +4170,7 @@ var getChartAreaDimensions = function getChartAreaDimensions(_ref2) {
     legendStartX: legendStartX
   };
 };
+
 exports.getChartAreaDimensions = getChartAreaDimensions;
 /**
  * gets a scale used to map values to x or y plane
@@ -3749,20 +4183,23 @@ exports.getChartAreaDimensions = getChartAreaDimensions;
  * @return {Function} scales.scale function to return beginning of band
  * @return {Function} scales.positionScale function to return middle of band
  */
+
 var getScales = function getScales(_ref3) {
   var values = _ref3.values,
-    start = _ref3.start,
-    end = _ref3.end;
-  var scale = d3_scale_1.scaleBand().domain(values).range([start, end]);
-  // Returns the middle of the band
+      start = _ref3.start,
+      end = _ref3.end;
+  var scale = (0, d3_scale_1.scaleBand)().domain(values).range([start, end]); // Returns the middle of the band
+
   var positionScale = function positionScale(value) {
     return scale(value) + scale.bandwidth() / 2;
   };
+
   return {
     scale: scale,
     positionScale: positionScale
   };
 };
+
 exports.getScales = getScales;
 /**
  * Maps an array of values to a percentage
@@ -3771,6 +4208,7 @@ exports.getScales = getScales;
  * @param {Array<Number>} values
  * @return {Function} radiusScale
  */
+
 var createValueScale = function createValueScale(values) {
   var absValuesWithoutZero = [];
   values.forEach(function (value) {
@@ -3779,8 +4217,9 @@ var createValueScale = function createValueScale(values) {
       absValuesWithoutZero.push(Math.abs(value));
     }
   });
-  return d3_scale_1.scaleLinear().domain([Math.min.apply(Math, absValuesWithoutZero), Math.max.apply(Math, absValuesWithoutZero)]).range([0, 1]).clamp(true).unknown(0);
+  return (0, d3_scale_1.scaleLinear)().domain([Math.min.apply(Math, absValuesWithoutZero), Math.max.apply(Math, absValuesWithoutZero)]).range([0, 1]).clamp(true).unknown(0);
 };
+
 exports.createValueScale = createValueScale;
 /**
  * Given a dataset, partition it by row and for each row:
@@ -3805,49 +4244,55 @@ exports.createValueScale = createValueScale;
  * @param {Number} minBubbleRadius  // Used when !isBubbleSizeDynamic
  * @return {Object<String\|Number, RowData>} dataByRows
  */
+
 var getDataByRows = function getDataByRows(_ref4) {
   var bubbleRowScale = _ref4.bubbleRowScale,
-    bubbleScale = _ref4.bubbleScale,
-    category = _ref4.category,
-    colorCategoryMapping = _ref4.colorCategoryMapping,
-    colorMode = _ref4.colorMode,
-    bubbleColor = _ref4.bubbleColor,
-    minBubbleColorIntensity = _ref4.minBubbleColorIntensity,
-    size = _ref4.size,
-    x = _ref4.x,
-    y = _ref4.y,
-    isBubbleSizeDynamic = _ref4.isBubbleSizeDynamic,
-    minBubbleSize = _ref4.minBubbleSize,
-    maxBubbleSize = _ref4.maxBubbleSize,
-    minBand = _ref4.minBand,
-    maxBubbleRadius = _ref4.maxBubbleRadius,
-    minBubbleRadius = _ref4.minBubbleRadius;
+      bubbleScale = _ref4.bubbleScale,
+      category = _ref4.category,
+      colorCategoryMapping = _ref4.colorCategoryMapping,
+      colorMode = _ref4.colorMode,
+      bubbleColor = _ref4.bubbleColor,
+      minBubbleColorIntensity = _ref4.minBubbleColorIntensity,
+      size = _ref4.size,
+      x = _ref4.x,
+      y = _ref4.y,
+      isBubbleSizeDynamic = _ref4.isBubbleSizeDynamic,
+      minBubbleSize = _ref4.minBubbleSize,
+      maxBubbleSize = _ref4.maxBubbleSize,
+      minBand = _ref4.minBand,
+      maxBubbleRadius = _ref4.maxBubbleRadius,
+      minBubbleRadius = _ref4.minBubbleRadius;
   var dataByRows = {};
   var minRadius = isBubbleSizeDynamic ? minBand / 2 * minBubbleSize : minBubbleRadius;
   var maxRadius = isBubbleSizeDynamic ? minBand / 2 * maxBubbleSize : maxBubbleRadius;
   var minArea = Math.PI * Math.pow(minRadius, 2);
   var maxArea = Math.PI * Math.pow(maxRadius, 2);
   var isBubbleColorAnArray = Array.isArray(bubbleColor);
-  var globalSizeScale = exports.createValueScale(size);
+  var globalSizeScale = (0, exports.createValueScale)(size);
+
   var getRadiusValue = function getRadiusValue(value, sizeScale) {
     return bubbleScale === BUBBLE_SCALE_TYPES.RADIUS ? (maxRadius - minRadius) * sizeScale(Math.abs(value)) + minRadius : Math.sqrt(((maxArea - minArea) * sizeScale(Math.abs(value)) + minArea) / Math.PI);
   };
+
   var getColorValue = function getColorValue(c) {
     return colorMode === COLOR_MODE_TYPES.CATEGORICAL ? colorCategoryMapping(c) : bubbleColor;
   };
+
   var getOpacityValue = function getOpacityValue(value, sizeScale) {
     return colorMode === COLOR_MODE_TYPES.CATEGORICAL || isBubbleColorAnArray ? 1 : sizeScale(Math.abs(value)) * (1 - minBubbleColorIntensity) + minBubbleColorIntensity;
   };
+
   y.forEach(function (yValue, index) {
     var xValue = x[index];
     var sizeValue = size[index];
     var categoryValue = category && category[index] ? category[index] : null;
-    var bubbleColorValue = colorMode === COLOR_MODE_TYPES.SEQUENTIAL && isBubbleColorAnArray ? bubbleColor[index] : getColorValue(categoryValue);
-    // if we find an invalid data point here (x, y or size is null or undefined), we ignore it
+    var bubbleColorValue = colorMode === COLOR_MODE_TYPES.SEQUENTIAL && isBubbleColorAnArray ? bubbleColor[index] : getColorValue(categoryValue); // if we find an invalid data point here (x, y or size is null or undefined), we ignore it
+
     if (xValue == null || yValue == null || sizeValue == null) {
       return;
-    }
-    // initialize rowData
+    } // initialize rowData
+
+
     if (!dataByRows[yValue]) {
       dataByRows[yValue] = {
         rowXValues: [],
@@ -3859,30 +4304,34 @@ var getDataByRows = function getDataByRows(_ref4) {
         rowRadiusValues: []
       };
     }
+
     dataByRows[yValue].rowXValues.push(xValue);
     dataByRows[yValue].rowSizeValues.push(sizeValue);
     dataByRows[yValue].rowCategoryValues.push(categoryValue);
     dataByRows[yValue].rowColorValues.push(bubbleColorValue);
     dataByRows[yValue].rowFillOpacityValues.push(getOpacityValue(size[index], dataByRows[yValue].rowSizeScale));
     dataByRows[yValue].rowRadiusValues.push(getRadiusValue(size[index], dataByRows[yValue].rowSizeScale));
-  });
-  // If we are using row scaling we need to recalculate opacity, radius and size scale
+  }); // If we are using row scaling we need to recalculate opacity, radius and size scale
+
   if (bubbleRowScale === BUBBLE_ROW_SCALE_TYPES.ROW) {
     Object.entries(dataByRows).forEach(function (_ref5) {
       var _ref6 = _slicedToArray(_ref5, 2),
-        row = _ref6[0],
-        rowData = _ref6[1];
-      var rowSizeScale = exports.createValueScale(rowData.rowSizeValues);
-      dataByRows[row].rowSizeScale = rowSizeScale;
-      // Fill in opacity and radius values based on row scale
+          row = _ref6[0],
+          rowData = _ref6[1];
+
+      var rowSizeScale = (0, exports.createValueScale)(rowData.rowSizeValues);
+      dataByRows[row].rowSizeScale = rowSizeScale; // Fill in opacity and radius values based on row scale
+
       rowData.rowSizeValues.forEach(function (rowSizeValue, index) {
         dataByRows[row].rowFillOpacityValues[index] = getOpacityValue(rowData.rowSizeValues[index], rowSizeScale);
         dataByRows[row].rowRadiusValues[index] = getRadiusValue(rowData.rowSizeValues[index], rowSizeScale);
       });
     });
   }
+
   return dataByRows;
 };
+
 exports.getDataByRows = getDataByRows;
 /**
  * Given selected dimensions
@@ -3894,12 +4343,14 @@ exports.getDataByRows = getDataByRows;
  * @param {String} selectedCategory
  * @return {Boolean}
  */
+
 var isSomethingSelected = function isSomethingSelected(_ref7) {
   var selectedX = _ref7.selectedX,
-    selectedY = _ref7.selectedY,
-    selectedCategory = _ref7.selectedCategory;
+      selectedY = _ref7.selectedY,
+      selectedCategory = _ref7.selectedCategory;
   return selectedX !== null || selectedY !== null || selectedCategory !== null;
 };
+
 exports.isSomethingSelected = isSomethingSelected;
 /**
  * Given selected dimensions and a specific bubble's values
@@ -3914,24 +4365,30 @@ exports.isSomethingSelected = isSomethingSelected;
  * @param {Boolean} categoryValue
  * @return {Boolean}
  */
+
 var isBubbleSelected = function isBubbleSelected(_ref8) {
   var selectedX = _ref8.selectedX,
-    selectedY = _ref8.selectedY,
-    selectedCategory = _ref8.selectedCategory,
-    xValue = _ref8.xValue,
-    yValue = _ref8.yValue,
-    categoryValue = _ref8.categoryValue;
+      selectedY = _ref8.selectedY,
+      selectedCategory = _ref8.selectedCategory,
+      xValue = _ref8.xValue,
+      yValue = _ref8.yValue,
+      categoryValue = _ref8.categoryValue;
+
   if (selectedX !== null && xValue !== selectedX) {
     return false;
   }
+
   if (selectedY !== null && yValue !== selectedY) {
     return false;
   }
+
   if (selectedCategory !== null && categoryValue !== selectedCategory) {
     return false;
   }
+
   return true;
 };
+
 exports.isBubbleSelected = isBubbleSelected;
 /**
  * Given text and available width, the truncateAxisLabelText will ellipsize
@@ -3942,28 +4399,35 @@ exports.isBubbleSelected = isBubbleSelected;
  * @param {Number} widthInPX - Available width to render the text
  * @param {('ellipsisStart' | 'ellipsisEnd')} axisLabelOverflowMode - Truncate start or end of the text
  */
+
 var truncateAxisLabelText = function truncateAxisLabelText(_ref9) {
   var label = _ref9.label,
-    _ref9$widthInPX = _ref9.widthInPX,
-    widthInPX = _ref9$widthInPX === void 0 ? Y_AXIS_WIDTH : _ref9$widthInPX,
-    _ref9$axisLabelOverfl = _ref9.axisLabelOverflowMode,
-    axisLabelOverflowMode = _ref9$axisLabelOverfl === void 0 ? 'ellipsisEnd' : _ref9$axisLabelOverfl;
+      _ref9$widthInPX = _ref9.widthInPX,
+      widthInPX = _ref9$widthInPX === void 0 ? Y_AXIS_WIDTH : _ref9$widthInPX,
+      _ref9$axisLabelOverfl = _ref9.axisLabelOverflowMode,
+      axisLabelOverflowMode = _ref9$axisLabelOverfl === void 0 ? 'ellipsisEnd' : _ref9$axisLabelOverfl;
   // convert available width to number of characters that can be rendered.
   var availableLength = Math.floor(widthInPX / HORIZONTAL_SPACE_FOR_SINGLE_CHAR);
+
   if (label.length <= availableLength) {
     return label;
-  }
-  // return empty string if available space cannot accomodate
+  } // return empty string if available space cannot accomodate
   // at least one label character
+
+
   if (availableLength < 'X...'.length) {
     return '';
   }
+
   var endMarker = Math.max(0, availableLength - '...'.length);
+
   if (axisLabelOverflowMode === 'ellipsisStart') {
     return "...".concat(label.slice(-endMarker));
   }
+
   return "".concat(label.slice(0, endMarker), "...");
 };
+
 exports.truncateAxisLabelText = truncateAxisLabelText;
 
 /***/ })