@splunk/visualizations 27.0.0 → 27.1.0

package/SingleValueIcon.js

@@ -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 }) => ({
@@ -239,99 +221,99 @@ var SingleValueBasic_exports = {};
 __export(SingleValueBasic_exports, {
   default: () => SingleValueBasic_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualizations/SingleValueBasic"));
+var defaultImport12 = __toESM(require("@splunk/visualizations/SingleValueBasic"));
 __reExport(SingleValueBasic_exports, require("@splunk/visualizations/SingleValueBasic"));
-var SingleValueBasic_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var SingleValueBasic_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/react-icons/enterprise/Activity
 var Activity_exports = {};
 __export(Activity_exports, {
   default: () => Activity_default
 });
-var defaultImport15 = __toESM(require("@splunk/react-icons/enterprise/Activity"));
+var defaultImport13 = __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;
+var Activity_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/react-icons/enterprise/Clock
 var Clock_exports = {};
 __export(Clock_exports, {
   default: () => Clock_default
 });
-var defaultImport16 = __toESM(require("@splunk/react-icons/enterprise/Clock"));
+var defaultImport14 = __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;
+var Clock_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/react-icons/enterprise/Pencil
 var Pencil_exports = {};
 __export(Pencil_exports, {
   default: () => Pencil_default
 });
-var defaultImport17 = __toESM(require("@splunk/react-icons/enterprise/Pencil"));
+var defaultImport15 = __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;
+var Pencil_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/react-icons/enterprise/Star
 var Star_exports = {};
 __export(Star_exports, {
   default: () => Star_default
 });
-var defaultImport18 = __toESM(require("@splunk/react-icons/enterprise/Star"));
+var defaultImport16 = __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;
+var Star_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // esm-externals:@splunk/react-icons/enterprise/Question
 var Question_exports = {};
 __export(Question_exports, {
   default: () => Question_default
 });
-var defaultImport19 = __toESM(require("@splunk/react-icons/enterprise/Question"));
+var defaultImport17 = __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;
+var Question_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:lodash
 var lodash_exports = {};
 __export(lodash_exports, {
   default: () => lodash_default
 });
-var defaultImport20 = __toESM(require("lodash"));
+var defaultImport18 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
-var lodash_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var lodash_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualizations-shared/numberUtils
 var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport19 = __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 defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/visualizations-shared/domUtils
 var domUtils_exports = {};
 __export(domUtils_exports, {
   default: () => domUtils_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/domUtils"));
+var defaultImport20 = __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 defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/visualizations-shared/propUtils
 var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport23 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport21 = __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 defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualizations-shared/colorConstants
 var colorConstants_exports = {};
 __export(colorConstants_exports, {
   default: () => colorConstants_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+var defaultImport22 = __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 defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/common/utils/singleValueUtils.js
 var DEFAULT_FONT = 12;
@@ -667,16 +649,16 @@ 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 });
-  }
-  return onValueClick(__spreadProps(__spreadValues({}, ev), { payload }));
+  }, trellisEnabled && { "trellis.name": trellisSplitBy, "trellis.value": trellisKey })
+}));
+var getTrendColorWithPercent = (options) => {
+  const shouldUsePercentTrendColor = options.trendColor === "> trendValue | rangeValue(trendColorEditorConfig)" && options.trendDisplay === "percent";
+  return shouldUsePercentTrendColor ? { trendColor: "> trendValuePercent | rangeValue(trendColorEditorConfig)" } : {};
 };
 
 // src/SingleValueIcon/PureSingleValueIcon/utils/iconUtils.js
@@ -860,6 +842,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 defaultImport23 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport24 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
+// 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;
@@ -908,11 +918,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,
@@ -1059,7 +1065,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,
       {
@@ -1468,7 +1474,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
         width,
         height,
         backgroundColor
@@ -1534,7 +1540,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.1.0 - fe8b048df"
 })`
     position: relative;
     width: 100%;
@@ -2021,782 +2027,1131 @@ 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 defaultImport37 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// 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
-        }
-      );
-    }
-    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;
-          }
-          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 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);
+      }
+    }
+    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 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 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"
-    }
-  ],
-  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" }]
+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 };
 };
-
-// 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 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 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)
+  } catch (ex) {
+    console.error("getTrellisDataSourcesBySplitMode ", ex);
+    result = { splitDataSources: null, errorCode: "UNKNOWN" };
+  }
+  return result;
 };
-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 turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
   }
-];
-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)
+  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 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 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];
 };
-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
-        }
-      }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Major value"),
-        value: "majorValue"
+// src/common/withDashboardViz.tsx
+var withDashboardViz = (opts) => {
+  const {
+    ReactViz,
+    vizConfig,
+    computeVizProps: computeVizProps2 = () => {
+    },
+    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);
       }
-    ],
-    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
-        }
-      }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Trend value"),
-        value: "trendValue"
+    }
+    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/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
+      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._)("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;
-      }
+      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
+      });
     }
-  ],
-  [
-    {
-      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;
-      }
+    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
+        }
+      );
     }
-  ],
-  [
-    {
-      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;
-      }
+    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;
+          }
+          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;
+          }
+        }
+      });
     }
-  ],
-  [
-    {
-      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;
-      }
-    },
+    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 defaultImport38 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var PresetPalettes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// esm-externals:@splunk/themes/pick
+var pick_exports2 = {};
+__export(pick_exports2, {
+  default: () => pick_default2
+});
+var defaultImport39 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports2, require("@splunk/themes/pick"));
+var pick_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+
+// esm-externals:@splunk/visualizations-shared/configUtils
+var configUtils_exports = {};
+__export(configUtils_exports, {
+  default: () => configUtils_default
+});
+var defaultImport40 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
+var configUtils_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+
+// src/common/configContext/singleValueContext.ts
+var defaultContext = {
+  trendColorConfig: [
     {
-      label: (0, i18n_exports._)("Row height"),
-      option: "trellisRowHeight",
-      editor: "editor.number",
+      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: {
-        min: 1
+        values: [
+          { label: (0, i18n_exports._)("Before"), value: "before" },
+          { label: (0, i18n_exports._)("After"), value: "after" }
+        ]
       },
-      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;
-      }
+      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._)("Max number of components per page"),
-      option: "trellisPageCount",
+      label: (0, i18n_exports._)("Precision"),
+      option: "numberPrecision",
       editor: "editor.number",
       editorProps: {
-        min: 1
+        min: 0,
+        max: 20
       },
-      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;
-      }
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
     }
   ]
 ];
-var TrellisBackgroundColorEditor = {
-  label: (0, i18n_exports._)("Trellis background"),
-  option: "trellisBackgroundColor",
+var StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
+
+// src/common/editorConfig/StaticBackgroundColorEditor.js
+var StaticBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
   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;
-  }
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
 };
+var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
 
-// 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"
+// 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]
     }
-  ],
-  optionalDataSources: [],
-  initialRequestParams: {
-    primary: { offset: 0, count: 1e4 }
   }
+];
+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 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 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 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)"
-      })
+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
+        }
+      }
+    ],
+    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
+        }
+      }
+    ],
+    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 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._)("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._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled
     }
-  },
-  {
-    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._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled
     }
-  },
-  {
-    label: (0, i18n_exports._)("Background"),
-    name: "singleValueIcon.background",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        backgroundColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        backgroundColor: "> majorValue | rangeValue(backgroundColorEditorConfig)"
-      })
+  ],
+  [
+    {
+      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 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 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"
+      }
+    }
+  ],
+  ...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 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)`
-                }
-              };
+
+// 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)"
+      })
+    }
+  }
+];
+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
@@ -2888,458 +3243,152 @@ var editorConfig = [
                 value: "trendValue"
               }
             ],
-            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
-          }
-        }
-      ],
-      [
-        __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"
-        }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Major value abbreviation"),
-          option: "shouldAbbreviateMajorValue",
-          editor: "editor.checkbox"
-        }
-      ],
-      [
-        {
-          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
-        }
-      ]
-    ]
-  }
-];
-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"]
-    }
-  },
-  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 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/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]];
-      }
-    }
-  } 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]);
-        }
-      });
-    });
-  } 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);
-      }
-    }
-    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 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] }];
+            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 defaultImport41 = __toESM(require("@splunk/react-ui/Paginator"));
+__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
+var Paginator_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport42 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+
+// esm-externals:@splunk/themes/useSplunkTheme
+var useSplunkTheme_exports = {};
+__export(useSplunkTheme_exports, {
+  default: () => useSplunkTheme_default
+});
+var defaultImport43 = __toESM(require("@splunk/themes/useSplunkTheme"));
+__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
+var useSplunkTheme_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/hocs/withTrellis.tsx
 var TrellisContainer = styled_components_default.div`
@@ -3403,7 +3452,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 +3527,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 +3559,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 +3574,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 +3595,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 +3645,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