✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

[BeyondMyself]

Thanks for this greate package.
I made a dashboard app:

if someone want to see it, can visit this url as below:

Python+Streamlit制作可拖拽、缩放的数据大屏

[VishnuS-S]

Looks real nice

[mikful]

This is awesome!

One thing I’ve found this that the date and time pickers now don’t work I think because they’ve been moved to MUI X: Migration from the lab - MUI X

Would anyone know how to update the package to get these working again? I can’t seem to get there on my end (I’m not very knowledgeable in React/JS and only getting started with Streamlit). I’ve created an issue here on the repo: Date and Time Pickers are within mui-x not mui lab · Issue #17 · okld/streamlit-elements · GitHub

Any help would be very appreciated.

[Marc_Richard]

Hi all,

Thank you for this awesome tool !!
My goal is to create a login page with an image as background. For the background, I followed the solution proposed by Fanilo. It works.
But when I add an ‘elements’ of the streamlit_elements, there is box (white color, which is in fact the primary background color of the theme) in top of the background.

from streamlit_elements import elements, mui, html
import streamlit as st
import base64

st.set_page_config(layout="wide")

@st.experimental_memo
def get_img_as_base64(file):
    with open(file, "rb") as f:
        data = f.read()
    return base64.b64encode(data).decode()

img_background = get_img_as_base64("background.png")

#=========================================================
page_bg_img = f"""
<style>

[data-testid="stAppViewContainer"] > .main {{
background-image: url("data:image/png;base64,{img_background}");
background-size: 180%;
background-position: top left; /*center*/
background-repeat: no-repeat;
background-attachment: local;  /*fixed*/
}}

[data-testid="stHeader"] {{
background: rgba(0,0,0,0);
}}

[data-testid="stToolbar"] {{
right: 2rem;
}}

[data-testid="stVerticalBlock"] {{
background-color: rgba(0,0,0,0);
}}

</style>
"""

st.markdown(page_bg_img, unsafe_allow_html=True)

# #=========================================================
with elements("test"):
    mui.Button("Test button", variant='contained')

Using chrome inspect, I can see this frame and I can manually remove the white box by changing the opacity. But I cannot do it programmatically by using the style.

Any suggestion to remove this white box created by streamlit_elements?

thank you.

Marc.

[koninhoo]

Wowwwwwww!

[andfanilo]

Hey Marc,

Try to embed your button in a Box with a transparent background color? Not totally tested so tell us if it works

with elements("test"):
    with mui.Box(sx={"bgcolor": "transparent"}):
        mui.Button("Test button", variant='contained')

Have a nice day,
Fanilo

[Marc_Richard]

Hi,

It doesn’t work .

If I change the color of the Box in blue to explore the result in inspect, see below how is the layout compared to the back white container.

Any other suggestions to try?

Marc

[imzde]

hi Marc,
what about configuring your config.toml file ?
here my test…

[imzde]

sorry…wrong screenshot…here the correct file…

[theme]
primaryColor=“#693851”
backgroundColor=“transparent”
secondaryBackgroundColor=“#0d4fd2”
textColor=“#773859”

[imzde]

Hi Mark,
unfortunately the solution works with the mui.button (or cards) , but with the default streamlit widgets not (yet)… here the screenshot…

[asehmi]

Nice example… I was able to convert your post and bits of the code to English (with the help of Google translate) and learned a bit. Thanks!

[Marc_Richard]

thank you imzde for the solution! I didn’t know that the Theme config value can be other that real color.

I have another technical question, which is a little bit more tricky.
I want to stick the button to the bottom of the sidebar. I tested many solutions using style (flex, height, etc.), but no one works. With the code below, you can see that the box height is defined by the button height. This is related to the ‘elements’ container that cannot be modified, but I have no clue to to fix that.

from streamlit_elements import elements, mui, html
import streamlit as st


with st.sidebar:

    with elements("test"):
    
        with mui.Box(
                    flexDirection="column",                   
                    sx={'bgcolor':'yellow',
                        'height':'100%'
                     }
                        ):
            mui.Button("Test Button", variant='contained')

[BeyondMyself]

You are welcome, your other examples also give me a lot of help, thank you very much.

[Jorrit]

Hi all,

Thanks for the great extension to Streamlit. To allow the user of our App some options we would like to render a Select Box on a mui.Card. We have been trying various different approaches, but couldn’t get the box to work correctly. Can you help with the correct syntax?

Reagrds,

Jorrit

import streamlit as st
from streamlit_elements import elements, dashboard, mui

st.set_page_config(layout="wide")

layout = [
    dashboard.Item("select_box_1", 0, 0, 6, 3),
    dashboard.Item("select_box_2", 6, 0, 6, 3),
]

def handle_select(event):
        st.write(event.target.value)

with elements("selectbox_question"):
    with dashboard.Grid(layout, draggableHandle=".draggable"):
        with mui.Card(key="select_box_1", sx={"display": "flex", "flexDirection": "column"}):
            mui.CardHeader(title="Select Box 1", className="draggable")
            with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
                with mui.Select('Options', label='Age', onChange=handle_select):
                    mui.MenuItem(key = '10', value = '2020') # this doesn't work
        
        with mui.Card(key="select_box_2", sx={"display": "flex", "flexDirection": "column"}):
            mui.CardHeader(title="Select Box 2", className="draggable")
            with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
                with mui.Select('Options', label='Age', onChange=handle_select):
                    mui.MenuItem(key = '10', value = '2020') # this doesn't work

       

[Jorrit]

Hi Nate, did you found a solution for this issue? I am stuck with same issue. Thanks, Jorrit

[Marc_Richard]

Hi Jorrit,

See the code below (I just kept the code related to the Select element):

import streamlit as st
from streamlit_elements import elements, dashboard, mui


st.set_page_config(layout="wide")

if 'value_selected' not in st.session_state:
    st.session_state.value_selected = ''
    
def handle_select(event, info):
        st.write(info)
        st.session_state.value_selected = info['props']['value']

with elements("selectbox_question"):
    with mui.Card(key="select_box_1", sx={"display": "flex", "flexDirection": "column"}):
        mui.CardHeader(title="Select Box 1")
        with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
            with mui.FormControl(sx={'width':'150px'}):
                mui.InputLabel("Option")
                with mui.Select(
                            value=st.session_state.value_selected,
                            label="Option",
                            onChange=handle_select,                                   
                            ):
                    mui.MenuItem("value A", value="A")
                    mui.MenuItem("value B", value="B")
                    mui.MenuItem("value C", value="C")
                    mui.MenuItem("value D", value="D")

Gives:

[Jorrit]

@Marc_Richard many thanks! This is exactly what I wanted.

[dirk]

This is one of the best Streamlit components I have ever seen. Awesome piece of work.

[Lucassib]

Hey guys, I rly love this dashboards but I’m having an issue. I want to put datagrids exactly how it is put in here Streamlit Gallery by Okld · Streamlit?

[Jeremy_Cahill]

Hi All,

Noob question, I’m trying to learn how to use Nivo but can’t seem to get any other plots to render besides the example Radar. Does anyone have examples of the other plots in streamlit (e.g. line, bar, scatter, etc from the nivo docs)?

Thanks!