@splunk/visualizations 28.2.1 → 28.3.0

package/SingleValue/SingleValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleValue.d.ts","sourceRoot":"","sources":["../src/SingleValue/SingleValue.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM,0CAAY,CAAC;AAChC,eAAO,MAAM,eAAe,KAAc,CAAC;AAE3C,eAAO,MAAM,eAAe,GAAI;;;CAAuB;;CAsBtD,CAAC;AASF,QAAA,MAAM,GAAG;sEAaioC,IAAK,OAAO;;;CAJrpC,CAAC;AAEF,eAAO,MAAQ,MAAM,KAAc,CAAC;AACpC,eAAe,GAAG,CAAC"}

package/SingleValue/config.d.ts.map

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

package/SingleValue/index.d.ts.map

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

package/SingleValue.js

@@ -782,6 +782,12 @@ var Text2 = styled_components_default.div`
         }`;
 }}
 `;
+var Button = styled_components_default(Text2).attrs({ as: "button", type: "button" })`
+    border: 0;
+    background: transparent;
+    padding: 0;
+    -webkit-appearance: none;
+`;
 var validUnitPositions = ["before", "after"];
 var MajorValue = ({ color, fontSize, unitPosition, title, value, onValueClick, unit }) => {
   let sanitizedUnit;
@@ -794,28 +800,31 @@ var MajorValue = ({ color, fontSize, unitPosition, title, value, onValueClick, u
       sanitizedUnitPosition = "after";
     }
   }
-  const handleKeyDown = (e) => {
-    if (e.keyCode !== 13) {
-      return;
-    }
-    e.preventDefault();
-    onValueClick(e);
-  };
-  return /* @__PURE__ */ react_default.createElement(Row, { size: fontSize }, /* @__PURE__ */ react_default.createElement(
+  return /* @__PURE__ */ react_default.createElement(Row, { size: fontSize }, typeof onValueClick === "function" ? /* @__PURE__ */ react_default.createElement(
+    Button,
+    {
+      "data-test": "majorValue",
+      color,
+      size: fontSize,
+      title,
+      pseudoContent: sanitizedUnit,
+      pseudoContentPosition: sanitizedUnitPosition,
+      pseudoContentFontSize: fontSize * 0.6,
+      showUnderline: true,
+      onClick: onValueClick
+    },
+    value
+  ) : /* @__PURE__ */ react_default.createElement(
     Text2,
     {
       "data-test": "majorValue",
       color,
-      onClick: (e) => typeof onValueClick === "function" && onValueClick(e),
-      showUnderline: !!onValueClick,
       size: fontSize,
       title,
       pseudoContent: sanitizedUnit,
       pseudoContentPosition: sanitizedUnitPosition,
       pseudoContentFontSize: fontSize * 0.6,
-      tabIndex: "0",
-      role: "button",
-      onKeyDown: handleKeyDown
+      showUnderline: false
     },
     value
   ));
@@ -997,7 +1006,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const { pointIndex: pointIndexStr } = target.dataset || {};
     const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
     if (pointIndexStr !== void 0) {
-      const pointIndex = parseInt(pointIndexStr, 10);
+      const pointIndex = Number.parseInt(pointIndexStr, 10);
       if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
         this.setState({
           activeIndex: pointIndex,
@@ -1026,7 +1035,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     if (!allowedKeys.includes(event.key)) {
       return;
     }
-    let newIndex = activeIndex;
+    let newIndex;
     switch (event.key) {
       case "Home":
         newIndex = 0;
@@ -1053,7 +1062,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   handleMouseOver(event) {
     const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
     if (pointIndexStr !== void 0) {
-      const pointIndex = parseInt(pointIndexStr, 10);
+      const pointIndex = Number.parseInt(pointIndexStr, 10);
       if (this.state.hoveredIndex !== pointIndex) {
         this.setState({ hoveredIndex: pointIndex });
       }
@@ -1067,12 +1076,12 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
   getMax() {
     const { data, acceptNull, yMax } = this.props;
     const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
-    return yMax !== void 0 ? yMax : dataMax();
+    return yMax === void 0 ? dataMax() : yMax;
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
     const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
-    return yMin !== void 0 ? yMin : dataMin();
+    return yMin === void 0 ? dataMin() : yMin;
   }
   /**
    * Gets unit value of x axis.
@@ -1109,7 +1118,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const { acceptNull } = this.props;
     const lines = [];
     let currentLine = [];
-    data.forEach((p, idx) => {
+    for (const [idx, p] of data.entries()) {
       if (!acceptNull && (0, lodash_exports.isNull)(p)) {
         if (currentLine.length > 1) {
           lines.push(currentLine);
@@ -1118,7 +1127,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       } else {
         currentLine.push(points[idx]);
       }
-    });
+    }
     if (currentLine.length > 1) {
       lines.push(currentLine);
     }
@@ -1166,7 +1175,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
-          role: "img",
+          role: "graphics-symbol",
           "aria-label": `Value: ${data[i] === null ? "N/A" : data[i]}, point ${i + 1} of ${data.length}`,
           "data-test": `rect-${i}`,
           "data-point-index": i,
@@ -1174,7 +1183,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
           ref: (el) => {
             this.pointRefs[i] = el;
           },
-          x: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
+          x: Math.max(0, p[0] - xUnit / 2),
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
@@ -1193,7 +1202,7 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     let segments = this.getSegmentSets(data, points);
     segments = segments.map(
       (s) => s.concat([
-        [s[s.length - 1][0], height],
+        [s.at(-1)[0], height],
         // down to bottom of graph
         [s[0][0], height],
         // over to below first data point
@@ -1304,6 +1313,53 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
+  getInteractionState({ data, points, showTooltip, activeIndex, hoveredIndex, componentIsFocused }) {
+    if (!showTooltip) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps: {}
+      };
+    }
+    const interactiveProps = {
+      onKeyDown: this.handleKeyDown,
+      onMouseOver: this.handleMouseOver,
+      onMouseLeave: this.handleMouseLeave,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    };
+    const isHovered = hoveredIndex !== null;
+    const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+    if (!shouldDisplayInteractiveElements) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps
+      };
+    }
+    const displayIndex = isHovered ? hoveredIndex : activeIndex;
+    const isValidIndex = displayIndex !== null && displayIndex >= 0;
+    const withinBounds = isValidIndex && displayIndex < data.length && displayIndex < points.length;
+    if (!withinBounds) {
+      return {
+        currentPointX: null,
+        tooltipValue: null,
+        showCursorAndTooltip: false,
+        interactiveProps
+      };
+    }
+    const displayPointCoords = points[displayIndex];
+    const currentPointX = displayPointCoords ? displayPointCoords[0] : null;
+    const tooltipValue = data[displayIndex];
+    return {
+      currentPointX,
+      tooltipValue,
+      showCursorAndTooltip: currentPointX !== null,
+      interactiveProps
+    };
+  }
   render() {
     const {
       data,
@@ -1330,39 +1386,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
     const points = this.dataToPoints(xMargin, yMargin);
     const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
-    let currentPointX = null;
-    let tooltipValue = null;
-    let showCursorAndTooltip = false;
-    let interactiveProps = {};
-    if (showTooltip) {
-      const isHovered = hoveredIndex !== null;
-      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
-      if (shouldDisplayInteractiveElements) {
-        const displayIndex = isHovered ? hoveredIndex : activeIndex;
-        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
-          const displayPointCoords = points[displayIndex];
-          if (displayPointCoords) {
-            [currentPointX] = displayPointCoords;
-          }
-          tooltipValue = data[displayIndex];
-          showCursorAndTooltip = currentPointX !== null;
-        }
-      }
-      interactiveProps = {
-        onKeyDown: this.handleKeyDown,
-        onMouseOver: this.handleMouseOver,
-        onMouseLeave: this.handleMouseLeave,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur
-      };
-    }
+    const { currentPointX, tooltipValue, showCursorAndTooltip, interactiveProps } = this.getInteractionState({
+      data,
+      points,
+      showTooltip,
+      activeIndex,
+      hoveredIndex,
+      componentIsFocused
+    });
     const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
       __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        role: "group",
         ref: (el) => {
           this.containerRef.current = el;
           if (typeof elementRef === "function") {
@@ -2416,7 +2453,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%;
@@ -2464,14 +2501,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`
@@ -2484,6 +2525,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -2501,7 +2543,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
@@ -3364,9 +3406,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
@@ -3456,12 +3503,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;
@@ -3474,9 +3524,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;
@@ -3488,9 +3541,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;
@@ -3522,6 +3578,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;
     }
@@ -3538,27 +3597,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
@@ -3566,7 +3628,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,
@@ -3577,6 +3653,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,
@@ -3613,11 +3692,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 = [
@@ -3626,24 +3711,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,
@@ -3651,34 +3799,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,
     {
@@ -3694,6 +3847,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,
@@ -3702,6 +3856,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval: computeVizPropsBeforeEval2 = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -3830,11 +3985,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;
@@ -3922,7 +4085,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -3946,10 +4109,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), {