@splunk/visualizations 28.8.0 → 28.9.0

package/SingleValue.js

@@ -324,7 +324,7 @@ var getTrendColor = ({
   if (hasBackground(customizedBgColor) && !isIdenticalColor(customizedBgColor, defaultBackgroundColor2) && !isIdenticalColor(customizedBgColor, defaultBlockFontColor)) {
     return defaultBlockFontColor;
   }
-  const isInvalidTrend = trendDisplay === "percent" && trendValue === parseFloat(majorValue);
+  const isInvalidTrend = trendDisplay === "percent" && trendValue === Number.parseFloat(majorValue);
   if (trendValue === 0 || isInvalidTrend) {
     return defaultFontColor;
   }
@@ -365,7 +365,7 @@ var computeText = ({
   let text = (0, numberUtils_exports.isNumerial)(value) ? (0, numberUtils_exports.formatNumber)(value, numberPrecision, {
     useThousandSeparators: shouldUseThousandSeparators,
     useTrendUnits: shouldAbbreviateValue
-  }) : value;
+  }) : String(value != null ? value : "");
   text = text || "";
   return text;
 };
@@ -395,23 +395,20 @@ var getTrendText = ({
     shouldUseThousandSeparators,
     shouldAbbreviateValue: shouldAbbreviateTrendValue
   });
-  if (trendValue === "" || !(0, numberUtils_exports.isNumerial)(trendValue)) {
-    return "";
-  }
+  let trendText = "";
   const showPercent = trendDisplay === "percent";
-  if (!showPercent) {
-    return compute(trendValue);
-  }
-  const diff = Math.abs(trendValue - majorValue);
-  let val = trendValue / diff * 100;
-  if (trendValue === 0 && diff === 0) {
-    val = 0;
-  }
-  if (!Number.isFinite(val)) {
-    return "N/A";
+  const isValidTrend = trendValue !== "" && (0, numberUtils_exports.isNumerial)(trendValue);
+  if (isValidTrend && !showPercent) {
+    trendText = compute(trendValue);
+  } else if (isValidTrend && showPercent) {
+    const diff = Math.abs(trendValue - majorValue);
+    let val = trendValue / diff * 100;
+    if (trendValue === 0 && diff === 0) {
+      val = 0;
+    }
+    trendText = Number.isFinite(val) ? `${compute(val)}%` : "N/A";
   }
-  const text = compute(val);
-  return `${text}%`;
+  return trendText;
 };
 var computeFontSize = (text, { width, height }, fontFamily = DEFAULT_FONT_FAMILY, fontWeight = "normal") => {
   const widthInDefaultFont = (0, domUtils_exports.computeTextSize)(text, `${fontWeight} ${DEFAULT_FONT}px ${fontFamily}`);
@@ -419,7 +416,7 @@ var computeFontSize = (text, { width, height }, fontFamily = DEFAULT_FONT_FAMILY
     width / widthInDefaultFont * DEFAULT_FONT,
     height / DEFAULT_FONT * DEFAULT_FONT
   );
-  return parseInt(fontSize, 10);
+  return Number.parseInt(fontSize, 10);
 };
 var getMajorFontSize = ({ width, height, unit, majorText, spaceRatio = 1 }) => {
   const majorTextCalc = unit ? `${unit}${majorText}` : majorText;
@@ -435,7 +432,7 @@ var getTrendFontSize = ({ width, height, trendText, spaceRatio = 1 }) => {
       width: width * spaceRatio,
       height
     });
-    trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;
+    trendFontSize = Number.parseInt(trendFontSize, 10) * spaceRatio;
   }
   return trendFontSize;
 };
@@ -512,7 +509,7 @@ var updateVizInSmallSpace = ({
   let newTextSize = majorTextFontSize;
   while (newTextSize < 12 && removeIndex < toRemoveList.length) {
     const toRemove = toRemoveList[removeIndex];
-    newProps = __spreadValues(__spreadValues({}, newProps), {
+    newProps = __spreadProps(__spreadValues({}, newProps), {
       [toRemove.key]: toRemove.value
     });
     newMajorAndTrend = getMajorAndTrend(__spreadValues({
@@ -645,9 +642,9 @@ var getUnchangedColorDelta = (r, g, b, ratio) => {
 };
 var changeColor = (color, ratio) => {
   const hex = color.replace(/(0x|#)/, "");
-  const r = parseInt(hex.substr(0, 2), 16);
-  const g = parseInt(hex.substr(2, 2), 16);
-  const b = parseInt(hex.substr(4, 2), 16);
+  const r = Number.parseInt(hex.substr(0, 2), 16);
+  const g = Number.parseInt(hex.substr(2, 2), 16);
+  const b = Number.parseInt(hex.substr(4, 2), 16);
   let newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);
   let newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);
   let newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);
@@ -657,7 +654,7 @@ var changeColor = (color, ratio) => {
     newG = adjustRGB(newG, delta);
     newB = adjustRGB(newB, delta);
   }
-  return `#${newR.toString(16).padStart(2, 0)}${newG.toString(16).padStart(2, 0)}${newB.toString(16).padStart(2, 0)}`;
+  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, trellisContext = {}) => {
@@ -713,7 +710,7 @@ var Column = styled_components_default.div`
     flex-direction: row;
     justify-content: ${(props) => props.justify || "flex-end"};
     height: ${(props) => props.size || 12}px;
-    ${(props) => props.size ? `margin: 0 ${parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
+    ${(props) => props.size ? `margin: 0 ${Number.parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
 `;
 var Text = styled_components_default.div`
     white-space: nowrap;
@@ -724,15 +721,15 @@ var Text = styled_components_default.div`
     line-height: ${(props) => props.size || 12}px;
     display: flex;
     align-self: baseline;
-    ${(props) => props.size ? `margin-left: ${parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
+    ${(props) => props.size ? `margin-left: ${Number.parseInt(props.size, 10) * 0.2 || 5}px;` : ""};
 `;
 var TrendValue = ({ fontSize, color, value, text }) => {
   let TrendIndicator = false;
   let ariaLabel = false;
-  if (parseFloat(value, 10) > 0) {
+  if (Number.parseFloat(value, 10) > 0) {
     TrendIndicator = ArrowUp_default;
     ariaLabel = (0, i18n_exports._)("increase");
-  } else if (parseFloat(value, 10) < 0) {
+  } else if (Number.parseFloat(value, 10) < 0) {
     TrendIndicator = ArrowDown_default;
     ariaLabel = (0, i18n_exports._)("decrease");
   }
@@ -1559,7 +1556,7 @@ var CONTENT_NEXT_TO_SPARKLINE_WIDTH_ALLOCATION_RATIO = 0.4;
 var LINEHEIGHT_FACTOR = 1.2;
 var CONTENT_SPARKLINE_SPACING = 16;
 var VALID_SPARKLINE_POSITIONS = ["below", "before", "after", "off"];
-var getUnderLabelHeight = ({ underLabel, underLabelFontSize }) => underLabel && underLabel.length ? underLabelFontSize * LINEHEIGHT_FACTOR : 0;
+var getUnderLabelHeight = ({ underLabel, underLabelFontSize }) => (underLabel == null ? void 0 : underLabel.length) ? underLabelFontSize * LINEHEIGHT_FACTOR : 0;
 var getAvailableContentWidth = ({
   hasSparkline,
   isSparklinePositionBelow,
@@ -1592,14 +1589,14 @@ var parseSparklineValues = ({ sparklineValues }) => Array.isArray(sparklineValue
   }
   return numV || v;
 }) : void 0;
-var shouldShowSparkline = ({ showSparkline, sparklineValues }) => showSparkline && Array.isArray(sparklineValues) && sparklineValues.length > 1 && sparklineValues.every((v) => v === null || !Number.isNaN((0, numberUtils_exports.parseNumber)(v))) && sparklineValues.filter((v) => v !== null).length > 0;
+var shouldShowSparkline = ({ showSparkline, sparklineValues }) => showSparkline && Array.isArray(sparklineValues) && sparklineValues.length > 1 && sparklineValues.every((v) => v === null || !Number.isNaN((0, numberUtils_exports.parseNumber)(v))) && sparklineValues.some((v) => v !== null);
 var getSparklineWidth = ({ width, isSparklinePositionBelow }) => {
   const spaceRatio = isSparklinePositionBelow ? 1 : 0.6;
   return width * spaceRatio;
 };
 var getSparklineHeight = ({ height, contentHeight, isSparklinePositionBelow }) => {
   const belowPositionHeight = height - contentHeight;
-  const sanitizedBelowPositionHeight = belowPositionHeight < 0 ? 0 : belowPositionHeight;
+  const sanitizedBelowPositionHeight = Math.max(0, belowPositionHeight);
   return isSparklinePositionBelow ? sanitizedBelowPositionHeight : height;
 };
 var getSparklineSegments = ({ hasSparkline, sparklineHighlightSegments }) => hasSparkline && typeof sparklineHighlightSegments === "number" && sparklineHighlightSegments > 0 ? sparklineHighlightSegments + 1 : 0;
@@ -2283,7 +2280,10 @@ var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
     onSort = (e, { sortKey, sortDir }) => {
       if (typeof sortKey === "string") {
         const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
-        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
+        onRequestParamsChange(__spreadProps(__spreadValues({}, requestParams), {
+          offset: 0,
+          sort: { [sortKey]: nextSortDir }
+        }));
       } else {
         onRequestParamsChange(requestParams);
       }
@@ -2409,7 +2409,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.8.0 - 633c53372"
+  "data-splunk-visualization-version": "28.9.0 - 96b03188d"
 })`
     position: relative;
     width: 100%;
@@ -2444,6 +2444,15 @@ var defaultImport31 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
 var variables_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport32 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
   style: {
@@ -2499,7 +2508,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.8.0 - 633c53372",
+        "data-splunk-visualization-version": "28.9.0 - 96b03188d",
         width,
         height,
         backgroundColor
@@ -2520,6 +2529,14 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
+var PlaceholderContainer = styled_components_default.div`
+    /* The inline token color wins when supported. Older browsers discard an
+       unsupported oklch value and retain this inherited fallback instead. */
+    color: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+`;
 var IconPlaceholder = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -2534,7 +2551,6 @@ var IconPlaceholder = (props) => {
       style: {
         left: "50%",
         top: "50%",
-        color: iconColor,
         opacity: 0.15,
         position: "absolute",
         transform: "translate(-50%, -50%)"
@@ -2544,7 +2560,14 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
+  return /* @__PURE__ */ react_exports.createElement(
+    PlaceholderContainer,
+    {
+      "data-test": "icon-placeholder-container",
+      style: { width, height, background: backgroundColor, color: iconColor }
+    },
+    content
+  );
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -2609,7 +2632,7 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
     let avgY = 0;
     let avgRangeStart = Math.floor((i + 1) * every) + 1;
     let avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    avgRangeEnd = Math.min(avgRangeEnd, dataLength);
     const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
       avgX += Number(data[avgRangeStart][0]);
@@ -2644,9 +2667,9 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
 };
 var strictlyCoerceYColumn = (column, options) => {
   const isNullCoercionEnabled = options.nullValueDisplay === "zero";
-  const canLooselyCoerceSomeValues = column.findIndex(
+  const canLooselyCoerceSomeValues = column.some(
     (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
-  ) >= 0;
+  );
   const coercedColumn = [];
   const canDownsampleColumn = !column.some((value) => {
     const coercedValue = Number(value);
@@ -2665,7 +2688,7 @@ var strictlyCoerceYColumn = (column, options) => {
 };
 var strictlyCoerceXColumn = (column, fieldType) => {
   if (fieldType === "number") {
-    const coercedXColumn = column.map((xValue) => Number(xValue));
+    const coercedXColumn = column.map(Number);
     if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
       return coercedXColumn;
     }
@@ -2964,16 +2987,16 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport33 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var FeatureFlags_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
-  if (context && Object.keys(context).find((key) => key === flagName)) {
+  if (context && Object.keys(context).includes(flagName)) {
     return context[flagName];
   }
-  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+  if (Object.keys(FeatureFlags_default).includes(flagName)) {
     return FeatureFlags_default[flagName];
   }
   return false;
@@ -2984,9 +3007,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport33 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport34 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var trellisUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // src/common/utils/trellisUtils.ts
 var AGGREGATIONS = "aggregations";
@@ -3207,7 +3230,7 @@ var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
     splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
   }
   if (splitByFields == null ? void 0 : splitByFields.includes(splitBy)) {
-    const splitByFieldIdx = splitByFields.findIndex((f) => f === splitBy);
+    const splitByFieldIdx = splitByFields.indexOf(splitBy);
     const otherSplitBy = splitByFields.filter((f) => f !== splitBy);
     const dataSourceKeys = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
     const nonDataSourceAggregations = [];
@@ -3241,17 +3264,17 @@ var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
   let splitByFields = [];
   let errorCode = null;
   if (fields.length > 0) {
-    splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
+    splitByFields = splitMode === trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields);
   }
   const splitByIndex = fields.findIndex((field) => field.name === splitBy);
   if (splitByFields == null ? void 0 : splitByFields.includes(splitBy)) {
     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 {
+      if (splitDataSources[val]) {
         splitDataSources[val].push(idx);
+      } else {
+        splitDataSources[val] = [idx];
       }
     });
     const cloneFields = (0, lodash_exports.cloneDeep)(fields);
@@ -3302,27 +3325,28 @@ var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
   }
   return {};
 };
+var extendMinMaxWithColumn = (column, range2) => column.reduce((acc, point) => {
+  const pointNumber = Number(point);
+  if (Number.isNaN(pointNumber)) {
+    return acc;
+  }
+  return {
+    min: Math.min(pointNumber, acc.min),
+    max: Math.max(pointNumber, acc.max)
+  };
+}, range2);
 var calculateSharedMinMax = (splitData) => {
-  let max2 = -Infinity;
-  let min2 = Infinity;
+  let range2 = { min: Infinity, max: -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;
-          }
-        });
+        range2 = extendMinMaxWithColumn(column, range2);
       });
     });
   });
-  return [min2, max2];
+  return [range2.min, range2.max];
 };
 var determineMinMax = (splitData, trellisSharedScale, yAxisMin, yAxisMax, stackMode) => {
   if (!trellisSharedScale || stackMode === "stacked100" || yAxisMin !== "auto" && yAxisMax !== "auto")
@@ -3338,27 +3362,27 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport35 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var visualization_canvas_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/react-icons/Triangle
 var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport35 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport36 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var Triangle_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport37 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var simpleXMLOptions_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -3397,9 +3421,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
+var canvasSupportedTimeSeriesCharts = /* @__PURE__ */ new Set(["splunk.line", "splunk.area"]);
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
+  return canvasSupportedTimeSeriesCharts.has(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -3415,7 +3439,7 @@ var filterChartDataFromInternalFields = (chartData) => {
   return { fields: filteredFields, columns: filteredColumns };
 };
 var convert2DArrayToNumbers = (arr) => {
-  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+  return arr.map((subArray) => subArray.map((element) => Number.parseFloat(element)));
 };
 var parseAxisValue = (val) => {
   if (val === void 0 || val === null || val === "auto" || val === "") {
@@ -3453,6 +3477,7 @@ var getLegend = (props) => {
       return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
         wrap: true
       }, commonLegendProps));
+    // Note: By default, use right legend
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
@@ -3585,10 +3610,10 @@ var getSeriesOverrides = (opts) => {
   let spanGaps;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode != null) {
-    spanGaps = true;
-  } else {
+  } else if (nullValueMode == null) {
     spanGaps = void 0;
+  } else {
+    spanGaps = true;
   }
   const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
   const isAreaChart = type === "area";
@@ -3958,11 +3983,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize == null ? void 0 : Number(xAxisMajorTickSize);
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize == null ? void 0 : Number(yAxisMajorTickSize);
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize == null ? void 0 : Number(y2AxisMajorTickSize);
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize == null ? void 0 : Number(yAxisMinorTickSize);
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize == null ? void 0 : Number(y2AxisMinorTickSize);
   const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
@@ -4374,6 +4399,76 @@ var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTr
   });
   return result;
 };
+var buildAllEventCallbackProps = (events, evaluatedOptionsToUse, onEventTrigger, { supportsEvents, hasEventHandlers, mode }) => {
+  if (!supportsEvents) return {};
+  const defaultEvents = {};
+  const userEvents = {};
+  Object.entries(events || {}).forEach(([eventKey, eventConfig]) => {
+    (eventConfig.source === "default" ? defaultEvents : userEvents)[eventKey] = eventConfig;
+  });
+  const userProps = hasEventHandlers && mode === "view" ? buildEventCallbackProps(userEvents, evaluatedOptionsToUse, onEventTrigger) : {};
+  return __spreadValues(__spreadValues({}, userProps), buildEventCallbackProps(defaultEvents, evaluatedOptionsToUse, onEventTrigger));
+};
+var applyContextTimezone = (localeContext) => {
+  if (localeContext.serializedTimezone && !moment_default.getDefaultSplunkTimezone()) {
+    moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
+  }
+};
+var getAsyncOptionsEvaluationParams = ({
+  visualizationID,
+  props,
+  optionsToEvaluate,
+  downsampledDataSources,
+  vizConfig,
+  bypassCloneDeepOptionScope,
+  lazyLoadingDataFrame
+}) => {
+  return {
+    visualizationID,
+    props,
+    options: __spreadValues({}, optionsToEvaluate),
+    dataSources: downsampledDataSources,
+    theme: vizConfig.themes,
+    bypassCloneDeepOptionScope,
+    lazyLoadingDataFrame
+  };
+};
+var evaluateOptionsSync = ({
+  optionsToEvaluate,
+  downsampledDataSources,
+  dataSourcesInState,
+  dataFramesInState,
+  setDataSourcesInState,
+  setDataFramesInState,
+  computeDataFrames,
+  featureFlagContext,
+  themeFunc
+}) => {
+  let dataFrames = dataFramesInState;
+  if (downsampledDataSources !== dataSourcesInState) {
+    setDataSourcesInState(downsampledDataSources);
+    dataFrames = Options_exports.Options.dataFrameFromDataSource(
+      downsampledDataSources,
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
+    setDataFramesInState(dataFrames);
+  }
+  let mergedFrames = dataFrames;
+  if (computeDataFrames && dataFrames) {
+    const derivedFrames = computeDataFrames({
+      dataSources: downsampledDataSources,
+      options: optionsToEvaluate.options
+    });
+    mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+  }
+  return Options_exports.Options.evaluate(
+    optionsToEvaluate,
+    downsampledDataSources,
+    themeFunc,
+    mergedFrames,
+    getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+  );
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -4405,11 +4500,7 @@ var withDashboardViz = (opts) => {
       onRequestParamsChange = lodash_exports.noop
     } = props;
     const localeContext = react_exports.useContext(TimezoneContext_default);
-    if (localeContext.serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
-      }
-    }
+    applyContextTimezone(localeContext);
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
@@ -4437,7 +4528,12 @@ var withDashboardViz = (opts) => {
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
     );
     const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
-    const isMounted = react_exports.useRef(true);
+    const bypassCloneDeepOptionScope = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+    );
+    const lazyLoadingDataFrame = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
       const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
@@ -4476,63 +4572,74 @@ var withDashboardViz = (opts) => {
       threshold,
       isDownsamplingEnabled
     });
-    evaluatedOptions = useDeepMemo(() => {
+    const asyncOptionsEvaluationParams = useDeepMemo(
+      () => getAsyncOptionsEvaluationParams({
+        visualizationID,
+        props,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame
+      }),
+      [
+        visualizationID,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame,
+        currentThemeFamily,
+        currentThemeColorScheme,
+        currentThemeDensity,
+        localeContext.serializedTimezone
+      ]
+    );
+    react_exports.useEffect(() => {
+      if (!useAsyncEvaluatedOptions) {
+        return void 0;
+      }
+      let ownsEvaluation = true;
       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) => {
+        async_dynamic_options_evaluator_default.evaluate(asyncOptionsEvaluationParams).then((results) => {
+          if (ownsEvaluation) {
             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);
           }
-          let mergedFrames = dataFrames;
-          if (computeDataFrames && dataFrames) {
-            const derivedFrames = computeDataFrames({
-              dataSources: downsampledDataSources,
-              options: optionsToEvaluate.options
-            });
-            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+        }).catch(() => {
+          if (ownsEvaluation) {
+            setUseAsyncEvaluatedOptions(false);
           }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            mergedFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+        });
+      } catch (e) {
+        setUseAsyncEvaluatedOptions(false);
+      }
+      return () => {
+        ownsEvaluation = false;
+        async_dynamic_options_evaluator_default.reset(visualizationID);
+      };
+    }, [asyncOptionsEvaluationParams, useAsyncEvaluatedOptions, visualizationID]);
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          return {};
         }
+        return evaluateOptionsSync({
+          optionsToEvaluate,
+          downsampledDataSources,
+          dataSourcesInState,
+          dataFramesInState,
+          setDataSourcesInState,
+          setDataFramesInState,
+          computeDataFrames,
+          featureFlagContext,
+          themeFunc
+        });
       } catch (e) {
         if (e instanceof Error) {
           console.error(`unexpected error evaluating options: ${e.message}`);
         }
         return {};
       }
-      return {};
     }, [
       currentThemeFamily,
       currentThemeColorScheme,
@@ -4542,7 +4649,7 @@ var withDashboardViz = (opts) => {
       localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const evaluatedOptionsToUse = useAsyncEvaluatedOptions ? evaluatedOptionsAsync : evaluatedOptions;
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
     const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
@@ -4564,7 +4671,7 @@ var withDashboardViz = (opts) => {
       sortParams,
       paginatorParams
     };
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+    if (!vizConfig.supports.includes("page-and-sort" /* PAGE_AND_SORT */) && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       dataSourceMetadata = {};
     }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
@@ -4574,14 +4681,6 @@ var withDashboardViz = (opts) => {
     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") {
@@ -4596,7 +4695,16 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const eventCallbackProps = buildAllEventCallbackProps(
+      vizConfig.events,
+      evaluatedOptionsToUse,
+      onEventTrigger,
+      {
+        supportsEvents: vizConfig.supports.includes("events" /* EVENTS */),
+        hasEventHandlers,
+        mode
+      }
+    );
     const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
       // Align option transformation with the actual renderer selected below.
       // This prevents canvas-only option preservation from leaking into Highcharts mode.
@@ -4624,8 +4732,9 @@ var withDashboardViz = (opts) => {
     onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  return Object.assign(
+    (0, styled_components_exports.withTheme)(withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)),
+    { config: vizConfig }
   );
 };
 var withDashboardViz_default = withDashboardViz;
@@ -4635,45 +4744,45 @@ var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport37 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport38 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var PresetPalettes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/visualization-themes/variables
 var variables_exports2 = {};
 __export(variables_exports2, {
   default: () => variables_default2
 });
-var defaultImport38 = __toESM(require("@splunk/visualization-themes/variables"));
+var defaultImport39 = __toESM(require("@splunk/visualization-themes/variables"));
 __reExport(variables_exports2, require("@splunk/visualization-themes/variables"));
-var variables_default2 = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var variables_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/themes/pick
 var pick_exports2 = {};
 __export(pick_exports2, {
   default: () => pick_default2
 });
-var defaultImport39 = __toESM(require("@splunk/themes/pick"));
+var defaultImport40 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports2, require("@splunk/themes/pick"));
-var pick_default2 = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var pick_default2 = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport41 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var visualization_icons_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport41 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport42 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+var placeholders_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/configContext/singleValueContext.ts
 var defaultContext = {
@@ -4705,9 +4814,9 @@ var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport42 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport43 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+var configUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/editorConfig/DynamicMajorColorEditor.js
 var getDynamicMajorColorEditor = ({ defaultContext: defaultContext2, defaultPalettesConfig: defaultPalettesConfig2 }) => ({
@@ -5499,18 +5608,9 @@ var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport43 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport44 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport44 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
+var Paginator_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
 
 // esm-externals:@splunk/themes/useSplunkTheme
 var useSplunkTheme_exports = {};
@@ -5542,7 +5642,7 @@ var sortTrellisKeys = (keys, trellisSortBy, trellisSortOrder, modifiedDataSource
     if (trellisSortBy === "trend") {
       optionKey = "trendValue";
     } else {
-      optionKey = mergedOptions.value !== void 0 ? "value" : "majorValue";
+      optionKey = mergedOptions.value === void 0 ? "majorValue" : "value";
     }
     keys.sort((a, b) => {
       const valA = evaluatePanelOption(
@@ -5694,13 +5794,13 @@ var withTrellis = (Viz) => {
     const noColumns = columns === void 0;
     const noFields = fields === void 0;
     const updateDataDisplay = (currPage) => {
-      if (!showPaginator) {
-        setPagedData(splitByKeys);
-        setPageNum(1);
-      } else {
+      if (showPaginator) {
         const startIdx = pageCount * (currPage - 1);
         const paged = splitByKeys.slice(startIdx, startIdx + pageCount);
         setPagedData(paged);
+      } else {
+        setPagedData(splitByKeys);
+        setPageNum(1);
       }
     };
     (0, react_exports.useEffect)(() => {