@splunk/visualizations 28.5.2 → 28.6.0

package/SingleValueBasic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/SingleValueBasic/index.ts", "esm-externals:react", "esm-externals:prop-types", "esm-externals:styled-components", "esm-externals:lodash", "esm-externals:@splunk/visualizations-shared/numberUtils", "esm-externals:@splunk/visualizations-shared/domUtils", "esm-externals:@splunk/visualizations-shared/propUtils", "esm-externals:@splunk/visualizations-shared/colorConstants", "src/common/utils/singleValueUtils.js", "esm-externals:@splunk/react-icons/enterprise/ArrowUp", "esm-externals:@splunk/react-icons/enterprise/ArrowDown", "esm-externals:@splunk/ui-utils/i18n", "src/SingleValueBasic/TrendValue.jsx", "esm-externals:cssesc", "src/SingleValueBasic/MajorValue.jsx", "src/SingleValueBasic/SingleValueBasic.jsx"],
-  "sourcesContent": ["export * from './SingleValueBasic';\nexport { default } from './SingleValueBasic';\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"prop-types\";\nexport * from \"prop-types\";\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 \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/numberUtils\";\nexport * from \"@splunk/visualizations-shared/numberUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/domUtils\";\nexport * from \"@splunk/visualizations-shared/domUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/propUtils\";\nexport * from \"@splunk/visualizations-shared/propUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/colorConstants\";\nexport * from \"@splunk/visualizations-shared/colorConstants\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { get } from 'lodash';\nimport { isNumerial, formatNumber } from '@splunk/visualizations-shared/numberUtils';\nimport { computeTextSize } from '@splunk/visualizations-shared/domUtils';\nimport { formatColor } from '@splunk/visualizations-shared/propUtils';\nimport { DELTA_GREEN, DELTA_RED } from '@splunk/visualizations-shared/colorConstants';\n\nexport const DEFAULT_FONT = 12;\nexport const DEFAULT_FONT_FAMILY =\n    '\"Splunk Platform Sans\", \"Proxima Nova\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n\nexport const SVR_PADDING = { top: 12, bottom: 12, left: 16, right: 16 };\n\nexport const getAligment = align => {\n    const alignMap = {\n        left: 'start',\n        center: 'center',\n        right: 'end',\n    };\n    return alignMap[align] || 'center';\n};\n\n/**\n * @method shouldShowTrend\n * @param {String} trendDisplay\n * @returns {Bool}\n */\nexport const shouldShowTrend = trendDisplay => trendDisplay === 'absolute' || trendDisplay === 'percent';\n\n/**\n * @method isLoadingOrNoColumns\n * @param {Object} dataSources\n * @param {Boolean} loading\n * @returns {Boolean} return true if loading or without columns in dataSources\n */\nexport const isLoadingOrNoColumns = (dataSources, loading) => {\n    const data = get(dataSources, 'primary.data.columns[0]', undefined);\n    const noColumns = data === undefined;\n    return loading || noColumns;\n};\n\n/**\n * Retrieve the valid formatted color\n * @method getFormattedColor\n * @param {String} color\n * @param {String} defaultColor\n * @returns {String} the formatted color\n */\nexport const getFormattedColor = (color, defaultColor) => formatColor(color) || formatColor(defaultColor);\n\n/**\n * Determines if there is a background color\n * @method hasBackground\n * @param {String} backgroundColor\n * @returns true for non-transparent background color\n */\nexport const hasBackground = backgroundColor => !!backgroundColor && backgroundColor !== 'transparent';\n\n/**\n * @method isIdenticalColor\n * @param {String} colorA\n * @param {String} colorB\n * @returns {Boolean}\n */\nexport const isIdenticalColor = (colorA, colorB) =>\n    !!colorA && !!colorB && formatColor(colorA.toLowerCase()) === formatColor(colorB.toLowerCase());\n\n/*\n * @method getDefaultColorWithBg\n * @param {Object} props\n * @param {String} props.backgroundColor\n * @param {String} props.defaultFontColor\n * @param {String} props.defaultBlockFontColor\n * @returns {String} defaultColor\n */\nexport const getDefaultColorWithBg = ({ backgroundColor, defaultFontColor, defaultBlockFontColor }) =>\n    isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;\n\n/*\n * @method getMajorColor\n * return formatted majorColor.\n * @param {Object} props\n * @param {String} props.majorColor\n * @param {String} props.backgroundColor\n * @param {String} props.defaultFontColor\n * @param {String} props.defaultBlockFontColor\n * @returns {String} majorColor\n */\nexport const getMajorColor = ({ majorColor, backgroundColor, defaultFontColor, defaultBlockFontColor }) => {\n    // If backgroundColor is set, but no majorColor,\n    // the default majorColor will turn to be defaultBlockFontColor.\n    // eg: major color will turn to be white in enterprise mode.\n    // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.\n    if (hasBackground(backgroundColor) && !majorColor) {\n        return getDefaultColorWithBg({\n            backgroundColor,\n            defaultFontColor,\n            defaultBlockFontColor,\n        });\n    }\n\n    return getFormattedColor(majorColor, defaultFontColor);\n};\n\n/**\n * Get the color for the trend components\n * @method getTrendColor\n * @param {Object} props\n * @param {String} props.trendColor                   The trendColor value determined from encoding\n * @param {Number} props.trendValue\n * @param {Number} props.majorValue\n * @param {String} props.customizedBgColor\n * @param {String} props.trendDisplay  absolute || percent || off\n * @param {Object} defaultColors\n * @returns {String} trendColor\n */\nexport const getTrendColor = ({\n    trendColor,\n    trendValue,\n    majorValue,\n    customizedBgColor,\n    trendDisplay,\n    defaultColors,\n}) => {\n    if (trendColor) {\n        return trendColor;\n    }\n\n    if (Number.isNaN(Number(trendValue))) {\n        return undefined;\n    }\n\n    const { defaultFontColor, defaultBlockFontColor, defaultBackgroundColor } = defaultColors;\n\n    // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor\n    if (\n        hasBackground(customizedBgColor) &&\n        !isIdenticalColor(customizedBgColor, defaultBackgroundColor) &&\n        !isIdenticalColor(customizedBgColor, defaultBlockFontColor)\n    ) {\n        return defaultBlockFontColor;\n    }\n\n    // if trendDisplay is percent, and trendValue === value\n    // the trend percent = trendValue / (value - trendValue) will return Infinity\n    const isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);\n\n    if (trendValue === 0 || isInvalidTrend) {\n        return defaultFontColor;\n    }\n\n    return trendValue > 0 ? DELTA_GREEN : DELTA_RED;\n};\n\n/**\n * Computes visualization properties for display component\n * @method computeColors\n * @param {Object} props    all viz props\n * @param {Object} defaultColors    defaultColors from theme\n * @returns {Object} result\n * @returns {Boolean} backgroundEnabled\n * @returns {String} backgroundColor\n * @returns {String} majorColor\n * @returns {String} trendColor\n * @returns {String} underLabelColor\n */\nexport const computeColors = (props, defaultColors) => {\n    const backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);\n    const backgroundEnabled = hasBackground(backgroundColor);\n    const majorColor = getMajorColor({\n        majorColor: props.majorColor,\n        backgroundColor,\n        defaultFontColor: defaultColors.defaultFontColor,\n        defaultBlockFontColor: defaultColors.defaultBlockFontColor,\n    });\n    const trendColor = getTrendColor({\n        trendColor: props.trendColor,\n        trendValue: props.trendValue,\n        majorValue: props.majorValue,\n        customizedBgColor: props.backgroundColor,\n        trendDisplay: props.trendDisplay,\n        defaultColors,\n    });\n    const underLabelColor = majorColor;\n\n    return {\n        backgroundColor,\n        backgroundEnabled,\n        majorColor,\n        trendColor,\n        underLabelColor,\n    };\n};\n\n/**\n * Format and return the value (major/trend)\n * @method computeText\n * @param {Object} props\n * @param {Number} props.value                    // The major/trend value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateValue\n * @returns {Number} major or trend text\n */\nexport const computeText = ({\n    value,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateValue,\n}) => {\n    let text = isNumerial(value)\n        ? formatNumber(value, numberPrecision, {\n              useThousandSeparators: shouldUseThousandSeparators,\n              useTrendUnits: shouldAbbreviateValue,\n          })\n        : value;\n    // When text is undefined, return empty string\n    text = text || '';\n    return text;\n};\n\n/*\n * @method getMajorText\n * @param {Object} props\n * @param {Number} props.majorValue\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @returns {String} majorText\n */\nexport const getMajorText = ({\n    majorValueDisplay,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateMajorValue,\n}) =>\n    computeText({\n        value: majorValueDisplay === null ? 'N/A' : majorValueDisplay, // if majorValueDisplay is null, use `N/A`.\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateValue: shouldAbbreviateMajorValue,\n    });\n\n/*\n * @method getTrendText\n * @param {Object} props\n * @param {Number} props.majorValue\n * @param {Number} props.trendValue\n * @param {String} props.trendDisplay\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @returns {String} trendText\n */\nexport const getTrendText = ({\n    majorValue,\n    trendValue,\n    trendDisplay,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n}) => {\n    const compute = value =>\n        computeText({\n            value,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateValue: shouldAbbreviateTrendValue,\n        });\n\n    if (trendValue === '' || !isNumerial(trendValue)) {\n        return '';\n    }\n    const showPercent = trendDisplay === 'percent';\n    if (!showPercent) {\n        return compute(trendValue);\n    }\n\n    const diff = Math.abs(trendValue - majorValue);\n    let val = (trendValue / diff) * 100;\n    if (trendValue === 0 && diff === 0) {\n        val = 0;\n    }\n\n    if (!Number.isFinite(val)) {\n        return 'N/A';\n    }\n    const text = compute(val);\n\n    return `${text}%`;\n};\n\n/**\n * Helper to determine the font size for an element\n * @method computeFontSize\n * @param {String} text                     The string to find a size for\n * @param {Object} dimensions\n * @param {Number} dimensions.width         The width of the container\n * @param {Number} dimensions.height        The height of the container\n * @param {String} [fontFamily='\"Splunk Platform Sans\" ...'] The font being used\n * @param {String} [fontWeight='normal']    Boldness of font\n * @returns {Number} The size to use for fontSize styles\n */\nexport const computeFontSize = (\n    text,\n    { width, height },\n    fontFamily = DEFAULT_FONT_FAMILY,\n    fontWeight = 'normal'\n) => {\n    const widthInDefaultFont = computeTextSize(text, `${fontWeight} ${DEFAULT_FONT}px ${fontFamily}`);\n    const fontSize = Math.min(\n        (width / widthInDefaultFont) * DEFAULT_FONT,\n        (height / DEFAULT_FONT) * DEFAULT_FONT\n    );\n    return parseInt(fontSize, 10);\n};\n\n/*\n * @method getMajorFontSize\n * @param {Object} props\n * @param {Number} props.width\n * @param {Number} props.height\n * @param {String} props.unit\n * @param {String} props.majorText\n * @param {Number} props.spaceRatio\n * @returns {Number} majorFontSize\n */\nexport const getMajorFontSize = ({ width, height, unit, majorText, spaceRatio = 1 }) => {\n    const majorTextCalc = unit ? `${unit}${majorText}` : majorText;\n    return computeFontSize(majorTextCalc, {\n        width: width * spaceRatio,\n        height,\n    });\n};\n\n/*\n * @method getTrendFontSize\n * @param {Object} props\n * @param {Number} props.width\n * @param {Number} props.height\n * @param {String} props.trendText\n * @param {Number} props.spaceRatio\n * @returns {Number} trendFontSize\n */\nexport const getTrendFontSize = ({ width, height, trendText, spaceRatio = 1 }) => {\n    let trendFontSize = 12;\n    if (spaceRatio > 0) {\n        trendFontSize = computeFontSize(trendText, {\n            width: width * spaceRatio,\n            height,\n        });\n        trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;\n    }\n    return trendFontSize;\n};\n\n/*\n * The height of underLabel should no more than 12px\n * @param {Number} height\n * @return {Number} height || DEFAULT_FONT\n */\nexport const getUnderLabelHeight = height => (height > DEFAULT_FONT ? DEFAULT_FONT : height);\n\n/*\n * @param {Object} config\n * @param {String} underLabel\n * @param {Number} width     width of underLabel\n * @param {Number} height    height of underLabel\n * @param {Number} fond size of underLabel\n */\nexport const getUnderLabel = ({ underLabel, width, height }) =>\n    computeFontSize(underLabel, {\n        width,\n        height,\n    });\n\n/**\n * Compute value and font size for major and trend\n * @method getMajorAndTrend\n * @param {Object} props\n * @param {Number} props.width                    // Width of the text container\n * @param {Number} props.height                   // Height of the text container\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.majorValueDisplay        // Major value display\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size\n */\nexport const getMajorAndTrend = ({\n    width,\n    height,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n}) => {\n    const majorTextSpaceRatio = isNumerial(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;\n    const textContentWidth = width * 0.9;\n    const textContentHeight = height * 0.9;\n\n    // use majorValueDisplay here for display only\n    const majorText = getMajorText({\n        majorValueDisplay,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateMajorValue,\n    });\n\n    const majorTextFontSize =\n        majorFontSize ||\n        getMajorFontSize({\n            width: textContentWidth,\n            height: textContentHeight,\n            unit,\n            majorText,\n            spaceRatio: majorTextSpaceRatio,\n        });\n\n    // use majorValue here for calculations\n    const trendText = getTrendText({\n        majorValue,\n        trendValue,\n        trendDisplay,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n    });\n\n    const trendTextFontSize =\n        trendFontSize ||\n        getTrendFontSize({\n            width: textContentWidth,\n            height: textContentHeight,\n            trendText,\n            spaceRatio: 1 - majorTextSpaceRatio,\n        });\n\n    return {\n        majorText,\n        majorTextFontSize,\n        trendText,\n        trendTextFontSize,\n    };\n};\n\n/*\n * @method updateVizInSmallSpace\n * @param {Object} props\n * @param {Number} props.width                    // Width of the text container\n * @param {Number} props.height                   // Height of the text container\n * @param {Object} props.toRemoveList\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {Number} props.majorTextFontSize\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @returns {Object} results\n * @returns {Object} results.newMajorAndTrend\n * @returns {Object} results.updatedProps\n */\nexport const updateVizInSmallSpace = ({\n    width,\n    height,\n    toRemoveList,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    majorTextFontSize,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n}) => {\n    let removeIndex = 0;\n    let newProps = {}; // options need to be updated\n    let newMajorAndTrend = {};\n    let newTextSize = majorTextFontSize;\n\n    // remove info on viz to make textFontSize >= 12px;\n    while (newTextSize < 12 && removeIndex < toRemoveList.length) {\n        const toRemove = toRemoveList[removeIndex];\n        newProps = {\n            ...newProps,\n            ...{\n                [toRemove.key]: toRemove.value,\n            },\n        };\n\n        newMajorAndTrend = getMajorAndTrend({\n            majorValue,\n            majorValueDisplay,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width,\n            height,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            ...newProps,\n        });\n\n        newTextSize = newMajorAndTrend.majorTextFontSize;\n        removeIndex += 1;\n    }\n\n    // truncate text if textFontSize is still less than 12\n    if (newTextSize < 12) {\n        const truncateValue = `${(majorValueDisplay || majorValue).toString().slice(0, 3)}...`;\n        newMajorAndTrend = getMajorAndTrend({\n            majorValue,\n            majorValueDisplay: truncateValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width,\n            height,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            ...newProps,\n        });\n    }\n\n    return { newMajorAndTrend, updatedProps: newProps };\n};\n\n/*\n * @method computeSingleValueContent\n * @param {Object} props\n * @param {Number} props.contentWidth\n * @param {Number} props.contentHeight\n * @param {Number} props.containerWidth\n * @param {Number} props.containerHeight\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.majorValueDisplay        // Major value display\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @param {Object} props.toRemoveList\n * @returns {Object} results\n * @returns {String} results.majorText\n * @returns {String} results.trendText\n * @returns {Number} results.majorTextFontSize\n * @returns {Number} results.trendTextFontSize\n * @returns {String} results.majorValueTitle\n * @returns {Object} results.smallVizProps\n */\nexport const computeSingleValueContent = ({\n    contentWidth,\n    contentHeight,\n    containerWidth,\n    containerHeight,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n    toRemoveList,\n}) => {\n    let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n        majorValue,\n        majorValueDisplay: majorValueDisplay || majorValue,\n        trendValue,\n        majorFontSize,\n        trendFontSize,\n        trendDisplay,\n        width: contentWidth,\n        height: contentHeight,\n        unit,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n        shouldAbbreviateMajorValue,\n    });\n    const majorValueTitle = majorText;\n    let smallVizProps = {};\n\n    // update viz in small space\n    // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit\n    // or truncate major value to make the major font size >= 12\n    if (majorTextFontSize < 12) {\n        const { newMajorAndTrend, updatedProps } = updateVizInSmallSpace({\n            width: containerWidth,\n            height: containerHeight,\n            toRemoveList,\n            majorValue,\n            majorValueDisplay: majorValueDisplay || majorValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            majorTextFontSize,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n        });\n\n        ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = newMajorAndTrend);\n        smallVizProps = updatedProps;\n    }\n    return {\n        majorText,\n        trendText,\n        majorTextFontSize,\n        trendTextFontSize,\n        majorValueTitle,\n        smallVizProps,\n    };\n};\n\nexport const minimallyTruncateStringToWidth = ({\n    text,\n    fontSize = DEFAULT_FONT,\n    fontFamily = DEFAULT_FONT_FAMILY,\n    fontWeight = 'normal',\n    containerWidth,\n}) => {\n    let textWidth = computeTextSize(text, `${fontWeight} ${fontSize}px ${fontFamily}`);\n    let modifiedText = text;\n\n    const ellipsesLength = computeTextSize('...', `${fontWeight} ${fontSize}px ${fontFamily}`);\n    //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.\n    if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {\n        // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.\n        //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.\n        //  `text.length > 1` condition included to keep at least the first number.\n        while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {\n            modifiedText = modifiedText.substring(0, modifiedText.length - 1);\n            textWidth = computeTextSize(modifiedText, `normal ${fontSize}px ${fontFamily}`);\n        }\n\n        modifiedText = `${modifiedText}...`;\n    }\n\n    return modifiedText;\n};\n\n/*\n * @method computeSingleValueRadialContent\n * @param {Object} props\n * @param {Number} props.contentWidth\n * @param {Number} props.contentHeight\n * @param {Number} props.containerWidth\n * @param {Number} props.containerHeight\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue,\n * @param {Object} props.toRemoveList\n * @param {Bool} props.smallViz\n * @returns {Object} results\n * @returns {String} results.majorText\n * @returns {String} results.trendText\n * @returns {Number} results.majorTextFontSize\n * @returns {Number} results.trendTextFontSize\n * @returns {String} results.majorValueTitle\n * @returns {Object} results.smallVizProps\n */\nexport const computeSingleValueRadialContent = ({\n    contentWidth,\n    contentHeight,\n    containerWidth,\n    containerHeight,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n    smallViz,\n}) => {\n    let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n        majorValue,\n        majorValueDisplay: majorValueDisplay || majorValue,\n        trendValue,\n        majorFontSize,\n        trendFontSize,\n        trendDisplay,\n        width: contentWidth,\n        height: contentHeight,\n        unit,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n        shouldAbbreviateMajorValue,\n    });\n\n    const majorValueTitle = majorText;\n    let smallVizProps = {};\n\n    // custom logic for viz in small space\n    // if not showing the radial graph (if `smallViz` is true), then compute truncated major value\n    //  and font sizes\n    if (smallViz) {\n        const truncateValue = minimallyTruncateStringToWidth({\n            text: majorValueDisplay || majorValue,\n            fontWeight: 'bold',\n            fontSize: 12,\n            containerWidth,\n        });\n\n        ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n            majorValueDisplay: truncateValue,\n            majorValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width: containerWidth,\n            height: containerHeight,\n            unit,\n            trendDisplay,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            shouldAbbreviateMajorValue,\n        }));\n\n        smallVizProps = {\n            trendDisplay,\n            unit,\n        };\n    }\n\n    return {\n        majorText,\n        trendText,\n        majorTextFontSize,\n        trendTextFontSize,\n        majorValueTitle,\n        smallVizProps,\n    };\n};\n\n/**\n * Get the colors for a graph\n *\n * @method getGraphColors\n * @param {Object} options\n * @param {Bool} options.backgroundEnabled          // Flag to turn on color mode\n * @param {String} options.backgroundColor          // The current background color, overrides trend background color\n * @param {Object} options.defaultColors            // Default colors by severity\n * @param {Function} options.customColorFormatter   // must return { background, stroke } given a color\n * @returns {Object} { background, stroke } colors\n * @private\n */\nexport const getGraphColors = ({\n    backgroundEnabled,\n    backgroundColor,\n    defaultColors,\n    customColorFormatter,\n}) => {\n    // Only do custom colors in block mode\n    if (backgroundEnabled) {\n        // Check if the user defined colors to use\n        if (backgroundColor && typeof customColorFormatter === 'function') {\n            return customColorFormatter(backgroundColor);\n        }\n    }\n\n    return defaultColors.none;\n};\n\n/**\n * Adjust rgb value if it equals to 0 or 255\n * @method adjustRGB\n * @param {Number} rgb      [0 - 255]\n * @param {Number} delta\n * @returns {Number} adjusted rgb\n * @private\n */\nexport const adjustRGB = (rgb, delta) => {\n    if (rgb === 255) {\n        return rgb - delta;\n    }\n\n    if (rgb === 0) {\n        return rgb + delta;\n    }\n\n    return rgb;\n};\n\n/**\n * Modifies colors by multiplying by a given ratio\n * @method changeColor\n * @param {String} color    // Color to modify\n * @param {Number} ratio    // Float to modify color\n * @returns {String} new color\n * @private\n */\nconst changeColor = (color, ratio) => {\n    const hex = color.replace(/(0x|#)/, '');\n    const r = parseInt(hex.substr(0, 2), 16);\n    const g = parseInt(hex.substr(2, 2), 16);\n    const b = parseInt(hex.substr(4, 2), 16);\n\n    // Multiply by given ratio, make sure is between 0 and 255;\n    let newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);\n    let newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);\n    let newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);\n\n    // If the color is not changed\n    // case 1: the color is (0, 0 0)\n    //         lighten color (80, 80, 80)\n    //         darken color (40, 40, 40)\n    // case 2: the color is (255, 255, 255)\n    //         lighten color (235, 235, 235)\n    //         darken color (175, 175, 175)\n    // case 3: the color is e.g. (0, 255, 0)\n    //         new color (20, 235, 20)\n    if (newR === r && newG === g && newB === b) {\n        if (newR === 0 && newG === 0 && newB === 0) {\n            if (ratio > 1) {\n                newR = adjustRGB(newR, 80);\n                newG = adjustRGB(newG, 80);\n                newB = adjustRGB(newB, 80);\n            } else {\n                newR = adjustRGB(newR, 40);\n                newG = adjustRGB(newG, 40);\n                newB = adjustRGB(newB, 40);\n            }\n        } else if (newR === 255 && newG === 255 && newB === 255) {\n            if (ratio > 1) {\n                newR = adjustRGB(newR, 20);\n                newG = adjustRGB(newG, 20);\n                newB = adjustRGB(newB, 20);\n            } else {\n                newR = adjustRGB(newR, 80);\n                newG = adjustRGB(newG, 80);\n                newB = adjustRGB(newB, 80);\n            }\n        } else {\n            newR = adjustRGB(newR, 20);\n            newG = adjustRGB(newG, 20);\n            newB = adjustRGB(newB, 20);\n        }\n    }\n\n    return (\n        `#${newR.toString(16).padStart(2, 0)}` +\n        `${newG.toString(16).padStart(2, 0)}` +\n        `${newB.toString(16).padStart(2, 0)}`\n    );\n};\n\n/**\n * Lighten a given color\n * @method lighten\n * @param {String} color\n * @returns {String}\n * @private\n */\nexport const lighten = color => changeColor(color, 1.3);\n\n/**\n * Darkens a given color\n * @method darken\n * @param {String} color\n * @returns {String}\n * @private\n */\nexport const darken = color => changeColor(color, 0.5);\n\n/** consistent token structure: handle callback to add value and name in event payload\n * @method handleValueClickCallback\n * @param {Object} ev\n * @param {String | Number} majorValue\n * @param {String} majorValueField\n * @param {Number} trendValue\n * @param {Function} onValueClick\n * @param {Object} trellisContext\n * @param {Boolean} trellisContext.trellisEnabled\n * @param {String} trellisContext.trellisSplitBy\n * @param {String} trellisContext.trellisKey\n */\nexport const handleValueClickCallback = (\n    ev,\n    majorValue,\n    majorValueField,\n    trendValue,\n    onValueClick,\n    trellisContext = {}\n) => {\n    const { trellisEnabled = false, trellisSplitBy = '', trellisKey = '' } = trellisContext;\n\n    return onValueClick({\n        ...ev,\n        payload: {\n            trendValue,\n            value: majorValue,\n            name: majorValueField,\n            ...(trellisEnabled && {\n                'trellis.name': trellisSplitBy,\n                'trellis.value': trellisKey,\n            }),\n        },\n    });\n};\n\n/** handle trend color when trend display is percent\n * @method getTrendColorWithPercent\n * @param {Object} options\n * @returns {Object}\n */\nexport const getTrendColorWithPercent = options => {\n    const shouldUsePercentTrendColor =\n        options.trendColor === '> trendValue | rangeValue(trendColorEditorConfig)' &&\n        options.trendDisplay === 'percent';\n\n    return shouldUsePercentTrendColor\n        ? {\n              trendColor: '> trendValuePercent | rangeValue(trendColorEditorConfig)',\n          }\n        : {};\n};\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/ArrowUp\";\nexport * from \"@splunk/react-icons/enterprise/ArrowUp\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/ArrowDown\";\nexport * from \"@splunk/react-icons/enterprise/ArrowDown\";\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", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport ArrowUp from '@splunk/react-icons/enterprise/ArrowUp';\nimport ArrowDown from '@splunk/react-icons/enterprise/ArrowDown';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { DEFAULT_FONT_FAMILY } from '../common/utils/singleValueUtils';\n\nconst Column = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: ${props => props.justify || 'flex-end'};\n    height: ${props => props.size || 12}px;\n    ${props => (props.size ? `margin: 0 ${parseInt(props.size, 10) * 0.2 || 5}px;` : '')};\n`;\n\nconst Text = styled.div`\n    white-space: nowrap;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color || '#000'};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    height: ${props => props.size || 12}px;\n    line-height: ${props => props.size || 12}px;\n    display: flex;\n    align-self: baseline;\n    ${props => (props.size ? `margin-left: ${parseInt(props.size, 10) * 0.2 || 5}px;` : '')};\n`;\n\nconst TrendValue = ({ fontSize, color, value, text }) => {\n    let TrendIndicator = false;\n    let ariaLabel = false;\n\n    if (parseFloat(value, 10) > 0) {\n        TrendIndicator = ArrowUp;\n        ariaLabel = _('increase');\n    } else if (parseFloat(value, 10) < 0) {\n        TrendIndicator = ArrowDown;\n        ariaLabel = _('decrease');\n    }\n\n    return (\n        <Column justify=\"flex-end\" size={fontSize}>\n            <Text data-test=\"trendValueIndicator\" size={fontSize} color={color}>\n                {TrendIndicator && <TrendIndicator aria-label={ariaLabel} />}\n            </Text>\n            <Text data-test=\"trendValue\" size={fontSize} color={color}>\n                {`${text}`}\n            </Text>\n        </Column>\n    );\n};\n\nTrendValue.propTypes = {\n    fontSize: T.number,\n    color: T.string,\n    value: T.oneOfType([T.string, T.number]),\n    text: T.string,\n};\n\nexport default TrendValue;\n", "\nimport * as defaultImport from \"cssesc\";\nexport * from \"cssesc\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport cssesc from 'cssesc';\nimport { DEFAULT_FONT_FAMILY } from '../common/utils/singleValueUtils';\n\nconst Row = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: left;\n    height: ${props => props.size}px;\n    line-height: ${props => props.size}px;\n`;\n\nconst Text = styled.div`\n    white-space: nowrap;\n    height: 100%;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    font-weight: bold;\n    &:hover {\n        text-decoration: ${props => (props.showUnderline ? 'underline' : 'inherit')};\n        cursor: ${props => (props.showUnderline ? 'pointer' : 'inherit')};\n    }\n    ${props => {\n        if (!props.pseudoContent || !props.pseudoContentPosition) {\n            return '';\n        }\n        return `&:${props.pseudoContentPosition} {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ${props.pseudoContentFontSize}px;\n            position: relative;\n            font-weight: normal;\n            content: ${props.pseudoContent};\n        }`;\n    }}\n`;\n\nconst Button = styled(Text).attrs({ as: 'button', type: 'button' })`\n    border: 0;\n    background: transparent;\n    padding: 0;\n    -webkit-appearance: none;\n`;\n\nconst validUnitPositions = ['before', 'after'];\n\nconst MajorValue = ({ color, fontSize, unitPosition, title, value, onValueClick, unit }) => {\n    let sanitizedUnit;\n    let sanitizedUnitPosition;\n\n    if (typeof unit === 'string') {\n        sanitizedUnit = cssesc(unit, { wrap: true, quotes: 'double' });\n        if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {\n            sanitizedUnitPosition = unitPosition;\n        } else {\n            sanitizedUnitPosition = 'after';\n        }\n    }\n\n    return (\n        <Row size={fontSize}>\n            {typeof onValueClick === 'function' ? (\n                <Button\n                    data-test=\"majorValue\"\n                    color={color}\n                    size={fontSize}\n                    title={title}\n                    pseudoContent={sanitizedUnit}\n                    pseudoContentPosition={sanitizedUnitPosition}\n                    pseudoContentFontSize={fontSize * 0.6}\n                    showUnderline\n                    onClick={onValueClick}\n                >\n                    {value}\n                </Button>\n            ) : (\n                <Text\n                    data-test=\"majorValue\"\n                    color={color}\n                    size={fontSize}\n                    title={title}\n                    pseudoContent={sanitizedUnit}\n                    pseudoContentPosition={sanitizedUnitPosition}\n                    pseudoContentFontSize={fontSize * 0.6}\n                    showUnderline={false}\n                >\n                    {value}\n                </Text>\n            )}\n        </Row>\n    );\n};\n\nMajorValue.propTypes = {\n    color: T.string,\n    fontSize: T.number,\n    unit: T.string,\n    unitPosition: T.oneOf(validUnitPositions),\n    value: T.oneOfType([T.string, T.number]),\n    title: T.oneOfType([T.string, T.number]),\n    onValueClick: T.oneOfType([T.bool, T.func]),\n};\n\nexport default MajorValue;\n", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { DEFAULT_FONT_FAMILY, getAligment } from '../common/utils/singleValueUtils';\nimport TrendValue from './TrendValue';\nimport MajorValue from './MajorValue';\n\nconst Column = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-self: center;\n    justify-content: center;\n`;\n\nconst Row = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: ${props => props.alignItems || 'center'};\n    justify-content: ${props => getAligment(props.align)};\n`;\n\nconst Text = styled.div`\n    font-weight: normal;\n    white-space: nowrap;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color || '#000'};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    height: ${props => props.size || 12}px;\n    line-height: 1.2;\n    margin: ${props => props.margin || 'inherit'};\n`;\n\nconst SingleValueBasic = ({ ...props }) => {\n    const {\n        majorColor,\n        majorTextFontSize,\n        majorText,\n        majorValueTitle,\n        trendColor,\n        trendTextFontSize,\n        trendText,\n        showTrendIndicator,\n        unit,\n        unitPosition,\n        underLabel,\n        underLabelFontSize,\n        underLabelColor,\n        onValueClick,\n        align,\n    } = props;\n    const trendIndicatorEnabled = trendText !== '' && showTrendIndicator;\n\n    return (\n        <Column>\n            <Row\n                alignItems=\"baseline\"\n                align={align}\n                data-test={`single-value-row-align-${getAligment(align)}`}\n            >\n                <MajorValue\n                    color={majorColor}\n                    fontSize={majorTextFontSize}\n                    unit={unit}\n                    unitPosition={unitPosition}\n                    value={majorText}\n                    title={majorValueTitle}\n                    onValueClick={onValueClick}\n                />\n                {trendIndicatorEnabled && (\n                    // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371\n                    <TrendValue\n                        fontSize={trendTextFontSize}\n                        color={trendColor}\n                        value={trendText}\n                        text={trendText}\n                    />\n                )}\n            </Row>\n            {underLabel && (\n                <Row\n                    justify=\"center\"\n                    align={align}\n                    data-test={`single-value-row-align-${getAligment(align)}`}\n                >\n                    <Text\n                        data-test=\"underLabel\"\n                        size={underLabelFontSize}\n                        color={underLabelColor}\n                        margin=\"0 6px\"\n                    >\n                        {underLabel}\n                    </Text>\n                </Row>\n            )}\n        </Column>\n    );\n};\n\nSingleValueBasic.propTypes = {\n    majorText: T.string,\n    majorColor: T.string,\n    majorTextFontSize: T.number,\n    majorValueTitle: T.string,\n    trendText: T.string,\n    trendTextFontSize: T.number,\n    trendColor: T.string,\n    showTrendIndicator: T.bool,\n    unit: T.string,\n    unitPosition: T.oneOf(['before', 'after']),\n    underLabel: T.string,\n    underLabelFontSize: T.number,\n    underLabelColor: T.string,\n    onValueClick: T.oneOfType([T.bool, T.func]),\n    align: T.string,\n};\n\nexport const SingleValueTrendValue = TrendValue;\nexport default SingleValueBasic;\n"],
+  "sourcesContent": ["export * from './SingleValueBasic';\nexport { default } from './SingleValueBasic';\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"prop-types\";\nexport * from \"prop-types\";\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 \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/numberUtils\";\nexport * from \"@splunk/visualizations-shared/numberUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/domUtils\";\nexport * from \"@splunk/visualizations-shared/domUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/propUtils\";\nexport * from \"@splunk/visualizations-shared/propUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/colorConstants\";\nexport * from \"@splunk/visualizations-shared/colorConstants\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { get } from 'lodash';\nimport { isNumerial, formatNumber } from '@splunk/visualizations-shared/numberUtils';\nimport { computeTextSize } from '@splunk/visualizations-shared/domUtils';\nimport { formatColor } from '@splunk/visualizations-shared/propUtils';\nimport { DELTA_GREEN, DELTA_RED } from '@splunk/visualizations-shared/colorConstants';\n\nexport const DEFAULT_FONT = 12;\nexport const DEFAULT_FONT_FAMILY =\n    '\"Splunk Platform Sans\", \"Proxima Nova\", \"Helvetica Neue\", Helvetica, Arial, sans-serif';\n\nexport const SVR_PADDING = { top: 12, bottom: 12, left: 16, right: 16 };\n\nexport const getAligment = align => {\n    const alignMap = {\n        left: 'start',\n        center: 'center',\n        right: 'end',\n    };\n    return alignMap[align] || 'center';\n};\n\n/**\n * @method shouldShowTrend\n * @param {String} trendDisplay\n * @returns {Bool}\n */\nexport const shouldShowTrend = trendDisplay => trendDisplay === 'absolute' || trendDisplay === 'percent';\n\n/**\n * @method isLoadingOrNoColumns\n * @param {Object} dataSources\n * @param {Boolean} loading\n * @returns {Boolean} return true if loading or without columns in dataSources\n */\nexport const isLoadingOrNoColumns = (dataSources, loading) => {\n    const data = get(dataSources, 'primary.data.columns[0]', undefined);\n    const noColumns = data === undefined;\n    return loading || noColumns;\n};\n\n/**\n * Retrieve the valid formatted color\n * @method getFormattedColor\n * @param {String} color\n * @param {String} defaultColor\n * @returns {String} the formatted color\n */\nexport const getFormattedColor = (color, defaultColor) => formatColor(color) || formatColor(defaultColor);\n\n/**\n * Determines if there is a background color\n * @method hasBackground\n * @param {String} backgroundColor\n * @returns true for non-transparent background color\n */\nexport const hasBackground = backgroundColor => !!backgroundColor && backgroundColor !== 'transparent';\n\n/**\n * @method isIdenticalColor\n * @param {String} colorA\n * @param {String} colorB\n * @returns {Boolean}\n */\nexport const isIdenticalColor = (colorA, colorB) =>\n    !!colorA && !!colorB && formatColor(colorA.toLowerCase()) === formatColor(colorB.toLowerCase());\n\n/*\n * @method getDefaultColorWithBg\n * @param {Object} props\n * @param {String} props.backgroundColor\n * @param {String} props.defaultFontColor\n * @param {String} props.defaultBlockFontColor\n * @returns {String} defaultColor\n */\nexport const getDefaultColorWithBg = ({ backgroundColor, defaultFontColor, defaultBlockFontColor }) =>\n    isIdenticalColor(backgroundColor, defaultBlockFontColor) ? defaultFontColor : defaultBlockFontColor;\n\n/*\n * @method getMajorColor\n * return formatted majorColor.\n * @param {Object} props\n * @param {String} props.majorColor\n * @param {String} props.backgroundColor\n * @param {String} props.defaultFontColor\n * @param {String} props.defaultBlockFontColor\n * @returns {String} majorColor\n */\nexport const getMajorColor = ({ majorColor, backgroundColor, defaultFontColor, defaultBlockFontColor }) => {\n    // If backgroundColor is set, but no majorColor,\n    // the default majorColor will turn to be defaultBlockFontColor.\n    // eg: major color will turn to be white in enterprise mode.\n    // however, if the bgColor is the same as defaultBlockFontColor, use defaultFontColor.\n    if (hasBackground(backgroundColor) && !majorColor) {\n        return getDefaultColorWithBg({\n            backgroundColor,\n            defaultFontColor,\n            defaultBlockFontColor,\n        });\n    }\n\n    return getFormattedColor(majorColor, defaultFontColor);\n};\n\n/**\n * Get the color for the trend components\n * @method getTrendColor\n * @param {Object} props\n * @param {String} props.trendColor                   The trendColor value determined from encoding\n * @param {Number} props.trendValue\n * @param {Number} props.majorValue\n * @param {String} props.customizedBgColor\n * @param {String} props.trendDisplay  absolute || percent || off\n * @param {Object} defaultColors\n * @returns {String} trendColor\n */\nexport const getTrendColor = ({\n    trendColor,\n    trendValue,\n    majorValue,\n    customizedBgColor,\n    trendDisplay,\n    defaultColors,\n}) => {\n    if (trendColor) {\n        return trendColor;\n    }\n\n    if (Number.isNaN(Number(trendValue))) {\n        return undefined;\n    }\n\n    const { defaultFontColor, defaultBlockFontColor, defaultBackgroundColor } = defaultColors;\n\n    // if user defined a backgroundColor, the default trend color will be defaultBlockFontColor\n    if (\n        hasBackground(customizedBgColor) &&\n        !isIdenticalColor(customizedBgColor, defaultBackgroundColor) &&\n        !isIdenticalColor(customizedBgColor, defaultBlockFontColor)\n    ) {\n        return defaultBlockFontColor;\n    }\n\n    // if trendDisplay is percent, and trendValue === value\n    // the trend percent = trendValue / (value - trendValue) will return Infinity\n    const isInvalidTrend = trendDisplay === 'percent' && trendValue === parseFloat(majorValue);\n\n    if (trendValue === 0 || isInvalidTrend) {\n        return defaultFontColor;\n    }\n\n    return trendValue > 0 ? DELTA_GREEN : DELTA_RED;\n};\n\n/**\n * Computes visualization properties for display component\n * @method computeColors\n * @param {Object} props    all viz props\n * @param {Object} defaultColors    defaultColors from theme\n * @returns {Object} result\n * @returns {Boolean} backgroundEnabled\n * @returns {String} backgroundColor\n * @returns {String} majorColor\n * @returns {String} trendColor\n * @returns {String} underLabelColor\n */\nexport const computeColors = (props, defaultColors) => {\n    const backgroundColor = getFormattedColor(props.backgroundColor, defaultColors.defaultBackgroundColor);\n    const backgroundEnabled = hasBackground(backgroundColor);\n    const majorColor = getMajorColor({\n        majorColor: props.majorColor,\n        backgroundColor,\n        defaultFontColor: defaultColors.defaultFontColor,\n        defaultBlockFontColor: defaultColors.defaultBlockFontColor,\n    });\n    const trendColor = getTrendColor({\n        trendColor: props.trendColor,\n        trendValue: props.trendValue,\n        majorValue: props.majorValue,\n        customizedBgColor: props.backgroundColor,\n        trendDisplay: props.trendDisplay,\n        defaultColors,\n    });\n    const underLabelColor = getFormattedColor(props.underLabelColor, majorColor);\n\n    return {\n        backgroundColor,\n        backgroundEnabled,\n        majorColor,\n        trendColor,\n        underLabelColor,\n    };\n};\n\n/**\n * Format and return the value (major/trend)\n * @method computeText\n * @param {Object} props\n * @param {Number} props.value                    // The major/trend value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateValue\n * @returns {Number} major or trend text\n */\nexport const computeText = ({\n    value,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateValue,\n}) => {\n    let text = isNumerial(value)\n        ? formatNumber(value, numberPrecision, {\n              useThousandSeparators: shouldUseThousandSeparators,\n              useTrendUnits: shouldAbbreviateValue,\n          })\n        : value;\n    // When text is undefined, return empty string\n    text = text || '';\n    return text;\n};\n\n/*\n * @method getMajorText\n * @param {Object} props\n * @param {Number} props.majorValue\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @returns {String} majorText\n */\nexport const getMajorText = ({\n    majorValueDisplay,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateMajorValue,\n}) =>\n    computeText({\n        value: majorValueDisplay === null ? 'N/A' : majorValueDisplay, // if majorValueDisplay is null, use `N/A`.\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateValue: shouldAbbreviateMajorValue,\n    });\n\n/*\n * @method getTrendText\n * @param {Object} props\n * @param {Number} props.majorValue\n * @param {Number} props.trendValue\n * @param {String} props.trendDisplay\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @returns {String} trendText\n */\nexport const getTrendText = ({\n    majorValue,\n    trendValue,\n    trendDisplay,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n}) => {\n    const compute = value =>\n        computeText({\n            value,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateValue: shouldAbbreviateTrendValue,\n        });\n\n    if (trendValue === '' || !isNumerial(trendValue)) {\n        return '';\n    }\n    const showPercent = trendDisplay === 'percent';\n    if (!showPercent) {\n        return compute(trendValue);\n    }\n\n    const diff = Math.abs(trendValue - majorValue);\n    let val = (trendValue / diff) * 100;\n    if (trendValue === 0 && diff === 0) {\n        val = 0;\n    }\n\n    if (!Number.isFinite(val)) {\n        return 'N/A';\n    }\n    const text = compute(val);\n\n    return `${text}%`;\n};\n\n/**\n * Helper to determine the font size for an element\n * @method computeFontSize\n * @param {String} text                     The string to find a size for\n * @param {Object} dimensions\n * @param {Number} dimensions.width         The width of the container\n * @param {Number} dimensions.height        The height of the container\n * @param {String} [fontFamily='\"Splunk Platform Sans\" ...'] The font being used\n * @param {String} [fontWeight='normal']    Boldness of font\n * @returns {Number} The size to use for fontSize styles\n */\nexport const computeFontSize = (\n    text,\n    { width, height },\n    fontFamily = DEFAULT_FONT_FAMILY,\n    fontWeight = 'normal'\n) => {\n    const widthInDefaultFont = computeTextSize(text, `${fontWeight} ${DEFAULT_FONT}px ${fontFamily}`);\n    const fontSize = Math.min(\n        (width / widthInDefaultFont) * DEFAULT_FONT,\n        (height / DEFAULT_FONT) * DEFAULT_FONT\n    );\n    return parseInt(fontSize, 10);\n};\n\n/*\n * @method getMajorFontSize\n * @param {Object} props\n * @param {Number} props.width\n * @param {Number} props.height\n * @param {String} props.unit\n * @param {String} props.majorText\n * @param {Number} props.spaceRatio\n * @returns {Number} majorFontSize\n */\nexport const getMajorFontSize = ({ width, height, unit, majorText, spaceRatio = 1 }) => {\n    const majorTextCalc = unit ? `${unit}${majorText}` : majorText;\n    return computeFontSize(majorTextCalc, {\n        width: width * spaceRatio,\n        height,\n    });\n};\n\n/*\n * @method getTrendFontSize\n * @param {Object} props\n * @param {Number} props.width\n * @param {Number} props.height\n * @param {String} props.trendText\n * @param {Number} props.spaceRatio\n * @returns {Number} trendFontSize\n */\nexport const getTrendFontSize = ({ width, height, trendText, spaceRatio = 1 }) => {\n    let trendFontSize = 12;\n    if (spaceRatio > 0) {\n        trendFontSize = computeFontSize(trendText, {\n            width: width * spaceRatio,\n            height,\n        });\n        trendFontSize = parseInt(trendFontSize, 10) * spaceRatio;\n    }\n    return trendFontSize;\n};\n\n/*\n * The height of underLabel should no more than 12px\n * @param {Number} height\n * @return {Number} height || DEFAULT_FONT\n */\nexport const getUnderLabelHeight = height => (height > DEFAULT_FONT ? DEFAULT_FONT : height);\n\n/*\n * @param {Object} config\n * @param {String} underLabel\n * @param {Number} width     width of underLabel\n * @param {Number} height    height of underLabel\n * @param {Number} fond size of underLabel\n */\nexport const getUnderLabel = ({ underLabel, width, height }) =>\n    computeFontSize(underLabel, {\n        width,\n        height,\n    });\n\n/**\n * Compute value and font size for major and trend\n * @method getMajorAndTrend\n * @param {Object} props\n * @param {Number} props.width                    // Width of the text container\n * @param {Number} props.height                   // Height of the text container\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.majorValueDisplay        // Major value display\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @returns {Number, Number, Number, Number} Major text, trend text, major text size, trend text size\n */\nexport const getMajorAndTrend = ({\n    width,\n    height,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n}) => {\n    const majorTextSpaceRatio = isNumerial(trendValue) && shouldShowTrend(trendDisplay) ? 0.6 : 1;\n    const textContentWidth = width * 0.9;\n    const textContentHeight = height * 0.9;\n\n    // use majorValueDisplay here for display only\n    const majorText = getMajorText({\n        majorValueDisplay,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateMajorValue,\n    });\n\n    const majorTextFontSize =\n        majorFontSize ||\n        getMajorFontSize({\n            width: textContentWidth,\n            height: textContentHeight,\n            unit,\n            majorText,\n            spaceRatio: majorTextSpaceRatio,\n        });\n\n    // use majorValue here for calculations\n    const trendText = getTrendText({\n        majorValue,\n        trendValue,\n        trendDisplay,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n    });\n\n    const trendTextFontSize =\n        trendFontSize ||\n        getTrendFontSize({\n            width: textContentWidth,\n            height: textContentHeight,\n            trendText,\n            spaceRatio: 1 - majorTextSpaceRatio,\n        });\n\n    return {\n        majorText,\n        majorTextFontSize,\n        trendText,\n        trendTextFontSize,\n    };\n};\n\n/*\n * @method updateVizInSmallSpace\n * @param {Object} props\n * @param {Number} props.width                    // Width of the text container\n * @param {Number} props.height                   // Height of the text container\n * @param {Object} props.toRemoveList\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {Number} props.majorTextFontSize\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @returns {Object} results\n * @returns {Object} results.newMajorAndTrend\n * @returns {Object} results.updatedProps\n */\nexport const updateVizInSmallSpace = ({\n    width,\n    height,\n    toRemoveList,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    majorTextFontSize,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n}) => {\n    let removeIndex = 0;\n    let newProps = {}; // options need to be updated\n    let newMajorAndTrend = {};\n    let newTextSize = majorTextFontSize;\n\n    // remove info on viz to make textFontSize >= 12px;\n    while (newTextSize < 12 && removeIndex < toRemoveList.length) {\n        const toRemove = toRemoveList[removeIndex];\n        newProps = {\n            ...newProps,\n            ...{\n                [toRemove.key]: toRemove.value,\n            },\n        };\n\n        newMajorAndTrend = getMajorAndTrend({\n            majorValue,\n            majorValueDisplay,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width,\n            height,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            ...newProps,\n        });\n\n        newTextSize = newMajorAndTrend.majorTextFontSize;\n        removeIndex += 1;\n    }\n\n    // truncate text if textFontSize is still less than 12\n    if (newTextSize < 12) {\n        const truncateValue = `${(majorValueDisplay || majorValue).toString().slice(0, 3)}...`;\n        newMajorAndTrend = getMajorAndTrend({\n            majorValue,\n            majorValueDisplay: truncateValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width,\n            height,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            ...newProps,\n        });\n    }\n\n    return { newMajorAndTrend, updatedProps: newProps };\n};\n\n/*\n * @method computeSingleValueContent\n * @param {Object} props\n * @param {Number} props.contentWidth\n * @param {Number} props.contentHeight\n * @param {Number} props.containerWidth\n * @param {Number} props.containerHeight\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.majorValueDisplay        // Major value display\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue\n * @param {Object} props.toRemoveList\n * @returns {Object} results\n * @returns {String} results.majorText\n * @returns {String} results.trendText\n * @returns {Number} results.majorTextFontSize\n * @returns {Number} results.trendTextFontSize\n * @returns {String} results.majorValueTitle\n * @returns {Object} results.smallVizProps\n */\nexport const computeSingleValueContent = ({\n    contentWidth,\n    contentHeight,\n    containerWidth,\n    containerHeight,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n    toRemoveList,\n}) => {\n    let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n        majorValue,\n        majorValueDisplay: majorValueDisplay || majorValue,\n        trendValue,\n        majorFontSize,\n        trendFontSize,\n        trendDisplay,\n        width: contentWidth,\n        height: contentHeight,\n        unit,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n        shouldAbbreviateMajorValue,\n    });\n    const majorValueTitle = majorText;\n    let smallVizProps = {};\n\n    // update viz in small space\n    // if textFontSize is less than 12, remove extra info like sparkline, trendvalue, unit\n    // or truncate major value to make the major font size >= 12\n    if (majorTextFontSize < 12) {\n        const { newMajorAndTrend, updatedProps } = updateVizInSmallSpace({\n            width: containerWidth,\n            height: containerHeight,\n            toRemoveList,\n            majorValue,\n            majorValueDisplay: majorValueDisplay || majorValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            majorTextFontSize,\n            unit,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n        });\n\n        ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = newMajorAndTrend);\n        smallVizProps = updatedProps;\n    }\n    return {\n        majorText,\n        trendText,\n        majorTextFontSize,\n        trendTextFontSize,\n        majorValueTitle,\n        smallVizProps,\n    };\n};\n\nexport const minimallyTruncateStringToWidth = ({\n    text,\n    fontSize = DEFAULT_FONT,\n    fontFamily = DEFAULT_FONT_FAMILY,\n    fontWeight = 'normal',\n    containerWidth,\n}) => {\n    let textWidth = computeTextSize(text, `${fontWeight} ${fontSize}px ${fontFamily}`);\n    let modifiedText = text;\n\n    const ellipsesLength = computeTextSize('...', `${fontWeight} ${fontSize}px ${fontFamily}`);\n    //  `containerWidth - ellipsesLength > 0` condition ensures space even exists for text.\n    if (containerWidth - ellipsesLength > 0 && textWidth > containerWidth) {\n        // Truncates the content such that the truncated value + ellipses fit within the allocated space for the ellipses.\n        //  `textWidth > containerWidth - ellipsesLength` condition checks if text + ellipses exceeds container width.\n        //  `text.length > 1` condition included to keep at least the first number.\n        while (textWidth + ellipsesLength > containerWidth && modifiedText.length > 1) {\n            modifiedText = modifiedText.substring(0, modifiedText.length - 1);\n            textWidth = computeTextSize(modifiedText, `normal ${fontSize}px ${fontFamily}`);\n        }\n\n        modifiedText = `${modifiedText}...`;\n    }\n\n    return modifiedText;\n};\n\n/*\n * @method computeSingleValueRadialContent\n * @param {Object} props\n * @param {Number} props.contentWidth\n * @param {Number} props.contentHeight\n * @param {Number} props.containerWidth\n * @param {Number} props.containerHeight\n * @param {Number} props.majorValue               // Major value\n * @param {Number} props.trendValue               // Trend value\n * @param {Number} props.majorFontSize\n * @param {Number} props.trendFontSize\n * @param {String} props.trendDisplay\n * @param {String} props.unit                     // Unit for the value\n * @param {Number} props.numberPrecision\n * @param {Bool} props.shouldUseThousandSeparators\n * @param {Bool} props.shouldAbbreviateTrendValue\n * @param {Bool} props.shouldAbbreviateMajorValue,\n * @param {Object} props.toRemoveList\n * @param {Bool} props.smallViz\n * @returns {Object} results\n * @returns {String} results.majorText\n * @returns {String} results.trendText\n * @returns {Number} results.majorTextFontSize\n * @returns {Number} results.trendTextFontSize\n * @returns {String} results.majorValueTitle\n * @returns {Object} results.smallVizProps\n */\nexport const computeSingleValueRadialContent = ({\n    contentWidth,\n    contentHeight,\n    containerWidth,\n    containerHeight,\n    majorValue,\n    majorValueDisplay,\n    trendValue,\n    majorFontSize,\n    trendFontSize,\n    trendDisplay,\n    unit,\n    numberPrecision,\n    shouldUseThousandSeparators,\n    shouldAbbreviateTrendValue,\n    shouldAbbreviateMajorValue,\n    smallViz,\n}) => {\n    let { majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n        majorValue,\n        majorValueDisplay: majorValueDisplay || majorValue,\n        trendValue,\n        majorFontSize,\n        trendFontSize,\n        trendDisplay,\n        width: contentWidth,\n        height: contentHeight,\n        unit,\n        numberPrecision,\n        shouldUseThousandSeparators,\n        shouldAbbreviateTrendValue,\n        shouldAbbreviateMajorValue,\n    });\n\n    const majorValueTitle = majorText;\n    let smallVizProps = {};\n\n    // custom logic for viz in small space\n    // if not showing the radial graph (if `smallViz` is true), then compute truncated major value\n    //  and font sizes\n    if (smallViz) {\n        const truncateValue = minimallyTruncateStringToWidth({\n            text: majorValueDisplay || majorValue,\n            fontWeight: 'bold',\n            fontSize: 12,\n            containerWidth,\n        });\n\n        ({ majorText, trendText, majorTextFontSize, trendTextFontSize } = getMajorAndTrend({\n            majorValueDisplay: truncateValue,\n            majorValue,\n            trendValue,\n            majorFontSize,\n            trendFontSize,\n            width: containerWidth,\n            height: containerHeight,\n            unit,\n            trendDisplay,\n            numberPrecision,\n            shouldUseThousandSeparators,\n            shouldAbbreviateTrendValue,\n            shouldAbbreviateMajorValue,\n        }));\n\n        smallVizProps = {\n            trendDisplay,\n            unit,\n        };\n    }\n\n    return {\n        majorText,\n        trendText,\n        majorTextFontSize,\n        trendTextFontSize,\n        majorValueTitle,\n        smallVizProps,\n    };\n};\n\n/**\n * Get the colors for a graph\n *\n * @method getGraphColors\n * @param {Object} options\n * @param {Bool} options.backgroundEnabled          // Flag to turn on color mode\n * @param {String} options.backgroundColor          // The current background color, overrides trend background color\n * @param {Object} options.defaultColors            // Default colors by severity\n * @param {Function} options.customColorFormatter   // must return { background, stroke } given a color\n * @returns {Object} { background, stroke } colors\n * @private\n */\nexport const getGraphColors = ({\n    backgroundEnabled,\n    backgroundColor,\n    defaultColors,\n    customColorFormatter,\n}) => {\n    // Only do custom colors in block mode\n    if (backgroundEnabled) {\n        // Check if the user defined colors to use\n        if (backgroundColor && typeof customColorFormatter === 'function') {\n            return customColorFormatter(backgroundColor);\n        }\n    }\n\n    return defaultColors.none;\n};\n\n/**\n * Adjust rgb value if it equals to 0 or 255\n * @method adjustRGB\n * @param {Number} rgb      [0 - 255]\n * @param {Number} delta\n * @returns {Number} adjusted rgb\n * @private\n */\nexport const adjustRGB = (rgb, delta) => {\n    if (rgb === 255) {\n        return rgb - delta;\n    }\n\n    if (rgb === 0) {\n        return rgb + delta;\n    }\n\n    return rgb;\n};\n\nconst getUnchangedColorDelta = (r, g, b, ratio) => {\n    if (r === 0 && g === 0 && b === 0) {\n        return ratio > 1 ? 80 : 40;\n    }\n    if (r === 255 && g === 255 && b === 255) {\n        return ratio > 1 ? 20 : 80;\n    }\n    return 20;\n};\n\n/**\n * Modifies colors by multiplying by a given ratio\n * @method changeColor\n * @param {String} color    // Color to modify\n * @param {Number} ratio    // Float to modify color\n * @returns {String} new color\n * @private\n */\nconst changeColor = (color, ratio) => {\n    const hex = color.replace(/(0x|#)/, '');\n    const r = parseInt(hex.substr(0, 2), 16);\n    const g = parseInt(hex.substr(2, 2), 16);\n    const b = parseInt(hex.substr(4, 2), 16);\n\n    // Multiply by given ratio, make sure is between 0 and 255;\n    let newR = Math.max(Math.min(Math.floor(r * ratio), 255), 0);\n    let newG = Math.max(Math.min(Math.floor(g * ratio), 255), 0);\n    let newB = Math.max(Math.min(Math.floor(b * ratio), 255), 0);\n\n    // If the color is not changed, apply a fixed adjustment\n    if (newR === r && newG === g && newB === b) {\n        const delta = getUnchangedColorDelta(newR, newG, newB, ratio);\n        newR = adjustRGB(newR, delta);\n        newG = adjustRGB(newG, delta);\n        newB = adjustRGB(newB, delta);\n    }\n\n    return (\n        `#${newR.toString(16).padStart(2, 0)}` +\n        `${newG.toString(16).padStart(2, 0)}` +\n        `${newB.toString(16).padStart(2, 0)}`\n    );\n};\n\n/**\n * Lighten a given color\n * @method lighten\n * @param {String} color\n * @returns {String}\n * @private\n */\nexport const lighten = color => changeColor(color, 1.3);\n\n/**\n * Darkens a given color\n * @method darken\n * @param {String} color\n * @returns {String}\n * @private\n */\nexport const darken = color => changeColor(color, 0.5);\n\n/** consistent token structure: handle callback to add value and name in event payload\n * @method handleValueClickCallback\n * @param {Object} ev\n * @param {String | Number} majorValue\n * @param {String} majorValueField\n * @param {Number} trendValue\n * @param {Function} onValueClick\n * @param {Object} trellisContext\n * @param {Boolean} trellisContext.trellisEnabled\n * @param {String} trellisContext.trellisSplitBy\n * @param {String} trellisContext.trellisKey\n */\nexport const handleValueClickCallback = (\n    ev,\n    majorValue,\n    majorValueField,\n    trendValue,\n    onValueClick,\n    trellisContext = {}\n) => {\n    const { trellisEnabled = false, trellisSplitBy = '', trellisKey = '' } = trellisContext;\n\n    return onValueClick({\n        ...ev,\n        payload: {\n            trendValue,\n            value: majorValue,\n            name: majorValueField,\n            ...(trellisEnabled && {\n                'trellis.name': trellisSplitBy,\n                'trellis.value': trellisKey,\n            }),\n        },\n    });\n};\n\n/** handle trend color when trend display is percent\n * @method getTrendColorWithPercent\n * @param {Object} options\n * @returns {Object}\n */\nexport const getTrendColorWithPercent = options => {\n    const shouldUsePercentTrendColor =\n        options.trendColor === '> trendValue | rangeValue(trendColorEditorConfig)' &&\n        options.trendDisplay === 'percent';\n\n    return shouldUsePercentTrendColor\n        ? {\n              trendColor: '> trendValuePercent | rangeValue(trendColorEditorConfig)',\n          }\n        : {};\n};\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/ArrowUp\";\nexport * from \"@splunk/react-icons/enterprise/ArrowUp\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-icons/enterprise/ArrowDown\";\nexport * from \"@splunk/react-icons/enterprise/ArrowDown\";\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", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport ArrowUp from '@splunk/react-icons/enterprise/ArrowUp';\nimport ArrowDown from '@splunk/react-icons/enterprise/ArrowDown';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { DEFAULT_FONT_FAMILY } from '../common/utils/singleValueUtils';\n\nconst Column = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: ${props => props.justify || 'flex-end'};\n    height: ${props => props.size || 12}px;\n    ${props => (props.size ? `margin: 0 ${parseInt(props.size, 10) * 0.2 || 5}px;` : '')};\n`;\n\nconst Text = styled.div`\n    white-space: nowrap;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color || '#000'};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    height: ${props => props.size || 12}px;\n    line-height: ${props => props.size || 12}px;\n    display: flex;\n    align-self: baseline;\n    ${props => (props.size ? `margin-left: ${parseInt(props.size, 10) * 0.2 || 5}px;` : '')};\n`;\n\nconst TrendValue = ({ fontSize, color, value, text }) => {\n    let TrendIndicator = false;\n    let ariaLabel = false;\n\n    if (parseFloat(value, 10) > 0) {\n        TrendIndicator = ArrowUp;\n        ariaLabel = _('increase');\n    } else if (parseFloat(value, 10) < 0) {\n        TrendIndicator = ArrowDown;\n        ariaLabel = _('decrease');\n    }\n\n    return (\n        <Column justify=\"flex-end\" size={fontSize}>\n            <Text data-test=\"trendValueIndicator\" size={fontSize} color={color}>\n                {TrendIndicator && <TrendIndicator aria-label={ariaLabel} />}\n            </Text>\n            <Text data-test=\"trendValue\" size={fontSize} color={color}>\n                {`${text}`}\n            </Text>\n        </Column>\n    );\n};\n\nTrendValue.propTypes = {\n    fontSize: T.number,\n    color: T.string,\n    value: T.oneOfType([T.string, T.number]),\n    text: T.string,\n};\n\nexport default TrendValue;\n", "\nimport * as defaultImport from \"cssesc\";\nexport * from \"cssesc\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport cssesc from 'cssesc';\nimport { DEFAULT_FONT_FAMILY } from '../common/utils/singleValueUtils';\n\nconst Row = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: left;\n    height: ${props => props.size}px;\n    line-height: ${props => props.size}px;\n`;\n\nconst Text = styled.div`\n    white-space: nowrap;\n    height: 100%;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    font-weight: bold;\n    &:hover {\n        text-decoration: ${props => (props.showUnderline ? 'underline' : 'inherit')};\n        cursor: ${props => (props.showUnderline ? 'pointer' : 'inherit')};\n    }\n    ${props => {\n        if (!props.pseudoContent || !props.pseudoContentPosition) {\n            return '';\n        }\n        return `&:${props.pseudoContentPosition} {\n            // by default this pseudo element would inherit text-decoration from main element\n            // and text-decoration could not be overwritten.\n            // adding display: inline-block makes text decoration independent from main element.\n            // => the unit will not be underlined if a user hovers over the main value\n            display: inline-block;\n            font-size: ${props.pseudoContentFontSize}px;\n            position: relative;\n            font-weight: normal;\n            content: ${props.pseudoContent};\n        }`;\n    }}\n`;\n\nconst Button = styled(Text).attrs({ as: 'button', type: 'button' })`\n    border: 0;\n    background: transparent;\n    padding: 0;\n    -webkit-appearance: none;\n`;\n\nconst validUnitPositions = ['before', 'after'];\n\nconst MajorValue = ({ color, fontSize, unitPosition, title, value, onValueClick, unit }) => {\n    let sanitizedUnit;\n    let sanitizedUnitPosition;\n\n    if (typeof unit === 'string') {\n        sanitizedUnit = cssesc(unit, { wrap: true, quotes: 'double' });\n        if (typeof unitPosition === 'string' && validUnitPositions.includes(unitPosition)) {\n            sanitizedUnitPosition = unitPosition;\n        } else {\n            sanitizedUnitPosition = 'after';\n        }\n    }\n\n    return (\n        <Row size={fontSize}>\n            {typeof onValueClick === 'function' ? (\n                <Button\n                    data-test=\"majorValue\"\n                    color={color}\n                    size={fontSize}\n                    title={title}\n                    pseudoContent={sanitizedUnit}\n                    pseudoContentPosition={sanitizedUnitPosition}\n                    pseudoContentFontSize={fontSize * 0.6}\n                    showUnderline\n                    onClick={onValueClick}\n                >\n                    {value}\n                </Button>\n            ) : (\n                <Text\n                    data-test=\"majorValue\"\n                    color={color}\n                    size={fontSize}\n                    title={title}\n                    pseudoContent={sanitizedUnit}\n                    pseudoContentPosition={sanitizedUnitPosition}\n                    pseudoContentFontSize={fontSize * 0.6}\n                    showUnderline={false}\n                >\n                    {value}\n                </Text>\n            )}\n        </Row>\n    );\n};\n\nMajorValue.propTypes = {\n    color: T.string,\n    fontSize: T.number,\n    unit: T.string,\n    unitPosition: T.oneOf(validUnitPositions),\n    value: T.oneOfType([T.string, T.number]),\n    title: T.oneOfType([T.string, T.number]),\n    onValueClick: T.oneOfType([T.bool, T.func]),\n};\n\nexport default MajorValue;\n", "import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { DEFAULT_FONT_FAMILY, getAligment } from '../common/utils/singleValueUtils';\nimport TrendValue from './TrendValue';\nimport MajorValue from './MajorValue';\n\nconst Column = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-self: center;\n    justify-content: center;\n`;\n\nconst Row = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: ${props => props.alignItems || 'center'};\n    justify-content: ${props => getAligment(props.align)};\n`;\n\nconst Text = styled.div`\n    font-weight: normal;\n    white-space: nowrap;\n    font-size: ${props => props.size || 12}px;\n    color: ${props => props.color || '#000'};\n    font-family: ${DEFAULT_FONT_FAMILY};\n    height: ${props => props.size || 12}px;\n    line-height: 1.2;\n    margin: ${props => props.margin || 'inherit'};\n`;\n\nconst SingleValueBasic = ({ ...props }) => {\n    const {\n        majorColor,\n        majorTextFontSize,\n        majorText,\n        majorValueTitle,\n        trendColor,\n        trendTextFontSize,\n        trendText,\n        showTrendIndicator,\n        unit,\n        unitPosition,\n        underLabel,\n        underLabelFontSize,\n        underLabelColor,\n        onValueClick,\n        align,\n    } = props;\n    const trendIndicatorEnabled = trendText !== '' && showTrendIndicator;\n\n    return (\n        <Column>\n            <Row\n                alignItems=\"baseline\"\n                align={align}\n                data-test={`single-value-row-align-${getAligment(align)}`}\n            >\n                <MajorValue\n                    color={majorColor}\n                    fontSize={majorTextFontSize}\n                    unit={unit}\n                    unitPosition={unitPosition}\n                    value={majorText}\n                    title={majorValueTitle}\n                    onValueClick={onValueClick}\n                />\n                {trendIndicatorEnabled && (\n                    // Passing the same value for value and text is a temporary hold until completion of https://jira.splunk.com/browse/SCP-21371\n                    <TrendValue\n                        fontSize={trendTextFontSize}\n                        color={trendColor}\n                        value={trendText}\n                        text={trendText}\n                    />\n                )}\n            </Row>\n            {underLabel && (\n                <Row\n                    justify=\"center\"\n                    align={align}\n                    data-test={`single-value-row-align-${getAligment(align)}`}\n                >\n                    <Text\n                        data-test=\"underLabel\"\n                        size={underLabelFontSize}\n                        color={underLabelColor}\n                        margin=\"0 6px\"\n                    >\n                        {underLabel}\n                    </Text>\n                </Row>\n            )}\n        </Column>\n    );\n};\n\nSingleValueBasic.propTypes = {\n    majorText: T.string,\n    majorColor: T.string,\n    majorTextFontSize: T.number,\n    majorValueTitle: T.string,\n    trendText: T.string,\n    trendTextFontSize: T.number,\n    trendColor: T.string,\n    showTrendIndicator: T.bool,\n    unit: T.string,\n    unitPosition: T.oneOf(['before', 'after']),\n    underLabel: T.string,\n    underLabelFontSize: T.number,\n    underLabelColor: T.string,\n    onValueClick: T.oneOfType([T.bool, T.func]),\n    align: T.string,\n};\n\nexport const SingleValueTrendValue = TrendValue;\nexport default SingleValueBasic;\n"],
   "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "Text", "Column", "Row", "Text"]
 }

package/SingleValueIcon/SingleValueIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleValueIcon.d.ts","sourceRoot":"","sources":["../src/SingleValueIcon/SingleValueIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,MAAM,0CAAY,CAAC;AAChC,eAAO,MAAM,mBAAmB,KAAkB,CAAC;AAEnD,UAAU,oBAAoB;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACtC,aAAa,CAAC,MAAC;IACf,SAAS,EAAE,CAAC,GAAG,KAAA,KAAK,GAAG,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC3B,aAAa,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,eAAe,GAAI,iEAM7B,oBAAoB,KAAG,qBAqBzB,CAAC;AASF,QAAA,MAAM,GAAG;sEAU0+B,IAAK,OAAO;;;CAH9/B,CAAC;AACF,eAAO,MAAQ,MAAM,KAAc,CAAC;AACpC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"SingleValueIcon.d.ts","sourceRoot":"","sources":["../src/SingleValueIcon/SingleValueIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,MAAM,0CAAY,CAAC;AAChC,eAAO,MAAM,mBAAmB,KAAkB,CAAC;AAEnD,UAAU,oBAAoB;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACtC,aAAa,CAAC,MAAC;IACf,SAAS,EAAE,CAAC,GAAG,KAAA,KAAK,GAAG,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,qBAAqB;IAC3B,aAAa,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,eAAe,GAAI,iEAM7B,oBAAoB,KAAG,qBAqBzB,CAAC;AASF,QAAA,MAAM,GAAG;sEAUykH,IAAK,OAAO;;;CAH7lH,CAAC;AACF,eAAO,MAAQ,MAAM,KAAc,CAAC;AACpC,eAAe,GAAG,CAAC"}

package/SingleValueIcon/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/SingleValueIcon/config.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;;AA0Z3D,wBAAqC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/SingleValueIcon/config.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;;AA6Z3D,wBAAqC"}

package/SingleValueIcon.config.js

@@ -347,26 +347,59 @@ var isTrellisEnabled = ({ options, featureFlags }) => {
   const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
   return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
-var TrellisEditorConfig = [
-  [
-    {
-      label: (0, i18n_exports._)("Trellis layout"),
-      option: "splitByLayout",
-      editor: "editor.toggle",
-      showEditor: isTrellisFeatureFlagOn
-    }
-  ],
-  [
-    {
-      label: (0, i18n_exports._)("Split by"),
-      option: "trellisSplitBy",
-      editor: "editor.trellisSplitBy",
-      editorProps: {
-        dataSourceKey: "primary"
-      },
-      showEditor: isTrellisEnabled
-    }
-  ],
+var sortByValuesBase = [
+  { label: (0, i18n_exports._)("Result"), value: "result" },
+  { label: (0, i18n_exports._)("Name"), value: "name" }
+];
+var sortByValuesWithValue = [...sortByValuesBase, { label: (0, i18n_exports._)("Value"), value: "value" }];
+var sortByValuesWithValueAndTrend = [
+  ...sortByValuesBase,
+  { label: (0, i18n_exports._)("Value"), value: "value" },
+  { label: (0, i18n_exports._)("Trend"), value: "trend" }
+];
+var makeSortRow = (sortByValues) => [
+  {
+    label: (0, i18n_exports._)("Sort by"),
+    option: "trellisSortBy",
+    editor: "editor.select",
+    editorProps: {
+      values: sortByValues
+    },
+    showEditor: isTrellisEnabled
+  },
+  {
+    label: (0, i18n_exports._)("Sort order"),
+    option: "trellisSortOrder",
+    editor: "editor.select",
+    editorProps: {
+      values: [
+        { label: (0, i18n_exports._)("Ascending"), value: "ascending" },
+        { label: (0, i18n_exports._)("Descending"), value: "descending" }
+      ]
+    },
+    showEditor: isTrellisEnabled
+  }
+];
+var trellisLayoutRow = [
+  {
+    label: (0, i18n_exports._)("Trellis layout"),
+    option: "splitByLayout",
+    editor: "editor.toggle",
+    showEditor: isTrellisFeatureFlagOn
+  }
+];
+var trellisSplitByRow = [
+  {
+    label: (0, i18n_exports._)("Split by"),
+    option: "trellisSplitBy",
+    editor: "editor.trellisSplitBy",
+    editorProps: {
+      dataSourceKey: "primary"
+    },
+    showEditor: isTrellisEnabled
+  }
+];
+var trellisLayoutRows = [
   [
     {
       label: (0, i18n_exports._)("Number of columns"),
@@ -410,6 +443,24 @@ var TrellisEditorConfig = [
     }
   ]
 ];
+var TrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesBase),
+  ...trellisLayoutRows
+];
+var GaugeTrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesWithValue),
+  ...trellisLayoutRows
+];
+var SingleValueTrellisEditorConfig = [
+  trellisLayoutRow,
+  trellisSplitByRow,
+  makeSortRow(sortByValuesWithValueAndTrend),
+  ...trellisLayoutRows
+];
 var TimechartTrellisEditorConfig = [
   [
     {
@@ -417,7 +468,6 @@ var TimechartTrellisEditorConfig = [
       option: "splitByLayout",
       editor: "editor.toggle",
       showEditor: isTrellisFeatureFlagOn,
-      // add help text for timecharts
       editorProps: {
         help: (0, i18n_exports._)(
           "Y2-axis and overlay field configurations are not supported when trellis is enabled."
@@ -426,7 +476,9 @@ var TimechartTrellisEditorConfig = [
       }
     }
   ],
-  ...TrellisEditorConfig.slice(1),
+  trellisSplitByRow,
+  makeSortRow(sortByValuesBase),
+  ...trellisLayoutRows,
   [
     {
       label: (0, i18n_exports._)("Shared y-axis scale"),
@@ -654,7 +706,7 @@ var editorConfig = [
           showEditor: ({ options }) => options.showValue || options.showValue === void 0
         }
       ],
-      ...TrellisEditorConfig
+      ...SingleValueTrellisEditorConfig
     ]
   },
   {
@@ -669,7 +721,7 @@ var editorConfig = [
             presets,
             value: ({ context, options }) => {
               const initialPreset = getInitialPreset(context, options, presets);
-              return initialPreset && initialPreset.label || null;
+              return (initialPreset == null ? void 0 : initialPreset.label) || null;
             }
           }
         }