@splunk/visualizations 25.12.0 → 25.13.0

package/SparkLine.js

@@ -0,0 +1,754 @@
+/*!
+ * Copyright © 2018 Splunk Inc.
+ * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+ * in part without a valid written license from Splunk Inc. is PROHIBITED.
+ */
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 95);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 18:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 48:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/extends");
+
+/***/ }),
+
+/***/ 61:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
+
+/***/ }),
+
+/***/ 62:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/getPrototypeOf");
+
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+
+/***/ 70:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/inherits");
+
+/***/ }),
+
+/***/ 71:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/possibleConstructorReturn");
+
+/***/ }),
+
+/***/ 86:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/assertThisInitialized");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 95:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(48);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+/* 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___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___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___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___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__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(0);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
+/* 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__);
+
+
+
+
+
+
+
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  return function _createSuperInternal() {
+    var Super = _babel_runtime_helpers_getPrototypeOf__WEBPACK_IMPORTED_MODULE_6___default()(Derived),
+      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;
+  } catch (e) {
+    return false;
+  }
+}
+
+
+
+
+
+var StyledSvg = styled_components__WEBPACK_IMPORTED_MODULE_12___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({
+  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,
+      open: false,
+      rectArea: null,
+      tooltip: null
+    };
+    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;
+      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;
+      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.
+      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.
+      // 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
+     * @param {Array} data
+     * @param {Array} points
+     * @returns {Array} List of datapoint sets used for drawing lines
+     */
+  }, {
+    key: "getSegmentSets",
+    value: function getSegmentSets(data, points) {
+      var acceptNull = this.props.acceptNull;
+      var lines = [];
+      var currentLine = [];
+      data.forEach(function (p, idx) {
+        // Found null data
+        if (!acceptNull && Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isNull"])(p)) {
+          // need at least 2 points to draw a segment
+          if (currentLine.length > 1) {
+            lines.push(currentLine);
+          }
+          // reset for the next segment
+          currentLine = [];
+        } else {
+          // data is good, add point data
+          currentLine.push(points[idx]);
+        }
+      });
+
+      // Add the last line
+      if (currentLine.length > 1) {
+        lines.push(currentLine);
+      }
+      return lines;
+    }
+  }, {
+    key: "fillNull",
+    value:
+    /**
+     * Utility for fill null value with number 0.
+     * @private
+     */
+    function fillNull() {
+      var data = this.props.data;
+      return data.map(function (value) {
+        return 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
+     */
+  }, {
+    key: "dataToPoints",
+    value: function dataToPoints(xMargin, yMargin) {
+      var data = this.props.data;
+      var xUnit = this.getXUnit(xMargin);
+      var yUnit = this.getYUnit(yMargin);
+      var maxValue = this.getMax();
+      var minValue = this.getMin();
+      return data.map(function (val, idx) {
+        return {
+          x: idx * xUnit + xMargin,
+          y: maxValue === minValue ? yUnit + yMargin : (maxValue - val) * yUnit + yMargin
+        };
+      }).map(function (p) {
+        return [p.x, p.y];
+      });
+    }
+
+    /**
+     * Renders rect area for helping figure out which is the nearest point so that
+     * render related cursor and tooltip.
+     * @param {Array} points - array of points coordination.
+     * @param {Number} xMargin - margin of x axis.
+     * @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;
+      var xUnit = this.getXUnit(xMargin);
+      return points.map(function (p, i) {
+        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
+            key: "".concat(i, "_").concat(p[0]),
+            "data-test": "rect-".concat(i),
+            x: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
+            y: 0,
+            width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
+            height: height,
+            style: {
+              fillOpacity: 0
+            },
+            onMouseOver: function onMouseOver(e) {
+              _this4.setState({
+                open: data[i] !== null,
+                rectArea: data[i] === null ? null : e.target,
+                tooltip: data[i],
+                currentPointX: p[0]
+              });
+            }
+          })
+          /* eslint-enable react/no-array-index-key */
+        );
+      });
+    }
+
+    // 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;
+      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
+        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) {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("polyline", {
+          key: "area".concat(s.join('')),
+          points: s.join(' '),
+          "data-test": "area-line",
+          style: {
+            fill: fillColor,
+            fillOpacity: fillOpacity,
+            strokeWidth: '0'
+          }
+        });
+      }));
+    }
+  }, {
+    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;
+      return this.state.rectArea !== null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("line", {
+        "data-test": "cursor",
+        ref: this.handleCursorMount,
+        x1: this.state.currentPointX,
+        y1: 0,
+        x2: this.state.currentPointX,
+        y2: height,
+        style: {
+          stroke: cursorStroke,
+          strokeWidth: cursorStrokeWidth,
+          strokeLinecap: cursorStrokeLinecap,
+          strokeDasharray: cursorStrokeDasharray
+        }
+      });
+    }
+  }, {
+    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, {
+        "data-test": "tooltip",
+        open: this.state.open,
+        anchor: this.state.anchor,
+        "data-test-value": this.state.tooltip,
+        appearance: "inverted",
+        defaultPlacement: "above",
+        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
+     * @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
+     */
+  }, {
+    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;
+      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]),
+          "data-test": "end-dot",
+          cx: point[0],
+          cy: point[1],
+          r: endDotRadius === 0 ? xMargin : endDotRadius,
+          style: {
+            fill: endDotFillColor,
+            stroke: endDotStroke,
+            strokeWidth: endDotStrokeWidth
+          }
+        });
+      }));
+    }
+
+    /**
+     * 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;
+      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", {
+        "data-test": "sparkline"
+      }, lines.map(function (lineData) {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("polyline", {
+          key: "line".concat(lineData.join('')),
+          "data-test": "polyline",
+          style: {
+            fill: 'none',
+            stroke: lineColor,
+            strokeWidth: lineStrokeWidth,
+            strokeLinejoin: 'round',
+            strokeLinecap: 'round'
+          },
+          points: lineData.join(' ')
+        });
+      }));
+    }
+  }, {
+    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;
+      if (data.length === 0) {
+        return null;
+      }
+
+      // 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);
+      var dotsToShow = Math.max(showEndDot && 1, Object(lodash__WEBPACK_IMPORTED_MODULE_10__["isFinite"])(endDotCount) && endDotCount > 0 && endDotCount);
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_9___default.a.createElement("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+        // eslint-disable-line jsx-a11y/mouse-events-have-key-events
+        "data-test": "line",
+        "data-test-type": isArea ? 'area' : 'line',
+        onMouseOut: function onMouseOut() {
+          _this5.setState({
+            open: false,
+            anchor: null,
+            rectArea: null,
+            currentPointX: null
+          });
+        },
+        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)));
+    }
+  }]);
+  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
+});
+_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_7___default()(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
+});
+/* harmony default export */ __webpack_exports__["default"] = (SparkLine);
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=SparkLine.js.map