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

Hello
i want to view and html webpage inside a dashboard component.
how i can do this?

thanks

Is there a way to use plotly or other chart modules instead of nivo for the dash?

No, unable to load plot into elements

I installed streamlit-elements to make a dashboard.

But I don’t know how to use custom font with streamlit-elements.
Even if you apply a custom font to streamlit itself, it will not be reflected in streamlit-elements parts.

How can I use custom fonts with streamlit-elements?

image
Hello Gaku. Yokoyama, is this what you want?

import streamlit as st
from streamlit_elements import elements, mui

with elements(key='test'):
    mui.Typography(
        'Hello Gaku. Yokoyama, is this what you want?',
        sx={'font-family': 'serif'}  # 'fantasy' 'cursive'
        )

Thanks for the advice.
I tried that too.

‘serif’, ‘fantasy’ and ‘cursive’ seem to be set to be used in streamlit-elements (mui?).
I want to use a font found on goggle fonts.

Even if I add a font so that it can be used with streamlit, it seems that it is not visible in streamlit-elements (mui?).
I checked with chrome’s developer tool.

Please tell me how to use fonts found in goggle fonts in streamlit-elements (mui?).

35FF8668-3814-4384-8A68-1B676AAD4340
I understand, now it should be what you want. :blush:

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

with elements(key='test'):
    with html.head():
        html.link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Sofia')
    mui.Typography(
        'Hello Gaku. Yokoyama, is this what you want?',
        sx={'font-family': 'Sofia', 'font-size': '22px'}  # 
        )

Wonderful.
Exactly what I wanted.

Thank you.

I want to develop this type of dashboards, Just want to see for reference. But I couldn’t able to open this link, Could you please help me?

Did you found a solution to use streamlit and other plotting packages like ploty or altair in the dashboard

1 Like

Hello
Could you please help an example like this please:
I would like to put multiple st-annotated-text items inside dashboard component and achieve drag and drop like function.
Could anyone please help. Desperately looking for some help/direction
Thanks
Sai

Hi @okld,

I’m trying to use your component and create the List from mui components. I’m not sure how to use it and pass necessary list of items into elements, and also images.
Could you please suggest me how to approach the List element with diff kind of list types described in Mui Documentation?

This is the code something that I understood from your explanations from your Git instructions:

 with elements("new_element"):
     with mui.List(sx={{ "width": '100%', "maxWidth": 360, "bgcolor": 'background.paper' }}):
         with mui.ListItem(alignItems="flex-start"):
             with mui.ListItemAvatar:
                 mui.Avatar(alt="Remy Sharp", src="/resources/logo.png" ) ```

Hi @Dusan_P ,

This is how I did it for a streaming message queue I was creating:

with elements("new_element"):
    with mui.Paper(key = 'some_key')
        with mui.List(dense = True):
            with mui.ListItem(key = item_idx, divider = True):
                mui.ListItemIcon(mui.icon.CheckCircleOutlineOutlined)
                mui.ListItemText(primary = 'some_text')  

I have a different key index (i.e. item_idx) for each item in the list since I was working with a message queue. You can switch the icon for the avatar; the concept should be the same.

Hope this helps!

Andreas

Hi @a.man, thanks for answer. I was figuring the mui elements yesterday so it is also a little bit familiar. Is your “item_idx” list or not? I’m confused because I’m expecting that i can provide some let say datatable, or only a list and then mark columns which i can provide data to list elements like? Or I need to create inside mui.List for each?

I want to achieve something like: custom card with all elements in some order, to be the item of the list, and just provide it with the necessary data from DT.
Sorry if it is a bit confusing from my side.

item_idx is just an integer in my case. I am not sure if you can provide a list to the mui.ListItem() component, I haven’t tried, but you can definitely iterate through a list and output the data you want.

I guess one way to implement what you have in my is the following. Let’s assume this is your DataTable (DT); a list of dictionaries:

DT = [{"key1": "value2", ...,  "keyn": "valuen"}, 
       .
       .
       ., 
      {{"key1": "value2", ...,  "keyn": "valuen"}]

then I would iterate through each dictionary in the list:

with mui.Paper(key = "some_key"):
   with mui.List(dense = True):
      for item_idx in range(0, len(DT)):
         with mui.ListItem(key = item_idx, divider = True)
            mui.ListItemText(primary = DT[item_idx]["key1"] + DT[item_idx]["key2"] + ...)
1 Like

is there an easy tutorial how to use this?

I studied your bump chart and created a line chart for my project. It helped tons… thanks! :tada:

you need a download a wechat app and register a wechat account. than you can visit this url in wechat app.

you are welcome.

Thanks I have found the similar solution for this. Here it is if anyone needs:

with elements("new_element"):
    with mui.Paper(key = 'some_key', elevatio={3},variant="outlined"):
        with mui.List(sx={ "width": '100%', "bgcolor": '' }):
                          for idx, row in enumerate(myDT):
                              with mui.ListItem(key = f"list_item{idx}"):
                                  mui.Checkbox(key=f"checkbox_{idx}",onChange=lambda e: function_clicked(e, row['item']))

The only problem I have here is that always the last row item is passed to the function, but not the one that is checked/clicked.