@splunk/visualizations 25.13.1 → 26.0.0

package/Punchcard.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 441);
+/******/ 	return __webpack_require__(__webpack_require__.s = 444);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -120,7 +120,7 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 112:
+/***/ 113:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/find");
@@ -152,14 +152,14 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
     style: {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }
   };
 }).withConfig({
   displayName: "FixedSizeContainer__Item",
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
@@ -167,16 +167,16 @@ var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
     height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
+      width: (0, style_1.toPx)(width)
     }), height && {
-      height: style_1.toPx(height)
+      height: (0, style_1.toPx)(height)
     })
   };
 }).withConfig({
   displayName: "FixedSizeContainer__FixSizeItem",
   componentId: "sc-1yhgpod-1"
 })(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
 });
 var ItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__ItemContent",
@@ -200,7 +200,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     }
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.13.1 - ea48ec41e",
+      "data-splunk-visualization-version": "26.0.0 - 2f7458907",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -220,14 +220,14 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 136:
+/***/ 138:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/findIndex");
 
 /***/ }),
 
-/***/ 137:
+/***/ 139:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/flattenDeep");
@@ -279,17 +279,17 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 167:
+/***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/sortBy");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 17:
+/***/ 170:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("lodash/sortBy");
 
 /***/ }),
 
@@ -474,8 +474,8 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  */
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
+    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
     var presetOptionKeys = Object.keys(presetOptions);
     // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
@@ -492,7 +492,7 @@ exports.getInitialPreset = getInitialPreset;
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
 function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
       label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
       value: i
@@ -535,28 +535,28 @@ module.exports = require("@splunk/themes/pick");
 /***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
 /***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
 /***/ 27:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 29:
+/***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
@@ -570,11 +570,18 @@ module.exports = require("lodash");
 /***/ 30:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
 /***/ 31:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -598,9 +605,9 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  */
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
   var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
@@ -641,7 +648,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     width: width,
     height: height,
     level: "warning",
-    message: i18n_1._('No DataSource Connected')
+    message: (0, i18n_1._)('No DataSource Connected')
   });
 };
 IconPlaceholder.propTypes = propTypes;
@@ -649,14 +656,7 @@ IconPlaceholder.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
+exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
@@ -691,7 +691,7 @@ var getSortingParams = function getSortingParams(_ref) {
   };
   var onSort;
   if (typeof onRequestParamsChange === 'function') {
-    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+    if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
     }
@@ -700,7 +700,7 @@ var getSortingParams = function getSortingParams(_ref) {
       var sortKey = _ref2.sortKey,
         sortDir = _ref2.sortDir;
       if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
           offset: 0,
           sort: _defineProperty({}, sortKey, nextSortDir)
@@ -751,7 +751,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
       countArg = _ref2.count;
-    var newParams = lodash_1.cloneDeep(requestParams);
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
@@ -815,16 +815,16 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var lodash_1 = __webpack_require__(3);
 var getSettingsFromThemedProps_1 = __webpack_require__(37);
-var Options_1 = __webpack_require__(29);
+var Options_1 = __webpack_require__(30);
 var SanitizeProps_1 = __webpack_require__(38);
-var TimezoneContext_1 = __webpack_require__(25);
+var TimezoneContext_1 = __webpack_require__(26);
 var moment_1 = __webpack_require__(39);
 var FeatureFlagContext_1 = __webpack_require__(21);
 var styled_components_1 = __webpack_require__(4);
-var hocUtils_1 = __webpack_require__(26);
-var JSONSchemaUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(27);
+var JSONSchemaUtils_1 = __webpack_require__(28);
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-var id_1 = __webpack_require__(32);
+var id_1 = __webpack_require__(25);
 var SplunkVisualization_1 = __webpack_require__(41);
 var VizBehavior_1 = __webpack_require__(6);
 var getSorting_1 = __webpack_require__(33);
@@ -845,8 +845,8 @@ var withDashboardViz = function withDashboardViz(opts) {
     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 SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
+  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
   var DashboardViz = function DashboardViz(props) {
     var _a;
     var mode = props.mode,
@@ -881,19 +881,19 @@ var withDashboardViz = function withDashboardViz(opts) {
       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({
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
         theme: theme
       }),
-      currentThemeFamily = _getSettingsFromTheme.family,
-      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-      currentThemeDensity = _getSettingsFromTheme.density;
+      currentThemeFamily = _ref.family,
+      currentThemeColorScheme = _ref.colorScheme,
+      currentThemeDensity = _ref.density;
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
     var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       evaluatedOptionsAsync = _React$useState2[0],
       setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
       _React$useState4 = _slicedToArray(_React$useState3, 1),
       visualizationID = _React$useState4[0];
     var _React$useState5 = React.useState({}),
@@ -904,16 +904,17 @@ var withDashboardViz = function withDashboardViz(opts) {
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       dataFramesInState = _React$useState8[0],
       setDataFramesInState = _React$useState8[1];
-    var _React$useState9 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
+    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       useAsyncEvaluatedOptions = _React$useState10[0],
       setUseAsyncEvaluatedOptions = _React$useState10[1];
-    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+    var isMounted = React.useRef(true);
+    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
         if (useAsyncEvaluatedOptions) {
           var optionsToEvaluate = {
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           };
           var asyncDynamicOptionsEvaluatorParams = {
             visualizationID: visualizationID,
@@ -924,10 +925,10 @@ var withDashboardViz = function withDashboardViz(opts) {
           };
           async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(function (e) {
-            // eslint-disable-next-line no-console
-            console.error("unexpected error evaluating options - async: ".concat(e.message));
-            setUseAsyncEvaluatedOptions(false);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
           });
         } else {
           var dataFrames = dataFramesInState;
@@ -937,8 +938,8 @@ var withDashboardViz = function withDashboardViz(opts) {
             setDataFramesInState(dataFrames);
           }
           return Options_1.Options.evaluate({
-            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
           }, dataSources, themeFunc, dataFrames);
         }
       } catch (e) {
@@ -967,6 +968,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
       };
@@ -976,7 +978,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     var _vizConfig$requiredPr = vizConfig.requiredProps,
       requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
       supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
     ) {
       return React.createElement(MissingPropsMessage_1.default, {
@@ -992,7 +994,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     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));
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
         eventCallbackProps[eventCallbackPropName] = null;
         // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
@@ -1035,19 +1037,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      */
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
-      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
+    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
+      var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
-      var sortParams = getSorting_1.getSortingParams({
+      var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
       });
-      var paginatorParams = getPagination_1.getPaginationParams({
+      var paginatorParams = (0, getPagination_1.getPaginationParams)({
         requestParams: requestParams,
         meta: meta,
         onRequestParamsChange: handleRequestParamsChange
@@ -1075,7 +1077,7 @@ var withDashboardViz = function withDashboardViz(opts) {
   // 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));
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
 exports.default = withDashboardViz;
 
@@ -1319,8 +1321,8 @@ var lodash_1 = __webpack_require__(3);
  * @param dependencies an array of dependencies
  */
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+  var ref = (0, react_1.useRef)();
+  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
@@ -1332,7 +1334,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 441:
+/***/ 444:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1354,10 +1356,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.themes = exports.computeVizProps = exports.PurePunchcard = exports.config = void 0;
 var lodash_1 = __webpack_require__(3);
 var visualization_color_palettes_1 = __webpack_require__(51);
-var config_1 = __webpack_require__(442);
+var config_1 = __webpack_require__(445);
 var withDashboardViz_1 = __webpack_require__(36);
-var Punchcard_1 = __webpack_require__(443);
-var punchcardUtils_1 = __webpack_require__(451);
+var Punchcard_1 = __webpack_require__(446);
+var punchcardUtils_1 = __webpack_require__(454);
 exports.config = config_1.default;
 exports.PurePunchcard = Punchcard_1.default;
 var validOptions = Object.keys(exports.config.optionsSchema);
@@ -1368,7 +1370,7 @@ var computeVizProps = function computeVizProps(_a) {
     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();
+  var options = (0, lodash_1.chain)(otherOptions).pick(validOptions).thru(punchcardUtils_1.convertToPunchcardProperties).value();
   if (options.seriesColors && typeof options.seriesColors === 'string') {
     try {
       options.seriesColors = JSON.parse(options.seriesColors);
@@ -1386,7 +1388,7 @@ var computeVizProps = function computeVizProps(_a) {
   }, options);
 };
 exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
+var viz = (0, withDashboardViz_1.default)({
   ReactViz: Punchcard_1.default,
   computeVizProps: exports.computeVizProps,
   vizConfig: config_1.default
@@ -1396,7 +1398,7 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 442:
+/***/ 445:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1408,7 +1410,7 @@ Object.defineProperty(exports, "__esModule", {
 var i18n_1 = __webpack_require__(2);
 var schemaUtils_1 = __webpack_require__(16);
 var visualization_icons_1 = __webpack_require__(52);
-var placeholders_1 = __webpack_require__(49);
+var placeholders_1 = __webpack_require__(50);
 var visualization_color_palettes_1 = __webpack_require__(51);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(11);
@@ -1511,7 +1513,7 @@ var optionsSchema = {
   bubbleLabelDisplay: {
     default: 'all',
     description: 'Specify whether all bubble labels, the max value bubble labels, or none of the bubble labels should be displayed.',
-    pattern: schemaUtils_1.getPattern(['all', 'max', 'off']),
+    pattern: (0, schemaUtils_1.getPattern)(['all', 'max', 'off']),
     type: 'string'
   },
   bubbleRadiusMax: {
@@ -1527,7 +1529,7 @@ var optionsSchema = {
   bubbleRowScale: {
     default: 'global',
     description: 'Specify how bubbles are scaled relative to other rows.',
-    pattern: schemaUtils_1.getPattern(['global', 'row']),
+    pattern: (0, schemaUtils_1.getPattern)(['global', 'row']),
     type: 'string'
   },
   bubbleSizeMax: {
@@ -1543,19 +1545,19 @@ var optionsSchema = {
   bubbleSizeMethod: {
     default: 'area',
     description: 'Specify whether bubble area or diameter corresponds to the size value.',
-    pattern: schemaUtils_1.getPattern(['radius', 'area']),
+    pattern: (0, schemaUtils_1.getPattern)(['radius', 'area']),
     type: 'string'
   },
   colorMode: {
     default: 'dynamic',
     description: 'Specify the coloring method used for the bubbles.',
-    pattern: schemaUtils_1.getPattern(['categorical', 'dynamic']),
+    pattern: (0, schemaUtils_1.getPattern)(['categorical', 'dynamic']),
     type: 'string'
   },
   legendDisplay: {
     default: 'right',
     description: 'Specify the location of the legend on the panel.',
-    pattern: schemaUtils_1.getPattern(['right', 'off']),
+    pattern: (0, schemaUtils_1.getPattern)(['right', 'off']),
     type: 'string'
   },
   seriesColors: {
@@ -1584,7 +1586,7 @@ var optionsSchema = {
 };
 var themes = {
   defaultBackgroundColor: function defaultBackgroundColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         dark: variables_1.default.black(props),
         light: variables_1.default.backgroundColor(props)
@@ -1594,73 +1596,73 @@ var themes = {
   }
 };
 var editorConfig = [{
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [[{
-    label: i18n_1._('Show bubble labels'),
+    label: (0, i18n_1._)('Show bubble labels'),
     option: 'bubbleLabelDisplay',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('All'),
+        label: (0, i18n_1._)('All'),
         value: 'all'
       }, {
-        label: i18n_1._('Max'),
+        label: (0, i18n_1._)('Max'),
         value: 'max'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     }
   }], [{
-    label: i18n_1._('Pulsate max value'),
+    label: (0, i18n_1._)('Pulsate max value'),
     option: 'showMaxValuePulsation',
     editor: 'editor.toggle'
   }], [{
-    label: i18n_1._('Bubble scale'),
+    label: (0, i18n_1._)('Bubble scale'),
     option: 'bubbleSizeMethod',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Radius'),
+        label: (0, i18n_1._)('Radius'),
         value: 'radius'
       }, {
-        label: i18n_1._('Area'),
+        label: (0, i18n_1._)('Area'),
         value: 'area'
       }]
     }
   }], [{
-    label: i18n_1._('Bubble row scale'),
+    label: (0, i18n_1._)('Bubble row scale'),
     option: 'bubbleRowScale',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Global'),
+        label: (0, i18n_1._)('Global'),
         value: 'global'
       }, {
-        label: i18n_1._('By Row'),
+        label: (0, i18n_1._)('By Row'),
         value: 'row'
       }]
     }
   }]]
 }, {
-  label: i18n_1._('Color and style'),
+  label: (0, i18n_1._)('Color and style'),
   layout: [[{
-    label: i18n_1._('Color mode'),
+    label: (0, i18n_1._)('Color mode'),
     option: 'colorMode',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Dynamic'),
+        label: (0, i18n_1._)('Dynamic'),
         value: 'dynamic'
       }, {
-        label: i18n_1._('Categorical'),
+        label: (0, i18n_1._)('Categorical'),
         value: 'categorical'
       }]
     }
   }], [
   // This should be hidden in categorical color mode
   {
-    label: i18n_1._('Color by field'),
+    label: (0, i18n_1._)('Color by field'),
     editor: 'editor.columnSelector',
     option: 'bubbleColor',
     context: 'bubbleColorConfig',
@@ -1680,18 +1682,18 @@ var editorConfig = [{
         };
       }
     }
-  }], BackgroundColor_1.default({
+  }], (0, BackgroundColor_1.default)({
     themes: themes
   }), [{
-    label: i18n_1._('Legend display'),
+    label: (0, i18n_1._)('Legend display'),
     option: 'legendDisplay',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Right'),
+        label: (0, i18n_1._)('Right'),
         value: 'right'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     },
@@ -1712,7 +1714,7 @@ var config = {
   /**
    * viz name
    */
-  name: i18n_1._('Punchcard'),
+  name: (0, i18n_1._)('Punchcard'),
   category: VizCategory_1.VizCategory.CORRELATION,
   /**
    * viz icon
@@ -1736,11 +1738,11 @@ var config = {
   themes: themes,
   requiredProps: ['x', 'y', 'size']
 };
-exports.default = configUtils_1.enhanceConfig(config);
+exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 443:
+/***/ 446:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1759,16 +1761,16 @@ var SizeAwareWrapper_1 = __webpack_require__(19);
 var style_1 = __webpack_require__(14);
 var visualization_color_palettes_1 = __webpack_require__(51);
 var punchcardUtils_1 = __webpack_require__(99);
-var sortUtils_1 = __webpack_require__(444);
-var PunchcardAxis_1 = __webpack_require__(445);
-var PunchcardChartArea_1 = __webpack_require__(446);
-var PunchcardLegend_1 = __webpack_require__(449);
-var PunchcardGridLines_1 = __webpack_require__(450);
+var sortUtils_1 = __webpack_require__(447);
+var PunchcardAxis_1 = __webpack_require__(448);
+var PunchcardChartArea_1 = __webpack_require__(449);
+var PunchcardLegend_1 = __webpack_require__(452);
+var PunchcardGridLines_1 = __webpack_require__(453);
 var Container = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__Container",
   componentId: "orvtgq-0"
 })(["cursor:default;overflow:hidden;", ";background-color:", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 }, function (props) {
   return props.backgroundColor;
 });
@@ -1782,13 +1784,13 @@ var PunchcardContainer = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__PunchcardContainer",
   componentId: "orvtgq-2"
 })(["overflow:hidden;position:relative;", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
 var PunchcardSVG = styled_components_1.default.svg.withConfig({
   displayName: "Punchcard__PunchcardSVG",
   componentId: "orvtgq-3"
 })(["", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
 var Punchcard = function Punchcard(props) {
   var _React$useState = React.useState(null),
@@ -1858,14 +1860,14 @@ var Punchcard = function Punchcard(props) {
     onLegendClick = props.onLegendClick;
   var calculatedColorMode = category ? colorMode : punchcardUtils_1.COLOR_MODE_TYPES.SEQUENTIAL;
   var displayLegend = showLegend && calculatedColorMode === punchcardUtils_1.COLOR_MODE_TYPES.CATEGORICAL;
-  var uniqX = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(x.map(function (v) {
+  var uniqX = useDefaultSort ? (0, sortUtils_1.sortAxis)((0, lodash_1.uniq)(x.map(function (v) {
     return "".concat(v);
-  }))) : lodash_1.uniq(x);
-  var uniqY = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(y.map(function (v) {
+  }))) : (0, lodash_1.uniq)(x);
+  var uniqY = useDefaultSort ? (0, sortUtils_1.sortAxis)((0, lodash_1.uniq)(y.map(function (v) {
     return "".concat(v);
-  }))) : lodash_1.uniq(y);
-  var uniqCategory = lodash_1.uniq(category);
-  var colorCategoryMapping = punchcardUtils_1.getColorCategoryMapping({
+  }))) : (0, lodash_1.uniq)(y);
+  var uniqCategory = (0, lodash_1.uniq)(category);
+  var colorCategoryMapping = (0, punchcardUtils_1.getColorCategoryMapping)({
     category: uniqCategory,
     colorMode: calculatedColorMode,
     seriesColors: seriesColors
@@ -1893,32 +1895,32 @@ var Punchcard = function Punchcard(props) {
   var renderVisualization = function renderVisualization(_ref) {
     var containerWidth = _ref.width,
       containerHeight = _ref.height;
-    var _punchcardUtils_1$get = punchcardUtils_1.getChartAreaDimensions({
+    var _ref2 = (0, 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({
+      xAxisStartY = _ref2.xAxisStartY,
+      yAxisStartX = _ref2.yAxisStartX,
+      chartAreaStartX = _ref2.chartAreaStartX,
+      chartAreaStartY = _ref2.chartAreaStartY,
+      chartAreaEndX = _ref2.chartAreaEndX,
+      chartAreaEndY = _ref2.chartAreaEndY,
+      legendStartX = _ref2.legendStartX;
+    var _ref3 = (0, punchcardUtils_1.getScales)({
         values: uniqX,
         start: chartAreaStartX,
         end: chartAreaEndX
       }),
-      xScale = _punchcardUtils_1$get2.scale,
-      xPositionScale = _punchcardUtils_1$get2.positionScale;
-    var _punchcardUtils_1$get3 = punchcardUtils_1.getScales({
+      xScale = _ref3.scale,
+      xPositionScale = _ref3.positionScale;
+    var _ref4 = (0, punchcardUtils_1.getScales)({
         values: uniqY,
         start: chartAreaStartY,
         end: chartAreaEndY
       }),
-      yScale = _punchcardUtils_1$get3.scale,
-      yPositionScale = _punchcardUtils_1$get3.positionScale;
+      yScale = _ref4.scale,
+      yPositionScale = _ref4.positionScale;
     var minBand = Math.min(xScale.bandwidth(), yScale.bandwidth());
     return React.createElement(PunchcardWrapper, {
       backgroundColor: backgroundColor
@@ -2075,7 +2077,7 @@ exports.default = Punchcard;
 
 /***/ }),
 
-/***/ 444:
+/***/ 447:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2085,13 +2087,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortedByDTime", function() { return sortedByDTime; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortByDigitOrAlpha", function() { return sortByDigitOrAlpha; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortAxis", function() { return sortAxis; });
-/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(136);
+/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(138);
 /* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(112);
+/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(113);
 /* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_find__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(167);
+/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(170);
 /* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(137);
+/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(139);
 /* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_4__);
@@ -2341,7 +2343,7 @@ var sortAxis = function sortAxis(axis) {
 
 /***/ }),
 
-/***/ 445:
+/***/ 448:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2359,7 +2361,7 @@ var punchcardUtils_1 = __webpack_require__(99);
 var AxisLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardAxis__AxisLabelText",
   componentId: "sc-1jv7cdw-0"
-})(["cursor:pointer;dominant-baseline:middle;fill:", ";font-size:12px;text-anchor:", ";opacity:", ";transition:all 0.15s;"], pick_1.default({
+})(["cursor:pointer;dominant-baseline:middle;fill:", ";font-size:12px;text-anchor:", ";opacity:", ";transition:all 0.15s;"], (0, pick_1.default)({
   /* was previously named textColor in themeReg */
   enterprise: variables_1.default.textColor,
   prisma: variables_1.default.contentColorDefault
@@ -2384,9 +2386,9 @@ var PunchcardAxis = function PunchcardAxis(props) {
     var yPosition = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? startPositionY + positionDelta : startPositionY;
     // create padding between x-axis labels
     var xAxisWidthScale = scale.copy().paddingInner(0.1).round(true);
-    var truncatedLabel = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? punchcardUtils_1.truncateAxisLabelText({
+    var truncatedLabel = orientation === punchcardUtils_1.AXIS_ORIENTATION_TYPES.VERTICAL ? (0, punchcardUtils_1.truncateAxisLabelText)({
       label: "".concat(label)
-    }) : punchcardUtils_1.truncateAxisLabelText({
+    }) : (0, punchcardUtils_1.truncateAxisLabelText)({
       label: "".concat(label),
       widthInPX: xAxisWidthScale.bandwidth()
     });
@@ -2433,7 +2435,7 @@ exports.default = PunchcardAxis;
 
 /***/ }),
 
-/***/ 446:
+/***/ 449:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2447,7 +2449,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var T = __webpack_require__(0);
 var punchcardUtils_1 = __webpack_require__(99);
-var PunchcardRow_1 = __webpack_require__(447);
+var PunchcardRow_1 = __webpack_require__(450);
 var PunchcardChartArea = function PunchcardChartArea(props) {
   var showBubbleLabels = props.showBubbleLabels,
     bubbleRowScale = props.bubbleRowScale,
@@ -2476,7 +2478,7 @@ var PunchcardChartArea = function PunchcardChartArea(props) {
     yScale = props.yScale,
     handlePointClick = props.handlePointClick;
   /** @type {Object<String\|Number, import('./utils/punchcardUtils').RowData>} */
-  var dataByRows = punchcardUtils_1.getDataByRows({
+  var dataByRows = (0, punchcardUtils_1.getDataByRows)({
     bubbleRowScale: bubbleRowScale,
     bubbleScale: bubbleScale,
     category: category,
@@ -2595,7 +2597,76 @@ exports.default = PunchcardChartArea;
 
 /***/ }),
 
-/***/ 447:
+/***/ 45:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+var React = __webpack_require__(1);
+var T = __webpack_require__(0);
+var i18n_1 = __webpack_require__(2);
+var Message_1 = __webpack_require__(10);
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
+ */
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
+};
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return (0, exports.isMissing)(target[k]);
+  });
+};
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
+};
+/**
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
+ */
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+    height = props.height,
+    missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
+
+/***/ }),
+
+/***/ 450:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2607,7 +2678,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var T = __webpack_require__(0);
 var styled_components_1 = __webpack_require__(4);
-var PunchcardBubble_1 = __webpack_require__(448);
+var PunchcardBubble_1 = __webpack_require__(451);
 var punchcardUtils_1 = __webpack_require__(99);
 var PunchcardRow = function PunchcardRow(props) {
   var showBubbleLabels = props.showBubbleLabels,
@@ -2635,11 +2706,11 @@ var PunchcardRow = function PunchcardRow(props) {
     var cx = xScale(xValue);
     var r = radiusValues[index];
     var fillOpacity = opacities[index];
-    var hover = punchcardUtils_1.isSomethingSelected({
+    var hover = (0, punchcardUtils_1.isSomethingSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory
-    }) && punchcardUtils_1.isBubbleSelected({
+    }) && (0, punchcardUtils_1.isBubbleSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory,
@@ -2647,7 +2718,7 @@ var PunchcardRow = function PunchcardRow(props) {
       yValue: yValue,
       categoryValue: categoryValue
     });
-    var muted = punchcardUtils_1.isSomethingSelected({
+    var muted = (0, punchcardUtils_1.isSomethingSelected)({
       selectedX: selectedX,
       selectedY: selectedY,
       selectedCategory: selectedCategory
@@ -2716,18 +2787,18 @@ var defaultProps = {
 };
 PunchcardRow.propTypes = propTypes;
 PunchcardRow.defaultProps = defaultProps;
-exports.default = styled_components_1.withTheme(PunchcardRow);
+exports.default = (0, styled_components_1.withTheme)(PunchcardRow);
 
 /***/ }),
 
-/***/ 448:
+/***/ 451:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(98);
-var _templateObject;
+var _taggedTemplateLiteral = __webpack_require__(59);
+var _templateObject, _templateObject2;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -2736,13 +2807,13 @@ var T = __webpack_require__(0);
 var styled_components_1 = __webpack_require__(4);
 var pick_1 = __webpack_require__(23);
 var variables_1 = __webpack_require__(11);
-var numberUtils_1 = __webpack_require__(30);
+var numberUtils_1 = __webpack_require__(31);
 var punchcardUtils_1 = __webpack_require__(99);
 var BubbleCircle = styled_components_1.default.circle.withConfig({
   displayName: "PunchcardBubble__BubbleCircle",
   componentId: "sc-1jmms9f-0"
 })(["fill:", ";fill-opacity:1;opacity:", ";stroke:", ";"], function (props) {
-  return props.outline ? pick_1.default({
+  return props.outline ? (0, pick_1.default)({
     // bubbleTextColor
     enterprise: {
       light: variables_1.default.white,
@@ -2757,17 +2828,14 @@ var BubbleCircle = styled_components_1.default.circle.withConfig({
   return props.outline ? props.color : 'none';
 });
 var pulsateAnimation = function pulsateAnimation(r) {
-  return styled_components_1.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    41% {\n        opacity: 0;\n        r: ", ";\n    }\n    100% {\n        opacity: 0;\n        r: ", ";\n    }\n"])), r + 5, r + 5);
+  return (0, styled_components_1.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    41% {\n        opacity: 0;\n        r: ", ";\n    }\n    100% {\n        opacity: 0;\n        r: ", ";\n    }\n"])), r + 5, r + 5);
 };
-var PulsateBubble = styled_components_1.default(BubbleCircle).withConfig({
-  displayName: "PunchcardBubble__PulsateBubble",
-  componentId: "sc-1jmms9f-1"
-})(["animation:", " 2.4s linear 0.4s infinite;"], function (props) {
+var PulsateBubble = (0, styled_components_1.default)(BubbleCircle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    animation: ", " 2.4s linear 0.4s infinite;\n"])), function (props) {
   return pulsateAnimation(props.r);
 });
 var BubbleGroup = styled_components_1.default.g.withConfig({
   displayName: "PunchcardBubble__BubbleGroup",
-  componentId: "sc-1jmms9f-2"
+  componentId: "sc-1jmms9f-1"
 })(["cursor:pointer;opacity:", ";filter:", ";transition:opacity 0.15s;"], function (props) {
   return props.muted ? 0.15 : 1;
 }, function (props) {
@@ -2775,15 +2843,15 @@ var BubbleGroup = styled_components_1.default.g.withConfig({
 });
 var BubbleLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardBubble__BubbleLabelText",
-  componentId: "sc-1jmms9f-3"
+  componentId: "sc-1jmms9f-2"
 })(["dominant-baseline:middle;opacity:", ";fill:", "};font-size:", ";font-weight:", ";text-anchor:middle;"], function (props) {
   return props.displayLabel ? 1 : 0;
 }, function (props) {
-  return props.hover || props.outline ? pick_1.default({
+  return props.hover || props.outline ? (0, pick_1.default)({
     // bubbleAltTextColor
     enterprise: variables_1.default.textColor,
     prisma: variables_1.default.contentColorActive
-  })(props) : pick_1.default({
+  })(props) : (0, pick_1.default)({
     enterprise: {
       dark: variables_1.default.textColor,
       light: variables_1.default.white
@@ -2815,11 +2883,11 @@ var PunchcardBubble = function PunchcardBubble(props) {
   var outline = value < 0;
   var showPulsateBubble = pulsate && !muted && !hover;
   var displayLabel = hover || showBubbleLabel && r >= MIN_BUBBLE_SIZE_TO_DISPLAY_LABEL;
-  var bubbleLabelValueText = value <= MAX_DISPLAYABLE_VALUE ? numberUtils_1.formatNumber(value, 0, {
+  var bubbleLabelValueText = value <= MAX_DISPLAYABLE_VALUE ? (0, numberUtils_1.formatNumber)(value, 0, {
     useTrendUnits: true
   }) : VALUE_OVERFLOW_TEXT;
   if (hover) {
-    bubbleLabelValueText = numberUtils_1.formatNumber(value, 2);
+    bubbleLabelValueText = (0, numberUtils_1.formatNumber)(value, 2);
   }
   return React.createElement(BubbleGroup, {
     muted: muted,
@@ -2887,7 +2955,7 @@ exports.default = PunchcardBubble;
 
 /***/ }),
 
-/***/ 449:
+/***/ 452:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2921,7 +2989,7 @@ var LegendIcon = styled_components_1.default.rect.withConfig({
 var LegendText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardLegend__LegendText",
   componentId: "c2f7we-2"
-})(["dominant-baseline:middle;fill:", ";font-size:12px;"], pick_1.default({
+})(["dominant-baseline:middle;fill:", ";font-size:12px;"], (0, pick_1.default)({
   /* was previously named textColor in themeReg */
   enterprise: variables_1.default.textColor,
   prisma: variables_1.default.contentColorDefault
@@ -2998,76 +3066,7 @@ exports.default = PunchcardLegend;
 
 /***/ }),
 
-/***/ 45:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
-var React = __webpack_require__(1);
-var T = __webpack_require__(0);
-var i18n_1 = __webpack_require__(2);
-var Message_1 = __webpack_require__(10);
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
-};
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
-  });
-};
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
-
-/***/ }),
-
-/***/ 450:
+/***/ 453:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3086,7 +3085,7 @@ var variables_1 = __webpack_require__(11);
 var GridLine = styled_components_1.default.line.withConfig({
   displayName: "PunchcardGridLines__GridLine",
   componentId: "sc-12y1iif-0"
-})(["stroke:", ";stroke-width:1px;"], pick_1.default({
+})(["stroke:", ";stroke-width:1px;"], (0, pick_1.default)({
   enterprise: {
     light: variables_1.default.gray96,
     dark: variables_1.default.gray25
@@ -3100,8 +3099,8 @@ var PunchcardGridLines = function PunchcardGridLines(props) {
     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);
+  var yGridLinesXPositions = (0, lodash_1.range)(xStartPosition, xEndPosition + 1, xDelta);
+  var xGridLinesYPositions = (0, lodash_1.range)(yStartPosition, yEndPosition + 1, yDelta);
   return React.createElement("g", {
     "data-test": "data-test-gridlines"
   }, yGridLinesXPositions.map(function (xValue) {
@@ -3144,7 +3143,7 @@ exports.default = PunchcardGridLines;
 
 /***/ }),
 
-/***/ 451:
+/***/ 454:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3155,7 +3154,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertToPunchcardProperties = exports.mapToOldKey = exports.punchcardOptionValuesMapping = void 0;
 var lodash_1 = __webpack_require__(3);
-var chartingUtils_1 = __webpack_require__(55);
+var chartingUtils_1 = __webpack_require__(56);
 var punchcardOptionsMapping = {
   legendDisplay: 'showLegend',
   bubbleLabelDisplay: 'showBubbleLabels',
@@ -3188,7 +3187,7 @@ exports.punchcardOptionValuesMapping = {
  * @returns {Object}
  */
 var mapToOldKey = function mapToOldKey(options) {
-  return lodash_1.mapKeys(options, function (val, key) {
+  return (0, lodash_1.mapKeys)(options, function (val, key) {
     return punchcardOptionsMapping[key] ? punchcardOptionsMapping[key] : key;
   });
 };
@@ -3201,7 +3200,7 @@ exports.mapToOldKey = mapToOldKey;
  * @returns {Object}
  */
 var convertToPunchcardProperties = function convertToPunchcardProperties(originalOptions) {
-  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(chartingUtils_1.mapToValues(exports.punchcardOptionValuesMapping)).value();
+  return (0, lodash_1.chain)((0, exports.mapToOldKey)(originalOptions)).thru((0, chartingUtils_1.mapToValues)(exports.punchcardOptionValuesMapping)).value();
 };
 exports.convertToPunchcardProperties = convertToPunchcardProperties;
 
@@ -3224,7 +3223,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.13.1 - ea48ec41e"
+  'data-splunk-visualization-version': "26.0.0 - 2f7458907"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3243,7 +3242,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -3265,7 +3264,7 @@ Object.defineProperty(exports, "__esModule", {
 var React = __webpack_require__(1);
 var colorUtils_1 = __webpack_require__(12);
 var variables_1 = __webpack_require__(11);
-var IconPlaceholder_1 = __webpack_require__(31);
+var IconPlaceholder_1 = __webpack_require__(32);
 var VizBehavior_1 = __webpack_require__(6);
 var hocUtils_1 = __webpack_require__(15);
 var withPlaceholder = function withPlaceholder(Visualization) {
@@ -3280,7 +3279,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
       height = props.height,
       width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
@@ -3295,7 +3294,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
     }
     return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -3305,7 +3304,7 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 49:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
@@ -3341,7 +3340,7 @@ var background = function background(_ref) {
     themes = _ref.themes,
     labelPosition = _ref.labelPosition;
   return [{
-    label: i18n_1._(label || 'Background'),
+    label: (0, i18n_1._)(label || 'Background'),
     option: 'backgroundColor',
     editor: 'editor.color',
     editorProps: {
@@ -3354,7 +3353,7 @@ exports.default = background;
 
 /***/ }),
 
-/***/ 55:
+/***/ 56:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3430,9 +3429,9 @@ var mapToValues = function mapToValues(optionValuesSCMapping) {
   return function (options) {
     var convertedOptions = Object.assign({}, options);
     Object.keys(optionValuesSCMapping).forEach(function (key) {
-      if (lodash_1.has(options, key)) {
+      if ((0, lodash_1.has)(options, key)) {
         var updatedValue = optionValuesSCMapping[key][options[key]];
-        if (!lodash_1.isUndefined(updatedValue)) {
+        if (!(0, lodash_1.isUndefined)(updatedValue)) {
           convertedOptions[key] = updatedValue;
         }
       }
@@ -3453,7 +3452,7 @@ var convertY2AxisOptions = function convertY2AxisOptions(_a) {
   var convertedOptions = Object.assign({}, originalOptions);
   if (y2Fields) {
     convertedOptions['axisY2.enabled'] = true;
-    convertedOptions['axisY2.fields'] = lodash_1.isArray(y2Fields) ? y2Fields.filter(function (name) {
+    convertedOptions['axisY2.fields'] = (0, lodash_1.isArray)(y2Fields) ? y2Fields.filter(function (name) {
       return name;
     }).join(',') : y2Fields;
   }
@@ -3495,7 +3494,7 @@ exports.isMultiSeriesData = isMultiSeriesData;
  * @return {array}
  */
 var toArrayForSeries = function toArrayForSeries(data, value) {
-  return exports.isMultiSeriesData(data) ? value : [value];
+  return (0, exports.isMultiSeriesData)(data) ? value : [value];
 };
 exports.toArrayForSeries = toArrayForSeries;
 var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
@@ -3507,10 +3506,10 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
     yFields = _ref2.yFields,
     y2 = _ref2.y2,
     y2Fields = _ref2.y2Fields;
-  var columns = [x.map(String)].concat(_toConsumableArray(exports.toArrayForSeries(y, y).map(function (series) {
+  var columns = [x.map(String)].concat(_toConsumableArray((0, exports.toArrayForSeries)(y, y).map(function (series) {
     return series.map(String);
   })));
-  var yFieldsArray = exports.toArrayForSeries(y, yFields);
+  var yFieldsArray = (0, exports.toArrayForSeries)(y, yFields);
   var fields = [{
     name: xField
   }].concat(_toConsumableArray(yFieldsArray.map(function (field) {
@@ -3522,8 +3521,8 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
   // when y & y2 options are configured with different (mutually exclusive) series
   // y2 columns need to be added to columns
   if (y2Fields) {
-    var y2FieldsArray = exports.toArrayForSeries(y2, y2Fields);
-    var y2AsArray = exports.toArrayForSeries(y2, y2).map(function (series) {
+    var y2FieldsArray = (0, exports.toArrayForSeries)(y2, y2Fields);
+    var y2AsArray = (0, exports.toArrayForSeries)(y2, y2).map(function (series) {
       return series === null || series === void 0 ? void 0 : series.map(String);
     });
     y2FieldsArray.forEach(function (y2Field, index) {
@@ -3544,6 +3543,13 @@ exports.constructFieldsAndColumns = constructFieldsAndColumns;
 
 /***/ }),
 
+/***/ 59:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+
 /***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3602,20 +3608,13 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 91:
+/***/ 92:
 /***/ (function(module, exports) {
 
 module.exports = require("d3-scale");
 
 /***/ }),
 
-/***/ 98:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
-
-/***/ }),
-
 /***/ 99:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3627,7 +3626,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.truncateAxisLabelText = exports.isBubbleSelected = exports.isSomethingSelected = exports.getDataByRows = exports.createValueScale = exports.getScales = exports.getChartAreaDimensions = exports.getColorCategoryMapping = exports.GRAYSCALE_FILTER_ID = exports.BUBBLE_LABELS_TYPES = exports.COLOR_MODE_TYPES = exports.BUBBLE_SCALE_TYPES = exports.BUBBLE_ROW_SCALE_TYPES = exports.AXIS_ORIENTATION_TYPES = void 0;
-var d3_scale_1 = __webpack_require__(91);
+var d3_scale_1 = __webpack_require__(92);
 /**
  * @enum {AXIS_ORIENTATION_TYPES}
  */
@@ -3694,7 +3693,7 @@ var getColorCategoryMapping = function getColorCategoryMapping(_ref) {
   if (colorMode === COLOR_MODE_TYPES.SEQUENTIAL) {
     return null;
   }
-  return d3_scale_1.scaleOrdinal().domain(category).range(seriesColors).unknown(seriesColors[0]);
+  return (0, d3_scale_1.scaleOrdinal)().domain(category).range(seriesColors).unknown(seriesColors[0]);
 };
 exports.getColorCategoryMapping = getColorCategoryMapping;
 /**
@@ -3753,7 +3752,7 @@ 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]);
+  var scale = (0, d3_scale_1.scaleBand)().domain(values).range([start, end]);
   // Returns the middle of the band
   var positionScale = function positionScale(value) {
     return scale(value) + scale.bandwidth() / 2;
@@ -3779,7 +3778,7 @@ var createValueScale = function createValueScale(values) {
       absValuesWithoutZero.push(Math.abs(value));
     }
   });
-  return d3_scale_1.scaleLinear().domain([Math.min.apply(Math, absValuesWithoutZero), Math.max.apply(Math, absValuesWithoutZero)]).range([0, 1]).clamp(true).unknown(0);
+  return (0, d3_scale_1.scaleLinear)().domain([Math.min.apply(Math, absValuesWithoutZero), Math.max.apply(Math, absValuesWithoutZero)]).range([0, 1]).clamp(true).unknown(0);
 };
 exports.createValueScale = createValueScale;
 /**
@@ -3828,7 +3827,7 @@ var getDataByRows = function getDataByRows(_ref4) {
   var minArea = Math.PI * Math.pow(minRadius, 2);
   var maxArea = Math.PI * Math.pow(maxRadius, 2);
   var isBubbleColorAnArray = Array.isArray(bubbleColor);
-  var globalSizeScale = exports.createValueScale(size);
+  var globalSizeScale = (0, exports.createValueScale)(size);
   var getRadiusValue = function getRadiusValue(value, sizeScale) {
     return bubbleScale === BUBBLE_SCALE_TYPES.RADIUS ? (maxRadius - minRadius) * sizeScale(Math.abs(value)) + minRadius : Math.sqrt(((maxArea - minArea) * sizeScale(Math.abs(value)) + minArea) / Math.PI);
   };
@@ -3872,7 +3871,7 @@ var getDataByRows = function getDataByRows(_ref4) {
       var _ref6 = _slicedToArray(_ref5, 2),
         row = _ref6[0],
         rowData = _ref6[1];
-      var rowSizeScale = exports.createValueScale(rowData.rowSizeValues);
+      var rowSizeScale = (0, exports.createValueScale)(rowData.rowSizeValues);
       dataByRows[row].rowSizeScale = rowSizeScale;
       // Fill in opacity and radius values based on row scale
       rowData.rowSizeValues.forEach(function (rowSizeValue, index) {