@splunk/visualizations 27.0.0 → 27.2.0

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,
@@ -133,59 +133,41 @@ var defaultImport7 = __toESM(require("lodash/isEmpty"));
 __reExport(isEmpty_exports, require("lodash/isEmpty"));
 var isEmpty_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
-// esm-externals:@splunk/visualization-context/FeatureFlagContext
-var FeatureFlagContext_exports = {};
-__export(FeatureFlagContext_exports, {
-  default: () => FeatureFlagContext_default
-});
-var defaultImport8 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
-__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
-
-// esm-externals:@splunk/visualization-schemas
-var visualization_schemas_exports = {};
-__export(visualization_schemas_exports, {
-  default: () => visualization_schemas_default
-});
-var defaultImport9 = __toESM(require("@splunk/visualization-schemas"));
-__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
-
 // esm-externals:@splunk/visualizations-shared/style
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport10 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var style_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport11 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport9 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var i18n_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport12 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport10 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var SizeAwareWrapper_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // esm-externals:@splunk/visualizations-shared/Message
 var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport13 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport11 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var Message_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -234,104 +216,50 @@ var TrellisTitle = (props) => {
   );
 };
 
-// esm-externals:@splunk/visualizations/SingleValueBasic
-var SingleValueBasic_exports = {};
-__export(SingleValueBasic_exports, {
-  default: () => SingleValueBasic_default
-});
-var defaultImport14 = __toESM(require("@splunk/visualizations/SingleValueBasic"));
-__reExport(SingleValueBasic_exports, require("@splunk/visualizations/SingleValueBasic"));
-var SingleValueBasic_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
-
-// esm-externals:@splunk/react-icons/enterprise/Activity
-var Activity_exports = {};
-__export(Activity_exports, {
-  default: () => Activity_default
-});
-var defaultImport15 = __toESM(require("@splunk/react-icons/enterprise/Activity"));
-__reExport(Activity_exports, require("@splunk/react-icons/enterprise/Activity"));
-var Activity_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
-
-// esm-externals:@splunk/react-icons/enterprise/Clock
-var Clock_exports = {};
-__export(Clock_exports, {
-  default: () => Clock_default
-});
-var defaultImport16 = __toESM(require("@splunk/react-icons/enterprise/Clock"));
-__reExport(Clock_exports, require("@splunk/react-icons/enterprise/Clock"));
-var Clock_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
-
-// esm-externals:@splunk/react-icons/enterprise/Pencil
-var Pencil_exports = {};
-__export(Pencil_exports, {
-  default: () => Pencil_default
-});
-var defaultImport17 = __toESM(require("@splunk/react-icons/enterprise/Pencil"));
-__reExport(Pencil_exports, require("@splunk/react-icons/enterprise/Pencil"));
-var Pencil_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
-
-// esm-externals:@splunk/react-icons/enterprise/Star
-var Star_exports = {};
-__export(Star_exports, {
-  default: () => Star_default
-});
-var defaultImport18 = __toESM(require("@splunk/react-icons/enterprise/Star"));
-__reExport(Star_exports, require("@splunk/react-icons/enterprise/Star"));
-var Star_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
-
-// esm-externals:@splunk/react-icons/enterprise/Question
-var Question_exports = {};
-__export(Question_exports, {
-  default: () => Question_default
-});
-var defaultImport19 = __toESM(require("@splunk/react-icons/enterprise/Question"));
-__reExport(Question_exports, require("@splunk/react-icons/enterprise/Question"));
-var Question_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
-
 // esm-externals:lodash
 var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport20 = __toESM(require("lodash"));
+var defaultImport12 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+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 defaultImport21 = __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 defaultImport21 ? defaultImport21.default : defaultImport21;
+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 defaultImport22 = __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 defaultImport22 ? defaultImport22.default : defaultImport22;
+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 defaultImport23 = __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 defaultImport23 ? defaultImport23.default : defaultImport23;
+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 defaultImport24 = __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 defaultImport24 ? defaultImport24.default : defaultImport24;
+var colorConstants_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/common/utils/singleValueUtils.js
 var DEFAULT_FONT = 12;
@@ -424,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
@@ -505,6 +433,7 @@ var getMajorAndTrend = ({
   width,
   height,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -519,7 +448,7 @@ var getMajorAndTrend = ({
   const textContentWidth = width * 0.9;
   const textContentHeight = height * 0.9;
   const majorText = getMajorText({
-    majorValue,
+    majorValueDisplay,
     numberPrecision,
     shouldUseThousandSeparators,
     shouldAbbreviateMajorValue
@@ -557,6 +486,7 @@ var updateVizInSmallSpace = ({
   height,
   toRemoveList,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -577,6 +507,7 @@ var updateVizInSmallSpace = ({
     });
     newMajorAndTrend = getMajorAndTrend(__spreadValues({
       majorValue,
+      majorValueDisplay,
       trendValue,
       majorFontSize,
       trendFontSize,
@@ -591,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,
@@ -613,6 +545,7 @@ var computeSingleValueContent = ({
   containerWidth,
   containerHeight,
   majorValue,
+  majorValueDisplay,
   trendValue,
   majorFontSize,
   trendFontSize,
@@ -626,6 +559,7 @@ var computeSingleValueContent = ({
 }) => {
   let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({
     majorValue,
+    majorValueDisplay: majorValueDisplay || majorValue,
     trendValue,
     majorFontSize,
     trendFontSize,
@@ -646,6 +580,7 @@ var computeSingleValueContent = ({
       height: containerHeight,
       toRemoveList,
       majorValue,
+      majorValueDisplay: majorValueDisplay || majorValue,
       trendValue,
       majorFontSize,
       trendFontSize,
@@ -667,17 +602,324 @@ var computeSingleValueContent = ({
     smallVizProps
   };
 };
-var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled = false, trellisSplityBy = "", trellisKey = "") => {
-  let payload = {
+var handleValueClickCallback = (ev, majorValue, majorValueField, trendValue, onValueClick, trellisEnabled = false, trellisSplitBy = "", trellisKey = "") => onValueClick(__spreadProps(__spreadValues({}, ev), {
+  payload: __spreadValues({
     trendValue,
     value: majorValue,
     name: majorValueField
-  };
-  if (trellisEnabled) {
-    payload = __spreadProps(__spreadValues({}, payload), { "trellis.name": trellisSplityBy, "trellis.value": trellisKey });
+  }, trellisEnabled && { "trellis.name": trellisSplitBy, "trellis.value": trellisKey })
+}));
+var getTrendColorWithPercent = (options) => {
+  const shouldUsePercentTrendColor = options.trendColor === "> trendValue | rangeValue(trendColorEditorConfig)" && options.trendDisplay === "percent";
+  return shouldUsePercentTrendColor ? { trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)" } : {};
+};
+
+// 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";
+    }
   }
-  return onValueClick(__spreadProps(__spreadValues({}, ev), { payload }));
+  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"];
@@ -757,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;
@@ -844,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,
@@ -860,6 +1102,34 @@ SingleValueIconLayout.propTypes = __spreadProps(__spreadValues({}, SingleValueBa
 });
 var SingleValueIconLayout_default = SingleValueIconLayout;
 
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport25 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+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 defaultImport26 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+
 // src/SingleValueIcon/PureSingleValueIcon/SingleValueIcon.jsx
 var Container = styled_components_default.div`
     overflow: hidden;
@@ -873,6 +1143,7 @@ var SingleValueIcon = (_a) => {
     style,
     majorFontSize,
     majorValue,
+    majorValueDisplay,
     majorValueField,
     trendValue,
     trendFontSize,
@@ -908,11 +1179,7 @@ var SingleValueIcon = (_a) => {
     defaultFontColor: defaultColors.defaultFontColor,
     defaultBlockFontColor: defaultColors.defaultBlockFontColor
   });
-  const featureFlagContext = react_default.useContext(FeatureFlagContext_default);
-  const isTrellisFeatureFlagOn = Boolean(
-    featureFlagContext && featureFlagContext.visualizations_enableTrellis
-  );
-  const trellisEnabled = isTrellisFeatureFlagOn && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+  const trellisEnabled = useTrellisEnabled(splitByLayout);
   const handleValueClick = (0, react_exports.useCallback)(
     (ev) => handleValueClickCallback(
       ev,
@@ -993,6 +1260,7 @@ var SingleValueIcon = (_a) => {
         smallVizProps
       } = computeSingleValueContent({
         majorValue,
+        majorValueDisplay: majorValueDisplay || majorValue,
         trendValue,
         majorFontSize,
         trendFontSize,
@@ -1059,7 +1327,7 @@ var SingleValueIcon = (_a) => {
       IconLayout
     );
   };
-  if (isTrellisFeatureFlagOn && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
+  if (trellisEnabled) {
     return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
       TrellisTitle,
       {
@@ -1076,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,
@@ -1137,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 {
@@ -1419,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 }) => ({
@@ -1468,7 +1737,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -1534,7 +1803,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;
@@ -1556,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) => {
@@ -2006,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) => {
@@ -2021,1325 +2290,1368 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
-// src/common/withDashboardViz.tsx
-var withDashboardViz = (opts) => {
-  const {
-    ReactViz,
-    vizConfig,
-    computeVizProps: computeVizProps2 = () => {
-    },
-    disableEditModeCover,
-    useIconPlaceholder
-  } = opts;
-  const SanitizedReactViz = (0, SanitizeProps_exports.withSanitizedProps)(ReactViz);
-  const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(vizConfig.optionsSchema, "default");
-  const DashboardViz = (props) => {
-    var _a;
-    const {
-      mode,
-      hasEventHandlers,
-      dataSources,
-      // type of { [key: string]: DataSource }
-      options,
-      context = {},
-      width,
-      height,
-      onComputedProps,
-      onEventTrigger,
-      theme,
-      onRequestParamsChange
-    } = props;
-    const { serializedTimezone } = react_exports.useContext(TimezoneContext_default);
-    if (serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(serializedTimezone);
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport39 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+
+// src/common/utils/trellisUtils.ts
+var AGGREGATIONS = "aggregations";
+var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let errorCode = null;
+  if (fields && fields.length) {
+    splitDataSources = {};
+    for (let i = 0; i < fields.length; i += 1) {
+      const fieldName = fields[i].name;
+      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
+        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[fieldName].primary.data.fields = [fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[i]];
       }
     }
-    const themeFunc = (themeVar) => {
-      var _a2, _b;
-      return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
-    };
-    const bgColorFromTheme = themeFunc("defaultBackgroundColor");
-    const {
-      family: currentThemeFamily,
-      colorScheme: currentThemeColorScheme,
-      density: currentThemeDensity
-    } = getSettingsFromThemedProps_default({ theme });
-    let evaluatedOptions = {};
-    const [evaluatedOptionsAsync, setEvaluatedOptionsAsync] = react_exports.useState({});
-    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const [visualizationID] = react_exports.useState(`${vizConfig.name} - ${(0, id_exports.createGUID)()}`);
-    const [dataSourcesInState, setDataSourcesInState] = react_exports.useState({});
-    const [dataFramesInState, setDataFramesInState] = react_exports.useState();
-    const [useAsyncEvaluatedOptions, setUseAsyncEvaluatedOptions] = react_exports.useState(
-      Boolean(getFeatureFlag(featureFlagContext, "visualizations_useWebWorkersForDSL"))
-    );
-    const isDownsamplingEnabledByFeatureFlag = Boolean(
-      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
-    );
-    const isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
-        context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
-    const [threshold, setThreshold] = react_exports.useState(Number(width));
-    const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
-      setThreshold(newThreshold);
-    }, []);
-    const isDownsamplingEnabled = react_exports.useMemo(() => {
-      return isDownsamplingEnabledByFeatureFlag && isDownsamplingEnabledForViz({ vizConfig });
-    }, [isDownsamplingEnabledByFeatureFlag]);
-    const downsamplingProps = react_exports.useMemo(() => {
-      if (!isDownsamplingEnabled) {
-        return {};
-      }
-      return {
-        onDownsamplingThresholdChange,
-        originalDataSources: dataSources
-      };
-    }, [dataSources, isDownsamplingEnabled, onDownsamplingThresholdChange]);
-    const downsampledDataSources = useDownsampleDataSources_default({
-      options: optionsToEvaluate.options,
-      context: optionsToEvaluate.context,
-      dataSources,
-      threshold,
-      isDownsamplingEnabled
-    });
-    evaluatedOptions = useDeepMemo(() => {
-      try {
-        if (useAsyncEvaluatedOptions) {
-          const asyncDynamicOptionsEvaluatorParams = {
-            visualizationID,
-            props,
-            options: optionsToEvaluate,
-            dataSources: downsampledDataSources,
-            theme: vizConfig.themes,
-            bypassCloneDeepOptionScope: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-            ),
-            lazyLoadingDataFrame: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            )
-          };
-          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
-            setEvaluatedOptionsAsync(results.results);
-          }).catch(() => {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          let dataFrames = dataFramesInState;
-          if (downsampledDataSources !== dataSourcesInState) {
-            setDataSourcesInState(downsampledDataSources);
-            dataFrames = Options_exports.Options.dataFrameFromDataSource(
-              downsampledDataSources,
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            );
-            setDataFramesInState(dataFrames);
-          }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            dataFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+  }
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach((splitByField) => {
+      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      fields.forEach((field, idx) => {
+        const fieldName = field == null ? void 0 : field.name;
+        if (fieldName !== "_time" && !(fieldName == null ? void 0 : fieldName.startsWith("_")) && field.data_source === splitByField) {
+          splitDataSources[splitByField].primary.data.fields.push(field);
+          splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
         }
-      } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
-        return {};
-      }
-      return {};
-    }, [
-      currentThemeFamily,
-      currentThemeColorScheme,
-      currentThemeDensity,
-      optionsToEvaluate,
-      downsampledDataSources,
-      serializedTimezone,
-      useAsyncEvaluatedOptions
-    ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
-    let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
-      clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
-        backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
-    }
-    react_exports.useEffect(() => {
-      onComputedProps(clonedEvaluatedOptions);
     });
-    react_exports.useEffect(() => {
-      return () => {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_default.reset(visualizationID);
-        }
-      };
-    }, []);
-    const { requiredProps = [], supports } = vizConfig;
-    const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
-    if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
-      return /* @__PURE__ */ react_exports.createElement(
-        MissingPropsMessage_default,
-        {
-          "data-test": "missing-props-message",
-          width,
-          height,
-          missingProps: missing,
-          backgroundColor: bgColorFromTheme
-        }
+  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
+    splitDataSources = {};
+    for (let i = 1; i < fields.length; i += 1) {
+      const fieldName = fields[i].name;
+      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
+        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[fieldName].primary.data.fields = [fields[0], fields[i]];
+        splitDataSources[fieldName].primary.data.columns = [columns[0], columns[i]];
+      }
+    }
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByAggregationsStats = (dataSource) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysStats)(fields);
+  }
+  if (splitByFields && splitByFields.length > 0) {
+    splitDataSources = {};
+    splitByFields.forEach((splitByField) => {
+      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
       );
+      splitDataSources[splitByField].primary.data.fields = [fields[0]];
+      splitDataSources[splitByField].primary.data.columns = [columns[0]];
+      const idx = fields.findIndex((field) => field.name === splitByField);
+      if (idx > 0) {
+        splitDataSources[splitByField].primary.data.fields.push(fields[idx]);
+        splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
+      }
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
+  var _a, _b, _c, _d, _e;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
+  }
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+    const valueKeys = [];
+    for (let i = 1; i < fields.length; i += 1) {
+      if (!((_e = fields[i].name) == null ? void 0 : _e.startsWith("_"))) {
+        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+      }
     }
-    const eventCallbackProps = {};
-    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
-      const supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach((eventName) => {
-        const { parentKeys, payloadKeys } = supportedEvents[eventName];
-        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
-        let payload = {};
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach((p) => {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
-        eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
-            payload = ev.payload;
+    valueKeys.forEach((val) => {
+      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[val].primary.data.fields = [
+        { name: fields[0].name },
+        ...dataSourceKeys.map((k) => ({
+          name: k
+        }))
+      ];
+      splitDataSources[val].primary.data.columns = [[...columns[0]]];
+      dataSourceKeys.forEach((dsKey) => {
+        fields.forEach((field, idx) => {
+          if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+            splitDataSources[val].primary.data.columns.push([...columns[idx]]);
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
-        };
-        if (parentKeys) {
-          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
-            const newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
+        });
       });
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
+  var _a, _b, _c, _d;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
+  }
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    splitDataSources = {};
+    const splitByFieldIdx = splitByFields.findIndex((f) => f === splitBy);
+    const otherSplitBy = splitByFields.filter((f) => f !== splitBy);
+    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
+    const nonDataSourceAggregations = [];
+    if (!dataSourceKeys.length && fields[0].groupby_rank === "0" && fields.length && !fields[1].groupby_rank) {
+      for (let i = 1; i < fields.length; i += 1) {
+        nonDataSourceAggregations.push(fields[i].name);
+      }
     }
-    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
-      themeFunc
-    }));
-    let dataSourceMetadata = {};
-    const OptionKey = "paginateDataSourceKey";
-    const paginateDataSourceKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || "primary";
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
-      const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
-      const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
-      const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
-      const sortParams = getSortingParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
+    if (splitByFieldIdx === 0) {
+      const valueKeys = (0, lodash_exports.cloneDeep)(columns[0]);
+      valueKeys.forEach((val, idx) => {
+        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[val].primary.data.fields = [];
+        if (otherSplitBy.length) {
+          splitDataSources[val].primary.data.fields = [{ name: otherSplitBy[0] }];
+        }
+        if (dataSourceKeys.length) {
+          const columnValues = [[]];
+          splitDataSources[val].primary.data.fields = [
+            ...splitDataSources[val].primary.data.fields,
+            ...dataSourceKeys.map((k) => ({
+              name: k
+            }))
+          ];
+          dataSourceKeys.forEach(() => {
+            columnValues.push([]);
+          });
+          for (let i = 1; i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); i += 1) {
+            columnValues[0].push(
+              fields[i].splitby_value ? fields[i].splitby_value : fields[i].name
+            );
+            dataSourceKeys.forEach((dskey, dsIndx) => {
+              const mul = (fields.length - 1) / dataSourceKeys.length;
+              columnValues[dsIndx + 1].push(columns[i + dsIndx * mul][idx]);
+            });
+          }
+          splitDataSources[val].primary.data.columns = columnValues;
+        } else if (nonDataSourceAggregations.length) {
+          const columnValues = [];
+          fields.forEach((aggregationField, fieldIdx) => {
+            if (fieldIdx > 0) {
+              splitDataSources[val].primary.data.fields.push(aggregationField);
+              columnValues.push([columns[fieldIdx][idx]]);
+            }
+          });
+          splitDataSources[val].primary.data.columns = columnValues;
+        }
       });
-      const paginatorParams = getPaginationParams({
-        requestParams,
-        meta,
-        onRequestParamsChange: handleRequestParamsChange
+    } else {
+      const valueKeys = [];
+      for (let i = 1; i < fields.length; i += 1) {
+        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
+      }
+      valueKeys.forEach((val) => {
+        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+        );
+        splitDataSources[val].primary.data.fields = [
+          { name: otherSplitBy[0] },
+          ...dataSourceKeys.map((k) => ({
+            name: k
+          }))
+        ];
+        splitDataSources[val].primary.data.columns = [[...columns[0]]];
+        dataSourceKeys.forEach((dsKey) => {
+          fields.forEach((field, idx) => {
+            if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
+              splitDataSources[val].primary.data.columns.push([...columns[idx]]);
+            }
+          });
+        });
       });
-      dataSourceMetadata = {
-        sortParams,
-        paginatorParams
-      };
     }
-    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ react_exports.createElement(
-      SanitizedReactViz,
-      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
-        mode,
-        width,
-        height
-      }, downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
-    );
-  };
-  DashboardViz.propTypes = __spreadValues(__spreadValues({}, SplunkVisualization_default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = __spreadProps(__spreadValues(__spreadValues({}, SplunkVisualization_default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
-  });
-  DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
+};
+var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
+  var _a, _b, _c, _d, _e, _f;
+  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
+  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
+  let splitDataSources = null;
+  let splitByFields = [];
+  let errorCode = null;
+  if (typeof fields[0] !== "string") {
+    splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
+  }
+  const splitByIndex = fields == null ? void 0 : fields.findIndex(
+    (field) => field === splitBy || field.name === splitBy
   );
+  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
+    const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
+    splitDataSources = {};
+    splitByColumn.forEach((val, idx) => {
+      if (!splitDataSources[val]) {
+        splitDataSources[val] = [idx];
+      } else {
+        splitDataSources[val].push(idx);
+      }
+    });
+    const cloneFields = (0, lodash_exports.cloneDeep)(fields);
+    cloneFields.splice(splitByIndex, 1);
+    const valueKeys = Object.keys(splitDataSources);
+    valueKeys.forEach((val) => {
+      const valIndices = (0, lodash_exports.cloneDeep)(splitDataSources[val]);
+      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
+        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
+      );
+      splitDataSources[val].primary.data.fields = cloneFields;
+      splitDataSources[val].primary.data.columns = [];
+      columns.forEach((col, idx) => {
+        if (idx !== splitByIndex) {
+          const newCol = valIndices.map((valIdx) => col[valIdx]);
+          splitDataSources[val].primary.data.columns.push(newCol);
+        }
+      });
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
+  }
+  return { splitDataSources, errorCode };
 };
-var withDashboardViz_default = withDashboardViz;
-
-// esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
-var PresetPalettes_exports = {};
-__export(PresetPalettes_exports, {
-  default: () => PresetPalettes_default
-});
-var defaultImport37 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
-
-// esm-externals:@splunk/themes/pick
-var pick_exports2 = {};
-__export(pick_exports2, {
-  default: () => pick_default2
-});
-var defaultImport38 = __toESM(require("@splunk/themes/pick"));
-__reExport(pick_exports2, require("@splunk/themes/pick"));
-var pick_default2 = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
-
-// esm-externals:@splunk/visualizations-shared/configUtils
-var configUtils_exports = {};
-__export(configUtils_exports, {
-  default: () => configUtils_default
-});
-var defaultImport39 = __toESM(require("@splunk/visualizations-shared/configUtils"));
-__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
-
-// src/common/configContext/singleValueContext.ts
-var defaultContext = {
-  trendColorConfig: [
-    {
-      to: 0,
-      value: "#9E2520"
-    },
-    {
-      from: 0,
-      value: "#1C6B2D"
+var getTrellisDataSourcesBySplitMode = (splitMode, dataSources, trellisSplitBy) => {
+  let result = null;
+  try {
+    if (splitMode === trellisUtils_exports.TIMECHART) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeTimechart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_exports.STATS) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsStats(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.STATS);
+    } else if (splitMode === trellisUtils_exports.CHART) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeChart(dataSources, trellisSplitBy);
+    } else if (splitMode === trellisUtils_exports.UNKNOWN) {
+      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsUnknown(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.UNKNOWN);
     }
-  ],
-  majorColorConfig: [
-    { to: 20, value: "#D41F1F" },
-    { from: 20, to: 40, value: "#D94E17" },
-    { from: 40, to: 60, value: "#CBA700" },
-    { from: 60, to: 80, value: "#669922" },
-    { from: 80, value: "#118832" }
-  ],
-  majorColorMatchConfig: [{ match: "", value: "#5C33FF" }]
+  } catch (ex) {
+    console.error("getTrellisDataSourcesBySplitMode ", ex);
+    result = { splitDataSources: null, errorCode: "UNKNOWN" };
+  }
+  return result;
+};
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+var calculateSharedMinMax = (splitData) => {
+  let max = -Infinity;
+  let min = Infinity;
+  Object.keys(splitData).forEach((splitByKey) => {
+    const datasources = splitData[splitByKey];
+    Object.keys(datasources).forEach((datasourceName) => {
+      const dataColumns = datasources[datasourceName].data.columns;
+      dataColumns.forEach((column) => {
+        column.forEach((point) => {
+          const pointNumber = Number(point);
+          if (pointNumber > max) {
+            max = pointNumber;
+          }
+          if (pointNumber < min) {
+            min = pointNumber;
+          }
+        });
+      });
+    });
+  });
+  return [min, max];
+};
+var determineMinMax = (splitData, trellisSharedScale, yAxisMin, yAxisMax, stackMode) => {
+  if (!trellisSharedScale || stackMode === "stacked100" || yAxisMin !== "auto" && yAxisMax !== "auto")
+    return [yAxisMin, yAxisMax];
+  const [sharedMin, sharedMax] = calculateSharedMinMax(splitData);
+  const shouldUseSharedMax = sharedMax !== -Infinity && yAxisMax === "auto";
+  const shouldUseSharedMin = sharedMin !== Infinity && yAxisMin === "auto";
+  return [shouldUseSharedMin ? sharedMin : yAxisMin, shouldUseSharedMax ? sharedMax : yAxisMax];
 };
 
-// src/common/editorConfig/StaticMajorAndTrendLayout.js
-var StaticMajorAndTrendLayout = [
-  [
-    {
-      label: (0, i18n_exports._)("Unit position"),
-      // todo: we need a new editor combining unit and position
-      option: "unitPosition",
-      editor: "editor.select",
-      editorProps: {
-        values: [
-          { label: (0, i18n_exports._)("Before"), value: "before" },
-          { label: (0, i18n_exports._)("After"), value: "after" }
-        ]
-      },
-      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+// src/common/withDashboardViz.tsx
+var withDashboardViz = (opts) => {
+  const {
+    ReactViz,
+    vizConfig,
+    computeVizProps: computeVizProps2 = () => {
     },
-    {
-      label: (0, i18n_exports._)("Unit label"),
-      option: "unit",
-      editor: "editor.text",
-      showEditor: ({ options }) => options.showValue || options.showValue === void 0
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Precision"),
-      option: "numberPrecision",
-      editor: "editor.number",
-      editorProps: {
-        min: 0,
-        max: 20
-      },
-      showEditor: ({ options }) => options.showValue || options.showValue === void 0
-    }
-  ]
-];
-var StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
-
-// src/common/editorConfig/StaticBackgroundColorEditor.js
-var StaticBackgroundColorEditor = {
-  label: (0, i18n_exports._)("Background color"),
-  option: "backgroundColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
-};
-var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
-
-// src/common/editorConfig/StaticIconColorEditor.js
-var StaticIconColorEditor = [
-  {
-    label: (0, i18n_exports._)("Icon"),
-    option: "iconColor",
-    editor: "editor.color",
-    showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.iconColor),
-    editorProps: {
-      labelPosition: "top",
-      value: null,
-      palette: [null, ...colorConstants_exports.COLOR_EDITOR_PALETTE]
-    }
-  }
-];
-var StaticIconColorEditor_default = StaticIconColorEditor;
-
-// src/common/editorConfig/StaticMajorColorEditor.js
-var StaticMajorColorEditor = {
-  label: (0, i18n_exports._)("Major value"),
-  option: "majorColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.majorColor)
-};
-var StaticMajorColorEditor_default = StaticMajorColorEditor;
-
-// src/common/editorConfig/StaticTrendColorEditor.js
-var StaticTrendColorEditor = {
-  label: (0, i18n_exports._)("Trend value"),
-  option: "trendColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.trendColor),
-  isDisabled: ({ options }) => options.trendDisplay === "off"
-};
-var StaticTrendColorEditor_default = StaticTrendColorEditor;
-
-// src/common/editorConfig/DynamicMajorColorEditor.js
-var getDynamicMajorColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
-  label: (0, i18n_exports._)("Major value"),
-  option: "majorColor",
-  context: "majorColorEditorConfig",
-  editor: "editor.dynamicColor",
-  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.majorColor),
-  editorProps: {
-    labelPosition: "top",
-    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: major value"),
-    formatters: [
-      {
-        label: (0, i18n_exports._)("Ranges"),
-        value: "rangeValue",
-        defaults: {
-          majorValue: defaultContext2.majorColorConfig
-        }
-      },
-      {
-        label: (0, i18n_exports._)("Matches"),
-        value: "matchValue",
-        defaults: {
-          majorValue: defaultContext2.majorColorMatchConfig
-        }
+    computeVizPropsBeforeEval: computeVizPropsBeforeEval2 = () => {
+    },
+    disableEditModeCover,
+    useIconPlaceholder
+  } = opts;
+  const SanitizedReactViz = (0, SanitizeProps_exports.withSanitizedProps)(ReactViz);
+  const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(vizConfig.optionsSchema, "default");
+  const DashboardViz = (props) => {
+    var _a;
+    const {
+      mode,
+      hasEventHandlers,
+      dataSources,
+      // type of { [key: string]: DataSource }
+      options,
+      context = {},
+      width,
+      height,
+      onComputedProps,
+      onEventTrigger,
+      theme,
+      onRequestParamsChange
+    } = props;
+    const { serializedTimezone } = react_exports.useContext(TimezoneContext_default);
+    if (serializedTimezone) {
+      if (!moment_default.getDefaultSplunkTimezone()) {
+        moment_default.setDefaultSplunkTimezone(serializedTimezone);
       }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Major value"),
-        value: "majorValue"
+    }
+    const themeFunc = (themeVar) => {
+      var _a2, _b;
+      return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
+    };
+    const bgColorFromTheme = themeFunc("defaultBackgroundColor");
+    const {
+      family: currentThemeFamily,
+      colorScheme: currentThemeColorScheme,
+      density: currentThemeDensity
+    } = getSettingsFromThemedProps_default({ theme });
+    let evaluatedOptions = {};
+    const [evaluatedOptionsAsync, setEvaluatedOptionsAsync] = react_exports.useState({});
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const [visualizationID] = react_exports.useState(`${vizConfig.name} - ${(0, id_exports.createGUID)()}`);
+    const [dataSourcesInState, setDataSourcesInState] = react_exports.useState({});
+    const [dataFramesInState, setDataFramesInState] = react_exports.useState();
+    const [useAsyncEvaluatedOptions, setUseAsyncEvaluatedOptions] = react_exports.useState(
+      Boolean(getFeatureFlag(featureFlagContext, "visualizations_useWebWorkersForDSL"))
+    );
+    const isDownsamplingEnabledByFeatureFlag = Boolean(
+      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
+    );
+    const isTrellisFeatureFlagOn2 = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    const isTrellisOn = isTrellisFeatureFlagOn2 && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isMounted = react_exports.useRef(true);
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval2(options)) != null ? _a2 : {};
+      return {
+        context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
+    const [threshold, setThreshold] = react_exports.useState(Number(width));
+    const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
+      setThreshold(newThreshold);
+    }, []);
+    const isDownsamplingEnabled = react_exports.useMemo(() => {
+      return isDownsamplingEnabledByFeatureFlag && isDownsamplingEnabledForViz({ vizConfig });
+    }, [isDownsamplingEnabledByFeatureFlag]);
+    const downsamplingProps = react_exports.useMemo(() => {
+      if (!isDownsamplingEnabled) {
+        return {};
       }
-    ],
-    defaultPalettesConfig: defaultPalettesConfig2
-  }
-});
-
-// src/common/editorConfig/DynamicTrendColorEditor.js
-var getDynamicTrendColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
-  label: (0, i18n_exports._)("Trend value"),
-  option: "trendColor",
-  context: "trendColorEditorConfig",
-  editor: "editor.dynamicColor",
-  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.trendColor),
-  editorProps: {
-    labelPosition: "top",
-    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: trend value"),
-    formatters: [
-      {
-        label: (0, i18n_exports._)("Ranges"),
-        value: "rangeValue",
-        defaults: {
-          trendValue: defaultContext2.trendColorConfig
+      return {
+        onDownsamplingThresholdChange,
+        originalDataSources: dataSources
+      };
+    }, [dataSources, isDownsamplingEnabled, onDownsamplingThresholdChange]);
+    const downsampledDataSources = useDownsampleDataSources_default({
+      options: optionsToEvaluate.options,
+      context: optionsToEvaluate.context,
+      dataSources,
+      threshold,
+      isDownsamplingEnabled
+    });
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          const asyncDynamicOptionsEvaluatorParams = {
+            visualizationID,
+            props,
+            options: optionsToEvaluate,
+            dataSources: downsampledDataSources,
+            theme: vizConfig.themes,
+            bypassCloneDeepOptionScope: Boolean(
+              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+            ),
+            lazyLoadingDataFrame: Boolean(
+              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+            )
+          };
+          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(() => {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
+          });
+        } else {
+          let dataFrames = dataFramesInState;
+          if (downsampledDataSources !== dataSourcesInState) {
+            setDataSourcesInState(downsampledDataSources);
+            dataFrames = Options_exports.Options.dataFrameFromDataSource(
+              downsampledDataSources,
+              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+            );
+            setDataFramesInState(dataFrames);
+          }
+          const result = Options_exports.Options.evaluate(
+            optionsToEvaluate,
+            downsampledDataSources,
+            themeFunc,
+            dataFrames,
+            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+          );
+          return result;
         }
+      } catch (e) {
+        console.error(`unexpected error evaluating options: ${e.message}`);
+        return {};
       }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Trend value"),
-        value: "trendValue"
-      }
-    ],
-    defaultPalettesConfig: defaultPalettesConfig2
-  }
-});
-
-// src/common/editorConfig/DynamicBackgroundColorEditor.js
-var getDynamicBackgroundColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
-  label: (0, i18n_exports._)("Background color"),
-  option: "backgroundColor",
-  context: "backgroundColorEditorConfig",
-  editor: "editor.dynamicColor",
-  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.backgroundColor),
-  editorProps: {
-    labelPosition: "top",
-    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: background"),
-    formatters: [
-      {
-        label: (0, i18n_exports._)("Ranges"),
-        value: "rangeValue",
-        defaults: {
-          majorValue: defaultContext2.majorColorConfig,
-          trendValue: defaultContext2.trendColorConfig
-        }
-      },
-      {
-        label: (0, i18n_exports._)("Matches"),
-        value: "matchValue",
-        defaults: {
-          majorValue: defaultContext2.majorColorMatchConfig
-        }
-      }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Major Value"),
-        value: "majorValue"
-      },
-      {
-        label: (0, i18n_exports._)("Trend"),
-        value: "trendValue"
-      }
-    ],
-    defaultPalettesConfig: defaultPalettesConfig2
-  }
-});
-
-// src/common/editorConfig/TrellisEditors.ts
-var TrellisEditorConfig = [
-  [
-    {
-      label: (0, i18n_exports._)("Trellis layout"),
-      option: "splitByLayout",
-      editor: "editor.toggle",
-      showEditor: () => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Split by"),
-      option: "trellisSplitBy",
-      editor: "editor.trellisSplitBy",
-      editorProps: {
-        dataSourceKey: "primary"
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Number of columns"),
-      option: "trellisColumns",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      placeholder: (0, i18n_exports._)("Auto"),
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Min column width"),
-      option: "trellisMinColumnWidth",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    },
-    {
-      label: (0, i18n_exports._)("Row height"),
-      option: "trellisRowHeight",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Max number of components per page"),
-      option: "trellisPageCount",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ]
-];
-var TrellisBackgroundColorEditor = {
-  label: (0, i18n_exports._)("Trellis background"),
-  option: "trellisBackgroundColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => {
-    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-  }
-};
-
-// src/common/utils/configUtils.ts
-function enhanceConfig(vizConfig) {
-  const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config3) => {
-      return __spreadProps(__spreadValues({}, config3), { open: config3.open || false });
-    }
-  );
-  return enhancedConfig;
-}
-function hasCompatibleContexts(vizContext, presetContext) {
-  const presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(
-    (contextKey) => presetContext[contextKey] === void 0 && vizContext[contextKey] === void 0 || presetContext[contextKey] !== void 0 && vizContext[contextKey] !== void 0
-  );
-}
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  const presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(
-    (optionKey) => (0, configUtils_exports.isDynamicOption)(presetOptions[optionKey]) === (0, configUtils_exports.isDynamicOption)(vizOptions[optionKey])
-  );
-}
-function getInitialPreset(vizContext, vizOptions, presets2) {
-  return presets2.find((preset) => {
-    const presetContext = (0, lodash_exports.get)(preset, ["value", "context"], {});
-    const presetOptions = (0, lodash_exports.get)(preset, ["value", "options"], {});
-    const presetContextKeys = Object.keys(presetContext);
-    const presetOptionKeys = Object.keys(presetOptions);
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
-
-// src/SingleValueIcon/config.ts
-var dataContract = {
-  requiredDataSources: [
-    {
-      name: "primary",
-      description: "DataSource that powers the visualization"
-    }
-  ],
-  optionalDataSources: [],
-  initialRequestParams: {
-    primary: { offset: 0, count: 1e4 }
-  }
-};
-var size = {
-  initialWidth: 250,
-  initialHeight: 250
-};
-var basePresetContext = {
-  iconColorEditorConfig: void 0,
-  majorColorEditorConfig: void 0,
-  trendColorEditorConfig: void 0,
-  backgroundColorEditorConfig: void 0
-};
-var basePresetOptions = {
-  iconColor: void 0,
-  majorColor: void 0,
-  trendColor: void 0,
-  backgroundColor: void 0
-};
-var presets = [
-  {
-    // dummy context variables to allow for resetting of unused context states
-    label: (0, i18n_exports._)("None"),
-    name: "singleValueIcon.none",
-    value: {
-      context: __spreadValues({}, basePresetContext),
-      options: __spreadValues({}, basePresetOptions)
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Icon"),
-    name: "singleValueIcon.icon",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        iconColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Major value"),
-    name: "singleValueIcon.majorValue",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        majorColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Trend value"),
-    name: "singleValueIcon.trend",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        trendColorEditorConfig: defaultContext.trendColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Icon and Major value"),
-    name: "singleValueIcon.iconAndMajorValue",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        iconColorEditorConfig: defaultContext.majorColorConfig,
-        majorColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)",
-        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Background"),
-    name: "singleValueIcon.background",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        backgroundColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        backgroundColor: "> majorValue | rangeValue(backgroundColorEditorConfig)"
-      })
+      return {};
+    }, [
+      currentThemeFamily,
+      currentThemeColorScheme,
+      currentThemeDensity,
+      optionsToEvaluate,
+      downsampledDataSources,
+      serializedTimezone,
+      useAsyncEvaluatedOptions
+    ]);
+    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    let clonedEvaluatedOptions = evaluatedOptionsToUse;
+    if (isTrellisOn) {
+      clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
+        backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
+      });
     }
-  }
-];
-var themes = {
-  defaultFontColor: (props) => pick_default2({
-    enterprise: {
-      dark: variables_default.textColor(props),
-      light: variables_default.gray20(props)
-    },
-    prisma: variables_default.contentColorActive(props)
-  })(props),
-  defaultBlockFontColor: (props) => pick_default2({
-    enterprise: variables_default.white(props),
-    prisma: variables_default.contentColorActive(props)
-  })(props)
-};
-var editorConfig = [
-  {
-    label: (0, i18n_exports._)("Data configurations"),
-    layout: [
-      [
-        {
-          label: (0, i18n_exports._)("Value"),
-          editor: "editor.columnSelector",
-          option: "majorValue",
-          context: "valuesContext",
-          editorProps: {
-            dataSourceKey: "primary",
-            prepareValue: (definition) => {
-              const {
-                options: { majorValue: baseSPL }
-              } = definition;
-              return {
-                context: {},
-                options: {
-                  majorValue: `${baseSPL} | lastPoint()`,
-                  trendValue: `${baseSPL} | delta(-2)`
-                }
-              };
-            }
-          },
-          isDisabled: ({ options }) => options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis
+    react_exports.useEffect(() => {
+      onComputedProps(clonedEvaluatedOptions);
+    });
+    react_exports.useEffect(() => {
+      return () => {
+        if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
+          async_dynamic_options_evaluator_default.reset(visualizationID);
         }
-      ]
-    ]
-  },
-  {
-    label: (0, i18n_exports._)("Data display"),
-    layout: [
-      [
+      };
+    }, []);
+    const { requiredProps = [], supports } = vizConfig;
+    const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
+    if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
+      return /* @__PURE__ */ react_exports.createElement(
+        MissingPropsMessage_default,
         {
-          label: (0, i18n_exports._)("Show major and trend value"),
-          option: "showValue",
-          editor: "editor.toggle"
+          "data-test": "missing-props-message",
+          width,
+          height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
         }
-      ],
-      ...StaticMajorAndTrendLayout_default,
-      [
-        {
-          label: (0, i18n_exports._)("Trend display"),
-          option: "trendDisplay",
-          editor: "editor.select",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Percent"), value: "percent" },
-              { label: (0, i18n_exports._)("Absolute"), value: "absolute" },
-              { label: (0, i18n_exports._)("Off"), value: "off" }
-            ]
-          },
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+      );
+    }
+    const eventCallbackProps = {};
+    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
+      const supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach((eventName) => {
+        const { parentKeys, payloadKeys } = supportedEvents[eventName];
+        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+        let payload = {};
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach((p) => {
+            payload[p] = evaluatedOptionsToUse[p];
+          });
         }
-      ],
-      ...TrellisEditorConfig
-    ]
-  },
-  {
-    label: (0, i18n_exports._)("Color and style"),
-    layout: [
-      [
-        {
-          label: (0, i18n_exports._)("Dynamic elements"),
-          key: "presetSelector",
-          editor: "editor.presetSelector",
-          editorProps: {
-            presets,
-            value: ({ context, options }) => {
-              const initialPreset = getInitialPreset(context, options, presets);
-              return initialPreset && initialPreset.label || null;
-            }
+        eventCallbackProps[eventCallbackPropName] = (ev) => {
+          if (ev && ev.payload) {
+            payload = ev.payload;
           }
-        }
-      ],
-      StaticIconColorEditor_default,
-      [
-        {
-          label: (0, i18n_exports._)("Icon"),
-          option: "iconColor",
-          context: "iconColorEditorConfig",
-          editor: "editor.dynamicColor",
-          showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.iconColor),
-          editorProps: {
-            labelPosition: "top",
-            flyoutTitle: "Dynamic coloring: icon",
-            formatters: [
-              {
-                label: (0, i18n_exports._)("Ranges"),
-                value: "rangeValue",
-                defaults: {
-                  trendValue: defaultContext.trendColorConfig,
-                  majorValue: defaultContext.majorColorConfig
-                }
-              },
-              {
-                label: (0, i18n_exports._)("Matches"),
-                value: "matchValue",
-                defaults: {
-                  majorValue: defaultContext.majorColorMatchConfig
-                }
-              }
-            ],
-            dataSelectors: [
-              {
-                label: (0, i18n_exports._)("Major value"),
-                value: "majorValue"
-              },
-              {
-                label: (0, i18n_exports._)("Trend"),
-                value: "trendValue"
-              }
-            ],
-            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+        };
+        if (parentKeys) {
+          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+            const newObject = {};
+            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
+            eventCallbackProps[eventCallbackPropName] = newObject;
           }
         }
-      ],
-      [
-        __spreadProps(__spreadValues({}, StaticMajorColorEditor_default), {
-          editorProps: {
-            themes
-          }
-        })
-      ],
-      [getDynamicMajorColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
-      [
-        __spreadProps(__spreadValues({}, StaticTrendColorEditor_default), {
-          editorProps: {
-            themes
-          }
-        })
-      ],
-      [getDynamicTrendColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
-      [
-        __spreadProps(__spreadValues({}, StaticBackgroundColorEditor_default), {
-          editorProps: {
-            themes
-          }
-        })
-      ],
-      [
-        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
-          editorProps: {
-            themes
-          }
-        })
-      ],
-      [getDynamicBackgroundColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
-      [
-        {
-          label: (0, i18n_exports._)("Major value size (px)"),
-          option: "majorFontSize",
-          editor: "editor.number",
-          editorProps: {
-            min: 1
-          },
-          placeholder: (0, i18n_exports._)("Auto"),
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0
-        },
-        {
-          label: (0, i18n_exports._)("Trend value size (px)"),
-          option: "trendFontSize",
-          editor: "editor.number",
-          editorProps: {
-            min: 1
-          },
-          placeholder: (0, i18n_exports._)("Auto"),
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0,
-          isDisabled: ({ options }) => options.trendDisplay === "off"
+      });
+    }
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+      themeFunc
+    }));
+    let dataSourceMetadata = {};
+    const OptionKey = "paginateDataSourceKey";
+    const paginateDataSourceKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || "primary";
+    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+      const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
+      const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
+      const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
+      const sortParams = getSortingParams({
+        requestParams,
+        meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      const paginatorParams = getPaginationParams({
+        requestParams,
+        meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        sortParams,
+        paginatorParams
+      };
+    }
+    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ react_exports.createElement(
+      SanitizedReactViz,
+      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        mode,
+        width,
+        height
+      }, downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
+    );
+  };
+  DashboardViz.propTypes = __spreadValues(__spreadValues({}, SplunkVisualization_default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = __spreadProps(__spreadValues(__spreadValues({}, SplunkVisualization_default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  });
+  DashboardViz.config = vizConfig;
+  return (0, styled_components_exports.withTheme)(
+    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  );
+};
+var withDashboardViz_default = withDashboardViz;
+
+// esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
+var PresetPalettes_exports = {};
+__export(PresetPalettes_exports, {
+  default: () => PresetPalettes_default
+});
+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 defaultImport40 ? defaultImport40.default : defaultImport40;
+
+// esm-externals:@splunk/themes/pick
+var pick_exports2 = {};
+__export(pick_exports2, {
+  default: () => pick_default2
+});
+var defaultImport41 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports2, require("@splunk/themes/pick"));
+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 defaultImport42 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
+var configUtils_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+
+// src/common/configContext/singleValueContext.ts
+var defaultContext = {
+  trendColorConfig: [
+    {
+      to: 0,
+      value: "#9E2520"
+    },
+    {
+      from: 0,
+      value: "#1C6B2D"
+    }
+  ],
+  majorColorConfig: [
+    { to: 20, value: "#D41F1F" },
+    { from: 20, to: 40, value: "#D94E17" },
+    { from: 40, to: 60, value: "#CBA700" },
+    { from: 60, to: 80, value: "#669922" },
+    { from: 80, value: "#118832" }
+  ],
+  majorColorMatchConfig: [{ match: "", value: "#5C33FF" }],
+  trendValueCopy: "> trendValue",
+  divisor: "> majorValue | subtract(trendValueCopy) | divideBy(100)",
+  trendValuePercent: "> trendValue | divideBy(divisor)"
+};
+
+// src/common/editorConfig/StaticMajorAndTrendLayout.js
+var StaticMajorAndTrendLayout = [
+  [
+    {
+      label: (0, i18n_exports._)("Unit position"),
+      // todo: we need a new editor combining unit and position
+      option: "unitPosition",
+      editor: "editor.select",
+      editorProps: {
+        values: [
+          { label: (0, i18n_exports._)("Before"), value: "before" },
+          { label: (0, i18n_exports._)("After"), value: "after" }
+        ]
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    },
+    {
+      label: (0, i18n_exports._)("Unit label"),
+      option: "unit",
+      editor: "editor.text",
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Precision"),
+      option: "numberPrecision",
+      editor: "editor.number",
+      editorProps: {
+        min: 0,
+        max: 20
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    }
+  ]
+];
+var StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
+
+// src/common/editorConfig/StaticBackgroundColorEditor.js
+var StaticBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
+};
+var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
+
+// src/common/editorConfig/StaticIconColorEditor.js
+var StaticIconColorEditor = [
+  {
+    label: (0, i18n_exports._)("Icon"),
+    option: "iconColor",
+    editor: "editor.color",
+    showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.iconColor),
+    editorProps: {
+      labelPosition: "top",
+      value: null,
+      palette: [null, ...colorConstants_exports.COLOR_EDITOR_PALETTE]
+    }
+  }
+];
+var StaticIconColorEditor_default = StaticIconColorEditor;
+
+// src/common/editorConfig/StaticMajorColorEditor.js
+var StaticMajorColorEditor = {
+  label: (0, i18n_exports._)("Major value"),
+  option: "majorColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.majorColor)
+};
+var StaticMajorColorEditor_default = StaticMajorColorEditor;
+
+// src/common/editorConfig/StaticTrendColorEditor.js
+var StaticTrendColorEditor = {
+  label: (0, i18n_exports._)("Trend value"),
+  option: "trendColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.trendColor),
+  isDisabled: ({ options }) => options.trendDisplay === "off"
+};
+var StaticTrendColorEditor_default = StaticTrendColorEditor;
+
+// src/common/editorConfig/DynamicMajorColorEditor.js
+var getDynamicMajorColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Major value"),
+  option: "majorColor",
+  context: "majorColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.majorColor),
+  editorProps: {
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: major value"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorConfig
+        }
+      },
+      {
+        label: (0, i18n_exports._)("Matches"),
+        value: "matchValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorMatchConfig
         }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Major value abbreviation"),
-          option: "shouldAbbreviateMajorValue",
-          editor: "editor.checkbox"
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Major value"),
+        value: "majorValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
+  }
+});
+
+// src/common/editorConfig/DynamicTrendColorEditor.js
+var getDynamicTrendColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Trend value"),
+  option: "trendColor",
+  context: "trendColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.trendColor),
+  editorProps: {
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: trend value"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          trendValue: defaultContext2.trendColorConfig
         }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Trend value abbreviation"),
-          option: "shouldAbbreviateTrendValue",
-          editor: "editor.checkbox"
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Trend value"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
+  }
+});
+
+// src/common/editorConfig/DynamicBackgroundColorEditor.js
+var getDynamicBackgroundColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  context: "backgroundColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.backgroundColor),
+  editorProps: {
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: background"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorConfig,
+          trendValue: defaultContext2.trendColorConfig
         }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Alignment"),
-          editor: "editor.radioBar",
-          option: "align",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Left"), value: "left" },
-              { label: (0, i18n_exports._)("Center"), value: "center" },
-              { label: (0, i18n_exports._)("Right"), value: "right" }
-            ]
-          },
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+      },
+      {
+        label: (0, i18n_exports._)("Matches"),
+        value: "matchValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorMatchConfig
         }
-      ]
-    ]
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Major Value"),
+        value: "majorValue"
+      },
+      {
+        label: (0, i18n_exports._)("Trend"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
   }
+});
+
+// src/common/editorConfig/TrellisEditors.ts
+var isTrellisFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ]
 ];
-var config = {
-  /**
-   * unique viz key
-   */
-  key: "splunk.singlevalueicon",
-  /**
-   * viz name
-   */
-  name: (0, i18n_exports._)("Single value icon"),
-  category: "Single Value" /* SINGLE_VALUE */,
-  /**
-   * viz icon
-   */
-  icon: null,
-  dataContract,
-  size,
-  defaultContext,
-  optionsSchema: visualization_schemas_exports.singleValueIconOptionsSchema,
-  editorConfig,
-  events: {
-    "value.click": {
-      description: "trigger when user clicks major value or icon",
-      payloadKeys: ["majorValue", "trendValue", "icon"]
+var TimechartTrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn,
+      // add help text for timecharts
+      editorProps: {
+        help: (0, i18n_exports._)(
+          "Y2-axis and overlay field configurations are not supported when trellis is enabled."
+        ),
+        helpFormat: "under"
+      }
     }
-  },
-  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */, "trellis" /* TRELLIS */],
-  themes
+  ],
+  ...TrellisEditorConfig.slice(1),
+  [
+    {
+      label: (0, i18n_exports._)("Shared y-axis scale"),
+      option: "trellisSharedScale",
+      editor: "editor.checkbox",
+      showEditor: isTrellisEnabled
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: isTrellisEnabled
 };
-var config_default = enhanceConfig(config);
-
-// esm-externals:@splunk/react-ui/Paginator
-var Paginator_exports = {};
-__export(Paginator_exports, {
-  default: () => Paginator_default
-});
-var defaultImport40 = __toESM(require("@splunk/react-ui/Paginator"));
-__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport41 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
-
-// esm-externals:@splunk/themes/useSplunkTheme
-var useSplunkTheme_exports = {};
-__export(useSplunkTheme_exports, {
-  default: () => useSplunkTheme_default
-});
-var defaultImport42 = __toESM(require("@splunk/themes/useSplunkTheme"));
-__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
-// esm-externals:@splunk/visualizations-shared/trellisUtils
-var trellisUtils_exports = {};
-__export(trellisUtils_exports, {
-  default: () => trellisUtils_default
-});
-var defaultImport43 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
-__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+// src/common/utils/configUtils.ts
+function enhanceConfig(vizConfig) {
+  const enhancedConfig = __spreadValues({}, vizConfig);
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
+    (config3) => {
+      return __spreadProps(__spreadValues({}, config3), { open: config3.open || false });
+    }
+  );
+  return enhancedConfig;
+}
+function hasCompatibleContexts(vizContext, presetContext) {
+  const presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(
+    (contextKey) => presetContext[contextKey] === void 0 && vizContext[contextKey] === void 0 || presetContext[contextKey] !== void 0 && vizContext[contextKey] !== void 0
+  );
+}
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  const presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(
+    (optionKey) => (0, configUtils_exports.isDynamicOption)(presetOptions[optionKey]) === (0, configUtils_exports.isDynamicOption)(vizOptions[optionKey])
+  );
+}
+function getInitialPreset(vizContext, vizOptions, presets2) {
+  return presets2.find((preset) => {
+    const presetContext = (0, lodash_exports.get)(preset, ["value", "context"], {});
+    const presetOptions = (0, lodash_exports.get)(preset, ["value", "options"], {});
+    const presetContextKeys = Object.keys(presetContext);
+    const presetOptionKeys = Object.keys(presetOptions);
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
 
-// src/common/utils/trellisUtils.ts
-var AGGREGATIONS = "aggregations";
-var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let errorCode = null;
-  if (fields && fields.length) {
-    splitDataSources = {};
-    for (let i = 0; i < fields.length; i += 1) {
-      const fieldName = fields[i].name;
-      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
-        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[fieldName].primary.data.fields = [fields[i]];
-        splitDataSources[fieldName].primary.data.columns = [columns[i]];
-      }
+// src/SingleValueIcon/config.ts
+var dataContract = {
+  requiredDataSources: [
+    {
+      name: "primary",
+      description: "DataSource that powers the visualization"
     }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
+  ],
+  optionalDataSources: [],
+  initialRequestParams: {
+    primary: { offset: 0, count: 1e4 }
   }
-  return { splitDataSources, errorCode };
 };
-var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
-  }
-  if (splitByFields && splitByFields.length > 0) {
-    splitDataSources = {};
-    splitByFields.forEach((splitByField) => {
-      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[splitByField].primary.data.fields = [fields[0]];
-      splitDataSources[splitByField].primary.data.columns = [columns[0]];
-      fields.forEach((field, idx) => {
-        const fieldName = field == null ? void 0 : field.name;
-        if (fieldName !== "_time" && !(fieldName == null ? void 0 : fieldName.startsWith("_")) && field.data_source === splitByField) {
-          splitDataSources[splitByField].primary.data.fields.push(field);
-          splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
-        }
-      });
-    });
-  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
-    splitDataSources = {};
-    for (let i = 1; i < fields.length; i += 1) {
-      const fieldName = fields[i].name;
-      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
-        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[fieldName].primary.data.fields = [fields[0], fields[i]];
-        splitDataSources[fieldName].primary.data.columns = [columns[0], columns[i]];
-      }
+var size = {
+  initialWidth: 250,
+  initialHeight: 250
+};
+var basePresetContext = {
+  iconColorEditorConfig: void 0,
+  majorColorEditorConfig: void 0,
+  trendColorEditorConfig: void 0,
+  backgroundColorEditorConfig: void 0
+};
+var basePresetOptions = {
+  iconColor: void 0,
+  majorColor: void 0,
+  trendColor: void 0,
+  backgroundColor: void 0
+};
+var presets = [
+  {
+    // dummy context variables to allow for resetting of unused context states
+    label: (0, i18n_exports._)("None"),
+    name: "singleValueIcon.none",
+    value: {
+      context: __spreadValues({}, basePresetContext),
+      options: __spreadValues({}, basePresetOptions)
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Icon"),
+    name: "singleValueIcon.icon",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        iconColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Major value"),
+    name: "singleValueIcon.majorValue",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        majorColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Trend value"),
+    name: "singleValueIcon.trend",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        trendColorEditorConfig: defaultContext.trendColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
+      })
     }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
-};
-var dataSourcesSplitByAggregationsStats = (dataSource) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysStats)(fields);
-  }
-  if (splitByFields && splitByFields.length > 0) {
-    splitDataSources = {};
-    splitByFields.forEach((splitByField) => {
-      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[splitByField].primary.data.fields = [fields[0]];
-      splitDataSources[splitByField].primary.data.columns = [columns[0]];
-      const idx = fields.findIndex((field) => field.name === splitByField);
-      if (idx > 0) {
-        splitDataSources[splitByField].primary.data.fields.push(fields[idx]);
-        splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
-      }
-    });
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
-};
-var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
-  var _a, _b, _c, _d, _e;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
-  }
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
-    splitDataSources = {};
-    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
-    const valueKeys = [];
-    for (let i = 1; i < fields.length; i += 1) {
-      if (!((_e = fields[i].name) == null ? void 0 : _e.startsWith("_"))) {
-        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
-      }
+  },
+  {
+    label: (0, i18n_exports._)("Icon and Major value"),
+    name: "singleValueIcon.iconAndMajorValue",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        iconColorEditorConfig: defaultContext.majorColorConfig,
+        majorColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        iconColor: "> majorValue | rangeValue(iconColorEditorConfig)",
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Background"),
+    name: "singleValueIcon.background",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        backgroundColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        backgroundColor: "> majorValue | rangeValue(backgroundColorEditorConfig)"
+      })
     }
-    valueKeys.forEach((val) => {
-      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[val].primary.data.fields = [
-        { name: fields[0].name },
-        ...dataSourceKeys.map((k) => ({
-          name: k
-        }))
-      ];
-      splitDataSources[val].primary.data.columns = [[...columns[0]]];
-      dataSourceKeys.forEach((dsKey) => {
-        fields.forEach((field, idx) => {
-          if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
-            splitDataSources[val].primary.data.columns.push([...columns[idx]]);
-          }
-        });
-      });
-    });
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
   }
-  return { splitDataSources, errorCode };
+];
+var themes = {
+  defaultFontColor: (props) => pick_default2({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.gray20(props)
+    },
+    prisma: variables_default.contentColorActive(props)
+  })(props),
+  defaultBlockFontColor: (props) => pick_default2({
+    enterprise: variables_default.white(props),
+    prisma: variables_default.contentColorActive(props)
+  })(props)
 };
-var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
-  }
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
-    splitDataSources = {};
-    const splitByFieldIdx = splitByFields.findIndex((f) => f === splitBy);
-    const otherSplitBy = splitByFields.filter((f) => f !== splitBy);
-    const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
-    const nonDataSourceAggregations = [];
-    if (!dataSourceKeys.length && fields[0].groupby_rank === "0" && fields.length && !fields[1].groupby_rank) {
-      for (let i = 1; i < fields.length; i += 1) {
-        nonDataSourceAggregations.push(fields[i].name);
-      }
-    }
-    if (splitByFieldIdx === 0) {
-      const valueKeys = (0, lodash_exports.cloneDeep)(columns[0]);
-      valueKeys.forEach((val, idx) => {
-        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[val].primary.data.fields = [];
-        if (otherSplitBy.length) {
-          splitDataSources[val].primary.data.fields = [{ name: otherSplitBy[0] }];
+var editorConfig = [
+  {
+    label: (0, i18n_exports._)("Data configurations"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Value"),
+          editor: "editor.columnSelector",
+          option: "majorValue",
+          context: "valuesContext",
+          editorProps: {
+            dataSourceKey: "primary",
+            prepareValue: (definition) => {
+              const {
+                options: { majorValue: baseSPL }
+              } = definition;
+              return {
+                context: {},
+                options: {
+                  majorValue: `${baseSPL} | lastPoint()`,
+                  trendValue: `${baseSPL} | delta(-2)`
+                }
+              };
+            }
+          },
+          isDisabled: ({ options }) => options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis
+        }
+      ]
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Data display"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Show major and trend value"),
+          option: "showValue",
+          editor: "editor.toggle"
+        }
+      ],
+      ...StaticMajorAndTrendLayout_default,
+      [
+        {
+          label: (0, i18n_exports._)("Trend display"),
+          option: "trendDisplay",
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Percent"), value: "percent" },
+              { label: (0, i18n_exports._)("Absolute"), value: "absolute" },
+              { label: (0, i18n_exports._)("Off"), value: "off" }
+            ]
+          },
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        }
+      ],
+      ...TrellisEditorConfig
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Color and style"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Dynamic elements"),
+          key: "presetSelector",
+          editor: "editor.presetSelector",
+          editorProps: {
+            presets,
+            value: ({ context, options }) => {
+              const initialPreset = getInitialPreset(context, options, presets);
+              return initialPreset && initialPreset.label || null;
+            }
+          }
+        }
+      ],
+      StaticIconColorEditor_default,
+      [
+        {
+          label: (0, i18n_exports._)("Icon"),
+          option: "iconColor",
+          context: "iconColorEditorConfig",
+          editor: "editor.dynamicColor",
+          showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.iconColor),
+          editorProps: {
+            labelPosition: "top",
+            flyoutTitle: "Dynamic coloring: icon",
+            formatters: [
+              {
+                label: (0, i18n_exports._)("Ranges"),
+                value: "rangeValue",
+                defaults: {
+                  trendValue: defaultContext.trendColorConfig,
+                  majorValue: defaultContext.majorColorConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Matches"),
+                value: "matchValue",
+                defaults: {
+                  majorValue: defaultContext.majorColorMatchConfig
+                }
+              }
+            ],
+            dataSelectors: [
+              {
+                label: (0, i18n_exports._)("Major value"),
+                value: "majorValue"
+              },
+              {
+                label: (0, i18n_exports._)("Trend"),
+                value: "trendValue"
+              }
+            ],
+            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+          }
         }
-        if (dataSourceKeys.length) {
-          const columnValues = [[]];
-          splitDataSources[val].primary.data.fields = [
-            ...splitDataSources[val].primary.data.fields,
-            ...dataSourceKeys.map((k) => ({
-              name: k
-            }))
-          ];
-          dataSourceKeys.forEach(() => {
-            columnValues.push([]);
-          });
-          for (let i = 1; i <= Math.ceil((fields.length - 1) / dataSourceKeys.length); i += 1) {
-            columnValues[0].push(
-              fields[i].splitby_value ? fields[i].splitby_value : fields[i].name
-            );
-            dataSourceKeys.forEach((dskey, dsIndx) => {
-              const mul = (fields.length - 1) / dataSourceKeys.length;
-              columnValues[dsIndx + 1].push(columns[i + dsIndx * mul][idx]);
-            });
+      ],
+      [
+        __spreadProps(__spreadValues({}, StaticMajorColorEditor_default), {
+          editorProps: {
+            themes
           }
-          splitDataSources[val].primary.data.columns = columnValues;
-        } else if (nonDataSourceAggregations.length) {
-          const columnValues = [];
-          fields.forEach((aggregationField, fieldIdx) => {
-            if (fieldIdx > 0) {
-              splitDataSources[val].primary.data.fields.push(aggregationField);
-              columnValues.push([columns[fieldIdx][idx]]);
-            }
-          });
-          splitDataSources[val].primary.data.columns = columnValues;
+        })
+      ],
+      [getDynamicMajorColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        __spreadProps(__spreadValues({}, StaticTrendColorEditor_default), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [getDynamicTrendColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        __spreadProps(__spreadValues({}, StaticBackgroundColorEditor_default), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [
+        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+          editorProps: {
+            themes
+          }
+        })
+      ],
+      [getDynamicBackgroundColorEditor({ defaultContext, defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig })],
+      [
+        {
+          label: (0, i18n_exports._)("Major value size (px)"),
+          option: "majorFontSize",
+          editor: "editor.number",
+          editorProps: {
+            min: 1
+          },
+          placeholder: (0, i18n_exports._)("Auto"),
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        },
+        {
+          label: (0, i18n_exports._)("Trend value size (px)"),
+          option: "trendFontSize",
+          editor: "editor.number",
+          editorProps: {
+            min: 1
+          },
+          placeholder: (0, i18n_exports._)("Auto"),
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0,
+          isDisabled: ({ options }) => options.trendDisplay === "off"
         }
-      });
-    } else {
-      const valueKeys = [];
-      for (let i = 1; i < fields.length; i += 1) {
-        valueKeys.push(fields[i].splitby_value ? fields[i].splitby_value : fields[i].name);
-      }
-      valueKeys.forEach((val) => {
-        splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[val].primary.data.fields = [
-          { name: otherSplitBy[0] },
-          ...dataSourceKeys.map((k) => ({
-            name: k
-          }))
-        ];
-        splitDataSources[val].primary.data.columns = [[...columns[0]]];
-        dataSourceKeys.forEach((dsKey) => {
-          fields.forEach((field, idx) => {
-            if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
-              splitDataSources[val].primary.data.columns.push([...columns[idx]]);
-            }
-          });
-        });
-      });
-    }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
-};
-var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
-  var _a, _b, _c, _d, _e, _f;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
-  }
-  const splitByIndex = fields == null ? void 0 : fields.findIndex(
-    (field) => field === splitBy || field.name === splitBy
-  );
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
-    const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
-    splitDataSources = {};
-    splitByColumn.forEach((val, idx) => {
-      if (!splitDataSources[val]) {
-        splitDataSources[val] = [idx];
-      } else {
-        splitDataSources[val].push(idx);
-      }
-    });
-    const cloneFields = (0, lodash_exports.cloneDeep)(fields);
-    cloneFields.splice(splitByIndex, 1);
-    const valueKeys = Object.keys(splitDataSources);
-    valueKeys.forEach((val) => {
-      const valIndices = (0, lodash_exports.cloneDeep)(splitDataSources[val]);
-      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[val].primary.data.fields = cloneFields;
-      splitDataSources[val].primary.data.columns = [];
-      columns.forEach((col, idx) => {
-        if (idx !== splitByIndex) {
-          const newCol = valIndices.map((valIdx) => col[valIdx]);
-          splitDataSources[val].primary.data.columns.push(newCol);
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Major value abbreviation"),
+          option: "shouldAbbreviateMajorValue",
+          editor: "editor.checkbox"
         }
-      });
-    });
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Trend value abbreviation"),
+          option: "shouldAbbreviateTrendValue",
+          editor: "editor.checkbox"
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Alignment"),
+          editor: "editor.radioBar",
+          option: "align",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Left"), value: "left" },
+              { label: (0, i18n_exports._)("Center"), value: "center" },
+              { label: (0, i18n_exports._)("Right"), value: "right" }
+            ]
+          },
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        }
+      ]
+    ]
   }
-  return { splitDataSources, errorCode };
-};
-var getTrellisDataSourcesBySplitMode = (splitMode, dataSources, trellisSplitBy) => {
-  let result = null;
-  try {
-    if (splitMode === trellisUtils_exports.TIMECHART) {
-      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeTimechart(dataSources, trellisSplitBy);
-    } else if (splitMode === trellisUtils_exports.STATS) {
-      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsStats(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.STATS);
-    } else if (splitMode === trellisUtils_exports.CHART) {
-      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsTimechartAndChart(dataSources) : dataSourcesSplitByModeChart(dataSources, trellisSplitBy);
-    } else if (splitMode === trellisUtils_exports.UNKNOWN) {
-      result = trellisSplitBy === AGGREGATIONS ? dataSourcesSplitByAggregationsUnknown(dataSources) : dataSourcesSplitByModeStatsorUnknown(dataSources, trellisSplitBy, trellisUtils_exports.UNKNOWN);
+];
+var config = {
+  /**
+   * unique viz key
+   */
+  key: "splunk.singlevalueicon",
+  /**
+   * viz name
+   */
+  name: (0, i18n_exports._)("Single value icon"),
+  category: "Single Value" /* SINGLE_VALUE */,
+  /**
+   * viz icon
+   */
+  icon: null,
+  dataContract,
+  size,
+  defaultContext,
+  optionsSchema: visualization_schemas_exports.singleValueIconOptionsSchema,
+  editorConfig,
+  events: {
+    "value.click": {
+      description: "trigger when user clicks major value or icon",
+      payloadKeys: ["majorValue", "trendValue", "icon"]
     }
-  } catch (ex) {
-    console.error("getTrellisDataSourcesBySplitMode ", ex);
-    result = { splitDataSources: null, errorCode: "UNKNOWN" };
-  }
-  return result;
+  },
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */, "trellis" /* TRELLIS */],
+  themes
 };
+var config_default = enhanceConfig(config);
+
+// esm-externals:@splunk/react-ui/Paginator
+var Paginator_exports = {};
+__export(Paginator_exports, {
+  default: () => Paginator_default
+});
+var defaultImport43 = __toESM(require("@splunk/react-ui/Paginator"));
+__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
+var Paginator_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport44 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
+
+// esm-externals:@splunk/themes/useSplunkTheme
+var useSplunkTheme_exports = {};
+__export(useSplunkTheme_exports, {
+  default: () => useSplunkTheme_default
+});
+var defaultImport45 = __toESM(require("@splunk/themes/useSplunkTheme"));
+__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
+var useSplunkTheme_default = "default" in defaultImport45 ? defaultImport45.default : defaultImport45;
 
 // src/common/hocs/withTrellis.tsx
 var TrellisContainer = styled_components_default.div`
@@ -3403,7 +3715,11 @@ var withTrellis = (Viz) => {
       trellisMinColumnWidth,
       trellisRowHeight,
       splitByLayout,
-      trellisSplitBy
+      trellisSplitBy,
+      trellisSharedScale,
+      stackMode,
+      yAxisMin,
+      yAxisMax
     } = mergedOptions;
     const colCount = trellisColumns > 0 ? trellisColumns : defaultOptions.trellisColumns;
     const pageCount = +trellisPageCount > 0 ? +trellisPageCount : defaultOptions.trellisPageCount;
@@ -3474,10 +3790,10 @@ var withTrellis = (Viz) => {
       [pageNum, pagedData]
     );
     const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-    const isTrellisFeatureFlagOn = Boolean(
+    const isTrellisFeatureFlagOn2 = Boolean(
       featureFlagContext && featureFlagContext.visualizations_enableTrellis
     );
-    if (!isTrellisFeatureFlagOn || !splitByLayout || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
+    if (!isTrellisFeatureFlagOn2 || !splitByLayout || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
       return /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, opts));
     }
     if (splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis) {
@@ -3506,6 +3822,13 @@ var withTrellis = (Viz) => {
         splitByKeys = splitByKeysModified;
         totalPages = splitByKeysModified ? Math.ceil(splitByKeysModified.length / pageCount) : 0;
       }
+      const [calculatedMin, calculatedMax] = determineMinMax(
+        modifiedDataSourceBySplitBy,
+        trellisSharedScale,
+        yAxisMin,
+        yAxisMax,
+        stackMode
+      );
       return /* @__PURE__ */ react_exports.createElement(TrellisContainer, { height, width, backgroundColor: trellisBackgroundColor }, /* @__PURE__ */ react_exports.createElement(
         TrellisContainerGrid,
         {
@@ -3514,7 +3837,7 @@ var withTrellis = (Viz) => {
           colMinWidth,
           rowHeight
         },
-        pagedData && pagedData.map((splitByKey, idx) => /* @__PURE__ */ react_exports.createElement(
+        pagedData == null ? void 0 : pagedData.map((splitByKey, idx) => /* @__PURE__ */ react_exports.createElement(
           "div",
           {
             className: "child",
@@ -3535,7 +3858,10 @@ var withTrellis = (Viz) => {
               trellisKey: splitByKey,
               trellisSplitBy: currTrellisSplitBy,
               dataSources: modifiedDataSourceBySplitBy[splitByKey],
-              options,
+              options: __spreadProps(__spreadValues({}, options), {
+                yAxisMin: calculatedMin,
+                yAxisMax: calculatedMax
+              }),
               key: `viz-${idx.toString()}`,
               height: containerHeight,
               width: containerWidth
@@ -3582,7 +3908,13 @@ var computeVizProps = ({
     trellisSplitBy
   };
 };
-var viz = withTrellis_default(withDashboardViz_default({ ReactViz: SingleValueIcon_default, vizConfig: config_default, computeVizProps }));
+var computeVizPropsBeforeEval = (options) => {
+  const trendColor = getTrendColorWithPercent(options);
+  return __spreadValues({}, trendColor);
+};
+var viz = withTrellis_default(
+  withDashboardViz_default({ ReactViz: SingleValueIcon_default, vizConfig: config_default, computeVizProps, computeVizPropsBeforeEval })
+);
 var { themes: themes2 } = config_default;
 var SingleValueIcon_default2 = viz;
 //# sourceMappingURL=SingleValueIcon.js.map