@splunk/visualizations 26.4.1 → 27.1.0

package/SingleValueBasic.js

@@ -1,1554 +1,409 @@
-/*!
- * 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 = 101);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/numberUtils");
-
-/***/ }),
-
-/***/ 101:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "SingleValueTrendValue", function() { return /* binding */ SingleValueTrendValue; });
-
-// EXTERNAL MODULE: external "@babel/runtime/helpers/extends"
-var extends_ = __webpack_require__(68);
-var extends_default = /*#__PURE__*/__webpack_require__.n(extends_);
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(0);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(4);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-
-// EXTERNAL MODULE: ./src/common/utils/singleValueUtils.js
-var singleValueUtils = __webpack_require__(19);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowUp"
-var ArrowUp_ = __webpack_require__(105);
-var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
-
-// EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ArrowDown"
-var ArrowDown_ = __webpack_require__(106);
-var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(3);
-
-// CONCATENATED MODULE: ./src/SingleValueBasic/TrendValue.jsx
-
-
-
-
-
-
+/* 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 __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 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/SingleValueBasic/SingleValueBasic.jsx
+var SingleValueBasic_exports = {};
+__export(SingleValueBasic_exports, {
+  SingleValueTrendValue: () => SingleValueTrendValue,
+  default: () => SingleValueBasic_default
+});
+module.exports = __toCommonJS(SingleValueBasic_exports);
 
-var Column = external_styled_components_default.a.div.withConfig({
-  displayName: "TrendValue__Column",
-  componentId: "sc-yd2lvy-0"
-})(["display:flex;flex-direction:row;justify-content:", ";height:", "px;", ";"], function (props) {
-  return props.justify || 'flex-end';
-}, function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size ? "margin: 0 ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:prop-types
+var prop_types_exports = {};
+__export(prop_types_exports, {
+  default: () => prop_types_default
+});
+var defaultImport2 = __toESM(require("prop-types"));
+__reExport(prop_types_exports, require("prop-types"));
+var prop_types_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
 });
-var Text = external_styled_components_default.a.div.withConfig({
-  displayName: "TrendValue__Text",
-  componentId: "sc-yd2lvy-1"
-})(["white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:", "px;display:flex;align-self:baseline;", ";"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color || '#000';
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.size ? "margin-left: ".concat(parseInt(props.size, 10) * 0.2 || 5, "px;") : '';
+var defaultImport3 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
 });
+var defaultImport4 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/visualizations-shared/numberUtils
+var numberUtils_exports = {};
+__export(numberUtils_exports, {
+  default: () => numberUtils_default
+});
+var defaultImport5 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
+var numberUtils_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/visualizations-shared/domUtils
+var domUtils_exports = {};
+__export(domUtils_exports, {
+  default: () => domUtils_default
+});
+var defaultImport6 = __toESM(require("@splunk/visualizations-shared/domUtils"));
+__reExport(domUtils_exports, require("@splunk/visualizations-shared/domUtils"));
+var domUtils_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport7 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/visualizations-shared/colorConstants
+var colorConstants_exports = {};
+__export(colorConstants_exports, {
+  default: () => colorConstants_default
+});
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+__reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
+var colorConstants_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
-var TrendValue_SingleValueContent = function SingleValueContent(_ref) {
-  var fontSize = _ref.fontSize,
-      color = _ref.color,
-      value = _ref.value,
-      text = _ref.text;
-  var TrendIndicator = false;
-  var ariaLabel = false;
+// src/common/utils/singleValueUtils.js
+var DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
+var getAligment = (align) => {
+  const alignMap = {
+    left: "start",
+    center: "center",
+    right: "end"
+  };
+  return alignMap[align] || "center";
+};
 
+// esm-externals:@splunk/react-icons/enterprise/ArrowUp
+var ArrowUp_exports = {};
+__export(ArrowUp_exports, {
+  default: () => ArrowUp_default
+});
+var defaultImport9 = __toESM(require("@splunk/react-icons/enterprise/ArrowUp"));
+__reExport(ArrowUp_exports, require("@splunk/react-icons/enterprise/ArrowUp"));
+var ArrowUp_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/react-icons/enterprise/ArrowDown
+var ArrowDown_exports = {};
+__export(ArrowDown_exports, {
+  default: () => ArrowDown_default
+});
+var defaultImport10 = __toESM(require("@splunk/react-icons/enterprise/ArrowDown"));
+__reExport(ArrowDown_exports, require("@splunk/react-icons/enterprise/ArrowDown"));
+var ArrowDown_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport11 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// src/SingleValueBasic/TrendValue.jsx
+var Column = styled_components_default.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: ${(props) => props.justify || "flex-end"};
+    height: ${(props) => props.size || 12}px;
+    ${(props) => props.size ? `margin: 0 ${parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
+`;
+var Text = styled_components_default.div`
+    white-space: nowrap;
+    font-size: ${(props) => props.size || 12}px;
+    color: ${(props) => props.color || "#000"};
+    font-family: ${DEFAULT_FONT_FAMILY};
+    height: ${(props) => props.size || 12}px;
+    line-height: ${(props) => props.size || 12}px;
+    display: flex;
+    align-self: baseline;
+    ${(props) => props.size ? `margin-left: ${parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
+`;
+var TrendValue = ({ fontSize, color, value, text }) => {
+  let TrendIndicator = false;
+  let ariaLabel = false;
   if (parseFloat(value, 10) > 0) {
-    TrendIndicator = ArrowUp_default.a;
-    ariaLabel = Object(i18n_["_"])('increase');
+    TrendIndicator = ArrowUp_default;
+    ariaLabel = (0, i18n_exports._)("increase");
   } else if (parseFloat(value, 10) < 0) {
-    TrendIndicator = ArrowDown_default.a;
-    ariaLabel = Object(i18n_["_"])('decrease');
+    TrendIndicator = ArrowDown_default;
+    ariaLabel = (0, i18n_exports._)("decrease");
   }
-
-  return /*#__PURE__*/external_react_default.a.createElement(Column, {
-    justify: "flex-end",
-    size: fontSize
-  }, /*#__PURE__*/external_react_default.a.createElement(Text, {
-    "data-test": "trendValueIndicator",
-    size: fontSize,
-    color: color
-  }, TrendIndicator && /*#__PURE__*/external_react_default.a.createElement(TrendIndicator, {
-    "aria-label": ariaLabel
-  })), /*#__PURE__*/external_react_default.a.createElement(Text, {
-    "data-test": "trendValue",
-    size: fontSize,
-    color: color
-  }, "".concat(text)));
+  return /* @__PURE__ */ react_default.createElement(Column, { justify: "flex-end", size: fontSize }, /* @__PURE__ */ react_default.createElement(Text, { "data-test": "trendValueIndicator", size: fontSize, color }, TrendIndicator && /* @__PURE__ */ react_default.createElement(TrendIndicator, { "aria-label": ariaLabel })), /* @__PURE__ */ react_default.createElement(Text, { "data-test": "trendValue", size: fontSize, color }, `${text}`));
 };
-
-TrendValue_SingleValueContent.propTypes = {
-  fontSize: external_prop_types_default.a.number,
-  color: external_prop_types_default.a.string,
-  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  text: external_prop_types_default.a.string
+TrendValue.propTypes = {
+  fontSize: prop_types_default.number,
+  color: prop_types_default.string,
+  value: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
+  text: prop_types_default.string
 };
-/* harmony default export */ var TrendValue = (TrendValue_SingleValueContent);
-// EXTERNAL MODULE: external "cssesc"
-var external_cssesc_ = __webpack_require__(107);
-var external_cssesc_default = /*#__PURE__*/__webpack_require__.n(external_cssesc_);
-
-// CONCATENATED MODULE: ./src/SingleValueBasic/MajorValue.jsx
-
-
-
-
+var TrendValue_default = TrendValue;
 
-var Row = external_styled_components_default.a.div.withConfig({
-  displayName: "MajorValue__Row",
-  componentId: "sc-shlzpv-0"
-})(["display:flex;flex-direction:row;align-items:flex-end;justify-content:left;height:", "px;line-height:", "px;"], function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
+// esm-externals:cssesc
+var cssesc_exports = {};
+__export(cssesc_exports, {
+  default: () => cssesc_default
 });
-var MajorValue_Text = external_styled_components_default.a.div.withConfig({
-  displayName: "MajorValue__Text",
-  componentId: "sc-shlzpv-1"
-})(["white-space:nowrap;height:100%;font-size:", "px;color:", ";font-family:", ";font-weight:bold;&:hover{text-decoration:", ";cursor:", ";}", ""], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color;
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.showUnderline ? 'underline' : 'inherit';
-}, function (props) {
-  return props.showUnderline ? 'pointer' : 'inherit';
-}, function (props) {
+var defaultImport12 = __toESM(require("cssesc"));
+__reExport(cssesc_exports, require("cssesc"));
+var cssesc_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// src/SingleValueBasic/MajorValue.jsx
+var Row = styled_components_default.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: left;
+    height: ${(props) => props.size}px;
+    line-height: ${(props) => props.size}px;
+`;
+var Text2 = styled_components_default.div`
+    white-space: nowrap;
+    height: 100%;
+    font-size: ${(props) => props.size || 12}px;
+    color: ${(props) => props.color};
+    font-family: ${DEFAULT_FONT_FAMILY};
+    font-weight: bold;
+    &:hover {
+        text-decoration: ${(props) => props.showUnderline ? "underline" : "inherit"};
+        cursor: ${(props) => props.showUnderline ? "pointer" : "inherit"};
+    }
+    ${(props) => {
   if (!props.pseudoContent || !props.pseudoContentPosition) {
-    return '';
+    return "";
   }
-
-  return "&:".concat(props.pseudoContentPosition, " {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ").concat(props.pseudoContentFontSize, "px;\n            position: relative;\n            font-weight: normal;\n            content: ").concat(props.pseudoContent, ";\n        }");
-});
-var validUnitPositions = ['before', 'after'];
-
-var MajorValue_SingleValueContent = function SingleValueContent(_ref) {
-  var color = _ref.color,
-      fontSize = _ref.fontSize,
-      unitPosition = _ref.unitPosition,
-      title = _ref.title,
-      value = _ref.value,
-      onValueClick = _ref.onValueClick,
-      unit = _ref.unit;
-  var sanitizedUnit;
-  var sanitizedUnitPosition;
-
-  if (typeof unit === 'string') {
-    sanitizedUnit = external_cssesc_default()(unit, {
-      wrap: true,
-      quotes: 'double'
-    });
-
-    if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {
+  return `&:${props.pseudoContentPosition} {
+            // by default this pseudo element would inherit text-decoration from main element
+            // and text-decoration could not be overwritten.
+            // adding display: inline-block makes text decoration independent from main element.
+            // => the unit will not be underlined if a user hovers over the main value
+            display: inline-block;
+            font-size: ${props.pseudoContentFontSize}px;
+            position: relative;
+            font-weight: normal;
+            content: ${props.pseudoContent};
+        }`;
+}}
+`;
+var validUnitPositions = ["before", "after"];
+var MajorValue = ({ color, fontSize, unitPosition, title, value, onValueClick, unit }) => {
+  let sanitizedUnit;
+  let sanitizedUnitPosition;
+  if (typeof unit === "string") {
+    sanitizedUnit = cssesc_default(unit, { wrap: true, quotes: "double" });
+    if (typeof unitPosition === "string" && validUnitPositions.includes(unitPosition)) {
       sanitizedUnitPosition = unitPosition;
     } else {
-      sanitizedUnitPosition = 'after';
+      sanitizedUnitPosition = "after";
     }
   }
-
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = (e) => {
     if (e.keyCode !== 13) {
       return;
     }
-
     e.preventDefault();
     onValueClick(e);
   };
-
-  return /*#__PURE__*/external_react_default.a.createElement(Row, {
-    size: fontSize
-  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue_Text, {
-    "data-test": "majorValue",
-    color: color,
-    onClick: function onClick(e) {
-      return typeof onValueClick === 'function' && onValueClick(e);
+  return /* @__PURE__ */ react_default.createElement(Row, { size: fontSize }, /* @__PURE__ */ react_default.createElement(
+    Text2,
+    {
+      "data-test": "majorValue",
+      color,
+      onClick: (e) => typeof onValueClick === "function" && onValueClick(e),
+      showUnderline: !!onValueClick,
+      size: fontSize,
+      title,
+      pseudoContent: sanitizedUnit,
+      pseudoContentPosition: sanitizedUnitPosition,
+      pseudoContentFontSize: fontSize * 0.6,
+      tabIndex: "0",
+      role: "button",
+      onKeyDown: handleKeyDown
     },
-    showUnderline: !!onValueClick,
-    size: fontSize,
-    title: title,
-    pseudoContent: sanitizedUnit,
-    pseudoContentPosition: sanitizedUnitPosition,
-    pseudoContentFontSize: fontSize * 0.6,
-    tabIndex: "0",
-    role: "button",
-    onKeyDown: handleKeyDown
-  }, value));
-};
-
-MajorValue_SingleValueContent.propTypes = {
-  color: external_prop_types_default.a.string,
-  fontSize: external_prop_types_default.a.number,
-  unit: external_prop_types_default.a.string,
-  unitPosition: external_prop_types_default.a.oneOf(validUnitPositions),
-  value: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  title: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.number]),
-  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func])
-};
-/* harmony default export */ var MajorValue = (MajorValue_SingleValueContent);
-// CONCATENATED MODULE: ./src/SingleValueBasic/SingleValueBasic.jsx
-
-
-
-
-
-
-
-var SingleValueBasic_Column = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Column",
-  componentId: "sc-k0nwrx-0"
-})(["display:flex;flex-direction:column;align-self:center;justify-content:center;"]);
-var SingleValueBasic_Row = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Row",
-  componentId: "sc-k0nwrx-1"
-})(["display:flex;flex-direction:row;align-items:", ";justify-content:", ";"], function (props) {
-  return props.alignItems || 'center';
-}, function (props) {
-  return Object(singleValueUtils["getAligment"])(props.align);
-});
-var SingleValueBasic_Text = external_styled_components_default.a.div.withConfig({
-  displayName: "SingleValueBasic__Text",
-  componentId: "sc-k0nwrx-2"
-})(["font-weight:normal;white-space:nowrap;font-size:", "px;color:", ";font-family:", ";height:", "px;line-height:1.2;margin:", ";"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.color || '#000';
-}, singleValueUtils["DEFAULT_FONT_FAMILY"], function (props) {
-  return props.size || 12;
-}, function (props) {
-  return props.margin || 'inherit';
-});
-
-var SingleValueBasic_SingleValueBasic = function SingleValueBasic(_ref) {
-  var props = extends_default()({}, _ref);
-
-  var majorColor = props.majorColor,
-      majorTextFontSize = props.majorTextFontSize,
-      majorText = props.majorText,
-      majorValueTitle = props.majorValueTitle,
-      trendColor = props.trendColor,
-      trendTextFontSize = props.trendTextFontSize,
-      trendText = props.trendText,
-      showTrendIndicator = props.showTrendIndicator,
-      unit = props.unit,
-      unitPosition = props.unitPosition,
-      underLabel = props.underLabel,
-      underLabelFontSize = props.underLabelFontSize,
-      underLabelColor = props.underLabelColor,
-      onValueClick = props.onValueClick,
-      align = props.align;
-  var trendIndicatorEnabled = trendText !== '' && showTrendIndicator;
-  return /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Column, null, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
-    alignItems: "baseline",
-    align: align,
-    "data-test": "single-value-row-align-".concat(Object(singleValueUtils["getAligment"])(align))
-  }, /*#__PURE__*/external_react_default.a.createElement(MajorValue, {
-    color: majorColor,
-    fontSize: majorTextFontSize,
-    unit: unit,
-    unitPosition: unitPosition,
-    value: majorText,
-    title: majorValueTitle,
-    onValueClick: onValueClick
-  }), trendIndicatorEnabled &&
-  /*#__PURE__*/
-  // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371
-  external_react_default.a.createElement(TrendValue, {
-    fontSize: trendTextFontSize,
-    color: trendColor,
-    value: trendText,
-    text: trendText
-  })), underLabel && /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Row, {
-    justify: "center",
-    align: align,
-    "data-test": "single-value-row-align-".concat(Object(singleValueUtils["getAligment"])(align))
-  }, /*#__PURE__*/external_react_default.a.createElement(SingleValueBasic_Text, {
-    "data-test": "underLabel",
-    size: underLabelFontSize,
-    color: underLabelColor,
-    margin: "0 6px"
-  }, underLabel)));
-};
-
-SingleValueBasic_SingleValueBasic.propTypes = {
-  majorText: external_prop_types_default.a.string,
-  majorColor: external_prop_types_default.a.string,
-  majorTextFontSize: external_prop_types_default.a.number,
-  majorValueTitle: external_prop_types_default.a.string,
-  trendText: external_prop_types_default.a.string,
-  trendTextFontSize: external_prop_types_default.a.number,
-  trendColor: external_prop_types_default.a.string,
-  showTrendIndicator: external_prop_types_default.a.bool,
-  unit: external_prop_types_default.a.string,
-  unitPosition: external_prop_types_default.a.oneOf(['before', 'after']),
-  underLabel: external_prop_types_default.a.string,
-  underLabelFontSize: external_prop_types_default.a.number,
-  underLabelColor: external_prop_types_default.a.string,
-  onValueClick: external_prop_types_default.a.oneOfType([external_prop_types_default.a.bool, external_prop_types_default.a.func]),
-  align: external_prop_types_default.a.string
-};
-var SingleValueTrendValue = TrendValue;
-/* harmony default export */ var src_SingleValueBasic_SingleValueBasic = __webpack_exports__["default"] = (SingleValueBasic_SingleValueBasic);
-
-/***/ }),
-
-/***/ 105:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/enterprise/ArrowUp");
-
-/***/ }),
-
-/***/ 106:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/enterprise/ArrowDown");
-
-/***/ }),
-
-/***/ 107:
-/***/ (function(module, exports) {
-
-module.exports = require("cssesc");
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 19:
-/***/ (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__(12);
-/* 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__(2);
-/* 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__(10);
-/* 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__(73);
-/* 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__(35);
-/* 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__(69);
-/* 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));
-      });
-    }
-  }
-
-  return target;
-}
-
-
-
-
-
-
-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'
-  };
-  return alignMap[align] || 'center';
-};
-/**
- * @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
- * @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.
-
-  if (hasBackground(backgroundColor) && !majorColor) {
-    return getDefaultColorWithBg({
-      backgroundColor: backgroundColor,
-      defaultFontColor: defaultFontColor,
-      defaultBlockFontColor: 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;
-
-  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
-
-  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);
-
-  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
- * @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({
-    majorColor: props.majorColor,
-    backgroundColor: backgroundColor,
-    defaultFontColor: defaultColors.defaultFontColor,
-    defaultBlockFontColor: defaultColors.defaultBlockFontColor
-  });
-  var 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;
-  return {
-    backgroundColor: backgroundColor,
-    backgroundEnabled: backgroundEnabled,
-    majorColor: majorColor,
-    trendColor: trendColor,
-    underLabelColor: 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, {
-    useThousandSeparators: shouldUseThousandSeparators,
-    // todo: need update formatNumber
-    useTrendUnits: shouldAbbreviateValue
-  }) : value; // When text is undefined, return empty string
-
-  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
-  });
-};
-/*
- * @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 '';
-  }
-
-  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
- * @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);
-  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;
-  return computeFontSize(majorTextCalc, {
-    width: width * spaceRatio,
-    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;
-
-  if (spaceRatio > 0) {
-    trendFontSize = computeFontSize(trendText, {
-      width: width * spaceRatio,
-      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 majorTextFontSize = majorFontSize || getMajorFontSize({
-    width: textContentWidth,
-    height: textContentHeight,
-    unit: unit,
-    majorText: majorText,
-    spaceRatio: majorTextSpaceRatio
-  });
-  var trendText = getTrendText({
-    majorValue: majorValue,
-    trendValue: trendValue,
-    trendDisplay: trendDisplay,
-    numberPrecision: numberPrecision,
-    shouldUseThousandSeparators: shouldUseThousandSeparators,
-    shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-  });
-  var trendTextFontSize = trendFontSize || getTrendFontSize({
-    width: textContentWidth,
-    height: textContentHeight,
-    trendText: trendText,
-    spaceRatio: 1 - majorTextSpaceRatio
-  });
-  return {
-    majorText: majorText,
-    majorTextFontSize: majorTextFontSize,
-    trendText: trendText,
-    trendTextFontSize: 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;
-
-  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
-    }, 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({
-      majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: trendFontSize,
-      width: width,
-      height: height,
-      unit: unit,
-      numberPrecision: numberPrecision,
-      shouldUseThousandSeparators: shouldUseThousandSeparators,
-      shouldAbbreviateTrendValue: shouldAbbreviateTrendValue
-    }, newProps));
-  }
-
-  return {
-    newMajorAndTrend: 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,
-    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
-
-  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,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: 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.
-
-  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));
-    }
-
-    modifiedText = "".concat(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,
-    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
-
-  if (smallViz) {
-    var truncateValue = minimallyTruncateStringToWidth({
-      text: majorValue,
-      fontWeight: 'bold',
-      fontSize: 12,
-      containerWidth: containerWidth
-    });
-
-    var _getMajorAndTrend3 = getMajorAndTrend({
-      majorValue: truncateValue,
-      trendValue: trendValue,
-      majorFontSize: majorFontSize,
-      trendFontSize: 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;
-    smallVizProps = {
-      trendDisplay: trendDisplay,
-      unit: unit
-    };
-  }
-
-  return {
-    majorText: majorText,
-    trendText: trendText,
-    majorTextFontSize: majorTextFontSize,
-    trendTextFontSize: trendTextFontSize,
-    majorValueTitle: majorValueTitle,
-    smallVizProps: 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
-
-  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
- * @param {Number} rgb      [0 - 255]
- * @param {Number} delta
- * @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
- * @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)
-
-  if (newR === r && newG === g && newB === b) {
-    if (newR === 0 && newG === 0 && newB === 0) {
-      if (ratio > 1) {
-        newR = adjustRGB(newR, 80);
-        newG = adjustRGB(newG, 80);
-        newB = adjustRGB(newB, 80);
-      } else {
-        newR = adjustRGB(newR, 40);
-        newG = adjustRGB(newG, 40);
-        newB = adjustRGB(newB, 40);
+    value
+  ));
+};
+MajorValue.propTypes = {
+  color: prop_types_default.string,
+  fontSize: prop_types_default.number,
+  unit: prop_types_default.string,
+  unitPosition: prop_types_default.oneOf(validUnitPositions),
+  value: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
+  title: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
+  onValueClick: prop_types_default.oneOfType([prop_types_default.bool, prop_types_default.func])
+};
+var MajorValue_default = MajorValue;
+
+// src/SingleValueBasic/SingleValueBasic.jsx
+var Column2 = styled_components_default.div`
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    justify-content: center;
+`;
+var Row2 = styled_components_default.div`
+    display: flex;
+    flex-direction: row;
+    align-items: ${(props) => props.alignItems || "center"};
+    justify-content: ${(props) => getAligment(props.align)};
+`;
+var Text3 = styled_components_default.div`
+    font-weight: normal;
+    white-space: nowrap;
+    font-size: ${(props) => props.size || 12}px;
+    color: ${(props) => props.color || "#000"};
+    font-family: ${DEFAULT_FONT_FAMILY};
+    height: ${(props) => props.size || 12}px;
+    line-height: 1.2;
+    margin: ${(props) => props.margin || "inherit"};
+`;
+var SingleValueBasic = (_a) => {
+  var props = __objRest(_a, []);
+  const {
+    majorColor,
+    majorTextFontSize,
+    majorText,
+    majorValueTitle,
+    trendColor,
+    trendTextFontSize,
+    trendText,
+    showTrendIndicator,
+    unit,
+    unitPosition,
+    underLabel,
+    underLabelFontSize,
+    underLabelColor,
+    onValueClick,
+    align
+  } = props;
+  const trendIndicatorEnabled = trendText !== "" && showTrendIndicator;
+  return /* @__PURE__ */ react_default.createElement(Column2, null, /* @__PURE__ */ react_default.createElement(
+    Row2,
+    {
+      alignItems: "baseline",
+      align,
+      "data-test": `single-value-row-align-${getAligment(align)}`
+    },
+    /* @__PURE__ */ react_default.createElement(
+      MajorValue_default,
+      {
+        color: majorColor,
+        fontSize: majorTextFontSize,
+        unit,
+        unitPosition,
+        value: majorText,
+        title: majorValueTitle,
+        onValueClick
       }
-    } else if (newR === 255 && newG === 255 && newB === 255) {
-      if (ratio > 1) {
-        newR = adjustRGB(newR, 20);
-        newG = adjustRGB(newG, 20);
-        newB = adjustRGB(newB, 20);
-      } else {
-        newR = adjustRGB(newR, 80);
-        newG = adjustRGB(newG, 80);
-        newB = adjustRGB(newB, 80);
+    ),
+    trendIndicatorEnabled && // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371
+    /* @__PURE__ */ react_default.createElement(
+      TrendValue_default,
+      {
+        fontSize: trendTextFontSize,
+        color: trendColor,
+        value: trendText,
+        text: trendText
       }
-    } else {
-      newR = adjustRGB(newR, 20);
-      newG = adjustRGB(newG, 20);
-      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);
-};
-/**
- * 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,
-    value: majorValue,
-    name: majorValueField
-  };
-
-  if (trellisEnabled) {
-    payload = _objectSpread(_objectSpread({}, payload), {}, {
-      'trellis.name': trellisSplityBy,
-      'trellis.value': trellisKey
-    });
-  }
-
-  return onValueClick(_objectSpread(_objectSpread({}, ev), {}, {
-    payload: payload
-  }));
-};
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 35:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/propUtils");
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 68:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/extends");
-
-/***/ }),
-
-/***/ 69:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorConstants");
-
-/***/ }),
-
-/***/ 73:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/domUtils");
-
-/***/ })
-
-/******/ });
-//# sourceMappingURL=SingleValueBasic.js.map
+    )
+  ), underLabel && /* @__PURE__ */ react_default.createElement(
+    Row2,
+    {
+      justify: "center",
+      align,
+      "data-test": `single-value-row-align-${getAligment(align)}`
+    },
+    /* @__PURE__ */ react_default.createElement(
+      Text3,
+      {
+        "data-test": "underLabel",
+        size: underLabelFontSize,
+        color: underLabelColor,
+        margin: "0 6px"
+      },
+      underLabel
+    )
+  ));
+};
+SingleValueBasic.propTypes = {
+  majorText: prop_types_default.string,
+  majorColor: prop_types_default.string,
+  majorTextFontSize: prop_types_default.number,
+  majorValueTitle: prop_types_default.string,
+  trendText: prop_types_default.string,
+  trendTextFontSize: prop_types_default.number,
+  trendColor: prop_types_default.string,
+  showTrendIndicator: prop_types_default.bool,
+  unit: prop_types_default.string,
+  unitPosition: prop_types_default.oneOf(["before", "after"]),
+  underLabel: prop_types_default.string,
+  underLabelFontSize: prop_types_default.number,
+  underLabelColor: prop_types_default.string,
+  onValueClick: prop_types_default.oneOfType([prop_types_default.bool, prop_types_default.func]),
+  align: prop_types_default.string
+};
+var SingleValueTrendValue = TrendValue_default;
+var SingleValueBasic_default = SingleValueBasic;
+//# sourceMappingURL=SingleValueBasic.js.map