@splunk/visualizations 28.4.0 → 28.5.1

package/common/GaugeMajorTicks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/common/GaugeMajorTicks.jsx", "esm-externals:react", "esm-externals:prop-types", "esm-externals:styled-components", "esm-externals:@splunk/visualizations-shared/numberUtils"],
-  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { isNumerial, formatNumber } from '@splunk/visualizations-shared/numberUtils';\n\nconst DEFAULT_NUM_OF_TICKS = 5;\nconst TICK_LENGTH_DELTA = 5;\nconst TICK_LABEL_PADDING_FACTOR = 3.2;\n\nconst MajorTickLine = styled.line`\n    stroke: ${props => props.majorTickStrokeColor};\n    stroke-width: 2px;\n    stroke-dasharray: ${props => (props.index === 0 ? 0 : 3)};\n`;\n\nconst MajorTickLabel = styled.text`\n    font-size: 12px;\n    font-family:\n        Splunk Platform Sans,\n        sans-serif;\n    line-height: 19px;\n    fill: ${props => props.majorTickFillColor};\n    text-anchor: middle;\n    text-align: center;\n`;\n\nexport const MajorTick = ({\n    index,\n    x1,\n    y1,\n    x2,\n    y2,\n    showLabels,\n    label,\n    labelX,\n    labelY,\n    majorTickStrokeColor,\n    majorTickFillColor,\n}) => (\n    <g>\n        <MajorTickLine\n            data-test=\"major-tick-line\"\n            index={index}\n            x1={x1}\n            y1={y1}\n            x2={x2}\n            y2={y2}\n            majorTickStrokeColor={majorTickStrokeColor}\n        />\n        {showLabels && (\n            <MajorTickLabel\n                x={labelX}\n                y={labelY}\n                majorTickFillColor={majorTickFillColor}\n                data-test=\"major-tick-label\"\n            >\n                {isNumerial(label)\n                    ? formatNumber(label, 0, {\n                          useThousandSeparators: true,\n                          useTrendUnits: true,\n                      })\n                    : label}\n            </MajorTickLabel>\n        )}\n    </g>\n);\n\nMajorTick.propTypes = {\n    index: T.number,\n    x1: T.number,\n    y1: T.number,\n    x2: T.number,\n    y2: T.number,\n    showLabels: T.bool,\n    label: T.oneOfType([T.string, T.number]),\n    labelX: T.number,\n    labelY: T.number,\n    majorTickStrokeColor: T.string,\n    majorTickFillColor: T.string,\n};\n\n/**\n * calculate position for each major tick\n * @method positionMajorTick\n * @param {Object} input\n * @param {Number} input.width\n * @param {Number} input.height\n * @param {Number} input.startX  start x for rendering the first major tick\n * @param {Number} input.startY  start y for rendering the first major tick\n * @param {String} input.orientation\n * @param {Number} input.numOfTicks  how many ticks need to render\n * @param {Number} input.i   index of major tick\n * @return {Object} MajorTick positions\n */\nexport const positionMajorTick = ({ width, height, startX, startY, orientation, numOfTicks, i }) => {\n    let x1 = startX;\n    let y1 = startY;\n    let x2 = startX;\n    let y2 = startY;\n    let labelX = startX;\n    let labelY;\n\n    if (orientation === 'vertical') {\n        const y = (height / numOfTicks) * (numOfTicks - i) + startY;\n        x1 -= TICK_LENGTH_DELTA;\n        y1 = y;\n        x2 += width + TICK_LENGTH_DELTA;\n        y2 = y;\n        labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR;\n        labelY = y;\n    } else {\n        const x = (width / numOfTicks) * i + startX;\n        x1 = x;\n        y1 -= TICK_LENGTH_DELTA;\n        x2 = x;\n        y2 += height + TICK_LENGTH_DELTA;\n        labelX = x;\n        labelY = y2 + 16;\n    }\n\n    return { x1, y1, x2, y2, labelX, labelY };\n};\n\nconst MajorTicks = ({ ...props }) => {\n    const {\n        width,\n        height,\n        startX,\n        startY,\n        min = 0,\n        max = 100,\n        majorUnit = 'auto',\n        orientation = 'horizontal',\n        showLabels = true,\n        usePercentageRange = false,\n        majorTickFillColor,\n        majorTickStrokeColor,\n    } = props;\n\n    const range = max - min;\n    const numOfTicks =\n        majorUnit === 'auto' || Number.isNaN(Number(majorUnit)) || majorUnit <= 0\n            ? DEFAULT_NUM_OF_TICKS\n            : range / majorUnit;\n    const majorTicks = [];\n\n    for (let i = 0; i <= numOfTicks; i += 1) {\n        const { x1, y1, x2, y2, labelX, labelY } = positionMajorTick({\n            width,\n            height,\n            startX,\n            startY,\n            orientation,\n            numOfTicks,\n            i,\n        });\n        const label = usePercentageRange\n            ? `${parseInt((i / numOfTicks - min / range) * 100, 10)}%`\n            : parseInt(min + (range / numOfTicks) * i, 10);\n\n        majorTicks.push(\n            <MajorTick\n                key={i}\n                index={i}\n                x1={x1}\n                y1={y1}\n                x2={x2}\n                y2={y2}\n                showLabels={showLabels}\n                label={label}\n                labelX={labelX}\n                labelY={labelY}\n                majorTickFillColor={majorTickFillColor}\n                majorTickStrokeColor={majorTickStrokeColor}\n            />\n        );\n    }\n\n    // if the gauge is not divided evenly, put the last tick at the end of the gauge\n    if (!Number.isInteger(numOfTicks)) {\n        const extraNumOfTicks = Math.ceil(numOfTicks);\n        const { x1, y1, x2, y2, labelX, labelY } = positionMajorTick({\n            width,\n            height,\n            startX,\n            startY,\n            orientation,\n            numOfTicks: extraNumOfTicks,\n            i: extraNumOfTicks,\n        });\n\n        majorTicks.push(\n            <MajorTick\n                key={extraNumOfTicks}\n                id={extraNumOfTicks}\n                x1={x1}\n                y1={y1}\n                x2={x2}\n                y2={y2}\n                showLabels={showLabels}\n                label={usePercentageRange ? '100%' : max}\n                labelX={labelX}\n                labelY={labelY}\n                majorTickFillColor={majorTickFillColor}\n                majorTickStrokeColor={majorTickStrokeColor}\n            />\n        );\n    }\n\n    return <g>{majorTicks}</g>;\n};\n\nMajorTicks.propTypes = {\n    width: T.number,\n    height: T.number,\n    startX: T.number,\n    startY: T.number,\n    min: T.number,\n    max: T.number,\n    majorUnit: T.oneOfType([T.string, T.number]),\n    orientation: T.string,\n    showLabels: T.bool,\n    usePercentageRange: T.bool,\n    majorTickFillColor: T.string,\n    majorTickStrokeColor: T.string,\n};\n\nexport default MajorTicks;\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 \"@splunk/visualizations-shared/numberUtils\";\nexport * from \"@splunk/visualizations-shared/numberUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n"],
-  "mappings": "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",
-  "names": ["defaultImport", "defaultImport", "defaultImport"]
+  "sources": ["../src/common/GaugeMajorTicks.jsx", "esm-externals:react", "esm-externals:prop-types", "esm-externals:styled-components", "esm-externals:lodash", "esm-externals:@splunk/visualizations-shared/colorConstants", "esm-externals:@splunk/visualizations-shared/numberUtils", "esm-externals:@splunk/ui-utils/i18n", "../src/common/gaugeUtils.ts"],
+  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { getTickLabelFormatter } from './gaugeUtils';\n\nconst TICK_LENGTH_DELTA = 5;\nconst TICK_LABEL_PADDING_FACTOR = 3.2;\nconst VERTICAL_START_ANCHOR_OFFSET = 8;\n\nconst MajorTickLine = styled.line`\n    stroke: ${props => props.majorTickStrokeColor};\n    stroke-width: 2px;\n    stroke-dasharray: ${props => (props.index === 0 ? 0 : 3)};\n`;\n\nconst MajorTickLabel = styled.text`\n    font-size: 12px;\n    font-family:\n        Splunk Platform Sans,\n        sans-serif;\n    line-height: 19px;\n    fill: ${props => props.majorTickFillColor};\n    text-anchor: ${props => props.textAnchor};\n    text-align: center;\n`;\n\nexport const MajorTick = ({\n    index,\n    x1,\n    y1,\n    x2,\n    y2,\n    showLabels,\n    label,\n    labelX,\n    labelY,\n    textAnchor = 'middle',\n    majorTickStrokeColor,\n    majorTickFillColor,\n}) => (\n    <g>\n        <MajorTickLine\n            data-test=\"major-tick-line\"\n            index={index}\n            x1={x1}\n            y1={y1}\n            x2={x2}\n            y2={y2}\n            majorTickStrokeColor={majorTickStrokeColor}\n        />\n        {showLabels && (\n            <MajorTickLabel\n                x={labelX}\n                y={labelY}\n                textAnchor={textAnchor}\n                majorTickFillColor={majorTickFillColor}\n                data-test=\"major-tick-label\"\n            >\n                {label}\n            </MajorTickLabel>\n        )}\n    </g>\n);\n\nMajorTick.propTypes = {\n    index: T.number,\n    x1: T.number,\n    y1: T.number,\n    x2: T.number,\n    y2: T.number,\n    showLabels: T.bool,\n    label: T.oneOfType([T.string, T.number]),\n    labelX: T.number,\n    labelY: T.number,\n    textAnchor: T.string,\n    majorTickStrokeColor: T.string,\n    majorTickFillColor: T.string,\n};\n\n/**\n * calculate position for each major tick\n * @method positionMajorTick\n * @param {Object} input\n * @param {Number} input.width\n * @param {Number} input.height\n * @param {Number} input.startX  start x for rendering the first major tick\n * @param {Number} input.startY  start y for rendering the first major tick\n * @param {String} input.orientation\n * @param {Number} input.numOfTicks  how many ticks need to render\n * @param {Number} input.i   index of major tick\n * @return {Object} MajorTick positions\n */\nexport const positionMajorTick = ({ width, height, startX, startY, orientation, numOfTicks, i }) => {\n    let x1 = startX;\n    let y1 = startY;\n    let x2 = startX;\n    let y2 = startY;\n    let labelX = startX;\n    let labelY;\n\n    if (orientation === 'vertical') {\n        const y = (height / numOfTicks) * (numOfTicks - i) + startY;\n        x1 -= TICK_LENGTH_DELTA;\n        y1 = y;\n        x2 += width + TICK_LENGTH_DELTA;\n        y2 = y;\n        // Compensate for start-anchor labels so single-digit left padding matches previous middle-anchor layout.\n        labelX += width + TICK_LENGTH_DELTA * TICK_LABEL_PADDING_FACTOR - VERTICAL_START_ANCHOR_OFFSET;\n        labelY = y;\n    } else {\n        const x = (width / numOfTicks) * i + startX;\n        x1 = x;\n        y1 -= TICK_LENGTH_DELTA;\n        x2 = x;\n        y2 += height + TICK_LENGTH_DELTA;\n        labelX = x;\n        labelY = y2 + 16;\n    }\n\n    return { x1, y1, x2, y2, labelX, labelY };\n};\n\nconst MajorTicks = ({ ...props }) => {\n    const {\n        width,\n        height,\n        startX,\n        startY,\n        min = 0,\n        max = 100,\n        majorUnit = 'auto',\n        orientation = 'horizontal',\n        showLabels = true,\n        usePercentageRange = false,\n        majorTickFillColor,\n        majorTickStrokeColor,\n    } = props;\n    const isVertical = orientation === 'vertical';\n    const textAnchor = isVertical ? 'start' : 'middle';\n\n    const { numOfTicks, numericStep, formatTickLabel } = getTickLabelFormatter({\n        min,\n        max,\n        majorUnit,\n        usePercentageRange,\n    });\n\n    const majorTicks = [];\n\n    for (let i = 0; i <= numOfTicks; i += 1) {\n        const tickValue = min + numericStep * i;\n        const { x1, y1, x2, y2, labelX, labelY } = positionMajorTick({\n            width,\n            height,\n            startX,\n            startY,\n            orientation,\n            numOfTicks,\n            i,\n        });\n        const label = formatTickLabel(tickValue);\n\n        majorTicks.push(\n            <MajorTick\n                key={i}\n                index={i}\n                x1={x1}\n                y1={y1}\n                x2={x2}\n                y2={y2}\n                showLabels={showLabels}\n                label={label}\n                labelX={labelX}\n                labelY={labelY}\n                textAnchor={textAnchor}\n                majorTickFillColor={majorTickFillColor}\n                majorTickStrokeColor={majorTickStrokeColor}\n            />\n        );\n    }\n\n    // if the gauge is not divided evenly, put the last tick at the end of the gauge\n    if (!Number.isInteger(numOfTicks)) {\n        const extraNumOfTicks = Math.ceil(numOfTicks);\n        const { x1, y1, x2, y2, labelX, labelY } = positionMajorTick({\n            width,\n            height,\n            startX,\n            startY,\n            orientation,\n            numOfTicks: extraNumOfTicks,\n            i: extraNumOfTicks,\n        });\n\n        majorTicks.push(\n            <MajorTick\n                key={extraNumOfTicks}\n                id={extraNumOfTicks}\n                x1={x1}\n                y1={y1}\n                x2={x2}\n                y2={y2}\n                showLabels={showLabels}\n                label={formatTickLabel(max)}\n                labelX={labelX}\n                labelY={labelY}\n                textAnchor={textAnchor}\n                majorTickFillColor={majorTickFillColor}\n                majorTickStrokeColor={majorTickStrokeColor}\n            />\n        );\n    }\n\n    return <g>{majorTicks}</g>;\n};\n\nMajorTicks.propTypes = {\n    width: T.number,\n    height: T.number,\n    startX: T.number,\n    startY: T.number,\n    min: T.number,\n    max: T.number,\n    majorUnit: T.oneOfType([T.string, T.number]),\n    orientation: T.string,\n    showLabels: T.bool,\n    usePercentageRange: T.bool,\n    majorTickFillColor: T.string,\n    majorTickStrokeColor: T.string,\n};\n\nexport default MajorTicks;\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/colorConstants\";\nexport * from \"@splunk/visualizations-shared/colorConstants\";\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/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { chain, mapKeys, omit, uniqBy } from 'lodash';\nimport {\n    SEMANTIC_SUCCESS,\n    SEMANTIC_WARNING,\n    SEMANTIC_ERROR,\n} from '@splunk/visualizations-shared/colorConstants';\nimport { formatNumber } from '@splunk/visualizations-shared/numberUtils';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport const GAUGE_THICKNESS = 50;\nexport const FILL_THICKNESS = 38;\nconst GRADIENT_STOP_OFFSET_MIN = 0;\nconst GRADIENT_STOP_OFFSET_MAX = 100;\nconst DEFAULT_NUM_OF_TICKS = 5;\nconst MAX_TICK_LABEL_DECIMAL_PLACES = 5;\nconst MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT = 6;\nconst MAX_VALUE_LABEL_DIGITS_WITH_PERCENT = 5;\n\n/**\n * get width for the whole gauge viz for horizontal or vertical view\n * @method getGaugeWidth\n * @param {Object} input\n * @param {Number} containerWidth\n * @param {String} orientation\n * @return {Number} width\n */\nexport const getGaugeWidth = ({ containerWidth, orientation }) =>\n    orientation === 'vertical' ? GAUGE_THICKNESS : containerWidth * 0.8;\n\n/**\n * get height for the whole gauge viz for horizontal or vertical view\n * @method getGaugeHeight\n * @param {Object} input\n * @param {Number} containerHeight\n * @param {String} orientation\n * @return {Number} height\n */\nexport const getGaugeHeight = ({ containerHeight, orientation }) =>\n    orientation === 'vertical' ? containerHeight * 0.8 : GAUGE_THICKNESS;\n\n/**\n * get how long the gauge shoud be.\n * In horizontal view, gauge length equals to gauge width. In vertical view, it equals to gauge height.\n * @method getGaugeLength\n * @param {Object} input\n * @param {Number} input.containerWidth\n * @param {Number} input.containerHeight\n * @param {String} input.orientation\n * @return {Number} gaugeLength\n */\nexport const getGaugeLength = ({ containerWidth, containerHeight, orientation }) =>\n    orientation === 'vertical'\n        ? getGaugeHeight({ containerHeight, orientation })\n        : getGaugeWidth({ containerWidth, orientation });\n\n/**\n * get start x and y for rendering gauge\n * @method getGaugeStartPosition\n * @param {Object} input\n * @param {Number} containerWidth\n * @param {Number} containerHeight\n * @param {Number} gaugeLength\n * @param {String} orientation\n * @return {Object} position\n * @return {Number} position.gaugeStartX\n * @return {Number} position.gaugeStartY\n */\nexport const getGaugeStartPosition = ({ containerWidth, containerHeight, gaugeLength, orientation }) => {\n    // for horizontal view\n    let gaugeStartX = (containerWidth - gaugeLength) / 2.0;\n    let gaugeStartY = (containerHeight - GAUGE_THICKNESS) / 2.0;\n\n    if (orientation === 'vertical') {\n        gaugeStartX = (containerWidth - GAUGE_THICKNESS) / 2.0;\n        gaugeStartY = (containerHeight - gaugeLength) / 2.0;\n    }\n\n    return { gaugeStartX, gaugeStartY };\n};\n\n/**\n * get dimensions for the whole gauge viz,\n * which can be useful to calculate background bar and major ticks positions.\n * @method getGaugeDimensions\n * @param {Object} input\n * @param {Number} input.containerWidth\n * @param {Number} input.containerHeight\n * @param {String} input.orientation  'horizontal' or 'vertical'\n * @return {Object} gaugeDimensions\n * @return {Number} gaugeDimensions.gaugeLength  how long the gauge shoud be in horizontal or vertical orientation.\n * @return {Number} gaugeDimensions.gaugeStartX  start x to render gauge\n * @return {Number} gaugeDimensions.gaugeStartY  start y to render gauge\n * @return {Number} gaugeDimensions.gaugeWidth   natural width of gauge\n * @return {Number} gaugeDimensions.gaugeHeight  natural height of gauge\n */\nexport const getGaugeDimensions = ({ containerWidth, containerHeight, orientation }) => {\n    const gaugeLength = getGaugeLength({\n        containerWidth,\n        containerHeight,\n        orientation,\n    });\n    const { gaugeStartX, gaugeStartY } = getGaugeStartPosition({\n        containerWidth,\n        containerHeight,\n        gaugeLength,\n        orientation,\n    });\n    const gaugeWidth = getGaugeWidth({ containerWidth, orientation });\n    const gaugeHeight = getGaugeHeight({ containerHeight, orientation });\n\n    return {\n        gaugeLength,\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n    };\n};\n\n/**\n * if gaugeColor is not specified, auto assign a gauge color to the fill bar\n * based on how much percentage the value is taken between min and max\n * @method assignGaugeColor\n * @params\n * */\nexport const assignGaugeColor = ({ value, min, max }) => {\n    const rate = (value - min) / (max - min);\n\n    if (rate <= 0.3) {\n        return SEMANTIC_SUCCESS;\n    }\n    if (rate > 0.3 && rate <= 0.6) {\n        return SEMANTIC_WARNING;\n    }\n\n    return SEMANTIC_ERROR;\n};\n\n/**\n * get inner bar length in gauge\n * @method getGaugeBarLength\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.value\n * @param {Number} input.min\n * @param {Number} input.max\n * @return {Number} gaugeBarLength\n */\nexport const getGaugeBarLength = ({ gaugeLength, value, min, max }) => {\n    if (max < min) {\n        return null;\n    }\n\n    if (value >= max) {\n        return gaugeLength;\n    }\n\n    if (value < min) {\n        return 0;\n    }\n\n    return (gaugeLength * (value - min)) / (max - min);\n};\n\n/**\n * get x and y position for rendering inner bar in gauge\n * @method getGaugeBarStartPositions\n * @param {Object} input\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth\n * @param {Number} input.gaugeHeight\n * @param {Number} input.gaugeBarLength\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.gaugeBarX\n * @return {Number} position.gaugeBarY\n */\nexport const getGaugeBarStartPositions = ({\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    gaugeBarLength,\n    orientation,\n}) => {\n    let gaugeBarX = gaugeStartX;\n    let gaugeBarY = gaugeStartY;\n\n    if (orientation === 'vertical') {\n        gaugeBarX += (gaugeWidth - FILL_THICKNESS) / 2;\n        gaugeBarY += gaugeHeight - gaugeBarLength;\n    } else {\n        gaugeBarY += (gaugeHeight - FILL_THICKNESS) / 2;\n    }\n\n    return {\n        gaugeBarX,\n        gaugeBarY,\n    };\n};\n\n/**\n * get width of inner bar in gauge\n * @method getGaugeBarWidth\n * @param {Object} input\n * @param {Number} input.gaugeBarLength\n * @param {String} orientation\n * @return {Number} gaugeBarWidth\n */\nexport const getGaugeBarWidth = ({ gaugeBarLength, orientation }) =>\n    orientation === 'vertical' ? FILL_THICKNESS : gaugeBarLength;\n\n/**\n * get height of inner bar in gauge\n * @method getGaugeBarWidth\n * @param {Object} input\n * @param {Number} input.gaugeBarLength\n * @param {String} orientation\n * @return {Number} gaugeBarHeight\n */\nexport const getGaugeBarHeight = ({ gaugeBarLength, orientation }) =>\n    orientation === 'vertical' ? gaugeBarLength : FILL_THICKNESS;\n\n/**\n * get dimensions for the fill bar in the gauge\n * @method getFillBarDimensions\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth,\n * @param {Number} input.gaugeHeight,\n * @param {Number} input.value,\n * @param {Number} input.min,\n * @param {Number} input.max,\n * @param {String} input.orientation\n * @return {Object} fillBarDimensions\n * @return {Number} fillBarDimensions.fillBarLength\n * @return {Number} fillBarDimensions.fillBarX\n * @return {Number} fillBarDimensions.fillBarY\n * @return {Number} fillBarDimensions.fillBarWidth\n * @return {Number} fillBarDimensions.fillBarHeight\n */\nexport const getFillBarDimensions = ({\n    gaugeLength,\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    value,\n    min,\n    max,\n    orientation,\n}) => {\n    const gaugeBarLength = getGaugeBarLength({ gaugeLength, value, max, min });\n    const { gaugeBarX: fillBarX, gaugeBarY: fillBarY } = getGaugeBarStartPositions({\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n        gaugeBarLength,\n        orientation,\n    });\n    const fillBarWidth = getGaugeBarWidth({ gaugeBarLength, orientation });\n    const fillBarHeight = getGaugeBarHeight({ gaugeBarLength, orientation });\n\n    return {\n        fillBarLength: gaugeBarLength,\n        fillBarX,\n        fillBarY,\n        fillBarWidth,\n        fillBarHeight,\n    };\n};\n\n/**\n * get position x and y for value marker in filler gauge\n * @method getFillerGaugeValueMarkerPositions\n * @param {Object} input\n * @param {Number} input.fillBarX\n * @param {Number} input.fillBarY\n * @param {Number} input.fillBarLength\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.valueMarkerX\n * @return {Number} position.valueMarkerY\n */\nexport const getFillerGaugeValueMarkerPositions = ({ fillBarX, fillBarY, fillBarLength, orientation }) => {\n    let valueMarkerX = fillBarX;\n    let valueMarkerY = fillBarY;\n\n    if (orientation === 'vertical') {\n        valueMarkerX -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    } else {\n        valueMarkerX += fillBarLength;\n        valueMarkerY -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    }\n\n    return {\n        valueMarkerX,\n        valueMarkerY,\n    };\n};\n\n/**\n * get dimensions for the marker bar in the gauge\n * @method getMarkerBarDimensions\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth,\n * @param {Number} input.gaugeHeight,\n * @param {String} input.orientation\n * @return {Object} markerBarDimensions\n * @return {Number} markerBarDimensions.markerBarLength\n * @return {Number} markerBarDimensions.markerBarX\n * @return {Number} markerBarDimensions.markerBarY\n * @return {Number} markerBarDimensions.markerBarWidth\n * @return {Number} markerBarDimensions.markerBarHeight\n */\nexport const getMarkerBarDimensions = ({\n    gaugeLength,\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    orientation,\n}) => {\n    const gaugeBarLength = gaugeLength; // For marker gauge, inner marker bar spans the entire gauge\n    const { gaugeBarX: markerBarX, gaugeBarY: markerBarY } = getGaugeBarStartPositions({\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n        gaugeBarLength,\n        orientation,\n    });\n    const markerBarWidth = getGaugeBarWidth({ gaugeBarLength, orientation });\n    const markerBarHeight = getGaugeBarHeight({ gaugeBarLength, orientation });\n\n    return {\n        markerBarLength: gaugeBarLength,\n        markerBarX,\n        markerBarY,\n        markerBarWidth,\n        markerBarHeight,\n    };\n};\n\n/**\n * get position x and y for value marker in marker gauge\n * @method getMarkerGaugeValueMarkerPositions\n * @param {Object} input\n * @param {Number} input.markerBarX\n * @param {Number} input.markerBarY\n * @param {Number} input.markerBarHeight\n * @param {Number} input.markerBarLength\n * @param {Number} input.value\n * @param {Number} input.min\n * @param {Number} input.max\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.valueMarkerX\n * @return {Number} position.valueMarkerY\n */\nexport const getMarkerGaugeValueMarkerPositions = ({\n    markerBarX,\n    markerBarY,\n    markerBarHeight,\n    markerBarLength: gaugeLength,\n    orientation,\n    value,\n    min,\n    max,\n}) => {\n    let valueMarkerX = markerBarX;\n    let valueMarkerY = markerBarY;\n    if (orientation === 'vertical') {\n        valueMarkerY += markerBarHeight - getGaugeBarLength({ gaugeLength, value, max, min });\n        valueMarkerX -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    } else {\n        valueMarkerX += getGaugeBarLength({ gaugeLength, value, max, min });\n        valueMarkerY -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    }\n\n    return {\n        valueMarkerX,\n        valueMarkerY,\n    };\n};\n\n/**\n * sort the ranges in ascending order\n * @method getSortedRanges\n * @param {Array} ranges\n * @return {Array} sortedRanges\n */\nexport const getSortedRanges = ranges => ranges.sort((a, b) => a.from - b.from);\n\n/**\n * validate whether ranges prop is valid - continuous ranges, range.to < range.from, range.from != range.to\n * @method validateRanges\n * @param {Array} ranges\n * @return {String} error\n */\nexport const validateRanges = ranges => {\n    if (!ranges.length) {\n        return _('Prop \"ranges\" is missing entries');\n    }\n\n    // check whether a range has \"from\" >= \"to\" eg: 10 - 10, 100 - 10, -20 - -10 are invalid\n    if (ranges.some(range => range.from >= range.to)) {\n        return _('Prop \"ranges\" has invalid entries: invalid range');\n    }\n\n    // check whether ranges have duplicate \"from/to\" eg: 0 - 50, 25 - 50\n    if (ranges.length !== uniqBy(ranges, 'to').length || ranges.length !== uniqBy(ranges, 'from').length) {\n        return _('Prop \"ranges\" has invalid entries: duplicate values');\n    }\n\n    const sortedRanges = getSortedRanges(ranges);\n\n    // check whether ranges are continuous eg: 0 - 10, 10 - 20, 20 - 30\n    for (let i = 1; i < sortedRanges.length; i += 1) {\n        if (sortedRanges[i].from !== sortedRanges[i - 1].to) {\n            return _('Prop \"ranges\" has invalid entries: discontinuous ranges');\n        }\n    }\n\n    return null;\n};\n\n/**\n * calculate min and max value of gauge\n * @method getGaugeRange\n * @param {Array} ranges\n * @return {Object} gaugeRange\n * @return {Number} gaugeRange.min\n * @return {Number} gaugeRange.max\n */\nexport const getGaugeRange = ranges => {\n    const min = Math.min(...ranges.map(range => range.from));\n    const max = Math.max(...ranges.map(range => range.to));\n    return { min, max };\n};\n\n/**\n * calculate stop offsets for linear gradient\n * @method getGradientStopOffsets\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} cumulativeOffsets\n */\nexport const getGradientStopOffsets = ({ ranges, orientation }) => {\n    const { min, max } = getGaugeRange(ranges);\n    const offsetScale = (GRADIENT_STOP_OFFSET_MAX - GRADIENT_STOP_OFFSET_MIN) / (max - min);\n    let offsets = ranges.map(range => Math.abs(range.from - range.to) * offsetScale);\n    // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed\n    offsets = orientation === 'vertical' ? offsets.reverse() : offsets;\n    const cumulativeOffsets = [];\n    offsets.reduce((accumulator, currentValue, idx) => {\n        cumulativeOffsets[idx] = accumulator + currentValue;\n        return cumulativeOffsets[idx];\n    }, 0);\n    return cumulativeOffsets;\n};\n\n/**\n * calculate stop colors for linear gradient\n * @method getGradientStopColors\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} stopColors\n */\nexport const getGradientStopColors = ({ ranges, orientation }) => {\n    const stopColors = ranges.map(range => range.value);\n    // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed\n    return orientation === 'vertical' ? stopColors.reverse() : stopColors;\n};\n\n/**\n * calculate linear gradient stops from ranges\n * @method getGradientStops\n * @param {Object} input\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} stops\n */\nexport const getGradientStops = ({ ranges, orientation }) => {\n    const stops = [];\n    const offsets = getGradientStopOffsets({ ranges, orientation });\n    const stopColors = getGradientStopColors({ ranges, orientation });\n    // Initialize stops with the first color stop\n    stops.push({ offset: `${offsets[0]}%`, stopColor: stopColors[0] });\n    // Add the remaining color stops with gradient change at each stop\n    for (let i = 1; i < ranges.length; i += 1) {\n        stops.push({ offset: `${offsets[i - 1]}%`, stopColor: stopColors[i] });\n        stops.push({ offset: `${offsets[i]}%`, stopColor: stopColors[i] });\n    }\n    return stops;\n};\n\n/**\n * calculate linear gradient dimensions\n * @method getGradientDimensions\n * @param {String} orientation\n * @return {Object} dimensions\n * @return {String} dimensions.x1\n * @return {String} dimensions.y1\n * @return {String} dimensions.x2\n * @return {String} dimensions.y2\n */\nexport const getGradientDimensions = orientation => {\n    const x1 = '0%';\n    const y1 = '0%';\n    const x2 = orientation === 'horizontal' ? '100%' : '0%';\n    const y2 = orientation === 'horizontal' ? '0%' : '100%';\n    return { x1, y1, x2, y2 };\n};\n\ntype NumericInput = number | string;\n\ninterface UniqueDecimalPlacesInput {\n    values: number[];\n    minimumDecimalPlaces: number;\n}\n\ninterface PercentageFromRangeInput {\n    value: number;\n    min: number;\n    range: number;\n}\n\ninterface NumOfTicksInput {\n    min: number;\n    max: number;\n    majorUnit: number | string;\n    usePercentageRange: boolean;\n}\n\ninterface TickLabelFormatterResult {\n    numOfTicks: number;\n    numericStep: number;\n    formatTickLabel: (value: number) => string;\n}\n\ninterface FormatGaugeValueLabelInput {\n    value: NumericInput;\n    min: number;\n    max: number;\n    usePercentageValue: boolean;\n}\n\n// Returns the number of fractional digits in a numeric input.\nexport const getDecimalPlaces = (value: NumericInput): number => {\n    const numericValue = Number(value);\n    if (!Number.isFinite(numericValue)) {\n        return 0;\n    }\n\n    const fractionPart = numericValue.toString().split('.')[1];\n    return fractionPart ? fractionPart.length : 0;\n};\n\n// Finds the smallest precision that keeps all rounded tick values unique.\n// This avoids duplicated rendered labels caused by rounding collisions.\nexport const getUniqueDecimalPlaces = ({\n    values,\n    minimumDecimalPlaces,\n}: UniqueDecimalPlacesInput): number => {\n    if (values.length <= 1) {\n        return minimumDecimalPlaces;\n    }\n\n    for (\n        let decimalPlaces = minimumDecimalPlaces;\n        decimalPlaces <= MAX_TICK_LABEL_DECIMAL_PLACES;\n        decimalPlaces += 1\n    ) {\n        const roundedValues = values.map(value => Number(value.toFixed(decimalPlaces)));\n        if (new Set(roundedValues).size === roundedValues.length) {\n            return decimalPlaces;\n        }\n    }\n\n    return MAX_TICK_LABEL_DECIMAL_PLACES;\n};\n\n// Converts a value within [min, max] to percentage space.\nexport const getPercentageFromRange = ({ value, min, range }: PercentageFromRangeInput): number => {\n    if (range === 0) {\n        return 0;\n    }\n    return ((value - min) / range) * 100;\n};\n\n// Computes interval count from auto mode or explicit majorUnit.\nexport const getNumOfTicks = ({\n    min,\n    max,\n    majorUnit,\n    usePercentageRange,\n}: NumOfTicksInput): { numOfTicks: number; isAutoMajorUnit: boolean; majorUnitNumber: number } => {\n    const range = max - min;\n    const majorUnitNumber = Number(majorUnit);\n    const isAutoMajorUnit = majorUnit === 'auto' || Number.isNaN(majorUnitNumber) || majorUnitNumber <= 0;\n\n    let numOfTicks = DEFAULT_NUM_OF_TICKS;\n    if (!isAutoMajorUnit) {\n        numOfTicks = usePercentageRange ? 100 / majorUnitNumber : range / majorUnitNumber;\n    }\n\n    return { numOfTicks, isAutoMajorUnit, majorUnitNumber };\n};\n\n// Builds a reusable formatter and step size for major tick rendering.\nexport const getTickLabelFormatter = ({\n    min,\n    max,\n    majorUnit,\n    usePercentageRange,\n}: NumOfTicksInput): TickLabelFormatterResult => {\n    const range = max - min;\n    const { numOfTicks, isAutoMajorUnit, majorUnitNumber } = getNumOfTicks({\n        min,\n        max,\n        majorUnit,\n        usePercentageRange,\n    });\n    const numericStep = range / numOfTicks;\n    const tickValues = [];\n\n    // Materialize all candidate tick values (plus max for uneven divisions).\n    for (let i = 0; i <= numOfTicks; i += 1) {\n        tickValues.push(min + numericStep * i);\n    }\n\n    if (!Number.isInteger(numOfTicks)) {\n        tickValues.push(max);\n    }\n\n    const minimumNumericDecimalPlaces = Math.min(\n        MAX_TICK_LABEL_DECIMAL_PLACES,\n        Math.max(\n            getDecimalPlaces(min),\n            getDecimalPlaces(max),\n            isAutoMajorUnit ? 0 : getDecimalPlaces(majorUnitNumber)\n        )\n    );\n    const numericLabelDecimalPlaces = getUniqueDecimalPlaces({\n        values: tickValues,\n        minimumDecimalPlaces: minimumNumericDecimalPlaces,\n    });\n    const percentageLabelDecimalPlaces = getUniqueDecimalPlaces({\n        values: tickValues.map(value => getPercentageFromRange({ value, min, range })),\n        minimumDecimalPlaces: 0,\n    });\n\n    // Keep fixed-width decimal formatting when decimals are needed; otherwise use trend formatting.\n    const formatTickLabel = value => {\n        if (usePercentageRange) {\n            const percentageValue = getPercentageFromRange({ value, min, range });\n            return `${percentageValue.toFixed(percentageLabelDecimalPlaces)}%`;\n        }\n\n        const numericLabel = value.toFixed(numericLabelDecimalPlaces);\n        if (numericLabel.includes('.')) {\n            return numericLabel;\n        }\n\n        return formatNumber(Number(numericLabel), 0, {\n            useThousandSeparators: true,\n            useTrendUnits: true,\n        }).replace(/k$/, 'K');\n    };\n\n    return { numOfTicks, numericStep, formatTickLabel };\n};\n\n// Limits decimal places so displayed value length stays within a fixed digit budget.\nconst getDigitsBeforeDecimal = (numericValue: NumericInput): number =>\n    Math.abs(Math.trunc(Number(numericValue))).toString().length;\n\nconst getCappedDecimalPlaces = (\n    numericValue: NumericInput,\n    rawDecimalPlaces: number,\n    maxDigits: number\n): number => {\n    const digitsBeforeDecimal = getDigitsBeforeDecimal(numericValue);\n    const maxDecimalPlaces = Math.max(0, maxDigits - digitsBeforeDecimal);\n    return Math.min(rawDecimalPlaces, maxDecimalPlaces);\n};\n\n// Formats the marker value label in number or percentage mode with capped precision.\nexport const formatGaugeValueLabel = ({\n    value,\n    min,\n    max,\n    usePercentageValue,\n}: FormatGaugeValueLabelInput): string => {\n    const numericValue = Number(value);\n    const range = max - min || 1;\n    const percentageValue = getPercentageFromRange({ value: numericValue, min, range });\n    const trendFormatOptions = {\n        useThousandSeparators: true,\n        useTrendUnits: true,\n    };\n\n    if (usePercentageValue) {\n        // Use the same number-mode formatting behavior (including K/M/B/T) for percentages.\n        const percentageDecimalPlaces = getCappedDecimalPlaces(\n            percentageValue,\n            2,\n            MAX_VALUE_LABEL_DIGITS_WITH_PERCENT\n        );\n        return `${formatNumber(percentageValue, percentageDecimalPlaces, trendFormatOptions)}%`;\n    }\n\n    const valueDecimalPlaces = getCappedDecimalPlaces(\n        numericValue,\n        getDecimalPlaces(numericValue),\n        MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT\n    );\n    return formatNumber(numericValue, valueDecimalPlaces, trendFormatOptions);\n};\n\ninterface GaugeOptions {\n    [key: string]: any;\n}\n\n// map for new options names to old option names\nconst gaugeOptionsMapping = {\n    majorTickInterval: 'majorUnit',\n    gaugeRanges: 'ranges',\n};\n\n/**\n * Helper method to update the option names which can be mapped to pure component options\n * @method mapToOldKey\n * @param {Object} options\n * @returns {Object}\n */\nexport const mapToOldKey = (options: GaugeOptions): GaugeOptions =>\n    mapKeys(options, (val, key) => (gaugeOptionsMapping[key] ? gaugeOptionsMapping[key] : key));\n\ntype LabelOrValue = 'label' | 'value';\n\n/**\n * Helper method to map labelDisplay and valueDisplay options to pure component option names\n * @method mapToOldKey\n * @param {string} labelOrValue\n * @param {Object} options\n * @returns {Object}\n */\nexport const mapValueLabelDisplay = (labelOrValue: LabelOrValue, options: GaugeOptions): GaugeOptions => {\n    const rangeOrValue: string = labelOrValue === 'value' ? 'Value' : 'Range';\n    const showKey: string = labelOrValue === 'value' ? 'showValue' : 'showLabels';\n    const percentKey = `usePercentage${rangeOrValue}`;\n    const optionString = `${labelOrValue}Display`;\n    const newOptions = { ...options };\n    if (newOptions[optionString]) {\n        if (newOptions[optionString] === 'number') {\n            newOptions[showKey] = true;\n            newOptions[percentKey] = false;\n        } else if (newOptions[optionString] === 'percentage') {\n            newOptions[showKey] = true;\n            newOptions[percentKey] = true;\n        } else {\n            newOptions[showKey] = false;\n            newOptions[percentKey] = false;\n        }\n    }\n    return omit(newOptions, [optionString]);\n};\n\n/**\n * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that pure component accepts\n * This is for options that has new key name and can not directly be mapped with pure component props\n * @method convertToGaugeProperties\n * @param {Object} originalOptions\n * @returns {Object}\n */\nexport const convertToGaugeProperties = (originalOptions: GaugeOptions): GaugeOptions =>\n    chain(mapToOldKey(originalOptions))\n        .thru(options => mapValueLabelDisplay('label', options))\n        .thru(options => mapValueLabelDisplay('value', options))\n        .value();\n"],
+  "mappings": "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",
+  "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/common/GaugeValueMarker.js

@@ -81,32 +81,102 @@ var defaultImport3 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
 var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
 
-// esm-externals:@splunk/visualizations-shared/numberUtils
-var numberUtils_exports = {};
-__export(numberUtils_exports, {
-  default: () => numberUtils_default
-});
-var defaultImport4 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
-__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
-
 // esm-externals:@splunk/ui-utils/format
 var format_exports = {};
 __export(format_exports, {
   default: () => format_default
 });
-var defaultImport5 = __toESM(require("@splunk/ui-utils/format"));
+var defaultImport4 = __toESM(require("@splunk/ui-utils/format"));
 __reExport(format_exports, require("@splunk/ui-utils/format"));
-var format_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+var format_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport6 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport5 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var i18n_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport6 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/visualizations-shared/colorConstants
+var colorConstants_exports = {};
+__export(colorConstants_exports, {
+  default: () => colorConstants_default
+});
+var defaultImport7 = __toESM(require("@splunk/visualizations-shared/colorConstants"));
+__reExport(colorConstants_exports, require("@splunk/visualizations-shared/colorConstants"));
+var colorConstants_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/visualizations-shared/numberUtils
+var numberUtils_exports = {};
+__export(numberUtils_exports, {
+  default: () => numberUtils_default
+});
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
+var numberUtils_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// src/common/gaugeUtils.ts
+var MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT = 6;
+var MAX_VALUE_LABEL_DIGITS_WITH_PERCENT = 5;
+var getDecimalPlaces = (value) => {
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return 0;
+  }
+  const fractionPart = numericValue.toString().split(".")[1];
+  return fractionPart ? fractionPart.length : 0;
+};
+var getPercentageFromRange = ({ value, min, range }) => {
+  if (range === 0) {
+    return 0;
+  }
+  return (value - min) / range * 100;
+};
+var getDigitsBeforeDecimal = (numericValue) => Math.abs(Math.trunc(Number(numericValue))).toString().length;
+var getCappedDecimalPlaces = (numericValue, rawDecimalPlaces, maxDigits) => {
+  const digitsBeforeDecimal = getDigitsBeforeDecimal(numericValue);
+  const maxDecimalPlaces = Math.max(0, maxDigits - digitsBeforeDecimal);
+  return Math.min(rawDecimalPlaces, maxDecimalPlaces);
+};
+var formatGaugeValueLabel = ({
+  value,
+  min,
+  max,
+  usePercentageValue
+}) => {
+  const numericValue = Number(value);
+  const range = max - min || 1;
+  const percentageValue = getPercentageFromRange({ value: numericValue, min, range });
+  const trendFormatOptions = {
+    useThousandSeparators: true,
+    useTrendUnits: true
+  };
+  if (usePercentageValue) {
+    const percentageDecimalPlaces = getCappedDecimalPlaces(
+      percentageValue,
+      2,
+      MAX_VALUE_LABEL_DIGITS_WITH_PERCENT
+    );
+    return `${(0, numberUtils_exports.formatNumber)(percentageValue, percentageDecimalPlaces, trendFormatOptions)}%`;
+  }
+  const valueDecimalPlaces = getCappedDecimalPlaces(
+    numericValue,
+    getDecimalPlaces(numericValue),
+    MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT
+  );
+  return (0, numberUtils_exports.formatNumber)(numericValue, valueDecimalPlaces, trendFormatOptions);
+};
 
 // src/common/GaugeValueMarker.jsx
 var MARKER_THICKNESS = 15;
@@ -229,10 +299,7 @@ var ValueMarker = (_a) => {
       valueMarkerLabelFillColor,
       "aria-label": (0, format_exports.sprintf)((0, i18n_exports._)("Marker gauge value: %s"), value)
     },
-    usePercentageValue ? `${(value / (max - min) * 100).toFixed(2)}%` : (0, numberUtils_exports.formatNumber)(value, 0, {
-      useThousandSeparators: true,
-      useTrendUnits: true
-    })
+    formatGaugeValueLabel({ value, min, max, usePercentageValue })
   )));
 };
 ValueMarker.propTypes = {

package/common/GaugeValueMarker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/common/GaugeValueMarker.jsx", "esm-externals:react", "esm-externals:prop-types", "esm-externals:styled-components", "esm-externals:@splunk/visualizations-shared/numberUtils", "esm-externals:@splunk/ui-utils/format", "esm-externals:@splunk/ui-utils/i18n"],
-  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { formatNumber } from '@splunk/visualizations-shared/numberUtils';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nconst MARKER_THICKNESS = 15;\nconst MARKER_INNER_LENGTH = 30;\n\nconst MARKER_LABEL_WIDTH = 60;\nconst MARKER_LABEL_HEIGHT = 25;\nconst RADIUS = 2;\nconst DELTA_LENGTH = 12;\n\nconst ValueMarkerRect = styled.path`\n    stroke-width: 2px;\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabelRect = styled.rect`\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabel = styled.text`\n    fill: ${props => props.valueMarkerLabelFillColor};\n    font-size: 14px;\n    font-family:\n        Splunk Platform Sans,\n        sans-serif;\n    line-height: 16px;\n    text-anchor: middle;\n    text-align: center;\n    dominant-baseline: middle;\n`;\n\n/**\n * calculate the path of Value Marker shape\n * @method positionValueMarkerRect\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {String} input.orientation\n * @param {Number} input.valueMarkerRectLength\n * @return {String} d containing a series of path commands that define the path to be\n */\nexport const positionValueMarkerRect = ({\n    x,\n    y,\n    orientation,\n    valueMarkerRectLength,\n    alignCenter = false,\n}) => {\n    let hLength = MARKER_THICKNESS;\n    let vLength = valueMarkerRectLength;\n    let markerStartX = alignCenter ? x - MARKER_THICKNESS / 2 : x - MARKER_THICKNESS;\n    let markerStartY = y;\n\n    let innerHLength = hLength / 3;\n    let innerVLength = MARKER_INNER_LENGTH;\n    let innerStartX = markerStartX + innerHLength;\n    let innerStartY = markerStartY + 7;\n\n    if (orientation === 'vertical') {\n        hLength = valueMarkerRectLength;\n        vLength = MARKER_THICKNESS;\n        markerStartX = x;\n        markerStartY = alignCenter ? y - MARKER_THICKNESS / 2 : y;\n\n        innerHLength = MARKER_INNER_LENGTH;\n        innerVLength = vLength / 3;\n        innerStartX = markerStartX + 7;\n        innerStartY = markerStartY + innerVLength;\n    }\n\n    return (\n        `M${markerStartX},${markerStartY}h${hLength}a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${RADIUS}v${\n            vLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${RADIUS}h${-hLength}a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${-RADIUS}v${\n            2 * RADIUS - vLength\n        }a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${-RADIUS}z` +\n        `M${innerStartX},${innerStartY}v${\n            innerVLength - RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${RADIUS}h${\n            innerHLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${-RADIUS}v${\n            RADIUS - innerVLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${-RADIUS}h${\n            2 * RADIUS - innerHLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${RADIUS}z`\n    );\n};\n\n/**\n * calculate the position of value marker label\n * @method positionLabel\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {Number} input.length   gauge thickness\n * @param {String} input.orientation\n * @return {Object} positions\n * @return {Number} positions.labelRectX  x of value marker label rect\n * @return {Number} positions.labelRectY  y of value marker label rect\n * @return {Number} positions.labelX      x of value marker label text\n * @return {Number} positions.labelY      y of value marker label text\n */\nexport const positionLabel = ({ x, y, length, orientation, alignCenter = false }) => {\n    // for horizontal view\n    let labelRectX = alignCenter\n        ? x - MARKER_LABEL_WIDTH / 2\n        : x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;\n    let labelRectY = y + length;\n    if (orientation === 'vertical') {\n        labelRectX = x + length;\n        labelRectY = alignCenter\n            ? y - MARKER_LABEL_HEIGHT / 2\n            : y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;\n    }\n    const labelX = labelRectX + MARKER_LABEL_WIDTH / 2;\n    const labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;\n    return { labelRectX, labelRectY, labelX, labelY };\n};\n\nconst ValueMarker = ({ ...props }) => {\n    const {\n        x,\n        y,\n        length,\n        min = 0,\n        max = 100,\n        value,\n        orientation = 'horizontal',\n        showValue = true,\n        usePercentageValue = false,\n        valueMarkerFillColor,\n        valueMarkerLabelFillColor,\n        alignCenter = false,\n    } = props;\n\n    const valueMarkerRectLength = length + DELTA_LENGTH;\n    const { labelRectX, labelRectY, labelX, labelY } = positionLabel({\n        x,\n        y,\n        length,\n        orientation,\n        alignCenter,\n    });\n\n    return (\n        <g>\n            <ValueMarkerRect\n                data-test=\"value-marker-rect\"\n                d={positionValueMarkerRect({\n                    x,\n                    y,\n                    orientation,\n                    valueMarkerRectLength,\n                    alignCenter,\n                })}\n                valueMarkerFillColor={valueMarkerFillColor}\n            />\n            {showValue && (\n                <g>\n                    <ValueMarkerLabelRect\n                        data-test=\"value-marker-label-rect\"\n                        x={labelRectX}\n                        y={labelRectY}\n                        width={MARKER_LABEL_WIDTH}\n                        height={MARKER_LABEL_HEIGHT}\n                        rx={RADIUS}\n                        ry={RADIUS}\n                        valueMarkerFillColor={valueMarkerFillColor}\n                    />\n                    <ValueMarkerLabel\n                        data-test=\"value-marker-label\"\n                        x={labelX}\n                        y={labelY}\n                        valueMarkerLabelFillColor={valueMarkerLabelFillColor}\n                        aria-label={sprintf(_('Marker gauge value: %s'), value)}\n                    >\n                        {usePercentageValue\n                            ? `${((value / (max - min)) * 100).toFixed(2)}%`\n                            : formatNumber(value, 0, {\n                                  useThousandSeparators: true,\n                                  useTrendUnits: true,\n                              })}\n                    </ValueMarkerLabel>\n                </g>\n            )}\n        </g>\n    );\n};\n\nValueMarker.propTypes = {\n    x: T.number,\n    y: T.number,\n    length: T.number,\n    min: T.number,\n    max: T.number,\n    value: T.number,\n    orientation: T.string,\n    showValue: T.bool,\n    usePercentageValue: T.bool,\n    valueMarkerFillColor: T.string,\n    valueMarkerLabelFillColor: T.string,\n    alignCenter: T.bool,\n};\n\nexport default ValueMarker;\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 \"@splunk/visualizations-shared/numberUtils\";\nexport * from \"@splunk/visualizations-shared/numberUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\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"],
-  "mappings": "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",
-  "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
+  "sources": ["../src/common/GaugeValueMarker.jsx", "esm-externals:react", "esm-externals:prop-types", "esm-externals:styled-components", "esm-externals:@splunk/ui-utils/format", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:lodash", "esm-externals:@splunk/visualizations-shared/colorConstants", "esm-externals:@splunk/visualizations-shared/numberUtils", "../src/common/gaugeUtils.ts"],
+  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { sprintf } from '@splunk/ui-utils/format';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { formatGaugeValueLabel } from './gaugeUtils';\n\nconst MARKER_THICKNESS = 15;\nconst MARKER_INNER_LENGTH = 30;\n\nconst MARKER_LABEL_WIDTH = 60;\nconst MARKER_LABEL_HEIGHT = 25;\nconst RADIUS = 2;\nconst DELTA_LENGTH = 12;\n\nconst ValueMarkerRect = styled.path`\n    stroke-width: 2px;\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabelRect = styled.rect`\n    fill: ${props => props.valueMarkerFillColor};\n`;\n\nconst ValueMarkerLabel = styled.text`\n    fill: ${props => props.valueMarkerLabelFillColor};\n    font-size: 14px;\n    font-family:\n        Splunk Platform Sans,\n        sans-serif;\n    line-height: 16px;\n    text-anchor: middle;\n    text-align: center;\n    dominant-baseline: middle;\n`;\n\n/**\n * calculate the path of Value Marker shape\n * @method positionValueMarkerRect\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {String} input.orientation\n * @param {Number} input.valueMarkerRectLength\n * @return {String} d containing a series of path commands that define the path to be\n */\nexport const positionValueMarkerRect = ({\n    x,\n    y,\n    orientation,\n    valueMarkerRectLength,\n    alignCenter = false,\n}) => {\n    let hLength = MARKER_THICKNESS;\n    let vLength = valueMarkerRectLength;\n    let markerStartX = alignCenter ? x - MARKER_THICKNESS / 2 : x - MARKER_THICKNESS;\n    let markerStartY = y;\n\n    let innerHLength = hLength / 3;\n    let innerVLength = MARKER_INNER_LENGTH;\n    let innerStartX = markerStartX + innerHLength;\n    let innerStartY = markerStartY + 7;\n\n    if (orientation === 'vertical') {\n        hLength = valueMarkerRectLength;\n        vLength = MARKER_THICKNESS;\n        markerStartX = x;\n        markerStartY = alignCenter ? y - MARKER_THICKNESS / 2 : y;\n\n        innerHLength = MARKER_INNER_LENGTH;\n        innerVLength = vLength / 3;\n        innerStartX = markerStartX + 7;\n        innerStartY = markerStartY + innerVLength;\n    }\n\n    return (\n        `M${markerStartX},${markerStartY}h${hLength}a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${RADIUS}v${\n            vLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${RADIUS}h${-hLength}a${RADIUS},${RADIUS} 0 0 1 ${-RADIUS},${-RADIUS}v${\n            2 * RADIUS - vLength\n        }a${RADIUS},${RADIUS} 0 0 1 ${RADIUS},${-RADIUS}z` +\n        `M${innerStartX},${innerStartY}v${\n            innerVLength - RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${RADIUS}h${\n            innerHLength - 2 * RADIUS\n        }a${RADIUS},${RADIUS} 0 0 0 ${RADIUS},${-RADIUS}v${\n            RADIUS - innerVLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${-RADIUS}h${\n            2 * RADIUS - innerHLength\n        }a${RADIUS},${RADIUS} 0 0 0 ${-RADIUS},${RADIUS}z`\n    );\n};\n\n/**\n * calculate the position of value marker label\n * @method positionLabel\n * @param {Object} input\n * @param {Number} input.x\n * @param {Number} input.y\n * @param {Number} input.length   gauge thickness\n * @param {String} input.orientation\n * @return {Object} positions\n * @return {Number} positions.labelRectX  x of value marker label rect\n * @return {Number} positions.labelRectY  y of value marker label rect\n * @return {Number} positions.labelX      x of value marker label text\n * @return {Number} positions.labelY      y of value marker label text\n */\nexport const positionLabel = ({ x, y, length, orientation, alignCenter = false }) => {\n    // for horizontal view\n    let labelRectX = alignCenter\n        ? x - MARKER_LABEL_WIDTH / 2\n        : x - MARKER_THICKNESS / 2 - MARKER_LABEL_WIDTH / 2;\n    let labelRectY = y + length;\n    if (orientation === 'vertical') {\n        labelRectX = x + length;\n        labelRectY = alignCenter\n            ? y - MARKER_LABEL_HEIGHT / 2\n            : y - (MARKER_LABEL_HEIGHT - MARKER_THICKNESS) / 2;\n    }\n    const labelX = labelRectX + MARKER_LABEL_WIDTH / 2;\n    const labelY = labelRectY + MARKER_LABEL_HEIGHT / 2;\n    return { labelRectX, labelRectY, labelX, labelY };\n};\n\nconst ValueMarker = ({ ...props }) => {\n    const {\n        x,\n        y,\n        length,\n        min = 0,\n        max = 100,\n        value,\n        orientation = 'horizontal',\n        showValue = true,\n        usePercentageValue = false,\n        valueMarkerFillColor,\n        valueMarkerLabelFillColor,\n        alignCenter = false,\n    } = props;\n\n    const valueMarkerRectLength = length + DELTA_LENGTH;\n    const { labelRectX, labelRectY, labelX, labelY } = positionLabel({\n        x,\n        y,\n        length,\n        orientation,\n        alignCenter,\n    });\n\n    return (\n        <g>\n            <ValueMarkerRect\n                data-test=\"value-marker-rect\"\n                d={positionValueMarkerRect({\n                    x,\n                    y,\n                    orientation,\n                    valueMarkerRectLength,\n                    alignCenter,\n                })}\n                valueMarkerFillColor={valueMarkerFillColor}\n            />\n            {showValue && (\n                <g>\n                    <ValueMarkerLabelRect\n                        data-test=\"value-marker-label-rect\"\n                        x={labelRectX}\n                        y={labelRectY}\n                        width={MARKER_LABEL_WIDTH}\n                        height={MARKER_LABEL_HEIGHT}\n                        rx={RADIUS}\n                        ry={RADIUS}\n                        valueMarkerFillColor={valueMarkerFillColor}\n                    />\n                    <ValueMarkerLabel\n                        data-test=\"value-marker-label\"\n                        x={labelX}\n                        y={labelY}\n                        valueMarkerLabelFillColor={valueMarkerLabelFillColor}\n                        aria-label={sprintf(_('Marker gauge value: %s'), value)}\n                    >\n                        {formatGaugeValueLabel({ value, min, max, usePercentageValue })}\n                    </ValueMarkerLabel>\n                </g>\n            )}\n        </g>\n    );\n};\n\nValueMarker.propTypes = {\n    x: T.number,\n    y: T.number,\n    length: T.number,\n    min: T.number,\n    max: T.number,\n    value: T.number,\n    orientation: T.string,\n    showValue: T.bool,\n    usePercentageValue: T.bool,\n    valueMarkerFillColor: T.string,\n    valueMarkerLabelFillColor: T.string,\n    alignCenter: T.bool,\n};\n\nexport default ValueMarker;\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 \"@splunk/ui-utils/format\";\nexport * from \"@splunk/ui-utils/format\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\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", "\nimport * as defaultImport from \"@splunk/visualizations-shared/numberUtils\";\nexport * from \"@splunk/visualizations-shared/numberUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { chain, mapKeys, omit, uniqBy } from 'lodash';\nimport {\n    SEMANTIC_SUCCESS,\n    SEMANTIC_WARNING,\n    SEMANTIC_ERROR,\n} from '@splunk/visualizations-shared/colorConstants';\nimport { formatNumber } from '@splunk/visualizations-shared/numberUtils';\nimport { _ } from '@splunk/ui-utils/i18n';\n\nexport const GAUGE_THICKNESS = 50;\nexport const FILL_THICKNESS = 38;\nconst GRADIENT_STOP_OFFSET_MIN = 0;\nconst GRADIENT_STOP_OFFSET_MAX = 100;\nconst DEFAULT_NUM_OF_TICKS = 5;\nconst MAX_TICK_LABEL_DECIMAL_PLACES = 5;\nconst MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT = 6;\nconst MAX_VALUE_LABEL_DIGITS_WITH_PERCENT = 5;\n\n/**\n * get width for the whole gauge viz for horizontal or vertical view\n * @method getGaugeWidth\n * @param {Object} input\n * @param {Number} containerWidth\n * @param {String} orientation\n * @return {Number} width\n */\nexport const getGaugeWidth = ({ containerWidth, orientation }) =>\n    orientation === 'vertical' ? GAUGE_THICKNESS : containerWidth * 0.8;\n\n/**\n * get height for the whole gauge viz for horizontal or vertical view\n * @method getGaugeHeight\n * @param {Object} input\n * @param {Number} containerHeight\n * @param {String} orientation\n * @return {Number} height\n */\nexport const getGaugeHeight = ({ containerHeight, orientation }) =>\n    orientation === 'vertical' ? containerHeight * 0.8 : GAUGE_THICKNESS;\n\n/**\n * get how long the gauge shoud be.\n * In horizontal view, gauge length equals to gauge width. In vertical view, it equals to gauge height.\n * @method getGaugeLength\n * @param {Object} input\n * @param {Number} input.containerWidth\n * @param {Number} input.containerHeight\n * @param {String} input.orientation\n * @return {Number} gaugeLength\n */\nexport const getGaugeLength = ({ containerWidth, containerHeight, orientation }) =>\n    orientation === 'vertical'\n        ? getGaugeHeight({ containerHeight, orientation })\n        : getGaugeWidth({ containerWidth, orientation });\n\n/**\n * get start x and y for rendering gauge\n * @method getGaugeStartPosition\n * @param {Object} input\n * @param {Number} containerWidth\n * @param {Number} containerHeight\n * @param {Number} gaugeLength\n * @param {String} orientation\n * @return {Object} position\n * @return {Number} position.gaugeStartX\n * @return {Number} position.gaugeStartY\n */\nexport const getGaugeStartPosition = ({ containerWidth, containerHeight, gaugeLength, orientation }) => {\n    // for horizontal view\n    let gaugeStartX = (containerWidth - gaugeLength) / 2.0;\n    let gaugeStartY = (containerHeight - GAUGE_THICKNESS) / 2.0;\n\n    if (orientation === 'vertical') {\n        gaugeStartX = (containerWidth - GAUGE_THICKNESS) / 2.0;\n        gaugeStartY = (containerHeight - gaugeLength) / 2.0;\n    }\n\n    return { gaugeStartX, gaugeStartY };\n};\n\n/**\n * get dimensions for the whole gauge viz,\n * which can be useful to calculate background bar and major ticks positions.\n * @method getGaugeDimensions\n * @param {Object} input\n * @param {Number} input.containerWidth\n * @param {Number} input.containerHeight\n * @param {String} input.orientation  'horizontal' or 'vertical'\n * @return {Object} gaugeDimensions\n * @return {Number} gaugeDimensions.gaugeLength  how long the gauge shoud be in horizontal or vertical orientation.\n * @return {Number} gaugeDimensions.gaugeStartX  start x to render gauge\n * @return {Number} gaugeDimensions.gaugeStartY  start y to render gauge\n * @return {Number} gaugeDimensions.gaugeWidth   natural width of gauge\n * @return {Number} gaugeDimensions.gaugeHeight  natural height of gauge\n */\nexport const getGaugeDimensions = ({ containerWidth, containerHeight, orientation }) => {\n    const gaugeLength = getGaugeLength({\n        containerWidth,\n        containerHeight,\n        orientation,\n    });\n    const { gaugeStartX, gaugeStartY } = getGaugeStartPosition({\n        containerWidth,\n        containerHeight,\n        gaugeLength,\n        orientation,\n    });\n    const gaugeWidth = getGaugeWidth({ containerWidth, orientation });\n    const gaugeHeight = getGaugeHeight({ containerHeight, orientation });\n\n    return {\n        gaugeLength,\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n    };\n};\n\n/**\n * if gaugeColor is not specified, auto assign a gauge color to the fill bar\n * based on how much percentage the value is taken between min and max\n * @method assignGaugeColor\n * @params\n * */\nexport const assignGaugeColor = ({ value, min, max }) => {\n    const rate = (value - min) / (max - min);\n\n    if (rate <= 0.3) {\n        return SEMANTIC_SUCCESS;\n    }\n    if (rate > 0.3 && rate <= 0.6) {\n        return SEMANTIC_WARNING;\n    }\n\n    return SEMANTIC_ERROR;\n};\n\n/**\n * get inner bar length in gauge\n * @method getGaugeBarLength\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.value\n * @param {Number} input.min\n * @param {Number} input.max\n * @return {Number} gaugeBarLength\n */\nexport const getGaugeBarLength = ({ gaugeLength, value, min, max }) => {\n    if (max < min) {\n        return null;\n    }\n\n    if (value >= max) {\n        return gaugeLength;\n    }\n\n    if (value < min) {\n        return 0;\n    }\n\n    return (gaugeLength * (value - min)) / (max - min);\n};\n\n/**\n * get x and y position for rendering inner bar in gauge\n * @method getGaugeBarStartPositions\n * @param {Object} input\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth\n * @param {Number} input.gaugeHeight\n * @param {Number} input.gaugeBarLength\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.gaugeBarX\n * @return {Number} position.gaugeBarY\n */\nexport const getGaugeBarStartPositions = ({\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    gaugeBarLength,\n    orientation,\n}) => {\n    let gaugeBarX = gaugeStartX;\n    let gaugeBarY = gaugeStartY;\n\n    if (orientation === 'vertical') {\n        gaugeBarX += (gaugeWidth - FILL_THICKNESS) / 2;\n        gaugeBarY += gaugeHeight - gaugeBarLength;\n    } else {\n        gaugeBarY += (gaugeHeight - FILL_THICKNESS) / 2;\n    }\n\n    return {\n        gaugeBarX,\n        gaugeBarY,\n    };\n};\n\n/**\n * get width of inner bar in gauge\n * @method getGaugeBarWidth\n * @param {Object} input\n * @param {Number} input.gaugeBarLength\n * @param {String} orientation\n * @return {Number} gaugeBarWidth\n */\nexport const getGaugeBarWidth = ({ gaugeBarLength, orientation }) =>\n    orientation === 'vertical' ? FILL_THICKNESS : gaugeBarLength;\n\n/**\n * get height of inner bar in gauge\n * @method getGaugeBarWidth\n * @param {Object} input\n * @param {Number} input.gaugeBarLength\n * @param {String} orientation\n * @return {Number} gaugeBarHeight\n */\nexport const getGaugeBarHeight = ({ gaugeBarLength, orientation }) =>\n    orientation === 'vertical' ? gaugeBarLength : FILL_THICKNESS;\n\n/**\n * get dimensions for the fill bar in the gauge\n * @method getFillBarDimensions\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth,\n * @param {Number} input.gaugeHeight,\n * @param {Number} input.value,\n * @param {Number} input.min,\n * @param {Number} input.max,\n * @param {String} input.orientation\n * @return {Object} fillBarDimensions\n * @return {Number} fillBarDimensions.fillBarLength\n * @return {Number} fillBarDimensions.fillBarX\n * @return {Number} fillBarDimensions.fillBarY\n * @return {Number} fillBarDimensions.fillBarWidth\n * @return {Number} fillBarDimensions.fillBarHeight\n */\nexport const getFillBarDimensions = ({\n    gaugeLength,\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    value,\n    min,\n    max,\n    orientation,\n}) => {\n    const gaugeBarLength = getGaugeBarLength({ gaugeLength, value, max, min });\n    const { gaugeBarX: fillBarX, gaugeBarY: fillBarY } = getGaugeBarStartPositions({\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n        gaugeBarLength,\n        orientation,\n    });\n    const fillBarWidth = getGaugeBarWidth({ gaugeBarLength, orientation });\n    const fillBarHeight = getGaugeBarHeight({ gaugeBarLength, orientation });\n\n    return {\n        fillBarLength: gaugeBarLength,\n        fillBarX,\n        fillBarY,\n        fillBarWidth,\n        fillBarHeight,\n    };\n};\n\n/**\n * get position x and y for value marker in filler gauge\n * @method getFillerGaugeValueMarkerPositions\n * @param {Object} input\n * @param {Number} input.fillBarX\n * @param {Number} input.fillBarY\n * @param {Number} input.fillBarLength\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.valueMarkerX\n * @return {Number} position.valueMarkerY\n */\nexport const getFillerGaugeValueMarkerPositions = ({ fillBarX, fillBarY, fillBarLength, orientation }) => {\n    let valueMarkerX = fillBarX;\n    let valueMarkerY = fillBarY;\n\n    if (orientation === 'vertical') {\n        valueMarkerX -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    } else {\n        valueMarkerX += fillBarLength;\n        valueMarkerY -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    }\n\n    return {\n        valueMarkerX,\n        valueMarkerY,\n    };\n};\n\n/**\n * get dimensions for the marker bar in the gauge\n * @method getMarkerBarDimensions\n * @param {Object} input\n * @param {Number} input.gaugeLength\n * @param {Number} input.gaugeStartX\n * @param {Number} input.gaugeStartY\n * @param {Number} input.gaugeWidth,\n * @param {Number} input.gaugeHeight,\n * @param {String} input.orientation\n * @return {Object} markerBarDimensions\n * @return {Number} markerBarDimensions.markerBarLength\n * @return {Number} markerBarDimensions.markerBarX\n * @return {Number} markerBarDimensions.markerBarY\n * @return {Number} markerBarDimensions.markerBarWidth\n * @return {Number} markerBarDimensions.markerBarHeight\n */\nexport const getMarkerBarDimensions = ({\n    gaugeLength,\n    gaugeStartX,\n    gaugeStartY,\n    gaugeWidth,\n    gaugeHeight,\n    orientation,\n}) => {\n    const gaugeBarLength = gaugeLength; // For marker gauge, inner marker bar spans the entire gauge\n    const { gaugeBarX: markerBarX, gaugeBarY: markerBarY } = getGaugeBarStartPositions({\n        gaugeStartX,\n        gaugeStartY,\n        gaugeWidth,\n        gaugeHeight,\n        gaugeBarLength,\n        orientation,\n    });\n    const markerBarWidth = getGaugeBarWidth({ gaugeBarLength, orientation });\n    const markerBarHeight = getGaugeBarHeight({ gaugeBarLength, orientation });\n\n    return {\n        markerBarLength: gaugeBarLength,\n        markerBarX,\n        markerBarY,\n        markerBarWidth,\n        markerBarHeight,\n    };\n};\n\n/**\n * get position x and y for value marker in marker gauge\n * @method getMarkerGaugeValueMarkerPositions\n * @param {Object} input\n * @param {Number} input.markerBarX\n * @param {Number} input.markerBarY\n * @param {Number} input.markerBarHeight\n * @param {Number} input.markerBarLength\n * @param {Number} input.value\n * @param {Number} input.min\n * @param {Number} input.max\n * @param {String} input.orientation\n * @return {Object} position\n * @return {Number} position.valueMarkerX\n * @return {Number} position.valueMarkerY\n */\nexport const getMarkerGaugeValueMarkerPositions = ({\n    markerBarX,\n    markerBarY,\n    markerBarHeight,\n    markerBarLength: gaugeLength,\n    orientation,\n    value,\n    min,\n    max,\n}) => {\n    let valueMarkerX = markerBarX;\n    let valueMarkerY = markerBarY;\n    if (orientation === 'vertical') {\n        valueMarkerY += markerBarHeight - getGaugeBarLength({ gaugeLength, value, max, min });\n        valueMarkerX -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    } else {\n        valueMarkerX += getGaugeBarLength({ gaugeLength, value, max, min });\n        valueMarkerY -= (GAUGE_THICKNESS - FILL_THICKNESS) / 4;\n    }\n\n    return {\n        valueMarkerX,\n        valueMarkerY,\n    };\n};\n\n/**\n * sort the ranges in ascending order\n * @method getSortedRanges\n * @param {Array} ranges\n * @return {Array} sortedRanges\n */\nexport const getSortedRanges = ranges => ranges.sort((a, b) => a.from - b.from);\n\n/**\n * validate whether ranges prop is valid - continuous ranges, range.to < range.from, range.from != range.to\n * @method validateRanges\n * @param {Array} ranges\n * @return {String} error\n */\nexport const validateRanges = ranges => {\n    if (!ranges.length) {\n        return _('Prop \"ranges\" is missing entries');\n    }\n\n    // check whether a range has \"from\" >= \"to\" eg: 10 - 10, 100 - 10, -20 - -10 are invalid\n    if (ranges.some(range => range.from >= range.to)) {\n        return _('Prop \"ranges\" has invalid entries: invalid range');\n    }\n\n    // check whether ranges have duplicate \"from/to\" eg: 0 - 50, 25 - 50\n    if (ranges.length !== uniqBy(ranges, 'to').length || ranges.length !== uniqBy(ranges, 'from').length) {\n        return _('Prop \"ranges\" has invalid entries: duplicate values');\n    }\n\n    const sortedRanges = getSortedRanges(ranges);\n\n    // check whether ranges are continuous eg: 0 - 10, 10 - 20, 20 - 30\n    for (let i = 1; i < sortedRanges.length; i += 1) {\n        if (sortedRanges[i].from !== sortedRanges[i - 1].to) {\n            return _('Prop \"ranges\" has invalid entries: discontinuous ranges');\n        }\n    }\n\n    return null;\n};\n\n/**\n * calculate min and max value of gauge\n * @method getGaugeRange\n * @param {Array} ranges\n * @return {Object} gaugeRange\n * @return {Number} gaugeRange.min\n * @return {Number} gaugeRange.max\n */\nexport const getGaugeRange = ranges => {\n    const min = Math.min(...ranges.map(range => range.from));\n    const max = Math.max(...ranges.map(range => range.to));\n    return { min, max };\n};\n\n/**\n * calculate stop offsets for linear gradient\n * @method getGradientStopOffsets\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} cumulativeOffsets\n */\nexport const getGradientStopOffsets = ({ ranges, orientation }) => {\n    const { min, max } = getGaugeRange(ranges);\n    const offsetScale = (GRADIENT_STOP_OFFSET_MAX - GRADIENT_STOP_OFFSET_MIN) / (max - min);\n    let offsets = ranges.map(range => Math.abs(range.from - range.to) * offsetScale);\n    // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed\n    offsets = orientation === 'vertical' ? offsets.reverse() : offsets;\n    const cumulativeOffsets = [];\n    offsets.reduce((accumulator, currentValue, idx) => {\n        cumulativeOffsets[idx] = accumulator + currentValue;\n        return cumulativeOffsets[idx];\n    }, 0);\n    return cumulativeOffsets;\n};\n\n/**\n * calculate stop colors for linear gradient\n * @method getGradientStopColors\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} stopColors\n */\nexport const getGradientStopColors = ({ ranges, orientation }) => {\n    const stopColors = ranges.map(range => range.value);\n    // When orientation is vertical, since the gauge starts from bottom to top, linear gradient should be reversed\n    return orientation === 'vertical' ? stopColors.reverse() : stopColors;\n};\n\n/**\n * calculate linear gradient stops from ranges\n * @method getGradientStops\n * @param {Object} input\n * @param {Array} ranges\n * @param {String} orientation\n * @return {Array} stops\n */\nexport const getGradientStops = ({ ranges, orientation }) => {\n    const stops = [];\n    const offsets = getGradientStopOffsets({ ranges, orientation });\n    const stopColors = getGradientStopColors({ ranges, orientation });\n    // Initialize stops with the first color stop\n    stops.push({ offset: `${offsets[0]}%`, stopColor: stopColors[0] });\n    // Add the remaining color stops with gradient change at each stop\n    for (let i = 1; i < ranges.length; i += 1) {\n        stops.push({ offset: `${offsets[i - 1]}%`, stopColor: stopColors[i] });\n        stops.push({ offset: `${offsets[i]}%`, stopColor: stopColors[i] });\n    }\n    return stops;\n};\n\n/**\n * calculate linear gradient dimensions\n * @method getGradientDimensions\n * @param {String} orientation\n * @return {Object} dimensions\n * @return {String} dimensions.x1\n * @return {String} dimensions.y1\n * @return {String} dimensions.x2\n * @return {String} dimensions.y2\n */\nexport const getGradientDimensions = orientation => {\n    const x1 = '0%';\n    const y1 = '0%';\n    const x2 = orientation === 'horizontal' ? '100%' : '0%';\n    const y2 = orientation === 'horizontal' ? '0%' : '100%';\n    return { x1, y1, x2, y2 };\n};\n\ntype NumericInput = number | string;\n\ninterface UniqueDecimalPlacesInput {\n    values: number[];\n    minimumDecimalPlaces: number;\n}\n\ninterface PercentageFromRangeInput {\n    value: number;\n    min: number;\n    range: number;\n}\n\ninterface NumOfTicksInput {\n    min: number;\n    max: number;\n    majorUnit: number | string;\n    usePercentageRange: boolean;\n}\n\ninterface TickLabelFormatterResult {\n    numOfTicks: number;\n    numericStep: number;\n    formatTickLabel: (value: number) => string;\n}\n\ninterface FormatGaugeValueLabelInput {\n    value: NumericInput;\n    min: number;\n    max: number;\n    usePercentageValue: boolean;\n}\n\n// Returns the number of fractional digits in a numeric input.\nexport const getDecimalPlaces = (value: NumericInput): number => {\n    const numericValue = Number(value);\n    if (!Number.isFinite(numericValue)) {\n        return 0;\n    }\n\n    const fractionPart = numericValue.toString().split('.')[1];\n    return fractionPart ? fractionPart.length : 0;\n};\n\n// Finds the smallest precision that keeps all rounded tick values unique.\n// This avoids duplicated rendered labels caused by rounding collisions.\nexport const getUniqueDecimalPlaces = ({\n    values,\n    minimumDecimalPlaces,\n}: UniqueDecimalPlacesInput): number => {\n    if (values.length <= 1) {\n        return minimumDecimalPlaces;\n    }\n\n    for (\n        let decimalPlaces = minimumDecimalPlaces;\n        decimalPlaces <= MAX_TICK_LABEL_DECIMAL_PLACES;\n        decimalPlaces += 1\n    ) {\n        const roundedValues = values.map(value => Number(value.toFixed(decimalPlaces)));\n        if (new Set(roundedValues).size === roundedValues.length) {\n            return decimalPlaces;\n        }\n    }\n\n    return MAX_TICK_LABEL_DECIMAL_PLACES;\n};\n\n// Converts a value within [min, max] to percentage space.\nexport const getPercentageFromRange = ({ value, min, range }: PercentageFromRangeInput): number => {\n    if (range === 0) {\n        return 0;\n    }\n    return ((value - min) / range) * 100;\n};\n\n// Computes interval count from auto mode or explicit majorUnit.\nexport const getNumOfTicks = ({\n    min,\n    max,\n    majorUnit,\n    usePercentageRange,\n}: NumOfTicksInput): { numOfTicks: number; isAutoMajorUnit: boolean; majorUnitNumber: number } => {\n    const range = max - min;\n    const majorUnitNumber = Number(majorUnit);\n    const isAutoMajorUnit = majorUnit === 'auto' || Number.isNaN(majorUnitNumber) || majorUnitNumber <= 0;\n\n    let numOfTicks = DEFAULT_NUM_OF_TICKS;\n    if (!isAutoMajorUnit) {\n        numOfTicks = usePercentageRange ? 100 / majorUnitNumber : range / majorUnitNumber;\n    }\n\n    return { numOfTicks, isAutoMajorUnit, majorUnitNumber };\n};\n\n// Builds a reusable formatter and step size for major tick rendering.\nexport const getTickLabelFormatter = ({\n    min,\n    max,\n    majorUnit,\n    usePercentageRange,\n}: NumOfTicksInput): TickLabelFormatterResult => {\n    const range = max - min;\n    const { numOfTicks, isAutoMajorUnit, majorUnitNumber } = getNumOfTicks({\n        min,\n        max,\n        majorUnit,\n        usePercentageRange,\n    });\n    const numericStep = range / numOfTicks;\n    const tickValues = [];\n\n    // Materialize all candidate tick values (plus max for uneven divisions).\n    for (let i = 0; i <= numOfTicks; i += 1) {\n        tickValues.push(min + numericStep * i);\n    }\n\n    if (!Number.isInteger(numOfTicks)) {\n        tickValues.push(max);\n    }\n\n    const minimumNumericDecimalPlaces = Math.min(\n        MAX_TICK_LABEL_DECIMAL_PLACES,\n        Math.max(\n            getDecimalPlaces(min),\n            getDecimalPlaces(max),\n            isAutoMajorUnit ? 0 : getDecimalPlaces(majorUnitNumber)\n        )\n    );\n    const numericLabelDecimalPlaces = getUniqueDecimalPlaces({\n        values: tickValues,\n        minimumDecimalPlaces: minimumNumericDecimalPlaces,\n    });\n    const percentageLabelDecimalPlaces = getUniqueDecimalPlaces({\n        values: tickValues.map(value => getPercentageFromRange({ value, min, range })),\n        minimumDecimalPlaces: 0,\n    });\n\n    // Keep fixed-width decimal formatting when decimals are needed; otherwise use trend formatting.\n    const formatTickLabel = value => {\n        if (usePercentageRange) {\n            const percentageValue = getPercentageFromRange({ value, min, range });\n            return `${percentageValue.toFixed(percentageLabelDecimalPlaces)}%`;\n        }\n\n        const numericLabel = value.toFixed(numericLabelDecimalPlaces);\n        if (numericLabel.includes('.')) {\n            return numericLabel;\n        }\n\n        return formatNumber(Number(numericLabel), 0, {\n            useThousandSeparators: true,\n            useTrendUnits: true,\n        }).replace(/k$/, 'K');\n    };\n\n    return { numOfTicks, numericStep, formatTickLabel };\n};\n\n// Limits decimal places so displayed value length stays within a fixed digit budget.\nconst getDigitsBeforeDecimal = (numericValue: NumericInput): number =>\n    Math.abs(Math.trunc(Number(numericValue))).toString().length;\n\nconst getCappedDecimalPlaces = (\n    numericValue: NumericInput,\n    rawDecimalPlaces: number,\n    maxDigits: number\n): number => {\n    const digitsBeforeDecimal = getDigitsBeforeDecimal(numericValue);\n    const maxDecimalPlaces = Math.max(0, maxDigits - digitsBeforeDecimal);\n    return Math.min(rawDecimalPlaces, maxDecimalPlaces);\n};\n\n// Formats the marker value label in number or percentage mode with capped precision.\nexport const formatGaugeValueLabel = ({\n    value,\n    min,\n    max,\n    usePercentageValue,\n}: FormatGaugeValueLabelInput): string => {\n    const numericValue = Number(value);\n    const range = max - min || 1;\n    const percentageValue = getPercentageFromRange({ value: numericValue, min, range });\n    const trendFormatOptions = {\n        useThousandSeparators: true,\n        useTrendUnits: true,\n    };\n\n    if (usePercentageValue) {\n        // Use the same number-mode formatting behavior (including K/M/B/T) for percentages.\n        const percentageDecimalPlaces = getCappedDecimalPlaces(\n            percentageValue,\n            2,\n            MAX_VALUE_LABEL_DIGITS_WITH_PERCENT\n        );\n        return `${formatNumber(percentageValue, percentageDecimalPlaces, trendFormatOptions)}%`;\n    }\n\n    const valueDecimalPlaces = getCappedDecimalPlaces(\n        numericValue,\n        getDecimalPlaces(numericValue),\n        MAX_VALUE_LABEL_DIGITS_WITHOUT_PERCENT\n    );\n    return formatNumber(numericValue, valueDecimalPlaces, trendFormatOptions);\n};\n\ninterface GaugeOptions {\n    [key: string]: any;\n}\n\n// map for new options names to old option names\nconst gaugeOptionsMapping = {\n    majorTickInterval: 'majorUnit',\n    gaugeRanges: 'ranges',\n};\n\n/**\n * Helper method to update the option names which can be mapped to pure component options\n * @method mapToOldKey\n * @param {Object} options\n * @returns {Object}\n */\nexport const mapToOldKey = (options: GaugeOptions): GaugeOptions =>\n    mapKeys(options, (val, key) => (gaugeOptionsMapping[key] ? gaugeOptionsMapping[key] : key));\n\ntype LabelOrValue = 'label' | 'value';\n\n/**\n * Helper method to map labelDisplay and valueDisplay options to pure component option names\n * @method mapToOldKey\n * @param {string} labelOrValue\n * @param {Object} options\n * @returns {Object}\n */\nexport const mapValueLabelDisplay = (labelOrValue: LabelOrValue, options: GaugeOptions): GaugeOptions => {\n    const rangeOrValue: string = labelOrValue === 'value' ? 'Value' : 'Range';\n    const showKey: string = labelOrValue === 'value' ? 'showValue' : 'showLabels';\n    const percentKey = `usePercentage${rangeOrValue}`;\n    const optionString = `${labelOrValue}Display`;\n    const newOptions = { ...options };\n    if (newOptions[optionString]) {\n        if (newOptions[optionString] === 'number') {\n            newOptions[showKey] = true;\n            newOptions[percentKey] = false;\n        } else if (newOptions[optionString] === 'percentage') {\n            newOptions[showKey] = true;\n            newOptions[percentKey] = true;\n        } else {\n            newOptions[showKey] = false;\n            newOptions[percentKey] = false;\n        }\n    }\n    return omit(newOptions, [optionString]);\n};\n\n/**\n * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that pure component accepts\n * This is for options that has new key name and can not directly be mapped with pure component props\n * @method convertToGaugeProperties\n * @param {Object} originalOptions\n * @returns {Object}\n */\nexport const convertToGaugeProperties = (originalOptions: GaugeOptions): GaugeOptions =>\n    chain(mapToOldKey(originalOptions))\n        .thru(options => mapValueLabelDisplay('label', options))\n        .thru(options => mapValueLabelDisplay('value', options))\n        .value();\n"],
+  "mappings": "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",
+  "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/common/OptionsDoc.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/common/OptionsDoc.jsx", "esm-externals:react", "esm-externals:prop-types", "esm-externals:lodash/isEmpty", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/react-ui/Heading", "esm-externals:@splunk/react-ui/Markdown", "esm-externals:styled-components", "esm-externals:lodash", "esm-externals:@splunk/visualizations-shared/configUtils", "../.storybook/utils/storybookUtils.ts"],
-  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Heading from '@splunk/react-ui/Heading';\nimport Markdown from '@splunk/react-ui/Markdown';\nimport styled from 'styled-components';\nimport { merge } from 'lodash';\nimport { getOptionDisplayType, getPatternOptions } from '../../.storybook/utils/storybookUtils';\n\nconst Option = styled.div`\n    margin-top: 20px;\n`;\nconst OptionName = styled.div`\n    color: #5ca300;\n    padding-bottom: 5px;\n`;\nconst PairContainer = styled.div`\n    margin-left: 40px;\n    margin-top: 10px;\n`;\nconst PairTitle = styled.span`\n    display: inline-block;\n    color: #8293a7;\n    width: 80px;\n`;\n\nconst PairValue = styled.span`\n    font-family: 'Splunk Platform Mono', monospace;\n    white-space: pre;\n`;\n\nconst PairValueJSON = styled.div`\n    margin-left: 80px;\n    pre {\n        margin: 0;\n    }\n    code {\n        font-size: 12px;\n        font-family: 'Splunk Platform Mono', monospace;\n    }\n`;\n\nconst PropertiesWrapper = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 0 : 40)}px;\n    margin-top: 20px;\n`;\n\nconst PropertiesContainer = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 40 : 0)}px;\n    margin-top: 10px;\n`;\n\nconst PropertiesContent = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 40 : 0)}px;\n`;\n\n/**\n * @method isOneOfJsonSchema\n * @param {object} item\n * @returns {boolean}\n */\nconst isOneOfJsonSchema = item => item.oneOf && Array.isArray(item.oneOf);\n\n/**\n * get Or type as string\n * @method getOrType\n * @param {object} item\n * @param {string} res\n * @returns {string} res  eg: (string | number)\n */\nconst getOrType = item => {\n    let res = '';\n\n    if (isOneOfJsonSchema(item)) {\n        res = item.oneOf\n            .map(one => {\n                if (one.type !== 'array') {\n                    return one.type;\n                }\n                // eslint-disable-next-line no-use-before-define\n                return getArrayType(one, '');\n            })\n            .join(' | ');\n    } else if (Array.isArray(item.type)) {\n        if (isEmpty(item.default)) {\n            return item.type.join(' | ');\n        }\n\n        res = item.type.filter(itemType => itemType !== 'string').join(' | ');\n        res += ' | ';\n        res += `\"${item.default}\"`;\n    }\n\n    return res;\n};\n\n/**\n * get the array type as string\n * @method getArrayType\n * @param {object} item\n * @param {string} res\n * @returns {string} res  eg: arrayOf(arrayOf(string | number | arrayOf(string | number)))\n */\nconst getArrayType = (item, res = '') => {\n    if (item.type !== 'array') {\n        if (Array.isArray(item.type) || isOneOfJsonSchema(item)) {\n            return getOrType(item);\n        }\n\n        return item.type;\n    }\n\n    if (item.type === 'array') {\n        res += 'arrayOf('; // eslint-disable-line no-param-reassign\n    }\n    res += getArrayType(item.items, ''); // eslint-disable-line no-param-reassign\n    res += ')'; // eslint-disable-line no-param-reassign\n    return res;\n};\n\n/**\n * get the type of this option item\n * @method getType\n * @param {ojbect} item option item\n * @returns {string} type\n */\nexport const getType = item => {\n    if (isOneOfJsonSchema(item)) {\n        return `oneOf(${getOrType(item)})`;\n    }\n    if (item.enum && Array.isArray(item.enum)) {\n        const values =\n            !isEmpty(item.enum) && typeof item.enum[0] === 'string'\n                ? item.enum.map(v => `\"${v}\"`).join(', ')\n                : item.enum.join(', ');\n\n        return `oneOf([${values}])`;\n    }\n\n    if (Array.isArray(item.type)) {\n        return getOrType(item);\n    }\n\n    if (item.type === 'array') {\n        if ('items' in item) {\n            return `arrayOf(${getType(item.items)})`;\n        }\n        return 'array';\n    }\n    return item.type;\n};\n\n/**\n * get the default value as string\n * @method getDefaultValue\n * @param {object | boolean | number | string} defaultValue\n * @returns {string | object[]} default value\n */\nconst getDefaultValue = defaultValue => {\n    if (typeof defaultValue === 'boolean' || typeof defaultValue === 'number') {\n        return defaultValue.toString();\n    }\n    if (Array.isArray(defaultValue)) {\n        if (defaultValue.length > 1 && typeof defaultValue[0] === 'object') {\n            // return the array only if the defaultValue is an object array\n            return defaultValue;\n        }\n        const values = defaultValue.map(v => JSON.stringify(v)).join(', ');\n        return `[${values}]`;\n    }\n    return defaultValue;\n};\n\nconst Pair = ({ title, content }) => (\n    <PairContainer>\n        <PairTitle>{`${title}:`}</PairTitle>\n        {Array.isArray(content) ? (\n            <PairValueJSON>\n                <pre>\n                    <code>{JSON.stringify(content, null, 2)}</code>\n                </pre>\n            </PairValueJSON>\n        ) : (\n            <PairValue>{content}</PairValue>\n        )}\n    </PairContainer>\n);\n\nPair.propTypes = {\n    title: T.string,\n    content: T.oneOfType([T.string, T.arrayOf(T.object)]),\n};\n\nconst PropertyItems = ({ isPatternProperty = false, propsItems }) => (\n    <PropertiesContainer isPatternProperty={isPatternProperty}>\n        {isPatternProperty ? <PairTitle>{_('[fieldName]:')}</PairTitle> : null}\n        <PropertiesContent isPatternProperty={isPatternProperty}>{propsItems}</PropertiesContent>\n    </PropertiesContainer>\n);\n\nPropertyItems.propTypes = {\n    isPatternProperty: T.bool,\n    propsItems: T.array,\n};\n\nconst OptionItem = ({ name, type, desc, defaultValue, enumerable, PropertiesSection }) => (\n    <Option>\n        <OptionName>{name}</OptionName>\n        {desc ? <Markdown style={{ marginLeft: 40 }} text={desc} /> : null}\n        <Pair title={_('Type')} content={type} />\n        {enumerable?.length > 0 && (\n            <Pair\n                title={_('oneOf')}\n                content={`(${enumerable\n                    .map(\n                        entry =>\n                            `${typeof entry === 'string' ? '\"' : ''}${entry}${\n                                typeof entry === 'string' ? '\"' : ''\n                            }`\n                    )\n                    .join(' | ')})`}\n            />\n        )}\n        {defaultValue && <Pair title={_('Default')} content={defaultValue} />}\n        {PropertiesSection}\n    </Option>\n);\n\nOptionItem.propTypes = {\n    name: T.string,\n    type: T.string,\n    desc: T.string,\n    enumerable: T.arrayOf(T.oneOfType([T.string, T.number])),\n    defaultValue: T.oneOfType([T.string, T.arrayOf(T.object)]),\n    PropertiesSection: T.element,\n};\n\nOptionItem.default = {\n    PropertiesItem: null,\n};\n\nconst getPropertiesSection = (properties, patternProperties) => {\n    let allProperties = [];\n    let isPatternProperty = false;\n\n    // the properties either comes from property field of the option schema item\n    // or from the property field of each patternProperties of the option schema item\n    // can check table tableFormat and columnFormat as examples\n    if (!isEmpty(properties)) {\n        allProperties = [properties];\n    } else if (!isEmpty(patternProperties)) {\n        Object.keys(patternProperties).forEach(patternKey => {\n            const propsInPattern = patternProperties[patternKey].properties;\n            if (propsInPattern) {\n                allProperties.push(propsInPattern);\n            }\n        });\n\n        isPatternProperty = true;\n    }\n\n    if (allProperties.length) {\n        const allPropsItems = allProperties.map(props => {\n            const propsItems = Object.keys(props).map(pKey => {\n                const p = props[pKey];\n                let pType = p.anyOf?.[0]\n                    ? getOptionDisplayType({ ...p.anyOf?.[0], enum: p.enum })\n                    : getOptionDisplayType({ ...p, enum: p.enum });\n                const pDefault = getDefaultValue(p.default);\n\n                let pEnumerable;\n                // get nested oneOf property listing\n                if (typeof p.anyOf?.[0]?.pattern === 'string') {\n                    pEnumerable = getPatternOptions(p.anyOf[0].pattern);\n                } else if (p.anyOf?.[0]?.items?.enum?.length > 0) {\n                    // quick fix for nested `columnFormat` enumerables that replaces enums within brackets with raw JS types\n                    pType = pType.replace(/\\((.+?)\\)/g, 'string');\n                    pEnumerable = p.anyOf[0].items.enum;\n                } else if (p.anyOf?.[0]?.items?.items?.enum?.length > 0) {\n                    // quick fix for nested `tableFormat` enumerables that replaces enums within brackets with raw JS types\n                    pType = pType.replace(/\\((.+?)\\)/g, 'string');\n                    pEnumerable = p.anyOf[0].items.items.enum;\n                } else if (p.enum) {\n                    pEnumerable = p.enum;\n                }\n\n                // use the JS types (e.g. string, number) of the nested property if the nested property is an enumerable\n                if (pEnumerable?.length) {\n                    pType = p.anyOf?.[0]?.type !== 'array' ? p.anyOf?.[0]?.type : pType;\n                    if (Array.isArray(pType)) {\n                        pType = pType.join(' | ');\n                    }\n                }\n\n                return (\n                    <OptionItem\n                        key={pKey}\n                        name={pKey}\n                        type={pType}\n                        enumerable={pEnumerable}\n                        desc={p.description}\n                        defaultValue={pDefault}\n                    />\n                );\n            });\n            return (\n                <PropertyItems\n                    key={propsItems}\n                    isPatternProperty={isPatternProperty}\n                    propsItems={propsItems}\n                />\n            );\n        });\n\n        return <PropertiesWrapper isPatternProperty={isPatternProperty}>{allPropsItems}</PropertiesWrapper>;\n    }\n    return null;\n};\n\nconst OptionsDoc = ({ options, description, hiddenOptions = [] }) => (\n    <div>\n        {options.length === 0 ? (\n            <Heading level={4}> No Options</Heading>\n        ) : (\n            <Heading level={4}>Options</Heading>\n        )}\n        {description && <div>{description}</div>}\n        {Object.entries(options)\n            .filter(([key]) => !hiddenOptions.includes(key))\n            .map(([key, item]) => {\n                let type;\n                let enumerable = [];\n                let PropertiesSection = null;\n\n                // get oneOf property listing\n                if (typeof item.anyOf?.[0]?.pattern === 'string') {\n                    enumerable = getPatternOptions(item.anyOf[0].pattern);\n                } else if (item.anyOf?.[0]?.enum) {\n                    enumerable = item.anyOf?.[0]?.enum;\n                } else if (item.enum) {\n                    enumerable = item.enum;\n                }\n\n                // get the nested options inside {option}.items.anyof. e.g. 'layers' in Map\n                // eslint-disable-next-line no-unsafe-optional-chaining\n                if (item.anyOf?.[0]?.type === 'array' && 'anyOf' in item.anyOf?.[0]?.items) {\n                    type = getOptionDisplayType(item);\n                    const { patternProperties } = item;\n                    // merge the 3 objects together instead of showing the longest options in the array\n                    const option = item.anyOf?.[0]?.items?.anyOf;\n                    const mergedOptions = option.reduce((prev, next) => merge(prev, next), {});\n                    const { properties } = mergedOptions;\n                    PropertiesSection = getPropertiesSection(properties, patternProperties);\n                    return (\n                        <OptionItem\n                            key={key}\n                            name={key}\n                            type={type}\n                            enumerable={enumerable}\n                            desc={item.description}\n                            PropertiesSection={PropertiesSection}\n                        />\n                    );\n                }\n\n                if (item.type === 'object') {\n                    // get properties for object type\n                    type = item.type;\n                    const { properties } = item;\n                    const { patternProperties } = item;\n                    PropertiesSection = getPropertiesSection(properties, patternProperties);\n                } else if (enumerable?.length) {\n                    // use the JS types (e.g. string, number) of the property if the property is an enumerable\n                    type = item.anyOf?.[0]?.type;\n                    if (Array.isArray(type)) {\n                        type = type.join(' | ');\n                    }\n                } else {\n                    type = getOptionDisplayType({\n                        ...item.anyOf[0],\n                        enum: item.enum,\n                    });\n                }\n\n                return (\n                    <OptionItem\n                        key={key}\n                        name={key}\n                        // item.anyOf in the config.ts is a tuple which holds [{ type, pattern, items }, { type, pattern: DYNAMIC_OPTIONS_PATTERN }]\n                        type={type}\n                        enumerable={enumerable}\n                        desc={item.description}\n                        defaultValue={getDefaultValue(item.default)}\n                        PropertiesSection={PropertiesSection}\n                    />\n                );\n            })}\n    </div>\n);\n\nOptionsDoc.propTypes = {\n    options: T.object.isRequired,\n    description: T.string,\n    hiddenOptions: T.arrayOf(T.string),\n};\n\nexport default OptionsDoc;\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 \"lodash/isEmpty\";\nexport * from \"lodash/isEmpty\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Heading\";\nexport * from \"@splunk/react-ui/Heading\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Markdown\";\nexport * from \"@splunk/react-ui/Markdown\";\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/configUtils\";\nexport * from \"@splunk/visualizations-shared/configUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { get, omit, reduce, toNumber, isString } from 'lodash';\nimport type { OptionsSchema } from '@splunk/visualization-schemas';\nimport { isDynamicOption } from '@splunk/visualizations-shared/configUtils';\n\ninterface ArgTypeControl {\n    type: string;\n    options?: string[];\n    min?: number;\n    max?: number;\n}\n\nexport interface ArgTypeEntry {\n    description?: string;\n    control: ArgTypeControl;\n    name: string;\n    defaultValue?: any;\n    type: { required: boolean };\n    optionType: string;\n    table: {\n        type: { summary: string };\n        defaultValue?: { summary: any };\n        category?: string;\n        subcategory?: string;\n        disable?: boolean;\n    };\n}\n\nexport interface ArgTypes {\n    [key: string]: ArgTypeEntry;\n}\n\ntype StoriesList = RegExp | string[];\n\n/**\n * Returns type options from pattern\n * @example\n * // returns ['fixed', 'absolute', 'off']\n * getPatternOptions('\\$(\\w+:)?([^$|:]+?)(\\|[|\\w]+)?\\$|^fixed$|^absolute$|^off$')\n * @example\n * // returns []\n * getPatternOptions('^>.*')\n * @param {string} patternString - visualization option type pattern\n * @return {string[]} array of type options\n */\nexport const getPatternOptions = (patternString): string[] => {\n    if (patternString.indexOf('^#[') === 0) {\n        return patternString.slice(1).replace(/\\$/g, '').split('|^');\n    }\n    return patternString.replace(/\\$/g, '').split('|^').slice(1);\n};\n/**\n * Returns Storybook display type for an option\n * @param {object} option - visualization option\n * @return {string} Storybook display type\n */\nexport const getOptionDisplayType = (option): string => {\n    const { oneOf, anyOf, type, enum: en, pattern, items } = option;\n    let displayTypes: string[] = [];\n\n    // wrap values in quotes only if enum or pattern is string\n    const conditionalQuote = type === 'string' ? '\"' : '';\n    if (en && Array.isArray(en)) {\n        displayTypes = en.map(e => {\n            const enumQuote = typeof e === 'string' ? '\"' : '';\n            return `${enumQuote}${e}${enumQuote}`;\n        });\n    } else if (type === 'array' && items) {\n        return `${getOptionDisplayType(items)}[]`;\n    } else if (anyOf && Array.isArray(anyOf)) {\n        return getOptionDisplayType(anyOf[0]);\n    } else if (oneOf && Array.isArray(oneOf)) {\n        displayTypes = oneOf.map(item => getOptionDisplayType(item));\n    } else if (Array.isArray(type)) {\n        displayTypes = type;\n    } else if (pattern) {\n        displayTypes = getPatternOptions(pattern).map(p => `${conditionalQuote}${p}${conditionalQuote}`);\n    }\n\n    if (displayTypes.length > 0) {\n        return `(${displayTypes.join(' | ')})`;\n    }\n    return type;\n};\n\n/**\n * Returns Storybook control type for an option\n * @param {object} option - visualization option\n * @param {string} optionKey - visualization option key\n * @return {ArgTypeControl} Storybook control object\n */\nexport const getOptionControl = (option, optionKey): ArgTypeControl => {\n    const { anyOf } = option;\n    const schema = Array.isArray(anyOf) && anyOf.length ? anyOf[0] : option;\n\n    const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;\n    const { maximum, minimum, enum: en } = schema;\n\n    const isColorOption = new RegExp(/color/, 'i').test(optionKey) && type !== 'array';\n\n    if (isColorOption) {\n        return { type: 'color' };\n    } else if (en && Array.isArray(en)) {\n        return { type: 'select', options: en };\n    } else if (anyOf && type === 'string' && anyOf[0].pattern) {\n        return { type: 'select', options: getPatternOptions(anyOf[0].pattern) };\n    } else if (type === 'number' && (minimum || maximum)) {\n        return {\n            type: 'range',\n            ...(typeof minimum === 'number' && { min: minimum }),\n            ...(typeof maximum === 'number' && { max: maximum }),\n        };\n    } else if (type === 'string') {\n        return { type: 'text' };\n    }\n\n    return { type };\n};\n\n/**\n * platform specific visualization option argTypes\n */\nconst objectTableControl = { control: { type: 'object' } };\nconst disableTableControl = { table: { disable: true } };\nexport const platformOptionArgTypes = {\n    context: objectTableControl,\n    dataSources: objectTableControl,\n    dataSource: disableTableControl,\n    options: disableTableControl,\n    onEventTrigger: { action: 'eventTrigger', ...disableTableControl },\n    hasEventHandlers: disableTableControl,\n};\n\n/**\n * Returns formatted Storybook argTypes for a visualization from its options schema\n * @param {OptionsSchema} options - visualization options\n * @param {string[]} requiredProps - required visualization props\n * @param {boolean} isPlatformViz - indicates if pure or platform visualization\n * @param {string} subcategory - nested property parent option name\n * @return {ArgTypes} Storybook argTypes\n */\nexport const optionsSchemaToArgTypes = ({\n    options = {},\n    requiredProps = [],\n    isPlatformViz = false,\n    subcategory = null,\n}: {\n    options: OptionsSchema;\n    requiredProps: string[];\n    isPlatformViz?: boolean;\n    subcategory?: string;\n}): ArgTypes => {\n    const validObjectTypeOptions = [\n        'lineDashStylesByField',\n        'seriesColorsByField',\n        'fieldActions',\n        'highlightValuesByField',\n    ];\n    let argTypes: ArgTypes = {};\n    Object.keys(options).forEach(optionKey => {\n        const option = get(options, optionKey);\n        if (option.type === 'object' && !validObjectTypeOptions.includes(optionKey)) {\n            // do not support controls for patternProperties, only nested properties\n            if (option.properties) {\n                argTypes = {\n                    ...argTypes,\n                    ...optionsSchemaToArgTypes({\n                        options: option.properties as OptionsSchema,\n                        isPlatformViz,\n                        requiredProps,\n                        subcategory: optionKey,\n                    }),\n                };\n            }\n        } else {\n            const { description, default: optionDefault } = option;\n            const optionControl = getOptionControl(option, optionKey);\n            const control = isPlatformViz ? { type: 'text' } : optionControl;\n            const required = requiredProps.includes(optionKey);\n\n            let defaultValue = optionDefault;\n            if (!isPlatformViz && isDynamicOption(optionDefault as string)) {\n                defaultValue = null;\n            }\n\n            argTypes[optionKey] = {\n                description,\n                control,\n                name: optionKey,\n                defaultValue,\n                type: { required },\n                optionType: optionControl.type,\n                table: {\n                    type: { summary: getOptionDisplayType(option) },\n                    defaultValue: { summary: defaultValue },\n                    ...(subcategory && {\n                        category: 'Nested Options',\n                        subcategory,\n                    }),\n                },\n            };\n        }\n    });\n\n    if (isPlatformViz) {\n        Object.assign(argTypes, platformOptionArgTypes);\n    }\n    return argTypes;\n};\n\n/**\n * Helper which converts string visualization options to their required type\n * @param {any} value - option values\n * @param {string} expectedType - expected option type\n * @return {any} correctly typed option value\n */\nexport const transformOptionType = (value, expectedType = 'string'): any => {\n    const isStringValue = !isDynamicOption(value) && isString(value);\n    if (isStringValue && expectedType === 'boolean') return value == 'true';\n    else if (isStringValue && expectedType === 'number') return toNumber(value);\n    return value;\n};\n\n// stringify these fields for storybook controls' support\nconst FieldsToStringify = [\n    'layers',\n    'center',\n    'eventActions',\n    'fieldActions',\n    'legendLabels',\n    'lineDashStylesByField',\n    'seriesColors',\n    'additionalTooltipFields',\n    'seriesColorsByField',\n    'footerFields',\n    'highlightValuesByField',\n    'tooltipNodeFields',\n];\n\n/**\n * Helper which returns platform visualization options from Storybook controls\n * Utilizes argTypes to determine valid and nested options\n * @param {object} args - visualization story args\n * @param {ArgTypes} argTypes - visualization argTypes\n * @return {object} visualization options\n */\nexport const getOptionsFromArgTypes = (args: Record<string, any>, argTypes: ArgTypes): Record<string, any> =>\n    reduce(\n        argTypes,\n        (accum, val, option) => {\n            const subcategory = get(val, 'table.subcategory');\n            const { optionType, defaultValue } = argTypes[option];\n            let controlledOption = transformOptionType(get(args, option), optionType);\n            // filter options from react & json if set to default value or is undefined\n            if (optionType && controlledOption != null && controlledOption !== defaultValue) {\n                // parse the value if option is stringified as part of flattenVizOptions\n                if (FieldsToStringify.includes(option)) {\n                    try {\n                        controlledOption = JSON.parse(controlledOption);\n                    } catch (e) {\n                        controlledOption = null;\n                    }\n                }\n                if (subcategory) {\n                    if (!accum[subcategory]) accum[subcategory] = {};\n                    accum[subcategory][option] = controlledOption;\n                } else accum[option] = controlledOption;\n            }\n            return accum;\n        },\n        { ...omit(args.options, Object.keys(argTypes)) }\n    );\n\n/**\n * Helper which flattens objects single depth level\n * @param {object} options - visualization options object\n * @return {object} flattened visualization options\n */\nexport const flattenVizOptions = (options: Record<string, any>): Record<string, any> => {\n    const nonFlattenOptions = new Set([\n        'y2Fields',\n        'overlayFields',\n        'gaugeRanges',\n        'fieldActions',\n        'highlightValuesByField',\n        'headers',\n    ]);\n    return reduce(\n        options,\n        (accum, val, option) => {\n            if (!platformOptionArgTypes[option]) {\n                if (typeof val === 'object' && FieldsToStringify.includes(option))\n                    accum[option] = JSON.stringify(val);\n                else if (typeof val === 'object' && !nonFlattenOptions.has(option))\n                    accum = { ...accum, ...val };\n                else accum[option] = val;\n            }\n            return accum;\n        },\n        {}\n    );\n};\n/**\n * Returns value based on Storybook publishing status\n * @param {T} publishedStories - stories to include in published Storybook\n * @param {T} localStories - stories to include in local Storybook\n * @return {T} one of the two params\n */\nexport const getStoriesToInclude = <T>(publishedStories: T, localStories: T): T =>\n    process.env.STORYBOOK_PUBLISH ? publishedStories : localStories;\n\n/**\n * Returns component level stories to include, defaults to innclude all stories\n * @param {StoriesList} stories - stories to include in published Storybook\n * @return {object} CSF includeStories config\n */\nexport const componentStoriesToInclude = (stories: StoriesList): object =>\n    getStoriesToInclude({ includeStories: stories }, {});\n"],
+  "sourcesContent": ["import React from 'react';\nimport T from 'prop-types';\nimport isEmpty from 'lodash/isEmpty';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Heading from '@splunk/react-ui/Heading';\nimport Markdown from '@splunk/react-ui/Markdown';\nimport styled from 'styled-components';\nimport { merge } from 'lodash';\nimport { getOptionDisplayType, getPatternOptions } from '../../.storybook/utils/storybookUtils';\n\nconst Option = styled.div`\n    margin-top: 20px;\n`;\nconst OptionName = styled.div`\n    color: #5ca300;\n    padding-bottom: 5px;\n`;\nconst PairContainer = styled.div`\n    margin-left: 40px;\n    margin-top: 10px;\n`;\nconst PairTitle = styled.span`\n    display: inline-block;\n    color: #8293a7;\n    width: 80px;\n`;\n\nconst PairValue = styled.span`\n    font-family: 'Splunk Platform Mono', monospace;\n    white-space: pre;\n`;\n\nconst PairValueJSON = styled.div`\n    margin-left: 80px;\n    pre {\n        margin: 0;\n    }\n    code {\n        font-size: 12px;\n        font-family: 'Splunk Platform Mono', monospace;\n    }\n`;\n\nconst PropertiesWrapper = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 0 : 40)}px;\n    margin-top: 20px;\n`;\n\nconst PropertiesContainer = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 40 : 0)}px;\n    margin-top: 10px;\n`;\n\nconst PropertiesContent = styled.div`\n    margin-left: ${props => (props.isPatternProperty ? 40 : 0)}px;\n`;\n\n/**\n * @method isOneOfJsonSchema\n * @param {object} item\n * @returns {boolean}\n */\nconst isOneOfJsonSchema = item => item.oneOf && Array.isArray(item.oneOf);\n\n/**\n * get Or type as string\n * @method getOrType\n * @param {object} item\n * @param {string} res\n * @returns {string} res  eg: (string | number)\n */\nconst getOrType = item => {\n    let res = '';\n\n    if (isOneOfJsonSchema(item)) {\n        res = item.oneOf\n            .map(one => {\n                if (one.type !== 'array') {\n                    return one.type;\n                }\n                // eslint-disable-next-line no-use-before-define\n                return getArrayType(one, '');\n            })\n            .join(' | ');\n    } else if (Array.isArray(item.type)) {\n        if (isEmpty(item.default)) {\n            return item.type.join(' | ');\n        }\n\n        res = item.type.filter(itemType => itemType !== 'string').join(' | ');\n        res += ' | ';\n        res += `\"${item.default}\"`;\n    }\n\n    return res;\n};\n\n/**\n * get the array type as string\n * @method getArrayType\n * @param {object} item\n * @param {string} res\n * @returns {string} res  eg: arrayOf(arrayOf(string | number | arrayOf(string | number)))\n */\nconst getArrayType = (item, res = '') => {\n    if (item.type !== 'array') {\n        if (Array.isArray(item.type) || isOneOfJsonSchema(item)) {\n            return getOrType(item);\n        }\n\n        return item.type;\n    }\n\n    if (item.type === 'array') {\n        res += 'arrayOf('; // eslint-disable-line no-param-reassign\n    }\n    res += getArrayType(item.items, ''); // eslint-disable-line no-param-reassign\n    res += ')'; // eslint-disable-line no-param-reassign\n    return res;\n};\n\n/**\n * get the type of this option item\n * @method getType\n * @param {ojbect} item option item\n * @returns {string} type\n */\nexport const getType = item => {\n    if (isOneOfJsonSchema(item)) {\n        return `oneOf(${getOrType(item)})`;\n    }\n    if (item.enum && Array.isArray(item.enum)) {\n        const values =\n            !isEmpty(item.enum) && typeof item.enum[0] === 'string'\n                ? item.enum.map(v => `\"${v}\"`).join(', ')\n                : item.enum.join(', ');\n\n        return `oneOf([${values}])`;\n    }\n\n    if (Array.isArray(item.type)) {\n        return getOrType(item);\n    }\n\n    if (item.type === 'array') {\n        if ('items' in item) {\n            return `arrayOf(${getType(item.items)})`;\n        }\n        return 'array';\n    }\n    return item.type;\n};\n\n/**\n * get the default value as string\n * @method getDefaultValue\n * @param {object | boolean | number | string} defaultValue\n * @returns {string | object[]} default value\n */\nconst getDefaultValue = defaultValue => {\n    if (typeof defaultValue === 'boolean' || typeof defaultValue === 'number') {\n        return defaultValue.toString();\n    }\n    if (Array.isArray(defaultValue)) {\n        if (defaultValue.length > 1 && typeof defaultValue[0] === 'object') {\n            // return the array only if the defaultValue is an object array\n            return defaultValue;\n        }\n        const values = defaultValue.map(v => JSON.stringify(v)).join(', ');\n        return `[${values}]`;\n    }\n    return defaultValue;\n};\n\nconst Pair = ({ title, content }) => (\n    <PairContainer>\n        <PairTitle>{`${title}:`}</PairTitle>\n        {Array.isArray(content) ? (\n            <PairValueJSON>\n                <pre>\n                    <code>{JSON.stringify(content, null, 2)}</code>\n                </pre>\n            </PairValueJSON>\n        ) : (\n            <PairValue>{content}</PairValue>\n        )}\n    </PairContainer>\n);\n\nPair.propTypes = {\n    title: T.string,\n    content: T.oneOfType([T.string, T.arrayOf(T.object)]),\n};\n\nconst PropertyItems = ({ isPatternProperty = false, propsItems }) => (\n    <PropertiesContainer isPatternProperty={isPatternProperty}>\n        {isPatternProperty ? <PairTitle>{_('[fieldName]:')}</PairTitle> : null}\n        <PropertiesContent isPatternProperty={isPatternProperty}>{propsItems}</PropertiesContent>\n    </PropertiesContainer>\n);\n\nPropertyItems.propTypes = {\n    isPatternProperty: T.bool,\n    propsItems: T.array,\n};\n\nconst OptionItem = ({ name, type, desc, defaultValue, enumerable, PropertiesSection }) => (\n    <Option>\n        <OptionName>{name}</OptionName>\n        {desc ? <Markdown style={{ marginLeft: 40 }} text={desc} /> : null}\n        <Pair title={_('Type')} content={type} />\n        {enumerable?.length > 0 && (\n            <Pair\n                title={_('oneOf')}\n                content={`(${enumerable\n                    .map(\n                        entry =>\n                            `${typeof entry === 'string' ? '\"' : ''}${entry}${\n                                typeof entry === 'string' ? '\"' : ''\n                            }`\n                    )\n                    .join(' | ')})`}\n            />\n        )}\n        {defaultValue && <Pair title={_('Default')} content={defaultValue} />}\n        {PropertiesSection}\n    </Option>\n);\n\nOptionItem.propTypes = {\n    name: T.string,\n    type: T.string,\n    desc: T.string,\n    enumerable: T.arrayOf(T.oneOfType([T.string, T.number])),\n    defaultValue: T.oneOfType([T.string, T.arrayOf(T.object)]),\n    PropertiesSection: T.element,\n};\n\nOptionItem.default = {\n    PropertiesItem: null,\n};\n\nconst getPropertiesSection = (properties, patternProperties) => {\n    let allProperties = [];\n    let isPatternProperty = false;\n\n    // the properties either comes from property field of the option schema item\n    // or from the property field of each patternProperties of the option schema item\n    // can check table tableFormat and columnFormat as examples\n    if (!isEmpty(properties)) {\n        allProperties = [properties];\n    } else if (!isEmpty(patternProperties)) {\n        Object.keys(patternProperties).forEach(patternKey => {\n            const propsInPattern = patternProperties[patternKey].properties;\n            if (propsInPattern) {\n                allProperties.push(propsInPattern);\n            }\n        });\n\n        isPatternProperty = true;\n    }\n\n    if (allProperties.length) {\n        const allPropsItems = allProperties.map(props => {\n            const propsItems = Object.keys(props).map(pKey => {\n                const p = props[pKey];\n                let pType = p.anyOf?.[0]\n                    ? getOptionDisplayType({ ...p.anyOf?.[0], enum: p.enum })\n                    : getOptionDisplayType({ ...p, enum: p.enum });\n                const pDefault = getDefaultValue(p.default);\n\n                let pEnumerable;\n                // get nested oneOf property listing\n                if (typeof p.anyOf?.[0]?.pattern === 'string') {\n                    pEnumerable = getPatternOptions(p.anyOf[0].pattern);\n                } else if (p.anyOf?.[0]?.items?.enum?.length > 0) {\n                    // quick fix for nested `columnFormat` enumerables that replaces enums within brackets with raw JS types\n                    pType = pType.replace(/\\((.+?)\\)/g, 'string');\n                    pEnumerable = p.anyOf[0].items.enum;\n                } else if (p.anyOf?.[0]?.items?.items?.enum?.length > 0) {\n                    // quick fix for nested `tableFormat` enumerables that replaces enums within brackets with raw JS types\n                    pType = pType.replace(/\\((.+?)\\)/g, 'string');\n                    pEnumerable = p.anyOf[0].items.items.enum;\n                } else if (p.enum) {\n                    pEnumerable = p.enum;\n                }\n\n                // use the JS types (e.g. string, number) of the nested property if the nested property is an enumerable\n                if (pEnumerable?.length) {\n                    pType = p.anyOf?.[0]?.type !== 'array' ? p.anyOf?.[0]?.type : pType;\n                    if (Array.isArray(pType)) {\n                        pType = pType.join(' | ');\n                    }\n                }\n\n                return (\n                    <OptionItem\n                        key={pKey}\n                        name={pKey}\n                        type={pType}\n                        enumerable={pEnumerable}\n                        desc={p.description}\n                        defaultValue={pDefault}\n                    />\n                );\n            });\n            return (\n                <PropertyItems\n                    key={propsItems}\n                    isPatternProperty={isPatternProperty}\n                    propsItems={propsItems}\n                />\n            );\n        });\n\n        return <PropertiesWrapper isPatternProperty={isPatternProperty}>{allPropsItems}</PropertiesWrapper>;\n    }\n    return null;\n};\n\nconst OptionsDoc = ({ options, description, hiddenOptions = [] }) => (\n    <div>\n        {options.length === 0 ? (\n            <Heading level={4}> No Options</Heading>\n        ) : (\n            <Heading level={4}>Options</Heading>\n        )}\n        {description && <div>{description}</div>}\n        {Object.entries(options)\n            .filter(([key]) => !hiddenOptions.includes(key))\n            .map(([key, item]) => {\n                let type;\n                let enumerable = [];\n                let PropertiesSection = null;\n\n                // get oneOf property listing\n                if (typeof item.anyOf?.[0]?.pattern === 'string') {\n                    enumerable = getPatternOptions(item.anyOf[0].pattern);\n                } else if (item.anyOf?.[0]?.enum) {\n                    enumerable = item.anyOf?.[0]?.enum;\n                } else if (item.enum) {\n                    enumerable = item.enum;\n                }\n\n                // get the nested options inside {option}.items.anyof. e.g. 'layers' in Map\n                // eslint-disable-next-line no-unsafe-optional-chaining\n                if (item.anyOf?.[0]?.type === 'array' && 'anyOf' in item.anyOf?.[0]?.items) {\n                    type = getOptionDisplayType(item);\n                    const { patternProperties } = item;\n                    // merge the 3 objects together instead of showing the longest options in the array\n                    const option = item.anyOf?.[0]?.items?.anyOf;\n                    const mergedOptions = option.reduce((prev, next) => merge(prev, next), {});\n                    const { properties } = mergedOptions;\n                    PropertiesSection = getPropertiesSection(properties, patternProperties);\n                    return (\n                        <OptionItem\n                            key={key}\n                            name={key}\n                            type={type}\n                            enumerable={enumerable}\n                            desc={item.description}\n                            PropertiesSection={PropertiesSection}\n                        />\n                    );\n                }\n\n                if (item.type === 'object') {\n                    // get properties for object type\n                    type = item.type;\n                    const { properties } = item;\n                    const { patternProperties } = item;\n                    PropertiesSection = getPropertiesSection(properties, patternProperties);\n                } else if (enumerable?.length) {\n                    // use the JS types (e.g. string, number) of the property if the property is an enumerable\n                    type = item.anyOf?.[0]?.type;\n                    if (Array.isArray(type)) {\n                        type = type.join(' | ');\n                    }\n                } else {\n                    type = getOptionDisplayType({\n                        ...item.anyOf[0],\n                        enum: item.enum,\n                    });\n                }\n\n                return (\n                    <OptionItem\n                        key={key}\n                        name={key}\n                        // item.anyOf in the config.ts is a tuple which holds [{ type, pattern, items }, { type, pattern: DYNAMIC_OPTIONS_PATTERN }]\n                        type={type}\n                        enumerable={enumerable}\n                        desc={item.description}\n                        defaultValue={getDefaultValue(item.default)}\n                        PropertiesSection={PropertiesSection}\n                    />\n                );\n            })}\n    </div>\n);\n\nOptionsDoc.propTypes = {\n    options: T.object.isRequired,\n    description: T.string,\n    hiddenOptions: T.arrayOf(T.string),\n};\n\nexport default OptionsDoc;\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 \"lodash/isEmpty\";\nexport * from \"lodash/isEmpty\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Heading\";\nexport * from \"@splunk/react-ui/Heading\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Markdown\";\nexport * from \"@splunk/react-ui/Markdown\";\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/configUtils\";\nexport * from \"@splunk/visualizations-shared/configUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { get, omit, reduce, toNumber, isString } from 'lodash';\nimport type { OptionsSchema } from '@splunk/visualization-schemas';\nimport { isDynamicOption } from '@splunk/visualizations-shared/configUtils';\n\ninterface ArgTypeControl {\n    type: string;\n    options?: string[];\n    min?: number;\n    max?: number;\n}\n\nexport interface ArgTypeEntry {\n    description?: string;\n    control: ArgTypeControl;\n    name: string;\n    defaultValue?: any;\n    type: { required: boolean };\n    optionType: string;\n    table: {\n        type: { summary: string };\n        defaultValue?: { summary: any };\n        category?: string;\n        subcategory?: string;\n        disable?: boolean;\n    };\n}\n\nexport interface ArgTypes {\n    [key: string]: ArgTypeEntry;\n}\n\ntype StoriesList = RegExp | string[];\n\n/**\n * Returns type options from pattern\n * @example\n * // returns ['fixed', 'absolute', 'off']\n * getPatternOptions('\\$(\\w+:)?([^$|:]+?)(\\|[|\\w]+)?\\$|^fixed$|^absolute$|^off$')\n * @example\n * // returns []\n * getPatternOptions('^>.*')\n * @param {string} patternString - visualization option type pattern\n * @return {string[]} array of type options\n */\nexport const getPatternOptions = (patternString): string[] => {\n    if (patternString.indexOf('^#[') === 0) {\n        return patternString.slice(1).replace(/\\$/g, '').split('|^');\n    }\n    return patternString.replace(/\\$/g, '').split('|^').slice(1);\n};\n/**\n * Returns Storybook display type for an option\n * @param {object} option - visualization option\n * @return {string} Storybook display type\n */\nexport const getOptionDisplayType = (option): string => {\n    const { oneOf, anyOf, type, enum: en, pattern, items } = option;\n    let displayTypes: string[] = [];\n\n    // wrap values in quotes only if enum or pattern is string\n    const conditionalQuote = type === 'string' ? '\"' : '';\n    if (en && Array.isArray(en)) {\n        displayTypes = en.map(e => {\n            const enumQuote = typeof e === 'string' ? '\"' : '';\n            return `${enumQuote}${e}${enumQuote}`;\n        });\n    } else if (type === 'array' && items) {\n        return `${getOptionDisplayType(items)}[]`;\n    } else if (anyOf && Array.isArray(anyOf)) {\n        return getOptionDisplayType(anyOf[0]);\n    } else if (oneOf && Array.isArray(oneOf)) {\n        displayTypes = oneOf.map(item => getOptionDisplayType(item));\n    } else if (Array.isArray(type)) {\n        displayTypes = type;\n    } else if (pattern) {\n        displayTypes = getPatternOptions(pattern).map(p => `${conditionalQuote}${p}${conditionalQuote}`);\n    }\n\n    if (displayTypes.length > 0) {\n        return `(${displayTypes.join(' | ')})`;\n    }\n    return type;\n};\n\n/**\n * Returns Storybook control type for an option\n * @param {object} option - visualization option\n * @param {string} optionKey - visualization option key\n * @return {ArgTypeControl} Storybook control object\n */\nexport const getOptionControl = (option, optionKey): ArgTypeControl => {\n    const { anyOf } = option;\n    const schema = Array.isArray(anyOf) && anyOf.length ? anyOf[0] : option;\n\n    const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;\n    const { maximum, minimum, enum: en } = schema;\n\n    const isColorOption = new RegExp(/color/, 'i').test(optionKey) && type !== 'array';\n\n    if (isColorOption) {\n        return { type: 'color' };\n    } else if (en && Array.isArray(en)) {\n        return { type: 'select', options: en };\n    } else if (anyOf && type === 'string' && anyOf[0].pattern) {\n        return { type: 'select', options: getPatternOptions(anyOf[0].pattern) };\n    } else if (type === 'number' && (minimum || maximum)) {\n        return {\n            type: 'range',\n            ...(typeof minimum === 'number' && { min: minimum }),\n            ...(typeof maximum === 'number' && { max: maximum }),\n        };\n    } else if (type === 'string') {\n        return { type: 'text' };\n    }\n\n    return { type };\n};\n\n/**\n * platform specific visualization option argTypes\n */\nconst objectTableControl = { control: { type: 'object' } };\nconst disableTableControl = { table: { disable: true } };\nexport const platformOptionArgTypes = {\n    context: objectTableControl,\n    dataSources: objectTableControl,\n    dataSource: disableTableControl,\n    options: disableTableControl,\n    onEventTrigger: { action: 'eventTrigger', ...disableTableControl },\n    hasEventHandlers: disableTableControl,\n};\n\n/**\n * Returns formatted Storybook argTypes for a visualization from its options schema\n * @param {OptionsSchema} options - visualization options\n * @param {string[]} requiredProps - required visualization props\n * @param {boolean} isPlatformViz - indicates if pure or platform visualization\n * @param {string} subcategory - nested property parent option name\n * @return {ArgTypes} Storybook argTypes\n */\nexport const optionsSchemaToArgTypes = ({\n    options = {},\n    requiredProps = [],\n    isPlatformViz = false,\n    subcategory = null,\n}: {\n    options: OptionsSchema;\n    requiredProps: string[];\n    isPlatformViz?: boolean;\n    subcategory?: string;\n}): ArgTypes => {\n    const validObjectTypeOptions = [\n        'lineDashStylesByField',\n        'seriesColorsByField',\n        'stepPositionsByField',\n        'fieldActions',\n        'highlightValuesByField',\n    ];\n    let argTypes: ArgTypes = {};\n    Object.keys(options).forEach(optionKey => {\n        const option = get(options, optionKey);\n        if (option.type === 'object' && !validObjectTypeOptions.includes(optionKey)) {\n            // do not support controls for patternProperties, only nested properties\n            if (option.properties) {\n                argTypes = {\n                    ...argTypes,\n                    ...optionsSchemaToArgTypes({\n                        options: option.properties as OptionsSchema,\n                        isPlatformViz,\n                        requiredProps,\n                        subcategory: optionKey,\n                    }),\n                };\n            }\n        } else {\n            const { description, default: optionDefault } = option;\n            const optionControl = getOptionControl(option, optionKey);\n            const control = isPlatformViz ? { type: 'text' } : optionControl;\n            const required = requiredProps.includes(optionKey);\n\n            let defaultValue = optionDefault;\n            if (!isPlatformViz && isDynamicOption(optionDefault as string)) {\n                defaultValue = null;\n            }\n\n            argTypes[optionKey] = {\n                description,\n                control,\n                name: optionKey,\n                defaultValue,\n                type: { required },\n                optionType: optionControl.type,\n                table: {\n                    type: { summary: getOptionDisplayType(option) },\n                    defaultValue: { summary: defaultValue },\n                    ...(subcategory && {\n                        category: 'Nested Options',\n                        subcategory,\n                    }),\n                },\n            };\n        }\n    });\n\n    if (isPlatformViz) {\n        Object.assign(argTypes, platformOptionArgTypes);\n    }\n    return argTypes;\n};\n\n/**\n * Helper which converts string visualization options to their required type\n * @param {any} value - option values\n * @param {string} expectedType - expected option type\n * @return {any} correctly typed option value\n */\nexport const transformOptionType = (value, expectedType = 'string'): any => {\n    const isStringValue = !isDynamicOption(value) && isString(value);\n    if (isStringValue && expectedType === 'boolean') return value == 'true';\n    else if (isStringValue && expectedType === 'number') return toNumber(value);\n    return value;\n};\n\n// stringify these fields for storybook controls' support\nconst FieldsToStringify = [\n    'layers',\n    'center',\n    'eventActions',\n    'fieldActions',\n    'legendLabels',\n    'lineDashStylesByField',\n    'stepPositionsByField',\n    'seriesColors',\n    'additionalTooltipFields',\n    'seriesColorsByField',\n    'footerFields',\n    'highlightValuesByField',\n    'tooltipNodeFields',\n];\n\n/**\n * Helper which returns platform visualization options from Storybook controls\n * Utilizes argTypes to determine valid and nested options\n * @param {object} args - visualization story args\n * @param {ArgTypes} argTypes - visualization argTypes\n * @return {object} visualization options\n */\nexport const getOptionsFromArgTypes = (args: Record<string, any>, argTypes: ArgTypes): Record<string, any> =>\n    reduce(\n        argTypes,\n        (accum, val, option) => {\n            const subcategory = get(val, 'table.subcategory');\n            const { optionType, defaultValue } = argTypes[option];\n            let controlledOption = transformOptionType(get(args, option), optionType);\n            // filter options from react & json if set to default value or is undefined\n            if (optionType && controlledOption != null && controlledOption !== defaultValue) {\n                // parse the value if option is stringified as part of flattenVizOptions\n                if (FieldsToStringify.includes(option)) {\n                    try {\n                        controlledOption = JSON.parse(controlledOption);\n                    } catch (e) {\n                        controlledOption = null;\n                    }\n                }\n                if (subcategory) {\n                    if (!accum[subcategory]) accum[subcategory] = {};\n                    accum[subcategory][option] = controlledOption;\n                } else accum[option] = controlledOption;\n            }\n            return accum;\n        },\n        { ...omit(args.options, Object.keys(argTypes)) }\n    );\n\n/**\n * Helper which flattens objects single depth level\n * @param {object} options - visualization options object\n * @return {object} flattened visualization options\n */\nexport const flattenVizOptions = (options: Record<string, any>): Record<string, any> => {\n    const nonFlattenOptions = new Set([\n        'y2Fields',\n        'overlayFields',\n        'gaugeRanges',\n        'fieldActions',\n        'highlightValuesByField',\n        'headers',\n    ]);\n    return reduce(\n        options,\n        (accum, val, option) => {\n            if (!platformOptionArgTypes[option]) {\n                if (typeof val === 'object' && FieldsToStringify.includes(option))\n                    accum[option] = JSON.stringify(val);\n                else if (typeof val === 'object' && !nonFlattenOptions.has(option))\n                    accum = { ...accum, ...val };\n                else accum[option] = val;\n            }\n            return accum;\n        },\n        {}\n    );\n};\n/**\n * Returns value based on Storybook publishing status\n * @param {T} publishedStories - stories to include in published Storybook\n * @param {T} localStories - stories to include in local Storybook\n * @return {T} one of the two params\n */\nexport const getStoriesToInclude = <T>(publishedStories: T, localStories: T): T =>\n    process.env.STORYBOOK_PUBLISH ? publishedStories : localStories;\n\n/**\n * Returns component level stories to include, defaults to innclude all stories\n * @param {StoriesList} stories - stories to include in published Storybook\n * @return {object} CSF includeStories config\n */\nexport const componentStoriesToInclude = (stories: StoriesList): object =>\n    getStoriesToInclude({ includeStories: stories }, {});\n"],
   "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/common/OverviewDoc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewDoc.d.ts","sourceRoot":"","sources":["../src/common/OverviewDoc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAYhC,OAAO,EAAE,QAAQ,EAAa,MAAM,uBAAuB,CAAC;AAI5D,UAAU,aAAa;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;CACrC;AAED,UAAU,aAAa;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACjD;AAyFD,QAAA,MAAM,WAAW;YAAW,aAAa,GAAG,KAAK,CAAC,YAAY;;;;;CA+B7D,CAAC;AAOF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"OverviewDoc.d.ts","sourceRoot":"","sources":["../src/common/OverviewDoc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAYhC,OAAO,EAAE,QAAQ,EAAa,MAAM,uBAAuB,CAAC;AAI5D,UAAU,aAAa;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC;CACrC;AAED,UAAU,aAAa;IACnB,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACjD;AAyFD,QAAA,MAAM,WAAW;YAAW,aAAa,GAAG,KAAK,CAAC,YAAY;;;;;CAgC7D,CAAC;AAOF,eAAe,WAAW,CAAC"}

package/common/OverviewDoc.js

@@ -493,7 +493,7 @@ Tips.propTypes = {
   tips: prop_types_exports.array
 };
 var OverviewDoc = (props) => {
-  const { typeOfViz, type, overview, tips, variations } = props.overview;
+  const { typeOfViz, type, overview, note, tips, variations } = props.overview;
   const { variationCode } = props;
   const vizTypeDisplayNameMap = {
     ["Trends" /* TRENDS */]: "Trend",
@@ -508,7 +508,7 @@ var OverviewDoc = (props) => {
       icon: chipType[typeOfViz].icon
     },
     vizType
-  )), /* @__PURE__ */ react_exports.createElement(Prose_default, null, /* @__PURE__ */ react_exports.createElement(Paragraph_default, { "data-test": "overview-description" }, overview), /* @__PURE__ */ react_exports.createElement(Tips, { "data-test": "tips", tips })), variationCode && /* @__PURE__ */ react_exports.createElement(Variations, { variations, type, variationCode }));
+  )), /* @__PURE__ */ react_exports.createElement(Prose_default, null, /* @__PURE__ */ react_exports.createElement(Paragraph_default, { "data-test": "overview-description" }, overview), note && /* @__PURE__ */ react_exports.createElement(Paragraph_default, { "data-test": "overview-note" }, note), /* @__PURE__ */ react_exports.createElement(Tips, { "data-test": "tips", tips })), variationCode && /* @__PURE__ */ react_exports.createElement(Variations, { variations, type, variationCode }));
 };
 OverviewDoc.propTypes = {
   overview: prop_types_exports.object,