@splunk/visualizations 27.0.0 → 27.2.0

package/SparkLine.js

@@ -45,7 +45,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-// src/SparkLine/SparkLine.jsx
+// src/SparkLine/index.ts
 var SparkLine_exports = {};
 __export(SparkLine_exports, {
   default: () => SparkLine_default

package/SparkLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["src/SparkLine/SparkLine.jsx", "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"],
-  "sourcesContent": ["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", "\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"],
-  "mappings": "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",
+  "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": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/TRELLIS.md

@@ -1,10 +1,10 @@
 # Trellis layout
 
-> Trellis is only available for single value visualizations.
+> Trellis is only available for Area, Bar, Column, Line 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.
 
-The search in the following example returns customer purchases by product category. Applying a trellis layout creates a view of each product category as its own single value visualization.
+The search in the following example returns customer purchases by product category. Applying a trellis layout creates a view of each product category as its own visualization.
 
 `index="sample-data" | stats count by productName`
 
@@ -18,8 +18,8 @@ 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 single value visualization using the visual editor by clicking the **Add Chart** dropdown menu in the editing toolbar.
-2. Select the single value on your dashboard so that it's highlighted with the blue editing outline.
+1. Select a visualization that supports trellis (Area, Bar, Column, Line, 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.
 
@@ -28,15 +28,16 @@ Customers with access to a Unified Dashboard Framework (UDF) **Edit** mode can c
 Additionally, you can add the following trellis configurations to the `options` stanza for further customization.
 
 ```markup
-| Option                 | Type   | Default                         | Description                                                                                                                                                                                                                                                                                                                        |
-| ---------------------- | ------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| splitByLayout          | string | off                             | Specify the layout method to display the visualization, which splits the data into individual visualizations based on a specific category. The available values are off and trellis.                                                                                                                                               |
-| trellisBackgroundColor | string | > themes.defaultBackgroundColor | Specify the background color of the whole panel in the trellis layout display. For example, “#FF0000”. You can use a hexadecimal code to apply the color. The default for Enterprise light is #ffffff. The default for Enterprise dark is #000000. The default for Prisma dark is #0b0c0e.                                         |
-| trellisColumns         | number | n/a                             | Specify the number of columns in a trellis layout container. For example, six columns allow six visualizations per row. Rows populate to accommodate the total number of visualizations. If no column number is specified, the number of columns is automatically set based on the value specified for trellisMinColumnWidth.      |
-| trellisMinColumnWidth  | number | 100                             | Specify the minimum width, in pixels, of each visualization in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                   |
-| trellisPageCount       | number | 20                              | Specify the maximum number of visualizations to display on a single page in the trellis container. The remaining visualizations paginate accordingly.                                                                                                                                                                              |
-| trellisRowHeight       | number | 70                              | Specify each visualization's height, in pixels, in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                               |
-| trellisSplitBy         | string | n/a                             | If applicable, specify the column's field name with categories used or aggregations to split the data into individual visualizations for trellis display. If you use an SPL `timechart` command, this might default to the SPL `by` clause field. If you use an SPL `chart` command, this might default to the first string field. |
+| Option                 | Type    | Default                         | Description                                                                                                                                                                                                                                                                                                                        |
+| ---------------------- | ------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| splitByLayout          | string  | off                             | Specify the layout method to display the visualization, which splits the data into individual visualizations based on a specific category. The available values are off and trellis.                                                                                                                                               |
+| trellisBackgroundColor | string  | > themes.defaultBackgroundColor | Specify the background color of the whole panel in the trellis layout display. For example, “#FF0000”. You can use a hexadecimal code to apply the color. The default for Enterprise light is #ffffff. The default for Enterprise dark is #000000. The default for Prisma dark is #0b0c0e.                                         |
+| trellisColumns         | number  | n/a                             | Specify the number of columns in a trellis layout container. For example, six columns allow six visualizations per row. Rows populate to accommodate the total number of visualizations. If no column number is specified, the number of columns is automatically set based on the value specified for trellisMinColumnWidth.      |
+| trellisMinColumnWidth  | number  | 100                             | Specify the minimum width, in pixels, of each visualization in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                   |
+| trellisPageCount       | number  | 20                              | Specify the maximum number of visualizations to display on a single page in the trellis container. The remaining visualizations paginate accordingly.                                                                                                                                                                              |
+| trellisRowHeight       | number  | 70                              | Specify each visualization's height, in pixels, in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                               |
+| trellisSharedScale     | boolean | true                            | If applicable, specify whether all visualizations will share the same scale in the trellis container. This only applies to Area, Bar, Column and Line chart.                                                                                                                                                                       |
+| trellisSplitBy         | string  | n/a                             | If applicable, specify the column's field name with categories used or aggregations to split the data into individual visualizations for trellis display. If you use an SPL `timechart` command, this might default to the SPL `by` clause field. If you use an SPL `chart` command, this might default to the first string field. |
 ```
 
 ## Overview of data-splitting logic
@@ -47,7 +48,7 @@ If your application has SPL support, the following are examples of how SPL searc
 
 ### Split data with the timechart command
 
-When using the SPL `timechart` command, the trellis layout defaults to an associated `by` clause. The following example shows how the trellis layout categorizes each single value visualization by product name as a result of the SPL search `index="sample-data" | timechart count by productName`.
+When using the SPL `timechart` command, the trellis layout defaults to an associated `by` clause. The following example shows how the trellis layout categorizes each Single value visualization by product name as a result of the SPL search `index="sample-data" | timechart count by productName`.
 
 ![](./src/common/docs/images/trellis-timechart.png)
 
@@ -114,7 +115,7 @@ export default () => (
 
 ### Split data with the chart or stats commands
 
-The trellis layout defaults to the first string field when using the SPL `chart` or `stats` command with one `by` clause. The following example shows how the trellis layout categorizes each single value visualization by the `productName` column as a result of the SPL search `index="sample-data" | chart count by productName`.
+The trellis layout defaults to the first string field when using the SPL `chart` or `stats` command with one `by` clause. The following example shows how the trellis layout categorizes each visualization, in this case Single value, by the `productName` column as a result of the SPL search `index="sample-data" | chart count by productName`.
 
 ![](./src/common/docs/images/trellis-chart-stats.png)
 

package/Table.js

@@ -1062,7 +1062,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4",
         width,
         height,
         backgroundColor
@@ -1128,7 +1128,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.2.0 - 2e7eda8d4"
 })`
     position: relative;
     width: 100%;
@@ -1615,6 +1615,25 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/common/utils/trellisUtils.ts
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -1622,6 +1641,8 @@ var withDashboardViz = (opts) => {
     vizConfig,
     computeVizProps: computeVizProps2 = () => {
     },
+    computeVizPropsBeforeEval = () => {
+    },
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -1671,14 +1692,26 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
+    const isTrellisFeatureFlagOn = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
     const [threshold, setThreshold] = react_exports.useState(Number(width));
     const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
       setThreshold(newThreshold);
@@ -1759,11 +1792,8 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
     let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+    if (isTrellisOn) {
       clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
@@ -1874,36 +1904,36 @@ var debounce_exports = {};
 __export(debounce_exports, {
   default: () => debounce_default
 });
-var defaultImport32 = __toESM(require("lodash/debounce"));
+var defaultImport33 = __toESM(require("lodash/debounce"));
 __reExport(debounce_exports, require("lodash/debounce"));
-var debounce_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var debounce_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:@splunk/react-ui/Table
 var Table_exports = {};
 __export(Table_exports, {
   default: () => Table_default
 });
-var defaultImport33 = __toESM(require("@splunk/react-ui/Table"));
+var defaultImport34 = __toESM(require("@splunk/react-ui/Table"));
 __reExport(Table_exports, require("@splunk/react-ui/Table"));
-var Table_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var Table_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/react-ui/Paginator
 var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport34 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport35 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var Paginator_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/react-ui/Message
 var Message_exports2 = {};
 __export(Message_exports2, {
   default: () => Message_default2
 });
-var defaultImport35 = __toESM(require("@splunk/react-ui/Message"));
+var defaultImport36 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
-var Message_default2 = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var Message_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Table/hooks.tsx
 var isArray = (v) => Array.isArray(v);
@@ -2400,9 +2430,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport36 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport37 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var Popover_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/SparkLine/SparkLine.jsx
 var StyledSvg = styled_components_default.svg`
@@ -2826,7 +2856,7 @@ var SparkLine_default = SparkLine;
 // src/Table/cells/SparklineCell.tsx
 var paddingLeftRight = 5;
 var paddingTopBottom = 3;
-var parseSparklineData = (data) => (Array.isArray(data) ? data : [data]).map((d) => parseInt(d.toString(), 10)).map((d) => isNaN(d) ? null : d);
+var parseSparklineData = (data) => (Array.isArray(data) ? data : [data]).map((d) => Number(d.toString())).map((d) => isNaN(d) ? null : d);
 var noop5 = () => void 0;
 var svgStyle = { height: 0 };
 var dummySVG = /* @__PURE__ */ react_exports.createElement("svg", { style: svgStyle });
@@ -2907,7 +2937,7 @@ var FixedTableHead = styled_components_default(Table_default.Head)`
     top: 0;
 `;
 var TableHeadCell = styled_components_default(Table_default.HeadCell)`
-    div > span {
+    button > span {
         word-break: inherit;
         word-wrap: inherit;
         white-space: ${({ textOverflowType }) => textOverflowType === "ellipsis" ? "nowrap" : "inherit"};
@@ -2966,7 +2996,7 @@ var SUITableContainer = styled_components_default.div`
         `}
 
     ${({ headerStyle }) => headerStyle && headerStyle.color && styled_components_exports.css`
-            & [data-test='head-cell'] > div > span {
+            & [data-test='head-cell'] > button > span {
                 color: ${headerStyle.color};
             }
         `}
@@ -3157,11 +3187,14 @@ var PureTable = (props) => {
     }, 300),
     [onColumnFormatChange]
   );
-  const handleEventClick = (e) => {
+  const handleEventHeadCellMouseDown = react_exports.useCallback((e) => {
     if (e.target.tagName.toLowerCase() === "hr") {
       e.stopPropagation();
     }
-  };
+  }, []);
+  const handleEventHeadCellMouseUp = react_exports.useCallback(() => {
+    setResizing(false);
+  }, [setResizing]);
   const handleKeyDown = (e) => {
     if (e.keyCode !== 13) {
       return;
@@ -3187,6 +3220,7 @@ var PureTable = (props) => {
     if (mode === "edit") {
       debouncedOnColumnFormatChange(updatedCF);
     }
+    setResizing(false);
   };
   const fontMapped = fontMap[font] || fontMap.proportional;
   const fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
@@ -3263,7 +3297,8 @@ var PureTable = (props) => {
                 columnId: value,
                 sortDir: sortKey === currentSortKey ? currentSortDir : "none",
                 width: (_b2 = (_a2 = columns[value]) == null ? void 0 : _a2.width) != null ? _b2 : INITIAL_UNSET_COLUMN_WIDTH,
-                onMouseDown: handleEventClick,
+                onMouseDown: handleEventHeadCellMouseDown,
+                onMouseUp: handleEventHeadCellMouseUp,
                 value,
                 onSort: isResizing || showRowNumbers && value === "#" || isHeaderHidden ? null : onSort,
                 resizable: !isHeaderHidden,
@@ -3414,8 +3449,8 @@ var computeVizProps = (_a) => {
   }
   if (vizProps.onOptionsChange) {
     const handleColumnFormatChange = (updatedColumnFormat) => {
-      var _a3, _b2;
-      const cloneOfExistingColumnFormat = (_b2 = __spreadValues({}, (_a3 = vizProps == null ? void 0 : vizProps.options) == null ? void 0 : _a3.columnFormat)) != null ? _b2 : {};
+      var _a3;
+      const cloneOfExistingColumnFormat = __spreadValues({}, ((_a3 = vizProps == null ? void 0 : vizProps.options) == null ? void 0 : _a3.columnFormat) || {});
       const keys2 = Object.keys(updatedColumnFormat);
       const values = Object.values(updatedColumnFormat);
       keys2.forEach((key, index) => {