@splunk/visualizations 28.2.1 → 28.3.0

package/CHANGELOG.external.md

@@ -4,7 +4,64 @@ All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 
-## 28.2.1 (2025-10-07)
+# 28.3.0 (2025-11-12)
+
+
+### Bug Fixes
+
+* **ATEAM-8:** SV, SVR, SVI - major value focus handling (adbfe5c)
+* **SCP-77438:** Line Canvas & Timeline - full screen DPR (715bd82)
+* **SCP-77523:** Line Canvas - legend and uPlot option update flickering issue (7132636)
+* **SCP-77864:** Line Canvas - annotation render with zoom scalefactor (40383e4)
+* **SCP-77947:** table - multi value fields don't render if null exists (5f4a8f9)
+* **SCP-78054:** fix overflow layout for icon placeholder (e533a43)
+* **SCP-78175:** table - should not overflow when resized (3eb40ce)
+* **SCP-78214:** table - Column and Header text-overflow (2331753)
+* **SCP-78441:** Canvas - add fallback font (3fb9384)
+* map force redraw after load (a7c4630)
+
+
+### Features
+
+* **SCP-57572:** SVI - supports relative urls (d352ec2)
+* **SCP-71126:** SV, SVR, SVI - support sum() in DSL for the major value option (ef82c72)
+* **SCP-71252:** Line Canvas - support axis label visibility (c9fae38)
+* **SCP-71260:** Line Canvas - support marker display option (622ba2b)
+* **SCP-71264:** Line Canvas - event handlers for mouseover and mouseout (543bf39)
+* **SCP-76181:** Pie - add option for percentage precision (fef39a3)
+* **SCP-77884:** Table - add footer to DSL and apply columnFormat rules (ac52b0c)
+* **SPL-280621:**  ChoroplethSVG - dispatch focusin event on click for choropleth svg visualizations (222633f)
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+# 28.2.2 (2025-10-15)
+
+
+### Bug Fixes
+
+* **SCP-78175:** Table - hide the paginator if height is smaller than the paginator (81eead9)
+* **SCP-78175:** Table - should not overflow when resized (b4ae976)
+* **SCP-78214:** Table - column and header text-overflow (25fbabb)
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+
+
+# 28.2.1 (2025-10-07)
 
 
 ### Bug Fixes

package/ChoroplethSvg/ChoroplethSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoroplethSvg.d.ts","sourceRoot":"","sources":["../src/ChoroplethSvg/ChoroplethSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,kBAAkB,MAAM,kDAAkD,CAAC;AAClF,OAAO,YAAY,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAuC,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAI5G,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAK7D,eAAO,MAAM,MAAM,0CAAY,CAAC;AAChC,eAAO,MAAM,iBAAiB,6GAA6B,CAAC;AAC5D;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GAC/B,qBAAoB,kBAAuB,EAC3C,eAAc,YAAmB,KAClC;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;CAgB9B,CAAC;AAuDF,wBAAgB,kBAAkB,CAC9B,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAAA;CAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACjC,OAAO,CAIT;AAED,QAAA,MAAM,WAAW,yJAIK,CAAC;AACvB,eAAe,WAAW,CAAC"}

package/ChoroplethSvg/ErrorMessage/ErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../src/ChoroplethSvg/ErrorMessage/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,QAAA,MAAM,YAAY,GAAI,cAAc;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,sBASpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/ChoroplethSvg/PureChoroplethSvg/PureChoroplethSvg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PureChoroplethSvg.d.ts","sourceRoot":"","sources":["../../src/ChoroplethSvg/PureChoroplethSvg/PureChoroplethSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAoBnD,MAAM,WAAW,sBAAsB;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,sBAAsB,GAAI;;CAAY;;;;;;;;;;CAkBlD,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,cAAc,sBAAsB,sBAiC9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/ChoroplethSvg/PureChoroplethSvg/SvgChoroplethDynamic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgChoroplethDynamic.d.ts","sourceRoot":"","sources":["../../src/ChoroplethSvg/PureChoroplethSvg/SvgChoroplethDynamic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,cAAc,GAAG;IACrD,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,UAAU,kBAAkB;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAC7D,yBAAyB,EACzB,kBAAkB,CACrB;IACG,IAAI,EAAE,IAAI,CAAC;gBAEC,KAAK,KAAA,EAAE,OAAO,KAAA;IAM1B,iBAAiB,IAAI,IAAI;IAIzB,qBAAqB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,GAAG,OAAO;IAUpD,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,yBAAyB,CAAC,GAAG,IAAI;IAWxE,oBAAoB;IAMpB,eAAe,GAAI,IAAI,WAAW,KAAG,IAAI,CAIvC;IAEF,YAAY,GAAI,MAAM,IAAI,KAAG,IAAI,CAO/B;IAEF,MAAM,IAAI,IAAI;IAed,MAAM,IAAI,GAAG,CAAC,OAAO;CAiBxB"}

package/ChoroplethSvg/PureChoroplethSvg/SvgMutator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgMutator.d.ts","sourceRoot":"","sources":["../../src/ChoroplethSvg/PureChoroplethSvg/SvgMutator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;KAAE,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,4BAA4B,8CAA8C,CAAC;AAExF;;;;;GAKG;AACH,qBAAa,UAAU;IACnB,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,KAAK,CAAiB;IAE9B;;;OAGG;gBACS,KAAK,EAAE,cAAc;IAMjC;;;;;;OAMG;IACH,MAAM,CAAC,WAAW,GAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAe,GAAG,KAAK,CAAC,YAAY;IAKxE;;;;;;;;OAQG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAiB5B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IActB;;;;;;;OAOG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IA6EjC,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAmBnC;;;;;;;OAOG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAU5B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAWvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,MAAM,CAAC,UAAU;IA0CzB,OAAO,CAAC,MAAM,CAAC,gBAAgB;WAsDjB,MAAM,CAAC,KAAK,EAAE,MAAM;IAIlC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAuB;WAElC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI;IA0E1E,MAAM,CAAC,2BAA2B,CAC9B,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,GAAG,EACf,GAAG,EAAE,WAAW,EAChB,KAAK,UAAQ,IAEN,MAAC;IAkDZ,MAAM,CAAC,yBAAyB,CAAC,OAAO,KAAA,EAAE,eAAe,KAAA,EAAE,UAAU,KAAA,EAAE,WAAW,KAAA,GAAG,IAAI;CAS5F"}

package/ChoroplethSvg/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/ChoroplethSvg/config.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;;AAiL3D,wBAAqC"}

package/ChoroplethSvg/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/ChoroplethSvg/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/ChoroplethSvg.js

@@ -505,7 +505,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.1 - b6faf8893"
+  "data-splunk-visualization-version": "28.3.0 - 843e0f60b"
 })`
     position: relative;
     width: 100%;
@@ -562,14 +562,18 @@ var FixSizeItem = styled_components_default.div.attrs(
   ({
     width,
     height
-  }) => ({
-    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-  })
+  }) => {
+    const validHeight = typeof height === "number" ? Math.max(height, 1) : height;
+    return {
+      style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), validHeight && { height: (0, style_exports.toPx)(validHeight) })
+    };
+  }
 )`
     position: relative;
     flex-direction: column;
     flex: 1;
     display: flex;
+    overflow: hidden !important;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
 var ItemContent = styled_components_default.div`
@@ -582,6 +586,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -599,7 +604,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.1 - b6faf8893",
+        "data-splunk-visualization-version": "28.3.0 - 843e0f60b",
         width,
         height,
         backgroundColor
@@ -1153,9 +1158,14 @@ var getAnnotationsForCanvas = ({
 var StyledTriangle = styled_components_default(Triangle_default)`
     color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
 `;
-var triangleEventAnnotationRenderer = ({ event }) => {
+var triangleEventAnnotationRenderer = ({
+  event,
+  dimensions
+}) => {
   const eventWithColor = event;
   return react_default.createElement(StyledTriangle, {
+    width: `${dimensions.width}px`,
+    height: `${dimensions.height}px`,
     viewBox: "0 0 24 24",
     variant: "filled",
     eventColor: eventWithColor.color
@@ -1245,12 +1255,15 @@ var getFieldName = (field) => {
 var getFieldNames = (fields) => {
   return fields.map((field) => getFieldName(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -1263,9 +1276,12 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
@@ -1277,9 +1293,12 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1311,6 +1330,9 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
       seriesConfig[field].type = "line";
     }
+    if (markerDisplay !== void 0) {
+      seriesConfig[field].markerDisplay = markerDisplay;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -1327,27 +1349,30 @@ var TimeSeriesChartContainer = styled_components_default.div`
         position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
     }
 `;
-var handleClick = (chartEvent, props) => {
+var handleClick = (chartEvent, onClick) => {
   const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
     name: chartEvent.seriesKey
   });
   delete payload.seriesKey;
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (chartEvent.rowContext) {
+    Object.keys(chartEvent.rowContext).forEach((fieldName) => {
+      payload[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+    });
+  }
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
       payload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
       payload
@@ -1355,7 +1380,21 @@ var handleLegendClick = (chartEvent, props) => {
   }
 };
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut
+  } = props;
   const {
     backgroundColor,
     seriesColors: seriesColorsStr,
@@ -1366,6 +1405,9 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -1402,11 +1444,17 @@ var TimeSeriesChartWrapper = (props) => {
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
+  const xScaleConfig = getXScaleConfig(xAxisTitle, xAxisLabelVisibility);
+  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility);
   let y2ScaleConfig = {};
   if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
+    y2ScaleConfig = getY2ScaleConfig(
+      y2AxisTitle,
+      y2AxisAbbreviation,
+      y2AxisScale,
+      y2IntegerUnits,
+      y2AxisLabelVisibility
+    );
   }
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
@@ -1415,24 +1463,87 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
-  const seriesOverrides = getSeriesOverrides(
-    yFields,
-    y2Fields,
-    lineWidth,
-    overlayFields,
-    y2Enabled,
-    nullValueMode
+  const seriesOverrides = (0, react_exports.useMemo)(
+    () => getSeriesOverrides(
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay
+    ),
+    [yFields, y2Fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay]
+  );
+  const chartingEventAnnotations = (0, react_exports.useMemo)(
+    () => getAnnotationsForCanvas({
+      annotationX,
+      annotationColor,
+      annotationLabel
+    }),
+    [annotationX, annotationColor, annotationLabel]
+  );
+  const scaleConfig = (0, react_exports.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
+    [xScaleConfig, yScaleConfig, y2ScaleConfig]
+  );
+  const legend = (0, react_exports.useMemo)(() => getLegend({ legendDisplay }), [legendDisplay]);
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  const handleChartCrosshairChange = react_exports.useCallback(
+    (event) => {
+      if (onPointMouseOver || onPointMouseOut) {
+        if (!event) {
+          if (onPointMouseOut && lastPayloadRef.current) {
+            onPointMouseOut({
+              type: "point.mouseout",
+              originalEvent: lastOriginalEventRef.current,
+              payload: lastPayloadRef.current
+            });
+          }
+          return;
+        }
+        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+          name: event.seriesKey
+        });
+        delete payload.seriesKey;
+        if (event.rowContext) {
+          Object.keys(event.rowContext).forEach((fieldName) => {
+            payload[`row.${fieldName}.value`] = event.rowContext[fieldName];
+          });
+        }
+        lastPayloadRef.current = payload;
+        lastOriginalEventRef.current = event;
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut]
   );
-  const chartingEventAnnotations = getAnnotationsForCanvas({
-    annotationX,
-    annotationColor,
-    annotationLabel
-  });
-  const MemoizedChart = react_exports.memo(visualization_canvas_exports.TimeSeriesChart);
-  const scaleConfig = __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig);
   const memoizedChart = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_exports.createElement(
-      MemoizedChart,
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -1440,34 +1551,39 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
         scaleConfig,
         timestampFormat: "expanded",
-        onCrosshairClick: (event) => handleClick(event, props),
-        onSeriesClick: (event) => handleLegendClick(event, props),
+        onCrosshairClick: onClick ? handleChartClick : void 0,
+        onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
+        onSeriesClick: onClick ? handleChartLegendClick : void 0,
         userLocale,
         events: chartingEventAnnotations,
         eventsConfig: { renderer: triangleEventAnnotationRenderer }
       }
     ),
     [
-      MemoizedChart,
       chartData,
       containerWidth,
       containerHeight,
       seriesColors,
       seriesColorsByField,
       seriesOverrides,
-      lineWidth,
-      props,
+      legend,
       scaleConfig,
       userLocale,
-      chartingEventAnnotations
+      chartingEventAnnotations,
+      onClick,
+      handleChartClick,
+      onPointMouseOver,
+      onPointMouseOut,
+      handleChartCrosshairChange,
+      handleChartLegendClick
     ]
   );
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
+  }, [backgroundColor, memoizedChart]);
   return /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
@@ -1483,6 +1599,7 @@ var TimeSeriesChartWrapper = (props) => {
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -1491,6 +1608,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder: useIconPlaceholder2
   } = opts;
@@ -1619,11 +1737,19 @@ var withDashboardViz = (opts) => {
             );
             setDataFramesInState(dataFrames);
           }
+          let mergedFrames = dataFrames;
+          if (computeDataFrames && dataFrames) {
+            const derivedFrames = computeDataFrames({
+              dataSources: downsampledDataSources,
+              options: optionsToEvaluate.options
+            });
+            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+          }
           const result = Options_exports.Options.evaluate(
             optionsToEvaluate,
             downsampledDataSources,
             themeFunc,
-            dataFrames,
+            mergedFrames,
             getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
           );
           return result;
@@ -1711,7 +1837,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -1735,10 +1861,7 @@ var withDashboardViz = (opts) => {
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
-    let SanitizedViz = SanitizedReactViz;
-    if (isAcceleratedRenderOn) {
-      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
-    }
+    const SanitizedViz = isAcceleratedRenderOn ? SanitizedTimeSeriesChartWrapper : SanitizedReactViz;
     return /* @__PURE__ */ react_exports.createElement(
       SanitizedViz,
       __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {
@@ -2170,9 +2293,7 @@ value: ${data.values[i]}`;
           }, eventSetting));
           const outlineDiv = div.closest('[data-test="select-outline"]');
           if (outlineDiv) {
-            const focusEvent = new FocusEvent("focus", {
-              bubbles: true,
-              cancelable: true,
+            const focusEvent = new FocusEvent("focusin", {
               relatedTarget: outlineDiv
             });
             outlineDiv.dispatchEvent(focusEvent);