@splunk/visualizations 25.13.1 → 26.0.0

package/MarkerGauge.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 424);
+/******/ 	return __webpack_require__(__webpack_require__.s = 427);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -127,7 +127,7 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 125:
+/***/ 126:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -138,49 +138,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 var i18n_1 = __webpack_require__(2);
 var gauge = {
-  label: i18n_1._('Data display'),
+  label: (0, i18n_1._)('Data display'),
   layout: [[{
-    label: i18n_1._('Value display'),
+    label: (0, i18n_1._)('Value display'),
     option: 'valueDisplay',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Number'),
+        label: (0, i18n_1._)('Number'),
         value: 'number'
       }, {
-        label: i18n_1._('Percentage'),
+        label: (0, i18n_1._)('Percentage'),
         value: 'percentage'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     }
   }], [{
-    label: i18n_1._('Label display'),
+    label: (0, i18n_1._)('Label display'),
     option: 'labelDisplay',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Numbers'),
+        label: (0, i18n_1._)('Numbers'),
         value: 'number'
       }, {
-        label: i18n_1._('Percentages'),
+        label: (0, i18n_1._)('Percentages'),
         value: 'percentage'
       }, {
-        label: i18n_1._('Off'),
+        label: (0, i18n_1._)('Off'),
         value: 'off'
       }]
     }
   }], [{
-    label: i18n_1._('Orientation'),
+    label: (0, i18n_1._)('Orientation'),
     option: 'orientation',
     editor: 'editor.radioBar',
     editorProps: {
       values: [{
-        label: i18n_1._('Vertical'),
+        label: (0, i18n_1._)('Vertical'),
         value: 'vertical'
       }, {
-        label: i18n_1._('Horizontal'),
+        label: (0, i18n_1._)('Horizontal'),
         value: 'horizontal'
       }]
     }
@@ -190,7 +190,7 @@ exports.default = gauge;
 
 /***/ }),
 
-/***/ 126:
+/***/ 127:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -205,7 +205,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(30);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(31);
 /* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -435,7 +435,7 @@ MajorTicks.defaultProps = {
 
 /***/ }),
 
-/***/ 127:
+/***/ 128:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -450,7 +450,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(30);
+/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(31);
 /* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -656,14 +656,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) {
@@ -671,16 +671,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",
@@ -704,7 +704,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
@@ -762,7 +762,14 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 159:
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
+
+/***/ }),
+
+/***/ 162:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -783,16 +790,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = exports.computeVizProps = exports.PureMarkerGauge = void 0;
 var lodash_1 = __webpack_require__(3);
-var MarkerGauge_1 = __webpack_require__(425);
-var config_1 = __webpack_require__(426);
+var MarkerGauge_1 = __webpack_require__(428);
+var config_1 = __webpack_require__(429);
 exports.config = config_1.default;
 var withDashboardViz_1 = __webpack_require__(36);
-var gaugeUtils_1 = __webpack_require__(97);
+var gaugeUtils_1 = __webpack_require__(98);
 exports.PureMarkerGauge = MarkerGauge_1.default;
 var validOptions = Object.keys(config_1.default.optionsSchema);
 var computeVizProps = function computeVizProps(_a) {
   var props = __rest(_a, []);
-  var options = lodash_1.chain(props).pick(validOptions).thru(gaugeUtils_1.convertToGaugeProperties).value();
+  var options = (0, lodash_1.chain)(props).pick(validOptions).thru(gaugeUtils_1.convertToGaugeProperties).value();
   var defaultColors = {
     fillColor: config_1.default.themes.defaultFillColor(props),
     majorTickFillColor: config_1.default.themes.majorTickFillColor(props),
@@ -803,7 +810,7 @@ var computeVizProps = function computeVizProps(_a) {
   return Object.assign(Object.assign({}, options), defaultColors);
 };
 exports.computeVizProps = computeVizProps;
-var viz = withDashboardViz_1.default({
+var viz = (0, withDashboardViz_1.default)({
   ReactViz: MarkerGauge_1.default,
   computeVizProps: exports.computeVizProps,
   vizConfig: config_1.default
@@ -812,13 +819,6 @@ exports.default = viz;
 
 /***/ }),
 
-/***/ 16:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
-
-/***/ }),
-
 /***/ 17:
 /***/ (function(module, exports) {
 
@@ -1007,8 +1007,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)
@@ -1025,7 +1025,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
@@ -1068,28 +1068,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");
 
 /***/ }),
 
@@ -1103,11 +1103,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";
@@ -1131,9 +1138,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;
 };
@@ -1174,7 +1181,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;
@@ -1182,14 +1189,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);
 
 /***/ }),
 
@@ -1224,7 +1224,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];
     }
@@ -1233,7 +1233,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)
@@ -1284,7 +1284,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;
@@ -1348,16 +1348,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);
@@ -1378,8 +1378,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,
@@ -1414,19 +1414,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({}),
@@ -1437,16 +1437,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,
@@ -1457,10 +1458,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;
@@ -1470,8 +1471,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) {
@@ -1500,6 +1501,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     React.useEffect(function () {
       return function () {
         if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
       };
@@ -1509,7 +1511,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, {
@@ -1525,7 +1527,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
@@ -1568,19 +1570,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
@@ -1608,7 +1610,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;
 
@@ -1812,7 +1814,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 424:
+/***/ 427:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1820,12 +1822,16 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
 } : function (o, m, k, k2) {
   if (k2 === undefined) k2 = k;
   o[k2] = m[k];
@@ -1839,8 +1845,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-__exportStar(__webpack_require__(159), exports);
-var MarkerGauge_1 = __webpack_require__(159);
+__exportStar(__webpack_require__(162), exports);
+var MarkerGauge_1 = __webpack_require__(162);
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -1850,7 +1856,7 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 425:
+/***/ 428:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1878,10 +1884,10 @@ var i18n_1 = __webpack_require__(2);
 var style_1 = __webpack_require__(14);
 var SizeAwareWrapper_1 = __webpack_require__(19);
 var Message_1 = __webpack_require__(10);
-var id_1 = __webpack_require__(32);
-var gaugeUtils_1 = __webpack_require__(97);
-var GaugeMajorTicks_1 = __webpack_require__(126);
-var GaugeValueMarker_1 = __webpack_require__(127);
+var id_1 = __webpack_require__(25);
+var gaugeUtils_1 = __webpack_require__(98);
+var GaugeMajorTicks_1 = __webpack_require__(127);
+var GaugeValueMarker_1 = __webpack_require__(128);
 var MAX_VERTICAL_CONTAINER_WIDTH = 200;
 var MIN_VERTICAL_CONTAINER_HEIGHT = 200;
 var MIN_HORIZONTAL_CONTAINER_WIDTH = 200;
@@ -1890,7 +1896,7 @@ var Container = styled_components_1.default.div.withConfig({
   displayName: "MarkerGauge__Container",
   componentId: "sc-10z02va-0"
 })(["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;
 });
@@ -1904,13 +1910,13 @@ var MarkerGaugeContainer = styled_components_1.default.div.withConfig({
   displayName: "MarkerGauge__MarkerGaugeContainer",
   componentId: "sc-10z02va-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 MarkerGaugeSVG = styled_components_1.default.svg.withConfig({
   displayName: "MarkerGauge__MarkerGaugeSVG",
   componentId: "sc-10z02va-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 BackgroundBar = styled_components_1.default.rect.attrs({
   'data-test': 'background-bar-rect'
@@ -1947,7 +1953,7 @@ var MarkerGauge = function MarkerGauge(_a) {
   /**
    * Standard error message render
    */
-  var errorMessage = react_1.useCallback(function (containerWidth, containerHeight, err, errID) {
+  var errorMessage = (0, react_1.useCallback)(function (containerWidth, containerHeight, err, errID) {
     return React.createElement(Message_1.default, {
       width: containerWidth,
       height: containerHeight,
@@ -1956,36 +1962,36 @@ var MarkerGauge = function MarkerGauge(_a) {
       id: errID
     });
   }, []);
-  var errorId = react_1.useMemo(function () {
-    return id_1.createDOMID();
+  var errorId = (0, react_1.useMemo)(function () {
+    return (0, id_1.createDOMID)();
   }, []);
   /**
    * Pre-calculate linearGradientId, error, sortedRanges, gauge range and linear gradient
    */
-  var error = react_1.useMemo(function () {
-    return gaugeUtils_1.validateRanges(ranges);
+  var error = (0, react_1.useMemo)(function () {
+    return (0, gaugeUtils_1.validateRanges)(ranges);
   }, [ranges]);
-  var sortedRanges = react_1.useMemo(function () {
-    return gaugeUtils_1.getSortedRanges(ranges);
+  var sortedRanges = (0, react_1.useMemo)(function () {
+    return (0, gaugeUtils_1.getSortedRanges)(ranges);
   }, [ranges]);
-  var _react_1$useMemo = react_1.useMemo(function () {
-      return gaugeUtils_1.getGaugeRange(sortedRanges);
+  var _ref = (0, react_1.useMemo)(function () {
+      return (0, gaugeUtils_1.getGaugeRange)(sortedRanges);
     }, [sortedRanges]),
-    min = _react_1$useMemo.min,
-    max = _react_1$useMemo.max;
-  var linearGradientId = react_1.useMemo(function () {
-    return id_1.createDOMID('marker');
+    min = _ref.min,
+    max = _ref.max;
+  var linearGradientId = (0, react_1.useMemo)(function () {
+    return (0, id_1.createDOMID)('marker');
   }, []);
-  var linearGradient = react_1.useMemo(function () {
-    var stops = gaugeUtils_1.getGradientStops({
+  var linearGradient = (0, react_1.useMemo)(function () {
+    var stops = (0, gaugeUtils_1.getGradientStops)({
       ranges: sortedRanges,
       orientation: orientation
     });
-    var _gaugeUtils_1$getGrad = gaugeUtils_1.getGradientDimensions(orientation),
-      x1 = _gaugeUtils_1$getGrad.x1,
-      y1 = _gaugeUtils_1$getGrad.y1,
-      x2 = _gaugeUtils_1$getGrad.x2,
-      y2 = _gaugeUtils_1$getGrad.y2;
+    var _ref2 = (0, gaugeUtils_1.getGradientDimensions)(orientation),
+      x1 = _ref2.x1,
+      y1 = _ref2.y1,
+      x2 = _ref2.x2,
+      y2 = _ref2.y2;
     var linearGradientStops = stops.map(function (stop) {
       return React.createElement("stop", {
         key: "".concat(stop.offset, "_").concat(stop.stopColor),
@@ -2004,18 +2010,18 @@ var MarkerGauge = function MarkerGauge(_a) {
   /**
    * Calculate marker gauge dimensions
    */
-  var calculateMarkerGaugeDimensions = react_1.useCallback(function (containerWidth, containerHeight) {
-    var _gaugeUtils_1$getGaug = gaugeUtils_1.getGaugeDimensions({
+  var calculateMarkerGaugeDimensions = (0, react_1.useCallback)(function (containerWidth, containerHeight) {
+    var _ref3 = (0, gaugeUtils_1.getGaugeDimensions)({
         containerWidth: containerWidth,
         containerHeight: containerHeight,
         orientation: orientation
       }),
-      gaugeLength = _gaugeUtils_1$getGaug.gaugeLength,
-      gaugeStartX = _gaugeUtils_1$getGaug.gaugeStartX,
-      gaugeStartY = _gaugeUtils_1$getGaug.gaugeStartY,
-      gaugeWidth = _gaugeUtils_1$getGaug.gaugeWidth,
-      gaugeHeight = _gaugeUtils_1$getGaug.gaugeHeight;
-    var _gaugeUtils_1$getMark = gaugeUtils_1.getMarkerBarDimensions({
+      gaugeLength = _ref3.gaugeLength,
+      gaugeStartX = _ref3.gaugeStartX,
+      gaugeStartY = _ref3.gaugeStartY,
+      gaugeWidth = _ref3.gaugeWidth,
+      gaugeHeight = _ref3.gaugeHeight;
+    var _ref4 = (0, gaugeUtils_1.getMarkerBarDimensions)({
         gaugeLength: gaugeLength,
         gaugeStartX: gaugeStartX,
         gaugeStartY: gaugeStartY,
@@ -2023,12 +2029,12 @@ var MarkerGauge = function MarkerGauge(_a) {
         gaugeHeight: gaugeHeight,
         orientation: orientation
       }),
-      markerBarLength = _gaugeUtils_1$getMark.markerBarLength,
-      markerBarX = _gaugeUtils_1$getMark.markerBarX,
-      markerBarY = _gaugeUtils_1$getMark.markerBarY,
-      markerBarWidth = _gaugeUtils_1$getMark.markerBarWidth,
-      markerBarHeight = _gaugeUtils_1$getMark.markerBarHeight;
-    var _gaugeUtils_1$getMark2 = gaugeUtils_1.getMarkerGaugeValueMarkerPositions({
+      markerBarLength = _ref4.markerBarLength,
+      markerBarX = _ref4.markerBarX,
+      markerBarY = _ref4.markerBarY,
+      markerBarWidth = _ref4.markerBarWidth,
+      markerBarHeight = _ref4.markerBarHeight;
+    var _ref5 = (0, gaugeUtils_1.getMarkerGaugeValueMarkerPositions)({
         markerBarX: markerBarX,
         markerBarY: markerBarY,
         markerBarHeight: markerBarHeight,
@@ -2038,8 +2044,8 @@ var MarkerGauge = function MarkerGauge(_a) {
         min: min,
         max: max
       }),
-      valueMarkerX = _gaugeUtils_1$getMark2.valueMarkerX,
-      valueMarkerY = _gaugeUtils_1$getMark2.valueMarkerY;
+      valueMarkerX = _ref5.valueMarkerX,
+      valueMarkerY = _ref5.valueMarkerY;
     return {
       markerBarX: markerBarX,
       markerBarY: markerBarY,
@@ -2053,13 +2059,13 @@ var MarkerGauge = function MarkerGauge(_a) {
       gaugeHeight: gaugeHeight
     };
   }, [orientation, value, min, max]);
-  var renderVisualization = react_1.useCallback(function (_ref) {
-    var containerWidth = _ref.width,
-      containerHeight = _ref.height;
+  var renderVisualization = (0, react_1.useCallback)(function (_ref6) {
+    var containerWidth = _ref6.width,
+      containerHeight = _ref6.height;
     // todo: need change the size when get design for smaller space
     // 58 is the title & description header height in dashboard visualization
     if ((containerWidth < MAX_VERTICAL_CONTAINER_WIDTH || containerHeight + 58 < MIN_VERTICAL_CONTAINER_HEIGHT) && orientation === 'vertical' || (containerWidth < MIN_HORIZONTAL_CONTAINER_WIDTH || containerHeight < MIN_HORIZONTAL_CONTAINER_HEIGHT) && orientation === 'horizontal') {
-      return errorMessage(containerWidth, containerHeight, i18n_1._('Too small to render content'), errorId);
+      return errorMessage(containerWidth, containerHeight, (0, i18n_1._)('Too small to render content'), errorId);
     }
     if (error) {
       return errorMessage(containerWidth, containerHeight, error, errorId);
@@ -2188,7 +2194,7 @@ exports.default = MarkerGauge;
 
 /***/ }),
 
-/***/ 426:
+/***/ 429:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2198,12 +2204,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var i18n_1 = __webpack_require__(2);
-var GaugeMarker_1 = __webpack_require__(427);
-var placeholders_1 = __webpack_require__(49);
+var GaugeMarker_1 = __webpack_require__(430);
+var placeholders_1 = __webpack_require__(50);
 var schemaUtils_1 = __webpack_require__(16);
 var variables_1 = __webpack_require__(11);
 var pick_1 = __webpack_require__(23);
-var Gauge_1 = __webpack_require__(125);
+var Gauge_1 = __webpack_require__(126);
 var VizBehavior_1 = __webpack_require__(6);
 var VizCategory_1 = __webpack_require__(35);
 var configUtils_1 = __webpack_require__(20);
@@ -2274,7 +2280,7 @@ var optionsSchema = {
     description: 'Specify whether to display the labels as numbers, percentages, or off. The label center aligns to the value.',
     default: 'number',
     type: 'string',
-    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
+    pattern: (0, schemaUtils_1.getPattern)(['number', 'percentage', 'off'])
   },
   majorTickInterval: {
     description: 'Specify, in pixels, the spacing between major tick marks.',
@@ -2285,7 +2291,7 @@ var optionsSchema = {
     description: 'Specify the axis orientation of the gauge.',
     default: 'vertical',
     type: 'string',
-    pattern: schemaUtils_1.getPattern(['horizontal', 'vertical'])
+    pattern: (0, schemaUtils_1.getPattern)(['horizontal', 'vertical'])
   },
   value: {
     description: 'Specify the dataSource applied to the value of the marker gauge.',
@@ -2296,18 +2302,18 @@ var optionsSchema = {
     description: 'Specify whether to display the value as a number, percentage, or off.',
     default: 'number',
     type: 'string',
-    pattern: schemaUtils_1.getPattern(['number', 'percentage', 'off'])
+    pattern: (0, schemaUtils_1.getPattern)(['number', 'percentage', 'off'])
   }
 };
 var themes = {
   defaultFillColor: function defaultFillColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: variables_1.default.backgroundColorHover(props),
       prisma: variables_1.default.neutral100(props)
     })(props);
   },
   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)
@@ -2316,7 +2322,7 @@ var themes = {
     })(props);
   },
   majorTickFillColor: function majorTickFillColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         light: variables_1.default.gray30(props),
         dark: variables_1.default.textGray(props) // was #D7DAE0
@@ -2330,7 +2336,7 @@ var themes = {
     })(props);
   },
   majorTickStrokeColor: function majorTickStrokeColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         light: variables_1.default.textGray(props),
         dark: variables_1.default.contentColorMuted(props)
@@ -2339,7 +2345,7 @@ var themes = {
     })(props);
   },
   valueMarkerFillColor: function valueMarkerFillColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: variables_1.default.textColor(props),
       prisma: {
         dark: variables_1.default.white(props),
@@ -2348,7 +2354,7 @@ var themes = {
     })(props);
   },
   valueMarkerLabelFillColor: function valueMarkerLabelFillColor(props) {
-    return pick_1.default({
+    return (0, pick_1.default)({
       enterprise: {
         light: variables_1.default.gray96(props),
         dark: variables_1.default.black(props)
@@ -2358,9 +2364,9 @@ var themes = {
   }
 };
 var editorConfig = [{
-  label: i18n_1._('Data configurations'),
+  label: (0, i18n_1._)('Data configurations'),
   layout: [[{
-    label: i18n_1._('Value'),
+    label: (0, i18n_1._)('Value'),
     editor: 'editor.columnSelector',
     option: 'value',
     context: 'defaultContext',
@@ -2378,16 +2384,16 @@ var editorConfig = [{
     }
   }]]
 }, Gauge_1.default, {
-  label: i18n_1._('Color and style'),
+  label: (0, i18n_1._)('Color and style'),
   layout: [[{
-    label: i18n_1._('Gauge ranges'),
+    label: (0, i18n_1._)('Gauge ranges'),
     option: 'gaugeRanges',
     editor: 'editor.threshold',
     editorProps: {
       openRanges: false,
       isTogglable: false // Can not disable thresholds
     }
-  }], BackgroundColor_1.default({
+  }], (0, BackgroundColor_1.default)({
     themes: themes,
     labelPosition: 'top'
   })]
@@ -2403,7 +2409,7 @@ var config = {
   /**
    * viz name
    */
-  name: i18n_1._('Marker gauge'),
+  name: (0, i18n_1._)('Marker gauge'),
   category: VizCategory_1.VizCategory.GAUGE,
   /**
    * viz icon
@@ -2418,14 +2424,7 @@ var config = {
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER],
   themes: themes
 };
-exports.default = configUtils_1.enhanceConfig(config);
-
-/***/ }),
-
-/***/ 427:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/enterprise/GaugeMarker");
+exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
@@ -2443,6 +2442,13 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
+/***/ 430:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-icons/enterprise/GaugeMarker");
+
+/***/ }),
+
 /***/ 44:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -2469,8 +2475,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()
@@ -2514,7 +2520,7 @@ exports.isMissing = isMissing;
  */
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
+    return (0, exports.isMissing)(target[k]);
   });
 };
 exports.missingKeys = missingKeys;
@@ -2538,7 +2544,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     "data-test": "message",
     width: width,
     height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
   });
 };
 exports.MissingPropsMessage = MissingPropsMessage;
@@ -2547,7 +2553,7 @@ exports.MissingPropsMessage.defaultProps = {
   width: '100%',
   height: 250
 };
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
 /***/ }),
 
@@ -2568,7 +2574,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"
@@ -2587,7 +2593,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -2609,7 +2615,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) {
@@ -2624,7 +2630,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) {
@@ -2639,7 +2645,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
     }
     return React.createElement(Visualization, Object.assign({}, props));
   };
-  hocUtils_1.extendStaticWrapperProps({
+  (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
@@ -2659,14 +2665,14 @@ module.exports = require("@babel/runtime/helpers/extends");
 /***/ 49:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+module.exports = require("@splunk/visualizations-shared/colorConstants");
 
 /***/ }),
 
 /***/ 50:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorConstants");
+module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
@@ -2685,7 +2691,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: {
@@ -2756,7 +2762,7 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 97:
+/***/ 98:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2768,7 +2774,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertToGaugeProperties = exports.mapValueLabelDisplay = exports.mapToOldKey = exports.getGradientDimensions = exports.getGradientStops = exports.getGradientStopColors = exports.getGradientStopOffsets = exports.getGaugeRange = exports.validateRanges = exports.getSortedRanges = exports.getMarkerGaugeValueMarkerPositions = exports.getMarkerBarDimensions = exports.getFillerGaugeValueMarkerPositions = exports.getFillBarDimensions = exports.getGaugeBarHeight = exports.getGaugeBarWidth = exports.getGaugeBarStartPositions = exports.getGaugeBarLength = exports.assignGaugeColor = exports.getGaugeDimensions = exports.getGaugeStartPosition = exports.getGaugeLength = exports.getGaugeHeight = exports.getGaugeWidth = exports.FILL_THICKNESS = exports.GAUGE_THICKNESS = void 0;
 var lodash_1 = __webpack_require__(3);
-var colorConstants_1 = __webpack_require__(50);
+var colorConstants_1 = __webpack_require__(49);
 var i18n_1 = __webpack_require__(2);
 exports.GAUGE_THICKNESS = 50;
 exports.FILL_THICKNESS = 38;
@@ -2816,10 +2822,10 @@ var getGaugeLength = function getGaugeLength(_ref3) {
   var containerWidth = _ref3.containerWidth,
     containerHeight = _ref3.containerHeight,
     orientation = _ref3.orientation;
-  return orientation === 'vertical' ? exports.getGaugeHeight({
+  return orientation === 'vertical' ? (0, exports.getGaugeHeight)({
     containerHeight: containerHeight,
     orientation: orientation
-  }) : exports.getGaugeWidth({
+  }) : (0, exports.getGaugeWidth)({
     containerWidth: containerWidth,
     orientation: orientation
   });
@@ -2874,24 +2880,24 @@ var getGaugeDimensions = function getGaugeDimensions(_ref5) {
   var containerWidth = _ref5.containerWidth,
     containerHeight = _ref5.containerHeight,
     orientation = _ref5.orientation;
-  var gaugeLength = exports.getGaugeLength({
+  var gaugeLength = (0, exports.getGaugeLength)({
     containerWidth: containerWidth,
     containerHeight: containerHeight,
     orientation: orientation
   });
-  var _exports$getGaugeStar = exports.getGaugeStartPosition({
+  var _ref6 = (0, exports.getGaugeStartPosition)({
       containerWidth: containerWidth,
       containerHeight: containerHeight,
       gaugeLength: gaugeLength,
       orientation: orientation
     }),
-    gaugeStartX = _exports$getGaugeStar.gaugeStartX,
-    gaugeStartY = _exports$getGaugeStar.gaugeStartY;
-  var gaugeWidth = exports.getGaugeWidth({
+    gaugeStartX = _ref6.gaugeStartX,
+    gaugeStartY = _ref6.gaugeStartY;
+  var gaugeWidth = (0, exports.getGaugeWidth)({
     containerWidth: containerWidth,
     orientation: orientation
   });
-  var gaugeHeight = exports.getGaugeHeight({
+  var gaugeHeight = (0, exports.getGaugeHeight)({
     containerHeight: containerHeight,
     orientation: orientation
   });
@@ -2910,10 +2916,10 @@ exports.getGaugeDimensions = getGaugeDimensions;
  * @method assignGaugeColor
  * @params
  * */
-var assignGaugeColor = function assignGaugeColor(_ref6) {
-  var value = _ref6.value,
-    min = _ref6.min,
-    max = _ref6.max;
+var assignGaugeColor = function assignGaugeColor(_ref7) {
+  var value = _ref7.value,
+    min = _ref7.min,
+    max = _ref7.max;
   var rate = (value - min) / (max - min);
   if (rate <= 0.3) {
     return colorConstants_1.SEMANTIC_SUCCESS;
@@ -2934,11 +2940,11 @@ exports.assignGaugeColor = assignGaugeColor;
  * @param {Number} input.max
  * @return {Number} gaugeBarLength
  */
-var getGaugeBarLength = function getGaugeBarLength(_ref7) {
-  var gaugeLength = _ref7.gaugeLength,
-    value = _ref7.value,
-    min = _ref7.min,
-    max = _ref7.max;
+var getGaugeBarLength = function getGaugeBarLength(_ref8) {
+  var gaugeLength = _ref8.gaugeLength,
+    value = _ref8.value,
+    min = _ref8.min,
+    max = _ref8.max;
   if (max < min) {
     return null;
   }
@@ -2965,13 +2971,13 @@ exports.getGaugeBarLength = getGaugeBarLength;
  * @return {Number} position.gaugeBarX
  * @return {Number} position.gaugeBarY
  */
-var getGaugeBarStartPositions = function getGaugeBarStartPositions(_ref8) {
-  var gaugeStartX = _ref8.gaugeStartX,
-    gaugeStartY = _ref8.gaugeStartY,
-    gaugeWidth = _ref8.gaugeWidth,
-    gaugeHeight = _ref8.gaugeHeight,
-    gaugeBarLength = _ref8.gaugeBarLength,
-    orientation = _ref8.orientation;
+var getGaugeBarStartPositions = function getGaugeBarStartPositions(_ref9) {
+  var gaugeStartX = _ref9.gaugeStartX,
+    gaugeStartY = _ref9.gaugeStartY,
+    gaugeWidth = _ref9.gaugeWidth,
+    gaugeHeight = _ref9.gaugeHeight,
+    gaugeBarLength = _ref9.gaugeBarLength,
+    orientation = _ref9.orientation;
   var gaugeBarX = gaugeStartX;
   var gaugeBarY = gaugeStartY;
   if (orientation === 'vertical') {
@@ -2994,9 +3000,9 @@ exports.getGaugeBarStartPositions = getGaugeBarStartPositions;
  * @param {String} orientation
  * @return {Number} gaugeBarWidth
  */
-var getGaugeBarWidth = function getGaugeBarWidth(_ref9) {
-  var gaugeBarLength = _ref9.gaugeBarLength,
-    orientation = _ref9.orientation;
+var getGaugeBarWidth = function getGaugeBarWidth(_ref10) {
+  var gaugeBarLength = _ref10.gaugeBarLength,
+    orientation = _ref10.orientation;
   return orientation === 'vertical' ? exports.FILL_THICKNESS : gaugeBarLength;
 };
 exports.getGaugeBarWidth = getGaugeBarWidth;
@@ -3008,9 +3014,9 @@ exports.getGaugeBarWidth = getGaugeBarWidth;
  * @param {String} orientation
  * @return {Number} gaugeBarHeight
  */
-var getGaugeBarHeight = function getGaugeBarHeight(_ref10) {
-  var gaugeBarLength = _ref10.gaugeBarLength,
-    orientation = _ref10.orientation;
+var getGaugeBarHeight = function getGaugeBarHeight(_ref11) {
+  var gaugeBarLength = _ref11.gaugeBarLength,
+    orientation = _ref11.orientation;
   return orientation === 'vertical' ? gaugeBarLength : exports.FILL_THICKNESS;
 };
 exports.getGaugeBarHeight = getGaugeBarHeight;
@@ -3034,23 +3040,23 @@ exports.getGaugeBarHeight = getGaugeBarHeight;
  * @return {Number} fillBarDimensions.fillBarWidth
  * @return {Number} fillBarDimensions.fillBarHeight
  */
-var getFillBarDimensions = function getFillBarDimensions(_ref11) {
-  var gaugeLength = _ref11.gaugeLength,
-    gaugeStartX = _ref11.gaugeStartX,
-    gaugeStartY = _ref11.gaugeStartY,
-    gaugeWidth = _ref11.gaugeWidth,
-    gaugeHeight = _ref11.gaugeHeight,
-    value = _ref11.value,
-    min = _ref11.min,
-    max = _ref11.max,
-    orientation = _ref11.orientation;
-  var gaugeBarLength = exports.getGaugeBarLength({
+var getFillBarDimensions = function getFillBarDimensions(_ref12) {
+  var gaugeLength = _ref12.gaugeLength,
+    gaugeStartX = _ref12.gaugeStartX,
+    gaugeStartY = _ref12.gaugeStartY,
+    gaugeWidth = _ref12.gaugeWidth,
+    gaugeHeight = _ref12.gaugeHeight,
+    value = _ref12.value,
+    min = _ref12.min,
+    max = _ref12.max,
+    orientation = _ref12.orientation;
+  var gaugeBarLength = (0, exports.getGaugeBarLength)({
     gaugeLength: gaugeLength,
     value: value,
     max: max,
     min: min
   });
-  var _exports$getGaugeBarS = exports.getGaugeBarStartPositions({
+  var _ref13 = (0, exports.getGaugeBarStartPositions)({
       gaugeStartX: gaugeStartX,
       gaugeStartY: gaugeStartY,
       gaugeWidth: gaugeWidth,
@@ -3058,13 +3064,13 @@ var getFillBarDimensions = function getFillBarDimensions(_ref11) {
       gaugeBarLength: gaugeBarLength,
       orientation: orientation
     }),
-    fillBarX = _exports$getGaugeBarS.gaugeBarX,
-    fillBarY = _exports$getGaugeBarS.gaugeBarY;
-  var fillBarWidth = exports.getGaugeBarWidth({
+    fillBarX = _ref13.gaugeBarX,
+    fillBarY = _ref13.gaugeBarY;
+  var fillBarWidth = (0, exports.getGaugeBarWidth)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
   });
-  var fillBarHeight = exports.getGaugeBarHeight({
+  var fillBarHeight = (0, exports.getGaugeBarHeight)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
   });
@@ -3089,11 +3095,11 @@ exports.getFillBarDimensions = getFillBarDimensions;
  * @return {Number} position.valueMarkerX
  * @return {Number} position.valueMarkerY
  */
-var getFillerGaugeValueMarkerPositions = function getFillerGaugeValueMarkerPositions(_ref12) {
-  var fillBarX = _ref12.fillBarX,
-    fillBarY = _ref12.fillBarY,
-    fillBarLength = _ref12.fillBarLength,
-    orientation = _ref12.orientation;
+var getFillerGaugeValueMarkerPositions = function getFillerGaugeValueMarkerPositions(_ref14) {
+  var fillBarX = _ref14.fillBarX,
+    fillBarY = _ref14.fillBarY,
+    fillBarLength = _ref14.fillBarLength,
+    orientation = _ref14.orientation;
   var valueMarkerX = fillBarX;
   var valueMarkerY = fillBarY;
   if (orientation === 'vertical') {
@@ -3125,15 +3131,15 @@ exports.getFillerGaugeValueMarkerPositions = getFillerGaugeValueMarkerPositions;
  * @return {Number} markerBarDimensions.markerBarWidth
  * @return {Number} markerBarDimensions.markerBarHeight
  */
-var getMarkerBarDimensions = function getMarkerBarDimensions(_ref13) {
-  var gaugeLength = _ref13.gaugeLength,
-    gaugeStartX = _ref13.gaugeStartX,
-    gaugeStartY = _ref13.gaugeStartY,
-    gaugeWidth = _ref13.gaugeWidth,
-    gaugeHeight = _ref13.gaugeHeight,
-    orientation = _ref13.orientation;
+var getMarkerBarDimensions = function getMarkerBarDimensions(_ref15) {
+  var gaugeLength = _ref15.gaugeLength,
+    gaugeStartX = _ref15.gaugeStartX,
+    gaugeStartY = _ref15.gaugeStartY,
+    gaugeWidth = _ref15.gaugeWidth,
+    gaugeHeight = _ref15.gaugeHeight,
+    orientation = _ref15.orientation;
   var gaugeBarLength = gaugeLength; // For marker gauge, inner marker bar spans the entire gauge
-  var _exports$getGaugeBarS2 = exports.getGaugeBarStartPositions({
+  var _ref16 = (0, exports.getGaugeBarStartPositions)({
       gaugeStartX: gaugeStartX,
       gaugeStartY: gaugeStartY,
       gaugeWidth: gaugeWidth,
@@ -3141,13 +3147,13 @@ var getMarkerBarDimensions = function getMarkerBarDimensions(_ref13) {
       gaugeBarLength: gaugeBarLength,
       orientation: orientation
     }),
-    markerBarX = _exports$getGaugeBarS2.gaugeBarX,
-    markerBarY = _exports$getGaugeBarS2.gaugeBarY;
-  var markerBarWidth = exports.getGaugeBarWidth({
+    markerBarX = _ref16.gaugeBarX,
+    markerBarY = _ref16.gaugeBarY;
+  var markerBarWidth = (0, exports.getGaugeBarWidth)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
   });
-  var markerBarHeight = exports.getGaugeBarHeight({
+  var markerBarHeight = (0, exports.getGaugeBarHeight)({
     gaugeBarLength: gaugeBarLength,
     orientation: orientation
   });
@@ -3176,19 +3182,19 @@ exports.getMarkerBarDimensions = getMarkerBarDimensions;
  * @return {Number} position.valueMarkerX
  * @return {Number} position.valueMarkerY
  */
-var getMarkerGaugeValueMarkerPositions = function getMarkerGaugeValueMarkerPositions(_ref14) {
-  var markerBarX = _ref14.markerBarX,
-    markerBarY = _ref14.markerBarY,
-    markerBarHeight = _ref14.markerBarHeight,
-    gaugeLength = _ref14.markerBarLength,
-    orientation = _ref14.orientation,
-    value = _ref14.value,
-    min = _ref14.min,
-    max = _ref14.max;
+var getMarkerGaugeValueMarkerPositions = function getMarkerGaugeValueMarkerPositions(_ref17) {
+  var markerBarX = _ref17.markerBarX,
+    markerBarY = _ref17.markerBarY,
+    markerBarHeight = _ref17.markerBarHeight,
+    gaugeLength = _ref17.markerBarLength,
+    orientation = _ref17.orientation,
+    value = _ref17.value,
+    min = _ref17.min,
+    max = _ref17.max;
   var valueMarkerX = markerBarX;
   var valueMarkerY = markerBarY;
   if (orientation === 'vertical') {
-    valueMarkerY += markerBarHeight - exports.getGaugeBarLength({
+    valueMarkerY += markerBarHeight - (0, exports.getGaugeBarLength)({
       gaugeLength: gaugeLength,
       value: value,
       max: max,
@@ -3196,7 +3202,7 @@ var getMarkerGaugeValueMarkerPositions = function getMarkerGaugeValueMarkerPosit
     });
     valueMarkerX -= (exports.GAUGE_THICKNESS - exports.FILL_THICKNESS) / 4;
   } else {
-    valueMarkerX += exports.getGaugeBarLength({
+    valueMarkerX += (0, exports.getGaugeBarLength)({
       gaugeLength: gaugeLength,
       value: value,
       max: max,
@@ -3230,23 +3236,23 @@ exports.getSortedRanges = getSortedRanges;
  */
 var validateRanges = function validateRanges(ranges) {
   if (!ranges.length) {
-    return i18n_1._('Prop "ranges" is missing entries');
+    return (0, i18n_1._)('Prop "ranges" is missing entries');
   }
   // check whether a range has "from" >= "to" eg: 10 - 10, 100 - 10, -20 - -10 are invalid
   if (ranges.some(function (range) {
     return range.from >= range.to;
   })) {
-    return i18n_1._('Prop "ranges" has invalid entries: invalid range');
+    return (0, i18n_1._)('Prop "ranges" has invalid entries: invalid range');
   }
   // check whether ranges have duplicate "from/to" eg: 0 - 50, 25 - 50
-  if (ranges.length !== lodash_1.uniqBy(ranges, 'to').length || ranges.length !== lodash_1.uniqBy(ranges, 'from').length) {
-    return i18n_1._('Prop "ranges" has invalid entries: duplicate values');
+  if (ranges.length !== (0, lodash_1.uniqBy)(ranges, 'to').length || ranges.length !== (0, lodash_1.uniqBy)(ranges, 'from').length) {
+    return (0, i18n_1._)('Prop "ranges" has invalid entries: duplicate values');
   }
-  var sortedRanges = exports.getSortedRanges(ranges);
+  var sortedRanges = (0, exports.getSortedRanges)(ranges);
   // check whether ranges are continuous eg: 0 - 10, 10 - 20, 20 - 30
   for (var i = 1; i < sortedRanges.length; i += 1) {
     if (sortedRanges[i].from !== sortedRanges[i - 1].to) {
-      return i18n_1._('Prop "ranges" has invalid entries: discontinuous ranges');
+      return (0, i18n_1._)('Prop "ranges" has invalid entries: discontinuous ranges');
     }
   }
   return null;
@@ -3280,12 +3286,12 @@ exports.getGaugeRange = getGaugeRange;
  * @param {String} orientation
  * @return {Array} cumulativeOffsets
  */
-var getGradientStopOffsets = function getGradientStopOffsets(_ref15) {
-  var ranges = _ref15.ranges,
-    orientation = _ref15.orientation;
-  var _exports$getGaugeRang = exports.getGaugeRange(ranges),
-    min = _exports$getGaugeRang.min,
-    max = _exports$getGaugeRang.max;
+var getGradientStopOffsets = function getGradientStopOffsets(_ref18) {
+  var ranges = _ref18.ranges,
+    orientation = _ref18.orientation;
+  var _ref19 = (0, exports.getGaugeRange)(ranges),
+    min = _ref19.min,
+    max = _ref19.max;
   var offsetScale = (GRADIENT_STOP_OFFSET_MAX - GRADIENT_STOP_OFFSET_MIN) / (max - min);
   var offsets = ranges.map(function (range) {
     return Math.abs(range.from - range.to) * offsetScale;
@@ -3307,9 +3313,9 @@ exports.getGradientStopOffsets = getGradientStopOffsets;
  * @param {String} orientation
  * @return {Array} stopColors
  */
-var getGradientStopColors = function getGradientStopColors(_ref16) {
-  var ranges = _ref16.ranges,
-    orientation = _ref16.orientation;
+var getGradientStopColors = function getGradientStopColors(_ref20) {
+  var ranges = _ref20.ranges,
+    orientation = _ref20.orientation;
   var stopColors = ranges.map(function (range) {
     return range.value;
   });
@@ -3325,15 +3331,15 @@ exports.getGradientStopColors = getGradientStopColors;
  * @param {String} orientation
  * @return {Array} stops
  */
-var getGradientStops = function getGradientStops(_ref17) {
-  var ranges = _ref17.ranges,
-    orientation = _ref17.orientation;
+var getGradientStops = function getGradientStops(_ref21) {
+  var ranges = _ref21.ranges,
+    orientation = _ref21.orientation;
   var stops = [];
-  var offsets = exports.getGradientStopOffsets({
+  var offsets = (0, exports.getGradientStopOffsets)({
     ranges: ranges,
     orientation: orientation
   });
-  var stopColors = exports.getGradientStopColors({
+  var stopColors = (0, exports.getGradientStopColors)({
     ranges: ranges,
     orientation: orientation
   });
@@ -3391,7 +3397,7 @@ var gaugeOptionsMapping = {
  * @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 gaugeOptionsMapping[key] ? gaugeOptionsMapping[key] : key;
   });
 };
@@ -3421,7 +3427,7 @@ var mapValueLabelDisplay = function mapValueLabelDisplay(labelOrValue, options)
       newOptions[percentKey] = false;
     }
   }
-  return lodash_1.omit(newOptions, [optionString]);
+  return (0, lodash_1.omit)(newOptions, [optionString]);
 };
 exports.mapValueLabelDisplay = mapValueLabelDisplay;
 /**
@@ -3432,10 +3438,10 @@ exports.mapValueLabelDisplay = mapValueLabelDisplay;
  * @returns {Object}
  */
 var convertToGaugeProperties = function convertToGaugeProperties(originalOptions) {
-  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(function (options) {
-    return exports.mapValueLabelDisplay('label', options);
+  return (0, lodash_1.chain)((0, exports.mapToOldKey)(originalOptions)).thru(function (options) {
+    return (0, exports.mapValueLabelDisplay)('label', options);
   }).thru(function (options) {
-    return exports.mapValueLabelDisplay('value', options);
+    return (0, exports.mapValueLabelDisplay)('value', options);
   }).value();
 };
 exports.convertToGaugeProperties = convertToGaugeProperties;