@splunk/visualizations 25.7.1 → 25.8.0

package/ParallelCoordinates.js

@@ -136,17 +136,11 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var styled_components_1 = __webpack_require__(4);
-
 var SizeAwareWrapper_1 = __webpack_require__(18);
-
 var style_1 = __webpack_require__(14);
-
 var colorUtils_1 = __webpack_require__(12);
-
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
@@ -159,11 +153,11 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
   return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-
+});
+// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
 var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
   var width = _ref2.width,
-      height = _ref2.height;
+    height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
       width: style_1.toPx(width)
@@ -185,13 +179,11 @@ var FixSizeItemContent = styled_components_1.default.div.withConfig({
   displayName: "FixedSizeContainer__FixSizeItemContent",
   componentId: "sc-1yhgpod-3"
 })(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
-
 var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
   var FixedSizeContainer = function FixedSizeContainer(props) {
     var width = props.width,
-        height = props.height,
-        backgroundColor = props.backgroundColor;
-
+      height = props.height,
+      backgroundColor = props.backgroundColor;
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -199,27 +191,24 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         backgroundColor: backgroundColor
       }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
     }
-
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.7.1 - 6a77c5530",
+      "data-splunk-visualization-version": "25.8.0 - 65f56b99e",
       width: width,
       height: height,
       backgroundColor: backgroundColor
     }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
       var newWidth = _ref3.width,
-          newHeight = _ref3.height;
+        newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
-
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
-
 exports.default = withFixedSizeContainer;
 
 /***/ }),
@@ -247,10 +236,9 @@ exports.extendStaticWrapperProps = void 0;
  * @param {DashboardVizType} props.Wrapper
  * @param {DashboardVizType} props.Visualization
  */
-
 var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
+    Visualization = _ref.Visualization;
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
@@ -259,7 +247,6 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
-
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
@@ -299,33 +286,24 @@ module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 
 var _toConsumableArray = __webpack_require__(7);
-
 var _defineProperty = __webpack_require__(8);
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
-
 var lodash_1 = __webpack_require__(3);
-
 var schemaUtils_1 = __webpack_require__(16);
-
 var VizBehavior_1 = __webpack_require__(6);
-
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -335,22 +313,20 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
-
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
-
+      title = _a.title,
+      description = _a.description,
+      readOnly = _a.readOnly,
+      writeOnly = _a.writeOnly,
+      examples = _a.examples,
+      defaultValue = _a.default,
+      type = _a.type,
+      properties = _a.properties,
+      patternProperties = _a.patternProperties,
+      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -364,14 +340,12 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
-
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
-
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -389,7 +363,6 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
-
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -398,14 +371,11 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
-
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
-
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
-
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -413,7 +383,6 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
-
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -421,7 +390,6 @@ exports.enhanceConfig = enhanceConfig;
  * @param vizConfig a Visualization Config
  * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
  */
-
 function uncollapseEditorConfig(vizConfig) {
   var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
@@ -431,16 +399,13 @@ function uncollapseEditorConfig(vizConfig) {
   });
   return editorPanelUncollapsedConfig;
 }
-
 exports.uncollapseEditorConfig = uncollapseEditorConfig;
-
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
 }
-
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+exports.isDynamicOption = isDynamicOption;
+// private helpers to improve readability of getInitialPreset
 // this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
-
 /**
  * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
  * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
@@ -449,7 +414,6 @@ exports.isDynamicOption = isDynamicOption; // private helpers to improve readabi
  *
  * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
  */
-
 function hasCompatibleContexts(vizContext, presetContext) {
   var presetContextKeys = Object.keys(presetContext);
   return presetContextKeys.every(function (contextKey) {
@@ -459,8 +423,6 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
  */
-
-
 function hasCompatibleOptions(vizOptions, presetOptions) {
   var presetOptionKeys = Object.keys(presetOptions);
   return presetOptionKeys.every(function (optionKey) {
@@ -475,21 +437,18 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @param {Object} vizOptions - the current vizOptions definition
  * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
  */
-
-
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
     var presetContext = lodash_1.get(preset, ['value', 'context'], {});
     var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    var presetOptionKeys = Object.keys(presetOptions);
+    // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
     // if not, then the preset is invalid in config.ts
-
     if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
     return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
   });
 }
-
 exports.getInitialPreset = getInitialPreset;
 /**
  * generates number precision values for a Select editor
@@ -497,7 +456,6 @@ exports.getInitialPreset = getInitialPreset;
  * @param {Number} numPrecisionValues - number of integer precision values to generate
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
-
 function generatePrecisionValues(numPrecisionValues) {
   return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
     return {
@@ -506,7 +464,6 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
-
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -516,15 +473,12 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
  * @returns {EditorLayoutConfig[][]} new editor layout with insertion
  */
-
 var insertLayout = function insertLayout(layout, index) {
   for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     layoutItems[_key - 2] = arguments[_key];
   }
-
   return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
-
 exports.insertLayout = insertLayout;
 
 /***/ }),
@@ -605,38 +559,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(49);
 /* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__);
 
-
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
+    })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
-
   return target;
 }
 
@@ -644,7 +585,6 @@ function _objectSpread(target) {
 
 
 
-
 var DEFAULT_FONT = 12;
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
 var SVR_PADDING = {
@@ -653,27 +593,28 @@ var SVR_PADDING = {
   left: 16,
   right: 16
 };
+
 /**
  * @method shouldShowTrend
  * @param {String} trendDisplay
  * @returns {Bool}
  */
-
 var shouldShowTrend = function shouldShowTrend(trendDisplay) {
   return trendDisplay === 'absolute' || trendDisplay === 'percent';
 };
+
 /**
  * @method isLoadingOrNoColumns
  * @param {Object} dataSources
  * @param {Boolean} loading
  * @returns {Boolean} return true if loading or without columns in dataSources
  */
-
 var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
   var data = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["get"])(dataSources, 'primary.data.columns[0]', undefined);
   var noColumns = data === undefined;
   return loading || noColumns;
 };
+
 /**
  * Retrieve the valid formatted color
  * @method getFormattedColor
@@ -681,30 +622,30 @@ var isLoadingOrNoColumns = function isLoadingOrNoColumns(dataSources, loading) {
  * @param {String} defaultColor
  * @returns {String} the formatted color
  */
-
 var getFormattedColor = function getFormattedColor(color, defaultColor) {
   return Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(color) || Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(defaultColor);
 };
+
 /**
  * Determines if there is a background color
  * @method hasBackground
  * @param {String} backgroundColor
  * @returns true for non-transparent background color
  */
-
 var hasBackground = function hasBackground(backgroundColor) {
   return !!backgroundColor && backgroundColor !== 'transparent';
 };
+
 /**
  * @method isIdenticalColor
  * @param {String} colorA
  * @param {String} colorB
  * @returns {Boolean}
  */
-
 var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
   return !!colorA && !!colorB && Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorA.toLowerCase()) === Object(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__["formatColor"])(colorB.toLowerCase());
 };
+
 /*
  * @method getDefaultColorWithBg
  * @param {Object} props
@@ -713,13 +654,13 @@ var isIdenticalColor = function isIdenticalColor(colorA, colorB) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} defaultColor
  */
-
 var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
   var backgroundColor = _ref.backgroundColor,
-      defaultFontColor = _ref.defaultFontColor,
-      defaultBlockFontColor = _ref.defaultBlockFontColor;
+    defaultFontColor = _ref.defaultFontColor,
+    defaultBlockFontColor = _ref.defaultBlockFontColor;
   return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
 };
+
 /*
  * @method getMajorColor
  * return formatted majorColor.
@@ -730,16 +671,15 @@ var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
  * @param {String} props.defaultBlockFontColor
  * @returns {String} majorColor
  */
-
 var getMajorColor = function getMajorColor(_ref2) {
   var majorColor = _ref2.majorColor,
-      backgroundColor = _ref2.backgroundColor,
-      defaultFontColor = _ref2.defaultFontColor,
-      defaultBlockFontColor = _ref2.defaultBlockFontColor; // If backgroundColor is set, but no majorColor,
+    backgroundColor = _ref2.backgroundColor,
+    defaultFontColor = _ref2.defaultFontColor,
+    defaultBlockFontColor = _ref2.defaultBlockFontColor;
+  // If backgroundColor is set, but no majorColor,
   // the default majorColor will turn to be defaultBlockFontColor.
   // eg: major color will turn to be white in enterprise mode.
   // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.
-
   if (hasBackground(backgroundColor) && !majorColor) {
     return getDefaultColorWithBg({
       backgroundColor: backgroundColor,
@@ -747,9 +687,9 @@ var getMajorColor = function getMajorColor(_ref2) {
       defaultBlockFontColor: defaultBlockFontColor
     });
   }
-
   return getFormattedColor(majorColor, defaultFontColor);
 };
+
 /**
  * Get the color for the trend components
  * @method getTrendColor
@@ -762,41 +702,35 @@ var getMajorColor = function getMajorColor(_ref2) {
  * @param {Object} defaultColors
  * @returns {String} trendColor
  */
-
 var getTrendColor = function getTrendColor(_ref3) {
   var trendColor = _ref3.trendColor,
-      trendValue = _ref3.trendValue,
-      majorValue = _ref3.majorValue,
-      customizedBgColor = _ref3.customizedBgColor,
-      trendDisplay = _ref3.trendDisplay,
-      defaultColors = _ref3.defaultColors;
-
+    trendValue = _ref3.trendValue,
+    majorValue = _ref3.majorValue,
+    customizedBgColor = _ref3.customizedBgColor,
+    trendDisplay = _ref3.trendDisplay,
+    defaultColors = _ref3.defaultColors;
   if (trendColor) {
     return trendColor;
   }
-
   if (Number.isNaN(Number(trendValue))) {
     return undefined;
   }
-
   var defaultFontColor = defaultColors.defaultFontColor,
-      defaultBlockFontColor = defaultColors.defaultBlockFontColor,
-      defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
-
+    defaultBlockFontColor = defaultColors.defaultBlockFontColor,
+    defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
   if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
     return defaultBlockFontColor;
-  } // if trendDisplay is percent, and trendValue === value
-  // the trend percent = trendValue / (value - trendValue) will return Infinity
-
+  }
 
+  // if trendDisplay is percent, and trendValue === value
+  // the trend percent = trendValue / (value - trendValue) will return Infinity
   var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
-
   if (trendValue === 0 || isInvalidTrend) {
     return defaultFontColor;
   }
-
   return trendValue > 0 ? _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_GREEN"] : _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__["DELTA_RED"];
 };
+
 /**
  * Computes visualization properties for display component
  * @method computeColors
@@ -809,7 +743,6 @@ var getTrendColor = function getTrendColor(_ref3) {
  * @returns {String} trendColor
  * @returns {String} underLabelColor
  */
-
 var computeColors = function computeColors(props, defaultColors) {
   var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
   var backgroundEnabled = hasBackground(backgroundColor);
@@ -826,8 +759,8 @@ var computeColors = function computeColors(props, defaultColors) {
     customizedBgColor: props.backgroundColor,
     trendDisplay: props.trendDisplay,
     defaultColors: defaultColors
-  }); // todo: need change it to not depend on majorColor
-
+  });
+  // todo: need change it to not depend on majorColor
   var underLabelColor = backgroundEnabled ? majorColor : defaultColors.defaultFontColor;
   return {
     backgroundColor: backgroundColor,
@@ -837,6 +770,7 @@ var computeColors = function computeColors(props, defaultColors) {
     underLabelColor: underLabelColor
   };
 };
+
 /**
  * Format and return the value (major/trend)
  * @method computeText
@@ -847,21 +781,21 @@ var computeColors = function computeColors(props, defaultColors) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {Number} major or trend text
  */
-
 var computeText = function computeText(_ref4) {
   var value = _ref4.value,
-      numberPrecision = _ref4.numberPrecision,
-      shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref4.shouldAbbreviateTrendValue;
+    numberPrecision = _ref4.numberPrecision,
+    shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref4.shouldAbbreviateTrendValue;
   var text = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(value) ? Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["formatNumber"])(value, numberPrecision, {
     useThousandSeparators: shouldUseThousandSeparators,
     // todo: need update formatNumber
     useTrendUnits: shouldAbbreviateTrendValue
-  }) : value; // When text is undefined, return empty string
-
+  }) : value;
+  // When text is undefined, return empty string
   text = text || '';
   return text;
 };
+
 /*
  * @method getMajorText
  * @param {Object} props
@@ -870,11 +804,10 @@ var computeText = function computeText(_ref4) {
  * @param {Bool} props.shouldUseThousandSeparators
  * @returns {String} majorText
  */
-
 var getMajorText = function getMajorText(_ref5) {
   var majorValue = _ref5.majorValue,
-      numberPrecision = _ref5.numberPrecision,
-      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
+    numberPrecision = _ref5.numberPrecision,
+    shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators;
   return computeText({
     value: majorValue === null ? 'N/A' : majorValue,
     // if majorValue is null, use `N/A`.
@@ -883,6 +816,7 @@ var getMajorText = function getMajorText(_ref5) {
     shouldAbbreviateTrendValue: false
   });
 };
+
 /*
  * @method getTrendText
  * @param {Object} props
@@ -894,15 +828,13 @@ var getMajorText = function getMajorText(_ref5) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {String} trendText
  */
-
 var getTrendText = function getTrendText(_ref6) {
   var majorValue = _ref6.majorValue,
-      trendValue = _ref6.trendValue,
-      trendDisplay = _ref6.trendDisplay,
-      numberPrecision = _ref6.numberPrecision,
-      shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
-
+    trendValue = _ref6.trendValue,
+    trendDisplay = _ref6.trendDisplay,
+    numberPrecision = _ref6.numberPrecision,
+    shouldUseThousandSeparators = _ref6.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref6.shouldAbbreviateTrendValue;
   var compute = function compute(value) {
     return computeText({
       value: value,
@@ -911,31 +843,25 @@ var getTrendText = function getTrendText(_ref6) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
   };
-
   if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
     return '';
   }
-
   var showPercent = trendDisplay === 'percent';
-
   if (!showPercent) {
     return compute(trendValue);
   }
-
   var diff = Math.abs(trendValue - majorValue);
   var val = Math.round(trendValue / diff * 100);
-
   if (trendValue === 0 && diff === 0) {
     val = 0;
   }
-
   if (!Number.isFinite(val)) {
     return 'N/A';
   }
-
   var text = compute(val);
   return "".concat(text, "%");
 };
+
 /**
  * Helper to determine the font size for an element
  * @method computeFontSize
@@ -947,16 +873,16 @@ var getTrendText = function getTrendText(_ref6) {
  * @param {String} [fontWeight='normal']    Boldness of font
  * @returns {Number} The size to use for fontSize styles
  */
-
 var computeFontSize = function computeFontSize(text, _ref7) {
   var width = _ref7.width,
-      height = _ref7.height;
+    height = _ref7.height;
   var fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FONT_FAMILY;
   var fontWeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'normal';
   var widthInDefaultFont = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(DEFAULT_FONT, "px ").concat(fontFamily));
   var fontSize = Math.min(width / widthInDefaultFont * DEFAULT_FONT, height / DEFAULT_FONT * DEFAULT_FONT);
   return parseInt(fontSize, 10);
 };
+
 /*
  * @method getMajorFontSize
  * @param {Object} props
@@ -967,20 +893,20 @@ var computeFontSize = function computeFontSize(text, _ref7) {
  * @param {Number} props.spaceRatio
  * @returns {Number} majorFontSize
  */
-
 var getMajorFontSize = function getMajorFontSize(_ref8) {
   var width = _ref8.width,
-      height = _ref8.height,
-      unit = _ref8.unit,
-      majorText = _ref8.majorText,
-      _ref8$spaceRatio = _ref8.spaceRatio,
-      spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
+    height = _ref8.height,
+    unit = _ref8.unit,
+    majorText = _ref8.majorText,
+    _ref8$spaceRatio = _ref8.spaceRatio,
+    spaceRatio = _ref8$spaceRatio === void 0 ? 1 : _ref8$spaceRatio;
   var majorTextCalc = unit ? "".concat(unit).concat(majorText) : majorText;
   return computeFontSize(majorTextCalc, {
     width: width * spaceRatio,
     height: height
   });
 };
+
 /*
  * @method getTrendFontSize
  * @param {Object} props
@@ -990,15 +916,13 @@ var getMajorFontSize = function getMajorFontSize(_ref8) {
  * @param {Number} props.spaceRatio
  * @returns {Number} trendFontSize
  */
-
 var getTrendFontSize = function getTrendFontSize(_ref9) {
   var width = _ref9.width,
-      height = _ref9.height,
-      trendText = _ref9.trendText,
-      _ref9$spaceRatio = _ref9.spaceRatio,
-      spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
+    height = _ref9.height,
+    trendText = _ref9.trendText,
+    _ref9$spaceRatio = _ref9.spaceRatio,
+    spaceRatio = _ref9$spaceRatio === void 0 ? 1 : _ref9$spaceRatio;
   var trendFontSize = 12;
-
   if (spaceRatio > 0) {
     trendFontSize = computeFontSize(trendText, {
       width: width * spaceRatio,
@@ -1006,18 +930,18 @@ var getTrendFontSize = function getTrendFontSize(_ref9) {
     });
     trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
   }
-
   return trendFontSize;
 };
+
 /*
  * The height of underLabel should no more than 12px
  * @param {Number} height
  * @return {Number} height || DEFAULT_FONT
  */
-
 var getUnderLabelHeight = function getUnderLabelHeight(height) {
   return height > DEFAULT_FONT ? DEFAULT_FONT : height;
 };
+
 /*
  * @param {Object} config
  * @param {String} underLabel
@@ -1025,18 +949,19 @@ var getUnderLabelHeight = function getUnderLabelHeight(height) {
  * @param {Number} height    height of underLabel
  * @param {Number} fond size of underLabel
  */
-
 var getUnderLabel = function getUnderLabel(_ref10) {
   var underLabel = _ref10.underLabel,
-      width = _ref10.width,
-      height = _ref10.height;
-  return (// todo: may need truncate underLabel later
+    width = _ref10.width,
+    height = _ref10.height;
+  return (
+    // todo: may need truncate underLabel later
     computeFontSize(underLabel, {
       width: width,
       height: height
     })
   );
 };
+
 /**
  * Compute value and font size for major and trend
  * @method getMajorAndTrend
@@ -1054,19 +979,18 @@ var getUnderLabel = function getUnderLabel(_ref10) {
  * @param {Bool} props.shouldAbbreviateTrendValue
  * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size
  */
-
 var getMajorAndTrend = function getMajorAndTrend(_ref11) {
   var width = _ref11.width,
-      height = _ref11.height,
-      majorValue = _ref11.majorValue,
-      trendValue = _ref11.trendValue,
-      majorFontSize = _ref11.majorFontSize,
-      trendFontSize = _ref11.trendFontSize,
-      trendDisplay = _ref11.trendDisplay,
-      unit = _ref11.unit,
-      numberPrecision = _ref11.numberPrecision,
-      shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue;
+    height = _ref11.height,
+    majorValue = _ref11.majorValue,
+    trendValue = _ref11.trendValue,
+    majorFontSize = _ref11.majorFontSize,
+    trendFontSize = _ref11.trendFontSize,
+    trendDisplay = _ref11.trendDisplay,
+    unit = _ref11.unit,
+    numberPrecision = _ref11.numberPrecision,
+    shouldUseThousandSeparators = _ref11.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref11.shouldAbbreviateTrendValue;
   var majorTextSpaceRatio = Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;
   var textContentWidth = width * 0.9;
   var textContentHeight = height * 0.9;
@@ -1103,6 +1027,7 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
     trendTextFontSize: trendTextFontSize
   };
 };
+
 /*
  * @method updateVizInSmallSpace
  * @param {Object} props
@@ -1122,26 +1047,25 @@ var getMajorAndTrend = function getMajorAndTrend(_ref11) {
  * @returns {Object} results.newMajorAndTrend
  * @returns {Object} results.updatedProps
  */
-
 var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
   var width = _ref12.width,
-      height = _ref12.height,
-      toRemoveList = _ref12.toRemoveList,
-      majorValue = _ref12.majorValue,
-      trendValue = _ref12.trendValue,
-      majorFontSize = _ref12.majorFontSize,
-      trendFontSize = _ref12.trendFontSize,
-      majorTextFontSize = _ref12.majorTextFontSize,
-      unit = _ref12.unit,
-      numberPrecision = _ref12.numberPrecision,
-      shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
+    height = _ref12.height,
+    toRemoveList = _ref12.toRemoveList,
+    majorValue = _ref12.majorValue,
+    trendValue = _ref12.trendValue,
+    majorFontSize = _ref12.majorFontSize,
+    trendFontSize = _ref12.trendFontSize,
+    majorTextFontSize = _ref12.majorTextFontSize,
+    unit = _ref12.unit,
+    numberPrecision = _ref12.numberPrecision,
+    shouldUseThousandSeparators = _ref12.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref12.shouldAbbreviateTrendValue;
   var removeIndex = 0;
   var newProps = {}; // options need to be updated
-
   var newMajorAndTrend = {};
-  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
+  var newTextSize = majorTextFontSize;
 
+  // remove info on viz to make textFontSize >= 12px;
   while (newTextSize < 12 && removeIndex < toRemoveList.length) {
     var toRemove = toRemoveList[removeIndex];
     newProps = _objectSpread(_objectSpread({}, newProps), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, toRemove.key, toRemove.value));
@@ -1159,9 +1083,9 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
     }, newProps));
     newTextSize = newMajorAndTrend.majorTextFontSize;
     removeIndex += 1;
-  } // truncate text if textFontSize is still less than 12
-
+  }
 
+  // truncate text if textFontSize is still less than 12
   if (newTextSize < 12) {
     var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
     newMajorAndTrend = getMajorAndTrend(_objectSpread({
@@ -1177,12 +1101,12 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }, newProps));
   }
-
   return {
     newMajorAndTrend: newMajorAndTrend,
     updatedProps: newProps
   };
 };
+
 /*
  * @method computeSingleValueContent
  * @param {Object} props
@@ -1208,71 +1132,67 @@ var updateVizInSmallSpace = function updateVizInSmallSpace(_ref12) {
  * @returns {String} results.majorValueTitle
  * @returns {Object} results.smallVizProps
  */
-
 var computeSingleValueContent = function computeSingleValueContent(_ref13) {
   var contentWidth = _ref13.contentWidth,
-      contentHeight = _ref13.contentHeight,
-      containerWidth = _ref13.containerWidth,
-      containerHeight = _ref13.containerHeight,
-      majorValue = _ref13.majorValue,
-      trendValue = _ref13.trendValue,
-      majorFontSize = _ref13.majorFontSize,
-      trendFontSize = _ref13.trendFontSize,
-      trendDisplay = _ref13.trendDisplay,
-      unit = _ref13.unit,
-      numberPrecision = _ref13.numberPrecision,
-      shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
-      toRemoveList = _ref13.toRemoveList;
-
+    contentHeight = _ref13.contentHeight,
+    containerWidth = _ref13.containerWidth,
+    containerHeight = _ref13.containerHeight,
+    majorValue = _ref13.majorValue,
+    trendValue = _ref13.trendValue,
+    majorFontSize = _ref13.majorFontSize,
+    trendFontSize = _ref13.trendFontSize,
+    trendDisplay = _ref13.trendDisplay,
+    unit = _ref13.unit,
+    numberPrecision = _ref13.numberPrecision,
+    shouldUseThousandSeparators = _ref13.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref13.shouldAbbreviateTrendValue,
+    toRemoveList = _ref13.toRemoveList;
   var _getMajorAndTrend = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
-    width: contentWidth,
-    height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  }),
-      majorText = _getMajorAndTrend.majorText,
-      trendText = _getMajorAndTrend.trendText,
-      majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
-
-  var majorValueTitle = majorText;
-  var smallVizProps = {}; // update viz in small space
-  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
-  // or truncate major value to make the major font size >= 12
-
-  if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
-      width: containerWidth,
-      height: containerHeight,
-      toRemoveList: toRemoveList,
       majorValue: majorValue,
       trendValue: trendValue,
       majorFontSize: majorFontSize,
       trendFontSize: trendFontSize,
-      majorTextFontSize: majorTextFontSize,
+      trendDisplay: trendDisplay,
+      width: contentWidth,
+      height: contentHeight,
       unit: unit,
       numberPrecision: numberPrecision,
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     }),
-        newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
-        updatedProps = _updateVizInSmallSpac.updatedProps;
+    majorText = _getMajorAndTrend.majorText,
+    trendText = _getMajorAndTrend.trendText,
+    majorTextFontSize = _getMajorAndTrend.majorTextFontSize,
+    trendTextFontSize = _getMajorAndTrend.trendTextFontSize;
+  var majorValueTitle = majorText;
+  var smallVizProps = {};
 
+  // update viz in small space
+  // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit
+  // or truncate major value to make the major font size >= 12
+  if (majorTextFontSize < 12) {
+    var _updateVizInSmallSpac = updateVizInSmallSpace({
+        width: containerWidth,
+        height: containerHeight,
+        toRemoveList: toRemoveList,
+        majorValue: majorValue,
+        trendValue: trendValue,
+        majorFontSize: majorFontSize,
+        trendFontSize: trendFontSize,
+        majorTextFontSize: majorTextFontSize,
+        unit: unit,
+        numberPrecision: numberPrecision,
+        shouldUseThousandSeparators: shouldUseThousandSeparators,
+        shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+      }),
+      newMajorAndTrend = _updateVizInSmallSpac.newMajorAndTrend,
+      updatedProps = _updateVizInSmallSpac.updatedProps;
     majorText = newMajorAndTrend.majorText;
     trendText = newMajorAndTrend.trendText;
     majorTextFontSize = newMajorAndTrend.majorTextFontSize;
     trendTextFontSize = newMajorAndTrend.trendTextFontSize;
     smallVizProps = updatedProps;
   }
-
   return {
     majorText: majorText,
     trendText: trendText,
@@ -1284,17 +1204,17 @@ var computeSingleValueContent = function computeSingleValueContent(_ref13) {
 };
 var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_ref14) {
   var text = _ref14.text,
-      _ref14$fontSize = _ref14.fontSize,
-      fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
-      _ref14$fontFamily = _ref14.fontFamily,
-      fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
-      _ref14$fontWeight = _ref14.fontWeight,
-      fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
-      containerWidth = _ref14.containerWidth;
+    _ref14$fontSize = _ref14.fontSize,
+    fontSize = _ref14$fontSize === void 0 ? DEFAULT_FONT : _ref14$fontSize,
+    _ref14$fontFamily = _ref14.fontFamily,
+    fontFamily = _ref14$fontFamily === void 0 ? DEFAULT_FONT_FAMILY : _ref14$fontFamily,
+    _ref14$fontWeight = _ref14.fontWeight,
+    fontWeight = _ref14$fontWeight === void 0 ? 'normal' : _ref14$fontWeight,
+    containerWidth = _ref14.containerWidth;
   var textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(text, "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
   var modifiedText = text;
-  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily)); //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
-
+  var ellipsesLength = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])('...', "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily));
+  //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.
   if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {
     // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.
     //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.
@@ -1303,12 +1223,11 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
       modifiedText = modifiedText.substring(0, modifiedText.length - 1);
       textWidth = Object(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__["computeTextSize"])(modifiedText, "normal ".concat(fontSize, "px ").concat(fontFamily));
     }
-
     modifiedText = "".concat(modifiedText, "...");
   }
-
   return modifiedText;
 };
+
 /*
  * @method computeSingleValueRadialContent
  * @param {Object} props
@@ -1335,46 +1254,44 @@ var minimallyTruncateStringToWidth = function minimallyTruncateStringToWidth(_re
  * @returns {String} results.majorValueTitle
  * @returns {Object} results.smallVizProps
  */
-
 var computeSingleValueRadialContent = function computeSingleValueRadialContent(_ref15) {
   var contentWidth = _ref15.contentWidth,
-      contentHeight = _ref15.contentHeight,
-      containerWidth = _ref15.containerWidth,
-      containerHeight = _ref15.containerHeight,
-      majorValue = _ref15.majorValue,
-      trendValue = _ref15.trendValue,
-      majorFontSize = _ref15.majorFontSize,
-      trendFontSize = _ref15.trendFontSize,
-      trendDisplay = _ref15.trendDisplay,
-      unit = _ref15.unit,
-      numberPrecision = _ref15.numberPrecision,
-      shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
-      smallViz = _ref15.smallViz;
-
+    contentHeight = _ref15.contentHeight,
+    containerWidth = _ref15.containerWidth,
+    containerHeight = _ref15.containerHeight,
+    majorValue = _ref15.majorValue,
+    trendValue = _ref15.trendValue,
+    majorFontSize = _ref15.majorFontSize,
+    trendFontSize = _ref15.trendFontSize,
+    trendDisplay = _ref15.trendDisplay,
+    unit = _ref15.unit,
+    numberPrecision = _ref15.numberPrecision,
+    shouldUseThousandSeparators = _ref15.shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue = _ref15.shouldAbbreviateTrendValue,
+    smallViz = _ref15.smallViz;
   var _getMajorAndTrend2 = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
-    width: contentWidth,
-    height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  }),
-      majorText = _getMajorAndTrend2.majorText,
-      trendText = _getMajorAndTrend2.trendText,
-      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
-
+      majorValue: majorValue,
+      trendValue: trendValue,
+      majorFontSize: majorFontSize,
+      trendFontSize: trendFontSize,
+      trendDisplay: trendDisplay,
+      width: contentWidth,
+      height: contentHeight,
+      unit: unit,
+      numberPrecision: numberPrecision,
+      shouldUseThousandSeparators: shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    }),
+    majorText = _getMajorAndTrend2.majorText,
+    trendText = _getMajorAndTrend2.trendText,
+    majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
+    trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
   var majorValueTitle = majorText;
-  var smallVizProps = {}; // custom logic for viz in small space
+  var smallVizProps = {};
+
+  // custom logic for viz in small space
   // if not showing the radial graph (if `smallViz` is true), then compute truncated major value
   //  and font sizes
-
   if (smallViz) {
     var truncateValue = minimallyTruncateStringToWidth({
       text: majorValue,
@@ -1382,7 +1299,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       fontSize: 12,
       containerWidth: containerWidth
     });
-
     var _getMajorAndTrend3 = getMajorAndTrend({
       majorValue: truncateValue,
       trendValue: trendValue,
@@ -1396,7 +1312,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       shouldUseThousandSeparators: shouldUseThousandSeparators,
       shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
     });
-
     majorText = _getMajorAndTrend3.majorText;
     trendText = _getMajorAndTrend3.trendText;
     majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
@@ -1406,7 +1321,6 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
       unit: unit
     };
   }
-
   return {
     majorText: majorText,
     trendText: trendText,
@@ -1416,6 +1330,7 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
     smallVizProps: smallVizProps
   };
 };
+
 /**
  * Get the colors for a graph
  *
@@ -1428,22 +1343,21 @@ var computeSingleValueRadialContent = function computeSingleValueRadialContent(_
  * @returns {Object} { background, stroke } colors
  * @private
  */
-
 var getGraphColors = function getGraphColors(_ref16) {
   var backgroundEnabled = _ref16.backgroundEnabled,
-      backgroundColor = _ref16.backgroundColor,
-      defaultColors = _ref16.defaultColors,
-      customColorFormatter = _ref16.customColorFormatter; // Only do custom colors in block mode
-
+    backgroundColor = _ref16.backgroundColor,
+    defaultColors = _ref16.defaultColors,
+    customColorFormatter = _ref16.customColorFormatter;
+  // Only do custom colors in block mode
   if (backgroundEnabled) {
     // Check if the user defined colors to use
     if (backgroundColor && typeof customColorFormatter === 'function') {
       return customColorFormatter(backgroundColor);
     }
   }
-
   return defaultColors.none;
 };
+
 /**
  * Adjust rgb value if it equals to 0 or 255
  * @method adjustRGB
@@ -1452,18 +1366,16 @@ var getGraphColors = function getGraphColors(_ref16) {
  * @returns {Number} adjusted rgb
  * @private
  */
-
 var adjustRGB = function adjustRGB(rgb, delta) {
   if (rgb === 255) {
     return rgb - delta;
   }
-
   if (rgb === 0) {
     return rgb + delta;
   }
-
   return rgb;
 };
+
 /**
  * Modifies colors by multiplying by a given ratio
  * @method changeColor
@@ -1472,16 +1384,18 @@ var adjustRGB = function adjustRGB(rgb, delta) {
  * @returns {String} new color
  * @private
  */
-
 var changeColor = function changeColor(color, ratio) {
   var hex = color.replace(/(0x|#)/, '');
   var r = parseInt(hex.substr(0, 2), 16);
   var g = parseInt(hex.substr(2, 2), 16);
-  var b = parseInt(hex.substr(4, 2), 16); // Multiply by given ratio, make sure is between 0 and 255;
+  var b = parseInt(hex.substr(4, 2), 16);
 
+  // Multiply by given ratio, make sure is between 0 and 255;
   var newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
   var newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
-  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0); // If the color is not changed
+  var newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);
+
+  // If the color is not changed
   // case 1: the color is (0, 0 0)
   //         lighten color (80, 80, 80)
   //         darken color (40, 40, 40)
@@ -1490,7 +1404,6 @@ var changeColor = function changeColor(color, ratio) {
   //         darken color (175, 175, 175)
   // case 3: the color is e.g. (0, 255, 0)
   //         new color (20, 235, 20)
-
   if (newR === r && newG === g && newB === b) {
     if (newR === 0 && newG === 0 && newB === 0) {
       if (ratio > 1) {
@@ -1518,9 +1431,9 @@ var changeColor = function changeColor(color, ratio) {
       newB = adjustRGB(newB, 20);
     }
   }
-
   return "#".concat(newR.toString(16).padStart(2, 0)) + "".concat(newG.toString(16).padStart(2, 0)) + "".concat(newB.toString(16).padStart(2, 0));
 };
+
 /**
  * Lighten a given color
  * @method lighten
@@ -1528,11 +1441,10 @@ var changeColor = function changeColor(color, ratio) {
  * @returns {String}
  * @private
  */
-
-
 var lighten = function lighten(color) {
   return changeColor(color, 1.3);
 };
+
 /**
  * Darkens a given color
  * @method darken
@@ -1540,10 +1452,10 @@ var lighten = function lighten(color) {
  * @returns {String}
  * @private
  */
-
 var darken = function darken(color) {
   return changeColor(color, 0.5);
 };
+
 /** consistent token structure: handle callback to add value and name in event payload
  * @method handleValueClickCallback
  * @param {Object} ev
@@ -1552,7 +1464,6 @@ var darken = function darken(color) {
  * @param {Number} trendValue
  * @param {Function} onValueClick
  */
-
 var handleValueClickCallback = function handleValueClickCallback(ev, majorValue, majorValueField, trendValue, onValueClick) {
   var trellisEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var trellisSplityBy = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : '';
@@ -1562,14 +1473,12 @@ var handleValueClickCallback = function handleValueClickCallback(ev, majorValue,
     value: majorValue,
     name: majorValueField
   };
-
   if (trellisEnabled) {
     payload = _objectSpread(_objectSpread({}, payload), {}, {
       'trellis.name': trellisSplityBy,
       'trellis.value': trellisKey
     });
   }
-
   return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
     payload: payload
   }));
@@ -1636,17 +1545,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
-
 var React = __webpack_require__(0);
-
 var T = __webpack_require__(1);
-
 var lodash_1 = __webpack_require__(3);
-
 var i18n_1 = __webpack_require__(2);
-
 var Message_1 = __webpack_require__(9);
-
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -1654,8 +1557,6 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @param {boolean} loading
  * @returns {boolean}
  */
-
-
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
@@ -1664,7 +1565,6 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
-
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -1679,13 +1579,11 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
-
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
-
+    height = props.height,
+    icon = props.icon,
+    iconColor = props.iconColor;
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -1700,7 +1598,6 @@ var IconPlaceholder = function IconPlaceholder(props) {
       height: '50%'
     });
   }
-
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
@@ -1708,7 +1605,6 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: i18n_1._('No DataSource Connected')
   });
 };
-
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -1732,27 +1628,21 @@ module.exports = require("@splunk/ui-utils/id");
 
 
 var _defineProperty = __webpack_require__(8);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-
 var T = __webpack_require__(1);
-
 var lodash_1 = __webpack_require__(3);
-
 var DataSource_1 = __webpack_require__(43);
-
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
   currentSortDir: T.oneOf(DataSource_1.validSortDirs),
   onSort: T.func
 });
-
 var getSortingParams = function getSortingParams(_ref) {
   var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
+    onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -1761,18 +1651,15 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
-
   if (typeof onRequestParamsChange === 'function') {
     if (requestParams && lodash_1.has(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
-
-
+    }
+    // undid memoization since there is a dependency on requestParams, which is a deeply nested object
     onSort = function onSort(e, _ref2) {
       var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
-
+        sortDir = _ref2.sortDir;
       if (typeof sortKey === 'string') {
         var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
@@ -1784,14 +1671,12 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
-
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
-
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -1806,49 +1691,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
 var T = __webpack_require__(1);
-
 var lodash_1 = __webpack_require__(3);
-
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
-
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-      meta = _ref.meta,
-      onRequestParamsChange = _ref.onRequestParamsChange;
+    meta = _ref.meta,
+    onRequestParamsChange = _ref.onRequestParamsChange;
   var totalCount = meta && meta.totalCount || 0;
   var offset = requestParams && requestParams.offset || 0;
   var count = requestParams && requestParams.count;
   var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
   var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
   var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
-
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
-        countArg = _ref2.count;
+      countArg = _ref2.count;
     var newParams = lodash_1.cloneDeep(requestParams);
-
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
     }
-
     var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
-
     if (typeof page === 'number' && page > 0) {
       newParams.count = pageCount;
       newParams.offset = (page - 1) * pageCount;
     }
-
     onRequestParamsChange(newParams);
   };
-
   return {
     isPaging: isPaging,
     current: current,
@@ -1856,7 +1731,6 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
-
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
@@ -1872,7 +1746,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
-
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -1897,90 +1770,60 @@ var VizCategory;
 
 
 var _slicedToArray = __webpack_require__(17);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var lodash_1 = __webpack_require__(3);
-
 var getSettingsFromThemedProps_1 = __webpack_require__(37);
-
 var Options_1 = __webpack_require__(29);
-
 var SanitizeProps_1 = __webpack_require__(38);
-
 var TimezoneContext_1 = __webpack_require__(25);
-
 var moment_1 = __webpack_require__(39);
-
 var FeatureFlagContext_1 = __webpack_require__(20);
-
 var styled_components_1 = __webpack_require__(4);
-
 var hocUtils_1 = __webpack_require__(26);
-
 var JSONSchemaUtils_1 = __webpack_require__(27);
-
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
-
 var id_1 = __webpack_require__(32);
-
 var SplunkVisualization_1 = __webpack_require__(41);
-
 var VizBehavior_1 = __webpack_require__(6);
-
 var getSorting_1 = __webpack_require__(33);
-
 var getPagination_1 = __webpack_require__(34);
-
 var useDeepMemo_1 = __webpack_require__(44);
-
 var MissingPropsMessage_1 = __webpack_require__(45);
-
 var withEditModeCover_1 = __webpack_require__(46);
-
 var withPlaceholder_1 = __webpack_require__(47);
-
-var UUID = id_1.createGUID();
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
-
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
-      vizConfig = opts.vizConfig,
-      _opts$computeVizProps = opts.computeVizProps,
-      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-      disableEditModeCover = opts.disableEditModeCover,
-      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
-
+    vizConfig = opts.vizConfig,
+    _opts$computeVizProps = opts.computeVizProps,
+    computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+    disableEditModeCover = opts.disableEditModeCover,
+    useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
   var SanitizedReactViz = SanitizeProps_1.withSanitizedProps(ReactViz);
   var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
-
   var DashboardViz = function DashboardViz(props) {
     var _a;
-
     var mode = props.mode,
-        hasEventHandlers = props.hasEventHandlers,
-        dataSources = props.dataSources,
-        options = props.options,
-        _props$context = props.context,
-        context = _props$context === void 0 ? {} : _props$context,
-        width = props.width,
-        height = props.height,
-        onComputedProps = props.onComputedProps,
-        onEventTrigger = props.onEventTrigger,
-        theme = props.theme,
-        onRequestParamsChange = props.onRequestParamsChange;
-
+      hasEventHandlers = props.hasEventHandlers,
+      dataSources = props.dataSources,
+      options = props.options,
+      _props$context = props.context,
+      context = _props$context === void 0 ? {} : _props$context,
+      width = props.width,
+      height = props.height,
+      onComputedProps = props.onComputedProps,
+      onEventTrigger = props.onEventTrigger,
+      theme = props.theme,
+      onRequestParamsChange = props.onRequestParamsChange;
     var _React$useContext = React.useContext(TimezoneContext_1.default),
-        serializedTimezone = _React$useContext.serializedTimezone;
-
+      serializedTimezone = _React$useContext.serializedTimezone;
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -1994,41 +1837,30 @@ var withDashboardViz = function withDashboardViz(opts) {
         moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
       }
     }
-
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
-
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
-
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
-
     var _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
-      theme: theme
-    }),
-        currentThemeFamily = _getSettingsFromTheme.family,
-        currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
-        currentThemeDensity = _getSettingsFromTheme.density;
-
+        theme: theme
+      }),
+      currentThemeFamily = _getSettingsFromTheme.family,
+      currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
+      currentThemeDensity = _getSettingsFromTheme.density;
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
-
     var _React$useState = React.useState({}),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        evaluatedOptionsAsync = _React$useState2[0],
-        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
-
-
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      evaluatedOptionsAsync = _React$useState2[0],
+      setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
-
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(UUID)),
-        _React$useState4 = _slicedToArray(_React$useState3, 1),
-        visualizationID = _React$useState4[0];
-
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
+      _React$useState4 = _slicedToArray(_React$useState3, 1),
+      visualizationID = _React$useState4[0];
     var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        useAsyncEvaluatedOptions = _React$useState6[0],
-        setUseAsyncEvaluatedOptions = _React$useState6[1];
-
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      useAsyncEvaluatedOptions = _React$useState6[0],
+      setUseAsyncEvaluatedOptions = _React$useState6[1];
     evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
       try {
         if (useAsyncEvaluatedOptions) {
@@ -2061,22 +1893,21 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
-
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    // trellis specific backgroundColor update for onComputedProps
     // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
     // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
-
     var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    var clonedEvaluatedOptions = lodash_1.cloneDeep(evaluatedOptionsToUse);
-
+    var clonedEvaluatedOptions = evaluatedOptionsToUse;
     if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
-      clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
-    } // useEffect hook needs to be initialized before any early returns
+      clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
+        backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
+      });
+    }
+    // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
-
-
     React.useEffect(function () {
       onComputedProps(clonedEvaluatedOptions);
     });
@@ -2085,49 +1916,44 @@ var withDashboardViz = function withDashboardViz(opts) {
         if (useAsyncEvaluatedOptions) {
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // present warning message if any required props are missing
-
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // present warning message if any required props are missing
     var _vizConfig$requiredPr = vizConfig.requiredProps,
-        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-        supports = vizConfig.supports;
+      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+      supports = vizConfig.supports;
     var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
-
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
-    ) {
-        return React.createElement(MissingPropsMessage_1.default, {
-          "data-test": "missing-props-message",
-          width: width,
-          height: height,
-          missingProps: missing,
-          backgroundColor: bgColorFromTheme
-        });
-      } // events
-
-
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
+    ) {
+      return React.createElement(MissingPropsMessage_1.default, {
+        "data-test": "missing-props-message",
+        width: width,
+        height: height,
+        missingProps: missing,
+        backgroundColor: bgColorFromTheme
+      });
+    }
+    // events
     var eventCallbackProps = {};
-
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
         var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
+        eventCallbackProps[eventCallbackPropName] = null;
+        // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
-
         var payloadKeys = supportedEvents[eventName].payloadKeys;
         var payload = {};
-
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
             payload[p] = evaluatedOptionsToUse[p];
           });
         }
-
         eventCallbackProps[eventCallbackPropName] = function (ev) {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
-
           return onEventTrigger({
             originalEvent: ev,
             payload: payload,
@@ -2135,9 +1961,8 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         };
       });
-    } // compute pure viz props which are not from options
-
-
+    }
+    // compute pure viz props which are not from options
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
@@ -2155,19 +1980,15 @@ var withDashboardViz = function withDashboardViz(opts) {
      * In future, we could automatically detect which all datasources are being used
      * and bind those magically to pagination/sorting behavior.
      */
-
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
     var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-
     if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
       var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
       var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
-
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
-
       var sortParams = getSorting_1.getSortingParams({
         requestParams: requestParams,
         meta: meta,
@@ -2183,25 +2004,26 @@ var withDashboardViz = function withDashboardViz(opts) {
         paginatorParams: paginatorParams
       };
     }
-
+    // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
+      return null;
+    }
     return React.createElement(SanitizedReactViz, Object.assign({
       mode: mode,
       width: width,
       height: height
     }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
-
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
   DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
     // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
     theme: {}
-  }); // attach viz config
-
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
-
+  });
+  // attach viz config
+  DashboardViz.config = vizConfig;
+  // @ts-ignore: TODO fix sc upgrade TS issues
   return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
 };
-
 exports.default = withDashboardViz;
 
 /***/ }),
@@ -2248,61 +2070,48 @@ module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 
 var _classCallCheck = __webpack_require__(11);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
-
 var T = __webpack_require__(1);
-
 var lodash_1 = __webpack_require__(3);
-
-var VizActionHandler_1 = __webpack_require__(42); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-
-
+var VizActionHandler_1 = __webpack_require__(42);
+// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 exports.INITIAL_WIDTH = 250;
 exports.INITIAL_HEIGHT = 250;
 /**
  * A Splunk visualization
  */
-
 var SplunkVisualization = function SplunkVisualization() {
   _classCallCheck(this, SplunkVisualization);
 };
-
 SplunkVisualization.propTypes = {
   /**
    * display mode
    */
   mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-
   /**
    * width in pixel or string, defaults to 100%
    */
   width: T.oneOfType([T.string, T.number]).isRequired,
-
   /**
    * height in pixel or string
    */
   height: T.oneOfType([T.string, T.number]).isRequired,
-
   /**
    * visualization context used for dynamic option evaluation
    */
   context: T.object,
-
   /**
    * visualization formatting options
    */
   options: T.object,
-
   /**
    * A callback to update formatting options
    */
   onOptionsChange: T.func,
-
   /**
    * datasource state which include data and request params, object key indicate the datasource type.
    */
@@ -2311,7 +2120,6 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
-
     /**
      * current dataset
      */
@@ -2319,7 +2127,6 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
-
     /**
      * error
      */
@@ -2327,35 +2134,29 @@ SplunkVisualization.propTypes = {
       level: T.string,
       message: T.string
     }),
-
     /**
      * meta data that came with the dataset
      */
     meta: T.object
   })),
-
   /**
    * A callback to trigger event
    */
   onEventTrigger: T.func,
-
   /**
    * Inform viz if there are handlers listening to events
    */
   hasEventHandlers: T.bool,
-
   /**
    * A callback to communicate computed props to a consumer
    */
   onComputedProps: T.func,
-
   /**
    * A callback to obtain visualization api
    */
   vizActionHandlerRef: T.func,
   loading: T.bool,
   theme: T.object,
-
   /**
    * A callback to request new data with updated request params
    */
@@ -2364,7 +2165,6 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
-
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -2400,22 +2200,19 @@ exports.default = SplunkVisualization;
 
 
 var _classCallCheck = __webpack_require__(11);
-
 var _createClass = __webpack_require__(22);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultVizActionHandler = void 0;
-
 var DefaultVizActionHandler = /*#__PURE__*/function () {
   function DefaultVizActionHandler() {
     _classCallCheck(this, DefaultVizActionHandler);
   }
-
   _createClass(DefaultVizActionHandler, [{
     key: "focus",
-    value: function focus() {// noop
+    value: function focus() {
+      // noop
     }
   }, {
     key: "snapshot",
@@ -2423,10 +2220,8 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
       return null; // noop
     }
   }]);
-
   return DefaultVizActionHandler;
 }();
-
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
@@ -2439,47 +2234,36 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themes = exports.computeVizProps = exports.PureParallelCoordinates = exports.config = void 0;
-
 var PureParallelCoordinates_1 = __webpack_require__(428);
-
 var withDashboardViz_1 = __webpack_require__(36);
-
 var config_1 = __webpack_require__(435);
-
 var singleValueUtils_1 = __webpack_require__(24);
-
 exports.config = config_1.default;
 exports.PureParallelCoordinates = PureParallelCoordinates_1.default;
-
 var computeVizProps = function computeVizProps(_a) {
   var themeFunc = _a.themeFunc,
-      props = __rest(_a, ["themeFunc"]);
-
+    props = __rest(_a, ["themeFunc"]);
   var defaultThemeColorVariables = ['defaultBackgroundColor', 'axisLineColor', 'axisLineHighlightColor', 'axisLabelColor', 'axisTitleColor', 'filterButtonDisabledColor', 'filterButtonActiveColor', 'filterTextColor', 'truncatedTextColor', 'filterSelectionColor', 'textShadowColor'];
   var defaultThemeColors = {};
   defaultThemeColorVariables.forEach(function (variable) {
     defaultThemeColors[variable] = themeFunc(variable);
   });
-
   if (props.dataSources) {
     var _props$dataSources$pr = props.dataSources.primary.data,
-        fields = _props$dataSources$pr.fields,
-        columns = _props$dataSources$pr.columns;
+      fields = _props$dataSources$pr.fields,
+      columns = _props$dataSources$pr.columns;
     return Object.assign({
       fields: fields.map(function (field) {
         return field.name ? field.name : field;
@@ -2487,10 +2271,8 @@ var computeVizProps = function computeVizProps(_a) {
       columns: columns
     }, defaultThemeColors);
   }
-
   return defaultThemeColors;
 };
-
 exports.computeVizProps = computeVizProps;
 var viz = withDashboardViz_1.default({
   ReactViz: exports.PureParallelCoordinates,
@@ -2512,63 +2294,49 @@ exports.default = viz;
 
 
 var _toConsumableArray = __webpack_require__(7);
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var d3_array_1 = __webpack_require__(61);
-
 var d3_scale_1 = __webpack_require__(86);
-
 var T = __webpack_require__(1);
-
 var i18n_1 = __webpack_require__(2);
-
 var Message_1 = __webpack_require__(9);
-
 var ParallelCoordinatesChart_1 = __webpack_require__(429);
-
 var PureParallelCoordinates = function PureParallelCoordinates(_a) {
   var props = __rest(_a, []);
-
   var width = props.width,
-      height = props.height,
-      columns = props.columns,
-      fields = props.fields,
-      showNullAxis = props.showNullAxis,
-      lineColor = props.lineColor,
-      backgroundColor = props.backgroundColor,
-      axisLineHighlightColor = props.axisLineHighlightColor,
-      axisLineColor = props.axisLineColor,
-      axisTitleColor = props.axisTitleColor,
-      axisLabelColor = props.axisLabelColor,
-      lineOpacity = props.lineOpacity,
-      filterButtonDisabledColor = props.filterButtonDisabledColor,
-      filterButtonActiveColor = props.filterButtonActiveColor,
-      filterTextColor = props.filterTextColor,
-      truncatedTextColor = props.truncatedTextColor,
-      filterSelectionColor = props.filterSelectionColor,
-      textShadowColor = props.textShadowColor,
-      mode = props.mode;
+    height = props.height,
+    columns = props.columns,
+    fields = props.fields,
+    showNullAxis = props.showNullAxis,
+    lineColor = props.lineColor,
+    backgroundColor = props.backgroundColor,
+    axisLineHighlightColor = props.axisLineHighlightColor,
+    axisLineColor = props.axisLineColor,
+    axisTitleColor = props.axisTitleColor,
+    axisLabelColor = props.axisLabelColor,
+    lineOpacity = props.lineOpacity,
+    filterButtonDisabledColor = props.filterButtonDisabledColor,
+    filterButtonActiveColor = props.filterButtonActiveColor,
+    filterTextColor = props.filterTextColor,
+    truncatedTextColor = props.truncatedTextColor,
+    filterSelectionColor = props.filterSelectionColor,
+    textShadowColor = props.textShadowColor,
+    mode = props.mode;
   var minWidth = 200;
   var minHieght = 150;
-
   if (width < minWidth || height < minHieght) {
     return React.createElement(Message_1.default, {
       width: width,
@@ -2577,28 +2345,24 @@ var PureParallelCoordinates = function PureParallelCoordinates(_a) {
       level: "info"
     });
   }
-
   var nullOffsetHeight = 30;
   var axisPadding = 0.3;
   var minLabelHeight = 16;
-  var truncatedCategoriesFlag = false; // Set up chart margins
-
+  var truncatedCategoriesFlag = false;
+  // Set up chart margins
   var margin = {
     top: 27,
     right: 20,
     bottom: 40,
     left: 40
   };
-
   if (showNullAxis) {
     margin.bottom += nullOffsetHeight;
   }
-
   var chartWidth = +width - margin.left - margin.right;
-  var chartHeight = +height - margin.top - margin.bottom; // Data processing logic:
-
+  var chartHeight = +height - margin.top - margin.bottom;
+  // Data processing logic:
   var data = [];
-
   var _loop = function _loop(i) {
     var newObj = {};
     fields.forEach(function (field, index) {
@@ -2610,27 +2374,22 @@ var PureParallelCoordinates = function PureParallelCoordinates(_a) {
     });
     data.push(newObj);
   };
-
   for (var i = 0; i < columns[0].length; i += 1) {
     _loop(i);
-  } // Calculate horizontal and vertical scales
-
-
+  }
+  // Calculate horizontal and vertical scales
   var keys = Object.keys(data[0]);
-  var yPositionScale = {}; // check whether the value is numeric
-
+  var yPositionScale = {};
+  // check whether the value is numeric
   var quantVal = function quantVal(v) {
     return !Number.isNaN(Number(v)) || v === null;
-  }; // const dimensions = keys.filter(key => key !== 'name');
-
-
-  var dimensions = _toConsumableArray(keys);
-
+  };
+  // const dimensions = keys.filter(key => key !== 'name');
+  var dimensions = [].concat(keys);
   dimensions.forEach(function (d) {
     var val = data.map(function (p) {
       return p[d];
     });
-
     if (val.every(quantVal)) {
       // set numeric axis scale
       yPositionScale[d] = d3_scale_1.scaleLinear().domain(d3_array_1.extent(data, function (p) {
@@ -2642,7 +2401,6 @@ var PureParallelCoordinates = function PureParallelCoordinates(_a) {
         return val.indexOf(v) === i;
       });
       var updatedDomain;
-
       if (chartHeight / categoryDomain.length > minLabelHeight) {
         updatedDomain = _toConsumableArray(categoryDomain);
       } else {
@@ -2652,7 +2410,6 @@ var PureParallelCoordinates = function PureParallelCoordinates(_a) {
           return updatedDomain.includes(row[d]);
         });
       }
-
       yPositionScale[d] = d3_scale_1.scalePoint().domain(updatedDomain).range([chartHeight, 0]);
     }
   });
@@ -2687,7 +2444,6 @@ var PureParallelCoordinates = function PureParallelCoordinates(_a) {
     mode: mode
   });
 };
-
 PureParallelCoordinates.propTypes = {
   backgroundColor: T.string,
   width: T.number,
@@ -2742,42 +2498,28 @@ exports.default = PureParallelCoordinates;
 
 
 var _toConsumableArray = __webpack_require__(7);
-
 var _slicedToArray = __webpack_require__(17);
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var styled_components_1 = __webpack_require__(4);
-
 var d3_selection_1 = __webpack_require__(430);
-
 var d3_brush_1 = __webpack_require__(431);
-
 var d3_axis_1 = __webpack_require__(432);
-
 var d3_drag_1 = __webpack_require__(433);
-
 var rgb_hex_converter_1 = __webpack_require__(159);
-
 var ParallelCoordinatesCanvas_1 = __webpack_require__(434);
-
 var ChartDiv = styled_components_1.default.div.withConfig({
   displayName: "ParallelCoordinatesChart__ChartDiv",
   componentId: "sc-1oivyc-0"
@@ -2804,129 +2546,112 @@ var FilterButton = styled_components_1.default.button.attrs({
 })(["margin-left:16px;display:flex;border:none;background:none;color:", ";cursor:pointer;font-size:12px;padding-top:0;padding-bottom:0;padding-left:0;"], function (props) {
   return props.filterButtonColor;
 });
-
 var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
   var props = __rest(_a, []);
-
   var width = props.width,
-      height = props.height,
-      margin = props.margin,
-      axisPadding = props.axisPadding,
-      data = props.data,
-      dimensions = props.dimensions,
-      xPositionScale = props.xPositionScale,
-      yPositionScale = props.yPositionScale,
-      showNullAxis = props.showNullAxis,
-      nullOffsetHeight = props.nullOffsetHeight,
-      nullAxisScale = props.nullAxisScale,
-      lineColor = props.lineColor,
-      lineOpacity = props.lineOpacity,
-      backgroundColor = props.backgroundColor,
-      axisLineHighlightColor = props.axisLineHighlightColor,
-      axisLineColor = props.axisLineColor,
-      axisTitleColor = props.axisTitleColor,
-      axisLabelColor = props.axisLabelColor,
-      filterButtonDisabledColor = props.filterButtonDisabledColor,
-      filterButtonActiveColor = props.filterButtonActiveColor,
-      filterTextColor = props.filterTextColor,
-      truncatedCategoriesFlag = props.truncatedCategoriesFlag,
-      truncatedTextColor = props.truncatedTextColor,
-      filterSelectionColor = props.filterSelectionColor,
-      textShadowColor = props.textShadowColor;
+    height = props.height,
+    margin = props.margin,
+    axisPadding = props.axisPadding,
+    data = props.data,
+    dimensions = props.dimensions,
+    xPositionScale = props.xPositionScale,
+    yPositionScale = props.yPositionScale,
+    showNullAxis = props.showNullAxis,
+    nullOffsetHeight = props.nullOffsetHeight,
+    nullAxisScale = props.nullAxisScale,
+    lineColor = props.lineColor,
+    lineOpacity = props.lineOpacity,
+    backgroundColor = props.backgroundColor,
+    axisLineHighlightColor = props.axisLineHighlightColor,
+    axisLineColor = props.axisLineColor,
+    axisTitleColor = props.axisTitleColor,
+    axisLabelColor = props.axisLabelColor,
+    filterButtonDisabledColor = props.filterButtonDisabledColor,
+    filterButtonActiveColor = props.filterButtonActiveColor,
+    filterTextColor = props.filterTextColor,
+    truncatedCategoriesFlag = props.truncatedCategoriesFlag,
+    truncatedTextColor = props.truncatedTextColor,
+    filterSelectionColor = props.filterSelectionColor,
+    textShadowColor = props.textShadowColor;
   var brushWidth = 16;
-  var maxStrLength = 7; // axis dragging storage variable
-
-  var dragging = {}; // brushing event handling variables
-
+  var maxStrLength = 7;
+  // axis dragging storage variable
+  var dragging = {};
+  // brushing event handling variables
   var brush = d3_brush_1.brushY().extent([[-brushWidth / 2, 0], [brushWidth / 2, height]]);
-  var updatedTextShadowColor = backgroundColor === 'transparent' ? textShadowColor : backgroundColor; // axis dragging feature state declaration
-
+  var updatedTextShadowColor = backgroundColor === 'transparent' ? textShadowColor : backgroundColor;
+  // axis dragging feature state declaration
   var _React$useState = React.useState(dimensions),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      currentDimensions = _React$useState2[0],
-      setCurrentDimensions = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentDimensions = _React$useState2[0],
+    setCurrentDimensions = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      dragStatus = _React$useState4[0],
-      setDragStatus = _React$useState4[1]; // brushing feature state declaration
-
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dragStatus = _React$useState4[0],
+    setDragStatus = _React$useState4[1]; // brushing feature state declaration
   var _React$useState5 = React.useState(data),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      selectedData = _React$useState6[0],
-      setSelectedData = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    selectedData = _React$useState6[0],
+    setSelectedData = _React$useState6[1];
   var _React$useState7 = React.useState(new Map()),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      selections = _React$useState8[0],
-      setSelections = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selections = _React$useState8[0],
+    setSelections = _React$useState8[1];
   var _React$useState9 = React.useState(false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      filterPromptState = _React$useState10[0],
-      setFilterPromptState = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    filterPromptState = _React$useState10[0],
+    setFilterPromptState = _React$useState10[1];
   var _React$useState11 = React.useState(filterButtonDisabledColor),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      filterButtonColor = _React$useState12[0],
-      setFilterButtonColor = _React$useState12[1];
-
-  var svgRef = React.useRef(null); // update xPositionScale
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    filterButtonColor = _React$useState12[0],
+    setFilterButtonColor = _React$useState12[1];
+  var svgRef = React.useRef(null);
+  // update xPositionScale
   xPositionScale.domain(currentDimensions);
-  nullAxisScale.domain(currentDimensions).range([0, width - 2 * axisPadding * xPositionScale.step()]); // axis dragging helper functions
-
+  nullAxisScale.domain(currentDimensions).range([0, width - 2 * axisPadding * xPositionScale.step()]);
+  // axis dragging helper functions
   var position = function position(d) {
     var v = dragging[d];
     return v == null ? xPositionScale(d) : v;
   };
-
   var transition = function transition(g) {
     return g.transition().duration(500);
-  }; // clear filter button
-
-
+  };
+  // clear filter button
   var clearAllFilters = function clearAllFilters() {
     d3_selection_1.select(svgRef.current).selectAll('.brush').call(brush.move, null);
     setSelections(new Map());
     setSelectedData(data);
     setFilterPromptState(false);
     setFilterButtonColor(filterButtonDisabledColor);
-  }; // truncated string to a length for categorical axis label
-
-
+  };
+  // truncated string to a length for categorical axis label
   var truncate = function truncate(str, maxLength) {
     var updatedSuffix = '...';
     var updateStr = str || 'null';
-
     if (Array.isArray(updateStr)) {
       updateStr = updateStr.join(', ');
     }
-
     if (typeof updateStr === 'string' && updateStr.length > maxLength) {
       updateStr = updateStr.substring(0, maxLength - 1);
       updateStr += updatedSuffix;
     }
-
     return updateStr;
   };
-
   React.useEffect(function () {
     // clean svg before drawing
-    var svg = d3_selection_1.select(svgRef.current).html('').attr('height', height + margin.top + margin.bottom).attr('width', width + margin.left + margin.right).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")")); // Add a group element for each dimension
-
+    var svg = d3_selection_1.select(svgRef.current).html('').attr('height', height + margin.top + margin.bottom).attr('width', width + margin.left + margin.right).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")"));
+    // Add a group element for each dimension
     var g = svg.selectAll('.dimension').data(currentDimensions).join('g').attr('class', 'dimension').attr('data-test', 'dimension').attr('transform', function (d) {
       return "translate(".concat(xPositionScale(d), ")");
-    }).style('cursor', 'ew-resize'); // axis dragging event handling
-
+    }).style('cursor', 'ew-resize');
+    // axis dragging event handling
     var dragstarted = function dragstarted(event, d) {
       d3_selection_1.select(event.sourceEvent.currentTarget).selectAll('.axis path').style('stroke', axisLineHighlightColor);
       d3_selection_1.select(event.sourceEvent.currentTarget).selectAll('.axis line').style('stroke', axisLineHighlightColor);
       dragging[d] = xPositionScale(d);
       setDragStatus(true);
     };
-
     var dragged = function dragged(event, d) {
       dragging[d] = Math.min(width, Math.max(0, event.x));
       currentDimensions.sort(function (a, b) {
@@ -2938,16 +2663,14 @@ var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
         return "translate(".concat(position(p), ")");
       });
     };
-
     function dragended(_event, d) {
       delete dragging[d];
       d3_selection_1.select(this).select('.axis path').style('stroke', axisLineColor);
       d3_selection_1.select(this).selectAll('.axis line').style('stroke', axisLineColor);
       transition(d3_selection_1.select(this).attr('transform', "translate(".concat(xPositionScale(d), ")")));
       setDragStatus(false);
-    } // Add vertical axis and title.
-
-
+    }
+    // Add vertical axis and title.
     g.append('g').attr('class', 'axis vertical-axis').each(function (d, i, nodes) {
       if (yPositionScale[d].ticks) {
         // numerical axis
@@ -2958,7 +2681,8 @@ var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
         // categorical axis and truncated long labels
         d3_selection_1.select(nodes[i]).call(d3_axis_1.axisLeft(yPositionScale[d]).tickFormat(function (p) {
           return truncate(p, maxStrLength);
-        })) // add title to show full value upon hover
+        }))
+        // add title to show full value upon hover
         .selectAll('text').append('title').text(function (datum) {
           return datum && datum.toString();
         });
@@ -2966,42 +2690,37 @@ var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
     }).selectAll('text').attr('fill', axisLabelColor).clone(true).lower().attr('fill', 'none').attr('stroke-width', 2).attr('stroke-linejoin', 'round').attr('stroke', "rgba(".concat(rgb_hex_converter_1.convertHexToRgb(updatedTextShadowColor)[0], ",").concat(rgb_hex_converter_1.convertHexToRgb(updatedTextShadowColor)[1], ",").concat(rgb_hex_converter_1.convertHexToRgb(updatedTextShadowColor)[2], ", ", 0.8, ")"));
     g.append('text').attr('class', 'axisTitle').attr('fill', axisTitleColor).attr('font-size', '12px').attr('text-anchor', 'middle').attr('y', -9).text(function (d) {
       return d;
-    }); // drawing the null axis
-
+    });
+    // drawing the null axis
     if (showNullAxis) {
-      var nullAxisOffsetHeight = yPositionScale[currentDimensions[0]].range()[0] + nullOffsetHeight; // append null axis and title
-
+      var nullAxisOffsetHeight = yPositionScale[currentDimensions[0]].range()[0] + nullOffsetHeight;
+      // append null axis and title
       svg.append('g').attr('class', 'axis null-axis').attr('transform', "translate(".concat(xPositionScale.step() * axisPadding, ", ").concat(nullAxisOffsetHeight, ")")).attr('fill', 'none').call(d3_axis_1.axisTop(nullAxisScale).tickFormat(function () {
         return '';
       }));
       svg.append('text').attr('text-anchor', 'end').attr('font-size', '11px').attr('x', axisPadding * xPositionScale.step() - 9).attr('y', height + nullOffsetHeight).text('null').attr('fill', axisLabelColor);
-    } // customize axis line and ticks based on themes
-
-
+    }
+    // customize axis line and ticks based on themes
     d3_selection_1.selectAll('.axis .domain').style('stroke', axisLineColor);
-    d3_selection_1.selectAll('.axis line').style('stroke', axisLineColor); // added dragging event functions to each dimension
-
-    svg.selectAll('.dimension').call(d3_drag_1.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended)); // brushing event handling
-
+    d3_selection_1.selectAll('.axis line').style('stroke', axisLineColor);
+    // added dragging event functions to each dimension
+    svg.selectAll('.dimension').call(d3_drag_1.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended));
+    // brushing event handling
     var brushStart = function brushStart(event) {
       // prevent brushing event trigger clicking event
       if (event.sourceEvent) {
         event.sourceEvent.stopPropagation();
       }
-
       setFilterPromptState(true);
-      setFilterButtonColor(filterButtonActiveColor); // style filter selection box rect
-
+      setFilterButtonColor(filterButtonActiveColor);
+      // style filter selection box rect
       d3_selection_1.selectAll('rect.selection').attr('fill', filterSelectionColor).attr('fill-opacity', '0.3').attr('stroke', 'none').attr('rx', '4px');
-    }; // updated selectedData after brushing
-
-
+    };
+    // updated selectedData after brushing
     var brushed = function brushed(_ref, key) {
       var selection = _ref.selection;
-
       if (selection === null) {
         selections.delete(key);
-
         if (selections.size === 0) {
           setFilterButtonColor(filterButtonDisabledColor);
           setFilterPromptState(false);
@@ -3016,31 +2735,27 @@ var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
         // categorical scale (aka scalePoint)
         selections.set(key, [selection[1], selection[0]]);
       }
-
       var selected = [];
       data.forEach(function (d) {
         // Categorical Axis: convert ordinal dimension's values to pixels
         // Numerical Axis: compare numerical values with dataSources
         var active = Array.from(selections).every(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
-              activeKey = _ref3[0],
-              _ref3$ = _slicedToArray(_ref3[1], 2),
-              max = _ref3$[0],
-              min = _ref3$[1];
-
+            activeKey = _ref3[0],
+            _ref3$ = _slicedToArray(_ref3[1], 2),
+            max = _ref3$[0],
+            min = _ref3$[1];
           var newP = yPositionScale[activeKey].ticks ? d[activeKey] : yPositionScale[activeKey](d[activeKey]);
           return newP >= min && newP <= max;
         });
-
         if (active) {
           selected.push(d);
         }
       });
       setSelectedData(selected);
     };
-
-    brush.on('start', brushStart).on('brush end', brushed); // add and store a brush for each axis.
-
+    brush.on('start', brushStart).on('brush end', brushed);
+    // add and store a brush for each axis.
     g.append('g').attr('class', 'brush').each(function (_d, i, nodes) {
       d3_selection_1.select(nodes[i]).call(brush);
     });
@@ -3099,7 +2814,6 @@ var ParallelCoordinatesChart = function ParallelCoordinatesChart(_a) {
     "data-testid": "truncated-data-warning"
   }, "Note: Your data is currently truncated due to a high amount of categorical values"))));
 };
-
 exports.default = ParallelCoordinatesChart;
 
 /***/ }),
@@ -3154,53 +2868,45 @@ module.exports = require("d3-drag");
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var rgb_hex_converter_1 = __webpack_require__(159);
-
 var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
   var props = __rest(_a, []);
-
   var width = props.width,
-      height = props.height,
-      margin = props.margin,
-      data = props.data,
-      selectedData = props.selectedData,
-      currentDimensions = props.currentDimensions,
-      xPositionScale = props.xPositionScale,
-      yPositionScale = props.yPositionScale,
-      dragStatus = props.dragStatus,
-      showNullAxis = props.showNullAxis,
-      nullOffsetHeight = props.nullOffsetHeight,
-      lineColor = props.lineColor,
-      lineOpacity = props.lineOpacity,
-      backgroundColor = props.backgroundColor;
+    height = props.height,
+    margin = props.margin,
+    data = props.data,
+    selectedData = props.selectedData,
+    currentDimensions = props.currentDimensions,
+    xPositionScale = props.xPositionScale,
+    yPositionScale = props.yPositionScale,
+    dragStatus = props.dragStatus,
+    showNullAxis = props.showNullAxis,
+    nullOffsetHeight = props.nullOffsetHeight,
+    lineColor = props.lineColor,
+    lineOpacity = props.lineOpacity,
+    backgroundColor = props.backgroundColor;
   var foregroundRef = React.useRef(null);
-  var backgroundRef = React.useRef(null); // Get the device pixel ratio, falling back to 1.
-
-  var dpr = window.devicePixelRatio || 1; // draw path on two layers of canvas
-
+  var backgroundRef = React.useRef(null);
+  // Get the device pixel ratio, falling back to 1.
+  var dpr = window.devicePixelRatio || 1;
+  // draw path on two layers of canvas
   var path = function path(d, ctx, dimensions) {
     if (showNullAxis) {
       ctx.beginPath();
       dimensions.forEach(function (p, i) {
         var updatedYPosition;
-
         if (d[p] == null) {
           // add nullOffsetHeight to the bottom position of each axes and make it as the new yPosition of the null data
           updatedYPosition = yPositionScale[p].range()[0] + nullOffsetHeight;
@@ -3208,7 +2914,6 @@ var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
           // otherwise, yPosition stays at the same scale
           updatedYPosition = yPositionScale[p](d[p]);
         }
-
         if (i === 0) {
           ctx.moveTo(xPositionScale(p), updatedYPosition);
         } else {
@@ -3226,7 +2931,6 @@ var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
           ctx.lineTo(xPositionScale(p), yPositionScale[p](d[p]));
           ctx.stroke();
         }
-
         if (d[p] !== null) {
           prev = p;
         } else {
@@ -3234,25 +2938,23 @@ var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
         }
       });
     }
-  }; // draw all the lines on background canvas
-
-
+  };
+  // draw all the lines on background canvas
   React.useEffect(function () {
     var backgroundCanvas = backgroundRef.current;
     var background = backgroundCanvas.getContext('2d');
     backgroundCanvas.width = (width + margin.left + margin.right) * dpr;
-    backgroundCanvas.height = (height + margin.top + margin.bottom) * dpr; // ensure all drawing operations are scaled
-
+    backgroundCanvas.height = (height + margin.top + margin.bottom) * dpr;
+    // ensure all drawing operations are scaled
     background.scale(dpr, dpr);
     background.clearRect(0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom);
     background.translate(margin.left, margin.top);
-
     if (backgroundColor !== 'transparent') {
       background.strokeStyle = "rgba(".concat(rgb_hex_converter_1.convertHexToRgb(lineColor)[0], ", ").concat(rgb_hex_converter_1.convertHexToRgb(lineColor)[1], ", ").concat(rgb_hex_converter_1.convertHexToRgb(lineColor)[2], ", ").concat(lineOpacity, ")");
       data.forEach(function (d) {
         return path(d, background, currentDimensions);
-      }); // backgroundColor-ed or default page color mask btw background and foreground lines
-
+      });
+      // backgroundColor-ed or default page color mask btw background and foreground lines
       background.globalAlpha = 0.7;
       background.fillStyle = backgroundColor;
       background.fillRect(-10, -10, width + margin.right, height + margin.bottom);
@@ -3263,15 +2965,15 @@ var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
         return path(d, background, currentDimensions);
       });
     }
-  }, [data, height, margin, width, currentDimensions, showNullAxis, nullOffsetHeight, lineColor, lineOpacity, backgroundColor, dpr]); // draw lines on the foreground canvas
+  }, [data, height, margin, width, currentDimensions, showNullAxis, nullOffsetHeight, lineColor, lineOpacity, backgroundColor, dpr]);
+  // draw lines on the foreground canvas
   // when selectedData is updated via brushing, re-draw the foreground canvas
-
   React.useEffect(function () {
     var foregroundCanvas = foregroundRef.current;
     var foreground = foregroundCanvas.getContext('2d');
     foregroundCanvas.width = (width + margin.left + margin.right) * dpr;
-    foregroundCanvas.height = (height + margin.top + margin.bottom) * dpr; // ensure all drawing operations are scaled
-
+    foregroundCanvas.height = (height + margin.top + margin.bottom) * dpr;
+    // ensure all drawing operations are scaled
     foreground.scale(dpr, dpr);
     foreground.clearRect(0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom);
     foreground.translate(margin.left, margin.top);
@@ -3302,7 +3004,6 @@ var ParallelCoordinatesCanvas = function ParallelCoordinatesCanvas(_a) {
     }
   }));
 };
-
 exports.default = ParallelCoordinatesCanvas;
 
 /***/ }),
@@ -3316,29 +3017,17 @@ exports.default = ParallelCoordinatesCanvas;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var i18n_1 = __webpack_require__(2);
-
 var schemaUtils_1 = __webpack_require__(16);
-
 var pick_1 = __webpack_require__(23);
-
 var variables_1 = __webpack_require__(10);
-
 var visualization_color_palettes_1 = __webpack_require__(50);
-
 var visualization_icons_1 = __webpack_require__(51);
-
 var placeholders_1 = __webpack_require__(48);
-
 var VizBehavior_1 = __webpack_require__(6);
-
 var configUtils_1 = __webpack_require__(19);
-
 var VizCategory_1 = __webpack_require__(35);
-
 var BackgroundColor_1 = __webpack_require__(53);
-
 var dataContract = {
   requiredDataSources: [{
     name: 'primary',
@@ -3510,20 +3199,17 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
-
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.parallelcoordinates',
-
   /**
    * viz name
    */
   name: 'Parallel Coordinates',
   category: VizCategory_1.VizCategory.COMPARISONS,
   status: 'preview',
-
   /**
    * viz icon
    */
@@ -3552,9 +3238,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
-
 var react_1 = __webpack_require__(0);
-
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -3569,21 +3253,16 @@ var lodash_1 = __webpack_require__(3);
  * @param fn the function to be executed and
  * @param dependencies an array of dependencies
  */
-
-
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
   var ref = react_1.useRef();
-
   if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
-
   return ref.current.value;
 };
-
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
@@ -3598,27 +3277,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
-
 var React = __webpack_require__(0);
-
 var T = __webpack_require__(1);
-
 var i18n_1 = __webpack_require__(2);
-
 var Message_1 = __webpack_require__(9);
-
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
  * @returns {boolean} true if the input value === null or undefined
  */
-
-
 var isMissing = function isMissing(v) {
   return v === null || v === undefined;
 };
-
 exports.isMissing = isMissing;
 /**
  * @method misskingKeys
@@ -3626,13 +3297,11 @@ exports.isMissing = isMissing;
  * @param {object} target
  * @returns {string[]} the keys of missing required props
  */
-
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
     return exports.isMissing(target[k]);
   });
 };
-
 exports.missingKeys = missingKeys;
 var propTypes = {
   width: T.oneOfType([T.string, T.number]),
@@ -3646,11 +3315,10 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
-
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
+    height = props.height,
+    missingProps = props.missingProps;
   return React.createElement(Message_1.default, {
     "data-test": "message",
     width: width,
@@ -3658,7 +3326,6 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
   });
 };
-
 exports.MissingPropsMessage = MissingPropsMessage;
 exports.MissingPropsMessage.propTypes = propTypes;
 exports.MissingPropsMessage.defaultProps = {
@@ -3678,19 +3345,15 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var styled_components_1 = __webpack_require__(4);
-
 var hocUtils_1 = __webpack_require__(15);
-
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.7.1 - 6a77c5530"
+  'data-splunk-visualization-version': "25.8.0 - 65f56b99e"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3701,7 +3364,6 @@ var Blocker = styled_components_1.default.div.attrs({
  * @param {ExtendedDashViz} Visualization
  * @returns {ExtendedDashViz} Wrapper
  */
-
 var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
   var Wrapper = function Wrapper(props) {
     var mode = props.mode;
@@ -3710,14 +3372,12 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
-
   hocUtils_1.extendStaticWrapperProps({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
-
 exports.default = withEditModeCover;
 
 /***/ }),
@@ -3731,37 +3391,27 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var React = __webpack_require__(0);
-
 var colorUtils_1 = __webpack_require__(12);
-
 var variables_1 = __webpack_require__(10);
-
 var IconPlaceholder_1 = __webpack_require__(31);
-
 var VizBehavior_1 = __webpack_require__(6);
-
 var hocUtils_1 = __webpack_require__(15);
-
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
   var config = Visualization.config;
   var themes = config.themes;
-
   var Wrapper = function Wrapper(props) {
     var _a, _b;
-
     var dataSources = props.dataSources,
-        loading = props.loading,
-        options = props.options,
-        height = props.height,
-        width = props.width;
+      loading = props.loading,
+      options = props.options,
+      height = props.height,
+      width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
     var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
-
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
@@ -3772,17 +3422,14 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
-
     return React.createElement(Visualization, Object.assign({}, props));
   };
-
   hocUtils_1.extendStaticWrapperProps({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
-
 exports.default = withPlaceholder;
 
 /***/ }),
@@ -3824,13 +3471,11 @@ module.exports = require("@splunk/visualization-icons");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var i18n_1 = __webpack_require__(2);
-
 var background = function background(_ref) {
   var label = _ref.label,
-      themes = _ref.themes,
-      labelPosition = _ref.labelPosition;
+    themes = _ref.themes,
+    labelPosition = _ref.labelPosition;
   return [{
     label: i18n_1._(label || 'Background'),
     option: 'backgroundColor',
@@ -3841,7 +3486,6 @@ var background = function background(_ref) {
     }
   }];
 };
-
 exports.default = background;
 
 /***/ }),
@@ -3864,7 +3508,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
-
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -3884,7 +3527,6 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
-
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";