Compound.Pill

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

SyntaxExampleDefinition

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

Parameter	Type	Required	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
paddingX	DECIMAL		Optional: The horizontal padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0
paddingY	DECIMAL		Optional: The vertical padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0
txt	STRING		The text to display
color	STRING		The hex color of the pill, e.g., "#01B8AA80"

STRING SVG Pill

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

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

        // 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 _Pill = 
            DaxLib.SVG.Element.Rect(
                _X,                 // x
                _Y,                 // y
                _Width * 0.98,      // width
                _Height * 0.92,     // height
                10,                 // rx
                10,                 // ry
                DaxLib.SVG.Attr.Shapes(
                    color,          // fill
                    0.2,            // fillOpacity
                    BLANK(),        // fillRule
                    color,          // stroke
                    1,              // strokeWidth
                    BLANK(),        // strokeOpacity
                    BLANK()         // opacity
                ),                  // attributes
                BLANK()             // transforms
            )

        // 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),      // x
                _Y + (_Height * 0.58),     // y
                txt,                // txt
                0,                  // dx
                0,                  // dy
                DaxLib.SVG.Attr.Shapes(
                    color,          // fill
                    BLANK(),        // fillOpacity
                    BLANK(),        // fillRule
                    BLANK(),        // stroke
                    BLANK(),        // strokeWidth
                    BLANK(),        // strokeOpacity
                    BLANK()         // opacity
                ) &
                DaxLib.SVG.Attr.Txt(
                    "Segoe UI",     // fontFamily
                    _FontSize,      // fontSize (auto-sized)
                    BLANK(),        // fontWeight
                    BLANK(),        // fontStyle
                    "middle",       // textAnchor
                    "middle",       // baseline
                    BLANK(),        // textDecoration
                    BLANK(),        // letterSpacing
                    BLANK()         // wordSpacing
                ),                  // attributes
                BLANK()             // transforms
            )

        VAR _CombinedElements = 
            _Pill & 
            _TextElement

        RETURN

            IF( NOT ISBLANK( txt ), _CombinedElements )