@splunk/visualizations 27.1.0 → 27.2.1

package/SingleValueIcon.js

@@ -59,7 +59,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/SingleValueIcon/SingleValueIcon.tsx
+// src/SingleValueIcon/index.ts
 var SingleValueIcon_exports = {};
 __export(SingleValueIcon_exports, {
   PureSingleValueIcon: () => PureSingleValueIcon,
@@ -216,104 +216,50 @@ var TrellisTitle = (props) => {
   );
 };
 
-// esm-externals:@splunk/visualizations/SingleValueBasic
-var SingleValueBasic_exports = {};
-__export(SingleValueBasic_exports, {
-  default: () => SingleValueBasic_default
-});
-var defaultImport12 = __toESM(require("@splunk/visualizations/SingleValueBasic"));
-__reExport(SingleValueBasic_exports, require("@splunk/visualizations/SingleValueBasic"));
-var SingleValueBasic_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
-
-// esm-externals:@splunk/react-icons/enterprise/Activity
-var Activity_exports = {};
-__export(Activity_exports, {
-  default: () => Activity_default
-});
-var defaultImport13 = __toESM(require("@splunk/react-icons/enterprise/Activity"));
-__reExport(Activity_exports, require("@splunk/react-icons/enterprise/Activity"));
-var Activity_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
-
-// esm-externals:@splunk/react-icons/enterprise/Clock
-var Clock_exports = {};
-__export(Clock_exports, {
-  default: () => Clock_default
-});
-var defaultImport14 = __toESM(require("@splunk/react-icons/enterprise/Clock"));
-__reExport(Clock_exports, require("@splunk/react-icons/enterprise/Clock"));
-var Clock_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
-// esm-externals:@splunk/react-icons/enterprise/Pencil
-var Pencil_exports = {};
-__export(Pencil_exports, {
-  default: () => Pencil_default
-});
-var defaultImport15 = __toESM(require("@splunk/react-icons/enterprise/Pencil"));
-__reExport(Pencil_exports, require("@splunk/react-icons/enterprise/Pencil"));
-var Pencil_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
-
-// esm-externals:@splunk/react-icons/enterprise/Star
-var Star_exports = {};
-__export(Star_exports, {
-  default: () => Star_default
-});
-var defaultImport16 = __toESM(require("@splunk/react-icons/enterprise/Star"));
-__reExport(Star_exports, require("@splunk/react-icons/enterprise/Star"));
-var Star_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
-
-// esm-externals:@splunk/react-icons/enterprise/Question
-var Question_exports = {};
-__export(Question_exports, {
-  default: () => Question_default
-});
-var defaultImport17 = __toESM(require("@splunk/react-icons/enterprise/Question"));
-__reExport(Question_exports, require("@splunk/react-icons/enterprise/Question"));
-var Question_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
-
 // esm-externals:lodash
 var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport18 = __toESM(require("lodash"));
+var defaultImport12 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var lodash_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/visualizations-shared/numberUtils
 var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport19 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport13 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var numberUtils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualizations-shared/domUtils
 var domUtils_exports = {};
 __export(domUtils_exports, {
   default: () => domUtils_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/domUtils"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/domUtils"));
 __reExport(domUtils_exports, require("@splunk/visualizations-shared/domUtils"));
-var domUtils_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var domUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/visualizations-shared/propUtils
 var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport15 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var propUtils_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
 __reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
-var colorConstants_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var colorConstants_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/utils/singleValueUtils.js
 var DEFAULT_FONT = 12;
@@ -406,13 +352,13 @@ var computeText = ({
   return text;
 };
 var getMajorText = ({
-  majorValue,
+  majorValueDisplay,
   numberPrecision,
   shouldUseThousandSeparators,
   shouldAbbreviateMajorValue
 }) => computeText({
-  value: majorValue === null ? "N/A" : majorValue,
-  // if majorValue is null, use `N/A`.
+  value: majorValueDisplay === null ? "N/A" : majorValueDisplay,
+  // if majorValueDisplay is null, use `N/A`.
   numberPrecision,
   shouldUseThousandSeparators,
   shouldAbbreviateValue: shouldAbbreviateMajorValue
@@ -487,6 +433,7 @@ var getMajorAndTrend = ({
   width,
   height,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -501,7 +448,7 @@ var getMajorAndTrend = ({
   const textContentWidth = width * 0.9;
   const textContentHeight = height * 0.9;
   const majorText = getMajorText({
-    majorValue,
+    majorValueDisplay,
     numberPrecision,
     shouldUseThousandSeparators,
     shouldAbbreviateMajorValue
@@ -539,6 +486,7 @@ var updateVizInSmallSpace = ({
   height,
   toRemoveList,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -559,6 +507,7 @@ var updateVizInSmallSpace = ({
     });
     newMajorAndTrend = getMajorAndTrend(__spreadValues({
       majorValue,
+      majorValueDisplay,
       trendValue,
       majorFontSize,
       trendFontSize,
@@ -573,9 +522,10 @@ var updateVizInSmallSpace = ({
     removeIndex += 1;
   }
   if (newTextSize < 12) {
-    const truncateValue = `${majorValue.toString().slice(0, 3)}...`;
+    const truncateValue = `${(majorValueDisplay || majorValue).toString().slice(0, 3)}...`;
     newMajorAndTrend = getMajorAndTrend(__spreadValues({
-      majorValue: truncateValue,
+      majorValue,
+      majorValueDisplay: truncateValue,
       trendValue,
       majorFontSize,
       trendFontSize,
@@ -595,6 +545,7 @@ var computeSingleValueContent = ({
   containerWidth,
   containerHeight,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -608,6 +559,7 @@ var computeSingleValueContent = ({
 }) => {
   let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({
     majorValue,
+    majorValueDisplay: majorValueDisplay || majorValue,
     trendValue,
     majorFontSize,
     trendFontSize,
@@ -628,6 +580,7 @@ var computeSingleValueContent = ({
       height: containerHeight,
       toRemoveList,
       majorValue,
+      majorValueDisplay: majorValueDisplay || majorValue,
       trendValue,
       majorFontSize,
       trendFontSize,
@@ -661,6 +614,313 @@ var getTrendColorWithPercent = (options) => {
   return shouldUsePercentTrendColor ? { trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)" } : {};
 };
 
+// esm-externals:@splunk/react-icons/enterprise/ArrowUp
+var ArrowUp_exports = {};
+__export(ArrowUp_exports, {
+  default: () => ArrowUp_default
+});
+var defaultImport17 = __toESM(require("@splunk/react-icons/enterprise/ArrowUp"));
+__reExport(ArrowUp_exports, require("@splunk/react-icons/enterprise/ArrowUp"));
+var ArrowUp_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// esm-externals:@splunk/react-icons/enterprise/ArrowDown
+var ArrowDown_exports = {};
+__export(ArrowDown_exports, {
+  default: () => ArrowDown_default
+});
+var defaultImport18 = __toESM(require("@splunk/react-icons/enterprise/ArrowDown"));
+__reExport(ArrowDown_exports, require("@splunk/react-icons/enterprise/ArrowDown"));
+var ArrowDown_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+
+// 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;
+    ariaLabel = (0, i18n_exports._)("increase");
+  } else if (parseFloat(value, 10) < 0) {
+    TrendIndicator = ArrowDown_default;
+    ariaLabel = (0, i18n_exports._)("decrease");
+  }
+  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.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
+};
+var TrendValue_default = TrendValue;
+
+// esm-externals:cssesc
+var cssesc_exports = {};
+__export(cssesc_exports, {
+  default: () => cssesc_default
+});
+var defaultImport19 = __toESM(require("cssesc"));
+__reExport(cssesc_exports, require("cssesc"));
+var cssesc_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// 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 `&:${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";
+    }
+  }
+  const handleKeyDown = (e) => {
+    if (e.keyCode !== 13) {
+      return;
+    }
+    e.preventDefault();
+    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
+    },
+    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
+      }
+    ),
+    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
+      }
+    )
+  ), 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 SingleValueBasic_default = SingleValueBasic;
+
+// esm-externals:@splunk/react-icons/enterprise/Activity
+var Activity_exports = {};
+__export(Activity_exports, {
+  default: () => Activity_default
+});
+var defaultImport20 = __toESM(require("@splunk/react-icons/enterprise/Activity"));
+__reExport(Activity_exports, require("@splunk/react-icons/enterprise/Activity"));
+var Activity_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// esm-externals:@splunk/react-icons/enterprise/Clock
+var Clock_exports = {};
+__export(Clock_exports, {
+  default: () => Clock_default
+});
+var defaultImport21 = __toESM(require("@splunk/react-icons/enterprise/Clock"));
+__reExport(Clock_exports, require("@splunk/react-icons/enterprise/Clock"));
+var Clock_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// esm-externals:@splunk/react-icons/enterprise/Pencil
+var Pencil_exports = {};
+__export(Pencil_exports, {
+  default: () => Pencil_default
+});
+var defaultImport22 = __toESM(require("@splunk/react-icons/enterprise/Pencil"));
+__reExport(Pencil_exports, require("@splunk/react-icons/enterprise/Pencil"));
+var Pencil_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+
+// esm-externals:@splunk/react-icons/enterprise/Star
+var Star_exports = {};
+__export(Star_exports, {
+  default: () => Star_default
+});
+var defaultImport23 = __toESM(require("@splunk/react-icons/enterprise/Star"));
+__reExport(Star_exports, require("@splunk/react-icons/enterprise/Star"));
+var Star_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// esm-externals:@splunk/react-icons/enterprise/Question
+var Question_exports = {};
+__export(Question_exports, {
+  default: () => Question_default
+});
+var defaultImport24 = __toESM(require("@splunk/react-icons/enterprise/Question"));
+__reExport(Question_exports, require("@splunk/react-icons/enterprise/Question"));
+var Question_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
 // src/SingleValueIcon/PureSingleValueIcon/utils/iconUtils.js
 var ICON_POSITIONS = ["before", "after", "top", "below"];
 var ICON_HORIZONTAL_RATIO = 0.4;
@@ -739,7 +999,7 @@ IconContainer.propTypes = {
 var IconContainer_default = IconContainer;
 
 // src/SingleValueIcon/PureSingleValueIcon/SingleValueIconLayout.jsx
-var Column = styled_components_default.div`
+var Column3 = styled_components_default.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -826,7 +1086,7 @@ var SingleValueIconLayout = (_a) => {
   } else {
     iconLayout = /* @__PURE__ */ react_default.createElement(IconColumn, { align, "data-test": `single-value-icon-align-${getAligment(align)}` }, iconPosition === "top" && iconContainer, singleValueBasic, iconPosition === "below" && iconContainer);
   }
-  return /* @__PURE__ */ react_default.createElement(Column, null, iconLayout);
+  return /* @__PURE__ */ react_default.createElement(Column3, null, iconLayout);
 };
 SingleValueIconLayout.propTypes = __spreadProps(__spreadValues({}, SingleValueBasic_default.propTypes), {
   iconWidth: prop_types_default.number,
@@ -847,18 +1107,18 @@ var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport25 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var FeatureFlagContext_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport26 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var visualization_schemas_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -883,6 +1143,7 @@ var SingleValueIcon = (_a) => {
     style,
     majorFontSize,
     majorValue,
+    majorValueDisplay,
     majorValueField,
     trendValue,
     trendFontSize,
@@ -999,6 +1260,7 @@ var SingleValueIcon = (_a) => {
         smallVizProps
       } = computeSingleValueContent({
         majorValue,
+        majorValueDisplay: majorValueDisplay || majorValue,
         trendValue,
         majorFontSize,
         trendFontSize,
@@ -1082,6 +1344,7 @@ SingleValueIcon.propTypes = {
   height: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
   style: prop_types_default.object,
   majorValue: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
+  majorValueDisplay: prop_types_default.oneOfType([prop_types_default.string, prop_types_default.number]),
   majorValueField: prop_types_default.string,
   majorColor: prop_types_default.string,
   majorFontSize: prop_types_default.number,
@@ -1143,81 +1406,81 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport25 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport27 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var getSettingsFromThemedProps_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport28 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var Options_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var SanitizeProps_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport30 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var TimezoneContext_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport29 = __toESM(require("@splunk/moment"));
+var defaultImport31 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var moment_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
 __reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
-var hocUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var hocUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport33 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
 __reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
-var JSONSchemaUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var JSONSchemaUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport32 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport34 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var async_dynamic_options_evaluator_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport33 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport35 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var id_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -1425,9 +1688,9 @@ var colorUtils_exports = {};
 __export(colorUtils_exports, {
   default: () => colorUtils_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
 __reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var colorUtils_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -1474,7 +1737,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
+        "data-splunk-visualization-version": "27.2.1 - 41b7410be",
         width,
         height,
         backgroundColor
@@ -1540,7 +1803,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
+  "data-splunk-visualization-version": "27.2.1 - 41b7410be"
 })`
     position: relative;
     width: 100%;
@@ -1562,9 +1825,9 @@ var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport35 = __toESM(require("@splunk/themes/variables"));
+var defaultImport37 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var variables_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
@@ -2012,9 +2275,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport38 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var FeatureFlags_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -2032,9 +2295,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport37 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport39 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var trellisUtils_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/common/utils/trellisUtils.ts
 var AGGREGATIONS = "aggregations";
@@ -2641,27 +2904,27 @@ var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport38 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport40 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var PresetPalettes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports2 = {};
 __export(pick_exports2, {
   default: () => pick_default2
 });
-var defaultImport39 = __toESM(require("@splunk/themes/pick"));
+var defaultImport41 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports2, require("@splunk/themes/pick"));
-var pick_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var pick_default2 = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport42 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var configUtils_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/configContext/singleValueContext.ts
 var defaultContext = {
@@ -3368,27 +3631,27 @@ var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport41 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport43 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+var Paginator_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport42 = __toESM(require("@splunk/themes"));
+var defaultImport44 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+var themes_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
 
 // esm-externals:@splunk/themes/useSplunkTheme
 var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport43 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport45 = __toESM(require("@splunk/themes/useSplunkTheme"));
 __reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+var useSplunkTheme_default = "default" in defaultImport45 ? defaultImport45.default : defaultImport45;
 
 // src/common/hocs/withTrellis.tsx
 var TrellisContainer = styled_components_default.div`