@splunk/visualizations 25.13.1 → 26.1.0

package/SparkLine.js

@@ -113,6 +113,20 @@ module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 25:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
 /***/ 3:
 /***/ (function(module, exports) {
 
@@ -134,14 +148,14 @@ module.exports = require("@babel/runtime/helpers/extends");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/getPrototypeOf");
@@ -155,21 +169,21 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 70:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/inherits");
 
 /***/ }),
 
-/***/ 71:
+/***/ 72:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/possibleConstructorReturn");
 
 /***/ }),
 
-/***/ 86:
+/***/ 88:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/assertThisInitialized");
@@ -194,13 +208,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18);
 /* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(86);
+/* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(88);
 /* harmony import */ var _babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(70);
+/* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(71);
 /* harmony import */ var _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(71);
+/* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(72);
 /* harmony import */ var _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(62);
+/* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(63);
 /* harmony import */ var _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7);
 /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7__);
@@ -210,10 +224,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_10__);
-/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(61);
-/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(4);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(4);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(62);
+/* harmony import */ var _splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12__);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(2);
+/* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var _splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(25);
+/* harmony import */ var _splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__);
+
 
 
 
@@ -224,22 +243,28 @@ __webpack_require__.r(__webpack_exports__);
 
 function _createSuper(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
   return function _createSuperInternal() {
     var Super = _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6___default()(Derived),
-      result;
+        result;
+
     if (hasNativeReflectConstruct) {
       var NewTarget = _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6___default()(this).constructor;
+
       result = Reflect.construct(Super, arguments, NewTarget);
     } else {
       result = Super.apply(this, arguments);
     }
+
     return _babel_runtime_helpers_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_5___default()(this, result);
   };
 }
+
 function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
   if (Reflect.construct.sham) return false;
   if (typeof Proxy === "function") return true;
+
   try {
     Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -252,29 +277,40 @@ function _isNativeReflectConstruct() {
 
 
 
-var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_12___default.a.svg.withConfig({
+
+
+
+var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_11___default.a.svg.withConfig({
   displayName: "SparkLine__StyledSvg",
   componentId: "sc-5oplra-0"
 })(["overflow:hidden;"]);
-var StyledTooltip = styled_components__WEBPACK_IMPORTED_MODULE_12___default.a.div.withConfig({
+var StyledTooltip = styled_components__WEBPACK_IMPORTED_MODULE_11___default.a.div.withConfig({
   displayName: "SparkLine__StyledTooltip",
   componentId: "sc-5oplra-1"
 })(["padding:3px 8px;font-size:12px;"]);
+
 var SparkLine = /*#__PURE__*/function (_Component) {
   _babel_runtime_helpers_inherits__WEBPACK_IMPORTED_MODULE_4___default()(SparkLine, _Component);
+
   var _super = _createSuper(SparkLine);
+
   function SparkLine(props) {
     var _this;
+
     _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1___default()(this, SparkLine);
+
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       rest[_key - 1] = arguments[_key];
     }
+
     _this = _super.call.apply(_super, [this, props].concat(rest));
+
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_3___default()(_this), "handleCursorMount", function (el) {
       _this.setState({
         anchor: el
       });
     });
+
     _this.state = {
       anchor: null,
       currentPointX: null,
@@ -282,71 +318,78 @@ var SparkLine = /*#__PURE__*/function (_Component) {
       rectArea: null,
       tooltip: null
     };
+    _this.titleId = Object(_splunk_ui_utils_id__WEBPACK_IMPORTED_MODULE_14__["createDOMID"])();
     return _this;
   }
+
   _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_2___default()(SparkLine, [{
     key: "getMax",
     value: function getMax() {
       var _this2 = this;
+
       var _this$props = this.props,
-        data = _this$props.data,
-        acceptNull = _this$props.acceptNull,
-        yMax = _this$props.yMax;
+          data = _this$props.data,
+          acceptNull = _this$props.acceptNull,
+          yMax = _this$props.yMax;
+
       var dataMax = function dataMax() {
         return acceptNull ? Object(lodash__WEBPACK_IMPORTED_MODULE_10__["max"])(_this2.fillNull(data)) : Object(lodash__WEBPACK_IMPORTED_MODULE_10__["max"])(data);
       };
+
       return yMax !== undefined ? yMax : dataMax();
     }
   }, {
     key: "getMin",
     value: function getMin() {
       var _this3 = this;
+
       var _this$props2 = this.props,
-        data = _this$props2.data,
-        acceptNull = _this$props2.acceptNull,
-        yMin = _this$props2.yMin;
+          data = _this$props2.data,
+          acceptNull = _this$props2.acceptNull,
+          yMin = _this$props2.yMin;
+
       var dataMin = function dataMin() {
         return acceptNull ? Object(lodash__WEBPACK_IMPORTED_MODULE_10__["min"])(_this3.fillNull(data)) : Object(lodash__WEBPACK_IMPORTED_MODULE_10__["min"])(data);
       };
+
       return yMin !== undefined ? yMin : dataMin();
     }
-
     /**
      * Gets unit value of x axis.
      * @param {Number} xMargin - margin of x axis.
      * @return {Number} unit value of x axis.
      * @private
      */
+
   }, {
     key: "getXUnit",
     value: function getXUnit(xMargin) {
       var _this$props3 = this.props,
-        data = _this$props3.data,
-        width = _this$props3.width; // Calculate xUnit. Width substract the left margin and right margin, then divide by data length.
+          data = _this$props3.data,
+          width = _this$props3.width; // Calculate xUnit. Width substract the left margin and right margin, then divide by data length.
+
       var 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
      */
+
   }, {
     key: "getYUnit",
     value: function getYUnit(yMargin) {
       var height = this.props.height;
       var maxValue = this.getMax();
-      var minValue = this.getMin();
-
-      // Calculate yUnit. Height substract the upper margin and bottom margin, then divide by value range of values in data.
+      var minValue = this.getMin(); // Calculate yUnit. Height substract the upper margin and bottom margin, then divide by value range of values in data.
       // if the maxValue equals minValue, means all values in data are the same, then, we need to set the YUnit at the mid value of Height.
       // So, draws sparkline right in the mid of the container.
+
       var 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
@@ -354,6 +397,7 @@ var SparkLine = /*#__PURE__*/function (_Component) {
      * @param {Array} points
      * @returns {Array} List of datapoint sets used for drawing lines
      */
+
   }, {
     key: "getSegmentSets",
     value: function getSegmentSets(data, points) {
@@ -366,19 +410,20 @@ var SparkLine = /*#__PURE__*/function (_Component) {
           // need at least 2 points to draw a segment
           if (currentLine.length > 1) {
             lines.push(currentLine);
-          }
-          // reset for the next segment
+          } // reset for the next segment
+
+
           currentLine = [];
         } else {
           // data is good, add point data
           currentLine.push(points[idx]);
         }
-      });
+      }); // Add the last line
 
-      // Add the last line
       if (currentLine.length > 1) {
         lines.push(currentLine);
       }
+
       return lines;
     }
   }, {
@@ -394,7 +439,6 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         return value === null ? 0 : value;
       });
     }
-
     /**
      * Converts data to points in svg
      * @param {Number} xMargin - margin of x axis.
@@ -402,6 +446,7 @@ var SparkLine = /*#__PURE__*/function (_Component) {
      * @return {Array} points coordination.
      * @private
      */
+
   }, {
     key: "dataToPoints",
     value: function dataToPoints(xMargin, yMargin) {
@@ -419,7 +464,6 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         return [p.x, p.y];
       });
     }
-
     /**
      * Renders rect area for helping figure out which is the nearest point so that
      * render related cursor and tooltip.
@@ -428,16 +472,20 @@ var SparkLine = /*#__PURE__*/function (_Component) {
      * @return {Array} array of svg rect objects
      * @private
      */
+
   }, {
     key: "renderRect",
     value: function renderRect(points, xMargin) {
       var _this4 = this;
+
       var _this$props4 = this.props,
-        data = _this$props4.data,
-        height = _this$props4.height;
+          data = _this$props4.data,
+          height = _this$props4.height;
       var xUnit = this.getXUnit(xMargin);
       return points.map(function (p, i) {
-        return /*#__PURE__*/(
+        return (
+          /*#__PURE__*/
+
           /* eslint-disable react/no-array-index-key */
           react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("rect", {
             // eslint-disable-line jsx-a11y/mouse-events-have-key-events
@@ -460,33 +508,32 @@ var SparkLine = /*#__PURE__*/function (_Component) {
             }
           })
           /* eslint-enable react/no-array-index-key */
+
         );
       });
-    }
+    } // Renders area chart
 
-    // Renders area chart
   }, {
     key: "renderArea",
     value: function renderArea(points) {
       var _this$props5 = this.props,
-        data = _this$props5.data,
-        fillColor = _this$props5.fillColor,
-        fillOpacity = _this$props5.fillOpacity,
-        height = _this$props5.height,
-        isArea = _this$props5.isArea;
+          data = _this$props5.data,
+          fillColor = _this$props5.fillColor,
+          fillOpacity = _this$props5.fillOpacity,
+          height = _this$props5.height,
+          isArea = _this$props5.isArea;
+
       if (!isArea || points.length === 0) {
         return null;
       }
+
       var segments = this.getSegmentSets(data, points);
       segments = segments.map(function (s) {
-        return s.concat([[s[s.length - 1][0], height],
-        // down to bottom of graph
-        [s[0][0], height],
-        // over to below first data point
+        return s.concat([[s[s.length - 1][0], height], // down to bottom of graph
+        [s[0][0], height], // over to below first data point
         s[0] // up to first data point to close the box
         ]);
       });
-
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", {
         "data-test": "area"
       }, segments.map(function (s) {
@@ -506,11 +553,11 @@ var SparkLine = /*#__PURE__*/function (_Component) {
     key: "renderCursor",
     value: function renderCursor() {
       var _this$props6 = this.props,
-        cursorStroke = _this$props6.cursorStroke,
-        cursorStrokeWidth = _this$props6.cursorStrokeWidth,
-        cursorStrokeLinecap = _this$props6.cursorStrokeLinecap,
-        cursorStrokeDasharray = _this$props6.cursorStrokeDasharray,
-        height = _this$props6.height;
+          cursorStroke = _this$props6.cursorStroke,
+          cursorStrokeWidth = _this$props6.cursorStrokeWidth,
+          cursorStrokeLinecap = _this$props6.cursorStrokeLinecap,
+          cursorStrokeDasharray = _this$props6.cursorStrokeDasharray,
+          height = _this$props6.height;
       return this.state.rectArea !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("line", {
         "data-test": "cursor",
         ref: this.handleCursorMount,
@@ -529,7 +576,7 @@ var SparkLine = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      return this.state.anchor !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_11___default.a, {
+      return this.state.anchor !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(_splunk_react_ui_Popover__WEBPACK_IMPORTED_MODULE_12___default.a, {
         "data-test": "tooltip",
         open: this.state.open,
         anchor: this.state.anchor,
@@ -539,7 +586,6 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         animation: false
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(StyledTooltip, null, this.state.anchor !== null ? this.state.tooltip : undefined));
     }
-
     /**
      * Renders one or more svg circles to highlight values on the sparkline
      * @method renderEndDots
@@ -549,14 +595,15 @@ var SparkLine = /*#__PURE__*/function (_Component) {
      * @returns {Object} React representation of SVG group
      * @private
      */
+
   }, {
     key: "renderEndDots",
     value: function renderEndDots(points, dotsToShow, xMargin) {
       var _this$props7 = this.props,
-        endDotFillColor = _this$props7.endDotFillColor,
-        endDotRadius = _this$props7.endDotRadius,
-        endDotStroke = _this$props7.endDotStroke,
-        endDotStrokeWidth = _this$props7.endDotStrokeWidth;
+          endDotFillColor = _this$props7.endDotFillColor,
+          endDotRadius = _this$props7.endDotRadius,
+          endDotStroke = _this$props7.endDotStroke,
+          endDotStrokeWidth = _this$props7.endDotStrokeWidth;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", null, points.slice(-dotsToShow).map(function (point) {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("circle", {
           key: "end-dot".concat(point[0]).concat(point[1]),
@@ -572,21 +619,21 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         });
       }));
     }
-
     /**
      * Renders the line(s) above the area graph
      * @method renderPolyline
      * @param {Array} points
      * @returns {Object} SVG Group of polylines
      */
+
   }, {
     key: "renderPolyline",
     value: function renderPolyline(points) {
       var _this$props8 = this.props,
-        data = _this$props8.data,
-        lineColor = _this$props8.lineColor,
-        lineLength = _this$props8.lineLength,
-        lineStrokeWidth = _this$props8.lineStrokeWidth;
+          data = _this$props8.data,
+          lineColor = _this$props8.lineColor,
+          lineLength = _this$props8.lineLength,
+          lineStrokeWidth = _this$props8.lineStrokeWidth;
       var linePoints = Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isFinite"])(lineLength) && lineLength > 0 ? lineLength : points.length;
       var lines = this.getSegmentSets(data.slice(-linePoints), points.slice(-linePoints));
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", {
@@ -610,23 +657,26 @@ var SparkLine = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this5 = this;
+
       var _this$props9 = this.props,
-        data = _this$props9.data,
-        elementRef = _this$props9.elementRef,
-        showTooltip = _this$props9.showTooltip,
-        showEndDot = _this$props9.showEndDot,
-        endDotRadius = _this$props9.endDotRadius,
-        endDotStrokeWidth = _this$props9.endDotStrokeWidth,
-        endDotCount = _this$props9.endDotCount,
-        height = _this$props9.height,
-        isArea = _this$props9.isArea,
-        lineStrokeWidth = _this$props9.lineStrokeWidth,
-        width = _this$props9.width;
+          data = _this$props9.data,
+          elementRef = _this$props9.elementRef,
+          showTooltip = _this$props9.showTooltip,
+          showEndDot = _this$props9.showEndDot,
+          endDotRadius = _this$props9.endDotRadius,
+          endDotStrokeWidth = _this$props9.endDotStrokeWidth,
+          endDotCount = _this$props9.endDotCount,
+          height = _this$props9.height,
+          isArea = _this$props9.isArea,
+          lineStrokeWidth = _this$props9.lineStrokeWidth,
+          width = _this$props9.width,
+          title = _this$props9.title;
+
       if (data.length === 0) {
         return null;
-      }
+      } // Calculate horizontal and vertical margin so that fit line or end dot.
+
 
-      // Calculate horizontal and vertical margin so that fit line or end dot.
       var xMargin = endDotRadius + endDotStrokeWidth / 2;
       var yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);
       var points = this.dataToPoints(xMargin, yMargin);
@@ -646,86 +696,124 @@ var SparkLine = /*#__PURE__*/function (_Component) {
         ref: elementRef
       }, Object(lodash__WEBPACK_IMPORTED_MODULE_10__["omit"])(this.props, Object(lodash__WEBPACK_IMPORTED_MODULE_10__["keys"])(SparkLine.propTypes))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement(StyledSvg, {
         height: height,
-        width: width
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)));
+        width: width,
+        role: "img",
+        "aria-labelledby": this.titleId,
+        "data-test": "sparkline-svg"
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("title", {
+        id: this.titleId,
+        "data-test": "sparkline-title"
+      }, title || Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_13__["_"])('Source count over time sparkline trend')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("g", null, this.renderCursor(), this.renderPolyline(points), this.renderArea(points), dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null, showTooltip ? this.renderRect(points, xMargin) : null, showTooltip ? this.renderTooltip() : null)));
     }
   }]);
+
   return SparkLine;
 }(react__WEBPACK_IMPORTED_MODULE_9__["Component"]);
+
 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(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__WEBPACK_IMPORTED_MODULE_8___default.a.bool,
+
   /** Array of numbers. These data numbers are converted to points and show on sparkline. */
   data: function data(props) {
     if (!Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isArray"])(props.data)) {
       return new Error('Data provided to Sparkline must be an array.');
     }
+
     if (props.acceptNull && !props.data.every(function (value) {
       return Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isNull"])(value) || Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isFinite"])(value);
     })) {
       return new Error('Data provided to Sparkline must be finite numbers or null.');
     }
+
     if (!props.acceptNull && !props.data.every(function (value) {
       return Object(lodash__WEBPACK_IMPORTED_MODULE_10__["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__WEBPACK_IMPORTED_MODULE_8___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.func, prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.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__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Fills color to the end dot. */
   endDotFillColor: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.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__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Sets end dot circle stroke color. */
   endDotStroke: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string,
+
   /** Sets end dot circle stroke width in pixels. */
   endDotStrokeWidth: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Fills color to area. */
   fillColor: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string,
+
   /** Fills opacity to area. Value must be in 0 ~ 1. */
   fillOpacity: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string,
+
   /** Sets cursor stroke color. */
   cursorStroke: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string,
+
   /** Sets cursor stroke width in pixels. */
   cursorStrokeWidth: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Sets cursor line cap style. */
   cursorStrokeLinecap: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.oneOf(['butt', 'round', 'square']),
+
   /** Sets cursor dash array style. */
   cursorStrokeDasharray: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.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__WEBPACK_IMPORTED_MODULE_8___default.a.number.isRequired,
+
   /** When set to `true`, sparkline shows as area. */
   isArea: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.bool,
+
   /** The sparkline line color. */
   lineColor: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string,
+
   /** Allows user to draw only the last data points for the line. */
   lineLength: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** The sparkline line stroke width in pixels. */
   lineStrokeWidth: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Enable to show end dot. */
   showEndDot: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.bool,
+
   /** Enable to show tooltip. */
   showTooltip: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.bool,
+
   /** Sets the data value range and maximum value shown on sparkline. */
   yMax: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /** Sets the data value range and minimum value shown on sparkline. */
   yMin: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number,
+
   /**
    * The width of the container.
    */
-  width: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number.isRequired
+  width: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.number.isRequired,
+
+  /** Sets the a11y title text on sparkline. */
+  title: prop_types__WEBPACK_IMPORTED_MODULE_8___default.a.string
 });
+
 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(SparkLine, "defaultProps", {
   acceptNull: false,
   data: [],
@@ -746,6 +834,7 @@ _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(Spa
   lineColor: '#65a637',
   lineStrokeWidth: 1
 });
+
 /* harmony default export */ __webpack_exports__["default"] = (SparkLine);
 
 /***/ })