@splunk/visualizations 26.4.1 → 27.1.0

package/common/utils/singleValueUtils.js

@@ -1,1080 +1,592 @@
-/*!
- * Copyright © 2024 Splunk Inc.
- * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
- * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 54);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/numberUtils");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 5:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/domUtils");
-
-/***/ }),
-
-/***/ 54:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT", function() { return DEFAULT_FONT; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_FONT_FAMILY", function() { return DEFAULT_FONT_FAMILY; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SVR_PADDING", function() { return SVR_PADDING; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAligment", function() { return getAligment; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "shouldShowTrend", function() { return shouldShowTrend; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingOrNoColumns", function() { return isLoadingOrNoColumns; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFormattedColor", function() { return getFormattedColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasBackground", function() { return hasBackground; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isIdenticalColor", function() { return isIdenticalColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDefaultColorWithBg", function() { return getDefaultColorWithBg; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorColor", function() { return getMajorColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendColor", function() { return getTrendColor; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeColors", function() { return computeColors; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeText", function() { return computeText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorText", function() { return getMajorText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendText", function() { return getTrendText; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeFontSize", function() { return computeFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorFontSize", function() { return getMajorFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTrendFontSize", function() { return getTrendFontSize; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabelHeight", function() { return getUnderLabelHeight; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getUnderLabel", function() { return getUnderLabel; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getMajorAndTrend", function() { return getMajorAndTrend; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateVizInSmallSpace", function() { return updateVizInSmallSpace; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueContent", function() { return computeSingleValueContent; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minimallyTruncateStringToWidth", function() { return minimallyTruncateStringToWidth; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "computeSingleValueRadialContent", function() { return computeSingleValueRadialContent; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getGraphColors", function() { return getGraphColors; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "adjustRGB", function() { return adjustRGB; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return lighten; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return darken; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "handleValueClickCallback", function() { return handleValueClickCallback; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
-/* harmony import */ var _splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
-/* harmony import */ var _splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_domUtils__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
-/* harmony import */ var _splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_propUtils__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _splunk_visualizations_shared_colorConstants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9);
-/* 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) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    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));
-      });
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-
-  return target;
-}
-
-
-
-
-
-
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/common/utils/singleValueUtils.js
+var singleValueUtils_exports = {};
+__export(singleValueUtils_exports, {
+  DEFAULT_FONT: () => DEFAULT_FONT,
+  DEFAULT_FONT_FAMILY: () => DEFAULT_FONT_FAMILY,
+  SVR_PADDING: () => SVR_PADDING,
+  adjustRGB: () => adjustRGB,
+  computeColors: () => computeColors,
+  computeFontSize: () => computeFontSize,
+  computeSingleValueContent: () => computeSingleValueContent,
+  computeSingleValueRadialContent: () => computeSingleValueRadialContent,
+  computeText: () => computeText,
+  darken: () => darken,
+  getAligment: () => getAligment,
+  getDefaultColorWithBg: () => getDefaultColorWithBg,
+  getFormattedColor: () => getFormattedColor,
+  getGraphColors: () => getGraphColors,
+  getMajorAndTrend: () => getMajorAndTrend,
+  getMajorColor: () => getMajorColor,
+  getMajorFontSize: () => getMajorFontSize,
+  getMajorText: () => getMajorText,
+  getTrendColor: () => getTrendColor,
+  getTrendColorWithPercent: () => getTrendColorWithPercent,
+  getTrendFontSize: () => getTrendFontSize,
+  getTrendText: () => getTrendText,
+  getUnderLabel: () => getUnderLabel,
+  getUnderLabelHeight: () => getUnderLabelHeight,
+  handleValueClickCallback: () => handleValueClickCallback,
+  hasBackground: () => hasBackground,
+  isIdenticalColor: () => isIdenticalColor,
+  isLoadingOrNoColumns: () => isLoadingOrNoColumns,
+  lighten: () => lighten,
+  minimallyTruncateStringToWidth: () => minimallyTruncateStringToWidth,
+  shouldShowTrend: () => shouldShowTrend,
+  updateVizInSmallSpace: () => updateVizInSmallSpace
+});
+module.exports = __toCommonJS(singleValueUtils_exports);
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/visualizations-shared/numberUtils
+var numberUtils_exports = {};
+__export(numberUtils_exports, {
+  default: () => numberUtils_default
+});
+var defaultImport2 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
+var numberUtils_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/visualizations-shared/domUtils
+var domUtils_exports = {};
+__export(domUtils_exports, {
+  default: () => domUtils_default
+});
+var defaultImport3 = __toESM(require("@splunk/visualizations-shared/domUtils"));
+__reExport(domUtils_exports, require("@splunk/visualizations-shared/domUtils"));
+var domUtils_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport4 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/visualizations-shared/colorConstants
+var colorConstants_exports = {};
+__export(colorConstants_exports, {
+  default: () => colorConstants_default
+});
+var defaultImport5 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+__reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
+var colorConstants_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// src/common/utils/singleValueUtils.js
 var DEFAULT_FONT = 12;
 var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
-var SVR_PADDING = {
-  top: 12,
-  bottom: 12,
-  left: 16,
-  right: 16
-};
-var getAligment = function getAligment(align) {
-  var alignMap = {
-    left: 'start',
-    center: 'center',
-    right: 'end'
+var SVR_PADDING = { top: 12, bottom: 12, left: 16, right: 16 };
+var getAligment = (align) => {
+  const alignMap = {
+    left: "start",
+    center: "center",
+    right: "end"
   };
-  return alignMap[align] || 'center';
-};
-/**
- * @method shouldShowTrend
- * @param {String} trendDisplay
- * @returns {Bool}
- */
-
-var shouldShowTrend = function shouldShowTrend(trendDisplay) {
-  return trendDisplay === 'absolute' || trendDisplay === 'percent';
+  return alignMap[align] || "center";
 };
-/**
- * @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;
+var shouldShowTrend = (trendDisplay) => trendDisplay === "absolute" || trendDisplay === "percent";
+var isLoadingOrNoColumns = (dataSources, loading) => {
+  const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
+  const noColumns = data === void 0;
   return loading || noColumns;
 };
-/**
- * Retrieve the valid formatted color
- * @method getFormattedColor
- * @param {String} color
- * @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
- * @param {String} props.backgroundColor
- * @param {String} props.defaultFontColor
- * @param {String} props.defaultBlockFontColor
- * @returns {String} defaultColor
- */
-
-var getDefaultColorWithBg = function getDefaultColorWithBg(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-      defaultFontColor = _ref.defaultFontColor,
-      defaultBlockFontColor = _ref.defaultBlockFontColor;
-  return isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
-};
-/*
- * @method getMajorColor
- * return formatted majorColor.
- * @param {Object} props
- * @param {String} props.majorColor
- * @param {String} props.backgroundColor
- * @param {String} props.defaultFontColor
- * @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,
-  // 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.
-
+var getFormattedColor = (color, defaultColor) => (0, propUtils_exports.formatColor)(color) || (0, propUtils_exports.formatColor)(defaultColor);
+var hasBackground = (backgroundColor) => !!backgroundColor && backgroundColor !== "transparent";
+var isIdenticalColor = (colorA, colorB) => !!colorA && !!colorB && (0, propUtils_exports.formatColor)(colorA.toLowerCase()) === (0, propUtils_exports.formatColor)(colorB.toLowerCase());
+var getDefaultColorWithBg = ({ backgroundColor, defaultFontColor, defaultBlockFontColor }) => isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;
+var getMajorColor = ({ majorColor, backgroundColor, defaultFontColor, defaultBlockFontColor }) => {
   if (hasBackground(backgroundColor) && !majorColor) {
     return getDefaultColorWithBg({
-      backgroundColor: backgroundColor,
-      defaultFontColor: defaultFontColor,
-      defaultBlockFontColor: defaultBlockFontColor
+      backgroundColor,
+      defaultFontColor,
+      defaultBlockFontColor
     });
   }
-
   return getFormattedColor(majorColor, defaultFontColor);
 };
-/**
- * Get the color for the trend components
- * @method getTrendColor
- * @param {Object} props
- * @param {String} props.trendColor                   The trendColor value determined from encoding
- * @param {Number} props.trendValue
- * @param {Number} props.majorValue
- * @param {String} props.customizedBgColor
- * @param {String} props.trendDisplay  absolute || percent || off
- * @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;
-
+var getTrendColor = ({
+  trendColor,
+  trendValue,
+  majorValue,
+  customizedBgColor,
+  trendDisplay,
+  defaultColors
+}) => {
   if (trendColor) {
     return trendColor;
   }
-
   if (Number.isNaN(Number(trendValue))) {
-    return undefined;
+    return void 0;
   }
-
-  var defaultFontColor = defaultColors.defaultFontColor,
-      defaultBlockFontColor = defaultColors.defaultBlockFontColor,
-      defaultBackgroundColor = defaultColors.defaultBackgroundColor; // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor
-
+  const { defaultFontColor, defaultBlockFontColor, defaultBackgroundColor } = defaultColors;
   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
-
-
-  var isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);
-
+  }
+  const 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"];
+  return trendValue > 0 ? colorConstants_exports.DELTA_GREEN : colorConstants_exports.DELTA_RED;
 };
-/**
- * Computes visualization properties for display component
- * @method computeColors
- * @param {Object} props    all viz props
- * @param {Object} defaultColors    defaultColors from theme
- * @returns {Object} result
- * @returns {Boolean} backgroundEnabled
- * @returns {String} backgroundColor
- * @returns {String} majorColor
- * @returns {String} trendColor
- * @returns {String} underLabelColor
- */
-
-var computeColors = function computeColors(props, defaultColors) {
-  var backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
-  var backgroundEnabled = hasBackground(backgroundColor);
-  var majorColor = getMajorColor({
+var computeColors = (props, defaultColors) => {
+  const backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);
+  const backgroundEnabled = hasBackground(backgroundColor);
+  const majorColor = getMajorColor({
     majorColor: props.majorColor,
-    backgroundColor: backgroundColor,
+    backgroundColor,
     defaultFontColor: defaultColors.defaultFontColor,
     defaultBlockFontColor: defaultColors.defaultBlockFontColor
   });
-  var trendColor = getTrendColor({
+  const trendColor = getTrendColor({
     trendColor: props.trendColor,
     trendValue: props.trendValue,
     majorValue: props.majorValue,
     customizedBgColor: props.backgroundColor,
     trendDisplay: props.trendDisplay,
-    defaultColors: defaultColors
-  }); // todo: need change it to not depend on majorColor
-
-  var underLabelColor = majorColor;
+    defaultColors
+  });
+  const underLabelColor = majorColor;
   return {
-    backgroundColor: backgroundColor,
-    backgroundEnabled: backgroundEnabled,
-    majorColor: majorColor,
-    trendColor: trendColor,
-    underLabelColor: underLabelColor
+    backgroundColor,
+    backgroundEnabled,
+    majorColor,
+    trendColor,
+    underLabelColor
   };
 };
-/**
- * Format and return the value (major/trend)
- * @method computeText
- * @param {Object} props
- * @param {Number} props.value                    // The major/trend value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateValue
- * @returns {Number} major or trend text
- */
-
-var computeText = function computeText(_ref4) {
-  var value = _ref4.value,
-      numberPrecision = _ref4.numberPrecision,
-      shouldUseThousandSeparators = _ref4.shouldUseThousandSeparators,
-      shouldAbbreviateValue = _ref4.shouldAbbreviateValue;
-  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, {
+var computeText = ({
+  value,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateValue
+}) => {
+  let text = (0, numberUtils_exports.isNumerial)(value) ? (0, numberUtils_exports.formatNumber)(value, numberPrecision, {
     useThousandSeparators: shouldUseThousandSeparators,
     // todo: need update formatNumber
     useTrendUnits: shouldAbbreviateValue
-  }) : value; // When text is undefined, return empty string
-
-  text = text || '';
+  }) : value;
+  text = text || "";
   return text;
 };
-/*
- * @method getMajorText
- * @param {Object} props
- * @param {Number} props.majorValue
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateMajorValue
- * @returns {String} majorText
- */
-
-var getMajorText = function getMajorText(_ref5) {
-  var majorValue = _ref5.majorValue,
-      numberPrecision = _ref5.numberPrecision,
-      shouldUseThousandSeparators = _ref5.shouldUseThousandSeparators,
-      shouldAbbreviateMajorValue = _ref5.shouldAbbreviateMajorValue;
-  return computeText({
-    value: majorValue === null ? 'N/A' : majorValue,
-    // if majorValue is null, use `N/A`.
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateValue: shouldAbbreviateMajorValue
+var getMajorText = ({
+  majorValue,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateMajorValue
+}) => computeText({
+  value: majorValue === null ? "N/A" : majorValue,
+  // if majorValue is null, use `N/A`.
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateValue: shouldAbbreviateMajorValue
+});
+var getTrendText = ({
+  majorValue,
+  trendValue,
+  trendDisplay,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateTrendValue
+}) => {
+  const compute = (value) => computeText({
+    value,
+    numberPrecision,
+    shouldUseThousandSeparators,
+    shouldAbbreviateValue: shouldAbbreviateTrendValue
   });
-};
-/*
- * @method getTrendText
- * @param {Object} props
- * @param {Number} props.majorValue
- * @param {Number} props.trendValue
- * @param {String} props.trendDisplay
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @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;
-
-  var compute = function compute(value) {
-    return computeText({
-      value: value,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateValue: shouldAbbreviateTrendValue
-    });
-  };
-
-  if (trendValue === '' || !Object(_splunk_visualizations_shared_numberUtils__WEBPACK_IMPORTED_MODULE_2__["isNumerial"])(trendValue)) {
-    return '';
+  if (trendValue === "" || !(0, numberUtils_exports.isNumerial)(trendValue)) {
+    return "";
   }
-
-  var showPercent = trendDisplay === 'percent';
-
+  const showPercent = trendDisplay === "percent";
   if (!showPercent) {
     return compute(trendValue);
   }
-
-  var diff = Math.abs(trendValue - majorValue);
-  var val = Math.round(trendValue / diff * 100);
-
+  const diff = Math.abs(trendValue - majorValue);
+  let val = Math.round(trendValue / diff * 100);
   if (trendValue === 0 && diff === 0) {
     val = 0;
   }
-
   if (!Number.isFinite(val)) {
-    return 'N/A';
+    return "N/A";
   }
-
-  var text = compute(val);
-  return "".concat(text, "%");
+  const text = compute(val);
+  return `${text}%`;
 };
-/**
- * Helper to determine the font size for an element
- * @method computeFontSize
- * @param {String} text                     The string to find a size for
- * @param {Object} dimensions
- * @param {Number} dimensions.width         The width of the container
- * @param {Number} dimensions.height        The height of the container
- * @param {String} [fontFamily='"Splunk Platform Sans" ...'] The font being used
- * @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;
-  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);
+var computeFontSize = (text, { width, height }, fontFamily = DEFAULT_FONT_FAMILY, fontWeight = "normal") => {
+  const widthInDefaultFont = (0, domUtils_exports.computeTextSize)(text, `${fontWeight} ${DEFAULT_FONT}px ${fontFamily}`);
+  const fontSize = Math.min(
+    width / widthInDefaultFont * DEFAULT_FONT,
+    height / DEFAULT_FONT * DEFAULT_FONT
+  );
   return parseInt(fontSize, 10);
 };
-/*
- * @method getMajorFontSize
- * @param {Object} props
- * @param {Number} props.width
- * @param {Number} props.height
- * @param {String} props.unit
- * @param {String} props.majorText
- * @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;
-  var majorTextCalc = unit ? "".concat(unit).concat(majorText) : majorText;
+var getMajorFontSize = ({ width, height, unit, majorText, spaceRatio = 1 }) => {
+  const majorTextCalc = unit ? `${unit}${majorText}` : majorText;
   return computeFontSize(majorTextCalc, {
     width: width * spaceRatio,
-    height: height
+    height
   });
 };
-/*
- * @method getTrendFontSize
- * @param {Object} props
- * @param {Number} props.width
- * @param {Number} props.height
- * @param {String} props.trendText
- * @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;
-  var trendFontSize = 12;
-
+var getTrendFontSize = ({ width, height, trendText, spaceRatio = 1 }) => {
+  let trendFontSize = 12;
   if (spaceRatio > 0) {
     trendFontSize = computeFontSize(trendText, {
       width: width * spaceRatio,
-      height: height
+      height
     });
     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
- * @param {Number} width     width of underLabel
- * @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
-    computeFontSize(underLabel, {
-      width: width,
-      height: height
-    })
-  );
-};
-/**
- * Compute value and font size for major and trend
- * @method getMajorAndTrend
- * @param {Object} props
- * @param {Number} props.width                    // Width of the text container
- * @param {Number} props.height                   // Height of the text container
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @param {Bool} props.shouldAbbreviateMajorValue
- * @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,
-      shouldAbbreviateMajorValue = _ref11.shouldAbbreviateMajorValue;
-  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;
-  var majorText = getMajorText({
-    majorValue: majorValue,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
+var getUnderLabelHeight = (height) => height > DEFAULT_FONT ? DEFAULT_FONT : height;
+var getUnderLabel = ({ underLabel, width, height }) => (
+  // todo: may need truncate underLabel later
+  computeFontSize(underLabel, {
+    width,
+    height
+  })
+);
+var getMajorAndTrend = ({
+  width,
+  height,
+  majorValue,
+  trendValue,
+  majorFontSize,
+  trendFontSize,
+  trendDisplay,
+  unit,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateTrendValue,
+  shouldAbbreviateMajorValue
+}) => {
+  const majorTextSpaceRatio = (0, numberUtils_exports.isNumerial)(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;
+  const textContentWidth = width * 0.9;
+  const textContentHeight = height * 0.9;
+  const majorText = getMajorText({
+    majorValue,
+    numberPrecision,
+    shouldUseThousandSeparators,
+    shouldAbbreviateMajorValue
   });
-  var majorTextFontSize = majorFontSize || getMajorFontSize({
+  const majorTextFontSize = majorFontSize || getMajorFontSize({
     width: textContentWidth,
     height: textContentHeight,
-    unit: unit,
-    majorText: majorText,
+    unit,
+    majorText,
     spaceRatio: majorTextSpaceRatio
   });
-  var trendText = getTrendText({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    trendDisplay: trendDisplay,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+  const trendText = getTrendText({
+    majorValue,
+    trendValue,
+    trendDisplay,
+    numberPrecision,
+    shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue
   });
-  var trendTextFontSize = trendFontSize || getTrendFontSize({
+  const trendTextFontSize = trendFontSize || getTrendFontSize({
     width: textContentWidth,
     height: textContentHeight,
-    trendText: trendText,
+    trendText,
     spaceRatio: 1 - majorTextSpaceRatio
   });
   return {
-    majorText: majorText,
-    majorTextFontSize: majorTextFontSize,
-    trendText: trendText,
-    trendTextFontSize: trendTextFontSize
+    majorText,
+    majorTextFontSize,
+    trendText,
+    trendTextFontSize
   };
 };
-/*
- * @method updateVizInSmallSpace
- * @param {Object} props
- * @param {Number} props.width                    // Width of the text container
- * @param {Number} props.height                   // Height of the text container
- * @param {Object} props.toRemoveList
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {Number} props.majorTextFontSize
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @returns {Object} results
- * @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;
-  var removeIndex = 0;
-  var newProps = {}; // options need to be updated
-
-  var newMajorAndTrend = {};
-  var newTextSize = majorTextFontSize; // remove info on viz to make textFontSize >= 12px;
-
+var updateVizInSmallSpace = ({
+  width,
+  height,
+  toRemoveList,
+  majorValue,
+  trendValue,
+  majorFontSize,
+  trendFontSize,
+  majorTextFontSize,
+  unit,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateTrendValue
+}) => {
+  let removeIndex = 0;
+  let newProps = {};
+  let newMajorAndTrend = {};
+  let newTextSize = majorTextFontSize;
   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));
-    newMajorAndTrend = getMajorAndTrend(_objectSpread({
-      majorValue: majorValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: width,
-      height: height,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+    const toRemove = toRemoveList[removeIndex];
+    newProps = __spreadValues(__spreadValues({}, newProps), {
+      [toRemove.key]: toRemove.value
+    });
+    newMajorAndTrend = getMajorAndTrend(__spreadValues({
+      majorValue,
+      trendValue,
+      majorFontSize,
+      trendFontSize,
+      width,
+      height,
+      unit,
+      numberPrecision,
+      shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue
     }, newProps));
     newTextSize = newMajorAndTrend.majorTextFontSize;
     removeIndex += 1;
-  } // truncate text if textFontSize is still less than 12
-
-
+  }
   if (newTextSize < 12) {
-    var truncateValue = "".concat(majorValue.toString().slice(0, 3), "...");
-    newMajorAndTrend = getMajorAndTrend(_objectSpread({
+    const truncateValue = `${majorValue.toString().slice(0, 3)}...`;
+    newMajorAndTrend = getMajorAndTrend(__spreadValues({
       majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: width,
-      height: height,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
+      trendValue,
+      majorFontSize,
+      trendFontSize,
+      width,
+      height,
+      unit,
+      numberPrecision,
+      shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue
     }, newProps));
   }
-
-  return {
-    newMajorAndTrend: newMajorAndTrend,
-    updatedProps: newProps
-  };
+  return { newMajorAndTrend, updatedProps: newProps };
 };
-/*
- * @method computeSingleValueContent
- * @param {Object} props
- * @param {Number} props.contentWidth
- * @param {Number} props.contentHeight
- * @param {Number} props.containerWidth
- * @param {Number} props.containerHeight
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @param {Bool} props.shouldAbbreviateMajorValue
- * @param {Object} props.toRemoveList
- * @returns {Object} results
- * @returns {String} results.majorText
- * @returns {String} results.trendText
- * @returns {Number} results.majorTextFontSize
- * @returns {Number} results.trendTextFontSize
- * @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,
-      shouldAbbreviateMajorValue = _ref13.shouldAbbreviateMajorValue,
-      toRemoveList = _ref13.toRemoveList;
-
-  var _getMajorAndTrend = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
+var computeSingleValueContent = ({
+  contentWidth,
+  contentHeight,
+  containerWidth,
+  containerHeight,
+  majorValue,
+  trendValue,
+  majorFontSize,
+  trendFontSize,
+  trendDisplay,
+  unit,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateTrendValue,
+  shouldAbbreviateMajorValue,
+  toRemoveList
+}) => {
+  let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({
+    majorValue,
+    trendValue,
+    majorFontSize,
+    trendFontSize,
+    trendDisplay,
     width: contentWidth,
     height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
-  }),
-      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
-
+    unit,
+    numberPrecision,
+    shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue,
+    shouldAbbreviateMajorValue
+  });
+  const majorValueTitle = majorText;
+  let smallVizProps = {};
   if (majorTextFontSize < 12) {
-    var _updateVizInSmallSpac = updateVizInSmallSpace({
+    const { newMajorAndTrend, updatedProps } = 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;
+      toRemoveList,
+      majorValue,
+      trendValue,
+      majorFontSize,
+      trendFontSize,
+      majorTextFontSize,
+      unit,
+      numberPrecision,
+      shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue
+    });
+    ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = newMajorAndTrend);
     smallVizProps = updatedProps;
   }
-
   return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
+    majorText,
+    trendText,
+    majorTextFontSize,
+    trendTextFontSize,
+    majorValueTitle,
+    smallVizProps
   };
 };
-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;
-  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 minimallyTruncateStringToWidth = ({
+  text,
+  fontSize = DEFAULT_FONT,
+  fontFamily = DEFAULT_FONT_FAMILY,
+  fontWeight = "normal",
+  containerWidth
+}) => {
+  let textWidth = (0, domUtils_exports.computeTextSize)(text, `${fontWeight} ${fontSize}px ${fontFamily}`);
+  let modifiedText = text;
+  const ellipsesLength = (0, domUtils_exports.computeTextSize)("...", `${fontWeight} ${fontSize}px ${fontFamily}`);
   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.
-    //  `text.length > 1` condition included to keep at least the first number.
     while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {
       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));
+      textWidth = (0, domUtils_exports.computeTextSize)(modifiedText, `normal ${fontSize}px ${fontFamily}`);
     }
-
-    modifiedText = "".concat(modifiedText, "...");
+    modifiedText = `${modifiedText}...`;
   }
-
   return modifiedText;
 };
-/*
- * @method computeSingleValueRadialContent
- * @param {Object} props
- * @param {Number} props.contentWidth
- * @param {Number} props.contentHeight
- * @param {Number} props.containerWidth
- * @param {Number} props.containerHeight
- * @param {Number} props.majorValue               // Major value
- * @param {Number} props.trendValue               // Trend value
- * @param {Number} props.majorFontSize
- * @param {Number} props.trendFontSize
- * @param {String} props.trendDisplay
- * @param {String} props.unit                     // Unit for the value
- * @param {Number} props.numberPrecision
- * @param {Bool} props.shouldUseThousandSeparators
- * @param {Bool} props.shouldAbbreviateTrendValue
- * @param {Bool} props.shouldAbbreviateMajorValue,
- * @param {Object} props.toRemoveList
- * @param {Bool} props.smallViz
- * @returns {Object} results
- * @returns {String} results.majorText
- * @returns {String} results.trendText
- * @returns {Number} results.majorTextFontSize
- * @returns {Number} results.trendTextFontSize
- * @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,
-      shouldAbbreviateMajorValue = _ref15.shouldAbbreviateMajorValue,
-      smallViz = _ref15.smallViz;
-
-  var _getMajorAndTrend2 = getMajorAndTrend({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    majorFontSize: majorFontSize,
-    trendFontSize: trendFontSize,
-    trendDisplay: trendDisplay,
+var computeSingleValueRadialContent = ({
+  contentWidth,
+  contentHeight,
+  containerWidth,
+  containerHeight,
+  majorValue,
+  trendValue,
+  majorFontSize,
+  trendFontSize,
+  trendDisplay,
+  unit,
+  numberPrecision,
+  shouldUseThousandSeparators,
+  shouldAbbreviateTrendValue,
+  shouldAbbreviateMajorValue,
+  smallViz
+}) => {
+  let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({
+    majorValue,
+    trendValue,
+    majorFontSize,
+    trendFontSize,
+    trendDisplay,
     width: contentWidth,
     height: contentHeight,
-    unit: unit,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-    shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
-  }),
-      majorText = _getMajorAndTrend2.majorText,
-      trendText = _getMajorAndTrend2.trendText,
-      majorTextFontSize = _getMajorAndTrend2.majorTextFontSize,
-      trendTextFontSize = _getMajorAndTrend2.trendTextFontSize;
-
-  var majorValueTitle = majorText;
-  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
-
+    unit,
+    numberPrecision,
+    shouldUseThousandSeparators,
+    shouldAbbreviateTrendValue,
+    shouldAbbreviateMajorValue
+  });
+  const majorValueTitle = majorText;
+  let smallVizProps = {};
   if (smallViz) {
-    var truncateValue = minimallyTruncateStringToWidth({
+    const truncateValue = minimallyTruncateStringToWidth({
       text: majorValue,
-      fontWeight: 'bold',
+      fontWeight: "bold",
       fontSize: 12,
-      containerWidth: containerWidth
+      containerWidth
     });
-
-    var _getMajorAndTrend3 = getMajorAndTrend({
+    ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({
       majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
+      trendValue,
+      majorFontSize,
+      trendFontSize,
       width: containerWidth,
       height: containerHeight,
-      unit: unit,
-      trendDisplay: trendDisplay,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue,
-      shouldAbbreviateMajorValue: shouldAbbreviateMajorValue
-    });
-
-    majorText = _getMajorAndTrend3.majorText;
-    trendText = _getMajorAndTrend3.trendText;
-    majorTextFontSize = _getMajorAndTrend3.majorTextFontSize;
-    trendTextFontSize = _getMajorAndTrend3.trendTextFontSize;
+      unit,
+      trendDisplay,
+      numberPrecision,
+      shouldUseThousandSeparators,
+      shouldAbbreviateTrendValue,
+      shouldAbbreviateMajorValue
+    }));
     smallVizProps = {
-      trendDisplay: trendDisplay,
-      unit: unit
+      trendDisplay,
+      unit
     };
   }
-
   return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: smallVizProps
+    majorText,
+    trendText,
+    majorTextFontSize,
+    trendTextFontSize,
+    majorValueTitle,
+    smallVizProps
   };
 };
-/**
- * Get the colors for a graph
- *
- * @method getGraphColors
- * @param {Object} options
- * @param {Bool} options.backgroundEnabled          // Flag to turn on color mode
- * @param {String} options.backgroundColor          // The current background color, overrides trend background color
- * @param {Object} options.defaultColors            // Default colors by severity
- * @param {Function} options.customColorFormatter   // must return { background, stroke } given a color
- * @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
-
+var getGraphColors = ({
+  backgroundEnabled,
+  backgroundColor,
+  defaultColors,
+  customColorFormatter
+}) => {
   if (backgroundEnabled) {
-    // Check if the user defined colors to use
-    if (backgroundColor && typeof customColorFormatter === 'function') {
+    if (backgroundColor && typeof customColorFormatter === "function") {
       return customColorFormatter(backgroundColor);
     }
   }
-
   return defaultColors.none;
 };
-/**
- * Adjust rgb value if it equals to 0 or 255
- * @method adjustRGB
- * @param {Number} rgb      [0 - 255]
- * @param {Number} delta
- * @returns {Number} adjusted rgb
- * @private
- */
-
-var adjustRGB = function adjustRGB(rgb, delta) {
+var 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
- * @param {String} color    // Color to modify
- * @param {Number} ratio    // Float to modify color
- * @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 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
-  // case 1: the color is (0, 0 0)
-  //         lighten color (80, 80, 80)
-  //         darken color (40, 40, 40)
-  // case 2: the color is (255, 255, 255)
-  //         lighten color (235, 235, 235)
-  //         darken color (175, 175, 175)
-  // case 3: the color is e.g. (0, 255, 0)
-  //         new color (20, 235, 20)
-
+var changeColor = (color, ratio) => {
+  const hex = color.replace(/(0x|#)/, "");
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+  let newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
+  let newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
+  let newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);
   if (newR === r && newG === g && newB === b) {
     if (newR === 0 && newG === 0 && newB === 0) {
       if (ratio > 1) {
@@ -1102,78 +614,19 @@ 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
- * @param {String} color
- * @returns {String}
- * @private
- */
-
-
-var lighten = function lighten(color) {
-  return changeColor(color, 1.3);
+  return `#${newR.toString(16).padStart(2, 0)}${newG.toString(16).padStart(2, 0)}${newB.toString(16).padStart(2, 0)}`;
 };
-/**
- * Darkens a given color
- * @method darken
- * @param {String} 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
- * @param {String | Number} majorValue
- * @param {String} majorValueField
- * @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] : '';
-  var trellisKey = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
-  var payload = {
-    trendValue: trendValue,
+var lighten = (color) => changeColor(color, 1.3);
+var darken = (color) => changeColor(color, 0.5);
+var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled = false, trellisSplitBy = "", trellisKey = "") => onValueClick(__spreadProps(__spreadValues({}, ev), {
+  payload: __spreadValues({
+    trendValue,
     value: majorValue,
     name: majorValueField
-  };
-
-  if (trellisEnabled) {
-    payload = _objectSpread(_objectSpread({}, payload), {}, {
-      'trellis.name': trellisSplityBy,
-      'trellis.value': trellisKey
-    });
-  }
-
-  return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
-    payload: payload
-  }));
+  }, trellisEnabled && { "trellis.name": trellisSplitBy, "trellis.value": trellisKey })
+}));
+var getTrendColorWithPercent = (options) => {
+  const shouldUsePercentTrendColor = options.trendColor === "> trendValue | rangeValue(trendColorEditorConfig)" && options.trendDisplay === "percent";
+  return shouldUsePercentTrendColor ? { trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)" } : {};
 };
-
-/***/ }),
-
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/propUtils");
-
-/***/ }),
-
-/***/ 9:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
-
-/***/ })
-
-/******/ });
-//# sourceMappingURL=singleValueUtils.js.map
+//# sourceMappingURL=singleValueUtils.js.map