@splunk/visualizations 28.6.0 → 28.8.0

package/SingleValue.js

@@ -978,7 +978,7 @@ var defaultImport20 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
 var id_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
-// src/SparkLine/SparkLine.jsx
+// src/SparkLine/SparkLine.tsx
 var StyledSvg = styled_components_default.svg`
     /* For fixing IE11 shows overflow part line issue */
     overflow: hidden;
@@ -990,233 +990,262 @@ var StyledTooltip = styled_components_default.div`
     min-width: 20px;
 `;
 var preventDefault = (e) => e.preventDefault();
-var _SparkLine = class _SparkLine extends react_exports.Component {
-  constructor(props, ...rest) {
-    super(props, ...rest);
-    __publicField(this, "handleCursorMount", (el) => {
-      this.setState({
-        anchor: el
-      });
-    });
-    this.state = {
-      anchor: null,
-      activeIndex: 0,
-      hoveredIndex: null,
-      componentIsFocused: false
-    };
-    this.titleId = (0, id_exports.createDOMID)("sparkline-title");
-    this.pointRefs = [];
-    this.containerRef = react_default.createRef();
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-  handleFocus(event) {
-    const { target } = event;
-    const { pointIndex: pointIndexStr } = target.dataset || {};
-    const { activeIndex, componentIsFocused, hoveredIndex } = this.state;
-    if (pointIndexStr !== void 0) {
-      const pointIndex = Number.parseInt(pointIndexStr, 10);
-      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
-        this.setState({
-          activeIndex: pointIndex,
-          hoveredIndex: null,
-          componentIsFocused: true
-        });
+var PROP_KEYS = [
+  "acceptNull",
+  "data",
+  "elementRef",
+  "endDotCount",
+  "endDotFillColor",
+  "endDotRadius",
+  "endDotStroke",
+  "endDotStrokeWidth",
+  "fillColor",
+  "fillOpacity",
+  "cursorStroke",
+  "cursorStrokeWidth",
+  "cursorStrokeLinecap",
+  "cursorStrokeDasharray",
+  "height",
+  "isArea",
+  "lineColor",
+  "lineLength",
+  "lineStrokeWidth",
+  "showEndDot",
+  "showTooltip",
+  "yMax",
+  "yMin",
+  "width",
+  "title"
+];
+var SparkLineInner = (_a) => {
+  var _b = _a, {
+    acceptNull = false,
+    data = [],
+    elementRef,
+    endDotCount = 0,
+    endDotFillColor = "white",
+    endDotRadius = 0,
+    endDotStroke = "black",
+    endDotStrokeWidth = 0,
+    fillColor = "#65a637",
+    fillOpacity = ".1",
+    cursorStroke = "#5184AF",
+    cursorStrokeWidth = 3,
+    cursorStrokeLinecap = "square",
+    cursorStrokeDasharray = "1, 5",
+    height,
+    isArea = false,
+    lineColor = "#65a637",
+    lineLength,
+    lineStrokeWidth = 1,
+    showEndDot = false,
+    showTooltip = true,
+    yMax,
+    yMin,
+    width,
+    title
+  } = _b, restProps = __objRest(_b, [
+    "acceptNull",
+    "data",
+    "elementRef",
+    "endDotCount",
+    "endDotFillColor",
+    "endDotRadius",
+    "endDotStroke",
+    "endDotStrokeWidth",
+    "fillColor",
+    "fillOpacity",
+    "cursorStroke",
+    "cursorStrokeWidth",
+    "cursorStrokeLinecap",
+    "cursorStrokeDasharray",
+    "height",
+    "isArea",
+    "lineColor",
+    "lineLength",
+    "lineStrokeWidth",
+    "showEndDot",
+    "showTooltip",
+    "yMax",
+    "yMin",
+    "width",
+    "title"
+  ]);
+  const [anchor, setAnchor] = (0, react_exports.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, react_exports.useState)(0);
+  const [hoveredIndex, setHoveredIndex] = (0, react_exports.useState)(null);
+  const [componentIsFocused, setComponentIsFocused] = (0, react_exports.useState)(false);
+  const titleId = (0, react_exports.useMemo)(() => (0, id_exports.createDOMID)("sparkline-title"), []);
+  const pointRefs = (0, react_exports.useRef)([]);
+  const containerRef = (0, react_exports.useRef)(null);
+  const fillNull = (0, react_exports.useCallback)(() => data.map((value) => value != null ? value : 0), [data]);
+  const getMax = (0, react_exports.useCallback)(() => {
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(fillNull()) : (0, lodash_exports.max)(data);
+    return yMax != null ? yMax : dataMax();
+  }, [acceptNull, data, fillNull, yMax]);
+  const getMin = (0, react_exports.useCallback)(() => {
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(fillNull()) : (0, lodash_exports.min)(data);
+    return yMin != null ? yMin : dataMin();
+  }, [acceptNull, data, fillNull, yMin]);
+  const getXUnit = (0, react_exports.useCallback)(
+    (xMargin2) => {
+      const xUnit = (width - xMargin2 * 2) / (data.length > 1 ? data.length - 1 : 1);
+      return Math.max(0, xUnit);
+    },
+    [data.length, width]
+  );
+  const getYUnit = (0, react_exports.useCallback)(
+    (yMargin2) => {
+      const maxValue = getMax();
+      const minValue = getMin();
+      const yUnit = (height - yMargin2 * 2) / (maxValue - minValue || 2);
+      return Math.max(0, yUnit);
+    },
+    [getMax, getMin, height]
+  );
+  const getSegmentSets = (0, react_exports.useCallback)(
+    (segmentData, points2) => {
+      const lines = [];
+      const isolatedPoints = [];
+      let currentLine = [];
+      for (const [idx, p] of segmentData.entries()) {
+        if (!acceptNull && (0, lodash_exports.isNull)(p)) {
+          if (currentLine.length > 1) {
+            lines.push(currentLine);
+          } else if (currentLine.length === 1) {
+            isolatedPoints.push(currentLine[0]);
+          }
+          currentLine = [];
+        } else {
+          currentLine.push(points2[idx]);
+        }
       }
-    } else if (this.pointRefs.length > 0) {
-      const indexToFocus = activeIndex ? Math.min(this.pointRefs.length - 1, activeIndex) : 0;
-      this.pointRefs[indexToFocus].focus();
-    }
-  }
-  handleBlur(event) {
-    if (this.containerRef.current && !this.containerRef.current.contains(event.relatedTarget)) {
-      this.setState({ componentIsFocused: false });
-    }
-  }
-  handleKeyDown(event) {
-    const { data } = this.props;
-    const { activeIndex } = this.state;
-    const numPoints = data.length;
-    if (numPoints === 0) {
-      return;
-    }
-    const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
-    if (!allowedKeys.includes(event.key)) {
-      return;
+      if (currentLine.length > 1) {
+        lines.push(currentLine);
+      } else if (currentLine.length === 1) {
+        isolatedPoints.push(currentLine[0]);
+      }
+      return { lines, isolatedPoints };
+    },
+    [acceptNull]
+  );
+  const dataToPoints = (0, react_exports.useCallback)(
+    (xMargin2, yMargin2) => {
+      const xUnit = getXUnit(xMargin2);
+      const yUnit = getYUnit(yMargin2);
+      const maxValue = getMax();
+      const minValue = getMin();
+      return data.map((val, idx) => ({
+        x: idx * xUnit + xMargin2,
+        y: maxValue === minValue ? yUnit + yMargin2 : (maxValue - val) * yUnit + yMargin2
+      })).map((p) => [p.x, p.y]);
+    },
+    [data, getMax, getMin, getXUnit, getYUnit]
+  );
+  const handleFocus = (0, react_exports.useCallback)(
+    (event) => {
+      const { target } = event;
+      const { pointIndex: pointIndexStr } = target.dataset || {};
+      if (pointIndexStr !== void 0) {
+        const pointIndex = Number.parseInt(pointIndexStr, 10);
+        if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+          setActiveIndex(pointIndex);
+          setHoveredIndex(null);
+          setComponentIsFocused(true);
+        }
+      } else if (pointRefs.current.length > 0) {
+        const indexToFocus = activeIndex ? Math.min(pointRefs.current.length - 1, activeIndex) : 0;
+        pointRefs.current[indexToFocus].focus();
+      }
+    },
+    [activeIndex, componentIsFocused, hoveredIndex]
+  );
+  const handleBlur = (0, react_exports.useCallback)((event) => {
+    if (containerRef.current && !containerRef.current.contains(event.relatedTarget)) {
+      setComponentIsFocused(false);
     }
-    let newIndex;
-    switch (event.key) {
-      case "Home":
+  }, []);
+  const handleKeyDown = (0, react_exports.useCallback)(
+    (event) => {
+      const numPoints = data.length;
+      const allowedKeys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+      if (!allowedKeys.includes(event.key)) {
+        return;
+      }
+      let newIndex;
+      if (event.key === "Home") {
         newIndex = 0;
-        break;
-      case "End":
+      } else if (event.key === "End") {
         newIndex = numPoints - 1;
-        break;
-      case "ArrowLeft":
+      } else if (event.key === "ArrowLeft") {
         newIndex = Math.max(0, activeIndex - 1);
-        break;
-      case "ArrowRight":
+      } else {
         newIndex = Math.min(numPoints - 1, activeIndex + 1);
-        break;
-      default:
-        return;
-    }
-    if (newIndex !== activeIndex) {
-      event.preventDefault();
-      if (this.pointRefs[newIndex]) {
-        this.pointRefs[newIndex].focus();
       }
-    }
-  }
-  handleMouseOver(event) {
-    const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;
-    if (pointIndexStr !== void 0) {
-      const pointIndex = Number.parseInt(pointIndexStr, 10);
-      if (this.state.hoveredIndex !== pointIndex) {
-        this.setState({ hoveredIndex: pointIndex });
+      if (newIndex !== activeIndex) {
+        event.preventDefault();
+        if (pointRefs.current[newIndex]) {
+          pointRefs.current[newIndex].focus();
+        }
       }
-    }
-  }
-  handleMouseLeave() {
-    if (this.state.hoveredIndex !== null) {
-      this.setState({ hoveredIndex: null });
-    }
-  }
-  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 ? 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 ? dataMin() : yMin;
-  }
-  /**
-   * Gets unit value of x axis.
-   * @param {Number} xMargin - margin of x axis.
-   * @return {Number} unit value of x axis.
-   * @private
-   */
-  getXUnit(xMargin) {
-    const { data, width } = this.props;
-    const xUnit = (width - xMargin * 2) / (data.length > 1 ? data.length - 1 : 1);
-    return Math.max(0, xUnit);
-  }
-  /**
-   * Gets unit value of y axis.
-   * @param {String} yMargin - margin of y axis.
-   * @return {Number} unit value of y axis.
-   * @private
-   */
-  getYUnit(yMargin) {
-    const { height } = this.props;
-    const maxValue = this.getMax();
-    const minValue = this.getMin();
-    const yUnit = (height - yMargin * 2) / (maxValue - minValue || 2);
-    return Math.max(0, yUnit);
-  }
-  /**
-   * Get a list of arrays of points for drawing lines, based on acceptNull property
-   * @method getSegmentSets
-   * @param {Array} data
-   * @param {Array} points
-   * @returns {Object} Object containing lines (arrays of points for polylines) and isolatedPoints (single points surrounded by nulls)
-   */
-  getSegmentSets(data, points) {
-    const { acceptNull } = this.props;
-    const lines = [];
-    const isolatedPoints = [];
-    let currentLine = [];
-    for (const [idx, p] of data.entries()) {
-      if (!acceptNull && (0, lodash_exports.isNull)(p)) {
-        if (currentLine.length > 1) {
-          lines.push(currentLine);
-        } else if (currentLine.length === 1) {
-          isolatedPoints.push(currentLine[0]);
+    },
+    [activeIndex, data.length]
+  );
+  const handleMouseOver = (0, react_exports.useCallback)(
+    (event) => {
+      var _a2;
+      const pointIndexStr = (_a2 = event.target.dataset) == null ? void 0 : _a2.pointIndex;
+      if (pointIndexStr !== void 0) {
+        const pointIndex = Number.parseInt(pointIndexStr, 10);
+        if (hoveredIndex !== pointIndex) {
+          setHoveredIndex(pointIndex);
         }
-        currentLine = [];
-      } else {
-        currentLine.push(points[idx]);
       }
+    },
+    [hoveredIndex]
+  );
+  const handleMouseLeave = (0, react_exports.useCallback)(() => {
+    if (hoveredIndex !== null) {
+      setHoveredIndex(null);
     }
-    if (currentLine.length > 1) {
-      lines.push(currentLine);
-    } else if (currentLine.length === 1) {
-      isolatedPoints.push(currentLine[0]);
-    }
-    return { lines, isolatedPoints };
-  }
-  /**
-   * Utility for fill null value with number 0.
-   * @private
-   */
-  fillNull() {
-    const { data } = this.props;
-    return data.map((value) => value === null ? 0 : value);
-  }
-  /**
-   * Converts data to points in svg
-   * @param {Number} xMargin - margin of x axis.
-   * @param {Number} yMargin - margin of x axis.
-   * @return {Array} points coordination.
-   * @private
-   */
-  dataToPoints(xMargin, yMargin) {
-    const { data } = this.props;
-    const xUnit = this.getXUnit(xMargin);
-    const yUnit = this.getYUnit(yMargin);
-    const maxValue = this.getMax();
-    const minValue = this.getMin();
-    return data.map((val, idx) => ({
-      x: idx * xUnit + xMargin,
-      y: maxValue === minValue ? yUnit + yMargin : (maxValue - val) * yUnit + yMargin
-    })).map((p) => [p.x, p.y]);
-  }
-  /**
-   * Renders rect area for each datapoint for interactions and screen reader support
-   * @param {Array} points - array of points coordination.
-   * @param {Number} xMargin - margin of x axis.
-   * @return {Array} array of svg rect objects
-   * @private
-   */
-  renderRect(points, xMargin) {
-    const { data, height, showTooltip } = this.props;
-    const xUnit = this.getXUnit(xMargin);
-    return points.map((p, i) => (
-      /* eslint-disable react/no-array-index-key */
-      /* @__PURE__ */ react_default.createElement(
-        "rect",
-        {
-          key: `${i}_${p[0]}`,
-          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,
-          tabIndex: showTooltip && this.state.activeIndex === i ? 0 : -1,
-          ref: (el) => {
-            this.pointRefs[i] = el;
-          },
-          x: Math.max(0, p[0] - xUnit / 2),
-          y: 0,
-          width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
-          height,
-          style: { fillOpacity: 0 },
-          onMouseDown: preventDefault
-        }
-      )
-    ));
-  }
-  // Renders area chart
-  renderArea(points) {
-    const { data, fillColor, fillOpacity, height, isArea } = this.props;
-    if (!isArea || points.length === 0) {
+  }, [hoveredIndex]);
+  const handleCursorMount = (0, react_exports.useCallback)((el) => {
+    setAnchor(el);
+  }, []);
+  const renderRect = (points2, xMargin2) => {
+    const xUnit = getXUnit(xMargin2);
+    return points2.map((p, i) => {
+      var _a2;
+      return (
+        /* eslint-disable react/no-array-index-key */
+        /* @__PURE__ */ react_default.createElement(
+          "rect",
+          {
+            key: `${i}_${p[0]}`,
+            role: "graphics-symbol",
+            "aria-label": `Value: ${(_a2 = data[i]) != null ? _a2 : "N/A"}, point ${i + 1} of ${data.length}`,
+            "data-test": `rect-${i}`,
+            "data-point-index": i,
+            tabIndex: showTooltip && activeIndex === i ? 0 : -1,
+            ref: (el) => {
+              pointRefs.current[i] = el;
+            },
+            x: Math.max(0, p[0] - xUnit / 2),
+            y: 0,
+            width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
+            height,
+            style: { fillOpacity: 0 },
+            onMouseDown: preventDefault
+          }
+        )
+      );
+    });
+  };
+  const renderArea = (points2) => {
+    if (!isArea || points2.length === 0) {
       return null;
     }
-    const { lines } = this.getSegmentSets(data, points);
+    const { lines } = getSegmentSets(data, points2);
     const segments = lines.map(
       (s) => s.concat([
         [s.at(-1)[0], height],
@@ -1240,80 +1269,56 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         }
       }
     )));
-  }
-  renderCursor(currentPointX, shouldRender) {
-    const { cursorStroke, cursorStrokeWidth, cursorStrokeLinecap, cursorStrokeDasharray, height } = this.props;
-    return shouldRender && /* @__PURE__ */ react_default.createElement(
-      "line",
-      {
-        "data-test": "cursor",
-        ref: this.handleCursorMount,
-        x1: currentPointX,
-        y1: 0,
-        x2: currentPointX,
-        y2: height,
-        style: {
-          stroke: cursorStroke,
-          strokeWidth: cursorStrokeWidth,
-          strokeLinecap: cursorStrokeLinecap,
-          strokeDasharray: cursorStrokeDasharray
-        }
+  };
+  const renderCursor = (currentPointX2, shouldRender) => shouldRender && /* @__PURE__ */ react_default.createElement(
+    "line",
+    {
+      "data-test": "cursor",
+      ref: handleCursorMount,
+      x1: currentPointX2,
+      y1: 0,
+      x2: currentPointX2,
+      y2: height,
+      style: {
+        stroke: cursorStroke,
+        strokeWidth: cursorStrokeWidth,
+        strokeLinecap: cursorStrokeLinecap,
+        strokeDasharray: cursorStrokeDasharray
       }
-    );
-  }
-  renderTooltip(tooltipValue, isOpen) {
-    const { anchor } = this.state;
-    const displayValue = tooltipValue === null ? "-" : tooltipValue;
+    }
+  );
+  const renderTooltip = (tooltipValue2, isOpen) => {
+    const displayValue = tooltipValue2 === null ? "-" : tooltipValue2;
     return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
         open: isOpen,
         anchor,
-        "data-test-value": tooltipValue,
+        "data-test-value": tooltipValue2,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
       /* @__PURE__ */ react_default.createElement(StyledTooltip, null, displayValue)
     );
-  }
-  /**
-   * Renders one or more svg circles to highlight values on the sparkline
-   * @method renderEndDots
-   * @param {Array[Array[Number]]} points // x,y coordinates of values
-   * @param {Number} dotsToShow           // number of end dots to display
-   * @param {Number} xMargin              // used when calculating the dot radius
-   * @returns {Object} React representation of SVG group
-   * @private
-   */
-  renderEndDots(points, dotsToShow, xMargin) {
-    const { endDotFillColor, endDotRadius, endDotStroke, endDotStrokeWidth } = this.props;
-    return /* @__PURE__ */ react_default.createElement("g", null, points.slice(-dotsToShow).map((point) => /* @__PURE__ */ react_default.createElement(
-      "circle",
-      {
-        key: `end-dot${point[0]}${point[1]}`,
-        "data-test": "end-dot",
-        cx: point[0],
-        cy: point[1],
-        r: endDotRadius === 0 ? xMargin : endDotRadius,
-        style: {
-          fill: endDotFillColor,
-          stroke: endDotStroke,
-          strokeWidth: endDotStrokeWidth
-        }
+  };
+  const renderEndDots = (points2, dotsToShow2, xMargin2) => /* @__PURE__ */ react_default.createElement("g", null, points2.slice(-dotsToShow2).map((point) => /* @__PURE__ */ react_default.createElement(
+    "circle",
+    {
+      key: `end-dot${point[0]}${point[1]}`,
+      "data-test": "end-dot",
+      cx: point[0],
+      cy: point[1],
+      r: endDotRadius === 0 ? xMargin2 : endDotRadius,
+      style: {
+        fill: endDotFillColor,
+        stroke: endDotStroke,
+        strokeWidth: endDotStrokeWidth
       }
-    )));
-  }
-  /**
-   * Renders circles for isolated points (single data points surrounded by nulls)
-   * These would otherwise be invisible since a line requires at least 2 points
-   * @method renderIsolatedPoints
-   * @param {Array} isolatedPoints - Array of [x, y] coordinates for isolated points
-   * @returns {Object} SVG Group of circles
-   */
-  renderIsolatedPoints(isolatedPoints) {
-    const { lineColor, lineStrokeWidth } = this.props;
+    }
+  )));
+  const renderIsolatedPoints = (isolatedPoints) => {
     if (!isolatedPoints || isolatedPoints.length === 0) {
       return null;
     }
@@ -1331,20 +1336,10 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         }
       }
     )));
-  }
-  /**
-   * Renders the line(s) above the area graph
-   * @method renderPolyline
-   * @param {Array} points
-   * @returns {Object} SVG Group of polylines and isolated points
-   */
-  renderPolyline(points) {
-    const { data, lineColor, lineLength, lineStrokeWidth } = this.props;
-    const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points.length;
-    const { lines, isolatedPoints } = this.getSegmentSets(
-      data.slice(-linePoints),
-      points.slice(-linePoints)
-    );
+  };
+  const renderPolyline = (points2) => {
+    const linePoints = (0, lodash_exports.isFinite)(lineLength) && lineLength > 0 ? lineLength : points2.length;
+    const { lines, isolatedPoints } = getSegmentSets(data.slice(-linePoints), points2.slice(-linePoints));
     return /* @__PURE__ */ react_default.createElement("g", { "data-test": "sparkline" }, lines.map((lineData) => /* @__PURE__ */ react_default.createElement(
       "polyline",
       {
@@ -1359,10 +1354,18 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         },
         points: lineData.join(" ")
       }
-    )), this.renderIsolatedPoints(isolatedPoints));
-  }
-  getInteractionState({ data, points, showTooltip, activeIndex, hoveredIndex, componentIsFocused }) {
-    if (!showTooltip) {
+    )), renderIsolatedPoints(isolatedPoints));
+  };
+  const getInteractionState = ({
+    interactionData,
+    points: interactionPoints,
+    interactionShowTooltip,
+    interactionActiveIndex,
+    interactionHoveredIndex,
+    interactionComponentIsFocused
+  }) => {
+    var _a2;
+    if (!interactionShowTooltip) {
       return {
         currentPointX: null,
         tooltipValue: null,
@@ -1370,200 +1373,94 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         interactiveProps: {}
       };
     }
-    const interactiveProps = {
-      onKeyDown: this.handleKeyDown,
-      onMouseOver: this.handleMouseOver,
-      onMouseLeave: this.handleMouseLeave,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
+    const interactiveProps2 = {
+      onKeyDown: handleKeyDown,
+      onMouseOver: handleMouseOver,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
     };
-    const isHovered = hoveredIndex !== null;
-    const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+    const isHovered = interactionHoveredIndex !== null;
+    const shouldDisplayInteractiveElements = (isHovered || interactionComponentIsFocused) && interactionData.length > 0;
     if (!shouldDisplayInteractiveElements) {
       return {
         currentPointX: null,
         tooltipValue: null,
         showCursorAndTooltip: false,
-        interactiveProps
+        interactiveProps: interactiveProps2
       };
     }
-    const displayIndex = isHovered ? hoveredIndex : activeIndex;
+    const displayIndex = isHovered ? interactionHoveredIndex : interactionActiveIndex;
     const isValidIndex = displayIndex !== null && displayIndex >= 0;
-    const withinBounds = isValidIndex && displayIndex < data.length && displayIndex < points.length;
+    const withinBounds = isValidIndex && displayIndex < interactionData.length && displayIndex < interactionPoints.length;
     if (!withinBounds) {
       return {
         currentPointX: null,
         tooltipValue: null,
         showCursorAndTooltip: false,
-        interactiveProps
+        interactiveProps: interactiveProps2
       };
     }
-    const displayPointCoords = points[displayIndex];
-    const currentPointX = displayPointCoords ? displayPointCoords[0] : null;
-    const tooltipValue = data[displayIndex];
+    const displayPointCoords = interactionPoints[displayIndex];
+    const currentPointX2 = (_a2 = displayPointCoords == null ? void 0 : displayPointCoords[0]) != null ? _a2 : null;
+    const tooltipValue2 = interactionData[displayIndex];
     return {
-      currentPointX,
-      tooltipValue,
-      showCursorAndTooltip: currentPointX !== null,
-      interactiveProps
+      currentPointX: currentPointX2,
+      tooltipValue: tooltipValue2,
+      showCursorAndTooltip: currentPointX2 !== null,
+      interactiveProps: interactiveProps2
     };
+  };
+  if (data.length === 0) {
+    return null;
   }
-  render() {
-    const {
-      data,
-      elementRef,
-      showTooltip,
-      showEndDot,
-      endDotRadius,
-      endDotStrokeWidth,
-      endDotCount,
-      height,
-      isArea,
-      lineStrokeWidth,
-      width,
-      title
-    } = this.props;
-    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
-    if (data.length === 0) {
+  if (pointRefs.current.length !== data.length) {
+    pointRefs.current.length = data.length;
+  }
+  const xMargin = endDotRadius + endDotStrokeWidth / 2;
+  const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
+  const points = dataToPoints(xMargin, yMargin);
+  const dotsToShow = Math.max(showEndDot && 1, (0, lodash_exports.isFinite)(endDotCount) && endDotCount > 0 && endDotCount);
+  const { currentPointX, tooltipValue, showCursorAndTooltip, interactiveProps } = getInteractionState({
+    interactionData: data,
+    points,
+    interactionShowTooltip: showTooltip,
+    interactionActiveIndex: activeIndex,
+    interactionHoveredIndex: hoveredIndex,
+    interactionComponentIsFocused: 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",
+      ref: (el) => {
+        containerRef.current = el;
+        if (typeof elementRef === "function") {
+          elementRef(el);
+        } else if (elementRef && typeof elementRef === "object") {
+          elementRef.current = el;
+        }
+      }
+    }, interactiveProps), (0, lodash_exports.omit)(restProps, PROP_KEYS)),
+    /* @__PURE__ */ react_default.createElement(StyledSvg, { height, width, "aria-labelledby": titleId, "data-test": "sparkline-svg" }, /* @__PURE__ */ react_default.createElement("title", { id: titleId, "data-test": "sparkline-title" }, ariaLabel), /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? renderCursor(currentPointX, showCursorAndTooltip) : null, renderPolyline(points), renderArea(points), dotsToShow ? renderEndDots(points, dotsToShow, xMargin) : null, renderRect(points, xMargin), showTooltip ? renderTooltip(tooltipValue, showCursorAndTooltip) : null))
+  );
+};
+var SparkLine = (_a) => {
+  var _b = _a, { data = [] } = _b, props = __objRest(_b, ["data"]);
+  if (true) {
+    if (!Array.isArray(data)) {
+      console.error("Data provided to SparkLine must be an array.");
       return null;
     }
-    if (this.pointRefs.length !== data.length) {
-      this.pointRefs.length = data.length;
+    if (!data.every((value) => value === null || (0, lodash_exports.isFinite)(value))) {
+      console.error("Data provided to SparkLine must contain finite numbers or null.");
+      return null;
     }
-    const xMargin = endDotRadius + endDotStrokeWidth / 2;
-    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);
-    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",
-        ref: (el) => {
-          this.containerRef.current = el;
-          if (typeof elementRef === "function") {
-            elementRef(el);
-          } else if (elementRef && typeof elementRef === "object") {
-            elementRef.current = el;
-          }
-        }
-      }, interactiveProps), (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
-      /* @__PURE__ */ react_default.createElement(
-        StyledSvg,
-        {
-          height,
-          width,
-          "aria-labelledby": this.titleId,
-          "data-test": "sparkline-svg"
-        },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, ariaLabel),
-        /* @__PURE__ */ react_default.createElement("g", null, showTooltip ? this.renderCursor(currentPointX, showCursorAndTooltip) : null, this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, this.renderRect(points, xMargin), showTooltip ? this.renderTooltip(tooltipValue, showCursorAndTooltip) : null)
-      )
-    );
   }
+  return /* @__PURE__ */ react_default.createElement(SparkLineInner, __spreadValues({ data }, props));
 };
-__publicField(_SparkLine, "propTypes", {
-  /**
-   * If true, data can contain `null` as a value and is treated as `0`. If false, this throws error when data contains `null`.
-   */
-  acceptNull: prop_types_default.bool,
-  /** Array of numbers. These data numbers are converted to points and show on sparkline. */
-  data: (props) => {
-    if (!(0, lodash_exports.isArray)(props.data)) {
-      return new Error("Data provided to Sparkline must be an array.");
-    }
-    if (props.acceptNull && !props.data.every((value) => (0, lodash_exports.isNull)(value) || (0, lodash_exports.isFinite)(value))) {
-      return new Error("Data provided to Sparkline must be finite numbers or null.");
-    }
-    if (!props.acceptNull && !props.data.every((value) => (0, lodash_exports.isFinite)(value))) {
-      return new Error("Data provided to Sparkline must be finite numbers.");
-    }
-    return null;
-  },
-  /** A React ref which is set to the DOM element when the component mounts and `null` when it unmounts. */
-  elementRef: prop_types_default.oneOfType([prop_types_default.func, prop_types_default.object]),
-  /** Sets the number of end dots to display. When showEndDot is set to `true`, endDotCount is at least 1. If set to a positive value, this overrides showEndDot. */
-  endDotCount: prop_types_default.number,
-  /** Fills color to the end dot. */
-  endDotFillColor: prop_types_default.string,
-  /**
-   * Sets end dot radius. End dot radius must be less than or equal to the margin. By default, its value equals the margin.
-   */
-  endDotRadius: prop_types_default.number,
-  /** Sets end dot circle stroke color. */
-  endDotStroke: prop_types_default.string,
-  /** Sets end dot circle stroke width in pixels. */
-  endDotStrokeWidth: prop_types_default.number,
-  /** Fills color to area. */
-  fillColor: prop_types_default.string,
-  /** Fills opacity to area. Value must be in 0 ~ 1. */
-  fillOpacity: prop_types_default.string,
-  /** Sets cursor stroke color. */
-  cursorStroke: prop_types_default.string,
-  /** Sets cursor stroke width in pixels. */
-  cursorStrokeWidth: prop_types_default.number,
-  /** Sets cursor line cap style. */
-  cursorStrokeLinecap: prop_types_default.oneOf(["butt", "round", "square"]),
-  /** Sets cursor dash array style. */
-  cursorStrokeDasharray: prop_types_default.string,
-  /**
-   * Container height. If this value is specified, sparkline calculates the size using this height. If height isn't specified,
-   * sparkline figures out the container height by itself.
-   */
-  height: prop_types_default.number.isRequired,
-  /** When set to `true`, sparkline shows as area. */
-  isArea: prop_types_default.bool,
-  /** The sparkline line color. */
-  lineColor: prop_types_default.string,
-  /** Allows user to draw only the last data points for the line. */
-  lineLength: prop_types_default.number,
-  /** The sparkline line stroke width in pixels. */
-  lineStrokeWidth: prop_types_default.number,
-  /** Enable to show end dot. */
-  showEndDot: prop_types_default.bool,
-  /** Enable to show tooltip. */
-  showTooltip: prop_types_default.bool,
-  /** Sets the data value range and maximum value shown on sparkline. */
-  yMax: prop_types_default.number,
-  /** Sets the data value range and minimum value shown on sparkline. */
-  yMin: prop_types_default.number,
-  /**
-   * The width of the container.
-   */
-  width: prop_types_default.number.isRequired,
-  /** Sets the a11y title text on sparkline. */
-  title: prop_types_default.string
-});
-__publicField(_SparkLine, "defaultProps", {
-  acceptNull: false,
-  data: [],
-  showTooltip: true,
-  endDotCount: 0,
-  showEndDot: false,
-  endDotRadius: 0,
-  endDotFillColor: "white",
-  endDotStroke: "black",
-  endDotStrokeWidth: 0,
-  fillColor: "#65a637",
-  fillOpacity: ".1",
-  cursorStroke: "#5184AF",
-  cursorStrokeWidth: 3,
-  cursorStrokeLinecap: "square",
-  cursorStrokeDasharray: "1, 5",
-  isArea: false,
-  lineColor: "#65a637",
-  lineStrokeWidth: 1
-});
-var SparkLine = _SparkLine;
 var SparkLine_default = SparkLine;
 
 // src/SingleValue/PureSingleValue/SingleValueSparkline.jsx
@@ -2095,7 +1992,7 @@ var SingleValue = (_a) => {
         majorValueTitle,
         trendColor,
         trendText,
-        trendTextFontSize,
+        trendTextFontSize: trendFontSize || Math.min(contentHeight, trendTextFontSize),
         showTrendIndicator: shouldShowTrend(trendDisplay),
         unit,
         unitPosition,
@@ -2463,7 +2360,7 @@ var Message_default = "default" in defaultImport29 ? defaultImport29.default : d
 var isMissing = (v) => {
   return v === null || v === void 0;
 };
-var missingKeys = (keys2, target) => keys2.filter((k) => isMissing(target[k]));
+var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
 var MissingPropsMessage = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -2512,7 +2409,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.6.0 - 92427899a"
+  "data-splunk-visualization-version": "28.8.0 - 633c53372"
 })`
     position: relative;
     width: 100%;
@@ -2602,7 +2499,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.6.0 - 92427899a",
+        "data-splunk-visualization-version": "28.8.0 - 633c53372",
         width,
         height,
         backgroundColor
@@ -5634,9 +5531,9 @@ var evaluatePanelOption = (panelDataSources, allOptions, optionKey, vizContext)
     return Number.NaN;
   }
 };
-var sortTrellisKeys = (keys2, trellisSortBy, trellisSortOrder, modifiedDataSourceBySplitBy, mergedOptions, vizContext) => {
+var sortTrellisKeys = (keys, trellisSortBy, trellisSortOrder, modifiedDataSourceBySplitBy, mergedOptions, vizContext) => {
   if (trellisSortBy === "name") {
-    keys2.sort((a, b) => {
+    keys.sort((a, b) => {
       const cmp = a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" });
       return trellisSortOrder === "descending" ? -cmp : cmp;
     });
@@ -5647,7 +5544,7 @@ var sortTrellisKeys = (keys2, trellisSortBy, trellisSortOrder, modifiedDataSourc
     } else {
       optionKey = mergedOptions.value !== void 0 ? "value" : "majorValue";
     }
-    keys2.sort((a, b) => {
+    keys.sort((a, b) => {
       const valA = evaluatePanelOption(
         modifiedDataSourceBySplitBy[a],
         mergedOptions,
@@ -5669,7 +5566,7 @@ var sortTrellisKeys = (keys2, trellisSortBy, trellisSortOrder, modifiedDataSourc
       return trellisSortOrder === "descending" ? -cmp : cmp;
     });
   } else if (trellisSortOrder === "descending") {
-    keys2.reverse();
+    keys.reverse();
   }
 };
 var TrellisContainer = styled_components_default.div`