Compound.Pill

Create a pill SVG compound (rounded rectangle with auto-sized text centered inside)

SyntaxExampleDefinition

DaxLib.SVG.Compound.Pill( x, y, width, height, txt, color, paddingX, paddingY )

Parameter	Type	Required	Default	Description
x	INT64			The x position of compound
y	INT64			The y position of compound
width	INT64			The width of the compound
height	INT64			The height of the compound
txt	STRING			The text to display
color	STRING		BLANK()	Optional: The hex color of the pill, e.g., "#01B8AA80". Defaults to "#01B8AA"
paddingX	DECIMAL		0.05	Optional: The horizontal padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0.05
paddingY	DECIMAL		0.02	Optional: The vertical padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0.02

STRING SVG Pill

DaxLib.SVG.SVG(
    500,
    100,
    BLANK(),
    DaxLib.SVG.Compound.Pill(
        0,                  // x
        0,                  // y
        500,                // width
        100,                // height
        MAX( Products[Brand] ), // txt
        "#EC008C",          // color
        0.05,               // paddingX
        0.02                // paddingY
    ),
    BLANK()
)

function 'DaxLib.SVG.Compound.Pill' =
        (
            x: INT64,
            y: INT64,
            width: INT64,
            height: INT64,
            txt: STRING,
            color: STRING = BLANK(),
            paddingX: DOUBLE = 0.05,
            paddingY: DOUBLE = 0.02
        ) =>

        // Apply padding to dimensions
        VAR _X =            x + (width * (IF(ISBLANK(paddingX), 0, paddingX) / 2))
        VAR _Y =            y + (height * (IF(ISBLANK(paddingY), 0, paddingY) / 2))
        VAR _Width =        width * (1 - IF(ISBLANK(paddingX), 0, paddingX))
        VAR _Height =       height * (1 - IF(ISBLANK(paddingY), 0, paddingY))

        VAR _Color = IF( NOT ISBLANK( color ), color, "#01B8AA" )

        VAR _Pill = 
            DaxLib.SVG.Element.Rect(
                _X,
                _Y,
                _Width * 0.98,
                _Height * 0.92,
                10,
                10,
                DaxLib.SVG.Attr.Shapes(
                    _Color,
                    0.2,
                    BLANK(),
                    _Color,
                    1
                )
            )

        // Auto-size font to fit text within pill
        VAR _AvailableWidth = _Width * 0.90
        VAR _CharWidthRatio = 0.55
        VAR _TextWidthAtOne = LEN( txt ) * _CharWidthRatio
        VAR _MaxFontFromWidth = IF( _TextWidthAtOne > 0, _AvailableWidth / _TextWidthAtOne, 12 )
        VAR _MaxFontFromHeight = _Height * 0.75
        VAR _FontSize = MAX( 4, MIN( 12, MIN( _MaxFontFromWidth, _MaxFontFromHeight ) ) )

        VAR _TextElement = 
            DaxLib.SVG.Element.Txt(
                _X + (_Width * 0.50),
                _Y + (_Height * 0.58),
                txt,
                0,
                0,
                DaxLib.SVG.Attr.Shapes( _Color ) &
                DaxLib.SVG.Attr.Txt(
                    "Segoe UI",
                    _FontSize,
                    BLANK(),
                    BLANK(),
                    "middle",
                    "middle"
                )
            )

        VAR _CombinedElements = 
            _Pill & 
            _TextElement

        RETURN

            IF( NOT ISBLANK( txt ), _CombinedElements )