The indicators do not get the fixed size and a part of them got invisible on the layout

Panel
1

I am using the following code to have a simple layout, but the indicators do not fit into the layout and I cannot resolve it. Please help me to get control of the indicators to a desired size and to be fitted into the layout.

import panel as pn
pn.extension()
import pandas as pd
import hvplot.pandas
df = pd.read_csv(“data/autompg.csv”)
gspec = pn.GridSpec(sizing_mode=‘stretch_both’, max_height = 800)
gspec[0, :3] = pn.Spacer(styles=dict(background=‘whitesmoke’))
gspec[1:3, 0] = pn.indicators.Dial(name=‘Engine’, value = 100, bounds=(0, 3000), format = ‘{value} rpm’,
colors=[(0.2, ‘green’), (0.8, ‘gold’), (1, ‘red’)])
gspec[1:3, 1:3] = df.hvplot.hist(“weight”, bins = 10, color = ‘orange’)
gspec[3:5, 0] = df.hvplot.scatter(x = ‘mpg’, y = ‘accel’, by = ‘origin’)
.opts(legend_position=‘top_left’, legend_offset = (0, 10), legend_muted = True, toolbar = None)
gspec[3:5, 1] = pn.indicators.Dial(name=‘Failure Rate’, value=10, bounds=(0, 100))
gspec[4:5, 2] = pn.Column(
pn.widgets.FloatSlider(),
pn.widgets.ColorPicker(),
pn.widgets.Button(name=‘Click me!’, button_type = ‘success’))
gspec

The output is that it is not a well-placed dashboard:

layout1
layout12181×1511 181 KB

1 Like
2

Hi @BlueBit

Try posting a minimum, reproducible example. Then it should be relative easy to help.

Some things that make your code not runnable/ reproducible

  • missing panel import and extension
  • use of invalid quotations
  • missing the data set
  • a non valid .opts ... line
3

Dear @Marc ,
Thanks a lot for your reply, and sorry for a bit of non-organized code. I just added the panel and extension in the code. But I cannot attach data as I am the new user, so please download it from here:
https://www.dropbox.com/scl/fi/wvd8du0yb62kfxlf3mx7o/autompg.csv?rlkey=gh94czdc8doi7ojn1v2hp08sc&dl=1

I really appreciate your view and help on this matter, I am still confused to rectify it.

1 Like
4

This is the data

autompg.csv (23.6 KB)

5

This one works better. Its a little bit counter intuitive. To limit the height of the Dials i had to set their max_widths. I then also aligned them center.

image
image1637×822 66.6 KB 

import panel as pn

pn.extension(sizing_mode="stretch_width")
import pandas as pd
import hvplot.pandas

df = pd.read_csv(
    "https://discourse.holoviz.org/uploads/short-url/xQriadGkvYVmP3vnRyYl7tdovxn.csv"
)
gspec = pn.GridSpec(sizing_mode="stretch_both", max_height=800)
gspec[0, :3] = pn.Spacer(styles=dict(background="#8c93ad"))
gspec[1:3, 0] = pn.indicators.Dial(
    name="Engine",
    value=100,
    bounds=(0, 3000),
    format="{value} rpm",
    colors=[(0.2, "#8c93ad"), (0.8, "#a3ad8c"), (1, "#ad958c")],
    max_width=450,
    align="center",
)
gspec[1:3, 1:3] = df.hvplot.hist("weight", bins=10, color="#989eb5", responsive=True)
gspec[3:5, 0] = df.hvplot.scatter(x="mpg", y="accel", by="origin", responsive=True, color=["#8ca3ad", "#a3ad8c", "#ad958c"])
gspec[3:5, 1] = pn.indicators.Dial(name="Failure Rate", value=10, bounds=(0, 100), colors=[(0.2, "#8c93ad"), (0.8, "#a3ad8c"), (1, "#ad958c")], max_width=250, align="center")
gspec[3:5, 2] = pn.Column(
    pn.widgets.FloatSlider(),
    pn.widgets.ColorPicker(),
    pn.widgets.Button(name="Click me!", button_type="success", stylesheets=["""
.bk-btn-success {
    background: #8c93ad;
}
.bk-btn-success:hover {
    background-color: #c6c9d6;
}
    """]),
    max_width=300, align="end"
)
gspec.servable()
1 Like
6

Hi @Marc,
I am really grateful for your help. I went up and down to resolve it, but your magic parameters did help it. I did not find them in the user guide on the Panel website, such as responsive=True and max_width.

I am wondering why did you ignore opts()? are they not fully workable?

7

Regarding the opts. I overlooked that they where coming from the line above. The way you insert the code confused me. normally code is inserted with working quotations and indentation. Here not.

8

Hi @BlueBit

Which page(s) are you referring to as the user guide?

The sizing_mode is explained in this how-to guide Control Size. The max_width is not. I’ve requested it described here. #5381