npm - @splunk/visualizations - Versions diffs - 25.7.2 → 25.8.0 - Mend

@splunk/visualizations 25.7.2 → 25.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1314) hide show

package/Punchcard.js CHANGED Viewed

@@ -143,17 +143,11 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var styled_components_1 = __webpack_require__(4);
 var SizeAwareWrapper_1 = __webpack_require__(18);
 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 {
@@ -166,11 +160,11 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   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
+});
+// 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)
@@ -192,13 +186,11 @@ 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",
@@ -206,27 +198,24 @@ 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.7.2 - a2ded8142",
+      "data-splunk-visualization-version": "25.8.0 - 65f56b99e",
       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;
 /***/ }),
@@ -268,10 +257,9 @@ 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]) {
@@ -280,7 +268,6 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 /***/ }),
@@ -320,33 +307,24 @@ module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 var _toConsumableArray = __webpack_require__(7);
 var _defineProperty = __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.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
@@ -356,22 +334,20 @@ 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 && {
@@ -385,14 +361,12 @@ 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) {
@@ -410,7 +384,6 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -419,14 +392,11 @@ 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
@@ -434,7 +404,6 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -442,7 +411,6 @@ 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) {
@@ -452,16 +420,13 @@ 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
@@ -470,7 +435,6 @@ exports.isDynamicOption = isDynamicOption; // private helpers to improve readabi
  *
  * 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) {
@@ -480,8 +444,6 @@ 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) {
@@ -496,21 +458,18 @@ 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 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
@@ -518,7 +477,6 @@ 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 {
@@ -527,7 +485,6 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -537,15 +494,12 @@ 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;
 /***/ }),
@@ -630,17 +584,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var i18n_1 = __webpack_require__(2);
 var Message_1 = __webpack_require__(9);
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -648,8 +596,6 @@ 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);
@@ -658,7 +604,6 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -673,13 +618,11 @@ 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: {
@@ -694,7 +637,6 @@ var IconPlaceholder = function IconPlaceholder(props) {
       height: '50%'
     });
   }
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
@@ -702,7 +644,6 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: i18n_1._('No DataSource Connected')
   });
 };
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -726,27 +667,21 @@ module.exports = require("@splunk/ui-utils/id");
 var _defineProperty = __webpack_require__(8);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 var T = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var DataSource_1 = __webpack_require__(43);
 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 = {
@@ -755,18 +690,15 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
   if (typeof onRequestParamsChange === 'function') {
     if (requestParams && 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';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
@@ -778,14 +710,12 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
 exports.getSortingParams = getSortingParams;
 /***/ }),
@@ -800,49 +730,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 var T = __webpack_require__(1);
 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;
+      countArg = _ref2.count;
     var newParams = 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,
@@ -850,7 +770,6 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
 exports.getPaginationParams = getPaginationParams;
 /***/ }),
@@ -866,7 +785,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -891,90 +809,60 @@ var VizCategory;
 var _slicedToArray = __webpack_require__(17);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 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 FeatureFlagContext_1 = __webpack_require__(20);
 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 VizBehavior_1 = __webpack_require__(6);
 var getSorting_1 = __webpack_require__(33);
 var getPagination_1 = __webpack_require__(34);
 var useDeepMemo_1 = __webpack_require__(44);
 var MissingPropsMessage_1 = __webpack_require__(45);
 var withEditModeCover_1 = __webpack_require__(46);
 var withPlaceholder_1 = __webpack_require__(47);
-var UUID = id_1.createGUID();
 /**
  * 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.
+    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');
   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.
@@ -988,41 +876,30 @@ 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;
+        theme: theme
+      }),
+      currentThemeFamily = _getSettingsFromTheme.family,
+      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
+      currentThemeDensity = _getSettingsFromTheme.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(UUID)),
-        _React$useState4 = _slicedToArray(_React$useState3, 1),
-        visualizationID = _React$useState4[0];
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      visualizationID = _React$useState4[0];
     var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        useAsyncEvaluatedOptions = _React$useState6[0],
-        setUseAsyncEvaluatedOptions = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      useAsyncEvaluatedOptions = _React$useState6[0],
+      setUseAsyncEvaluatedOptions = _React$useState6[1];
     evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
       try {
         if (useAsyncEvaluatedOptions) {
@@ -1055,22 +932,21 @@ 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 = lodash_1.cloneDeep(evaluatedOptionsToUse);
+    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.backgroundColor = clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
-    } // useEffect hook needs to be initialized before any early returns
+      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
     // 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);
     });
@@ -1079,49 +955,44 @@ var withDashboardViz = function withDashboardViz(opts) {
         if (useAsyncEvaluatedOptions) {
           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;
+      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+      supports = vizConfig.supports;
     var missing = 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
+        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,
@@ -1129,9 +1000,8 @@ 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
     }));
@@ -1149,19 +1019,15 @@ 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 handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
       var sortParams = getSorting_1.getSortingParams({
         requestParams: requestParams,
         meta: meta,
@@ -1177,25 +1043,26 @@ var withDashboardViz = function withDashboardViz(opts) {
         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 (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
+  });
+  // 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));
 };
 exports.default = withDashboardViz;
 /***/ }),
@@ -1242,61 +1109,48 @@ module.exports = require("@splunk/async-dynamic-options-evaluator");
 var _classCallCheck = __webpack_require__(11);
 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__(1);
 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__(42);
+// 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.
    */
@@ -1305,7 +1159,6 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
     /**
      * current dataset
      */
@@ -1313,7 +1166,6 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
     /**
      * error
      */
@@ -1321,35 +1173,29 @@ 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
    */
@@ -1358,7 +1204,6 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -1394,22 +1239,19 @@ exports.default = SplunkVisualization;
 var _classCallCheck = __webpack_require__(11);
 var _createClass = __webpack_require__(22);
 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",
@@ -1417,10 +1259,8 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
       return null; // noop
     }
   }]);
   return DefaultVizActionHandler;
 }();
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 /***/ }),
@@ -1449,9 +1289,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
 var react_1 = __webpack_require__(0);
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -1466,21 +1304,16 @@ 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)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
   return ref.current.value;
 };
 exports.useDeepMemo = useDeepMemo;
 /***/ }),
@@ -1493,48 +1326,35 @@ 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__(50);
 var config_1 = __webpack_require__(441);
 var withDashboardViz_1 = __webpack_require__(36);
 var Punchcard_1 = __webpack_require__(442);
 var punchcardUtils_1 = __webpack_require__(450);
 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"]);
+    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();
   if (options.seriesColors && typeof options.seriesColors === 'string') {
     try {
       options.seriesColors = JSON.parse(options.seriesColors);
@@ -1542,7 +1362,6 @@ var computeVizProps = function computeVizProps(_a) {
       options.seriesColors = visualization_color_palettes_1.VIZ_CATEGORICAL;
     }
   }
   return Object.assign({
     onPointClick: onPointClick,
     onLegendClick: onLegendClick,
@@ -1552,7 +1371,6 @@ var computeVizProps = function computeVizProps(_a) {
     category: category && category.map(String)
   }, options);
 };
 exports.computeVizProps = computeVizProps;
 var viz = withDashboardViz_1.default({
   ReactViz: Punchcard_1.default,
@@ -1573,35 +1391,24 @@ 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__(51);
 var placeholders_1 = __webpack_require__(48);
 var visualization_color_palettes_1 = __webpack_require__(50);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(10);
 var VizBehavior_1 = __webpack_require__(6);
 var VizCategory_1 = __webpack_require__(35);
 var configUtils_1 = __webpack_require__(19);
 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',
@@ -1836,7 +1643,8 @@ var editorConfig = [{
         value: 'categorical'
       }]
     }
-  }], [// This should be hidden in categorical color mode
+  }], [
+  // This should be hidden in categorical color mode
   {
     label: i18n_1._('Color by field'),
     editor: 'editor.columnSelector',
@@ -1882,19 +1690,16 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.punchcard',
   /**
    * viz name
    */
   name: 'Punchcard',
   category: VizCategory_1.VizCategory.COMPARISONS,
   /**
    * viz icon
    */
@@ -1928,39 +1733,23 @@ exports.default = configUtils_1.enhanceConfig(config);
 var _defineProperty = __webpack_require__(8);
 var _slicedToArray = __webpack_require__(17);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var styled_components_1 = __webpack_require__(4);
 var T = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var SizeAwareWrapper_1 = __webpack_require__(18);
 var style_1 = __webpack_require__(14);
 var visualization_color_palettes_1 = __webpack_require__(50);
 var punchcardUtils_1 = __webpack_require__(94);
 var sortUtils_1 = __webpack_require__(443);
 var PunchcardAxis_1 = __webpack_require__(444);
 var PunchcardChartArea_1 = __webpack_require__(445);
 var PunchcardLegend_1 = __webpack_require__(448);
 var PunchcardGridLines_1 = __webpack_require__(449);
 var Container = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__Container",
   componentId: "orvtgq-0"
@@ -1987,81 +1776,72 @@ var PunchcardSVG = styled_components_1.default.svg.withConfig({
 })(["", ";"], function (props) {
   return style_1.toDimension(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) {
@@ -2076,10 +1856,8 @@ var Punchcard = function Punchcard(props) {
     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({
@@ -2090,7 +1868,6 @@ var Punchcard = function Punchcard(props) {
       }, rowData)
     });
   };
   var handleLegendClick = function handleLegendClick() {
     onLegendClick({
       type: 'legend.click',
@@ -2099,40 +1876,35 @@ 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 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;
+        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;
+        values: uniqY,
+        start: chartAreaStartY,
+        end: chartAreaEndY
+      }),
+      yScale = _punchcardUtils_1$get3.scale,
+      yPositionScale = _punchcardUtils_1$get3.positionScale;
     var minBand = Math.min(xScale.bandwidth(), yScale.bandwidth());
     return React.createElement(PunchcardWrapper, {
       backgroundColor: backgroundColor
@@ -2212,7 +1984,6 @@ 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,
@@ -2221,7 +1992,6 @@ var Punchcard = function Punchcard(props) {
     return renderVisualization(containerDimension);
   }));
 };
 var propTypes = {
   backgroundColor: T.string,
   showBubbleLabels: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_LABELS_TYPES)),
@@ -2404,82 +2174,78 @@ 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,
@@ -2487,23 +2253,19 @@ 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,
@@ -2511,66 +2273,55 @@ 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);
 };
@@ -2585,19 +2336,12 @@ var sortAxis = function sortAxis(axis) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(10);
 var punchcardUtils_1 = __webpack_require__(94);
 var AxisLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardAxis__AxisLabelText",
   componentId: "sc-1jv7cdw-0"
@@ -2610,22 +2354,21 @@ 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({
       label: "".concat(label)
@@ -2646,7 +2389,6 @@ 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,
@@ -2684,50 +2426,42 @@ exports.default = PunchcardAxis;
 var _toConsumableArray = __webpack_require__(7);
 var _slicedToArray = __webpack_require__(17);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var punchcardUtils_1 = __webpack_require__(94);
 var PunchcardRow_1 = __webpack_require__(446);
 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({
     bubbleRowScale: bubbleRowScale,
     bubbleScale: bubbleScale,
@@ -2748,16 +2482,15 @@ 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,
@@ -2783,7 +2516,6 @@ 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)),
@@ -2858,36 +2590,30 @@ exports.default = PunchcardChartArea;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
 var PunchcardBubble_1 = __webpack_require__(447);
 var punchcardUtils_1 = __webpack_require__(94);
 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];
@@ -2933,7 +2659,6 @@ var PunchcardRow = function PunchcardRow(props) {
     });
   }));
 };
 var propTypes = {
   showBubbleLabels: T.oneOf(Object.values(punchcardUtils_1.BUBBLE_LABELS_TYPES)),
   category: T.arrayOf(T.string),
@@ -2988,27 +2713,17 @@ exports.default = styled_components_1.withTheme(PunchcardRow);
 var _taggedTemplateLiteral = __webpack_require__(93);
 var _templateObject;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(10);
 var numberUtils_1 = __webpack_require__(30);
 var punchcardUtils_1 = __webpack_require__(94);
 var BubbleCircle = styled_components_1.default.circle.withConfig({
   displayName: "PunchcardBubble__BubbleCircle",
   componentId: "sc-1jmms9f-0"
@@ -3018,8 +2733,8 @@ var BubbleCircle = styled_components_1.default.circle.withConfig({
     enterprise: {
       light: variables_1.default.white,
       dark: variables_1.default.contentColorInverted // enterprise.textColor
     },
     prisma: variables_1.default.contentColorActive
   })(props) : props.color;
 }, function (props) {
@@ -3027,11 +2742,9 @@ 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);
 };
 var PulsateBubble = styled_components_1.default(BubbleCircle).withConfig({
   displayName: "PunchcardBubble__PulsateBubble",
   componentId: "sc-1jmms9f-1"
@@ -3071,32 +2784,29 @@ 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, {
     useTrendUnits: true
   }) : VALUE_OVERFLOW_TEXT;
   if (hover) {
     bubbleLabelValueText = numberUtils_1.formatNumber(value, 2);
   }
   return React.createElement(BubbleGroup, {
     muted: muted,
     onMouseEnter: handleMouseEnter,
@@ -3127,7 +2837,6 @@ var PunchcardBubble = function PunchcardBubble(props) {
     displayLabel: displayLabel
   }, bubbleLabelValueText));
 };
 var propTypes = {
   showBubbleLabel: T.bool,
   color: T.string,
@@ -3173,17 +2882,11 @@ exports.default = PunchcardBubble;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(10);
 var LEGEND_ITEM_VERTICAL_SPACER = 25;
 var LEGEND_ITEM_HORIZONTAL_SPACER = 10;
 var LEGEND_RECT_WIDTH = 5;
@@ -3209,18 +2912,17 @@ var LegendText = styled_components_1.default.text.withConfig({
   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", {
@@ -3251,7 +2953,6 @@ var PunchcardLegend = function PunchcardLegend(props) {
     }, React.createElement("title", null, c), c));
   })));
 };
 var propTypes = {
   category: T.arrayOf(T.string),
   colorCategoryMapping: T.func.isRequired,
@@ -3292,20 +2993,13 @@ exports.default = PunchcardLegend;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var styled_components_1 = __webpack_require__(4);
 var lodash_1 = __webpack_require__(3);
 var pick_1 = __webpack_require__(23);
-var variables_1 = __webpack_require__(10); // was previously lineColor in themeRegistry
+var variables_1 = __webpack_require__(10);
+// was previously lineColor in themeRegistry
 var GridLine = styled_components_1.default.line.withConfig({
   displayName: "PunchcardGridLines__GridLine",
   componentId: "sc-12y1iif-0"
@@ -3316,14 +3010,13 @@ var GridLine = styled_components_1.default.line.withConfig({
   },
   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;
+    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);
   return React.createElement("g", {
@@ -3346,7 +3039,6 @@ var PunchcardGridLines = function PunchcardGridLines(props) {
     });
   }));
 };
 var propTypes = {
   xStartPosition: T.number,
   xEndPosition: T.number,
@@ -3379,27 +3071,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 var React = __webpack_require__(0);
 var T = __webpack_require__(1);
 var i18n_1 = __webpack_require__(2);
 var Message_1 = __webpack_require__(9);
 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
@@ -3407,13 +3091,11 @@ exports.isMissing = isMissing;
  * @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]),
@@ -3427,11 +3109,10 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
+    height = props.height,
+    missingProps = props.missingProps;
   return React.createElement(Message_1.default, {
     "data-test": "message",
     width: width,
@@ -3439,7 +3120,6 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
   });
 };
 exports.MissingPropsMessage = MissingPropsMessage;
 exports.MissingPropsMessage.propTypes = propTypes;
 exports.MissingPropsMessage.defaultProps = {
@@ -3460,11 +3140,8 @@ 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 punchcardOptionsMapping = {
   legendDisplay: 'showLegend',
   bubbleLabelDisplay: 'showBubbleLabels',
@@ -3475,9 +3152,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,
@@ -3496,13 +3173,11 @@ exports.punchcardOptionValuesMapping = {
  * @param {Object} options
  * @returns {Object}
  */
 var mapToOldKey = function mapToOldKey(options) {
   return 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
@@ -3511,11 +3186,9 @@ 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();
 };
 exports.convertToPunchcardProperties = convertToPunchcardProperties;
 /***/ }),
@@ -3529,19 +3202,15 @@ exports.convertToPunchcardProperties = convertToPunchcardProperties;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 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.7.2 - a2ded8142"
+  'data-splunk-visualization-version': "25.8.0 - 65f56b99e"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3552,7 +3221,6 @@ 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;
@@ -3561,14 +3229,12 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
   hocUtils_1.extendStaticWrapperProps({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
 exports.default = withEditModeCover;
 /***/ }),
@@ -3582,37 +3248,27 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
 var colorUtils_1 = __webpack_require__(12);
 var variables_1 = __webpack_require__(10);
 var IconPlaceholder_1 = __webpack_require__(31);
 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 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",
@@ -3623,17 +3279,14 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
     return React.createElement(Visualization, Object.assign({}, props));
   };
   hocUtils_1.extendStaticWrapperProps({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
 exports.default = withPlaceholder;
 /***/ }),
@@ -3668,13 +3321,11 @@ 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'),
     option: 'backgroundColor',
@@ -3685,7 +3336,6 @@ var background = function background(_ref) {
     }
   }];
 };
 exports.default = background;
 /***/ }),
@@ -3697,25 +3347,20 @@ exports.default = background;
 var _toConsumableArray = __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.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
@@ -3726,12 +3371,10 @@ 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],
@@ -3740,7 +3383,6 @@ var getAnnotations = function getAnnotations(_ref) {
     };
   }) : [];
 };
 exports.getAnnotations = getAnnotations;
 /**
  * Truncate the result set to given limit
@@ -3749,25 +3391,20 @@ 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
@@ -3775,14 +3412,12 @@ 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)) {
         var updatedValue = optionValuesSCMapping[key][options[key]];
         if (!lodash_1.isUndefined(updatedValue)) {
           convertedOptions[key] = updatedValue;
         }
@@ -3791,7 +3426,6 @@ var mapToValues = function mapToValues(optionValuesSCMapping) {
     return convertedOptions;
   };
 };
 exports.mapToValues = mapToValues;
 /**
  * Helper method to process options related to y2Fields
@@ -3799,23 +3433,18 @@ 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) {
       return name;
     }).join(',') : y2Fields;
   }
   return convertedOptions;
 };
 exports.convertY2AxisOptions = convertY2AxisOptions;
 /**
  * Helper method to format value for overlayFields
@@ -3823,11 +3452,9 @@ 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;
@@ -3835,21 +3462,17 @@ 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
@@ -3857,22 +3480,19 @@ exports.isMultiSeriesData = isMultiSeriesData;
  * @param {*} value to return as array
  * @return {array}
  */
 var toArrayForSeries = function toArrayForSeries(data, value) {
   return 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;
+    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) {
     return series.map(String);
   })));
@@ -3883,10 +3503,10 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
     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) {
@@ -3901,13 +3521,11 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
       }
     });
   }
   return {
     columns: columns,
     fields: fields
   };
 };
 exports.constructFieldsAndColumns = constructFieldsAndColumns;
 /***/ }),
@@ -3923,7 +3541,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -3943,7 +3560,6 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -3993,20 +3609,15 @@ 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__(86);
 /**
  * @enum {AXIS_ORIENTATION_TYPES}
  */
 var AXIS_ORIENTATION_TYPES;
 (function (AXIS_ORIENTATION_TYPES) {
   AXIS_ORIENTATION_TYPES["VERTICAL"] = "vertical";
   AXIS_ORIENTATION_TYPES["HORIZONTAL"] = "horizontal";
@@ -4014,10 +3625,7 @@ 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";
@@ -4025,10 +3633,7 @@ 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";
@@ -4036,10 +3641,7 @@ 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";
@@ -4047,10 +3649,7 @@ 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";
@@ -4059,8 +3658,6 @@ 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;
@@ -4076,19 +3673,15 @@ 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]);
 };
 exports.getColorCategoryMapping = getColorCategoryMapping;
 /**
  * get punchcard dimensions given container width and height
@@ -4105,21 +3698,18 @@ 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;
@@ -4133,7 +3723,6 @@ var getChartAreaDimensions = function getChartAreaDimensions(_ref2) {
     legendStartX: legendStartX
   };
 };
 exports.getChartAreaDimensions = getChartAreaDimensions;
 /**
  * gets a scale used to map values to x or y plane
@@ -4146,23 +3735,20 @@ 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 = 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
@@ -4171,7 +3757,6 @@ exports.getScales = getScales;
  * @param {Array<Number>} values
  * @return {Function} radiusScale
  */
 var createValueScale = function createValueScale(values) {
   var absValuesWithoutZero = [];
   values.forEach(function (value) {
@@ -4182,7 +3767,6 @@ var createValueScale = function createValueScale(values) {
   });
   return 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:
@@ -4207,24 +3791,23 @@ 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;
@@ -4232,30 +3815,25 @@ var getDataByRows = function getDataByRows(_ref4) {
   var maxArea = Math.PI * Math.pow(maxRadius, 2);
   var isBubbleColorAnArray = Array.isArray(bubbleColor);
   var globalSizeScale = 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: [],
@@ -4267,34 +3845,30 @@ 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];
+        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
+      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
@@ -4306,14 +3880,12 @@ 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
@@ -4328,30 +3900,24 @@ 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
@@ -4362,35 +3928,28 @@ 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;
 /***/ })