@splunk/visualizations 27.0.0 → 27.1.0

package/SingleValue.js

@@ -134,6 +134,21 @@ var defaultImport7 = __toESM(require("@splunk/visualizations-shared/SizeAwareWra
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
 var SizeAwareWrapper_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
+// src/common/components/VizStyleWrapper.jsx
+var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
+  "data-test": dataTestKey,
+  "data-testid": dataTestKey
+}))`
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.backgroundColor};
+`;
+VizStyleWrapper.displayName = "VizStyleWrapper";
+var VizStyleWrapper_default = VizStyleWrapper;
+
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
@@ -152,20 +167,15 @@ 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;
 
-// src/common/components/VizStyleWrapper.jsx
-var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
-  "data-test": dataTestKey,
-  "data-testid": dataTestKey
-}))`
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.backgroundColor};
-`;
-VizStyleWrapper.displayName = "VizStyleWrapper";
-var VizStyleWrapper_default = VizStyleWrapper;
+// 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/common/components/TrellisTitle.tsx
 var TRELLIS_TITLE_HEIGHT = 28;
@@ -635,16 +645,16 @@ var changeColor = (color, ratio) => {
   return `#${newR.toString(16).padStart(2, 0)}${newG.toString(16).padStart(2, 0)}${newB.toString(16).padStart(2, 0)}`;
 };
 var darken = (color) => changeColor(color, 0.5);
-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)" } : {};
 };
 
 // esm-externals:@splunk/react-icons/enterprise/ArrowUp
@@ -1731,11 +1741,7 @@ var SingleValue = (_a) => {
     setContainerWidth(w);
     setContainerHeight(h);
   }, []);
-  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,
@@ -2286,7 +2292,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
@@ -2352,7 +2358,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%;
@@ -2839,1384 +2845,1427 @@ 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 defaultImport33 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// 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 defaultImport33 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
-
-// esm-externals:@splunk/visualization-themes/variables
-var variables_exports2 = {};
-__export(variables_exports2, {
-  default: () => variables_default2
-});
-var defaultImport34 = __toESM(require("@splunk/visualization-themes/variables"));
-__reExport(variables_exports2, require("@splunk/visualization-themes/variables"));
-var variables_default2 = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
-
-// esm-externals:@splunk/themes/pick
-var pick_exports2 = {};
-__export(pick_exports2, {
-  default: () => pick_default2
-});
-var defaultImport35 = __toESM(require("@splunk/themes/pick"));
-__reExport(pick_exports2, require("@splunk/themes/pick"));
-var pick_default2 = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
-
-// esm-externals:@splunk/visualization-icons
-var visualization_icons_exports = {};
-__export(visualization_icons_exports, {
-  default: () => visualization_icons_default
-});
-var defaultImport36 = __toESM(require("@splunk/visualization-icons"));
-__reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
-
-// esm-externals:@splunk/visualization-icons/placeholders
-var placeholders_exports = {};
-__export(placeholders_exports, {
-  default: () => placeholders_default
-});
-var defaultImport37 = __toESM(require("@splunk/visualization-icons/placeholders"));
-__reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
-
-// 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" }]
-};
-
-// esm-externals:@splunk/visualizations-shared/configUtils
-var configUtils_exports = {};
-__export(configUtils_exports, {
-  default: () => configUtils_default
-});
-var defaultImport38 = __toESM(require("@splunk/visualizations-shared/configUtils"));
-__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
-
-// 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
+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);
   }
-});
-
-// 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 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);
       }
-    ],
-    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
+    });
+    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);
         }
-      }
-    ],
-    dataSelectors: [
-      {
-        label: (0, i18n_exports._)("Major Value"),
-        value: "majorValue"
-      },
-      {
-        label: (0, i18n_exports._)("Trend"),
-        value: "trendValue"
-      }
-    ],
-    defaultPalettesConfig: defaultPalettesConfig2
+      });
+    });
+  } else {
+    errorCode = "INVALID_SPLIT_BY_FIELD";
   }
-});
-
-// 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
+  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 StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
-
-// 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)
+  } catch (ex) {
+    console.error("getTrellisDataSourcesBySplitMode ", ex);
+    result = { splitDataSources: null, errorCode: "UNKNOWN" };
+  }
+  return result;
 };
-var StaticMajorColorEditor_default = StaticMajorColorEditor;
-
-// src/common/editorConfig/StaticTrendColorEditor.js
-var StaticTrendColorEditor = {
-  label: (0, i18n_exports._)("Trend value"),
-  option: "trendColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.trendColor),
-  isDisabled: ({ options }) => options.trendDisplay === "off"
-};
-var StaticTrendColorEditor_default = StaticTrendColorEditor;
-
-// src/common/editorConfig/StaticBackgroundColorEditor.js
-var StaticBackgroundColorEditor = {
-  label: (0, i18n_exports._)("Background color"),
-  option: "backgroundColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
 };
-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);
+var calculateSharedMinMax = (splitData) => {
+  let max2 = -Infinity;
+  let min2 = 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 > max2) {
+            max2 = pointNumber;
+          }
+          if (pointNumber < min2) {
+            min2 = pointNumber;
+          }
+        });
+      });
+    });
   });
-}
+  return [min2, max2];
+};
+var determineMinMax = (splitData, trellisSharedScale, yAxisMin, yAxisMax, stackMode) => {
+  if (!trellisSharedScale || stackMode === "stacked100" || yAxisMin !== "auto" && yAxisMax !== "auto")
+    return [yAxisMin, yAxisMax];
+  const [sharedMin, sharedMax] = calculateSharedMinMax(splitData);
+  const shouldUseSharedMax = sharedMax !== -Infinity && yAxisMax === "auto";
+  const shouldUseSharedMin = sharedMin !== Infinity && yAxisMin === "auto";
+  return [shouldUseSharedMin ? sharedMin : yAxisMin, shouldUseSharedMax ? sharedMax : yAxisMax];
+};
 
-// src/common/editorConfig/TrellisEditors.ts
-var TrellisEditorConfig = [
-  [
-    {
-      label: (0, i18n_exports._)("Trellis layout"),
-      option: "splitByLayout",
-      editor: "editor.toggle",
-      showEditor: () => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Split by"),
-      option: "trellisSplitBy",
-      editor: "editor.trellisSplitBy",
-      editorProps: {
-        dataSourceKey: "primary"
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Number of columns"),
-      option: "trellisColumns",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      placeholder: (0, i18n_exports._)("Auto"),
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Min column width"),
-      option: "trellisMinColumnWidth",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
+// src/common/withDashboardViz.tsx
+var withDashboardViz = (opts) => {
+  const {
+    ReactViz,
+    vizConfig,
+    computeVizProps: computeVizProps2 = () => {
     },
-    {
-      label: (0, i18n_exports._)("Row height"),
-      option: "trellisRowHeight",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-      }
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Max number of components per page"),
-      option: "trellisPageCount",
-      editor: "editor.number",
-      editorProps: {
-        min: 1
-      },
-      showEditor: ({ options }) => {
-        const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
-        const isTrellisFeatureFlagOn = Boolean(
-          featureFlagContext && featureFlagContext.visualizations_enableTrellis
-        );
-        return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+    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);
       }
     }
-  ]
-];
-var TrellisBackgroundColorEditor = {
-  label: (0, i18n_exports._)("Trellis background"),
-  option: "trellisBackgroundColor",
-  editor: "editor.color",
-  showEditor: ({ options }) => {
+    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 isTrellisFeatureFlagOn = Boolean(
+    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
     );
-    return isTrellisFeatureFlagOn && options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
-  }
-};
-
-// src/SingleValue/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 = {
-  majorColorEditorConfig: void 0,
-  trendColorEditorConfig: void 0,
-  backgroundColorEditorConfig: void 0
-};
-var basePresetOptions = {
-  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: "singleValue.none",
-    value: {
-      context: __spreadValues({}, basePresetContext),
-      options: __spreadValues({}, basePresetOptions)
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Major value"),
-    name: "singleValue.majorValue",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        majorColorEditorConfig: defaultContext.majorColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Trend value"),
-    name: "singleValue.trend",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        trendColorEditorConfig: defaultContext.trendColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Major value and Trend value"),
-    name: "singleValue.majorValueAndTrend",
-    value: {
-      context: __spreadProps(__spreadValues({}, basePresetContext), {
-        majorColorEditorConfig: defaultContext.majorColorConfig,
-        trendColorEditorConfig: defaultContext.trendColorConfig
-      }),
-      options: __spreadProps(__spreadValues({}, basePresetOptions), {
-        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)",
-        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
-      })
-    }
-  },
-  {
-    label: (0, i18n_exports._)("Background"),
-    name: "singleValue.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),
-  defaultBackgroundColor: (props) => pick_default2({
-    enterprise: {
-      dark: variables_default.black(props),
-      light: variables_default.backgroundColor(props)
-    },
-    prisma: variables_default.backgroundColorSidebar(props)
-  })(props),
-  defaultSparklineStrokeColor: (props) => pick_default2({
-    enterprise: variables_default.textColor(props),
-    prisma: variables_default.contentColorActive(props)
-  })(props),
-  // TODO(fkurniawan): update with SCP-36839
-  sparklineSeverityColors: (props) => pick_default2({
-    enterprise: {
-      dark: JSON.stringify({
-        none: {
-          background: variables_exports2.enterpriseDark.gray60,
-          // note: may need update later
-          stroke: variables_exports2.enterpriseDark.white
-        },
-        low: {
-          background: variables_exports2.enterpriseDark.successColorD50,
-          stroke: variables_exports2.enterpriseDark.white
-        },
-        guarded: {
-          background: variables_exports2.enterpriseDark.infoColorD50,
-          stroke: variables_exports2.enterpriseDark.white
-        },
-        elevated: {
-          background: variables_exports2.enterpriseDark.warningColorD50,
-          stroke: variables_exports2.enterpriseDark.white
-        },
-        high: {
-          background: variables_exports2.enterpriseDark.alertColorD50,
-          stroke: variables_exports2.enterpriseDark.white
-        },
-        severe: {
-          background: variables_exports2.enterpriseDark.errorColorD50,
-          stroke: variables_exports2.enterpriseDark.white
-        }
-      }),
-      light: JSON.stringify({
-        none: {
-          background: variables_exports2.enterprise.gray60,
-          stroke: variables_exports2.enterprise.gray20
-        },
-        low: {
-          background: variables_exports2.enterprise.successColorD50,
-          stroke: variables_exports2.enterprise.white
-        },
-        guarded: {
-          background: variables_exports2.enterprise.infoColorD50,
-          stroke: variables_exports2.enterprise.white
-        },
-        elevated: {
-          background: variables_exports2.enterprise.warningColorD50,
-          stroke: variables_exports2.enterprise.white
-        },
-        high: {
-          background: variables_exports2.enterprise.alertColorD50,
-          stroke: variables_exports2.enterprise.white
-        },
-        severe: {
-          background: variables_exports2.enterprise.errorColorD50,
-          stroke: variables_exports2.enterprise.white
-        }
-      })
-    },
-    prisma: JSON.stringify({
-      none: {
-        background: variables_exports2.scp.gray52,
-        stroke: variables_exports2.scp.white
-      },
-      low: {
-        background: variables_exports2.scp.successColorD50,
-        stroke: variables_exports2.scp.white
-      },
-      guarded: {
-        background: variables_exports2.scp.infoColorD50,
-        stroke: variables_exports2.scp.white
-      },
-      elevated: {
-        background: variables_exports2.scp.warningColorD50,
-        stroke: variables_exports2.scp.white
-      },
-      high: {
-        background: variables_exports2.scp.alertColorD50,
-        stroke: variables_exports2.scp.white
-      },
-      severe: {
-        background: variables_exports2.scp.errorColorD50,
-        stroke: variables_exports2.scp.white
+    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 {};
       }
-    })
-  })(props)
-};
-var editorConfig = [
-  {
-    label: (0, i18n_exports._)("Data configurations"),
-    layout: [
-      [
-        {
-          label: (0, i18n_exports._)("Value"),
-          editor: "editor.columnSelector",
-          option: "sparklineValues",
-          context: "sparklineValuesContext",
-          editorProps: {
-            dataSourceKey: "primary",
-            prepareValue: (definition) => {
-              const {
-                options: { sparklineValues }
-              } = definition;
-              return {
-                context: {},
-                options: {
-                  majorValue: `> sparklineValues | lastPoint()`,
-                  trendValue: `> sparklineValues | delta(-2)`,
-                  sparklineValues
-                }
-              };
+      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);
             }
-          },
-          isDisabled: ({ options }) => options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis
-        }
-      ]
-    ]
-  },
-  {
-    label: (0, i18n_exports._)("Data display"),
-    layout: [
-      ...StaticMajorAndTrendLayout_default,
-      [
-        {
-          label: (0, i18n_exports._)("Trend display"),
-          option: "trendDisplay",
-          editor: "editor.select",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Percent"), value: "percent" },
-              { label: (0, i18n_exports._)("Absolute"), value: "absolute" },
-              { label: (0, i18n_exports._)("Off"), value: "off" }
-            ]
-          },
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0
-        },
-        {
-          label: (0, i18n_exports._)("Sparkline display"),
-          option: "sparklineDisplay",
-          editor: "editor.select",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Off"), value: "off" },
-              { label: (0, i18n_exports._)("Before"), value: "before" },
-              { label: (0, i18n_exports._)("Below"), value: "below" },
-              { label: (0, i18n_exports._)("After"), value: "after" }
-            ]
+          });
+        } 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 {};
+      }
+      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
+      });
+    }
+    react_exports.useEffect(() => {
+      onComputedProps(clonedEvaluatedOptions);
+    });
+    react_exports.useEffect(() => {
+      return () => {
+        if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
+          async_dynamic_options_evaluator_default.reset(visualizationID);
         }
-      ],
-      ...TrellisEditorConfig
-    ]
-  },
-  {
-    label: (0, i18n_exports._)("Color and style"),
-    layout: [
-      [
+      };
+    }, []);
+    const { requiredProps = [], supports } = vizConfig;
+    const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
+    if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
+      return /* @__PURE__ */ react_exports.createElement(
+        MissingPropsMessage_default,
         {
-          label: (0, i18n_exports._)("Dynamic elements"),
-          key: "presetSelector",
-          editor: "editor.presetSelector",
-          editorProps: {
-            presets,
-            value: ({ context, options }) => {
-              const initialPreset = getInitialPreset(context, options, presets);
-              return initialPreset && initialPreset.label || null;
-            }
-          }
+          "data-test": "missing-props-message",
+          width,
+          height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
         }
-      ],
-      [
-        __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
+      );
+    }
+    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;
           }
-        })
-      ],
-      [
-        __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
-          editorProps: {
-            themes
+          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;
           }
-        })
-      ],
-      [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"
+      });
+    }
+    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 defaultImport34 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+__reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var PresetPalettes_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// esm-externals:@splunk/visualization-themes/variables
+var variables_exports2 = {};
+__export(variables_exports2, {
+  default: () => variables_default2
+});
+var defaultImport35 = __toESM(require("@splunk/visualization-themes/variables"));
+__reExport(variables_exports2, require("@splunk/visualization-themes/variables"));
+var variables_default2 = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// esm-externals:@splunk/themes/pick
+var pick_exports2 = {};
+__export(pick_exports2, {
+  default: () => pick_default2
+});
+var defaultImport36 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports2, require("@splunk/themes/pick"));
+var pick_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// esm-externals:@splunk/visualization-icons
+var visualization_icons_exports = {};
+__export(visualization_icons_exports, {
+  default: () => visualization_icons_default
+});
+var defaultImport37 = __toESM(require("@splunk/visualization-icons"));
+__reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
+var visualization_icons_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// esm-externals:@splunk/visualization-icons/placeholders
+var placeholders_exports = {};
+__export(placeholders_exports, {
+  default: () => placeholders_default
+});
+var defaultImport38 = __toESM(require("@splunk/visualization-icons/placeholders"));
+__reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
+var placeholders_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// src/common/configContext/singleValueContext.ts
+var defaultContext = {
+  trendColorConfig: [
+    {
+      to: 0,
+      value: "#9E2520"
+    },
+    {
+      from: 0,
+      value: "#1C6B2D"
+    }
+  ],
+  majorColorConfig: [
+    { to: 20, value: "#D41F1F" },
+    { from: 20, to: 40, value: "#D94E17" },
+    { from: 40, to: 60, value: "#CBA700" },
+    { from: 60, to: 80, value: "#669922" },
+    { from: 80, value: "#118832" }
+  ],
+  majorColorMatchConfig: [{ match: "", value: "#5C33FF" }],
+  trendValueCopy: "> trendValue",
+  divisor: "> majorValue | subtract(trendValueCopy) | divideBy(100)",
+  trendValuePercent: "> trendValue | divideBy(divisor)"
+};
+
+// 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/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
         }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Trend value abbreviation"),
-          option: "shouldAbbreviateTrendValue",
-          editor: "editor.checkbox"
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Trend value"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
+  }
+});
+
+// src/common/editorConfig/DynamicBackgroundColorEditor.js
+var getDynamicBackgroundColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  context: "backgroundColorEditorConfig",
+  editor: "editor.dynamicColor",
+  showEditor: ({ options }) => (0, configUtils_exports.isDynamicOption)(options.backgroundColor),
+  editorProps: {
+    labelPosition: "top",
+    flyoutTitle: (0, i18n_exports._)("Dynamic coloring: background"),
+    formatters: [
+      {
+        label: (0, i18n_exports._)("Ranges"),
+        value: "rangeValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorConfig,
+          trendValue: defaultContext2.trendColorConfig
         }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Alignment"),
-          editor: "editor.radioBar",
-          option: "align",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Left"), value: "left" },
-              { label: (0, i18n_exports._)("Center"), value: "center" },
-              { label: (0, i18n_exports._)("Right"), value: "right" }
-            ]
-          },
-          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+      },
+      {
+        label: (0, i18n_exports._)("Matches"),
+        value: "matchValue",
+        defaults: {
+          majorValue: defaultContext2.majorColorMatchConfig
         }
-      ]
-    ]
+      }
+    ],
+    dataSelectors: [
+      {
+        label: (0, i18n_exports._)("Major Value"),
+        value: "majorValue"
+      },
+      {
+        label: (0, i18n_exports._)("Trend"),
+        value: "trendValue"
+      }
+    ],
+    defaultPalettesConfig: defaultPalettesConfig2
   }
+});
+
+// src/common/editorConfig/StaticMajorAndTrendLayout.js
+var StaticMajorAndTrendLayout = [
+  [
+    {
+      label: (0, i18n_exports._)("Unit position"),
+      // todo: we need a new editor combining unit and position
+      option: "unitPosition",
+      editor: "editor.select",
+      editorProps: {
+        values: [
+          { label: (0, i18n_exports._)("Before"), value: "before" },
+          { label: (0, i18n_exports._)("After"), value: "after" }
+        ]
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    },
+    {
+      label: (0, i18n_exports._)("Unit label"),
+      option: "unit",
+      editor: "editor.text",
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Precision"),
+      option: "numberPrecision",
+      editor: "editor.number",
+      editorProps: {
+        min: 0,
+        max: 20
+      },
+      showEditor: ({ options }) => options.showValue || options.showValue === void 0
+    }
+  ]
+];
+var StaticMajorAndTrendLayout_default = StaticMajorAndTrendLayout;
+
+// src/common/editorConfig/StaticMajorColorEditor.js
+var StaticMajorColorEditor = {
+  label: (0, i18n_exports._)("Major value"),
+  option: "majorColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.majorColor)
+};
+var StaticMajorColorEditor_default = StaticMajorColorEditor;
+
+// src/common/editorConfig/StaticTrendColorEditor.js
+var StaticTrendColorEditor = {
+  label: (0, i18n_exports._)("Trend value"),
+  option: "trendColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.trendColor),
+  isDisabled: ({ options }) => options.trendDisplay === "off"
+};
+var StaticTrendColorEditor_default = StaticTrendColorEditor;
+
+// src/common/editorConfig/StaticBackgroundColorEditor.js
+var StaticBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Background color"),
+  option: "backgroundColor",
+  editor: "editor.color",
+  showEditor: ({ options }) => !(0, configUtils_exports.isDynamicOption)(options.backgroundColor)
+};
+var StaticBackgroundColorEditor_default = StaticBackgroundColorEditor;
+
+// src/common/utils/configUtils.ts
+function enhanceConfig(vizConfig) {
+  const enhancedConfig = __spreadValues({}, vizConfig);
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
+    (config3) => {
+      return __spreadProps(__spreadValues({}, config3), { open: config3.open || false });
+    }
+  );
+  return enhancedConfig;
+}
+function hasCompatibleContexts(vizContext, presetContext) {
+  const presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(
+    (contextKey) => presetContext[contextKey] === void 0 && vizContext[contextKey] === void 0 || presetContext[contextKey] !== void 0 && vizContext[contextKey] !== void 0
+  );
+}
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  const presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(
+    (optionKey) => (0, configUtils_exports.isDynamicOption)(presetOptions[optionKey]) === (0, configUtils_exports.isDynamicOption)(vizOptions[optionKey])
+  );
+}
+function getInitialPreset(vizContext, vizOptions, presets2) {
+  return presets2.find((preset) => {
+    const presetContext = (0, lodash_exports.get)(preset, ["value", "context"], {});
+    const presetOptions = (0, lodash_exports.get)(preset, ["value", "options"], {});
+    const presetContextKeys = Object.keys(presetContext);
+    const presetOptionKeys = Object.keys(presetOptions);
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
+
+// src/common/editorConfig/TrellisEditors.ts
+var isTrellisFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled
+    }
+  ]
 ];
-var config = {
-  /**
-   * unique viz key
-   */
-  key: "splunk.singlevalue",
-  /**
-   * viz name
-   */
-  name: (0, i18n_exports._)("Single value"),
-  category: "Single Value" /* SINGLE_VALUE */,
-  /**
-   * viz icon
-   */
-  icon: visualization_icons_exports.SingleValue,
-  placeholderIcon: placeholders_exports.SingleValue,
-  dataContract,
-  size,
-  defaultContext,
-  optionsSchema: visualization_schemas_exports.singleValueOptionsSchema,
-  editorConfig,
-  events: {
-    "value.click": {
-      description: "trigger when user clicks major value",
-      payloadKeys: ["majorValue", "trendValue"]
+var TimechartTrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn,
+      // add help text for timecharts
+      editorProps: {
+        help: (0, i18n_exports._)(
+          "Y2-axis and overlay field configurations are not supported when trellis is enabled."
+        ),
+        helpFormat: "under"
+      }
     }
-  },
-  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */, "placeholder" /* PLACEHOLDER */, "trellis" /* TRELLIS */],
-  themes,
-  requiredProps: ["majorValue"]
+  ],
+  ...TrellisEditorConfig.slice(1),
+  [
+    {
+      label: (0, i18n_exports._)("Shared y-axis scale"),
+      option: "trellisSharedScale",
+      editor: "editor.checkbox",
+      showEditor: isTrellisEnabled
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: isTrellisEnabled
 };
-var config_default = enhanceConfig(config);
-
-// esm-externals:@splunk/react-ui/Paginator
-var Paginator_exports = {};
-__export(Paginator_exports, {
-  default: () => Paginator_default
-});
-var defaultImport39 = __toESM(require("@splunk/react-ui/Paginator"));
-__reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport40 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
-
-// esm-externals:@splunk/themes/useSplunkTheme
-var useSplunkTheme_exports = {};
-__export(useSplunkTheme_exports, {
-  default: () => useSplunkTheme_default
-});
-var defaultImport41 = __toESM(require("@splunk/themes/useSplunkTheme"));
-__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
-
-// esm-externals:@splunk/visualizations-shared/trellisUtils
-var trellisUtils_exports = {};
-__export(trellisUtils_exports, {
-  default: () => trellisUtils_default
-});
-var defaultImport42 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
-__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
-// src/common/utils/trellisUtils.ts
-var AGGREGATIONS = "aggregations";
-var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let errorCode = null;
-  if (fields && fields.length) {
-    splitDataSources = {};
-    for (let i = 0; i < fields.length; i += 1) {
-      const fieldName = fields[i].name;
-      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
-        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[fieldName].primary.data.fields = [fields[i]];
-        splitDataSources[fieldName].primary.data.columns = [columns[i]];
-      }
+// src/SingleValue/config.ts
+var dataContract = {
+  requiredDataSources: [
+    {
+      name: "primary",
+      description: "DataSource that powers the visualization"
     }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
+  ],
+  optionalDataSources: [],
+  initialRequestParams: {
+    primary: { offset: 0, count: 1e4 }
   }
-  return { splitDataSources, errorCode };
 };
-var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
-  var _a, _b, _c, _d;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
-  }
-  if (splitByFields && splitByFields.length > 0) {
-    splitDataSources = {};
-    splitByFields.forEach((splitByField) => {
-      splitDataSources[splitByField] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[splitByField].primary.data.fields = [fields[0]];
-      splitDataSources[splitByField].primary.data.columns = [columns[0]];
-      fields.forEach((field, idx) => {
-        const fieldName = field == null ? void 0 : field.name;
-        if (fieldName !== "_time" && !(fieldName == null ? void 0 : fieldName.startsWith("_")) && field.data_source === splitByField) {
-          splitDataSources[splitByField].primary.data.fields.push(field);
-          splitDataSources[splitByField].primary.data.columns.push(columns[idx]);
-        }
-      });
-    });
-  } else if ((!splitByFields || !splitByFields.length) && fields.length > 1) {
-    splitDataSources = {};
-    for (let i = 1; i < fields.length; i += 1) {
-      const fieldName = fields[i].name;
-      if (!(fieldName == null ? void 0 : fieldName.startsWith("_"))) {
-        splitDataSources[fieldName] = (0, lodash_exports.cloneDeep)(
-          (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-        );
-        splitDataSources[fieldName].primary.data.fields = [fields[0], fields[i]];
-        splitDataSources[fieldName].primary.data.columns = [columns[0], columns[i]];
-      }
-    }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
+var size = {
+  initialWidth: 250,
+  initialHeight: 250
 };
-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 basePresetContext = {
+  majorColorEditorConfig: void 0,
+  trendColorEditorConfig: void 0,
+  backgroundColorEditorConfig: void 0
 };
-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);
-      }
+var basePresetOptions = {
+  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: "singleValue.none",
+    value: {
+      context: __spreadValues({}, basePresetContext),
+      options: __spreadValues({}, basePresetOptions)
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Major value"),
+    name: "singleValue.majorValue",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        majorColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Trend value"),
+    name: "singleValue.trend",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        trendColorEditorConfig: defaultContext.trendColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Major value and Trend value"),
+    name: "singleValue.majorValueAndTrend",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        majorColorEditorConfig: defaultContext.majorColorConfig,
+        trendColorEditorConfig: defaultContext.trendColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        majorColor: "> majorValue | rangeValue(majorColorEditorConfig)",
+        trendColor: "> trendValue | rangeValue(trendColorEditorConfig)"
+      })
+    }
+  },
+  {
+    label: (0, i18n_exports._)("Background"),
+    name: "singleValue.background",
+    value: {
+      context: __spreadProps(__spreadValues({}, basePresetContext), {
+        backgroundColorEditorConfig: defaultContext.majorColorConfig
+      }),
+      options: __spreadProps(__spreadValues({}, basePresetOptions), {
+        backgroundColor: "> majorValue | rangeValue(backgroundColorEditorConfig)"
+      })
     }
-    valueKeys.forEach((val) => {
-      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[val].primary.data.fields = [
-        { name: fields[0].name },
-        ...dataSourceKeys.map((k) => ({
-          name: k
-        }))
-      ];
-      splitDataSources[val].primary.data.columns = [[...columns[0]]];
-      dataSourceKeys.forEach((dsKey) => {
-        fields.forEach((field, idx) => {
-          if (field.data_source === dsKey && (field.splitby_value === val || field.name === val)) {
-            splitDataSources[val].primary.data.columns.push([...columns[idx]]);
-          }
-        });
-      });
-    });
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
-};
-var 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);
+];
+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),
+  defaultBackgroundColor: (props) => pick_default2({
+    enterprise: {
+      dark: variables_default.black(props),
+      light: variables_default.backgroundColor(props)
+    },
+    prisma: variables_default.backgroundColorSidebar(props)
+  })(props),
+  defaultSparklineStrokeColor: (props) => pick_default2({
+    enterprise: variables_default.textColor(props),
+    prisma: variables_default.contentColorActive(props)
+  })(props),
+  // TODO(fkurniawan): update with SCP-36839
+  sparklineSeverityColors: (props) => pick_default2({
+    enterprise: {
+      dark: JSON.stringify({
+        none: {
+          background: variables_exports2.enterpriseDark.gray60,
+          // note: may need update later
+          stroke: variables_exports2.enterpriseDark.white
+        },
+        low: {
+          background: variables_exports2.enterpriseDark.successColorD50,
+          stroke: variables_exports2.enterpriseDark.white
+        },
+        guarded: {
+          background: variables_exports2.enterpriseDark.infoColorD50,
+          stroke: variables_exports2.enterpriseDark.white
+        },
+        elevated: {
+          background: variables_exports2.enterpriseDark.warningColorD50,
+          stroke: variables_exports2.enterpriseDark.white
+        },
+        high: {
+          background: variables_exports2.enterpriseDark.alertColorD50,
+          stroke: variables_exports2.enterpriseDark.white
+        },
+        severe: {
+          background: variables_exports2.enterpriseDark.errorColorD50,
+          stroke: variables_exports2.enterpriseDark.white
+        }
+      }),
+      light: JSON.stringify({
+        none: {
+          background: variables_exports2.enterprise.gray60,
+          stroke: variables_exports2.enterprise.gray20
+        },
+        low: {
+          background: variables_exports2.enterprise.successColorD50,
+          stroke: variables_exports2.enterprise.white
+        },
+        guarded: {
+          background: variables_exports2.enterprise.infoColorD50,
+          stroke: variables_exports2.enterprise.white
+        },
+        elevated: {
+          background: variables_exports2.enterprise.warningColorD50,
+          stroke: variables_exports2.enterprise.white
+        },
+        high: {
+          background: variables_exports2.enterprise.alertColorD50,
+          stroke: variables_exports2.enterprise.white
+        },
+        severe: {
+          background: variables_exports2.enterprise.errorColorD50,
+          stroke: variables_exports2.enterprise.white
+        }
+      })
+    },
+    prisma: JSON.stringify({
+      none: {
+        background: variables_exports2.scp.gray52,
+        stroke: variables_exports2.scp.white
+      },
+      low: {
+        background: variables_exports2.scp.successColorD50,
+        stroke: variables_exports2.scp.white
+      },
+      guarded: {
+        background: variables_exports2.scp.infoColorD50,
+        stroke: variables_exports2.scp.white
+      },
+      elevated: {
+        background: variables_exports2.scp.warningColorD50,
+        stroke: variables_exports2.scp.white
+      },
+      high: {
+        background: variables_exports2.scp.alertColorD50,
+        stroke: variables_exports2.scp.white
+      },
+      severe: {
+        background: variables_exports2.scp.errorColorD50,
+        stroke: variables_exports2.scp.white
       }
-    }
-    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] }];
+    })
+  })(props)
+};
+var editorConfig = [
+  {
+    label: (0, i18n_exports._)("Data configurations"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Value"),
+          editor: "editor.columnSelector",
+          option: "sparklineValues",
+          context: "sparklineValuesContext",
+          editorProps: {
+            dataSourceKey: "primary",
+            prepareValue: (definition) => {
+              const {
+                options: { sparklineValues }
+              } = definition;
+              return {
+                context: {},
+                options: {
+                  majorValue: `> sparklineValues | lastPoint()`,
+                  trendValue: `> sparklineValues | delta(-2)`,
+                  sparklineValues
+                }
+              };
+            }
+          },
+          isDisabled: ({ options }) => options.splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis
         }
-        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]);
-            });
+      ]
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Data display"),
+    layout: [
+      ...StaticMajorAndTrendLayout_default,
+      [
+        {
+          label: (0, i18n_exports._)("Trend display"),
+          option: "trendDisplay",
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Percent"), value: "percent" },
+              { label: (0, i18n_exports._)("Absolute"), value: "absolute" },
+              { label: (0, i18n_exports._)("Off"), value: "off" }
+            ]
+          },
+          showEditor: ({ options }) => options.showValue || options.showValue === void 0
+        },
+        {
+          label: (0, i18n_exports._)("Sparkline display"),
+          option: "sparklineDisplay",
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Off"), value: "off" },
+              { label: (0, i18n_exports._)("Before"), value: "before" },
+              { label: (0, i18n_exports._)("Below"), value: "below" },
+              { label: (0, i18n_exports._)("After"), value: "after" }
+            ]
           }
-          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;
         }
-      });
-    } 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]]);
+      ],
+      ...TrellisEditorConfig
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Color and style"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Dynamic elements"),
+          key: "presetSelector",
+          editor: "editor.presetSelector",
+          editorProps: {
+            presets,
+            value: ({ context, options }) => {
+              const initialPreset = getInitialPreset(context, options, presets);
+              return initialPreset && initialPreset.label || null;
             }
-          });
-        });
-      });
-    }
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
-  }
-  return { splitDataSources, errorCode };
-};
-var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
-  var _a, _b, _c, _d, _e, _f;
-  const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
-  const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
-  let splitDataSources = null;
-  let splitByFields = [];
-  let errorCode = null;
-  if (typeof fields[0] !== "string") {
-    splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
-  }
-  const splitByIndex = fields == null ? void 0 : fields.findIndex(
-    (field) => field === splitBy || field.name === splitBy
-  );
-  if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
-    const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
-    splitDataSources = {};
-    splitByColumn.forEach((val, idx) => {
-      if (!splitDataSources[val]) {
-        splitDataSources[val] = [idx];
-      } else {
-        splitDataSources[val].push(idx);
-      }
-    });
-    const cloneFields = (0, lodash_exports.cloneDeep)(fields);
-    cloneFields.splice(splitByIndex, 1);
-    const valueKeys = Object.keys(splitDataSources);
-    valueKeys.forEach((val) => {
-      const valIndices = (0, lodash_exports.cloneDeep)(splitDataSources[val]);
-      splitDataSources[val] = (0, lodash_exports.cloneDeep)(
-        (0, lodash_exports.omit)(dataSource, ["primary.data.fields", "primary.data.columns"])
-      );
-      splitDataSources[val].primary.data.fields = cloneFields;
-      splitDataSources[val].primary.data.columns = [];
-      columns.forEach((col, idx) => {
-        if (idx !== splitByIndex) {
-          const newCol = valIndices.map((valIdx) => col[valIdx]);
-          splitDataSources[val].primary.data.columns.push(newCol);
+          }
         }
-      });
-    });
-  } else {
-    errorCode = "INVALID_SPLIT_BY_FIELD";
+      ],
+      [
+        __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
+        }
+      ]
+    ]
   }
-  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.singlevalue",
+  /**
+   * viz name
+   */
+  name: (0, i18n_exports._)("Single value"),
+  category: "Single Value" /* SINGLE_VALUE */,
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_exports.SingleValue,
+  placeholderIcon: placeholders_exports.SingleValue,
+  dataContract,
+  size,
+  defaultContext,
+  optionsSchema: visualization_schemas_exports.singleValueOptionsSchema,
+  editorConfig,
+  events: {
+    "value.click": {
+      description: "trigger when user clicks major value",
+      payloadKeys: ["majorValue", "trendValue"]
     }
-  } catch (ex) {
-    console.error("getTrellisDataSourcesBySplitMode ", ex);
-    result = { splitDataSources: null, errorCode: "UNKNOWN" };
-  }
-  return result;
+  },
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */, "placeholder" /* PLACEHOLDER */, "trellis" /* TRELLIS */],
+  themes,
+  requiredProps: ["majorValue"]
 };
+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;
 
 // src/common/hocs/withTrellis.tsx
 var TrellisContainer = styled_components_default.div`
@@ -4280,7 +4329,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;
@@ -4351,10 +4404,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) {
@@ -4383,6 +4436,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,
         {
@@ -4391,7 +4451,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",
@@ -4412,7 +4472,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
@@ -4464,11 +4527,16 @@ var computeVizProps = (_a) => {
   }
   return __spreadValues({ defaultThemeColors }, props);
 };
+var computeVizPropsBeforeEval = (options) => {
+  const trendColor = getTrendColorWithPercent(options);
+  return __spreadValues({}, trendColor);
+};
 var viz = withTrellis_default(
   withDashboardViz_default({
     ReactViz: SingleValue_default,
     vizConfig: config_default,
     computeVizProps,
+    computeVizPropsBeforeEval,
     useIconPlaceholder: (dataSources, loading) => isLoadingOrNoColumns(dataSources, loading)
   })
 );