Make the Gauge responsive and centered

[MarcSkovMadsen]

Panel 0.10.2

When trying to create a streaming dashboard for awesome-panel.org I struggled a lot with the Gauge. It seems the size and position cannot really be changed. I.e. as a user you are not in control of the look and feel of your dashboard.

import panel as pn
pn.extension("echarts")

STYLE = """
.react-grid-item {
    border: 1px solid lightgray;
}
"""
pn.config.raw_css.append(STYLE)

template = pn.template.ReactTemplate(row_height=200)

template.main[0:3, 0:3] = pn.indicators.Gauge(
    name="Failure Rate",
    value=10,
    bounds=(0, 100),
    sizing_mode="stretch_both",
    background="whitesmoke",
)

for row in range(0, 3):
    for col in range(3, 12):
        template.main[row, col] = pn.indicators.Gauge(
            name="Failure Rate",
            value=10,
            bounds=(0, 100),
            sizing_mode="stretch_both",
            background="whitesmoke",
        )

template.servable()

Solution

Make the gauge responsive (or provide size parameter) and center aligned.

Additional Context

Responsiveness would enable users to resize the react-grid-item panel or even maximize it. I.e. they can have a very powerful application where they are in control of which indicators gets the most attention.

[MarcSkovMadsen]

Workaround for horizontal alignment

You can horizontally align the Gauge but it is tedious and not a lot of users know this trick

pn.Row(
    pn.layout.HSpacer(),
    pn.indicators.Gauge(
        name="Failure Rate",
        value=10,
        bounds=(0, 100),
        background="whitesmoke",
        align="center"
    ),
    pn.layout.HSpacer(),
    sizing_mode="stretch_width"
)