@splunk/visualizations 27.5.0 → 28.1.0

package/SparkLine.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 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. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -124,6 +125,7 @@ var StyledTooltip = styled_components_default.div`
     padding: 3px 8px;
     font-size: 12px;
 `;
+var preventDefault = (e) => e.preventDefault();
 var _SparkLine = class _SparkLine extends react_exports.Component {
   constructor(props, ...rest) {
     super(props, ...rest);
@@ -134,21 +136,99 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     });
     this.state = {
       anchor: null,
-      currentPointX: null,
-      open: false,
-      rectArea: null,
-      tooltip: null
+      activeIndex: 0,
+      hoveredIndex: null,
+      componentIsFocused: false
     };
-    this.titleId = (0, id_exports.createDOMID)();
+    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 = parseInt(pointIndexStr, 10);
+      if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {
+        this.setState({
+          activeIndex: pointIndex,
+          hoveredIndex: null,
+          componentIsFocused: true
+        });
+      }
+    } 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;
+    }
+    let newIndex = activeIndex;
+    switch (event.key) {
+      case "Home":
+        newIndex = 0;
+        break;
+      case "End":
+        newIndex = numPoints - 1;
+        break;
+      case "ArrowLeft":
+        newIndex = Math.max(0, activeIndex - 1);
+        break;
+      case "ArrowRight":
+        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 = parseInt(pointIndexStr, 10);
+      if (this.state.hoveredIndex !== pointIndex) {
+        this.setState({ hoveredIndex: pointIndex });
+      }
+    }
+  }
+  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(data)) : (0, lodash_exports.max)(data);
+    const dataMax = () => acceptNull ? (0, lodash_exports.max)(this.fillNull()) : (0, lodash_exports.max)(data);
     return yMax !== void 0 ? yMax : dataMax();
   }
   getMin() {
     const { data, acceptNull, yMin } = this.props;
-    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull(data)) : (0, lodash_exports.min)(data);
+    const dataMin = () => acceptNull ? (0, lodash_exports.min)(this.fillNull()) : (0, lodash_exports.min)(data);
     return yMin !== void 0 ? yMin : dataMin();
   }
   /**
@@ -228,15 +308,14 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
     })).map((p) => [p.x, p.y]);
   }
   /**
-   * Renders rect area for helping figure out which is the nearest point so that
-   * render related cursor and tooltip.
+   * 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 } = this.props;
+    const { data, height, showTooltip } = this.props;
     const xUnit = this.getXUnit(xMargin);
     return points.map((p, i) => (
       /* eslint-disable react/no-array-index-key */
@@ -244,20 +323,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
         "rect",
         {
           key: `${i}_${p[0]}`,
+          role: "img",
+          "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: p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2,
           y: 0,
           width: i === 0 && data.length !== 1 ? xUnit / 2 : xUnit,
           height,
           style: { fillOpacity: 0 },
-          onMouseOver: (e) => {
-            this.setState({
-              open: data[i] !== null,
-              rectArea: data[i] === null ? null : e.target,
-              tooltip: data[i],
-              currentPointX: p[0]
-            });
-          }
+          onMouseDown: preventDefault
         }
       )
     ));
@@ -293,22 +372,16 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     )));
   }
-  renderCursor() {
-    const {
-      cursorStroke,
-      cursorStrokeWidth,
-      cursorStrokeLinecap,
-      cursorStrokeDasharray,
-      height
-    } = this.props;
-    return this.state.rectArea !== null && /* @__PURE__ */ react_default.createElement(
+  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: this.state.currentPointX,
+        x1: currentPointX,
         y1: 0,
-        x2: this.state.currentPointX,
+        x2: currentPointX,
         y2: height,
         style: {
           stroke: cursorStroke,
@@ -319,19 +392,20 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       }
     );
   }
-  renderTooltip() {
-    return this.state.anchor !== null && /* @__PURE__ */ react_default.createElement(
+  renderTooltip(tooltipValue, isOpen) {
+    const { anchor } = this.state;
+    return /* @__PURE__ */ react_default.createElement(
       Popover_default,
       {
         "data-test": "tooltip",
-        open: this.state.open,
-        anchor: this.state.anchor,
-        "data-test-value": this.state.tooltip,
+        open: isOpen,
+        anchor,
+        "data-test-value": tooltipValue,
         appearance: "inverted",
         defaultPlacement: "above",
         animation: false
       },
-      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, this.state.anchor !== null ? this.state.tooltip : void 0)
+      /* @__PURE__ */ react_default.createElement(StyledTooltip, null, tooltipValue)
     );
   }
   /**
@@ -402,39 +476,69 @@ var _SparkLine = class _SparkLine extends react_exports.Component {
       width,
       title
     } = this.props;
+    const { activeIndex, hoveredIndex, componentIsFocused } = this.state;
     if (data.length === 0) {
       return null;
     }
+    if (this.pointRefs.length !== data.length) {
+      this.pointRefs.length = data.length;
+    }
     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);
+    let currentPointX = null;
+    let tooltipValue = null;
+    let showCursorAndTooltip = false;
+    let interactiveProps = {};
+    if (showTooltip) {
+      const isHovered = hoveredIndex !== null;
+      const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;
+      if (shouldDisplayInteractiveElements) {
+        const displayIndex = isHovered ? hoveredIndex : activeIndex;
+        if (displayIndex !== null && displayIndex >= 0 && data.length > displayIndex && points.length > displayIndex) {
+          const displayPointCoords = points[displayIndex];
+          if (displayPointCoords) {
+            [currentPointX] = displayPointCoords;
+          }
+          tooltipValue = data[displayIndex];
+          showCursorAndTooltip = currentPointX !== null;
+        }
+      }
+      interactiveProps = {
+        onKeyDown: this.handleKeyDown,
+        onMouseOver: this.handleMouseOver,
+        onMouseLeave: this.handleMouseLeave,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      };
+    }
+    const ariaLabel = title || (0, i18n_exports._)("Source count over time sparkline trend");
     return /* @__PURE__ */ react_default.createElement(
       "div",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         "data-test": "line",
         "data-test-type": isArea ? "area" : "line",
-        onMouseOut: () => {
-          this.setState({
-            open: false,
-            anchor: null,
-            rectArea: null,
-            currentPointX: null
-          });
-        },
-        ref: elementRef
-      }, (0, lodash_exports.omit)(this.props, (0, lodash_exports.keys)(_SparkLine.propTypes))),
+        role: "group",
+        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,
-          role: "img",
           "aria-labelledby": this.titleId,
           "data-test": "sparkline-svg"
         },
-        /* @__PURE__ */ react_default.createElement("title", { id: this.titleId, "data-test": "sparkline-title" }, title || (0, i18n_exports._)("Source count over time sparkline trend")),
-        /* @__PURE__ */ react_default.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)
+        /* @__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)
       )
     );
   }

package/SparkLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/SparkLine/index.ts", "esm-externals:prop-types", "esm-externals:react", "esm-externals:lodash", "esm-externals:styled-components", "esm-externals:@splunk/react-ui/Popover", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/ui-utils/id", "src/SparkLine/SparkLine.jsx"],
-  "sourcesContent": ["export { default } from './SparkLine.jsx';\n", "\nimport * as defaultImport from \"prop-types\";\nexport * from \"prop-types\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Popover\";\nexport * from \"@splunk/react-ui/Popover\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { isArray, isFinite, isNull, keys, max, min, omit } from 'lodash';\nimport styled from 'styled-components';\nimport Popover from '@splunk/react-ui/Popover';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { createDOMID } from '@splunk/ui-utils/id';\n\nconst StyledSvg = styled.svg`\n    /* For fixing IE11 shows overflow part line issue */\n    overflow: hidden;\n`;\n\nconst StyledTooltip = styled.div`\n    padding: 3px 8px;\n    font-size: 12px;\n`;\n\nclass SparkLine extends Component {\n    static propTypes = {\n        /**\n         * If true, data can contain `null` as a value and is treated as `0`. If false, this throws error when data contains `null`.\n         */\n        acceptNull: PropTypes.bool,\n        /** Array of numbers. These data numbers are converted to points and show on sparkline. */\n        data: props => {\n            if (!isArray(props.data)) {\n                return new Error('Data provided to Sparkline must be an array.');\n            }\n\n            if (props.acceptNull && !props.data.every(value => isNull(value) || isFinite(value))) {\n                return new Error('Data provided to Sparkline must be finite numbers or null.');\n            }\n\n            if (!props.acceptNull && !props.data.every(value => isFinite(value))) {\n                return new Error('Data provided to Sparkline must be finite numbers.');\n            }\n            return null;\n        },\n        /** A React ref which is set to the DOM element when the component mounts and `null` when it unmounts. */\n        elementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n        /** 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. */\n        endDotCount: PropTypes.number,\n        /** Fills color to the end dot. */\n        endDotFillColor: PropTypes.string,\n        /**\n         * Sets end dot radius. End dot radius must be less than or equal to the margin. By default, its value equals the margin.\n         */\n        endDotRadius: PropTypes.number,\n        /** Sets end dot circle stroke color. */\n        endDotStroke: PropTypes.string,\n        /** Sets end dot circle stroke width in pixels. */\n        endDotStrokeWidth: PropTypes.number,\n        /** Fills color to area. */\n        fillColor: PropTypes.string,\n        /** Fills opacity to area. Value must be in 0 ~ 1. */\n        fillOpacity: PropTypes.string,\n        /** Sets cursor stroke color. */\n        cursorStroke: PropTypes.string,\n        /** Sets cursor stroke width in pixels. */\n        cursorStrokeWidth: PropTypes.number,\n        /** Sets cursor line cap style. */\n        cursorStrokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),\n        /** Sets cursor dash array style. */\n        cursorStrokeDasharray: PropTypes.string,\n        /**\n         * Container height. If this value is specified, sparkline calculates the size using this height. If height isn't specified,\n         * sparkline figures out the container height by itself.\n         */\n        height: PropTypes.number.isRequired,\n        /** When set to `true`, sparkline shows as area. */\n        isArea: PropTypes.bool,\n        /** The sparkline line color. */\n        lineColor: PropTypes.string,\n        /** Allows user to draw only the last data points for the line. */\n        lineLength: PropTypes.number,\n        /** The sparkline line stroke width in pixels. */\n        lineStrokeWidth: PropTypes.number,\n        /** Enable to show end dot. */\n        showEndDot: PropTypes.bool,\n        /** Enable to show tooltip. */\n        showTooltip: PropTypes.bool,\n        /** Sets the data value range and maximum value shown on sparkline. */\n        yMax: PropTypes.number,\n        /** Sets the data value range and minimum value shown on sparkline. */\n        yMin: PropTypes.number,\n        /**\n         * The width of the container.\n         */\n        width: PropTypes.number.isRequired,\n        /** Sets the a11y title text on sparkline. */\n        title: PropTypes.string,\n    };\n\n    static defaultProps = {\n        acceptNull: false,\n        data: [],\n        showTooltip: true,\n        endDotCount: 0,\n        showEndDot: false,\n        endDotRadius: 0,\n        endDotFillColor: 'white',\n        endDotStroke: 'black',\n        endDotStrokeWidth: 0,\n        fillColor: '#65a637',\n        fillOpacity: '.1',\n        cursorStroke: '#5184AF',\n        cursorStrokeWidth: 3,\n        cursorStrokeLinecap: 'square',\n        cursorStrokeDasharray: '1, 5',\n        isArea: false,\n        lineColor: '#65a637',\n        lineStrokeWidth: 1,\n    };\n\n    constructor(props, ...rest) {\n        super(props, ...rest);\n        this.state = {\n            anchor: null,\n            currentPointX: null,\n            open: false,\n            rectArea: null,\n            tooltip: null,\n        };\n        this.titleId = createDOMID();\n    }\n\n    getMax() {\n        const { data, acceptNull, yMax } = this.props;\n        const dataMax = () => (acceptNull ? max(this.fillNull(data)) : max(data));\n        return yMax !== undefined ? yMax : dataMax();\n    }\n\n    getMin() {\n        const { data, acceptNull, yMin } = this.props;\n        const dataMin = () => (acceptNull ? min(this.fillNull(data)) : min(data));\n        return yMin !== undefined ? yMin : dataMin();\n    }\n\n    /**\n     * Gets unit value of x axis.\n     * @param {Number} xMargin - margin of x axis.\n     * @return {Number} unit value of x axis.\n     * @private\n     */\n    getXUnit(xMargin) {\n        const { data, width } = this.props;\n        // Calculate xUnit. Width substract the left margin and right margin, then divide by data length.\n        const xUnit = (width - xMargin * 2) / (data.length > 1 ? data.length - 1 : 1);\n        return Math.max(0, xUnit);\n    }\n\n    /**\n     * Gets unit value of y axis.\n     * @param {String} yMargin - margin of y axis.\n     * @return {Number} unit value of y axis.\n     * @private\n     */\n    getYUnit(yMargin) {\n        const { height } = this.props;\n        const maxValue = this.getMax();\n        const minValue = this.getMin();\n\n        // Calculate yUnit. Height substract the upper margin and bottom margin, then divide by value range of values in data.\n        // 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.\n        // So, draws sparkline right in the mid of the container.\n        const yUnit = (height - yMargin * 2) / (maxValue - minValue || 2);\n        return Math.max(0, yUnit);\n    }\n\n    /**\n     * Get a list of arrays of points for drawing lines, based on acceptNull property\n     * @method getSegmentSets\n     * @param {Array} data\n     * @param {Array} points\n     * @returns {Array} List of datapoint sets used for drawing lines\n     */\n    getSegmentSets(data, points) {\n        const { acceptNull } = this.props;\n        const lines = [];\n        let currentLine = [];\n\n        data.forEach((p, idx) => {\n            // Found null data\n            if (!acceptNull && isNull(p)) {\n                // need at least 2 points to draw a segment\n                if (currentLine.length > 1) {\n                    lines.push(currentLine);\n                }\n                // reset for the next segment\n                currentLine = [];\n            } else {\n                // data is good, add point data\n                currentLine.push(points[idx]);\n            }\n        });\n\n        // Add the last line\n        if (currentLine.length > 1) {\n            lines.push(currentLine);\n        }\n\n        return lines;\n    }\n\n    handleCursorMount = el => {\n        this.setState({\n            anchor: el,\n        });\n    };\n\n    /**\n     * Utility for fill null value with number 0.\n     * @private\n     */\n    fillNull() {\n        const { data } = this.props;\n        return data.map(value => (value === null ? 0 : value));\n    }\n\n    /**\n     * Converts data to points in svg\n     * @param {Number} xMargin - margin of x axis.\n     * @param {Number} yMargin - margin of x axis.\n     * @return {Array} points coordination.\n     * @private\n     */\n    dataToPoints(xMargin, yMargin) {\n        const { data } = this.props;\n        const xUnit = this.getXUnit(xMargin);\n        const yUnit = this.getYUnit(yMargin);\n        const maxValue = this.getMax();\n        const minValue = this.getMin();\n        return data\n            .map((val, idx) => ({\n                x: idx * xUnit + xMargin,\n                y: maxValue === minValue ? yUnit + yMargin : (maxValue - val) * yUnit + yMargin,\n            }))\n            .map(p => [p.x, p.y]);\n    }\n\n    /**\n     * Renders rect area for helping figure out which is the nearest point so that\n     * render related cursor and tooltip.\n     * @param {Array} points - array of points coordination.\n     * @param {Number} xMargin - margin of x axis.\n     * @return {Array} array of svg rect objects\n     * @private\n     */\n    renderRect(points, xMargin) {\n        const { data, height } = this.props;\n        const xUnit = this.getXUnit(xMargin);\n\n        return points.map((p, i) => (\n            /* eslint-disable react/no-array-index-key */\n            <rect // eslint-disable-line jsx-a11y/mouse-events-have-key-events\n                key={`${i}_${p[0]}`}\n                data-test={`rect-${i}`}\n                x={p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2}\n                y={0}\n                width={i === 0 && data.length !== 1 ? xUnit / 2 : xUnit}\n                height={height}\n                style={{ fillOpacity: 0 }}\n                onMouseOver={e => {\n                    this.setState({\n                        open: data[i] !== null,\n                        rectArea: data[i] === null ? null : e.target,\n                        tooltip: data[i],\n                        currentPointX: p[0],\n                    });\n                }}\n            />\n            /* eslint-enable react/no-array-index-key */\n        ));\n    }\n\n    // Renders area chart\n    renderArea(points) {\n        const { data, fillColor, fillOpacity, height, isArea } = this.props;\n\n        if (!isArea || points.length === 0) {\n            return null;\n        }\n\n        let segments = this.getSegmentSets(data, points);\n        segments = segments.map(s =>\n            s.concat([\n                [s[s.length - 1][0], height], // down to bottom of graph\n                [s[0][0], height], // over to below first data point\n                s[0], // up to first data point to close the box\n            ])\n        );\n\n        return (\n            <g data-test=\"area\">\n                {segments.map(s => (\n                    <polyline\n                        key={`area${s.join('')}`}\n                        points={s.join(' ')}\n                        data-test=\"area-line\"\n                        style={{\n                            fill: fillColor,\n                            fillOpacity,\n                            strokeWidth: '0',\n                        }}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    renderCursor() {\n        const {\n            cursorStroke,\n            cursorStrokeWidth,\n            cursorStrokeLinecap,\n            cursorStrokeDasharray,\n            height,\n        } = this.props;\n\n        return (\n            this.state.rectArea !== null && (\n                <line\n                    data-test=\"cursor\"\n                    ref={this.handleCursorMount}\n                    x1={this.state.currentPointX}\n                    y1={0}\n                    x2={this.state.currentPointX}\n                    y2={height}\n                    style={{\n                        stroke: cursorStroke,\n                        strokeWidth: cursorStrokeWidth,\n                        strokeLinecap: cursorStrokeLinecap,\n                        strokeDasharray: cursorStrokeDasharray,\n                    }}\n                />\n            )\n        );\n    }\n\n    renderTooltip() {\n        return (\n            this.state.anchor !== null && (\n                <Popover\n                    data-test=\"tooltip\"\n                    open={this.state.open}\n                    anchor={this.state.anchor}\n                    data-test-value={this.state.tooltip}\n                    appearance=\"inverted\"\n                    defaultPlacement=\"above\"\n                    animation={false}\n                >\n                    <StyledTooltip>\n                        {this.state.anchor !== null ? this.state.tooltip : undefined}\n                    </StyledTooltip>\n                </Popover>\n            )\n        );\n    }\n\n    /**\n     * Renders one or more svg circles to highlight values on the sparkline\n     * @method renderEndDots\n     * @param {Array[Array[Number]]} points // x,y coordinates of values\n     * @param {Number} dotsToShow           // number of end dots to display\n     * @param {Number} xMargin              // used when calculating the dot radius\n     * @returns {Object} React representation of SVG group\n     * @private\n     */\n    renderEndDots(points, dotsToShow, xMargin) {\n        const { endDotFillColor, endDotRadius, endDotStroke, endDotStrokeWidth } = this.props;\n\n        return (\n            <g>\n                {points.slice(-dotsToShow).map(point => (\n                    <circle\n                        key={`end-dot${point[0]}${point[1]}`}\n                        data-test=\"end-dot\"\n                        cx={point[0]}\n                        cy={point[1]}\n                        r={endDotRadius === 0 ? xMargin : endDotRadius}\n                        style={{\n                            fill: endDotFillColor,\n                            stroke: endDotStroke,\n                            strokeWidth: endDotStrokeWidth,\n                        }}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    /**\n     * Renders the line(s) above the area graph\n     * @method renderPolyline\n     * @param {Array} points\n     * @returns {Object} SVG Group of polylines\n     */\n    renderPolyline(points) {\n        const { data, lineColor, lineLength, lineStrokeWidth } = this.props;\n\n        const linePoints = isFinite(lineLength) && lineLength > 0 ? lineLength : points.length;\n        const lines = this.getSegmentSets(data.slice(-linePoints), points.slice(-linePoints));\n\n        return (\n            <g data-test=\"sparkline\">\n                {lines.map(lineData => (\n                    <polyline\n                        key={`line${lineData.join('')}`}\n                        data-test=\"polyline\"\n                        style={{\n                            fill: 'none',\n                            stroke: lineColor,\n                            strokeWidth: lineStrokeWidth,\n                            strokeLinejoin: 'round',\n                            strokeLinecap: 'round',\n                        }}\n                        points={lineData.join(' ')}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    render() {\n        const {\n            data,\n            elementRef,\n            showTooltip,\n            showEndDot,\n            endDotRadius,\n            endDotStrokeWidth,\n            endDotCount,\n            height,\n            isArea,\n            lineStrokeWidth,\n            width,\n            title,\n        } = this.props;\n\n        if (data.length === 0) {\n            return null;\n        }\n\n        // Calculate horizontal and vertical margin so that fit line or end dot.\n        const xMargin = endDotRadius + endDotStrokeWidth / 2;\n        const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);\n\n        const points = this.dataToPoints(xMargin, yMargin);\n\n        const dotsToShow = Math.max(showEndDot && 1, isFinite(endDotCount) && endDotCount > 0 && endDotCount);\n\n        return (\n            <div // eslint-disable-line jsx-a11y/mouse-events-have-key-events\n                data-test=\"line\"\n                data-test-type={isArea ? 'area' : 'line'}\n                onMouseOut={() => {\n                    this.setState({\n                        open: false,\n                        anchor: null,\n                        rectArea: null,\n                        currentPointX: null,\n                    });\n                }}\n                ref={elementRef}\n                {...omit(this.props, keys(SparkLine.propTypes))}\n            >\n                <StyledSvg\n                    height={height}\n                    width={width}\n                    role=\"img\"\n                    aria-labelledby={this.titleId}\n                    data-test=\"sparkline-svg\"\n                >\n                    <title id={this.titleId} data-test=\"sparkline-title\">\n                        {title || _('Source count over time sparkline trend')}\n                    </title>\n                    <g>\n                        {this.renderCursor()}\n                        {this.renderPolyline(points)}\n                        {this.renderArea(points)}\n                        {dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null}\n                        {showTooltip ? this.renderRect(points, xMargin) : null}\n                        {showTooltip ? this.renderTooltip() : null}\n                    </g>\n                </StyledSvg>\n            </div>\n        );\n    }\n}\n\nexport default SparkLine;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA;AAAA;AAAA;AACA,oBAA+B;AAC/B,+BAAc;AACd,IAAO,qBAAS,aAAa,gBAA8B,wBAAU;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAA,iBAA+B;AAC/B,0BAAc;AACd,IAAO,gBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,2BAAc;AACd,IAAO,iBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,sCAAc;AACd,IAAO,4BAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,4BAAc;AACd,IAAO,kBAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,yBAAc;AACd,IAAO,eAAS,aAAaA,iBAA8B,yBAAUA;;;ACHrE;AAAA;AAAA;AAAA;AACA,IAAAC,iBAA+B;AAC/B,uBAAc;AACd,IAAO,aAAS,aAAaA,iBAA8B,yBAAUA;;;ACKrE,IAAM,YAAY,0BAAO;AAAA;AAAA;AAAA;AAKzB,IAAM,gBAAgB,0BAAO;AAAA;AAAA;AAAA;AAK7B,IAAM,aAAN,MAAM,mBAAkB,wBAAU;AAAA,EAiG9B,YAAY,UAAU,MAAM;AACxB,UAAM,OAAO,GAAG,IAAI;AAyFxB,6CAAoB,QAAM;AACtB,WAAK,SAAS;AAAA,QACV,QAAQ;AAAA,MACZ,CAAC;AAAA,IACL;AA5FI,SAAK,QAAQ;AAAA,MACT,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACb;AACA,SAAK,cAAU,wBAAY;AAAA,EAC/B;AAAA,EAEA,SAAS;AACL,UAAM,EAAE,MAAM,YAAY,KAAK,IAAI,KAAK;AACxC,UAAM,UAAU,MAAO,iBAAa,oBAAI,KAAK,SAAS,IAAI,CAAC,QAAI,oBAAI,IAAI;AACvE,WAAO,SAAS,SAAY,OAAO,QAAQ;AAAA,EAC/C;AAAA,EAEA,SAAS;AACL,UAAM,EAAE,MAAM,YAAY,KAAK,IAAI,KAAK;AACxC,UAAM,UAAU,MAAO,iBAAa,oBAAI,KAAK,SAAS,IAAI,CAAC,QAAI,oBAAI,IAAI;AACvE,WAAO,SAAS,SAAY,OAAO,QAAQ;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS,SAAS;AACd,UAAM,EAAE,MAAM,MAAM,IAAI,KAAK;AAE7B,UAAM,SAAS,QAAQ,UAAU,MAAM,KAAK,SAAS,IAAI,KAAK,SAAS,IAAI;AAC3E,WAAO,KAAK,IAAI,GAAG,KAAK;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS,SAAS;AACd,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,OAAO;AAK7B,UAAM,SAAS,SAAS,UAAU,MAAM,WAAW,YAAY;AAC/D,WAAO,KAAK,IAAI,GAAG,KAAK;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,eAAe,MAAM,QAAQ;AACzB,UAAM,EAAE,WAAW,IAAI,KAAK;AAC5B,UAAM,QAAQ,CAAC;AACf,QAAI,cAAc,CAAC;AAEnB,SAAK,QAAQ,CAAC,GAAG,QAAQ;AAErB,UAAI,CAAC,kBAAc,uBAAO,CAAC,GAAG;AAE1B,YAAI,YAAY,SAAS,GAAG;AACxB,gBAAM,KAAK,WAAW;AAAA,QAC1B;AAEA,sBAAc,CAAC;AAAA,MACnB,OAAO;AAEH,oBAAY,KAAK,OAAO,GAAG,CAAC;AAAA,MAChC;AAAA,IACJ,CAAC;AAGD,QAAI,YAAY,SAAS,GAAG;AACxB,YAAM,KAAK,WAAW;AAAA,IAC1B;AAEA,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW;AACP,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,WAAO,KAAK,IAAI,WAAU,UAAU,OAAO,IAAI,KAAM;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,SAAS,SAAS;AAC3B,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,QAAQ,KAAK,SAAS,OAAO;AACnC,UAAM,QAAQ,KAAK,SAAS,OAAO;AACnC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,OAAO;AAC7B,WAAO,KACF,IAAI,CAAC,KAAK,SAAS;AAAA,MAChB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,aAAa,WAAW,QAAQ,WAAW,WAAW,OAAO,QAAQ;AAAA,IAC5E,EAAE,EACD,IAAI,OAAK,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,WAAW,QAAQ,SAAS;AACxB,UAAM,EAAE,MAAM,OAAO,IAAI,KAAK;AAC9B,UAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,WAAO,OAAO,IAAI,CAAC,GAAG;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACG,KAAK,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;AAAA,UACjB,aAAW,QAAQ,CAAC;AAAA,UACpB,GAAG,EAAE,CAAC,IAAI,QAAQ,KAAK,IAAI,IAAI,EAAE,CAAC,IAAI,QAAQ;AAAA,UAC9C,GAAG;AAAA,UACH,OAAO,MAAM,KAAK,KAAK,WAAW,IAAI,QAAQ,IAAI;AAAA,UAClD;AAAA,UACA,OAAO,EAAE,aAAa,EAAE;AAAA,UACxB,aAAa,OAAK;AACd,iBAAK,SAAS;AAAA,cACV,MAAM,KAAK,CAAC,MAAM;AAAA,cAClB,UAAU,KAAK,CAAC,MAAM,OAAO,OAAO,EAAE;AAAA,cACtC,SAAS,KAAK,CAAC;AAAA,cACf,eAAe,EAAE,CAAC;AAAA,YACtB,CAAC;AAAA,UACL;AAAA;AAAA,MACJ;AAAA,KAEH;AAAA,EACL;AAAA;AAAA,EAGA,WAAW,QAAQ;AACf,UAAM,EAAE,MAAM,WAAW,aAAa,QAAQ,OAAO,IAAI,KAAK;AAE9D,QAAI,CAAC,UAAU,OAAO,WAAW,GAAG;AAChC,aAAO;AAAA,IACX;AAEA,QAAI,WAAW,KAAK,eAAe,MAAM,MAAM;AAC/C,eAAW,SAAS;AAAA,MAAI,OACpB,EAAE,OAAO;AAAA,QACL,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,MAAM;AAAA;AAAA,QAC3B,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM;AAAA;AAAA,QAChB,EAAE,CAAC;AAAA;AAAA,MACP,CAAC;AAAA,IACL;AAEA,WACI,4CAAC,OAAE,aAAU,UACR,SAAS,IAAI,OACV;AAAA,MAAC;AAAA;AAAA,QACG,KAAK,OAAO,EAAE,KAAK,EAAE,CAAC;AAAA,QACtB,QAAQ,EAAE,KAAK,GAAG;AAAA,QAClB,aAAU;AAAA,QACV,OAAO;AAAA,UACH,MAAM;AAAA,UACN;AAAA,UACA,aAAa;AAAA,QACjB;AAAA;AAAA,IACJ,CACH,CACL;AAAA,EAER;AAAA,EAEA,eAAe;AACX,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI,KAAK;AAET,WACI,KAAK,MAAM,aAAa,QACpB;AAAA,MAAC;AAAA;AAAA,QACG,aAAU;AAAA,QACV,KAAK,KAAK;AAAA,QACV,IAAI,KAAK,MAAM;AAAA,QACf,IAAI;AAAA,QACJ,IAAI,KAAK,MAAM;AAAA,QACf,IAAI;AAAA,QACJ,OAAO;AAAA,UACH,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,eAAe;AAAA,UACf,iBAAiB;AAAA,QACrB;AAAA;AAAA,IACJ;AAAA,EAGZ;AAAA,EAEA,gBAAgB;AACZ,WACI,KAAK,MAAM,WAAW,QAClB;AAAA,MAAC;AAAA;AAAA,QACG,aAAU;AAAA,QACV,MAAM,KAAK,MAAM;AAAA,QACjB,QAAQ,KAAK,MAAM;AAAA,QACnB,mBAAiB,KAAK,MAAM;AAAA,QAC5B,YAAW;AAAA,QACX,kBAAiB;AAAA,QACjB,WAAW;AAAA;AAAA,MAEX,4CAAC,qBACI,KAAK,MAAM,WAAW,OAAO,KAAK,MAAM,UAAU,MACvD;AAAA,IACJ;AAAA,EAGZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,cAAc,QAAQ,YAAY,SAAS;AACvC,UAAM,EAAE,iBAAiB,cAAc,cAAc,kBAAkB,IAAI,KAAK;AAEhF,WACI,4CAAC,WACI,OAAO,MAAM,CAAC,UAAU,EAAE,IAAI,WAC3B;AAAA,MAAC;AAAA;AAAA,QACG,KAAK,UAAU,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;AAAA,QAClC,aAAU;AAAA,QACV,IAAI,MAAM,CAAC;AAAA,QACX,IAAI,MAAM,CAAC;AAAA,QACX,GAAG,iBAAiB,IAAI,UAAU;AAAA,QAClC,OAAO;AAAA,UACH,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,aAAa;AAAA,QACjB;AAAA;AAAA,IACJ,CACH,CACL;AAAA,EAER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAe,QAAQ;AACnB,UAAM,EAAE,MAAM,WAAW,YAAY,gBAAgB,IAAI,KAAK;AAE9D,UAAM,iBAAa,yBAAS,UAAU,KAAK,aAAa,IAAI,aAAa,OAAO;AAChF,UAAM,QAAQ,KAAK,eAAe,KAAK,MAAM,CAAC,UAAU,GAAG,OAAO,MAAM,CAAC,UAAU,CAAC;AAEpF,WACI,4CAAC,OAAE,aAAU,eACR,MAAM,IAAI,cACP;AAAA,MAAC;AAAA;AAAA,QACG,KAAK,OAAO,SAAS,KAAK,EAAE,CAAC;AAAA,QAC7B,aAAU;AAAA,QACV,OAAO;AAAA,UACH,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,gBAAgB;AAAA,UAChB,eAAe;AAAA,QACnB;AAAA,QACA,QAAQ,SAAS,KAAK,GAAG;AAAA;AAAA,IAC7B,CACH,CACL;AAAA,EAER;AAAA,EAEA,SAAS;AACL,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI,KAAK;AAET,QAAI,KAAK,WAAW,GAAG;AACnB,aAAO;AAAA,IACX;AAGA,UAAM,UAAU,eAAe,oBAAoB;AACnD,UAAM,UAAU,KAAK,IAAI,kBAAkB,GAAG,eAAe,oBAAoB,CAAC;AAElF,UAAM,SAAS,KAAK,aAAa,SAAS,OAAO;AAEjD,UAAM,aAAa,KAAK,IAAI,cAAc,OAAG,yBAAS,WAAW,KAAK,cAAc,KAAK,WAAW;AAEpG,WACI;AAAA,MAAC;AAAA;AAAA,QACG,aAAU;AAAA,QACV,kBAAgB,SAAS,SAAS;AAAA,QAClC,YAAY,MAAM;AACd,eAAK,SAAS;AAAA,YACV,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,eAAe;AAAA,UACnB,CAAC;AAAA,QACL;AAAA,QACA,KAAK;AAAA,aACD,qBAAK,KAAK,WAAO,qBAAK,WAAU,SAAS,CAAC;AAAA,MAE9C;AAAA,QAAC;AAAA;AAAA,UACG;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,mBAAiB,KAAK;AAAA,UACtB,aAAU;AAAA;AAAA,QAEV,4CAAC,WAAM,IAAI,KAAK,SAAS,aAAU,qBAC9B,aAAS,gBAAE,wCAAwC,CACxD;AAAA,QACA,4CAAC,WACI,KAAK,aAAa,GAClB,KAAK,eAAe,MAAM,GAC1B,KAAK,WAAW,MAAM,GACtB,aAAa,KAAK,cAAc,QAAQ,YAAY,OAAO,IAAI,MAC/D,cAAc,KAAK,WAAW,QAAQ,OAAO,IAAI,MACjD,cAAc,KAAK,cAAc,IAAI,IAC1C;AAAA,MACJ;AAAA,IACJ;AAAA,EAER;AACJ;AAtdI,cADE,YACK,aAAY;AAAA;AAAA;AAAA;AAAA,EAIf,YAAY,mBAAU;AAAA;AAAA,EAEtB,MAAM,WAAS;AACX,QAAI,KAAC,wBAAQ,MAAM,IAAI,GAAG;AACtB,aAAO,IAAI,MAAM,8CAA8C;AAAA,IACnE;AAEA,QAAI,MAAM,cAAc,CAAC,MAAM,KAAK,MAAM,eAAS,uBAAO,KAAK,SAAK,yBAAS,KAAK,CAAC,GAAG;AAClF,aAAO,IAAI,MAAM,4DAA4D;AAAA,IACjF;AAEA,QAAI,CAAC,MAAM,cAAc,CAAC,MAAM,KAAK,MAAM,eAAS,yBAAS,KAAK,CAAC,GAAG;AAClE,aAAO,IAAI,MAAM,oDAAoD;AAAA,IACzE;AACA,WAAO;AAAA,EACX;AAAA;AAAA,EAEA,YAAY,mBAAU,UAAU,CAAC,mBAAU,MAAM,mBAAU,MAAM,CAAC;AAAA;AAAA,EAElE,aAAa,mBAAU;AAAA;AAAA,EAEvB,iBAAiB,mBAAU;AAAA;AAAA;AAAA;AAAA,EAI3B,cAAc,mBAAU;AAAA;AAAA,EAExB,cAAc,mBAAU;AAAA;AAAA,EAExB,mBAAmB,mBAAU;AAAA;AAAA,EAE7B,WAAW,mBAAU;AAAA;AAAA,EAErB,aAAa,mBAAU;AAAA;AAAA,EAEvB,cAAc,mBAAU;AAAA;AAAA,EAExB,mBAAmB,mBAAU;AAAA;AAAA,EAE7B,qBAAqB,mBAAU,MAAM,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAAA;AAAA,EAEhE,uBAAuB,mBAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjC,QAAQ,mBAAU,OAAO;AAAA;AAAA,EAEzB,QAAQ,mBAAU;AAAA;AAAA,EAElB,WAAW,mBAAU;AAAA;AAAA,EAErB,YAAY,mBAAU;AAAA;AAAA,EAEtB,iBAAiB,mBAAU;AAAA;AAAA,EAE3B,YAAY,mBAAU;AAAA;AAAA,EAEtB,aAAa,mBAAU;AAAA;AAAA,EAEvB,MAAM,mBAAU;AAAA;AAAA,EAEhB,MAAM,mBAAU;AAAA;AAAA;AAAA;AAAA,EAIhB,OAAO,mBAAU,OAAO;AAAA;AAAA,EAExB,OAAO,mBAAU;AACrB;AAEA,cA5EE,YA4EK,gBAAe;AAAA,EAClB,YAAY;AAAA,EACZ,MAAM,CAAC;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,iBAAiB;AACrB;AA/FJ,IAAM,YAAN;AAydA,IAAO,oBAAQ;",
+  "sourcesContent": ["export { default } from './SparkLine.jsx';\n", "\nimport * as defaultImport from \"prop-types\";\nexport * from \"prop-types\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Popover\";\nexport * from \"@splunk/react-ui/Popover\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { isArray, isFinite, isNull, keys, max, min, omit } from 'lodash';\nimport styled from 'styled-components';\nimport Popover from '@splunk/react-ui/Popover';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { createDOMID } from '@splunk/ui-utils/id';\n\nconst StyledSvg = styled.svg`\n    /* For fixing IE11 shows overflow part line issue */\n    overflow: hidden;\n`;\n\nconst StyledTooltip = styled.div`\n    padding: 3px 8px;\n    font-size: 12px;\n`;\n\nconst preventDefault = e => e.preventDefault();\n\nclass SparkLine extends Component {\n    static propTypes = {\n        /**\n         * If true, data can contain `null` as a value and is treated as `0`. If false, this throws error when data contains `null`.\n         */\n        acceptNull: PropTypes.bool,\n        /** Array of numbers. These data numbers are converted to points and show on sparkline. */\n        data: props => {\n            if (!isArray(props.data)) {\n                return new Error('Data provided to Sparkline must be an array.');\n            }\n\n            if (props.acceptNull && !props.data.every(value => isNull(value) || isFinite(value))) {\n                return new Error('Data provided to Sparkline must be finite numbers or null.');\n            }\n\n            if (!props.acceptNull && !props.data.every(value => isFinite(value))) {\n                return new Error('Data provided to Sparkline must be finite numbers.');\n            }\n            return null;\n        },\n        /** A React ref which is set to the DOM element when the component mounts and `null` when it unmounts. */\n        elementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n        /** 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. */\n        endDotCount: PropTypes.number,\n        /** Fills color to the end dot. */\n        endDotFillColor: PropTypes.string,\n        /**\n         * Sets end dot radius. End dot radius must be less than or equal to the margin. By default, its value equals the margin.\n         */\n        endDotRadius: PropTypes.number,\n        /** Sets end dot circle stroke color. */\n        endDotStroke: PropTypes.string,\n        /** Sets end dot circle stroke width in pixels. */\n        endDotStrokeWidth: PropTypes.number,\n        /** Fills color to area. */\n        fillColor: PropTypes.string,\n        /** Fills opacity to area. Value must be in 0 ~ 1. */\n        fillOpacity: PropTypes.string,\n        /** Sets cursor stroke color. */\n        cursorStroke: PropTypes.string,\n        /** Sets cursor stroke width in pixels. */\n        cursorStrokeWidth: PropTypes.number,\n        /** Sets cursor line cap style. */\n        cursorStrokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),\n        /** Sets cursor dash array style. */\n        cursorStrokeDasharray: PropTypes.string,\n        /**\n         * Container height. If this value is specified, sparkline calculates the size using this height. If height isn't specified,\n         * sparkline figures out the container height by itself.\n         */\n        height: PropTypes.number.isRequired,\n        /** When set to `true`, sparkline shows as area. */\n        isArea: PropTypes.bool,\n        /** The sparkline line color. */\n        lineColor: PropTypes.string,\n        /** Allows user to draw only the last data points for the line. */\n        lineLength: PropTypes.number,\n        /** The sparkline line stroke width in pixels. */\n        lineStrokeWidth: PropTypes.number,\n        /** Enable to show end dot. */\n        showEndDot: PropTypes.bool,\n        /** Enable to show tooltip. */\n        showTooltip: PropTypes.bool,\n        /** Sets the data value range and maximum value shown on sparkline. */\n        yMax: PropTypes.number,\n        /** Sets the data value range and minimum value shown on sparkline. */\n        yMin: PropTypes.number,\n        /**\n         * The width of the container.\n         */\n        width: PropTypes.number.isRequired,\n        /** Sets the a11y title text on sparkline. */\n        title: PropTypes.string,\n    };\n\n    static defaultProps = {\n        acceptNull: false,\n        data: [],\n        showTooltip: true,\n        endDotCount: 0,\n        showEndDot: false,\n        endDotRadius: 0,\n        endDotFillColor: 'white',\n        endDotStroke: 'black',\n        endDotStrokeWidth: 0,\n        fillColor: '#65a637',\n        fillOpacity: '.1',\n        cursorStroke: '#5184AF',\n        cursorStrokeWidth: 3,\n        cursorStrokeLinecap: 'square',\n        cursorStrokeDasharray: '1, 5',\n        isArea: false,\n        lineColor: '#65a637',\n        lineStrokeWidth: 1,\n    };\n\n    constructor(props, ...rest) {\n        super(props, ...rest);\n        this.state = {\n            anchor: null,\n            activeIndex: 0,\n            hoveredIndex: null,\n            componentIsFocused: false,\n        };\n        this.titleId = createDOMID('sparkline-title');\n        this.pointRefs = [];\n        this.containerRef = React.createRef();\n\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.handleMouseOver = this.handleMouseOver.bind(this);\n        this.handleMouseLeave = this.handleMouseLeave.bind(this);\n        this.handleFocus = this.handleFocus.bind(this);\n        this.handleBlur = this.handleBlur.bind(this);\n    }\n\n    handleFocus(event) {\n        const { target } = event;\n        const { pointIndex: pointIndexStr } = target.dataset || {};\n        const { activeIndex, componentIsFocused, hoveredIndex } = this.state;\n\n        if (pointIndexStr !== undefined) {\n            // focus event propagated from a datapoint\n            const pointIndex = parseInt(pointIndexStr, 10);\n            if (activeIndex !== pointIndex || !componentIsFocused || hoveredIndex !== null) {\n                this.setState({\n                    activeIndex: pointIndex,\n                    hoveredIndex: null,\n                    componentIsFocused: true,\n                });\n            }\n        } else if (this.pointRefs.length > 0) {\n            // focus set programmatically or by user agent\n            const indexToFocus = activeIndex ? Math.min(this.pointRefs.length - 1, activeIndex) : 0;\n            this.pointRefs[indexToFocus].focus();\n        }\n    }\n\n    handleBlur(event) {\n        if (this.containerRef.current && !this.containerRef.current.contains(event.relatedTarget)) {\n            this.setState({ componentIsFocused: false });\n        }\n    }\n\n    handleKeyDown(event) {\n        const { data } = this.props;\n        const { activeIndex } = this.state;\n        const numPoints = data.length;\n\n        if (numPoints === 0) {\n            return;\n        }\n\n        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];\n        if (!allowedKeys.includes(event.key)) {\n            return;\n        }\n\n        let newIndex = activeIndex;\n\n        switch (event.key) {\n            case 'Home':\n                newIndex = 0;\n                break;\n            case 'End':\n                newIndex = numPoints - 1;\n                break;\n            case 'ArrowLeft':\n                newIndex = Math.max(0, activeIndex - 1);\n                break;\n            case 'ArrowRight':\n                newIndex = Math.min(numPoints - 1, activeIndex + 1);\n                break;\n            default:\n                return;\n        }\n\n        if (newIndex !== activeIndex) {\n            event.preventDefault();\n            if (this.pointRefs[newIndex]) {\n                this.pointRefs[newIndex].focus();\n            }\n        }\n    }\n\n    handleMouseOver(event) {\n        const pointIndexStr = event.target.dataset && event.target.dataset.pointIndex;\n        if (pointIndexStr !== undefined) {\n            const pointIndex = parseInt(pointIndexStr, 10);\n            if (this.state.hoveredIndex !== pointIndex) {\n                this.setState({ hoveredIndex: pointIndex });\n            }\n        }\n    }\n\n    handleMouseLeave() {\n        if (this.state.hoveredIndex !== null) {\n            this.setState({ hoveredIndex: null });\n        }\n    }\n\n    getMax() {\n        const { data, acceptNull, yMax } = this.props;\n        const dataMax = () => (acceptNull ? max(this.fillNull()) : max(data));\n        return yMax !== undefined ? yMax : dataMax();\n    }\n\n    getMin() {\n        const { data, acceptNull, yMin } = this.props;\n        const dataMin = () => (acceptNull ? min(this.fillNull()) : min(data));\n        return yMin !== undefined ? yMin : dataMin();\n    }\n\n    /**\n     * Gets unit value of x axis.\n     * @param {Number} xMargin - margin of x axis.\n     * @return {Number} unit value of x axis.\n     * @private\n     */\n    getXUnit(xMargin) {\n        const { data, width } = this.props;\n        // Calculate xUnit. Width substract the left margin and right margin, then divide by data length.\n        const xUnit = (width - xMargin * 2) / (data.length > 1 ? data.length - 1 : 1);\n        return Math.max(0, xUnit);\n    }\n\n    /**\n     * Gets unit value of y axis.\n     * @param {String} yMargin - margin of y axis.\n     * @return {Number} unit value of y axis.\n     * @private\n     */\n    getYUnit(yMargin) {\n        const { height } = this.props;\n        const maxValue = this.getMax();\n        const minValue = this.getMin();\n\n        // Calculate yUnit. Height substract the upper margin and bottom margin, then divide by value range of values in data.\n        // 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.\n        // So, draws sparkline right in the mid of the container.\n        const yUnit = (height - yMargin * 2) / (maxValue - minValue || 2);\n        return Math.max(0, yUnit);\n    }\n\n    /**\n     * Get a list of arrays of points for drawing lines, based on acceptNull property\n     * @method getSegmentSets\n     * @param {Array} data\n     * @param {Array} points\n     * @returns {Array} List of datapoint sets used for drawing lines\n     */\n    getSegmentSets(data, points) {\n        const { acceptNull } = this.props;\n        const lines = [];\n        let currentLine = [];\n\n        data.forEach((p, idx) => {\n            // Found null data\n            if (!acceptNull && isNull(p)) {\n                // need at least 2 points to draw a segment\n                if (currentLine.length > 1) {\n                    lines.push(currentLine);\n                }\n                // reset for the next segment\n                currentLine = [];\n            } else {\n                // data is good, add point data\n                currentLine.push(points[idx]);\n            }\n        });\n\n        // Add the last line\n        if (currentLine.length > 1) {\n            lines.push(currentLine);\n        }\n\n        return lines;\n    }\n\n    handleCursorMount = el => {\n        this.setState({\n            anchor: el,\n        });\n    };\n\n    /**\n     * Utility for fill null value with number 0.\n     * @private\n     */\n    fillNull() {\n        const { data } = this.props;\n        return data.map(value => (value === null ? 0 : value));\n    }\n\n    /**\n     * Converts data to points in svg\n     * @param {Number} xMargin - margin of x axis.\n     * @param {Number} yMargin - margin of x axis.\n     * @return {Array} points coordination.\n     * @private\n     */\n    dataToPoints(xMargin, yMargin) {\n        const { data } = this.props;\n        const xUnit = this.getXUnit(xMargin);\n        const yUnit = this.getYUnit(yMargin);\n        const maxValue = this.getMax();\n        const minValue = this.getMin();\n        return data\n            .map((val, idx) => ({\n                x: idx * xUnit + xMargin,\n                y: maxValue === minValue ? yUnit + yMargin : (maxValue - val) * yUnit + yMargin,\n            }))\n            .map(p => [p.x, p.y]);\n    }\n\n    /**\n     * Renders rect area for each datapoint for interactions and screen reader support\n     * @param {Array} points - array of points coordination.\n     * @param {Number} xMargin - margin of x axis.\n     * @return {Array} array of svg rect objects\n     * @private\n     */\n    renderRect(points, xMargin) {\n        const { data, height, showTooltip } = this.props;\n        const xUnit = this.getXUnit(xMargin);\n\n        return points.map((p, i) => (\n            /* eslint-disable react/no-array-index-key */\n            <rect\n                key={`${i}_${p[0]}`}\n                role=\"img\"\n                aria-label={`Value: ${data[i] === null ? 'N/A' : data[i]}, point ${i + 1} of ${data.length}`}\n                data-test={`rect-${i}`}\n                data-point-index={i}\n                tabIndex={showTooltip && this.state.activeIndex === i ? 0 : -1}\n                ref={el => {\n                    this.pointRefs[i] = el;\n                }}\n                x={p[0] - xUnit / 2 <= 0 ? 0 : p[0] - xUnit / 2}\n                y={0}\n                width={i === 0 && data.length !== 1 ? xUnit / 2 : xUnit}\n                height={height}\n                style={{ fillOpacity: 0 }}\n                onMouseDown={preventDefault} // do not take focus on click\n            />\n            /* eslint-enable react/no-array-index-key */\n        ));\n    }\n\n    // Renders area chart\n    renderArea(points) {\n        const { data, fillColor, fillOpacity, height, isArea } = this.props;\n\n        if (!isArea || points.length === 0) {\n            return null;\n        }\n\n        let segments = this.getSegmentSets(data, points);\n        segments = segments.map(s =>\n            s.concat([\n                [s[s.length - 1][0], height], // down to bottom of graph\n                [s[0][0], height], // over to below first data point\n                s[0], // up to first data point to close the box\n            ])\n        );\n\n        return (\n            <g data-test=\"area\">\n                {segments.map(s => (\n                    <polyline\n                        key={`area${s.join('')}`}\n                        points={s.join(' ')}\n                        data-test=\"area-line\"\n                        style={{\n                            fill: fillColor,\n                            fillOpacity,\n                            strokeWidth: '0',\n                        }}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    renderCursor(currentPointX, shouldRender) {\n        const { cursorStroke, cursorStrokeWidth, cursorStrokeLinecap, cursorStrokeDasharray, height } =\n            this.props;\n\n        return (\n            shouldRender && (\n                <line\n                    data-test=\"cursor\"\n                    ref={this.handleCursorMount}\n                    x1={currentPointX}\n                    y1={0}\n                    x2={currentPointX}\n                    y2={height}\n                    style={{\n                        stroke: cursorStroke,\n                        strokeWidth: cursorStrokeWidth,\n                        strokeLinecap: cursorStrokeLinecap,\n                        strokeDasharray: cursorStrokeDasharray,\n                    }}\n                />\n            )\n        );\n    }\n\n    renderTooltip(tooltipValue, isOpen) {\n        const { anchor } = this.state;\n\n        return (\n            <Popover\n                data-test=\"tooltip\"\n                open={isOpen}\n                anchor={anchor}\n                data-test-value={tooltipValue}\n                appearance=\"inverted\"\n                defaultPlacement=\"above\"\n                animation={false}\n            >\n                <StyledTooltip>{tooltipValue}</StyledTooltip>\n            </Popover>\n        );\n    }\n\n    /**\n     * Renders one or more svg circles to highlight values on the sparkline\n     * @method renderEndDots\n     * @param {Array[Array[Number]]} points // x,y coordinates of values\n     * @param {Number} dotsToShow           // number of end dots to display\n     * @param {Number} xMargin              // used when calculating the dot radius\n     * @returns {Object} React representation of SVG group\n     * @private\n     */\n    renderEndDots(points, dotsToShow, xMargin) {\n        const { endDotFillColor, endDotRadius, endDotStroke, endDotStrokeWidth } = this.props;\n\n        return (\n            <g>\n                {points.slice(-dotsToShow).map(point => (\n                    <circle\n                        key={`end-dot${point[0]}${point[1]}`}\n                        data-test=\"end-dot\"\n                        cx={point[0]}\n                        cy={point[1]}\n                        r={endDotRadius === 0 ? xMargin : endDotRadius}\n                        style={{\n                            fill: endDotFillColor,\n                            stroke: endDotStroke,\n                            strokeWidth: endDotStrokeWidth,\n                        }}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    /**\n     * Renders the line(s) above the area graph\n     * @method renderPolyline\n     * @param {Array} points\n     * @returns {Object} SVG Group of polylines\n     */\n    renderPolyline(points) {\n        const { data, lineColor, lineLength, lineStrokeWidth } = this.props;\n\n        const linePoints = isFinite(lineLength) && lineLength > 0 ? lineLength : points.length;\n        const lines = this.getSegmentSets(data.slice(-linePoints), points.slice(-linePoints));\n\n        return (\n            <g data-test=\"sparkline\">\n                {lines.map(lineData => (\n                    <polyline\n                        key={`line${lineData.join('')}`}\n                        data-test=\"polyline\"\n                        style={{\n                            fill: 'none',\n                            stroke: lineColor,\n                            strokeWidth: lineStrokeWidth,\n                            strokeLinejoin: 'round',\n                            strokeLinecap: 'round',\n                        }}\n                        points={lineData.join(' ')}\n                    />\n                ))}\n            </g>\n        );\n    }\n\n    render() {\n        const {\n            data,\n            elementRef,\n            showTooltip,\n            showEndDot,\n            endDotRadius,\n            endDotStrokeWidth,\n            endDotCount,\n            height,\n            isArea,\n            lineStrokeWidth,\n            width,\n            title,\n        } = this.props;\n        const { activeIndex, hoveredIndex, componentIsFocused } = this.state;\n\n        if (data.length === 0) {\n            return null;\n        }\n\n        if (this.pointRefs.length !== data.length) {\n            // remove stale point refs when data changes\n            this.pointRefs.length = data.length;\n        }\n\n        // Calculate horizontal and vertical margin so that fit line or end dot.\n        const xMargin = endDotRadius + endDotStrokeWidth / 2;\n        const yMargin = Math.max(lineStrokeWidth / 2, endDotRadius + endDotStrokeWidth / 2);\n\n        const points = this.dataToPoints(xMargin, yMargin);\n\n        const dotsToShow = Math.max(showEndDot && 1, isFinite(endDotCount) && endDotCount > 0 && endDotCount);\n\n        let currentPointX = null;\n        let tooltipValue = null;\n        let showCursorAndTooltip = false;\n        let interactiveProps = {};\n\n        if (showTooltip) {\n            const isHovered = hoveredIndex !== null;\n            const shouldDisplayInteractiveElements = (isHovered || componentIsFocused) && data.length > 0;\n\n            if (shouldDisplayInteractiveElements) {\n                const displayIndex = isHovered ? hoveredIndex : activeIndex;\n\n                if (\n                    displayIndex !== null &&\n                    displayIndex >= 0 &&\n                    data.length > displayIndex &&\n                    points.length > displayIndex\n                ) {\n                    const displayPointCoords = points[displayIndex];\n                    if (displayPointCoords) {\n                        [currentPointX] = displayPointCoords;\n                    }\n                    tooltipValue = data[displayIndex];\n                    showCursorAndTooltip = currentPointX !== null;\n                }\n            }\n\n            interactiveProps = {\n                onKeyDown: this.handleKeyDown,\n                onMouseOver: this.handleMouseOver,\n                onMouseLeave: this.handleMouseLeave,\n                onFocus: this.handleFocus,\n                onBlur: this.handleBlur,\n            };\n        }\n\n        const ariaLabel = title || _('Source count over time sparkline trend');\n\n        return (\n            <div\n                data-test=\"line\"\n                data-test-type={isArea ? 'area' : 'line'}\n                role=\"group\"\n                ref={el => {\n                    this.containerRef.current = el;\n                    if (typeof elementRef === 'function') {\n                        elementRef(el);\n                    } else if (elementRef && typeof elementRef === 'object') {\n                        elementRef.current = el;\n                    }\n                }}\n                {...interactiveProps}\n                {...omit(this.props, keys(SparkLine.propTypes))}\n            >\n                <StyledSvg\n                    height={height}\n                    width={width}\n                    aria-labelledby={this.titleId}\n                    data-test=\"sparkline-svg\"\n                >\n                    <title id={this.titleId} data-test=\"sparkline-title\">\n                        {ariaLabel}\n                    </title>\n                    <g>\n                        {showTooltip ? this.renderCursor(currentPointX, showCursorAndTooltip) : null}\n                        {this.renderPolyline(points)}\n                        {this.renderArea(points)}\n                        {dotsToShow ? this.renderEndDots(points, dotsToShow, xMargin) : null}\n                        {this.renderRect(points, xMargin)}\n                        {showTooltip ? this.renderTooltip(tooltipValue, showCursorAndTooltip) : null}\n                    </g>\n                </StyledSvg>\n            </div>\n        );\n    }\n}\n\nexport default SparkLine;\n"],
+  "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/TRELLIS.md

@@ -1,6 +1,6 @@
 # Trellis layout
 
-> Trellis is only available for Area, Bar, Column, Line, Pie, Scatter and Single value visualizations.
+> Trellis is only available for Area, Bar, Column, Filler Gauge, Line, Pie, Scatter, and Single value visualizations.
 
 Organize your search results with the trellis layout for a holistic view of your data. Trellis layout visualizes your search results by separating each value field or aggregation.
 
@@ -18,7 +18,7 @@ Configure your visualization for the trellis layout by adding the `splitByLayout
 
 Customers with access to a Unified Dashboard Framework (UDF) **Edit** mode can create the trellis layout using the following steps. If you’re not using UDF, skip to step 4.
 
-1. Select a visualization that supports trellis (Area, Bar, Column, Line, Pie, Scatter, Single value) using the visual editor by clicking the **Add Chart** dropdown menu in the editing toolbar.
+1. Select a visualization that supports trellis (Area, Bar, Column, Filler Gauge, Line, Pie, Scatter, Single value) using the visual editor by clicking the **Add Chart** dropdown menu in the editing toolbar.
 2. Select the visualization on your dashboard so that it's highlighted with the blue editing outline.
 3. Set up a new data source by adding selecting **+ Create Search** and adding a search to the **Search query** window. Or, select an existing data source under the **Search**, **Saved Search**, or **Chain Search** dropdown lists.
 4. Activate the trellis layout by toggling on **Trellis Layout** in the **Data display** section of the Configuration panel.